/* ==========================================================
   Design Tokens – cadwork Admin Center Style Guide
   Bootstrap Variant A: CSS custom properties for light/dark
   ========================================================== */

/* ---- Light Mode (default) ---- */
:root,
[data-bs-theme="light"] {
    --bg-canvas: #FAFAF9;
    --bg-surface: #FFFFFF;
    --bg-subtle: #F4F4F2;
    --bg-muted: #EEEDEA;

    --border-subtle: rgba(0,0,0,0.06);
    --border-default: rgba(0,0,0,0.10);
    --border-strong: rgba(0,0,0,0.18);

    --text-primary: #1A1A19;
    --text-secondary: #5C5C58;
    --text-tertiary: #8A8A85;
    --text-disabled: #B8B8B3;

    --accent: #1F4FD9;
    --accent-hover: #1A43BC;
    --accent-subtle: #EDF1FE;
    --accent-text: #0C3098;

    --success: #0F6E56;
    --success-subtle: #E1F5EE;
    --warning: #854F0B;
    --warning-subtle: #FAEEDA;
    --danger: #A32D2D;
    --danger-subtle: #FCEBEB;

    --purple: #3C3489;
    --purple-subtle: #EEEDFE;

    --overlay-bg: rgba(15,15,15,0.4);
    --focus-ring: rgba(31,79,217,0.15);

    --logo-src: url('/img/logos/cadwork_logo.svg');
}

/* ---- Dark Mode ---- */
[data-bs-theme="dark"] {
    --bg-canvas: #0F0F11;
    --bg-surface: #161618;
    --bg-subtle: #1E1E21;
    --bg-muted: #26262A;

    --border-subtle: rgba(255,255,255,0.06);
    --border-default: rgba(255,255,255,0.10);
    --border-strong: rgba(255,255,255,0.18);

    --text-primary: #F2F2F0;
    --text-secondary: #A8A8A3;
    --text-tertiary: #6E6E69;
    --text-disabled: #4A4A47;

    --accent: #6E91F0;
    --accent-hover: #88A6F5;
    --accent-subtle: #1A2347;
    --accent-text: #B8CCFA;

    --success: #5DCAA5;
    --success-subtle: #0F2E26;
    --warning: #EF9F27;
    --warning-subtle: #2A1F08;
    --danger: #F09595;
    --danger-subtle: #2E1414;

    --purple: #B8B0F0;
    --purple-subtle: #1E1A3A;

    --overlay-bg: rgba(0,0,0,0.6);
    --focus-ring: rgba(110,145,240,0.25);

    --logo-src: url('/img/logos/cadwork_logo_white.svg');
}

/* ==========================================================
   Global Transitions (theme switch, no page reload)
   ========================================================== */
body,
.sidebar,
.header,
.footer,
.card,
.table,
.modal-content,
.btn,
.form-control,
.form-select,
.alert,
.nav-link,
.badge {
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* ==========================================================
   Base / Typography
   ========================================================== */
html, body {
    height: 100%;
    scroll-behavior: smooth;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    background-color: var(--bg-canvas);
    color: var(--text-primary);
}

h1 { font-size: 22px !important; font-weight: 600 !important; line-height: 1.3; color: var(--text-primary) !important; }
h2 { font-size: 16px !important; font-weight: 600 !important; color: var(--text-primary) !important; }
h3 { font-size: 14px !important; font-weight: 600 !important; color: var(--text-primary) !important; }
h4 { font-size: 14px !important; font-weight: 600 !important; color: var(--text-primary) !important; }
h5 { font-size: 14px !important; font-weight: 600 !important; color: var(--text-primary) !important; }

a { color: var(--accent) !important; text-decoration: none; }
a:hover { color: var(--accent-hover) !important; }

label { font-size: 13px; font-weight: 500; color: var(--text-primary); }

p { margin-bottom: 0.4rem !important; }

.font-mono,
.monospace {
    font-family: 'JetBrains Mono', monospace;
}

small, .text-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ==========================================================
   Auth forms
   ========================================================== */
.login-shell {
    min-height: calc(100vh - 56px - 60px);
    display: grid;
    place-items: center;
    padding: 24px 16px;
}

.auth-form {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 32px;
}

/* ==========================================================
   Guest Layout — animated mesh background, white-on-blue
   Used by: welcome, login, admin login, password reset flow
   ========================================================== */
body.guest-layout {
    margin: 0;
    background: #1e2d6d;
    min-height: 100vh;
    overflow-x: hidden;
}

#mesh-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* Critical: the canvas covers the whole viewport. Without pointer-events
       disabled, even with a lower z-index Selenium/some browsers report click
       intercepts because the canvas hit-tests under the foreground form. */
    pointer-events: none;
}

.guest-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px 24px;
    box-sizing: border-box;
}

.guest-language-switcher {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
}

/* The language modal trigger looks like a faint pill on the dark bg */
.guest-language-switcher .theme-toggle-btn {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
}

.guest-language-switcher .theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.guest-logo {
    display: inline-block;
    margin-bottom: 8px;
}

.guest-logo img {
    height: 64px;
    width: auto;
    /* The asset is already white — but keep the rule explicit so swapping the
       SVG for a colored version won't accidentally show a dark logo on dark bg. */
    filter: brightness(0) invert(1);
}

.guest-heading {
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    letter-spacing: 0.01em;
    margin: 0 0 26px !important;
    padding: 0;
    text-align: center;
    /* Multi-layer shadow: soft halo for separation from the busy mesh + thin
       dark ring for crisp edge legibility regardless of what mesh pattern lies
       behind the text at any given frame. */
    text-shadow:
        0 0 1px rgba(0, 0, 0, 0.85),
        0 2px 18px rgba(0, 0, 0, 0.55),
        0 0 32px rgba(15, 25, 70, 0.6);
}

.guest-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    color: var(--text-primary);
    border-radius: 12px;
    padding: 28px 28px 24px;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.35),
                0 4px 12px rgba(0, 0, 0, 0.15);
}

/* The auth-form nested inside the guest-card should drop its own card chrome */
.guest-card .auth-form {
    background: transparent;
    border: none;
    padding: 0;
    max-width: none;
}

.guest-card .auth-form h1 {
    text-align: center;
    margin-bottom: 16px;
}

.guest-card .auth-form .login-subtitle {
    text-align: center;
}

.guest-footer {
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* Win over Bootstrap's default `a` color rule with higher specificity. */
.guest-footer a,
.guest-footer a:link,
.guest-footer a:visited {
    color: rgba(255, 255, 255, 0.92) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 1px;
    transition: border-color 120ms ease, color 120ms ease;
}

.guest-footer a:hover,
.guest-footer a:focus {
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

@media (max-width: 480px) {
    .guest-logo img { height: 52px; }
    .guest-card { padding: 22px 20px 20px; border-radius: 10px; }
    .guest-heading { font-size: 26px !important; margin-bottom: 20px !important; }
}

.auth-form h1 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.auth-form .login-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.auth-form .form-group {
    margin-bottom: 16px;
}

.auth-form .form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: block;
}

.auth-form .btn-primary {
    height: 36px;
    font-size: 14px;
    font-weight: 500;
}

.auth-form .link-forgot {
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
}

.auth-form .link-forgot:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.auth-form .divider {
    border-color: var(--border-subtle);
    margin: 20px 0 16px;
}

.auth-form .link-admin {
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
}

.auth-form .link-admin:hover {
    color: var(--accent);
}

/* Welcome page buttons */
.welcome-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    height: 40px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.welcome-btn .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==========================================================
   Navigation – Sidebar
   ========================================================== */
.sidebar {
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    position: relative;
    flex-direction: column;
    height: 100vh;
}

.sidebar-sticky {
    padding-top: 20px;
    padding-bottom: 20px;
    color: var(--text-secondary);
    flex-grow: 1;
    overflow-y: auto;
}

.sidebar-sticky hr {
    border-color: var(--border-subtle);
    margin: 4px 12px;
    opacity: 1;
}

.nav-link {
    color: var(--text-secondary);
    height: 36px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    margin: 1px 8px;
    transition: background-color 100ms ease, color 100ms ease;
}

.nav-link:hover {
    background-color: var(--bg-subtle);
    color: var(--text-primary);
    font-weight: 500;
}

.nav-link.active {
    background-color: var(--accent-subtle) !important;
    color: var(--accent-text) !important;
    border-radius: 6px;
    font-weight: 600;
}

.nav-link.active::before {
    content: none;
}

.nav-link.active i,
.nav-link.active .fa-solid,
.nav-link.active .fa-regular {
    color: var(--accent-text) !important;
}

.nav-link i,
.nav-link .fa-solid,
.nav-link .fa-regular {
    color: var(--text-tertiary);
    width: 20px;
    text-align: center;
    font-size: 16px;
}


/* ==========================================================
   Navigation – Top Bar
   ========================================================== */
.header {
    background-color: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-subtle);
    height: 56px;
    z-index: 1000;
}

/* ==========================================================
   Navigation – Dropdown states
   ========================================================== */
.dropdown-item.active {
    background-color: var(--accent-subtle);
    color: var(--accent-text) !important;
}

.dropdown-item.active .fa-solid {
    color: var(--accent-text) !important;
}

.dropdown-menu {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: none;
}

.dropdown-item {
    color: var(--text-primary);
    font-size: 14px;
}

.dropdown-item:hover {
    background-color: var(--bg-subtle);
    color: var(--text-primary);
}

/* ==========================================================
   Footer
   ========================================================== */
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    padding-top: 8px;
    width: 100%;
    height: 36px;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    text-align: center;
    font-size: 12px;
    z-index: 1000;
}

.footer a {
    color: var(--text-secondary) !important;
}

.footer a:hover {
    color: var(--accent) !important;
}

/* ==========================================================
   Cards
   ========================================================== */
.card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: none !important;
}

.chart-card .card-header {
    font-size: 13px;
    color: var(--text-primary);
    padding: 14px 18px 6px;
}

.chart-card .card-header i {
    color: var(--text-tertiary);
}

.chart-card .card-body {
    padding: 16px 18px 18px;
}

.card-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--text-primary);
    font-family: 'Inter', system-ui, sans-serif !important;
}

.card-title-sm {
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

.card-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--text-secondary);
}

.card-text-full {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--text-secondary);
}

.card-body {
    padding: 20px 24px;
}

/* ==========================================================
   KPI Cards
   ========================================================== */
.kpi-card {
    background-color: var(--bg-subtle);
    border: none;
    border-radius: 8px;
    padding: 16px 18px;
}

.kpi-card .kpi-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.kpi-card .kpi-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.kpi-card .kpi-icon {
    font-size: 16px;
    color: var(--text-tertiary);
}

/* ==========================================================
   Tables
   ========================================================== */
.table {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
    font-size: 13px;
}

.table th,
.table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-subtle);
    background-color: transparent;
}

.table thead th {
    background-color: var(--bg-subtle);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    height: 40px;
    white-space: nowrap;
}

.table tbody tr {
    height: 44px;
    transition: background-color 80ms ease;
}

.table tbody tr:hover {
    background-color: var(--bg-subtle);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Cells with status pills should never split the badge into 2 lines */
.table td.has-pill,
.table td .license-activated,
.table td .license-deactivated,
.table td .license-expired,
.table td .license-demo,
.table td .license-demo-expired,
.table td .license-rental,
.table td .license-rental-expired,
.table td .license-mixed,
.table td .license-inactive,
.table td .license-status-inactive,
.table td .license-definitiv,
.table td .license-definitiv-expired {
    white-space: nowrap;
}

/* No zebra stripes – also defeat Bootstrap's .table-striped which would
   otherwise re-introduce the alternating background on .table.table-striped. */
.table tbody tr:nth-of-type(odd),
.table.table-striped tbody tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent !important;
    --bs-table-striped-bg: transparent;
    --bs-table-accent-bg: transparent;
}

.table-responsive {
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}

.table-responsive .table {
    border: none;
    margin: 0;
}

/* Danger/warning rows — subtle, not full red. We tone the row down so
   that pills inside it (which are already coloured) stay readable. */
.table-danger td,
.table .table-danger td {
    background-color: rgba(163, 45, 45, 0.06) !important;
    color: var(--text-primary);
}

[data-bs-theme="dark"] .table-danger td,
[data-bs-theme="dark"] .table .table-danger td {
    background-color: rgba(240, 149, 149, 0.08) !important;
    color: var(--text-primary);
}

.table-warning td,
.table .table-warning td {
    background-color: var(--warning-subtle) !important;
    color: var(--warning);
}

/* table-success removed – no green row highlights per style guide */
.table-success td,
.table .table-success td {
    background-color: transparent !important;
}

.table-inactive td {
    background-color: var(--bg-muted);
    color: var(--text-disabled);
    text-decoration: line-through;
}

.table-strike td {
    text-decoration: line-through;
}

.table-licenses tr,
#licenses tbody tr.license-row {
    cursor: pointer;
}

/* Make sure clicks on interactive children inside a clickable row stay
   confined to that child – avoids the row triggering navigation. */
#licenses tbody tr.license-row a,
#licenses tbody tr.license-row button,
#licenses tbody tr.license-row .btn-inline-edit {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .table th, .table td {
        padding: 8px;
    }
}

/* ==========================================================
   Status Badges (Pills) – never wrap on multiple lines
   ========================================================== */
.license-activated,
.license-deactivated,
.license-expired,
.license-demo,
.license-demo-expired,
.license-rental,
.license-rental-expired,
.license-mixed,
.license-inactive,
.license-status-inactive,
.license-definitiv,
.license-definitiv-expired,
.invoice-paid,
.invoice-unpaid,
.invoice-cancelled,
.invoice-reminder,
.bit-active,
.bit-inactive,
.bit-demo,
.bit-demo-expired,
.bit-rental,
.bit-rental-expired {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.license-activated,
.license-definitiv,
.invoice-paid {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--success-subtle);
    color: var(--success);
}

.license-activated i,
.license-definitiv i,
.invoice-paid i {
    color: var(--success) !important;
    font-size: 10px;
    margin-right: 0;
}

.license-deactivated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--bg-muted);
    color: var(--text-secondary);
}

.license-deactivated i {
    color: var(--text-secondary) !important;
    font-size: 10px;
    margin-right: 0;
}

/* ----------------------------------------------------------
   Status dot indicator – filled & pulsing for "Aktiv",
   hollow ring for "Inaktiv". Lives inside license-* pills.
   ---------------------------------------------------------- */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    background: currentColor;
}

/* Active (online) – filled green dot, no pulse */
.license-activated .status-dot {
    background: var(--success);
}

@keyframes status-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(15, 110, 86, 0.55); }
    70%  { box-shadow: 0 0 0 6px  rgba(15, 110, 86, 0); }
    100% { box-shadow: 0 0 0 0    rgba(15, 110, 86, 0); }
}

[data-bs-theme="dark"] .license-activated .status-dot {
    background: var(--success);
}

@keyframes status-pulse-dark {
    0%   { box-shadow: 0 0 0 0    rgba(93, 202, 165, 0.55); }
    70%  { box-shadow: 0 0 0 6px  rgba(93, 202, 165, 0); }
    100% { box-shadow: 0 0 0 0    rgba(93, 202, 165, 0); }
}

/* Inactive – hollow ring (no fill, no animation) */
.license-deactivated .status-dot {
    background: transparent;
    border: 1.5px solid currentColor;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
}

/* Inactive (marked inactive in FileMaker) – filled red dot, no pulse */
.license-status-inactive {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--danger-subtle);
    color: var(--danger);
    white-space: nowrap;
}

.license-status-inactive .status-dot {
    background: var(--danger);
}

/* Expired (demo/rental ran out) – filled orange dot, no pulse */
.license-status-expired {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--warning-subtle);
    color: var(--warning);
    white-space: nowrap;
}

.license-status-expired .status-dot {
    background: var(--warning);
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    .license-activated .status-dot {
        animation: none;
    }
}

.license-expired,
.license-demo,
.invoice-unpaid {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--warning-subtle);
    color: var(--warning);
}

.license-demo-expired,
.license-rental-expired,
.license-definitiv-expired,
.license-inactive,
.invoice-reminder {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--danger-subtle);
    color: var(--danger);
}

.license-mixed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--purple-subtle);
    color: var(--purple);
}

.license-rental {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--accent-subtle);
    color: var(--accent-text);
}

.invoice-cancelled {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--bg-muted);
    color: var(--text-secondary);
}

.invoice-download {
    text-decoration: none;
    padding: 4px;
    border-radius: 4px;
    font-weight: 400;
    font-size: 12px;
}

/* Bit type badges – share same shape as license badges */
.bit-demo,
.bit-demo-expired,
.bit-rental,
.bit-rental-expired,
.bit-inactive,
.bit-active {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bit-demo {
    height: 22px;
    background-color: var(--warning-subtle);
    color: var(--warning);
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.bit-demo-expired {
    height: 22px;
    background-color: var(--danger-subtle);
    color: var(--danger);
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.bit-rental {
    height: 22px;
    background-color: var(--accent-subtle);
    color: var(--accent-text);
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.bit-rental-expired {
    height: 22px;
    background-color: var(--danger-subtle);
    color: var(--danger);
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.bit-inactive {
    height: 22px;
    background-color: var(--danger-subtle);
    color: var(--danger);
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.bit-active {
    height: 22px;
    background-color: var(--success-subtle);
    color: var(--success);
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 500;
}

/* ==========================================================
   Buttons
   ========================================================== */
.btn {
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    box-shadow: none !important;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 60ms ease;
    letter-spacing: 0.01em;
}

.btn:active:not(:disabled):not(.disabled) { transform: translateY(1px); }

.btn-sm { height: 32px; padding: 4px 10px; font-size: 12px; }
.btn-md, .btn { height: 36px; padding: 8px 14px; }
.btn-lg { height: 40px; padding: 8px 18px; font-size: 14px; }

.btn-primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

.btn-secondary,
.btn-outline-secondary {
    background-color: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-primary);
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background-color: var(--bg-subtle);
    color: var(--text-primary);
}

.btn-outline-dark {
    background-color: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-primary);
}

.btn-outline-dark:hover {
    background-color: var(--bg-subtle);
    color: var(--text-primary) !important;
    border-color: var(--border-strong);
}

.btn-outline-dark i {
    color: var(--text-primary);
}

.btn-danger,
.btn-outline-danger {
    background-color: transparent;
    border: 1px solid var(--danger);
    color: var(--danger) !important;
}

.btn-danger:hover,
.btn-outline-danger:hover {
    background-color: var(--danger-subtle);
    border-color: var(--danger);
}

.btn-warning {
    background-color: transparent;
    border: 1px solid var(--warning);
    color: var(--warning) !important;
}

.btn-warning:hover {
    background-color: var(--warning-subtle);
    border-color: var(--warning);
    color: var(--warning) !important;
}

.btn-warning i {
    color: var(--warning) !important;
}

.deactivate-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto;
}

.deactivate-disabled i {
    color: var(--warning) !important;
}

.btn-link {
    color: var(--accent) !important;
}

.btn-link:hover {
    color: var(--accent-hover) !important;
}

.btn-cadwork {
    color: #fff !important;
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    z-index: 9999 !important;
}

.btn-cadwork:hover {
    background-color: var(--accent-hover) !important;
}

/* Ghost button */
.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 4px 8px;
}

.btn-ghost:hover {
    background-color: var(--bg-subtle);
}

/* Icon button */
.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button.focus,
button:focus {
    outline: 0;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* ==========================================================
   Inputs & Forms
   ========================================================== */
.form-control,
.form-select {
    height: 36px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background-color: var(--bg-surface);
    color: var(--text-primary);
    padding: 0 12px;
    font-size: 14px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-tertiary) !important;
}

textarea.form-control {
    min-height: 96px;
    height: auto;
    padding: 8px 12px;
}

/* Disabled state — make the *content* visibly inactive, not just the background.
   Bootstrap defaults only dim the background; we also gray the text + placeholder
   so it's obvious at a glance that the value is not in use.
   Note: this targets :disabled only (not [readonly]), so readonly fields like the
   prefilled email in the password reset form keep their normal text color. */
.form-control:disabled,
.form-select:disabled,
textarea.form-control:disabled {
    color: var(--text-disabled) !important;
    background-color: var(--bg-muted);
    cursor: not-allowed;
    opacity: 0.85;
}

.form-control:disabled::placeholder,
textarea.form-control:disabled::placeholder {
    color: var(--text-disabled) !important;
    opacity: 0.7;
}

/* Toggles / Switches */
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-top: 4px;
}

.big-checkbox {
    width: 18px;
    height: 18px;
}

/* ==========================================================
   Alerts / Banners
   ========================================================== */
.alert {
    border-radius: 10px;
    box-shadow: none;
    font-weight: 400;
    padding: 12px 16px;
    font-size: 13px;
    border: 1px solid transparent;
    margin-bottom: 12px;
    line-height: 1.5;
}

.alert b.alert-heading,
.alert .alert-heading {
    font-weight: 600;
    font-size: 13px;
    display: block;
}

.alert ul {
    margin: 6px 0 0 0;
    padding-left: 18px;
}

.alert ul li { margin: 2px 0; }

.alert-info {
    background-color: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent-text);
}

.alert-success {
    background-color: var(--success-subtle);
    border-color: var(--success);
    color: var(--success);
}

.alert-danger {
    background-color: var(--danger-subtle);
    border-color: var(--danger);
    color: var(--danger);
}

.alert-warning {
    background-color: var(--warning-subtle);
    border-color: var(--warning);
    color: var(--warning);
}

.alert-primary {
    background-color: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent-text);
}

.alert-secondary {
    background-color: var(--bg-subtle);
    border-color: var(--border-default);
    color: var(--text-secondary);
}

.alert-light {
    background-color: var(--bg-subtle);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.alert-dark {
    background-color: var(--bg-muted);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.alert-toggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alert-toggle .icon {
    transition: transform 0.2s ease;
}

.alert-toggle.collapsed .icon {
    transform: rotate(0deg);
}

.alert-toggle:not(.collapsed) .icon {
    transform: rotate(180deg);
}

/* ==========================================================
   Modals
   ========================================================== */
.modal {
    z-index: 1000001 !important;
}

.modal-backdrop {
    background-color: var(--overlay-bg);
    backdrop-filter: blur(4px);
    z-index: 1000000 !important;
}

.modal-backdrop.show {
    opacity: 1;
}

.modal-dialog, .modal-content {
    pointer-events: auto;
}

.modal-backdrop.disable-pointer {
    pointer-events: none !important;
}

.modal-content {
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    box-shadow: none;
    overflow: hidden;
    background-color: var(--bg-surface);
}

.modal-header {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    padding: 16px 24px;
}

.modal-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 16px;
}

.modal .btn-close {
    width: 32px;
    height: 32px;
    opacity: 0.65;
    border-radius: 6px;
    background-size: 12px 12px;
    transition: opacity 0.15s ease, background-color 0.2s ease;
}

[data-bs-theme="dark"] .modal .btn-close {
    filter: invert(1) grayscale(100%);
}

.modal .btn-close:hover {
    opacity: 1;
    background-color: var(--bg-subtle);
}

.modal-body {
    color: var(--text-secondary);
    padding: 24px;
    font-size: 14px;
}

.modal-footer {
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    padding: 12px 24px;
}

.modal.fade .modal-dialog {
    transform: translateY(8px);
    transition: transform 120ms ease, opacity 120ms ease;
}

.modal.show .modal-dialog {
    transform: translateY(0);
}

/* ==========================================================
   Accordion
   ========================================================== */
.accordion {
    --bs-accordion-bg: var(--bg-surface);
    --bs-accordion-btn-bg: var(--bg-subtle);
    --bs-accordion-active-bg: var(--accent-subtle);
    --bs-accordion-active-color: var(--accent-text);
    --bs-accordion-icon-active-color: var(--accent-text);
}

/* ==========================================================
   Pagination
   ========================================================== */
.page-item.active .page-link {
    background-color: var(--accent) !important;
    border-color: var(--accent);
    color: #fff !important;
}

.page-link {
    color: var(--text-primary) !important;
    background-color: var(--bg-surface);
    border-color: var(--border-default);
}

.pagination {
    --bs-pagination-bg: var(--bg-surface);
    --bs-pagination-color: var(--text-primary);
}

/* ==========================================================
   Setting Sections
   ========================================================== */
.setting-section {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background-color: var(--bg-surface);
}

/* ==========================================================
   Content Wrapper
   ========================================================== */
.bg-light {
    background-color: var(--bg-canvas) !important;
}

.bg-white {
    background-color: var(--bg-surface) !important;
}

.text-dark {
    color: var(--text-primary) !important;
}

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

/* No max-width clamp on main content – tables need full width */

/* ==========================================================
   Action Icons (device management)
   ========================================================== */
.action-icon {
    width: 24px !important;
}

.open-deactivate-license { width: 36px; }
.open-reset-password { width: 36px; }
.open-logs { width: 36px; }
.license-details { width: 36px; }

.open-remove-device {
    text-decoration: none;
    color: var(--danger) !important;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 100ms ease;
}

.open-remove-device:hover {
    background-color: var(--danger-subtle);
    color: var(--danger) !important;
}

.open-remove-device i { margin: 0 !important; font-size: 12px; }

.open-remove-device-inactive {
    text-decoration: none;
    color: var(--text-disabled) !important;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    cursor: not-allowed;
}

.open-remove-device-inactive i { margin: 0 !important; font-size: 12px; }

.open-block-device {
    text-decoration: none;
    padding: 4px 8px;
    background-color: transparent;
    color: var(--warning) !important;
    border: 1px solid var(--warning);
    border-radius: 6px;
}

.open-block-device:hover {
    background-color: var(--warning-subtle);
    color: var(--warning) !important;
}

/* ==========================================================
   Miscellaneous existing classes
   ========================================================== */
.copy {
    border: none;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    cursor: pointer;
    background-color: var(--bg-surface);
}

.ur {
    border: none;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.ur.focus, .ur:focus {
    outline: 0;
    box-shadow: none !important;
}

.icon { padding: 10px; min-width: 40px; cursor: pointer; }

.container { max-width: 1280px; padding-bottom: 64px; }

#parent { display: flex; height: 93vh; }
#mainContent { width: 850px; margin: 16px; overflow: auto; }

.center-image { display: block; margin-left: auto; margin-right: auto; width: 50%; }
.leftpadding { padding-left: 16px; }
.center { display: block; margin-left: auto; margin-right: auto; }
.minimal-padding { padding: .6rem 1rem !important; }
.views { font-size: 14px; }

.content { text-align: center; overflow: hidden; }
.content img { float: left; }
.content p { margin: 2px 0 0 0; margin-left: 15px; display: block; }

.btn-group-xs > .btn, .btn-xs {
    padding: .25rem .4rem;
    font-size: .875rem;
    line-height: .7;
    border-radius: .2rem;
}

.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.two_factor_authentication_details { margin-top: 16px; }

.key-card { display: block; }
.key-card.hidden { display: none; }

.disabled { pointer-events: none; opacity: 0.6; }

/* Reload animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spinner { animation: spin 1s linear infinite; }

/* Success checkmark with rotating dashed circle (Nightwatch-style) */
.success-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 22px;
    height: 22px;
}
.success-check__circle {
    position: absolute;
    inset: 0;
    border: 2px dashed #22c55e;
    border-radius: 50%;
    animation: spin 8s linear infinite;
}
.success-check__icon {
    color: #22c55e;
    font-size: 12px;
    z-index: 1;
}

/* Large variant for KPI card overlays */
.success-check--large {
    width: 56px;
    height: 56px;
}
.success-check--large .success-check__circle {
    border-width: 3px;
}
.success-check--large .success-check__icon {
    font-size: 28px;
}

/* Chart card static title (shown outside canvas so it persists when overlay is active) */
.chart-card__title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary, #374151);
}

/* No-errors overlay inside chart cards */
.no-errors-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--bg-surface, #fff);
    border-radius: inherit;
    z-index: 2;
}
.no-errors-overlay__text {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
    text-align: center;
    max-width: 200px;
}

.inaktiv { position: relative; pointer-events: none; opacity: 0.5; }

/* Success/Warning bg helpers */
.bg-success-dark { background-color: var(--success); }
.bg-warning-dark { background-color: var(--warning); }

/* Password strength */
#password-strength-progress { border-radius: 4px; }

#successAlertLow {
    margin-bottom: 1px;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
}

/* Timeline */
.timeline { position: relative; max-width: 600px; margin: auto; padding: 20px 0; }
.timeline::before { content: ''; position: absolute; width: 2px; background: var(--border-default); top: 0; bottom: 0; left: 52%; transform: translateX(-50%); }
.timeline-item { position: relative; margin-bottom: 20px; padding-left: 40px; }
.timeline-content { padding: 10px; background: var(--bg-surface); border-radius: 8px; border: 1px solid var(--border-subtle); box-shadow: none; position: relative; }
.timeline-content p { margin: 0; line-height: 1.6; }
.timeline-content small { color: var(--text-tertiary); }

/* DataTable wrapper */
#dataTable_wrapper { padding-bottom: 64px; }

/* Mobile action dropdown */
#mobile-action-dropdown .dropdown-toggle::after { display: none !important; }

/* Choice cards (2FA setup) */
.choice-card { border: 1px solid var(--border-default); }
.choice-card-selected { background-color: var(--accent-subtle); border: 2px solid var(--accent); }

/* ==========================================================
   Scrollbar
   ========================================================== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-canvas); }
::-webkit-scrollbar-thumb { background: var(--text-disabled); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ==========================================================
   Font Awesome icon defaults
   Buttons handle icon spacing via flex `gap`, so no global
   margin-right on icons – it would double up inside .btn.
   ========================================================== */
.fa-solid-inline { color: var(--text-tertiary); margin-right: 0; }
.header-icon { margin-right: 32px !important; width: 16px !important; }

/* Icons placed directly inside labels: keep small breathing room.
   For table cells we use the explicit .cell-icon class instead, so as
   not to interfere with flex/gap layouts inside cells. */
label > i.fa-solid:not(:only-child),
label > i.fa-regular:not(:only-child) {
    margin-right: 4px;
}

/* Button-internal icons rely on .btn flex gap – never add their own margin */
.btn > i.fa-solid,
.btn > i.fa-regular,
.btn > i.fa-brands,
.btn > i.fas,
.btn > i.far,
.btn > i.fab,
.dropdown-item > i.fa-solid,
.dropdown-item > i.fa-regular,
.dropdown-item > i.fa-brands {
    margin: 0 !important;
}

/* Default icon color when nothing else is set */
.btn > i,
.dropdown-item > i,
td > i {
    color: inherit;
}

/* ==========================================================
   Cookie Consent
   ========================================================== */
.cookie-consent { z-index: 1001; }

.js-cookie-consent {
    position: fixed;
    left: 0;
    bottom: 48px;
    padding-top: 8px;
    width: 100%;
    height: 156px;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-default);
    color: var(--text-primary);
    text-align: center;
}

.js-cookie-consent p { color: var(--text-primary) !important; }
.js-cookie-consent-agree { border: 0; }
.js-cookie-consent-agree:hover { background-color: var(--accent-hover); color: white; }

#cookies-policy .cookiesBtn__link,
#cookies-policy .cookiesBtn,
#cookies-policy button {
    background-color: var(--accent) !important;
    color: #ffffff !important;
    border-color: var(--accent) !important;
}

#cookies-policy .cookiesBtn__link:hover,
#cookies-policy .cookiesBtn:hover,
#cookies-policy button:hover {
    background-color: var(--accent-hover) !important;
}

#cookies-policy .cookies__category input[type="checkbox"] + .cookies__box:after {
    background-color: var(--accent);
}

#cookies-policy .cookies__category input[type="checkbox"]:checked + .cookies__box:after {
    background-color: var(--accent-hover);
}

#cookies-policy .cookies__category input[type="checkbox"] + .cookies__box:before {
    background-color: #ffffff;
}

/* ==========================================================
   Theme Toggle (Sun/Moon)
   ========================================================== */
.theme-toggle-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
}

.theme-toggle-btn:hover {
    background-color: var(--bg-subtle);
    color: var(--text-primary);
}

.theme-toggle-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
}

/* Legacy .theme-dropdown styles removed – the toggle is now a single
   button that flips light/dark directly without a System option. */

/* ==========================================================
   Sidebar dark mode toggle (legacy, replaced by theme-toggle)
   ========================================================== */
.switch {
    display: none;
}

/* ==========================================================
   DataResearch devices - shrink Computer ID column to content
   ========================================================== */
#devicesList th.column-shrink,
#devicesList td.column-shrink {
    white-space: nowrap;
    width: 1% !important;
}

/* ==========================================================
   Modal – log messages
   ========================================================== */
#messageModalBody { word-break: break-word; }
#messageModalBody pre {
    background-color: var(--bg-subtle);
    padding: 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    white-space: pre-wrap;
}

/* ==========================================================
   Shop styles
   ========================================================== */
.shop-buttons {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 16px;
    z-index: 9999 !important;
    width: 100%;
}

.product-details { margin-right: 16px; }

/* ==========================================================
   Responsive Layout
   ========================================================== */
@media (min-width: 768px) {
    #leftSidebar {
        display: block !important;
        position: fixed;
        max-width: 240px;
        width: 240px;
        height: 100%;
        overflow-y: auto;
        z-index: 999;
        margin-top: 56px;
        /* Smooth animation when toggling between collapsed and expanded. */
        transition: width 180ms cubic-bezier(0.2, 0, 0, 1),
                    max-width 180ms cubic-bezier(0.2, 0, 0, 1);
    }

    .content { margin-left: 250px; }

    main[role="main"] {
        width: calc(100% - 240px);
        margin-left: 240px;
        margin-top: 68px;
        padding: 0 8px;
        margin-bottom: 48px;
        transition: width 180ms cubic-bezier(0.2, 0, 0, 1),
                    margin-left 180ms cubic-bezier(0.2, 0, 0, 1);
    }

    /* On wider screens we can breathe a bit, but still keep it tight. */
    @media (min-width: 1400px) {
        main[role="main"] { padding: 0 16px; }
    }

    /* Desktop: show the burger icon as the sidebar collapse-toggle. Bootstrap
       hides .navbar-toggler on .navbar-expand-lg above the lg breakpoint —
       we deliberately re-enable it here so users on laptops can shrink the
       sidebar down to an icon-strip when they need horizontal screen real
       estate (e.g. wide tables on a 13" laptop). Same minimal, borderless
       look as on mobile so it reads as a soft icon-tap target, not a
       chunky button. */
    .navbar-expand-lg .navbar-toggler {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        margin-right: 8px;
        background: transparent;
        border: none;
        border-radius: 6px;
        color: var(--text-secondary);
        cursor: pointer;
        box-shadow: none;
        transition: background-color 120ms ease, color 120ms ease;
    }

    .navbar-expand-lg .navbar-toggler:hover,
    .navbar-expand-lg .navbar-toggler:focus {
        background-color: var(--bg-subtle);
        color: var(--text-primary);
        outline: none;
        box-shadow: none;
    }

    .navbar-expand-lg .navbar-toggler i {
        font-size: 18px;
        line-height: 1;
    }

    /* Collapsed desktop sidebar — icon-only strip. Labels collapse via
       max-width animation so the transition stays smooth instead of snapping. */
    html.sidebar-collapsed #leftSidebar {
        width: 60px;
        max-width: 60px;
    }

    html.sidebar-collapsed main[role="main"] {
        width: calc(100% - 60px);
        margin-left: 60px;
    }

    html.sidebar-collapsed #leftSidebar .nav-link {
        padding: 0;
        justify-content: center;
        gap: 0;
        overflow: hidden;
    }

    html.sidebar-collapsed #leftSidebar .nav-link .nav-label {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        margin-left: 0;
        transition: max-width 140ms ease, opacity 100ms ease, margin-left 140ms ease;
    }

    /* Expanded state (default) — label animates back to natural width. */
    #leftSidebar .nav-link .nav-label {
        max-width: 200px;
        opacity: 1;
        white-space: nowrap;
        transition: max-width 180ms ease, opacity 140ms ease 40ms;
    }

    .action-column {
        max-width: 150px !important;
        min-width: 150px !important;
    }
}

/* Confine horizontal scroll to the table rows only.
 *
 * The previous, more surgical attempt (overflow-x: hidden on a single
 * DataTables wrapper class) didn't work because DataTables 2.x emits
 * .dt-container / .dt-layout-row / .dt-layout-cell, the older
 * .dataTables_wrapper is gone, and the inner table's intrinsic width
 * still leaked up through the cascade and pushed the entire card
 * sideways — pagination and "Zeigen … Einträge" scrolled along with
 * the rows.
 *
 * Pragmatic fix: clamp the entire page-content card (the bg-light
 * rounded wrapper used by the licenses / devices views) to its parent
 * width and clip any horizontal overflow at its edge. The only
 * descendant that's allowed to scroll horizontally is .table-responsive,
 * which carries its own overflow-x: auto and therefore renders a
 * scrollbar just under the table rows — exactly where we want it.
 */
/* Belt-and-suspenders: clamp every wrapper above .table-responsive so
   nothing further out can grow with the table's intrinsic width. */
main[role="main"] {
    overflow-x: hidden;
    max-width: 100%;
}

main[role="main"] .bg-light.rounded {
    overflow-x: hidden;
    max-width: 100%;
}

.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* DataTables 2.x layout containers — let them shrink to the card width
   instead of inflating with the table they wrap. */
.dt-container,
div.dt-layout-row,
div.dt-layout-cell,
.dataTables_wrapper {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 767px) {
    html { font-size: 0.85em; }

    .mobile-logo { max-width: 108px !important; }
    .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        margin-right: 8px;
        background: transparent;
        border: none;
        border-radius: 6px;
        color: var(--text-secondary);
        cursor: pointer;
        box-shadow: none;
        transition: background-color 120ms ease, color 120ms ease;
    }

    .navbar-toggler:hover,
    .navbar-toggler:focus {
        background-color: var(--bg-subtle);
        color: var(--text-primary);
        outline: none;
        box-shadow: none;
    }

    .navbar-toggler i {
        font-size: 18px;
        line-height: 1;
    }

    /* Always keep the sidebar in the DOM so we can slide it; override Bootstrap's display: none */
    #leftSidebar.collapse:not(.show),
    #leftSidebar.collapsing {
        display: flex !important;
    }

    #leftSidebar {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        flex-direction: column;
        height: calc(100vh - 56px) !important;
        width: 280px !important;
        max-width: 85vw !important;
        overflow-y: auto;
        z-index: 1040;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        background-color: var(--bg-surface);
        border-right: 1px solid var(--border-subtle);
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.18);
        transform: translateX(-100%);
        /* Snappier slide-in: shorter duration + decelerate curve. Drawer
           settles in under 170ms which feels instant on mobile without
           losing the "physical" deceleration cue at the end. */
        transition: transform 160ms cubic-bezier(0.2, 0, 0, 1);
        will-change: transform;
    }

    #leftSidebar.show { transform: translateX(0); }

    /* Backdrop behind the slide-in panel — matched timing to the drawer
       so they feel like one motion instead of two staggered fades. */
    #sidebarBackdrop {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        opacity: 0;
        visibility: hidden;
        transition: opacity 160ms ease-out, visibility 0s linear 160ms;
        z-index: 1039;
        pointer-events: none;
    }

    body.sidebar-open #sidebarBackdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 160ms ease-out, visibility 0s linear 0s;
    }

    /* Lock body scroll while drawer is open */
    body.sidebar-open { overflow: hidden; }

    #leftSidebar .sidebar-sticky {
        padding-top: 12px;
        padding-bottom: 24px;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    #leftSidebar .nav {
        width: 100%;
        padding: 0;
    }

    #leftSidebar .nav-item {
        width: 100%;
        list-style: none;
    }

    #leftSidebar .nav-link {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        height: 48px;
        padding: 0 24px;
        margin: 0;
        gap: 14px;
        justify-content: flex-start;
        border-radius: 0;
    }

    #leftSidebar .nav-link i,
    #leftSidebar .nav-link .fa-solid,
    #leftSidebar .nav-link .fa-regular {
        font-size: 18px;
        width: 24px;
    }

    .container-fluid { padding: 0 !important; }
    .row { margin: 0 !important; }

    #leftSidebar.collapse.navbar-collapse {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: auto !important;
        width: 280px !important;
        max-width: 85vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .content { margin-left: 0; }

    main[role="main"] {
        width: 100%;
        margin-left: 0;
        margin-top: 64px;
        margin-bottom: 48px;
    }

    .action-column {
        max-width: 20px !important;
        min-width: 20px !important;
    }

    #breadcrumbs_toolbar { display: none !important; }
    .footer { font-size: 10px; }
}

@media (max-width: 992px) {
    .wrapper { width: 100%; }
}

@media (min-width: 768px) {
    #accordian { width: 100%; max-width: 350px !important; }
    #breadcrumbs_sidebar { display: none !important; }
}

@media (max-width: 768px) {
    #accordian { width: 0; }
}

/* Try out larger zoom of html files for tutorials */
#canvas { zoom: 65% !important; }

/* Bootstrap utilities ms-2 / me-2 are intentionally not overridden anymore.
   Use .ms-1 / .me-1 if you need the older tighter spacing. */

/* Border overrides */
.border,
.border-bottom,
.border-top {
    border-color: var(--border-default) !important;
}

/* List group overrides */
.list-group-item {
    background-color: var(--bg-surface);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.list-group-item.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.list-group-item-action:hover {
    background-color: var(--bg-subtle);
    color: var(--text-primary);
}

/* ==========================================================
   KPI Strip (Devices, Licenses) – consistent across all pages
   ========================================================== */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.kpi-card {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color 120ms ease, transform 120ms ease;
}

.kpi-card:hover {
    border-color: var(--border-default);
}

.kpi-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.kpi-label i {
    color: var(--text-tertiary);
    font-size: 13px;
    margin: 0 !important;
}

.kpi-label i.kpi-icon-success { color: var(--success); }
.kpi-label i.kpi-icon-warning { color: var(--warning); }
.kpi-label i.kpi-icon-danger  { color: var(--danger);  }
.kpi-label i.kpi-icon-accent  { color: var(--accent);  }

.kpi-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.kpi-value-sm { font-size: 15px; font-weight: 500; }
.kpi-value-danger { color: var(--danger); }
.kpi-value-warning { color: var(--warning); }
.kpi-value-success { color: var(--success); }

/* ==========================================================
   Info Banner (compact, dismissable)
   ========================================================== */
.info-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: var(--accent-subtle);
    color: var(--accent-text);
    font-size: 13px;
    margin-bottom: 16px;
    min-height: 44px;
    max-height: 44px;
    overflow: hidden;
}

.info-banner a {
    color: var(--accent) !important;
    font-weight: 500;
}

.info-banner-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
    line-height: 1;
}

.info-banner-close:hover {
    color: var(--text-primary);
}

[data-bs-theme="dark"] .info-banner {
    background: rgba(110, 145, 240, 0.08);
    border-color: rgba(110, 145, 240, 0.25);
    color: var(--accent-text);
}

[data-bs-theme="dark"] .info-banner i {
    color: var(--accent-text) !important;
}

/* ==========================================================
   Filter Drawer (slide-in from right) + Filter button in toolbar
   ========================================================== */
.filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
}

.filter-toggle-btn .filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.filter-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.32);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
    z-index: 9990;
}

.filter-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    background: var(--bg-surface);
    border-left: 1px solid var(--border-default);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(.2,.8,.2,1);
    z-index: 9991;
    display: flex;
    flex-direction: column;
}

.filter-drawer.is-open {
    transform: translateX(0);
}

.filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.filter-drawer-header h3 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

.filter-drawer-close {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms ease, color 120ms ease;
}

.filter-drawer-close:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

.filter-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px 8px;
}

.filter-group {
    border: none;
    padding: 0;
    margin: 0 0 22px 0;
}

.filter-group legend,
.filter-select-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 10px;
    padding: 0;
    width: 100%;
    display: block;
}

.dev-filter-select {
    font-size: 13px;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: background-color 100ms ease;
    margin: 1px 0;
}

.filter-option:hover {
    background: var(--bg-subtle);
}

.filter-option input[type="radio"],
.filter-option input[type="checkbox"] {
    margin: 0;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.filter-option input[type="radio"]:checked + span,
.filter-option input[type="checkbox"]:checked + span {
    color: var(--accent-text);
    font-weight: 500;
}

.filter-drawer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.filter-drawer-footer .btn {
    flex: 1;
}

@media (max-width: 480px) {
    .filter-drawer {
        width: 100vw;
        border-left: none;
    }
}

.devices-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px 0;
    flex-wrap: wrap;
}

.filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease;
    white-space: nowrap;
}

.filter-chip:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

.filter-chip.active {
    background: var(--accent-subtle);
    color: var(--accent-text);
    border-color: var(--accent);
}

.filter-chip .chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.filter-chip.active .chip-count {
    background: var(--accent);
    color: #fff;
}

.devices-search-wrapper {
    position: relative;
    width: 320px;
    max-width: 100%;
}

.devices-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 14px;
    pointer-events: none;
}

.devices-search {
    padding-left: 36px !important;
    height: 36px;
}

/* ==========================================================
   Bulk Action Bar
   ========================================================== */
.bulk-action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: var(--accent-subtle);
    border: 1px solid var(--accent);
    font-size: 13px;
    color: var(--accent-text);
}

.bulk-action-count {
    font-weight: 500;
    flex: 1;
}

/* ==========================================================
   UUID Cell (short + copy on hover)
   ========================================================== */
.uuid-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.uuid-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid var(--border-subtle);
    letter-spacing: -0.02em;
}

.uuid-copy-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 2px;
    font-size: 13px;
    line-height: 1;
}

.uuid-cell:hover .uuid-copy-btn {
    display: inline-flex;
}

.uuid-copy-btn:hover {
    color: var(--accent);
}

/* ==========================================================
   Action Menu (⋯ button)
   ========================================================== */
.btn-action-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease;
}

.btn-action-menu:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.btn-action-menu:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
    border-color: var(--accent);
}

.btn-action-menu i { margin: 0 !important; }

.dropdown-item-danger {
    color: var(--danger) !important;
}

.dropdown-item-danger:hover {
    background: var(--danger-subtle) !important;
    color: var(--danger) !important;
}

/* ==========================================================
   Location Inline (flag + text, no pill)
   ========================================================== */
.location-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

/* ==========================================================
   Devices Table Overrides
   ========================================================== */
.devices-table-wrapper {
    min-width: 0;
    width: 100%;
}

.devices-table-wrapper .table {
    table-layout: auto;
    width: 100% !important;
}

@media (max-width: 1100px) {
    .devices-table-wrapper {
        overflow-x: auto;
    }
    .devices-table-wrapper .table {
        min-width: 1050px;
    }
}

/* ==========================================================
   DataTables Sort Icons – only visible on hover/active
   ========================================================== */
table.dataTable thead th.dt-orderable-asc span.dt-column-order,
table.dataTable thead th.dt-orderable-desc span.dt-column-order {
    opacity: 0;
    transition: opacity 100ms ease;
}

table.dataTable thead th.dt-orderable-asc:hover span.dt-column-order,
table.dataTable thead th.dt-orderable-desc:hover span.dt-column-order {
    opacity: 0.5;
}

table.dataTable thead th.dt-ordering-asc span.dt-column-order,
table.dataTable thead th.dt-ordering-desc span.dt-column-order {
    opacity: 1 !important;
}

/* ==========================================================
   Dark Mode – Table Header (no glow/shadow)
   ========================================================== */
[data-bs-theme="dark"] .table thead th {
    background: var(--bg-subtle) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] table.dataTable thead .sorting,
[data-bs-theme="dark"] table.dataTable thead .sorting_asc,
[data-bs-theme="dark"] table.dataTable thead .sorting_desc {
    box-shadow: none !important;
}

/* Hidden DataTables filter column (used for column-search by filter pills).
   DataTables also sets visible:false on column 0, but this provides a
   belt-and-braces hide in case DT loads late. */
.dt-filter-col { display: none !important; }

/* ==========================================================
   Cell icons (in tables)
   ========================================================== */
.cell-icon {
    color: var(--text-tertiary) !important;
    font-size: 13px;
    margin: 0 6px 0 0 !important;
    width: 14px;
    text-align: center;
}

/* ==========================================================
   Empty States
   ========================================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 24px;
    background: var(--bg-surface);
    border: 1px dashed var(--border-default);
    border-radius: 12px;
    color: var(--text-secondary);
}

.empty-state > i {
    font-size: 32px;
    color: var(--text-tertiary);
    margin: 0 0 14px 0 !important;
}

.empty-state h4 {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    margin: 0 0 4px 0 !important;
}

.empty-state p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 360px;
}

/* ==========================================================
   Info Banner – correct text spacing
   ========================================================== */
.info-banner > i.fa-solid {
    color: var(--accent);
    font-size: 14px;
    flex-shrink: 0;
    margin: 0 !important;
}

.info-banner .info-banner-text {
    flex: 1;
}

.info-banner-close i { margin: 0 !important; font-size: 13px; }

/* ==========================================================
   Hide DataTables default search/length when custom filter bar exists
   ========================================================== */
.has-custom-filters .dataTables_filter,
.has-custom-filters .dataTables_length {
    display: none !important;
}

/* Move pagination info + controls together at bottom */
.dataTables_info {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ==========================================================
   General button icon alignment
   ========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
}

.btn .icon,
.btn i.fa-solid,
.btn i.fa-regular,
.btn i.fa-brands,
.btn i.fas,
.btn i.far,
.btn i.fab {
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
}

/* Slightly tighter icon-only buttons */
.btn-sm i.fa-solid,
.btn-sm i.fa-regular,
.btn-sm i.fa-brands,
.btn-sm i.fas,
.btn-sm i.far,
.btn-sm i.fab {
    font-size: 12px;
}

/* Square icon-only buttons with consistent sizing */
.btn-icon-only {
    width: 32px;
    height: 32px;
    padding: 0 !important;
}
.btn-icon-only.btn-sm { width: 32px; height: 32px; }
.btn-icon-only.btn-md, .btn-icon-only:not(.btn-sm):not(.btn-lg) { width: 36px; height: 36px; }

/* Wrapper around a .disabled button so the native title tooltip still
   shows on hover (Bootstrap's `.disabled` sets pointer-events:none on
   the button itself, which would suppress the tooltip otherwise). */
.btn-disabled-wrap {
    display: inline-flex;
    cursor: not-allowed;
}
.btn-disabled-wrap .btn.disabled {
    pointer-events: none; /* keep button itself non-interactive */
}

/* ==========================================================
   DataResearch sub-navigation (tabs above content area)
   ========================================================== */
.dr-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--border-subtle);
    margin: 0 0 18px 0;
    padding: 0 0 0 0;
}

.dr-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    border-radius: 6px 6px 0 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease;
}

.dr-tab i { font-size: 12px; color: inherit; }

.dr-tab:hover {
    color: var(--text-primary) !important;
    background: var(--bg-subtle);
}

.dr-tab.is-active {
    color: var(--accent-text) !important;
    border-bottom-color: var(--accent);
    background: transparent;
}

.dr-tab-danger.is-active {
    color: var(--danger) !important;
    border-bottom-color: var(--danger);
}

/* ==========================================================
   Page Header (used only when there's an action button next to H1)
   ========================================================== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px 0;
    flex-wrap: wrap;
}

.page-header h1 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.page-header .page-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.page-header .page-header-actions .btn {
    white-space: nowrap;
}

/* Plain h1 outside .page-header gets standard top margin reset */
h1 { margin: 0 0 12px 0 !important; }

.page-back-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary) !important;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 100ms ease, border-color 100ms ease;
}
.page-back-btn:hover {
    background: var(--bg-subtle);
    border-color: var(--border-strong);
    color: var(--text-primary) !important;
}
.page-back-btn i { font-size: 13px; }

/* ==========================================================
   Detail-page tabs (Bootstrap nav-tabs override for license details)
   ========================================================== */
.detail-tabs {
    margin-bottom: 0;
    border-bottom: none;
    gap: 0;
    background: transparent;
    padding: 0;
    border: none;
    display: flex;
    flex-wrap: wrap;
}
.detail-tabs .nav-item {
    margin-bottom: -1px;
}
.detail-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: 9px 14px;
    border-radius: 10px 10px 0 0;
    transition: all 200ms ease;
    background: var(--bg-subtle, #f0f0f0);
    position: relative;
    top: 1px;
}
.detail-tabs .nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-surface);
    border-color: var(--border-default);
    border-bottom-color: var(--border-default);
}
.detail-tabs .nav-link.active {
    color: var(--accent, #0d6efd);
    background: var(--bg-surface);
    border-color: var(--border-subtle);
    border-bottom-color: var(--bg-surface);
    z-index: 2;
    top: 1px;
}
.detail-tabs .nav-link.active::before {
    display: none;
}
.detail-tabs .nav-link i {
    font-size: 14px;
}
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--accent-subtle, #e8f0fe);
    color: var(--accent, #0d6efd);
    line-height: 1;
}
.nav-link.active .tab-badge {
    background: var(--accent, #0d6efd);
    color: #fff;
}
.tab-content {
    border: 1px solid var(--border-subtle);
    border-radius: 0 10px 10px 10px;
    background: var(--bg-surface);
    padding: 20px 24px;
    position: relative;
    z-index: 1;
}
.tab-content > .tab-pane {
    padding-top: 0;
}

/* Neutralise section-card when nested inside tab-content (tab-content
   already provides border, padding and background) */
.tab-content .section-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
}

/* ==========================================================
   Section card – wrapping a "block" of content with consistent
   border/padding (used on details pages and module lists)
   ========================================================== */
.section-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

.section-card > h2,
.section-card > h3,
.section-card > h4 {
    margin: 0 0 12px 0;
}

.section-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    margin: 0 0 16px 0 !important;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.section-card-title i {
    color: var(--text-tertiary);
    font-size: 14px;
}

/* ==========================================================
   Log table – fixed layout so DataTables respects column widths
   ========================================================== */
table.dataTable.log-table-fixed {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 900px;
}

.dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
}

table.dataTable.log-table-fixed th,
table.dataTable.log-table-fixed td {
    text-align: left !important;
    padding: 8px 12px !important;
    overflow: hidden;
}

table.dataTable.log-table-fixed .log-col-right {
    text-align: right !important;
}

.log-truncate {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-nowrap {
    white-space: nowrap;
}

.col-meldung {
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clickable-message {
    cursor: pointer;
}

.clickable-message:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* ==========================================================
   Module Cards (license details page)
   ========================================================== */
.modules-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 0 0 14px 0;
    border-radius: 8px;
    background: var(--accent-subtle);
    border: 1px solid transparent;
    color: var(--accent-text);
    font-size: 12px;
    line-height: 1.5;
}

.modules-hint i {
    color: var(--accent);
    font-size: 14px;
    flex-shrink: 0;
}

.modules-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px 0;
    flex-wrap: wrap;
}

.modules-counter {
    font-size: 12px;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.modules-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    margin-top: 8px;
    border-radius: 8px;
    border: 1px dashed var(--border-default);
    color: var(--text-secondary);
    font-size: 13px;
}

.modules-empty i {
    color: var(--text-tertiary);
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.module-card {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 10px 12px 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 100ms ease, background 100ms ease;
    overflow: hidden;
}

.module-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--text-tertiary);
}

.module-card-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.module-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.3;
}

.module-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-tertiary);
    flex-shrink: 0;
}

.module-status-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.module-card-meta {
    font-size: 10px;
    color: var(--text-tertiary);
    font-family: 'JetBrains Mono', monospace;
    margin-top: 2px;
}

/* Status colour variants */
.module-card-active::before    { background: var(--success); }
.module-card-active .module-status-dot { background: var(--success); }
.module-card-active .module-status-text { color: var(--success); font-weight: 500; }

.module-card-demo::before      { background: var(--warning); }
.module-card-demo .module-status-dot { background: var(--warning); }
.module-card-demo .module-status-text { color: var(--warning); font-weight: 500; }

.module-card-rental::before    { background: var(--accent); }
.module-card-rental .module-status-dot { background: var(--accent); }
.module-card-rental .module-status-text { color: var(--accent-text); font-weight: 500; }

.module-card-expired::before   { background: var(--danger); }
.module-card-expired .module-status-dot { background: var(--danger); }
.module-card-expired .module-status-text { color: var(--danger); font-weight: 500; }

/* Inactive – keep the normal surface background, only mute the left
   stripe and turn the dot into a hollow ring. Text stays subdued but
   readable so the card is recognisable, not "dead". */
.module-card-inactive {
    background: var(--bg-surface);
    opacity: 1;
}
.module-card-inactive::before  { background: var(--border-default); }
.module-card-inactive .module-status-dot {
    background: transparent;
    border: 1.5px solid var(--text-tertiary);
    box-sizing: border-box;
}
.module-card-inactive .module-status-text { color: var(--text-tertiary); font-weight: 400; }
.module-card-inactive .module-card-name { color: var(--text-secondary); }

.section-card .table {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .section-card { padding: 16px; }
}

/* ==========================================================
   Stat / definition rows on details pages
   ========================================================== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 24px;
}

.stat-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-row .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.stat-row .stat-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Inline edit pencil sits right after a value with subtle styling */
.btn-inline-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    border: none;
    color: var(--text-tertiary) !important;
    text-decoration: none !important;
    transition: background-color 100ms ease, color 100ms ease;
}
.btn-inline-edit:hover {
    background: var(--bg-subtle);
    color: var(--accent) !important;
}
.btn-inline-edit i { font-size: 12px; margin: 0 !important; }

/* ==========================================================
   Stacked Modals (sub-modal on top of wizard)
   ========================================================== */
#wizardCreatePoolModal {
    z-index: 1065;
}
#wizardCreatePoolModal + .modal-backdrop,
.modal-backdrop + .modal-backdrop {
    z-index: 1060;
}