/* ── eHajiri License Admin — Shared UI Styles ──────────────────────────────
   Included by index.html AND dealer.html.
   Any change here automatically applies to ALL login roles.
   ─────────────────────────────────────────────────────────────────────────── */

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

:root{
  --blue:#1a56db;--blue-dark:#1e40af;--blue-light:#eff6ff;
  --green:#059669;--red:#dc2626;--amber:#d97706;
  --gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;
  --gray-400:#9ca3af;--gray-600:#4b5563;--gray-800:#1f2937;
  --border:1px solid var(--gray-200);--radius:10px;--shadow:0 1px 4px rgba(0,0,0,.08);
}

body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  background:var(--gray-50);color:var(--gray-800);font-size:15px;min-height:100vh;min-height:100dvh;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ── Layout ── */
.layout{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.main{flex:1;display:flex;flex-direction:column;background:#f0f4f8}
.content{padding:24px 28px;flex:1}
.page-section{display:none}.page-section.active{display:block}

/* ── Top Navigation ── */
.top-nav{background:white;position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:0;padding:0 24px;height:56px;
  box-shadow:0 1px 0 var(--gray-200),0 2px 8px rgba(0,0,0,.06);
  border-bottom:1px solid var(--gray-200)}
.tn-brand{display:flex;align-items:center;gap:10px;margin-right:28px;
  cursor:pointer;border-radius:8px;padding:4px 8px;margin-left:-8px;text-decoration:none;transition:background .12s}
.tn-brand:hover{background:var(--blue-light)}
.tn-brand-icon{width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,var(--blue),#7e3af2);
  display:flex;align-items:center;justify-content:center;font-size:18px}
.tn-brand-name{font-size:15px;font-weight:800;color:var(--gray-800);letter-spacing:-.2px}
.tn-brand-tag{font-size:10px;color:var(--gray-400);font-weight:600}
.tn-divider{width:1px;height:28px;background:var(--gray-200);margin:0 8px;flex-shrink:0}
.tn-items{display:flex;align-items:center;gap:2px;flex:1}
.tn-item{display:flex;align-items:center;gap:7px;padding:7px 14px;height:56px;
  cursor:pointer;font-size:14px;font-weight:600;color:var(--gray-600);
  border-bottom:3px solid transparent;transition:all .15s;white-space:nowrap;position:relative}
.tn-item:hover{color:var(--blue);background:var(--blue-light)}
.tn-item.active{color:var(--blue);border-bottom-color:var(--blue)}
.tn-item .ti{font-size:15px}
.tn-dropdown{position:relative}
.tn-dd-menu{position:absolute;top:calc(100% + 0px);left:0;min-width:200px;
  background:white;border:1px solid var(--gray-200);border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.13);overflow:hidden;z-index:200;display:none}
.tn-dropdown:hover .tn-dd-menu{display:block}
.tn-dd-item{display:flex;align-items:center;gap:8px;padding:7px 14px;
  font-size:14px;font-weight:500;color:var(--gray-800);cursor:pointer;
  border-bottom:1px solid var(--gray-100);transition:background .1s}
.tn-dd-item:last-child{border-bottom:none}
.tn-dd-item:hover{background:var(--gray-50);color:var(--blue)}
.tn-dd-item .di{font-size:15px}
.tn-dd-label{font-size:10px;font-weight:700;color:var(--gray-400);
  text-transform:uppercase;letter-spacing:.6px;padding:5px 14px 3px}
.tn-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.tn-profile-wrap{position:relative}
.tn-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 10px;
  border-radius:8px;transition:background .12s;border:1px solid transparent}
.tn-user:hover,.tn-profile-wrap.open .tn-user{background:var(--blue-light);border-color:var(--gray-200)}
.tn-avatar{width:32px;height:32px;background:var(--blue);display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:800;color:white;border-radius:8px}
.tn-uname{font-size:14px;font-weight:700;color:var(--gray-800)}
.tn-urole{font-size:10px;color:var(--gray-400)}
.tn-caret{font-size:10px;color:var(--gray-400);margin-left:2px}
.tn-profile-dd{display:none;position:absolute;right:0;top:calc(100% + 8px);
  background:white;border:1px solid var(--gray-200);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.10);min-width:200px;z-index:200;overflow:hidden}
.tn-profile-wrap.open .tn-profile-dd{display:block}
.tn-profile-info{display:flex;align-items:center;gap:10px;padding:14px 14px 12px}
.tn-profile-divider{height:1px;background:var(--gray-100)}
.tn-profile-item{display:flex;align-items:center;gap:8px;padding:11px 14px;
  font-size:14px;font-weight:600;color:var(--gray-800);cursor:pointer;transition:background .12s}
.tn-profile-item:hover{background:var(--blue-light);color:var(--blue)}
.tn-profile-item.danger{color:#dc2626}
.tn-profile-item.danger:hover{background:#fff5f5;color:#b91c1c}
.sub-topbar{background:white;border-bottom:var(--border);padding:12px 28px;
  display:flex;align-items:center;justify-content:space-between}
.topbar-title{font-size:17px;font-weight:700;color:var(--gray-800)}
.topbar-sub{font-size:12px;color:var(--gray-400);margin-top:1px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;
  border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;
  transition:all .15s;font-family:inherit}
.btn-primary{background:var(--blue);color:white}.btn-primary:hover{background:var(--blue-dark)}
.btn-success{background:#f0fdf4;border:1px solid #86efac;color:var(--green)}
.btn-success:hover{background:#dcfce7}
.btn-danger{background:#fff5f5;border:1px solid #fca5a5;color:var(--red)}
.btn-danger:hover{background:#fee2e2}
.btn-outline{background:white;border:1.5px solid var(--gray-200);color:var(--gray-600)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-sm{padding:5px 12px;font-size:12px}

/* ── Forms ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:13px;font-weight:600;color:#111827}
.form-control{padding:9px 12px;border:1.5px solid var(--gray-200);border-radius:8px;
  font-size:14px;outline:none;transition:border-color .12s;width:100%;color:#111827;font-family:inherit}
.form-control:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(26,86,219,.1)}
select.form-control{background:white}
.field-locked{background:#f8f9fa!important;color:#374151!important;cursor:not-allowed!important;border-color:#e5e7eb!important}

/* ── DataGrid ── */
.dg2-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.dgx-wrap{background:#fff;border:1px solid #dedede;border-radius:8px;overflow:hidden}
.dgx-toolbar{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:#f9fafb;border-bottom:1px solid #dedede;gap:10px;flex-wrap:wrap;min-height:46px}
.dgx-info{font-size:13px;color:#6b7280}
.dgx-searchbox{display:flex;align-items:center;background:#fff;border:1px solid #dedede;
  border-radius:6px;padding:0 10px;height:32px;gap:6px;min-width:210px;transition:border-color .15s}
.dgx-searchbox:focus-within{border-color:#1a56db;box-shadow:0 0 0 2px rgba(26,86,219,.1)}
.dgx-search-inp{border:none;outline:none;font-size:14px;width:100%;background:transparent;color:#111827}
.dgx-search-inp::placeholder{color:#9ca3af}
.dgx-scroll{overflow-x:auto}
.dgx-table{width:100%;border-collapse:collapse;font-size:14px;color:#111827}
.dgx-th{background:#efefef;border-bottom:2px solid #dedede;border-right:1px solid #dedede;
  padding:7px 10px;font-size:12px;font-weight:700;color:#374151;
  white-space:nowrap;text-transform:uppercase;letter-spacing:.4px;user-select:none;cursor:pointer;
  position:sticky;top:0;z-index:2}
.dgx-th:last-child{border-right:none}
.dgx-sn-th{width:1%;min-width:0;white-space:nowrap;padding:6px 8px;text-align:center}
.dgx-td{padding:8px 10px;border-bottom:1px solid #dedede;border-right:1px solid #dedede;
  vertical-align:middle;background:#fff;color:#111827;font-size:14px}
.dgx-td:last-child{border-right:none}
.dgx-sn-td{background:#efefef!important;text-align:center;border-right:1px solid #dedede;
  color:#6b7280;font-size:13px;padding:5px 8px!important;white-space:nowrap;width:1%}
.dgx-cb-td{text-align:center;border-right:1px solid #dedede;padding:4px 8px!important;width:1%}
.dgx-row{transition:background .1s;cursor:pointer}
.dgx-row:hover .dgx-td{background:#f5f5f5!important}
.dgx-row:hover .dgx-sn-td{background:#e2e2e2!important}
.dgx-row.dgx-sel .dgx-td{background:#dbeafe!important}
.dgx-row.dgx-sel .dgx-sn-td,.dgx-row.dgx-sel .dgx-cb-td{background:#c7d9f5!important}
.dgx-row.dgx-kb-focus .dgx-td{background:#fef9c3!important}
.dgx-row.dgx-kb-focus .dgx-sn-td,.dgx-row.dgx-kb-focus .dgx-cb-td{background:#fde68a!important}
.dgx-row.dgx-panel-sel .dgx-td{background:#bfdbfe!important}
.dgx-row.dgx-panel-sel .dgx-sn-td,.dgx-row.dgx-panel-sel .dgx-cb-td{background:#93c5fd!important;box-shadow:inset 3px 0 0 #2563eb}
.dgx-footer{display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;background:#f9fafb;border-top:1px solid #dedede;
  flex-wrap:wrap;gap:8px;font-size:13px;color:#6b7280}
.dgx-asc::after{content:' ▲';font-size:9px}
.dgx-desc::after{content:' ▼';font-size:9px}

/* ── Badges ── */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:13px;font-weight:700}
.badge-green{background:#d1fae5;color:var(--green)}
.badge-red{background:#fee2e2;color:var(--red)}
.badge-amber{background:#fef3c7;color:var(--amber)}
.badge-blue{background:var(--blue-light);color:var(--blue)}
.badge-purple{background:#f5f3ff;color:#7c3aed}
.badge-gray{background:var(--gray-100);color:var(--gray-600)}
.vat-incl{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
.vat-excl{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;background:#f0fdf4;color:#166534;border:1px solid #86efac}

/* ── Toast ── */
.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 18px;border-radius:10px;font-size:14px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.14);display:flex;gap:10px;animation:toastIn .2s ease-out}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}}
.toast-success{background:white;border-left:4px solid var(--green);color:var(--gray-800)}
.toast-error{background:white;border-left:4px solid var(--red);color:var(--gray-800)}
.toast-info{background:white;border-left:4px solid var(--blue);color:var(--gray-800)}

/* ── Animations ── */
@keyframes headerShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes sunshineSlide{0%{transform:translateX(-100%)}100%{transform:translateX(100vw)}}
@keyframes bubbleRise{0%{transform:translateY(0) scale(1);opacity:.65}80%{opacity:.2}100%{transform:translateY(-70px) scale(.3);opacity:0}}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:white;border-radius:14px;width:min(1320px,98%);max-height:95vh;
  display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2);overflow:hidden;
  transform:scale(.95);transition:transform .2s}
.modal-overlay.open .modal{transform:scale(1)}
.modal-header{padding:16px 20px;border-bottom:none;
  display:flex;justify-content:space-between;align-items:center;
  border-radius:14px 14px 0 0;position:relative;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,#f0f4ff,#e8f4ff,#e6fffe,#edfff5,#fdf4ff,#fff0f8,#f0f4ff);
  background-size:300% 300%;animation:headerShift 8s ease infinite}
.modal-header::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,transparent 0%,#a5b4fc 15%,#67e8f9 30%,#fde68a 45%,#fbcfe8 60%,#6ee7b7 75%,transparent 100%)}
.modal-header::before{content:'';position:absolute;bottom:0;left:0;width:120px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  animation:sunshineSlide 5s ease-in-out infinite;z-index:1}
.modal-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.modal-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--gray-400);
  width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--gray-100);color:var(--gray-800)}
.modal-body{overflow-y:auto;flex:1;padding:20px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.modal-footer{padding:14px 22px;border-top:var(--border);display:flex;justify-content:flex-end;gap:10px;flex-shrink:0}
.modal-bubble{position:absolute;border-radius:50%;pointer-events:none;bottom:3px;z-index:0;
  background:rgba(255,255,255,.55);border:1.5px solid rgba(255,255,255,.8);animation:bubbleRise linear infinite}

/* ── Panel headers (slide-in panels) ── */
.panel-hd{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid #e5e7eb;flex-shrink:0;
  background:linear-gradient(135deg,#f0f4ff,#e8f4ff,#e6fffe,#edfff5,#fdf4ff,#fff0f8,#f0f4ff);
  background-size:300% 300%;animation:headerShift 8s ease infinite;
  position:relative;overflow:hidden}
.panel-hd::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,transparent 0%,#a5b4fc 15%,#67e8f9 30%,#fde68a 45%,#fbcfe8 60%,#6ee7b7 75%,transparent 100%)}
.panel-hd::before{content:'';position:absolute;bottom:0;left:0;width:120px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  animation:sunshineSlide 5s ease-in-out infinite;z-index:1}
.panel-hd-title{font-size:14px;font-weight:700;color:#111827}
.panel-close{background:none;border:none;cursor:pointer;color:#6b7280;
  font-size:18px;line-height:1;padding:2px 8px;border-radius:4px;transition:background .1s}
.panel-close:hover{background:var(--gray-100);color:var(--gray-800)}
.panel-body{flex:1;overflow-y:auto;padding:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* ── Slide panel layout ── */
.slide-panel{position:fixed;top:56px;height:calc(100vh - 56px);height:calc(100dvh - 56px);background:white;
  border-left:1px solid #e5e7eb;box-shadow:-6px 0 24px rgba(0,0,0,.12);
  z-index:45;transition:right .25s ease;display:flex;flex-direction:column;overflow:hidden}

/* ── Panel content sections ── */
.lic-section{padding:14px 18px;border-bottom:1px solid #f3f4f6}
.lic-section-title{font-size:10px;font-weight:700;color:#9ca3af;letter-spacing:.6px;
  text-transform:uppercase;margin-bottom:10px}

/* ── Key display ── */
.key-box{background:#f8fafc;border:2px dashed var(--blue);border-radius:10px;
  padding:14px;position:relative;display:flex;align-items:flex-start;gap:10px}
.key-text{font-family:'Courier New',monospace;font-size:11.5px;word-break:break-all;
  color:var(--blue-dark);font-weight:700;line-height:1.6;flex:1}

/* ── Product search dropdown ── */
.om-float-prod{position:fixed;background:#fff;border:1px solid #d1d5db;border-radius:6px;
  z-index:99999;max-height:180px;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.om-prod-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f3f4f6;font-size:12px}
.om-prod-item:hover{background:var(--blue-light)}
.om-prod-item:last-child{border-bottom:none}

/* ── Panel headers with animation (specific class names used in portals) ── */
.order-panel-hd,.dp-panel-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid #e5e7eb;flex-shrink:0;
  background:linear-gradient(135deg,#f0f4ff,#e8f4ff,#e6fffe,#edfff5,#fdf4ff,#fff0f8,#f0f4ff);
  background-size:300% 300%;animation:headerShift 8s ease infinite;
  position:relative;overflow:hidden}
.order-panel-hd::after,.dp-panel-hd::after{
  content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,transparent 0%,#a5b4fc 15%,#67e8f9 30%,#fde68a 45%,#fbcfe8 60%,#6ee7b7 75%,transparent 100%)}
.order-panel-hd::before,.dp-panel-hd::before{
  content:'';position:absolute;bottom:0;left:0;width:120px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  animation:sunshineSlide 5s ease-in-out infinite;z-index:1}
.order-panel-title{font-size:14px;font-weight:700;color:#111827}
.order-panel-close{background:none;border:none;cursor:pointer;color:#6b7280;
  font-size:18px;line-height:1;padding:2px 8px;border-radius:4px}
.order-panel-close:hover{background:var(--gray-100);color:var(--gray-800)}
.dp-panel-body,.order-panel-body{flex:1;overflow-y:auto;padding:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.op-row{padding:14px 18px;border-bottom:1px solid #f3f4f6}
.op-label{font-size:10px;font-weight:700;color:#9ca3af;letter-spacing:.6px;text-transform:uppercase;margin-bottom:5px}
.op-value{font-size:15px;font-weight:700;color:#111827}

/* ── Order modal items form inputs ── */
#om-items-body input,#om-items-body select{
  padding:4px 6px;border:1.5px solid var(--gray-200);border-radius:6px;
  font-size:12px;outline:none;font-family:inherit;color:var(--gray-800);width:100%}
#om-items-body input:focus,#om-items-body select:focus{border-color:var(--blue)}

/* ── Misc ── */
.bs-date{font-size:11px;color:#1a56db;font-weight:600;margin-top:3px}
.copy-btn{background:#eff6ff;border:1px solid #bfdbfe;border-radius:4px;cursor:pointer;font-size:10px;color:#1a56db;padding:2px 7px;font-family:inherit;font-weight:600;white-space:nowrap}
.copy-btn:hover{background:#dbeafe}
.td-bold{font-weight:700}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
   ═══════════════════════════════════════════════════════════════ */

/* ── Mobile hamburger button (hidden on desktop) ── */
.mob-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:6px 8px;border-radius:8px;font-size:22px;color:var(--gray-600);line-height:1;margin-left:auto}
.mob-menu-btn:hover{background:var(--gray-100)}

/* ── Mobile nav drawer ── */
.mob-drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;opacity:0;transition:opacity .2s}
.mob-drawer-overlay.open{opacity:1}
.mob-drawer{position:fixed;top:0;left:-280px;width:min(280px,82vw);height:100vh;height:100dvh;background:#fff;z-index:501;transition:left .25s ease;display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,0,0,.18)}
.mob-drawer.open{left:0}
.mob-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--gray-200);background:var(--blue)}
.mob-drawer-brand{font-size:15px;font-weight:800;color:#fff}
.mob-drawer-close{background:rgba(255,255,255,.2);border:none;cursor:pointer;color:#fff;font-size:18px;padding:2px 8px;border-radius:6px}
.mob-drawer-body{flex:1;overflow-y:auto;padding:8px 0;-webkit-overflow-scrolling:touch}
.mob-drawer-item{display:flex;align-items:center;gap:12px;padding:12px 20px;font-size:14px;font-weight:600;color:var(--gray-700);cursor:pointer;border-bottom:1px solid var(--gray-100);transition:background .1s}
.mob-drawer-item:hover,.mob-drawer-item.active{background:var(--blue-light);color:var(--blue)}
.mob-drawer-item .di{font-size:18px}
.mob-drawer-section{font-size:10px;font-weight:700;color:var(--gray-400);letter-spacing:.8px;text-transform:uppercase;padding:12px 20px 4px}
.mob-drawer-search{padding:12px 16px;border-bottom:1px solid var(--gray-100)}
.mob-drawer-search input{width:100%;padding:9px 12px;border:1.5px solid var(--gray-200);border-radius:8px;font-size:13px;outline:none;font-family:inherit}
.mob-drawer-search input:focus{border-color:var(--blue)}

/* ── Tablet (≤ 1024px) ── */
@media(max-width:1024px){
  .tn-items{gap:0}
  .tn-item{padding:7px 10px;font-size:12px}
  .gcs-box{width:160px}
  .gcs-box:focus-within{width:200px}
  .content{padding:18px 20px}
  .sub-topbar-row{padding:10px 20px}
  .stats{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .lic-panel{width:min(680px,88vw)}
  .slide-panel{width:min(480px,88vw)}
}

/* ── Mobile (≤ 768px) ── */
@media(max-width:768px){
  /* Topnav */
  .tn-items{display:none}
  .tn-divider{display:none}
  .gcs-wrap{display:none}
  .mob-menu-btn{display:flex;align-items:center;justify-content:center}
  .mob-drawer-overlay{display:block;pointer-events:none}
  .mob-drawer-overlay.open{pointer-events:all}
  .tn-uname,.tn-urole,.tn-caret{display:none}

  /* Content */
  .content{padding:12px 14px}
  .sub-topbar-row{padding:10px 14px;flex-wrap:wrap;gap:8px}
  .sub-topbar-row > *{flex-shrink:0}

  /* Stats */
  .stats{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
  .stat-card{padding:14px 16px}
  .stat-num{font-size:22px}

  /* Page header */
  .dg2-page-header{flex-direction:column;align-items:stretch;gap:8px}
  .dg2-page-header .btn{width:100%;justify-content:center}

  /* Form grid → single column */
  .form-grid{grid-template-columns:1fr}
  .form-control.full{grid-column:1}

  /* Toolbar wrapping */
  .dgx-toolbar{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px}
  .dgx-searchbox{min-width:unset;width:100%}
  .dgx-info{font-size:11px}
  .dgx-footer{flex-direction:column;align-items:center;gap:6px;padding:8px 12px}

  /* Slide panels → full screen */
  .lic-panel{width:100vw;top:56px;height:calc(100vh - 56px);height:calc(100dvh - 56px)}
  .slide-panel{width:100vw}
  .order-panel{width:100vw;top:0;height:100vh;height:100dvh}
  #prod-panel{width:100vw}

  /* Modal */
  .modal-overlay{padding:0;align-items:flex-end}
  .modal{width:100%;max-height:92vh;border-radius:16px 16px 0 0}
  .modal-body{padding:14px}
  .modal-footer{padding:12px 14px;gap:8px}
  .modal-footer .btn{flex:1;justify-content:center}

  /* Card */
  .card-body{padding:14px}
  .card-header{padding:12px 14px;font-size:13px;flex-wrap:wrap;gap:6px}
  .card-header .btn{font-size:11px;padding:5px 10px}

  /* Sub-topbar tabs */
  #topbar-tabs{padding:0 14px;gap:4px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  #topbar-tabs::-webkit-scrollbar{height:3px}
  .tab-btn,.adtab-btn,.ur-tab-btn{font-size:11px;padding:6px 10px;white-space:nowrap}

  /* Notification panel */
  .notif-panel{width:calc(100vw - 32px);right:-8px}

  /* Order panel inner rows */
  .op-pay-area{padding:12px 14px}
  .op-row{padding:10px 14px}

  /* Btn adjustments */
  .btn{padding:8px 14px;font-size:12px}
  .btn-sm{padding:5px 10px;font-size:11px}

  /* Drawer footer safe area */
  .mob-drawer{padding-bottom:env(safe-area-inset-bottom,0px)}
}

/* ── Mid-size phones (≤ 480px) ── */
@media(max-width:480px){
  /* Touch-friendly minimum hit areas */
  .btn{min-height:40px}
  .btn-sm{min-height:36px;padding:6px 12px;font-size:11px}
  .mob-drawer-item{min-height:44px}

  /* Toast: bottom-center is more reachable on phones */
  .toast-container{top:auto;bottom:16px;right:12px;left:12px;align-items:center}

  /* iOS safe-area insets (notch + home bar) */
  .top-nav{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .modal-footer{padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
  .content{padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}

  /* Prevent modal from being cut off under home bar */
  .modal{max-height:calc(100dvh - env(safe-area-inset-bottom,0px))}
}

/* ── Small mobile (≤ 400px) ── */
@media(max-width:400px){
  .stats{grid-template-columns:1fr}
  .tn-brand-name{font-size:13px}
  .tn-brand-tag{display:none}
  .content{padding:10px 10px}
  .modal-title{font-size:14px}
  .dgx-footer{font-size:11px}
}