/* Mitra Manajemen Konstruksi — Modern Unified Design System
   Shared by the main application and the embedded RAB/BOQ studio.
   Presentation-only overrides: no workflow, data, or calculation changes. */
:root {
  --mmk-ink: #152b45;
  --mmk-ink-2: #2b4058;
  --mmk-muted: #708197;
  --mmk-soft-muted: #91a0b2;
  --mmk-primary: #2f65d5;
  --mmk-primary-hover: #2454b7;
  --mmk-primary-soft: #eaf1ff;
  --mmk-accent: #f28a2e;
  --mmk-accent-soft: #fff4e8;
  --mmk-success: #16845d;
  --mmk-success-soft: #e9f8f0;
  --mmk-danger: #c6424d;
  --mmk-danger-soft: #fff0f1;
  --mmk-warning: #a86b12;
  --mmk-warning-soft: #fff6df;
  --mmk-line: #dfe7f1;
  --mmk-line-strong: #ccd8e7;
  --mmk-surface: #ffffff;
  --mmk-canvas: #f4f7fb;
  --mmk-surface-soft: #f8faff;
  --mmk-radius: 14px;
  --mmk-radius-sm: 9px;
  --mmk-shadow: 0 5px 18px rgba(21, 43, 69, .055);
  --mmk-shadow-hover: 0 10px 26px rgba(21, 43, 69, .09);
}

html { scroll-behavior: smooth; background: var(--mmk-canvas); }
body, html { background: var(--mmk-canvas); color: var(--mmk-ink-2); }
body, button, input, select, textarea { font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; }
::selection { background: #dce8ff; color: var(--mmk-ink); }
:focus-visible { outline: 3px solid rgba(47, 101, 213, .24); outline-offset: 2px; }

/* Main application frame */
.app-shell { background: var(--mmk-canvas); }
.sidebar, .app .sidebar {
  background: linear-gradient(180deg, #122943 0%, #10243c 64%, #0d2037 100%) !important;
  border-right: 1px solid rgba(255,255,255,.045);
  box-shadow: 5px 0 26px rgba(18, 41, 67, .06);
}
.sidebar-brand { padding: 22px 19px; border-bottom-color: rgba(255,255,255,.09); }
.brand-mark, .brandmark { border-radius: 13px; box-shadow: 0 7px 16px rgba(242,138,46,.18); }
.brand-copy b { letter-spacing: -.2px; line-height: 1.25; }
.workspace-pill { border-radius: 10px; background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.1); }
.nav-section, .navlabel { color: #92a8c3 !important; letter-spacing: 1.25px; }
.navigation { padding-left: 10px; padding-right: 10px; }
.nav-item, .nav button {
  border-radius: 10px !important;
  min-height: 40px;
  margin: 3px 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-item:hover, .nav button:hover { background: rgba(255,255,255,.075) !important; color: #fff !important; }
.nav-item.active, .nav button.active {
  background: linear-gradient(90deg, rgba(47,101,213,.32), rgba(47,101,213,.15)) !important;
  color: #fff !important;
  border-left: 3px solid #f4a14a !important;
  padding-left: 8px !important;
  box-shadow: inset 0 0 0 1px rgba(143,177,245,.08);
}
.nav-item.active .nav-icon, .nav button.active .ico { color: #ffbd78 !important; }
.nav-count { border: 1px solid rgba(255,255,255,.08); }
.sidebar-bottom, .sidebottom { border-top-color: rgba(255,255,255,.09); }
.side-action { border-radius: 9px; }

.main-area, .main { min-width: 0; background: var(--mmk-canvas); }
.topbar {
  min-height: 72px; height: auto; padding: 13px clamp(16px, 2.3vw, 34px);
  background: rgba(255,255,255,.94); border-bottom: 1px solid var(--mmk-line);
  box-shadow: 0 3px 14px rgba(21,43,69,.025); backdrop-filter: blur(14px);
}
.breadcrumb, .crumb { color: var(--mmk-muted); }
.breadcrumb b, .crumb b { color: var(--mmk-ink); font-weight: 750; }
.topbar-right, .topright { gap: 12px; }
.topbar-date, .today { color: var(--mmk-muted); }
.global-project-picker, .global-project-picker label { color: var(--mmk-muted); }
.global-project-picker label { letter-spacing: .08em; font-size: 9px; font-weight: 800; }
.user-chip { border-left-color: var(--mmk-line); }
.avatar { background: linear-gradient(145deg, #e9f0ff, #dce7ff); color: #2857b2; border-radius: 11px; }
.page-content, .content { padding: clamp(18px, 2.15vw, 32px); }
.app-footer { background: rgba(255,255,255,.55); border-top-color: var(--mmk-line); color: var(--mmk-soft-muted); }

/* Consistent headings and supporting text */
.page-heading, .heading { align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.page-heading h1, .heading h1, .ahsp-title h1 { color: var(--mmk-ink) !important; letter-spacing: -.65px; font-weight: 800 !important; line-height: 1.22; }
.page-heading h1, .heading h1 { font-size: clamp(22px, 2vw, 29px) !important; }
.page-heading p, .heading p, .ahsp-title p { margin-top: 7px; color: var(--mmk-muted) !important; font-size: 12px; line-height: 1.7; max-width: 900px; }
.page-kicker, .eyebrow { color: var(--mmk-accent) !important; font-size: 10px; font-weight: 850; letter-spacing: 1.55px; }
.heading-actions, .actions { gap: 8px; }

/* Surfaces, cards, KPI blocks, and section headers */
.panel, .card, .kpi-card, .stat, .kpi, .panelhead, .panel-header,
.report-document-panel, .ahsp-panel, .project-card, .summary-card {
  border-color: var(--mmk-line) !important;
  border-radius: var(--mmk-radius) !important;
  box-shadow: var(--mmk-shadow) !important;
}
.panel, .card, .kpi-card, .stat, .kpi { background: var(--mmk-surface); }
.panel { overflow: hidden; }
.panelhead, .panel-header { padding: 16px 19px; border-bottom-color: #e9eef5 !important; background: linear-gradient(180deg, #fff 0%, #fcfdff 100%); }
.panelhead h3, .panelhead h4, .panel-header h3, .panel-header h4 { color: var(--mmk-ink-2) !important; font-size: 13px; font-weight: 800 !important; letter-spacing: -.1px; }
.panelhead p, .panel-header p { color: var(--mmk-muted) !important; font-size: 11px; line-height: 1.6; }
.panelbody, .panel-body { padding: 19px; }
.kpi-grid, .kpirow, .stats { gap: 14px; }
.kpi-card, .stat { padding: 18px 19px; transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.kpi-card:hover, .stat:hover { border-color: #d0ddef !important; box-shadow: var(--mmk-shadow-hover) !important; }
.kpi-value, .stat .num { color: var(--mmk-ink) !important; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.kpi-label, .stat .label, .kpi small { color: var(--mmk-muted) !important; font-weight: 650; }
.notice, .notice-box, .info-banner, .form-hint-box { border-radius: 11px; }

/* Buttons and interactive controls */
button, .btn, .table-action, .icon-btn, .ahsp-iconbtn, .report-preview-btn, .progress-module-tab, .nav-item {
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn, .btn.small, .btn.sm, .table-action, .table-action.sm {
  border-radius: 9px !important; font-weight: 700; letter-spacing: -.05px; box-shadow: none;
}
.btn { min-height: 37px; padding: 9px 14px; font-size: 12px; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(21,43,69,.075); }
.btn:active { transform: translateY(0); }
.btn.primary, .btn.primary:hover, .btn.ahsp-add, .btn.ahsp-add:hover {
  background: linear-gradient(135deg, #3673e4, #2a5dc8) !important;
  color: #fff !important; border-color: #2f65d5 !important;
  box-shadow: 0 4px 10px rgba(47,101,213,.16);
}
.btn.primary:hover, .btn.ahsp-add:hover { box-shadow: 0 7px 15px rgba(47,101,213,.22); }
.btn.orange, .btn.warning-action { background: linear-gradient(135deg, #f6a14a, #ee8127) !important; color: #fff !important; border-color: #ed8a2d !important; }
.btn.danger, .table-action.danger { color: var(--mmk-danger) !important; }
.btn.danger:hover, .table-action.danger:hover { background: var(--mmk-danger-soft) !important; border-color: #f4c8cc !important; }
.table-action { min-height: 30px; padding: 6px 10px; background: #fff; border-color: var(--mmk-line-strong); color: #52667e; }
.table-action:hover { background: var(--mmk-primary-soft); border-color: #b9cdf8; color: var(--mmk-primary); }
.icon-btn, .modal-close, .xbtn { border-radius: 10px !important; border-color: var(--mmk-line); }
.icon-btn:hover, .modal-close:hover, .xbtn:hover { background: var(--mmk-primary-soft); border-color: #c5d7fa; color: var(--mmk-primary); }
.link-btn { color: var(--mmk-primary) !important; font-weight: 750; }
.link-btn:hover { color: var(--mmk-primary-hover) !important; }

/* Unified form controls throughout all operational screens */
input:not([type="checkbox"]):not([type="radio"]), select, textarea,
.field input, .field select, .field textarea, .formgrid input, .formgrid select, .formgrid textarea {
  color: var(--mmk-ink-2); background-color: #fff; border-color: var(--mmk-line-strong); border-radius: 9px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:not([type="checkbox"]):not([type="radio"]), select { min-height: 38px; }
textarea { line-height: 1.6; }
input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: #b9c9dd; }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus, .formgrid input:focus, .formgrid select:focus, .formgrid textarea:focus {
  outline: none; border-color: #8ab0f6; box-shadow: 0 0 0 3px rgba(47,101,213,.12); background: #fff;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--mmk-primary); }
label, .field label, .form-grid label, .formgrid label { color: #53677e; font-weight: 700; }
input::placeholder, textarea::placeholder { color: #9aa8b8; opacity: 1; }
.form-hint, .formhint, .form-help, .tiny { color: var(--mmk-muted); line-height: 1.6; }
.form-error { color: var(--mmk-danger); }
.form-grid, .formgrid { gap: 14px 16px; }

/* Table language shared by all operational modules and RAB/BOQ */
.tablewrap, .table-wrap, .table-scroll, .table-scroll-wrap, .table-container {
  border-color: var(--mmk-line); border-radius: 0 0 var(--mmk-radius) var(--mmk-radius);
}
.tablewrap table, .table-wrap table, .table-scroll table, .table-container table,
.data-table, .ahsp-table, .rab-table, .schedule-table,
#page-wbs table:not(.report-document-table):not(.billing-deduction-table),
.content table:not(.report-document-table):not(.billing-deduction-table) {
  border-color: var(--mmk-line);
}
.tablewrap thead th, .table-wrap thead th, .table-scroll thead th, .table-container thead th,
.data-table th, .ahsp-table th, .rab-table th, .schedule-table th,
#page-wbs table:not(.report-document-table):not(.billing-deduction-table) thead th,
.content table:not(.report-document-table):not(.billing-deduction-table) thead th {
  background: #f2f6fb !important; color: #5b708a !important; border-bottom: 1px solid #dfe7f1 !important;
  font-size: 10px !important; line-height: 1.45; font-weight: 800 !important; letter-spacing: .42px !important;
  padding: 12px 14px !important; vertical-align: middle;
}
.tablewrap tbody td, .table-wrap tbody td, .table-scroll tbody td, .table-container tbody td,
.data-table td, .ahsp-table td, .rab-table td, .schedule-table td,
#page-wbs table:not(.report-document-table):not(.billing-deduction-table) tbody td,
.content table:not(.report-document-table):not(.billing-deduction-table) tbody td {
  color: #344b65; border-bottom: 1px solid #eaf0f6; font-size: 12px; line-height: 1.55; padding: 11px 14px;
}
.tablewrap tbody tr:nth-child(even), .table-wrap tbody tr:nth-child(even), .table-scroll tbody tr:nth-child(even), .table-container tbody tr:nth-child(even) { background: #fcfdff; }
.tablewrap tbody tr:hover, .table-wrap tbody tr:hover, .table-scroll tbody tr:hover, .table-container tbody tr:hover,
.data-table tbody tr:hover, .ahsp-table tbody tr:hover, .rab-table tbody tr:hover { background: #f5f9ff; }
.tablewrap tbody tr:last-child td, .table-wrap tbody tr:last-child td, .table-scroll tbody tr:last-child td, .table-container tbody tr:last-child td { border-bottom: 0; }
.cell-strong, .data-table .cell-strong { color: var(--mmk-ink) !important; font-weight: 750; }
.cell-sub { color: #8494a7 !important; font-size: 10px; }
.table-toolbar, .toolbar, .panelhead .toolbar { background: #fff; border-bottom-color: #e8eef6; }
.table-footer, .footerline { color: var(--mmk-muted); border-top-color: var(--mmk-line); }

/* Badges, alerts, progress indicators and empty states */
.badge, .tag, .role-tag { border-radius: 999px; font-weight: 750; letter-spacing: 0; }
.badge.success, .tag.green, .tag.success { background: var(--mmk-success-soft) !important; color: var(--mmk-success) !important; }
.badge.warning, .tag.orange, .tag.warning { background: var(--mmk-warning-soft) !important; color: var(--mmk-warning) !important; }
.badge.danger, .tag.red, .tag.danger { background: var(--mmk-danger-soft) !important; color: var(--mmk-danger) !important; }
.badge.blue, .tag.blue { background: var(--mmk-primary-soft) !important; color: var(--mmk-primary-hover) !important; }
.progress-track, .progressbar, .progress-meter { background: #eaf0f7; border-radius: 999px; overflow: hidden; }
.progress-fill, .progressbar-fill { border-radius: 999px; }
.empty-state, .empty, .table-empty { color: var(--mmk-muted); }
.empty-state h3, .empty h3 { color: var(--mmk-ink-2); }
.notice, .form-notice, .info-note { border-radius: 11px; }

/* Dialogs and forms; document sheets inside them keep their own print styling */
.modal-backdrop { background: rgba(13, 29, 49, .48) !important; backdrop-filter: blur(4px); }
.modal {
  border: 1px solid rgba(223,231,241,.95); border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(12,29,51,.22) !important; overflow: hidden;
}
.modal-header { background: #fff; border-bottom: 1px solid #e9eef5; padding: 18px 21px; }
.modal-header h2 { color: var(--mmk-ink) !important; font-weight: 800; }
.modal-header p { color: var(--mmk-muted); }
.modal-body { background: #fff; }
.modal-footer { border-top: 1px solid #e9eef5; background: #fbfcfe; padding: 13px 20px; }
.report-preview-modal, .billing-invoice-preview-modal, .billing-invoice-settings-modal, .schedule-export-modal { border-radius: 16px; box-shadow: 0 24px 80px rgba(12,29,51,.2); }
.report-preview-modal-header { border-bottom-color: var(--mmk-line); }
.report-preview-modal-footer { border-top-color: var(--mmk-line); background: #fbfcfe; }

/* Consistent progress/task/module navigation */
.progress-module-nav, .pilltabs, .active-project-bar, .workspace-tabs {
  border: 1px solid var(--mmk-line) !important; border-radius: 14px !important; background: #fff !important; box-shadow: var(--mmk-shadow) !important;
}
.progress-module-tab, .pilltabs button, .workspace-tabs button {
  border-radius: 10px !important; font-weight: 750; min-height: 38px;
}
.progress-module-tab.active, .pilltabs button.active, .workspace-tabs button.active {
  background: var(--mmk-primary-soft) !important; color: var(--mmk-primary-hover) !important; border-color: #c5d7ff !important; box-shadow: inset 0 0 0 1px rgba(47,101,213,.035);
}
.active-project-info strong { color: var(--mmk-ink-2); }

/* RAB/BOQ Studio uses the same colors and component geometry */
.app .topbar { background: rgba(255,255,255,.96); border-bottom-color: var(--mmk-line); }
.app .nav button { border-radius: 10px !important; }
.app .nav button.active { background: var(--mmk-primary-soft) !important; color: var(--mmk-primary-hover) !important; border-left: 3px solid var(--mmk-accent) !important; }
.app .nav button.active .ico { color: var(--mmk-accent) !important; }
.app .pilltabs { padding: 8px; gap: 7px; }
.app .pilltabs button { border-color: transparent; padding: 10px 13px; }
.app .section .panel, .app .section .stat { border-radius: var(--mmk-radius) !important; }
.app .tablewrap { overflow-x: auto; border-radius: 0 0 var(--mmk-radius) var(--mmk-radius); }
.app .tablewrap table { min-width: 700px; }
.app .notice { border: 1px solid #d9e6fc; border-radius: 11px; background: #f3f7ff; color: #4a6791; padding: 12px 14px; }
.app .gantt-task-bar { background: linear-gradient(90deg, #ffad4d, #ef7b20) !important; box-shadow: 0 2px 5px rgba(216,112,26,.16); }
.app .gantt-summary-bar { background: #e58a2e !important; }
.app .gantt-parent .gantt-row-label { background: #fff7ee; }
.app .gantt-parent .gantt-row-label strong { color: #9b5b1c; }

/* Toasts: shared success/error feedback */
.toast-root { z-index: 2000; }
.toast, .toast-root .toast {
  border: 1px solid var(--mmk-line); border-left: 4px solid var(--mmk-success); border-radius: 12px;
  background: rgba(255,255,255,.98); color: var(--mmk-ink-2);
  box-shadow: 0 14px 34px rgba(21,43,69,.16); backdrop-filter: blur(12px);
}
.toast.error, .toast-root .toast.error { border-left-color: var(--mmk-danger); }
.toast b, .toast strong { color: var(--mmk-ink); }
.toast span { color: var(--mmk-muted); }

/* Keep print/PDF document typography and page dimensions controlled by their own templates. */
.billing-invoice-print-sheet, .billing-invoice-print-sheet *,
.report-document-table, .report-document-table *,
.schedule-export-paper, .schedule-export-paper *,
.report-print-sheet, .report-print-sheet *, #schedule-export-print-host { box-sizing: border-box; }
@media print {
  html, body { background: #fff !important; }
  .sidebar, .topbar, .app-footer, .no-print { display: none !important; }
  .modal-backdrop { backdrop-filter: none !important; background: #fff !important; }
}

/* Responsive rules for laptop, tablet, and handset widths */
@media (max-width: 1000px) {
  .topbar { padding-left: 18px; padding-right: 18px; }
  .page-content, .content { padding: 20px 18px; }
  .dashboard-grid, .twocol { gap: 14px; }
}
@media (max-width: 760px) {
  .sidebar, .app .sidebar { box-shadow: 12px 0 40px rgba(12,29,51,.2); }
  .topbar { gap: 10px; min-height: 64px; padding: 10px 13px; }
  .topbar-right { gap: 8px; }
  .topbar-date { display: none; }
  .user-chip { padding-left: 8px; }
  .page-content, .content { padding: 16px 12px 22px !important; }
  .page-heading, .heading { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 17px; }
  .page-heading h1, .heading h1, .ahsp-title h1 { font-size: 22px !important; }
  .heading-actions, .actions { width: 100%; display: flex; flex-wrap: wrap; }
  .heading-actions .btn, .actions .btn { flex: 1 1 auto; }
  .kpi-grid, .stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .dashboard-grid, .twocol { grid-template-columns: minmax(0,1fr); }
  .panelhead, .panel-header { padding: 13px 14px; }
  .panelbody, .panel-body { padding: 14px; }
  .tablewrap, .table-wrap, .table-scroll { max-width: 100%; overflow-x: auto; }
  .tablewrap table, .table-wrap table, .table-scroll table { min-width: 720px; }
  .modal { width: min(calc(100vw - 18px), 980px) !important; max-height: calc(100dvh - 18px) !important; border-radius: 14px !important; }
  .modal-header { padding: 15px 16px; }
  .modal-body { padding: 14px 15px; }
  .modal-footer { padding: 11px 14px; }
  .progress-module-nav, .pilltabs { overflow-x: auto; flex-wrap: nowrap; }
  .progress-module-tab, .pilltabs button { flex: 0 0 auto; }
  .app-footer { padding: 12px 14px; gap: 8px; flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .kpi-grid, .stats { grid-template-columns: minmax(0,1fr); }
  .topbar .breadcrumb, .topbar .crumb { max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .btn { min-height: 38px; }
  .page-content, .content { padding-left: 10px !important; padding-right: 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Refined login surface and secondary report cards */
.login-screen {
  background: radial-gradient(ellipse at 87% 9%, #eaf1ff 0, transparent 31%), #f8faff;
}
.login-art {
  background: radial-gradient(ellipse at 88% 9%, rgba(83,126,184,.48) 0, transparent 36%),
              linear-gradient(145deg, #102640 0%, #163757 62%, #20466d 100%);
}
.login-art .eyebrow { color: #ffc27e; }
.login-panel {
  max-width: 570px; margin: 26px auto; padding: clamp(26px, 4vw, 48px);
  border: 1px solid rgba(222,231,243,.95); border-radius: 22px;
  background: rgba(255,255,255,.97); box-shadow: 0 18px 54px rgba(18,43,73,.09);
}
.login-panel h2 { color: var(--mmk-ink) !important; font-size: 25px !important; letter-spacing: -.55px; }
.login-brand { margin-bottom: 34px; }
.demo-accounts { border: 1px solid var(--mmk-line); border-radius: 12px; background: #fbfcff; padding: 14px 15px; }
.demo-accounts div + div { border-top: 1px solid #edf1f7; }
.demo-accounts code { background: #f0f4fa; border-radius: 5px; padding: 4px 6px; }
.text-btn { color: var(--mmk-primary) !important; }
.report-card { border-radius: 14px !important; border-color: var(--mmk-line) !important; box-shadow: 0 4px 14px rgba(21,43,69,.035); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.report-card:hover { transform: translateY(-2px); border-color: #c7d8f5 !important; box-shadow: var(--mmk-shadow-hover) !important; }
.summary-chip { border-radius: 10px; border-color: var(--mmk-line); background: #fff; }
.report-card-icon { border-radius: 12px; }
@media (max-width: 620px) {
  .login-panel { margin: 12px auto; width: calc(100% - 24px); border-radius: 18px; padding: 24px 20px; }
  .login-brand { margin-bottom: 25px; }
}


/* Global long-form behavior: keep actions visible while the form body scrolls.
   Applies to both main-app (.modal-body) and RAB/BOQ Studio (.modalbody) dialogs. */
.modal-backdrop, .modalback {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}
.modal {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)));
  overflow: hidden !important;
}
.modal-header, .modalhead, .modal-header:first-child, .modalhead:first-child {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  background: #fff;
}
.modal-body, .modalbody {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.modal-footer, .modalfoot {
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  margin-top: auto;
  background: #fbfcfe;
  border-top: 1px solid var(--mmk-line, #dfe7f1);
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 12px rgba(21,43,69,.035);
}
/* Some data-entry dialogs contain a native form as a direct child of the modal. */
.modal > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.modal > form > .modal-body,
.modal > form > .modalbody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
}
@media (max-width: 760px) {
  .modal-backdrop, .modalback { padding: 9px 9px max(9px, env(safe-area-inset-bottom, 0px)); align-items: center; }
  .modal { width: min(calc(100vw - 18px), 980px) !important; max-height: calc(100vh - 18px); max-height: calc(100dvh - max(18px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))); border-radius: 14px !important; }
  .modal-body, .modalbody { min-height: 0; padding-bottom: 18px; }
  .modal-footer, .modalfoot { gap: 8px; flex-wrap: wrap; padding-left: 14px; padding-right: 14px; }
  .modal-footer > button, .modalfoot > button { flex: 0 0 auto; }
}

/* Berita Acara form: document-inspired layout while keeping the global modal actions visible. */
.minutes-entry-modal {
  width: min(1160px, calc(100vw - 28px)) !important;
  max-height: min(96vh, 1240px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}
.minutes-entry-modal > form { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.minutes-entry-modal .modal-header { flex: 0 0 auto; position: sticky; top: 0; z-index: 5; }
.minutes-entry-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 24px; background: #f4f7fb; }
.minutes-entry-modal .modal-footer { flex: 0 0 auto; position: sticky; bottom: 0; z-index: 5; background: #fff; box-shadow: 0 -5px 16px rgba(22, 40, 65, .05); }
.minutes-entry-fields { display: flex; flex-direction: column; gap: 13px; color: var(--mmk-ink, #243b56); }
.minutes-document-banner { display:flex; justify-content:space-between; align-items:center; gap:18px; background:#fff; border:1px solid #d8e2ef; border-radius:10px; padding:16px 18px; box-shadow:0 3px 12px rgba(20,41,67,.035); }
.minutes-document-brand { display:flex; align-items:center; gap:13px; min-width:0; }
.minutes-doc-logo,.minutes-doc-mark { width:62px; height:54px; object-fit:contain; flex:0 0 62px; }
.minutes-doc-mark { display:grid; place-items:center; border-radius:9px; background:#eaf1ff; color:#244d83; font-weight:850; letter-spacing:.4px; }
.minutes-document-brand div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.minutes-document-brand b { color:#27496f; font-size:13px; font-weight:850; }
.minutes-document-brand strong { font-size:12px; color:#344960; }
.minutes-document-brand small { color:#7f8ea1; font-size:10px; }
.minutes-document-title { display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right; }
.minutes-document-title span { font:800 20px Georgia, 'Times New Roman', serif; letter-spacing:1px; color:#214878; }
.minutes-document-title b { border-top:2px solid #214878; padding-top:5px; font:700 12px Georgia, 'Times New Roman', serif; color:#30445e; }
.minutes-form-section { border:1px solid #dfe7f1; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 2px 8px rgba(20,41,67,.025); }
.minutes-form-section-title { display:flex; align-items:center; gap:11px; padding:12px 15px; background:#f9fbfe; border-bottom:1px solid #e6edf5; }
.minutes-form-section-title>span { display:grid; place-items:center; width:29px; height:29px; flex:0 0 29px; border-radius:8px; background:#eaf1ff; color:#2f65cb; font-size:11px; font-weight:850; }
.minutes-form-section-title>div { display:flex; flex-direction:column; gap:3px; }
.minutes-form-section-title b { font-size:12px; color:#263c57; }
.minutes-form-section-title small { font-size:10px; color:#8190a3; }
.minutes-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 15px; padding:15px; }
.minutes-form-field { display:flex; flex-direction:column; gap:6px; min-width:0; color:#52677f; font-size:10px; font-weight:750; }
.minutes-form-field.full { grid-column:1 / -1; }
.minutes-form-field input,.minutes-form-field select,.minutes-form-field textarea { width:100%; min-width:0; border:1px solid #d6e1ef; border-radius:7px; background:#fff; color:#293f58; padding:10px 11px; font:500 12px/1.45 'Inter', 'Segoe UI', sans-serif; }
.minutes-form-field input:focus,.minutes-form-field select:focus,.minutes-form-field textarea:focus { outline:0; border-color:#7aa2f6; box-shadow:0 0 0 3px rgba(64,114,216,.12); }
.minutes-form-field textarea { min-height:82px; resize:vertical; }
.minutes-form-field .readonly { background:#f5f8fc; color:#60738a; }
.minutes-form-hint { padding:0 15px 10px; margin:0; color:#6f839b; font-size:10px; line-height:1.5; }
.minutes-signatory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:15px; }
.minutes-signatory-card { display:flex; flex-direction:column; gap:10px; min-width:0; border:1px solid #e2e9f2; border-radius:9px; padding:12px; background:#fff; }
.minutes-signatory-card>b { color:#244b78; font-size:11px; padding-bottom:8px; border-bottom:1px solid #edf1f6; }
.minutes-signatory-card .minutes-form-field { gap:5px; }
.minutes-contract-table-wrap,.minutes-progress-table-wrap { width:100%; overflow:auto; padding:0 15px 13px; }
.minutes-contract-filterbar { display:grid; grid-template-columns:auto minmax(185px,260px); align-items:center; gap:7px 12px; padding:11px 15px 9px; background:#fff; border-bottom:1px solid #edf1f7; }
.minutes-contract-filterbar>label { color:#52677f; font-size:10px; font-weight:800; }
.minutes-contract-filterbar>select { min-height:34px; width:100%; border:1px solid #d4dfeb; border-radius:8px; background:#fff; color:#29435f; padding:7px 10px; font:inherit; font-size:11px; }
.minutes-contract-filterbar>small { grid-column:1 / -1; color:#8190a3; font-size:10px; line-height:1.5; }
@media(max-width:760px) { .minutes-contract-filterbar { grid-template-columns:1fr; gap:6px; padding:10px; } .minutes-contract-filterbar>small { grid-column:1; } }

.minutes-contract-table,.minutes-progress-table { border-collapse:collapse; width:100%; min-width:680px; font-size:10px; }
.minutes-contract-table th,.minutes-progress-table th { padding:10px 9px; text-align:left; white-space:nowrap; background:#edf2f8; color:#5c6f86; border-bottom:1px solid #d7e1ed; font-size:9px; text-transform:uppercase; letter-spacing:.35px; }
.minutes-contract-table td,.minutes-progress-table td { padding:9px; color:#40546b; border-bottom:1px solid #e8edf4; vertical-align:middle; }
.minutes-contract-table .num { text-align:right; white-space:nowrap; }
.minutes-contract-row.minutes-contract-group td { background:#eaf3e0; color:#2b4a29; font-weight:850; }
.minutes-contract-row.minutes-contract-sub td { background:#f6f9f2; color:#476043; font-weight:750; }
.minutes-contract-row.minutes-contract-item td:nth-child(2) { color:#30445c; }
.minutes-contract-empty { text-align:center; color:#8795a7 !important; padding:22px !important; }
.minutes-contract-table tfoot th { padding:12px 9px; border-top:2px solid #244b78; background:#fff; color:#243d5a; font-size:11px; }
.minutes-contract-terbilang { display:flex; gap:14px; align-items:flex-start; padding:11px 15px 13px; background:#fbfcfe; border-top:1px solid #e7edf5; font-size:10px; }
.minutes-contract-terbilang b { min-width:82px; color:#52677f; }
.minutes-contract-terbilang span { color:#b4232c; font-weight:750; }
.minutes-progress-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 15px 10px; color:#4f637a; font-size:10px; font-weight:750; }
.minutes-progress-table input { width:100%; min-width:90px; border:1px solid #d6e1ef; border-radius:6px; padding:8px 9px; color:#2e435d; background:#fff; font-size:11px; }
.minutes-progress-table .minutes-progress-description { min-width:250px; }
.minutes-progress-table .minutes-progress-no { color:#7f8ea1; width:36px; }
.minutes-summary-fields { background:#fbfcfe; border-top:1px solid #edf1f6; }
.minutes-form-footnote { padding:12px 14px; border-radius:8px; background:#edf4ff; border:1px solid #d6e5ff; color:#55708f; font-size:10px; line-height:1.6; }
@media(max-width:760px){
 .minutes-entry-modal { width:calc(100vw - 12px)!important; max-height:calc(100dvh - 12px)!important; border-radius:10px!important; }
 .minutes-entry-modal .modal-header { padding:14px; }
 .minutes-entry-modal .modal-body { padding:10px; }
 .minutes-entry-modal .modal-footer { padding:11px 13px; }
 .minutes-document-banner { align-items:flex-start; flex-direction:column; padding:12px; }
 .minutes-document-title { align-items:flex-start; text-align:left; }
 .minutes-document-title span { font-size:17px; }
 .minutes-form-grid { grid-template-columns:1fr; gap:11px; padding:12px; }
 .minutes-form-field.full { grid-column:auto; }
 .minutes-signatory-grid { grid-template-columns:1fr; padding:12px; }
 .minutes-contract-terbilang { flex-direction:column; gap:5px; }
 .minutes-form-section-title { padding:10px 12px; }
 .minutes-contract-table-wrap,.minutes-progress-table-wrap { padding-left:10px; padding-right:10px; }
}

/* Berita Acara: progress photo upload and nine-cell appendix preview */
.minutes-photo-upload-body { padding:16px; display:grid; gap:14px; }
.minutes-photo-dropzone { display:flex; min-height:150px; padding:20px; border:1.5px dashed #9db4d2; border-radius:12px; background:#f7faff; align-items:center; justify-content:center; flex-direction:column; gap:7px; text-align:center; cursor:pointer; color:#2e4b70; }
.minutes-photo-dropzone:hover { border-color:#3b73c5; background:#f0f6ff; }
.minutes-photo-dropzone b { font-size:13px; }
.minutes-photo-dropzone span:not(.minutes-photo-upload-icon), .minutes-photo-dropzone small { font-size:11px; color:#73849b; }
.minutes-photo-upload-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#e5efff; color:#245fba; font-size:25px; }
.minutes-photo-dropzone input[type=file] { max-width:100%; font-size:11px; margin-top:5px; }
.minutes-photo-preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.minutes-photo-preview-card { min-width:0; border:1px solid #dce5f0; border-radius:10px; overflow:hidden; background:#fff; }
.minutes-photo-preview-card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#f1f5f9; }
.minutes-photo-preview-card>div { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 9px 4px; }
.minutes-photo-preview-card>div b { font-size:11px; color:#334155; }
.minutes-photo-caption { width:calc(100% - 16px); margin:4px 8px 9px; padding:7px; border:1px solid #dbe4ef; border-radius:6px; font-size:11px; }
@media(max-width:640px) { .minutes-photo-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }