@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Montserrat:wght@300;400;500;600&display=swap');
:root{--bg:#0d0d0d;--bg2:#161616;--bg3:#1e1e1e;--gold:#ffffff;--gold-dark:#cccccc;--text:rgba(255,255,255,0.85);--text-muted:rgba(255,255,255,0.45);--border:rgba(255,255,255,0.15);--font:'Montserrat',sans-serif;--font-h:'Playfair Display',serif;}

/* ── Light Theme ── */
body.theme-light{--bg:#f0f2f5;--bg2:#ffffff;--bg3:#e8eaed;--gold:#1a1a2e;--gold-dark:#333355;--text:rgba(0,0,0,0.82);--text-muted:rgba(0,0,0,0.5);--border:rgba(0,0,0,0.12);}

/* Layout & backgrounds */
body.theme-light .admin-sidebar{background:#fff;border-right-color:rgba(0,0,0,0.1);}
body.theme-light .admin-topbar{background:#fff;border-bottom-color:rgba(0,0,0,0.1);}
body.theme-light .admin-login{background:#f0f2f5;background-image:radial-gradient(ellipse at 50% 40%, rgba(100,80,200,0.05) 0%, transparent 65%);}
body.theme-light .login-card{background:#fff;border-color:rgba(0,0,0,0.1);box-shadow:0 20px 60px rgba(0,0,0,0.1);}
body.theme-light .login-card h2{color:#1a1a2e;}
body.theme-light .login-card p{color:rgba(0,0,0,0.5);}

/* Nav items */
body.theme-light .nav-item{color:rgba(0,0,0,0.5);}
body.theme-light .nav-item:hover,body.theme-light .nav-item.active{color:#1a1a2e;background:rgba(26,26,46,0.06);border-left-color:#1a1a2e;}
body.theme-light .nav-item.nav-restricted:hover{background:none;border-left-color:transparent;color:rgba(0,0,0,0.5);}
body.theme-light .sidebar-logo-title{color:#1a1a2e;}
body.theme-light .sidebar-logo-sub{color:rgba(0,0,0,0.45);}
body.theme-light .sidebar-footer{border-top-color:rgba(0,0,0,0.1);}

/* Topbar */
body.theme-light .topbar-title{color:#1a1a2e;}
body.theme-light .topbar-cafe{color:rgba(0,0,0,0.45);}
body.theme-light .admin-badge{background:rgba(26,26,46,0.08);border-color:rgba(0,0,0,0.12);color:#1a1a2e;}
body.theme-light .topbar-link{color:#1a1a2e;}
body.theme-light .topbar-logout{border-color:rgba(200,50,50,0.4);color:rgba(180,30,30,0.8);}
body.theme-light .topbar-logout:hover{background:rgba(200,50,50,0.08);}

/* Cards & sections */
body.theme-light .stat-card{background:#fff;border-color:rgba(0,0,0,0.1);}
body.theme-light .stat-card::before{background:linear-gradient(90deg,#1a1a2e,#333355);}
body.theme-light .stat-card-value{color:#1a1a2e;}
body.theme-light .stat-card-label{color:rgba(0,0,0,0.5);}
body.theme-light .section-card{background:#fff;border-color:rgba(0,0,0,0.1);}
body.theme-light .section-card h3{color:#1a1a2e;}
body.theme-light .section-card p{color:rgba(0,0,0,0.55);}
body.theme-light .table-wrap{background:#fff;border-color:rgba(0,0,0,0.1);}
body.theme-light .table-header{border-bottom-color:rgba(0,0,0,0.08);}
body.theme-light .table-header h3{color:#1a1a2e;}

/* Tables */
body.theme-light .admin-table th{background:rgba(0,0,0,0.03);color:rgba(0,0,0,0.5);border-bottom-color:rgba(0,0,0,0.08);}
body.theme-light .admin-table td{color:rgba(0,0,0,0.8);border-bottom-color:rgba(0,0,0,0.05);}
body.theme-light .admin-table tr:hover td{background:rgba(0,0,0,0.02);}

/* Forms & inputs */
body.theme-light .form-group label{color:rgba(0,0,0,0.5);}
body.theme-light .form-group input,
body.theme-light .form-group select,
body.theme-light .form-group textarea{background:#f8f9fa;color:#111;border-color:rgba(0,0,0,0.15);}
body.theme-light .form-group input:focus,
body.theme-light .form-group select:focus,
body.theme-light .form-group textarea:focus{border-color:#1a1a2e;}
body.theme-light .form-group input::placeholder,
body.theme-light .form-group textarea::placeholder{color:rgba(0,0,0,0.35);}
body.theme-light .filter-bar input,
body.theme-light .filter-bar select{background:#f8f9fa;color:#111;border-color:rgba(0,0,0,0.15);}
body.theme-light .filter-bar input::placeholder{color:rgba(0,0,0,0.35);}
body.theme-light select option,
body.theme-light .form-group select option,
body.theme-light .filter-bar select option{background:#fff !important;color:#111 !important;}

/* Buttons */
body.theme-light .btn-gold{background:#1a1a2e;color:#fff;}
body.theme-light .btn-gold:hover{box-shadow:0 6px 20px rgba(0,0,0,0.2);}
body.theme-light .btn-outline{border-color:rgba(0,0,0,0.2);color:rgba(0,0,0,0.6);}
body.theme-light .btn-outline:hover{border-color:#1a1a2e;color:#1a1a2e;}
body.theme-light .btn-danger{border-color:rgba(200,50,50,0.4);color:rgba(180,30,30,0.8);}
body.theme-light .btn-danger:hover{background:rgba(200,50,50,0.08);}
body.theme-light .logout-btn{border-color:rgba(200,50,50,0.4);color:rgba(180,30,30,0.8);}
body.theme-light .logout-btn:hover{background:rgba(200,50,50,0.08);}

/* Status badges */
body.theme-light .status-pending{background:rgba(0,0,0,0.07);color:#555;border-color:rgba(0,0,0,0.15);}
body.theme-light .status-confirmed{background:rgba(30,160,70,0.1);color:#1a7a3c;border-color:rgba(30,160,70,0.25);}
body.theme-light .status-cancelled{background:rgba(200,50,50,0.1);color:#b52020;border-color:rgba(200,50,50,0.25);}

/* Services & addons */
body.theme-light .service-item{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.1);}
body.theme-light .service-item:hover{background:rgba(0,0,0,0.04);border-color:#1a1a2e;}
body.theme-light .service-name{color:#111;}
body.theme-light .service-name-mr{color:rgba(0,0,0,0.5);}
body.theme-light .service-drag-handle{color:rgba(0,0,0,0.35);}
body.theme-light .service-tag{background:rgba(26,26,46,0.07);color:#1a1a2e;border-color:rgba(26,26,46,0.15);}
body.theme-light .service-order-badge{background:#1a1a2e;color:#fff;}

/* Upload area */
body.theme-light .upload-area{border-color:rgba(0,0,0,0.15);}
body.theme-light .upload-area:hover{border-color:#1a1a2e;background:rgba(0,0,0,0.02);}
body.theme-light .upload-area p{color:rgba(0,0,0,0.45);}

/* Gallery */
body.theme-light .gallery-admin-item .item-overlay{background:rgba(0,0,0,0.5);}

/* Disabled slots table */
body.theme-light #disabledSlotsTbody td,
body.theme-light #bookedSlotsTbody td{color:rgba(0,0,0,0.75);}

/* Modal overrides */
body.theme-light .service-edit-modal > div{background:#fff !important;border-color:rgba(0,0,0,0.1) !important;}
body.theme-light .service-edit-modal h3{color:#1a1a2e !important;}
body.theme-light .service-edit-modal label{color:rgba(0,0,0,0.5) !important;}
body.theme-light .service-edit-modal input,
body.theme-light .service-edit-modal select,
body.theme-light .service-edit-modal textarea{background:#f8f9fa !important;color:#111 !important;border-color:rgba(0,0,0,0.15) !important;}
body.theme-light .service-edit-modal select option{background:#fff !important;color:#111 !important;}

/* Code snippets & misc */
body.theme-light code{background:rgba(26,26,46,0.08) !important;color:#1a1a2e !important;}
body.theme-light h4{color:#1a1a2e;}
body.theme-light strong{color:rgba(0,0,0,0.8);}
body.theme-light .admin-content p{color:rgba(0,0,0,0.55);}
body.theme-light #staffList{color:rgba(0,0,0,0.55);}
body.theme-light .cacheNotice{background:#1a1a2e;color:#fff;}

/* Dynamically rendered content — override hardcoded inline colors from admin.js */
body.theme-light .admin-panel input[style*="color:#fff"],
body.theme-light .admin-panel textarea[style*="color:#fff"],
body.theme-light .admin-panel select[style*="color:#fff"]{color:#111 !important;background:#f8f9fa !important;}
body.theme-light .admin-panel [style*="background:rgba(255,255,255,0.04)"],
body.theme-light .admin-panel [style*="background:rgba(255,255,255,0.08)"]{background:#f8f9fa !important;color:#111 !important;}
body.theme-light .admin-panel [style*="background:rgba(0,0,0,0.4)"]{background:rgba(0,0,0,0.05) !important;}
body.theme-light .admin-panel [style*="background:rgba(255,255,255,0.03)"]{background:rgba(0,0,0,0.02) !important;}
body.theme-light .admin-panel [style*="color:rgba(255,255,255,0.5)"],
body.theme-light .admin-panel [style*="color:rgba(255,255,255,0.4)"],
body.theme-light .admin-panel [style*="color:rgba(255,255,255,0.6)"],
body.theme-light .admin-panel [style*="color:rgba(255,255,255,0.7)"]{color:rgba(0,0,0,0.5) !important;}
body.theme-light .admin-panel [style*="color:#fff"]{color:#111 !important;}
body.theme-light .admin-panel [style*="font-size:0.85rem;color:#fff"]{color:#111 !important;}
/* Staff list items */
body.theme-light [style*="background:rgba(255,255,255,0.03)"][style*="border"]{background:rgba(0,0,0,0.02) !important;}
/* Empty state messages */
body.theme-light td[style*="color:rgba(255,255,255"]{color:rgba(0,0,0,0.45) !important;}
/* Booked/disabled slots table */
body.theme-light #disabledSlotsTbody tr td,
body.theme-light #bookedSlotsTbody tr td{color:rgba(0,0,0,0.75);}

/* ── Theme Toggle Button ── */
.theme-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--text-muted);transition:all 0.2s;flex-shrink:0;}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold);}
.theme-toggle svg{width:16px;height:16px;}
/* ── Notification Button Active State ── */
.theme-toggle.notification-enabled{background:rgba(212,175,55,0.15);border-color:var(--gold);color:var(--gold);position:relative;}
.theme-toggle.notification-enabled::after{content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;background:#4ade80;border-radius:50%;box-shadow:0 0 8px #4ade80;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--font);display:flex;min-height:100vh;overflow-x:hidden;}
/* Sidebar */
.admin-sidebar{width:240px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;flex-shrink:0;}
.sidebar-logo{padding:0.85rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.85rem;overflow:hidden;min-height:64px;max-width:240px;}
.sidebar-logo-icon{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.sidebar-logo-icon img{width:40px;height:40px;object-fit:contain;}
.login-logo-img{width:80px;height:80px;object-fit:contain;}
.sidebar-logo-text{display:flex;flex-direction:column;min-width:0;overflow:hidden;}
.sidebar-logo-title{font-size:0.72rem;letter-spacing:0.18em;color:var(--gold);text-transform:uppercase;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-logo-sub{font-size:0.6rem;letter-spacing:0.12em;color:var(--text-muted);text-transform:uppercase;white-space:nowrap;margin-top:0.15rem;overflow:hidden;text-overflow:ellipsis;}
.sidebar-nav{flex:1;padding:0.75rem 0;overflow-y:auto;}
.nav-item{display:flex;align-items:center;gap:0.8rem;padding:0.7rem 1.5rem;cursor:pointer;transition:all 0.2s;color:var(--text-muted);border-left:3px solid transparent;}
.nav-item:hover,.nav-item.active{color:var(--gold);background:rgba(255,255,255,0.06);border-left-color:var(--gold);}
.nav-item.nav-restricted{opacity:0.3;cursor:not-allowed;}
.nav-item.nav-restricted:hover{background:none;border-left-color:transparent;color:var(--text-muted);}
.nav-item .nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nav-item .nav-icon svg{width:16px;height:16px;}
.nav-label{display:flex;flex-direction:column;min-width:0;}
.nav-label > span:first-child{font-size:0.82rem;white-space:nowrap;}
.nav-sub{display:none;}
.sidebar-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);}
.logout-btn{width:100%;background:transparent;border:1px solid rgba(255,100,100,0.3);color:rgba(255,100,100,0.7);padding:0.5rem;border-radius:8px;cursor:pointer;font-size:0.78rem;transition:all 0.2s;font-family:var(--font);}
.logout-btn:hover{background:rgba(255,100,100,0.1);border-color:rgba(255,100,100,0.6);}
/* Main */
.admin-main{margin-left:240px;flex:1;display:flex;flex-direction:column;min-height:100vh;min-width:0;width:calc(100% - 240px);}
.admin-topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:50;min-height:64px;}
.topbar-title{font-family:var(--font-h);font-size:1.2rem;color:var(--gold);}
.topbar-cafe{font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted);margin-top:0.1rem;}
.topbar-left{display:flex;flex-direction:column;}
.topbar-right{display:flex;align-items:center;gap:0.8rem;}
.admin-badge{background:rgba(255,255,255,0.1);border:1px solid var(--border);border-radius:999px;padding:0.3rem 0.8rem;font-size:0.72rem;color:var(--gold);}
.topbar-link{color:var(--gold);font-size:0.78rem;text-decoration:none;white-space:nowrap;}
.topbar-link:hover{text-decoration:underline;}
.topbar-logout{display:flex;align-items:center;gap:0.4rem;background:transparent;border:1px solid rgba(255,80,80,0.35);color:rgba(255,100,100,0.85);padding:0.4rem 0.9rem;border-radius:8px;cursor:pointer;font-family:var(--font);font-size:0.75rem;transition:all 0.2s;white-space:nowrap;}
.topbar-logout:hover{background:rgba(255,80,80,0.12);border-color:rgba(255,80,80,0.6);}
.topbar-logout span{display:inline;}
.admin-content{padding:2rem;flex:1;}
/* Panels */
.admin-panel{display:none;}
.admin-panel.active{display:block;}
/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-bottom:2rem;}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1.5rem;position:relative;overflow:hidden;}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-dark));}
.stat-card-icon{ display:flex; align-items:center; color:var(--gold); margin-bottom:0.8rem; }
.stat-card-icon svg { width:28px; height:28px; }
.stat-card-value{font-family:var(--font-h);font-size:2rem;color:var(--gold);font-weight:700;}
.stat-card-label{font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);margin-top:0.3rem;}
/* Tables */
.table-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-header{padding:1.2rem 1.5rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;min-width:0;}
.table-header h3{font-family:var(--font-h);font-size:1rem;color:var(--gold);}
.admin-table{width:100%;border-collapse:collapse;min-width:600px;}
.admin-table th{background:rgba(255,255,255,0.06);padding:0.75rem 1rem;text-align:left;font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap;}
.admin-table td{padding:0.85rem 1rem;font-size:0.82rem;border-bottom:1px solid rgba(255,255,255,0.04);vertical-align:middle;white-space:nowrap;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tr:hover td{background:rgba(255,255,255,0.02);}
.status-badge{padding:0.25rem 0.7rem;border-radius:999px;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;}
.status-confirmed{background:rgba(50,200,100,0.15);color:#50c864;border:1px solid rgba(50,200,100,0.3);}
.status-pending{background:rgba(255,255,255,0.15);color:var(--gold);border:1px solid rgba(255,255,255,0.3);}
.status-cancelled{background:rgba(255,80,80,0.15);color:#ff5050;border:1px solid rgba(255,80,80,0.3);}
/* Forms */
.admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.admin-form-grid .full{grid-column:1/-1;}
.form-group{display:flex;flex-direction:column;gap:0.4rem;}
.form-group label{font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);}
.form-group input,.form-group select,.form-group textarea{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px;padding:0.7rem 0.9rem;color:#fff;font-family:var(--font);font-size:0.83rem;outline:none;transition:border-color 0.2s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--gold);}
.form-group select option{background:#111;}
/* Buttons */
.btn-gold{background:#fff;color:#000;border:none;padding:0.65rem 1.5rem;border-radius:8px;cursor:pointer;font-family:var(--font);font-size:0.78rem;letter-spacing:0.12em;transition:all 0.2s;}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,255,255,0.3);}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:0.65rem 1.5rem;border-radius:8px;cursor:pointer;font-family:var(--font);font-size:0.78rem;transition:all 0.2s;}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}
.btn-danger{background:transparent;border:1px solid rgba(255,80,80,0.3);color:rgba(255,80,80,0.7);padding:0.4rem 0.8rem;border-radius:6px;cursor:pointer;font-size:0.72rem;transition:all 0.2s;}
.btn-danger:hover{background:rgba(255,80,80,0.1);}
.btn-sm{padding:0.35rem 0.8rem;font-size:0.72rem;}
/* Gallery grid */
.gallery-admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.gallery-admin-item{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:1;}
.gallery-admin-item img{width:100%;height:100%;object-fit:cover;}
.gallery-admin-item .item-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;gap:0.5rem;opacity:0;transition:opacity 0.2s;}
.gallery-admin-item:hover .item-overlay{opacity:1;}
/* Upload area */
.upload-area{border:2px dashed var(--border);border-radius:12px;padding:2rem;text-align:center;cursor:pointer;transition:all 0.2s;}
.upload-area:hover{border-color:var(--gold);background:rgba(255,255,255,0.04);}
.upload-area p{color:var(--text-muted);font-size:0.85rem;margin-top:0.5rem;}
/* Login */
.admin-login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);background-image:radial-gradient(ellipse at 50% 40%, rgba(162,155,254,0.07) 0%, transparent 65%);z-index:9999;}
.login-card{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:2.5rem;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.login-logo{text-align:center;margin-bottom:1.5rem;}
.login-logo-img{width:72px;height:72px;object-fit:cover;object-position:center;border-radius:50%;}
.login-logo img{height:52px;filter:brightness(1.1);}
.login-card h2{font-family:var(--font-h);font-size:1.6rem;color:var(--gold);margin-bottom:0.4rem;text-align:center;}
.login-card p{font-size:0.8rem;color:var(--text-muted);text-align:center;margin-bottom:2rem;}
.login-form{display:flex;flex-direction:column;gap:1rem;}
.pw-wrap{position:relative;display:flex;align-items:center;}
.pw-wrap input{flex:1;padding-right:2.8rem;}
.pw-toggle{position:absolute;right:0.75rem;background:none;border:none;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;padding:0.3rem;transition:color 0.2s;}
.pw-toggle:hover{color:var(--gold);}
/* Filters */
.filter-bar{display:flex;gap:0.8rem;margin-bottom:1.5rem;flex-wrap:wrap;align-items:center;}
.filter-bar input,.filter-bar select{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px;padding:0.55rem 0.9rem;color:#fff;font-family:var(--font);font-size:0.8rem;outline:none;}
.filter-bar input:focus,.filter-bar select:focus{border-color:var(--gold);}
/* Section card */
.section-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1.5rem;margin-bottom:1.5rem;}
.section-card h3{font-family:var(--font-h);font-size:1rem;color:var(--gold);margin-bottom:1.2rem;}

/* ================================================================
   RESPONSIVE DESIGN - CONSOLIDATED
   ================================================================ */

/* Tablet and Small Desktop (≤ 900px) */
@media(max-width:900px){
  .admin-sidebar{width:60px;}
  .sidebar-logo{padding:0.85rem;justify-content:center;min-height:60px;}
  .sidebar-logo-icon{width:32px;height:32px;}
  .sidebar-logo-icon img{width:32px;height:32px;}
  .sidebar-logo-text,.sidebar-footer,.nav-label{display:none;}
  .nav-item{padding:0.75rem 0;justify-content:center;}
  .admin-main{margin-left:60px;min-width:0;width:calc(100% - 60px);}
  .gallery-admin-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .admin-content{padding:1.2rem;}
}

/* Mobile (≤ 768px) */
@media(max-width:768px){
  .admin-sidebar{width:48px;}
  .sidebar-logo{padding:0.65rem;min-height:50px;}
  .sidebar-logo-icon{width:26px;height:26px;}
  .sidebar-logo-icon img{width:26px;height:26px;}
  .nav-item{padding:0.7rem 0;}
  .admin-main{margin-left:48px;min-width:0;width:calc(100% - 48px);}
  .admin-content{padding:0.85rem 0.7rem;overflow-x:hidden;}
  .admin-topbar{padding:0.75rem 0.85rem;}
  .admin-badge{display:none;}
  .topbar-link{display:none;}
  .topbar-logout span{display:none;}
  .topbar-logout{padding:0.45rem 0.55rem;}

  /* Stats — 2 col, full width, no overflow */
  .stats-grid{grid-template-columns:1fr 1fr;gap:0.6rem;margin-bottom:1rem;width:100%;}
  .stat-card{padding:0.9rem 0.75rem;min-width:0;}
  .stat-card-value{font-size:1.4rem;}
  .stat-card-label{font-size:0.65rem;letter-spacing:0.08em;}
  .stat-card-icon svg{width:22px;height:22px;}

  /* Tables */
  .table-wrap{border-radius:10px;margin-bottom:1rem;}
  .table-header{padding:0.85rem 1rem;}
  .admin-table{min-width:520px;}
  .admin-table th,.admin-table td{padding:0.55rem 0.65rem;font-size:0.72rem;}
  .admin-table th{font-size:0.65rem;}
  .status-badge{padding:0.2rem 0.5rem;font-size:0.62rem;}

  /* Filter bar */
  .filter-bar{flex-direction:column;gap:0.6rem;}
  .filter-bar input,.filter-bar select,.filter-bar .date-input-wrapper{width:100%;}
  .filter-bar .btn-gold{width:100%;}

  /* Forms */
  .admin-form-grid{grid-template-columns:1fr !important;}
  .form-group.full{grid-column:1 !important;}
  .section-card{padding:1rem 0.85rem;}

  /* Gallery */
  .gallery-admin-grid{grid-template-columns:repeat(2,1fr);}

  /* Services */
  .service-item{flex-direction:column;align-items:stretch;}
  .service-item-actions{justify-content:flex-end;}
}

/* Small phones (≤ 480px) */
@media(max-width:480px){
  .admin-sidebar{width:42px;}
  .admin-main{margin-left:42px;width:calc(100% - 42px);}
  .nav-item{padding:0.7rem 0;}

  .stats-grid{grid-template-columns:1fr 1fr;gap:0.5rem;}
  .stat-card{padding:0.75rem 0.6rem;}
  .stat-card-value{font-size:1.2rem;}
  .stat-card-label{font-size:0.6rem;}

  .admin-table{min-width:460px;}
  .admin-table th,.admin-table td{padding:0.45rem 0.5rem;font-size:0.68rem;}

  .section-card{padding:0.85rem 0.7rem;}
  #panel-slots .admin-table{min-width:400px;}
  .login-card{padding:2rem 1.5rem;margin:1rem;}
}


/* ================================================================
   SERVICES MANAGEMENT
   ================================================================ */
.services-drag-container {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.service-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: move;
  transition: all 0.2s ease;
}

.service-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--gold);
}

.service-item.dragging {
  opacity: 0.5;
}

.service-drag-handle {
  color: var(--text-muted);
  cursor: grab;
  padding: 0.5rem;
}

.service-drag-handle:active {
  cursor: grabbing;
}

.service-item-content {
  flex: 1;
  min-width: 0;
}

.service-item-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.service-order-badge {
  background: var(--gold);
  color: #000;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.service-name {
  color: #fff;
  font-weight: 500;
  font-size: 0.95rem;
}

.service-name-mr {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.service-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.service-tag {
  background: rgba(212,175,55,0.1);
  color: var(--gold);
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  border: 1px solid rgba(212,175,55,0.2);
}

.service-item-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Service Edit Modal */
.service-edit-modal {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.service-edit-modal > div {
  animation: slideUp 0.3s ease;
}

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

/* Touch-Friendly Improvements */
@media (hover: none) and (pointer: coarse) {
  .nav-item{min-height:48px;}
  .admin-table td{padding:0.75rem 0.5rem;}
  .filter-bar input,.filter-bar select,.filter-bar button,.date-input-wrapper input{min-height:44px;}
}
select option {
  background: #1a1a1a !important;
  color: #fff !important;
  padding: 8px !important;
}

select option:hover,
select option:focus,
select option:checked {
  background: rgba(212,175,55,0.2) !important;
  color: #fff !important;
}

/* Style for modal selects specifically */
.service-edit-modal select {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(212,175,55,0.3) !important;
}

.service-edit-modal select option {
  background: #2a2a2a !important;
  color: #fff !important;
  padding: 10px !important;
  font-weight: 500 !important;
}

.service-edit-modal select option:checked {
  background: rgba(212,175,55,0.3) !important;
  color: #fff !important;
}

/* Date Input Wrapper - Makes entire date input clickable */
.date-input-wrapper {
  position: relative;
  cursor: pointer;
}

.date-input-wrapper input[type="date"] {
  cursor: pointer;
  width: 100%;
}

.date-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  color: transparent;
  background: transparent;
  cursor: pointer;
}

/* Ensure date input shows calendar on any click */
.date-input-wrapper:hover input[type="date"] {
  border-color: var(--gold);
}