/* ==========================================================================
   Turniket — modern theme for Starlette Admin (Tabler / Bootstrap 5.3)
   Loaded after tabler.min.css from base.html, so these rules win the cascade.

   Ships both DARK (default) and LIGHT modes. All component rules below read the
   semantic --tk-* variables, so switching a theme is just swapping that set of
   variables — controlled by [data-bs-theme="light|dark"] on <html>.
   The vertical sidebar ships data-bs-theme="dark" in the markup, but base.html
   syncs it to the active theme (JS), so the sidebar goes light in light mode.
   ========================================================================== */

:root,
[data-bs-theme="dark"] {
    /* ---- brand palette ---- */
    --tk-bg:            #0f1117; /* page background        */
    --tk-sidebar:       #141720; /* deep sidebar           */
    --tk-surface:       #171b26; /* cards / panels         */
    --tk-surface-2:     #1b2130; /* hover / inputs / wells */
    --tk-border:        #1e2333; /* subtle borders         */
    --tk-accent:        #6366f1; /* indigo                 */
    --tk-accent-bright: #818cf8; /* indigo highlight       */
    --tk-accent-soft:   rgba(99, 102, 241, .14);

    --tk-text:  #e3e7f0; /* primary text  */
    --tk-muted: #8b93a7; /* secondary     */
    --tk-dim:   #7b849b; /* tertiary      */

    --tk-green: #22c55e;
    --tk-amber: #f59e0b;
    --tk-red:   #ef4444;
    --tk-blue:  #3b82f6;

    /* ---- theme-dependent extras (overridden in light mode) ---- */
    --tk-surface-3:           #232a3b; /* button hover / stronger surface */
    --tk-sidebar-active-text: #ffffff; /* active nav label on dark sidebar */
    --tk-link-hover:          #a5b4fc;
    --tk-scrollbar-thumb:     #2a3142;
    --tk-scrollbar-thumb-hover: #39425a;
    --tk-table-stripe:        rgba(255, 255, 255, .015);
    --tk-shadow-card:         0 1px 2px rgba(0, 0, 0, .25);
    --tk-shadow-dropdown:     0 12px 32px rgba(0, 0, 0, .45);

    /* ---- map onto Tabler/Bootstrap tokens (broad recolor) ---- */
    --tblr-body-bg: var(--tk-bg);
    --tblr-body-bg-darker: #0b0d12;
    --tblr-body-color: var(--tk-text);
    --tblr-body-color-rgb: 227, 231, 240;
    --tblr-emphasis-color: #f4f6fb;

    --tblr-border-color: var(--tk-border);
    --tblr-border-color-translucent: var(--tk-border);

    --tblr-primary: var(--tk-accent);
    --tblr-primary-rgb: 99, 102, 241;
    --tblr-primary-fg: #ffffff;

    --tblr-bg-surface: var(--tk-surface);
    --tblr-bg-surface-secondary: var(--tk-surface-2);
    --tblr-bg-surface-tertiary: var(--tk-surface-2);
    --tblr-bg-surface-dark: var(--tk-bg);

    --tblr-secondary: var(--tk-muted);
    --tblr-secondary-color: var(--tk-muted);
    --tblr-muted: var(--tk-muted);
    --tblr-dark: var(--tk-bg);
    --tblr-dark-rgb: 15, 17, 23;

    --tblr-card-bg: var(--tk-surface);
    --tblr-card-cap-bg: var(--tk-surface);
    --tblr-card-border-color: var(--tk-border);

    --tblr-link-color: var(--tk-accent-bright);
    --tblr-link-hover-color: #a5b4fc;

    --tblr-success: var(--tk-green);
    --tblr-warning: var(--tk-amber);
    --tblr-danger:  var(--tk-red);
    --tblr-info:    var(--tk-blue);

    --tblr-box-shadow-card: 0 1px 0 rgba(0, 0, 0, .25);

    /* ---- alert text (the tinted background is shared by both themes) ---- */
    --tk-alert-success-fg: #86efac;
    --tk-alert-danger-fg:  #fca5a5;
    --tk-alert-warning-fg: #fcd34d;
    --tk-alert-info-fg:    #93c5fd;

    /* ---- soft status pills (badges, .tk-green ...) ---- */
    --tk-pill-green-fg: #4ade80;
    --tk-pill-amber-fg: #fbbf24;
    --tk-pill-red-fg:   #f87171;
    --tk-pill-blue-fg:  #60a5fa;
}

/* ===================== LIGHT MODE ===================== */
[data-bs-theme="light"] {
    /* ---- brand palette (light) ---- */
    --tk-bg:            #f6f7f9; /* page background        */
    --tk-sidebar:       #ffffff; /* topbar + vertical sidebar (light mode)  */
    --tk-surface:       #ffffff; /* cards / panels         */
    --tk-surface-2:     #f1f3f5; /* hover / inputs / wells */
    --tk-surface-3:     #e9ecef; /* button hover           */
    --tk-border:        #e4e7ec; /* subtle borders         */
    --tk-accent:        #6366f1;
    --tk-accent-bright: #4f46e5; /* darker indigo for contrast on light */
    --tk-accent-soft:   rgba(99, 102, 241, .10);

    --tk-text:  #1f2430;
    --tk-muted: #5b6478;
    --tk-dim:   #6e7688;

    --tk-sidebar-active-text:   var(--tk-accent-bright); /* active nav label on light sidebar */
    --tk-link-hover:            #4338ca;
    --tk-scrollbar-thumb:       #c7ccd6;
    --tk-scrollbar-thumb-hover: #aeb4c0;
    --tk-table-stripe:          rgba(15, 23, 42, .025);
    --tk-shadow-card:           0 1px 2px rgba(15, 23, 42, .06);
    --tk-shadow-dropdown:       0 12px 32px rgba(15, 23, 42, .14);

    /* ---- map onto Tabler/Bootstrap tokens ---- */
    --tblr-body-bg: var(--tk-bg);
    --tblr-body-bg-darker: #eceef1;
    --tblr-body-color: var(--tk-text);
    --tblr-body-color-rgb: 31, 36, 48;
    --tblr-emphasis-color: #0b0f19;

    --tblr-border-color: var(--tk-border);
    --tblr-border-color-translucent: var(--tk-border);

    --tblr-primary: var(--tk-accent);
    --tblr-primary-rgb: 99, 102, 241;
    --tblr-primary-fg: #ffffff;

    --tblr-bg-surface: var(--tk-surface);
    --tblr-bg-surface-secondary: var(--tk-surface-2);
    --tblr-bg-surface-tertiary: var(--tk-surface-2);
    --tblr-bg-surface-dark: var(--tk-bg);

    --tblr-secondary: var(--tk-muted);
    --tblr-secondary-color: var(--tk-muted);
    --tblr-muted: var(--tk-muted);

    --tblr-card-bg: var(--tk-surface);
    --tblr-card-cap-bg: var(--tk-surface);
    --tblr-card-border-color: var(--tk-border);

    --tblr-link-color: var(--tk-accent-bright);
    --tblr-link-hover-color: var(--tk-link-hover);

    --tblr-success: var(--tk-green);
    --tblr-warning: var(--tk-amber);
    --tblr-danger:  var(--tk-red);
    --tblr-info:    var(--tk-blue);

    /* ---- alert text: the dark theme's pale tones vanish on a light tint ---- */
    --tk-alert-success-fg: #166534;
    --tk-alert-danger-fg:  #b91c1c;
    --tk-alert-warning-fg: #92400e;
    --tk-alert-info-fg:    #1d4ed8;

    /* ---- soft status pills: small bold text, so go one shade darker ---- */
    --tk-pill-green-fg: #166534;
    --tk-pill-amber-fg: #92400e;
    --tk-pill-red-fg:   #991b1b;
    --tk-pill-blue-fg:  #1e40af;
}

/* ===================== base ===================== */
body {
    background-color: var(--tk-bg);
    color: var(--tk-text);
}

.page,
.page-wrapper,
.page-body {
    background-color: transparent;
}

a { color: var(--tk-accent-bright); }
a:hover { color: var(--tk-link-hover); }

.text-muted,
.text-secondary,
small.text-muted { color: var(--tk-muted) !important; }

hr, .hr { border-color: var(--tk-border); color: var(--tk-border); }

/* slim, theme-aware scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--tk-scrollbar-thumb) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--tk-scrollbar-thumb); border-radius: 6px; border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--tk-scrollbar-thumb-hover); }

/* ===================== sidebar ===================== */
.navbar-vertical {
    background-color: var(--tk-sidebar) !important;
    border-right: 1px solid var(--tk-border);
}

.navbar-vertical .navbar-brand,
.navbar-brand h3 { color: var(--tk-text); font-weight: 700; letter-spacing: .2px; }

/* brand logo mark (indigo rounded square) injected before the title */
.navbar-vertical .navbar-brand a { display: flex; align-items: center; gap: .6rem; }
.navbar-vertical .navbar-brand h3 { margin: 0; }
.tk-brand-logo {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--tk-accent), var(--tk-accent-bright));
    color: #fff; font-size: 1rem;
    box-shadow: 0 2px 8px rgba(99, 102, 241, .35);
}

.navbar-vertical .navbar-nav .nav-link {
    color: var(--tk-muted);
    border-radius: 8px;
    margin: 2px 8px;
    padding: .5rem .65rem;
    transition: background-color .15s ease, color .15s ease;
}
.navbar-vertical .navbar-nav .nav-link .nav-link-icon { color: var(--tk-dim); }

.navbar-vertical .navbar-nav .nav-link:hover {
    color: var(--tk-text);
    background-color: var(--tk-surface-2);
}
.navbar-vertical .navbar-nav .nav-link:hover .nav-link-icon { color: var(--tk-muted); }

/* active item — indigo highlight + left accent rail */
.navbar-vertical .navbar-nav .nav-item.active > .nav-link,
.navbar-vertical .navbar-nav .nav-link.active {
    color: var(--tk-sidebar-active-text);
    background-color: var(--tk-accent-soft);
    box-shadow: inset 3px 0 0 var(--tk-accent);
}
.navbar-vertical .navbar-nav .nav-item.active > .nav-link .nav-link-icon,
.navbar-vertical .navbar-nav .nav-link.active .nav-link-icon { color: var(--tk-accent-bright); }

/* dropdown submenu inside sidebar */
.navbar-vertical .nav-item.dropdown .dropdown-menu { background-color: var(--tk-surface); }

/* user account pinned at the sidebar bottom */
.navbar-vertical > .container-fluid { display: flex; flex-direction: column; }
.navbar-vertical .navbar-nav.flex-row {
    margin-top: auto;
    border-top: 1px solid var(--tk-border);
    padding-top: .5rem;
}
.navbar-vertical .nav-item .avatar {
    border: 2px solid var(--tk-border);
    background-color: var(--tk-surface-2);
}
.navbar-vertical .nav-item.active .avatar,
.navbar-vertical .nav-link:hover .avatar { border-color: var(--tk-accent); }

/* ===================== topbar ===================== */
.navbar:not(.navbar-vertical),
.page-header .navbar,
.sticky-top > .navbar {
    background-color: var(--tk-sidebar) !important;
    border-bottom: 1px solid var(--tk-border);
}

.navbar:not(.navbar-vertical) .nav-link,
.navbar:not(.navbar-vertical) .btn-icon { color: var(--tk-muted); }
.navbar:not(.navbar-vertical) .nav-link:hover { color: var(--tk-text); }

/* topbar icon buttons */
.btn-icon, .navbar .btn-icon {
    color: var(--tk-muted);
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}
.btn-icon:hover {
    color: var(--tk-text);
    background-color: var(--tk-surface-2);
}

/* topbar / list search field */
.navbar .form-control,
.input-icon .form-control { background-color: var(--tk-surface-2); }
.input-icon .input-icon-addon { color: var(--tk-dim); }

/* ===================== cards & surfaces ===================== */
.card {
    background-color: var(--tk-surface);
    border: 1px solid var(--tk-border);
    border-radius: 12px;
    box-shadow: var(--tk-shadow-card);
}
.card-header,
.card-footer {
    background-color: transparent;
    border-color: var(--tk-border);
}
.card-title { color: var(--tk-text); }
.card .card-header .card-title { font-weight: 600; }

.page-pretitle { color: var(--tk-dim); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { color: var(--tk-text); }

.empty-title { color: var(--tk-text); }
.empty-subtitle { color: var(--tk-muted); }

/* ===================== tables ===================== */
.table {
    --tblr-table-bg: transparent;
    --tblr-table-color: var(--tk-text);
    --tblr-table-border-color: var(--tk-border);
    --tblr-table-striped-bg: var(--tk-table-stripe);
    --tblr-table-hover-bg: var(--tk-surface-2);
    color: var(--tk-text);
}
.table thead th,
.table > :not(caption) > * > th {
    color: var(--tk-muted);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    font-weight: 600;
    background-color: transparent;
    border-bottom: 1px solid var(--tk-border);
}
.table td, .table th { border-color: var(--tk-border); }
.table-hover > tbody > tr:hover > * { background-color: var(--tk-surface-2); color: var(--tk-text); }

.card > .table-responsive { border-radius: 0 0 12px 12px; }

/* pagination */
.page-link {
    background-color: var(--tk-surface);
    border-color: var(--tk-border);
    color: var(--tk-muted);
}
.page-link:hover { background-color: var(--tk-surface-2); color: var(--tk-text); }
.page-item.active .page-link {
    background-color: var(--tk-accent);
    border-color: var(--tk-accent);
    color: #fff;
}
.page-item.disabled .page-link { background-color: var(--tk-surface); color: var(--tk-dim); }

/* ---- row-action icons (list view) → spaced, color-coded icon buttons ---- */
.d-flex:has(> a[data-is-row-action]) { flex-wrap: nowrap; align-items: center; gap: 2px; }

a[data-is-row-action]:not(.btn):not(.dropdown-item) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    color: var(--tk-muted);
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* the template wraps the icon in <span class="me-1"> — re-center it */
a[data-is-row-action]:not(.btn):not(.dropdown-item) > span { margin-right: 0 !important; }
a[data-is-row-action]:not(.btn):not(.dropdown-item):hover {
    color: var(--tk-text);
    background-color: var(--tk-surface-2);
    border-color: var(--tk-border);
}
/* color-coded per action type */
a[data-is-row-action][data-name="view"]:not(.btn):hover,
a[data-is-row-action][data-name="attendance_board"]:not(.btn):hover {
    color: var(--tk-accent-bright);
    border-color: rgba(99, 102, 241, .35);
}
a[data-is-row-action][data-name="edit"]:not(.btn):hover {
    color: var(--tk-pill-amber-fg);
    border-color: rgba(245, 158, 11, .35);
}
a[data-is-row-action][data-name="delete"]:not(.btn):hover {
    color: var(--tk-pill-red-fg);
    background-color: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .35);
}

/* ===================== status badges ===================== */
.badge {
    font-weight: 600;
    border-radius: 6px;
    padding: .32em .6em;
}
/* tinted "soft" status pills (used as .badge.bg-success etc.) */
.badge.bg-success, .badge.bg-success-lt { background-color: rgba(34, 197, 94, .15) !important; color: var(--tk-pill-green-fg) !important; }
.badge.bg-warning, .badge.bg-warning-lt { background-color: rgba(245, 158, 11, .15) !important; color: var(--tk-pill-amber-fg) !important; }
.badge.bg-danger,  .badge.bg-danger-lt  { background-color: rgba(239, 68, 68, .15) !important;  color: var(--tk-pill-red-fg) !important; }
.badge.bg-info,    .badge.bg-info-lt    { background-color: rgba(59, 130, 246, .15) !important; color: var(--tk-pill-blue-fg) !important; }
.badge.bg-primary, .badge.bg-primary-lt { background-color: var(--tk-accent-soft) !important;   color: var(--tk-accent-bright) !important; }
.badge.bg-secondary, .badge.bg-secondary-lt { background-color: var(--tk-surface-2) !important; color: var(--tk-muted) !important; }

.status-dot { box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }

/* ===================== buttons ===================== */
.btn {
    border-radius: 8px;
    font-weight: 500;
}
.btn-primary {
    --tblr-btn-bg: var(--tk-accent);
    --tblr-btn-border-color: var(--tk-accent);
    --tblr-btn-hover-bg: #5457e0;
    --tblr-btn-hover-border-color: #5457e0;
    --tblr-btn-active-bg: #4a4dd6;
    color: #fff;
}
.btn-secondary,
.btn-default {
    --tblr-btn-bg: var(--tk-surface-2);
    --tblr-btn-border-color: var(--tk-border);
    --tblr-btn-color: var(--tk-text);
    --tblr-btn-hover-bg: var(--tk-surface-3);
    --tblr-btn-hover-border-color: var(--tk-surface-3);
    --tblr-btn-hover-color: var(--tk-text);
}
.btn-outline-primary {
    --tblr-btn-color: var(--tk-accent-bright);
    --tblr-btn-border-color: var(--tk-accent);
    --tblr-btn-hover-bg: var(--tk-accent);
    --tblr-btn-hover-color: #fff;
}
.btn-link { color: var(--tk-accent-bright); }

/* ===================== forms ===================== */
.form-control,
.form-select {
    background-color: var(--tk-surface-2);
    border-color: var(--tk-border);
    color: var(--tk-text);
}
.form-control::placeholder { color: var(--tk-dim); }
.form-control:focus,
.form-select:focus {
    background-color: var(--tk-surface-2);
    border-color: var(--tk-accent);
    color: var(--tk-text);
    box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .25);
}
.form-label { color: var(--tk-muted); font-weight: 500; }
.form-check-input { background-color: var(--tk-surface-2); border-color: var(--tk-border); }
.form-check-input:checked { background-color: var(--tk-accent); border-color: var(--tk-accent); }
.input-group-text { background-color: var(--tk-surface-2); border-color: var(--tk-border); color: var(--tk-muted); }

/* select2 (relations) + flatpickr (dates) used by Starlette Admin forms */
.select2-container--default .select2-selection,
.select2-dropdown {
    background-color: var(--tk-surface-2) !important;
    border-color: var(--tk-border) !important;
    color: var(--tk-text);
}
.select2-container--default .select2-results__option { color: var(--tk-text); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--tk-accent) !important; }
.select2-container--default .select2-selection__choice {
    background-color: var(--tk-accent-soft) !important;
    border-color: transparent !important;
    color: var(--tk-accent-bright) !important;
}
.select2-search__field { color: var(--tk-text) !important; }
.flatpickr-calendar { background: var(--tk-surface) !important; border: 1px solid var(--tk-border); color: var(--tk-text); }
.flatpickr-day { color: var(--tk-text); }
.flatpickr-day.selected { background: var(--tk-accent) !important; border-color: var(--tk-accent) !important; }
.flatpickr-months .flatpickr-month, .flatpickr-weekday { color: var(--tk-muted) !important; fill: var(--tk-muted) !important; }

/* ===================== dropdowns, modals, alerts ===================== */
.dropdown-menu {
    background-color: var(--tk-surface);
    border: 1px solid var(--tk-border);
    box-shadow: var(--tk-shadow-dropdown);
}
.dropdown-item { color: var(--tk-text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--tk-surface-2); color: #fff; }
.dropdown-divider { border-color: var(--tk-border); }
.dropdown-header { color: var(--tk-dim); }

.modal-content { background-color: var(--tk-surface); border: 1px solid var(--tk-border); }
.modal-header, .modal-footer { border-color: var(--tk-border); }

.offcanvas { background-color: var(--tk-sidebar); color: var(--tk-text); }

.alert { border-color: var(--tk-border); }
.alert-success { background-color: rgba(34, 197, 94, .12); color: var(--tk-alert-success-fg); }
.alert-danger  { background-color: rgba(239, 68, 68, .12); color: var(--tk-alert-danger-fg); }
.alert-warning { background-color: rgba(245, 158, 11, .12); color: var(--tk-alert-warning-fg); }
.alert-info    { background-color: rgba(59, 130, 246, .12); color: var(--tk-alert-info-fg); }

/* tooltips stay dark in both themes -> light text, not the theme's body colour */
.tooltip-inner { background-color: #0b0d12; color: #e8ebf2; border: 1px solid #2a3040; }
.popover { background-color: var(--tk-surface); border-color: var(--tk-border); }

/* ==========================================================================
   Reusable components (dashboard building blocks)
   Markup examples are in the wiring instructions.
   ========================================================================== */

/* ---- metric / stat card with a colored category badge ---- */
.metric-card { display: flex; align-items: center; gap: 1rem; }
.metric-badge {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    font-size: 1.1rem;
}
.metric-label {
    text-transform: uppercase; letter-spacing: .04em;
    font-size: .72rem; font-weight: 600; color: var(--tk-muted);
}
.metric-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--tk-text); }

/* category color variants — shared by badges and activity dots */
.tk-indigo { background-color: var(--tk-accent-soft);          color: var(--tk-accent-bright); }
.tk-green  { background-color: rgba(34, 197, 94, .15);  color: var(--tk-pill-green-fg); }
.tk-amber  { background-color: rgba(245, 158, 11, .15); color: var(--tk-pill-amber-fg); }
.tk-red    { background-color: rgba(239, 68, 68, .15);  color: var(--tk-pill-red-fg); }
.tk-blue   { background-color: rgba(59, 130, 246, .15); color: var(--tk-pill-blue-fg); }

/* ---- activity log ---- */
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-item {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: .65rem 0; border-bottom: 1px solid var(--tk-border);
}
.activity-item:last-child { border-bottom: 0; }
.activity-dot {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: .85rem;
}
.activity-body { min-width: 0; }
.activity-title { color: var(--tk-text); font-weight: 500; }
.activity-meta { color: var(--tk-dim); font-size: .8rem; }

/* ---- quick action cards (2×2 grid: icon top-left, chevron top-right, text below) ---- */
.quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.quick-action {
    display: flex; flex-direction: column; gap: .75rem;
    padding: 1rem; border-radius: 12px;
    background-color: var(--tk-surface);
    border: 1px solid var(--tk-border);
    color: var(--tk-text); text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.quick-action:hover {
    border-color: var(--tk-accent);
    background-color: var(--tk-surface-2);
    color: var(--tk-text);
    transform: translateY(-2px);
}
.quick-action-top { display: flex; align-items: center; justify-content: space-between; }
.quick-action-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background-color: var(--tk-accent-soft);
    color: var(--tk-accent-bright); font-size: 1.05rem;
}
.quick-action-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.quick-action-label {
    font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quick-action-sub {
    color: var(--tk-muted); font-size: .8rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quick-action-arrow {
    color: var(--tk-dim); font-size: .8rem;
    transition: color .15s ease, transform .15s ease;
}
.quick-action:hover .quick-action-arrow { color: var(--tk-accent-bright); transform: translateX(2px); }

/* stack to a single column on narrow viewports */
@media (max-width: 575.98px) { .quick-actions { grid-template-columns: 1fr; } }

/* ==========================================================================
   Form & detail polish — clearer field guidance and breathing room
   ========================================================================== */

/* help text under inputs (field.help_text → <small class="form-hint">) */
.form-hint {
    color: var(--tk-muted);
    font-size: .8rem;
    line-height: 1.35;
    margin-top: .3rem;
}

/* roomier vertical rhythm between form fields */
form .mb-3 { margin-bottom: 1.25rem !important; }

/* center & cap the create/edit form so long field lists stay readable */
.form-container .card,
#form-card,
form > .card { max-width: 920px; }
.form-container .card { margin-inline: auto; }

/* required-field asterisk in the brand accent */
.form-label .text-danger,
label .required,
.form-label.required::after { color: var(--tk-accent-bright) !important; }

/* read-only inputs read as "informational", not editable */
.form-control[readonly],
.form-control:disabled {
    background-color: var(--tk-bg);
    color: var(--tk-muted);
    border-style: dashed;
}

/* detail view: label / value pairs */
.field-label, dt, .text-muted.field-label {
    color: var(--tk-dim);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .72rem;
    font-weight: 600;
}
dd, .field-value { color: var(--tk-text); }

/* batch-action confirmation modal buttons keep brand styling (inherited) */

/* dashboard: tighten the greeting header */
.page-title { font-weight: 700; letter-spacing: .2px; }

/* ---- accessibility floor ---- */
:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .quick-action, .navbar-vertical .nav-link, .btn-icon { transition: none; }
}