/* Dashboard Operasional aligned with the main Workspace design system. */
.operational-dashboard {
  --page: #f5f7f9;
  --surface: #fff;
  --ink: #172b3a;
  --muted: #617180;
  --line: #e0e7ec;
  --accent: #126b5d;
  --accent-dark: #0c5146;
  --accent-soft: #eaf5f1;
  --header-h: 78px;
  background: var(--page);
  color: var(--ink);
}
.operational-dashboard :focus-visible { outline: 3px solid rgba(25,133,117,.3); outline-offset: 3px; }
.operational-dashboard .operational-header { height: var(--header-h); padding: 0 max(28px, calc((100% - 1240px) / 2)); background: var(--surface); border-color: var(--line); backdrop-filter: none; box-shadow: 0 1px 0 rgba(23,43,58,.03); }
.operational-dashboard #btn-portal,
.operational-dashboard .operational-header a[title="Home"] { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #667786; }
.operational-dashboard #btn-portal:hover,
.operational-dashboard .operational-header a[title="Home"]:hover { color: var(--accent); border-color: #b9d7d0; background: var(--accent-soft); }
.operational-dashboard .ops-brand-logo { display: grid; place-items: center; width: 52px; height: 48px; padding: 4px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 3px 10px rgba(23,43,58,.05); }
.operational-dashboard .ops-brand-logo:hover { border-color: #8bb8a8; }
.operational-dashboard .ops-brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.operational-dashboard #projectTitle { max-width: 410px; color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.operational-dashboard #projectTitle + * { color: var(--muted); }
.operational-dashboard #nav-user-name { color: var(--ink); }
.operational-dashboard #nav-user-role { color: var(--accent); background: var(--accent-soft); }
.operational-dashboard .avatar-gradient { width: 40px; height: 40px; background: var(--accent-soft); color: var(--accent); border: 1px solid #d4e9e1; box-shadow: none; }
.operational-dashboard .operational-header button { width: 42px; height: 42px; border: 1px solid var(--line); background: #fff; }
.operational-dashboard .operational-header button:hover { border-color: #fac9c5; background: #fff1f0; color: #b42318; }

.operational-dashboard .operational-main { width: min(1240px, calc(100% - 56px)); max-width: none; padding: calc(var(--header-h) + 28px) 0 0; }
.operational-dashboard .operational-summary { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 28px; }
.operational-dashboard .stat-card { min-height: 150px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 3px rgba(23,43,58,.02); }
.operational-dashboard .stat-card::before { left: 20px; right: auto; top: 18px; width: 4px; height: 25px; border-radius: 4px; background: #4b83b5; }
.operational-dashboard .stat-card.red::before { background: #c2413b; }
.operational-dashboard .stat-card.amber::before { background: #c28622; }
.operational-dashboard .stat-card.green::before { background: #2f846b; }
.operational-dashboard .stat-card > p:first-child { margin-left: 12px; margin-bottom: 15px; color: var(--muted); font-size: 10px; letter-spacing: .07em; }
.operational-dashboard .stat-card h3 { color: var(--ink); font-size: 29px; letter-spacing: -.6px; }
.operational-dashboard #statStok.text-red-600 { color: #b4232d; }
.operational-dashboard #statReq { color: #a7640c; }
.operational-dashboard #statPO { color: var(--accent); }
.operational-dashboard .stat-card > div:not(.ops-progress-track) > div:last-child { width: 40px; height: 40px; border-radius: 10px; }
.operational-dashboard .stat-card:hover { transform: translateY(-1px); border-color: #b9d7d0; box-shadow: 0 5px 16px rgba(20,65,51,.06); }
.operational-dashboard .ops-progress-track { width: 100%; height: 5px; margin-top: 15px; overflow: hidden; border-radius: 999px; background: #e8eef1; }
.operational-dashboard .ops-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #4b83b5; transition: width .35s ease; }

.operational-dashboard .operational-section-title { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -.2px; text-transform: none; }
.operational-dashboard .operational-section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.operational-dashboard #menu-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.operational-dashboard .menu-card { min-height: 104px; padding: 18px 20px; gap: 15px; border: 1px solid #dce4e9; border-radius: 11px; box-shadow: 0 2px 3px rgba(23,43,58,.02); background: var(--surface); }
.operational-dashboard .menu-card:hover { transform: translateY(-2px); border-color: #8bb8a8; box-shadow: 0 4px 16px rgba(20,65,51,.07); }
.operational-dashboard .menu-card:active { transform: translateY(0); }
.operational-dashboard .menu-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 17px; transform: none; }
.operational-dashboard .menu-card:hover .menu-icon { transform: none; background: #e1f1ec; color: var(--accent-dark); }
.operational-dashboard .menu-icon.icon-blue { background: #edf3f8; color: #3e709c; }
.operational-dashboard .menu-icon.icon-yellow,
.operational-dashboard .menu-icon.icon-orange { background: #fff5e5; color: #a86a12; }
.operational-dashboard .menu-icon.icon-emerald,
.operational-dashboard .menu-icon.icon-teal { background: var(--accent-soft); color: var(--accent); }
.operational-dashboard .menu-icon.icon-purple,
.operational-dashboard .menu-icon.icon-indigo,
.operational-dashboard .menu-icon.icon-pink,
.operational-dashboard .menu-icon.icon-violet { background: #edf2f5; color: #536f82; }
.operational-dashboard .menu-card:hover .menu-icon[class*="icon-"] { background: var(--accent-soft); color: var(--accent-dark); }
.operational-dashboard .menu-card h4 { color: var(--ink); font-size: 15px; font-weight: 700; }
.operational-dashboard .menu-card p { color: var(--muted); font-size: 12px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.55; }
.operational-dashboard .chevron-icon { color: #91a1ad; }
.operational-dashboard .menu-card:hover .chevron-icon { color: var(--accent); transform: translateX(2px); }
.operational-dashboard .badge-alert { min-width: 20px; height: 20px; padding: 2px 6px; display: inline-grid; place-items: center; font-size: 9px; line-height: 1; }
.operational-dashboard #badge-req { background: #fff0d7; color: #98600d; }
.operational-dashboard #badge-po { background: #e5f4ee; color: #187158; }

@media (min-width: 1600px) {
  .operational-dashboard .operational-main { width: min(1400px, calc(100% - 96px)); }
  .operational-dashboard .operational-header { padding-left: max(48px, calc((100% - 1400px) / 2)); padding-right: max(48px, calc((100% - 1400px) / 2)); }
}
@media (max-width: 900px) {
  .operational-dashboard .operational-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 639px) {
  .operational-dashboard { --header-h: 68px; }
  .operational-dashboard .operational-header { padding: calc(env(safe-area-inset-top) / 2) 14px 0; gap: 8px; }
  .operational-dashboard .ops-brand-logo, .operational-dashboard .avatar-gradient { display: none; }
  .operational-dashboard #btn-portal,
  .operational-dashboard .operational-header a[title="Home"],
  .operational-dashboard .operational-header button { width: 40px; height: 40px; min-width: 40px; }
  .operational-dashboard #projectTitle { max-width: clamp(118px, 35vw, 155px); font-size: 14px; }
  .operational-dashboard .operational-main { width: calc(100% - 28px); padding-top: calc(var(--header-h) + 16px); }
  .operational-dashboard .operational-summary { gap: 10px; margin-bottom: 22px; }
  .operational-dashboard .stat-card { min-height: 128px; padding: 15px; }
  .operational-dashboard .stat-card::before { left: 14px; top: 14px; height: 22px; }
  .operational-dashboard .stat-card > p:first-child { margin-left: 10px; margin-bottom: 12px; font-size: 9px; }
  .operational-dashboard .stat-card h3 { font-size: clamp(23px, 7vw, 28px); }
  .operational-dashboard .stat-card > div:not(.ops-progress-track) > div:last-child { width: 34px; height: 34px; }
  .operational-dashboard #menu-grid { grid-template-columns: 1fr; gap: 10px; }
  .operational-dashboard .menu-card { min-height: 92px; padding: 15px 16px; gap: 13px; }
  .operational-dashboard .menu-icon { width: 42px; height: 42px; min-width: 42px; }
}
@media (max-width: 370px) {
  .operational-dashboard .operational-header { padding-left: 10px; padding-right: 10px; }
  .operational-dashboard #projectTitle { max-width: 112px; }
  .operational-dashboard .operational-main { width: calc(100% - 22px); }
  .operational-dashboard .stat-card { min-height: 124px; padding: 13px; }
  .operational-dashboard .stat-card > div:not(.ops-progress-track) > div:last-child { width: 30px; height: 30px; }
}