:root {
    --f7-theme-color: #0d6efd;
}

/* --- Global Settings --- */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    overscroll-behavior: none; 
}

/* --- Toolbar Container (Fixed Heights & Safe Area) --- */
.toolbar.toolbar-bottom {
    background-color: #ffffff !important; 
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    height: calc(55px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    z-index: 1000 !important;
}

.toolbar-inner {
    padding: 0 !important;
    background-color: #ffffff !important;
    display: flex !important;
    height: 55px !important; /* Keep fixed to avoid expansion */
    align-items: center;
}

/* --- Navigation Links --- */
.toolbar-inner .link {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important; /* Changed to center for better balance */
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important; /* Prevents overflow */
}

/* --- Icon & Text Styling --- */
.icon-small {
    font-size: 20px !important;
    margin-top: 2px !important; /* Reduced slightly to prevent clipping */
    margin-bottom: 4px !important; 
    line-height: 1 !important;
}

.toolbar-inner .link span {
    font-size: 10px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* --- Active State (Non-Layout Breaking) --- */
.link.active {
    color: var(--f7-theme-color) !important;
    background-color: rgba(0, 0, 0, 0.05); /* Added slight tint */
}

.link.active i {
    color: var(--f7-theme-color) !important;
}

/* --- Page & Task List --- */
.page-content {
    padding-bottom: 80px !important; /* Increased to ensure last item is visible */
}

#task-list {
    min-height: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Tasks page ─────────────────────────────────────────────────────────── */

/* Mobile: show cards, hide table */
.task-table-wrap { display: none; }
.task-cards-wrap { display: block; }

/* Desktop (≥768 px): show table, hide cards */
@media (min-width: 768px) {
    .task-table-wrap { display: block; }
    .task-cards-wrap { display: none; }
}

.task-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0 16px;
    width: calc(100% - 32px);
}
.task-table th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid #e2e8f0;
    color: #64748b;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.task-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.task-table tr.row-done td { opacity: 0.55; }
.task-prop { font-weight: 600; color: #1e293b; }
.task-date-cell { color: #64748b; white-space: nowrap; }
.task-action-btn { min-width: 76px; }
.task-done-check { color: #22c55e; font-size: 18px; font-weight: 700; }
.task-group-header { cursor: pointer; background-color: #f1f5f9; }
.task-group-header:hover { background-color: #e2e8f0; }
.task-group-header td { padding: 8px 12px; border-bottom: 2px solid #cbd5e1; }
.task-group-toggle { display: flex; align-items: center; gap: 8px; }

/* Stat cards active state */
.stat-active { outline: 2.5px solid #0d6efd; }

/* Mobile card layout */
.task-card { margin: 8px 16px; border-radius: 12px; }
.task-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.task-property { font-weight: 600; color: #1e293b; font-size: 15px; }
.task-date { color: #64748b; font-size: 13px; margin-top: 2px; }
.task-actions { margin-top: 12px; }

/* Month header in accordion */
.month-header { background: #f8fafc; font-weight: 600; }

/* Loading spinner for task action buttons */
@keyframes task-spin { to { transform: rotate(360deg); } }
.task-btn-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: task-spin 0.65s linear infinite;
    vertical-align: middle;
}

/* ── Unit modal (sheet) — shared across home + calendar ──────────────────── */
.umod-sheet .sheet-modal-inner { border-radius: 10px 10px 0 0; }
.umod-wrap { padding: 0 0 calc(env(safe-area-inset-bottom) + 16px); }
.umod-handle { width: 36px; height: 4px; background: #cbd5e1; border-radius: 2px; margin: 10px auto 4px; }
.umod-header { padding: 16px 20px 12px; border-bottom: 1px solid #f1f5f9; }
.umod-title { font-size: 18px; font-weight: 900; color: #0f172a; letter-spacing: -.4px; margin-bottom: 4px; }
.umod-status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 700; }
.umod-status-clean    { background: rgba(46,139,87,.12);   color: #2E8B57; }
.umod-status-dirty    { background: rgba(192,57,43,.12);   color: #C0392B; }
.umod-status-cleaning { background: rgba(244,208,63,.18);  color: #b7950b; border: 1.5px solid rgba(244,208,63,.4); }
.umod-status-occupied { background: rgba(31,111,235,.12);  color: #1F6FEB; }
.umod-status-blocked  { background: rgba(127,140,141,.12); color: #7F8C8D; border: 1.5px solid rgba(127,140,141,.3); }
.umod-status-approval { background: rgba(230,126,34,.12);  color: #E67E22; border: 1.5px solid rgba(230,126,34,.3); }
.umod-res-pill { background: rgba(21,101,192,.10); color: #1565c0; text-decoration: none; }
.umod-cleaning-type-pill { background: #eef2ff; color: #4f46e5; border: 1.5px solid #c7d2fe; }
.umod-res-pill:active { opacity: .7; }
.umod-body { padding: 16px 20px; }
.umod-info-text { font-size: 14px; color: #64748b; line-height: 1.6; }
.umod-section-title { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.umod-cleaning-by { display: flex; align-items: center; gap: 12px; background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: 8px; padding: 12px 14px; }
.umod-cleaning-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; background: #16a34a; flex-shrink: 0; }
.umod-cleaning-name { font-size: 15px; font-weight: 700; color: #0f172a; }
.umod-cleaning-label { font-size: 12px; color: #16a34a; font-weight: 600; margin-top: 1px; }
.umod-cleaners-list { display: flex; flex-direction: column; gap: 8px; }
.umod-cleaner-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 12px 14px; cursor: pointer; transition: border-color .12s, background .12s; -webkit-tap-highlight-color: transparent; }
.umod-cleaner-card:hover, .umod-cleaner-card:active { border-color: #4f46e5; background: #f5f3ff; }
.umod-cleaner-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; background: #4f46e5; flex-shrink: 0; }
.umod-cleaner-name { font-size: 15px; font-weight: 700; color: #0f172a; }
.umod-cleaner-sub { font-size: 12px; color: #64748b; margin-top: 1px; }
.umod-avail-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; display: inline-block; margin-right: 4px; }
.umod-avail-dot.busy { background: #94a3b8; }
.umod-cleaning-now-badge { display: inline-block; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 700; color: #c2410c; letter-spacing: .02em; vertical-align: middle; }
.umod-no-cleaners { text-align: center; padding: 24px 16px; color: #94a3b8; font-size: 14px; font-weight: 500; }
.umod-no-cleaners i { font-size: 36px; display: block; margin-bottom: 8px; color: #cbd5e1; }
.umod-waiting-badge { display: inline-flex; align-items: center; gap: 6px; background: #fef9c3; border: 1.5px solid #fde68a; border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #92400e; font-weight: 600; margin-top: 4px; }
.umod-err { display: none; background: #fee2e2; border: 1px solid #fca5a5; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #991b1b; margin-bottom: 14px; }
.uac-approve-btn { display: flex; align-items: center; gap: 8px; background: #16a34a; color: #fff; border: none; border-radius: 8px; padding: 13px 18px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity .15s; }
.uac-approve-btn:active { opacity: .8; }
.uac-unassign-btn { display: flex; align-items: center; gap: 8px; background: #fee2e2; color: #b91c1c; border: 1.5px solid #fca5a5; border-radius: 8px; padding: 13px 18px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity .15s; }
.uac-unassign-btn:active { opacity: .8; }
.umod-owner-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.umod-action-btn { display: flex; align-items: center; gap: 10px; border: 1.5px solid; border-radius: 8px; padding: 13px 16px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity .15s; -webkit-tap-highlight-color: transparent; }
.umod-action-btn:active { opacity: .75; }
.umod-action-btn i { font-size: 18px; flex-shrink: 0; }
.umod-action-occupied { background: rgba(31,111,235,.10);  color: #1F6FEB; border-color: rgba(31,111,235,.30); }
.umod-action-dirty    { background: rgba(192,57,43,.10);   color: #C0392B; border-color: rgba(192,57,43,.30); }
.umod-action-inactive { background: rgba(127,140,141,.10); color: #7F8C8D; border-color: rgba(127,140,141,.30); }
.umod-times-row { display: flex; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9; }
.umod-time-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.umod-time-label { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.umod-time-inp { width: 100%; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 7px 10px; font-size: 14px; font-weight: 600; color: #0f172a; background: #f8fafc; font-family: inherit; cursor: pointer; transition: border-color .12s; }
.umod-time-inp:focus { outline: none; border-color: #1565c0; background: #fff; }
.umod-time-hint { font-size: 10px; color: #94a3b8; }