/* OPS Gate 3.1.54.2 — Administration and workflow UX */
:root {
  --ops-aw-gap: 1rem;
  --ops-aw-radius: 18px;
  --ops-aw-radius-sm: 13px;
  --ops-aw-panel: var(--ops-ds-card-bg, #fff);
  --ops-aw-panel-muted: var(--ops-ds-card-muted, #f8fafc);
  --ops-aw-border: var(--ops-ds-border, #dbe4ef);
  --ops-aw-text: var(--ops-ds-text, #0f172a);
  --ops-aw-muted: var(--ops-ds-muted, #64748b);
  --ops-aw-primary: var(--ops-primary, #2563eb);
  --ops-aw-shadow: var(--ops-ds-shadow-card, 0 12px 34px rgba(15,23,42,.08));
}

.ops-admin-workflow-page {
  width: 100%;
  max-width: 1540px;
  margin-inline: auto;
  padding: .25rem .25rem 1.5rem;
  color: var(--ops-aw-text);
}

.ops-admin-workflow-page > :first-child:is(.d-flex,.row,.card,section),
.ops-admin-workflow-page .ops-admin-hero {
  scroll-margin-top: 86px;
}

.ops-admin-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--ops-aw-border) !important;
  border-radius: var(--ops-aw-radius) !important;
  background:
    radial-gradient(circle at 92% 18%, rgba(37,99,235,.13), transparent 30%),
    linear-gradient(135deg, var(--ops-aw-panel), var(--ops-aw-panel-muted));
  box-shadow: var(--ops-aw-shadow) !important;
  overflow: hidden;
}

.ops-admin-hero h1,
.ops-admin-hero h2,
.ops-admin-hero h3 {
  margin: 0;
  color: var(--ops-aw-text) !important;
  font-weight: 950 !important;
  letter-spacing: -.025em;
}

.ops-admin-hero p { color: var(--ops-aw-muted) !important; margin: .4rem 0 0; max-width: 900px; }
.ops-admin-hero-actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }

.ops-admin-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  margin-bottom: .5rem;
  padding: .34rem .68rem;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  color: #1d4ed8;
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.ops-admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}

.ops-admin-kpi {
  position: relative;
  min-height: 108px;
  padding: .9rem 1rem;
  border: 1px solid var(--ops-aw-border) !important;
  border-radius: var(--ops-aw-radius) !important;
  background: var(--ops-aw-panel) !important;
  box-shadow: var(--ops-aw-shadow) !important;
  overflow: hidden;
}
.ops-admin-kpi::after {
  content: "";
  position: absolute;
  width: 96px;
  height: 96px;
  inset-inline-end: -32px;
  inset-block-end: -42px;
  border-radius: 50%;
  background: rgba(37,99,235,.08);
}
.ops-admin-kpi i { color: var(--ops-aw-primary); font-size: 1.15rem; }
.ops-admin-kpi span { display: block; margin-top: .42rem; color: var(--ops-aw-muted); font-size: .78rem; font-weight: 800; }
.ops-admin-kpi strong { display: block; margin-top: .1rem; color: var(--ops-aw-text); font-size: 1.75rem; line-height: 1.05; font-weight: 950; }

.ops-admin-panel,
.ops-admin-workflow-page > .card,
.ops-admin-workflow-page > section:not(.ops-admin-hero) {
  border: 1px solid var(--ops-aw-border) !important;
  border-radius: var(--ops-aw-radius) !important;
  background: var(--ops-aw-panel) !important;
  box-shadow: var(--ops-aw-shadow) !important;
}

.ops-admin-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--ops-aw-border);
  background: var(--ops-aw-panel-muted);
  border-radius: var(--ops-aw-radius) var(--ops-aw-radius) 0 0;
}
.ops-admin-section-head h4,
.ops-admin-section-head h5,
.ops-admin-section-head h6 { margin: 0; color: var(--ops-aw-text); font-weight: 900; }

.ops-admin-workflow-page .nav-tabs,
.ops-admin-workflow-page .nav-pills {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding: .3rem;
  gap: .35rem !important;
  border: 1px solid var(--ops-aw-border) !important;
  border-radius: 15px;
  background: var(--ops-aw-panel-muted);
}
.ops-admin-workflow-page .nav-tabs .nav-link,
.ops-admin-workflow-page .nav-pills .nav-link {
  white-space: nowrap;
  border: 0 !important;
  border-radius: 11px !important;
  color: var(--ops-aw-muted) !important;
  font-weight: 850;
  padding: .58rem .82rem;
}
.ops-admin-workflow-page .nav-tabs .nav-link.active,
.ops-admin-workflow-page .nav-pills .nav-link.active {
  color: #fff !important;
  background: var(--ops-aw-primary) !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.2);
}

.ops-admin-commandbar {
  position: sticky;
  top: 62px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: .45rem;
  overflow-x: auto;
  margin: 0 0 .9rem;
  padding: .5rem;
  border: 1px solid var(--ops-aw-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ops-aw-panel) 94%, transparent);
  box-shadow: 0 8px 22px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
}
.ops-admin-commandbar a,
.ops-admin-commandbar button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 34px;
  padding: .38rem .68rem;
  border: 1px solid var(--ops-aw-border);
  border-radius: 10px;
  background: var(--ops-aw-panel);
  color: var(--ops-aw-text);
  font-size: .76rem;
  font-weight: 800;
  text-decoration: none;
}
.ops-admin-commandbar a:hover,
.ops-admin-commandbar button:hover { border-color: var(--ops-aw-primary); color: var(--ops-aw-primary); }

.ops-admin-filter-panel {
  margin-bottom: 1rem;
  border: 1px solid var(--ops-aw-border) !important;
  border-radius: var(--ops-aw-radius) !important;
  background: var(--ops-aw-panel) !important;
  box-shadow: var(--ops-aw-shadow) !important;
}
.ops-admin-filter-panel .card-body { padding: .9rem 1rem; }

.ops-admin-workflow-page .form-label { color: var(--ops-aw-text); font-weight: 800; }
.ops-admin-workflow-page .form-text,
.ops-admin-workflow-page .text-muted { color: var(--ops-aw-muted) !important; }

.ops-admin-workflow-page .accordion-item {
  border: 1px solid var(--ops-aw-border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: var(--ops-aw-panel) !important;
}
.ops-admin-workflow-page .accordion-button {
  color: var(--ops-aw-text) !important;
  background: var(--ops-aw-panel-muted) !important;
  font-weight: 850;
}

.ops-admin-workflow-page .table-responsive,
.ops-admin-workflow-page [class*="table-wrap"] {
  border-radius: 15px;
  scrollbar-gutter: stable;
}
.ops-admin-workflow-page table > thead th {
  color: var(--ops-aw-muted) !important;
  background: var(--ops-aw-panel-muted) !important;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .025em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ops-admin-workflow-page table > tbody td { color: var(--ops-aw-text); vertical-align: middle; }
.ops-admin-workflow-page table .btn-sm { min-width: 34px; min-height: 32px; }

.ops-workflow-status {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  border-radius: 999px;
  padding: .28rem .58rem;
  font-size: .72rem;
  font-weight: 850;
}

.ops-workflow-timeline { position: relative; display: grid; gap: .75rem; }
.ops-workflow-timeline::before {
  content: "";
  position: absolute;
  inset-block: .6rem;
  inset-inline-start: 15px;
  width: 2px;
  background: var(--ops-aw-border);
}
.ops-workflow-timeline-item { position: relative; padding-inline-start: 42px; }
.ops-workflow-timeline-dot {
  position: absolute;
  inset-inline-start: 6px;
  inset-block-start: .35rem;
  width: 20px;
  height: 20px;
  border: 4px solid var(--ops-aw-panel);
  border-radius: 50%;
  background: var(--ops-aw-primary);
  box-shadow: 0 0 0 1px var(--ops-aw-border);
}

.ops-workflow-empty {
  padding: 1.4rem;
  border: 1px dashed var(--ops-aw-border);
  border-radius: 14px;
  background: var(--ops-aw-panel-muted);
  color: var(--ops-aw-muted);
  text-align: center;
}

/* Task manager */
#tasksPage.ops-admin-workflow-page { max-width: 1500px; }
#tasksPage .ops-task-board-section { margin-bottom: 1rem; }
#tasksPage .ops-task-board-heading { display:flex; align-items:center; justify-content:space-between; gap:.65rem; margin-bottom:.55rem; }
#tasksPage .ops-task-board-heading h5 { margin:0; font-weight:900; color:var(--ops-aw-text); }
#tasksPage .ops-task-table { min-width: 980px; }
#tasksPage .ops-task-progress { min-width: 90px; }
#tasksPage .ops-task-progress .progress { height: 8px; background: var(--ops-aw-panel-muted); }
#tasksPage .ops-task-modal-summary { border:1px solid var(--ops-aw-border); border-radius:14px; background:var(--ops-aw-panel-muted); }
#tasksPage .ops-task-file-item,
#tasksPage .ops-task-comment-item,
#tasksPage .ops-task-activity-item { border-color: var(--ops-aw-border) !important; background: var(--ops-aw-panel) !important; color: var(--ops-aw-text); }

/* Meeting room */
.ops-meetings-page { max-width: 1440px; }
.ops-meeting-list { display: grid; gap: .7rem; }
.ops-meeting-card {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr) auto;
  align-items: center;
  gap: .85rem;
  padding: .85rem;
  border: 1px solid var(--ops-aw-border);
  border-radius: 15px;
  background: var(--ops-aw-panel);
}
.ops-meeting-date {
  display: grid;
  place-items: center;
  min-height: 68px;
  border-radius: 13px;
  background: rgba(37,99,235,.09);
  color: #1d4ed8;
  text-align: center;
}
.ops-meeting-date strong { display:block; font-size:1.45rem; line-height:1; }
.ops-meeting-date span { display:block; margin-top:.2rem; font-size:.72rem; font-weight:850; text-transform:uppercase; }
.ops-meeting-title { color:var(--ops-aw-text); font-weight:900; }
.ops-meeting-meta { display:flex; flex-wrap:wrap; gap:.45rem .8rem; color:var(--ops-aw-muted); font-size:.8rem; }
.ops-meeting-actions { display:flex; gap:.4rem; align-items:center; }

/* Long operational pages */
#opsSystemUpdatesRoot .ops-update-card,
#opsNotificationCenterRoot .ops-notif-card,
#opsNotificationTemplatesRoot .card,
#opsSystemSettingsRoot .ops-settings-panel,
.ops-perm-page > .card,
.ops-org-settings .ops-org-panel,
#opsApprovalChains .ops-acm-panel {
  border-color: var(--ops-aw-border) !important;
  box-shadow: var(--ops-aw-shadow) !important;
}

#opsSystemUpdatesRoot .card-header,
#opsNotificationCenterRoot .card-header,
#opsNotificationTemplatesRoot .card-header {
  background: var(--ops-aw-panel-muted) !important;
  border-color: var(--ops-aw-border) !important;
}

.ops-admin-workflow-page [data-ops-busy="1"] { pointer-events: none; opacity: .72; }
.ops-admin-workflow-page .ops-busy-spinner { width: .9rem; height: .9rem; border-width: .13em; }

html[data-ops-theme="dark"] .ops-admin-eyebrow { background: rgba(59,130,246,.18); color:#bfdbfe; }
html[data-ops-theme="dark"] .ops-admin-commandbar { box-shadow: 0 12px 28px rgba(2,6,23,.42); }
html[data-ops-theme="dark"] .ops-meeting-date { background: rgba(37,99,235,.22); color:#bfdbfe; }

@media (max-width: 1199.98px) {
  .ops-admin-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 767.98px) {
  .ops-admin-workflow-page { padding: 0 0 1.2rem; }
  .ops-admin-hero { padding: 1rem; border-radius: 16px !important; }
  .ops-admin-hero-actions { width:100%; }
  .ops-admin-hero-actions > .btn { flex:1 1 auto; }
  .ops-admin-kpi-grid { gap:.6rem; }
  .ops-admin-kpi { min-height:98px; padding:.75rem; border-radius:15px !important; }
  .ops-admin-kpi strong { font-size:1.48rem; }
  .ops-admin-commandbar { top: 56px; margin-inline: .1rem; }
  .ops-admin-workflow-page .nav-tabs,
  .ops-admin-workflow-page .nav-pills { border-radius:13px; }
  .ops-meeting-card { grid-template-columns: 62px minmax(0,1fr); }
  .ops-meeting-actions { grid-column:1/-1; justify-content:flex-end; border-top:1px solid var(--ops-aw-border); padding-top:.65rem; }
}

@media (max-width: 479.98px) {
  .ops-admin-kpi-grid { grid-template-columns: 1fr 1fr; }
  .ops-admin-hero-actions > .btn { width:100%; }
}

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