/*
 * Giese GmbH — Corporate Design fuer Perfex CRM
 *
 * Quelle der Tokens: giese-website/src/app/(frontend)/styles/base.css
 * Wird von assets_helper.php:94 automatisch nach dem Core-CSS geladen und
 * ueberschreibt es deshalb ohne !important, wo die Spezifitaet reicht.
 *
 * Perfex 3.4.1 liefert bereits ein helles, neutrales Grau-Design
 * (Body #f4f4f5, Sidebar #f9f9f9). Die Marke setzt darauf nur die Akzente:
 * Rot statt Tailwind-Grau, Markenradien, Univers in den Ueberschriften.
 */

@font-face {
    font-family: 'Univers';
    src: url('../fonts/Univers_55_Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --gi-red: #ED1D23;
    --gi-red-dark: #8B0204;
    --gi-ink: #141414;
    --gi-ink-soft: #585858;
    --gi-grey-05: #f4f4f4;
    --gi-grey-10: #E6E6E6;
    --gi-grey-20: #CCCCCC;
    --gi-line: #e2e2e2;

    /* Semantik existiert in der Giese-CI nicht — die einzige Erfolgsmeldung
       der Website ist rot. Fuer Statusmeldungen und Kanban ist sie noetig:
       Gruen ist der Ton des Status "Gewonnen", Fehler nimmt das dunkle
       Markenrot, damit es sich vom Primaerrot der Buttons unterscheidet. */
    --gi-success: #7cb342;
    --gi-warning: #C77700;
    --gi-danger: #8B0204;

    --gi-r-card: 16px;
    --gi-r-input: 10px;
    --gi-pill: 999px;
    --gi-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --gi-font-ui: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --gi-font-brand: 'Univers', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------- Typografie
   Univers liegt nur als Regular (400) vor — giese-website/public/fonts enthaelt
   genau eine Datei. Im Fliesstext eines CRM wuerde jedes fette Wort als Faux
   Bold gerendert. Univers bleibt deshalb den Ueberschriften vorbehalten, wo das
   Regular-Gewicht ohnehin der Website entspricht; die UI nutzt Inter, das
   Perfex in vier echten Schnitten mitbringt. */
body,
.navbar,
.table,
.btn,
input,
select,
textarea {
    font-family: var(--gi-font-ui);
}

h1, h2, h3, h4,
.panel-heading,
.kan-ban-column-header,
.lead-modal-title {
    font-family: var(--gi-font-brand);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Bewusst ohne color: die Kanban-Spaltenkoepfe sind ebenfalls .panel-heading,
   bekommen ihren Hintergrund aber aus der Statusfarbe und ihre Schriftfarbe von
   Perfex' tw-text-white. Eine Farbe an dieser Stelle traefe beide Faelle und
   liesse den dunklen Status "Termin vereinbart" schwarz auf schwarz. */
h1, h2, h3, h4 {
    color: var(--gi-ink);
}

body {
    color: var(--gi-ink);
    background-color: var(--gi-grey-05);
}

/* ------------------------------------------------------------------- Flaechen */
.panel_s,
.kan-ban-content-wrapper > .panel_s {
    border-radius: var(--gi-r-card);
    border-color: var(--gi-line);
}

hr,
.table > tbody > tr > td,
.table > thead > tr > th {
    border-color: var(--gi-line);
}

/* ------------------------------------------------------------------- Buttons
   Pill nur fuer die primaere Aktion — das ist die Signatur der Marke. Sekundaere
   Knoepfe bleiben rechteckig, sonst wird eine Werkzeugleiste unruhig. */
.btn {
    border-radius: var(--gi-r-input);
    transition: background-color .2s var(--gi-ease), border-color .2s var(--gi-ease);
}

.btn-primary,
.btn-info {
    background-color: var(--gi-red);
    border-color: var(--gi-red);
    border-radius: var(--gi-pill);
    padding-left: 18px;
    padding-right: 18px;
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-info:hover,
.btn-info:focus,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--gi-red-dark);
    border-color: var(--gi-red-dark);
    color: #fff;
}

.btn-success {
    background-color: var(--gi-success);
    border-color: var(--gi-success);
}

.btn-danger {
    background-color: var(--gi-danger);
    border-color: var(--gi-danger);
}

.btn-warning {
    background-color: var(--gi-warning);
    border-color: var(--gi-warning);
}

/* --------------------------------------------------------------------- Links
   Fliesstext-Rot nimmt --gi-red-dark: Weiss auf #ED1D23 ergibt 4,37:1 und liegt
   damit unter WCAG AA — base.css:54 haelt das selbst fest. Fuer Flaechen ist
   das eine bewusste Markenentscheidung, fuer Text nicht tragbar. */
.panel-body a:not(.btn):not(.dropdown-toggle),
td a:not(.btn),
.text-primary,
.text-info {
    color: var(--gi-red-dark);
}

/* Perfex faerbt die Kanban-Sortierleiste und weitere Bedienlinks mit
   Tailwind blue-700 (#1d4ed8) — die einzige Farbe der Oberflaeche, die weder
   Grau noch Markenrot ist. */
.kan-ban-sort a,
a.dateadded,
a.leadorder,
a.lastcontact {
    color: var(--gi-red-dark);
}

.tw-bg-primary-600,
.tw-bg-primary-700 {
    background-color: var(--gi-red) !important;
}

.panel-body a:not(.btn):not(.dropdown-toggle):hover,
td a:not(.btn):hover {
    color: var(--gi-red);
}

/* ------------------------------------------------------------------ Sidebar */
.sidebar {
    background-color: #fff;
    border-right: 1px solid var(--gi-line);
}

#side-menu > li > a {
    border-radius: var(--gi-r-input);
    color: var(--gi-ink-soft);
    margin: 2px 8px;
}

#side-menu > li > a:hover {
    background-color: var(--gi-grey-05);
    color: var(--gi-ink);
}

#side-menu > li.active > a,
#side-menu > li > a.active {
    background-color: var(--gi-red);
    color: #fff;
}

#side-menu > li.active > a .menu-icon,
#side-menu > li > a.active .menu-icon {
    color: #fff;
}

/* ------------------------------------------------------------------- Eingaben */
.form-control,
.selectpicker,
.bootstrap-select .dropdown-toggle {
    border-radius: var(--gi-r-input);
    border-color: var(--gi-grey-20);
}

.form-control:focus {
    border-color: var(--gi-red);
    box-shadow: 0 0 0 3px rgba(237, 29, 35, .15);
}

/* -------------------------------------------------------------------- Kanban */
.kan-ban-content-wrapper {
    border-radius: var(--gi-r-card);
}

.kan-ban-content-wrapper .panel_s:hover {
    border-color: var(--gi-grey-20);
    box-shadow: 0 2px 8px rgba(20, 20, 20, .06);
}

/* ------------------------------------------------- Ausgeblendete Fremdbereiche
   Kosmetik, kein Zugriffsschutz — den leistet giese_ui_guard_routes(). Ohne das
   hier zeigt die Oberflaeche Einstiege, die anschliessend in der Weiterleitung
   enden.

   Alles unter .giese-reduced: die Klasse setzt giese_ui_body_class() nur fuer
   den Kunden, der Klarsicht-Betreiber behaelt die vollstaendige Oberflaeche.

   Die beiden Modal-Reiter laden ihre Tabelle per XHR gegen admin/proposals bzw.
   admin/tasks (views/admin/leads/lead.php:73,85) und blieben sonst leer.
   "Zu einem Kunden umwandeln" liegt dagegen im erlaubten leads-Controller: der
   Knopf funktioniert und erzeugt einen Kunden in einem Bereich, den der Kunde
   gar nicht sieht. */
.giese-reduced li:has(> a[href="#tab_proposals_leads"]),
.giese-reduced li:has(> a[href="#tab_tasks_leads"]),
.giese-reduced li:has(> a[href$="/admin/todo"]),
.giese-reduced li:has(> a[href$="/admin/staff/timesheets"]),
.giese-reduced a[href$="/admin/todo"],
.giese-reduced .lead-convert-to-customer,
/* Stoppuhr und Zeiterfassung gehoeren zum Aufgabenmodul. */
.giese-reduced li.header-timers,
/* Das Schnellanlage-Menue enthaelt fuer diese Rolle nur noch "Ticket". */
.giese-reduced li.icon:has(a > span > i.fa-plus) {
    display: none !important;
}