/*
 * GUYCOLLE bexio Services — Panel-Theme
 *
 * Eigenstaendig. Das frühere Package `guycollegmbh/filament-theme` ist ausgebaut, damit
 * entfallen auch dessen Vorgaben (0px-Radius, Schattenfreiheit, dunkle Sidebar) und die
 * `!important`-Kaskade, mit der sie zurueckgenommen werden mussten.
 *
 * Formensprache nach Sneat: heller Seitenhintergrund, runde Karten mit weichem Schatten,
 * helle Sidebar mit gefuellter Pille, schwebende Topbar, weich getoente Badges, luftige
 * Tabellen. Markenfarbe bleibt GUYCOLLE-Blau.
 *
 * Zur Farbe, weil es nicht offensichtlich ist: #00AEEF traegt keine weisse Schrift.
 * Kontrast 2,5:1, gefordert sind 4,5:1. Gefuellte Flaechen mit weissem Text nutzen darum
 * #0077A8 (5,0:1), der aktive Verlauf laeuft von #005E87 (6,8:1) dorthin. Das reine
 * #00AEEF bleibt Akzent fuer Raender, Icons und Fokusringe.
 *
 * Farbpalette und Schrift setzt `AdminPanelProvider` ueber Filaments eigene API. Hier steht
 * nur, was Filament nicht ueber Tokens abbildet: Form, Schatten, Flaechen.
 */

:root {
    /* Flaechen */
    --gc-bg:            #f5f5f9;
    --gc-surface:       #ffffff;
    --gc-border:        #d9dee3;

    /* Schrift */
    --gc-heading:       #566a7f;
    --gc-body:          #697a8d;
    --gc-muted:         #a1acb8;

    /* Marke */
    --gc-primary:       #00aeef;  /* Akzent, Raender, Icons, Fokus */
    --gc-primary-solid: #0077a8;  /* gefuellte Flaechen mit weisser Schrift (AA) */
    --gc-primary-deep:  #005e87;  /* dunkles Ende des aktiven Verlaufs */
    --gc-primary-soft:  #e8f8fe;  /* weiche Badges */

    /* Form */
    --gc-radius:        0.5rem;
    --gc-radius-sm:     0.375rem;
    --gc-shadow:        0 0.125rem 0.375rem 0 rgba(67, 89, 113, 0.12);
    --gc-shadow-lg:     0 0.3rem 0.75rem 0 rgba(67, 89, 113, 0.16);
}

/* ========================================================================
   Grundflaeche
   ======================================================================== */

.fi-body {
    background-color: var(--gc-bg);
    color: var(--gc-body);
}

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
    color: var(--gc-heading);
    font-weight: 600;
}

.fi-header-subheading,
.fi-section-header-description {
    color: var(--gc-muted);
}

/* ========================================================================
   Karten, Modals, Dropdowns
   ======================================================================== */

.fi-section,
.fi-card,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: var(--gc-radius);
    border-color: transparent;
    box-shadow: var(--gc-shadow);
}

/* Infolist (die Lese-Ansicht): Beschriftung klein und grau, der Wert als Text.
   Keine Karte je Eintrag, sonst sieht Lesen aus wie Bearbeiten. */
.fi-in-entry-wrp {
    border-radius: 0;
    box-shadow: none;
}

.fi-in-entry-wrp-label > span {
    color: var(--gc-muted);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.fi-in-text-item {
    color: var(--gc-heading);
}

.fi-modal-window,
.fi-dropdown-panel {
    border-radius: var(--gc-radius);
    box-shadow: var(--gc-shadow-lg);
}

.fi-avatar,
.fi-user-avatar {
    border-radius: 9999px;
}

/* ========================================================================
   Sidebar
   Hell, mit gefuellter Pille fuer den aktiven Eintrag. Der Verlauf bleibt im
   lesbaren Bereich: mit #00AEEF am hellen Ende waere die rechte Haelfte der
   Beschriftung nicht mehr lesbar.
   ======================================================================== */

.fi-sidebar,
.fi-sidebar-header {
    background-color: var(--gc-surface);
}

.fi-sidebar {
    border-right: 1px solid rgba(67, 89, 113, 0.08);
}

.fi-sidebar-nav {
    padding-inline: 0.75rem;
}

/* Die Eintraege einer zugeklappten Gruppe neben der Leiste, beim Ueberfahren mit der Maus
   (panel.js, 5.). Haengt am Ende der Seite, darum fest positioniert. */
.gc-nav-flyout {
    position: fixed;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 13rem;
    padding: 0.5rem;
    border: 1px solid rgba(67, 89, 113, 0.08);
    border-radius: var(--gc-radius);
    background-color: var(--gc-surface);
    box-shadow: 0 0.25rem 1rem 0 rgba(67, 89, 113, 0.2);
}

.gc-nav-flyout[hidden] {
    display: none;
}

.gc-nav-flyout-title {
    padding: 0.25rem 0.75rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gc-muted);
}

.gc-nav-flyout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--gc-radius-sm);
    font-size: 0.875rem;
    color: var(--gc-heading);
}

.gc-nav-flyout-item:hover,
.gc-nav-flyout-item:focus-visible {
    background-color: var(--gc-primary-soft);
    color: var(--gc-primary-solid);
    outline: none;
}

.gc-nav-flyout-badge {
    font-size: 0.75rem;
    color: var(--gc-muted);
}

/* Auf der schmalen Leiste zeigt Filament am Symbol einen Tooltip mit dem Namen der Gruppe.
   Die Liste nennt ihn selbst; der Tooltip laege darueber. */
body.gc-nav-flyout-open [data-tippy-root] {
    display: none !important;
}

/* Offene Rechnungen (Debitoren) auf dem Dashboard (filament/widgets/receivables): das Total,
   ein Balken noch nicht faellig und ueberfaellig mit 2px Fuge, darunter beide mit Betrag. Die
   Farben stehen nur an Balken und Punkt, die Zahlen in Textfarbe. Amber 600 statt 500: 500
   traegt auf Weiss keine 3:1 und faellt im Dunkeln aus dem Helligkeitsband. */
.gc-receivables-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.gc-receivables-total-value {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    color: rgb(var(--gray-950));
}

.gc-receivables-muted {
    font-size: 0.875rem;
    color: rgb(var(--gray-500));
}

.gc-receivables-bar {
    display: flex;
    gap: 2px;
    height: 0.75rem;
    margin-top: 1rem;
}

.gc-receivables-bar > span {
    min-width: 4px;
}

.gc-receivables-bar > span:first-child {
    border-start-start-radius: 4px;
    border-end-start-radius: 4px;
}

.gc-receivables-bar > span:last-child {
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
}

.gc-receivables-not-due {
    background-color: rgb(var(--primary-500));
}

.gc-receivables-overdue {
    background-color: rgb(var(--warning-600));
}

.gc-receivables-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(var(--gray-100));
}

.gc-receivables-legend dt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(var(--gray-500));
}

.gc-receivables-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.gc-receivables-value {
    margin-top: 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: rgb(var(--gray-950));
}

.gc-receivables-link {
    color: rgb(var(--primary-600));
}

.gc-receivables-link:hover,
.gc-receivables-link:focus-visible {
    text-decoration: underline;
}

.dark .gc-receivables-total-value,
.dark .gc-receivables-value {
    color: rgb(255 255 255);
}

.dark .gc-receivables-muted,
.dark .gc-receivables-legend dt {
    color: rgb(var(--gray-400));
}

.dark .gc-receivables-legend {
    border-top-color: rgb(255 255 255 / 0.05);
}

.dark .gc-receivables-link {
    color: rgb(var(--primary-400));
}

/* Kopf eines Diagramms (Umsatz auf dem Dashboard): die Auswahl des Zeitraums rutscht auf dem
   Handy unter die Beschreibung, statt sie auf eine Wortbreite zusammenzudruecken. */
.fi-wi-chart .fi-section-header > div {
    flex-wrap: wrap;
}

.fi-wi-chart .fi-section-header > div > .grid {
    min-width: min(100%, 20rem);
}

/* Der Text einer Zeit als «i» mit Blase (filament/zeiterfassung/text-bubble). Die Zelle hat
   den Abstand der Textspalten daneben; die Blase behaelt die Absaetze des Textes. */
.gc-text-bubble-cell {
    display: flex;
    padding: 1rem 0.75rem;
}

.gc-text-bubble {
    display: inline-flex;
    border-radius: 9999px;
    color: rgb(var(--primary-600));
    cursor: help;
    transition: color 0.15s ease;
}

.gc-text-bubble:hover,
.gc-text-bubble:focus-visible {
    color: rgb(var(--primary-500));
}

.gc-text-bubble:focus-visible {
    outline: 2px solid rgb(var(--primary-600));
    outline-offset: 2px;
}

.gc-text-bubble-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.tippy-box[data-theme~='gc-text-bubble'] .tippy-content {
    white-space: pre-line;
    text-align: start;
}

.fi-sidebar-item-button {
    border-radius: var(--gc-radius-sm);
    margin-block: 0.125rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover {
    background-color: rgba(67, 89, 113, 0.06);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: linear-gradient(72.47deg, var(--gc-primary-deep) 22.16%, var(--gc-primary-solid) 76.47%);
    box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 119, 168, 0.4);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: #ffffff;
}

/* Gruppen nach Sneat: der Gruppenkopf ist ein Menuepunkt mit Icon und Chevron, die
   Eintraege darunter tragen einen Punkt statt eines Icons. Filament liefert diese
   Struktur, sobald die Gruppe ein Icon hat - hier steht nur die Form dazu. */

.fi-sidebar-group-button {
    border-radius: var(--gc-radius-sm);
    margin-block: 0.125rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-sidebar-group-button:hover {
    background-color: rgba(67, 89, 113, 0.06);
}

.fi-sidebar-group-label {
    color: var(--gc-heading);
    font-size: 0.875rem;
}

.fi-sidebar-group-icon {
    color: var(--gc-body);
}

.fi-sidebar-group.fi-active .fi-sidebar-group-label,
.fi-sidebar-group.fi-active .fi-sidebar-group-icon {
    color: var(--gc-primary-solid);
}

/* Chevron: offen zeigt er nach unten, zu nach rechts. Filament nimmt ein Chevron-Up
   und dreht es zu um 180 Grad - das ergibt unten/oben, Sneat kennt unten/rechts. */
.fi-sidebar-group-collapse-button {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.fi-sidebar-group-collapse-button.-rotate-180 {
    transform: rotate(90deg);
}

/* Der Punkt genuegt, die Verbindungslinie zwischen den Punkten faellt weg. */
.fi-sidebar-item-grouped-border > div:not(:last-child) {
    display: none;
}

/* Aktiver Eintrag in einer Gruppe: helle Pille statt Verlauf, damit die Gruppe als
   Ganzes lesbar bleibt. Der Verlauf bleibt dem Dashboard, dem einzigen Eintrag ohne
   Gruppe - Filament legt ihn in eine Gruppe mit leerem Label, daher der Selektor. */
.fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: var(--gc-primary-soft);
    box-shadow: none;
}

.fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-sidebar-item-label {
    color: var(--gc-primary-solid);
}

.fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border > div:last-child {
    background-color: var(--gc-primary-solid);
}

/* ========================================================================
   Topbar — schwebend, als eigene Karte
   ======================================================================== */

.fi-topbar {
    background-color: transparent;
    box-shadow: none;
}

.fi-topbar > nav {
    background-color: var(--gc-surface);
    border-radius: var(--gc-radius);
    box-shadow: var(--gc-shadow);
    margin: 0.75rem 0.75rem 0;
}

/* ========================================================================
   Tabellen
   ======================================================================== */

.fi-ta-header-cell {
    color: var(--gc-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fi-ta-row {
    border-color: rgba(67, 89, 113, 0.08);
}

.fi-ta-row:hover {
    background-color: rgba(67, 89, 113, 0.04);
}

.fi-ta-cell {
    color: var(--gc-body);
}

/* ========================================================================
   Buttons, Tabs, Eingaben
   ======================================================================== */

.fi-btn,
.fi-tabs-item,
.fi-dropdown-list-item {
    border-radius: var(--gc-radius-sm);
}

.fi-btn {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.fi-btn.fi-color-primary {
    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 119, 168, 0.4);
}

.fi-btn:active {
    transform: translateY(1px);
}

.fi-input-wrp,
.fi-select-input {
    border-radius: var(--gc-radius-sm);
}

/* Eine echte Umrandung, kein Ring: Filament zeichnet den Rahmen als `ring-1`, also als
   Schatten. Das Theme ersetzt Schatten durch Form — ohne eigene Linie waere ein weisses
   Feld auf einer weissen Karte unsichtbar, und genau das war es auf der Zeiterfassung.
   Der Rahmen haengt am Feld und nicht am Hintergrund, damit es auf beiden sitzt. */
.fi-input-wrp {
    border: 1px solid var(--gc-border);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Kein Rahmen am Eingabefeld selbst, auch nicht am nativen Select: Filament steckt jedes in
   ein `.fi-input-wrp`, und ein zweiter Rahmen zeichnete ein Kaestchen im Kaestchen. So sah
   es bei der Tabellensuche aus (2026-09-28) und bei «pro Seite» und jedem Select mit
   `native()` (2026-09-30). Der Rahmen der Huelle reicht. */
.fi-input-wrp .fi-select-input {
    border: 0;
}

/* «pro Seite» und die Zahl daneben in derselben Groesse: Filament setzt die Zahl in
   Textgroesse, die Beschriftung kleiner, und so wirkten sie wie zwei Felder. */
.fi-pagination-records-per-page-select .fi-select-input {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.fi-input-wrp:focus-within {
    border-color: var(--gc-primary);
    box-shadow: 0 0 0 0.125rem rgba(0, 174, 239, 0.25);
}

/* ========================================================================
   Badges — weich getoent statt kraeftig gefuellt
   ======================================================================== */

.fi-badge {
    border-radius: var(--gc-radius-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.fi-badge.fi-color-primary,
.fi-badge.fi-color-info {
    background-color: var(--gc-primary-soft);
    color: var(--gc-primary-solid);
}

/* ========================================================================
   Statistik-Kacheln
   ======================================================================== */

.fi-wi-stats-overview-stat-value {
    color: var(--gc-heading);
    font-weight: 600;
}

.fi-wi-stats-overview-stat-label {
    color: var(--gc-muted);
    font-size: 0.8125rem;
}

/* ========================================================================
   Anmeldeseite
   ======================================================================== */

.fi-simple-layout {
    background-color: var(--gc-bg);
}

/* ========================================================================
   Dark Mode — blaustichig wie bei Sneat, nicht neutral
   ======================================================================== */

.dark .fi-body {
    background-color: #232333;
    color: #b7b9d3;
}

.dark .fi-sidebar,
.dark .fi-sidebar-header,
.dark .fi-topbar > nav {
    background-color: #2b2c40;
    border-right-color: rgba(255, 255, 255, 0.06);
}

/* Logo-Umschaltung: `dark:block` gibt es in Filaments Stylesheet nicht. */
.gc-logo-light {
    display: block;
}

.gc-logo-dark {
    display: none;
}

.dark .gc-logo-light {
    display: none;
}

.dark .gc-logo-dark {
    display: block;
}

.dark .fi-in-text-item {
    color: #cbcbe2;
}

.dark .fi-in-entry-wrp-label > span {
    color: #8592a3;
}

.dark .fi-input-wrp {
    border-color: rgba(255, 255, 255, 0.12);
}

.dark .fi-sidebar-group-label {
    color: #cbcbe2;
}

.dark .fi-sidebar-group-icon {
    color: #b7b9d3;
}

.dark .fi-sidebar-group-button:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .fi-sidebar-group.fi-active .fi-sidebar-group-label,
.dark .fi-sidebar-group.fi-active .fi-sidebar-group-icon {
    color: #4dc8f0;
}

.dark .fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: rgba(0, 174, 239, 0.16);
}

.dark .fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-sidebar-item-label {
    color: #4dc8f0;
}

.dark .fi-sidebar-group:not([data-group-label=""]) .fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border > div:last-child {
    background-color: #4dc8f0;
}

.dark .fi-section,
.dark .fi-card,
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat {
    background-color: #2b2c40;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(15, 20, 34, 0.4);
}

.dark .fi-header-heading,
.dark .fi-section-header-heading,
.dark .fi-wi-stats-overview-stat-value {
    color: #cbcbe2;
}

.dark .fi-ta-row:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.dark .fi-badge.fi-color-primary,
.dark .fi-badge.fi-color-info {
    background-color: rgba(0, 174, 239, 0.16);
    color: #4dc8f0;
}

.dark .fi-simple-layout {
    background-color: #232333;
}

/* ========================================================================
   Bewegung nur, wenn sie gewuenscht ist
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    .fi-sidebar-item-button,
    .fi-sidebar-group-button,
    .fi-sidebar-group-collapse-button,
    .fi-input-wrp,
    .fi-btn,
    .gc-chat-input,
    .gc-chat-attach {
        transition: none;
    }

    .fi-btn:active {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Hilfsklassen, die Filaments mitgeliefertes CSS nicht enthaelt
   ---------------------------------------------------------------------------
   Die Oberflaeche wird mit Filaments fertigem Stylesheet ausgeliefert, nicht mit
   einem eigenen Tailwind-Durchlauf. Klassen, die Filament selbst nirgends benutzt,
   fehlen darin schlicht - in der Zeiterfassung fiel das an den Zeilenumbruechen der
   Beschreibung auf, die stillschweigend verschwanden.
   --------------------------------------------------------------------------- */

.whitespace-pre-line {
    white-space: pre-line;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Der laufende Zeiteintrag. Eigene Klasse statt ring-1 ring-primary-500: die
   Ring-Farbe kommt sonst aus Tailwinds Vorgabe und ist blau, nicht unsere. */
.gc-running {
    box-shadow: 0 0 0 1px var(--gc-primary-solid), 0 0.125rem 0.5rem rgba(0, 119, 168, 0.15);
}

/* Hinweisfläche für zurückgestellte Zeiten. Eigene Klassen, weil Filaments
   Stylesheet die Warn-Farbstufen nur in seinen eigenen Bausteinen führt: als
   Hilfsklassen (bg-warning-50, text-warning-600) gibt es sie nicht, sie fallen
   stillschweigend auf Grau zurück. */
.gc-notice {
    background-color: #fffbeb;
    border: 1px solid #fcd34d;
}

.gc-notice-text {
    color: #b45309;
}

.dark .gc-notice {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
}

.dark .gc-notice-text {
    color: #fbbf24;
}

/* Positionstabelle der Offerte (resources/views/filament/quote/positions.blade.php).
   Eigene Klassen, weil Filaments Stylesheet nur die Hilfsklassen fuehrt, die es selbst
   benutzt: uppercase, ps-5, border-t-2 und aehnliche gibt es dort nicht, sie fielen
   stillschweigend weg. */
.gc-positions thead th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Positionen in einer Gruppe stehen eingerueckt unter ihrer Ueberschrift. */
/* Positionstabelle auf dem Handy: Anzahl, Einzelpreis und Rabatt klein unter dem Text
   statt in eigenen Spalten, damit das Total sichtbar bleibt (2026-09-30). */
.gc-positions .gc-pos-mobile {
    display: none;
}

@media (max-width: 639px) {
    .gc-positions .gc-pos-detail {
        display: none;
    }

    .gc-positions .gc-pos-mobile {
        display: block;
    }
}

.gc-positions .gc-pos-indent {
    padding-inline-start: 1.25rem;
}

/* Eine Ueberschrift bekommt Luft nach oben, damit sie den Abschnitt eroeffnet. */
.gc-positions .gc-pos-heading > td {
    padding-top: 1rem;
    padding-bottom: 0.25rem;
}

/* Zwischentotal und Summenblock schliessen ab: ein kraeftigerer Strich darueber. */
.gc-positions .gc-pos-subtotal,
.gc-positions tfoot tr:first-child {
    border-top: 2px solid var(--gc-border);
}

.gc-positions tfoot td {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.gc-positions tfoot tr:first-child td {
    padding-top: 0.75rem;
}

.dark .gc-positions .gc-pos-subtotal,
.dark .gc-positions tfoot tr:first-child {
    border-top-color: rgba(255, 255, 255, 0.2);
}

/* ---------------------------------------------------------------------------
 * Statusmarke auf der Einstellungsseite «Verbindungen». Filament liefert nur die
 * Klassen, die es selbst benutzt; bg-success-100 und Co. waeren im Build nicht da.
 * ------------------------------------------------------------------------- */
.gc-status {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.gc-status-success { background: rgba(var(--success-500), 0.12); color: rgb(var(--success-700)); }
.gc-status-warning { background: rgba(var(--warning-500), 0.15); color: rgb(var(--warning-700)); }
.gc-status-danger { background: rgba(var(--danger-500), 0.12); color: rgb(var(--danger-700)); }
.gc-status-info { background: rgba(var(--info-500), 0.12); color: rgb(var(--info-700)); }

.dark .gc-status-success { color: rgb(var(--success-400)); }
.dark .gc-status-warning { color: rgb(var(--warning-400)); }
.dark .gc-status-danger { color: rgb(var(--danger-400)); }
.dark .gc-status-info { color: rgb(var(--info-400)); }

/* Angaben als Liste Bezeichnung: Wert, etwa die Details einer Kartenposition aus der CSV. */
.gc-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.375rem 1rem;
    font-size: 0.875rem;
}
.gc-details dt { color: rgb(var(--gray-500)); }
.gc-details dd { margin: 0; overflow-wrap: anywhere; }
.dark .gc-details dt { color: rgb(var(--gray-400)); }

/* Lange Woerter in schmalen Spalten umbrechen statt die Tabelle zu verbreitern. */
.gc-break { overflow-wrap: anywhere; }

/* Stand einer Kreditkartenabrechnung (resources/views/filament/kreditkarte/progress.blade.php):
   Balken bestaetigt von buchbar, darunter die Belege. Wie Kontera, gruen, wenn fertig. */
.gc-progress-cell { padding: 0.75rem; min-width: 7rem; }
.gc-progress {
    position: relative;
    height: 1.375rem;
    border-radius: 0.375rem;
    background: rgba(var(--gray-500), 0.12);
    overflow: hidden;
}
.gc-progress-bar { height: 100%; background: rgb(var(--success-500)); }
.gc-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(var(--gray-950));
}
.gc-progress-note { margin-top: 0.25rem; font-size: 0.75rem; color: rgb(var(--gray-500)); }
.dark .gc-progress { background: rgba(255, 255, 255, 0.08); }
.dark .gc-progress-bar { background: rgb(var(--success-600)); }
.dark .gc-progress-label { color: #fff; }
.dark .gc-progress-note { color: rgb(var(--gray-400)); }

/* ---------------------------------------------------------------------------
 * QuoteBot-Chat (resources/views/filament/pages/quote-bot-chat.blade.php).
 * Eigene Klassen, weil Filaments Stylesheet die noetigen Utilities nicht fuehrt:
 * h-[55vh], max-w-[80%] und border-dashed fielen stillschweigend weg, der Chat
 * wuchs ohne Scrollbereich und alle Flaechen waren eckig.
 * ------------------------------------------------------------------------- */

/* Karte wie eine Section: runde Ecken, weicher Schatten, kein Rahmen. */
.gc-chat {
    display: flex;
    flex-direction: column;
    height: clamp(26rem, 60vh, 44rem);
    overflow: hidden;
    background-color: var(--gc-surface);
    border-radius: var(--gc-radius);
    box-shadow: var(--gc-shadow);
}

/* Der Verlauf liegt auf der Seitenfarbe, damit die weissen Antworten sich abheben. */
.gc-chat-log {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    padding: 1.5rem;
    background-color: #f8f8fb;
}

.gc-chat-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.gc-chat-row-user {
    justify-content: flex-end;
}

.gc-chat-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: var(--gc-primary-soft);
    color: var(--gc-primary-solid);
}

.gc-chat-avatar-lg {
    width: 3rem;
    height: 3rem;
}

/* Die Sprechblase. Die Ecke zum Absender ist kleiner, damit die Richtung lesbar bleibt. */
.gc-bubble {
    max-width: min(80%, 44rem);
    padding: 0.625rem 1rem;
    border-radius: var(--gc-radius);
    font-size: 0.875rem;
    line-height: 1.5rem;
    overflow-wrap: anywhere;
}

/* Gefuellt mit Stufe 600: #00AEEF traegt keine weisse Schrift. */
.gc-bubble-user {
    background-color: var(--gc-primary-solid);
    color: #ffffff;
    border-top-right-radius: 0.125rem;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 119, 168, 0.3);
}

.gc-bubble-bot {
    background-color: var(--gc-surface);
    color: var(--gc-heading);
    border-top-left-radius: 0.125rem;
    box-shadow: var(--gc-shadow);
}

.gc-bubble-muted {
    color: var(--gc-muted);
}

/* Antworten des QuoteBot als Markdown. Filaments Grundstil setzt Abstaende, Listenpunkte
   und Tabellenlinien zurueck; hier kommen sie zurueck, knapp wie in einer Sprechblase. */
.gc-markdown > :first-child {
    margin-top: 0;
}

.gc-markdown > :last-child {
    margin-bottom: 0;
}

.gc-markdown p,
.gc-markdown ul,
.gc-markdown ol,
.gc-markdown table,
.gc-markdown pre,
.gc-markdown blockquote {
    margin: 0.5rem 0;
}

.gc-markdown h1,
.gc-markdown h2,
.gc-markdown h3,
.gc-markdown h4 {
    margin: 0.75rem 0 0.25rem;
    font-weight: 600;
    line-height: 1.375rem;
}

.gc-markdown h1,
.gc-markdown h2 {
    font-size: 1rem;
}

.gc-markdown h3,
.gc-markdown h4 {
    font-size: 0.875rem;
}

.gc-markdown strong {
    font-weight: 600;
}

.gc-markdown ul {
    list-style: disc;
    padding-left: 1.25rem;
}

.gc-markdown ol {
    list-style: decimal;
    padding-left: 1.25rem;
}

.gc-markdown li + li {
    margin-top: 0.125rem;
}

.gc-markdown hr {
    margin: 0.75rem 0;
    border-color: var(--gc-border);
}

.gc-markdown a {
    color: var(--gc-primary-solid);
    text-decoration: underline;
}

.gc-markdown code {
    padding: 0 0.25rem;
    border-radius: 0.25rem;
    background-color: rgba(67, 89, 113, 0.08);
    font-size: 0.8125rem;
}

.gc-markdown pre {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background-color: rgba(67, 89, 113, 0.08);
    overflow-x: auto;
}

.gc-markdown pre code {
    padding: 0;
    background: none;
}

.gc-markdown blockquote {
    padding-left: 0.75rem;
    border-left: 3px solid var(--gc-border);
    color: var(--gc-muted);
}

/* Tabellen duerfen breiter sein als die Blase: sie scrollen dann in sich. */
.gc-markdown table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    overflow-wrap: normal;
}

.gc-markdown th,
.gc-markdown td {
    padding: 0.25rem 0.75rem 0.25rem 0;
    border-bottom: 1px solid var(--gc-border);
    text-align: left;
    vertical-align: top;
}

.gc-markdown th {
    font-weight: 600;
}

.gc-markdown th:last-child,
.gc-markdown td:last-child {
    padding-right: 0;
}

.gc-bubble-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.gc-chat-empty {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--gc-muted);
}

.gc-chat-empty .gc-chat-avatar {
    margin-bottom: 0.5rem;
}

.gc-chat-empty-title {
    font-weight: 600;
    color: var(--gc-heading);
}

/* Eingabezeile */
.gc-chat-composer {
    border-top: 1px solid rgba(67, 89, 113, 0.08);
}

.gc-chat-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 1rem;
}

.gc-chat-pending {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0;
}

.gc-chat-hint {
    padding: 0.75rem 1rem 0;
    font-size: 0.75rem;
    color: var(--gc-muted);
}

/* Wie ein Filament-Feld: echter Rahmen, Fokusring in der Markenfarbe. */
.gc-chat-input {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.5rem;
    max-height: 12rem;
    resize: vertical;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-sm);
    background-color: var(--gc-surface);
    color: var(--gc-heading);
    font-size: 0.875rem;
    line-height: 1.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gc-chat-input::placeholder {
    color: var(--gc-muted);
}

.gc-chat-input:focus {
    outline: none;
    border-color: var(--gc-primary);
    box-shadow: 0 0 0 0.125rem rgba(0, 174, 239, 0.25);
}

.gc-chat-input:disabled {
    opacity: 0.6;
}

.gc-chat-attach {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    cursor: pointer;
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-sm);
    color: var(--gc-body);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.gc-chat-attach:hover {
    border-color: var(--gc-primary);
    color: var(--gc-primary-solid);
}

/* Anhang als weiche Marke, wie die Badges. */
.gc-chip {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--gc-radius-sm);
    background-color: var(--gc-primary-soft);
    color: var(--gc-primary-solid);
    font-size: 0.75rem;
    line-height: 1rem;
}

.gc-chip-on-solid {
    background-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.gc-chip-name {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-chip-meta {
    opacity: 0.7;
}

.gc-chip-remove {
    display: inline-flex;
    color: inherit;
    opacity: 0.7;
}

.gc-chip-remove:hover {
    opacity: 1;
    color: rgb(var(--danger-600));
}

/* Hinweiskarte mit Aktion: Extraktion, angelegte Offerte. Karte wie eine Section,
   die Farbe traegt nur das Icon. */
.gc-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background-color: var(--gc-surface);
    border-radius: var(--gc-radius);
    box-shadow: var(--gc-shadow);
}

.gc-callout-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--gc-radius-sm);
    background-color: var(--gc-primary-soft);
    color: var(--gc-primary-solid);
}

.gc-callout-body {
    flex: 1 1 16rem;
    min-width: 0;
}

.gc-callout-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gc-heading);
}

.gc-callout-text {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--gc-muted);
}

.gc-callout-success .gc-callout-icon {
    background-color: rgba(var(--success-500), 0.12);
    color: rgb(var(--success-700));
}

/* Dark Mode */
.dark .gc-chat,
.dark .gc-callout,
.dark .gc-bubble-bot {
    background-color: #2b2c40;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(15, 20, 34, 0.4);
}

.dark .gc-chat-log {
    background-color: #25263a;
}

.dark .gc-markdown hr,
.dark .gc-markdown th,
.dark .gc-markdown td,
.dark .gc-markdown blockquote {
    border-color: rgba(255, 255, 255, 0.12);
}

.dark .gc-markdown code,
.dark .gc-markdown pre {
    background-color: rgba(255, 255, 255, 0.08);
}

.dark .gc-markdown a {
    color: #00aeef;
}

.dark .gc-nav-flyout {
    background-color: #2b2c40;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0.25rem 1rem 0 rgba(15, 20, 34, 0.5);
}

.dark .gc-text-bubble {
    color: rgb(var(--primary-400));
}

.dark .gc-nav-flyout-item {
    color: #cbcbe2;
}

.dark .gc-nav-flyout-item:hover,
.dark .gc-nav-flyout-item:focus-visible {
    background-color: rgba(0, 174, 239, 0.12);
    color: #00aeef;
}

/* Die Antwort eine Stufe heller als die Karte, sonst verschwimmt sie im Verlauf. */
.dark .gc-bubble-bot {
    background-color: #33344b;
}

.dark .gc-bubble-bot,
.dark .gc-chat-input,
.dark .gc-chat-empty-title,
.dark .gc-callout-title {
    color: #cbcbe2;
}

.dark .gc-bubble-muted,
.dark .gc-chat-empty,
.dark .gc-chat-hint,
.dark .gc-callout-text {
    color: #8592a3;
}

.dark .gc-chat-composer {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.dark .gc-chat-input {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.12);
}

.dark .gc-chat-attach {
    border-color: rgba(255, 255, 255, 0.12);
    color: #b7b9d3;
}

.dark .gc-chat-attach:hover {
    border-color: #4dc8f0;
    color: #4dc8f0;
}

.dark .gc-chat-avatar,
.dark .gc-callout-icon,
.dark .gc-chip {
    background-color: rgba(0, 174, 239, 0.16);
    color: #4dc8f0;
}

.dark .gc-chip-on-solid {
    background-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.dark .gc-callout-success .gc-callout-icon {
    background-color: rgba(var(--success-500), 0.16);
    color: rgb(var(--success-400));
}

/* Handybreite: weniger Rand, Blasen duerfen breiter werden. */
@media (max-width: 640px) {
    .gc-chat-log {
        padding: 1rem;
    }

    .gc-bubble {
        max-width: 88%;
    }

    /* Das Feld bekommt die volle Breite, Anhang und Senden stehen darunter. Neben
       beiden Knoepfen blieben dem Feld auf 390 px keine 130 px. */
    .gc-chat-form {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .gc-chat-form .gc-chat-input {
        flex-basis: 100%;
        order: -1;
    }

    .gc-chat-form > .fi-btn {
        margin-left: auto;
    }

    .gc-callout {
        padding: 1rem;
    }
}

/* ---------------------------------------------------------------------------
 * Tailwind-Klassen, die Filaments Stylesheet nicht fuehrt (2026-09-28).
 * Filament liefert nur die Utilities, die es selbst benutzt. Was unsere eigenen
 * Ansichten darueber hinaus schreiben, fiel stillschweigend weg: im dunklen Modus
 * blieben Betraege im hellen Grau (dark:text-gray-300 gibt es dort nur mit /50),
 * die Platzhalter-Knoepfe hatten keine Flaeche. Die Regeln folgen Filaments Muster,
 * damit Dunkel- und Hover-Varianten gleich stark greifen wie dort.
 * tests/Feature/Filament/ThemeUtilityClassesTest.php meldet jede weitere fehlende Klasse.
 * ------------------------------------------------------------------------- */
.text-gray-300 { color: rgb(var(--gray-300)); }
.text-gray-900 { color: rgb(var(--gray-900)); }
.text-primary-700 { color: rgb(var(--primary-700)); }
.bg-gray-50\/60 { background-color: rgba(var(--gray-50), 0.6); }
.bg-primary-50 { background-color: rgb(var(--primary-50)); }
.hover\:bg-primary-100:hover { background-color: rgb(var(--primary-100)); }
.border-gray-200\/70 { border-color: rgba(var(--gray-200), 0.7); }
.border-white\/40 { border-color: rgba(255, 255, 255, 0.4); }
.ring-primary-600\/20 { --tw-ring-color: rgba(var(--primary-600), 0.2); }
.hover\:underline:hover { text-decoration-line: underline; }

.dark\:text-gray-100:is(.dark *) { color: rgb(var(--gray-100)); }
.dark\:text-gray-300:is(.dark *) { color: rgb(var(--gray-300)); }
.dark\:text-gray-600:is(.dark *) { color: rgb(var(--gray-600)); }
.dark\:bg-primary-400\/10:is(.dark *) { background-color: rgba(var(--primary-400), 0.1); }
.dark\:hover\:bg-primary-400\/20:hover:is(.dark *) { background-color: rgba(var(--primary-400), 0.2); }
.dark\:ring-primary-400\/30:is(.dark *) { --tw-ring-color: rgba(var(--primary-400), 0.3); }

.mt-4 { margin-top: 1rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-4 { padding-right: 1rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.items-baseline { align-items: baseline; }
.last\:border-0:last-child { border-width: 0; }
.max-h-\[70vh\] { max-height: 70vh; }
.max-w-\[16rem\] { max-width: 16rem; }
.max-w-\[min\(80\%\,42rem\)\] { max-width: min(80%, 42rem); }
.prose-p\:my-0 p { margin-top: 0; margin-bottom: 0; }
.prose-p\:my-1 p { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.prose-ul\:my-1 ul { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.prose-ol\:my-1 ol { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.prose-li\:my-0 li { margin-top: 0; margin-bottom: 0; }
.prose-headings\:my-2 :is(h1, h2, h3, h4, h5, h6, th) { margin-top: 0.5rem; margin-bottom: 0.5rem; }

@media (min-width: 640px) {
    .sm\:flex-col { flex-direction: column; }
    .sm\:items-baseline { align-items: baseline; }
    .sm\:justify-end { justify-content: flex-end; }
    .sm\:text-end { text-align: end; }
}

@media (max-width: 639px) {
    .max-sm\:hidden { display: none; }
}

/* Vorschau einer Kartenbuchung (resources/views/filament/kreditkarte/booking-preview.blade.php).
   Auf dem Handy scrollt nur die Tabelle, nicht der Dialog. */
.gc-booking { display: grid; gap: 0.75rem; font-size: 0.875rem; }
.gc-booking .gc-notice { padding: 0.5rem 0.75rem; border-radius: 0.5rem; }
.gc-booking ul { margin: 0.25rem 0 0; padding-left: 1.25rem; list-style: disc; }
.gc-booking-title { font-weight: 600; }
.gc-booking-wrap { overflow-x: auto; }
.gc-booking-table { width: 100%; border-collapse: collapse; }
.gc-booking-table th,
.gc-booking-table td { padding: 0.375rem 0.375rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgb(var(--gray-200)); white-space: nowrap; }
.gc-booking-table th { font-weight: 500; color: rgb(var(--gray-500)); }
.gc-booking-table td:first-child { white-space: normal; min-width: 6.5rem; }
.gc-booking-table th:first-child,
.gc-booking-table td:first-child { padding-left: 0; }
.gc-booking-rate { display: block; font-size: 0.75rem; }
.gc-booking-table .gc-num { text-align: right; font-variant-numeric: tabular-nums; }
.gc-booking-rate,
.gc-booking-note { color: rgb(var(--gray-500)); }
.dark .gc-booking-table th,
.dark .gc-booking-table td { border-color: rgba(255, 255, 255, 0.1); }
.dark .gc-booking-table th,
.dark .gc-booking-rate,
.dark .gc-booking-note { color: rgb(var(--gray-400)); }

/* Zeiterfassung, Ansicht «Tag» (resources/views/filament/pages/zeiterfassung.blade.php).
   Aufbau wie die alte App: Kopf mit Datum und Wochenleiste, Erfassen, Karten, Gesamt. */
.gc-tt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
/* minmax(0, 1fr): sonst richtet sich die Spalte nach der laengsten einzeiligen Beschreibung,
   und die ganze Ansicht wird breiter als der Bildschirm (Filament schneidet den Rest ab). */
.gc-tt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.gc-tt-title { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: rgb(var(--gray-950)); }
.gc-tt-sub { font-size: 0.8125rem; color: rgb(var(--gray-500)); }
.gc-tt-week {
    display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem;
    border-radius: 1rem; background: rgb(var(--gray-100));
}
.gc-tt-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 9999px; color: rgb(var(--gray-500));
}
.gc-tt-arrow:hover { background: rgb(var(--gray-200)); color: rgb(var(--gray-700)); }
.gc-tt-arrow-icon { width: 1.25rem; height: 1.25rem; }
.gc-tt-day {
    display: flex; flex-direction: column; align-items: center; gap: 0.0625rem;
    width: 3.25rem; padding: 0.375rem 0.25rem; border-radius: 0.75rem;
    background: #fff; box-shadow: 0 0 0 1px rgba(var(--gray-950), 0.05);
}
.gc-tt-day:hover { background: rgb(var(--gray-50)); }
.gc-tt-day-name { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: rgb(var(--gray-500)); }
.gc-tt-day-number { font-size: 1.125rem; font-weight: 600; line-height: 1.2; color: rgb(var(--gray-950)); }
.gc-tt-day-time { font-size: 0.6875rem; color: rgb(var(--gray-500)); font-variant-numeric: tabular-nums; }
.gc-tt-day.is-today .gc-tt-day-number { color: rgb(var(--primary-600)); }
.gc-tt-day.is-active { background: rgb(var(--primary-600)); box-shadow: none; }
.gc-tt-day.is-active .gc-tt-day-name,
.gc-tt-day.is-active .gc-tt-day-number,
.gc-tt-day.is-active .gc-tt-day-time { color: #fff; }

.gc-duration { max-width: 14rem; }
.gc-tt-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgb(var(--gray-200));
}
.gc-tt-actions-main,
.gc-tt-actions-side { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.gc-tt-entries { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.gc-tt-entry {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.75rem 1rem; border-radius: 0.75rem; background: #fff;
    box-shadow: 0 0 0 1px rgba(var(--gray-950), 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
}
.gc-tt-entry:hover { background: rgb(var(--gray-50)); }
.gc-tt-entry.is-editing { box-shadow: 0 0 0 2px rgb(var(--primary-600)); }
.gc-tt-entry.is-locked { cursor: default; }
.gc-tt-entry.is-locked:hover { background: #fff; }
.gc-tt-entry-main { flex: 1 1 auto; min-width: 0; }
.gc-tt-entry-title { font-weight: 500; color: rgb(var(--gray-950)); overflow-wrap: anywhere; }
.gc-tt-entry-text {
    font-size: 0.8125rem; color: rgb(var(--gray-500));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gc-tt-entry-side { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.gc-tt-entry-status { display: inline-flex; }
.gc-tt-entry-icon { width: 1.25rem; height: 1.25rem; }
.gc-tt-entry-time { min-width: 3rem; text-align: right; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--gray-950)); }
.gc-tt-entry-time.is-internal { color: rgb(var(--gray-500)); }
.gc-tt-empty { padding: 1.5rem 0; text-align: center; font-size: 0.875rem; color: rgb(var(--gray-500)); }

.gc-tt-total {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0.25rem 0.75rem;
    padding: 1rem 1.25rem; border-radius: 0.75rem; background: #fff;
    box-shadow: 0 0 0 1px rgba(var(--gray-950), 0.05);
}
.gc-tt-total-note { margin-right: auto; font-size: 0.8125rem; color: rgb(var(--gray-500)); }
.gc-tt-total-label { font-size: 0.8125rem; color: rgb(var(--gray-500)); }
.gc-tt-total-value { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--gray-950)); }

/* Auf dem Handy fuellt die Woche die Breite, «Heute» rutscht neben das Datum. */
@media (max-width: 639px) {
    .gc-tt-head { display: grid; grid-template-columns: 1fr auto; }
    .gc-tt-date { grid-column: 1; grid-row: 1; }
    .gc-tt-today { grid-column: 2; grid-row: 1; }
    .gc-tt-week { grid-column: 1 / -1; grid-row: 2; width: 100%; }
    .gc-tt-day { flex: 1 1 0; width: auto; min-width: 0; }
    .gc-tt-arrow { width: 1.5rem; flex-shrink: 0; }
    .gc-tt-entry { padding: 0.75rem; }
    .gc-tt-entry-side { gap: 0.5rem; }
}

.dark .gc-tt-title,
.dark .gc-tt-day-number,
.dark .gc-tt-entry-title,
.dark .gc-tt-entry-time,
.dark .gc-tt-total-value { color: #fff; }
.dark .gc-tt-week { background: rgba(255, 255, 255, 0.05); }
.dark .gc-tt-day,
.dark .gc-tt-entry,
.dark .gc-tt-entry.is-locked:hover,
.dark .gc-tt-total { background: rgb(var(--gray-900)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.dark .gc-tt-day:hover,
.dark .gc-tt-entry:hover { background: rgba(255, 255, 255, 0.05); }
.dark .gc-tt-day.is-active { background: rgb(var(--primary-600)); }
.dark .gc-tt-entry.is-editing { box-shadow: 0 0 0 2px rgb(var(--primary-500)); }
.dark .gc-tt-actions { border-color: rgba(255, 255, 255, 0.1); }
.dark .gc-tt-arrow:hover { background: rgba(255, 255, 255, 0.1); color: rgb(var(--gray-200)); }
.dark .gc-tt-day.is-today:not(.is-active) .gc-tt-day-number { color: rgb(var(--primary-400)); }

/* Swiss QR-Code der Kreditoren im Modal. Weiss auch im dunklen Modus: ohne hellen Rand
   findet die Banking-App die Kanten des Codes nicht. Bildpunkte scharf, nicht geglaettet. */
.gc-qr {
    max-width: 18rem;
    margin: 0 auto;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: #ffffff;
}

.gc-qr img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
}

/* Uhr-Symbol in der Kopfzeile (Zeit erfassen). Eigener Block, damit es in der Zeile der
   Kopfzeile mittig steht wie Glocke und Initialen. */
.gc-quick-time {
    display: flex;
    align-items: center;
}

/* Direktlinks auf dem Dashboard: Kacheln, so viele nebeneinander, wie Platz haben. Auf dem
   Handy eine Spalte, die ganze Kachel ist der Link. Name und Beschreibung brechen auf zwei
   Zeilen um, erst danach wird gekuerzt. */
.gc-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.75rem;
}

.gc-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius);
    background-color: var(--gc-surface);
    color: var(--gc-body);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.gc-link:hover,
.gc-link:focus-visible {
    border-color: var(--gc-primary);
    box-shadow: var(--gc-shadow);
    outline: none;
}

.gc-link-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--gc-radius-sm);
    background-color: var(--gc-primary-soft);
    color: var(--gc-primary-solid);
}

.gc-link-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.gc-link-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.gc-link-name,
.gc-link-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

.gc-link-name {
    color: var(--gc-heading);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
}

.gc-link-description {
    color: var(--gc-muted);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.gc-link-external {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--gc-muted);
}

.gc-link:hover .gc-link-external {
    color: var(--gc-primary);
}

.gc-links-empty {
    font-size: 0.875rem;
    color: rgb(var(--gray-500));
}

.gc-links-empty a {
    color: var(--gc-primary-solid);
    text-decoration: underline;
}

.dark .gc-link {
    border-color: rgba(255, 255, 255, 0.1);
    background-color: rgb(var(--gray-900));
    color: rgb(var(--gray-300));
}

.dark .gc-link:hover,
.dark .gc-link:focus-visible {
    border-color: var(--gc-primary);
}

.dark .gc-link-icon {
    background-color: rgba(0, 174, 239, 0.15);
    color: var(--gc-primary);
}

.dark .gc-link-name { color: #fff; }
.dark .gc-link-description,
.dark .gc-link-external { color: rgb(var(--gray-400)); }
.dark .gc-links-empty a { color: var(--gc-primary); }