/* ADMIN PORTAL - reference design */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');
#page-admin{--a-blue:#1a56db;--a-blue-dark:#1344b8;--a-blue-light:#e8f0fe;--a-green:#059669;--a-green-light:#d1fae5;--a-red:#ef4444;--a-red-light:#fee2e2;--a-amber:#f59e0b;--a-amber-light:#fef3c7;--a-gray-50:#f8fafc;--a-gray-100:#f1f5f9;--a-gray-200:#e2e8f0;--a-gray-300:#cbd5e1;--a-gray-400:#94a3b8;--a-gray-500:#64748b;--a-gray-600:#475569;--a-gray-700:#334155;--a-gray-800:#1e293b;--a-gray-900:#0f172a;}
#page-admin{font-family:'DM Sans',sans-serif;background:var(--a-gray-50);padding:0!important;}

body.dark-mode #page-admin{--a-blue:#3b82f6;--a-blue-dark:#2563eb;--a-blue-light:#1e3a8a44;--a-green:#34d399;--a-green-light:#064e3b;--a-red:#f87171;--a-red-light:#7f1d1d;--a-amber:#fbbf24;--a-amber-light:#78350f;--a-gray-50:#0b1220;--a-gray-100:#111827;--a-gray-200:#1f2937;--a-gray-300:#334155;--a-gray-400:#94a3b8;--a-gray-500:#cbd5e1;--a-gray-600:#d1d5db;--a-gray-700:#e5e7eb;--a-gray-800:#f3f4f6;--a-gray-900:#020617;}
body.dark-mode #page-admin{background:var(--a-gray-50);color:var(--a-gray-700)}
body.dark-mode #page-admin .table-wrap,
body.dark-mode #page-admin .form-panel,
body.dark-mode #page-admin .stat-card,
body.dark-mode #page-admin .modal-box,
body.dark-mode #page-admin .btn-outline,
body.dark-mode #page-admin .tbl-filter,
body.dark-mode #page-admin .tbl-search,
body.dark-mode #page-admin .form-control{background:var(--a-gray-100);color:var(--a-gray-700);border-color:var(--a-gray-300)}
body.dark-mode #page-admin table thead{background:var(--a-gray-100)}
body.dark-mode #page-admin tr:hover td{background:#0f172a}
body.dark-mode #page-admin .upload-zone{background:var(--a-gray-100);border-color:var(--a-gray-300)}
.admin-layout{display:flex;}
.sidebar{width:240px;background:var(--a-gray-900);position:sticky;top:88px;height:calc(100vh - 88px - 60px);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;}
.sidebar-logo{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08);}
.sb-logo{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;color:#fff;}
.sb-tag{font-size:10px;font-weight:700;background:rgba(26,86,219,.3);color:#93bbff;padding:2px 8px;border-radius:6px;margin-top:4px;display:inline-block;letter-spacing:.5px;text-transform:uppercase;}
.sb-nav{flex:1;padding:16px 12px;overflow-y:auto;}
.sb-section{font-size:10px;font-weight:700;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.8px;padding:0 8px;margin:16px 0 6px;}
.sb-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;cursor:pointer;transition:.15s;color:rgba(255,255,255,.6);font-size:14px;font-weight:500;border:none;background:none;width:100%;text-align:left;font-family:'DM Sans',sans-serif;-webkit-tap-highlight-color:transparent;}
.sb-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.sb-item.active{background:rgba(26,86,219,.25);color:#93bbff;}
.sb-footer{padding:16px 12px;border-top:1px solid rgba(255,255,255,.08);}
.sb-user{padding:10px 12px;border-radius:9px;background:rgba(255,255,255,.05);margin-bottom:8px;}
.sb-user-name{font-size:13px;font-weight:600;color:#fff;}
.sb-user-role{font-size:11px;color:rgba(255,255,255,.4);}
.btn-logout-sb{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.5);font:600 12px 'DM Sans',sans-serif;cursor:pointer;transition:.15s;}
.btn-logout-sb:hover{background:rgba(239,68,68,.15);border-color:var(--a-red);color:var(--a-red);}
.main-content{padding:28px;}
.page-admin{display:none;animation:admFadeIn .22s ease;}
.page-admin.active{display:block;}
@keyframes admFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.status-bar{background:var(--a-gray-900);color:rgba(255,255,255,.6);font-size:12px;padding:8px 20px;display:flex;align-items:center;gap:8px;}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--a-green);animation:sbPulse 2s infinite;flex-shrink:0;}
@keyframes sbPulse{0%,100%{opacity:1}50%{opacity:.35}}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:10px;}
.topbar-title{font-family:'Syne',sans-serif;font-size:22px;font-weight:700;}
.topbar-actions{display:flex;gap:10px;flex-wrap:wrap;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:28px;}
.stat-card{background:#fff;border-radius:12px;padding:20px;border:1.5px solid var(--a-gray-200);display:flex;align-items:center;gap:14px;}
.stat-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.stat-icon.blue{background:var(--a-blue-light);}
.stat-icon.green{background:var(--a-green-light);}
.stat-icon.amber{background:var(--a-amber-light);}
.stat-icon.red{background:var(--a-red-light);}
.stat-val{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;}
.stat-lbl{font-size:12px;color:var(--a-gray-400);font-weight:500;margin-top:1px;}
.btn{padding:9px 18px;border-radius:9px;border:none;font:600 13px 'DM Sans',sans-serif;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:6px;-webkit-tap-highlight-color:transparent;}
.btn-primary{background:var(--a-blue);color:#fff;}.btn-primary:hover{background:var(--a-blue-dark);}
.btn-success{background:var(--a-green);color:#fff;}.btn-success:hover{background:#047857;}
.btn-danger{background:var(--a-red);color:#fff;}.btn-danger:hover{background:#dc2626;}
.btn-outline{background:#fff;color:var(--a-gray-700);border:1.5px solid var(--a-gray-200);}.btn-outline:hover{border-color:var(--a-blue);color:var(--a-blue);}
.btn-sm{padding:6px 12px;font-size:12px;}
.table-wrap{background:#fff;border-radius:12px;border:1.5px solid var(--a-gray-200);overflow:hidden;margin-bottom:16px;}
.table-topbar{padding:16px 20px;border-bottom:1px solid var(--a-gray-100);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.tbl-search{flex:1;min-width:180px;padding:8px 14px;border:1.5px solid var(--a-gray-200);border-radius:8px;font:400 14px 'DM Sans',sans-serif;outline:none;transition:.18s;}
.tbl-search:focus{border-color:var(--a-blue);}
.tbl-filter{padding:8px 14px;border:1.5px solid var(--a-gray-200);border-radius:8px;font:400 14px 'DM Sans',sans-serif;outline:none;background:#fff;cursor:pointer;}
.tbl-count{font-size:13px;color:var(--a-gray-400);white-space:nowrap;}
.table-scroll{overflow-x:auto;}
#page-admin table{width:100%;border-collapse:collapse;font-size:13px;}
#page-admin thead{background:var(--a-gray-50);}
#page-admin th{padding:11px 14px;text-align:left;font-size:11px;font-weight:700;color:var(--a-gray-400);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--a-gray-200);white-space:nowrap;}
#page-admin td{padding:11px 14px;border-bottom:1px solid var(--a-gray-100);vertical-align:middle;}
#page-admin tr:last-child td{border-bottom:none;}
#page-admin tr:hover td{background:var(--a-gray-50);}
.td-code{font:600 12px 'DM Sans',sans-serif;color:var(--a-blue);}
.td-name{font-weight:500;max-width:220px;}
.td-cat{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11px;font-weight:600;background:var(--a-blue-light);color:var(--a-blue);}
.td-price{font-family:'Syne',sans-serif;font-weight:700;}
.vis-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:12px;font-size:11px;font-weight:600;cursor:pointer;}
.vis-badge.on{background:var(--a-green-light);color:var(--a-green);}
.vis-badge.off{background:var(--a-gray-100);color:var(--a-gray-400);}
.td-actions{display:flex;gap:5px;}
.form-panel{background:#fff;border-radius:12px;border:1.5px solid var(--a-gray-200);padding:24px;margin-bottom:20px;}
.form-panel-title{font-family:'Syne',sans-serif;font-size:17px;font-weight:700;margin-bottom:20px;}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group.full{grid-column:1/-1;}
.form-label2{font-size:12px;font-weight:700;color:var(--a-gray-600);text-transform:uppercase;letter-spacing:.4px;}
.form-control{padding:10px 14px;border:1.5px solid var(--a-gray-200);border-radius:9px;font:400 14px 'DM Sans',sans-serif;outline:none;transition:.18s;background:#fff;width:100%;}
.form-control:focus{border-color:var(--a-blue);box-shadow:0 0 0 3px rgba(26,86,219,.08);}
.img-upload-area{border:2px dashed var(--a-gray-300);border-radius:10px;padding:20px;text-align:center;cursor:pointer;transition:.18s;position:relative;}
.img-upload-area:hover{border-color:var(--a-blue);background:var(--a-blue-light);}
.img-preview{width:80px;height:80px;border-radius:10px;object-fit:cover;margin:0 auto 8px;display:none;}
.img-preview.show{display:block;}
.img-upload-txt{font-size:13px;color:var(--a-gray-400);}
.img-upload-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.form-row-btns{display:flex;gap:10px;margin-top:20px;justify-content:flex-end;}
.notice{border-radius:9px;padding:12px 16px;font-size:13px;margin-bottom:16px;display:none;align-items:center;gap:10px;}
.notice.success{background:var(--a-green-light);color:var(--a-green);border:1px solid rgba(5,150,105,.25);}
.notice.error{background:var(--a-red-light);color:var(--a-red);border:1px solid rgba(239,68,68,.25);}
.notice.show{display:flex;}
.upload-zone{border:2px dashed var(--a-gray-300);border-radius:12px;padding:40px;text-align:center;cursor:pointer;transition:.18s;position:relative;background:var(--a-gray-50);}
.upload-zone:hover,.upload-zone.drag{border-color:var(--a-blue);background:var(--a-blue-light);}
.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-zone-icon{font-size:40px;margin-bottom:12px;}
.upload-zone-txt{font-size:15px;font-weight:600;margin-bottom:4px;}
.upload-zone-sub{font-size:13px;color:var(--a-gray-400);}
.bulk-preview{margin-top:20px;display:none;}
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:2000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);}
.overlay.show{display:flex;}
.modal-box{background:#fff;border-radius:16px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.18);}
.modal-box-hdr{padding:18px 22px 14px;border-bottom:1px solid var(--a-gray-100);display:flex;align-items:center;justify-content:space-between;}
.modal-box-title{font-family:'Syne',sans-serif;font-size:17px;font-weight:700;}
.modal-x{width:30px;height:30px;border-radius:50%;border:none;background:var(--a-gray-100);cursor:pointer;font-size:14px;}
.modal-box-body{padding:22px;}
.del-confirm{background:var(--a-red-light);border:1px solid rgba(239,68,68,.3);border-radius:10px;padding:16px;margin-bottom:16px;font-size:14px;}
.del-confirm-name{font-weight:700;margin-top:4px;}
.toast-admin{position:fixed;bottom:calc(60px + 14px);right:20px;background:var(--a-gray-900);color:#fff;padding:12px 18px;border-radius:10px;font-size:13px;font-weight:500;z-index:3000;transform:translateY(14px);opacity:0;transition:.25s;pointer-events:none;font-family:'DM Sans',sans-serif;}
.toast-admin.show{transform:translateY(0);opacity:1;}
@media(max-width:768px){
  .admin-layout{flex-direction:column;}
  .sidebar{width:100%;height:auto;position:static;display:block;overflow:visible;}
  .sidebar-logo{padding:12px 16px;}
  .sb-nav{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:8px 10px;}
  .sb-nav::-webkit-scrollbar{height:6px}
  .sb-section{display:none;}
  .sb-item{padding:8px 11px;font-size:12px;white-space:nowrap;flex:0 0 auto;}
  .sb-footer{display:none;}
  .status-bar{padding:8px 12px;font-size:11px;}
  .main-content{padding:14px;}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .form-grid{grid-template-columns:1fr;}
  div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;display:block!important;}
  div[style*="grid-template-columns:1fr 1fr"] .table-wrap{margin-bottom:14px;}
}


/* JOBER BADGE */
.acc-badge.jober{background:#f3e8ff;color:#7c3aed}
.ptag.jober{background:#f3e8ff;color:#7c3aed}
/* JOBER PRICE IN MODAL */
.mpc.job{background:#f3e8ff;border:1px solid #ddd6fe}
.mpc.job .ml{color:#7c3aed}
.active-price{box-shadow:0 0 0 2px #1a73e8;transform:scale(1.03)}
.mpc.job.active-price{box-shadow:0 0 0 2px #7c3aed}
/* TYPE GRID 3 COLUMNS */
.utype-grid{grid-template-columns:1fr 1fr 1fr}
@media(max-width:380px){.utype-grid{grid-template-columns:1fr 1fr}}
/* PROFILE FORM INPUTS */
#s-profile-form .l-input,#s-jober-request .l-input{text-align:left;letter-spacing:0}
/* ACC BADGE */
.acc-badge.jober{background:#f3e8ff;color:#7c3aed}