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

:root {
    --iw-navy: #111317;
    --iw-blue: #2b4e85;
    --iw-sky: #e9f8fd;
    --iw-accent: #4bc3ed;
    --iw-gold: #e2a93b;
    --iw-ink: #263348;
}

body { color: var(--iw-ink); font-family: 'Montserrat', sans-serif; }
h1, h2, h3, h4, h5, h6, .sidebar-heading { font-family: 'Moderustic', 'Montserrat', sans-serif; }
body { background: #f6f8fc; }
.bg-gradient-primary { background: linear-gradient(160deg, var(--iw-navy) 0%, #2b4e85 100%) !important; }
.sidebar-brand-icon { color: var(--iw-gold); }
.sidebar-brand-text { letter-spacing: .02em; }
.btn-primary { background-color: var(--iw-blue); border-color: var(--iw-blue); }
.btn-primary:hover { background-color: #2945bc; border-color: #2945bc; }
.text-primary { color: var(--iw-blue) !important; }
.border-left-primary { border-left-color: var(--iw-blue) !important; }
.border-left-warning { border-left-color: var(--iw-gold) !important; }
.auth-shell { min-height: 100vh; background: #f4f6fb; }
.auth-aside { min-height: 100vh; background-color: #07182f; background-image: url('brand/login-technology-background.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; }
.auth-mark { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: rgba(255,255,255,.12); color: var(--iw-gold); font-size: 1.75rem; }
.auth-card { border: 0; border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(35,48,75,.10); }
.auth-support-copy { color: #5d687a; }
.auth-support-copy > p:first-child { font-weight: 500; }
.auth-brand-content { width: 100%; max-width: 1060px; }
.brand-logo-login { display: block; width: 72%; max-width: 300px; height: auto; margin-right: auto; margin-left: auto; object-fit: contain; object-position: center; }
.brand-logo-sidebar { display: block; object-fit: contain; }
.brand-logo-sidebar-full { width: 253px; height: auto; aspect-ratio: 253 / 73; object-position: center; }
.brand-footer-content { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; }
.brand-footer-content a { color: #2b4e85; font-weight: 700; }
.brand-credit { color: #667085; font-size: .78rem; }
.public-brand-footer { padding: 1.5rem 1rem; color: #667085; font-size: .8rem; text-align: center; }
.form-control, .custom-select { border-radius: .55rem; min-height: 45px; border-color: #d9dfeb; }
.form-control:focus, .custom-select:focus { border-color: #8ea2f4; box-shadow: 0 0 0 .2rem rgba(52,85,219,.12); }
.form-group label { color: #48556a; font-size: .82rem; font-weight: 700; }
.card { border: 0; border-radius: .8rem; }
.card-header { border-bottom-color: #edf0f5; }
.btn { border-radius: .5rem; font-weight: 600; }
.table { color: #3d485b; }
.table thead th { border-top: 0; border-bottom: 1px solid #dfe4ee; color: #667085; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background: #f7f9ff; }
.table td { vertical-align: middle; }
.table-responsive { border-radius: .75rem; }
.dataTables_filter input { min-height: 36px; border: 1px solid #d9dfeb; border-radius: .5rem; padding: .35rem .65rem; }
.metric-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--iw-sky); color: var(--iw-blue); }
.dashboard-metric-card { transition: transform .18s ease, box-shadow .18s ease; }
.dashboard-metric-card:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.5rem rgba(35,48,75,.1) !important; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: #718096; }
.empty-state { border: 1px dashed #d6dce8; border-radius: .8rem; background: #fbfcff; }
.plan-pill { background: #eaf7ef; color: #247a44; border-radius: 999px; font-size: .75rem; font-weight: 700; padding: .35rem .65rem; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-head div { padding: .75rem; text-align: center; font-size: .75rem; font-weight: 700; text-transform: uppercase; background: #f8f9fc; }
.calendar-day { min-height: 130px; padding: .55rem; border-top: 1px solid #e3e6f0; border-right: 1px solid #e3e6f0; background: white; }
.calendar-muted { background: #f8f9fc; color: #a5adba; }
.calendar-number { font-weight: 700; margin-bottom: .35rem; }
.calendar-event { display: block; padding: .35rem; margin-bottom: .3rem; border-radius: .35rem; background: #edf2ff; color: #263d70; font-size: .75rem; line-height: 1.25; }
.calendar-event:hover { text-decoration: none; background: #dde6ff; }
.calendar-event-public { border-left: 3px solid #1cc88a; }
.calendar-event small { display: block; margin-top: .2rem; }
.volunteer-calendar-event { border-left: 3px solid var(--iw-blue); }
.volunteer-calendar-print-heading { display: none; }
.public-church-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; }
.dashboard-church-logo { width: 120px; height: 90px; max-width: 100%; object-fit: contain; object-position: left center; }
.public-form-logo { width: 110px; height: 90px; object-fit: contain; }
.public-page { display: flex; min-height: 100vh; flex-direction: column; }
.public-page main { flex: 1 0 auto; width: 100%; }
.global-search { position: relative; width: min(42vw, 520px); }
.global-search .form-control { min-height: 38px; }
.global-search-results { position: absolute; z-index: 1060; top: calc(100% + .6rem); left: 0; right: 0; max-height: min(70vh, 520px); overflow-y: auto; border: 0; }
.global-search-result { padding: .75rem 1rem; border-bottom: 1px solid #edf0f5; }
.global-search-result:last-child { border-bottom: 0; }
.global-search-result:hover, .global-search-result.active { background: var(--iw-sky); }
.global-search-result .metric-icon { width: 38px; height: 38px; }
.min-width-0 { min-width: 0; }
.quick-create-toggle::after { display: none; }
.quick-create-menu { min-width: 18rem; }
.module-help-toggle { white-space: nowrap; }
.module-help-modal { overflow: hidden; border: 0; border-radius: .85rem; box-shadow: 0 1rem 3rem rgba(31,45,75,.18); }
.module-help-icon { display: inline-grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; color: white; background: var(--iw-blue); border-radius: 50%; }
.module-help-purpose { padding: 1rem 1.15rem; background: #f3f7ff; border-left: 4px solid var(--iw-blue); border-radius: .35rem; }
.module-help-steps { padding-left: 1.35rem; }
.module-help-steps li { padding-left: .2rem; line-height: 1.55; }
.module-help-steps li + li { margin-top: .7rem; }
.bulk-action-bar { position: sticky; z-index: 20; top: .75rem; }
.bulk-check-column { width: 42px; text-align: center; }
.bulk-record-checkbox, .bulk-select-all { width: 17px; height: 17px; }
.ajax-form-alert { position: sticky; z-index: 5; top: 0; }
.sidebar .collapse-inner .collapse-item { align-items: center; }
.calendar-number-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.calendar-add-event { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #7b8495; }
.calendar-add-event:hover { color: var(--iw-blue); background: var(--iw-sky); text-decoration: none; }
.agenda-date { min-width: 74px; text-align: center; border-right: 1px solid #edf0f5; }
.status-filter-card { color: inherit; border: 1px solid transparent; transition: border-color .15s ease, transform .15s ease; }
.status-filter-card:hover { color: inherit; border-color: rgba(52,85,219,.25); text-decoration: none; transform: translateY(-1px); }
.status-filter-card.active { border-color: var(--iw-blue); background: var(--iw-sky); }
.status-filter-card.active .text-muted { color: var(--iw-blue) !important; }
.compact-metrics .card-body { min-width: 110px; }
@media (min-width: 768px) {
    .sidebar:not(.toggled) { width: 18rem !important; }
    .sidebar:not(.toggled) .nav-item .nav-link { width: 18rem; }
    .sidebar:not(.toggled) .sidebar-brand { height: 73px; }
}
.sidebar.toggled .brand-logo-sidebar-full { display: block; width: 84px; height: auto; aspect-ratio: 253 / 73; }
.iw-table-export-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; margin-bottom: .75rem; }
.iw-table-export-actions .btn { min-width: 76px; }
.record-drawer .modal-dialog { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100%); max-width: 760px; height: 100%; margin: 0; transform: translateX(100%) !important; transition: transform .25s ease-out !important; }
.record-drawer.show .modal-dialog { transform: translateX(0) !important; }
.record-drawer .modal-content { height: 100%; border: 0; border-radius: 1rem 0 0 1rem; }
.record-drawer .modal-body { overflow-y: auto; background: #f8f9fc; }
.record-drawer .modal-footer { background: white; }
.mobile-bottom-nav { position: fixed; z-index: 1040; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: .4rem max(.5rem, env(safe-area-inset-right)) calc(.4rem + env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); background: rgba(255,255,255,.97); border-top: 1px solid #e3e7ef; box-shadow: 0 -.35rem 1.2rem rgba(31,45,75,.08); backdrop-filter: blur(12px); }
.mobile-bottom-nav a, .mobile-bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: .25rem; color: #7b8495; font-size: .68rem; border: 0; background: transparent; }
.mobile-bottom-nav i { margin-bottom: .2rem; font-size: 1rem; }
.mobile-bottom-nav a.active, .mobile-bottom-nav a:hover, .mobile-bottom-nav button:hover { color: var(--iw-blue); text-decoration: none; }
@media (max-width: 767.98px) {
    .auth-aside { min-height: clamp(190px, 34vh, 300px); background-position: center; }
    .brand-logo-login { width: 76%; max-width: 280px; }
}
@media (max-width: 767.98px) {
    .brand-logo-sidebar-full { display: block; width: 84px; height: auto; aspect-ratio: 253 / 73; }
}
@media (max-width: 767.98px) { .calendar-card { overflow-x: auto; } .calendar-grid { min-width: 760px; } }
@media print {
    @page { size: landscape; margin: .35in; }
    body, .public-page { background: white !important; }
    #accordionSidebar, .topbar, .sticky-footer, .mobile-bottom-nav, .volunteer-calendar-actions, .volunteer-schedule-list { display: none !important; }
    #content-wrapper, #content, main.container-fluid, .public-page main { width: 100% !important; margin: 0 !important; padding: 0 !important; }
    .volunteer-calendar-print-heading { display: block; }
    .volunteer-calendar { overflow: visible !important; border: 0; box-shadow: none !important; }
    .volunteer-calendar .calendar-grid { min-width: 0; }
    .volunteer-calendar .calendar-day { min-height: 105px; break-inside: avoid; }
    .volunteer-calendar .calendar-event { color: #263d70 !important; background: #edf2ff !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
@media (max-width: 767.98px) { .global-search { width: auto; flex: 1 1 auto; } .global-search-results { position: fixed; top: 4.5rem; left: .75rem; right: .75rem; } .global-search .form-control { width: 5rem; } }
@media (max-width: 767.98px) {
    #content-wrapper { padding-bottom: 70px; }
    .record-drawer .modal-dialog { width: 100%; max-width: 100%; }
    .record-drawer .modal-content { border-radius: 0; }
    .dataTables_scrollHead { display: none; }
    .dataTables_scrollBody { overflow: visible !important; }
    table.iw-responsive-table, table.iw-responsive-table tbody, table.iw-responsive-table tr, table.iw-responsive-table td { display: block; width: 100% !important; }
    table.iw-responsive-table thead { display: none; }
    table.iw-responsive-table tbody tr { margin-bottom: .8rem; padding: .35rem .8rem; background: white; border: 1px solid #e5e9f1; border-radius: .7rem; box-shadow: 0 .2rem .65rem rgba(35,48,75,.05); }
    table.iw-responsive-table tbody td { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid #eff2f6; text-align: right; white-space: normal; }
    table.iw-responsive-table tbody td:first-child { border-top: 0; }
    table.iw-responsive-table tbody td::before { content: attr(data-label); flex: 0 0 42%; color: #667085; font-size: .72rem; font-weight: 700; text-align: left; text-transform: uppercase; }
    table.iw-responsive-table tbody td[colspan] { display: block; padding: 2rem 1rem; text-align: center; }
    table.iw-responsive-table tbody td[colspan]::before { display: none; }
}