/* ==========================================================================
   ERP - Progressive UI enhancements (loaded after app.css — additive only)
   ========================================================================== */

/* ---------- Accessibility: visible keyboard focus ring ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
select:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
textarea:focus-visible{
  outline:2px solid #108fc6;
  outline-offset:1px;
}
body.dark-mode a:focus-visible,
body.dark-mode button:focus-visible,
body.dark-mode .btn:focus-visible,
body.dark-mode .form-control:focus-visible{
  outline-color:#4fc3f7;
}

/* ---------- Consistent button interaction (subtle, non-breaking) ---------- */
.btn,
.btn-flat{
  -webkit-transition:background .15s ease, box-shadow .15s ease, transform .05s ease;
  transition:background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active,
.btn-flat:active{ transform:translateY(1px); }
.btn-primary:hover,
.btn-success:hover{ box-shadow:0 2px 6px rgba(0,0,0,.18); }

/* ---------- Nicer scrollbar everywhere (light mode) ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#eef1f4; }
::-webkit-scrollbar-thumb{ background:#c3ccd6; border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:#a9b5c2; }

/* ---------- Table row actions: clearer, more tappable ---------- */
.table .row-actions a,
.link-danger{
  display:inline-block;
  padding:2px 4px;
  border-radius:4px;
}
.table .row-actions a:hover,
.link-danger:hover{ background:#f0f4f8; }
body.dark-mode .table .row-actions a:hover,
body.dark-mode .link-danger:hover{ background:#2a3644; }

/* ---------- Forms: consistent field focus & labels ---------- */
.form-control{
  -webkit-transition:border-color .15s ease, box-shadow .15s ease;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus{
  box-shadow:0 0 0 .18rem rgba(16,143,198,.18);
}
.filter-bar select.form-control,
.box-toolbar select.form-control,
.content select.form-control{ cursor:pointer; }

/* ---------- Header: center the global search on desktop (hidden on mobile) ---------- */
@media (min-width:768px){
  .navbar-right .nav>li.topbar-search{
    position:absolute !important;
    left:50% !important;
    top:0 !important;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    z-index:5;
  }
}

/* ==========================================================================
   TABLET (≤767px) — sidebar hidden by default, full-width content
   ========================================================================== */
@media (max-width:767px){
  /* Hide sidebar off-screen, keep it accessible via hamburger toggle */
  .main-sidebar{
    transform:translateX(100%);
    z-index:9999;
    width:260px;
  }
  .sidebar-open .main-sidebar{
    transform:translateX(0);
  }
  /* Dark overlay when sidebar is open */
  .sidebar-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:9998;
  }
  .sidebar-open .sidebar-overlay{
    display:block;
  }
  /* Content takes full width */
  .content-wrapper,
  .main-footer{
    margin-right:0!important;
    padding-top:50px;
  }
  /* Header takes full width on mobile (override sidebar-mini collapsed offsets) */
  .main-header,
  .sidebar-mini.sidebar-collapse .main-header{
    right:0!important;
    left:0!important;
  }
  .content-wrapper,
  .main-footer,
  .sidebar-mini.sidebar-collapse .content-wrapper,
  .sidebar-mini.sidebar-collapse .main-footer{
    margin-right:0!important;
  }
  /* Keep logo hidden on mobile so the header stays a single fixed row of icons */
  .main-header .logo,
  .sidebar-mini.sidebar-collapse .main-header .logo{
    display:none!important;
  }
  /* Keep navbar (all icons) pinned inside the fixed header as one row */
  .main-header{
    overflow:hidden;
  }
  .main-header .navbar{
    margin-right:0!important;
    min-height:0!important;
    position:relative;
    top:0;
  }
  .main-header .navbar,
  .main-header .navbar .nav,
  .main-header .navbar .nav>li,
  .main-header .navbar .nav>li>a,
  .main-header .user-dropdown{
    line-height:46px!important;
    height:46px!important;
    min-height:0!important;
    max-height:46px!important;
    overflow:hidden;
  }
  /* Sidebar-toggle hamburger should trigger our sidebar-open class */
  .sidebar-toggle{
    position:relative;
    z-index:10001;
  }
  /* Topbar adjustments */
  .topbar-search{ display:none!important; }
  .topbar-title{
    font-size:14px;
    line-height:50px;
    padding-right:10px;
    padding-left:4px;
    max-width:calc(100% - 120px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .user-dropdown .hidden-xs{ display:none; }
  /* Prevent topbar icons from wrapping to a second line on mobile */
  .navbar-right .nav{ white-space:nowrap; }
  .navbar-right .nav>li{ vertical-align:top; }
  .main-header .navbar .nav>li>a.dark-toggle,
  .main-header .navbar .nav>li>a.bell-toggle{
    width:32px!important;
    height:32px!important;
    margin:7px 2px!important;
    border-radius:50%!important;
    font-size:15px;
    padding:0!important;
  }
  /* Let the user dropdown escape the header clipping so it opens on mobile.
     The icon row stays contained (46px) by the per-item overflow rules below. */
  .main-header,
  .main-header .navbar,
  .main-header .navbar .nav{
    overflow:visible!important;
  }
  .main-header .navbar .nav>li,
  .main-header .navbar .nav>li>a,
  .main-header .navbar .user-dropdown{
    overflow:hidden;
  }
  .main-header .navbar .nav>li.user-menu-top{
    overflow:visible;
    max-height:none;
  }
  .main-header .navbar .nav>li.topbar-bell{
    overflow:visible;
  }
  .main-header .navbar .nav>li>a.bell-toggle{
    overflow:visible!important;
  }
  .topbar-bell .bell-panel{
    overflow:hidden;
  }
  .user-menu-top .dropdown-menu{
    z-index:3000;
    min-width:190px;
  }
  /* Content header */
  .content-header{
    padding:10px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:6px;
  }
  .content-header h1{
    font-size:18px;
    margin:0;
  }
  .breadcrumb{ display:none; }
  /* Boxes */
  .box-header{
    padding:10px 12px 6px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:6px;
  }
  .box-header .box-title{ font-size:16px; }
  .box-body{ padding:10px 12px; }
  .box-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:8px 12px;
  }
  .box-toolbar .btn{ margin:0; }
  /* Forms: full-width inputs */
  .form-control,
  select.form-control,
  textarea.form-control{
    width:100%!important;
    max-width:100%;
    font-size:16px; /* prevents iOS zoom on focus */
  }
  .form-group{ margin-bottom:12px; }
  .form-group .controls{ width:100%; }
  .form-group .controls .form-control{ width:100%; }
  /* Button rows */
  .btn-block{ width:100%; }
  .box-footer-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:12px 0 0;
  }
  .box-footer-actions .btn{ flex:1; min-width:0; text-align:center; }
  /* Tables: ensure horizontal scroll works smoothly */
  .table-responsive{
    -webkit-overflow-scrolling:touch;
    border:1px solid #e3e8ef;
    border-radius:6px;
  }
  .table{ font-size:13px; }
  .table>thead>tr>th,
  .table>tbody>tr>td{ padding:8px 6px; white-space:nowrap; }
  .table .row-actions a{
    padding:8px 6px;
    font-size:14px;
    min-width:32px;
    min-height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  /* Footer */
  .main-footer{
    margin-right:0!important;
    text-align:center;
    font-size:12px;
    padding:8px;
  }
  /* Pagination */
  .pagination{ flex-wrap:wrap; }
  .pagination a{ padding:8px 10px; font-size:14px; }
  /* Dashboard stats cards: stack */
  .bca .small-box.box{ margin-bottom:10px; }
  /* Stock/report totals: stack */
  .stock-totals,
  .moves-totals,
  .profit-totals,
  .period-totals{ grid-template-columns:1fr!important; }
  .report-stats--3,
  .report-stats--4{ grid-template-columns:1fr!important; }
  /* Filter bar: vertical */
  .filter-bar{ padding:12px; }
  .filter-bar .form-group{ margin-bottom:8px; }
  /* Invoice stats */
  .inv-stats{ grid-template-columns:1fr!important; }
}

/* ==========================================================================
   PHONE (≤480px) — tighter, more compact
   ========================================================================== */
@media (max-width:480px){
  /* Sidebar */
  .main-sidebar{ width:85vw; max-width:280px; }
  /* Topbar */
  .main-header{
    height:46px;
    right:0;
  }
  .content-wrapper,
  .main-footer{ padding-top:46px; }
  .sidebar-toggle{ padding:13px 10px; font-size:18px; }
  .topbar-title{ font-size:13px; line-height:46px; }
  .user-menu-top{ line-height:46px; }
  .user-dropdown{ padding:0 8px; line-height:46px; }
  .avatar-sm{ width:26px; height:26px; line-height:26px; font-size:12px; }
  .topbar-darkmode .dark-toggle{ margin:6px 1px; }
  /* Content */
  .content-header h1{ font-size:16px; }
  .content{ padding:0 10px 10px; }
  .box-body{ padding:8px 10px; }
  /* Login */
  .login-box{ width:100%; padding:0 4px; }
  .login-box-body{ padding:16px 14px; }
  .login-logo a{ font-size:22px; }
  /* POS: 2-column product grid */
  .pos-items-grid{
    height:calc(100vh - 200px);
    gap:6px;
  }
  .pos-item{
    flex:0 0 calc(50% - 6px);
    min-width:0;
    padding:8px 4px;
  }
  .pos-item-name{ font-size:12px; }
  .pos-item-price{ font-size:11px; }
  .pos-searchform{ flex-direction:column; gap:6px; }
  .pos-search-input{ width:100%; font-size:16px; }
  .pos-pay-buttons{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .pos-pay{ min-height:44px; font-size:13px; }
  .pos-grand{ font-size:20px; padding:10px; }
  .pos-summary{ padding:8px; }
  /* Forms */
  .form-control{ font-size:16px; padding:10px 12px; }
  select.form-control{ padding:10px 8px; }
  .btn{ font-size:14px; padding:10px 14px; min-height:44px; }
  .btn-sm{ font-size:12px; padding:8px 10px; min-height:36px; }
  /* Tables: compact */
  .table{ font-size:12px; }
  .table>thead>tr>th{ font-size:11px; padding:6px 4px; }
  .table>tbody>tr>td{ padding:6px 4px; }
  .table .num{ font-size:12px; }
  /* Grids: single column */
  .dash-grid{ grid-template-columns:1fr!important; }
  .grid-2{ grid-template-columns:1fr!important; }
  .col-sm-3,
  .col-sm-4,
  .col-sm-6,
  .col-md-3,
  .col-md-4,
  .col-md-6{ width:100%!important; float:none!important; }
}

/* ==========================================================================
   DARK MODE — mobile overrides (keep sidebar dark in mobile overlay)
   ========================================================================== */
body.dark-mode .main-sidebar{
  background:#151b23;
}
body.dark-mode .sidebar-overlay{
  background:rgba(0,0,0,.6);
}

/* ==========================================================================
   Better printing (keeps colors, hides chrome)
   ========================================================================== */
@media print{
  .main-footer, .main-header, .main-sidebar, .no-print,
  .box-header .box-tools, .sidebar{ display:none !important; }
  .content-wrapper, .content, .main{ margin:0 !important; padding:0 !important; }
  body{ background:#fff !important; color:#000 !important; }
  .box{ box-shadow:none !important; border:1px solid #ccc; }
  .table,
  .table-responsive,
  .table-elegant{ width:100% !important; font-size:11px; }
  .table>thead>tr>th,
  .table.table-elegant>thead>tr>th,
  tr.g-total td{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
    background:#f0f0f0 !important;
    color:#000 !important;
  }
  a[href]:after{ content:""; }              /* avoid printing raw URLs */
}

/* ---------- Reduce motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  *{
    -webkit-transition:none !important;
    transition:none !important;
    -webkit-animation:none !important;
    animation:none !important;
  }
}

/* ==========================================================================
   SIDEBAR ENHANCEMENT — quick search + professional polish (additive only)
   ========================================================================== */

/* --- fullscreen toggle: desktop only (hidden under 768px) --- */
.navbar-right .nav > li.topbar-fullscreen{ display:none; }
@media (min-width:768px){
  .navbar-right .nav > li.topbar-fullscreen{ display:inline-block; line-height:50px; }
}

/* --- categories icon picker: compact tiles (same behavior, less space) --- */
.cat-icon-picker .controls{ padding:10px; }
.cat-picker-toolbar{ margin-bottom:8px; gap:10px; }
.cat-preview-box{ width:46px; height:46px; font-size:26px; }
.cat-picker-search input{ height:33px; }
.cat-icon-grid{
  grid-template-columns:repeat(auto-fill,minmax(58px,1fr));
  gap:7px; max-height:220px; padding:2px;
}
.cat-icon-tile{ padding:6px 4px; gap:3px; border-radius:8px; }
.cat-icon-glyph{ font-size:22px; min-height:22px; }
.cat-icon-label{ font-size:8px; }
.cat-icons-toggle{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:#fff;border:1px dashed #c4ccd9;border-radius:8px;
  padding:7px 12px;color:#34425a;font-size:13px;font-weight:600;
  -webkit-transition:border-color .15s,background .15s;transition:border-color .15s,background .15s;
}
.cat-icons-toggle:hover{ border-color:#108fc6;background:#eef6fc; }
.cat-toggle-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:6px;background:#f2f5f9;color:#108fc6;
}
.cat-toggle-icon i{ font-size:16px; line-height:1; }
.cat-toggle-chevron{ color:#8a94a6; font-size:12px; -webkit-transition:transform .18s; transition:transform .18s; }
.cat-icons-toggle.open .cat-toggle-chevron{ -webkit-transform:rotate(180deg); transform:rotate(180deg); }
.cat-icons-panel{ display:none; margin-top:8px; }
.cat-icons-panel.open{ display:block; }

/* --- settings system-info tab: dark mode --- */
body.dark-mode .settings-section .small-box{ background:#202a35 !important; border-color:#2f3b4a !important; }
body.dark-mode .settings-section .small-box .inner p{ color:#9aa7b8 !important; }
body.dark-mode .settings-section .table{ background:#1a222c !important; border-color:#2b3644 !important; }
body.dark-mode .settings-section .table td small{ color:#7f8ca1; }
body.dark-mode .settings-section .table td strong{ color:#e7edf3; }
body.dark-mode .settings-section code{ background:#2f3b4a; color:#e7edf3; padding:2px 6px; border-radius:4px; }

/* --- import page: dark mode --- */
body.dark-mode .import-heading h3{ color:#e7edf3; }
body.dark-mode .import-heading p{ color:#8b97a8; }
body.dark-mode .import-panel{
  background:#202a35; border-color:#2f3b4a; color:#c7d0da;
}
body.dark-mode .import-panel:hover{ border-color:#4a82b8; background:#263243; }
body.dark-mode .import-panel.dragover{ border-color:#108fc6; background:#1c2a38; }
body.dark-mode .import-panel i.panel-icon{ color:#4fc3f7; }
body.dark-mode .import-panel h4{ color:#e7edf3; }
body.dark-mode .import-panel p{ color:#8b97a8; }
body.dark-mode .import-result.success{ background:#14341c; color:#7cc47c; border-color:#2e7d32; }
body.dark-mode .import-result.error{ background:#3b1d24; color:#ef9a9a; border-color:#c62828; }

/* --- quick search box --- */
.sidebar-search{
  position:sticky;
  top:0;
  z-index:6;
  margin:0;
  padding:8px 12px 10px;
  background:var(--sidebar);
}
.sidebar-search > .fa-search{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:#7a8b99; font-size:13px; pointer-events:none; z-index:2;
}
.sidebar-search-input{
  width:100%; height:34px; border-radius:18px;
  border:1px solid #2f3b48; background:#2b3742; color:#e7edf3;
  padding:0 32px 0 26px; font-size:13px; outline:none;
  font-family:'Cairo','Segoe UI',Tahoma,Arial,sans-serif;
  -webkit-transition:border-color .15s, box-shadow .15s;
  transition:border-color .15s, box-shadow .15s;
}
.sidebar-search-input::-webkit-input-placeholder{ color:#7a8b99; }
.sidebar-search-input:-moz-placeholder{ color:#7a8b99; }
.sidebar-search-input::-moz-placeholder{ color:#7a8b99; }
.sidebar-search-input:-ms-input-placeholder{ color:#7a8b99; }
.sidebar-search-input:focus{
  border-color:#4a82b8; box-shadow:0 0 0 3px rgba(16,143,198,.18);
}
.sidebar-search-clear{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:#7a8b99; font-size:14px; cursor:pointer; display:none;
  -webkit-transition:color .15s; transition:color .15s;
}
.sidebar-search-clear:hover{ color:#fff; }
.sidebar-search-empty{
  display:none;
  margin:2px 12px 6px; padding:7px 10px; border-radius:8px;
  background:rgba(221,75,57,.16); border:1px solid rgba(221,75,57,.35);
  color:#ffb3a7; font-size:12px; text-align:center;
}
body.sidebar-collapse .sidebar-search,
body.sidebar-collapse .sidebar-search-empty{ display:none !important; }

/* --- group items: gentle spacing + rounded headers --- */
.sidebar-menu > li.treeview{ margin:2px 8px; }
.sidebar-menu > li.treeview > a{ border-radius:8px; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview{ margin:0; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li.treeview > a{ border-radius:0; }

/* --- section headers: accent underline for the whole open group --- */
.sidebar-menu > li.treeview > a{
  border-bottom:1px solid transparent;
}
.sidebar-menu > li.treeview.active > a{
  border-bottom-color:rgba(47,177,226,.25);
  background:linear-gradient(90deg, rgba(16,143,198,.18), transparent 72%);
}
body.dark-mode .sidebar-menu > li.treeview.active > a{
  background:linear-gradient(90deg, rgba(16,143,198,.24), transparent 72%);
}

/* --- active sub-item: accent bar (border trick, no layout shift) --- */
.treeview-menu>li>a{
  border-left:2px solid transparent;
  border-radius:6px;
}
.treeview-menu>li.active>a{
  border-left-color:#2fb1e2;
  background:linear-gradient(90deg, rgba(16,143,198,.16), transparent 80%);
}
.treeview-menu>li.active>a>.fa{ color:#7fc2ef; }
body.dark-mode .treeview-menu>li.active>a{
  background:linear-gradient(90deg, rgba(16,143,198,.22), transparent 80%);
}

/* --- smooth open animation for submenus (toggle uses display:block) --- */
.sidebar-menu .treeview.active > .treeview-menu{
  -webkit-animation:sidebarMenuIn .16s ease;
  animation:sidebarMenuIn .16s ease;
}
@-webkit-keyframes sidebarMenuIn{
  from{ opacity:0; -webkit-transform:translateX(6px); }
  to{ opacity:1; -webkit-transform:none; }
}
@keyframes sidebarMenuIn{
  from{ opacity:0; transform:translateX(6px); }
  to{ opacity:1; transform:none; }
}

/* --- logout link: distinct warm red --- */
.sidebar-menu > li > a[href$='/logout']{ color:#e08c84; }
.sidebar-menu > li > a[href$='/logout']:hover{
  color:#fff; background:rgba(221,75,57,.18); border-left-color:#dd4b39;
}

/* --- thin, tidy scrollbar for the menu area --- */
.main-sidebar .sidebar{
  scrollbar-width:thin;
  scrollbar-color:#3a4753 transparent;
}
.main-sidebar .sidebar::-webkit-scrollbar{ width:6px; }
.main-sidebar .sidebar::-webkit-scrollbar-track{ background:transparent; }
.main-sidebar .sidebar::-webkit-scrollbar-thumb{
  background:#3a4753; border-radius:6px;
}
body.dark-mode .main-sidebar .sidebar::-webkit-scrollbar-thumb{ background:#2c3b48; }

/* ---------- Item cards list: thumbnail beside product name ---------- */
.item-name-cell{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.item-thumb{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:6px;
  background:#f0f3f7;
  border:1px solid #e3e7ed;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#b6c0cc;
  overflow:hidden;
}
.item-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.item-thumb i{ font-size:17px; }
.item-name-text{
  display:inline-flex;
  flex-direction:column;
  gap:2px;
}
body.dark-mode .item-thumb{
  background:#232e3a;
  border-color:#2f3b4a;
  color:#5b6675;
}

/* ---------- POS grid: product image inside item tile ---------- */
.pos-item-pic{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:72px;
  border-radius:6px;
  background:#f0f3f7;
  margin-bottom:6px;
  overflow:hidden;
  color:#b6c0cc;
}
.pos-item-pic img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.pos-item-pic .pos-pic-ph{ display:none; font-size:22px; }
.pos-item-pic.pos-pic-fallback img{ display:none; }
.pos-item-pic.pos-pic-fallback .pos-pic-ph{ display:block; }
body.dark-mode .pos-item-pic{
  background:#232e3a;
  color:#5b6675;
}
@media (max-width:480px){
  .pos-item-pic{ height:54px; }
}