@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   RADWAN SaaS — Universal Responsive CSS
   Covers: Mobile | Tablet | Laptop | Desktop | Smart TV
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. SMART TV (≥1200px)
   ───────────────────────────────────────────── */
@media(min-width:1200px){
  body{font-size:16px}
  table th,table td{font-size:14px;padding:12px 16px}
}

/* ─────────────────────────────────────────────
   2. LARGE DESKTOP (≥1400px)
   ───────────────────────────────────────────── */
@media(min-width:1400px){
  .stats-grid,.stats,.stat-grid{grid-template-columns:repeat(4,1fr)!important}
}

/* ─────────────────────────────────────────────
   3. STANDARD DESKTOP (1025–1399px)
   ───────────────────────────────────────────── */
@media(min-width:1025px) and (max-width:1399px){
  .stats-grid,.stats,.stat-grid{grid-template-columns:repeat(3,1fr)!important}
}

/* ─────────────────────────────────────────────
   4. TABLET (769px–1024px)
   ───────────────────────────────────────────── */
@media(min-width:769px) and (max-width:1024px){
  /* Stats: 3 columns */
  .stats-grid,.stats,.stat-grid{grid-template-columns:repeat(3,1fr)!important;gap:10px!important}
  /* Cards: 2 columns */
  .card-grid,.info-card-grid{grid-template-columns:repeat(2,1fr)!important}
  /* Tables: horizontal scroll */
  .tbl-wrap,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Modals: narrower */
  .modal{max-width:90vw!important}
  .modal-wide{max-width:90vw!important}
}

/* ─────────────────────────────────────────────
   5. MOBILE (≤768px)
   ───────────────────────────────────────────── */
@media(max-width:768px){

  /* ── Hide desktop nav, show hamburger ── */
  .site-nav,#siteHeader .site-nav,.nav-links,.nav-btns{display:none!important}
  .menu-toggle,.hamburger,#ham-btn,.toggle-sidebar{display:block!important}

  /* ── Sidebar → slide-out drawer ── */
  #sidebar,.sidebar{
    transform:translateX(100%)!important;
    transition:transform .3s ease;
    box-shadow:-4px 0 20px rgba(0,0,0,.3);
    z-index:500;
    position:fixed!important;
    width:260px!important;
    margin-right:0!important;
  }
  #sidebar.open,.sidebar.open{
    transform:translateX(0)!important;
  }

  /* ── Main → full width, no margin ── */
  #main,.main,.canvas-main{
    margin:0!important;
    width:100%!important;
    padding:14px!important;
    flex:1!important;
  }

  /* ── Top bar ── */
  .top-bar,.page-header,.canvas-header{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding:10px 14px!important;
  }
  .top-bar h2,.page-header h2{font-size:15px}
  .top-bar .actions,.top-bar-actions,.toolbar{
    width:100%;
    flex-wrap:wrap;
    gap:6px;
  }
  .top-bar .actions .btn,.top-bar-actions .btn{padding:7px 10px;font-size:11px}
  .top-bar .actions .btn span{display:none}

  /* ── Stats grid: 2 columns ── */
  .stats-grid,.stats,.stat-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .stat-card{padding:12px!important}
  .sc-value,.stat-val,.stat-value{font-size:18px!important}
  .sc-label,.stat-label{font-size:11px!important}

  /* ── Card grid: 1 column ── */
  .card-grid,.info-card-grid{grid-template-columns:1fr!important}

  /* ── Forms: stack vertically ── */
  .form-row,.form-group,.r2,.r3,.r4{grid-template-columns:1fr!important;display:flex;flex-direction:column!important}

  /* ── Grid utilities: 1 column ── */
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr!important}

  /* ── Tables: horizontal scroll ── */
  .tbl-wrap,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:500px;font-size:12px;display:block}
  thead,tbody,tr,th,td{display:table}
  th,td{padding:8px 10px;white-space:nowrap}

  /* ── Modals: full-screen on mobile ── */
  .overlay,.modal-overlay{padding:0!important;align-items:flex-end!important}
  .modal{
    width:100vw!important;
    max-width:100vw!important;
    height:auto!important;
    max-height:90dvh!important;
    border-radius:16px 16px 0 0!important;
    margin:0!important;
  }
  .modal-wide,.modal-xl{width:100vw!important;max-width:100vw!important;max-height:90dvh!important}
  .mbody{padding:16px;max-height:70dvh;overflow-y:auto}
  .del-box{width:90%!important;max-width:90vw!important}

  /* ── Buttons: bigger touch targets ── */
  .btn{padding:10px 14px;font-size:13px;min-height:40px}
  .btn-sm,.btn-s{padding:6px 10px;font-size:11px;min-height:34px}

  /* ── Page padding ── */
  .page,.page-body,.pg{padding:10px!important}

  /* ── KPI bar ── */
  .kpi-bar{flex-direction:column;gap:8px}
  .kpi{min-width:auto}

  /* ── Tabs: scroll horizontally ── */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .tab-btn{white-space:nowrap;flex-shrink:0;padding:8px 12px;font-size:12px}

  /* ── Badges: smaller ── */
  .badge,.b-blue,.b-green,.b-red,.b-gray,.b-orange,.b-purple,.badge-g,.badge-r,.badge-y,.badge-b,.badge-p,.badge-success,.badge-danger,.badge-warning,.badge-info{
    padding:2px 8px;font-size:10px;
  }

  /* ── Empty state ── */
  .empty-st,.empty,.empty-state{padding:24px 16px}
  .ei,.empty-icon{font-size:36px}
  .empty-st p,.empty-text,.empty-sub{font-size:12px}

  /* ── Toast: full width at bottom ── */
  .toast{left:10px;right:10px;bottom:16px;white-space:normal;font-size:12px}

  /* ── Invoice line grid: compact ── */
  #inv-lines .line-grid{grid-template-columns:1fr 70px 60px 55px 30px!important}
  .line-grid{grid-template-columns:1.5fr 70px 60px 30px!important;gap:4px}
  .line-grid input,.line-grid select{font-size:11px;padding:4px 6px}

  /* ── Search box ── */
  .search-box{max-width:100%}

  /* ── Filter bar ── */
  .filter-bar{flex-direction:column;gap:8px}
  .filter-bar select,.filter-bar input{width:100%}

  /* ── Employee cards ── */
  .emp-grid{grid-template-columns:1fr!important}

  /* ── Site header on mobile ── */
  #siteHeader{padding:0 12px}
  #siteHeader .site-logo-text{font-size:13px}

  /* ── POS grid on mobile ── */
  .pos-grid{grid-template-columns:1fr!important}

  /* ── Room grid on mobile ── */
  .room-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .room-tile{padding:10px}

  /* ── Bottom dock on mobile ── */
  .bottom-dock{height:48px;gap:0;padding:0 4px}
  .dock-tab{padding:3px 8px;min-width:40px}
  .dock-tab .dock-icon{font-size:17px}
  .dock-tab .dock-label{font-size:7px}
  .dock-divider{height:18px;margin:0 1px}
  .dock-avatar{width:20px;height:20px;font-size:9px}
  .user-dropdown{bottom:56px;left:8px;right:8px;transform:none;position:fixed}


}

/* ─────────────────────────────────────────────
   6. VERY SMALL SCREENS (≤480px)
   ───────────────────────────────────────────── */
@media(max-width:480px){
  .stats-grid,.stats,.stat-grid{grid-template-columns:1fr!important}
  .stat-card{padding:10px!important}
  .sc-value,.stat-val,.stat-value{font-size:16px!important}
  .top-bar h2,.page-header h2{font-size:14px}
  th,td{font-size:10px;padding:6px 8px}
  .btn{padding:8px 10px;font-size:12px}
  .btn-sm,.btn-s{padding:4px 8px;font-size:10px}
  .modal{border-radius:12px 12px 0 0!important}
  .mhead{padding:12px 16px}
  .mhead h3{font-size:14px}
  .mbody{padding:14px}
  .room-grid{grid-template-columns:1fr!important}
  .fld label,.form-group label{font-size:12px}
  .toast{font-size:11px;padding:10px 14px}
  .wf-node{width:100px;padding:6px}
  .wf-node .wf-node-icon{font-size:18px}
  .user-dropdown{bottom:52px;left:8px;right:8px;transform:none;min-width:auto;position:fixed}
  .bottom-dock{height:44px;gap:0;padding:0 2px}
  .dock-tab{padding:2px 6px;min-width:36px}
  .dock-tab .dock-icon{font-size:15px}
  .dock-tab .dock-label{font-size:6px}
  .dock-divider{height:14px;margin:0 1px}
  .dock-avatar{width:18px;height:18px;font-size:8px}
}

/* ─────────────────────────────────────────────
   7. LANDSCAPE MOBILE
   ───────────────────────────────────────────── */
@media(max-width:768px) and (orientation:landscape){
  .modal{max-height:95dvh!important}
  .mbody{max-height:80dvh}
}

/* ─────────────────────────────────────────────
   8. TOUCH-FRIENDLY TAP TARGETS
   ───────────────────────────────────────────── */
@media(pointer:coarse){
  .btn{min-height:40px}
  .sb-item,.sidebar .nav-item,.sidebar-nav a,.wf-prog-item{min-height:44px;padding:12px 16px}
  .sb-icon,.sidebar .nav-item .icon{font-size:18px}
  th,td{padding:10px 12px}
  input,select,textarea{min-height:40px}
  .tab-btn{min-height:40px}
  .nav-item{min-height:40px;padding:10px 12px}
  .nav-icon{font-size:18px}
  .checkbox-group label{min-height:36px;display:flex;align-items:center;gap:8px}
}

/* ─────────────────────────────────────────────
   9. HOVER-CAPABLE (desktop/laptop)
   ───────────────────────────────────────────── */
@media(hover:hover) and (pointer:fine){
  .stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
  .emp-card:hover{transform:translateY(-1px)}
}

/* ─────────────────────────────────────────────
   10. PRINT
   ───────────────────────────────────────────── */
@media print{
  #sidebar,.sidebar,.no-print,
  .top-bar,.page-header,.canvas-header,.canvas-header-logo,.canvas-header-bar,
  .toggle-sidebar,.menu-toggle,.hamburger,#ham-btn,
  .site-nav,#siteHeader,.bottom-dock,.bottom-panel,
  .lp-dock,.lp-panel{display:none!important}
  #main,.main,.canvas-main{margin:0!important;padding:0!important;width:100%!important}
  body{padding-top:0!important;background:#fff!important;color:#000!important}
  .card,.panel{box-shadow:none!important;border:1px solid #ddd!important;background:#fff!important}
  table{font-size:11px}
  .modal{display:none!important}
  .overlay,.modal-overlay{display:none!important}
}