/* EZZY PAM — operational workspace, inspired by the supplied teal reference. */
:root, [data-coreui-theme="light"] {
    --pam-ink: #192c28; --pam-muted: #65756f; --pam-accent: #247b67;
    --pam-button-primary: #ff9a00; --pam-button-secondary: #44a1a4; --pam-button-disabled: #325e6a;
    --pam-line: #e2e9e5; --pam-surface: #fff; --pam-canvas: #f6f8f7;
    --cui-primary: #247b67; --cui-primary-rgb: 36,123,103; --cui-link-color: #247b67;
    --cui-link-hover-color: #185747; --cui-link-color-rgb: 36,123,103; --cui-link-hover-color-rgb: 24,87,71; --cui-body-color: #192c28; --cui-body-bg: #f6f8f7;
    --cui-border-color: #e2e9e5; --cui-body-font-size: .875rem;
    --cui-body-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
[data-coreui-theme="dark"] {
    --pam-ink: #e6efeb; --pam-muted: #a4b7af; --pam-accent: #75c9b0;
    --pam-line: #30443c; --pam-surface: #1c3028; --pam-canvas: #14251f;
    --cui-primary: #75c9b0; --cui-primary-rgb: 117,201,176; --cui-link-color: #8fdcc5;
    --cui-link-hover-color: #b6efde; --cui-link-color-rgb: 143,220,197; --cui-link-hover-color-rgb: 182,239,222; --cui-body-color: #e6efeb; --cui-body-bg: #14251f;
    --cui-border-color: #30443c;
}
:root body { color: var(--pam-ink); background: var(--pam-canvas); -webkit-font-smoothing: antialiased; }
::selection { background: #bde3d5; color: #153e31; }
* { scrollbar-color: #8eaaa0 transparent; scrollbar-width: thin; }
a { text-underline-offset: 3px; }
input, textarea { caret-color: var(--pam-accent); }
:focus-visible { outline: 3px solid var(--pam-accent); outline-offset: 3px; }
.sidebar {
    --cui-sidebar-bg: #192b29; --cui-sidebar-width: 248px;
    --cui-sidebar-nav-link-color: #d5e3de; --cui-sidebar-nav-link-hover-color: #fff;
    --cui-sidebar-nav-link-hover-bg: #344c48; --cui-sidebar-nav-link-active-bg: #44a1a4;
    --cui-sidebar-nav-link-active-color: #09272c; --cui-sidebar-nav-link-icon-color: #a9c2b9;
    --cui-sidebar-nav-link-icon-hover-color: #ffbc59; --cui-sidebar-nav-link-icon-active-color: #09272c;
    --cui-sidebar-nav-group-bg: transparent; --cui-sidebar-border-color: #31423e;
    border-color: #31423e !important;
}
.sidebar-header { min-height: 84px; padding: 24px 20px; border-color: #31423e !important; }
.sidebar-brand { font-size: 1.2rem; letter-spacing: -.025em; }
.sidebar-brand img { object-fit: contain; width: 30px; }
.sidebar-brand b { font-weight: 400; color: #a0bcb1; }
.sidebar-nav { padding: 20px 12px; gap: 5px; list-style: none; }
.sidebar-nav ul { list-style: none; }
.sidebar-nav .nav-icon-bullet { display: none; }
.sidebar-nav .nav-link { transition: color .16s, background-color .16s; }
.sidebar-nav .nav-link:hover:not(.disabled) { color: #ffd18d; background: #344c48; }
.sidebar-nav .nav-link.active, .sidebar-nav .nav-link.active:hover { background: #44a1a4; color: #09272c; }
.sidebar-nav .nav-link.active .nav-icon { color: #09272c; }
.sidebar-nav .nav-link { min-height: 43px; padding: 11px 12px; border-radius: 6px; font-size: .84rem; gap: 6px; }
.sidebar-nav .nav-icon { flex: 0 0 22px; font-size: 1rem; }
.sidebar-nav .nav-group-items .nav-link { padding-left: 26px; font-size: .8rem; }
.sidebar-nav .nav-group-toggle::after { opacity: 1; background-color: black !important; }
.sidebar-nav .nav-group.show>.nav-group-toggle:not(:has(.nav-group-toggle-indicator))::after { background-color: white !important; }
.sidebar-nav .nav-group.show > .nav-group-toggle { color: #fff; background: #243a34; }
.sidebar-nav .nav-group.show > .nav-group-toggle:hover { color: #ffd18d; background: #344c48; }
.sidebar-footer { border-color: #31423e !important; padding: 15px 20px; gap: 10px; }
.sidebar-account { display: flex; gap: 10px; align-items: center; min-width: 0; overflow: hidden; }
.sidebar-account .account-initial { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: #427160; color: white; }
.sidebar-account strong { display: block; color: #ebf4ef; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.sidebar-account small { color: #a3bbb0; font-size: .69rem; }
.sidebar-narrow-unfoldable:not(:hover) .sidebar-account { display: none; }
.header { --cui-header-bg: var(--pam-surface); border: 0; box-shadow: none; }
.header > .container-fluid:first-child { min-height: 68px; border-color: var(--pam-line) !important; }
.header > .container-fluid:last-child { padding-top: 12px; padding-bottom: 12px; background: var(--pam-canvas); }
.header-nav .avatar { width: 34px; height: 34px; font-weight: 600; font-size: .84rem; background: #dbede5 !important; color: #245441 !important; }
.header .breadcrumb { font-size: .75rem; }
.header .breadcrumb a { text-decoration: none; color: var(--pam-muted); }
.header .header-nav { gap: 5px; }
.header .header-toggler { color: var(--pam-muted); }
.workspace-label { margin-left: 10px; color: var(--pam-muted); font-size: .82rem; }
.body > .container-fluid { padding-bottom: 32px; }
h1, h2, h3 { color: var(--pam-ink); }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 4px 0 28px; }
.page-heading h1 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.2; margin-bottom: 10px; }
.page-date { font-size: .8rem; margin-bottom: 8px; color: var(--pam-muted); }
.period-picker { min-width: 210px; }
.period-picker label { display: block; font-size: .72rem; color: var(--pam-muted); margin-bottom: 6px; }
.period-picker input { font-size: .8rem; }
.card { --cui-card-bg: var(--pam-surface); --cui-card-border-color: var(--pam-line); --cui-card-cap-bg: transparent; border-radius: 10px; box-shadow: none; }
.card-header { padding: 18px 20px; font-weight: 600; border-color: var(--pam-line); }
.card-header .btn, .card-header form { font-weight: 400; }
.card-body { padding: 20px; }
.card-footer { padding: 16px 20px; background: transparent; }
.card-footer .pagination { margin-bottom: 0; }
.btn { border-radius: 6px; font-size: .84rem; padding: 9px 14px; font-weight: 500; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn-sm { font-size: .76rem; padding: 7px 10px; }
:root .btn-primary { --cui-btn-color: #192c28; --cui-btn-bg: var(--pam-button-primary); --cui-btn-border-color: var(--pam-button-primary); --cui-btn-hover-color: #192c28; --cui-btn-hover-bg: #ffb13b; --cui-btn-hover-border-color: #ffb13b; --cui-btn-active-color: #192c28; --cui-btn-active-bg: #e88900; --cui-btn-active-border-color: #e88900; --cui-btn-focus-shadow-rgb: 255,154,0; }
:root .btn-secondary { --cui-btn-color: #09272c; --cui-btn-bg: var(--pam-button-secondary); --cui-btn-border-color: var(--pam-button-secondary); --cui-btn-hover-color: #09272c; --cui-btn-hover-bg: #67b9bc; --cui-btn-hover-border-color: #67b9bc; --cui-btn-active-color: #fff; --cui-btn-active-bg: #2b7077; --cui-btn-active-border-color: #2b7077; --cui-btn-focus-shadow-rgb: 68,161,164; }
:root .btn-outline-primary { --cui-btn-color: #9b5200; --cui-btn-border-color: var(--pam-button-primary); --cui-btn-hover-bg: var(--pam-button-primary); --cui-btn-hover-border-color: var(--pam-button-primary); --cui-btn-hover-color: #192c28; --cui-btn-active-bg: #e88900; --cui-btn-active-border-color: #e88900; --cui-btn-active-color: #192c28; --cui-btn-focus-shadow-rgb: 255,154,0; }
:root .btn-outline-secondary { --cui-btn-color: #276c70; --cui-btn-border-color: var(--pam-button-secondary); --cui-btn-hover-bg: var(--pam-button-secondary); --cui-btn-hover-color: #09272c; --cui-btn-hover-border-color: var(--pam-button-secondary); --cui-btn-active-bg: #2b7077; --cui-btn-active-border-color: #2b7077; --cui-btn-active-color: #fff; --cui-btn-focus-shadow-rgb: 68,161,164; }
:root[data-coreui-theme="dark"] .btn-outline-primary { --cui-btn-color: #ffbc59; }
:root[data-coreui-theme="dark"] .btn-outline-secondary { --cui-btn-color: #87d0d2; }
:root .btn:disabled, :root .btn.disabled, :root fieldset:disabled .btn { background: var(--pam-button-disabled) !important; border-color: var(--pam-button-disabled) !important; color: #fff !important; opacity: 1; box-shadow: none; }
.btn:not(:disabled):not(.disabled):hover { box-shadow: 0 3px 7px rgb(25 44 40 / 10%); }
.btn:not(:disabled):not(.disabled):active { box-shadow: inset 0 2px 3px rgb(25 44 40 / 16%); }
.form-control, .form-select { border-color: var(--pam-line); border-radius: 6px; padding: 10px 12px; font-size: .85rem; background-color: var(--pam-surface); }
.form-control-sm, .form-select-sm { padding: 8px 11px; font-size: .8rem; }
.form-select { padding-right: 2.25rem; }
#filter-loket { min-width: 10rem; max-width: 18rem; }
.form-control:focus, .form-select:focus { border-color: var(--pam-accent); box-shadow: 0 0 0 3px rgb(36 123 103 / 12%); }
.form-control::placeholder { color: var(--pam-muted); opacity: 1; }
.form-label { font-weight: 500; }
.table { --cui-table-bg: transparent; --cui-table-color: var(--pam-ink); --cui-table-border-color: var(--pam-line); --cui-table-striped-bg: transparent; --cui-table-hover-bg: rgb(68 161 164 / 12%); font-size: .8rem; font-variant-numeric: tabular-nums; }
.table > :not(caption) > * > * { padding: 8px 12px; vertical-align: middle; }
.table > thead > tr > th { padding-top: 9px; padding-bottom: 9px; background: var(--pam-canvas); color: var(--pam-muted); font-size: .72rem; font-weight: 600; white-space: nowrap; border-bottom-width: 1px; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table td .btn { padding: 4px 7px; margin: 1px 0; }
.table td:has(.btn) { white-space: nowrap; }
.table caption { padding: 12px 18px; }
.badge { border-radius: 4px; padding: 5px 7px; font-size: .65rem; font-weight: 600; letter-spacing: .02em; }
.badge.bg-success { background: #e5f3ec !important; color: #23654d; }
.badge.bg-danger { background: #faeae7 !important; color: #9a4537; }
div.dt-container { font-size: .8rem; }
div.dt-container .dt-layout-row { padding: 12px 18px; margin: 0; }
div.dt-container .dt-layout-table { padding: 0; }
div.dt-container .dt-search input { background: var(--pam-surface); border: 1px solid var(--pam-line); border-radius: 6px; padding: 9px 12px; color: var(--pam-ink); min-width: 220px; }
div.dt-container .dt-info { color: var(--pam-muted); }
div.dt-container .dt-paging .dt-paging-button { border-radius: 5px; color: var(--pam-ink) !important; }
div.dt-container .dt-paging .dt-paging-button.current { background: #ff9a00 !important; color: #192c28 !important; border: 1px solid #ff9a00 !important; }
div.dt-container .dt-paging .dt-paging-button:hover { background: #44a1a4 !important; border: 1px solid #44a1a4 !important; color: #09272c !important; }
table.dataTable { margin: 0 !important; border-collapse: collapse !important; }
table.dataTable tbody tr { background: transparent; }
table.dataTable > tbody > tr > td { box-shadow: none; padding: 8px 12px; white-space: nowrap; }
table.dataTable > tbody > tr > td.table-wrap { white-space: normal; min-width: 220px; max-width: 420px; }
table.dataTable > thead > tr > th { padding: 9px 26px 9px 12px; }
.table-hover > tbody > tr:hover > td, table.dataTable > tbody > tr:hover > td { background-color: var(--cui-table-hover-bg); }
.dt-processing { background: var(--pam-surface); color: var(--pam-ink); border: 1px solid var(--pam-line); border-radius: 8px; z-index: 5; }
.metric-strip { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; background: var(--pam-surface); border: 1px solid var(--pam-line); border-radius: 10px; margin-bottom: 26px; }
.metric { padding: 22px; min-width: 0; }
.metric + .metric { border-left: 1px solid var(--pam-line); }
.metric-label { display: flex; align-items: center; gap: 9px; font-size: .78rem; margin-bottom: 18px; }
.metric-value { font-size: clamp(1.5rem, 2.1vw, 2rem); font-weight: 650; line-height: 1.2; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metric-value span { font-size: .82rem; font-weight: 500; letter-spacing: 0; }
.metric-money { font-size: clamp(1.3rem, 1.9vw, 1.85rem); }
.metric-note { color: var(--pam-muted); font-size: .7rem; margin-top: 10px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 22px; }
.panel-heading { padding: 22px 22px 12px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.panel-heading h2 { font-size: .97rem; font-weight: 650; margin-bottom: 6px; letter-spacing: -.02em; }
.panel-heading p { font-size: .73rem; color: var(--pam-muted); margin-bottom: 0; }
.chart-key { display: flex; align-items: center; gap: 6px; font-size: .65rem; white-space: nowrap; color: var(--pam-muted); margin-top: 4px; }
.chart-key span { width: 7px; height: 7px; border-radius: 2px; background: #247b67; }
.trend-chart { height: 248px; margin: 18px 22px 8px; position: relative; }
.panel-footnote { font-size: .65rem; color: var(--pam-muted); margin: 12px 22px 20px; line-height: 1.6; }
.chart-details { font-size: .7rem; color: var(--pam-muted); padding: 0 22px; }
.chart-details summary { cursor: pointer; }
.aging-row { padding: 13px 22px; font-size: .78rem; }
.aging-row strong { font-variant-numeric: tabular-nums; }
.aging-track { height: 7px; border-radius: 2px; background: var(--pam-canvas); margin-top: 11px; overflow: hidden; }
.aging-track span { display: block; height: 100%; background: #82b8a2; }
.aging-mid .aging-track span { background: #4a957d; }
.aging-old .aging-track span { background: #215c4b; }
.aging-total { margin: 14px 22px 6px; border-top: 1px solid var(--pam-line); padding-top: 18px; display: flex; justify-content: space-between; font-size: .76rem; gap: 8px; }
.panel-link { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; text-decoration: none; font-size: .73rem; font-weight: 600; margin-top: auto; gap: 8px; }
.operation-row { display: flex; align-items: center; gap: 12px; margin: 0 22px; padding: 18px 0; }
.operation-row + .operation-row { border-top: 1px solid var(--pam-line); }
.operation-icon { width: 35px; height: 35px; border-radius: 7px; display: grid; place-items: center; background: #e9f3ee; color: #2e795c; flex-shrink: 0; }
.operation-icon.warning { background: #faf0de; color: #896018; }
.operation-row strong { font-size: .8rem; font-weight: 600; }
.operation-row p { color: var(--pam-muted); font-size: .7rem; margin: 5px 0 0; }
.operation-row .operation-count { margin-left: auto; padding-left: 12px; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.connection-row { display: flex; justify-content: space-between; padding: 13px 22px; font-size: .8rem; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3f9872; margin-right: 9px; }
.status-segel { background: #b88537; }.status-putus { background: #af6451; }
.data-freshness { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px; border-top: 1px solid var(--pam-line); margin-top: auto; font-size: .65rem; color: var(--pam-muted); flex-wrap: wrap; }
.data-freshness strong { display: block; font-size: .68rem; margin-top: 5px; font-weight: 500; color: var(--pam-ink); }
.dashboard-empty { padding: 65px 20px; text-align: center; color: var(--pam-muted); }.dashboard-empty > i { font-size: 1.6rem; }.dashboard-empty h3 { font-size: 1rem; margin-top: 16px; }.dashboard-empty p { font-size: .8rem; }
.footer { background: transparent; border-color: var(--pam-line); color: var(--pam-muted); font-size: .65rem; min-height: 48px; }
.login-page { background: var(--pam-surface); }
.login-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
.login-story { display: flex; flex-direction: column; background: #192e28; color: #e5f1eb; padding: 42px clamp(32px, 5.5vw, 88px); }
.login-brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; font-size: 1.25rem; letter-spacing: -.03em; }
.login-brand b { font-weight: 400; color: #b0cdbd; }.login-brand:hover { color: #fff; }.login-brand img { object-fit: contain; }
.login-story-content { margin: auto 0; padding: 64px 0; max-width: 460px; }
.login-story h1 { font-size: clamp(2.2rem, 3.8vw, 3.7rem); line-height: 1.12; letter-spacing: -.04em; font-weight: 600; color: #e8f5ed; margin-bottom: 22px; }
.login-story-content > p { font-size: .95rem; line-height: 1.8; color: #b4cfc0; max-width: 37ch; margin-bottom: 40px; }
.login-preview { border: 1px solid #3d584a; border-radius: 10px; background: #223c30; padding: 22px; transform: rotate(-2deg); }
.preview-heading { display: flex; justify-content: space-between; font-size: .73rem; color: #b9d2c2; margin-bottom: 12px; }
.preview-step { display: flex; gap: 12px; align-items: center; padding: 16px 0; }.preview-step + .preview-step { border-top: 1px solid #3b5547; }
.preview-step > span { width: 34px; height: 34px; background: #355444; color: #c5e4d0; display: grid; place-items: center; border-radius: 7px; }.preview-step strong { font-weight: 500; font-size: .85rem; }.preview-step small { display: block; color: #b1cbbb; font-size: .67rem; margin-top: 5px; }.preview-step > i { margin-left: auto; color: #8ec5a6; }
.login-story-footer { color: #aac5b5; font-size: .7rem; }
.login-form-panel { display: flex; flex-direction: column; padding: 48px clamp(28px, 5vw, 80px) 26px; }
.login-form-wrap { max-width: 380px; width: 100%; margin: auto; padding: 56px 0; }
.login-welcome { margin-bottom: 34px; }.login-welcome h2 { font-size: 1.85rem; font-weight: 650; letter-spacing: -.035em; margin-bottom: 12px; text-wrap: balance; }.login-welcome p { font-size: .87rem; color: var(--pam-muted); }
.login-form-panel .form-label { font-size: .8rem; margin-bottom: 9px; }.login-form-panel .form-control { padding: 14px; font-size: .84rem; }
.password-field { position: relative; }.password-field input { padding-right: 50px !important; }.password-field button { position: absolute; right: 7px; top: 7px; width: 36px; height: 36px; border: 0; border-radius: 4px; background: transparent; color: var(--pam-muted); }.password-field button:hover { background: var(--pam-canvas); }
.login-submit { display: flex; justify-content: center; gap: 20px; align-items: center; padding: 15px; margin-top: 8px; }
.login-help { display: flex; align-items: flex-start; gap: 8px; font-size: .72rem; line-height: 1.7; color: var(--pam-muted); padding-top: 26px; margin: 0; }.login-help i { margin-top: 4px; }
.login-footer { display: flex; justify-content: space-between; gap: 16px; font-size: .65rem; color: var(--pam-muted); }.login-mobile-brand { display: none; }
.metric-value .count-number { font: inherit; letter-spacing: inherit; }
.count-number { display: inline-block; font-variant-numeric: tabular-nums; }
.pam-form-modal { --cui-modal-bg: var(--pam-surface); --cui-modal-border-color: var(--pam-line); --cui-modal-header-border-color: var(--pam-line); --cui-modal-footer-border-color: var(--pam-line); }
.pam-form-modal .modal-content { border-radius: 12px; box-shadow: 0 24px 72px rgb(10 35 30 / 24%); }
.pam-form-modal .modal-header { padding: 20px 24px; }
.pam-form-modal .modal-title { font-weight: 650; letter-spacing: -.02em; }
.pam-form-modal .modal-body { padding: 24px; }
.modal-form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--pam-line); }
@media (max-width: 575px) { .pam-form-modal .modal-content { border-radius: 0; }.pam-form-modal .modal-body, .pam-form-modal .modal-header { padding: 20px; }.modal-form-actions .btn { flex: 1; } }
@media (min-width: 992px) { .wrapper { padding-inline-start: var(--cui-sidebar-occupy-start, 248px); }.body > .container-fluid, .header > .container-fluid { padding-left: 32px !important; padding-right: 32px !important; } }
@media (max-width: 1199px) { .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }.metric:nth-child(3) { border-left: 0; }.metric:nth-child(n+3) { border-top: 1px solid var(--pam-line); }.dashboard-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }.chart-key { display: none; } }
@media (max-width: 767px) { .page-heading { flex-direction: column; gap: 18px; margin-bottom: 22px; }.period-picker { width: 100%; }.period-picker input { flex: 1; min-width: 0; }.dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }.metric { padding: 18px 14px; }.metric-label { font-size: .7rem; gap: 6px; }.metric-note { font-size: .65rem; }.metric-money { font-size: 1.25rem; }.metric-value { font-size: 1.55rem; }.metric-strip { margin-bottom: 20px; }.table > :not(caption) > * > * { padding: 8px 10px; }.workspace-label { display: none; }.body > .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }.login-layout { grid-template-columns: 1fr; }.login-story { display: none; }.login-form-panel { min-height: 100svh; padding: 28px 24px 22px; }.login-mobile-brand { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin-bottom: 52px; }.login-mobile-brand img { object-fit: contain; }.login-form-wrap { padding: 24px 0 52px; }.login-welcome h2 { font-size: 1.7rem; }.operation-row { margin: 0 18px; }.operation-row p { max-width: 27ch; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .no-print, .no-print *, .dt-search, .dt-paging, .dt-info { display: none !important; }.wrapper { padding: 0 !important; margin: 0 !important; }body { background: #fff !important; }.table > :not(caption) > * > * { padding: 5px 7px; } }