@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    --primary: #10b981;       /* Emerald */
    --primary-hover: #059669;
    --secondary: #64748b;     /* Slate */
    --bg-color: #f1f5f9;      /* Light Slate */
    --surface: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --danger: #ef4444;
    --warning: #f59e0b;
    --success: #10b981;
    --border-color: #e2e8f0;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.06);
}

body {
    background-color: var(--bg-color);
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-main);
    -webkit-tap-highlight-color: transparent;
    padding-top: 65px; /* header space */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.02em;
}

/* Header */
header.fixed-top {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    height: 60px;
}
.navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary) !important;
    letter-spacing: -0.02em;
}

/* Bottom Navigation */
.bottom-nav {
    height: 65px;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color) !important;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.02) !important;
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav .nav-link {
    color: var(--secondary);
    transition: all 0.2s ease;
    padding: 8px 0;
    border-radius: var(--radius-md);
    margin: 0 4px;
}
.bottom-nav .nav-link i {
    font-size: 1.3rem;
    margin-bottom: 2px;
}
.bottom-nav .nav-link small {
    font-weight: 600;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.bottom-nav .nav-link.active,
.bottom-nav .nav-link.text-success {
    color: var(--primary) !important;
}

/* Cards */
.card {
    border: none !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md) !important;
    background-color: var(--surface);
    overflow: hidden;
    margin-bottom: 16px;
}
.card-header {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border-color);
    padding: 16px;
}
.card-body {
    padding: 16px;
}

/* List Groups */
.list-group {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: none;
}
.list-group-item {
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 16px;
    background: var(--surface);
}
.list-group-item:last-child {
    border-bottom: none;
}
.list-group-item-action:hover, .list-group-item-action:focus {
    background-color: #f8fafc;
}

/* Form Elements */
.form-control, .form-select {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 12px 16px;
    background-color: #f8fafc;
    color: var(--text-main);
    font-weight: 500;
    transition: all 0.2s;
    box-shadow: none !important;
}
.form-control:focus, .form-select:focus {
    background-color: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
}
.form-label {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.85rem;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Buttons */
.btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    padding: 10px 16px;
    transition: all 0.2s;
    letter-spacing: 0.01em;
}
.btn-lg {
    padding: 14px 20px;
    border-radius: var(--radius-lg);
}
.btn-primary, .btn-success {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}
.btn-primary:hover, .btn-success:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}
.btn-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
}
.btn-danger:hover {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

/* Badges */
.badge {
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

/* Alerts */
.alert {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-weight: 500;
}

/* Desktop Fixes */
@media (min-width: 768px) {
    body {
        padding-bottom: 0 !important;
        background-color: var(--bg-color);
    }
    .bottom-nav {
        display: none !important;
    }
    main {
        max-width: 1000px;
        margin: 0 auto;
        padding-top: 30px;
    }
}

/* --- Modern Card & Icon Enhancements --- */
.card {
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.03) !important;
}

.login-body {
    min-height: 100vh; margin: 0; padding: 24px 0;
    background:
      radial-gradient(circle at 18% 12%, rgba(52,211,153,.3), transparent 24rem),
      radial-gradient(circle at 86% 82%, rgba(14,165,233,.2), transparent 26rem),
      linear-gradient(145deg, #f8fafc, #eefcf5);
}
.login-shell { animation: page-in .45s ease both; }
.login-logo {
    width: 78px; height: 78px; margin-inline:auto; display:flex; align-items:center; justify-content:center;
    overflow:visible; background:transparent;
}
.login-logo img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(11,61,50,.16)); }
.login-logo-wide { width:230px; height:92px; }
.login-card { border-radius:26px !important; background:rgba(255,255,255,.88); backdrop-filter:blur(18px); box-shadow:0 26px 70px rgba(15,23,42,.13) !important; }
.login-card .input-group-text { border-color:#e5eaf0; background:#f8fafc !important; }
.login-card input.form-control:-webkit-autofill,
.login-card input.form-control:-webkit-autofill:hover,
.login-card input.form-control:-webkit-autofill:focus,
.login-card input.form-control:-webkit-autofill:active {
    -webkit-text-fill-color:var(--text-main) !important;
    -webkit-box-shadow:0 0 0 1000px #f8fafc inset !important;
    box-shadow:0 0 0 1000px #f8fafc inset !important;
    caret-color:var(--text-main);
    transition:background-color 9999s ease-out 0s;
}
.card-hover {
    transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), box-shadow 0.25s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06) !important;
}

/* Icon Shapes (Soft Backgrounds for Icons) */
.icon-shape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 1.5rem;
}
.icon-shape-sm {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.1rem;
}
.icon-shape-lg {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    font-size: 2rem;
}

.bg-soft-primary { background-color: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; }
.bg-soft-danger { background-color: rgba(239, 68, 68, 0.1) !important; color: #ef4444 !important; }
.bg-soft-warning { background-color: rgba(245, 158, 11, 0.12) !important; color: #d97706 !important; }
.bg-soft-info { background-color: rgba(14, 165, 233, 0.1) !important; color: #0ea5e9 !important; }
.bg-soft-secondary { background-color: rgba(100, 116, 139, 0.1) !important; color: #64748b !important; }

/* Avatars */
.avatar-initials {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #10b981, #059669);
    font-size: 1rem;
}

/* Modern Gradient Texts */
.text-gradient-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 2026 mobile-first application shell */
:root {
    --brand-900: #064e3b;
    --brand-800: #065f46;
    --brand-700: #047857;
    --brand-500: #10b981;
    --ink-900: #0b1220;
    --ink-700: #334155;
    --surface-muted: rgba(255,255,255,.72);
    --shadow-float: 0 18px 50px rgba(15, 23, 42, .09);
}

html { scroll-behavior: smooth; }
body.app-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 4%, rgba(16,185,129,.12), transparent 28rem),
        radial-gradient(circle at 92% 26%, rgba(14,165,233,.09), transparent 24rem),
        #f5f7fb;
    padding-top: 78px;
    overflow-x: hidden;
}
.ambient { position: fixed; border-radius: 999px; filter: blur(90px); pointer-events: none; z-index: -1; opacity: .36; }
.ambient-one { width: 260px; height: 260px; background: #a7f3d0; left: -140px; top: 20%; }
.ambient-two { width: 220px; height: 220px; background: #bae6fd; right: -120px; bottom: 10%; }

.app-header {
    height: 68px !important;
    background: rgba(255,255,255,.82) !important;
    border-bottom: 1px solid rgba(226,232,240,.75) !important;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.app-header-inner { max-width: 1220px; margin: 0 auto; }
.navbar-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--brand-800) !important; }
.brand-mark {
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    overflow:hidden; border-radius:13px; background:#0b2b24;
    box-shadow:0 8px 22px rgba(5,72,60,.24);
}
.brand-mark img { width:100%; height:100%; object-fit:cover; }
.brand-lockup { display:block; width:auto; height:42px; object-fit:contain; }
.navbar-nav .nav-link { color: #475569; padding: 9px 12px !important; border-radius: 11px; font-size: .86rem; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { background: #ecfdf5; color: var(--brand-700) !important; }
.header-action {
    width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #e7edf3; border-radius: 14px; background: rgba(255,255,255,.76); color: #475569;
}
.header-action:hover { background: white; color: var(--brand-700); box-shadow: 0 8px 24px rgba(15,23,42,.08); }
.user-action::after { display: none; }
.user-avatar { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: #dcfce7; color: #047857; font-size: .78rem; font-weight: 800; }
.dropdown-menu { border-radius: 16px !important; padding: 8px; box-shadow: var(--shadow-float) !important; }
.dropdown-item { border-radius: 10px; padding: 10px 12px; }

.app-main { max-width: 1180px; margin: 0 auto; padding-top: 18px !important; }
.page-shell { margin-top: 0 !important; animation: page-in .35s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.dashboard-hero {
    position: relative; overflow: hidden; border-radius: 26px; padding: 26px;
    background: linear-gradient(130deg, #064e3b 0%, #047857 58%, #10b981 130%);
    box-shadow: 0 22px 50px rgba(5, 120, 87, .22);
}
.dashboard-hero::before { content:""; position:absolute; width:210px; height:210px; border-radius:50%; right:-65px; top:-110px; background:rgba(255,255,255,.1); }
.dashboard-hero::after { content:""; position:absolute; width:110px; height:110px; border-radius:50%; right:105px; bottom:-75px; background:rgba(255,255,255,.08); }
.staff-hero { background: linear-gradient(130deg, #0f172a, #1e3a5f 62%, #0e7490 130%); box-shadow: 0 22px 50px rgba(15,23,42,.2); }
.eyebrow { display:block; margin-bottom:7px; color:#a7f3d0; font-size:.67rem; font-weight:800; letter-spacing:.16em; }
.hero-notification { width:46px; height:46px; border-radius:15px; color:white; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.16); text-decoration:none; backdrop-filter:blur(8px); z-index:1; }
.hero-notification:hover { color:white; background:rgba(255,255,255,.22); }

.card {
    border: 1px solid rgba(226,232,240,.8) !important;
    box-shadow: 0 10px 34px rgba(15,23,42,.055) !important;
    border-radius: 20px;
}
.card-hover:hover { transform: translateY(-3px); border-color: rgba(16,185,129,.25) !important; box-shadow: 0 18px 42px rgba(15,23,42,.09) !important; }
.metric-card { position: relative; overflow: hidden; }
.metric-card::after { content:""; position:absolute; width:100px; height:100px; border-radius:50%; right:-48px; top:-50px; }
.metric-receivable::after { background:rgba(239,68,68,.08); }
.metric-collected::after { background:rgba(16,185,129,.1); }
.metric-today::after { background:rgba(245,158,11,.11); }
.sensitive-amount { font-variant-numeric: tabular-nums; }
.customer-type-switch {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; padding:.35rem;
    border:1px solid #e5eaf0; border-radius:16px; background:#f1f5f9;
}
.customer-type-switch a {
    padding:.7rem .5rem; border-radius:12px; color:#64748b; font-size:.82rem;
    font-weight:800; text-align:center; text-decoration:none;
}
.customer-type-switch a.active { color:#047857; background:#fff; box-shadow:0 5px 14px rgba(15,23,42,.08); }
.payment-method-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.payment-method-option { cursor:pointer; }
.payment-method-option input { position:absolute; opacity:0; pointer-events:none; }
.payment-method-option span {
    display:flex; min-height:48px; align-items:center; justify-content:center; padding:.65rem;
    border:1px solid #e5eaf0; border-radius:14px; background:#f8fafc; color:#475569;
    font-size:.82rem; font-weight:800; text-align:center; transition:.18s ease;
}
.payment-method-option input:checked + span { border-color:#10b981; color:#047857; background:#ecfdf5; box-shadow:0 0 0 2px rgba(16,185,129,.12); }
.payment-method-option input:focus-visible + span { outline:3px solid rgba(16,185,129,.2); }
.movement-item { position:relative; padding:1rem; border-left:4px solid transparent !important; }
.movement-item.movement-credit { border-left-color:#ef4444 !important; }
.movement-item.movement-collection { border-left-color:#10b981 !important; }
.movement-item.movement-pending { border-left-color:#f59e0b !important; }
.movement-icon { width:38px; height:38px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:1.1rem; }
.movement-icon-in { color:#047857; background:#d1fae5; }
.movement-icon-out { color:#b91c1c; background:#fee2e2; }
.movement-amount { white-space:nowrap; font-variant-numeric:tabular-nums; }
.movement-export-controls { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.45rem; }
.daily-status-card { padding:1rem 1.1rem; border:1px solid #e5eaf0; border-radius:20px; background:rgba(255,255,255,.94); box-shadow:0 12px 28px rgba(15,23,42,.06); }
.daily-status-count { padding:.35rem .65rem; border-radius:999px; color:#047857; background:#d1fae5; font-size:.72rem; font-weight:800; }
.daily-status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.daily-status-grid > .daily-status-item { min-width:0; padding:.8rem; border-radius:14px; background:#f8fafc; transition:transform .15s ease,background-color .15s ease; }
.daily-status-grid > .daily-status-item:active { transform:scale(.98); background:#f1f5f9; }
.daily-status-grid small { display:block; margin-bottom:.25rem; color:#64748b; font-size:.68rem; font-weight:700; }
.daily-status-grid strong { display:block; overflow:hidden; font-size:.9rem; text-overflow:ellipsis; white-space:nowrap; }
.daily-status-grid span { display:block; margin-top:.35rem; color:#64748b; font-size:.65rem; font-weight:600; }
.stat-card-link { display:block; height:100%; color:inherit; text-decoration:none; }
.stat-card { position:relative; margin-bottom:0; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.stat-card small { font-size:.67rem; letter-spacing:.08em; }
.stat-card-arrow { position:absolute; right:10px; top:10px; color:#94a3b8; font-size:.75rem; opacity:.7; }
.stat-card-link:hover .stat-card, .stat-card-link:focus-visible .stat-card { transform:translateY(-3px); border-color:rgba(16,185,129,.28) !important; box-shadow:0 16px 32px rgba(15,23,42,.1) !important; }
.stat-card-link:focus-visible { outline:3px solid rgba(16,185,129,.25); outline-offset:3px; border-radius:20px; }
.dashboard-calendar-cta {
    display:flex; align-items:center; padding:1rem 1.1rem; border:1px solid rgba(15,118,110,.12);
    border-radius:18px; background:rgba(255,255,255,.9); box-shadow:0 12px 28px rgba(15,23,42,.06);
    text-decoration:none; transition:transform .2s ease, box-shadow .2s ease;
}
.dashboard-calendar-cta:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(15,23,42,.1); }
.payment-calendar-hero {
    overflow:hidden; padding:1.5rem; border-radius:24px;
    background:linear-gradient(135deg,#0f766e,#0d9488 58%,#14b8a6);
    box-shadow:0 18px 42px rgba(15,118,110,.22);
}
.calendar-hero-icon {
    display:grid; width:58px; height:58px; place-items:center; flex:0 0 auto;
    border:1px solid rgba(255,255,255,.22); border-radius:18px; background:rgba(255,255,255,.14);
    color:#fff; font-size:1.55rem;
}
.calendar-panel {
    overflow:hidden; border:1px solid rgba(226,232,240,.85); border-radius:22px;
    background:rgba(255,255,255,.94); box-shadow:0 12px 32px rgba(15,23,42,.06);
}
.calendar-toolbar { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.15rem; border-bottom:1px solid #edf1f5; }
.calendar-toolbar small { font-size:.65rem; font-weight:800; letter-spacing:.12em; }
.calendar-nav-button {
    display:grid; width:42px; height:42px; place-items:center; border:1px solid #e5eaf0; border-radius:13px;
    background:#f8fafc; color:#334155; text-decoration:none; transition:background .2s ease, transform .2s ease;
}
.calendar-nav-button:hover { background:#ecfdf5; color:#047857; transform:translateY(-1px); }
.payment-calendar-scroll { overflow:hidden; }
.payment-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); min-width:0; }
.calendar-weekday {
    padding:.65rem; border-bottom:1px solid #edf1f5; color:#64748b; background:#f8fafc;
    font-size:.68rem; font-weight:800; text-align:center; text-transform:uppercase;
}
.calendar-day {
    min-height:118px; padding:.55rem; border-right:1px solid #edf1f5; border-bottom:1px solid #edf1f5;
    background:#fff;
}
.calendar-day:nth-child(7n) { border-right:0; }
.calendar-day.is-outside { background:#fafbfc; }
.calendar-day.is-today { background:#f0fdfa; box-shadow:inset 0 0 0 2px rgba(13,148,136,.3); }
.calendar-day-number {
    display:grid; width:27px; height:27px; place-items:center; margin-bottom:.35rem; border-radius:9px;
    color:#475569; font-size:.78rem; font-weight:800;
}
.calendar-day.is-today .calendar-day-number { background:#0f766e; color:#fff; }
.calendar-day-payments { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; }
.calendar-payment {
    display:grid; width:29px; height:29px; place-items:center; flex:0 0 auto;
    border:1px solid; border-radius:10px; font-size:.72rem; text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease;
}
.calendar-payment:hover, .calendar-payment:focus-visible { transform:translateY(-2px) scale(1.05); box-shadow:0 5px 12px rgba(15,23,42,.14); }
.calendar-payment.overdue { border-color:#fecdd3; background:#ffe4e6; color:#be123c; }
.calendar-payment.today { border-color:#fde68a; background:#fef3c7; color:#b45309; }
.calendar-payment.upcoming { border-color:#bfdbfe; background:#dbeafe; color:#1d4ed8; }
.calendar-more {
    display:grid; min-width:25px; height:25px; place-items:center; padding:0 .2rem;
    border-radius:9px; background:#f1f5f9; color:#64748b; font-size:.62rem; font-weight:800;
}
.calendar-no-payment { padding:.8rem 1rem; border-top:1px solid #edf1f5; color:#64748b; font-size:.82rem; text-align:center; }
.calendar-legend { display:flex; align-items:center; justify-content:flex-end; gap:1rem; padding:.7rem 1rem; color:#64748b; font-size:.7rem; font-weight:700; }
.calendar-legend span { display:inline-flex; align-items:center; gap:.35rem; }
.legend-dot { width:8px; height:8px; border-radius:50%; }
.legend-dot.overdue { background:#dc3545; }
.legend-dot.today { background:#f59e0b; }
.legend-dot.upcoming { background:#3b82f6; }
.schedule-summary {
    display:flex; min-height:94px; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
    border:1px solid transparent; border-radius:18px; background:#fff;
    box-shadow:0 10px 25px rgba(15,23,42,.06); color:#64748b; text-decoration:none;
    transition:transform .2s ease, border-color .2s ease;
}
.schedule-summary strong { font-size:1.6rem; line-height:1; }
.schedule-summary span { font-size:.72rem; font-weight:800; text-transform:uppercase; }
.schedule-summary:hover, .schedule-summary.active { transform:translateY(-2px); }
.schedule-summary-overdue strong { color:#dc3545; }
.schedule-summary-overdue.active { border-color:rgba(220,53,69,.4); background:#fff7f7; }
.schedule-summary-today strong { color:#d97706; }
.schedule-summary-today.active { border-color:rgba(217,119,6,.4); background:#fffaf0; }
.schedule-summary-upcoming strong { color:#0d6efd; }
.schedule-summary-upcoming.active { border-color:rgba(13,110,253,.35); background:#f6f9ff; }
.schedule-list { display:grid; gap:.75rem; }
.schedule-item {
    display:flex; align-items:center; gap:.9rem; padding:.9rem;
    border:1px solid rgba(148,163,184,.16); border-radius:18px; background:rgba(255,255,255,.94);
    box-shadow:0 8px 24px rgba(15,23,42,.05); text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease;
}
.schedule-item:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(15,23,42,.09); }
.schedule-date { display:grid; width:58px; height:64px; place-items:center; align-content:center; flex:0 0 auto; border-radius:15px; line-height:1; }
.schedule-date span { margin-bottom:.25rem; font-size:.65rem; font-weight:800; text-transform:uppercase; }
.schedule-date strong { font-size:1.35rem; }
.schedule-date.overdue { color:#b42335; background:#fff0f2; }
.schedule-date.today { color:#a15c00; background:#fff6df; }
.schedule-date.upcoming { color:#0b63ce; background:#edf5ff; }
.schedule-customer { min-width:0; flex:1; }
.schedule-customer h3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.schedule-amount { display:flex; align-items:center; gap:.65rem; color:#0f172a; white-space:nowrap; }
.schedule-amount i { color:#94a3b8; }
.schedule-empty-state {
    padding:3rem 1.25rem; border:1px dashed rgba(100,116,139,.25); border-radius:22px;
    background:rgba(255,255,255,.72); text-align:center;
}
.schedule-empty-icon { margin-bottom:.75rem; color:#0f766e; font-size:2.25rem; }
.balance-card { color:white; background: linear-gradient(140deg, #0f172a, #1f3b4d 60%, #047857); border:0 !important; box-shadow: 0 20px 44px rgba(15,23,42,.2) !important; }
.balance-card h1, .balance-card h6 { color:white !important; }
.balance-card .text-muted { color:rgba(255,255,255,.62) !important; }

.form-control, .form-select {
    min-height: 48px; border-color: #e5eaf0; background: rgba(248,250,252,.88); border-radius: 14px;
}
textarea.form-control { min-height: auto; }
.form-page { max-width: 720px; }
.form-page > .card { box-shadow: var(--shadow-float) !important; }
.btn { min-height: 42px; border-radius: 13px; }
.btn-primary, .btn-success { background: linear-gradient(135deg, #10b981, #047857) !important; border: 0 !important; box-shadow: 0 8px 18px rgba(5,150,105,.17); }
.btn-light { background:rgba(255,255,255,.82); border:1px solid #e5eaf0; }
.alert { border-left: 4px solid currentColor; }
.table { --bs-table-bg: transparent; }
.table thead th { color:#64748b; font-size:.72rem; text-transform:uppercase; letter-spacing:.055em; border-bottom-color:#e8edf3; }
.table tbody td { padding-top:14px; padding-bottom:14px; border-bottom-color:#edf1f5; }

.app-bottom-nav {
    height: 72px; left: 10px !important; right: 10px !important; bottom: 9px !important;
    border: 1px solid rgba(226,232,240,.9) !important; border-radius: 22px;
    background: rgba(255,255,255,.9) !important; box-shadow: 0 18px 45px rgba(15,23,42,.16) !important;
    backdrop-filter: blur(22px) saturate(170%); overflow: visible;
}
.app-bottom-nav .nav-link { margin:0; padding-top:10px !important; }
.app-bottom-nav .nav-link small { text-transform:none; letter-spacing:0; font-size:.67rem; }
.mobile-menu-trigger { border:0; background:transparent; color:inherit; }
.nav-fab-wrap { transform: translateY(-14px); }
.nav-fab { width:52px; height:52px; margin:auto; display:flex; align-items:center; justify-content:center; border-radius:18px; color:white; background:linear-gradient(145deg,#34d399,#047857); box-shadow:0 12px 25px rgba(5,150,105,.35); border:4px solid #f8fafc; }

.mobile-admin-menu {
    height:auto !important; max-height:88vh; border:0 !important; border-radius:26px 26px 0 0;
    background:rgba(248,250,252,.98); box-shadow:0 -22px 55px rgba(15,23,42,.2);
}
.mobile-admin-menu::before {
    content:""; position:absolute; top:8px; left:50%; width:42px; height:4px;
    border-radius:999px; background:#cbd5e1; transform:translateX(-50%);
}
.mobile-menu-header { padding:1.5rem 1.15rem .75rem; }
.mobile-menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.mobile-menu-item {
    display:grid; grid-template-columns:42px minmax(0,1fr); grid-template-rows:auto auto; column-gap:.7rem;
    align-items:center; padding:.85rem; border:1px solid rgba(226,232,240,.9); border-radius:17px;
    background:#fff; box-shadow:0 7px 20px rgba(15,23,42,.045); color:#0f172a; text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease;
}
.mobile-menu-item:active { transform:scale(.98); }
.mobile-menu-icon {
    display:grid; width:42px; height:42px; grid-row:1 / 3; place-items:center;
    border-radius:13px; font-size:1.05rem;
}
.mobile-menu-item strong { overflow:hidden; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.mobile-menu-item small { overflow:hidden; color:#64748b; font-size:.65rem; text-overflow:ellipsis; white-space:nowrap; }
.mobile-menu-account {
    display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem;
    border:1px solid rgba(226,232,240,.9); border-radius:17px; background:#fff;
}
.mobile-menu-account > div { min-width:0; }

@media (max-width: 767.98px) {
    body.app-body { padding-top: 70px; padding-bottom: 94px !important; }
    .app-main { padding: 12px 12px 0 !important; }
    .brand-lockup { height:38px; }
    .dashboard-hero { padding: 22px 20px; border-radius: 22px; }
    .dashboard-hero h2 { font-size: 1.45rem; }
    .page-shell > .d-flex:first-child h2 { font-size: 1.15rem; }
    .card-body { padding: 17px; }
    .btn { min-height: 44px; }
    .payment-calendar-hero { padding:1.25rem; border-radius:20px; }
    .calendar-hero-icon { width:48px; height:48px; border-radius:15px; }
    .calendar-toolbar { padding:.85rem; }
    .calendar-weekday { padding:.5rem .1rem; font-size:.59rem; }
    .calendar-day { min-height:76px; padding:.3rem; }
    .calendar-day-number { width:23px; height:23px; margin-bottom:.2rem; font-size:.68rem; }
    .calendar-day-payments { gap:.15rem; }
    .calendar-payment { width:23px; height:23px; border-radius:8px; font-size:.6rem; }
    .calendar-more { min-width:22px; height:22px; font-size:.56rem; }
    .calendar-legend { justify-content:center; }
    .schedule-summary { min-height:82px; border-radius:15px; }
    .schedule-summary strong { font-size:1.35rem; }
    .schedule-item { gap:.7rem; padding:.75rem; }
    .schedule-date { width:52px; height:58px; }
    .schedule-amount strong { font-size:.86rem; }
    .schedule-amount i { display:none; }
    .mobile-admin-menu .offcanvas-body { padding:0 1rem calc(1rem + env(safe-area-inset-bottom)); overflow-y:auto; }
}

@media (min-width: 768px) {
    .app-header { top: 10px !important; left: 18px; right: 18px; border: 1px solid rgba(226,232,240,.8) !important; border-radius: 19px; box-shadow: 0 12px 35px rgba(15,23,42,.07) !important; }
    body.app-body { padding-top: 92px; }
    .app-main { padding-top: 25px !important; }
}