/* Shadcn-inspired theme layer for Bootstrap-based pages. */
:root {
    --background: 156 33% 98%;
    --foreground: 157 52% 11%;
    --card: 0 0% 100%;
    --card-foreground: 157 52% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 157 52% 11%;
    --primary: 160 100% 30%;
    --primary-foreground: 0 0% 100%;
    --secondary: 152 34% 94%;
    --secondary-foreground: 159 49% 19%;
    --muted: 152 20% 94%;
    --muted-foreground: 157 13% 38%;
    --accent: 152 34% 91%;
    --accent-foreground: 159 49% 19%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 156 21% 86%;
    --input: 156 21% 86%;
    --ring: 160 100% 30%;
    --radius: 0.8rem;
}

body {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top right, hsl(152 62% 97%) 0%, transparent 45%),
        linear-gradient(180deg, hsl(var(--background)) 0%, hsl(150 24% 97%) 100%);
    color: hsl(var(--foreground));
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.logo span {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

a {
    color: hsl(var(--primary));
}

a:hover {
    color: hsl(160 100% 24%);
}

.card {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07);
    background: hsl(var(--card));
}

.card-header:not(.bg-primary):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-dark),
.card-footer {
    background: transparent;
    border-color: hsl(var(--border));
    color: hsl(var(--muted-foreground));
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.form-control,
.form-select,
.form-check-input {
    border: 1px solid hsl(var(--input));
    border-radius: calc(var(--radius) - 0.25rem);
    box-shadow: none;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
}

.form-check-input:checked {
    border-color: hsl(var(--primary));
    background-color: hsl(var(--primary));
}

.btn {
    border-radius: calc(var(--radius) - 0.25rem);
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.2);
}

.btn-primary {
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
    background: hsl(var(--primary));
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: hsl(var(--primary-foreground));
    border-color: hsl(160 100% 24%);
    background: hsl(160 100% 24%);
}

.btn-outline-primary {
    color: hsl(var(--primary));
    border-color: hsl(var(--border));
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
    background: hsl(var(--primary));
}

.dropdown-menu {
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 0.25rem);
    background: hsl(var(--popover));
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

.dropdown-menu .dropdown-item {
    color: hsl(var(--popover-foreground));
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.table > :not(caption) > * > * {
    border-color: hsl(var(--border));
}

.pagination .page-link {
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
    border-radius: calc(var(--radius) - 0.35rem);
}

.pagination .page-item.active .page-link {
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
    background: hsl(var(--primary));
}

.pagination .page-link:hover {
    color: hsl(var(--accent-foreground));
    border-color: hsl(var(--border));
    background: hsl(var(--accent));
}

.badge.bg-primary,
.bg-primary {
    background-color: hsl(var(--primary)) !important;
}

.back-to-top {
    border-radius: 999px;
    border: 1px solid hsl(var(--border));
    box-shadow: 0 8px 16px rgba(2, 6, 23, 0.15);
}

.pagetitle h1 {
    color: hsl(var(--foreground));
    font-weight: 700;
    letter-spacing: -0.02em;
}

.breadcrumb,
.breadcrumb a {
    color: hsl(var(--muted-foreground));
}

.breadcrumb .active {
    color: hsl(var(--foreground));
}

.header {
    border-bottom: 1px solid hsl(var(--border));
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
    background-color: hsl(var(--card));
}

.logo span,
.header .toggle-sidebar-btn,
.header-nav .nav-icon,
.header-nav .nav-profile,
.header .search-form button i {
    color: hsl(var(--foreground));
}

.header .search-form input {
    border: 1px solid hsl(var(--input));
    border-radius: calc(var(--radius) - 0.35rem);
    color: hsl(var(--foreground));
}

.header .search-form input:focus,
.header .search-form input:hover {
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12);
}

.header-nav .badge-number {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: 2px solid hsl(var(--card));
    border-radius: 999px;
}

.sidebar {
    border-right: 1px solid hsl(var(--border));
    box-shadow: none;
    background: hsl(var(--card));
}

.sidebar-nav .nav-link {
    color: hsl(var(--foreground));
    background: transparent;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) - 0.3rem);
}

.sidebar-nav .nav-link i {
    color: hsl(var(--muted-foreground));
}

.sidebar-nav .nav-link.collapsed {
    color: hsl(var(--foreground));
    background: transparent;
}

.sidebar-nav .nav-link.collapsed i {
    color: hsl(var(--muted-foreground));
}

.sidebar-nav .nav-link:not(.collapsed) {
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary) / 0.24);
}

.sidebar-nav .nav-link:not(.collapsed) i,
.sidebar-nav .nav-link:hover i {
    color: hsl(var(--primary));
}

.sidebar-nav .nav-link:hover {
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.08);
    border-color: hsl(var(--primary) / 0.2);
}

.sidebar-nav .nav-content a {
    color: hsl(var(--muted-foreground));
    border-radius: calc(var(--radius) - 0.35rem);
    margin-right: 0.25rem;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.08);
}

.sidebar-nav .nav-content a.active i {
    background-color: hsl(var(--primary));
}

.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Auth page */
.auth-page {
    background:
        radial-gradient(circle at 18% 15%, hsl(156 69% 94%) 0%, transparent 42%),
        linear-gradient(145deg, hsl(156 39% 98%) 0%, hsl(152 22% 95%) 100%);
}

.auth-shell .logo span {
    font-size: 1.45rem;
    letter-spacing: -0.02em;
}

.auth-card {
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) + 0.1rem);
    box-shadow: 0 22px 38px rgba(2, 6, 23, 0.08);
}

.auth-heading .card-title {
    padding: 0;
    color: hsl(var(--foreground));
}

.auth-eyebrow {
    color: hsl(var(--primary));
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.auth-subtitle {
    color: hsl(var(--muted-foreground));
    font-size: 0.92rem;
}

.auth-form .form-label {
    color: hsl(var(--foreground));
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.auth-form .form-control {
    min-height: 2.75rem;
}

.btn-auth-primary,
.btn-auth-secondary {
    min-height: 2.75rem;
}

.btn-auth-secondary {
    border-color: hsl(var(--border));
}

.btn-auth-secondary:hover,
.btn-auth-secondary:focus {
    border-color: hsl(var(--primary));
}

.auth-page .credits {
    color: hsl(var(--muted-foreground));
}

/* Dashboard */
.dashboard-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.3rem;
}

.dashboard-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dashboard-quick-actions .btn {
    border-radius: calc(var(--radius) - 0.35rem);
}

.dashboard-metric,
.dashboard-soft-card,
.dashboard-panel {
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) + 0.05rem);
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.06);
    background: hsl(var(--card));
}

.dashboard-metric {
    border-top-width: 3px;
}

.dashboard-metric .card-body,
.dashboard-soft-card .card-body {
    padding: 1.15rem 1.2rem;
}

.dashboard .dashboard-metric .metric-label,
.dashboard .dashboard-soft-card .metric-label {
    color: hsl(var(--muted-foreground));
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.dashboard .dashboard-metric .metric-value,
.dashboard .dashboard-soft-card .metric-value {
    color: hsl(var(--foreground));
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}

.dashboard .dashboard-metric .metric-meta,
.dashboard .dashboard-soft-card .metric-meta {
    color: hsl(var(--muted-foreground));
    font-size: 0.81rem;
}

.metric-highlight {
    color: hsl(var(--primary));
    font-weight: 700;
}

.dashboard .dashboard-metric .metric-icon {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
    background: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
}

.metric-inbox {
    border-top-color: hsl(var(--primary));
}

.metric-outbox {
    border-top-color: hsl(166 80% 29%);
}

.metric-outbox .metric-icon {
    color: hsl(166 80% 29%);
    background: hsl(166 80% 29% / 0.12);
}

.metric-meeting {
    border-top-color: hsl(39 90% 42%);
}

.metric-meeting .metric-icon {
    color: hsl(39 90% 42%);
    background: hsl(39 90% 42% / 0.12);
}

.metric-assets {
    border-top-color: hsl(222 35% 38%);
}

.metric-assets .metric-icon {
    color: hsl(222 35% 38%);
    background: hsl(222 35% 38% / 0.12);
}

.metric-pill {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: hsl(var(--primary));
    background: hsl(var(--secondary));
}

.org-split {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.org-split > div {
    border: 1px solid hsl(var(--border));
    background: hsl(var(--secondary));
    border-radius: calc(var(--radius) - 0.35rem);
    text-align: center;
    padding: 0.5rem 0.35rem;
}

.org-label {
    display: block;
    color: hsl(var(--muted-foreground));
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.org-split strong {
    font-size: 1rem;
    color: hsl(var(--foreground));
}

.dashboard .dashboard-panel .dashboard-panel-body {
    padding: 1.15rem 1.25rem 1.25rem;
}

.dashboard .dashboard-panel .dashboard-panel-title {
    color: hsl(var(--foreground));
    margin: 0;
    padding: 0 0 0.95rem;
    font-size: 1rem;
    font-weight: 600;
}

.dashboard .dashboard-panel .dashboard-panel-title span {
    color: hsl(var(--muted-foreground));
    font-size: 0.79rem;
    font-weight: 500;
}

.dashboard-activity-list .activity-item {
    padding: 0.1rem 0;
}

.dashboard .activity .activity-item .activite-label::before {
    background-color: hsl(var(--border));
}

.dashboard .activity .activity-item .activity-badge {
    border-color: hsl(var(--card));
}

.dashboard .dashboard-panel .dashboard-table thead {
    background: hsl(var(--secondary));
}

.dashboard .dashboard-panel .dashboard-table thead th {
    color: hsl(var(--muted-foreground));
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.table-asset-link {
    color: hsl(var(--foreground));
    font-weight: 600;
    text-decoration: none;
}

.table-asset-link:hover {
    color: hsl(var(--primary));
}

.dashboard .finance-summary-item {
    padding: 0.66rem 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 0.35rem);
    background: hsl(var(--secondary));
}

.dashboard .finance-summary-item h6 {
    color: hsl(var(--foreground));
    font-weight: 700;
}

.dashboard .finance-summary-item i {
    color: hsl(var(--primary));
    font-size: 1rem;
}

.chart-loading .spinner-border {
    color: hsl(var(--primary)) !important;
}

@media (max-width: 768px) {
    .dashboard-titlebar {
        align-items: stretch;
    }

    .dashboard-quick-actions {
        width: 100%;
    }

    .dashboard-quick-actions .btn {
        flex: 1;
    }

    .org-split {
        gap: 0.4rem;
    }
}

/* Shared module pages (Surat, Program, Keuangan) */
.module-page .pagetitle > .d-flex {
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    border-radius: calc(var(--radius) - 0.2rem);
    padding: 0.95rem 1rem;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.05);
    gap: 0.85rem;
    flex-wrap: wrap;
}

.module-page .pagetitle h1 {
    margin-bottom: 0.35rem;
}

.module-page .pagetitle .btn,
.module-page .pagetitle > .d-flex > .btn {
    border-radius: calc(var(--radius) - 0.35rem);
    min-height: 2.45rem;
}

.module-page .pagetitle .btn-group {
    gap: 0.5rem;
}

.module-page .section > .row > .col-lg-12 > .row.mb-4 > [class*="col-"] .card,
.module-page .section > .row > .col-lg-12 > .row.mb-4 .card {
    border: 1px solid hsl(var(--border));
    border-top-width: 3px;
    border-radius: calc(var(--radius) - 0.15rem);
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.05);
    background: hsl(var(--card));
}

.module-page .section > .row > .col-lg-12 > .row.mb-4 .card .card-body {
    padding: 1rem 1.05rem;
}

.module-page .section > .row > .col-lg-12 > .row.mb-4 .card h4 {
    color: hsl(var(--foreground)) !important;
    font-size: 1.55rem;
    font-weight: 700;
}

.module-page .section > .row > .col-lg-12 > .row.mb-4 .card p {
    color: hsl(var(--muted-foreground)) !important;
}

.module-page .section > .row > .col-lg-12 > .row.mb-4 .card i {
    color: hsl(var(--primary)) !important;
    opacity: 0.95;
}

.module-page .card {
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 0.12rem);
    box-shadow: 0 9px 22px rgba(2, 6, 23, 0.05);
}

.module-page .card .card-header {
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--secondary));
    border-top-left-radius: calc(var(--radius) - 0.12rem);
    border-top-right-radius: calc(var(--radius) - 0.12rem);
    padding: 0.78rem 1rem;
}

.module-page .card .card-header .card-title,
.module-page .card .card-title {
    color: hsl(var(--foreground));
    font-size: 0.97rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.module-page .card .card-body {
    padding: 1rem;
}

.module-page .table thead,
.module-page .table thead.table-light {
    background: hsl(var(--secondary));
}

.module-page .table thead th {
    color: hsl(var(--muted-foreground));
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom-color: hsl(var(--border));
}

.module-page .table tbody td {
    border-bottom-color: hsl(var(--border));
}

.module-page .table tbody tr:hover {
    background: hsl(var(--accent) / 0.55);
}

.module-page .form-control,
.module-page .form-select,
.module-page .input-group-text {
    border-color: hsl(var(--input));
    border-radius: calc(var(--radius) - 0.38rem);
}

.module-page .input-group .btn {
    border-radius: calc(var(--radius) - 0.38rem);
}

.module-page .btn-group .btn,
.module-page .btn.btn-sm {
    border-radius: calc(var(--radius) - 0.42rem);
}

.module-page .nav-tabs .nav-link {
    color: hsl(var(--muted-foreground));
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 600;
}

.module-page .nav-tabs .nav-link.active {
    color: hsl(var(--primary));
    border-bottom-color: hsl(var(--primary));
    background: transparent;
}

.module-page .progress {
    background: hsl(var(--accent));
    border-radius: 999px;
}

.module-page .badge.bg-primary,
.module-page .badge.bg-success,
.module-page .badge.bg-info,
.module-page .badge.bg-warning,
.module-page .badge.bg-danger,
.module-page .badge.bg-secondary {
    color: hsl(var(--primary-foreground));
}

.module-page .badge.bg-primary {
    background: hsl(var(--primary)) !important;
}

.module-page .badge.bg-success {
    background: hsl(166 80% 30%) !important;
}

.module-page .badge.bg-info {
    background: hsl(204 88% 42%) !important;
}

.module-page .badge.bg-warning {
    background: hsl(39 96% 45%) !important;
}

.module-page .badge.bg-danger {
    background: hsl(0 84% 52%) !important;
}

.module-page .badge.bg-secondary {
    background: hsl(215 16% 47%) !important;
}

@media (max-width: 768px) {
    .module-page .pagetitle > .d-flex {
        align-items: stretch;
    }

    .module-page .pagetitle .btn-group {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .module-page .pagetitle .btn-group .btn,
    .module-page .pagetitle > .d-flex > .btn {
        flex: 1;
    }
}