/* =====================================================================
   OMS Theme (2026-11) - premium, compact, fully responsive design layer.
   Loaded after oms-pro.css on every page; only overrides presentation.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* Public Font Awesome copy so icons still render if the account kit is unavailable */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

:root {
  --t-bg: #f3f5fa;
  --t-surface: #ffffff;
  --t-surface-2: #f8fafc;
  --t-border: #e4e9f1;
  --t-border-strong: #d5dce8;
  --t-text: #0f172a;
  --t-text-2: #334155;
  --t-muted: #64748b;
  --t-primary: #12528c;
  --t-primary-2: #1b6fbf;
  --t-primary-soft: rgba(27, 111, 191, 0.10);
  --t-ring: 0 0 0 3px rgba(27, 111, 191, 0.16);
  --t-radius: 16px;
  --t-radius-sm: 10px;
  --t-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --t-shadow-lg: 0 2px 6px rgba(15, 23, 42, 0.05), 0 18px 40px rgba(15, 23, 42, 0.10);
  --t-sidebar: linear-gradient(180deg, #071a2e 0%, #0c2742 55%, #10345a 100%);
  --t-grad: linear-gradient(135deg, #12528c 0%, #1b6fbf 100%);
  --t-success: #15803d; --t-success-bg: #e8f7ee;
  --t-warning: #b45309; --t-warning-bg: #fff4e0;
  --t-danger: #be123c;  --t-danger-bg: #fdecef;
  --t-info: #1d4ed8;    --t-info-bg: #e8f0fe;
  --t-violet: #6d28d9;  --t-violet-bg: #f1ebfe;
  --t-neutral: #475569; --t-neutral-bg: #eef2f7;
}

/* ---------- Base ---------- */
html { font-size: 15px; }

html body,
html body.g-sidenav-show,
html body.bg-gray-100 {
  font-family: 'Inter', 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
  color: var(--t-text);
  background: radial-gradient(1200px 600px at 100% -10%, rgba(27, 111, 191, 0.07), transparent 60%),
              radial-gradient(900px 500px at -10% 110%, rgba(18, 82, 140, 0.06), transparent 60%),
              var(--t-bg) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: var(--t-text);
  letter-spacing: -0.015em;
}

body p { color: var(--t-text-2); }
body a { color: var(--t-primary-2); }
body .text-muted, body .text-secondary { color: var(--t-muted) !important; }

::selection { background: rgba(27, 111, 191, 0.18); }

* { scrollbar-width: thin; scrollbar-color: #c3cddb transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #c3cddb; border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #9fb0c6; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Layout: the page scrolls, not an inner box ---------- */
body .main-content,
body .main-content.max-height-vh-100 {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 0 !important;
}

body .main-content > .container-fluid.py-4,
body .main-content > .container-fluid.py-3 {
  padding: 1.25rem 1.5rem 2.5rem !important;
  max-width: 1680px;
}

/* ---------- Sidebar ---------- */
body #sidenav-main {
  background: var(--t-sidebar) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 40px rgba(4, 14, 28, 0.28) !important;
  width: 248px !important;
  max-width: 248px !important;
  overflow: hidden;
}

body #sidenav-main .sidenav-header {
  padding: 1rem 0.85rem 0.6rem !important;
  height: auto !important;
}

body #sidenav-main .navbar-brand {
  display: flex !important;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem !important;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

body #sidenav-main .navbar-brand-img { max-height: 30px !important; }
body #sidenav-main .navbar-brand span { font-size: 0.95rem !important; font-weight: 700 !important; letter-spacing: -0.01em; }

body #sidenav-main hr.horizontal { margin: 0.35rem 0 0.5rem !important; opacity: 0.15; }

body #sidenav-main #sidenav-collapse-main {
  height: calc(100% - 92px) !important;
  max-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 0.75rem;
}

body #sidenav-main .navbar-nav .nav-item { margin: 0 !important; }

body #sidenav-main .nav-link {
  display: flex !important;
  align-items: center;
  gap: 0.15rem;
  margin: 2px 10px !important;
  padding: 0.55rem 0.65rem !important;
  border-radius: 12px !important;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
  transform: none !important;
}

body #sidenav-main .nav-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

body #sidenav-main .nav-link.active {
  background: linear-gradient(135deg, rgba(56, 132, 214, 0.95), rgba(27, 111, 191, 0.95)) !important;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 18px rgba(3, 14, 30, 0.32) !important;
}

body #sidenav-main .nav-link .icon.icon-shape {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
  margin-right: 0.55rem !important;
}

body #sidenav-main .nav-link.active .icon.icon-shape { background: rgba(255, 255, 255, 0.2) !important; }
body #sidenav-main .nav-link .icon i { color: #dbe8f8 !important; font-size: 0.8rem !important; }
body #sidenav-main .nav-link-text {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #dbe6f3 !important;
  margin-left: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body #sidenav-main .nav-link.active .nav-link-text { color: #fff !important; font-weight: 600 !important; }
body #sidenav-main .nav-link .badge { margin-left: auto !important; }

@media (min-width: 1200px) {
  body.g-sidenav-show .main-content { margin-left: 272px !important; }
}

/* ---------- Top bar ---------- */
body .navbar-main {
  position: sticky !important;
  top: 10px;
  z-index: 1030;
  margin: 10px 1.5rem 0 !important;
  padding: 0.5rem 0.75rem !important;
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--t-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
  min-height: 0 !important;
}

body .navbar-main .container-fluid { padding: 0 !important; }

body .navbar-main .oms-toolbar { gap: 0.75rem; flex-wrap: nowrap; }

body .navbar-main .oms-toolbar-left > .ms-md-auto,
body .navbar-main .oms-toolbar-left > div {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

body .navbar-main .col-md-6.mx-auto {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
}

body .navbar-main .col-md-6.mx-auto .input-group { width: 260px !important; max-width: 260px !important; flex-wrap: nowrap; }
body .navbar-main .col-md-6.mx-auto .input-group-text { font-size: 0.78rem; white-space: nowrap; }

body .navbar-main .input-group {
  max-width: 380px !important;
  width: 100%;
  flex-wrap: nowrap !important;
}

body .navbar-main .input-group .form-control,
body .navbar-main .input-group .form-select,
body .navbar-main .input-group-text {
  min-height: 38px !important;
  height: 38px;
  font-size: 0.85rem;
}

body .navbar-main .input-group > .btn,
body .navbar-main .input-group > button {
  min-height: 38px !important;
  height: 38px;
  margin: 0 0 0 0.4rem !important;
  border-radius: 10px !important;
  padding: 0 0.9rem !important;
  width: auto !important;
}

body .navbar-main .oms-toolbar-right .nav-link { color: var(--t-text-2) !important; font-weight: 600; font-size: 0.85rem; }
body .navbar-main .oms-toolbar-right .fa-user { color: var(--t-primary) !important; }

/* ---------- Page header (hero) ---------- */
body .oms-hero-grid {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  margin-bottom: 1.25rem !important;
}

body .oms-hero-panel {
  flex: 1 1 420px;
  padding: 1.15rem 1.35rem !important;
  border-radius: var(--t-radius) !important;
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  box-shadow: var(--t-shadow) !important;
  min-height: 0 !important;
}

body .oms-hero-panel h1,
body .oms-hero-panel h2 {
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem) !important;
  font-weight: 800 !important;
  margin: 0.15rem 0 0.25rem !important;
  line-height: 1.2 !important;
}

body .oms-hero-panel p {
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: var(--t-muted) !important;
}

body .oms-page-hero__eyebrow {
  display: inline-block;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--t-primary-2) !important;
  background: var(--t-primary-soft) !important;
  padding: 0.22rem 0.55rem !important;
  border-radius: 999px;
  opacity: 1 !important;
}

body .oms-hero-stats {
  flex: 0 1 auto;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 0.75rem;
}

body .oms-mini-stat,
body .oms-page-pill {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-width: 150px;
  min-height: 0 !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--t-radius) !important;
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  box-shadow: var(--t-shadow) !important;
}

body .oms-mini-stat span,
body .oms-page-pill span {
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-muted) !important;
}

body .oms-mini-stat strong,
body .oms-page-pill strong {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--t-text) !important;
  margin-top: 0.1rem;
}

/* Dashboard banner */
body .oms-page-hero {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 1.25rem !important;
  border-radius: 20px !important;
  background: linear-gradient(120deg, #0b2440 0%, #12528c 60%, #1b6fbf 100%) !important;
  box-shadow: var(--t-shadow-lg) !important;
  border: 0 !important;
}

body .oms-page-hero h1 {
  color: #fff !important;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important;
  font-weight: 800 !important;
  margin: 0.35rem 0 0 !important;
}

body .oms-page-hero .oms-page-hero__eyebrow { color: #cfe3f9 !important; background: rgba(255, 255, 255, 0.12) !important; }

body .oms-page-hero .oms-page-pill {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}
body .oms-page-hero .oms-page-pill span { color: #b9d3ee !important; }
body .oms-page-hero .oms-page-pill strong { color: #fff !important; }
body .oms-page-hero__meta { display: flex !important; gap: 0.6rem; flex-wrap: wrap; }

body .oms-page-inline-header h1,
body .oms-page-inline-header h2 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem) !important; font-weight: 800 !important; }

/* ---------- Cards ---------- */
body .card,
body .oms-surface-card {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-radius) !important;
  box-shadow: var(--t-shadow) !important;
  transform: none !important;
}

body .card:hover { transform: none !important; box-shadow: var(--t-shadow) !important; }

body .card .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--t-border) !important;
  padding: 1rem 1.25rem !important;
  border-radius: var(--t-radius) var(--t-radius) 0 0 !important;
}

body .card .card-body { background: transparent !important; }

body .card-header h5, body .card-header h6 { font-weight: 700 !important; margin: 0; }

body .oms-section-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

body .oms-section-head h2,
body .oms-section-title,
body section > h2 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

body .oms-section-tag {
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--t-primary) !important;
  background: var(--t-primary-soft) !important;
  border: 0 !important;
  padding: 0.3rem 0.65rem !important;
  border-radius: 999px !important;
}

/* Dashboard sections (plain <section> blocks) */
body .main-content section.oms-section-shell {
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  box-shadow: var(--t-shadow);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.25rem;
}

body .main-content section.oms-section-shell > p { color: var(--t-muted); font-size: 0.9rem; margin: 0.25rem 0 1rem; }
body .main-content section.oms-charts.oms-section-shell { background: transparent; border: 0; box-shadow: none; padding: 0; }
body .main-content section.oms-kpi-shell.oms-section-shell { padding: 1rem; }

/* ---------- Buttons ---------- */
body .btn {
  font-family: 'Inter', system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  border-radius: var(--t-radius-sm) !important;
  padding: 0.55rem 1rem !important;
  box-shadow: none !important;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

body .btn:hover { transform: translateY(-1px); }
body .btn:active { transform: none; }
body .btn-sm { font-size: 0.8rem !important; padding: 0.38rem 0.75rem !important; border-radius: 8px !important; }
body .btn-lg { font-size: 0.95rem !important; padding: 0.75rem 1.4rem !important; }

body .btn-primary, body .bg-gradient-primary.btn {
  background: var(--t-grad) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(18, 82, 140, 0.22) !important;
}
body .btn-primary:hover { box-shadow: 0 10px 20px rgba(18, 82, 140, 0.28) !important; }

body .btn-success { background: linear-gradient(135deg, #15803d, #22a35a) !important; border: 0 !important; color: #fff !important; }
body .btn-danger { background: linear-gradient(135deg, #be123c, #e11d48) !important; border: 0 !important; color: #fff !important; }
body .btn-secondary { background: #e9eef5 !important; border: 0 !important; color: var(--t-text-2) !important; }

body .btn-outline-primary { background: #fff !important; color: var(--t-primary) !important; border: 1px solid #bcd3ec !important; }
body .btn-outline-primary:hover, body .btn-outline-primary.active { background: var(--t-primary-soft) !important; color: var(--t-primary) !important; }
body .btn-outline-secondary { background: #fff !important; color: var(--t-text-2) !important; border: 1px solid var(--t-border-strong) !important; }
body .btn-outline-danger { background: #fff !important; color: var(--t-danger) !important; border: 1px solid #f3c2cd !important; }
body .btn-outline-danger:hover { background: var(--t-danger-bg) !important; }

body .btn-group .btn.active,
body .btn-group .btn.btn-primary { background: var(--t-grad) !important; color: #fff !important; }

/* ---------- Forms ---------- */
body .form-control,
body .form-select,
body select.form-control,
body .select2-container .select2-selection--single {
  font-family: 'Inter', system-ui, sans-serif !important;
  min-height: 42px;
  border: 1px solid var(--t-border-strong) !important;
  border-radius: var(--t-radius-sm) !important;
  background-color: #fff !important;
  color: var(--t-text) !important;
  font-size: 0.9rem !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body textarea.form-control { min-height: 84px; }
body .form-control-sm, body .form-select-sm { min-height: 34px !important; font-size: 0.82rem !important; border-radius: 8px !important; }

body .form-control:focus,
body .form-select:focus,
body .select2-container--focus .select2-selection--single,
body .select2-container--open .select2-selection--single {
  border-color: var(--t-primary-2) !important;
  box-shadow: var(--t-ring) !important;
  outline: 0;
}

body .form-control::placeholder { color: #94a3b8 !important; }
body .form-control[readonly] { background: var(--t-surface-2) !important; color: var(--t-muted) !important; }

body .form-label,
body .form-group > label,
body .oms-form-shell label:not(.form-check-label) {
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: var(--t-muted) !important;
  margin-bottom: 0.35rem !important;
}

body .input-group-text {
  background: var(--t-surface-2) !important;
  border: 1px solid var(--t-border-strong) !important;
  color: var(--t-muted) !important;
  border-radius: var(--t-radius-sm) !important;
}

body .input-group > .input-group-text + .form-control { border-left: 0 !important; }
body .input-group > .input-group-text { border-right: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body .input-group > .input-group-text + .form-control { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

body input[type="file"].form-control { padding: 0.5rem 0.65rem !important; }
body input[type="file"]::file-selector-button {
  border: 0;
  border-radius: 8px;
  background: var(--t-primary-soft);
  color: var(--t-primary);
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  margin-right: 0.75rem;
  cursor: pointer;
}

/* Filter bars above tables */
body .oms-filter-bar,
body .filter-section {
  padding: 0.9rem 1.25rem 0 !important;
}

body .oms-filter-bar .input-group,
body .filter-section .input-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem;
  margin-bottom: 0.9rem !important;
}

body .oms-filter-bar .input-group > *,
body .filter-section .input-group > * { border-radius: var(--t-radius-sm) !important; margin-left: 0 !important; }
body .filter-section .input-group > .input-group-text { border-right: 1px solid var(--t-border-strong) !important; }
body .filter-section .input-group > .input-group-text + .form-control { border-left: 1px solid var(--t-border-strong) !important; }
body .filter-section .input-group > .form-control { flex: 1 1 260px !important; min-width: 0; }
body .filter-section .input-group > .form-select { flex: 0 1 200px !important; }

/* ---------- Tables ---------- */
body .table-responsive,
body .oms-table-wrap,
body .oms-scroll-area {
  border-radius: 0 0 var(--t-radius) var(--t-radius);
  max-height: 72vh;
}

body .table {
  margin-bottom: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0;
  color: var(--t-text-2) !important;
  min-width: 100%;
}

body .table > thead > tr > th,
body .table thead th,
body table.oms-rich-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f6f8fc !important;
  color: var(--t-muted) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 0.75rem 1rem !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--t-border) !important;
  white-space: nowrap;
  opacity: 1 !important;
}

body .table > tbody > tr > td,
body table.oms-rich-table td {
  padding: 0.8rem 1rem !important;
  font-size: 0.86rem !important;
  vertical-align: middle !important;
  border-top: 0 !important;
  border-bottom: 1px solid #eef2f7 !important;
  background: transparent !important;
  color: var(--t-text-2);
  line-height: 1.45;
}

body .table > tbody > tr:nth-child(odd) > td { background: transparent !important; }
body .table > tbody > tr { transform: none !important; transition: background 0.12s ease; }
body .table > tbody > tr:hover > td { background: #f7faff !important; }
body .table > tbody > tr:last-child > td { border-bottom: 0 !important; }
body table.oms-rich-table, body table[border="1"] { border: 0 !important; }

body .table td .oms-thumb,
body .table td img.oms-thumb,
body .table td img.avatar {
  width: 48px !important;
  height: 48px !important;
  object-fit: cover;
  border-radius: 10px !important;
  border: 1px solid var(--t-border);
  margin: 2px !important;
}

body .table td form { margin: 0; }
body .table td .form-control, body .table td .form-select { min-height: 36px; font-size: 0.82rem !important; }

/* ---------- Status badges (tone set by oms-ui.js) ---------- */
body .oms-status-pill,
body .oms-mobile-card__status,
body .badge {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: capitalize !important;
  padding: 0.28rem 0.6rem !important;
  border-radius: 999px !important;
  white-space: nowrap;
  background: var(--t-neutral-bg) !important;
  color: var(--t-neutral) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body .oms-status-pill::before,
body .oms-mobile-card__status[data-tone]::before,
body .badge[data-tone]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

body [data-tone="success"] { background: var(--t-success-bg) !important; color: var(--t-success) !important; }
body [data-tone="warning"] { background: var(--t-warning-bg) !important; color: var(--t-warning) !important; }
body [data-tone="danger"]  { background: var(--t-danger-bg) !important;  color: var(--t-danger) !important; }
body [data-tone="info"]    { background: var(--t-info-bg) !important;    color: var(--t-info) !important; }
body [data-tone="violet"]  { background: var(--t-violet-bg) !important;  color: var(--t-violet) !important; }

body .badge.bg-danger.rounded-pill,
body .position-relative .badge { background: #e11d48 !important; color: #fff !important; padding: 0.15rem 0.4rem !important; }
body .position-relative .badge::before, body .badge.bg-danger.rounded-pill::before { display: none; }

/* ---------- Dashboard KPI tiles ---------- */
body .oms-kpi-shell .card { overflow: hidden; }
body .oms-kpi-shell .card .card-body { padding: 1rem 1.1rem !important; }
body .oms-kpi-shell .numbers p {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase !important;
  color: var(--t-muted) !important;
  margin-bottom: 0.35rem !important;
}
body .oms-kpi-shell .numbers h5 {
  font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.5rem) !important;
  font-weight: 800 !important;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
body .oms-kpi-shell .numbers h5 > span[id$="Change"] {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0;
}
body .oms-kpi-shell .row > [class*="col-8"] { flex: 1 1 auto; width: auto; max-width: calc(100% - 56px); }
body .oms-kpi-shell .row > [class*="col-4"] { flex: 0 0 auto; width: auto; }
body .oms-kpi-shell .icon.icon-shape { width: 44px !important; height: 44px !important; border-radius: 12px !important; box-shadow: none !important; }
body .oms-kpi-shell #salesData, body .oms-kpi-shell #ordersData,
body .oms-kpi-shell #quarterlySalesData, body .oms-kpi-shell #quarterlyOrdersData { row-gap: 1rem; }
body .oms-kpi-shell [class*="col-xl-3"] { margin-bottom: 0 !important; }

/* ---------- Charts ---------- */
body .oms-chart-card { padding: 1.1rem 1.25rem 1.25rem !important; }
body .oms-chart-card__head h6 { font-size: 1rem !important; font-weight: 700 !important; }
body .oms-chart-filters .form-select { min-height: 34px !important; height: 34px; font-size: 0.8rem !important; border-radius: 8px !important; }

/* ---------- Order form ---------- */
body .oms-form-block { border-radius: 14px; border-color: var(--t-border); background: var(--t-surface); }
body .oms-product-item { background: var(--t-surface-2); border-color: #c9d8ea; }
body .oms-order-section .oms-order-head h2 { font-size: 1.35rem !important; font-weight: 800 !important; }

/* ---------- Alerts ---------- */
body .alert {
  font-size: 0.88rem;
  border-radius: 12px !important;
  padding: 0.85rem 1.05rem !important;
  box-shadow: none !important;
}

/* ---------- Mobile cards ---------- */
body .oms-mobile-card {
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: var(--t-radius) !important;
  box-shadow: var(--t-shadow) !important;
}

body .oms-mobile-card__meta div,
body .oms-mobile-card__block {
  background: var(--t-surface-2) !important;
  border: 1px solid #edf1f6 !important;
  border-radius: 12px !important;
}

body .oms-mobile-card__details { background: #fff !important; border-color: var(--t-border) !important; }

/* ---------- Dropdowns, modals ---------- */
body .dropdown-menu {
  border: 1px solid var(--t-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--t-shadow-lg) !important;
  padding: 0.4rem !important;
}
body .dropdown-item { border-radius: 8px; font-size: 0.86rem; padding: 0.5rem 0.75rem !important; }
body .modal-content { border: 0 !important; border-radius: 18px !important; box-shadow: var(--t-shadow-lg) !important; }
body .modal-header { border-bottom: 1px solid var(--t-border) !important; background: var(--t-surface-2) !important; border-radius: 18px 18px 0 0; }
body .modal-footer { border-top: 1px solid var(--t-border) !important; }

/* ---------- Pagination / misc ---------- */
body .oms-pager { padding-bottom: 1rem !important; }
body .oms-attachment-chip {
  background: var(--t-primary-soft) !important;
  color: var(--t-primary) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 0.32rem 0.7rem !important;
}
body .oms-attachment-chip:hover { background: rgba(27, 111, 191, 0.18) !important; }
body .progress { height: 6px !important; border-radius: 999px; background: #e9eef5; }
body .progress-bar { border-radius: 999px; }

/* =====================================================================
   Standalone pages (edit / create forms without the sidebar)
   ===================================================================== */
body:not(.g-sidenav-show) .oblique,
body:not(.g-sidenav-show) .oblique-image,
body.oms-standalone .oblique { display: none !important; }

body:not(.g-sidenav-show) > .container.position-sticky,
body.oms-standalone > .container.position-sticky { max-width: 1100px; }

body:not(.g-sidenav-show) nav.navbar.blur {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid var(--t-border);
  border-radius: 16px !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
}

body:not(.g-sidenav-show) .page-header { min-height: 100vh !important; align-items: flex-start !important; padding: 6.5rem 0 3rem; }
body:not(.g-sidenav-show) .page-header .row { justify-content: center; }
body:not(.g-sidenav-show) .page-header [class*="col-xl-4"] {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 auto !important;
}
body:not(.g-sidenav-show) .page-header .col-md-6:not([class*="col-xl"]) { display: none !important; }

body:not(.g-sidenav-show) .card.card-plain {
  margin-top: 0 !important;
  background: var(--t-surface) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--t-shadow-lg) !important;
  padding: 0.5rem;
}

body:not(.g-sidenav-show) .card.card-plain .card-header { border-bottom: 1px solid var(--t-border) !important; }
body:not(.g-sidenav-show) .card.card-plain .card-header h3,
body:not(.g-sidenav-show) .card.card-plain .card-header h4 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--t-text) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  text-transform: none;
}
body:not(.g-sidenav-show) .card.card-plain .card-header h3::first-letter { text-transform: uppercase; }
body:not(.g-sidenav-show) .card.card-plain .card-body { padding: 1.25rem 1.35rem 1.5rem !important; }
body:not(.g-sidenav-show) .card.card-plain .btn { width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  body #sidenav-main { border-radius: 18px !important; }
  body .navbar-main { margin: 8px 0.6rem 0 !important; top: 8px; }
  body .navbar-main .col-md-6.mx-auto { display: none !important; }
  body .navbar-main .input-group { max-width: none !important; }
  body .main-content > .container-fluid.py-4,
  body .main-content > .container-fluid.py-3 { padding: 1rem 0.75rem 2rem !important; }
  body .oms-hero-stats { flex: 1 1 100%; }
  body .oms-mini-stat, body .oms-page-pill { flex: 1 1 0; min-width: 0; padding: 0.6rem 0.85rem !important; }
  body .table-responsive, body .oms-table-wrap, body .oms-scroll-area { max-height: none; }
}

@media (max-width: 575.98px) {
  html { font-size: 14.5px; }
  body .oms-hero-panel { padding: 1rem 1.05rem !important; }
  body .oms-page-hero { padding: 1rem 1.1rem !important; border-radius: 16px !important; }
  body .main-content section.oms-section-shell { padding: 1rem 0.85rem; }
  body .card .card-header { padding: 0.85rem 1rem !important; }
  body .filter-section, body .oms-filter-bar { padding: 0.75rem 0.85rem 0 !important; }
  body .filter-section .input-group > .form-select { flex: 1 1 calc(50% - 0.5rem) !important; }
  body:not(.g-sidenav-show) .page-header { padding: 5.5rem 0 2rem; }
  body:not(.g-sidenav-show) .card.card-plain { border-radius: 16px !important; }
}

/* ---------- Fixes after review ---------- */
/* Dashboard top bar: "Select Table" and search on one row */
@media (min-width: 1200px) {
  body .navbar-main .col-md-6.mx-auto {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
  }
  body .navbar-main .col-md-6.mx-auto > .input-group:first-child { width: 250px !important; max-width: 250px !important; }
  body .navbar-main .col-md-6.mx-auto > .input-group + .input-group { width: 360px !important; max-width: 360px !important; }
}

/* Long text wraps instead of stretching tables sideways */
body .table > tbody > tr > td {
  white-space: normal !important;
  max-width: 440px;
  overflow-wrap: break-word;
}
body .table > tbody > tr > td.oms-cell-amount,
body .table > tbody > tr > td .oms-metric { white-space: nowrap !important; }

/* Small forms inside table cells sit on one line */
body .table td .oms-inline-form,
body .table td .form-inline,
body .table td form.oms-form-shell {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body .table td .oms-inline-form .form-group,
body .table td .form-inline .form-group {
  display: flex !important;
  align-items: center;
  gap: 0.4rem;
  margin: 0 !important;
}
body .table td form .form-control,
body .table td form .form-select { width: auto !important; min-width: 140px; margin: 0 !important; }
body .table td form .btn { margin: 0 !important; white-space: nowrap; }

/* ---------- Edit pages (edit order / edit rejected product) ---------- */
body .oms-edit-page { padding: 6rem 1rem 3rem !important; }
body .oms-edit-wrap { max-width: 920px; margin: 0 auto; }

body .oms-edit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
body .oms-edit-head h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important; font-weight: 800 !important; margin: 0.4rem 0 0.2rem !important; }
body .oms-edit-head p { margin: 0; color: var(--t-muted); }
body .oms-edit-id { color: var(--t-primary-2); }

body .oms-edit-card {
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 18px;
  box-shadow: var(--t-shadow);
  padding: 1.25rem 1.4rem 1.4rem;
  margin-bottom: 1rem;
}

body .oms-edit-card__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 0 1rem !important;
}
body .oms-edit-card__title i {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--t-primary-soft);
  color: var(--t-primary-2);
  font-size: 0.8rem;
}
body .oms-edit-card__title small, body .form-label small { font-weight: 500; color: var(--t-muted); text-transform: none; letter-spacing: 0; }

body .oms-edit-thumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
body .oms-edit-thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--t-border); }

body .oms-design-box {
  height: 100%;
  border: 1.5px dashed #9cc0e6;
  background: linear-gradient(180deg, #f5f9ff, #ffffff);
  border-radius: 14px;
  padding: 0.9rem 1rem 1rem;
}

body .oms-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
body .oms-edit-actions .btn { min-width: 150px; }

/* Order form: design file block stands out the same way */
body #orderForm .oms-form-block:has(#designFile) {
  border: 1.5px dashed #9cc0e6;
  background: linear-gradient(180deg, #f5f9ff, #ffffff);
}

@media (max-width: 575.98px) {
  body .oms-edit-page { padding: 5.25rem 0.5rem 2rem !important; }
  body .oms-edit-card { padding: 1rem; border-radius: 16px; }
  body .oms-edit-head .btn { width: 100%; }
  body .oms-edit-actions { flex-direction: column-reverse; }
  body .oms-edit-actions .btn { width: 100%; }
}

/* Long-text table cells get a readable width (class set by oms-ui.js) */
body .table > tbody > tr > td.oms-long-text { min-width: 260px; max-width: 420px; }

/* ---------- Sign-in screen ---------- */
html body:has(.login-container) {
  background: radial-gradient(900px 500px at 15% 10%, rgba(56, 132, 214, 0.35), transparent 60%),
              radial-gradient(800px 500px at 90% 90%, rgba(27, 111, 191, 0.30), transparent 60%),
              linear-gradient(135deg, #061527 0%, #0c2742 55%, #12528c 100%) !important;
  min-height: 100vh;
  padding: 1rem;
}
body .login-container {
  width: 100%;
  max-width: 420px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 60px rgba(2, 10, 24, 0.45) !important;
  padding: 2.25rem 2rem !important;
}
body .login-container .logo h1 {
  background: var(--t-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
body .login-container .logo p { color: var(--t-muted) !important; letter-spacing: 0.18em; font-size: 0.7rem !important; }
body .login-container .welcome h2 { font-size: 1.35rem !important; font-weight: 800 !important; }
body .login-container .welcome p { color: var(--t-muted) !important; }
body .login-container label { color: var(--t-text-2) !important; font-weight: 600 !important; font-size: 0.82rem !important; }
body .login-container input[type="text"],
body .login-container input[type="password"],
body .login-container input[type="email"],
body .login-container input[type="number"] {
  border: 1px solid var(--t-border-strong) !important;
  border-radius: 12px !important;
  padding: 0.75rem 0.9rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.95rem !important;
  box-shadow: none !important;
}
body .login-container input:focus { border-color: var(--t-primary-2) !important; box-shadow: var(--t-ring) !important; outline: 0; }
body .login-container .submit-btn {
  background: var(--t-grad) !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 0.85rem !important;
  font-weight: 700 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  box-shadow: 0 10px 22px rgba(18, 82, 140, 0.35) !important;
}
body .login-container .footer { color: var(--t-muted) !important; font-size: 0.75rem !important; }

/* Rows placed directly in <main> (no container) must not stick out by their gutter */
body .main-content > .row { margin-left: 0 !important; margin-right: 0 !important; }

/* Product thumbnails inside table cells: compact grid instead of a tall column */
body .table td:has(> a > img),
body .table td:has(> img) {
  min-width: 204px;
  max-width: 236px;
  line-height: 0;
}
body .table td > a:has(img) { display: inline-block !important; margin: 2px; }
body .table td > a > img,
body .table td > img { width: 48px !important; height: 48px !important; margin: 0 !important; object-fit: cover; border-radius: 10px !important; }
body .table td:has(> a > img) > *:not(a):not(img) { line-height: 1.4; }

/* ---------- Phone fixes after review ---------- */
@media (max-width: 1199.98px) {
  /* Keep the dashboard search; only the "Select Table" jump list is hidden */
  body .navbar-main .col-md-6.mx-auto {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  body .navbar-main .col-md-6.mx-auto > .input-group:first-child { display: none !important; }
  body .navbar-main .col-md-6.mx-auto > .input-group + .input-group { width: 100% !important; max-width: none !important; }

  /* Filter bars: one row for the search box, selects below */
  body .filter-section .input-group,
  body .oms-filter-bar .input-group { flex-direction: row !important; align-items: center; }
  body .filter-section .input-group > .form-control,
  body .oms-filter-bar .input-group > .form-control { flex: 1 1 0 !important; height: 42px; min-height: 42px; }
  body .filter-section .input-group > .input-group-text { flex: 0 0 42px !important; height: 42px; justify-content: center; }

  /* Standalone edit pages keep side padding */
  body main.main-content.oms-edit-page,
  body.oms-suite-ready main.main-content.oms-edit-page { padding-left: 0.85rem !important; padding-right: 0.85rem !important; }

  /* Dashboard banner: left-aligned on phones */
  body .oms-page-hero { justify-content: flex-start; }
  body .oms-page-hero__copy { width: 100%; }
  body .oms-page-hero__meta { width: 100%; }
  body .oms-page-hero__meta .oms-page-pill { flex: 1 1 0; }
}

@media (max-width: 1199.98px) {
  html body.oms-suite-ready .navbar-main .col-md-6.mx-auto { display: flex !important; }
  html body.oms-suite-ready .navbar-main .col-md-6.mx-auto > .input-group:first-child { display: none !important; }
  html body.oms-suite-ready .navbar-main .col-md-6.mx-auto > .input-group + .input-group { display: flex !important; }

  /* Filter bar: [icon][search.............] then the two selects side by side */
  html body .filter-section .input-group,
  html body .oms-filter-bar .input-group { flex-wrap: wrap !important; }
  html body .filter-section .input-group > .form-control,
  html body .oms-filter-bar .input-group > .form-control { flex: 1 1 calc(100% - 50px) !important; width: auto !important; }
  html body .filter-section .input-group > .form-select,
  html body .oms-filter-bar .input-group > .form-select { flex: 1 1 calc(50% - 0.25rem) !important; width: auto !important; }
}

/* =====================================================================
   Dashboard workspace tabs (oms-workspace.js)
   ===================================================================== */
body .oms-ws-hidden { display: none !important; }

body .oms-ws-tabs {
  position: sticky;
  top: 78px;
  z-index: 1020;
  display: flex;
  gap: 0.35rem;
  margin: 0 0 1.25rem;
  padding: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid var(--t-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
body .oms-ws-tabs::-webkit-scrollbar { display: none; }

body .oms-ws-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--t-muted);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
body .oms-ws-tab i { font-size: 0.85rem; opacity: 0.8; }
body .oms-ws-tab:hover { background: var(--t-surface-2); color: var(--t-text); }
body .oms-ws-tab.is-active {
  background: var(--t-grad);
  color: #fff;
  box-shadow: 0 6px 14px rgba(18, 82, 140, 0.25);
}
body .oms-ws-tab.is-active i { opacity: 1; }
body .oms-ws-count {
  min-width: 20px;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--t-danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}
body .oms-ws-tab.is-active .oms-ws-count { background: #fff; color: var(--t-primary); }

/* Panels in the workspace sit flush under the tabs */
body.oms-has-workspace [data-ws-tab] { margin-top: 0 !important; }
body.oms-has-workspace .container.mt-5[data-ws-tab] { max-width: none; padding: 0; }
body.oms-has-workspace .container.mt-5[data-ws-tab] > [class*="col-lg-8"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }

@media (max-width: 1199.98px) {
  body .oms-ws-tabs { top: 70px; margin-left: -0.15rem; margin-right: -0.15rem; border-radius: 14px; }
  body .oms-ws-tab { padding: 0.55rem 0.8rem; font-size: 0.82rem; }
}

/* =====================================================================
   Grouped order rows / cards (Overall Orders)
   ===================================================================== */
body .oms-orders-table { min-width: 1100px; }
body .oms-orders-table td { vertical-align: top !important; }
body .oms-order-cell { white-space: nowrap !important; }
body .oms-order-id {
  display: inline-block;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--t-primary-2) !important;
  text-decoration: none !important;
}
body .oms-order-id:hover { text-decoration: underline !important; }
body .oms-order-cell small, body .oms-amount-cell small { display: block; color: var(--t-muted); font-size: 0.75rem; margin-top: 0.15rem; }
body .oms-amount-cell strong { font-size: 0.95rem; color: var(--t-text); white-space: nowrap; }
body .oms-amount-cell small { white-space: nowrap; }

body .oms-products-cell { min-width: 300px; max-width: 460px !important; }
body .oms-product-row {
  position: relative;
  padding: 0.5rem 0.65rem;
  border: 1px solid #edf1f6;
  border-radius: 10px;
  background: var(--t-surface-2);
}
body .oms-product-row + .oms-product-row { margin-top: 0.4rem; }
body .oms-product-row__main { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-right: 3.2rem; }
body .oms-product-row__main strong { color: var(--t-text); font-size: 0.85rem; }
body .oms-product-row__meta { font-size: 0.78rem; color: var(--t-muted); margin-top: 0.2rem; line-height: 1.4; }
body .oms-product-row__edit {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--t-primary-2) !important;
  text-decoration: none !important;
}
body .oms-product-row__main .oms-status-pill { font-size: 0.66rem !important; padding: 0.15rem 0.45rem !important; }
body .oms-more-images {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin: 2px; border-radius: 10px;
  background: var(--t-primary-soft); color: var(--t-primary); font-weight: 700; font-size: 0.8rem; line-height: 1;
  vertical-align: top;
}

body .oms-row-actions { display: inline-flex; gap: 0.4rem; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
body .oms-row-actions form { margin: 0; }

/* Phone card */
body .oms-order-card { padding: 1rem !important; }
body .oms-order-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
body .oms-order-card__top small { display: block; color: var(--t-muted); font-size: 0.75rem; margin-top: 0.15rem; }
body .oms-order-card__amount { text-align: right; font-weight: 800; font-size: 1.05rem; color: var(--t-text); white-space: nowrap; }
body .oms-order-card__amount small { display: block; font-size: 0.72rem; font-weight: 600; }
body .oms-order-card__customer {
  margin: 0.65rem 0;
  font-size: 0.8rem;
  color: var(--t-text-2);
  background: var(--t-surface-2);
  border-radius: 10px;
  padding: 0.45rem 0.65rem;
  word-break: break-all;
}
body .oms-order-card__customer i { color: var(--t-primary-2); margin-right: 0.3rem; }
body .oms-order-card .oms-mobile-media { margin-bottom: 0.65rem; }
body .oms-order-card .oms-mobile-media img { width: 60px !important; height: 60px !important; }
body .oms-order-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--t-border);
}

/* Orders table fits the screen: narrower products column, stacked actions */
body .oms-orders-table { min-width: 0 !important; width: 100%; }
body .oms-orders-table .oms-products-cell { min-width: 260px; max-width: 380px !important; }
body .oms-orders-table td:has(> a > img) { min-width: 172px; max-width: 176px; }
body .oms-orders-table .oms-row-actions { flex-direction: column; align-items: stretch; }
body .oms-orders-table .oms-row-actions .btn { width: 100%; }

/* Phones: role/operator chips are not needed above every page */
@media (max-width: 575.98px) {
  body .oms-hero-stats,
  body .oms-page-hero__meta { display: none !important; }
}

/* Sidebar group labels (added by oms-ui.js) */
body #sidenav-main .oms-nav-group {
  list-style: none;
  padding: 0.85rem 1.1rem 0.3rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(219, 232, 248, 0.5);
}
body #sidenav-main .oms-nav-group:first-child { padding-top: 0.3rem; }
body #sidenav-main .oms-nav-sep { list-style: none; height: 1px; margin: 0.6rem 1rem; background: rgba(255, 255, 255, 0.08); }

/* Action buttons in table cells sit side by side */
body .table td form.d-inline,
body .table td form.oms-form-shell:not(.oms-inline-form),
body .table td > form {
  display: inline-flex !important;
  vertical-align: middle;
  margin: 0 0.3rem 0.3rem 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body .table td > .btn { margin: 0 0.3rem 0.3rem 0 !important; vertical-align: middle; }
body .table td form .btn { width: auto !important; }

body .btn-warning { background: #fff7e6 !important; color: #b45309 !important; border: 1px solid #f6d7a7 !important; }
body .btn-warning:hover { background: #ffefcc !important; }
body .table td .btn-secondary { background: #fff !important; color: var(--t-text-2) !important; border: 1px solid var(--t-border-strong) !important; }
body .table td .btn-danger { background: #fff !important; color: var(--t-danger) !important; border: 1px solid #f3c2cd !important; }
body .table td .btn-danger:hover { background: var(--t-danger-bg) !important; }
body .table td .btn-success { background: #fff !important; color: var(--t-success) !important; border: 1px solid #b7e4c7 !important; }

/* The grouped orders table sizes itself to the screen */
html body table#table3.oms-orders-table { min-width: 0 !important; }
html body table#table3.oms-orders-table > thead > tr > th,
html body table#table3.oms-orders-table > tbody > tr > td { padding: 0.75rem 0.7rem !important; }
html body table#table3.oms-orders-table .oms-products-cell { max-width: 340px !important; min-width: 240px; }
html body table#table3.oms-orders-table td:has(> a > img) { min-width: 128px; max-width: 132px; }
html body table#table3.oms-orders-table td:last-child,
html body table#table3.oms-orders-table th:last-child,
html body table#table3.oms-orders-table .oms-amount-cell { width: 1%; }
html body table#table3.oms-orders-table .oms-row-actions .btn { min-width: 0 !important; padding: 0.35rem 0.8rem !important; }
html body .oms-row-actions form,
html body .oms-row-actions form.oms-form-shell { min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; }
html body table#table3.oms-orders-table .oms-row-actions { width: 88px; }
html body table#table3.oms-orders-table .oms-row-actions form,
html body table#table3.oms-orders-table .oms-row-actions .btn { width: 100% !important; }
html body table#table3.oms-orders-table td:has(> a > img) { min-width: 138px; max-width: 138px; }
body #table1 td:last-child { white-space: nowrap !important; }

/* Approval queue: actions stacked, compact image column */
body #tableApproval td:last-child { width: 1%; }
body #tableApproval td:last-child .d-flex { flex-direction: column; gap: 0.35rem !important; }
body #tableApproval td:last-child form { margin: 0 !important; width: 100%; }
body #tableApproval td:last-child .btn { width: 100% !important; min-width: 92px; }
body #tableApproval td:has(> a > img) { min-width: 128px; max-width: 132px; }
html body .table td .oms-inline-form,
html body .table td form { min-width: 0 !important; }
html body table#table3.oms-orders-table td:nth-child(6) { min-width: 0 !important; }

/* =====================================================================
   Phones: any regular table becomes stacked cards (oms-ui.js adds data-label)
   ===================================================================== */
@media (max-width: 767.98px) {
  html body .table-responsive:has(> table.oms-stack),
  html body .oms-table-wrap:has(> table.oms-stack),
  html body .oms-scroll-area:has(> table.oms-stack) {
    overflow: visible !important;
    max-height: none !important;
    background: transparent !important;
    border: 0 !important;
  }

  html body table.oms-stack { min-width: 0 !important; width: 100% !important; border: 0 !important; }
  html body table.oms-stack > thead { display: none !important; }
  html body table.oms-stack,
  html body table.oms-stack > tbody,
  html body table.oms-stack > tbody > tr,
  html body table.oms-stack > tbody > tr > td { display: block !important; width: 100% !important; }

  html body table.oms-stack > tbody > tr {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--t-shadow) !important;
    margin: 0 0 0.75rem !important;
    padding: 0.35rem 0 !important;
  }
  html body table.oms-stack > tbody > tr:hover > td { background: transparent !important; }

  html body table.oms-stack > tbody > tr > td {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0.5rem 0.9rem !important;
    border: 0 !important;
    border-bottom: 1px dashed #eef2f7 !important;
    text-align: right;
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: 0.85rem !important;
  }
  html body table.oms-stack > tbody > tr > td:last-child { border-bottom: 0 !important; }

  html body table.oms-stack > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 38%;
    max-width: 38%;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--t-muted);
    padding-top: 0.15rem;
  }

  /* first cell reads as the card title */
  html body table.oms-stack > tbody > tr > td:first-child { font-weight: 700; color: var(--t-text); font-size: 0.92rem !important; }

  /* cells with buttons / images: content wraps on the right */
  html body table.oms-stack > tbody > tr > td > form,
  html body table.oms-stack > tbody > tr > td > .d-flex,
  html body table.oms-stack > tbody > tr > td > .progress-wrapper { margin-left: auto !important; }
  html body table.oms-stack > tbody > tr > td:has(> a > img) { flex-wrap: wrap; justify-content: flex-end; min-width: 0 !important; max-width: none !important; line-height: 0; }
  html body table.oms-stack > tbody > tr > td:has(> a > img)::before { flex-basis: 100%; max-width: 100%; margin-bottom: 0.4rem; line-height: 1.3; }
  html body table.oms-stack .progress-wrapper { width: 60% !important; }
  html body #tableApproval.oms-stack td:last-child .d-flex { flex-direction: row; }
  html body #tableApproval.oms-stack td:last-child .btn { min-width: 0; }

  /* "No data" rows */
  html body table.oms-stack > tbody > tr > td[colspan] { justify-content: center; text-align: center; color: var(--t-muted); }
  html body table.oms-stack > tbody > tr > td[colspan]::before { display: none; }
}

@media (max-width: 767.98px) {
  html body table.oms-stack > tbody > tr > td { background: transparent !important; }
  html body table.oms-stack > tbody > tr > td > .oms-cell-val {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
    text-align: right;
    line-height: 1.45;
  }
  html body table.oms-stack > tbody > tr > td > .oms-cell-val > div:not(.d-flex):not(.progress-wrapper) { flex-basis: 100%; }
  html body table.oms-stack > tbody > tr > td > .oms-cell-val form { margin: 0 !important; }
  html body table.oms-stack > tbody > tr > td > .oms-cell-val img { width: 52px !important; height: 52px !important; margin: 0 !important; }
  html body table.oms-stack > tbody > tr > td:has(> .oms-cell-val img) { flex-wrap: wrap; line-height: 1.4; }
  html body table.oms-stack > tbody > tr > td:has(> .oms-cell-val img)::before { flex-basis: 100%; max-width: 100%; margin-bottom: 0.35rem; }
  html body table.oms-stack > tbody > tr > td:has(> .oms-cell-val img) > .oms-cell-val { justify-content: flex-start; }
  html body table.oms-stack .oms-cell-val .progress-wrapper { width: 100% !important; margin: 0 !important; }
}

/* =====================================================================
   Filter panel, results summary, chips (Overall Orders + generic tables)
   ===================================================================== */
body .oms-filters {
  margin: 1rem 1.25rem 0.5rem;
  padding: 1rem;
  border: 1px solid var(--t-border);
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfcfe, #f5f8fc);
}
body .oms-filters__search { position: relative; margin-bottom: 0.75rem; }
body .oms-filters__search i { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--t-muted); font-size: 0.85rem; }
body .oms-filters__search .form-control { padding-left: 2.4rem !important; min-height: 44px; }
body .oms-filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
  align-items: end;
}
body .oms-filters__grid label { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
body .oms-filters__grid label > span {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-muted);
}
body .oms-filters__grid .form-control,
body .oms-filters__grid .form-select { min-height: 38px !important; height: 38px; font-size: 0.84rem !important; }
body .oms-filters__actions { display: flex; gap: 0.4rem; }
body .oms-filters__actions .btn { flex: 1 1 auto; min-height: 38px; white-space: nowrap; }

body .oms-results-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding-top: 0.5rem; padding-bottom: 0.75rem; font-size: 0.85rem; color: var(--t-text-2);
}
body .oms-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
body .oms-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.65rem; border-radius: 999px;
  background: var(--t-primary-soft); color: var(--t-primary) !important;
  font-size: 0.75rem; font-weight: 600; text-decoration: none !important;
}
body .oms-chip i { font-size: 0.65rem; opacity: 0.7; }
body .oms-chip:hover { background: rgba(27, 111, 191, 0.18); }

body .oms-empty-state { text-align: center; padding: 3rem 1rem; color: var(--t-muted); }
body .oms-empty-state i { font-size: 1.8rem; opacity: 0.4; margin-bottom: 0.6rem; display: block; }

/* Order table cells */
body .oms-customer-cell strong { display: block; color: var(--t-text); font-size: 0.86rem; }
body .oms-customer-cell small { display: block; color: var(--t-muted); font-size: 0.74rem; word-break: break-all; }
body .oms-customer-cell .oms-agent { color: var(--t-primary-2); margin-top: 0.2rem; word-break: normal; }
body .oms-product-row__meta b { color: var(--t-text-2); font-weight: 600; }
body .oms-product-row__vendor {
  margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px dashed #e3e9f2;
  font-size: 0.74rem; color: var(--t-violet); font-weight: 600;
}
body .oms-product-row__vendor.is-empty { color: var(--t-muted); font-weight: 500; }
body .oms-product-row__vendor i { margin-right: 0.15rem; }

body .oms-files-cell { min-width: 132px; }
body .oms-thumb-grid { display: grid; grid-template-columns: repeat(2, 52px); gap: 4px; line-height: 0; }
body .oms-thumb-grid a { display: block !important; margin: 0 !important; }
body .oms-thumb-grid img { width: 52px !important; height: 52px !important; margin: 0 !important; border-radius: 10px !important; object-fit: cover; }
body .oms-thumb-grid .oms-more-images, body .oms-mobile-media .oms-more-images {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin: 0; border-radius: 10px;
  background: var(--t-grad); color: #fff !important; font-weight: 800; font-size: 0.85rem; line-height: 1;
  text-decoration: none !important; box-shadow: 0 6px 12px rgba(18, 82, 140, 0.25);
}
body .oms-mobile-media .oms-more-images { width: 60px; height: 60px; flex: 0 0 auto; }
body .oms-files-design { margin-top: 0.5rem; }
body .oms-files-design .oms-attachment-chip { max-width: 124px; }

body .oms-ship-cell { min-width: 150px; }
body .oms-ship-cell small, body .oms-order-card__ship small { display: block; color: var(--t-muted); font-size: 0.74rem; margin-top: 0.15rem; }
body .oms-ship-line { margin-top: 0.4rem; font-size: 0.82rem; color: var(--t-text-2); word-break: break-all; }
body .oms-ship-line i { color: var(--t-primary-2); }
body .oms-order-card__ship { margin: 0 0 0.65rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: var(--t-surface-2); }
body .oms-order-card__customer small { color: var(--t-muted); margin-left: 0.25rem; }

@media (max-width: 575.98px) {
  body .oms-filters { margin: 0.75rem 0.75rem 0.5rem; padding: 0.8rem; }
  body .oms-filters__grid { grid-template-columns: 1fr 1fr; }
  body .oms-filters__actions { grid-column: 1 / -1; }
  body .oms-results-bar { padding-left: 0.85rem !important; padding-right: 0.85rem !important; }
}

/* Overall Orders: below 1500px the order cards replace the wide table */
@media (max-width: 1499.98px) {
  html body .oms-desktop-table:has(> #table3.oms-orders-table) { display: none !important; }
  html body .oms-desktop-table:has(> #table3.oms-orders-table) ~ .oms-mobile-cards { display: grid !important; }
}
@media (min-width: 768px) and (max-width: 1499.98px) {
  html body .oms-desktop-table:has(> #table3.oms-orders-table) ~ .oms-mobile-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0.5rem 1.25rem 1rem;
    align-items: start;
  }
}

/* ---------- Automatic table filter bar (oms-filters.js) ---------- */
body .oms-filtered-out { display: none !important; }
body .oms-tablefilter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.6rem;
  margin: 0 1.25rem 0.9rem;
  padding: 0.75rem 0.85rem;
  border: 1px dashed #cfdbea;
  border-radius: 14px;
  background: #fafcff;
}
body .oms-tablefilter.is-active { border-style: solid; border-color: #9cc0e6; background: #f3f8ff; }
body .oms-tablefilter label { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; flex: 1 1 150px; max-width: 220px; }
body .oms-tablefilter label > span {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body .oms-tablefilter .form-select,
body .oms-tablefilter .form-control { min-height: 36px !important; height: 36px; font-size: 0.82rem !important; padding-top: 0.3rem; padding-bottom: 0.3rem; }
body .oms-tablefilter__meta { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
body .oms-tablefilter__count { font-size: 0.78rem; font-weight: 600; color: var(--t-muted); white-space: nowrap; }
body .oms-tablefilter.is-active .oms-tablefilter__count { color: var(--t-primary); }
@media (max-width: 575.98px) {
  body .oms-tablefilter { margin: 0 0.75rem 0.75rem; }
  body .oms-tablefilter label { flex: 1 1 calc(50% - 0.6rem); max-width: none; }
  body .oms-tablefilter__meta { width: 100%; justify-content: space-between; }
}

/* =====================================================================
   Trend layer: avatar top bar, gradient page headers, accent details
   ===================================================================== */
html body,
html body.g-sidenav-show,
html body.bg-gray-100 {
  background:
    radial-gradient(900px 420px at 85% -120px, rgba(99, 102, 241, 0.10), transparent 70%),
    radial-gradient(700px 380px at 30% -160px, rgba(27, 111, 191, 0.12), transparent 70%),
    radial-gradient(600px 600px at 110% 110%, rgba(20, 184, 166, 0.06), transparent 60%),
    #f4f6fb !important;
  background-attachment: fixed !important;
}

/* Role/operator now live in the top bar */
body .oms-hero-stats,
body .oms-page-hero__meta { display: none !important; }

/* Avatar chip */
body .navbar-main .oms-user { display: inline-flex; align-items: center; gap: 0.6rem; }
body .oms-user__avatar {
  position: relative;
  width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6366f1 0%, #1b6fbf 55%, #14b8a6 100%);
  color: #fff; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgba(27, 111, 191, 0.30);
}
body .oms-user__meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
body .oms-user__meta b { font-size: 0.85rem; font-weight: 700; color: var(--t-text); }
body .oms-user__meta small { font-size: 0.7rem; color: var(--t-muted); font-weight: 500; }
body .oms-user__badge {
  position: absolute !important; top: -6px; right: -8px; left: auto !important;
  transform: none !important; font-size: 0.6rem !important; padding: 0.15rem 0.35rem !important;
  border: 2px solid #fff; border-radius: 999px !important;
}
@media (max-width: 1199.98px) {
  body .oms-user__meta { display: none; }
  body .oms-user__avatar { width: 36px; height: 36px; }
}

/* Gradient page headers */
body .oms-hero-panel,
body .oms-page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(99, 102, 241, 0.55), transparent 70%),
    radial-gradient(360px 240px at 75% 120%, rgba(20, 184, 166, 0.40), transparent 70%),
    linear-gradient(120deg, #0a1f38 0%, #0f3e6e 55%, #1b6fbf 100%) !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 40px rgba(10, 31, 56, 0.25) !important;
  padding: 1.5rem 1.75rem !important;
}
body .oms-hero-panel::after,
body .oms-page-hero::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
body .oms-hero-panel h1, body .oms-hero-panel h2 { color: #fff !important; }
body .oms-hero-panel p { color: rgba(226, 237, 250, 0.85) !important; max-width: 720px; }
body .oms-hero-panel .oms-page-hero__eyebrow,
body .oms-page-hero .oms-page-hero__eyebrow {
  color: #d6e8fb !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
body .oms-hero-date {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: #dbeafe;
  font-size: 0.75rem; font-weight: 600;
}
body .oms-hero-greeting { color: #bcd6f3; font-size: 0.95rem; font-weight: 600; margin-top: 0.25rem; }
body .oms-hero-grid { display: block !important; }

/* Section titles with an accent mark */
body .oms-section-head h2::before,
body .oms-chart-card__head h6::before,
body .main-content section.oms-section-shell > h2::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 0.55rem;
  border-radius: 3px;
  background: linear-gradient(135deg, #6366f1, #1b6fbf);
  vertical-align: middle;
  transform: translateY(-2px);
}

/* Softer, rounder surfaces */
body .card, body .oms-surface-card, body .main-content section.oms-section-shell { border-radius: 20px !important; }
body .card { border-color: rgba(226, 232, 240, 0.9) !important; }

/* Sidebar active item: glowing indicator */
body #sidenav-main .nav-link.active { position: relative; }
body #sidenav-main .nav-link.active::before {
  content: "";
  position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 60%;
  border-radius: 0 4px 4px 0;
  background: #7dd3fc;
  box-shadow: 0 0 12px rgba(125, 211, 252, 0.8);
}

/* KPI tiles: soft tinted icons, no top bar */
body .oms-kpi-shell .card::before { display: none !important; }
body .oms-kpi-shell .card { border-top: 0 !important; transition: transform 0.15s ease, box-shadow 0.15s ease; }
body .oms-kpi-shell .card:hover { transform: translateY(-2px) !important; box-shadow: var(--t-shadow-lg) !important; }
body .oms-kpi-shell .icon.icon-shape { background: rgba(27, 111, 191, 0.10) !important; }
body .oms-kpi-shell .icon.icon-shape i { color: var(--t-primary-2) !important; opacity: 1 !important; }
body .oms-kpi-shell [class*="col-"]:nth-child(2) .icon.icon-shape { background: rgba(99, 102, 241, 0.12) !important; }
body .oms-kpi-shell [class*="col-"]:nth-child(2) .icon.icon-shape i { color: #6366f1 !important; }
body .oms-kpi-shell [class*="col-"]:nth-child(3) .icon.icon-shape { background: rgba(20, 184, 166, 0.12) !important; }
body .oms-kpi-shell [class*="col-"]:nth-child(3) .icon.icon-shape i { color: #0d9488 !important; }
body .oms-kpi-shell [class*="col-"]:nth-child(4) .icon.icon-shape { background: rgba(245, 158, 11, 0.14) !important; }
body .oms-kpi-shell [class*="col-"]:nth-child(4) .icon.icon-shape i { color: #d97706 !important; }

/* Primary buttons: subtle sheen */
body .btn-primary { background: linear-gradient(135deg, #12528c 0%, #1b6fbf 60%, #3b82f6 100%) !important; }

/* Tab bar active pill matches the header */
body .oms-ws-tab.is-active { background: linear-gradient(135deg, #0f3e6e 0%, #1b6fbf 100%); }

@media (max-width: 575.98px) {
  body .oms-hero-panel, body .oms-page-hero { padding: 1.15rem 1.2rem !important; border-radius: 18px !important; }
  body .oms-hero-date { margin-top: 0.6rem; }
}

/* KPI tiles: icon stays beside the number */
body .oms-kpi-shell .card .card-body > .row { flex-wrap: nowrap !important; align-items: flex-start; }
body .oms-kpi-shell .card .card-body > .row > [class*="col-8"] { min-width: 0; }

/* Avatar visible on phones too */
html body .navbar-main .oms-user,
html body .navbar-main .oms-user .oms-user__avatar { display: inline-flex !important; }
@media (max-width: 1199.98px) {
  html body .navbar-main .oms-user .oms-user__meta { display: none !important; }
}

/* Any wide table that also has phone cards: use the cards (2 per row) below 1500px */
@media (max-width: 1499.98px) {
  html body .oms-desktop-table:has(+ .oms-mobile-cards),
  html body .oms-desktop-table:has(~ .oms-mobile-cards) { display: none !important; }
  html body .oms-desktop-table ~ .oms-mobile-cards { display: grid !important; }
}
@media (min-width: 768px) and (max-width: 1499.98px) {
  html body .oms-desktop-table ~ .oms-mobile-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
  }
}
html body.oms-suite-ready .navbar-main .oms-toolbar-right .nav-link span.oms-user,
html body.oms-suite-ready .navbar-main .oms-toolbar-right .nav-link span.oms-user > span.oms-user__avatar { display: inline-flex !important; }
html body.oms-suite-ready .navbar-main .oms-toolbar-right .nav-link span.oms-user__badge { display: inline-block !important; }

/* ---------- Phone-card layout available at every width (cards are also used below 1500px) ---------- */
body .oms-mobile-card { padding: 1rem !important; min-width: 0; }
body .oms-mobile-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
body .oms-mobile-card__label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #7b8799; margin-bottom: 0.2rem; }
body .oms-mobile-card__title { font-size: 1rem; font-weight: 800; color: var(--t-text); word-break: break-word; }
body .oms-mobile-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 0.7rem; }
body .oms-mobile-card__meta div, body .oms-mobile-card__block { padding: 0.6rem 0.7rem; }
body .oms-mobile-card__block { margin-bottom: 0.65rem; }
body .oms-mobile-card__meta span, body .oms-mobile-card__block > span {
  display: block; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #7b8799; margin-bottom: 0.2rem;
}
body .oms-mobile-card__meta strong, body .oms-mobile-card__block p { margin: 0; font-size: 0.88rem; color: var(--t-text); line-height: 1.45; word-break: break-word; }
body .oms-mobile-card__details { border: 1px solid var(--t-border); border-radius: 14px; padding: 0.55rem 0.7rem; margin-top: 0.2rem; }
body .oms-mobile-card__details summary { cursor: pointer; list-style: none; font-size: 0.82rem; font-weight: 700; color: var(--t-primary-2); text-align: center; }
body .oms-mobile-card__details summary::-webkit-details-marker { display: none; }
body .oms-mobile-card__details[open] summary { margin-bottom: 0.6rem; }
body .oms-mobile-media { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.15rem; }
body .oms-mobile-media img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; border: 1px solid var(--t-border); flex: 0 0 auto; }
body .oms-mobile-links { display: grid; gap: 0.35rem; }
body .oms-mobile-form { display: grid; gap: 0.5rem; }
body .oms-mobile-card__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
body .oms-mobile-card__actions form { margin: 0; flex: 1 1 140px; }
body .oms-mobile-card__actions .btn { width: 100%; }
body .oms-mobile-cards { padding: 0.5rem 1.25rem 1rem; gap: 1rem; }
@media (max-width: 575.98px) { body .oms-mobile-cards { padding: 0.5rem 0.75rem 0.9rem; } }