/* PBJ V4.7.2 — Clean Accent UI
   Tujuan: efek visual konsisten tetapi tidak ramai.
   - Panel utama: aksen gradasi tipis di bagian atas.
   - KPI: tanpa glow/lingkaran dekoratif besar.
   - Kotak kecil/nested: tanpa gradasi, cukup border dan hover halus.
   - Form: fokus jelas tanpa menggeser layout.
*/

:root {
  --pbj-accent-gradient: linear-gradient(90deg, var(--brand-navy), var(--brand-blue), var(--brand-cyan));
  --pbj-focus-ring: color-mix(in srgb, var(--brand-cyan) 16%, transparent);
  --pbj-hover-border: color-mix(in srgb, var(--brand-blue) 22%, var(--border));
  --pbj-hover-shadow: 0 8px 22px color-mix(in srgb, var(--brand-navy) 7%, transparent);
}

/* ---------------------------------------------------------
   1. PANEL / CARD UTAMA
   --------------------------------------------------------- */
.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}

/* Aksen dibuat pendek dan masuk dari sisi kiri/kanan agar tidak seperti garis
   yang menempel kasar pada sudut card. */
.card::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: var(--pbj-accent-gradient);
  opacity: .82;
  pointer-events: none;
}

/* V4.7.1 membuat glow besar pada sudut kanan bawah. Dihilangkan seluruhnya. */
.card::after {
  content: none !important;
  display: none !important;
}

.card:hover {
  border-color: var(--pbj-hover-border);
  box-shadow: var(--pbj-hover-shadow);
}

/* ---------------------------------------------------------
   2. KPI DASHBOARD / RINGKASAN
   --------------------------------------------------------- */
.kpi {
  position: relative;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.kpi::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 14px;
  right: 14px;
  width: auto;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: var(--pbj-accent-gradient);
  opacity: .80;
  pointer-events: none;
}

/* Hilangkan lingkaran/glow besar bawaan KPI yang membuat dashboard terlihat
   penuh efek. Ikon KPI sudah cukup menjadi elemen visual. */
.kpi::after {
  content: none !important;
  display: none !important;
}

.kpi:hover {
  transform: none;
  border-color: var(--pbj-hover-border);
  box-shadow: var(--pbj-hover-shadow);
}

.kpi-icon {
  box-shadow: none;
}

/* ---------------------------------------------------------
   3. KOTAK KECIL / NESTED CONTENT
   Tidak diberi pseudo-element gradasi. Hierarki tetap jelas.
   --------------------------------------------------------- */
.pbj-panel-effect,
.pbj-column-effect,
.cleanliness-location-card,
.cleanliness-location-setting-card,
.pbj-migration-step,
.pbj-mig-mode,
.pbj-migration-kpi,
.report-kpi,
.cms-stat,
.payroll-period-status > div,
.finance-checklist > div,
.finance-detail-grid > div,
.monthly-recap-strip > div,
.mw-summary-grid > div,
.detail-metrics > div,
.simple-entry-card,
.simple-step-box,
.simple-result-box,
.supplier-mode-card,
.calc-box,
.cleanup-step,
.payroll-setup-card,
.payroll-salary-box,
.simple-activity-grid > a,
.today-money > div,
.quick-balance > a,
.admin-tool-grid > div,
.email-queue-summary > div {
  position: relative;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.pbj-panel-effect::before,
.pbj-panel-effect::after,
.pbj-column-effect::before,
.pbj-column-effect::after,
.cleanliness-location-card::before,
.cleanliness-location-card::after,
.cleanliness-location-setting-card::before,
.cleanliness-location-setting-card::after,
.pbj-migration-step::before,
.pbj-migration-step::after,
.pbj-mig-mode::before,
.pbj-mig-mode::after,
.pbj-migration-kpi::before,
.pbj-migration-kpi::after,
.report-kpi::before,
.report-kpi::after,
.cms-stat::before,
.cms-stat::after,
.payroll-period-status > div::before,
.payroll-period-status > div::after,
.finance-checklist > div::before,
.finance-checklist > div::after,
.finance-detail-grid > div::before,
.finance-detail-grid > div::after,
.monthly-recap-strip > div::before,
.monthly-recap-strip > div::after,
.mw-summary-grid > div::before,
.mw-summary-grid > div::after,
.detail-metrics > div::before,
.detail-metrics > div::after,
.simple-entry-card::before,
.simple-entry-card::after,
.simple-step-box::before,
.simple-step-box::after,
.simple-result-box::before,
.simple-result-box::after,
.supplier-mode-card::before,
.supplier-mode-card::after,
.calc-box::before,
.calc-box::after,
.cleanup-step::before,
.cleanup-step::after,
.payroll-setup-card::before,
.payroll-setup-card::after,
.payroll-salary-box::before,
.payroll-salary-box::after {
  content: none !important;
  display: none !important;
}

.pbj-panel-effect:hover,
.pbj-column-effect:hover,
.cleanliness-location-card:hover,
.cleanliness-location-setting-card:hover,
.pbj-migration-step:hover,
.pbj-mig-mode:hover,
.pbj-migration-kpi:hover,
.report-kpi:hover,
.cms-stat:hover,
.payroll-period-status > div:hover,
.finance-checklist > div:hover,
.finance-detail-grid > div:hover,
.monthly-recap-strip > div:hover,
.mw-summary-grid > div:hover,
.detail-metrics > div:hover,
.simple-entry-card:hover,
.simple-step-box:hover,
.simple-result-box:hover,
.supplier-mode-card:hover,
.calc-box:hover,
.cleanup-step:hover,
.payroll-setup-card:hover,
.payroll-salary-box:hover,
.simple-activity-grid > a:hover,
.today-money > div:hover,
.quick-balance > a:hover,
.admin-tool-grid > div:hover,
.email-queue-summary > div:hover {
  transform: none;
  border-color: var(--pbj-hover-border);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--brand-navy) 5%, transparent);
}

/* ---------------------------------------------------------
   4. FORM / INPUT
   Fokus jelas, tanpa lift/drop-shadow pada seluruh kolom.
   --------------------------------------------------------- */
.pbj-field-column-effect,
.form-grid > label,
.simple-form-grid > label,
.pbj-form-grid > label,
.cms-form-grid > label,
.filter-bar > label,
.transaction-filter-bar > label,
.compact-form > label,
.payroll-simple-grid > label,
.pbj-manual-form > label {
  min-width: 0;
  border-radius: 12px;
  transition: none;
}

.pbj-field-column-effect:hover,
.form-grid > label:hover,
.simple-form-grid > label:hover,
.pbj-form-grid > label:hover,
.cms-form-grid > label:hover,
.filter-bar > label:hover,
.transaction-filter-bar > label:hover,
.compact-form > label:hover,
.payroll-simple-grid > label:hover,
.pbj-manual-form > label:hover {
  filter: none;
  transform: none;
}

.pbj-field-column-effect:focus-within,
.form-grid > label:focus-within,
.simple-form-grid > label:focus-within,
.pbj-form-grid > label:focus-within,
.cms-form-grid > label:focus-within,
.filter-bar > label:focus-within,
.transaction-filter-bar > label:focus-within,
.compact-form > label:focus-within,
.payroll-simple-grid > label:focus-within,
.pbj-manual-form > label:focus-within {
  transform: none;
}

.pbj-field-column-effect:focus-within :is(input,select,textarea),
.form-grid > label:focus-within :is(input,select,textarea),
.simple-form-grid > label:focus-within :is(input,select,textarea),
.pbj-form-grid > label:focus-within :is(input,select,textarea),
.cms-form-grid > label:focus-within :is(input,select,textarea),
.filter-bar > label:focus-within :is(input,select,textarea),
.transaction-filter-bar > label:focus-within :is(input,select,textarea),
.compact-form > label:focus-within :is(input,select,textarea),
.payroll-simple-grid > label:focus-within :is(input,select,textarea),
.pbj-manual-form > label:focus-within :is(input,select,textarea) {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--pbj-focus-ring);
}

/* ---------------------------------------------------------
   5. TABEL
   --------------------------------------------------------- */
.table-wrap,
.data-scroll-panel {
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.table-wrap:hover,
.data-scroll-panel:hover {
  border-color: color-mix(in srgb, var(--brand-blue) 18%, var(--border));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-navy) 4%, transparent);
}

tbody td {
  transition: background-color .12s ease;
}

tbody tr:hover td {
  background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface));
}

tbody tr:hover td:first-child {
  box-shadow: none;
}

/* ---------------------------------------------------------
   6. TOMBOL
   Tidak melompat saat hover, hanya shadow/border halus.
   --------------------------------------------------------- */
.btn,
.single-toggle,
.tab,
.nav-link,
button {
  transition: box-shadow .14s ease, border-color .14s ease, background-color .14s ease, color .14s ease;
}

.btn:hover,
.single-toggle:hover,
.tab:hover,
.btn:active,
.single-toggle:active,
.tab:active {
  transform: none;
}

/* Panel status/alert mempertahankan warna semantik tanpa dekorasi tambahan. */
.alert::before,
.alert::after,
.empty-state::before,
.empty-state::after,
.badge::before,
.badge::after {
  content: none !important;
  display: none !important;
}

/* ---------------------------------------------------------
   7. DARK MODE
   --------------------------------------------------------- */
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .kpi:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,.20);
}

html[data-theme="dark"] .card::before,
html[data-theme="dark"] .kpi::before {
  opacity: .72;
}

/* ---------------------------------------------------------
   8. RESPONSIVE / REDUCED MOTION
   --------------------------------------------------------- */
@media (max-width: 760px) {
  .card::before { left: 12px; right: 12px; }
  .kpi::before { left: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .kpi,
  .table-wrap,
  .data-scroll-panel,
  .btn,
  .single-toggle,
  .tab,
  .nav-link,
  button {
    transition: none !important;
  }
}

/* PBJ V4.7.8 — Action Center */
.action-center-card .card-head{align-items:flex-start}
.action-center-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.action-center-item{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:76px;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:inherit;text-decoration:none;box-shadow:none;transition:border-color .14s ease,background-color .14s ease}
.action-center-item:hover{border-color:color-mix(in srgb,var(--brand-blue) 30%,var(--border));background:color-mix(in srgb,var(--primary-soft) 28%,var(--surface))}
.action-center-item>div{display:grid;gap:3px;min-width:0}.action-center-item small{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.action-center-item strong{font-size:13px;color:var(--text)}.action-center-item span{font-size:12px;color:var(--muted);white-space:normal}.action-center-item>b{font-size:24px;font-weight:500;color:var(--brand-blue)}
.action-center-item.danger{border-left:3px solid #c6382f}.action-center-item.warn{border-left:3px solid #d98a16}
.management-mini-kpis{margin-top:12px}
@media(max-width:760px){.action-center-grid{grid-template-columns:1fr}.action-center-card .card-head{display:grid;gap:8px}.action-center-card .card-head .actions{justify-content:flex-start}}

/* ========================================================================== */
/* PBJ V4.7.9 — Compact Dashboard Action Center + Account Settings            */
/* ========================================================================== */

/* Header kerja dibuat fokus: judul + pencarian. Kontrol tampilan ada di akun. */
.top.top-clean-header{grid-template-columns:minmax(190px,1fr) minmax(280px,540px) minmax(190px,1fr)}
.top-clean-header .top-left{justify-self:start}
.top-clean-header .top-center{justify-self:center;width:100%;padding:0}
.top-clean-header .top-actions-clean{justify-self:end;width:1px;min-width:1px;overflow:hidden}

/* Menu akun */
.sidebar .sidebar-account-dropdown .sidebar-account-action{
  width:100%;display:flex;align-items:center;justify-content:flex-start;gap:9px;
  padding:10px 12px;border:0;border-radius:9px;background:transparent;color:var(--text);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;text-align:left;
}
.sidebar .sidebar-account-dropdown .sidebar-account-action:hover{background:var(--surface-2)}
.sidebar .sidebar-account-dropdown .sidebar-account-action svg{width:17px;height:17px;color:var(--primary)}

/* Modal umum PBJ */
.pbj-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.pbj-modal.open{display:flex}
.pbj-modal-backdrop{position:absolute;inset:0;background:rgba(4,19,38,.48);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.pbj-modal-panel{position:relative;z-index:1;width:min(700px,calc(100vw - 32px));max-height:min(82vh,760px);overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 70px rgba(3,24,48,.24);display:flex;flex-direction:column}
.pbj-modal-panel>header{min-height:66px;padding:14px 17px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border-soft);background:var(--surface)}
.pbj-modal-panel>header small{display:block;margin-bottom:2px;color:var(--primary);font-size:9px;font-weight:800;letter-spacing:.12em}
.pbj-modal-panel>header h2{margin:0;font-size:18px}
.pbj-modal-panel .icon-btn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:22px;cursor:pointer}
body.pbj-modal-open{overflow:hidden}

/* Pengaturan akun */
.settings-panel{width:min(620px,calc(100vw - 32px))}
.settings-body{padding:5px 17px 17px;overflow:auto}
.settings-row{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--border-soft)}
.settings-row:last-child{border-bottom:0}
.settings-row>div:first-child{display:grid;gap:3px}
.settings-row>div:first-child strong{font-size:13px}
.settings-row>div:first-child span{font-size:11px;color:var(--muted)}
.settings-choice{display:flex;gap:7px;padding:3px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2)}
.settings-choice button{min-height:36px;padding:7px 11px;display:flex;align-items:center;gap:6px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:11px;font-weight:750;cursor:pointer}
.settings-choice button svg{width:15px;height:15px}
.settings-choice button.active,.settings-choice button[aria-pressed="true"]{background:var(--surface);color:var(--primary);box-shadow:0 1px 4px rgba(7,45,82,.12)}
.settings-install-row .pwa-install-button{justify-self:end}

/* Action Center ringkas */
.action-center-card.action-center-compact{padding-bottom:16px}
.action-center-compact .action-center-head{align-items:center;margin-bottom:12px}
.action-center-compact .action-center-head h2{margin-bottom:2px}
.action-center-compact .action-center-head .hint{margin:0;font-size:11px}
.action-total-badge{display:inline-flex;align-items:center;min-height:27px;padding:4px 9px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:10px;font-weight:800;white-space:nowrap}
.action-category-buttons{display:flex;flex-wrap:wrap;gap:9px}
.action-category-button{position:relative;min-height:44px;display:inline-grid;grid-template-columns:28px auto 24px;align-items:center;gap:7px;padding:6px 8px 6px 7px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer;box-shadow:none;transition:border-color .14s ease,background-color .14s ease}
.action-category-button:hover{border-color:color-mix(in srgb,var(--primary) 34%,var(--border));background:var(--surface-2)}
.action-category-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--primary-soft);color:var(--primary)}
.action-category-icon svg{width:15px;height:15px}
.action-category-label{font-size:11px;font-weight:800;white-space:nowrap}
.action-count-badge{min-width:22px;height:22px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:#e8eef5;color:#29435d;font-size:10px;font-weight:900}
.action-category-button.danger .action-count-badge{background:#feeceb;color:#b42318}
.action-category-button.warn .action-count-badge{background:#fff2d8;color:#9b5b00}
.action-category-button.danger{border-left:2px solid #d3483f}
.action-category-button.warn{border-left:2px solid #d9972a}
.action-center-empty{min-height:54px;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px dashed var(--border);border-radius:11px;color:var(--muted)}
.action-center-empty>span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#e8f7ef;color:#16815d;font-weight:900}
.action-center-empty>div{display:grid;gap:2px}.action-center-empty strong{font-size:12px;color:var(--text)}.action-center-empty small{font-size:10px}

/* Popup detail pekerjaan */
.action-detail-panel{width:min(760px,calc(100vw - 32px))}
.action-detail-body{padding:14px 17px 18px;overflow:auto}
.action-detail-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border-soft)}
.action-detail-summary strong{font-size:14px}.action-detail-summary span{font-size:10px;color:var(--muted)}
.action-detail-list{display:grid;gap:8px}
.action-detail-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:inherit;text-decoration:none}
.action-detail-item:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--primary) 28%,var(--border))}
.action-detail-item>div{display:grid;gap:2px;min-width:0}
.action-detail-item small{font-size:9px;font-weight:850;letter-spacing:.05em;color:var(--muted)}
.action-detail-item strong{font-size:12px}.action-detail-item span{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.action-detail-item>b{font-size:21px;color:var(--primary);font-weight:500}
.action-detail-item.danger{border-left:3px solid #d3483f}.action-detail-item.warn{border-left:3px solid #d9972a}

html[data-theme="dark"] .action-count-badge{background:#1b2d40;color:#bed0e1}
html[data-theme="dark"] .action-category-button.danger .action-count-badge{background:#462522;color:#ffb2ab}
html[data-theme="dark"] .action-category-button.warn .action-count-badge{background:#493518;color:#ffd490}
html[data-theme="dark"] .pbj-modal-backdrop{background:rgba(0,0,0,.64)}

@media(max-width:1080px){
  .top.top-clean-header{grid-template-columns:auto 1fr auto}
  .top-clean-header .top-center{padding:0 8px}
}
@media(max-width:900px){
  .top.top-clean-header{display:flex}
  .top-clean-header .top-center,.top-clean-header .top-actions-clean{display:none}
}
@media(max-width:640px){
  .pbj-modal{padding:10px}
  .pbj-modal-panel,.settings-panel,.action-detail-panel{width:100%;max-height:88vh;border-radius:14px}
  .settings-row{grid-template-columns:1fr;gap:9px}
  .settings-choice{justify-self:stretch}.settings-choice button{flex:1;justify-content:center}
  .settings-install-row .pwa-install-button{justify-self:stretch;justify-content:center}
  .action-center-compact .action-center-head{display:flex;align-items:flex-start}
  .action-category-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .action-category-button{width:100%;grid-template-columns:28px minmax(0,1fr) 24px;text-align:left}
  .action-detail-summary{align-items:flex-start;flex-direction:column;gap:3px}
}
@media(max-width:390px){.action-category-buttons{grid-template-columns:1fr}}

/* ========================================================================== */
/* PBJ V4.7.10 — Header Notification Action Center                            */
/* ========================================================================== */

/* Header: judul + pencarian + notifikasi. */
.top.top-clean-header{grid-template-columns:minmax(190px,1fr) minmax(280px,540px) minmax(190px,1fr)}
.top-clean-header .top-actions-clean{
  justify-self:end;width:auto;min-width:0;overflow:visible;display:flex;align-items:center;justify-content:flex-end;
}
.header-notification-button{
  position:relative;min-height:38px;padding:7px 10px;display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);
  font:inherit;font-size:11px;font-weight:800;cursor:pointer;box-shadow:0 2px 7px rgba(7,45,82,.06);
  transition:border-color .14s ease,background-color .14s ease,box-shadow .14s ease;
}
.header-notification-button:hover{border-color:color-mix(in srgb,var(--primary) 34%,var(--border));background:var(--surface-2);box-shadow:0 4px 12px rgba(7,45,82,.09)}
.notification-bell-icon{width:17px;height:17px;color:var(--primary)}
.header-notification-label{white-space:nowrap}
.header-notification-badge{
  min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border-radius:999px;
  background:#e8eef5;color:#29435d;font-size:10px;font-weight:900;line-height:1;
}
.header-notification-button.danger .header-notification-badge{background:#d92d20;color:#fff}
.header-notification-button.warn .header-notification-badge{background:#f4a51c;color:#fff}
.header-notification-button.danger{border-color:color-mix(in srgb,#d92d20 24%,var(--border))}
.header-notification-button.warn{border-color:color-mix(in srgb,#f4a51c 26%,var(--border))}

/* Popup notifikasi diletakkan dekat tombol kanan atas, bukan memenuhi dashboard. */
.header-notification-popup{position:fixed;inset:0;z-index:132;display:none}
.header-notification-popup.open{display:block}
.notification-popup-backdrop{position:absolute;inset:0;background:rgba(4,19,38,.18);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
.notification-popup-panel{
  position:absolute;top:76px;right:18px;width:min(440px,calc(100vw - 36px));max-height:calc(100vh - 94px);
  display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:15px;
  background:var(--surface);box-shadow:0 22px 60px rgba(3,24,48,.24);
}
.notification-popup-panel>header{
  min-height:64px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-bottom:1px solid var(--border-soft);background:var(--surface);
}
.notification-popup-panel>header small{display:block;margin-bottom:2px;color:var(--primary);font-size:9px;font-weight:850;letter-spacing:.11em}
.notification-popup-panel>header h2{margin:0;font-size:17px}
.notification-popup-panel .icon-btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font-size:20px;cursor:pointer}
.notification-popup-summary{display:flex;gap:7px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--border-soft);background:var(--surface-2)}
.notification-popup-summary span{display:inline-flex;align-items:center;gap:4px;min-height:25px;padding:4px 8px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:9px;color:var(--muted);font-weight:750}
.notification-popup-summary span strong{font-size:10px;color:var(--text)}
.notification-popup-summary span.danger{border-color:#f3c2be;background:#fff4f3;color:#a72b22}
.notification-popup-summary span.danger strong{color:#b42318}
.notification-popup-summary span.warn{border-color:#f1d39c;background:#fff8ea;color:#8a5700}
.notification-popup-summary span.warn strong{color:#9b5b00}
.notification-popup-body{padding:10px 12px 14px;overflow:auto;overscroll-behavior:contain}
.notification-group+.notification-group{margin-top:13px;padding-top:13px;border-top:1px solid var(--border-soft)}
.notification-group-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 7px}
.notification-group-title strong{font-size:11px;color:var(--text)}
.notification-group-title span{min-width:21px;height:21px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:9px;font-weight:850;color:var(--muted)}
.notification-list{display:grid;gap:7px}
.notification-item{
  display:grid;grid-template-columns:8px minmax(0,1fr) 14px;align-items:center;gap:9px;padding:10px 10px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface);color:inherit;text-decoration:none;
  transition:border-color .14s ease,background-color .14s ease;
}
.notification-item:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--primary) 28%,var(--border))}
.notification-priority-dot{width:7px;height:7px;border-radius:50%;background:#7b91a6;align-self:start;margin-top:5px}
.notification-item.danger .notification-priority-dot{background:#d92d20}
.notification-item.warn .notification-priority-dot{background:#e49a16}
.notification-item-copy{display:grid;gap:2px;min-width:0}
.notification-item-copy small{font-size:8px;font-weight:850;letter-spacing:.045em;color:var(--muted)}
.notification-item.danger .notification-item-copy small{color:#b42318}
.notification-item.warn .notification-item-copy small{color:#9b5b00}
.notification-item-copy strong{font-size:11px;color:var(--text);line-height:1.35}
.notification-item-copy span{font-size:10px;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
.notification-item>b{font-size:18px;font-weight:500;color:var(--primary)}
.notification-empty{min-height:130px;display:flex;align-items:center;justify-content:center;gap:11px;padding:20px;color:var(--muted)}
.notification-empty>span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#e8f7ef;color:#16815d;font-weight:900}
.notification-empty>div{display:grid;gap:3px}.notification-empty strong{font-size:12px;color:var(--text)}.notification-empty small{font-size:10px}
.notification-popup-panel>footer{padding:9px 14px;border-top:1px solid var(--border-soft);background:var(--surface-2);font-size:9px;color:var(--muted)}
body.pbj-notification-open{overflow:hidden}

html[data-theme="dark"] .notification-popup-backdrop{background:rgba(0,0,0,.38)}
html[data-theme="dark"] .notification-popup-summary span.danger{background:#402321;border-color:#67302c;color:#ffb2ab}
html[data-theme="dark"] .notification-popup-summary span.danger strong{color:#ffb2ab}
html[data-theme="dark"] .notification-popup-summary span.warn{background:#423117;border-color:#674917;color:#ffd490}
html[data-theme="dark"] .notification-popup-summary span.warn strong{color:#ffd490}

@media(max-width:900px){
  .top.top-clean-header{display:flex;align-items:center}
  .top-clean-header .top-center{display:none}
  .top-clean-header .top-actions-clean{display:flex;margin-left:auto}
}
@media(max-width:640px){
  .header-notification-button{min-width:40px;min-height:38px;padding:7px 8px;gap:5px}
  .header-notification-label{display:none}
  .notification-popup-panel{top:66px;right:8px;width:calc(100vw - 16px);max-height:calc(100vh - 74px);border-radius:13px}
  .notification-popup-summary{padding:9px 10px}
  .notification-popup-body{padding:9px 9px 12px}
}

/* =========================================================
   PBJ V4.7.3 — Transaction Correction Framework
   ========================================================= */
.correction-intro .card-head{margin-bottom:10px}
.correction-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0 2px}
.correction-flow span{display:inline-flex;align-items:center;min-height:32px;padding:6px 10px;border:1px solid var(--border,#d7e5f1);border-radius:9px;background:var(--surface-soft,#f7fbff);font-size:12px;font-weight:800;letter-spacing:.02em}
.correction-flow b{font-weight:900;opacity:.5}
.correction-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.simple-correction-form textarea{min-height:92px}
.row-maintenance-actions .muted{font-size:11px;white-space:nowrap}
[data-theme="dark"] .correction-flow span{background:rgba(255,255,255,.035)}
@media(max-width:700px){
 .correction-flow{gap:5px}.correction-flow span{font-size:11px;padding:5px 7px}.correction-flow b{font-size:11px}
 .correction-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.correction-tabs .btn{width:100%;padding-left:6px;padding-right:6px}
}

/* =========================================================
   PBJ V4.7.6 — Finance Reconciliation
   ========================================================= */
.v476-recon-head{margin-bottom:14px}
.v476-recon-head h1{margin:2px 0 4px;font-size:22px}
.v476-recon-filter{align-items:end;margin-top:12px}
.v476-recon-kpis{margin:0 0 14px}
.v476-module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.v476-module-card{display:grid;gap:5px;min-height:86px;padding:12px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:inherit;text-decoration:none}
.v476-module-card:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--primary) 30%,var(--border))}
.v476-module-card span{font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.045em}
.v476-module-card strong{font-size:14px}.v476-module-card small{font-size:10px;color:var(--muted)}
.v476-findings td{vertical-align:top}.v476-findings code{white-space:nowrap}
.v476-recon-actions{min-width:190px}.v476-recon-actions form{margin:5px 0}.v476-recon-actions .btn{white-space:normal}
.v476-resolve{margin-top:5px}.v476-resolve summary{cursor:pointer;font-size:10px;font-weight:800;color:var(--primary)}
.v476-resolve textarea{width:100%;min-width:180px;margin:6px 0;font-size:11px}
@media(max-width:1000px){.v476-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.v476-module-grid{grid-template-columns:1fr}.v476-recon-head h1{font-size:18px}.v476-recon-actions{min-width:160px}}