/*
Theme Name: Twister Serviceportal
Theme URI: https://ti-swiss.com
Author: Twister Informatics GmbH
Author URI: https://ti-swiss.com
Description: Marken-Theme für das Twister-Kundenportal. Liefert die Optik (Rot/Schwarz, „informatics in motion") und das gebrandete Login, die eigentliche Ticket-, Abteilungs- und Offerten-Funktionalität stammt vom Plugin „ServicePortal". Nicht angemeldete Besucher sehen ausschliesslich das Login-Fenster; danach erscheint das echte Serviceportal. Die Startseite wird beim Aktivieren automatisch auf das Portal gesetzt.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twister-serviceportal
*/

:root{
  --ink:#121216; --ink-2:#1B1B21; --ink-3:#26262F; --line-d:#2E2E38;
  --brand:#E30613; --brand-2:#FF2D2D; --brand-dark:#c20410;
  --bg:#F4F5F7; --card:#FFFFFF; --text:#15151A; --muted:#6A6A77; --line-l:#E5E6EB;
  --open:#E30613; --prog:#F59E0B; --wait:#3B82F6; --done:#2FBF71;
  --fd:"Space Grotesk",system-ui,sans-serif; --fb:"Hanken Grotesk",system-ui,sans-serif; --fm:"Space Mono",ui-monospace,monospace;
  --radius:14px; --shadow:0 18px 50px -24px rgba(15,15,26,.3);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--fb);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
a{color:var(--brand);text-decoration:none}
h1,h2,h3,h4{font-family:var(--fd);margin:0;letter-spacing:-.02em}
input,select,textarea{font-family:inherit}
.tip-hidden{display:none!important}

/* =====================================================================
   LOGIN-GATE (nur für nicht angemeldete Besucher)
   ===================================================================== */
#tip-login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(227,6,19,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(255,45,45,.12), transparent 60%),
    var(--ink);
}
.login-card{
  width:100%;max-width:420px;background:var(--ink-2);border:1px solid var(--line-d);
  border-radius:var(--radius);padding:38px 34px;box-shadow:var(--shadow);color:#fff;
}
.login-logo{height:42px;width:auto;margin-bottom:22px;display:block}
.login-card h1{font-size:26px;color:#fff}
.login-card .sub{color:#A6A6B3;margin:8px 0 24px;font-size:15px;line-height:1.5}
.login-card .field{margin-bottom:16px}
.login-card label{display:block;font-size:13px;color:#C7C7D1;margin-bottom:6px;font-weight:600}
.login-card input[type=text],.login-card input[type=password]{
  width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--line-d);
  background:var(--ink-3);color:#fff;font-size:15px;
}
.login-card input::placeholder{color:#6A6A77}
.login-card input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(227,6,19,.25)}
.login-row{display:flex;align-items:center;justify-content:space-between;margin:6px 0 22px;font-size:13px;color:#C7C7D1}
.login-row label{display:flex;align-items:center;gap:7px;margin:0;font-weight:400;color:#C7C7D1}
.login-row a{color:var(--brand-2)}
.login-card .btn{
  width:100%;padding:14px;border:none;border-radius:10px;background:var(--brand);color:#fff;
  font-weight:700;font-size:16px;font-family:var(--fd);transition:.15s;
}
.login-card .btn:hover{background:var(--brand-dark)}
.login-card .btn[disabled]{opacity:.6;cursor:default}
.login-error{
  display:none;background:rgba(227,6,19,.12);border:1px solid rgba(227,6,19,.4);
  color:#FFB4B4;padding:10px 12px;border-radius:9px;font-size:14px;margin-bottom:18px;
}
.login-error.show{display:block}
.demo-hint{color:#8A8A97;font-size:13px;text-align:center;margin:18px 0 0}
.login-foot{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;
  color:#7A7A87;font-size:12px;border-top:1px solid var(--line-d);padding-top:18px;
}
.login-foot .lock{width:15px;height:15px}

/* =====================================================================
   PORTAL-SHELL (angemeldete Nutzer): Marken-Kopf + Fuss
   ===================================================================== */
.tip-shell{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.tip-topbar{
  background:var(--ink);color:#fff;display:flex;align-items:center;gap:16px;
  padding:0 26px;height:64px;position:sticky;top:0;z-index:50;
}
body.admin-bar .tip-topbar{top:32px}
.tip-topbar .tip-logo{height:30px;width:auto}
.tip-topbar .tip-sep{width:1px;height:26px;background:var(--line-d)}
.tip-topbar .tip-ptitle{font-family:var(--fd);font-weight:600;font-size:16px;letter-spacing:-.01em}
.tip-topbar .tip-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.tip-topbar .tip-conn{display:flex;align-items:center;gap:7px;color:#A6A6B3;font-size:13px}
.tip-topbar .tip-dot{width:8px;height:8px;border-radius:50%;background:var(--done);box-shadow:0 0 0 3px rgba(47,191,113,.2)}
.tip-topbar .tip-user{display:flex;align-items:center;gap:10px}
.tip-topbar .tip-avatar{
  width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-family:var(--fd);
}
.tip-topbar .tip-uname{font-size:14px;font-weight:600}
.tip-topbar .tip-logout{color:#C7C7D1;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.tip-topbar .tip-logout:hover{color:#fff}
.tip-topbar .tip-logout svg{width:15px;height:15px}

/* max-width ist der Standard; per Customizer (Design → „Serviceportal – Layout")
   einstellbar bzw. auf volle Breite umschaltbar – siehe tip_layout_inline_css(). */
.tip-content{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:30px 24px 60px}

.tip-footer{
  border-top:1px solid var(--line-l);background:#fff;color:var(--muted);
  font-size:13px;text-align:center;padding:20px 24px;
}
.tip-footer b{color:var(--text)}
.tip-footer .tag{color:var(--brand);font-style:italic}

.tip-plugin-missing{
  max-width:640px;margin:60px auto;background:#fff;border:1px solid var(--line-l);
  border-radius:var(--radius);padding:30px;
}
.tip-plugin-missing h2{margin-bottom:10px}

/* Mobile */
@media(max-width:640px){
  .tip-topbar{padding:0 16px;gap:10px}
  .tip-topbar .tip-conn{display:none}
  .tip-topbar .tip-ptitle{display:none}
  .tip-content{padding:20px 14px 48px}
}

/* =====================================================================
   PLUGIN-SKIN: Markenfarben über das ServicePortal-Frontend legen.
   Das Plugin kapselt seine Ausgabe in .sp-portal und nutzt CSS-Variablen.
   ===================================================================== */
.sp-portal{
  --sp-primary:var(--brand);
  --sp-border:var(--line-l);
  --sp-muted:var(--muted);
  --sp-bg:var(--bg);
  font-family:var(--fb);
}
.sp-portal h1,.sp-portal h2,.sp-portal h3,.sp-portal h4{font-family:var(--fd)}
.sp-portal .sp-stat .num{font-family:var(--fd)}
.sp-portal .sp-service:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(227,6,19,.10)}
.sp-portal .sp-service .price em{color:var(--brand)}
.sp-portal .sp-topbar .sp-company{font-family:var(--fd)}

/* Allgemeine Textlinks rot. Buttons/Register/Ansichten werden unten gezielt
   mit höherer Spezifität (a.klasse) wieder auf ihre eigene Farbe gesetzt. */
.sp-portal a{color:var(--brand)}

/* Primär-Buttons (roter Grund) – immer weisse, gut lesbare Schrift. */
.sp-portal .sp-btn,
.sp-portal a.sp-btn,
.sp-portal button.sp-btn,
.sp-portal .sp-btn:hover,
.sp-portal a.sp-btn:hover,
.sp-portal button.sp-btn:hover{
  background:var(--brand);color:#fff;font-family:var(--fd);font-weight:600;
}
.sp-portal .sp-btn:hover,
.sp-portal a.sp-btn:hover,
.sp-portal button.sp-btn:hover{background:var(--brand-dark);color:#fff}

/* Sekundär-Buttons (heller Grund) – dunkle Schrift behalten. */
.sp-portal .sp-btn-secondary,
.sp-portal a.sp-btn-secondary,
.sp-portal button.sp-btn-secondary{background:#fff;color:#1f2937}
.sp-portal .sp-btn-secondary:hover,
.sp-portal a.sp-btn-secondary:hover{background:var(--bg);color:#15151a}

/* Gefahr/Löschen-Buttons (heller Grund) – rote Schrift behalten. */
.sp-portal .sp-btn-danger,
.sp-portal a.sp-btn-danger,
.sp-portal button.sp-btn-danger{background:#fff;color:#b91c1c}
.sp-portal .sp-btn-danger:hover,
.sp-portal a.sp-btn-danger:hover{background:#fef2f2;color:#b91c1c}

/* Aktive Navigations-Register und aktive Ansicht – weisse Schrift auf Rot. */
.sp-portal .sp-nav a.active{background:var(--brand);border-color:var(--brand);color:#fff}
.sp-portal a.sp-tech-view{color:#1f2937}
.sp-portal .sp-tech-view.active,
.sp-portal a.sp-tech-view.active,
.sp-portal .sp-tech-view.active:hover{background:var(--brand);border-color:var(--brand);color:#fff}