/* Keep the original desktop styling intact. Responsive resets apply only below 1200px. */
@media (max-width: 1199px){
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  background:#f6f8fc;
  color:#0b1b33;
}

img,svg,video,canvas,iframe{
  max-width:100%;
}

img{
  height:auto;
}

input,select,textarea,button{
  max-width:100%;
  font:inherit;
}

button{
  -webkit-tap-highlight-color:transparent;
}



/* Prevent common fixed-width panels from creating horizontal scroll. */
.card,
.panel,
.box,
.section,
.form-card,
.modal-card,
.hero-card,
.content-card,
.page-card,
.table-card,
.dashboard-card{
  max-width:100%;
}

/* Images, forms and long values must stay inside their containers. */
.card img,
.panel img,
.box img,
.section img,
.form-card img,
.modal-card img{
  max-width:100%;
}

input,select,textarea{
  min-width:0;
}

/* ---------------- TABLES ---------------- */
.table-responsive,
.table-wrap,
.table-container,
.data-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

}

.theme-btn,
#themeToggle,
[data-theme-toggle],
.theme-toggle,
.theme-switch,
.theme-selector{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@media (max-width: 1100px){
  .page,
  .main,
  .main-content,
  .content,
  .dashboard-content,
  .page-content{
    max-width:100% !important;
  }

  .topbar,
  .navbar,
  .public-nav{
    max-width:100%;
  }

  .topbar-right{
    min-width:0;
  }
}

/* ---------------- TABLET ---------------- */
@media (max-width: 900px){
  .public-main{
    width:100% !important;
    max-width:100% !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .public-nav{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .app{
    width:100% !important;
    max-width:100% !important;
  }

  .content,
  .main-content,
  .dashboard-content,
  .page-content{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .grid,
  .cards-grid,
  .stats-grid,
  .metrics-grid,
  .dashboard-grid,
  .form-grid,
  .two-col,
  .three-col,
  .four-col{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .actions,
  .toolbar,
  .page-actions,
  .form-actions{
    flex-wrap:wrap !important;
  }

  table{
    width:100%;
    min-width:640px;
  }

  .table-responsive table,
  .table-wrap table,
  .table-container table,
  .data-table-wrap table{
    min-width:640px;
  }
}

/* ---------------- PHONE ---------------- */
@media (max-width: 767px){
  body{
    font-size:14px;
  }

  .public-main{
    padding:18px 14px !important;
  }

  .public-nav{
    min-height:64px !important;
    height:auto !important;
    padding:10px 14px !important;
  }

  .brand{
    min-width:0;
  }

  .brand-text{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .content,
  .main-content,
  .dashboard-content,
  .page-content,
  .page{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:14px !important;
  }

  .topbar{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:8px 10px !important;
  }

  .topbar-left,
  .topbar-right{
    min-width:0;
    gap:7px !important;
  }

  .topbar .brand{
    max-width:48vw;
  }

  .user-btn{
    max-width:44px !important;
    min-width:44px;
    padding:5px !important;
    justify-content:center;
  }

  .user-name,
  .chevron{
    display:none !important;
  }

  .icon-btn{
    flex:0 0 auto;
  }

  .grid,
  .cards-grid,
  .stats-grid,
  .metrics-grid,
  .dashboard-grid,
  .form-grid,
  .two-col,
  .three-col,
  .four-col{
    grid-template-columns:1fr !important;
  }

  .row,
  .actions,
  .toolbar,
  .page-actions,
  .form-actions,
  .button-row,
  .filters,
  .filter-row{
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
  }

  .actions > *,
  .toolbar > *,
  .page-actions > *,
  .form-actions > *,
  .button-row > *,
  .filters > *,
  .filter-row > *{
    width:100% !important;
    max-width:100% !important;
  }

  .btn,
  button.btn{
    min-height:42px;
  }

  input,
  select,
  textarea{
    width:100% !important;
    max-width:100% !important;
    min-height:42px;
  }

  textarea{
    min-height:100px;
  }

  .modal,
  .modal-dialog,
  .modal-card,
  .dialog,
  .popup{
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
    margin:12px !important;
  }

  .modal-body,
  .modal-content{
    max-width:100%;
    overflow-x:hidden;
  }

  .dropdown{
    max-width:calc(100vw - 24px);
  }

  .sidebar{
    max-width:86vw !important;
  }

  table{
    font-size:12px;
  }

  th,td{
    padding:8px 7px !important;
    white-space:nowrap;
  }

  .hero,
  .hero-card,
  .about-hero{
    border-radius:20px !important;
  }

  .hero h1,
  .about-hero h1{
    font-size:clamp(28px,8vw,42px) !important;
    line-height:1.08 !important;
  }

  .hero p,
  .about-hero p{
    font-size:15px !important;
  }

  .footer{
    width:100%;
    max-width:100%;
  }
}

/* ---------------- SMALL PHONES ---------------- */
@media (max-width: 480px){
  .content,
  .main-content,
  .dashboard-content,
  .page-content,
  .page{
    padding:10px !important;
  }

  .public-main{
    padding:14px 10px !important;
  }

  .public-nav{
    padding:8px 10px !important;
  }

  .brand-text{
    font-size:15px !important;
  }

  .card,
  .panel,
  .box,
  .section,
  .form-card,
  .hero-card{
    border-radius:14px !important;
  }

  .card-header,
  .panel-header,
  .section-header{
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  table{
    min-width:560px;
  }

  .table-responsive table,
  .table-wrap table,
  .table-container table,
  .data-table-wrap table{
    min-width:560px;
  }
}

/* ---------------- LEGACY BROWSER FALLBACKS ---------------- */
@supports not (display:grid){
  .grid,
  .cards-grid,
  .stats-grid,
  .metrics-grid,
  .dashboard-grid,
  .form-grid{
    display:block !important;
  }

  .grid > *,
  .cards-grid > *,
  .stats-grid > *,
  .metrics-grid > *,
  .dashboard-grid > *,
  .form-grid > *{
    margin-bottom:14px;
  }
}

/* Keep keyboard focus usable on touch/desktop browsers. */
:focus-visible{
  outline:3px solid rgba(255,122,24,.35);
  outline-offset:2px;
}


/* ============================================================
   UNIFORM APP SHELL — MOBILE / TABLET
   Brand LEFT • Hamburger RIGHT • Drawer LEFT • Profile at drawer bottom
============================================================ */
@media (max-width:900px){
  .topbar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    padding:6px 12px !important;
    height:60px !important;
    min-height:60px !important;
    background:#fff !important;
    border-bottom:1px solid #e7ebf2 !important;
    box-shadow:0 4px 18px rgba(7,24,52,.035) !important;
    z-index:1000 !important;
  }
  .topbar-left{display:contents !important}
  .topbar-left .brand{grid-column:1 !important;grid-row:1 !important;justify-self:start !important;order:0 !important}
  .topbar-left #sidebarToggle{grid-column:2 !important;grid-row:1 !important;justify-self:end !important;order:0 !important}
  .topbar-right{display:none !important}
  .topbar .brand{
    width:auto !important;min-width:0 !important;max-width:calc(100vw - 78px) !important;
    height:42px !important;padding:4px 10px !important;border:1px solid #dfe5ee !important;
    border-radius:12px !important;background:#fff !important;box-shadow:0 4px 14px rgba(7,24,52,.05) !important;
    gap:7px !important;overflow:hidden !important;white-space:nowrap !important;
  }
  .topbar .brand-mark{width:30px !important;height:30px !important;flex:0 0 30px !important;border-radius:9px !important}
  .topbar .brand-text{font-size:17px !important;line-height:1 !important;white-space:nowrap !important;overflow:visible !important;text-overflow:clip !important;max-width:none !important}
  .topbar #sidebarToggle{
    width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important;
    border:1px solid #dfe5ee !important;border-radius:12px !important;background:#fff !important;color:#0b2a52 !important;
    box-shadow:0 5px 16px rgba(2,10,28,.06) !important;
  }
  .app{margin-top:60px !important}
  .sidebar{
    top:0 !important;bottom:0 !important;height:100vh !important;height:100dvh !important;
    width:min(360px,86vw) !important;max-width:360px !important;padding:14px !important;
    background:#fff !important;box-shadow:20px 0 60px rgba(2,10,28,.16) !important;z-index:1100 !important;
    border-right:1px solid #e7ebf2 !important;
  }
  .sidebar.open{transform:translateX(0) !important}
  .sidebar-head{margin-bottom:12px !important}
  .sidebar-title{gap:10px !important}
  .sidebar-search{min-height:48px !important;border-radius:12px !important}
  .nav-link{min-height:42px !important;padding:8px 10px !important;font-size:14px !important;border-radius:12px !important}
  .nav-group{font-size:10px !important;margin:14px 8px 6px !important}
  .sidebar-foot{padding-top:12px !important;margin-top:6px !important;background:#fff !important}
  .status-pill{min-height:40px !important;padding:8px 12px !important;border-radius:12px !important;background:#fff !important}
  .mobile-profile-slot{margin-top:8px !important}
  .mobile-profile-slot .user-area{position:relative !important;width:100% !important;display:block !important}
  .mobile-profile-slot .user-btn{
    width:100% !important;max-width:none !important;min-width:0 !important;height:48px !important;padding:7px 10px !important;
    display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:10px !important;
    border:1px solid #dfe5ee !important;border-radius:12px !important;background:#fff !important;color:#0b2a52 !important;
  }
  .mobile-profile-slot .user-avatar{width:32px !important;height:32px !important;flex:0 0 32px !important;font-size:13px !important}
  .mobile-profile-slot .user-name{display:block !important;max-width:calc(100% - 66px) !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;font-size:13px !important;color:#0b2a52 !important;font-weight:800 !important}
  .mobile-profile-slot .chevron{display:block !important;margin-left:auto !important}
  .mobile-profile-slot .dropdown{position:absolute !important;left:0 !important;right:0 !important;bottom:56px !important;top:auto !important;width:100% !important;max-width:none !important}
  .content{margin-left:0 !important;padding:12px !important}
}
@media(max-width:480px){
  .topbar{height:58px !important;min-height:58px !important;padding:5px 10px !important}
  .app{margin-top:58px !important}
  .sidebar{top:0 !important;bottom:0 !important;height:100vh !important;height:100dvh !important;width:min(340px,88vw) !important}
  .topbar .brand{height:40px !important;padding:4px 9px !important}
  .topbar .brand-mark{width:29px !important;height:29px !important;flex-basis:29px !important}
  .topbar .brand-text{font-size:16px !important}
  .topbar #sidebarToggle{width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important}
}
@media(max-width:360px){
  .topbar{height:54px !important;min-height:54px !important}
  .app{margin-top:54px !important}
  .sidebar{top:0 !important;bottom:0 !important;height:100vh !important;height:100dvh !important}
  .topbar .brand{max-width:calc(100vw - 68px) !important;height:38px !important}
  .topbar .brand-text{font-size:14px !important}
  .topbar .brand-mark{width:27px !important;height:27px !important;flex-basis:27px !important}
  .topbar #sidebarToggle{width:40px !important;height:40px !important;min-width:40px !important;min-height:40px !important}
}


/* Final mobile/tablet consistency fix for Products and Add Product pages.
   Drawer covers the complete viewport; brand follows the Landing-page palette. */
@media (max-width:1000px){
  .sidebar, #sidebar{top:0!important;bottom:0!important;height:100vh!important;height:100dvh!important;margin-top:0!important;}
  .topbar .brand-text{font-weight:900!important;color:#0b2a52!important;white-space:nowrap!important;}
  .topbar .brand-text b{color:#ff7a18!important;font-weight:900!important;}
}