@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
:root { --bg: #f4f6fa; --white: #fff; --navy: #2b3674; --muted: #a3aed1; --accent: #5569ff; --violet: #3d2db7; --radius: 22px; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; color: var(--navy); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { color: inherit; }
.app-layout { display: flex; height: 100vh; overflow: hidden; }
.app-sidebar { z-index: 30; width: 260px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 26px 0; background: white; box-shadow: 8px 0 30px rgba(43, 54, 116, .025); }
.sidebar-logo { display: flex; align-items: center; gap: 12px; padding: 0 28px; margin-bottom: 38px; }
.sidebar-logo-icon { width: 29px; height: 29px; display: grid; place-items: center; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, #1d4ed8, var(--accent)); transform: rotate(45deg); box-shadow: 0 8px 18px rgba(85, 105, 255, .24); }
.sidebar-logo-icon .dot { width: 9px; height: 9px; border-radius: 50%; background: white; }
.sidebar-logo h1 { font-size: 15px; letter-spacing: -.4px; }
.sidebar-logo span { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.sidebar-close { display: none; margin-left: auto; border: 0; background: transparent; font-size: 25px; cursor: pointer; }
.sidebar-section-label { padding: 0 30px; margin-bottom: 9px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; }
.sidebar-settings-label { margin-top: 25px; }
.sidebar-nav { display: grid; gap: 2px; }
.sidebar-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 45px; padding: 0 26px; color: var(--muted); border-right: 3px solid transparent; text-decoration: none; font-size: 13px; font-weight: 600; transition: .2s ease; }
.sidebar-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.sidebar-item.active { color: var(--navy); border-color: var(--accent); background: linear-gradient(90deg, transparent, rgba(85, 105, 255, .055)); }
.sidebar-item.active svg { color: var(--accent); }
.sidebar-item:not(.disabled):hover { color: var(--navy); }
.sidebar-item.disabled { cursor: default; }
.chevron { margin-left: auto; font-size: 19px; font-weight: 300; }
.soon { margin-left: auto; padding: 3px 6px; border-radius: 5px; color: #9ca3af; background: #f3f4f6; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.help-center { padding: 0 22px; }
.help-center-card { position: relative; padding: 23px 16px 17px; border: 1px solid #f1f3ff; border-radius: 18px; text-align: center; background: linear-gradient(145deg, #fafaff, #f1f3ff); box-shadow: 0 12px 28px rgba(43, 54, 116, .07); }
.help-center-badge { width: 34px; height: 34px; display: grid; place-items: center; margin: -39px auto 12px; color: white; border: 4px solid white; border-radius: 50%; background: linear-gradient(135deg, #fb923c, #ef4444); font-size: 12px; font-weight: 800; box-shadow: 0 8px 18px rgba(239, 68, 68, .24); }
.help-center-card h2 { font-size: 13px; }
.help-center-card p { margin: 5px 0 13px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.help-center-btn { display: block; padding: 9px; color: var(--navy); border-radius: 10px; background: white; box-shadow: 0 3px 9px rgba(43, 54, 116, .05); text-decoration: none; font-size: 10px; font-weight: 800; }
.app-main { min-width: 0; flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.app-header { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 38px; }
.header-left, .header-actions, .header-user { display: flex; align-items: center; }
.menu-toggle { display: none; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 11px; background: white; cursor: pointer; }
.menu-toggle svg { width: 20px; height: 20px; }
.header-search { width: min(300px, 30vw); display: flex; align-items: center; gap: 9px; padding: 10px 15px; border: 1px solid transparent; border-radius: 12px; background: white; box-shadow: 0 4px 14px rgba(43, 54, 116, .035); }
.header-search:focus-within { border-color: rgba(85, 105, 255, .35); }
.header-search svg { width: 16px; height: 16px; color: #9ca3af; }
.header-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--navy); background: transparent; font-size: 12px; }
.header-search input::placeholder { color: #aeb6c6; }
.header-actions { gap: 18px; }
.header-icon-btn, .logout-btn { position: relative; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.header-icon-btn svg, .logout-btn svg { width: 19px; height: 19px; }
.header-icon-btn { color: var(--muted); }
.logout-btn { padding: 7px; color: #ef4444; border-radius: 9px; }
.logout-btn:hover { background: #fef2f2; }
.notification-dot { position: absolute; top: -1px; right: -1px; width: 6px; height: 6px; border: 1px solid var(--bg); border-radius: 50%; background: #ef4444; }
.header-divider { width: 1px; height: 27px; background: #e4e7ef; }
.header-user { gap: 11px; }
.header-user-copy { text-align: right; }
.header-user-copy span, .header-user-copy small { display: block; }
.header-user-copy span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.header-user-copy small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.header-avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; color: #4338ca; background: linear-gradient(135deg, #e0e7ff, #c7d2fe); box-shadow: 0 5px 12px rgba(67, 56, 202, .12); font-size: 10px; font-weight: 800; }
.app-content { flex: 1; overflow-y: auto; padding: 8px 38px 38px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.page-kicker, .section-kicker { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: 1.5px; }
.page-heading h1 { margin: 4px 0 4px; font-size: 26px; letter-spacing: -.8px; }
.page-heading p { color: var(--muted); font-size: 12px; }
.date-chip { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 11px; color: #6b7280; background: white; box-shadow: 0 4px 14px rgba(43, 54, 116, .035); font-size: 10px; font-weight: 700; }
.date-chip svg { width: 15px; height: 15px; color: var(--accent); }
.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.stat-card { position: relative; min-height: 175px; overflow: hidden; padding: 23px; border-radius: var(--radius); box-shadow: 0 16px 35px -18px rgba(43, 54, 116, .35); }
.stat-card.dark { color: white; background: linear-gradient(135deg, var(--navy), var(--violet)); }
.stat-card.peach { color: #452b32; background: linear-gradient(135deg, #ffe8df, #fff3ef); }
.stat-card.green { color: #14532d; background: linear-gradient(135deg, #dfffe5, #f0fff3); }
.card-glow { position: absolute; right: -50px; bottom: -65px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255, 255, 255, .15); filter: blur(25px); }
.stat-card-top { position: relative; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; }
.stat-card-top small { color: inherit; opacity: .55; font-size: 9px; font-weight: 600; }
.stat-card > h2 { position: relative; margin-top: 26px; font-size: clamp(20px, 2vw, 27px); letter-spacing: -.8px; }
.stat-card > h2 small { font-size: 10px; letter-spacing: 1.5px; }
.stat-card-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 22px; font-size: 9px; font-weight: 700; }
.stat-card-bottom strong { padding: 4px 7px; border-radius: 6px; color: #bbf7d0; background: rgba(255, 255, 255, .12); }
.card-info { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #fb7185; background: rgba(255, 255, 255, .65); font-size: 10px; font-weight: 800; }
.metric-row { display: flex; align-items: center; gap: 13px; margin-top: 23px; }
.metric-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; background: white; box-shadow: 0 7px 15px rgba(43, 54, 116, .07); }
.metric-icon svg { width: 20px; height: 20px; }
.metric-icon.orange { color: #fb923c; }
.metric-row h2 { color: #ef4444; font-size: 22px; }
.metric-row p { margin-top: 1px; font-size: 10px; font-weight: 700; }
.progress { height: 4px; margin-top: 22px; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, .55); }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fb923c, #ef4444); }
.stat-split { position: relative; display: flex; gap: 38px; margin-top: 20px; }
.stat-split span, .stat-split strong { display: block; }
.stat-split span { margin-bottom: 2px; font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: .65; }
.stat-split strong { font-size: 13px; }
.charts-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 24px; padding: 25px 28px; border-radius: var(--radius); background: white; box-shadow: 0 5px 20px rgba(43, 54, 116, .025); }
.chart-block { min-width: 0; padding: 0 28px; border-right: 1px solid #f0f1f5; }
.chart-block:first-child { padding-left: 0; }
.chart-block:last-child { padding-right: 0; border-right: 0; }
.chart-header { display: flex; justify-content: space-between; }
.chart-header span { font-size: 11px; font-weight: 700; }
.chart-header h2 { margin-top: 4px; font-size: 20px; }
.chart-header h2 small { margin-left: 5px; font-size: 9px; }
.chart-header > small { color: var(--muted); font-size: 8px; }
.green-text { color: #16a34a; }.purple-text { color: #7c3aed; }.emerald-text { color: #00bb78; }
.mini-bars { height: 48px; display: flex; align-items: flex-end; gap: 7px; margin-top: 20px; }
.mini-bars i { flex: 1; max-width: 25px; border-radius: 5px 5px 2px 2px; background: #f0f2f7; }
.mini-bars .orange { background: #fb923c; box-shadow: 0 8px 13px rgba(251, 146, 60, .2); }
.mini-bars .indigo { background: var(--accent); box-shadow: 0 8px 13px rgba(85, 105, 255, .2); }
.mini-bars .emerald { background: #00d68f; box-shadow: 0 8px 13px rgba(0, 214, 143, .2); }
.lists-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .8fr); gap: 24px; }
.list-card { padding: 26px; border-radius: var(--radius); background: white; box-shadow: 0 5px 20px rgba(43, 54, 116, .025); }
.list-card-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.list-card-header h2 { margin-top: 3px; font-size: 15px; }
.view-button { padding: 7px 10px; color: var(--muted); border: 1px solid #edf0f6; border-radius: 8px; background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }
.transaction-list { display: grid; }
.transaction-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 0; border-bottom: 1px solid #f4f5f8; }
.transaction-item:last-child { border-bottom: 0; }
.transaction-main { min-width: 0; display: flex; align-items: center; gap: 12px; }
.transaction-icon { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; border-radius: 10px; }
.transaction-icon svg { width: 14px; height: 14px; }
.transaction-icon.gray { color: #6b7280; background: #f3f4f6; }.transaction-icon.navy { color: white; background: var(--violet); }.transaction-icon.red { color: white; background: #f87171; }.transaction-icon.blue { color: white; background: #60a5fa; }
.transaction-main strong, .transaction-main span { display: block; }
.transaction-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.transaction-main span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.transaction-item b, .upcoming-item b { flex-shrink: 0; font-size: 10px; }
.amount-out { color: #ef4444; }.amount-in { color: #16a34a; }
.calendar-badge { width: 26px; height: 26px; display: grid; place-items: center; color: white; border-radius: 8px; background: var(--accent); font-size: 9px; font-weight: 800; box-shadow: 0 6px 12px rgba(85, 105, 255, .2); }
.upcoming-list { display: grid; gap: 16px; }
.upcoming-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.upcoming-date { width: 38px; height: 42px; display: grid; place-content: center; text-align: center; color: #ea580c; border-radius: 10px; background: #fff7ed; }
.upcoming-date.purple { color: #7c3aed; background: #f5f3ff; }.upcoming-date.green { color: #16a34a; background: #f0fdf4; }
.upcoming-date strong, .upcoming-date span { display: block; }
.upcoming-date strong { font-size: 12px; }.upcoming-date span { margin-top: -1px; font-size: 6px; font-weight: 800; letter-spacing: .5px; }
.upcoming-item > div:nth-child(2) strong, .upcoming-item > div:nth-child(2) span { display: block; }
.upcoming-item > div:nth-child(2) strong { font-size: 10px; }.upcoming-item > div:nth-child(2) span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.upcoming-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 17px; border-top: 1px solid #f0f1f5; }
.upcoming-summary span { color: var(--muted); font-size: 8px; }.upcoming-summary strong { font-size: 11px; }
.mobile-overlay { display: none; }
.flash-message { margin-bottom: 18px; padding: 13px 16px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.flash-message.success { color: #166534; border: 1px solid #bbf7d0; background: #f0fdf4; }
.flash-message.error { color: #b91c1c; border: 1px solid #fecaca; background: #fef2f2; }
.primary-action, .secondary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 0 15px; border: 0; border-radius: 11px; text-decoration: none; font-size: 11px; font-weight: 800; cursor: pointer; }
.primary-action { color: white; background: linear-gradient(135deg, var(--accent), var(--violet)); box-shadow: 0 7px 15px rgba(85,105,255,.2); }
.secondary-action { color: var(--navy); border: 1px solid #e8eaf1; background: white; }
.text-action, .danger-link { padding: 0; border: 0; background: transparent; text-decoration: none; font-size: 10px; font-weight: 800; cursor: pointer; }
.text-action { color: var(--accent); }.danger-link { color: #ef4444; }
.admin-card { margin-bottom: 20px; padding: 24px; border-radius: var(--radius); background: white; box-shadow: 0 5px 20px rgba(43,54,116,.025); }
.admin-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.admin-input { width: 100%; min-height: 42px; padding: 0 13px; color: var(--navy); border: 1px solid #e5e7eb; border-radius: 11px; outline: none; background: #fbfcff; font-size: 11px; }
.admin-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(85,105,255,.1); }.admin-input.compact { min-height: 34px; max-width: 360px; }.search-input { max-width: 380px; }
.table-scroll { overflow-x: auto; }.admin-table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-table th { padding: 0 13px 11px; color: var(--muted); border-bottom: 1px solid #eef0f5; font-size: 9px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.admin-table td { padding: 14px 13px; border-bottom: 1px solid #f4f5f8; font-size: 11px; vertical-align: middle; }.admin-table tr:last-child td { border-bottom: 0; }
.admin-table td strong, .admin-table td small { display: block; }.admin-table td small { margin-top: 4px; color: var(--muted); font-size: 8px; }.align-right { text-align: right; }
.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }.table-actions form { display: inline; }
.badge-list { display: flex; flex-wrap: wrap; gap: 5px; }.admin-badge { display: inline-block; padding: 4px 7px; border-radius: 6px; font-size: 8px; font-weight: 800; }.admin-badge.purple { color: #7c3aed; background: #f5f3ff; }.admin-badge.green { color: #15803d; background: #f0fdf4; }.admin-badge.red { color: #dc2626; background: #fef2f2; }.admin-badge.gray { color: #6b7280; background: #f3f4f6; }.admin-badge.blue { color: #2563eb; background: #eff6ff; }
.empty-state { padding: 35px !important; color: var(--muted); text-align: center; }.pagination-wrap { margin-top: 18px; font-size: 10px; }
.admin-form { display: grid; gap: 0; }.form-section, .permission-section { padding: 26px; }.section-title { margin-bottom: 20px; }.section-title h2 { font-size: 15px; }.section-title p { margin-top: 4px; color: var(--muted); font-size: 9px; }.inline-title { display: flex; align-items: center; justify-content: space-between; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }.admin-form label > span, .single-field > span { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 800; }.single-field { display: block; max-width: 520px; }.single-field > small { display: block; margin-top: 6px; color: var(--muted); font-size: 8px; }
.choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }.choice-card { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid #edf0f6; border-radius: 11px; cursor: pointer; }.choice-card input { margin-top: 2px; accent-color: var(--accent); }.choice-card strong, .choice-card small { display: block; }.choice-card strong { font-size: 10px; }.choice-card small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.permission-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.permission-choice { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #edf0f6; border-radius: 11px; font-size: 9px; cursor: pointer; }.permission-choice input { margin-top: 3px; accent-color: var(--accent); }.permission-choice span { min-width: 0; }.permission-choice strong, .permission-choice code, .permission-choice small { display: block; }.permission-choice code { width: fit-content; margin: 4px 0; padding: 3px 6px; color: #4338ca; border-radius: 5px; background: #eef2ff; font-size: 11px; }.permission-choice small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 2px 0 30px; }.inline-create { display: grid; grid-template-columns: minmax(220px,1fr) minmax(260px,1fr) auto; align-items: center; gap: 15px; }.inline-create strong, .inline-create small { display: block; }.inline-create strong { font-size: 12px; }.inline-create small { margin-top: 4px; color: var(--muted); font-size: 8px; }.inline-edit { display: flex; align-items: center; gap: 8px; }
/* Standard application typography */
.sidebar-logo h1 { font-size: 17px; }
.sidebar-logo span { font-size: 10px; }
.sidebar-section-label { font-size: 11px; }
.sidebar-item { font-size: 14px; }
.soon { font-size: 10px; }
.help-center-card h2 { font-size: 15px; }
.help-center-card p, .help-center-btn { font-size: 12px; }
.header-search input { font-size: 14px; }
.header-user-copy span { font-size: 14px; }
.header-user-copy small { font-size: 11px; }
.header-avatar { font-size: 12px; }
.page-kicker, .section-kicker { font-size: 11px; }
.page-heading h1 { font-size: 28px; }
.page-heading p { font-size: 14px; }
.date-chip { font-size: 12px; }
.stat-card-top { font-size: 14px; }
.stat-card-top small { font-size: 11px; }
.stat-card > h2 small { font-size: 12px; }
.stat-card-bottom { font-size: 11px; }
.card-info { font-size: 12px; }
.metric-row p { font-size: 12px; }
.stat-split span { font-size: 10px; }
.stat-split strong { font-size: 15px; }
.chart-header span { font-size: 13px; }
.chart-header h2 { font-size: 22px; }
.chart-header h2 small, .chart-header > small { font-size: 11px; }
.list-card-header h2 { font-size: 17px; }
.view-button { font-size: 12px; }
.transaction-main strong { font-size: 13px; }
.transaction-main span { font-size: 11px; }
.transaction-item b, .upcoming-item b { font-size: 12px; }
.calendar-badge { font-size: 11px; }
.upcoming-date strong { font-size: 14px; }
.upcoming-date span { font-size: 9px; }
.upcoming-item > div:nth-child(2) strong { font-size: 13px; }
.upcoming-item > div:nth-child(2) span { font-size: 11px; }
.upcoming-summary span { font-size: 11px; }
.upcoming-summary strong { font-size: 13px; }
.flash-message { font-size: 14px; }
.primary-action, .secondary-action { font-size: 14px; }
.text-action, .danger-link { font-size: 13px; }
.admin-input { font-size: 14px; }
.admin-table th { font-size: 11px; }
.admin-table td { font-size: 14px; }
.admin-table td small { font-size: 11px; }
.admin-badge { font-size: 11px; }
.pagination-wrap { font-size: 13px; }
.app-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--fi-border); }.pagination-summary { color: var(--fi-muted); font-size: 12px; }.pagination-summary strong { color: var(--fi-text); }.pagination-summary.single-page { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fi-border); }.pagination-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }.pagination-button,.pagination-page { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; color: var(--fi-text); border: 1px solid var(--fi-border); border-radius: 8px; background: var(--fi-surface); text-decoration: none; font-size: 11px; font-weight: 700; box-shadow: var(--fi-shadow); }.pagination-page { min-width: 34px; padding: 0 8px; }.pagination-button:hover,.pagination-page:hover { color: var(--fi-primary-hover); border-color: var(--fi-primary); background: var(--fi-primary-soft); }.pagination-page.active { color: #111827; border-color: var(--fi-primary-hover); background: var(--fi-primary); }.pagination-button.disabled { color: var(--fi-muted); cursor: not-allowed; opacity: .55; background: var(--fi-hover); box-shadow: none; }
.section-title h2 { font-size: 18px; }
.section-title p { font-size: 13px; }
.admin-form label > span, .single-field > span { font-size: 13px; }
.single-field > small { font-size: 11px; }
.choice-card strong { font-size: 13px; }
.choice-card small { font-size: 11px; }
.permission-choice { font-size: 13px; }
.inline-create strong { font-size: 14px; }
.inline-create small { font-size: 11px; }
.rbac-note { margin-bottom: 22px; padding: 16px 18px; color: #3730a3; border: 1px solid #c7d2fe; border-radius: 12px; background: #eef2ff; }
.rbac-note strong { display: block; font-size: 14px; }
.rbac-note p { margin-top: 5px; color: #4f46e5; font-size: 13px; line-height: 1.65; }
.role-note { margin-bottom: 20px; }
.permission-list { display: grid; gap: 0; }.permission-detail { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(300px,1.2fr); gap: 24px; padding: 15px 0; border-bottom: 1px solid #f0f1f5; }.permission-detail:last-child { border-bottom: 0; }.permission-detail strong, .permission-detail code { display: block; }.permission-detail strong { font-size: 14px; }.permission-detail code { width: fit-content; margin-top: 5px; padding: 3px 6px; color: #4338ca; border-radius: 5px; background: #eef2ff; font-size: 11px; }.permission-detail p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.account-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }.detail-list { display: grid; gap: 0; }.detail-list > div { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 15px; padding: 12px 0; border-bottom: 1px solid #f3f4f7; }.detail-list > div:last-child { border-bottom: 0; }.detail-list dt { color: var(--muted); font-size: 12px; }.detail-list dd { font-size: 13px; font-weight: 700; }.organization-list { display: grid; gap: 10px; margin-top: 18px; }.organization-list div { padding: 11px 12px; border: 1px solid #eef0f5; border-radius: 10px; }.organization-list strong, .organization-list small { display: block; }.organization-list strong { font-size: 13px; }.organization-list small { margin-top: 3px; color: var(--muted); font-size: 11px; }.wide-field { max-width: none; margin-top: 18px; }.admin-textarea { min-height: 100px; padding-top: 12px; resize: vertical; }

@media (max-width: 1100px) { .cards-grid { grid-template-columns: 1fr 1fr; } .cards-grid .stat-card:last-child { grid-column: span 2; } .lists-row { grid-template-columns: 1fr; } }
@media (max-width: 850px) {
    .app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: transform .25s ease; }
    .app-sidebar.open { transform: translateX(0); }
    .sidebar-close { display: block; }
    .mobile-overlay.active { position: fixed; inset: 0; z-index: 25; display: block; background: rgba(43, 54, 116, .35); backdrop-filter: blur(3px); }
    .menu-toggle { display: grid; margin-right: 10px; }
    .app-header { padding: 0 22px; }
    .app-content { padding: 8px 22px 28px; }
    .header-search { width: 260px; }
    .charts-row { grid-template-columns: 1fr; gap: 25px; }
    .chart-block, .chart-block:first-child, .chart-block:last-child { padding: 0 0 25px; border-right: 0; border-bottom: 1px solid #f0f1f5; }
    .chart-block:last-child { padding-bottom: 0; border-bottom: 0; }
    .choice-grid, .permission-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .account-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .app-header { min-height: 70px; }
    .header-search { width: auto; padding: 10px; }
    .header-search input, .header-user-copy, .header-divider { display: none; }
    .header-actions { gap: 12px; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .cards-grid { grid-template-columns: 1fr; }
    .cards-grid .stat-card:last-child { grid-column: auto; }
    .stat-card { min-height: 165px; }
    .transaction-item { align-items: flex-start; }
    .transaction-item > b { padding-top: 4px; }
    .list-card { padding: 21px; }
    .admin-form-grid, .choice-grid, .permission-grid, .inline-create { grid-template-columns: 1fr; }
    .admin-toolbar { align-items: stretch; flex-direction: column; }.search-input { max-width: none; }
    .permission-detail { grid-template-columns: 1fr; gap: 8px; }.detail-list > div { grid-template-columns: 1fr; gap: 4px; }
    .app-pagination { align-items: flex-start; flex-direction: column; }.pagination-actions { width: 100%; }.pagination-button { flex: 1; }.pagination-page { flex: 0 0 34px; }
}
.list-textarea { min-height: 190px; padding: 12px; resize: vertical; }.terms-textarea { min-height: 280px; padding: 12px; resize: vertical; }.file-input { padding: 9px; }.package-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px; }.package-summary span,.package-summary strong { display: block; }.package-summary span { color: var(--fi-muted); font-size: 11px; }.package-summary strong { margin-top: 5px; font-size: 14px; }.status-badge { display: inline-flex; width: fit-content; padding: 5px 8px; border-radius: 7px; color: var(--fi-muted); background: var(--fi-hover); font-size: 11px; font-weight: 800; }.status-pending-approval { color: var(--fi-primary-hover); background: var(--fi-primary-soft); }.status-approved,.status-released,.status-open,.status-active { color: var(--fi-success); background: var(--fi-success-soft); }.status-rejected,.status-cancelled { color: var(--fi-danger); background: var(--fi-danger-soft); }.detail-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--fi-border); border-radius: 9px; }.detail-row strong,.detail-row small { display: block; }.detail-row small { margin-top: 3px; color: var(--fi-muted); font-size: 11px; }.hash-value { overflow-wrap: anywhere; font-family: Consolas,monospace; font-size: 11px!important; }.terms-preview { padding: 16px; border: 1px solid var(--fi-border); border-radius: 10px; background: var(--fi-surface-soft); font-size: 13px; line-height: 1.75; }.facility-heading { margin-bottom: 10px; font-size: 14px; }.facility-heading.included { color: var(--fi-success); }.facility-heading.excluded { color: var(--fi-danger); }.facility-list { display: grid; gap: 8px; padding-left: 20px; color: var(--fi-muted); font-size: 13px; }.workflow-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }.reject-form { display: flex; align-items: center; gap: 8px; }.reject-form .admin-input { min-width: 260px; }.success-action { min-height: 36px; display: inline-flex; align-items: center; padding: 0 13px; color: #fff; border: 1px solid var(--fi-success-hover); border-radius: 8px; background: var(--fi-success); font-weight: 800; cursor: pointer; }.package-selection-summary { margin-top: 16px; padding: 13px; color: var(--fi-primary-hover); border: 1px solid var(--fi-primary); border-radius: 9px; background: var(--fi-primary-soft); font-size: 12px; font-weight: 700; }.agreement-check { display: flex; align-items: flex-start; gap: 11px; padding: 15px; border: 1px solid var(--fi-border); border-radius: 10px; background: var(--fi-surface-soft); cursor: pointer; }.agreement-check input { margin-top: 3px; accent-color: var(--fi-primary); }.agreement-check strong,.agreement-check small { display: block; }.agreement-check strong { font-size: 13px; }.agreement-check small { margin-top: 5px; color: var(--fi-muted); font-size: 11px; line-height: 1.5; }
@media(max-width:850px){.package-summary{grid-template-columns:repeat(2,minmax(0,1fr));}}@media(max-width:620px){.package-summary{grid-template-columns:1fr}.reject-form{align-items:stretch;flex-direction:column}.reject-form .admin-input{min-width:0}}
.agreement-empty { padding: 24px; color: var(--fi-muted); border: 1px dashed var(--fi-border); border-radius: 10px; text-align: center; background: var(--fi-surface-soft); }.digital-agreement-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }.digital-agreement-summary div { padding: 12px; border: 1px solid var(--fi-border); border-radius: 9px; background: var(--fi-surface-soft); }.digital-agreement-summary span,.digital-agreement-summary strong { display: block; }.digital-agreement-summary span { color: var(--fi-muted); font-size: 11px; }.digital-agreement-summary strong { margin-top: 4px; font-size: 13px; }.agreement-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; }.agreement-columns article,.agreement-terms { padding: 16px; border: 1px solid var(--fi-border); border-radius: 10px; background: var(--fi-surface-soft); }.agreement-columns h3,.agreement-terms h3 { margin-bottom: 10px; font-size: 14px; }.agreement-columns ul { display: grid; gap: 7px; padding-left: 20px; color: var(--fi-muted); font-size: 12px; }.agreement-terms { margin-top: 16px; }.agreement-terms div { color: var(--fi-muted); white-space: pre-wrap; font-size: 12px; line-height: 1.7; }.agreement-checkboxes { display: grid; gap: 10px; margin-top: 18px; }.final-agreement { border-color: var(--fi-primary); background: var(--fi-primary-soft); }.signature-field { display: grid; gap: 10px; margin-top: 20px; }.signature-field > div span,.signature-field > div small { display: block; }.signature-field > div span { font-size: 13px; font-weight: 800; }.signature-field > div small { margin-top: 3px; color: var(--fi-muted); font-size: 11px; }.signature-trigger { min-height: 150px; display: grid; place-items: center; overflow: hidden; color: var(--fi-muted); border: 2px dashed var(--fi-border); border-radius: 12px; background: #fff; cursor: pointer; }.signature-trigger:hover { color: var(--fi-primary-hover); border-color: var(--fi-primary); }.signature-trigger img { width: min(420px,100%); max-height: 140px; object-fit: contain; }.signature-open { overflow: hidden; }.signature-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }.signature-modal[hidden] { display: none; }.signature-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.68); backdrop-filter: blur(4px); }.signature-dialog { position: relative; width: min(760px,96vw); padding: 20px; border: 1px solid var(--fi-border); border-radius: 16px; background: var(--fi-surface); box-shadow: 0 24px 70px rgba(0,0,0,.3); }.signature-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.signature-dialog header span { color: var(--fi-primary-hover); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }.signature-dialog header h2 { margin-top: 3px; font-size: 19px; }.signature-dialog header button { width: 38px; height: 38px; color: var(--fi-muted); border: 1px solid var(--fi-border); border-radius: 9px; background: var(--fi-surface-soft); font-size: 24px; cursor: pointer; }.signature-dialog > p { margin: 12px 0; color: var(--fi-muted); font-size: 12px; }.signature-canvas-wrap { overflow: hidden; border: 1px solid var(--fi-border); border-radius: 10px; background: #fff; touch-action: none; }.signature-canvas-wrap canvas { display: block; cursor: crosshair; touch-action: none; }.signature-dialog footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }.stored-signature { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--fi-border); }.stored-signature span,.stored-signature small { display: block; }.stored-signature span { margin-bottom: 8px; font-size: 13px; font-weight: 800; }.stored-signature img { width: min(420px,100%); max-height: 180px; padding: 10px; border: 1px solid var(--fi-border); border-radius: 10px; background: #fff; object-fit: contain; }.stored-signature small { margin-top: 7px; color: var(--fi-muted); overflow-wrap: anywhere; font-family: Consolas,monospace; font-size: 10px; }
.agreement-terms-list { display: grid; gap: 10px; margin-top: 16px; }.agreement-terms-list article { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 11px; padding: 14px; border: 1px solid var(--fi-border); border-radius: 10px; background: var(--fi-surface-soft); }.agreement-terms-list article > span { width: 28px; height: 28px; display: grid; place-items: center; color: #111827; border-radius: 7px; background: var(--fi-primary); font-size: 11px; font-weight: 800; }.agreement-terms-list h3 { font-size: 13px; }.agreement-terms-list p { margin-top: 5px; color: var(--fi-muted); white-space: pre-wrap; font-size: 12px; line-height: 1.65; }
@media(max-width:700px){.digital-agreement-summary,.agreement-columns{grid-template-columns:1fr}.signature-dialog{padding:15px}.signature-canvas-wrap canvas{height:220px!important}}
.digital-clause-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.digital-clause-grid label > span { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 800; }.clause-textarea { min-height: 180px; padding: 12px; resize: vertical; line-height: 1.6; }.clause-list { display: grid; gap: 12px; }.clause-list article { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; padding: 15px; border: 1px solid var(--fi-border); border-radius: 10px; background: var(--fi-surface-soft); }.clause-list article > span { width: 30px; height: 30px; display: grid; place-items: center; color: #111827; border-radius: 8px; background: var(--fi-primary); font-size: 12px; font-weight: 800; }.clause-list h3 { font-size: 14px; }.clause-list p { margin-top: 6px; color: var(--fi-muted); font-size: 12px; line-height: 1.7; }
@media(max-width:700px){.digital-clause-grid{grid-template-columns:1fr}}
.package-terms-textarea { min-height: 620px; padding: 15px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.7; }
.rich-editor { overflow: hidden; border: 1px solid var(--fi-border); border-radius: 11px; background: var(--fi-surface); }.rich-editor:focus-within { border-color: var(--fi-primary); box-shadow: 0 0 0 3px rgba(245,158,11,.12); }.rich-editor-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 8px; border-bottom: 1px solid var(--fi-border); background: var(--fi-surface-soft); }.rich-editor-toolbar button,.editor-format-select { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; color: var(--fi-text); border: 1px solid var(--fi-border); border-radius: 7px; background: var(--fi-surface); font-size: 12px; cursor: pointer; }.rich-editor-toolbar button:hover,.editor-format-select:hover { color: var(--fi-primary-hover); border-color: var(--fi-primary); background: var(--fi-primary-soft); }.editor-format-select { min-width: 115px; }.toolbar-divider { width: 1px; height: 24px; margin: 0 3px; background: var(--fi-border); }.rich-editor-surface { min-height: 620px; max-height: 70vh; overflow-y: auto; padding: 22px 24px; color: var(--fi-text); outline: none; background: var(--fi-surface); font-family: Georgia, "Times New Roman", serif; font-size: 14px; line-height: 1.75; }.rich-editor-surface:empty::before { content: "Tulis fasilitas dan seluruh poin kesepakatan paket di sini..."; color: var(--fi-muted); }.rich-editor-surface h2 { margin: 24px 0 10px; font-size: 22px; }.rich-editor-surface h3 { margin: 20px 0 8px; font-size: 18px; }.rich-editor-surface h4 { margin: 16px 0 7px; font-size: 15px; }.rich-editor-surface p { margin: 0 0 10px; }.rich-editor-surface ol,.rich-editor-surface ul { margin: 8px 0 12px; padding-left: 28px; }.rich-editor-surface li { margin-bottom: 5px; }.rich-editor-surface blockquote { margin: 14px 0; padding: 10px 14px; border-left: 4px solid var(--fi-primary); background: var(--fi-primary-soft); }.rich-editor-surface table,.formatted-statement table { width: 100%; margin: 12px 0; border-collapse: collapse; }.rich-editor-surface th,.rich-editor-surface td,.formatted-statement th,.formatted-statement td { padding: 8px 10px; border: 1px solid var(--fi-border); text-align: left; }.rich-editor-surface th,.formatted-statement th { background: var(--fi-surface-soft); }.rich-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; color: var(--fi-muted); border-top: 1px solid var(--fi-border); background: var(--fi-surface-soft); font-size: 10px; }.formatted-statement { color: var(--fi-text); font-family: Georgia, "Times New Roman", serif; font-size: 13px; line-height: 1.75; }.formatted-statement h2 { margin: 22px 0 10px; font-size: 21px; }.formatted-statement h3 { margin: 18px 0 8px; font-size: 17px; }.formatted-statement h4 { margin: 16px 0 7px; font-size: 14px; }.formatted-statement p { margin-bottom: 10px; }.formatted-statement ol,.formatted-statement ul { margin: 8px 0 12px; padding-left: 27px; }.formatted-statement li { margin-bottom: 5px; }.formatted-statement blockquote { margin: 12px 0; padding: 10px 14px; border-left: 4px solid var(--fi-primary); background: var(--fi-primary-soft); }.formatted-statement hr { margin: 18px 0; border: 0; border-top: 1px solid var(--fi-border); }.agreement-terms .formatted-statement { white-space: normal; }
.rich-editor-field { display: block; }.rich-editor-field > .field-label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 800; }.rich-editor-field > small { display: block; margin-top: 7px; color: var(--fi-muted); font-size: 11px; }.rich-editor-surface[contenteditable="true"] { cursor: text; user-select: text; -webkit-user-select: text; }.rich-editor-surface:focus { background: var(--fi-surface); }
.statement-template-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px;padding:14px 16px;border:1px solid var(--fi-primary);border-radius:11px;background:var(--fi-primary-soft)}.statement-template-heading .field-label,.statement-template-heading small{display:block}.statement-template-heading .field-label{font-size:13px;font-weight:800}.statement-template-heading small{margin-top:4px;color:var(--fi-muted);font-size:11px;line-height:1.5}.statement-template-heading .secondary-action{flex-shrink:0}.statement-template-heading button:disabled{cursor:wait;opacity:.65}
@media(max-width:700px){.rich-editor-surface{min-height:480px;padding:16px}.rich-editor-toolbar{gap:4px}.toolbar-divider{display:none}.rich-editor-toolbar button{padding:0 8px}.statement-template-heading{align-items:stretch;flex-direction:column}.statement-template-heading .secondary-action{width:100%}}

.pilgrim-list-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:24px 0 14px}.pilgrim-list-heading h2{font-size:18px}.pilgrim-list-heading p{margin-top:4px;color:var(--fi-muted);font-size:11px}.pilgrim-list{display:grid;gap:18px}.pilgrim-card{overflow:hidden;border:1px solid var(--fi-border);border-radius:13px;background:var(--fi-surface);box-shadow:var(--fi-shadow-sm)}.pilgrim-card-header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 20px;border-bottom:1px solid var(--fi-border);background:var(--fi-surface-soft)}.pilgrim-card-header span{color:var(--fi-primary-hover);font-size:10px;font-weight:800}.pilgrim-card-header h2{margin-top:3px;font-size:15px}.pilgrim-card-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.payer-choice{display:flex;align-items:center;gap:7px;color:var(--fi-muted);font-size:11px;font-weight:700}.payer-choice input{accent-color:var(--fi-primary)}.pilgrim-card-body{padding:22px}.pilgrim-card-body>h3{margin:22px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--fi-border);font-size:13px}.pilgrim-card-body>h3:first-child{margin-top:0}.copy-member-actions{margin-top:8px}.booking-total{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:15px;padding:15px 18px;border:1px solid var(--fi-primary);border-radius:11px;background:var(--fi-primary-soft)}.booking-total span,.booking-total strong,.booking-total small{display:block}.booking-total span,.booking-total small{color:var(--fi-muted);font-size:11px}.booking-total strong{font-size:16px}.booking-group-summary{margin-bottom:20px}.group-member-list{display:grid;gap:8px;margin-top:18px}.group-member{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px 13px;color:var(--fi-text);border:1px solid var(--fi-border);border-radius:9px;text-decoration:none}.group-member>span{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:var(--fi-hover);font-size:11px;font-weight:800}.group-member strong,.group-member small{display:block}.group-member small{margin-top:2px;color:var(--fi-muted);font-size:10px}.group-member b{color:var(--fi-success);font-size:10px}.group-member.current{border-color:var(--fi-primary);background:var(--fi-primary-soft)}.signature-evidence-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);gap:22px;align-items:start}.signature-prominent{margin-top:0}.signature-prominent img{width:100%;min-height:180px;object-fit:contain;border:1px solid var(--fi-border);border-radius:10px;background:#fff}.signature-missing{display:grid;min-height:180px;place-items:center;color:var(--fi-muted);border:1px dashed var(--fi-border);border-radius:10px;background:var(--fi-surface-soft)}.signature-canvas-wrap canvas{touch-action:none;user-select:none;-webkit-user-select:none}
@media(max-width:700px){.pilgrim-list-heading,.pilgrim-card-header,.booking-total{align-items:stretch;flex-direction:column}.pilgrim-card-actions{align-items:flex-start}.pilgrim-card-body{padding:16px}.signature-evidence-grid{grid-template-columns:1fr}.group-member{grid-template-columns:30px minmax(0,1fr)}.group-member b{grid-column:2}.pilgrim-list-heading .primary-action{width:100%}}

/* Reusable CRUD popup */
.modal-open { overflow: hidden; }
.app-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; }
.app-modal.open { display: flex; }
.app-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .58); backdrop-filter: blur(4px); }
.app-modal-dialog { position: relative; width: min(1080px, 96vw); height: min(860px, 92vh); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--fi-border); border-radius: 16px; background: var(--fi-surface); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); animation: modal-enter .18s ease-out; }
.app-modal-header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 20px; border-bottom: 1px solid var(--fi-border); background: var(--fi-surface); }
.app-modal-header h2 { margin-top: 3px; font-size: 18px; }.app-modal-kicker { color: var(--fi-primary-hover); font-size: 10px; font-weight: 800; letter-spacing: 1.3px; }
.app-modal-close { width: 38px; height: 38px; display: grid; place-items: center; color: var(--fi-muted); border: 1px solid var(--fi-border); border-radius: 9px; background: var(--fi-surface-soft); font-size: 25px; line-height: 1; cursor: pointer; }.app-modal-close:hover { color: var(--fi-danger); border-color: var(--fi-danger); background: var(--fi-danger-soft); }
.app-modal-frame { width: 100%; flex: 1; border: 0; background: var(--fi-bg); }
.modal-page { min-height: 100vh; overflow-y: auto; background: var(--fi-bg); }.modal-page-content { padding: 22px; }.modal-page .page-heading { display: none; }.modal-page .admin-card { box-shadow: none; }.modal-page .form-actions { position: sticky; bottom: -22px; z-index: 5; margin: 0 -22px -22px; padding: 16px 22px; border-top: 1px solid var(--fi-border); background: var(--fi-surface); }
@keyframes modal-enter { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 620px) { .app-modal { padding: 0; }.app-modal-dialog { width: 100vw; height: 100vh; border: 0; border-radius: 0; }.modal-page-content { padding: 16px; }.modal-page .form-actions { bottom: -16px; margin: 0 -16px -16px; padding: 14px 16px; } }
@media (max-width: 420px) { .app-header, .app-content { padding-left: 16px; padding-right: 16px; } .logout-btn { display: none; } .upcoming-item { grid-template-columns: 38px minmax(0, 1fr); } .upcoming-item > b { grid-column: 2; } }

/* Filament-inspired theme and semantic actions */
:root {
    color-scheme: light;
    --fi-bg: #f9fafb;
    --fi-surface: #ffffff;
    --fi-surface-soft: #f9fafb;
    --fi-hover: #f3f4f6;
    --fi-text: #111827;
    --fi-muted: #6b7280;
    --fi-border: #e5e7eb;
    --fi-border-soft: #f3f4f6;
    --fi-primary: #f59e0b;
    --fi-primary-hover: #d97706;
    --fi-primary-soft: #fffbeb;
    --fi-info: #2563eb;
    --fi-info-hover: #1d4ed8;
    --fi-info-soft: #eff6ff;
    --fi-success: #16a34a;
    --fi-success-hover: #15803d;
    --fi-success-soft: #f0fdf4;
    --fi-danger: #dc2626;
    --fi-danger-hover: #b91c1c;
    --fi-danger-soft: #fef2f2;
    --fi-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .08);
    --bg: var(--fi-bg);
    --white: var(--fi-surface);
    --navy: var(--fi-text);
    --muted: var(--fi-muted);
    --accent: var(--fi-primary);
    --violet: var(--fi-primary-hover);
    --radius: 14px;
}

[data-theme="dark"] {
    color-scheme: dark;
    --fi-bg: #030712;
    --fi-surface: #111827;
    --fi-surface-soft: #0f172a;
    --fi-hover: #1f2937;
    --fi-text: #f9fafb;
    --fi-muted: #9ca3af;
    --fi-border: #374151;
    --fi-border-soft: #1f2937;
    --fi-primary: #fbbf24;
    --fi-primary-hover: #f59e0b;
    --fi-primary-soft: #2b210a;
    --fi-info: #60a5fa;
    --fi-info-hover: #3b82f6;
    --fi-info-soft: #102342;
    --fi-success: #4ade80;
    --fi-success-hover: #22c55e;
    --fi-success-soft: #0d2b1b;
    --fi-danger: #f87171;
    --fi-danger-hover: #ef4444;
    --fi-danger-soft: #351519;
    --fi-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .18);
}

html, body { background: var(--fi-bg); }
body { color: var(--fi-text); transition: color .2s ease, background-color .2s ease; }
.app-sidebar { border-right: 1px solid var(--fi-border); background: var(--fi-surface); box-shadow: none; }
.app-header { border-bottom: 1px solid transparent; }
.sidebar-logo-icon { background: linear-gradient(135deg, var(--fi-primary), var(--fi-primary-hover)); box-shadow: 0 6px 14px rgba(245, 158, 11, .24); }
.sidebar-item.active { color: var(--fi-primary-hover); border-right-color: transparent; background: var(--fi-primary-soft); }
.sidebar-item.active svg { color: var(--fi-primary); }
.soon { color: var(--fi-muted); background: var(--fi-hover); }
.help-center-card { border-color: var(--fi-border); background: var(--fi-surface-soft); box-shadow: none; }
.help-center-btn, .menu-toggle, .header-search, .date-chip { color: var(--fi-text); border: 1px solid var(--fi-border); background: var(--fi-surface); box-shadow: var(--fi-shadow); }
.header-search input { color: var(--fi-text); }
.header-divider { background: var(--fi-border); }
.theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; padding: 0; color: var(--fi-muted); border: 1px solid var(--fi-border); border-radius: 9px; background: var(--fi-surface); box-shadow: var(--fi-shadow); cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.theme-toggle:hover { color: var(--fi-primary-hover); border-color: var(--fi-primary); background: var(--fi-primary-soft); }
.theme-icon { width: 18px; height: 18px; grid-area: 1 / 1; }
.moon-icon { display: none; }
[data-theme="dark"] .sun-icon { display: none; }
[data-theme="dark"] .moon-icon { display: block; }
.charts-row, .list-card, .admin-card { border: 1px solid var(--fi-border); background: var(--fi-surface); box-shadow: var(--fi-shadow); }
.chart-block, .transaction-item, .upcoming-summary, .admin-table th, .admin-table td, .permission-detail, .detail-list > div { border-color: var(--fi-border-soft); }
.mini-bars i { background: var(--fi-hover); }
.admin-input { color: var(--fi-text); border-color: var(--fi-border); background: var(--fi-surface-soft); }
.admin-input:focus { border-color: var(--fi-primary); box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }
.choice-card, .permission-choice, .organization-list div { border-color: var(--fi-border); background: var(--fi-surface); }
.choice-card:hover, .permission-choice:hover { border-color: var(--fi-primary); background: var(--fi-primary-soft); }
.permission-choice code, .permission-detail code { color: var(--fi-primary-hover); background: var(--fi-primary-soft); }
.rbac-note { color: var(--fi-info); border-color: var(--fi-info); background: var(--fi-info-soft); }
.rbac-note p { color: var(--fi-info); }

.primary-action, .secondary-action, .text-action, .danger-link, .view-button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    text-decoration: none;
    line-height: 1;
    transition: color .15s, background-color .15s, border-color .15s, transform .15s;
}
.primary-action { color: #111827; border-color: var(--fi-primary-hover); background: var(--fi-primary); }
.primary-action:hover { border-color: var(--fi-primary-hover); background: var(--fi-primary-hover); transform: translateY(-1px); }
.secondary-action, .view-button { color: var(--fi-text); border-color: var(--fi-border); background: var(--fi-surface); }
.secondary-action:hover, .view-button:hover { border-color: var(--fi-muted); background: var(--fi-hover); }
.text-action { color: var(--fi-info); border-color: var(--fi-info); background: var(--fi-info-soft); }
.text-action:hover { color: #ffffff; border-color: var(--fi-info-hover); background: var(--fi-info-hover); }
.danger-link { color: var(--fi-danger); border-color: var(--fi-danger); background: var(--fi-danger-soft); }
.danger-link:hover { color: #ffffff; border-color: var(--fi-danger-hover); background: var(--fi-danger-hover); }
.inline-edit .text-action { flex-shrink: 0; }
.table-actions { justify-content: flex-start; gap: 8px; }
.table-actions form { display: inline-flex; }
.package-filters { align-items: stretch; flex-wrap: wrap; }
.package-filter-row { display: flex; align-items: center; gap: 10px; }
.package-filter-search { flex: 1 1 340px; }.package-filter-search .search-input { flex: 1; }
.package-filter-selects { flex: 0 1 auto; }.package-filter-actions { display: flex; align-items: center; gap: 8px; }
.package-filters .admin-input.compact { max-width: 220px; }
.package-mobile-list { display: none; }
.package-mobile-card { overflow: hidden; border: 1px solid var(--fi-border); border-radius: 14px; background: var(--fi-surface); box-shadow: var(--fi-shadow); }
.package-mobile-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--fi-border-soft); background: var(--fi-surface-soft); }
.package-mobile-card h2 { font-size: 15px; line-height: 1.35; letter-spacing: -.15px; }.package-mobile-card header p { margin-top: 5px; color: var(--fi-muted); font-size: 11px; letter-spacing: .2px; }
.package-mobile-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; }.package-mobile-details > div { padding: 14px 18px; }.package-mobile-details > div:first-child { border-right: 1px solid var(--fi-border-soft); }.package-mobile-details span,.package-mobile-details strong,.package-mobile-details small { display: block; }.package-mobile-details span { color: var(--fi-muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }.package-mobile-details strong { margin-top: 6px; font-size: 14px; }.package-mobile-details small { margin-top: 4px; color: var(--fi-muted); font-size: 11px; line-height: 1.4; }
.package-mobile-actions { flex-wrap: nowrap; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--fi-border-soft); background: var(--fi-surface-soft); }.package-mobile-actions > * { flex: 1; }.package-mobile-actions .text-action,.package-mobile-actions .danger-link { min-width: 0; min-height: 38px; justify-content: center; text-align: center; font-size: 12px; }.package-mobile-actions form { display: flex; flex: 1; }.package-mobile-actions form .danger-link { width: 100%; }
.responsive-list-filters { align-items: stretch; flex-wrap: wrap; }.responsive-filter-row { display: flex; align-items: center; gap: 10px; }.responsive-filter-search { flex: 1 1 340px; }.responsive-filter-search .search-input { flex: 1; }.responsive-filter-selects { flex: 0 1 auto; }.responsive-filter-actions { display: flex; align-items: center; gap: 8px; }.responsive-list-filters .admin-input.compact { max-width: 220px; }
.responsive-mobile-list { display: none; }.responsive-mobile-card { overflow: hidden; border: 1px solid var(--fi-border); border-radius: 13px; background: var(--fi-surface); box-shadow: var(--fi-shadow-sm); }.responsive-mobile-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px; border-bottom: 1px solid var(--fi-border-soft); }.responsive-mobile-card h2 { font-size: 14px; line-height: 1.4; }.responsive-mobile-card header p { margin-top: 4px; color: var(--fi-muted); font-size: 10px; }.responsive-mobile-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 15px; }.responsive-mobile-details span,.responsive-mobile-details strong,.responsive-mobile-details small { display: block; }.responsive-mobile-details span { color: var(--fi-muted); font-size: 10px; }.responsive-mobile-details strong { margin-top: 4px; font-size: 13px; line-height: 1.4; }.responsive-mobile-details small { margin-top: 3px; color: var(--fi-muted); font-size: 10px; line-height: 1.4; }.responsive-mobile-actions { flex-wrap: nowrap; padding: 12px 15px; border-top: 1px solid var(--fi-border-soft); }.responsive-mobile-actions > * { flex: 1; }.responsive-mobile-actions .text-action,.responsive-mobile-actions .danger-link { min-width: 0; justify-content: center; text-align: center; }
.package-summary { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.package-form-section{padding:28px}.package-form-section>.section-title{margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--fi-border)}.package-form-groups{display:grid;gap:24px}.package-form-group{padding:26px;border:1px solid var(--fi-border);border-radius:14px;background:var(--fi-surface-soft);transition:border-color .2s ease,box-shadow .2s ease}.package-form-group:focus-within{border-color:rgba(245,158,11,.3);box-shadow:0 0 0 3px rgba(245,158,11,.06)}.package-form-group>header{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--fi-border-soft)}.package-form-group>header>span{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;color:#111827;border-radius:10px;background:var(--fi-primary);font-size:14px;font-weight:900;box-shadow:0 4px 10px rgba(245,158,11,.22)}.package-form-group>header h3{font-size:16px;letter-spacing:-.2px}.package-form-group>header p{margin-top:5px;color:var(--fi-muted);font-size:12px;line-height:1.55}.package-form-group .admin-form-grid{margin:0;gap:20px}.package-form-group label>small{display:block;margin-top:6px;color:var(--fi-muted);font-size:10px;line-height:1.5}.package-identity-grid{grid-template-columns:minmax(0,1.4fr) minmax(200px,1fr) minmax(130px,.5fr)}.package-schedule-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fee-level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.fee-level-grid label{padding:18px;border:1px solid var(--fi-border);border-radius:12px;background:var(--fi-surface);transition:border-color .2s,box-shadow .2s}.fee-level-grid label:hover,.fee-level-grid label:focus-within{border-color:rgba(245,158,11,.35);box-shadow:0 2px 8px rgba(245,158,11,.1)}.form-info-note{margin-top:15px;padding:12px 14px;color:var(--fi-info);border:1px solid var(--fi-info);border-radius:10px;background:var(--fi-info-soft);font-size:11px;line-height:1.6}
.package-batch-summary small { display: block; margin-top: 5px; color: var(--fi-muted); font-size: 11px; line-height: 1.5; }
.action-edit { color: #b45309; border-color: #f59e0b; background: #fffbeb; }
.action-edit:hover { color: #111827; border-color: #d97706; background: #f59e0b; }
.action-disabled { color: var(--fi-muted); border-color: var(--fi-border); background: var(--fi-hover); cursor: not-allowed; opacity: .72; }
.workflow-action { min-width: 174px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; transition: color .15s, background-color .15s, border-color .15s, transform .15s; }
.workflow-action:hover { transform: translateY(-1px); }
.workflow-approve { color: #ffffff; border-color: var(--fi-success); background: var(--fi-success); }
.workflow-approve:hover { border-color: var(--fi-success-hover); background: var(--fi-success-hover); }
.workflow-reject { color: #ffffff; border-color: var(--fi-danger); background: var(--fi-danger); }
.workflow-reject:hover { border-color: var(--fi-danger-hover); background: var(--fi-danger-hover); }
.confirmation-dialog[hidden] { display: none; }
.confirmation-dialog { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }
.confirmation-dialog-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .58); backdrop-filter: blur(4px); }
.confirmation-dialog-panel { position: relative; width: min(520px, 100%); padding: 22px; border: 1px solid var(--fi-border); border-radius: 14px; background: var(--fi-surface); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); }
.confirmation-dialog-panel header,.confirmation-dialog-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.confirmation-dialog-panel h2 { margin-top: 3px; font-size: 18px; }.confirmation-dialog-panel > p { margin: 16px 0; color: var(--fi-muted); font-size: 13px; }.confirmation-dialog-panel label > span { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 800; }.confirmation-dialog-panel textarea { min-height: 140px; resize: vertical; }.confirmation-dialog-panel footer { justify-content: flex-end; margin-top: 18px; }.confirmation-dialog-close { width: 36px; height: 36px; display: grid; place-items: center; color: var(--fi-muted); border: 1px solid var(--fi-border); border-radius: 8px; background: var(--fi-surface-soft); font-size: 24px; line-height: 1; cursor: pointer; }
.form-actions .primary-action { color: #111827; }
.flash-message.success { color: var(--fi-success); border-color: var(--fi-success); background: var(--fi-success-soft); }
.flash-message.error { color: var(--fi-danger); border-color: var(--fi-danger); background: var(--fi-danger-soft); }
.admin-badge.green { color: var(--fi-success); background: var(--fi-success-soft); }
.admin-badge.red { color: var(--fi-danger); background: var(--fi-danger-soft); }
.admin-badge.blue { color: var(--fi-info); background: var(--fi-info-soft); }
.admin-badge.gray { color: var(--fi-muted); background: var(--fi-hover); }
.admin-badge.purple { color: var(--fi-primary-hover); background: var(--fi-primary-soft); }
.generated-code { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 14px 16px; border: 1px solid var(--fi-primary); border-radius: 10px; background: var(--fi-primary-soft); }
.generated-code span { color: var(--fi-muted); font-size: 12px; font-weight: 700; }.generated-code strong { color: var(--fi-primary-hover); font-size: 15px; }.generated-code small { margin-left: auto; color: var(--fi-muted); font-size: 11px; }.generated-code.pending strong { font-style: italic; }
.location-title { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--fi-border); }.location-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.admin-input:disabled { color: var(--fi-muted); cursor: not-allowed; opacity: .7; background: var(--fi-hover); }
.map-field { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--fi-border); }.office-map { width: 100%; height: 390px; overflow: hidden; border: 1px solid var(--fi-border); border-radius: 12px; background: var(--fi-hover); z-index: 1; }.office-map.detail-map { height: 340px; }.coordinate-grid { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 12px; margin-top: 14px; }.coordinate-input { font-family: Consolas, monospace; }.map-external-link { white-space: nowrap; }.map-status { margin-top: 9px; color: var(--fi-danger); font-size: 12px; }.map-status.selected { color: var(--fi-success); }.leaflet-container { font-family: 'Plus Jakarta Sans', sans-serif; }.leaflet-control-attribution { color: #374151; }
.toggle-field { display: block; }.toggle-control { min-height: 42px; display: flex !important; align-items: center; gap: 11px; cursor: pointer; }.toggle-control > input { position: absolute; opacity: 0; pointer-events: none; }.toggle-track { position: relative; width: 42px; height: 24px; display: block !important; flex-shrink: 0; border: 1px solid var(--fi-border); border-radius: 999px; background: var(--fi-hover); transition: .2s; }.toggle-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; display: block !important; border-radius: 50%; background: var(--fi-muted); transition: .2s; }.toggle-control > input:checked + .toggle-track { border-color: var(--fi-success); background: var(--fi-success); }.toggle-control > input:checked + .toggle-track .toggle-thumb { left: 21px; background: #fff; }.toggle-copy strong, .toggle-copy small { display: block; }.toggle-copy strong { font-size: 13px; }.toggle-copy small { margin-top: 2px; color: var(--fi-muted); font-size: 11px; font-weight: 400; }
.office-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.office-choice { align-items: center; justify-content: space-between; gap: 12px; cursor: default; }.office-assignment { min-width: 0; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }.office-assignment input { margin-top: 3px; accent-color: var(--fi-primary); }.primary-office-option { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 8px; border: 1px solid var(--fi-border); border-radius: 7px; color: var(--fi-muted); background: var(--fi-surface-soft); cursor: pointer; }.primary-office-option:has(input:checked) { color: var(--fi-primary-hover); border-color: var(--fi-primary); background: var(--fi-primary-soft); }.primary-office-option input { accent-color: var(--fi-primary); }.primary-office-option span { margin: 0; font-size: 11px; font-weight: 800; }

@media (max-width: 620px) {
    .theme-toggle { width: 36px; height: 36px; }
    .table-actions { min-width: 140px; flex-wrap: wrap; }
    .generated-code { align-items: flex-start; flex-direction: column; }.generated-code small { margin-left: 0; }
    .location-grid { grid-template-columns: 1fr; }
    .office-choice-grid { grid-template-columns: 1fr; }
    .coordinate-grid { grid-template-columns: 1fr; }.office-map { height: 320px; }
}
@media (max-width: 620px) {
    .package-filters { display: grid; gap: 10px; }
    .package-filter-row { display: grid; gap: 8px; }
    .package-filter-search { grid-template-columns: minmax(0,1fr); }
    .package-filter-selects { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .package-filters .admin-input.compact,.package-filters .search-input { min-width: 0; max-width: none; }
    .package-filter-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
    .package-filter-actions .secondary-action,.package-filter-actions .text-action { width: 100%; justify-content: center; }
    #packageResults .table-scroll { display: none; }
    .package-mobile-list { display: grid; gap: 14px; }
    .page-heading .primary-action { width: 100%; }
    .admin-card { padding: 16px; }
    .responsive-list-filters { display: grid; gap: 10px; }
    .responsive-filter-row { display: grid; gap: 8px; }.responsive-filter-search { grid-template-columns: minmax(0,1fr); }.responsive-filter-selects { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .responsive-list-filters .admin-input.compact,.responsive-list-filters .search-input { min-width: 0; max-width: none; }
    .responsive-filter-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }.responsive-filter-actions .secondary-action,.responsive-filter-actions .text-action { width: 100%; justify-content: center; }
    .responsive-table-wrap { display: none; }.responsive-mobile-list { display: grid; gap: 12px; }
    .package-form-section{padding:18px}.package-form-section>.section-title{margin-bottom:20px;padding-bottom:16px}.package-form-group{padding:18px}.package-form-group>header{margin-bottom:16px;padding-bottom:14px}.package-identity-grid,.fee-level-grid,.package-schedule-grid{grid-template-columns:1fr}
}