/* ===================================================================
TelefonPark — Modern UI Theme
=================================================================== */

:root {
    /* Layout */
    --sidebar-width: 260px;
    --topbar-height: 60px;

    /* Sidebar palette */
    --sidebar-bg: #0f172a;
    --sidebar-hover: #1e293b;
    --sidebar-active: #3b82f6;
    --sidebar-active-glow: rgba(59, 130, 246, .15);
    --sidebar-text: rgba(255, 255, 255, .55);
    --sidebar-text-hover: #fff;
    --sidebar-header-text: rgba(255, 255, 255, .3);
    --sidebar-divider: rgba(255, 255, 255, .06);

    /* Surface & Backgrounds */
    --body-bg: #f4f6fa;
    --surface: #ffffff;
    --surface-hover: #f8fafc;
    --border-color: #e5e7eb;
    --border-light: #f0f0f5;

    /* Text */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;

    /* Brand colors */
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #06b6d4;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -1px rgba(0, 0, 0, .04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .03);

    /* Radius */
    --radius: 0.5rem;
    --radius-lg: 0.75rem;

    /* Transitions */
    --transition: 150ms cubic-bezier(.4, 0, .2, 1);
    --transition-slow: 250ms cubic-bezier(.4, 0, .2, 1);
}

/* ?? Base ???????????????????????????????????????????????????????? */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-hover); }

::selection { background: rgba(59, 130, 246, .15); }

/* ?? Sidebar ????????????????????????????????????????????????????? */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    color: #fff;
    z-index: 1040;
    transition: transform var(--transition-slow), width var(--transition-slow);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
    border-bottom: 1px solid var(--sidebar-divider);
    flex-shrink: 0;
    gap: .5rem;
}

.sidebar-brand__text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, .08);
    color: var(--sidebar-text);
    border-radius: .375rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition);
    font-size: .7rem;
    margin-left: auto;
}

.sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.sidebar-brand i {
    color: var(--sidebar-active);
    margin-right: .6rem;
    font-size: 1.3rem;
}

.sidebar-menu {
    list-style: none;
    padding: .5rem 0;
    margin: 0;
    flex: 1;
}

.sidebar-menu .menu-header {
    padding: 1rem 1.25rem .4rem;
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sidebar-header-text);
    font-weight: 600;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    padding: .55rem 1rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: .8125rem;
    font-weight: 500;
    border-radius: .375rem;
    margin: 1px .625rem;
    transition: all var(--transition);
    position: relative;
}

.sidebar-menu a:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-hover);
}

.sidebar-menu a.active {
    background: var(--sidebar-active);
    color: #fff;
    box-shadow: 0 1px 8px var(--sidebar-active-glow);
}

.sidebar-menu a i {
    width: 18px;
    text-align: center;
    margin-right: .75rem;
    font-size: .825rem;
    flex-shrink: 0;
}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .1); border-radius: 3px; }

/* ?? Sidebar Submenus ???????????????????????????????????????????? */
.sidebar-submenu__toggle {
    position: relative;
    padding-right: 2.25rem !important;
}

.sidebar-submenu__arrow {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .55rem;
    opacity: .5;
    transition: transform var(--transition), opacity var(--transition);
    width: auto !important;
    margin-right: 0 !important;
}

.sidebar-submenu--open > .sidebar-submenu__toggle .sidebar-submenu__arrow {
    transform: translateY(-50%) rotate(180deg);
    opacity: .8;
}

.sidebar-submenu__list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.sidebar-submenu--open > .sidebar-submenu__list {
    max-height: 200px;
}

.sidebar-submenu__list a {
    padding-left: 2.75rem !important;
    font-size: .775rem !important;
    opacity: .85;
}

.sidebar-submenu__list a:hover {
    opacity: 1;
}

/* ?? Sidebar Collapsed State (desktop) ??????????????????????????? */
.sidebar-collapsed .sidebar {
    width: 68px;
}

.sidebar-collapsed .sidebar-brand {
    padding: 0;
    justify-content: center;
}

.sidebar-collapsed .sidebar-brand__text,
.sidebar-collapsed .sidebar-menu .menu-header span,
.sidebar-collapsed .sidebar-menu a span,
.sidebar-collapsed .sidebar-submenu__arrow {
    display: none;
}

.sidebar-collapsed .sidebar-menu .menu-header {
    padding: .75rem 0 .25rem;
    text-align: center;
}

.sidebar-collapsed .sidebar-menu .menu-header::after {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: var(--sidebar-divider);
    margin: 0 auto;
}

.sidebar-collapsed .sidebar-menu a {
    justify-content: center;
    padding: .6rem;
    margin: 1px .5rem;
}

.sidebar-collapsed .sidebar-menu a i {
    margin-right: 0;
    font-size: .95rem;
}

.sidebar-collapsed .sidebar-collapse-btn {
    margin: 0;
}

.sidebar-collapsed .sidebar-collapse-btn i {
    transform: rotate(180deg);
}

.sidebar-collapsed .sidebar-submenu__list {
    max-height: 0 !important;
}

.sidebar-collapsed .main-content {
    margin-left: 68px;
}

/* Tooltip for collapsed sidebar */
.sidebar-collapsed .sidebar-menu a {
    position: relative;
}

.sidebar-collapsed .sidebar-menu > li > a::after,
.sidebar-collapsed .sidebar-submenu > .sidebar-submenu__toggle::after {
    content: attr(title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    padding: .35rem .65rem;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    background: #1e293b;
    border-radius: .375rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.sidebar-collapsed .sidebar-menu > li > a:hover::after,
.sidebar-collapsed .sidebar-submenu > .sidebar-submenu__toggle:hover::after {
    opacity: 1;
}

/* ?? Main Content ???????????????????????????????????????????????? */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition-slow);
}

/* ?? Topbar ?????????????????????????????????????????????????????? */
.topbar {
    height: var(--topbar-height);
    background: var(--surface);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.topbar .breadcrumb {
    margin: 0;
    font-size: .8rem;
}

.topbar .breadcrumb a { color: var(--text-secondary); }
.topbar .breadcrumb a:hover { color: var(--primary); }
.topbar .breadcrumb-item.active { color: var(--text-primary); font-weight: 600; }

.topbar .btn-sidebar-toggle {
    display: none;
    border: none;
    background: none;
    font-size: 1.25rem;
    color: var(--text-secondary);
    padding: .25rem;
    cursor: pointer;
    transition: color var(--transition);
}

.topbar .btn-sidebar-toggle:hover { color: var(--text-primary); }

.topbar .user-dropdown .btn {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: .35rem .75rem;
    transition: all var(--transition);
}

.topbar .user-dropdown .btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.topbar .user-dropdown .dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .25rem;
    min-width: 160px;
}

.topbar .user-dropdown .dropdown-item {
    font-size: .8125rem;
    padding: .45rem .75rem;
    border-radius: .25rem;
    transition: background var(--transition);
}

.topbar .user-dropdown .dropdown-item:hover { background: var(--surface-hover); }

/* ?? Page Content ???????????????????????????????????????????????? */
.page-content {
    padding: 1.5rem;
    flex: 1;
}

.page-header {
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -.02em;
}

/* ?? Stat Cards ?????????????????????????????????????????????????? */
.stat-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.375rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    transition: all var(--transition-slow);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-card .stat-icon {
    width: 46px;
    height: 46px;
    border-radius: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.stat-card .stat-value {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-top: .15rem;
}

.stat-card .stat-label {
    font-size: .75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ?? Table Cards ????????????????????????????????????????????????? */
.table-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.table-card .card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border-color);
    padding: .875rem 1.25rem;
    font-weight: 600;
    font-size: .875rem;
    color: var(--text-primary);
}

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

.table-card .table th {
    background: var(--surface-hover);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding: .7rem 1rem;
    white-space: nowrap;
}

.table-card .table td {
    padding: .7rem 1rem;
    vertical-align: middle;
    font-size: .8125rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
}

.table-card .table tbody tr {
    transition: background var(--transition);
}

.table-card .table tbody tr:hover {
    background: rgba(59, 130, 246, .02);
}

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

.table-card .table tfoot td {
    background: var(--surface-hover);
    border-top: 2px solid var(--border-color);
    font-weight: 600;
}

/* ?? Badges ?????????????????????????????????????????????????????? */
.badge-status {
    font-size: .675rem;
    padding: .3em .65em;
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 1rem;
}

/* ?? Form Card ??????????????????????????????????????????????????? */
.form-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    padding: 1.5rem;
}

/* ?? Form Controls ??????????????????????????????????????????????? */
.form-control, .form-select {
    font-size: .8125rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: .5rem .75rem;
    transition: all var(--transition);
    color: var(--text-primary);
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.form-control::placeholder { color: var(--text-muted); }

.form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: .35rem;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
    border-color: var(--primary);
}

.form-check-label { font-size: .8125rem; }

/* ?? Buttons ????????????????????????????????????????????????????? */
.btn {
    font-size: .8125rem;
    font-weight: 600;
    padding: .45rem 1rem;
    border-radius: var(--radius);
    transition: all var(--transition);
    letter-spacing: .01em;
}

.btn-sm {
    font-size: .75rem;
    padding: .35rem .75rem;
}

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

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 2px 8px rgba(59, 130, 246, .3);
}

.btn-outline-primary { border-color: var(--primary); color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); box-shadow: 0 2px 8px rgba(59, 130, 246, .25); }

.btn-outline-secondary { border-color: var(--border-color); color: var(--text-secondary); }
.btn-outline-secondary:hover { background: var(--surface-hover); border-color: var(--border-color); color: var(--text-primary); }

.btn-outline-danger { border-color: var(--danger); color: var(--danger); }
.btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); box-shadow: 0 2px 8px rgba(239, 68, 68, .25); }

.btn-outline-info { border-color: var(--info); color: var(--info); }
.btn-outline-info:hover { background: var(--info); border-color: var(--info); }

.btn-success { background: var(--success); border-color: var(--success); }
.btn-success:hover { filter: brightness(.9); box-shadow: 0 2px 8px rgba(16, 185, 129, .3); }

.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover { filter: brightness(.9); color: #fff; }

/* Focus rings */
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .3);
}

.form-control:focus-visible, .form-select:focus-visible {
    outline: none;
}

/* ?? Alerts ?????????????????????????????????????????????????????? */
.alert {
    font-size: .8125rem;
    border-radius: var(--radius);
    border: none;
    font-weight: 500;
    padding: .75rem 1rem;
}

.alert-success {
    background: rgba(16, 185, 129, .08);
    color: #065f46;
}

.alert-danger {
    background: rgba(239, 68, 68, .08);
    color: #991b1b;
}

.alert-info {
    background: rgba(6, 182, 212, .08);
    color: #155e75;
}

.alert .btn-close { font-size: .625rem; }

/* ?? Cards (generic, for report pages etc.) ?????????????????????? */
.card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.card.shadow-sm {
    box-shadow: var(--shadow);
}

.card .card-body { padding: 1.25rem; }

.card .card-title {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* ?? Tables (generic, inside .card) ?????????????????????????????? */
.table-bordered th,
.table-bordered td {
    border-color: var(--border-color);
    font-size: .8125rem;
}

.table-light, .table-light > th, .table-light > td {
    background: var(--surface-hover);
}

/* ?? Auth Pages — Gradient + Glassmorphism ??????????????????????? */

/* Keyframe animations */
@keyframes authGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes authOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -40px) scale(1.05); }
    66%      { transform: translate(-20px, 20px) scale(.95); }
}

@keyframes authPhoneFloat {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-18px) rotate(-4deg); }
}

@keyframes authFadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes authWave {
    0%, 100% { transform: rotate(0deg); }
    15%      { transform: rotate(14deg); }
    30%      { transform: rotate(-8deg); }
    45%      { transform: rotate(14deg); }
    60%      { transform: rotate(-4deg); }
    75%      { transform: rotate(10deg); }
}

/* Page shell */
.auth-page {
    min-height: 100vh;
    background: #0f172a;
    overflow: hidden;
}

.auth-container {
    display: flex;
    min-height: 100vh;
}

/* ?? Hero (Left 60%) ???????????????????????????????????????????? */
.auth-hero {
    flex: 0 0 60%;
    max-width: 60%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 3.5rem;
    overflow: hidden;
}

/* Animated gradient background */
.auth-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 40%, #f093fb 70%, #667eea 100%);
    background-size: 200% 200%;
    /* Removed fast animation for performance */
    z-index: 0;
}

/* Floating orbs */
.auth-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .4;
    z-index: 1;
    /* Static orbs for performance */
}

.auth-hero-orb--1 {
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, .2);
    top: -10%;
    right: -8%;
}

.auth-hero-orb--2 {
    width: 300px;
    height: 300px;
    background: rgba(99, 102, 241, .35);
    bottom: 0;
    left: -5%;
    animation-delay: -3s;
}

.auth-hero-orb--3 {
    width: 200px;
    height: 200px;
    background: rgba(244, 114, 182, .3);
    top: 45%;
    left: 35%;
    animation-delay: -6s;
}

/* Hero content */
.auth-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 500px;
    animation: authFadeInUp .7s ease-out both;
}

/* ?? Phone Mockup (Colorful, 3D-like) ??????????????????????????? */
.auth-phone-mockup {
    margin-bottom: 2.5rem;
    margin-left: -1rem;
    /* Removed float animation */
    filter: drop-shadow(0 30px 50px rgba(0,0,0,.35));
}

.auth-phone-frame {
    width: 200px;
    height: 358px;
    background: linear-gradient(145deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 100%);
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 36px;
    padding: 18px 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
}

.auth-phone-notch {
    width: 60px;
    height: 7px;
    background: rgba(255, 255, 255, .3);
    border-radius: 4px;
    margin: 0 auto 18px;
}

.auth-phone-screen {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Colorful stat rows inside phone */
.auth-phone-stat {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 600;
    color: #fff;
}

.auth-phone-stat i {
    font-size: .65rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.auth-phone-stat--green {
    background: rgba(16, 185, 129, .25);
}
.auth-phone-stat--green i {
    background: rgba(16, 185, 129, .4);
}

.auth-phone-stat--blue {
    background: rgba(59, 130, 246, .25);
}
.auth-phone-stat--blue i {
    background: rgba(59, 130, 246, .4);
}

.auth-phone-stat--orange {
    background: rgba(249, 115, 22, .25);
}
.auth-phone-stat--orange i {
    background: rgba(249, 115, 22, .4);
}

.auth-phone-bar {
    height: 30px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
    margin-top: 8px;
}

.auth-phone-bar--short { width: 65%; }

/* Hero text */
.auth-hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.04em;
    margin-bottom: 1.25rem;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .2);
}

.auth-hero-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, .7);
    line-height: 1.75;
    margin-bottom: 2.5rem;
}

/* Trust indicators */
.auth-trust-indicators {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.auth-trust-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .95);
}

.auth-trust-item i {
    font-size: 1.2rem;
    color: #34d399;
    filter: drop-shadow(0 0 6px rgba(52, 211, 153, .45));
}

/* ?? Glass Card (Right 40%) ????????????????????????????????????? */
.auth-card-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    background: linear-gradient(160deg, #5b6abf 0%, #7c3aed 50%, #4c1d95 100%);
}

.auth-glass-card {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, .25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 24px;
    padding: 2.5rem 2.25rem;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, .3),
        inset 0 1px 0 rgba(255, 255, 255, .15);
    color: #fff;
    animation: authFadeInUp .7s .15s ease-out both;
}

/* Card header with wave emoji */
.auth-card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .25rem;
}

.auth-card-header h2 {
    font-size: 1.625rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.02em;
}

.auth-wave {
    font-size: 1.5rem;
    display: inline-block;
    animation: authWave 2.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

.auth-glass-card > p {
    font-size: .9rem;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 1.75rem;
    line-height: 1.5;
}

/* Fields */
.auth-field {
    margin-bottom: 1.125rem;
}

.auth-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .875rem;
    margin-bottom: 1.125rem;
}

.auth-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: .4rem;
    color: rgba(255, 255, 255, .9);
}

.auth-input-wrap {
    position: relative;
}

.auth-input-wrap i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .45);
    font-size: .825rem;
    pointer-events: none;
    z-index: 2;
    transition: color 300ms ease;
}

.auth-input-wrap:focus-within i {
    color: rgba(255, 255, 255, .7);
}

.auth-input {
    width: 100%;
    padding: .7rem .9rem .7rem 2.6rem;
    font-size: .875rem;
    font-family: inherit;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .75rem;
    outline: none;
    transition: all 300ms ease;
}

.auth-input::placeholder {
    color: rgba(255, 255, 255, .35);
}

.auth-input:focus {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .4);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .1);
}

/* Checkbox */
.auth-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .75);
    cursor: pointer;
}

.auth-checkbox input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #f97316;
    cursor: pointer;
}

/* Submit button — orange gradient */
.auth-btn-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .8rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #f59e0b 100%);
    border: none;
    border-radius: .75rem;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(249, 115, 22, .4);
    transition: all 300ms ease;
    letter-spacing: .01em;
}

.auth-btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(249, 115, 22, .5);
    filter: brightness(1.08);
}

.auth-btn-submit:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(249, 115, 22, .35);
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    font-size: .8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .45);
    text-transform: lowercase;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
}

/* Social buttons — branded, wide */
.auth-social-row {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.auth-social-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .75rem 1.1rem;
    font-size: .875rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: .75rem;
    cursor: pointer;
    transition: all 300ms ease;
}

.auth-social-btn i { font-size: 1.1rem; }
.auth-social-btn span { font-size: .875rem; }

.auth-social-btn--google {
    background: #fff;
    color: #374151;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.auth-social-btn--google:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}

.auth-social-btn--google i {
    color: #ea4335;
}

.auth-social-btn--apple {
    background: #000;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.auth-social-btn--apple:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
    background: #1a1a1a;
}

.auth-social-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Bottom link */
.auth-bottom-link {
    text-align: center;
    font-size: .875rem;
    color: rgba(255, 255, 255, .6);
    margin-top: 1.25rem;
    margin-bottom: 0;
}

.auth-bottom-link a {
    color: #fb923c;
    font-weight: 700;
    text-decoration: none;
    transition: color 300ms ease;
}

.auth-bottom-link a:hover {
    color: #fdba74;
}

.auth-bottom-link a i {
    font-size: .75rem;
    margin-left: .2rem;
    transition: transform 300ms ease;
}

.auth-bottom-link a:hover i {
    transform: translateX(4px);
}

/* ?? Landing Navbar (over gradient) ?????????????????????????????? */
.landing-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    padding: .75rem 0;
    background: rgba(15, 23, 42, .3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.landing-nav-brand {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none;
    letter-spacing: -.01em;
}

.landing-nav-brand i {
    color: #fb923c;
    margin-right: .6rem;
    font-size: 1.35rem;
}

.landing-nav-btn {
    font-size: .8125rem;
    font-weight: 600;
    padding: .4rem 1.1rem;
    border-radius: var(--radius);
}

/* ?? Auth Responsive ????????????????????????????????????????????? */
@media (max-width: 1199.98px) {
    .auth-hero { flex: 0 0 55%; max-width: 55%; padding: 3rem 2.5rem; }
    .auth-hero-title { font-size: 2.5rem; }
    .auth-phone-frame { width: 175px; height: 310px; }
}

@media (max-width: 991.98px) {
    .auth-hero { flex: 0 0 50%; max-width: 50%; padding: 2rem 1.5rem; }
    .auth-hero-title { font-size: 2rem; }
    .auth-hero-subtitle { font-size: .9375rem; }
    .auth-phone-frame { width: 150px; height: 270px; }
    .auth-glass-card { padding: 2rem 1.75rem; }
}

@media (max-width: 767.98px) {
    .auth-container { flex-direction: column; }

    .auth-hero {
        flex: none;
        max-width: 100%;
        min-height: 38vh;
        padding: 5rem 1.5rem 2rem;
        text-align: center;
    }

    .auth-hero-content { max-width: 100%; }
    .auth-hero-title { font-size: 2rem; }
    .auth-hero-subtitle br { display: none; }

    .auth-phone-mockup { display: none; }

    .auth-trust-indicators {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: .6rem 1rem;
    }

    .auth-trust-item { font-size: .8125rem; }

    .auth-card-panel { padding: 1.25rem; }
    .auth-glass-card { max-width: 100%; padding: 2rem 1.5rem; }

    .auth-field-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .auth-hero { min-height: 35vh; padding: 4.5rem 1rem 1.5rem; }
    .auth-hero-title { font-size: 1.625rem; }
    .auth-hero-subtitle { font-size: .875rem; margin-bottom: 1.5rem; }
    .auth-trust-item { font-size: .75rem; }
    .auth-card-panel { padding: .75rem; }
    .auth-glass-card { padding: 1.5rem 1.25rem; border-radius: 18px; }
    .auth-social-btn span { display: none; }
    .auth-social-btn { justify-content: center; padding: .65rem; }
}

/* ?? Dashboard — Gradient Metric Cards ??????????????????????????? */

@keyframes dashPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(0,0,0,.1); }
    50%      { box-shadow: 0 4px 25px rgba(239,68,68,.25); }
}

.dash-metric {
    position: relative;
    border-radius: .875rem;
    padding: 1.35rem 1.375rem;
    color: #fff;
    overflow: hidden;
    transition: transform 250ms ease, box-shadow 250ms ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
}

.dash-metric:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
}

.dash-metric--blue   { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.dash-metric--orange  { background: linear-gradient(135deg, #f97316 0%, #ef4444 100%); }
.dash-metric--green   { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.dash-metric--purple  { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.dash-metric--red     { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

.dash-metric--pulse { animation: dashPulse 2s ease-in-out infinite; }

.dash-metric__icon {
    width: 44px;
    height: 44px;
    border-radius: .75rem;
    background: rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: .875rem;
}

.dash-metric__body {
    display: flex;
    flex-direction: column;
}

.dash-metric__label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
}

.dash-metric__value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.dash-metric__trend {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .7rem;
    font-weight: 700;
    margin-top: .2rem;
    padding: .15rem .45rem;
    border-radius: 1rem;
    width: fit-content;
}

.dash-metric__trend--up {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.dash-metric__trend--down {
    background: rgba(239, 68, 68, .3);
    color: #fecaca;
}

.dash-metric__subtext {
    font-size: .65rem;
    font-weight: 500;
    opacity: .6;
    margin-top: .1rem;
}

.dash-metric__spark {
    position: absolute;
    right: 1rem;
    bottom: .75rem;
    font-size: 3.5rem;
    opacity: .1;
    line-height: 1;
}

/* ?? Dashboard — Card Shell ?????????????????????????????????????? */
.dash-card {
    background: var(--surface);
    border-radius: .875rem;
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dash-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
}

.dash-card__header h3 {
    font-size: .875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.dash-card__link {
    font-size: .75rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .3rem;
    transition: gap 200ms ease;
}

.dash-card__link:hover {
    gap: .5rem;
}

.dash-card__body {
    padding: 1.25rem;
    flex: 1;
}

.dash-card__body--flush {
    padding: 0;
}

/* ?? Dashboard — Timeline ???????????????????????????????????????? */
.dash-timeline {
    display: flex;
    flex-direction: column;
}

.dash-timeline__item {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    transition: background 150ms ease;
}

.dash-timeline__item:last-child {
    border-bottom: none;
}

.dash-timeline__item:hover {
    background: var(--surface-hover);
}

.dash-timeline__dot {
    width: 36px;
    height: 36px;
    border-radius: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

.dash-timeline__dot--pending    { background: rgba(107,114,128,.1); color: #6b7280; }
.dash-timeline__dot--inspecting { background: rgba(6,182,212,.1);   color: #06b6d4; }
.dash-timeline__dot--repairing  { background: rgba(245,158,11,.1);  color: #f59e0b; }
.dash-timeline__dot--repaired   { background: rgba(16,185,129,.1);  color: #10b981; }
.dash-timeline__dot--delivered   { background: rgba(59,130,246,.1);  color: #3b82f6; }

.dash-timeline__content {
    flex: 1;
    min-width: 0;
}

.dash-timeline__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .35rem;
}

.dash-timeline__name {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    margin-right: .5rem;
}

.dash-timeline__time {
    font-size: .6875rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.dash-timeline__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}

.dash-timeline__fault {
    font-size: .75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Status badges */
.dash-badge {
    font-size: .625rem;
    font-weight: 600;
    padding: .2em .55em;
    border-radius: 1rem;
    white-space: nowrap;
    letter-spacing: .01em;
}

.dash-badge--pending    { background: rgba(107,114,128,.1); color: #6b7280; }
.dash-badge--inspecting { background: rgba(6,182,212,.1);   color: #06b6d4; }
.dash-badge--repairing  { background: rgba(245,158,11,.1);  color: #f59e0b; }
.dash-badge--repaired   { background: rgba(16,185,129,.1);  color: #10b981; }
.dash-badge--delivered   { background: rgba(59,130,246,.1);  color: #3b82f6; }

/* ?? Dashboard — Alerts Widget ??????????????????????????????????? */
.dash-alerts {
    display: flex;
    flex-direction: column;
}

.dash-alert-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    text-decoration: none;
    transition: background 150ms ease;
}

.dash-alert-item:last-child {
    border-bottom: none;
}

.dash-alert-item:hover {
    background: var(--surface-hover);
}

.dash-alert-item__icon {
    width: 40px;
    height: 40px;
    border-radius: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}

.dash-alert-item--warning .dash-alert-item__icon { background: rgba(245,158,11,.1);  color: #f59e0b; }
.dash-alert-item--info    .dash-alert-item__icon { background: rgba(59,130,246,.1);   color: #3b82f6; }
.dash-alert-item--danger  .dash-alert-item__icon { background: rgba(239,68,68,.1);    color: #ef4444; }
.dash-alert-item--purple  .dash-alert-item__icon { background: rgba(139,92,246,.1);   color: #8b5cf6; }

.dash-alert-item--muted .dash-alert-item__icon { background: rgba(156,163,175,.08); color: #d1d5db; }
.dash-alert-item--muted .dash-alert-item__title { color: var(--text-muted); }
.dash-alert-item--muted .dash-alert-item__desc { color: #d1d5db; }
.dash-alert-item--muted { opacity: .7; }

.dash-alert-item__body {
    flex: 1;
    min-width: 0;
}

.dash-alert-item__title {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dash-alert-item__desc {
    display: block;
    font-size: .7rem;
    color: var(--text-muted);
}

.dash-alert-item__badge {
    font-size: .75rem;
    font-weight: 800;
    min-width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    letter-spacing: -.02em;
    flex-shrink: 0;
}

.dash-alert-item__badge--warning { background: rgba(245,158,11,.12); color: #d97706; }
.dash-alert-item__badge--info    { background: rgba(59,130,246,.12);  color: #2563eb; }
.dash-alert-item__badge--danger  { background: rgba(239,68,68,.12);   color: #dc2626; }
.dash-alert-item__badge--purple  { background: rgba(139,92,246,.12);  color: #7c3aed; }
.dash-alert-item__badge--zero    { background: rgba(156,163,175,.08); color: #d1d5db; }

/* ?? Dashboard — Dikkat Edilmesi Gerekenler Widget ??????????????? */
.dikkat-widget {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(245, 158, 11, .3);
    box-shadow: var(--shadow), 0 0 0 1px rgba(245, 158, 11, .05);
    overflow: hidden;
}

.dikkat-widget__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    background: rgba(245, 158, 11, .06);
    border-bottom: 1px solid rgba(245, 158, 11, .15);
}

.dikkat-widget__header-icon {
    width: 36px;
    height: 36px;
    border-radius: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    background: rgba(245, 158, 11, .15);
    color: #d97706;
    flex-shrink: 0;
}

.dikkat-widget__title {
    font-size: .875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.dikkat-widget__body {
    display: flex;
    flex-direction: column;
}

.dikkat-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 1.25rem;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    transition: background 150ms ease;
}

.dikkat-item:last-child {
    border-bottom: none;
}

.dikkat-item:hover {
    background: var(--surface-hover);
    text-decoration: none;
    color: var(--text-primary);
}

.dikkat-item__icon {
    width: 38px;
    height: 38px;
    border-radius: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

.dikkat-item--critical .dikkat-item__icon { background: rgba(239, 68, 68, .12); color: #dc2626; }
.dikkat-item--danger .dikkat-item__icon   { background: rgba(239, 68, 68, .1);  color: #ef4444; }
.dikkat-item--warning .dikkat-item__icon  { background: rgba(245, 158, 11, .1); color: #f59e0b; }
.dikkat-item--orange .dikkat-item__icon   { background: rgba(249, 115, 22, .1); color: #f97316; }

.dikkat-item__body {
    flex: 1;
    min-width: 0;
}

.dikkat-item__title {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.dikkat-item__desc {
    display: block;
    font-size: .7rem;
    color: var(--text-muted);
    margin-top: .1rem;
}

.dikkat-item__badge {
    font-size: .75rem;
    font-weight: 800;
    min-width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    letter-spacing: -.02em;
    flex-shrink: 0;
}

.dikkat-item__badge--danger  { background: rgba(239, 68, 68, .12); color: #dc2626; }
.dikkat-item__badge--warning { background: rgba(245, 158, 11, .12); color: #d97706; }
.dikkat-item__badge--orange  { background: rgba(249, 115, 22, .12); color: #ea580c; }

.dikkat-item__arrow {
    font-size: .7rem;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 200ms ease, color 200ms ease;
}

.dikkat-item:hover .dikkat-item__arrow {
    transform: translateX(3px);
    color: var(--text-secondary);
}

.dikkat-item--critical {
    background: rgba(239, 68, 68, .03);
}

.dikkat-item--critical:hover {
    background: rgba(239, 68, 68, .06);
}

.dikkat-item--critical .dikkat-item__title {
    color: #dc2626;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .dikkat-widget__header { padding: .875rem 1rem; }
    .dikkat-item { padding: .75rem 1rem; gap: .75rem; }
    .dikkat-item__icon { width: 34px; height: 34px; font-size: .8rem; }
    .dikkat-item__title { font-size: .775rem; }
    .dikkat-item__desc { font-size: .65rem; }
}

/* ?? Responsive ?????????????????????????????????????????????????? */

/* Tablet — sidebar collapses */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    .sidebar.show {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, .2);
    }

    .main-content {
        margin-left: 0;
    }

    .topbar .btn-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar-collapse-btn {
        display: none;
    }

    .page-content {
        padding: 1rem;
    }
}

/* Mobile — stack everything */
@media (max-width: 575.98px) {
    .page-content {
        padding: .75rem;
    }

    .page-header h1 {
        font-size: 1.15rem;
    }

    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .5rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-card .stat-value {
        font-size: 1.35rem;
    }

    .stat-card .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .form-card {
        padding: 1rem;
    }

    .topbar {
        padding: 0 .75rem;
    }

    .topbar .breadcrumb {
        font-size: .7rem;
    }

    /* Make action buttons full width on mobile */
    .table-card .table td .btn {
        padding: .3rem .5rem;
    }

    /* Stack form rows on small screens */
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Touch-friendly form elements */
    .form-control, .form-select {
        padding: .55rem .75rem;
        font-size: .875rem;
    }

    .btn {
        padding: .5rem 1rem;
        font-size: .8125rem;
    }

    .btn-sm {
        padding: .4rem .65rem;
    }
}

/* Print */
@media print {
    .sidebar,
    .topbar,
    .btn,
    .page-header .btn,
    .alert { display: none !important; }

    .main-content { margin-left: 0; }
    .page-content { padding: 0; }

    .stat-card { box-shadow: none; border: 1px solid #ccc; }
    .table-card { box-shadow: none; border: 1px solid #ccc; }
}

/* ── Repair Page ─────────────────────────────────────────────── */

/* Filter bar */
.repair-filters {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.repair-search-wrap {
    position: relative;
}

.repair-search-wrap i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .8rem;
    pointer-events: none;
}

.repair-search-wrap .form-control {
    padding-left: 2.25rem;
}

/* Sortable headers */
.sortable {
    user-select: none;
}

.sortable i {
    font-size: .6rem;
    margin-left: .25rem;
    opacity: .5;
}

.sortable:hover i {
    opacity: 1;
}

/* Repair table */
.repair-table tbody tr {
    transition: background var(--transition);
}

.repair-table tbody tr:hover {
    background: rgba(59, 130, 246, .04);
}

.repair-row--striped {
    background: var(--surface-hover);
}

.repair-row--striped:hover {
    background: rgba(59, 130, 246, .04) !important;
}

/* Customer avatar circle */
.repair-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* Colorful status/payment badges */
.repair-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .6875rem;
    font-weight: 600;
    padding: .3em .7em;
    border-radius: 1rem;
    white-space: nowrap;
    letter-spacing: .01em;
}

.repair-badge i {
    font-size: .55rem;
}

.repair-badge--pending    { background: rgba(107,114,128,.1); color: #6b7280; }
.repair-badge--inspecting { background: rgba(6,182,212,.1);   color: #0891b2; }
.repair-badge--repairing  { background: rgba(245,158,11,.1);  color: #d97706; }
.repair-badge--repaired   { background: rgba(16,185,129,.1);  color: #059669; }
.repair-badge--delivered  { background: rgba(59,130,246,.1);  color: #2563eb; }

.repair-badge--unpaid { background: rgba(239,68,68,.1); color: #dc2626; }
.repair-badge--paid   { background: rgba(16,185,129,.1); color: #059669; }

/* Mobile cards */
.repair-mobile-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: .75rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.repair-mobile-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Pagination area */
.repair-pagination .btn-sm {
    font-size: .75rem;
    padding: .25rem .5rem;
}

/* ── Repair Detail Page ──────────────────────────────────────── */

.detail-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    overflow: hidden;
    margin-bottom: .75rem;
    transition: box-shadow var(--transition-slow);
}

.detail-card:hover {
    box-shadow: var(--shadow-md);
}

.detail-card__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface-hover);
}

.detail-card__icon {
    width: 36px;
    height: 36px;
    border-radius: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

.detail-card__icon--blue   { background: rgba(59,130,246,.1);  color: #3b82f6; }
.detail-card__icon--purple { background: rgba(139,92,246,.1);  color: #8b5cf6; }
.detail-card__icon--orange { background: rgba(245,158,11,.1);  color: #f59e0b; }
.detail-card__icon--green  { background: rgba(16,185,129,.1);  color: #10b981; }

.detail-card__title {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.detail-card__body {
    padding: 1.25rem;
}

/* Detail field pairs */
.detail-field {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.detail-field__label {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.detail-field__value {
    font-size: .8125rem;
    color: var(--text-primary);
    line-height: 1.5;
}

/* Parts table inside detail card */
.detail-parts-table {
    margin: 0;
}

.detail-parts-table th {
    background: var(--surface);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding: .65rem 1.25rem;
    white-space: nowrap;
}

.detail-parts-table td {
    padding: .6rem 1.25rem;
    font-size: .8rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.detail-parts-table tbody tr:hover {
    background: rgba(59, 130, 246, .02);
}

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

.detail-parts-table tfoot td {
    background: var(--surface-hover);
    border-top: 2px solid var(--border-color);
    padding: .65rem 1.25rem;
    font-size: .8rem;
}

/* Pricing rows */
.detail-price-row {
    font-size: .8125rem;
    line-height: 1.4;
}

.detail-price-total {
    background: rgba(16, 185, 129, .04);
    margin: .25rem -1.25rem -.25rem;
    padding: .75rem 1.25rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ── Repair Edit Page ────────────────────────────────────────── */

/* Photo preview in edit form */
.edit-photo-preview {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-light);
    background: var(--surface-hover);
    text-align: center;
}

.edit-photo-preview img {
    max-height: 150px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Parts table in edit form */
.edit-parts-table {
    margin: 0;
    font-size: .8rem;
}

.edit-parts-table th {
    background: var(--surface);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding: .6rem .75rem;
    white-space: nowrap;
}

.edit-parts-table td {
    padding: .55rem .75rem;
    font-size: .775rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.edit-parts-table tbody tr {
    transition: background var(--transition);
}

.edit-parts-table tbody tr:hover {
    background: rgba(59, 130, 246, .03);
}

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

.edit-parts-table tfoot td {
    background: var(--surface-hover);
    border-bottom: 1px solid var(--border-light);
    padding: .55rem .75rem;
    font-size: .775rem;
}

.edit-parts-table tfoot tr:first-child td {
    border-top: 2px solid var(--border-color);
}

.edit-parts-table__total-row td {
    background: rgba(59, 130, 246, .04) !important;
    border-bottom: none !important;
}

/* Add part section */
.edit-parts-add {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-light);
    background: var(--surface-hover);
}

/* Sticky bottom action bar */
.edit-sticky-bar {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: var(--surface);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
    padding: .875rem 1.25rem;
    margin: 1rem -1.5rem -1.5rem;
    border-radius: 0;
}

@media (max-width: 575.98px) {
    .edit-sticky-bar {
        margin: 1rem -.75rem -.75rem;
        padding: .75rem;
    }

    .edit-parts-table th,
    .edit-parts-table td {
        padding: .45rem .5rem;
        font-size: .7rem;
    }

    .edit-parts-table th {
        font-size: .6rem;
    }
}

/* ── Category Pages ──────────────────────────────────────────── */

/* Search bar inside stat card */
.category-search-wrap {
    position: relative;
}

.category-search-wrap i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .8rem;
    pointer-events: none;
}

.category-search-wrap .form-control {
    padding-left: 2.25rem;
    border: 1px solid var(--border-light);
    background: var(--surface-hover);
}

.category-search-wrap .form-control:focus {
    background: var(--surface);
    border-color: var(--primary);
}

/* Category grid cards */
.category-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    height: 100%;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
    position: relative;
    overflow: hidden;
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.category-card--blue:hover  { border-color: rgba(59,130,246,.3); }
.category-card--purple:hover { border-color: rgba(139,92,246,.3); }
.category-card--orange:hover { border-color: rgba(245,158,11,.3); }
.category-card--green:hover  { border-color: rgba(16,185,129,.3); }

.category-card__icon {
    width: 42px;
    height: 42px;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.category-card--blue .category-card__icon   { background: rgba(59,130,246,.1);  color: #3b82f6; }
.category-card--purple .category-card__icon { background: rgba(139,92,246,.1);  color: #8b5cf6; }
.category-card--orange .category-card__icon { background: rgba(245,158,11,.1);  color: #f59e0b; }
.category-card--green .category-card__icon  { background: rgba(16,185,129,.1);  color: #10b981; }

.category-card__body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1;
}

.category-card__name {
    font-size: .875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.category-card__count {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.category-card--blue .category-card__count   { color: #3b82f6; }
.category-card--purple .category-card__count { color: #8b5cf6; }
.category-card--orange .category-card__count { color: #d97706; }
.category-card--green .category-card__count  { color: #059669; }

.category-card__date {
    font-size: .675rem;
    color: var(--text-muted);
}

.category-card__actions {
    display: flex;
    gap: .375rem;
    padding-top: .5rem;
    border-top: 1px solid var(--border-light);
}

/* ── Part Pages ──────────────────────────────────────────────── */

/* Filter bar */
.part-filters {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

/* Table row highlighting */
.part-table tbody tr {
    transition: background var(--transition);
}

.part-table tbody tr:hover {
    background: rgba(59, 130, 246, .04);
}

.part-row--warning {
    background: rgba(245, 158, 11, .04) !important;
}

.part-row--warning:hover {
    background: rgba(245, 158, 11, .08) !important;
}

.part-row--danger {
    background: rgba(239, 68, 68, .04) !important;
}

.part-row--danger:hover {
    background: rgba(239, 68, 68, .08) !important;
}

/* ── SecondHand Device Pages ─────────────────────────────────── */

/* Sold row muting */
.sh-row--sold {
    opacity: .55;
}

.sh-row--sold:hover {
    opacity: .75;
}

/* Upload area */
.sh-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-hover);
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.sh-upload-area:hover {
    border-color: var(--primary);
    background: rgba(59, 130, 246, .03);
}

.sh-upload-area i {
    font-size: 1.25rem;
    color: var(--text-muted);
    transition: color var(--transition);
}

.sh-upload-area:hover i {
    color: var(--primary);
}

.sh-upload-area span {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.sh-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Upload preview */
.sh-upload-preview {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-light);
    background: var(--surface-hover);
}

.sh-upload-preview img {
    width: 100%;
    max-height: 160px;
    object-fit: contain;
    display: block;
}

.sh-upload-remove {
    position: absolute;
    top: .35rem;
    right: .35rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(239, 68, 68, .9);
    color: #fff;
    font-size: .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.sh-upload-remove:hover {
    background: var(--danger);
    transform: scale(1.1);
}

/* ── Report Pages ────────────────────────────────────────────── */

/* Report Hub Cards (Index page) */
.report-hub-card {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    overflow: hidden;
    transition: all 300ms cubic-bezier(.4, 0, .2, 1);
    cursor: pointer;
}

.report-hub-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.report-hub-card__glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0;
    transition: opacity 400ms ease;
}

.report-hub-card:hover .report-hub-card__glow {
    opacity: 1;
}

.report-hub-card--green .report-hub-card__glow  { background: rgba(16, 185, 129, .3); }
.report-hub-card--blue .report-hub-card__glow   { background: rgba(59, 130, 246, .3); }
.report-hub-card--orange .report-hub-card__glow { background: rgba(245, 158, 11, .3); }
.report-hub-card--red .report-hub-card__glow    { background: rgba(239, 68, 68, .3); }
.report-hub-card--purple .report-hub-card__glow { background: rgba(139, 92, 246, .3); }

.report-hub-card--green:hover  { border-color: rgba(16, 185, 129, .3); }
.report-hub-card--blue:hover   { border-color: rgba(59, 130, 246, .3); }
.report-hub-card--orange:hover { border-color: rgba(245, 158, 11, .3); }
.report-hub-card--red:hover    { border-color: rgba(239, 68, 68, .3); }
.report-hub-card--purple:hover { border-color: rgba(139, 92, 246, .3); }

.report-hub-card__icon {
    width: 52px;
    height: 52px;
    border-radius: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.report-hub-card--green .report-hub-card__icon  { background: rgba(16, 185, 129, .1);  color: #10b981; }
.report-hub-card--blue .report-hub-card__icon   { background: rgba(59, 130, 246, .1);  color: #3b82f6; }
.report-hub-card--orange .report-hub-card__icon { background: rgba(245, 158, 11, .1);  color: #f59e0b; }
.report-hub-card--red .report-hub-card__icon    { background: rgba(239, 68, 68, .1);   color: #ef4444; }
.report-hub-card--purple .report-hub-card__icon { background: rgba(139, 92, 246, .1);  color: #8b5cf6; }

.report-hub-card__body {
    flex: 1;
}

.report-hub-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 .4rem;
    line-height: 1.3;
}

.report-hub-card__desc {
    font-size: .8rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 .875rem;
}

.report-hub-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.report-hub-card__tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .675rem;
    font-weight: 600;
    padding: .25rem .55rem;
    border-radius: 1rem;
    background: var(--surface-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}

.report-hub-card__tag i {
    font-size: .575rem;
}

.report-hub-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: .8rem;
    align-self: flex-end;
    transition: all 300ms ease;
}

.report-hub-card--green .report-hub-card__arrow  { background: rgba(16, 185, 129, .1);  color: #10b981; }
.report-hub-card--blue .report-hub-card__arrow   { background: rgba(59, 130, 246, .1);  color: #3b82f6; }
.report-hub-card--orange .report-hub-card__arrow { background: rgba(245, 158, 11, .1);  color: #f59e0b; }
.report-hub-card--red .report-hub-card__arrow    { background: rgba(239, 68, 68, .1);   color: #ef4444; }
.report-hub-card--purple .report-hub-card__arrow { background: rgba(139, 92, 246, .1);  color: #8b5cf6; }

.report-hub-card:hover .report-hub-card__arrow {
    transform: translateX(4px);
}

/* Report Filter Bar */
.report-filter-bar {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

/* Quick Filter Buttons */
.report-quick-filters {
    display: flex;
    gap: .375rem;
}

.report-quick-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .4rem .5rem;
    font-size: .7rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-secondary);
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.report-quick-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, .25);
}

.report-quick-btn i {
    font-size: .6rem;
}

/* Report Export Bar */
.report-export-bar {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: .875rem 1.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.report-export-bar__info {
    font-size: .8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: .25rem;
}

.report-export-bar__actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* Report Summary Table */
.report-summary-table th {
    background: var(--surface-hover);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding: .7rem 1rem;
    white-space: nowrap;
}

.report-summary-table td {
    padding: .7rem 1rem;
    vertical-align: middle;
    font-size: .8125rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
}

.report-summary-table tfoot td {
    background: var(--surface-hover);
    border-top: 2px solid var(--border-color);
    font-weight: 600;
}

.report-summary-total td {
    background: rgba(59, 130, 246, .04) !important;
}

/* Category Dots */
.report-cat-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: .5rem;
    vertical-align: middle;
}

.report-cat-dot--green  { background: #10b981; }
.report-cat-dot--blue   { background: #3b82f6; }
.report-cat-dot--purple { background: #8b5cf6; }
.report-cat-dot--orange { background: #f59e0b; }

/* Margin Badge */
.report-margin-badge {
    display: inline-flex;
    align-items: center;
    font-size: .675rem;
    font-weight: 700;
    padding: .2em .55em;
    border-radius: 1rem;
    white-space: nowrap;
}

.report-margin-badge--green {
    background: rgba(16, 185, 129, .1);
    color: #059669;
}

.report-margin-badge--red {
    background: rgba(239, 68, 68, .1);
    color: #dc2626;
}

/* Cost color utility */
.text-orange { color: #d97706 !important; }
.text-purple { color: #8b5cf6 !important; }
.bg-purple   { background-color: rgba(139, 92, 246, .1) !important; }

/* Report Detail Metric Cards */
.report-detail-metric {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.125rem 1.25rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all var(--transition-slow);
}

.report-detail-metric:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.report-detail-metric__icon {
    width: 44px;
    height: 44px;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.report-detail-metric__icon--blue   { background: rgba(59, 130, 246, .1);  color: #3b82f6; }
.report-detail-metric__icon--orange { background: rgba(245, 158, 11, .1);  color: #f59e0b; }
.report-detail-metric__icon--green  { background: rgba(16, 185, 129, .1);  color: #10b981; }
.report-detail-metric__icon--purple { background: rgba(139, 92, 246, .1);  color: #8b5cf6; }

.report-detail-metric__body {
    flex: 1;
    min-width: 0;
}

.report-detail-metric__label {
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.report-detail-metric__value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    letter-spacing: -.02em;
}

.report-detail-metric__pct {
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-hover);
    padding: .3rem .5rem;
    border-radius: .5rem;
    flex-shrink: 0;
}

/* ── Inventory Count Page ────────────────────────────────────── */

/* Row highlighting */
.inventory-row--surplus {
    background: rgba(16, 185, 129, .04) !important;
}

.inventory-row--surplus:hover {
    background: rgba(16, 185, 129, .08) !important;
}

.inventory-row--shortage {
    background: rgba(239, 68, 68, .04) !important;
}

.inventory-row--shortage:hover {
    background: rgba(239, 68, 68, .08) !important;
}

/* Difference Badge */
.inventory-diff-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    font-size: .7rem;
    font-weight: 700;
    padding: .2em .55em;
    border-radius: 1rem;
    white-space: nowrap;
}

.inventory-diff-badge--surplus {
    background: rgba(16, 185, 129, .12);
    color: #059669;
}

.inventory-diff-badge--shortage {
    background: rgba(239, 68, 68, .12);
    color: #dc2626;
}

.inventory-diff-badge--ok {
    background: rgba(156, 163, 175, .08);
    color: #d1d5db;
    font-size: .6rem;
}

/* Counted input styling */
.counted-input {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: all var(--transition);
}

.counted-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

/* ── Report Responsive ───────────────────────────────────────── */

@media (max-width: 767.98px) {
    .report-hub-card {
        padding: 1.25rem;
    }

    .report-hub-card__title {
        font-size: .9375rem;
    }

    .report-quick-filters {
        flex-direction: column;
    }

    .report-export-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .report-export-bar__actions {
        justify-content: center;
    }

    .report-detail-metric {
        padding: .875rem 1rem;
    }

    .report-detail-metric__value {
        font-size: 1rem;
    }
}

@media print {
    .report-filter-bar,
    .report-export-bar,
    .report-quick-filters,
    .report-hub-card__arrow { display: none !important; }

    .dash-metric { box-shadow: none; border: 1px solid #ccc; }
    .dash-card   { box-shadow: none; border: 1px solid #ccc; }
    .report-detail-metric { box-shadow: none; border: 1px solid #ccc; }
}

/* ── Sales Page ──────────────────────────────────────────────── */

/* Tab navigation */
.sales-tabs {
    display: flex;
    gap: .5rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: .375rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.sales-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1rem;
    font-size: .8125rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
}

.sales-tab:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.sales-tab--active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(59, 130, 246, .25);
}

.sales-tab--active:hover {
    color: #fff;
    background: var(--primary-hover);
}

.sales-tab i {
    font-size: .85rem;
}

/* Selected row highlight */
.sales-row--selected {
    background: rgba(59, 130, 246, .06) !important;
    box-shadow: inset 3px 0 0 var(--primary);
}

.sales-row--selected:hover {
    background: rgba(59, 130, 246, .08) !important;
}

/* Sales panel transition */
.sales-panel {
    animation: salesFadeIn 200ms ease-out;
}

@keyframes salesFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dashboard quick action card */
.dash-action-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--text-primary);
    overflow: hidden;
    transition: all 250ms ease;
}

.dash-action-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(16, 185, 129, .3);
    color: var(--text-primary);
}

.dash-action-card__icon {
    width: 48px;
    height: 48px;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, .25);
}

.dash-action-card__body {
    flex: 1;
    min-width: 0;
}

.dash-action-card__title {
    font-size: .875rem;
    font-weight: 700;
    margin: 0 0 .15rem;
}

.dash-action-card__desc {
    font-size: .75rem;
    color: var(--text-muted);
    margin: 0;
}

.dash-action-card__arrow {
    font-size: .875rem;
    color: var(--text-muted);
    transition: all 250ms ease;
    flex-shrink: 0;
}

.dash-action-card:hover .dash-action-card__arrow {
    color: var(--success);
    transform: translateX(4px);
}

@media (max-width: 575.98px) {
    .sales-tabs {
        flex-direction: column;
    }

    .sales-tab {
        justify-content: flex-start;
    }
}

/* ── Purchase Page ───────────────────────────────────────────── */

/* Photo upload boxes */
.purchase-photo-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    width: 100%;
    aspect-ratio: 1;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius);
    background: var(--surface-hover);
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.purchase-photo-upload:hover {
    border-color: var(--primary);
    background: rgba(59, 130, 246, .03);
}

.purchase-photo-upload i {
    font-size: 1.25rem;
    color: var(--text-muted);
    transition: color var(--transition);
}

.purchase-photo-upload:hover i {
    color: var(--primary);
}

.purchase-photo-upload span {
    font-size: .65rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.purchase-photo-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius) - 2px);
}

/* ── Notification Bell ───────────────────────────────────────── */

.notification-bell-wrapper {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: .625rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: var(--danger);
    border-radius: 9px;
    border: 2px solid var(--surface);
    animation: notifPulse 2s ease-in-out infinite;
}

@keyframes notifPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    overflow: hidden;
    animation: notifSlideDown 200ms ease-out;
}

@keyframes notifSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.notif-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-light);
    font-size: .8125rem;
    color: var(--text-primary);
}

.notif-dropdown-header a {
    font-size: .7rem;
    color: var(--primary);
    text-decoration: none;
}

.notif-dropdown-body {
    max-height: 320px;
    overflow-y: auto;
}

.notif-dropdown-footer {
    padding: .6rem 1rem;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.notif-dropdown-footer a {
    font-size: .75rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    padding: .65rem 1rem;
    cursor: pointer;
    transition: background var(--transition);
    border-bottom: 1px solid var(--border-light);
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item:hover {
    background: var(--surface-hover);
}

.notif-item.notif-unread {
    background: rgba(59, 130, 246, .04);
    border-left: 3px solid var(--primary);
}

.notif-item.notif-read {
    opacity: .7;
}

.notif-item i {
    margin-top: .15rem;
    font-size: .85rem;
    flex-shrink: 0;
}

.notif-title {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.notif-date {
    font-size: .675rem;
    color: var(--text-muted);
    margin-top: .15rem;
}

/* ── Notification Page ───────────────────────────────────────── */

.notification-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin-bottom: .75rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all var(--transition);
}

.notification-card:hover {
    box-shadow: var(--shadow-md);
}

.notification-card.unread {
    border-left: 4px solid var(--primary);
    background: rgba(59, 130, 246, .02);
}

.notification-card__icon {
    width: 40px;
    height: 40px;
    border-radius: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

.notification-card__icon--info    { background: rgba(6,182,212,.1); color: #06b6d4; }
.notification-card__icon--success { background: rgba(16,185,129,.1); color: #10b981; }
.notification-card__icon--warning { background: rgba(245,158,11,.1); color: #f59e0b; }

.notification-card__body {
    flex: 1;
    min-width: 0;
}

.notification-card__title {
    font-size: .875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 .25rem;
}

.notification-card__message {
    font-size: .8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 .35rem;
}

.notification-card__date {
    font-size: .7rem;
    color: var(--text-muted);
}

/* ── Subscription Plans ──────────────────────────────────────── */

.plan-card {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 300ms ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.plan-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.plan-card--popular {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(59, 130, 246, .15);
}

.plan-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: .25rem .875rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.plan-card__name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: .5rem;
}

.plan-card__price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
    letter-spacing: -.03em;
}

.plan-card__price span {
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-muted);
}

.plan-card__duration {
    font-size: .8rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.plan-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
    flex: 1;
}

.plan-card__features li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--text-secondary);
    padding: .35rem 0;
    border-bottom: 1px solid var(--border-light);
}

.plan-card__features li:last-child {
    border-bottom: none;
}

.plan-card__features li i {
    color: var(--success);
    font-size: .7rem;
    flex-shrink: 0;
}

/* ── Renewal Request Status Badges ───────────────────────────── */

.badge-pending  { background: rgba(245,158,11,.1); color: #d97706; border: 1px solid rgba(245,158,11,.2); }
.badge-approved { background: rgba(16,185,129,.1); color: #059669; border: 1px solid rgba(16,185,129,.2); }
.badge-rejected { background: rgba(239,68,68,.1); color: #dc2626; border: 1px solid rgba(239,68,68,.2); }

/* ── Billing Period Toggle ───────────────────────────────────── */

.billing-toggle-label {
    color: var(--text-primary);
    transition: color 300ms ease;
    user-select: none;
}

.billing-toggle-label--active {
    color: var(--text-primary) !important;
}

.plan-price-monthly,
.plan-price-annual {
    transition: opacity 300ms ease;
}

.plan-price-annual .plan-card__price {
    color: var(--success);
}

/* ── Receipt Upload ──────────────────────────────────────────── */

.receipt-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem 1rem;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-hover);
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.receipt-upload-area:hover {
    border-color: var(--primary);
    background: rgba(59, 130, 246, .03);
}

.receipt-upload-area i {
    font-size: 2rem;
    color: var(--text-muted);
}

.receipt-upload-area:hover i {
    color: var(--primary);
}

.receipt-upload-area span {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.receipt-upload-area small {
    font-size: .7rem;
    color: var(--text-muted);
}

/* ── Payment Info Card ───────────────────────────────────────── */

.payment-info-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    padding: 1.5rem;
}

.payment-info-card h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.payment-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem 0;
    border-bottom: 1px solid var(--border-light);
}

.payment-info-row:last-child {
    border-bottom: none;
}

.payment-info-row .info-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.payment-info-row .info-value {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.btn-copy {
    padding: .2rem .5rem;
    font-size: .675rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(59, 130, 246, .08);
    border: 1px solid rgba(59, 130, 246, .2);
    border-radius: .375rem;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-copy:hover {
    background: rgba(59, 130, 246, .15);
}