/* =========================================================
   OPS Gate 3.1.54 — Unified Layout & Design System
   Loaded after legacy styles to normalize the application
   shell and reusable components without changing workflows.
========================================================= */

:root {
  --ops-ds-content-max: 1680px;
  --ops-ds-gutter: clamp(.85rem, 1.7vw, 1.6rem);
  --ops-ds-section-gap: clamp(1rem, 1.7vw, 1.5rem);
  --ops-ds-control-height: 42px;
  --ops-ds-control-height-sm: 34px;
  --ops-ds-radius-xs: 8px;
  --ops-ds-radius-sm: 12px;
  --ops-ds-radius-md: 16px;
  --ops-ds-radius-lg: 22px;
  --ops-ds-shadow-card: 0 12px 34px rgba(15, 23, 42, .08);
  --ops-ds-shadow-float: 0 22px 64px rgba(15, 23, 42, .18);
  --ops-ds-focus: 0 0 0 3px rgba(37, 99, 235, .23);
  --ops-ds-header-bg: rgba(255, 255, 255, .92);
  --ops-ds-card-bg: #fff;
  --ops-ds-card-muted: #f8fafc;
  --ops-ds-border: #dbe4ef;
  --ops-ds-border-strong: #cbd7e6;
  --ops-ds-text: #0f172a;
  --ops-ds-muted: #64748b;
}

html[data-ops-theme="dark"] {
  --ops-ds-header-bg: rgba(15, 23, 42, .94);
  --ops-ds-card-bg: #0f172a;
  --ops-ds-card-muted: #111827;
  --ops-ds-border: #334155;
  --ops-ds-border-strong: #475569;
  --ops-ds-text: #f8fafc;
  --ops-ds-muted: #cbd5e1;
  --ops-ds-shadow-card: 0 14px 38px rgba(2, 6, 23, .34);
  --ops-ds-shadow-float: 0 26px 72px rgba(2, 6, 23, .64);
}

html { scroll-padding-top: 76px; }
body { overflow-x: hidden; }

.ops-skip-link {
  position: fixed;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 3000;
  transform: translateY(-180%);
  padding: .65rem .9rem;
  border-radius: var(--ops-ds-radius-sm);
  background: #0f172a;
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--ops-ds-shadow-float);
  transition: transform .18s ease;
}
.ops-skip-link:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid transparent !important;
  box-shadow: var(--ops-ds-focus) !important;
}

#content-wrap { min-width: 0; }
body.ops-body #main-content {
  width: min(100%, var(--ops-ds-content-max));
  min-width: 0;
  margin-inline: auto;
  padding: var(--ops-ds-gutter) !important;
  color: var(--ops-ds-text) !important;
}
body.ops-body #main-content:focus { outline: none; }
body.ops-body #main-content > .container,
body.ops-body #main-content > .container-fluid,
body.ops-body #main-content > [class*="container"] {
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
}

.ops-module-root {
  display: flow-root;
  min-width: 0;
  animation: opsModuleEnter .22s ease-out both;
}
@keyframes opsModuleEnter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Page headers */
.ops-page-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: .9rem 1.25rem !important;
  margin-block-end: var(--ops-ds-section-gap) !important;
  padding: clamp(1rem, 1.8vw, 1.35rem);
  border: 1px solid var(--ops-ds-border);
  border-radius: var(--ops-ds-radius-lg);
  background:
    radial-gradient(circle at 90% 0%, rgba(37, 99, 235, .10), transparent 18rem),
    var(--ops-ds-header-bg);
  box-shadow: var(--ops-ds-shadow-card);
  backdrop-filter: blur(12px);
}
.ops-page-header > :first-child { min-width: min(100%, 280px); flex: 1 1 360px; }
.ops-page-header h1,
.ops-page-header h2,
.ops-page-header h3,
.ops-page-header h4 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-block-end: .25rem !important;
  color: var(--ops-ds-text) !important;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.25;
}
.ops-page-header h1 .bi,
.ops-page-header h2 .bi,
.ops-page-header h3 .bi,
.ops-page-header h4 .bi {
  color: var(--ops-primary, #2563eb);
}
.ops-page-header p,
.ops-page-header .text-muted { max-width: 78ch; margin-bottom: 0 !important; }
.ops-page-actions,
.ops-page-header > :last-child:not(:first-child) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .55rem;
}

/* Cards and sections */
#main-content .card,
.ops-surface,
.ops-section-card {
  border: 1px solid var(--ops-ds-border) !important;
  border-radius: var(--ops-ds-radius-md) !important;
  background: var(--ops-ds-card-bg) !important;
  box-shadow: var(--ops-ds-shadow-card);
  color: var(--ops-ds-text);
}
#main-content .card-header,
.ops-section-header {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .65rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--ops-ds-border) !important;
  border-radius: var(--ops-ds-radius-md) var(--ops-ds-radius-md) 0 0 !important;
  background: var(--ops-ds-card-muted) !important;
  color: var(--ops-ds-text) !important;
}
#main-content .card-header h1,
#main-content .card-header h2,
#main-content .card-header h3,
#main-content .card-header h4,
#main-content .card-header h5,
#main-content .card-header h6 { margin: 0; }
#main-content .card-body { padding: clamp(.9rem, 1.5vw, 1.2rem); }
#main-content .card-footer {
  padding: .8rem 1rem;
  border-top: 1px solid var(--ops-ds-border);
  background: var(--ops-ds-card-muted);
}

.ops-section-stack { display: grid; gap: var(--ops-ds-section-gap); }
.ops-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .85rem; }

/* Buttons */
.btn {
  --bs-btn-border-radius: 11px;
  min-height: var(--ops-ds-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-weight: 750;
  line-height: 1.15;
  white-space: normal;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn-sm,
.btn-group-sm > .btn { min-height: var(--ops-ds-control-height-sm); border-radius: 9px; }
.btn-icon,
.ops-icon-button {
  width: var(--ops-ds-control-height);
  min-width: var(--ops-ds-control-height);
  padding-inline: 0 !important;
  border-radius: 11px !important;
}
.btn-sm.btn-icon,
.ops-icon-button.btn-sm { width: var(--ops-ds-control-height-sm); min-width: var(--ops-ds-control-height-sm); }
.btn[disabled],
.btn.disabled { cursor: not-allowed; opacity: .68; transform: none !important; }
.btn .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }

/* Forms */
.form-control,
.form-select,
.input-group-text,
.select2-container--bootstrap-5 .select2-selection {
  min-height: var(--ops-ds-control-height);
  border-radius: 11px !important;
  border-color: var(--ops-ds-border-strong) !important;
}
.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
  min-height: var(--ops-ds-control-height-sm);
  border-radius: 9px !important;
}
.form-label {
  margin-bottom: .42rem;
  font-weight: 750;
  color: var(--ops-ds-text) !important;
}
.form-label.ops-required::after {
  content: " *";
  color: var(--ops-danger, #dc2626);
  font-weight: 900;
}
.form-text { color: var(--ops-ds-muted) !important; }
.form-control::placeholder { color: #94a3b8; opacity: 1; }
.form-control:focus,
.form-select:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--ops-primary, #2563eb) !important;
  box-shadow: var(--ops-ds-focus) !important;
}
.form-check-input { width: 1.1em; height: 1.1em; }
.form-check-input:focus { box-shadow: var(--ops-ds-focus); }
.input-group > .btn { min-height: var(--ops-ds-control-height); }

.ops-form-section {
  padding: 1rem;
  border: 1px solid var(--ops-ds-border);
  border-radius: var(--ops-ds-radius-md);
  background: var(--ops-ds-card-muted);
}
.ops-form-section-title { font-size: .95rem; font-weight: 850; margin-bottom: .8rem; }

/* Tables */
.table-responsive,
.ops-table-shell {
  position: relative;
  max-width: 100%;
  border: 1px solid var(--ops-ds-border) !important;
  border-radius: var(--ops-ds-radius-md) !important;
  background: var(--ops-ds-card-bg);
  overflow: auto;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}
.table-responsive > .table,
.ops-table-shell > .table { margin-bottom: 0; }
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ops-ds-text);
  --bs-table-border-color: var(--ops-ds-border);
  vertical-align: middle;
}
.table > :not(caption) > * > * { padding: .78rem .82rem; }
.table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 4;
  background: var(--ops-ds-card-muted) !important;
  color: var(--ops-ds-muted) !important;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--ops-ds-border);
}
.table tbody tr { transition: background-color .14s ease; }
.table tbody tr:hover > * { background: rgba(37, 99, 235, .045) !important; }
.table td .btn-group,
.table td .d-flex { max-width: 100%; }
.table .badge { white-space: nowrap; }
.ops-table-actions { display: inline-flex; flex-wrap: nowrap; justify-content: flex-end; gap: .35rem; }
.ops-table-meta { color: var(--ops-ds-muted); font-size: .78rem; }

.dataTables_wrapper { min-width: 0; }
.dataTables_wrapper .row { row-gap: .75rem; }
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length { margin-bottom: .35rem; }
.dataTables_wrapper .dataTables_info { color: var(--ops-ds-muted) !important; }
.dataTables_wrapper .pagination { gap: .25rem; }
.dataTables_wrapper .page-link { border-radius: 9px !important; }

/* Alerts, badges, empty and loading states */
.alert { border-radius: var(--ops-ds-radius-sm); border-width: 1px; }
.badge { border-radius: 999px; padding: .42em .68em; font-weight: 750; }
.ops-empty-state,
.ops-error-state,
.ops-loading-state {
  min-height: 240px;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  text-align: center;
  border: 1px dashed var(--ops-ds-border-strong);
  border-radius: var(--ops-ds-radius-md);
  background: var(--ops-ds-card-muted);
}
.ops-state-inner { max-width: 560px; }
.ops-state-icon {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  margin-bottom: .9rem;
  border-radius: 18px;
  background: rgba(37, 99, 235, .11);
  color: var(--ops-primary, #2563eb);
  font-size: 1.55rem;
}
.ops-error-state .ops-state-icon { background: rgba(220, 38, 38, .11); color: var(--ops-danger, #dc2626); }
.ops-state-title { margin-bottom: .35rem; font-size: 1.05rem; font-weight: 850; }
.ops-state-message { margin-bottom: 0; color: var(--ops-ds-muted); }

.ops-module-skeleton { display: grid; gap: 1rem; }
.ops-skeleton-line,
.ops-skeleton-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(148,163,184,.12), rgba(148,163,184,.24), rgba(148,163,184,.12));
  background-size: 220% 100%;
  animation: opsSkeleton 1.35s ease-in-out infinite;
}
.ops-skeleton-line { height: 14px; border-radius: 999px; }
.ops-skeleton-line.w-40 { width: 40%; }
.ops-skeleton-line.w-65 { width: 65%; }
.ops-skeleton-card { min-height: 118px; border-radius: var(--ops-ds-radius-md); border: 1px solid var(--ops-ds-border); }
@keyframes opsSkeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Modal system */
.modal { --bs-modal-zindex: 1080; }
.modal-dialog { max-height: calc(100dvh - 1rem); margin-block: .5rem; }
.modal-dialog:not(.modal-fullscreen) { width: min(calc(100% - 1rem), var(--bs-modal-width, 500px)); }
.modal-dialog.modal-lg { --bs-modal-width: 860px; }
.modal-dialog.modal-xl { --bs-modal-width: 1180px; }
.modal-content {
  max-height: calc(100dvh - 1rem);
  border: 1px solid var(--ops-ds-border) !important;
  border-radius: var(--ops-ds-radius-lg) !important;
  background: var(--ops-ds-card-bg) !important;
  color: var(--ops-ds-text) !important;
  box-shadow: var(--ops-ds-shadow-float) !important;
  overflow: hidden !important;
}
.modal-header,
.modal-footer {
  flex: 0 0 auto;
  padding: .9rem 1rem;
  background: var(--ops-ds-card-muted) !important;
  border-color: var(--ops-ds-border) !important;
}
.modal-header { min-height: 60px; }
.modal-title { min-width: 0; font-weight: 850; }
.modal-title i { color: var(--ops-primary, #2563eb); }
.modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
}
.modal-footer { gap: .5rem; }
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: .38 !important; backdrop-filter: blur(2px); }
html[data-ops-theme="dark"] .modal-backdrop.show { opacity: .62 !important; }
.btn-close { flex: 0 0 auto; }
html[dir="rtl"] .btn-close { margin-inline-start: auto; margin-inline-end: 0; }

/* Dropdowns and tooltips */
.dropdown-menu {
  border: 1px solid var(--ops-ds-border) !important;
  border-radius: var(--ops-ds-radius-md) !important;
  background: var(--ops-ds-card-bg) !important;
  box-shadow: var(--ops-ds-shadow-float) !important;
  padding: .45rem;
}
.dropdown-item { border-radius: 9px; padding: .58rem .7rem; }
.dropdown-item:hover,
.dropdown-item:focus { background: rgba(37, 99, 235, .09); }
.tooltip { --bs-tooltip-bg: #0f172a; --bs-tooltip-border-radius: 8px; }

/* Toasts */
#opsUiToastHolder {
  position: fixed;
  inset-block-start: 72px;
  inset-inline-end: 1rem;
  z-index: 2200;
  width: min(390px, calc(100vw - 2rem));
  display: grid;
  gap: .6rem;
  pointer-events: none;
}
#opsUiToastHolder .toast { pointer-events: auto; border-radius: var(--ops-ds-radius-md); overflow: hidden; }

/* Top bar and sidebar refinement */
body.ops-body .ops-safe-topbar {
  min-width: 0;
  padding-inline: var(--ops-ds-gutter) !important;
}
.ops-safe-topbar__actions { flex: 0 0 auto; }
.ops-safe-topbar__context {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-inline: .4rem;
  color: var(--ops-ds-muted);
  font-size: .86rem;
  font-weight: 800;
}
.ops-safe-topbar__context #opsModuleTitle {
  display: block;
  max-width: min(32vw, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ops-ds-text);
}
html[dir="rtl"] .ops-safe-topbar__context .bi { transform: rotate(180deg); }
#sidebar .sidebar-link { min-height: 42px; }
#sidebar .sidebar-link .label { overflow: hidden; text-overflow: ellipsis; }
#sidebar .sidebar-link.active::before {
  content: "";
  position: absolute;
  inset-block: .45rem;
  inset-inline-start: .2rem;
  width: 3px;
  border-radius: 999px;
  background: #60a5fa;
}
html[dir="rtl"] #sidebar .sidebar-link.active::before { inset-inline-start: .2rem; }

/* Authentication */
body.ops-auth-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background:
    radial-gradient(circle at 18% 16%, rgba(59, 130, 246, .30), transparent 24rem),
    radial-gradient(circle at 84% 80%, rgba(6, 182, 212, .20), transparent 24rem),
    linear-gradient(135deg, #07111f, #10264a 54%, #0f4c5c);
}
.ops-auth-shell { width: min(100%, 460px); }
.ops-auth-card {
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 34px 90px rgba(2,6,23,.42) !important;
  backdrop-filter: blur(18px);
}
.ops-auth-brand {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  margin-inline: auto;
  margin-bottom: .85rem;
  border-radius: 22px;
  background: linear-gradient(145deg, #2563eb, #06b6d4);
  color: #fff;
  font-size: 2rem;
  box-shadow: 0 18px 36px rgba(37,99,235,.24);
}

/* Utility classes */
.min-w-0 { min-width: 0 !important; }
.ops-text-balance { text-wrap: balance; }
.ops-nowrap { white-space: nowrap; }
.ops-break-anywhere { overflow-wrap: anywhere; word-break: break-word; }
.ops-scroll-y { overflow-y: auto; overscroll-behavior: contain; }
.ops-sticky-footer { position: sticky; inset-block-end: 0; z-index: 3; }

html[dir="rtl"] .me-1,
html[dir="rtl"] .me-2,
html[dir="rtl"] .me-3 { margin-right: 0 !important; }
html[dir="rtl"] .ms-1,
html[dir="rtl"] .ms-2,
html[dir="rtl"] .ms-3 { margin-left: 0 !important; }
html[dir="rtl"] .me-1 { margin-left: .25rem !important; }
html[dir="rtl"] .me-2 { margin-left: .5rem !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; }
html[dir="rtl"] .ms-1 { margin-right: .25rem !important; }
html[dir="rtl"] .ms-2 { margin-right: .5rem !important; }
html[dir="rtl"] .ms-3 { margin-right: 1rem !important; }

@media (max-width: 991.98px) {
  body.ops-body #main-content { padding: .85rem !important; }
  .ops-page-header { border-radius: var(--ops-ds-radius-md); padding: 1rem; }
  .ops-page-header > :last-child:not(:first-child) { width: 100%; justify-content: flex-start; }
  .ops-page-header > :last-child:not(:first-child) > .btn { flex: 1 1 auto; }
}

@media (max-width: 767.98px) {
  :root { --ops-ds-control-height: 44px; }
  body.ops-body #main-content { padding: .7rem !important; }
  .ops-page-header { gap: .75rem; }
  .ops-page-actions,
  .ops-page-header > :last-child:not(:first-child) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-page-actions > .btn,
  .ops-page-header > :last-child:not(:first-child) > .btn { width: 100%; }
  #main-content .card-body { padding: .85rem; }
  .ops-safe-topbar__context { display: none; }
  .table-responsive { border-radius: 13px !important; }
  .table > :not(caption) > * > * { padding: .68rem .72rem; }
  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl { width: calc(100% - .6rem); max-width: none; margin: .3rem; }
  .modal-content { max-height: calc(100dvh - .6rem); border-radius: 18px !important; }
  .modal-header,
  .modal-footer { padding: .75rem .85rem; }
  .modal-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-footer > .btn { width: 100%; }
  .modal-footer > .btn:only-child { grid-column: 1 / -1; }
  #opsUiToastHolder { inset-block-start: 62px; inset-inline: .65rem; width: auto; }
}

@media (max-width: 479.98px) {
  .ops-page-actions,
  .ops-page-header > :last-child:not(:first-child),
  .modal-footer { grid-template-columns: 1fr; }
  .ops-page-header h1,
  .ops-page-header h2,
  .ops-page-header h3,
  .ops-page-header h4 { font-size: 1.18rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  #sidebar,
  .ops-safe-topbar,
  .ops-mobile-sidebar-backdrop,
  .ops-app-version,
  .btn,
  .dropdown-menu { display: none !important; }
  .app-shell,
  .app-shell.collapsed { padding: 0 !important; }
  #content-wrap { padding: 0 !important; }
  body.ops-body #main-content { width: 100%; max-width: none; padding: 0 !important; }
  .card,
  .ops-page-header,
  .table-responsive { box-shadow: none !important; break-inside: avoid; }
}