:root {
     --sidebar-width: 260px;
     --header-height: 64px;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     overflow-x: hidden;
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
     background: #F1F5F9;
     color: #1e293b;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
     min-height: 100vh;
 }

 html.dark body {
     background: #0F172A;
     color: #E2E8F0;
 }

 /* Scrollbar */
 ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
 }

 ::-webkit-scrollbar-track {
     background: transparent;
 }

 ::-webkit-scrollbar-thumb {
     background: #CBD5E1;
     border-radius: 99px;
 }

 html.dark ::-webkit-scrollbar-thumb {
     background: #334155;
 }

 /* ══════ SIDEBAR ══════ */
 .sidebar {
     position: fixed;
     top: 0;
     left: 0;
     width: var(--sidebar-width);
     height: 100vh;
     background: #FFFFFF;
     border-right: 1px solid #E2E8F0;
     z-index: 1000;
     display: flex;
     flex-direction: column;
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 html.dark .sidebar {
     background: #0F172A;
     border-right-color: #1E293B;
 }

 @media (max-width: 1023px) {
     .sidebar {
         transform: translateX(-100%);
     }

     .sidebar.open {
         transform: translateX(0);
     }
 }

 .sidebar-overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.4);
     z-index: 999;
 }

 .sidebar-overlay.active {
     display: block;
 }

 .nav-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 16px;
     border-radius: 10px;
     color: #64748B;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     text-decoration: none;
     margin: 0 12px 2px;
     transition: all 0.15s ease;
 }

 .nav-item:hover {
     background: #F1F5F9;
     color: #334155;
 }

 html.dark .nav-item:hover {
     background: #1E293B;
     color: #E2E8F0;
 }

 .nav-item.active {
     background: #EFF6FF;
     color: #2563EB;
     font-weight: 600;
 }

 html.dark .nav-item.active {
     background: rgba(37, 99, 235, 0.15);
     color: #60A5FA;
 }

 .nav-item .nav-icon {
     width: 20px;
     height: 20px;
     flex-shrink: 0;
 }

 .nav-group-title {
     font-size: 11px;
     font-weight: 700;
     color: #94A3B8;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     padding: 16px 28px 6px;
 }

 /* ══════ HEADER ══════ */
 .header {
     position: fixed;
     top: 0;
     left: var(--sidebar-width);
     right: 0;
     height: var(--header-height);
     background: rgba(255, 255, 255, 0.88);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-bottom: 1px solid #E2E8F0;
     z-index: 900;
     display: flex;
     align-items: center;
     padding: 0 24px;
     transition: left 0.3s;
 }

 html.dark .header {
     background: rgba(15, 23, 42, 0.88);
     border-bottom-color: #1E293B;
 }

 @media (max-width: 1023px) {
     .header {
         left: 0;
     }
 }

 /* ══════ MAIN ══════ */
 .main-content {
     margin-left: var(--sidebar-width);
     padding-top: var(--header-height);
     min-height: 100vh;
     transition: margin-left 0.3s;
 }

 @media (max-width: 1023px) {
     .main-content {
         margin-left: 0;
     }
 }

 /* ══════ CARD ══════ */
 .card {
     background: #FFFFFF;
     border: 1px solid #E2E8F0;
     border-radius: 16px;
 }

 html.dark .card {
     background: #1E293B;
     border-color: #334155;
 }

 /* ══════ STAT CARD ══════ */
 .stat-card {
     background: #FFFFFF;
     border: 1px solid #E2E8F0;
     border-radius: 16px;
     padding: 20px;
     position: relative;
     overflow: hidden;
 }

 html.dark .stat-card {
     background: #1E293B;
     border-color: #334155;
 }

 .stat-card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
 }

 html.dark .stat-card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }

 .stat-card .card-deco {
     position: absolute;
     top: -20px;
     right: -20px;
     width: 100px;
     height: 100px;
     border-radius: 50%;
     opacity: 0.08;
     pointer-events: none;
 }

 /* ══════ ICON BOX ══════ */
 .icon-box {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 /* ══════ BADGE ══════ */
 .badge {
     display: inline-flex;
     align-items: center;
     gap: 3px;
     padding: 3px 10px;
     border-radius: 99px;
     font-size: 12px;
     font-weight: 600;
     white-space: nowrap;
 }

 /* ══════ BUTTON ══════ */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 10px 18px;
     border-radius: 10px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     border: none;
     font-family: inherit;
     transition: background 0.15s, box-shadow 0.15s;
 }

 .btn-primary {
     background: #2563EB;
     color: #fff;
 }

 .btn-primary:hover {
     background: #1D4ED8;
 }

 .btn-outline {
     background: #fff;
     color: #334155;
     border: 1px solid #E2E8F0;
 }

 html.dark .btn-outline {
     background: #1E293B;
     color: #E2E8F0;
     border-color: #334155;
 }

 .btn-outline:hover {
     background: #F8FAFC;
 }

 html.dark .btn-outline:hover {
     background: #334155;
 }

 .btn-sm {
     padding: 7px 14px;
     font-size: 13px;
     border-radius: 8px;
 }

 .btn-danger {
     background: #EF4444;
     color: #fff;
 }

 .btn-danger:hover {
     background: #DC2626;
 }

 .btn-success {
     background: #10B981;
     color: #fff;
 }

 .btn-success:hover {
     background: #059669;
 }

 /* ══════ AVATAR ══════ */
 .avatar {
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0;
 }

 /* ══════ INPUT ══════ */
 .form-input {
     width: 100%;
     padding: 10px 14px;
     border: 1px solid #E2E8F0;
     border-radius: 10px;
     font-size: 14px;
     font-family: inherit;
     background: #FFFFFF;
     color: #1E293B;
     outline: none;
     transition: border-color 0.15s;
 }

 html.dark .form-input {
     background: #0F172A;
     border-color: #334155;
     color: #E2E8F0;
 }

 .form-input:focus {
     border-color: #2563EB;
     box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
 }

 .form-input-icon {
     padding-left: 38px;
 }

 .form-input::placeholder {
     color: #94A3B8;
 }

 html.dark .form-input::placeholder {
     color: #64748B;
 }

 select.form-input {
     appearance: none;
     cursor: pointer;
     background-image: 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='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 12px center;
     padding-right: 32px;
 }

 textarea.form-input {
     resize: none;
 }

 /* ══════ TABLE ══════ */
 .data-table {
     width: 100%;
     border-collapse: collapse;
 }

 .data-table th {
     text-align: left;
     padding: 12px 16px;
     font-size: 11px;
     font-weight: 700;
     color: #94A3B8;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     border-bottom: 1px solid #E2E8F0;
     white-space: nowrap;
 }

 html.dark .data-table th {
     border-bottom-color: #334155;
 }

 .data-table td {
     padding: 14px 16px;
     font-size: 14px;
     border-bottom: 1px solid #F1F5F9;
     white-space: nowrap;
 }

 html.dark .data-table td {
     border-bottom-color: #1E293B;
 }

 .data-table tbody tr:hover td {
     background: #F8FAFC;
 }

 html.dark .data-table tbody tr:hover td {
     background: rgba(30, 41, 59, 0.5);
 }

 /* ══════ DROPDOWN ══════ */
 .dropdown-menu {
     position: absolute;
     right: 0;
     top: calc(100% + 6px);
     min-width: 180px;
     background: #FFFFFF;
     border: 1px solid #E2E8F0;
     border-radius: 12px;
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
     z-index: 500;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-6px);
     transition: all 0.2s ease;
     overflow: hidden;
 }

 html.dark .dropdown-menu {
     background: #1E293B;
     border-color: #334155;
 }

 .dropdown-menu.open {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .dropdown-item {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 10px 14px;
     font-size: 14px;
     color: #475569;
     cursor: pointer;
 }

 html.dark .dropdown-item {
     color: #CBD5E1;
 }

 .dropdown-item:hover {
     background: #F8FAFC;
 }

 html.dark .dropdown-item:hover {
     background: #334155;
 }

 /* ══════ NOTIF PANEL ══════ */
 .notif-panel {
     position: absolute;
     right: 0;
     top: calc(100% + 6px);
     width: 340px;
     max-height: 400px;
     background: #FFFFFF;
     border: 1px solid #E2E8F0;
     border-radius: 14px;
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
     z-index: 500;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-6px);
     transition: all 0.2s ease;
     overflow: hidden;
 }

 html.dark .notif-panel {
     background: #1E293B;
     border-color: #334155;
 }

 .notif-panel.open {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 @media (max-width: 480px) {
     .notif-panel {
         width: calc(100vw - 32px);
         right: -60px;
     }
 }

 /* ══════ MODAL ══════ */
 .modal-backdrop {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.45);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
     z-index: 2000;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 16px;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.2s, visibility 0.2s;
 }

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

 .modal-box {
     width: 100%;
     max-width: 560px;
     max-height: 92vh;
     overflow-y: auto;
     background: #FFFFFF;
     border-radius: 20px;
     box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
     transform: scale(0.95) translateY(10px);
     transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 html.dark .modal-box {
     background: #1E293B;
     border: 1px solid #334155;
 }

 .modal-backdrop.open .modal-box {
     transform: scale(1) translateY(0);
 }

 .modal-box::-webkit-scrollbar {
     width: 4px;
 }

 .modal-box::-webkit-scrollbar-thumb {
     background: rgba(0, 0, 0, 0.08);
     border-radius: 99px;
 }

 /* ══════ TOAST ══════ */
 .toast-container {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 9999;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 @media (max-width: 480px) {
     .toast-container {
         right: 12px;
         left: 12px;
     }
 }

 .toast {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 16px;
     background: #FFFFFF;
     border: 1px solid #E2E8F0;
     border-radius: 12px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
     font-size: 14px;
     font-weight: 500;
     max-width: 360px;
     animation: toastIn 0.3s ease;
 }

 html.dark .toast {
     background: #1E293B;
     border-color: #334155;
 }

 @keyframes toastIn {
     from {
         opacity: 0;
         transform: translateX(40px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 /* ══════ NOTIF DOT ══════ */
 .notif-dot {
     position: absolute;
     top: 2px;
     right: 2px;
     width: 8px;
     height: 8px;
     background: #EF4444;
     border-radius: 50%;
     border: 2px solid #FFFFFF;
 }

 html.dark .notif-dot {
     border-color: #0F172A;
 }

 /* ══════ CHECKBOX ══════ */
 .custom-checkbox {
     width: 18px;
     height: 18px;
     border-radius: 5px;
     border: 2px solid #CBD5E1;
     cursor: pointer;
     appearance: none;
     -webkit-appearance: none;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.15s;
     flex-shrink: 0;
     position: relative;
 }

 html.dark .custom-checkbox {
     border-color: #475569;
 }

 .custom-checkbox:checked {
     background: #2563EB;
     border-color: #2563EB;
 }

 .custom-checkbox:checked::after {
     content: '';
     width: 5px;
     height: 9px;
     border: solid white;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
     position: absolute;
     top: 1px;
 }

 /* ══════ RESPONSIVE ══════ */
 @media (max-width: 639px) {
     .hide-mobile {
         display: none !important;
     }
 }

 @media (max-width: 767px) {
     .hide-tablet {
         display: none !important;
     }
 }

 /* ══════ ROW ACTION MENU ══════ */
 .row-action-menu {
     position: absolute;
     right: 0;
     top: 100%;
     min-width: 160px;
     background: #fff;
     border: 1px solid #E2E8F0;
     border-radius: 10px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
     z-index: 600;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-4px);
     transition: all 0.15s ease;
     overflow: hidden;
 }

 html.dark .row-action-menu {
     background: #1E293B;
     border-color: #334155;
 }

 .row-action-menu.open {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .row-action-item {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
     font-size: 13px;
     color: #475569;
     cursor: pointer;
     transition: background 0.1s;
 }

 html.dark .row-action-item {
     color: #CBD5E1;
 }

 .row-action-item:hover {
     background: #F8FAFC;
 }

 html.dark .row-action-item:hover {
     background: #334155;
 }

 /* ══════ FILTER TAG ══════ */
 .filter-tag {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 4px 10px;
     border-radius: 8px;
     font-size: 12px;
     font-weight: 500;
     cursor: pointer;
     border: 1px solid #E2E8F0;
     background: #fff;
     color: #64748B;
     transition: all 0.15s;
 }

 html.dark .filter-tag {
     background: #1E293B;
     border-color: #334155;
     color: #94A3B8;
 }

 .filter-tag:hover {
     border-color: #2563EB;
     color: #2563EB;
 }

 .filter-tag.active {
     background: #EFF6FF;
     border-color: #2563EB;
     color: #2563EB;
     font-weight: 600;
 }

 html.dark .filter-tag.active {
     background: rgba(37, 99, 235, 0.15);
     border-color: #3B82F6;
     color: #60A5FA;
 }

 /* ══════ BOOKING STATUS DOTS ══════ */
 .status-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     flex-shrink: 0;
 }

 /* ══════ SORT INDICATOR ══════ */
 .sort-btn {
     display: inline-flex;
     align-items: center;
     gap: 3px;
     cursor: pointer;
     user-select: none;
 }

 .sort-btn:hover {
     color: #334155;
 }

 html.dark .sort-btn:hover {
     color: #E2E8F0;
 }