/* ==========================================================================
   PA-KASKAS - Visual theme (loaded after base.css and dashboard.css)

   Presentation only: a floating rounded sidebar, a light header, pill
   buttons, rounded cards and the light / dark themes. Every colour comes
   from the tokens in base.css (light in :root, dark in
   html[data-theme="dark"]), so both themes stay consistent. No markup,
   link, form or behaviour depends on this file.
   ========================================================================== */

:root {
    --topbar-height: 68px;
    --sidebar-gap: 14px;                       /* space around the floating sidebar */
    --brand-gradient: linear-gradient(135deg, #1f5af2 0%, #5b4cf5 100%);
    --primary-shadow: 0 6px 16px rgba(31, 90, 242, 0.28);
}

html[data-theme="dark"] {
    --brand-gradient: linear-gradient(135deg, #2d62f5 0%, #5b4cf5 100%);
    --primary-shadow: 0 6px 18px rgba(61, 116, 255, 0.32);
}

body {
    background: var(--background);
    color: var(--text);
}

/* ---------- Sidebar: a floating rounded card ---------- */
.sidebar {
    top: var(--sidebar-gap);
    height: calc(100vh - 2 * var(--sidebar-gap));
    margin: var(--sidebar-gap) 0 var(--sidebar-gap) var(--sidebar-gap);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.sidebar__brand {
    border-bottom: 0;
}

.sidebar__brand-text strong {
    color: var(--sidebar-text-strong);
}

.sidebar__nav {
    padding: 8px 14px 16px;
}

.nav-group__label,
.nav-group__toggle {
    color: var(--sidebar-muted);
}

.nav-link {
    min-height: 42px;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    color: var(--sidebar-text);
    font-weight: 500;
}

.nav-link .icon {
    flex-shrink: 0;
}

.nav-link:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-strong);
}

.nav-link.is-active,
.nav-link.is-active:hover {
    background: var(--primary);
    color: var(--text-inverse);
    box-shadow: var(--primary-shadow);
}

/* The pill itself marks the current module (no side bar needed). */
.nav-link.is-active::before {
    display: none;
}

.nav-link:focus-visible,
.nav-group__toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.sidebar__footer {
    border-top: 1px solid var(--sidebar-line);
}

.sidebar-collapsed .nav-link {
    justify-content: center;
    padding: 9px 0;
}

/* ---------- Header ---------- */
.topbar {
    padding: 0 24px;
    border-bottom: 0;
    background: var(--header-bg);
}

.topbar__system {
    color: var(--text-muted);
}

/* A long page title shrinks (ellipsis); the buttons on the right never get pushed off a phone screen. */
.topbar__left { flex: 1 1 auto; }
.topbar__right { flex: 0 0 auto; }

.topbar__page {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.icon-button {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
}

.icon-button:hover {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.icon-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Light / dark switch: the moon in light mode, the sun in dark mode. */
.theme-toggle .theme-toggle__sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: inline-block; }
html[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }
html[data-theme="dark"] .theme-toggle { color: #ffd166; }

.profile-menu__button {
    border-color: transparent;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text);
}

.profile-menu__button:hover {
    background: var(--surface-muted);
}

.profile-menu__button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.dropdown {
    border-radius: var(--radius);
    padding: 8px;
}

.dropdown__item {
    border-radius: var(--radius-sm);
}

/* ---------- Content ---------- */
.content {
    padding: 22px 26px 36px;
}

.page-header__title {
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* ---------- Cards ---------- */
.panel,
.form-card {
    border-radius: var(--radius-lg);
    border-color: var(--border);
    background: var(--card-bg);
    box-shadow: var(--shadow);
}

.toolbar {
    border-radius: var(--radius-lg);
}

.figure {
    border-radius: var(--radius);
    background: var(--card-bg);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.figure__value {
    color: var(--text);
}

.card-pick,
.pay-card {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* ---------- Buttons ---------- */
.btn {
    min-height: 40px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn--primary {
    background: var(--button-primary);
    color: var(--text-inverse);
    box-shadow: var(--primary-shadow);
}

.btn--primary:hover {
    background: var(--button-hover);
}

.btn--primary:active {
    box-shadow: none;
}

.btn--outline {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.btn--outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--surface);
}

.btn--ghost:hover {
    background: var(--surface-muted);
}

.btn--danger:focus-visible,
.btn--outline.btn--danger-outline:focus-visible {
    box-shadow: 0 0 0 3px var(--danger-border);
}

.btn--sm {
    min-height: 32px;
    padding: 5px 13px;
}

.btn[disabled],
.btn.is-disabled {
    box-shadow: none;
}

/* ---------- Form controls ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="tel"],
input[type="url"],
select,
textarea {
    border-color: var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}

input[readonly],
textarea[readonly] {
    background: var(--surface-muted);
}

html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
}

/* ---------- Tables ---------- */
.table th {
    background: var(--surface-muted);
    color: var(--text-muted);
}

.table th,
.table td {
    border-bottom-color: var(--border);
}

/* ---------- Pagination, chips, tabs ---------- */
.pagination__link {
    border-radius: var(--radius-pill);
}

.chip {
    border-radius: var(--radius-pill);
}

.of-tabs a.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-inverse);
}

.of-tabs a:hover {
    border-color: var(--primary);
}

/* ---------- Modal windows and dialogs ---------- */
.modal-form__dialog {
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
}

.sweet__panel {
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
}

/* ---------- Footer ---------- */
.app-footer {
    padding: 18px 26px 22px;
    border-top: 0;
    background: var(--footer-bg);
    color: var(--text-muted);
}

/* ---------- Mobile / tablet: the sidebar is a drawer ---------- */
@media (max-width: 991px) {
    .sidebar {
        top: 0;
        height: 100vh;
        margin: 0;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        border-left: 0;
    }

    .topbar {
        padding: 0 14px;
    }

    .content {
        padding: 16px 14px 28px;
    }
}

/* ---------- Print: always light (also when printing from dark mode), no decoration ---------- */
@media print {
    html[data-theme="dark"] {
        color-scheme: light;
        --background: #ffffff;
        --surface: #ffffff;
        --surface-muted: #f5f7fc;
        --neutral-soft: #edf0f6;
        --row-hover: #ffffff;
        --row-highlight: #fff8e6;
        --text: #000000;
        --text-muted: #444b5a;
        --border: #cfd5e1;
        --border-strong: #b5bdcc;
        --primary: #1f5af2;
        --primary-soft: #e7eeff;
        --success: #15803d;
        --success-soft: #e7f6ec;
        --success-text: #14532d;
        --warning: #b45309;
        --warning-soft: #fdf3e2;
        --warning-text: #78350f;
        --danger: #c62828;
        --danger-soft: #fdecec;
        --danger-text: #7f1d1d;
        --info: #0369a1;
        --info-soft: #e5f3fb;
        --info-text: #0c4a6e;
    }

    .panel,
    .form-card,
    .figure {
        box-shadow: none;
    }
}

/* ---------- Sign-in pages ---------- */
.auth-brand {
    background: var(--brand-gradient);
    color: rgba(255, 255, 255, 0.86);
}

.auth-brand h2 {
    color: #ffffff;
}

.auth-brand__list .icon {
    color: #bfe9ff;
}

.auth-brand .brand-mark {
    background: rgba(255, 255, 255, 0.18);
}

.auth-card--center {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* A theme switch on the sign-in pages (top right). */
.auth-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    cursor: pointer;
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 20;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.auth-theme-toggle .icon {
    width: 20px;
    height: 20px;
}

.auth-theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---------- Tables that fit ---------- */
/* Tighter cells and headings that may wrap, so wide tables (e.g. a card's billing periods) fit more columns. */
.table th,
.table td {
    padding: 11px 12px;
}

.table th {
    white-space: normal;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

/* The row's buttons (View, Edit, Pay, Record SOA ...) stay visible: when a table is wider than the
   screen and scrolls sideways, its actions column is pinned to the right edge. */
@media (min-width: 768px) {
    .table th.actions,
    .table td.actions {
        position: sticky;
        right: 0;
        z-index: 1;
        background: var(--card-bg);
        box-shadow: -10px 0 12px -10px rgba(16, 24, 40, 0.18);
    }

    .table th.actions {
        background: var(--surface-muted);
    }

    .table tbody tr:hover td.actions {
        background: var(--row-hover);
    }

    .table tbody tr.is-current td.actions {
        background: var(--row-highlight);
    }

    html[data-theme="dark"] .table th.actions,
    html[data-theme="dark"] .table td.actions {
        box-shadow: -10px 0 12px -10px rgba(0, 0, 0, 0.6);
    }
}

@media print {
    .table th.actions,
    .table td.actions {
        position: static;
        box-shadow: none;
    }
}

/* A table too wide for its box (assets/js/dashboard.js adds .is-stacked) shows each row as a
   compact card - its fields side by side, the label above each value, the buttons on their own
   line - so every value and button is visible without scrolling sideways. */
.table--cards.is-stacked thead { display: none; }
.table--cards.is-stacked,
.table--cards.is-stacked tbody { display: block; width: 100%; }
.table--cards.is-stacked tbody tr {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px 18px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.table--cards.is-stacked td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    text-align: left;
    min-width: 0;
}
.table--cards.is-stacked td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}
.table--cards.is-stacked td:first-child { grid-column: span 2; }
.table--cards.is-stacked td.num { text-align: left; }
.table--cards.is-stacked td.col-num { display: none; }
.table--cards.is-stacked td.actions,
.table--cards.is-stacked tbody tr:hover td.actions {
    grid-column: 1 / -1;
    position: static;
    width: auto;
    background: transparent;
    box-shadow: none;
}
.table--cards.is-stacked td.actions::before { content: none; }
.table--cards.is-stacked .row-actions { justify-content: flex-start; }
.table--cards.is-stacked tfoot { display: block; }
.table--cards.is-stacked tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 18px; }
.table--cards.is-stacked tfoot td { display: block; width: auto; border: 0; padding: 0; }