/* ==========================================================================
   Signage — design system
   Tokens → base → app shell → components → legacy class aliases → utilities
   ========================================================================== */

:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    /* Neutrals */
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #f9fafb;
    --surface-3: #f1f3f6;
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --text: #111827;
    --text-2: #4b5563;
    --text-3: #6b7280;
    --text-inverse: #ffffff;

    /* Brand */
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-soft: #eef2ff;
    --primary-soft-2: #e0e7ff;
    --primary-text: #3730a3;

    /* Semantic */
    --success: #059669;
    --success-soft: #ecfdf5;
    --success-text: #065f46;
    --warning: #d97706;
    --warning-soft: #fffbeb;
    --warning-text: #92400e;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --danger-soft: #fef2f2;
    --danger-text: #991b1b;
    --info: #0284c7;
    --info-soft: #f0f9ff;
    --info-text: #075985;

    /* Shape */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow: 0 4px 12px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
    --shadow-lg: 0 20px 40px -12px rgba(16, 24, 40, .25);
    --ring: 0 0 0 3px rgba(79, 70, 229, .22);

    --sidebar-w: 248px;
    --topbar-h: 60px;
    --content-max: 1280px;
    --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; color: var(--text); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.625rem; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: .9375rem; }
h5, h6 { font-size: .875rem; }
p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
img, video, iframe { max-width: 100%; }
small { font-size: .8125rem; }
code, pre, kbd { font-family: var(--font-mono); font-size: .8125rem; }
code { background: var(--surface-3); padding: .1rem .35rem; border-radius: 4px; }
pre { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: var(--radius); overflow: auto; }
pre code { background: none; padding: 0; color: inherit; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
ul, ol { padding-left: 1.25rem; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
::selection { background: var(--primary-soft-2); }
[hidden], .d-flex[hidden], .flex[hidden] { display: none !important; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Icons (inline SVG sprite) */
.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 16px; height: 16px; }
.i-lg { width: 22px; height: 22px; }

/* ==========================================================================
   App shell
   ========================================================================== */
.app { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: var(--sidebar-w);
    display: flex; flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    transition: transform .25s var(--ease);
}
.sidebar-brand {
    display: flex; align-items: center; gap: .625rem;
    height: var(--topbar-h); padding: 0 1.25rem;
    font-weight: 700; font-size: 1rem; color: var(--text); letter-spacing: -.01em;
    border-bottom: 1px solid var(--border);
}
.sidebar-brand:hover { color: var(--text); }
.brand-mark {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #4338ca);
    color: #fff; box-shadow: 0 2px 6px rgba(79, 70, 229, .35);
}
.brand-mark .i { width: 17px; height: 17px; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem .75rem 1rem; }
.nav-section { margin-top: 1.25rem; }
.nav-section:first-child { margin-top: .25rem; }
.nav-heading {
    padding: 0 .75rem .375rem;
    font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-3);
}
.nav-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem .75rem; margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--text-2); font-weight: 500;
    transition: background .15s, color .15s;
}
.nav-item .i { color: var(--text-3); transition: color .15s; }
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item:hover .i { color: var(--text-2); }
.nav-item.is-active { background: var(--primary-soft); color: var(--primary-text); }
.nav-item.is-active .i { color: var(--primary); }

.sidebar-footer { padding: .75rem; border-top: 1px solid var(--border); }
.credit-card {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .75rem .875rem; border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary-soft), #f5f3ff);
    border: 1px solid var(--primary-soft-2);
    color: var(--primary-text);
}
.credit-card:hover { color: var(--primary-text); border-color: #c7d2fe; }
.credit-card-label { font-size: .75rem; font-weight: 500; opacity: .8; }
.credit-card-value { font-size: 1.125rem; font-weight: 700; line-height: 1.2; }

.app-main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }

.topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 1rem;
    height: var(--topbar-h); padding: 0 1.5rem;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border);
}
.topbar-title { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-spacer { flex: 1; }
.menu-btn { display: none; }
.topbar-brand { display: none; }

.user-menu { position: relative; }
.user-menu-btn {
    display: flex; align-items: center; gap: .625rem;
    padding: .25rem .5rem .25rem .25rem; border: 1px solid transparent;
    border-radius: var(--radius-full); background: none; cursor: pointer; font: inherit; color: var(--text);
}
.user-menu-btn:hover, .user-menu.is-open .user-menu-btn { background: var(--surface-3); }
.avatar {
    display: inline-grid; place-items: center; flex: none;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--primary-soft-2); color: var(--primary-text);
    font-size: .8125rem; font-weight: 600; text-transform: uppercase;
}
.avatar-lg { width: 44px; height: 44px; font-size: 1rem; }
.user-menu-name { font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
    min-width: 220px; padding: .375rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.is-open > .menu { opacity: 1; visibility: visible; transform: none; }
.menu-header { padding: .5rem .625rem .625rem; border-bottom: 1px solid var(--border); margin-bottom: .375rem; }
.menu-header strong { display: block; }
.menu-header span { font-size: .8125rem; color: var(--text-3); }
.menu-item {
    display: flex; align-items: center; gap: .625rem; width: 100%;
    padding: .5rem .625rem; border: 0; border-radius: var(--radius-sm);
    background: none; font: inherit; color: var(--text-2); text-align: left; cursor: pointer;
}
.menu-item:hover { background: var(--surface-3); color: var(--text); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger-soft); }
.menu form { margin: 0; }

.page { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 1.75rem 1.5rem 3rem; }
.app-footer { padding: 1rem 1.5rem; text-align: center; font-size: .75rem; color: var(--text-3); }

.scrim { display: none; }

/* Guest (auth) shell */
.guest {
    min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem;
    background:
        radial-gradient(1200px 600px at 10% -10%, #e0e7ff 0%, transparent 60%),
        radial-gradient(900px 500px at 110% 110%, #ede9fe 0%, transparent 55%),
        var(--bg);
}
.guest-inner { width: 100%; max-width: 420px; }
.guest-brand { display: flex; align-items: center; justify-content: center; gap: .625rem; margin-bottom: 1.5rem; font-weight: 700; font-size: 1.125rem; color: var(--text); }
.guest-brand .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
.guest-footer { margin-top: 1.5rem; text-align: center; font-size: .8125rem; color: var(--text-3); }

/* ==========================================================================
   Page header
   ========================================================================== */
.page-header, .header-section, .admin-header {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-header h1, .header-section h1, .admin-header h1 { margin: 0; }
.page-header p, .page-subtitle, .page-description { margin: .25rem 0 0; color: var(--text-3); font-size: .9375rem; }
.page-actions, .header-actions, .admin-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.page-title-section { min-width: 0; }
.eyebrow { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); margin-bottom: .25rem; }

.breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: .375rem;
    margin: 0 0 .75rem; padding: 0; list-style: none; background: none;
    font-size: .8125rem; color: var(--text-3);
}
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .separator { color: var(--border-strong); }
.breadcrumb li + li::before { content: '/'; margin-right: .375rem; color: var(--border-strong); }
.breadcrumb .active, .breadcrumb .current { color: var(--text-2); font-weight: 500; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    height: 38px; padding: 0 1rem;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    font: inherit; font-size: .875rem; font-weight: 500; line-height: 1; white-space: nowrap;
    cursor: pointer; user-select: none; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn .i { width: 16px; height: 16px; }

.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn-primary:hover { background: var(--primary-hover); color: #fff; }

.btn-secondary, .btn-outline, .btn-light, .btn-default {
    background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-xs);
}
.btn-secondary:hover, .btn-outline:hover, .btn-light:hover, .btn-default:hover { background: var(--surface-2); color: var(--text); border-color: #9ca3af; }

.btn-outline-primary { background: var(--surface); color: var(--primary); border-color: #c7d2fe; }
.btn-outline-primary:hover { background: var(--primary-soft); color: var(--primary-hover); }

.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); color: #fff; }
.btn-outline-danger, .btn-danger-soft { background: var(--surface); color: var(--danger); border-color: #fecaca; }
.btn-outline-danger:hover, .btn-danger-soft:hover { background: var(--danger-soft); color: var(--danger-hover); }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #047857; color: #fff; }
.btn-warning { background: #f59e0b; color: #fff; }
.btn-warning:hover { background: var(--warning); color: #fff; }
.btn-info { background: var(--info); color: #fff; }
.btn-info:hover { background: #0369a1; color: #fff; }
.btn-link { background: none; color: var(--primary); padding: 0; height: auto; }

.btn-sm, .btn-small { height: 32px; padding: 0 .75rem; font-size: .8125rem; }
.btn-lg, .btn-large { height: 44px; padding: 0 1.25rem; font-size: .9375rem; }
.btn-block, .btn-full-width, .btn-full { display: flex; width: 100%; }
.btn-icon { width: 34px; height: 34px; padding: 0; }
.btn-icon.btn-sm { width: 30px; height: 30px; }

.btn-group, .action-buttons, .actions { display: inline-flex; flex-wrap: wrap; gap: .375rem; align-items: center; }
.inline-form, form.inline { display: inline-flex; margin: 0; }

/* ==========================================================================
   Cards & surfaces
   ========================================================================== */
.card, .dashboard-section, .admin-card, .info-card, .detail-card, .analytics-card, .account-section,
.detail-section, .status-section, .info-panel, .form-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.dashboard-section, .admin-card, .info-card, .detail-card, .analytics-card, .account-section,
.detail-section, .status-section, .info-panel, .form-section { padding: 1.25rem; margin-bottom: 1.25rem; }
.card { margin-bottom: 1.25rem; overflow: hidden; }
.card:has([data-dropdown]), .card.overflow-visible { overflow: visible; }
.card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); background: transparent;
}
.card-header h2, .card-header h3, .card-header h4, .card-title { margin: 0; font-size: 1rem; font-weight: 600; }
.card-subtitle { margin: .125rem 0 0; font-size: .8125rem; color: var(--text-3); }
.card-body { padding: 1.25rem; }
.card-footer { padding: .875rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; gap: .5rem; justify-content: flex-end; }
.card-meta { font-size: .8125rem; color: var(--text-3); }
.card-flush .card-body { padding: 0; }
a.card { color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.card:hover { border-color: #c7d2fe; box-shadow: var(--shadow); transform: translateY(-1px); }

.section-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.section-header h2, .section-header h3 { margin: 0; font-size: 1rem; }
.section-title { font-size: 1rem; font-weight: 600; margin: 0 0 1rem; }

/* Grids */
.grid { display: grid; gap: 1rem; }
.grid-2 { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-auto { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.layout-sidebar { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }

/* Stat cards */
.stats-grid, .stats-overview, .status-grid {
    display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 1.5rem;
}
.stat-card, .stat-item, .stat {
    position: relative; display: flex; align-items: center; gap: 1rem;
    padding: 1.125rem 1.25rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
    color: inherit;
}
a.stat-card, .stat-card[data-link] { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
a.stat-card:hover, .stat-card[data-link]:hover { border-color: #c7d2fe; box-shadow: var(--shadow); color: inherit; }
.stat-icon {
    display: grid; place-items: center; flex: none;
    width: 42px; height: 42px; border-radius: var(--radius);
    background: var(--primary-soft); color: var(--primary); font-size: 1.25rem;
}
.stat-icon.green, .stat-icon.success { background: var(--success-soft); color: var(--success); }
.stat-icon.amber, .stat-icon.warning { background: var(--warning-soft); color: var(--warning); }
.stat-icon.red, .stat-icon.danger { background: var(--danger-soft); color: var(--danger); }
.stat-icon.sky, .stat-icon.info { background: var(--info-soft); color: var(--info); }
.stat-content { display: flex; flex-direction: column; min-width: 0; }
.stat-number, .stat-value { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--text); }
.stat-label { display: block; font-size: .8125rem; color: var(--text-3); font-weight: 500; }
.stat-trend { font-size: .75rem; color: var(--text-3); }

/* Info / detail lists */
.info-grid, .details-grid { display: grid; gap: .875rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.info-item, .detail-item, .modal-detail-item { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.detail-row { display: flex; justify-content: space-between; gap: 1rem; padding: .625rem 0; border-bottom: 1px solid var(--border); }
.detail-row:last-child { border-bottom: 0; }
.info-item label, .info-label, .detail-label, .modal-detail-label, .info-item .label {
    font-size: .75rem; font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em;
}
.info-item span, .info-value, .detail-value, .modal-detail-value, .info-item .value { color: var(--text); font-weight: 500; word-break: break-word; }
.not-available { color: var(--text-3); font-style: italic; font-weight: 400; }

/* Description list */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: .625rem 1.5rem; margin: 0; }
.dl dt { color: var(--text-3); font-size: .8125rem; }
.dl dd { margin: 0; font-weight: 500; word-break: break-word; }

/* ==========================================================================
   Lists (resource rows)
   ========================================================================== */
.list { list-style: none; margin: 0; padding: 0; }
.list-item {
    display: flex; align-items: center; gap: 1rem;
    padding: .875rem 1.25rem; border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: var(--surface-2); }
.list-item-main { flex: 1; min-width: 0; }
.list-item-title { display: block; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.list-item-title:hover { color: var(--primary); }
.list-item-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .8125rem; color: var(--text-3); }
.list-item-icon {
    display: grid; place-items: center; flex: none;
    width: 38px; height: 38px; border-radius: var(--radius);
    background: var(--surface-3); color: var(--text-2);
}

/* Resource cards (grid of items) */
.item-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs); overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.item-card:hover { border-color: #c7d2fe; box-shadow: var(--shadow); }
.item-card-media { aspect-ratio: 16 / 9; background: var(--surface-3); display: grid; place-items: center; color: var(--text-3); overflow: hidden; }
.item-card-media img, .item-card-media video { width: 100%; height: 100%; object-fit: cover; }
.item-card-body { padding: 1rem 1.125rem; flex: 1; }
.item-card-title { font-weight: 600; margin: 0 0 .25rem; color: var(--text); }
.item-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1.125rem; border-top: 1px solid var(--border); background: var(--surface-2); }

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap, .table-responsive, .table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table, table.data-table {
    width: 100%; border-collapse: separate; border-spacing: 0; margin: 0;
    font-size: .875rem; background: var(--surface);
}
.table th, .table td, table.data-table th, table.data-table td {
    padding: .75rem 1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border);
}
.table thead th, table.data-table thead th {
    position: sticky; top: 0;
    background: var(--surface-2); color: var(--text-3);
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.table tbody tr:hover, table.data-table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num, .table .text-right { text-align: right; }
.card > .table-wrap, .card > .table-responsive, .card > .table { border-radius: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-container {
    max-width: 640px; margin: 0 auto 1.5rem;
    padding: 1.75rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.form-container > h2:first-child, .form-container > h1:first-child { margin-bottom: 1.25rem; }
.form-header { margin-bottom: 1.25rem; }
.form-header h1, .form-header h2 { margin-bottom: .25rem; }
.form-header p { color: var(--text-3); }

.form-group { margin-bottom: 1.125rem; }
.form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-row > .form-group { margin-bottom: 1.125rem; }

label, .form-label {
    display: block; margin-bottom: .375rem;
    font-size: .8125rem; font-weight: 500; color: var(--text);
}
.required, label .req { color: var(--danger); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"],
input[type="search"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"],
select, textarea,
.form-input, .form-control, .form-select, .form-textarea {
    display: block; width: 100%;
    min-height: 38px; padding: .5rem .75rem;
    font: inherit; font-size: .875rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    transition: border-color .15s, box-shadow .15s;
    appearance: none; -webkit-appearance: none;
}
textarea, .form-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
select, .form-select {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .625rem center;
}
select[multiple] { background-image: none; padding-right: .75rem; }
input::placeholder, textarea::placeholder { color: #9ca3af; }
input:hover, select:hover, textarea:hover { border-color: #9ca3af; }
input:focus, select:focus, textarea:focus,
.form-input:focus, .form-control:focus, .form-select:focus, .form-textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
input:disabled, select:disabled, textarea:disabled, input[readonly] { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }
input.is-invalid, select.is-invalid, textarea.is-invalid, .has-error input, .has-error select, .has-error textarea,
input.error, .form-input.error { border-color: var(--danger); }
input.is-invalid:focus, .has-error input:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); }

input[type="color"], .form-color {
    width: 52px; height: 38px; padding: 3px; cursor: pointer;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
}
input[type="file"] { font: inherit; font-size: .8125rem; color: var(--text-2); }
input[type="file"]::file-selector-button {
    margin-right: .75rem; padding: .4rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font: inherit; font-weight: 500; cursor: pointer;
}
input[type="range"], .form-slider { width: 100%; accent-color: var(--primary); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; vertical-align: middle; }

.checkbox-label, .radio-label, .checkbox-group label, .form-check {
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; cursor: pointer; margin-bottom: 0;
}
.checkbox-group { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

.form-help, .form-text, .help-text, .form-description, .form-hint {
    display: block; margin-top: .375rem; font-size: .8125rem; color: var(--text-3);
}
.form-error, .field-error, .invalid-feedback, .error-message {
    display: block; margin-top: .375rem; font-size: .8125rem; color: var(--danger); font-weight: 500;
}
.error-message:empty, .field-error:empty, .form-error:empty { display: none; }

.form-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem;
    margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
}
.form-actions.start { justify-content: flex-start; }
.form-links { margin-top: 1.25rem; text-align: center; font-size: .8125rem; color: var(--text-3); }
.form-links p { margin-bottom: .375rem; }

.input-group { display: flex; align-items: stretch; }
.input-group > input, .input-group > select { border-radius: var(--radius-sm) 0 0 var(--radius-sm); flex: 1; min-width: 0; }
.input-group > .btn, .input-group > .input-addon { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-left: -1px; height: auto; }
.input-addon, .duration-unit { display: inline-flex; align-items: center; padding: 0 .75rem; font-size: .8125rem; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border-strong); }
.duration-input { display: flex; align-items: stretch; max-width: 220px; }
.duration-input input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.duration-input .duration-unit { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-left: -1px; }

.slider-container { display: flex; align-items: center; gap: .75rem; }
.slider-value { min-width: 3rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Choice tiles (type pickers / radio cards) */
.type-option, .choice-tile {
    display: flex; flex-direction: column; gap: .375rem;
    padding: 1rem; border: 1.5px solid var(--border); border-radius: var(--radius);
    background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.type-option:hover, .choice-tile:hover { border-color: #a5b4fc; }
.type-option.selected, .type-option.active, .choice-tile.is-selected,
.type-option:has(input:checked), .choice-tile:has(input:checked) {
    border-color: var(--primary); background: var(--primary-soft); box-shadow: var(--ring);
}
.type-icon { font-size: 1.5rem; line-height: 1; }
.type-title { font-weight: 600; color: var(--text); }
.type-description { font-size: .8125rem; color: var(--text-3); }

/* File upload drop zone */
.file-upload-area, .dropzone {
    position: relative; display: block;
    padding: 2rem 1.25rem; text-align: center;
    border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
    background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s;
}
.file-upload-area:hover, .file-upload-area.dragover, .file-upload-area.drag-over, .dropzone:hover, .dropzone.is-dragover {
    border-color: var(--primary); background: var(--primary-soft);
}
.file-upload-area input[type="file"], .file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-upload-icon { font-size: 1.75rem; margin-bottom: .5rem; color: var(--primary); }
.file-upload-text { font-weight: 600; color: var(--text); }
.file-upload-hint { font-size: .8125rem; color: var(--text-3); margin-top: .25rem; }
.file-preview { margin-top: .75rem; }
.file-info { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.file-name { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font-size: .8125rem; color: var(--text-3); }
.remove-file { border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: 1.125rem; }
.remove-file:hover { color: var(--danger); }

/* ==========================================================================
   Feedback: alerts, badges, status
   ========================================================================== */
.alert {
    position: relative; display: flex; align-items: flex-start; gap: .625rem;
    padding: .75rem 1rem; margin-bottom: 1.25rem;
    border: 1px solid; border-radius: var(--radius);
    font-size: .875rem;
}
.alert > .i { margin-top: 1px; }
.alert ul { margin: .25rem 0 0; }
.alert-success { background: var(--success-soft); border-color: #a7f3d0; color: var(--success-text); }
.alert-error, .alert-danger { background: var(--danger-soft); border-color: #fecaca; color: var(--danger-text); }
.alert-warning { background: var(--warning-soft); border-color: #fde68a; color: var(--warning-text); }
.alert-info { background: var(--info-soft); border-color: #bae6fd; color: var(--info-text); }
.alert-dismiss { margin-left: auto; border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; padding: 0 .25rem; font-size: 1.125rem; line-height: 1; }
.alert-dismiss:hover { opacity: 1; }
.warning-box { padding: 1rem; border: 1px solid #fde68a; background: var(--warning-soft); color: var(--warning-text); border-radius: var(--radius); margin-bottom: 1rem; }

.badge, .status-badge, .slide-type-badge, .stat-badge, .pill {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .1875rem .5rem; border-radius: var(--radius-full);
    font-size: .75rem; font-weight: 500; line-height: 1.4; white-space: nowrap;
    background: var(--surface-3); color: var(--text-2);
}
.badge-primary, .badge-default { background: var(--primary-soft); color: var(--primary-text); }
.badge-success, .status-active, .badge-active, .status-online, .status-badge.active, .status-badge.online { background: var(--success-soft); color: var(--success-text); }
.badge-warning, .status-pending, .badge-pending { background: var(--warning-soft); color: var(--warning-text); }
.badge-danger, .badge-error, .status-error, .status-badge.error { background: var(--danger-soft); color: var(--danger-text); }
.badge-info { background: var(--info-soft); color: var(--info-text); }
.badge-secondary, .status-inactive, .badge-inactive, .status-offline, .status-badge.inactive, .status-badge.offline { background: var(--surface-3); color: var(--text-3); }
.badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.status-dot, .status-indicator {
    display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong);
}
.status-dot.online, .status-dot.active, .status-indicator.status-good, .status-indicator.online, .status-indicator.active { background: var(--success); box-shadow: 0 0 0 3px rgba(5, 150, 105, .15); }
.status-dot.warning, .status-indicator.status-warning, .status-indicator.warning { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }
.status-dot.offline, .status-dot.error, .status-indicator.status-error, .status-indicator.offline, .status-indicator.error { background: var(--danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.status-dot.inactive, .status-indicator.inactive { background: #9ca3af; }
.status-item { display: flex; align-items: center; gap: .625rem; padding: .375rem 0; }

.online { color: var(--success); }
.offline { color: var(--text-3); }

/* Empty states */
.empty-state, .no-data {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 3rem 1.5rem; color: var(--text-3);
}
.empty-state h3, .empty-state h2 { color: var(--text); margin: .75rem 0 .25rem; font-size: 1rem; }
.empty-state p { max-width: 380px; margin: 0 auto 1.25rem; }
.empty-icon, .empty-state-icon {
    display: grid; place-items: center;
    width: 56px; height: 56px; border-radius: 16px;
    background: var(--primary-soft); color: var(--primary); font-size: 1.5rem;
}
.empty-icon .i, .empty-state-icon .i { width: 26px; height: 26px; }
.empty-state-small { padding: 1.5rem; text-align: center; color: var(--text-3); }

/* ==========================================================================
   Modal (vanilla, also supports legacy .modal markup)
   ========================================================================== */
.modal, .modal-overlay {
    position: fixed; inset: 0; z-index: 100;
    display: none; align-items: center; justify-content: center;
    padding: 1rem; background: rgba(17, 24, 39, .5);
    backdrop-filter: blur(2px);
}
.modal.is-open, .modal.show, .modal-overlay.show, .modal-overlay.is-open { display: flex; }
.modal[style*="display: block"], .modal[style*="display:block"], .modal[style*="display: flex"] { display: flex !important; }
.modal-content, .modal-dialog-box {
    position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 2rem); overflow: auto;
    background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    animation: modal-in .18s var(--ease);
}
.modal-lg .modal-content, .modal-content.modal-lg { max-width: 820px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--border); }
.modal-header h2, .modal-header h3, .modal-header h4, .modal-title { margin: 0; font-size: 1.0625rem; }
.modal-body { padding: 1.25rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: .875rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface-2); }
.modal-close, .close {
    display: grid; place-items: center; width: 32px; height: 32px;
    border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-3);
    font-size: 1.375rem; line-height: 1; cursor: pointer;
}
.modal-close:hover, .close:hover { background: var(--surface-3); color: var(--text); }
.modal-detail-section { margin-bottom: 1.25rem; }
.modal-detail-section h4 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.modal-detail-list { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
body.modal-open { overflow: hidden; }

.confirm-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--danger-soft); color: var(--danger); margin-bottom: .75rem; }

/* Toasts */
.toast-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.toast {
    pointer-events: auto; display: flex; align-items: center; gap: .625rem;
    min-width: 260px; max-width: 380px; padding: .75rem 1rem;
    background: #111827; color: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
    font-size: .875rem; animation: modal-in .2s var(--ease);
}
.toast.success .i { color: #34d399; }
.toast.error .i { color: #f87171; }


/* Danger zone */
.danger-zone { border-color: #fecaca; }
.danger-zone .card-header { border-bottom-color: #fee2e2; }
.danger-zone .card-header h2, .danger-zone .card-header h3 { color: var(--danger-text); }
.danger-zone-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Cards inside grids rely on the grid gap, not their own margin */
.grid > .card, .grid-2 > .card, .grid-3 > .card, .grid-auto > .card, .layout-sidebar > .card,
.grid-2 > div > .card:last-child, .layout-sidebar > div > .card:last-child, .layout-sidebar > aside > .card:last-child { margin-bottom: 0; }
.grid-2, .grid-3, .layout-sidebar { margin-bottom: 1.25rem; }

/* ==========================================================================
   Tabs, dropdowns, misc components
   ========================================================================== */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; overflow-x: auto; }
.tab { padding: .625rem .875rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-weight: 500; color: var(--text-3); cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.is-active, .tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.segmented { display: inline-flex; padding: 3px; background: var(--surface-3); border-radius: var(--radius-sm); gap: 2px; }
.segmented button, .segmented a { border: 0; background: none; padding: .375rem .75rem; border-radius: 5px; font: inherit; font-size: .8125rem; font-weight: 500; color: var(--text-2); cursor: pointer; }
.segmented .is-active, .segmented .active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }

.dropdown { position: relative; display: inline-block; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.toolbar .search { margin: 0; position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.toolbar .search .i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.toolbar .search input { padding-left: 2.25rem; }

.code-display, .activation-code {
    display: inline-block; padding: .5rem 1rem;
    font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; letter-spacing: .25em;
    background: var(--primary-soft); color: var(--primary-text); border: 1px dashed #a5b4fc; border-radius: var(--radius);
}

.progress { height: 8px; background: var(--surface-3); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar { height: 100%; background: var(--primary); border-radius: inherit; transition: width .3s; }

.avatar-group { display: flex; }
.kbd { display: inline-block; padding: 0 .375rem; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; font-size: .75rem; font-family: var(--font-mono); }

/* Slide / media previews */
.slide-thumbnail, .preview-placeholder, .slide-image {
    position: relative; display: grid; place-items: center;
    aspect-ratio: 16 / 9; width: 100%;
    background: var(--surface-3); border-radius: var(--radius); overflow: hidden; color: var(--text-3);
}
.slide-thumbnail img, .slide-image img, .slide-thumbnail video { width: 100%; height: 100%; object-fit: cover; }
.preview-icon { font-size: 2rem; }
.slide-duration, .time-ago, .last-seen { font-size: .8125rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.drag-handle { cursor: grab; color: var(--text-3); }
.dragging { opacity: .5; }
.drag-over { outline: 2px dashed var(--primary); outline-offset: 2px; }

/* Quick actions */
.action-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 1.5rem; }
.action-card, .action-item {
    display: flex; align-items: flex-start; gap: .875rem;
    padding: 1rem 1.125rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.action-card:hover, .action-item:hover { border-color: #c7d2fe; box-shadow: var(--shadow); color: var(--text); transform: translateY(-1px); }
.action-icon {
    display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--radius);
    background: var(--primary-soft); color: var(--primary); font-size: 1.125rem;
}
.action-content h3, .action-content h4 { margin: 0 0 .125rem; font-size: .9375rem; }
.action-content p { margin: 0; font-size: .8125rem; color: var(--text-3); }

/* Tips */
.tip-item { display: flex; gap: .625rem; padding: .5rem 0; font-size: .8125rem; color: var(--text-2); }

/* Error pages */
.error-container { max-width: 520px; margin: 4rem auto; text-align: center; padding: 2.5rem 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.error-code { font-size: 4rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; background: linear-gradient(135deg, #6366f1, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: .5rem; }
.error-title { font-size: 1.25rem; margin-bottom: .5rem; }
.error-actions { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; flex-wrap: wrap; }

/* ==========================================================================
   Bootstrap-compat grid & helpers (views still use a few)
   ========================================================================== */
.container { width: 100%; max-width: var(--content-max); margin: 0 auto; }
.page .container { padding: 0; }
.row { display: flex; flex-wrap: wrap; margin: 0 -.625rem; }
.row > [class*="col"] { padding: 0 .625rem; }
.col { flex: 1 0 0%; }
.col-12, .col-md-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) {
    .col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 768px) {
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; }
}
.row > [class*="col"] { width: 100%; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.text-muted { color: var(--text-3) !important; }
.text-secondary { color: var(--text-2) !important; }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger, .text-error { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }
.text-center { text-align: center !important; }
.text-right, .text-end { text-align: right !important; }
.text-sm, .small { font-size: .8125rem; }
.text-xs { font-size: .75rem; }
.font-medium { font-weight: 500; }
.font-semibold, .fw-semibold { font-weight: 600; }
.font-bold, .fw-bold { font-weight: 700; }
.mono { font-family: var(--font-mono); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }

.d-none { display: none !important; }
.d-flex, .flex { display: flex !important; }
.d-block { display: block !important; }
.d-grid { display: grid !important; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }
.items-center, .align-items-center { align-items: center; }
.justify-between, .justify-content-between { justify-content: space-between; }
.justify-end, .justify-content-end { justify-content: flex-end; }
.justify-center, .justify-content-center { justify-content: center; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; }
.w-100, .w-full { width: 100%; }

.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: .25rem !important; } .mt-2 { margin-top: .5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .25rem !important; } .mb-2 { margin-bottom: .5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; }
.ml-auto, .ms-auto { margin-left: auto !important; }
.p-0 { padding: 0 !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
    .layout-sidebar { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .app.nav-open .sidebar { transform: none; }
    .app.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(17, 24, 39, .4); }
    .app-main { margin-left: 0; }
    .menu-btn { display: inline-flex; }
    .topbar-brand { display: inline-flex; }
    .topbar { padding: 0 1rem; }
    .page { padding: 1.25rem 1rem 2.5rem; }
    .user-menu-name { display: none; }
}
@media (max-width: 640px) {
    h1 { font-size: 1.375rem; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .page-header, .header-section, .admin-header { align-items: flex-start; flex-direction: column; }
    .form-container { padding: 1.25rem; }
    .stats-grid, .stats-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card { padding: .875rem; gap: .75rem; }
    .stat-icon { width: 36px; height: 36px; }
    .stat-number, .stat-value { font-size: 1.25rem; }
    .table th, .table td { padding: .625rem .75rem; }
    .hide-sm { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
    .sidebar, .topbar, .app-footer { display: none; }
    .app-main { margin-left: 0; }
}