:root {
  --wms-bg: #f3f6fb;
  --wms-surface: #ffffff;
  --wms-surface-soft: #f8fafc;
  --wms-border: #d8e1ec;
  --wms-border-strong: #c4d0dd;
  --wms-text: #0f172a;
  --wms-text-soft: #475569;
  --wms-muted: #64748b;
  --wms-brand: #1d4ed8;
  --wms-brand-soft: #dbeafe;
  --wms-success: #15803d;
  --wms-danger: #dc2626;
  --wms-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

html { background: var(--wms-bg); }
body {
  background:
    radial-gradient(circle at top left, rgba(29, 78, 216, 0.08), transparent 24%),
    linear-gradient(180deg, #edf2f7 0%, var(--wms-bg) 18%, var(--wms-bg) 100%);
  color: var(--wms-text);
}

#header-container {
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}

#main-content {
  padding: 2rem;
}

@media (max-width: 768px) {
  #main-content {
    padding: 1rem;
  }
}

#wms-page-shell {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.wms-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(241,245,249,0.94));
  box-shadow: var(--wms-shadow);
}

.wms-page-header__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wms-brand);
  margin-bottom: 0.5rem;
}

.wms-page-header h1 {
  font-size: clamp(1.75rem, 2.4vw, 2.35rem);
  line-height: 1.1;
  font-weight: 800;
  color: var(--wms-text);
  margin: 0;
}

.wms-page-header p {
  margin: 0.4rem 0 0;
  max-width: 48rem;
  color: var(--wms-text-soft);
  font-size: 0.98rem;
}

.wms-page-header__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--wms-border);
  background: rgba(255,255,255,0.9);
  color: var(--wms-text-soft);
  font-size: 0.82rem;
  font-weight: 600;
}

.wms-page-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#main-content main,
#main-content > section,
#main-content > form,
#main-content > div,
#main-content > article {
  max-width: 100%;
}

#main-content [data-toolbar-card],
#main-content [data-section-card],
#main-content [data-table-card],
#main-content [data-stat-card],
#main-content form,
#main-content section,
#main-content article,
#main-content .bg-gray-200,
#main-content .bg-\[\#E5E7EB\],
#main-content .bg-white {
  border-radius: 1.25rem !important;
  border: 1px solid var(--wms-border) !important;
  background: rgba(255,255,255,0.96) !important;
  color: var(--wms-text) !important;
  box-shadow: var(--wms-shadow) !important;
}

#main-content form,
#main-content section,
#main-content article {
  padding: 1.5rem !important;
}

#main-content h2,
#main-content h3 {
  color: var(--wms-text) !important;
  letter-spacing: -0.02em;
}

#main-content label,
#main-content .text-gray-700,
#main-content .text-gray-600,
#main-content .text-black {
  color: var(--wms-text-soft) !important;
}

#main-content input,
#main-content select,
#main-content textarea {
  width: 100%;
  min-height: 46px;
  border-radius: 0.9rem !important;
  border: 1px solid var(--wms-border-strong) !important;
  background: #fff !important;
  color: var(--wms-text) !important;
  padding: 0.75rem 0.95rem !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#main-content textarea { min-height: 112px; }

#main-content input:focus,
#main-content select:focus,
#main-content textarea:focus {
  outline: none;
  border-color: rgba(29, 78, 216, 0.7) !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

#main-content button,
#main-content a.inline-flex,
#main-content a[class*="bg-"],
#main-content [role="button"] {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

#main-content button:hover,
#main-content a.inline-flex:hover,
#main-content a[class*="bg-"]:hover {
  transform: translateY(-1px);
}

#main-content button,
#main-content .btn,
#main-content a.bg-blue-600,
#main-content a.bg-green-600,
#main-content a.bg-indigo-600 {
  border-radius: 0.9rem !important;
  font-weight: 700;
}

#main-content table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
}

#main-content thead,
#main-content .bg-\[\#5C6770\] {
  background: linear-gradient(135deg, #334155, #475569) !important;
  color: #fff !important;
}

#main-content th {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(255,255,255,0.88) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

#main-content td {
  color: var(--wms-text) !important;
  border-color: #e2e8f0 !important;
  background: transparent !important;
}

#main-content tbody tr {
  transition: background-color .15s ease;
}

#main-content tbody tr:nth-child(even) {
  background: rgba(248, 250, 252, 0.9) !important;
}

#main-content tbody tr:hover {
  background: rgba(219, 234, 254, 0.42) !important;
}

#main-content .w-full.text-left.border-collapse.border,
#main-content .table-auto.text-left.border-collapse.border {
  border: 1px solid var(--wms-border) !important;
}

#main-content .overflow-x-auto,
#main-content .overflow-hidden {
  border-radius: 1rem;
}

#toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border-radius: 1.1rem;
  border: 1px solid var(--wms-border);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

#toolbar a,
#toolbar button {
  border-radius: 0.85rem !important;
}

#wms-page-shell .text-red-600 { color: var(--wms-danger) !important; }
#wms-page-shell .text-green-600 { color: var(--wms-success) !important; }

#main-content [class*="max-w-"] { max-width: 100% !important; }
#main-content .mx-auto { margin-left: 0 !important; margin-right: 0 !important; }
#main-content .shadow,
#main-content .shadow-lg,
#main-content .shadow-md { box-shadow: none !important; }

.wms-split-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem !important;
  align-items: start;
}

.wms-split-grid > * { grid-column: span 12; }
@media (min-width: 1024px) {
  .wms-split-grid > * { grid-column: span 6; }
}

#toolbar {
  min-height: 72px;
}

/* Lock height while loading */
#toolbar.toolbar-loading {
  height: 72px;
  min-height: 72px;
  overflow: hidden;
  visibility: hidden;
}

/* Release height once ready */
#toolbar.toolbar-ready {
  height: auto;
  visibility: visible;
}

@media (max-width: 768px) {
  #toolbar {
    min-height: 88px;
  }

  #toolbar.toolbar-loading {
    height: 88px;
    min-height: 88px;
  }
}