:root{--primary: #7c3aed;--primary-dark: #6d28d9;--primary-light: rgba(124,58,237,0.15);--primary-50: rgba(124,58,237,0.07);--secondary: #06b6d4;--success: #10b981;--success-light: rgba(16,185,129,0.12);--warning: #f59e0b;--warning-light: rgba(245,158,11,0.12);--danger: #ef4444;--danger-light: rgba(239,68,68,0.12);--purple: #8b5cf6;--purple-light: rgba(139,92,246,0.12);--gray-50: rgba(248,250,252,0.85);--gray-100: rgba(241,245,249,0.6);--gray-200: rgba(226,232,240,0.5);--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--sidebar-width: 260px;--header-height: 64px;--radius: 12px;--radius-lg: 16px;--radius-xl: 20px;--shadow-sm: 0 1px 3px rgba(0,0,0,0.04);--shadow: 0 2px 8px rgba(0,0,0,0.06);--shadow-md: 0 4px 16px rgba(0,0,0,0.08);--shadow-lg: 0 8px 32px rgba(0,0,0,0.1);--shadow-xl: 0 16px 48px rgba(0,0,0,0.12);--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);--glass: rgba(255,255,255,0.65);--glass-border: rgba(255,255,255,0.35);--glass-blur: 16px;--accent-pink: #ec4899;--accent-orange: #f97316;--accent-teal: #14b8a6;--accent-sky: #0ea5e9}
*{margin: 0;padding: 0;box-sizing: border-box}
body{font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;background: #fdf4ff;background-image:
radial-gradient(at 0% 0%, rgba(124,58,237,0.18) 0%, transparent 50%),
radial-gradient(at 100% 0%, rgba(236,72,153,0.15) 0%, transparent 50%),
radial-gradient(at 100% 100%, rgba(6,182,212,0.15) 0%, transparent 50%),
radial-gradient(at 0% 100%, rgba(245,158,11,0.1) 0%, transparent 50%),
radial-gradient(at 50% 50%, rgba(139,92,246,0.05) 0%, transparent 60%);background-attachment: fixed;color: var(--gray-800);line-height: 1.6;font-size: 14px}
body.dark{background: #0a0a1a;background-image:
radial-gradient(at 0% 0%, rgba(124,58,237,0.15) 0%, transparent 50%),
radial-gradient(at 100% 0%, rgba(236,72,153,0.1) 0%, transparent 50%),
radial-gradient(at 100% 100%, rgba(6,182,212,0.08) 0%, transparent 50%),
radial-gradient(at 0% 100%, rgba(245,158,11,0.06) 0%, transparent 50%);color: #e2e8f0}
body.dark .main-content{background: transparent}
body.dark .header{background: rgba(15,15,35,0.8);border-bottom-color: rgba(255,255,255,0.06)}
body.dark .header-left h2{color: #e2e8f0}
body.dark .card{background: rgba(20,20,45,0.7);border-color: rgba(255,255,255,0.08)}
body.dark .card:hover{box-shadow: 0 4px 20px rgba(124,58,237,0.15)}
body.dark .card-header{background: rgba(255,255,255,0.03);border-bottom-color: rgba(255,255,255,0.06)}
body.dark .card-header h3{color: #e2e8f0}
body.dark .card-body{color: #cbd5e1}
body.dark .card-footer{background: rgba(255,255,255,0.02);border-top-color: rgba(255,255,255,0.06)}
body.dark .stat-card{background: rgba(20,20,45,0.7);border-color: rgba(255,255,255,0.08)}
body.dark .stat-value{color: #f1f5f9}
body.dark .stat-label{color: #94a3b8}
body.dark .form-control{background: rgba(255,255,255,0.06);border-color: rgba(255,255,255,0.1);color: #e2e8f0}
body.dark .form-control:focus{background: rgba(255,255,255,0.1);border-color: var(--primary)}
body.dark .form-control::placeholder{color: #64748b}
body.dark select.form-control{color: #e2e8f0}
body.dark .form-group label{color: #94a3b8}
body.dark .form-section{color: #e2e8f0;border-bottom-color: rgba(255,255,255,0.06)}
body.dark th{background: rgba(255,255,255,0.03);color: #94a3b8;border-bottom-color: rgba(255,255,255,0.06)}
body.dark td{color: #cbd5e1;border-bottom-color: rgba(255,255,255,0.04)}
body.dark td strong{color: #f1f5f9}
body.dark tr:hover td{background: rgba(124,58,237,0.06)}
body.dark .table-empty{color: #64748b}
body.dark .btn-secondary{background: rgba(255,255,255,0.06);color: #cbd5e1;border-color: rgba(255,255,255,0.1)}
body.dark .btn-secondary:hover:not(:disabled){background: rgba(255,255,255,0.12);border-color: var(--primary);color: #e2e8f0}
body.dark .btn-ghost:hover{background: rgba(124,58,237,0.12)}
body.dark .modal{background: rgba(20,20,45,0.92);border-color: rgba(255,255,255,0.1)}
body.dark .modal-header{border-bottom-color: rgba(255,255,255,0.06)}
body.dark .modal-header h3{color: #e2e8f0}
body.dark .modal-footer{border-top-color: rgba(255,255,255,0.06);background: rgba(255,255,255,0.02)}
body.dark .modal-close{color: #94a3b8}
body.dark .page-header h1{color: #f1f5f9}
body.dark .alert{background: rgba(255,255,255,0.05)}
body.dark .branch-selector{background: rgba(255,255,255,0.06);border-color: rgba(255,255,255,0.1);color: #e2e8f0}
body.dark .user-info .name{color: #e2e8f0}
body.dark .user-info .role{color: #94a3b8}
body.dark .search-bar input{color: #e2e8f0}
body.dark .text-muted{color: #64748b !important}
body.dark .badge{border: 1px solid rgba(255,255,255,0.05)}
body.dark code{background: rgba(124,58,237,0.15);color: #a78bfa}
body.dark .progress-bar{background: rgba(255,255,255,0.06)}
body.dark #sub-banner{backdrop-filter: blur(8px)}
body.dark .cal-dropdown{background: rgba(20,20,45,0.95);border-color: rgba(255,255,255,0.1);color: #e2e8f0}
body.dark .cal-day{color: #cbd5e1}
body.dark .cal-day:hover{background: rgba(124,58,237,0.2)}
body.dark .cal-day.today{background: rgba(124,58,237,0.3);color: white}
body.dark .cal-day.selected{background: var(--primary);color: white}
body.dark .cal-day.other-month{color: #475569}
body.dark #user-dropdown{background: rgba(20,20,45,0.95) !important;border-color: rgba(255,255,255,0.1) !important}
body.dark #user-dropdown div{color: #cbd5e1 !important;border-color: rgba(255,255,255,0.06) !important}
body.dark #user-dropdown div:hover{background: rgba(124,58,237,0.15) !important}
body.dark .sidebar-overlay.open{background: rgba(0,0,0,0.6)}
body.dark .mobile-menu-btn{color: #e2e8f0}
body.dark .loading{color: #94a3b8}
body.dark [style*="background:white"],
body.dark [style*="background: white"],
body.dark [style*="background:#fff"]{background: rgba(20,20,45,0.6) !important}
body.dark [style*="background:#f8fafc"],
body.dark [style*="background:#f9fafb"],
body.dark [style*="background:#f1f5f9"],
body.dark [style*="background:var(--gray-50)"],
body.dark [style*="background:var(--gray-100)"]{background: rgba(255,255,255,0.03) !important}
body.dark [style*="background:#f0fdf4"]{background: rgba(16,185,129,0.08) !important}
body.dark [style*="background:#eff6ff"]{background: rgba(99,102,241,0.08) !important}
body.dark [style*="background:#fef3c7"],
body.dark [style*="background:#fffbeb"]{background: rgba(245,158,11,0.08) !important}
body.dark [style*="background:#fee2e2"],
body.dark [style*="background:#fef2f2"]{background: rgba(239,68,68,0.08) !important}
body.dark [style*="background:#ede9fe"],
body.dark [style*="background:#f5f3ff"]{background: rgba(139,92,246,0.08) !important}
body.dark [style*="background:#e0f2fe"]{background: rgba(14,165,233,0.1) !important}
body.dark [style*="background:#dcfce7"]{background: rgba(16,185,129,0.1) !important}
body.dark [style*="background:#d1fae5"]{background: rgba(16,185,129,0.08) !important}
body.dark [style*="background:#fef3c7;border"]{background: rgba(245,158,11,0.1) !important}
body.dark [style*="background:var(--primary-light)"]{background: rgba(124,58,237,0.1) !important}
body.dark [style*="background:var(--primary-50)"]{background: rgba(124,58,237,0.06) !important}
body.dark [style*="background:#fffdf7"]{background: rgba(245,158,11,0.05) !important}
body.dark [style*="background:#fafafa"]{background: rgba(255,255,255,0.03) !important}
body.dark [style*="background:#e5e7eb"]{background: rgba(255,255,255,0.06) !important}
body.dark [style*="background:#e0f2fe"]{background: rgba(14,165,233,0.1) !important}
body.dark [style*="background:#f5f3ff"]{background: rgba(139,92,246,0.08) !important}
body.dark [style*="background:var(--warning-light)"]{background: rgba(245,158,11,0.1) !important}
body.dark [style*="background:var(--success-light)"]{background: rgba(16,185,129,0.08) !important}
body.dark [style*="background:var(--danger-light)"]{background: rgba(239,68,68,0.08) !important}
body.dark [style*="background:var(--purple-light)"]{background: rgba(139,92,246,0.08) !important}
body.dark [style*="background:var(--gray-50)"]{background: rgba(255,255,255,0.03) !important}
body.dark [style*="background:var(--gray-100)"]{background: rgba(255,255,255,0.04) !important}
body.dark [style*="background:#000"]{background: #0a0a1a !important}
body.dark [style*="background:linear-gradient(135deg,#1a365d"],
body.dark [style*="background:linear-gradient(135deg,#1e3a5f"],
body.dark [style*="background:linear-gradient(135deg,#0f172a"]{background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(236,72,153,0.15)) !important}
body.dark [style*="background:linear-gradient(135deg,#f8fafc"],
body.dark [style*="background:linear-gradient(135deg,#f0f9ff"],
body.dark [style*="background:linear-gradient(to right,#eff6ff"],
body.dark [style*="background:linear-gradient(to right,#f8fafc"],
body.dark [style*="background:linear-gradient(135deg,#f0fdf4"],
body.dark [style*="background:linear-gradient(135deg,var(--primary-50)"]{background: rgba(255,255,255,0.03) !important}
body.dark [style*="background:linear-gradient(135deg,#0ea5e9"],
body.dark [style*="background:linear-gradient(135deg,#0f172a"]{background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(236,72,153,0.12)) !important}
body.dark [style*="background:linear-gradient(180deg"]{}
body.dark [style*="color:#1e293b"],
body.dark [style*="color:#0f172a"],
body.dark [style*="color:#1e3a5f"],
body.dark [style*="color:#1a365d"],
body.dark [style*="color:#0c4a6e"],
body.dark [style*="color:#374151"],
body.dark [style*="color:#1f2937"]{color: #e2e8f0 !important}
body.dark [style*="color:#475569"],
body.dark [style*="color:#4b5563"],
body.dark [style*="color:#555"],
body.dark [style*="color:#6b7280"]{color: #94a3b8 !important}
body.dark [style*="color:#64748b"],
body.dark [style*="color:#94a3b8"],
body.dark [style*="color:#9ca3af"],
body.dark [style*="color:#888"]{color: #a1a1b5 !important}
body.dark [style*="color:#d1d5db"],
body.dark [style*="color:#e5e7eb"]{color: #475569 !important}
body.dark [style*="color:#78350f"]{color: #fbbf24 !important}
body.dark [style*="color:#92400e"]{color: #fbbf24 !important}
body.dark [style*="color:#a16207"]{color: #fcd34d !important}
body.dark [style*="color:#991b1b"]{color: #fca5a5 !important}
body.dark [style*="color:#166534"]{color: #6ee7b7 !important}
body.dark [style*="color:#065f46"]{color: #6ee7b7 !important}
body.dark [style*="color:#1e40af"]{color: #93c5fd !important}
body.dark [style*="color:#0369a1"]{color: #7dd3fc !important}
body.dark [style*="color:#4c1d95"]{color: #c4b5fd !important}
body.dark [style*="color:#5b21b6"]{color: #c4b5fd !important}
body.dark [style*="border:1px solid var(--gray-200)"],
body.dark [style*="border:1px solid #e2e8f0"],
body.dark [style*="border:1px solid #e5e7eb"]{border-color: rgba(255,255,255,0.08) !important}
body.dark [style*="border-bottom:1px solid var(--gray-100)"],
body.dark [style*="border-bottom:1px solid #f1f5f9"],
body.dark [style*="border-bottom:1px solid var(--gray-200)"]{border-bottom-color: rgba(255,255,255,0.06) !important}
body.dark [style*="border-top:1px solid var(--gray-200)"],
body.dark [style*="border-top:1px solid var(--gray-100)"]{border-top-color: rgba(255,255,255,0.06) !important}
body.dark [style*="border:2px solid #e2e8f0"],
body.dark [style*="border:2px solid var(--gray-200)"]{border-color: rgba(255,255,255,0.1) !important}
body.dark [style*="border:2px solid #1e40af"]{border-color: rgba(124,58,237,0.4) !important}
body.dark [style*="border:2px solid #d97706"]{border-color: rgba(245,158,11,0.3) !important}
body.dark [style*="border:1px solid #bbf7d0"]{border-color: rgba(16,185,129,0.2) !important}
body.dark [style*="border:1px solid #fde68a"]{border-color: rgba(245,158,11,0.2) !important}
body.dark [style*="border:1px solid #fca5a5"]{border-color: rgba(239,68,68,0.2) !important}
body.dark [style*="border:1px solid #bfdbfe"]{border-color: rgba(99,102,241,0.2) !important}
body.dark [style*="border:1px solid #fecaca"]{border-color: rgba(239,68,68,0.2) !important}
body.dark [style*="border-left:3px solid"]{border-left-color: inherit !important}
body.dark [style*="border-top:3px solid"]{border-top-color: inherit !important}
body.dark [style*="border-left:4px solid"]{border-left-color: inherit !important}
body.dark [style*="border:2px dashed"]{border-color: rgba(255,255,255,0.1) !important}
body.dark [style*="box-shadow:0 8px 30px"],
body.dark [style*="box-shadow:var(--shadow"]{box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important}
body.dark [style*="border:1px solid #e2e8f0;border-radius:10px"]{border-color: rgba(255,255,255,0.1) !important}
body.dark [style*="opacity:0.8"],
body.dark [style*="opacity:0.9"]{opacity: 0.85 !important}
body.dark .search-bar svg{color: #94a3b8}
body.dark [style*="fill:#ffffff"]{fill: rgba(20,20,45,0.6) !important}
body.dark [style*="stroke:#d1d5db"]{stroke: rgba(255,255,255,0.15) !important}
body.dark .sa-header{background: rgba(15,10,40,0.95)}
body.dark .sa-content h2{color: #e2e8f0}
body.dark h1, body.dark h2, body.dark h3{color: #f1f5f9}
body.dark strong{color: #e2e8f0}
body.dark .font-bold{color: #e2e8f0}
body.dark .font-mono{color: #c4b5fd}
body.dark .text-xs{color: #94a3b8}
body.dark .text-sm{color: #cbd5e1}
body.dark p{color: #cbd5e1}
body.dark label{color: #94a3b8}
body.dark .nav-label{color: rgba(255,255,255,0.7)}
body.dark .alert{color: #e2e8f0}
body.dark .alert-error{background: rgba(239,68,68,0.1);color: #fca5a5;border: 1px solid rgba(239,68,68,0.2)}
body.dark .alert-info{background: rgba(99,102,241,0.1);color: #a5b4fc}
body.dark .alert-warning{background: rgba(245,158,11,0.1);color: #fcd34d}
body.dark .hidden{display: none}
body.dark [style*="placeholder"]{color: #64748b}
body.dark [style*="border-radius:10px;overflow:hidden"]{background: rgba(20,20,45,0.6) !important}
body.dark label[style*="cursor:pointer"]{color: #cbd5e1 !important}
body.dark [style*="border-bottom:2px solid #1e40af"]{border-bottom-color: rgba(124,58,237,0.4) !important}
body.dark [style*="border-bottom:2px solid #0369a1"]{border-bottom-color: rgba(14,165,233,0.3) !important}
body.dark [style*="border-bottom:2px solid #059669"]{border-bottom-color: rgba(16,185,129,0.3) !important}
body.dark [style*="border-bottom:2px solid #7c3aed"]{border-bottom-color: rgba(124,58,237,0.3) !important}
body.dark [style*="border-bottom:2px solid #dc2626"]{border-bottom-color: rgba(239,68,68,0.3) !important}
body.dark [style*="border-top:2px solid #1a365d"]{border-top-color: rgba(124,58,237,0.3) !important}
body.dark [style*="border-top:3px solid"]{border-top-color: inherit !important}
body.dark [style*="fill:#fef3c7"]{fill: rgba(245,158,11,0.15) !important}
body.dark [style*="stroke:#d97706"]{stroke: rgba(245,158,11,0.5) !important}
body.print-modal, body.print-page{background: white !important;color: #1e293b !important}
.theme-toggle{position: relative;width: 44px;height: 24px;cursor: pointer;flex-shrink: 0}
.theme-toggle input{display: none}
.theme-toggle .slider{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(148,163,184,0.3);border-radius: 12px;transition: 0.3s}
.theme-toggle .slider::before{content: '☀️';position: absolute;width: 20px;height: 20px;left: 2px;top: 2px;font-size: 12px;line-height: 20px;text-align: center;transition: 0.3s}
.theme-toggle input:checked + .slider{background: rgba(124,58,237,0.4)}
.theme-toggle input:checked + .slider::before{content: '🌙';transform: translateX(20px)}
::-webkit-scrollbar{width: 6px;height: 6px}
::-webkit-scrollbar-track{background: transparent}
::-webkit-scrollbar-thumb{background: linear-gradient(180deg, #7c3aed, #ec4899);border-radius: 10px}
::-webkit-scrollbar-thumb:hover{background: linear-gradient(180deg, #6d28d9, #db2777)}
::selection{background: rgba(124,58,237,0.25);color: #1e0a3c}
html{scroll-behavior: smooth}
.login-container{min-height: 100vh;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #1e0a3c 0%, #3b0764 30%, #7c3aed 60%, #ec4899 100%);position: relative;overflow: hidden}
.login-container::before{content: '';position: absolute;width: 500px;height: 500px;background: rgba(236,72,153,0.2);border-radius: 50%;top: -150px;right: -100px;filter: blur(80px);animation: pulse 4s ease-in-out infinite}
.login-container::after{content: '';position: absolute;width: 400px;height: 400px;background: rgba(6,182,212,0.2);border-radius: 50%;bottom: -100px;left: -100px;filter: blur(80px);animation: pulse 5s ease-in-out infinite reverse}
.login-container::before{content: '';position: absolute;width: 600px;height: 600px;background: rgba(255,255,255,0.03);border-radius: 50%;top: -200px;right: -100px}
.login-card{background: rgba(255,255,255,0.1);backdrop-filter: blur(24px);-webkit-backdrop-filter: blur(24px);border: 1px solid rgba(255,255,255,0.2);border-radius: var(--radius-xl);padding: 48px;width: 100%;max-width: 440px;box-shadow: 0 24px 48px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);color: white}
.login-card .form-control{background: rgba(255,255,255,0.1);border-color: rgba(255,255,255,0.2);color: white}
.login-card .form-control:focus{background: rgba(255,255,255,0.15);border-color: rgba(255,255,255,0.4);box-shadow: 0 0 0 3px rgba(255,255,255,0.1)}
.login-card .form-control::placeholder{color: rgba(255,255,255,0.5)}
.login-card label{color: rgba(255,255,255,0.8) !important}
.login-logo{display: flex;align-items: center;gap: 12px;margin-bottom: 8px}
.login-logo .logo-icon{width: 48px;height: 48px;background: var(--primary);border-radius: var(--radius-lg);display: flex;align-items: center;justify-content: center;color: white;font-size: 24px;font-weight: 700}
.login-card h1{font-size: 28px;font-weight: 700;color: var(--gray-900)}
.login-card .subtitle{color: var(--gray-500);margin-bottom: 32px;font-size: 15px}
.app-layout{display: flex;min-height: 100vh}
.sidebar{width: var(--sidebar-width);background: linear-gradient(180deg, rgba(15,10,40,0.97) 0%, rgba(30,15,60,0.95) 50%, rgba(20,20,50,0.97) 100%);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);color: white;position: fixed;top: 0;left: 0;bottom: 0;overflow-y: auto;z-index: 100;transition: transform 0.3s;display: flex;flex-direction: column;border-right: 1px solid rgba(255,255,255,0.06)}
.sidebar::-webkit-scrollbar{width: 4px}
.sidebar::-webkit-scrollbar-thumb{background: rgba(255,255,255,0.15);border-radius: 4px}
.sidebar-header{padding: 20px 20px 16px;border-bottom: 1px solid rgba(255,255,255,0.08)}
.sidebar-brand{display: flex;align-items: center;gap: 10px}
.sidebar-brand .brand-icon{width: 36px;height: 36px;background: var(--primary);border-radius: var(--radius);display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 16px}
.sidebar-brand h2{font-size: 18px;font-weight: 700}
.sidebar-tenant{font-size: 12px;color: var(--gray-400);margin-top: 4px;padding-left: 46px}
.sidebar-nav{padding: 12px 0;flex: 1;overflow-y: auto}
.nav-search{padding: 6px 14px 10px}
.nav-search input{width: 100%;padding: 7px 10px 7px 30px;background: rgba(255,255,255,0.08);border: 1px solid rgba(255,255,255,0.1);border-radius: 8px;color: white;font-size: 12px;outline: none;transition: all 0.2s;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: 8px center}
.nav-search input:focus{background-color: rgba(255,255,255,0.12);border-color: rgba(124,58,237,0.5)}
.nav-search input::placeholder{color: rgba(255,255,255,0.35)}
.sidebar.collapsed .nav-search{display: none}
.nav-section{padding: 16px 20px 6px;font-size: 10px;text-transform: uppercase;letter-spacing: 1.5px;color: rgba(255,255,255,0.35);font-weight: 600}
.nav-item{display: flex;align-items: center;padding: 9px 20px;color: rgba(255,255,255,0.65);text-decoration: none;font-size: 13px;font-weight: 500;cursor: pointer;transition: all var(--transition);border: none;background: none;width: 100%;text-align: left;border-left: 3px solid transparent}
.nav-item:hover{background: rgba(255,255,255,0.06);color: white}
.nav-item.active{background: linear-gradient(90deg, rgba(124,58,237,0.3), rgba(236,72,153,0.15));color: white;border-left-color: var(--accent-pink);box-shadow: inset 0 0 20px rgba(124,58,237,0.15)}
.nav-item:hover{background: linear-gradient(90deg, rgba(124,58,237,0.12), transparent);color: white}
.nav-item svg, .nav-item .nav-icon{width: 18px;height: 18px;margin-right: 10px;flex-shrink: 0;opacity: 0.7}
.nav-item.active svg, .nav-item.active .nav-icon{opacity: 1}
.nav-badge{margin-left: auto;background: var(--primary);color: white;font-size: 10px;padding: 2px 7px;border-radius: 10px;font-weight: 600}
.sidebar-footer{padding: 16px 20px;border-top: 1px solid rgba(255,255,255,0.08)}
.sidebar-user{display: flex;align-items: center;gap: 10px;cursor: pointer;padding: 8px;border-radius: var(--radius);transition: background var(--transition)}
.sidebar-user:hover{background: rgba(255,255,255,0.06)}
.sidebar{transition: width 0.3s, transform 0.3s;overflow-x: hidden;overflow-y: auto}
.sidebar.collapsed{width: 64px}
.sidebar.collapsed .sidebar-brand h2,
.sidebar.collapsed .sidebar-tenant,
.sidebar.collapsed .nav-section,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .nav-label{display: none !important}
.sidebar.collapsed .sidebar-header{padding: 14px 14px;text-align: center}
.sidebar.collapsed .sidebar-brand{justify-content: center}
.sidebar.collapsed .nav-item{padding: 14px 0;justify-content: center;border-left: none;position: relative}
.sidebar.collapsed .nav-item svg,
.sidebar.collapsed .nav-item .nav-icon{margin-right: 0;width: 22px;height: 22px;opacity: 0.85}
.sidebar.collapsed .nav-item:hover::after{content: attr(data-page);position: absolute;left: 68px;top: 50%;transform: translateY(-50%);background: rgba(15,10,40,0.95);color: white;padding: 5px 12px;border-radius: 8px;font-size: 11px;font-weight: 500;white-space: nowrap;z-index: 200;pointer-events: none;box-shadow: 0 4px 12px rgba(0,0,0,0.3);border: 1px solid rgba(255,255,255,0.1)}
.sidebar.collapsed .sidebar-footer{padding: 10px 8px}
.sidebar.collapsed .sidebar-user span.nav-icon,
.sidebar.collapsed .sidebar-user div:not(.avatar){display: none !important}
.sidebar.collapsed .sidebar-user{justify-content: center;padding: 8px}
.sidebar.collapsed .sidebar-user .avatar{width: 34px;height: 34px;font-size: 12px}
.main-content{margin-left: var(--sidebar-width);flex: 1;min-height: 100vh;background: transparent;transition: margin-left 0.3s}
body.sidebar-collapsed .main-content{margin-left: 64px}
.header{height: var(--header-height);background: var(--glass);backdrop-filter: blur(var(--glass-blur));-webkit-backdrop-filter: blur(var(--glass-blur));border-bottom: 1px solid var(--glass-border);display: flex;align-items: center;justify-content: space-between;padding: 0 28px;position: sticky;top: 0;z-index: 50}
.header-left{display: flex;align-items: center;gap: 16px}
.header-left h2{font-size: 18px;font-weight: 600;color: var(--gray-900)}
.header-breadcrumb{font-size: 12px;color: var(--gray-400)}
.header-right{display: flex;align-items: center;gap: 12px}
.branch-selector{padding: 7px 12px;border: 1px solid var(--gray-200);border-radius: var(--radius);font-size: 13px;background: white;cursor: pointer;color: var(--gray-700);font-weight: 500}
.header-btn{width: 36px;height: 36px;border: 1px solid var(--gray-200);border-radius: var(--radius);background: white;display: flex;align-items: center;justify-content: center;cursor: pointer;color: var(--gray-500);transition: all var(--transition);position: relative}
.header-btn:hover{background: var(--gray-50);color: var(--gray-700);border-color: var(--gray-300)}
.header-btn .notif-dot{position: absolute;top: 6px;right: 6px;width: 8px;height: 8px;background: var(--danger);border-radius: 50%;border: 2px solid white}
.user-menu{display: flex;align-items: center;gap: 8px;cursor: pointer;padding: 4px 8px;border-radius: var(--radius);transition: background var(--transition)}
.user-menu:hover{background: var(--gray-50)}
.user-avatar{width: 34px;height: 34px;border-radius: 50%;background: linear-gradient(135deg, var(--primary), var(--secondary));color: white;display: flex;align-items: center;justify-content: center;font-weight: 600;font-size: 13px}
.user-info{line-height: 1.3}
.user-info .name{font-size: 13px;font-weight: 600;color: var(--gray-800)}
.user-info .role{font-size: 11px;color: var(--gray-400);text-transform: capitalize}
.page-content{padding: 24px 28px}
.page-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;flex-wrap: wrap;gap: 12px}
.page-header h1{font-size: 22px;font-weight: 700;color: var(--gray-900)}
.page-subtitle{font-size: 13px;color: var(--gray-500);margin-top: 2px}
.page-actions{display: flex;gap: 8px;flex-wrap: wrap}
.stats-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 16px;margin-bottom: 24px}
.stat-card{background: var(--glass);backdrop-filter: blur(var(--glass-blur));-webkit-backdrop-filter: blur(var(--glass-blur));border-radius: var(--radius-lg);padding: 20px;border: 1px solid var(--glass-border);display: flex;align-items: flex-start;gap: 16px;transition: all var(--transition)}
.stat-card:hover{box-shadow: var(--shadow-md);transform: translateY(-3px)}
.stat-card:nth-child(1){border-left: 4px solid #7c3aed}
.stat-card:nth-child(2){border-left: 4px solid #ec4899}
.stat-card:nth-child(3){border-left: 4px solid #06b6d4}
.stat-card:nth-child(4){border-left: 4px solid #f59e0b}
.stat-icon{width: 44px;height: 44px;border-radius: var(--radius);display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.stat-icon svg{width: 22px;height: 22px}
.stat-icon.blue{background: var(--primary-light);color: var(--primary)}
.stat-icon.green{background: var(--success-light);color: var(--success)}
.stat-icon.orange{background: var(--warning-light);color: var(--warning)}
.stat-icon.red{background: var(--danger-light);color: var(--danger)}
.stat-icon.purple{background: var(--purple-light);color: var(--purple)}
.stat-content{flex: 1}
.stat-label{font-size: 12px;color: var(--gray-500);font-weight: 500;margin-bottom: 4px}
.stat-value{font-size: 26px;font-weight: 700;color: var(--gray-900);line-height: 1.2}
.stat-change{font-size: 12px;margin-top: 4px;font-weight: 500}
.stat-change.up{color: var(--success)}
.stat-change.down{color: var(--danger)}
.card{background: var(--glass);backdrop-filter: blur(var(--glass-blur));-webkit-backdrop-filter: blur(var(--glass-blur));border-radius: var(--radius-lg);border: 1px solid var(--glass-border);overflow: hidden;box-shadow: var(--shadow);transition: all var(--transition)}
.card:hover{box-shadow: var(--shadow-md)}
.card + .card{margin-top: 16px}
.card-header{padding: 16px 20px;border-bottom: 1px solid rgba(255,255,255,0.2);display: flex;justify-content: space-between;align-items: center;background: rgba(255,255,255,0.3)}
.card-header h3{font-size: 15px;font-weight: 600}
.card-body{padding: 20px}
.card-footer{padding: 12px 20px;border-top: 1px solid rgba(255,255,255,0.2);background: rgba(248,250,252,0.5);display: flex;justify-content: space-between;align-items: center}
.grid-2{display: grid;grid-template-columns: 1fr 1fr;gap: 16px}
.grid-3{display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 16px}
.grid-sidebar{display: grid;grid-template-columns: 320px 1fr;gap: 16px}
.table-container{overflow-x: auto}
table{width: 100%;border-collapse: collapse}
th{text-align: left;padding: 10px 16px;font-size: 11px;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;color: var(--gray-500);background: rgba(248,250,252,0.6);border-bottom: 1px solid rgba(226,232,240,0.5);white-space: nowrap}
td{padding: 10px 16px;font-size: 13px;border-bottom: 1px solid rgba(241,245,249,0.5);color: var(--gray-700)}
tr:hover td{background: rgba(124,58,237,0.04)}
td strong{color: var(--gray-900);font-weight: 600}
.table-empty{text-align: center;padding: 40px;color: var(--gray-400);font-size: 14px}
.form-group{margin-bottom: 16px}
.form-group label{display: block;font-size: 13px;font-weight: 500;color: var(--gray-700);margin-bottom: 5px}
.form-control{width: 100%;padding: 9px 12px;border: 1px solid rgba(203,213,225,0.5);border-radius: var(--radius);font-size: 13px;transition: all var(--transition);background: rgba(255,255,255,0.8);backdrop-filter: blur(8px);color: var(--gray-800)}
.form-control:focus{outline: none;border-color: var(--primary);box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15), 0 0 0 1px rgba(236,72,153,0.1);background: rgba(255,255,255,0.95)}
.form-control::placeholder{color: var(--gray-400)}
textarea.form-control{resize: vertical;min-height: 60px}
select.form-control{cursor: pointer}
.form-row{display: grid;grid-template-columns: 1fr 1fr;gap: 12px}
.form-row-3{display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 12px}
.form-hint{font-size: 11px;color: var(--gray-400);margin-top: 4px}
.form-section{font-size: 13px;font-weight: 600;color: var(--gray-900);padding: 12px 0 8px;border-bottom: 1px solid var(--gray-100);margin-bottom: 16px}
.form-divider{border-top: 1px solid var(--gray-100);margin: 16px 0}
.btn{padding: 8px 16px;border-radius: var(--radius);font-size: 13px;font-weight: 500;cursor: pointer;border: 1px solid transparent;transition: all var(--transition);display: inline-flex;align-items: center;gap: 6px;white-space: nowrap}
.btn:disabled{opacity: 0.5;cursor: not-allowed}
.btn svg{width: 16px;height: 16px}
.btn-primary{background: linear-gradient(135deg, #7c3aed, #ec4899);color: white;border: none}
.btn-primary:hover:not(:disabled){box-shadow: 0 4px 20px rgba(124,58,237,0.45);transform: translateY(-1px);filter: brightness(1.1)}
.btn-secondary{background: rgba(255,255,255,0.6);color: var(--gray-700);border-color: rgba(203,213,225,0.5);backdrop-filter: blur(8px)}
.btn-secondary:hover:not(:disabled){background: rgba(255,255,255,0.9);border-color: var(--primary);color: var(--primary)}
.btn-success{background: linear-gradient(135deg, #10b981, #06b6d4);color: white;border: none}
.btn-success:hover:not(:disabled){box-shadow: 0 4px 20px rgba(16,185,129,0.45);transform: translateY(-1px);filter: brightness(1.1)}
.btn-danger{background: linear-gradient(135deg, #ef4444, #f97316);color: white;border: none}
.btn-danger:hover:not(:disabled){box-shadow: 0 4px 20px rgba(239,68,68,0.45);transform: translateY(-1px)}
.btn-warning{background: linear-gradient(135deg, #f59e0b, #f97316);color: white;border: none}
.btn-ghost{background: transparent;color: var(--gray-600)}
.btn-ghost:hover{background: rgba(124,58,237,0.08);color: var(--primary)}
.btn-sm{padding: 5px 10px;font-size: 12px}
.btn-xs{padding: 3px 8px;font-size: 11px}
.btn-lg{padding: 11px 22px;font-size: 15px}
.btn-block{width: 100%;justify-content: center}
.btn-icon{padding: 8px}
.btn-group{display: inline-flex}
.btn-group .btn{border-radius: 0}
.btn-group .btn:first-child{border-radius: var(--radius) 0 0 var(--radius)}
.btn-group .btn:last-child{border-radius: 0 var(--radius) var(--radius) 0}
.btn-group .btn + .btn{margin-left: -1px}
.btn-group .btn.active{background: var(--primary);color: white;border-color: var(--primary)}
.badge{padding: 3px 8px;border-radius: 20px;font-size: 11px;font-weight: 600;display: inline-flex;align-items: center;gap: 4px;white-space: nowrap}
.badge::before{content: '';width: 6px;height: 6px;border-radius: 50%;flex-shrink: 0}
.badge-booked{background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(236,72,153,0.08));color: #7c3aed}
.badge-booked::before{background: #7c3aed}
.badge-checked_in{background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(249,115,22,0.08));color: #d97706}
.badge-checked_in::before{background: #f59e0b}
.badge-in_progress, .badge-in-progress{background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(6,182,212,0.08));color: #0284c7}
.badge-in_progress::before, .badge-in-progress::before{background: #0ea5e9}
.badge-completed{background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(6,182,212,0.08));color: #059669}
.badge-completed::before{background: #10b981}
.badge-cancelled, .badge-declined{background: var(--danger-light);color: #991b1b}
.badge-cancelled::before, .badge-declined::before{background: var(--danger)}
.badge-no_show{background: var(--gray-200);color: var(--gray-600)}
.badge-no_show::before{background: var(--gray-500)}
.badge-paid{background: var(--success-light);color: #065f46}
.badge-paid::before{background: var(--success)}
.badge-draft{background: var(--gray-200);color: var(--gray-600)}
.badge-draft::before{background: var(--gray-400)}
.badge-sent, .badge-presented{background: var(--primary-light);color: var(--primary-dark)}
.badge-sent::before, .badge-presented::before{background: var(--primary)}
.badge-partial{background: var(--warning-light);color: #92400e}
.badge-partial::before{background: var(--warning)}
.badge-overdue{background: var(--danger-light);color: #991b1b}
.badge-overdue::before{background: var(--danger)}
.badge-active{background: var(--success-light);color: #065f46}
.badge-active::before{background: var(--success)}
.badge-accepted{background: var(--success-light);color: #065f46}
.badge-accepted::before{background: var(--success)}
.badge-planned{background: var(--gray-200);color: var(--gray-600)}
.badge-planned::before{background: var(--gray-400)}
.badge-scheduled{background: var(--primary-light);color: var(--primary-dark)}
.badge-scheduled::before{background: var(--primary)}
.badge-role{padding: 3px 8px;border-radius: 4px;font-size: 11px;font-weight: 600;text-transform: capitalize}
.badge-role::before{display: none}
.badge-role.admin{background: var(--danger-light);color: var(--danger)}
.badge-role.dentist{background: var(--primary-light);color: var(--primary)}
.badge-role.specialist{background: var(--purple-light);color: var(--purple)}
.badge-role.receptionist{background: var(--warning-light);color: #92400e}
.modal-overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(15,23,42,0.3);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);display: flex;align-items: center;justify-content: center;z-index: 1000;animation: fadeIn 0.15s}
.modal{background: rgba(255,255,255,0.85);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border-radius: var(--radius-xl);border: 1px solid rgba(255,255,255,0.5);width: 100%;max-width: 560px;max-height: 90vh;overflow-y: auto;box-shadow: 0 24px 48px rgba(0,0,0,0.15);animation: slideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1)}
.modal-lg{max-width: 720px}
.modal-xl{max-width: 900px}
.modal-header{padding: 18px 24px;border-bottom: 1px solid var(--gray-100);display: flex;justify-content: space-between;align-items: center;position: sticky;top: 0;background: white;z-index: 1;border-radius: var(--radius-xl) var(--radius-xl) 0 0}
.modal-header h3{font-size: 17px;font-weight: 600}
.modal-body{padding: 20px 24px}
.modal-footer{padding: 14px 24px;border-top: 1px solid var(--gray-100);display: flex;justify-content: flex-end;gap: 8px;position: sticky;bottom: 0;background: white;border-radius: 0 0 var(--radius-xl) var(--radius-xl)}
.modal-close{background: none;border: none;font-size: 20px;cursor: pointer;color: var(--gray-400);width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;border-radius: var(--radius);transition: all var(--transition)}
.modal-close:hover{background: var(--gray-100);color: var(--gray-600)}
@keyframes fadeIn{from{opacity: 0} to{opacity: 1} }
@keyframes slideUp{from{transform: translateY(10px);opacity: 0} to{transform: translateY(0);opacity: 1} }
.tabs{display: flex;border-bottom: 2px solid var(--gray-200);margin-bottom: 20px;gap: 0}
.tab-btn{padding: 10px 18px;font-size: 13px;font-weight: 500;color: var(--gray-500);background: none;border: none;border-bottom: 2px solid transparent;margin-bottom: -2px;cursor: pointer;transition: all var(--transition)}
.tab-btn:hover{color: var(--gray-700)}
.tab-btn.active{color: var(--primary);border-bottom-color: var(--primary);font-weight: 600}
.tab-content{display: none}
.tab-content.active{display: block}
.tooth-chart{display: flex;flex-wrap: wrap;justify-content: center;gap: 3px;padding: 12px}
.tooth{width: 38px;height: 48px;border: 2px solid var(--gray-200);border-radius: 6px;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 10px;cursor: pointer;transition: all var(--transition);background: white;position: relative}
.tooth:hover{border-color: var(--primary);background: var(--primary-50);transform: translateY(-2px)}
.tooth.has-entry{border-color: var(--warning);background: var(--warning-light)}
.tooth.selected{border-color: var(--primary);background: var(--primary-light);box-shadow: 0 0 0 2px rgba(37,99,235,0.2)}
.tooth-number{font-weight: 700;font-size: 12px;color: var(--gray-700)}
.tooth-label{font-size: 8px;color: var(--gray-400)}
.tooth-row-label{width: 100%;text-align: center;padding: 6px;font-size: 11px;font-weight: 600;color: var(--gray-400);text-transform: uppercase;letter-spacing: 0.5px}
.chart-bar-container{margin-top: 8px}
.chart-bar-row{display: flex;align-items: center;gap: 10px;margin-bottom: 8px}
.chart-bar-label{font-size: 12px;color: var(--gray-600);width: 120px;text-align: right;flex-shrink: 0}
.chart-bar-track{flex: 1;height: 24px;background: var(--gray-100);border-radius: 4px;overflow: hidden}
.chart-bar-fill{height: 100%;border-radius: 4px;display: flex;align-items: center;padding: 0 8px;font-size: 11px;font-weight: 600;color: white;min-width: fit-content;transition: width 0.5s ease}
.chart-bar-fill.blue{background: var(--primary)}
.chart-bar-fill.green{background: var(--success)}
.chart-bar-fill.orange{background: var(--warning)}
.chart-bar-fill.red{background: var(--danger)}
.chart-bar-fill.purple{background: var(--purple)}
.progress-bar{height: 8px;background: var(--gray-100);border-radius: 4px;overflow: hidden}
.progress-bar-fill{height: 100%;border-radius: 4px;background: var(--primary);transition: width 0.5s}
.alert{padding: 12px 16px;border-radius: var(--radius);margin-bottom: 12px;font-size: 13px;display: flex;align-items: center;gap: 8px}
.alert-success{background: var(--success-light);color: #065f46;border: 1px solid #a7f3d0}
.alert-error{background: var(--danger-light);color: #991b1b;border: 1px solid #fecaca}
.alert-info{background: var(--primary-light);color: var(--primary-dark);border: 1px solid #bfdbfe}
.alert-warning{background: var(--warning-light);color: #92400e;border: 1px solid #fde68a}
.toast-container{position: fixed;top: 20px;right: 20px;z-index: 9999;display: flex;flex-direction: column;gap: 8px}
.toast{padding: 12px 20px;border-radius: var(--radius);font-size: 13px;font-weight: 500;box-shadow: var(--shadow-lg);animation: slideIn 0.3s, fadeOut 0.3s 2.7s;min-width: 280px;display: flex;align-items: center;gap: 8px}
.toast-success{background: linear-gradient(135deg, rgba(16,185,129,0.95), rgba(6,182,212,0.95));backdrop-filter: blur(12px);color: white}
.toast-error{background: linear-gradient(135deg, rgba(239,68,68,0.95), rgba(249,115,22,0.95));backdrop-filter: blur(12px);color: white}
.toast-info{background: linear-gradient(135deg, rgba(124,58,237,0.95), rgba(236,72,153,0.95));backdrop-filter: blur(12px);color: white}
@keyframes slideIn{from{transform: translateX(100%);opacity: 0} to{transform: translateX(0);opacity: 1} }
@keyframes fadeOut{from{opacity: 1} to{opacity: 0} }
.empty-state{text-align: center;padding: 48px 24px;color: var(--gray-400)}
.empty-state svg{width: 48px;height: 48px;margin-bottom: 12px;opacity: 0.4}
.empty-state p{font-size: 14px;margin-bottom: 16px}
.timeline{position: relative;padding-left: 24px}
.timeline::before{content: '';position: absolute;left: 8px;top: 0;bottom: 0;width: 2px;background: var(--gray-200)}
.timeline-item{position: relative;padding-bottom: 20px}
.timeline-item::before{content: '';position: absolute;left: -20px;top: 4px;width: 12px;height: 12px;border-radius: 50%;background: white;border: 2px solid var(--primary)}
.timeline-item.completed::before{background: var(--success);border-color: var(--success)}
.timeline-date{font-size: 11px;color: var(--gray-400);margin-bottom: 4px}
.timeline-content{font-size: 13px;color: var(--gray-700)}
.search-bar{position: relative;max-width: 320px}
.search-bar input{padding-left: 36px}
.search-bar svg{position: absolute;left: 12px;top: 50%;transform: translateY(-50%);width: 16px;height: 16px;color: var(--gray-400)}
.avatar{width: 34px;height: 34px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 600;font-size: 13px;flex-shrink: 0}
.avatar-sm{width: 28px;height: 28px;font-size: 11px}
.avatar-lg{width: 48px;height: 48px;font-size: 18px}
.rx-print{background: white;border: 1px solid var(--gray-200);border-radius: var(--radius-lg);padding: 32px;max-width: 600px}
.rx-header{text-align: center;border-bottom: 2px solid var(--gray-800);padding-bottom: 16px;margin-bottom: 16px}
.rx-header h2{font-size: 20px}
.rx-symbol{font-size: 24px;font-weight: 700;color: var(--primary);margin-bottom: 12px}
.rx-item{padding: 10px 0;border-bottom: 1px dashed var(--gray-200)}
.rx-item:last-child{border-bottom: none}
.spinner{width: 20px;height: 20px;border: 2px solid var(--gray-200);border-top-color: var(--primary);border-radius: 50%;animation: spin 0.6s linear infinite}
@keyframes spin{to{transform: rotate(360deg)} }
.loading{display: flex;align-items: center;gap: 8px;color: var(--gray-500);padding: 20px}
.text-muted{color: var(--gray-500)}
.text-sm{font-size: 12px}
.text-xs{font-size: 11px}
.text-right{text-align: right}
.text-center{text-align: center}
.text-success{color: var(--success)}
.text-danger{color: var(--danger)}
.text-primary{color: var(--primary)}
.font-bold{font-weight: 600}
.font-mono{font-family: 'SF Mono', Monaco, monospace}
.mt-1{margin-top: 4px}
.mt-2{margin-top: 8px}
.mt-3{margin-top: 12px}
.mt-4{margin-top: 16px}
.mb-2{margin-bottom: 8px}
.mb-3{margin-bottom: 12px}
.mb-4{margin-bottom: 16px}
.mr-2{margin-right: 8px}
.p-4{padding: 16px}
.flex{display: flex}
.flex-col{flex-direction: column}
.flex-1{flex: 1}
.gap-1{gap: 4px}
.gap-2{gap: 8px}
.gap-3{gap: 12px}
.gap-4{gap: 16px}
.items-center{align-items: center}
.items-start{align-items: flex-start}
.justify-between{justify-content: space-between}
.justify-end{justify-content: flex-end}
.flex-wrap{flex-wrap: wrap}
.hidden{display: none !important}
.truncate{overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.cursor-pointer{cursor: pointer}
.border-t{border-top: 1px solid var(--gray-200)}
.border-b{border-bottom: 1px solid var(--gray-200)}
.rounded{border-radius: var(--radius)}
.w-full{width: 100%}
.inline-block{display: inline-block}
.cal-wrap{position: relative;display: inline-flex;align-items: center;gap: 3px;width: 100%}
.cal-wrap input[type="text"]:not(.cal-input){font-family: 'SF Mono', Monaco, 'Courier New', monospace;transition: border-color 0.15s, box-shadow 0.15s}
.cal-wrap input[type="text"]:not(.cal-input):focus{border-color: var(--primary) !important;box-shadow: 0 0 0 2px rgba(37,99,235,0.15)}
.cal-input{padding-right: 36px !important;font-family: 'SF Mono', Monaco, 'Courier New', monospace;letter-spacing: 0.5px}
.cal-dropdown{position: fixed;z-index: 9999;background: white;border-radius: 12px;box-shadow: 0 12px 40px rgba(0,0,0,0.25);border: 1px solid var(--gray-200);width: 300px;padding: 12px;animation: fadeIn 0.15s;user-select: none}
.cal-header{display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px}
.cal-header-title{font-weight: 700;font-size: 14px;color: var(--gray-800);cursor: pointer}
.cal-header-title:hover{color: var(--primary)}
.cal-nav{width: 30px;height: 30px;border: none;background: none;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 18px;color: var(--gray-500);transition: all 0.15s}
.cal-nav:hover{background: var(--gray-100);color: var(--gray-800)}
.cal-grid{display: grid;grid-template-columns: repeat(7,1fr);gap: 2px}
.cal-day-label{text-align: center;font-size: 10px;font-weight: 600;color: var(--gray-400);padding: 4px 0;text-transform: uppercase}
.cal-day{text-align: center;padding: 7px 0;font-size: 13px;border-radius: 8px;cursor: pointer;transition: all 0.1s;color: var(--gray-700);font-weight: 500;position: relative}
.cal-day:hover{background: var(--primary-light);color: var(--primary)}
.cal-day.today{font-weight: 700;color: var(--primary);box-shadow: inset 0 0 0 1.5px var(--primary)}
.cal-day.selected{background: var(--primary);color: white !important;font-weight: 700}
.cal-day.other-month{color: var(--gray-300)}
.cal-day.other-month:hover{color: var(--primary)}
.cal-quick{display: flex;gap: 4px;margin-top: 8px;border-top: 1px solid var(--gray-100);padding-top: 8px}
.cal-quick button{flex: 1;padding: 5px;border: 1px solid var(--gray-200);border-radius: 6px;background: white;font-size: 10px;cursor: pointer;color: var(--gray-600);transition: all 0.1s}
.cal-quick button:hover{background: var(--primary-light);border-color: var(--primary);color: var(--primary)}
.tooth-occlusal{width: 44px;height: 44px;cursor: pointer;transition: transform 0.15s}
.tooth-occlusal:hover{transform: scale(1.15)}
.tooth-occlusal-wrap{text-align: center;width: 52px;padding: 2px;border-radius: 8px;cursor: pointer;transition: background 0.15s;position: relative}
.tooth-occlusal-wrap:hover{background: var(--primary-50)}
.ss-wrap{position: relative;width: 100%}
.ss-input{cursor: text !important;background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center !important;padding-right: 28px !important}
.ss-dropdown{position: absolute;top: 100%;left: 0;right: 0;z-index: 1100;background: white;border: 1px solid var(--gray-200);border-radius: 0 0 8px 8px;box-shadow: var(--shadow-lg);max-height: 220px;overflow-y: auto;display: none}
.ss-dropdown.open{display: block}
.ss-option{padding: 8px 12px;cursor: pointer;font-size: 13px;border-bottom: 1px solid var(--gray-50);transition: background 0.1s}
.ss-option:hover, .ss-option.highlighted{background: var(--primary-light);color: var(--primary-dark)}
.ss-option .ss-match{font-weight: 700;text-decoration: underline}
.ss-option .ss-sub{font-size: 11px;color: var(--gray-400)}
.ss-empty{padding: 12px;text-align: center;color: var(--gray-400);font-size: 12px}
#sig-canvas{touch-action: none}
@media (max-width: 768px){.cal-dropdown{width: calc(100vw - 24px);left: 0;right: 0;position: fixed;top: auto;bottom: 0;border-radius: 16px 16px 0 0}
.tooth-occlusal{width: 34px;height: 34px}
.tooth-occlusal-wrap{width: 42px}
}
.mobile-menu-btn{display: none;width: 40px;height: 40px;border: none;background: none;cursor: pointer;padding: 8px;color: var(--gray-700);border-radius: var(--radius)}
.mobile-menu-btn:hover{background: var(--gray-100)}
.mobile-menu-btn svg{width: 24px;height: 24px}
.menu-toggle-btn{width: 36px;height: 36px;border: none;background: none;cursor: pointer;padding: 6px;color: var(--gray-600);border-radius: var(--radius);display: flex;align-items: center;justify-content: center;transition: all var(--transition)}
.menu-toggle-btn:hover{background: rgba(124,58,237,0.08);color: var(--primary)}
.menu-toggle-btn svg{width: 22px;height: 22px}
body.dark .menu-toggle-btn{color: #94a3b8}
body.dark .menu-toggle-btn:hover{background: rgba(124,58,237,0.15);color: #c4b5fd}
.sidebar-overlay{display: none;position: fixed;top:0;left:0;right:0;bottom:0;background: rgba(0,0,0,0.5);z-index: 99}
.sidebar-overlay.open{display: block}
.sidebar-close-btn{display: none;position: absolute;top: 12px;right: 12px;background: rgba(255,255,255,0.1);border: none;color: white;width: 32px;height: 32px;border-radius: 50%;cursor: pointer;font-size: 18px;align-items: center;justify-content: center}
@media (max-width: 1024px){.grid-sidebar{grid-template-columns: 1fr}
.grid-3{grid-template-columns: 1fr 1fr}
.stats-grid{grid-template-columns: repeat(3, 1fr)}
.page-header{flex-direction: column;align-items: flex-start;gap: 12px}
.page-header > div:last-child{width: 100%}
.modal{max-width: 90vw}
.modal-lg, .modal-xl{max-width: 95vw}
td, th{padding: 8px 10px;font-size: 12px}
}
@media (max-width: 768px){.sidebar{transform: translateX(-100%);width: 280px;z-index: 200}
.sidebar.open{transform: translateX(0)}
.sidebar-close-btn{display: flex}
.main-content{margin-left: 0}
.mobile-menu-btn{display: flex;align-items: center;justify-content: center}
.header{padding: 0 12px;height: 56px}
.header-left h2{font-size: 15px}
.header-right{gap: 6px}
.branch-selector{font-size: 11px;padding: 5px 8px;max-width: 140px}
.user-info{display: none}
.user-avatar{width: 30px;height: 30px;font-size: 11px}
.page-content{padding: 12px}
.page-header{flex-direction: column;align-items: stretch;gap: 10px}
.page-header h1{font-size: 18px}
.page-actions{flex-wrap: wrap}
.stats-grid{grid-template-columns: 1fr 1fr;gap: 10px}
.stat-card{padding: 14px}
.stat-value{font-size: 20px}
.stat-icon{width: 36px;height: 36px}
.stat-icon svg{width: 18px;height: 18px}
.stat-label{font-size: 11px}
.grid-2, .grid-3{grid-template-columns: 1fr}
.form-row, .form-row-3{grid-template-columns: 1fr}
.card{border-radius: 8px}
.card-header{padding: 12px 14px;flex-direction: column;align-items: flex-start;gap: 8px}
.card-body{padding: 12px 14px}
.card-footer{padding: 10px 14px;flex-direction: column;gap: 8px}
.table-container{overflow-x: auto;-webkit-overflow-scrolling: touch}
table{min-width: 500px}
td, th{padding: 8px 10px;font-size: 12px;white-space: nowrap}
.btn{padding: 10px 16px;font-size: 13px;min-height: 40px}
.btn-sm{padding: 8px 12px;font-size: 12px;min-height: 36px}
.btn-xs{padding: 6px 10px;font-size: 11px;min-height: 32px}
.btn-group{flex-wrap: wrap}
.btn-group .btn{border-radius: var(--radius) !important;margin: 0 !important}
.form-control{padding: 11px 12px;font-size: 14px;min-height: 44px}
select.form-control{min-height: 44px}
textarea.form-control{min-height: auto}
.form-group label{font-size: 13px;margin-bottom: 6px}
.modal-overlay{align-items: flex-end;padding: 0}
.modal{max-width: 100%;max-height: 95vh;border-radius: 16px 16px 0 0;animation: slideUpMobile 0.3s}
.modal-lg, .modal-xl{max-width: 100%}
.modal-header{padding: 14px 16px}
.modal-header h3{font-size: 15px}
.modal-body{padding: 14px 16px}
.modal-footer{padding: 12px 16px;flex-wrap: wrap}
.modal-footer .btn{flex: 1;min-width: 100px}
.tabs{overflow-x: auto;-webkit-overflow-scrolling: touch;flex-wrap: nowrap;gap: 0}
.tab-btn{flex-shrink: 0;padding: 8px 14px;font-size: 12px;white-space: nowrap}
.badge{font-size: 10px;padding: 2px 6px}
.tooth-chart{gap: 1px;padding: 8px}
.tooth-cell{width: 38px !important}
.tooth-cell svg{width: 30px !important;height: 40px !important}
.search-bar{max-width: 100%}
.flex[style*="align-items:stretch"]{flex-direction: column}
.flex[style*="align-items:stretch"] select{width: 100% !important}
.flex.gap-2.items-center.flex-wrap{gap: 6px}
.chart-bar-label{width: 100px !important;font-size: 10px}
.avatar-lg{width: 40px;height: 40px;font-size: 16px}
.alert{font-size: 12px;padding: 10px 12px}
.toast-container{left: 12px;right: 12px;top: 10px}
.toast{min-width: auto;width: 100%;font-size: 12px}
.rx-print{padding: 16px}
.timeline{padding-left: 16px}
.hide-mobile{display: none !important}
}
@media (max-width: 480px){.stats-grid{grid-template-columns: 1fr;gap: 8px}
.stat-card{flex-direction: row;gap: 12px}
.header-left h2{font-size: 14px;max-width: 120px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.branch-selector{max-width: 100px;font-size: 10px}
table{min-width: 400px}
.tooth-cell{width: 32px !important}
.tooth-cell svg{width: 26px !important;height: 34px !important}
.modal-footer .btn{font-size: 12px}
.btn-group{width: 100%}
.btn-group .btn{flex: 1;text-align: center;justify-content: center}
}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes slideUpMobile{from{transform: translateY(100%)}
to{transform: translateY(0)}
}
html{-webkit-text-size-adjust: 100%}
@media (min-width: 1440px){.page-content{padding: 28px 36px;max-width: 1600px}
.stats-grid{grid-template-columns: repeat(4, 1fr)}
}
@media (min-width: 769px) and (max-width: 1024px){:root{--sidebar-width: 220px}
.sidebar-brand h2{font-size: 15px}
.nav-item{font-size: 12px;padding: 8px 16px}
.nav-section{font-size: 9px;padding: 12px 16px 4px}
.sidebar-header{padding: 14px 16px 12px}
.page-content{padding: 16px 20px}
.card-body{padding: 14px 16px}
.card-header{padding: 12px 16px}
}
@media (min-width: 601px) and (max-width: 768px){.stats-grid{grid-template-columns: repeat(2, 1fr);gap: 10px}
.grid-2{grid-template-columns: 1fr 1fr;gap: 12px}
.grid-3{grid-template-columns: 1fr 1fr;gap: 12px}
}
@media (max-width: 768px){[style*="grid-template-columns: repeat(4"]{grid-template-columns: repeat(2, 1fr) !important}
[style*="grid-template-columns:repeat(4"]{grid-template-columns: repeat(2, 1fr) !important}
[style*="grid-template-columns: 1fr 1fr 1fr"]{grid-template-columns: 1fr 1fr !important}
[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns: 1fr 1fr !important}
[style*="display:flex"][style*="gap"]{flex-wrap: wrap !important}
[style*="font-size:28px"]{font-size: 22px !important}
[style*="font-size:26px"]{font-size: 20px !important}
[style*="font-size:24px"]{font-size: 18px !important}
[style*="font-size:22px"]{font-size: 17px !important}
.card[style*="border:2px solid #1e40af"]{border-width: 1px !important}
[style*="max-height:180px"]{max-height: 150px !important}
[style*="max-height:200px"]{max-height: 160px !important}
[style*="max-height:220px"]{max-height: 170px !important}
[style*="padding:14px"][style*="border-radius:10px"]{padding: 10px !important}
[style*="padding:14px;margin-bottom:12px"]{padding: 10px !important;margin-bottom: 8px !important}
[style*="justify-content:center"][style*="gap:2px"]{gap: 1px !important;overflow-x: auto;-webkit-overflow-scrolling: touch}
.progress-bar{width: 30px !important}
.btn-ghost{min-width: 32px;min-height: 32px}
.header-right .btn{padding: 6px 8px}
.cal-wrap{width: auto !important;min-width: 120px}
.cal-wrap input[type="text"]:not(.cal-input){width: 30px !important;padding: 4px 1px !important;font-size: 11px !important}
.cal-wrap input[maxlength="4"]{width: 42px !important}
.sidebar-overlay.open{background: rgba(0,0,0,0.6)}
div[style*="display:flex;justify-content:space-around"]{flex-wrap: wrap !important;gap: 12px !important}
table{min-width: 600px}
[style*="min-width:100px"]{min-width: 80px !important}
#pedo-chart-section [style*="width:42px"]{width: 36px !important}
[style*="display:flex"]{flex-wrap: wrap !important}
[style*="display:inline-flex"]{flex-wrap: wrap !important}
.page-content{overflow-x: hidden !important}
.card-body{overflow-x: auto !important}
.modal-body{overflow-x: hidden !important}
[style*="width:300px"]{width: 100% !important;max-width: 300px !important}
[style*="width:400px"]{width: 100% !important;max-width: 400px !important}
[style*="width:480px"]{width: 100% !important}
[style*="max-width:400px"]{max-width: 100% !important}
[style*="max-width:480px"]{max-width: 100% !important}
[style*="max-width:620px"]{max-width: 100% !important}
[style*="grid-template-columns:repeat(5"]{grid-template-columns: repeat(3, 1fr) !important}
[style*="grid-template-columns: repeat(5"]{grid-template-columns: repeat(3, 1fr) !important}
[style*="grid-template-columns:1fr 1fr 1fr 1fr"]{grid-template-columns: 1fr 1fr !important}
.form-row, .form-row-3{grid-template-columns: 1fr !important}
[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns: 1fr 1fr 1fr !important}
[style*="grid-template-columns:1fr 1fr"][style*="border-bottom"]{grid-template-columns: 1fr !important}
[style*="padding:14px 32px"]{padding: 12px 20px !important;font-size: 14px !important}
[style*="letter-spacing:2px"]{font-size: 11px !important;letter-spacing: 1px !important}
.search-bar{max-width: 100% !important}
[style*="overflow-x:auto"]{-webkit-overflow-scrolling: touch;scrollbar-width: none}
[style*="overflow-x:auto"]::-webkit-scrollbar{display: none}
#sub-banner{flex-direction: column !important;gap: 6px !important;text-align: center !important}
[style*="grid-template-columns:repeat(auto-fill,minmax(320px"]{grid-template-columns: 1fr !important}
[style*="max-width:480px"]{max-width: 100% !important;padding: 0 !important}
.grid-2{grid-template-columns: 1fr !important}
.sa-header{flex-direction: column;gap: 8px;padding: 10px 16px}
.sa-nav{flex-wrap: wrap;justify-content: center}
.sa-content{padding: 12px 16px}
}
@media (max-width: 480px){[style*="grid-template-columns: 1fr 1fr 1fr"]{grid-template-columns: 1fr !important}
[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns: 1fr !important}
[style*="grid-template-columns: repeat(4"]{grid-template-columns: 1fr 1fr !important}
[style*="grid-template-columns:repeat(4"]{grid-template-columns: 1fr 1fr !important}
[style*="font-size:22px;font-weight:800"]{font-size: 16px !important}
.flex.gap-1{gap: 2px !important}
.flex.gap-2{gap: 4px !important}
.login-card{padding: 24px 20px;margin: 12px}
.login-card h1{font-size: 22px}
[style*="border-radius:20px;padding:3px 10px"]{padding: 2px 6px !important;font-size: 9px !important}
[style*="flex:1;min-width:100px"]{min-width: 70px !important;flex: 1 1 30% !important}
[style*="font-size:20px;font-weight:800;margin-top:2px"]{font-size: 16px !important}
[style*="width:48px;text-align:center"]{width: 38px !important}
[style*="width:48px;text-align:center"] svg{width: 30px !important;height: 30px !important}
.modal-footer{flex-direction: column}
.modal-footer .btn{width: 100%}
h1[style*="font-size:20px"]{font-size: 16px !important}
.grid-2, .grid-3{grid-template-columns: 1fr !important}
[style*="grid-template-columns:repeat(3"]{grid-template-columns: 1fr 1fr !important}
[style*="grid-template-columns:repeat(5"]{grid-template-columns: repeat(2, 1fr) !important}
.card-body{padding: 10px !important}
.card-header{padding: 8px 10px !important}
.card-header h3{font-size: 13px !important}
[style*="padding:14px 32px"]{padding: 10px 16px !important}
[style*="border-bottom:2px solid"] .btn{font-size: 10px !important;padding: 4px 8px !important}
.sa-header h1{font-size: 14px}
[style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns: repeat(2, 1fr) !important}
[style*="grid-template-columns:repeat(auto-fill,minmax(280px"]{grid-template-columns: 1fr !important}
}
@media (max-height: 500px) and (orientation: landscape){.sidebar{padding-top: 8px}
.sidebar-header{padding: 8px 16px}
.nav-item{padding: 6px 16px}
.page-content{padding: 8px 16px}
.modal{max-height: 98vh}
.modal-body{max-height: 70vh}
.header{height: 48px}
.main-content{padding-top: 0}
}
@supports (padding: max(0px)){.sidebar{padding-bottom: max(16px, env(safe-area-inset-bottom))}
.modal{padding-bottom: max(12px, env(safe-area-inset-bottom))}
.page-content{padding-bottom: max(24px, env(safe-area-inset-bottom))}
}
@media (hover: none) and (pointer: coarse){.nav-item{padding: 14px 20px}
.btn{min-height: 44px}
.btn-sm{min-height: 40px}
.form-control{min-height: 44px}
tr:hover td{background: transparent}
.tooth-cell:hover{background: transparent !important}
.table-container::-webkit-scrollbar{display: none}
.tabs::-webkit-scrollbar{display: none}
.table-container{-webkit-overflow-scrolling: touch}
[style*="overflow-y:auto"]{-webkit-overflow-scrolling: touch}
input[type="checkbox"]{min-width: 18px;min-height: 18px}
}
@media print{@page{size: A4;margin: 4mm 6mm}
*{-webkit-print-color-adjust: exact !important;print-color-adjust: exact !important;color-adjust: exact !important}
body.print-modal > *{display: none !important}
body.print-modal > .modal-overlay{display: block !important;position: static !important;background: none !important;overflow: visible !important;height: auto !important;min-height: 0 !important;width: auto !important;padding: 0 !important;margin: 0 !important;top: auto !important;bottom: auto !important;left: auto !important;right: auto !important;backdrop-filter: none !important;-webkit-backdrop-filter: none !important;animation: none !important;transform: none !important}
body.print-modal .modal{position: static !important;max-width: 100% !important;width: 100% !important;box-shadow: none !important;border: none !important;margin: 0 !important;padding: 0 !important;max-height: none !important;overflow: visible !important;overflow-y: visible !important;height: auto !important;border-radius: 0 !important;backdrop-filter: none !important;-webkit-backdrop-filter: none !important;background: white !important;animation: none !important;transform: none !important}
body.print-modal .modal-footer, body.print-modal .modal-close, body.print-modal .modal-header{display: none !important;position: static !important;height: 0 !important;padding: 0 !important;margin: 0 !important;overflow: hidden !important}
.no-print{display: none !important}
body.print-modal .modal-body{padding: 0 !important;max-height: none !important;overflow: visible !important;height: auto !important}
body.print-modal .modal-overlay, body.print-modal .modal, body.print-modal .modal-body{float: none !important;clear: both !important}
body.print-modal .modal-body div[style*="position:absolute"][style*="pointer-events:none"]{display: none !important}
body.print-modal .modal-body div[style*="position: absolute"][style*="pointer-events"]{display: none !important}
body.print-modal .modal-body div{margin-block: 0 !important}
body.print-modal .modal-body div[style*="margin-bottom:12px"]{margin-bottom: 6px !important}
body.print-modal .modal-body div[style*="margin-bottom:10px"]{margin-bottom: 4px !important}
body.print-modal .modal-body div[style*="margin-bottom:8px"]{margin-bottom: 3px !important}
body.print-modal .modal-body div[style*="margin-bottom:6px"]{margin-bottom: 2px !important}
body.print-modal .modal-body div[style*="padding:12px 16px"]{padding: 8px 12px !important}
body.print-modal .modal-body #rx-diag-section, body.print-modal .modal-body #rx-txdone-section, body.print-modal .modal-body #rx-cc-section{line-height: 1.15 !important}
body.print-modal .modal-body #rx-diag-section div, body.print-modal .modal-body #rx-txdone-section div{margin-bottom: 0 !important;padding-bottom: 0 !important}
body.print-modal .modal-body div[style*="padding:12px"]{padding: 6px 10px !important}
body.print-modal .modal-body table{font-size: 10px !important}
body.print-modal .modal-body td, body.print-modal .modal-body th{padding: 2px 4px !important}
body.print-page .sidebar{display: none !important}
body.print-page .header{display: none !important}
body.print-page .sidebar-overlay{display: none !important}
body.print-page .main-content{margin-left: 0 !important}
body.print-page .page-content{padding: 0 !important}
body.print-page .page-header .btn{display: none !important}
body.print-page .pl-btn{display: none !important}
body.print-page .cal-wrap{display: none !important}
body.print-page select{display: none !important}
body.print-page input{display: none !important}
body.print-page #rpt-pt-list{display: none !important}
body.print-page #rpt-payment-list{display: none !important}
body.print-page #dr-perf-list{display: none !important}
body.print-page #rpt-print-header{display: block !important}
body.print-page #rpt-branch{display: none !important}
body.print-page .card{page-break-inside: avoid}
body.print-page .stats-grid{page-break-inside: avoid}
body.print-page .grid-2{page-break-inside: avoid}
body:not(.print-page):not(.print-modal) > *{display: none !important}
body:not(.print-page):not(.print-modal) > .modal-overlay{display: block !important;position: static !important;background: none !important;overflow: visible !important;height: auto !important;min-height: 0 !important;width: auto !important;padding: 0 !important;margin: 0 !important;top: auto !important;bottom: auto !important;left: auto !important;right: auto !important;backdrop-filter: none !important;-webkit-backdrop-filter: none !important;animation: none !important;transform: none !important}
body:not(.print-page):not(.print-modal) .modal{position: static !important;max-width: 100% !important;width: 100% !important;box-shadow: none !important;border: none !important;margin: 0 !important;padding: 0 !important;max-height: none !important;overflow: visible !important;overflow-y: visible !important;height: auto !important;border-radius: 0 !important;backdrop-filter: none !important;-webkit-backdrop-filter: none !important;background: white !important;animation: none !important;transform: none !important}
body:not(.print-page):not(.print-modal) .modal-footer, body:not(.print-page):not(.print-modal) .modal-close, body:not(.print-page):not(.print-modal) .modal-header{display: none !important}
body:not(.print-page):not(.print-modal) .modal-body{padding: 0 !important;max-height: none !important;overflow: visible !important;height: auto !important}
body.print-page .card{page-break-inside: avoid}
table{page-break-inside: auto}
tr{page-break-inside: avoid}
body.print-page .btn{display: none !important}
body.print-page .card{border: 1px solid #e5e7eb !important;box-shadow: none !important;margin-bottom: 6px !important}
.stat-card{border: 1px solid #e5e7eb !important}
*{-webkit-print-color-adjust: exact !important;print-color-adjust: exact !important}
}