/* =========================================================
   KOS ADMIN
   Mobile First Admin Interface
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {

    --primary: #0b315b;
    --primary-dark: #072544;
    --primary-light: #edf5ff;

    --success: #16a34a;
    --success-light: #f0fdf4;

    --warning: #d97706;
    --warning-light: #fffbeb;

    --danger: #dc2626;
    --danger-light: #fef2f2;

    --info: #0284c7;
    --info-light: #f0f9ff;

    --dark: #0a2544;
    --text: #21364d;
    --text-secondary: #66788c;
    --text-muted: #9aa8b7;

    --background: #f4f8fc;
    --surface: #ffffff;

    --border: #dbe6f0;
    --border-soft: #eaf1f7;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-sm:
        0 1px 2px rgba(0, 0, 0, 0.04);

    --shadow:
        0 4px 14px rgba(0, 0, 0, 0.06);

    --shadow-lg:
        0 10px 30px rgba(0, 0, 0, 0.08);

    --header-height: 68px;
    --bottom-nav-height: 72px;

}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {

    min-height: 100vh;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: var(--background);

    color: var(--text);

    font-size: 14px;

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;

}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    border: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

/* =========================================================
   LOGIN
   ========================================================= */

.login-page {
    background: linear-gradient(145deg, var(--primary-light), #f8fafc 55%, #e8f2fc);
}

.login-container {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: min(100%, 420px);
    padding: 32px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.login-brand {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 15px;
    background: var(--primary);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

.login-card h1 { font-size: 26px; color: var(--dark); }
.login-description { margin-top: 5px; color: var(--text-secondary); }
.login-form { display: grid; gap: 18px; margin-top: 28px; }
.login-field { display: grid; gap: 7px; }
.login-field label { font-weight: 600; color: var(--text); }
.login-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    font-size: 15px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.login-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(11, 49, 91, .1); }
.login-error { color: var(--danger); font-size: 13px; }
.login-button {
    min-height: 46px;
    margin-top: 4px;
    border-radius: var(--radius);
    background: var(--primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.login-button:hover { background: var(--primary-dark); }
.login-session-note { margin-top: 20px; color: var(--text-muted); font-size: 12px; text-align: center; }

.form-error { margin-top: 6px; color: var(--danger); font-size: 13px; }
.form-help { margin-top: 6px; color: var(--text-muted); font-size: 12px; }
.alert { margin-bottom: 16px; padding: 12px 14px; border-radius: var(--radius); }
.alert-success { border: 1px solid #bbf7d0; background: var(--success-light); color: #166534; }

/* =========================================================
   ACCOUNT SETTINGS
   ========================================================= */

.account-page {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}

.account-card {
    padding: 22px;
    overflow: hidden;
}

.account-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: -2px 0 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-soft);
}

.account-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #164f87);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    box-shadow: 0 7px 16px rgba(11, 49, 91, .18);
}

.account-card-title {
    color: var(--dark);
    font-size: 16px;
    line-height: 1.3;
}

.account-card-description {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 12px;
}

.account-card .form-group {
    margin-bottom: 20px;
}

.account-card .form-control {
    min-height: 48px;
}

.account-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-soft);
}

.account-staff-list { margin-top: 14px; }
.account-staff-list .card-title { margin-bottom: 8px; }
.account-staff-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border-soft);
    font-weight: 600;
}

@media (max-width: 420px) {
    .account-card { padding: 18px; }
    .account-card-header { margin-bottom: 20px; }
}

.report-filter {
    padding: 15px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
}

.report-filter > a {
    grid-column: 1 / -1;
}

.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.report-stat-main {
    grid-column: 1 / -1;
    background: var(--primary);
}

.report-stat-main .stat-label,
.report-stat-main .stat-description {
    color: rgba(255, 255, 255, .72);
}

.report-stat-main .stat-value {
    color: #fff;
}

.text-success {
    color: var(--success) !important;
}

.report-chart-header {
    align-items: flex-end;
}

.report-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}

.report-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.report-legend i {
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

.legend-expected {
    background: var(--primary);
}

.legend-paid {
    background: var(--success);
}

.report-chart-scroll {
    padding: 18px 14px 12px;
    overflow-x: auto;
}

.report-chart {
    min-width: max(100%, calc(var(--chart-columns) * 82px));
    height: 260px;
    display: grid;
    grid-template-columns: repeat(var(--chart-columns), minmax(70px, 1fr));
    gap: 10px;
    align-items: end;
}

.report-chart-column {
    height: 100%;
    display: grid;
    grid-template-rows: 24px 1fr 24px;
    text-align: center;
}

.report-chart-value,
.report-chart-date {
    font-size: 11px;
    color: var(--text-secondary);
}

.report-bars {
    min-height: 180px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    background: repeating-linear-gradient(to top, transparent 0, transparent 44px, var(--border-soft) 45px);
}

.report-bar {
    width: 20px;
    min-height: 2px;
    border-radius: 5px 5px 0 0;
}

.report-bar-expected {
    background: var(--primary);
}

.report-bar-paid {
    background: var(--success);
}

.report-detail-list {
    margin-top: 12px;
}

.report-date-box {
    width: 42px;
    height: 46px;
    flex: 0 0 42px;
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    line-height: 1.05;
}

.report-date-box strong {
    font-size: 16px;
}

.report-date-box span {
    margin-top: 3px;
    font-size: 10px;
    text-transform: uppercase;
}

@media (min-width: 720px) {
    .report-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Laporan: kartu ringkas harus tetap terbaca pada shell desktop yang sempit. */
.report-summary-grid .stat-card {
    min-width: 0;
    min-height: 118px;
    padding: 16px 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(10, 37, 68, .055);
}

.report-summary-grid .stat-card::after {
    width: 70px;
    height: 70px;
    opacity: .45;
}

.report-summary-grid .stat-label {
    position: relative;
    z-index: 1;
    font-size: 13px;
    line-height: 1.3;
}

.report-summary-grid .stat-value {
    position: relative;
    z-index: 1;
    margin-top: 7px;
    max-width: 100%;
    font-size: clamp(19px, 3.4vw, 25px);
    line-height: 1.15;
    letter-spacing: -.5px;
    white-space: nowrap;
}

.report-summary-grid .stat-description {
    position: relative;
    z-index: 1;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.35;
}

.report-summary-grid .report-stat-main {
    grid-column: 1 / -1;
    min-height: 105px;
    background: linear-gradient(135deg, var(--primary), #15558e);
    border-color: transparent;
}

.report-summary-grid .report-stat-main::after {
    background: rgba(255, 255, 255, .12);
}

.report-summary-grid .report-stat-main .stat-label,
.report-summary-grid .report-stat-main .stat-description {
    color: rgba(255, 255, 255, .78);
}

.report-summary-grid .report-stat-main .stat-value {
    color: #fff;
}

.report-summary-grid .report-stat-paid {
    grid-column: 1 / -1;
    min-height: 105px;
    background: linear-gradient(135deg, #087f5b, #16a34a);
    border-color: transparent;
}

.report-summary-grid .report-stat-paid::after {
    background: rgba(255, 255, 255, .13);
}

.report-summary-grid .report-stat-paid .stat-label,
.report-summary-grid .report-stat-paid .stat-description {
    color: rgba(255, 255, 255, .8);
}

.report-summary-grid .report-stat-paid .stat-value {
    color: #fff !important;
}

@media (max-width: 440px) {
    .report-summary-grid {
        grid-template-columns: 1fr;
    }

    .report-summary-grid .report-stat-main {
        grid-column: auto;
    }

    .report-summary-grid .report-stat-paid {
        grid-column: auto;
    }

    .report-chart-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-legend {
        justify-content: flex-start;
    }
}


/* =========================================================
   APP SHELL
   ========================================================= */

.app-shell {

    position: relative;

    width: 100%;

    min-height: 100vh;

    background: #f8fafc;

}


/* =========================================================
   HEADER
   ========================================================= */

.app-header {

    position: sticky;

    top: 0;

    z-index: 100;

    width: 100%;

    background: rgba(255, 255, 255, 0.96);

    border-bottom: 1px solid var(--border-soft);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

}

.header-inner {

    min-height: var(--header-height);

    padding: 10px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}

.header-left {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 12px;

}

.header-title-wrapper {
    min-width: 0;
}

.header-title {

    font-size: 18px;

    font-weight: 700;

    color: var(--dark);

    line-height: 1.2;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.header-subtitle {

    margin-top: 3px;

    font-size: 12px;

    color: var(--text-secondary);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.header-right {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 8px;

}

.header-back,
.header-icon-button {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #f8fafc;

    color: var(--text);

    cursor: pointer;

    transition: .2s ease;

}

.header-back:active,
.header-icon-button:active {

    transform: scale(.95);

    background: #f1f5f9;

}

.notification-button {
    position: relative;
    text-decoration: none;
}

.notification-button.active {
    color: var(--primary);
    background: var(--primary-light);
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.notification-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.notification-total {
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger-light);
    color: var(--danger);
    font-weight: 800;
}

.notification-item {
    align-items: flex-start;
}

.notification-type {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.notification-type-ac {
    color: var(--info);
    background: var(--info-light);
}

.notification-type-apar {
    color: var(--danger);
    background: var(--danger-light);
}

.notification-item-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

@media (max-width: 420px) {
    .notification-item-heading {
        flex-direction: column;
    }
}


/* =========================================================
   CONTENT
   ========================================================= */

.app-content {

    min-height: calc(
        100vh -
        var(--header-height) -
        var(--bottom-nav-height)
    );

    padding:
        18px
        16px
        calc(var(--bottom-nav-height) + 30px);

}


/* =========================================================
   PAGE
   ========================================================= */

.page-header {

    margin-bottom: 20px;

}

.page-title {

    font-size: 22px;

    line-height: 1.25;

    font-weight: 700;

    color: var(--dark);

}

.page-description {

    margin-top: 5px;

    color: var(--text-secondary);

    font-size: 13px;

}


/* =========================================================
   CARD
   ========================================================= */

.card {

    background: var(--surface);

    border: 1px solid var(--border-soft);

    border-radius: var(--radius-lg);

    padding: 16px;

    box-shadow: var(--shadow-sm);

}

.card + .card {
    margin-top: 12px;
}

.card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;

}

.card-title {

    font-size: 15px;

    font-weight: 700;

    color: var(--dark);

}

.card-subtitle {

    margin-top: 2px;

    font-size: 12px;

    color: var(--text-secondary);

}


/* =========================================================
   GRID
   ========================================================= */

.grid {
    display: grid;
}

.grid-2 {

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

}

.grid-3 {

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

}


/* =========================================================
   STAT CARD
   ========================================================= */

.stat-card {

    background: #fff;

    border: 1px solid var(--border-soft);

    border-radius: var(--radius-lg);

    padding: 15px;

}

.stat-label {

    font-size: 12px;

    color: var(--text-secondary);

}

.stat-value {

    margin-top: 5px;

    font-size: 22px;

    line-height: 1.2;

    font-weight: 700;

    color: var(--dark);

}

.stat-description {

    margin-top: 5px;

    font-size: 11px;

    color: var(--text-muted);

}


/* =========================================================
   SECTION
   ========================================================= */

.section {

    margin-bottom: 24px;

}

.section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 12px;

}

.section-title {

    font-size: 16px;

    font-weight: 700;

    color: var(--dark);

}

.section-link {

    font-size: 12px;

    font-weight: 600;

    color: var(--primary);

}


/* =========================================================
   BUTTON
   ========================================================= */

.btn {

    min-height: 44px;

    padding: 10px 16px;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: .2s ease;

}

.btn:active {
    transform: scale(.98);
}

.btn-primary {

    background: var(--primary);

    color: #fff;

}

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

.btn-secondary {

    background: #f1f5f9;

    color: var(--text);

}

.btn-danger {

    background: var(--danger-light);

    color: var(--danger);

}

.btn-success {

    background: var(--success-light);

    color: var(--success);

}

.btn-block {
    width: 100%;
}


/* =========================================================
   BADGE
   ========================================================= */

.badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;

}

.badge-success {

    color: var(--success);

    background: var(--success-light);

}

.badge-warning {

    color: var(--warning);

    background: var(--warning-light);

}

.badge-danger {

    color: var(--danger);

    background: var(--danger-light);

}

.badge-info {

    color: var(--info);

    background: var(--info-light);

}

.badge-muted {

    color: var(--text-secondary);

    background: #f3f4f6;

}


/* =========================================================
   FORM
   ========================================================= */

.form-group {

    margin-bottom: 16px;

}

.form-label {

    display: block;

    margin-bottom: 7px;

    font-size: 13px;

    font-weight: 600;

    color: var(--text);

}

.form-control {

    width: 100%;

    min-height: 46px;

    padding: 10px 13px;

    border: 1px solid var(--border);

    border-radius: 12px;

    background: #fff;

    color: var(--text);

    font-size: 14px;

    outline: none;

    transition: .2s ease;

}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:focus {

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, .08);

}

textarea.form-control {

    min-height: 110px;

    resize: vertical;

}

.form-help {

    margin-top: 5px;

    font-size: 11px;

    color: var(--text-secondary);

}

.form-error {

    margin-top: 5px;

    font-size: 11px;

    color: var(--danger);

}


/* =========================================================
   SEARCH
   ========================================================= */

.search-box {

    position: relative;

    width: 100%;

}

.search-box input {

    width: 100%;

    height: 46px;

    padding:
        10px
        14px
        10px
        42px;

    border: 1px solid var(--border);

    border-radius: 14px;

    background: #fff;

    outline: none;

    font-size: 14px;

}

.search-box svg {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-muted);

}


/* =========================================================
   LIST
   ========================================================= */

.list {

    background: #fff;

    border-radius: var(--radius-lg);

    border: 1px solid var(--border-soft);

    overflow: hidden;

}

.list-item {

    min-height: 64px;

    padding: 13px 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    border-bottom: 1px solid var(--border-soft);

}

.list-item:last-child {
    border-bottom: none;
}

.list-content {

    flex: 1;

    min-width: 0;

}

.list-title {

    font-size: 14px;

    font-weight: 600;

    color: var(--dark);

}

.list-description {

    margin-top: 3px;

    font-size: 12px;

    color: var(--text-secondary);

}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty-state {

    padding: 40px 20px;

    text-align: center;

}

.empty-state-icon {

    width: 60px;
    height: 60px;

    margin: 0 auto 14px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary-light);

    color: var(--primary);

}

.empty-state-title {

    font-size: 16px;

    font-weight: 700;

    color: var(--dark);

}

.empty-state-description {

    max-width: 280px;

    margin: 6px auto 0;

    font-size: 13px;

    color: var(--text-secondary);

}


/* =========================================================
   FILTER / TABS
   ========================================================= */

.filter-scroll {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    scrollbar-width: none;

    padding-bottom: 3px;

}

.filter-scroll::-webkit-scrollbar {
    display: none;
}

.filter-item {

    flex-shrink: 0;

    padding: 8px 13px;

    border-radius: 999px;

    background: #fff;

    border: 1px solid var(--border);

    color: var(--text-secondary);

    font-size: 12px;

    font-weight: 600;

}

.filter-item.active {

    background: var(--primary);

    color: #fff;

    border-color: var(--primary);

}


/* =========================================================
   ALERT
   ========================================================= */

.alert {

    padding: 12px 14px;

    border-radius: 12px;

    margin-bottom: 16px;

    font-size: 13px;

}

.alert-success {

    color: #166534;

    background: var(--success-light);

}

.alert-danger {

    color: #991b1b;

    background: var(--danger-light);

}

.alert-warning {

    color: #92400e;

    background: var(--warning-light);

}


/* =========================================================
   DIVIDER
   ========================================================= */

.divider {

    height: 1px;

    background: var(--border-soft);

    margin: 16px 0;

}


/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.bottom-nav {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 200;

    height: var(--bottom-nav-height);

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    background: rgba(255, 255, 255, .98);

    border-top: 1px solid var(--border);

    padding-bottom:
        env(safe-area-inset-bottom);

    box-shadow:
        0 -3px 15px
        rgba(0, 0, 0, .04);

}

.bottom-nav-item {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

    color: var(--text-muted);

    transition: .2s ease;

}

.bottom-nav-icon {

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.bottom-nav-label {

    font-size: 10px;

    font-weight: 500;

}

.bottom-nav-item.active {

    color: var(--primary);

}

.bottom-nav-item.active .bottom-nav-label {

    font-weight: 700;

}

.bottom-nav-item.active::before {
    content: "";

    position: absolute;

    top: auto;
    bottom: 3px;

    left: 50%;
    transform: translateX(-50%);

    width: 28px;
    height: 3px;

    background: linear-gradient(
        90deg,
        #f6a500,
        #ffc64f
    );

    border-radius: 999px;

    box-shadow:
        0 2px 6px
        rgba(246, 165, 0, .28);
}


/* =========================================================
   FLOATING ACTION BUTTON
   ========================================================= */

.fab {

    position: fixed;

    right: 20px;

    bottom: calc(
        var(--bottom-nav-height) + 18px
    );

    z-index: 150;

    width: 54px;
    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: var(--primary);

    color: #fff;

    box-shadow:
        0 8px 25px
        rgba(37, 99, 235, .3);

}


/* =========================================================
   UTILITIES
   ========================================================= */

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

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

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

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

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

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 6px;
}

.mb-2 {
    margin-bottom: 12px;
}

.mb-3 {
    margin-bottom: 18px;
}

.mt-1 {
    margin-top: 6px;
}

.mt-2 {
    margin-top: 12px;
}

.mt-3 {
    margin-top: 18px;
}


/* =========================================================
   DESKTOP VIEW
   ========================================================= */

@media (min-width: 600px) {

    body {

        display: flex;

        justify-content: center;

        background: #e5e7eb;

    }

    .app-shell {

        width: 520px;

        min-height: 100vh;

        box-shadow:
            0 0 40px
            rgba(0, 0, 0, .08);

    }

    .bottom-nav {

        width: 520px;

        left: 50%;

        right: auto;

        transform: translateX(-50%);

    }

    .fab {

        right:
            calc(
                50% - 240px
            );

    }

}

/* =========================================================
   ROOM
   ========================================================= */

.room-card {
    display: block;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    transition: .2s ease;
}

.room-card:active {
    transform: scale(.985);
}

.room-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.room-code {
    font-size: 19px;
    font-weight: 700;
    color: var(--dark);
}

.room-name {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
}

.room-price {
    margin-top: 13px;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
}

.room-price span {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.room-resident {
    margin-top: 9px;
    font-size: 12px;
    color: var(--text-secondary);
}

.room-resident strong {
    color: var(--text);
}

.room-facilities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.room-facilities span {
    padding: 5px 8px;
    background: #f8fafc;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    font-size: 10px;
    color: var(--text-secondary);
}


/* DETAIL DATA */

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.detail-value {
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
}


/* PRICE HISTORY */

.price-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-soft);
}

.price-history-item:last-child {
    border-bottom: none;
}

.price-history-period {
    font-size: 13px;
    color: var(--text-secondary);
}

.price-history-value {
    font-size: 13px;
    font-weight: 700;
}


/* FACILITY FORM */

.facility-input-row {
    padding: 13px 0;
    border-bottom: 1px solid var(--border-soft);
}

.facility-input-row:last-child {
    border-bottom: none;
}

.facility-input-title {
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.pagination-wrapper {
    margin: 22px 0 10px;
}

.app-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-arrow,
.pagination-number {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 11px;

    color: var(--text);

    font-size: 13px;
    font-weight: 600;

    transition: .2s ease;
}

.pagination-arrow svg {
    width: 18px !important;
    height: 18px !important;
}

.pagination-arrow:active,
.pagination-number:active {
    transform: scale(.94);
}

.pagination-number.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;

    box-shadow:
        0 5px 15px
        rgba(37, 99, 235, .2);
}

.pagination-arrow.disabled {
    opacity: .35;
    cursor: not-allowed;
}

.pagination-dots {
    min-width: 20px;

    text-align: center;

    color: var(--text-muted);

    font-size: 13px;
}

.pagination-info {
    margin-top: 12px;

    text-align: center;

    color: var(--text-secondary);

    font-size: 11px;
}

.pagination-info strong {
    color: var(--text);
    font-weight: 600;
}


/* Mobile kecil */

@media (max-width: 380px) {

    .pagination-arrow,
    .pagination-number {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .pagination-pages {
        gap: 4px;
    }

    .app-pagination {
        gap: 6px;
    }

}

/* =========================================================
   RESIDENT
   ========================================================= */

.resident-card {
    display: flex;
    align-items: center;
    gap: 13px;

    background: #fff;

    padding: 15px;

    border: 1px solid var(--border-soft);

    border-radius: var(--radius-lg);

    margin-bottom: 10px;

    box-shadow: var(--shadow-sm);

    transition: .2s ease;
}

.resident-card:active {
    transform: scale(.985);
}

.resident-avatar {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 18px;
    font-weight: 700;
}

.resident-card-content {
    flex: 1;
    min-width: 0;
}

.resident-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.resident-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resident-room {
    margin-top: 5px;

    font-size: 12px;
    color: var(--text-secondary);
}

.resident-meta {
    margin-top: 3px;

    font-size: 11px;
    color: var(--text-muted);
}


/* DOCUMENT */

.document-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 13px;

    background: #f8fafc;

    border-radius: 12px;

    margin-top: 10px;
}

.document-name {
    font-size: 12px;
    font-weight: 600;
}

.document-action {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}

/* =========================================================
   ROOM PRICE
   ========================================================= */

.price-period-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.price-period-title {
    margin-top: 3px;

    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;

    color: var(--dark);
}

.price-period-form {
    margin-top: 15px;
}


/* =========================================================
   COPY PRICE
   ========================================================= */

.copy-price-card {
    padding: 16px;

    background: var(--primary-light);

    border: 1px solid
        rgba(37, 99, 235, .12);

    border-radius: var(--radius-lg);
}

.copy-price-content {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 15px;
}

.copy-price-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #fff;

    color: var(--primary);
}

.copy-price-title {
    font-size: 13px;
    font-weight: 700;

    color: var(--dark);
}

.copy-price-description {
    margin-top: 3px;

    font-size: 11px;

    color: var(--text-secondary);
}


/* =========================================================
   PRICE ROOM LIST
   ========================================================= */

.price-room-list {
    overflow: hidden;

    background: #fff;

    border: 1px solid
        var(--border-soft);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}

.price-room-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 15px;

    border-bottom: 1px solid
        var(--border-soft);
}

.price-room-item:last-child {
    border-bottom: none;
}

.price-room-info {
    flex: 1;

    min-width: 0;
}

.price-room-code {
    font-size: 14px;
    font-weight: 700;

    color: var(--dark);
}

.price-room-name {
    margin-top: 2px;

    margin-bottom: 6px;

    font-size: 11px;

    color: var(--text-secondary);
}

.price-room-info .badge {
    margin-top: 6px;
}


/* =========================================================
   PRICE INPUT
   ========================================================= */

.price-room-input {
    width: 155px;

    flex-shrink: 0;
}

.currency-input {
    height: 44px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #fff;

    border: 1px solid
        var(--border);

    border-radius: 11px;

    transition: .2s ease;
}

.currency-input:focus-within {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, .08);
}

.currency-prefix {
    padding-left: 11px;

    font-size: 12px;
    font-weight: 600;

    color: var(--text-secondary);
}

.currency-input input {
    width: 100%;

    min-width: 0;

    height: 100%;

    padding:
        0
        10px
        0
        5px;

    border: none;

    outline: none;

    background: transparent;

    color: var(--dark);

    font-size: 13px;
    font-weight: 600;
}


/*
 * Hilangkan spinner input number
 */

.currency-input input::-webkit-inner-spin-button,
.currency-input input::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance: none;
}

.currency-input input[type=number] {
    -moz-appearance: textfield;
}


/* =========================================================
   SAVE BAR
   ========================================================= */

.price-save-bar {
    position: sticky;

    bottom: calc(
        var(--bottom-nav-height) + 10px
    );

    z-index: 90;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin: 20px 0;

    padding: 11px;

    background:
        rgba(255, 255, 255, .96);

    border: 1px solid
        var(--border);

    border-radius: 15px;

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, .08);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);
}

.price-save-period {
    padding-left: 5px;

    font-size: 12px;
    font-weight: 600;

    color: var(--text-secondary);
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 380px) {

    .price-room-item {
        gap: 10px;

        padding: 13px;
    }

    .price-room-input {
        width: 135px;
    }

    .currency-prefix {
        padding-left: 8px;
    }

    .currency-input input {
        padding-right: 6px;

        font-size: 12px;
    }

}

/* =========================================================
   BILL
   ========================================================= */

.bill-card {
    display: block;

    margin-bottom: 11px;

    padding: 15px;

    background: #fff;

    border: 1px solid var(--border-soft);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    transition: .2s ease;
}

.bill-card:active {
    transform: scale(.985);
}

.bill-card-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;
}

.bill-room {
    font-size: 14px;

    font-weight: 700;

    color: var(--dark);
}

.bill-resident {
    margin-top: 2px;

    font-size: 12px;

    color: var(--text-secondary);
}

.bill-amount {
    margin-top: 13px;

    font-size: 19px;

    font-weight: 700;

    color: var(--dark);
}

.bill-meta {
    margin-top: 5px;

    font-size: 11px;

    color: var(--text-secondary);
}

.bill-payment-info {
    margin-top: 10px;

    padding-top: 10px;

    border-top: 1px solid var(--border-soft);

    font-size: 11px;

    color: var(--text-secondary);
}

.bill-payment-info strong {
    color: var(--text);
}

.bill-generate-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 10px;

    padding: 15px;

    background: #fff;

    border: 1px solid var(--border-soft);

    border-radius: var(--radius-lg);

    cursor: pointer;
}

.bill-generate-item input[type="checkbox"] {
    width: 19px;
    height: 19px;
    margin-top: 3px;

    flex-shrink: 0;

    accent-color: var(--primary);
}


.bill-generate-content {
    flex: 1;
    min-width: 0;
}

.bill-generate-top {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.bill-generate-price {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* =========================================================
   BILL GENERATE - METER
   ========================================================= */

.bill-generate-item .form-group {
    width: 100%;
}

.bill-generate-item .form-control {
    width: 100%;
    min-width: 0;
    height: 46px;

    padding: 0 12px;

    font-size: 14px;

    background: #fff;

    border: 1px solid var(--border);
    border-radius: 11px;
}

.bill-generate-item input[type="number"] {
    width: 100%;
    height: 46px;
}

.bill-generate-item .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;

    width: 100%;
}

.meter-result {
    margin-top: 10px;

    font-size: 12px;

    color: var(--text-secondary);
}

.meter-result strong {
    color: var(--dark);
}

/* =========================================================
   BILL EDIT
   ========================================================= */

.bill-total-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 16px;

    background: #fff;

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}

.bill-total-value {
    margin-top: 3px;

    font-size: 21px;
    font-weight: 700;

    color: var(--dark);
}

.bill-total-preview .btn {
    min-width: 110px;
}

/* =========================================================
   FACILITIES
   ========================================================= */

.facility-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.facility-card {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px;

    background: #fff;

    border:
        1px solid
        var(--border-soft);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

    text-decoration: none;

    transition:
        transform .15s ease;
}


.facility-card:active {
    transform: scale(.985);
}


.facility-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        var(--primary-light);

    border-radius: 12px;

    color:
        var(--primary);

    font-size: 13px;
    font-weight: 700;
}


.facility-card-content {
    flex: 1;

    min-width: 0;
}


.facility-card-top {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}


.facility-name {
    font-size: 13px;
    font-weight: 700;

    color: var(--dark);
}


.facility-meta {
    margin-top: 4px;

    font-size: 11px;

    color:
        var(--text-secondary);
}


.facility-arrow {
    flex-shrink: 0;

    color:
        var(--text-secondary);

    font-size: 22px;
}


/* =========================================================
   FACILITY FORM PREVIEW
   ========================================================= */

.facility-form-preview {
    margin-top: 20px;

    padding: 14px;

    background:
        var(--background);

    border:
        1px solid
        var(--border-soft);

    border-radius: 12px;
}


.facility-preview-content {
    margin-top: 10px;
}

/* =========================================================
   OCCUPANCY HISTORY
   ========================================================= */

.occupancy-history-item {
    width: 100%;
}

.occupancy-invoice-box {
    margin-top: 10px;

    padding: 12px;

    background: var(--background);

    border: 1px solid var(--border-soft);

    border-radius: 12px;
}

.occupancy-invoice-info {
    margin-bottom: 10px;
}

.occupancy-invoice-summary {
    margin-top: 3px;

    font-size: 12px;

    color: var(--text-secondary);
}

.occupancy-invoice-summary strong {
    color: var(--dark);
}

.occupancy-invoice-summary .text-success {
    color: var(--success);
}

.occupancy-invoice-actions {
    gap: 8px;
}

.occupancy-invoice-actions .btn {
    width: 100%;

    min-height: 40px;

    font-size: 11px;
}

.room-filter-section {
    margin-top: 14px;
}

.filter-small-title {
    margin-bottom: 8px;

    font-size: 12px;
    font-weight: 600;

    color: var(--text-secondary);
}

.filter-pills {
    display: flex;

    gap: 8px;

    overflow-x: auto;

    padding-bottom: 2px;

    scrollbar-width: none;
}

.filter-pills::-webkit-scrollbar {
    display: none;
}

.filter-pill {
    flex-shrink: 0;

    padding: 9px 16px;

    border: 1px solid var(--border-soft);

    border-radius: 999px;

    background: #fff;

    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}

.filter-pill.active {
    background: var(--primary);

    border-color: var(--primary);

    color: #fff;
}

/* =========================================================
   MONITORING
========================================================= */

.monitor-summary-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;
}


.monitor-summary-card {
    padding: 14px 8px;

    border: 1px solid var(--border-soft);

    border-radius: 14px;

    background: #fff;

    text-align: center;
}


.monitor-summary-number {
    font-size: 22px;
    font-weight: 700;

    line-height: 1.1;

    color: var(--dark);
}


.monitor-summary-label {
    margin-top: 5px;

    font-size: 10px;

    color: var(--text-secondary);
}


/* =========================================================
   AREA
========================================================= */

.monitor-area-card {
    margin-bottom: 9px;
}


.monitor-area-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;
}


.monitor-area-name {
    font-size: 14px;
    font-weight: 700;

    color: var(--dark);
}


.monitor-area-price {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
}

.monitor-area-count {
    font-size: 11px;

    color: var(--text-secondary);
}


/* =========================================================
   ROOM CHIPS
========================================================= */

.monitor-room-list {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.monitor-room-chip {
    display: inline-flex;

    align-items: center;

    gap: 3px;

    min-width: 44px;

    padding: 7px 10px;

    border: 1px solid var(--border-soft);

    border-radius: 9px;

    background: var(--background);

    color: var(--dark);

    font-size: 11px;
    font-weight: 600;

    text-decoration: none;
}


.monitor-room-chip:active {
    opacity: .7;
}


.monitor-room-chip small {
    font-size: 9px;

    color: var(--text-secondary);
}


/* =========================================================
   DATE
========================================================= */

.monitor-date-box {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: 5px;
    margin-bottom: 9px;

    padding: 12px 14px;

    border: 1px solid var(--border-soft);

    border-radius: 13px;

    background: #fff;
}


.monitor-date-next {
    margin-top: 18px;
}


.monitor-date-label {
    font-size: 10px;

    color: var(--text-secondary);
}


.monitor-date-value {
    margin-top: 2px;

    font-size: 13px;
    font-weight: 700;

    color: var(--dark);
}


.monitor-empty-small {
    padding: 14px;

    font-size: 11px;

    color: var(--text-secondary);
}

/* =========================================================
   KOSAN CT1 BRAND THEME
   Referensi: logo navy + warm gold
   ========================================================= */

:root {
    --brand-navy: #0a2544;
    --brand-navy-2: #0b315b;
    --brand-navy-3: #174f86;

    --brand-gold: #f6a500;
    --brand-gold-dark: #dc8e00;
    --brand-gold-light: #fff5dd;

    --brand-blue-light: #edf5ff;
    --brand-surface: #ffffff;

    --shadow-sm:
        0 2px 7px rgba(10, 37, 68, .055);

    --shadow:
        0 8px 24px rgba(10, 37, 68, .08);

    --shadow-lg:
        0 16px 38px rgba(10, 37, 68, .12);
}


/* BODY / APP BACKGROUND */

body {
    background:
        linear-gradient(
            180deg,
            #eef6ff 0,
            #f7faff 180px,
            #f4f8fc 420px
        );
}

.app-shell {
    background:
        radial-gradient(
            circle at 92% 2%,
            rgba(246, 165, 0, .08),
            transparent 180px
        ),
        linear-gradient(
            180deg,
            #f8fbff 0,
            #f4f8fc 320px
        );
}


/* HEADER */

.app-header {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .98),
            rgba(241, 247, 255, .98)
        );

    border-bottom:
        2px solid
        rgba(246, 165, 0, .62);

    box-shadow:
        0 5px 18px
        rgba(10, 37, 68, .055);
}

.header-title {
    color: var(--brand-navy);
    letter-spacing: -.2px;
}

.header-back,
.header-icon-button {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eef5fc
        );

    color: var(--brand-navy);

    border:
        1px solid
        rgba(10, 49, 91, .06);

    box-shadow:
        0 4px 12px
        rgba(10, 37, 68, .055);
}

.header-back:active,
.header-icon-button:active {
    background: var(--brand-gold-light);
    color: var(--brand-navy);
}


/* PAGE / SECTION */

.page-title,
.section-title,
.card-title {
    color: var(--brand-navy);
}

.section-link,
.document-action {
    color: var(--brand-navy-3);
}

.section-link {
    font-weight: 700;
}


/* CARD */

.card,
.stat-card,
.room-card,
.resident-card,
.bill-card,
.price-room-list,
.monitor-summary-card,
.monitor-date-box,
.facility-card {
    border-color:
        rgba(10, 49, 91, .075);

    box-shadow:
        0 5px 18px
        rgba(10, 37, 68, .055);
}

.card {
    position: relative;
}

.card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 18px;
    right: 18px;

    height: 2px;

    border-radius: 0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(246, 165, 0, .55),
            transparent
        );

    opacity: .55;
}

.stat-card {
    background:
        linear-gradient(
            145deg,
            #ffffff 55%,
            #f5f9ff
        );
}

.stat-value,
.room-code,
.room-price,
.resident-name,
.bill-room,
.bill-amount,
.monitor-summary-number,
.monitor-date-value,
.detail-value {
    color: var(--brand-navy);
}


/* BUTTON */

.btn-primary {
    background:
        linear-gradient(
            135deg,
            var(--brand-navy-2),
            var(--brand-navy-3)
        );

    color: #fff;

    box-shadow:
        0 8px 18px
        rgba(11, 49, 91, .22);
}

.btn-primary:hover {
    background:
        linear-gradient(
            135deg,
            var(--brand-navy),
            var(--brand-navy-2)
        );
}

.btn-secondary {
    background: var(--brand-blue-light);
    color: var(--brand-navy);
}

.btn-success {
    border:
        1px solid
        rgba(22, 163, 74, .10);
}


/* FORM */

.form-control,
.search-box input,
.currency-input {
    border-color:
        rgba(10, 49, 91, .13);

    background:
        rgba(255, 255, 255, .98);
}

.form-control:focus,
.search-box input:focus,
.currency-input:focus-within {
    border-color: var(--brand-gold);

    box-shadow:
        0 0 0 3px
        rgba(246, 165, 0, .13);
}


/* FILTER */

.filter-item,
.filter-pill {
    border-color:
        rgba(10, 49, 91, .12);
}

.filter-item.active,
.filter-pill.active {
    background:
        linear-gradient(
            135deg,
            var(--brand-navy-2),
            var(--brand-navy-3)
        );

    border-color: var(--brand-navy-2);

    box-shadow:
        0 5px 14px
        rgba(10, 49, 91, .18);
}


/* RESIDENT / ICON */

.resident-avatar,
.facility-icon,
.empty-state-icon {
    background:
        linear-gradient(
            145deg,
            var(--brand-gold-light),
            #fffaf0
        );

    color: var(--brand-navy);

    border:
        1px solid
        rgba(246, 165, 0, .16);
}


/* COPY PRICE */

.copy-price-card {
    background:
        linear-gradient(
            135deg,
            #edf5ff,
            #fff8e7
        );

    border-color:
        rgba(246, 165, 0, .18);
}

.copy-price-icon {
    color: var(--brand-navy);
}


/* ROOM FACILITIES */

.room-facilities span,
.document-card,
.occupancy-invoice-box,
.facility-form-preview {
    background: #f7faff;

    border-color:
        rgba(10, 49, 91, .07);
}


/* PAGINATION */

.pagination-number.active {
    background:
        linear-gradient(
            135deg,
            var(--brand-navy-2),
            var(--brand-navy-3)
        );

    border-color: var(--brand-navy-2);

    box-shadow:
        0 6px 16px
        rgba(10, 49, 91, .19);
}


/* BOTTOM NAV */

.bottom-nav {
    background:
        rgba(255, 255, 255, .985);

    border-top:
        1px solid
        rgba(10, 49, 91, .08);

    box-shadow:
        0 -7px 24px
        rgba(10, 37, 68, .075);
}

.bottom-nav-item {
    color: #94a3b4;
}

.bottom-nav-item.active {
    color: var(--brand-navy-2);
}

.bottom-nav-item.active::before {
    background:
        linear-gradient(
            90deg,
            var(--brand-gold),
            #ffc34d
        );

    height: 4px;

    box-shadow:
        0 3px 8px
        rgba(246, 165, 0, .28);
}


/* FAB */

.fab {
    background:
        linear-gradient(
            145deg,
            #ffb51f,
            var(--brand-gold-dark)
        );

    color: #fff;

    box-shadow:
        0 10px 28px
        rgba(246, 165, 0, .34);
}


/* MONITORING */

.monitor-room-chip {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f9ff
        );

    border-color:
        rgba(10, 49, 91, .08);
}


/* SAVE BAR */

.price-save-bar {
    border-color:
        rgba(10, 49, 91, .09);

    box-shadow:
        0 10px 32px
        rgba(10, 37, 68, .10);
}


/* DESKTOP SHELL */

@media (min-width: 600px) {

    body {
        background:
            linear-gradient(
                135deg,
                #dfe9f4,
                #eef3f8
            );
    }

    .app-shell {
        box-shadow:
            0 0 46px
            rgba(10, 37, 68, .13);
    }

}


/* SMALL TOUCH FEEDBACK */

.room-card:active,
.resident-card:active,
.bill-card:active,
.facility-card:active {
    box-shadow:
        0 3px 12px
        rgba(10, 37, 68, .07);
}


/* =========================================================
   KOSAN CT1 - COLORFUL UI LAYER
   Lebih hidup, tetap profesional dan nyaman dibaca
   ========================================================= */

:root {
    --brand-cyan: #0ea5e9;
    --brand-cyan-light: #e8f7ff;

    --brand-teal: #0f9f8f;
    --brand-teal-light: #e8faf7;

    --brand-purple: #7c3aed;
    --brand-purple-light: #f2ecff;

    --brand-rose: #e85572;
    --brand-rose-light: #fff0f3;

    --brand-orange: #f59e0b;
    --brand-orange-light: #fff5df;
}


/* =========================================================
   BACKGROUND LEBIH HIDUP
   ========================================================= */

body {
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(14, 165, 233, .10),
            transparent 230px
        ),
        radial-gradient(
            circle at 92% 10%,
            rgba(246, 165, 0, .12),
            transparent 240px
        ),
        linear-gradient(
            180deg,
            #eef7ff 0%,
            #f8fbff 34%,
            #f6f9fd 100%
        );
}

.app-shell {
    background:
        radial-gradient(
            circle at 100% 120px,
            rgba(246, 165, 0, .10),
            transparent 170px
        ),
        radial-gradient(
            circle at 0% 430px,
            rgba(14, 165, 233, .08),
            transparent 180px
        ),
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f5f9fd 100%
        );
}


/* =========================================================
   HEADER
   ========================================================= */

.app-header {
    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.98) 0%,
            rgba(239,247,255,.98) 58%,
            rgba(255,248,230,.98) 100%
        );
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.page-header {
    padding: 4px 2px;
}

.page-title {
    color: var(--brand-navy);
}

.page-description {
    color: #708399;
}


/* =========================================================
   CARD - WARNA DASAR
   ========================================================= */

.card {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfdff 72%,
            #f3f8ff 100%
        );

    border:
        1px solid
        rgba(19, 78, 125, .08);
}


/* =========================================================
   STAT CARD BERWARNA
   ========================================================= */

.stat-card {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3f8ff
        );

    border:
        1px solid
        rgba(11, 49, 91, .08);
}

.stat-card::after {
    content: "";

    position: absolute;
    width: 74px;
    height: 74px;

    top: -28px;
    right: -26px;

    border-radius: 50%;

    background:
        rgba(14, 165, 233, .10);
}

.grid-2 .stat-card:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eef7ff
        );
}

.grid-2 .stat-card:nth-child(1)::after {
    background:
        rgba(14, 165, 233, .13);
}

.grid-2 .stat-card:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edfbf7
        );
}

.grid-2 .stat-card:nth-child(2)::after {
    background:
        rgba(15, 159, 143, .13);
}

.grid-2 .stat-card:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff7e5
        );
}

.grid-2 .stat-card:nth-child(3)::after {
    background:
        rgba(245, 158, 11, .14);
}

.grid-2 .stat-card:nth-child(4) {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff0f3
        );
}

.grid-2 .stat-card:nth-child(4)::after {
    background:
        rgba(232, 85, 114, .12);
}


/* =========================================================
   DASHBOARD / MONITORING QUICK CARD
   ========================================================= */

.monitor-summary-card:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            var(--brand-cyan-light)
        );
}

.monitor-summary-card:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            var(--brand-teal-light)
        );
}

.monitor-summary-card:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            var(--brand-orange-light)
        );
}


/* =========================================================
   ROOM CARD
   ========================================================= */

.room-card {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7fbff 100%
        );

    border-left:
        4px solid
        rgba(14, 165, 233, .55);
}

.room-card:nth-child(2n) {
    border-left-color:
        rgba(246, 165, 0, .68);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf0
        );
}


/* =========================================================
   RESIDENT CARD
   ========================================================= */

.resident-card {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fbff
        );
}

.resident-card:nth-child(3n + 1) .resident-avatar {
    background:
        linear-gradient(
            145deg,
            var(--brand-cyan-light),
            #ffffff
        );

    color: #0879b5;
}

.resident-card:nth-child(3n + 2) .resident-avatar {
    background:
        linear-gradient(
            145deg,
            var(--brand-orange-light),
            #ffffff
        );

    color: #b56d00;
}

.resident-card:nth-child(3n + 3) .resident-avatar {
    background:
        linear-gradient(
            145deg,
            var(--brand-teal-light),
            #ffffff
        );

    color: #087c70;
}


/* =========================================================
   BILL CARD
   ========================================================= */

.bill-card {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7fbff
        );

    border-left:
        4px solid
        rgba(11, 49, 91, .58);
}

.bill-card:nth-child(2n) {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff8ea
        );

    border-left-color:
        rgba(246, 165, 0, .72);
}


/* =========================================================
   LIST ITEM
   ========================================================= */

.list {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfdff
        );
}

.list-item:nth-child(odd) {
    background:
        rgba(239, 247, 255, .42);
}


/* =========================================================
   FACILITY CARD
   ========================================================= */

.facility-card:nth-child(4n + 1) .facility-icon {
    background: var(--brand-cyan-light);
    color: #0879b5;
}

.facility-card:nth-child(4n + 2) .facility-icon {
    background: var(--brand-orange-light);
    color: #b56d00;
}

.facility-card:nth-child(4n + 3) .facility-icon {
    background: var(--brand-teal-light);
    color: #087c70;
}

.facility-card:nth-child(4n + 4) .facility-icon {
    background: var(--brand-purple-light);
    color: var(--brand-purple);
}


/* =========================================================
   DETAIL ROW
   ========================================================= */

.detail-row {
    position: relative;
}

.detail-row:nth-child(odd) {
    background:
        linear-gradient(
            90deg,
            rgba(238, 247, 255, .50),
            transparent
        );

    margin:
        0 -8px;

    padding-left: 8px;
    padding-right: 8px;

    border-radius: 8px;
}


/* =========================================================
   FILTER / TAB
   ========================================================= */

.filter-item,
.filter-pill {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f9fd
        );

    box-shadow:
        0 2px 8px
        rgba(10, 37, 68, .035);
}

.filter-item.active,
.filter-pill.active {
    background:
        linear-gradient(
            135deg,
            var(--brand-navy-2),
            var(--brand-navy-3)
        );

    box-shadow:
        0 7px 18px
        rgba(10, 49, 91, .19);
}


/* =========================================================
   FORM CARD / INPUT
   ========================================================= */

.form-control {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfdff
        );
}

.form-control:focus {
    background: #fff;
}


/* =========================================================
   BADGE
   ========================================================= */

.badge-success {
    border:
        1px solid
        rgba(22, 163, 74, .10);
}

.badge-warning {
    border:
        1px solid
        rgba(217, 119, 6, .11);
}

.badge-danger {
    border:
        1px solid
        rgba(220, 38, 38, .10);
}

.badge-info {
    border:
        1px solid
        rgba(2, 132, 199, .10);
}


/* =========================================================
   SECTION HIGHLIGHT
   ========================================================= */

.section-header {
    position: relative;
}

.section-title::after {
    content: "";

    display: block;

    width: 28px;
    height: 3px;

    margin-top: 5px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            var(--brand-gold),
            #ffd36d
        );
}


/* =========================================================
   BOTTOM NAV - LEBIH BERWARNA
   ========================================================= */

.bottom-nav {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .99),
            rgba(247, 251, 255, .99)
        );
}

.bottom-nav-item.active {
    color: var(--brand-navy);
}

.bottom-nav-item.active .bottom-nav-icon {
    color: var(--brand-navy);
}

.bottom-nav-item.active::before {
    background:
        linear-gradient(
            90deg,
            #f6a500,
            #ffc64f
        );
}


/* =========================================================
   FLOATING ACTION
   ========================================================= */

.fab {
    background:
        linear-gradient(
            145deg,
            #ffba28,
            #e99300
        );

    border:
        3px solid
        rgba(255, 255, 255, .92);
}


/* =========================================================
   SAVE BAR
   ========================================================= */

.price-save-bar {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.97),
            rgba(239,247,255,.97),
            rgba(255,248,232,.97)
        );
}


/* =========================================================
   COPY PRICE
   ========================================================= */

.copy-price-card {
    background:
        linear-gradient(
            135deg,
            #eaf5ff 0%,
            #f9fbff 52%,
            #fff3d8 100%
        );
}


/* =========================================================
   ALERT LEBIH LEMBUT
   ========================================================= */

.alert-success {
    border-left:
        4px solid
        var(--success);
}

.alert-danger {
    border-left:
        4px solid
        var(--danger);
}

.alert-warning {
    border-left:
        4px solid
        var(--warning);
}


/* =========================================================
   SMALL DECORATION
   ========================================================= */

.card,
.room-card,
.resident-card,
.bill-card,
.facility-card,
.stat-card {
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.card:active,
.room-card:active,
.resident-card:active,
.bill-card:active,
.facility-card:active,
.stat-card:active {
    transform: translateY(1px) scale(.993);
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 600px) {

    body {
        background:
            radial-gradient(
                circle at 20% 20%,
                rgba(14, 165, 233, .14),
                transparent 280px
            ),
            radial-gradient(
                circle at 80% 12%,
                rgba(246, 165, 0, .13),
                transparent 270px
            ),
            linear-gradient(
                135deg,
                #dce8f3,
                #eef4fa
            );
    }

}

/* =========================================================
   FIX BOTTOM NAV ACTIVE INDICATOR
   ========================================================= */

.bottom-nav {
    padding-bottom: 0;
}


/* Beri sedikit ruang agar label tidak terlalu dekat garis */

.bottom-nav-item {
    padding-top: 6px;
    padding-bottom: 7px;
}


/* Garis active benar-benar di dasar navbar */

.bottom-nav-item.active::before {
    content: "";

    position: absolute;

    top: auto;
    bottom: 0;

    left: 50%;
    transform: translateX(-50%);

    width: 34px;
    height: 4px;

    border-radius: 999px 999px 0 0;

    background: linear-gradient(
        90deg,
        #f6a500,
        #ffc64f
    );

    box-shadow:
        0 -2px 8px
        rgba(246, 165, 0, .22);
}