/* =========================================================================
   GMR Warehouse — Cream / Terracotta Theme
   Palette matched to reference: https://getmyrugs-rfid-mock.vercel.app/
   Light cream page + sidebar (no dark panels), white cards, terracotta/rust
   accent for active nav, badges and emphasis, soft semantic colors for
   status. Loaded AFTER style.css and style-responsive.css so it wins the
   cascade. Also contains the site-wide responsive helper rules.
   ========================================================================= */

:root {
  --gmr-bg: #F5EFE3;
  --gmr-surface: #FFFFFF;
  --gmr-surface-alt: #FAF4E8;
  --gmr-border: #EAE1CD;
  --gmr-border-strong: #DDD0B4;
  --gmr-text: #2B2620;
  --gmr-text-muted: #8A8172;
  --gmr-text-faint: #A79E8C;
}

:root {
  --gmr-accent: #C1652E;
  --gmr-accent-hover: #A2521F;
  --gmr-accent-bg: #F3DDC3;
  --gmr-accent-text: #8A4318;

  --gmr-blue: #2E5AA0;
  --gmr-green: #2F7D3D;
  --gmr-red: #C0392B;
  --gmr-amber: #D9A441;

  --gmr-on-accent: #FFFFFF;

  --gmr-success-bg: #E4EFD3;
  --gmr-success-text: #2F7D3D;
  --gmr-warning-bg: #FAECC8;
  --gmr-warning-text: #966018;
  --gmr-danger-bg: #F7D8D8;
  --gmr-danger-text: #C0392B;
  --gmr-info-bg: #DCEAF7;
  --gmr-info-text: #2E5AA0;
}

/* ---------- Page / content background ---------- */
body,
.content-page > .content,
.content-page,
#wrapper {
  background: var(--gmr-bg) !important;
  color: var(--gmr-text);
}

.content-page > .content {
  padding: 20px;
}

a {
  color: var(--gmr-accent);
}
a:hover,
a:focus {
  color: var(--gmr-accent-hover);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--gmr-text);
}

/* ---------- Topbar (blends into the cream page, thin bottom border) ---------- */
.topbar,
.topbar .navbar,
.topbar .navbar-default {
  background: var(--gmr-bg) !important;
  border-bottom: 1px solid var(--gmr-border) !important;
  box-shadow: none !important;
}
.navbar-default .navbar-nav > li > a,
.topbar a,
.topbar .navbar-nav > li > a {
  color: var(--gmr-text) !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--gmr-accent) !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .open > a {
  background-color: var(--gmr-accent-bg) !important;
  color: var(--gmr-accent-text) !important;
}
.button-menu-mobile {
  color: var(--gmr-text) !important;
}
/* This legacy template shows the hamburger button on all screen sizes by
   default (no built-in breakpoint hides it). Hide it on desktop, only show
   it once the sidebar actually needs to collapse behind a toggle. */
.topbar .topbar-left {
  background: transparent !important;
  width: 50px;
  display: none;
}
.button-menu-mobile {
  display: none;
}
@media (max-width: 991px) {
  .topbar .topbar-left {
    display: block;
  }
  .button-menu-mobile {
    display: block;
  }
}

/* Thin sage accent strip along the very top of the app, like the reference */
.topbar::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #C6D1A8;
  z-index: 1100;
}

/* ---------- Sidebar (cream, blends with page; terracotta pill = active tab) ---------- */
.left.side-menu,
.side-menu,
.sidebar-inner,
.header.left.side-menu {
  background: var(--gmr-bg) !important;
  border-right: 1px solid var(--gmr-border);
}
#sidebar-menu > ul > li {
  background: transparent !important;
  padding: 2px 6px;
}
#sidebar-menu > ul > li > a {
  color: var(--gmr-text) !important;
  border-radius: 8px;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  white-space: nowrap;
  padding: 10px 12px !important;
}
#sidebar-menu > ul > li > a > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#sidebar-menu > ul > li > a > i.fa-caret-down,
#sidebar-menu > ul > li > a > i.fa-caret-up {
  flex-shrink: 0;
  margin-left: auto;
}
#sidebar-menu > ul > li > a > i {
  color: var(--gmr-text-muted) !important;
}
#sidebar-menu > ul > li > a:hover {
  background: var(--gmr-surface-alt) !important;
  color: var(--gmr-text) !important;
}
#sidebar-menu > ul > li > a.subdrop,
#sidebar-menu > ul > li > a.active,
#sidebar-menu > ul > li > a.active.subdrop {
  background: var(--gmr-accent-bg) !important;
  color: var(--gmr-accent-text) !important;
  border-left: none;
  font-weight: 600;
}
#sidebar-menu > ul > li > a.active i,
#sidebar-menu > ul > li > a.active.subdrop i,
#sidebar-menu > ul > li > a.subdrop i {
  color: var(--gmr-accent-text) !important;
}
#sidebar-menu .dropdown-menu,
#sidebar-menu ul ul {
  background: var(--gmr-surface-alt) !important;
  border: 1px solid var(--gmr-border);
}
#sidebar-menu ul ul li a {
  color: var(--gmr-text-muted) !important;
  background: transparent !important;
}
#sidebar-menu ul ul li a:hover,
#sidebar-menu ul ul li a.active,
#sidebar-menu ul ul li a.subdrop {
  color: var(--gmr-accent-text) !important;
  background: var(--gmr-accent-bg) !important;
}
/* Count badges next to nav items, e.g. "Bhadohi (6)" */
#sidebar-menu span.label,
#sidebar-menu span.badge {
  background: var(--gmr-accent) !important;
  color: var(--gmr-on-accent) !important;
  border-radius: 999px;
  font-weight: 600;
}

/* ---------- Sidebar scrollbar (visible, on the right edge of the panel) ---------- */
.left.side-menu .slimScrollBar {
  background: var(--gmr-border-strong) !important;
  border-radius: 999px !important;
  right: 2px !important;
}
.left.side-menu .slimScrollRail {
  background: var(--gmr-surface-alt) !important;
  right: 2px !important;
  border-radius: 999px !important;
  opacity: 1 !important;
}
.left.side-menu ::-webkit-scrollbar {
  width: 6px;
}
.left.side-menu ::-webkit-scrollbar-track {
  background: var(--gmr-surface-alt);
}
.left.side-menu ::-webkit-scrollbar-thumb {
  background: var(--gmr-border-strong);
  border-radius: 999px;
}

/* Bootstrap nav-tabs / nav-pills used inside pages */
.nav-tabs {
  border-bottom: 2px solid var(--gmr-border);
}
.nav-tabs > li > a {
  background: var(--gmr-surface-alt) !important;
  color: var(--gmr-text-muted) !important;
  border: 1px solid var(--gmr-border) !important;
  border-bottom: none !important;
  margin-right: 3px;
  border-radius: 8px 8px 0 0;
}
.nav-tabs > li > a:hover {
  background: var(--gmr-accent-bg) !important;
  color: var(--gmr-accent-text) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: var(--gmr-surface) !important;
  color: var(--gmr-accent) !important;
  border-color: var(--gmr-border) !important;
  border-bottom-color: var(--gmr-surface) !important;
  font-weight: 600;
}
.nav-pills > li > a {
  color: var(--gmr-text);
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background: var(--gmr-accent) !important;
  color: var(--gmr-on-accent) !important;
}
.tab-content {
  background: var(--gmr-surface);
  border: 1px solid var(--gmr-border);
  border-top: none;
  padding: 16px;
  border-radius: 0 0 10px 10px;
}

/* ---------- Buttons ---------- */
.btn-primary {
  background-color: var(--gmr-accent) !important;
  border-color: var(--gmr-accent) !important;
  color: var(--gmr-on-accent) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--gmr-accent-hover) !important;
  border-color: var(--gmr-accent-hover) !important;
  color: var(--gmr-on-accent) !important;
}
.btn-default {
  background-color: var(--gmr-surface) !important;
  border-color: var(--gmr-border-strong) !important;
  color: var(--gmr-text) !important;
}
.btn-default:hover,
.btn-default:focus {
  background-color: var(--gmr-surface-alt) !important;
  border-color: var(--gmr-accent) !important;
  color: var(--gmr-accent) !important;
}
.btn {
  border-radius: 999px;
}
.btn-success {
  background-color: var(--gmr-green) !important;
  border-color: var(--gmr-green) !important;
}
.btn-success:hover {
  background-color: #24622F !important;
  border-color: #24622F !important;
}
.btn-warning {
  background-color: var(--gmr-amber) !important;
  border-color: var(--gmr-amber) !important;
  color: #4A3407 !important;
}
.btn-warning:hover {
  background-color: #C1902F !important;
  border-color: #C1902F !important;
}
.btn-danger {
  background-color: var(--gmr-red) !important;
  border-color: var(--gmr-red) !important;
}
.btn-danger:hover {
  background-color: #9E2E22 !important;
  border-color: #9E2E22 !important;
}
.btn-info {
  background-color: var(--gmr-blue) !important;
  border-color: var(--gmr-blue) !important;
}

/* ---------- Forms ---------- */
.form-control,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"] {
  background: var(--gmr-surface) !important;
  border-color: var(--gmr-border-strong) !important;
  color: var(--gmr-text) !important;
  border-radius: 8px !important;
}
.form-control:focus {
  border-color: var(--gmr-accent) !important;
  box-shadow: 0 0 0 2px var(--gmr-accent-bg) !important;
}
label {
  color: var(--gmr-text);
}

/* ---------- Panels / wells / widgets / cards ---------- */
.panel, .widget, .well, .white-box, .ibox, .card {
  background: var(--gmr-surface) !important;
  border: 1px solid var(--gmr-border) !important;
  border-radius: 12px !important;
  color: var(--gmr-text);
  box-shadow: 0 1px 2px rgba(43,38,32,0.05) !important;
}
.panel-heading, .widget-header, .box-title, .ibox-title {
  background: var(--gmr-surface) !important;
  color: var(--gmr-text) !important;
  border-bottom: 1px solid var(--gmr-border) !important;
  font-weight: 600;
}

/* ---------- Tables ---------- */
table.table thead,
.table > thead > tr {
  background: var(--gmr-surface-alt) !important;
}
.table > thead > tr > th {
  color: var(--gmr-text-muted) !important;
  border-bottom: 2px solid var(--gmr-border) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.table {
  background: var(--gmr-surface) !important;
  color: var(--gmr-text) !important;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
  border-top: 1px solid var(--gmr-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--gmr-surface-alt) !important;
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border: 1px solid var(--gmr-border) !important;
}
.table-hover > tbody > tr:hover {
  background: var(--gmr-accent-bg) !important;
}

/* Numeric emphasis, e.g. big stat numbers, where markup allows the class */
.text-accent { color: var(--gmr-accent) !important; }
.text-blue   { color: var(--gmr-blue) !important; }
.text-green  { color: var(--gmr-green) !important; }
.text-red    { color: var(--gmr-red) !important; }
.text-amber  { color: var(--gmr-amber-dark, #966018) !important; }
.text-dark   { color: var(--gmr-text) !important; }

/* ---------- Dashboard stat cards ---------- */
.gmr-dashboard-header h2 {
  font-weight: 600;
  margin: 0 0 6px;
}
.gmr-dashboard-header p {
  color: var(--gmr-text-muted);
  max-width: 900px;
  margin: 0 0 22px;
}
.gmr-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.gmr-stat-card {
  background: var(--gmr-surface);
  border: 1px solid var(--gmr-border);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(43,38,32,0.05);
}
.gmr-stat-card .gmr-stat-value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gmr-stat-card .gmr-stat-value .fa {
  font-size: 16px;
  vertical-align: middle;
}
.gmr-stat-card .gmr-stat-label {
  color: var(--gmr-text-muted);
  font-size: 13px;
  margin-top: 4px;
}
@media (max-width: 991px) {
  .gmr-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .gmr-stat-grid { grid-template-columns: 1fr; }
}

/* ---------- Labels / badges / status pills ---------- */
.label, .badge {
  border-radius: 999px !important;
  font-weight: 600;
}
.label-success, .badge-success { background-color: var(--gmr-success-bg) !important; color: var(--gmr-success-text) !important; }
.label-warning, .badge-warning { background-color: var(--gmr-warning-bg) !important; color: var(--gmr-warning-text) !important; }
.label-danger,  .badge-danger  { background-color: var(--gmr-danger-bg) !important;  color: var(--gmr-danger-text) !important; }
.label-info,    .badge-info    { background-color: var(--gmr-info-bg) !important;    color: var(--gmr-info-text) !important; }
.label-default { background-color: var(--gmr-accent-bg) !important; color: var(--gmr-accent-text) !important; }
.label-primary { background-color: var(--gmr-accent-bg) !important; color: var(--gmr-accent-text) !important; }

/* ---------- Pagination ---------- */
.pagination li a,
.pagination li.disabled a {
  background-color: var(--gmr-surface) !important;
  border-color: var(--gmr-border-strong) !important;
  color: var(--gmr-text) !important;
}
.pagination li.active a,
.pagination li:hover a,
.pagination > li > a:hover {
  background-color: var(--gmr-accent) !important;
  border-color: var(--gmr-accent) !important;
  color: var(--gmr-on-accent) !important;
}

/* ---------- Dropdown menus (topbar/profile, not sidebar) ---------- */
.dropdown-menu {
  background: var(--gmr-surface) !important;
  border: 1px solid var(--gmr-border) !important;
  border-radius: 10px !important;
  color: var(--gmr-text);
}
.dropdown-menu > li > a {
  color: var(--gmr-text) !important;
}
.dropdown-menu > li > a:hover {
  background: var(--gmr-accent-bg) !important;
  color: var(--gmr-accent-text) !important;
}

/* ---------- Modals ---------- */
.modal-content {
  background: var(--gmr-surface) !important;
  border: 1px solid var(--gmr-border) !important;
  border-radius: 12px !important;
}
.modal-header {
  background: var(--gmr-surface) !important;
  color: var(--gmr-text) !important;
  border-bottom: 1px solid var(--gmr-border) !important;
}
.modal-header .close {
  color: var(--gmr-text) !important;
  opacity: 0.6;
}

/* ---------- Progress bars ---------- */
.progress {
  background: var(--gmr-border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.progress-bar { border-radius: 999px !important; }
.progress-bar-success { background-color: var(--gmr-green) !important; }
.progress-bar-warning { background-color: var(--gmr-amber) !important; }
.progress-bar-danger  { background-color: var(--gmr-red) !important; }
.progress-bar-info    { background-color: var(--gmr-blue) !important; }
.progress-bar:not([class*="progress-bar-"]) { background-color: var(--gmr-accent) !important; }

/* =========================================================================
   RESPONSIVE FIXES (site-wide, apply through the shared layouts)
   ========================================================================= */

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

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Auto-wrapped tables (see responsive-enhance.js) get a horizontal scroller
   instead of squeezing/breaking the layout on small screens. */
.gmr-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
}
.gmr-table-scroll > table {
  margin-bottom: 0;
}

/* Kill fixed pixel widths that are common in this codebase's inline markup */
[style*="width:1000px"], [style*="width: 1000px"],
[style*="width:900px"],  [style*="width: 900px"],
[style*="width:800px"],  [style*="width: 800px"],
[style*="width:700px"],  [style*="width: 700px"] {
  max-width: 100% !important;
  width: 100% !important;
}

.form-control, select, textarea, input {
  max-width: 100%;
}

/* Hidden on desktop by default — only relevant inside the mobile off-canvas
   drawer, where the media query below turns it back on. Declared here, above
   that media query, so the mobile override wins at narrow widths. */
.gmr-mobile-nav-close {
  display: none;
}

@media (max-width: 991px) {
  /* True off-canvas mobile nav: hidden by default, slides in over the
     content (not pushing it) only once the hamburger is tapped. This
     overrides the legacy "enlarged" 50px icon-rail behavior entirely at
     these widths, since that mode was causing the sidebar to overlap
     content instead of staying hidden. */
  .topbar {
    z-index: 1160 !important;
  }
  .content-page {
    margin-left: 0 !important;
  }
  #wrapper .left.side-menu,
  #wrapper.enlarged .left.side-menu {
    position: fixed !important;
    top: 54px;
    left: 0;
    bottom: 0;
    height: calc(100% - 54px);
    width: 260px !important;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    z-index: 1150;
  }
  #wrapper .left.side-menu .sidebar-inner {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.gmr-mobile-nav-open #wrapper .left.side-menu {
    transform: translateX(0);
    box-shadow: 6px 0 24px rgba(0,0,0,0.22);
  }
  body.gmr-mobile-nav-open {
    overflow: hidden;
  }
  .gmr-mobile-backdrop {
    display: none;
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20,16,12,0.4);
    z-index: 1100;
    opacity: 0;
    transition: opacity 0.28s ease;
  }
  body.gmr-mobile-nav-open .gmr-mobile-backdrop {
    display: block;
    opacity: 1;
  }
  .gmr-mobile-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 10px 10px 0 auto;
    background: var(--gmr-surface-alt);
    border: 1px solid var(--gmr-border);
    border-radius: 999px;
    color: var(--gmr-text-muted);
    font-size: 14px;
  }
  .gmr-mobile-nav-close:hover,
  .gmr-mobile-nav-close:focus {
    background: var(--gmr-accent-bg);
    color: var(--gmr-accent-text);
  }
}

@media (max-width: 767px) {
  .content-page > .content {
    padding: 12px;
  }
  .btn {
    margin-bottom: 6px;
  }
  .navbar-nav.hidden-xs {
    display: none !important;
  }
  h1, .h1 { font-size: 22px; }
  h2, .h2 { font-size: 19px; }
  h3, .h3 { font-size: 17px; }
}

@media (max-width: 480px) {
  .content-page > .content {
    padding: 8px;
  }
  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: 6px 8px;
    font-size: 12px;
  }
}