* {
    box-sizing: border-box;
}

:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --border: #e5e7eb;
    --text: #111827;
    --muted: #6b7280;
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --success: #15803d;
    --danger: #dc2626;
    --sidebar: #111827;
    --sidebar-muted: #9ca3af;
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    --radius: 16px;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled,
.disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

a {
    text-decoration: none;
}

.muted {
    color: var(--muted);
    margin: 0;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 250px 1fr;
}

.sidebar {
    background: var(--sidebar);
    color: #fff;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-brand {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 8px 8px 28px;
}

.sidebar-brand strong,
.sidebar-brand span {
    display: block;
}

.sidebar-brand strong {
    font-size: 14px;
}

.sidebar-brand span {
    color: var(--sidebar-muted);
    font-size: 11px;
    margin-top: 3px;
}

.brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: 18px;
}

.sidebar-nav {
    display: grid;
    gap: 6px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sidebar-muted);
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 14px;
    transition: 0.2s ease;
}

.nav-item:hover,
.nav-item.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar-bottom {
    margin-top: auto;
}

.main-content {
    min-width: 0;
}

.topbar {
    height: 70px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-title {
    font-weight: 700;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
}

.avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ede9fe;
    color: var(--primary);
}

.mobile-menu {
    display: none;
    border: 0;
    background: transparent;
    font-size: 22px;
}

.content {
    padding: 34px;
    max-width: 1500px;
    margin: 0 auto;
}

.welcome-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.eyebrow {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    margin: 0 0 8px;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 7px;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.15;
}

h2 {
    margin-bottom: 4px;
    font-size: 18px;
}

h3 {
    margin-bottom: 6px;
}

.btn {
    border: 0;
    border-radius: 10px;
    padding: 11px 16px;
    font-weight: 700;
    transition: 0.2s ease;
}

.btn-primary {
    color: #fff;
    background: var(--primary);
}

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

.btn-secondary {
    color: var(--text);
    background: #eef2f7;
}

.btn-full {
    width: 100%;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.stat-card,
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}

.stat-card {
    padding: 20px;
}

.stat-label {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 10px;
}

.stat-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.stat-meta {
    color: var(--muted);
    font-size: 12px;
    margin-top: 9px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.panel {
    padding: 22px;
    min-height: 260px;
}

.panel-large {
    min-height: 350px;
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 22px;
}

.status-pill {
    background: #eef2ff;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    padding: 6px 9px;
    border-radius: 999px;
}

.empty-state {
    height: 230px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--border);
    border-radius: 12px;
}

.empty-state.compact {
    height: 150px;
    padding: 25px;
}

.empty-state p {
    max-width: 420px;
    margin-bottom: 0;
}

.empty-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef2ff;
    color: var(--primary);
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 12px;
}

.timer-display {
    font-size: clamp(36px, 5vw, 54px);
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 18px 0;
}

.timer-actions {
    display: flex;
    gap: 10px;
}

.timer-status {
    font-size: 13px;
    color: var(--muted);
    margin: 14px 0 0;
}

.note-placeholder {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    background: var(--surface-soft);
}

.auth-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 20px;
}

.auth-card {
    width: min(100%, 430px);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 34px;
    border-radius: 20px;
}

.auth-card .brand-mark {
    margin-bottom: 18px;
}

.auth-card h1 {
    font-size: 28px;
    margin-bottom: 7px;
}

.auth-form {
    margin-top: 24px;
    display: grid;
    gap: 10px;
}

.auth-form label {
    font-size: 13px;
    font-weight: 700;
    margin-top: 5px;
}

.auth-form input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 13px;
    outline: none;
}

.auth-form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.alert {
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 13px;
    margin-top: 18px;
}

.alert-error {
    background: #fef2f2;
    color: var(--danger);
}

.alert-success {
    background: #f0fdf4;
    color: var(--success);
}

.auth-help {
    color: var(--muted);
    font-size: 12px;
    margin: 18px 0 0;
}

code {
    background: #f1f5f9;
    padding: 2px 5px;
    border-radius: 5px;
}


/* =========================================
   Client Cards
   Desktop: 3 columns
   Tablet: 2 columns
   Mobile: 1 column
   ========================================= */

.client-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    align-items: stretch;
}

/* Individual card */
.client-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-sizing: border-box;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.client-card:hover {
    transform: translateY(-3px);
    border-color: #d7dcf0;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.09);
}

/* Card top */
.client-card-top {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Avatar */
.client-avatar {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    border-radius: 12px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 16px;
    font-weight: 700;
}

/* Client name */
.client-card-top h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Company */
.client-card-top p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status */
.client-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

.client-status-active {
    background: #dcfce7;
    color: #15803d;
}

.client-status-inactive {
    background: #f3f4f6;
    color: #6b7280;
}

/* Statistics */
.client-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 20px;
}

.client-stats > div {
    min-width: 0;
    padding: 12px 8px;
    text-align: center;
    background: #f8fafc;
    border: 1px solid #edf0f4;
    border-radius: 10px;
}

.client-stats strong {
    display: block;
    margin-bottom: 4px;
    color: #111827;
    font-size: 19px;
    line-height: 1.1;
    font-weight: 700;
}

.client-stats span {
    display: block;
    color: #64748b;
    font-size: 10px;
    line-height: 1.2;
}

/* Actions stay at bottom of equal-height cards */
.client-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 18px;
}

.client-card-actions .btn {
    flex: 1 1 auto;
    min-width: 80px;
    text-align: center;
}

.client-card-actions .text-link {
    white-space: nowrap;
}

.client-card-actions form {
    margin: 0;
}

.danger-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.danger-button:hover {
    color: #b91c1c;
}

/* =========================================
   Tablet
   2 cards per row
   ========================================= */

@media (max-width: 1024px) {
    .client-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

/* =========================================
   Mobile
   1 card per row
   ========================================= */

@media (max-width: 640px) {
    .client-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .client-card {
        padding: 17px;
        border-radius: 14px;
    }

    .client-card-top {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .client-status {
        grid-column: 2;
        justify-self: start;
        margin-top: -4px;
    }

    .client-stats {
        gap: 7px;
    }

    .client-card-actions {
        gap: 8px;
    }
}

/* Small phones */
@media (max-width: 380px) {
    .client-stats {
        grid-template-columns: 1fr;
    }

    .client-stats > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .client-stats strong {
        margin: 0;
    }
}

@media (max-width: 1050px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 250px;
        z-index: 30;
    }

    .sidebar.open {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }

    .topbar {
        padding: 0 18px;
    }

    .content {
        padding: 22px 16px;
    }

    .welcome-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .topbar-user > span {
        display: none;
    }

    .auth-card {
        padding: 25px;
    }
}

/* Phase 2 additions */
.text-link{color:var(--primary);font-size:13px;font-weight:700}
.date-toolbar{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:18px}
.date-form,.filters{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.date-form label,.filters label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}
.date-form input,.filters input,.filters select, select{border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:10px 12px;min-height:42px;outline:none}
.progress-summary{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.progress-summary strong{color:var(--primary)}
.progress-track{width:100%;height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin:0 0 18px}
.progress-fill{height:100%;background:var(--primary);border-radius:inherit;transition:width .25s ease}
.task-list{display:grid;gap:10px}
.task-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:13px;padding:14px;border:1px solid var(--border);background:var(--surface-soft);border-radius:12px}
.task-row.is-completed{opacity:.7}
.task-row.is-completed .task-title{text-decoration:line-through}
.task-check{width:28px;height:28px;border:2px solid #cbd5e1;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800}
.task-check.checked{background:var(--success);border-color:var(--success)}
.task-main{min-width:0}
.task-title{font-weight:700;word-break:break-word}
.task-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px;color:var(--muted);font-size:11px}
.task-meta span{padding-right:8px;border-right:1px solid var(--border)}
.task-meta span:last-child{border-right:0;padding-right:0}
.priority-badge{font-size:11px;font-weight:800;padding:6px 9px;border-radius:999px}
.priority-high{background:#fef2f2;color:#b91c1c}.priority-medium{background:#fff7ed;color:#c2410c}.priority-low{background:#f0fdf4;color:#15803d}
.task-actions{display:flex;gap:9px;white-space:nowrap}.task-actions a{font-size:12px;font-weight:700;color:var(--primary)}.task-actions .danger-link{color:var(--danger)}
.filter-panel{min-height:auto;margin-bottom:18px}.filters .filter-actions{display:flex;align-items:center;gap:12px}.narrow-content{max-width:1000px}.form-panel{min-height:auto;max-width:900px}
.task-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-group{display:grid;gap:7px}.form-group label{font-size:13px;font-weight:700}.form-group input,.form-group textarea,.form-group select{width:100%;border:1px solid var(--border);border-radius:10px;padding:12px 13px;background:var(--surface);outline:none}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1)}.form-group textarea{resize:vertical}.full{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:5px}
@media(max-width:900px){.task-row{grid-template-columns:auto minmax(0,1fr) auto}.task-actions{grid-column:2/-1}}
@media(max-width:650px){.date-toolbar{align-items:flex-start;flex-direction:column}.task-form{grid-template-columns:1fr}.task-row{grid-template-columns:auto minmax(0,1fr)}.priority-badge{grid-column:2;justify-self:start}.task-actions{grid-column:2}}

/* Phase 3: persistent time tracking */
.timer-task-label{display:block;font-size:12px;font-weight:700;margin-bottom:7px}
.timer-task-select{width:100%;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:11px 12px;outline:none}
.timer-task-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.timer-running{background:#dcfce7!important;color:#15803d!important}

/* Phase 4: Notes, tomorrow plan and recurring tasks */
.note-content{background:var(--surface-soft);border:1px solid var(--border);border-radius:12px;padding:22px;line-height:1.7;min-height:220px;white-space:normal}
.note-preview{background:var(--surface-soft);border:1px solid var(--border);border-radius:12px;padding:16px;line-height:1.55;max-height:180px;overflow:auto}
.daily-note-editor{width:100%;resize:vertical;border:1px solid var(--border);border-radius:12px;padding:16px;background:var(--surface);outline:none;line-height:1.6}
.daily-note-editor:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.tomorrow-list{display:grid;gap:9px}
.mini-task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--border);background:var(--surface-soft);border-radius:10px;font-size:13px}
.mini-task.is-completed{opacity:.65}.mini-task.is-completed span:nth-child(2){text-decoration:line-through}
.task-check.small{width:23px;height:23px;font-size:12px}
.weekday-grid{display:flex;flex-wrap:wrap;gap:8px}
.weekday-option{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:9px;padding:8px 10px;background:var(--surface-soft);font-size:12px;cursor:pointer}
.weekday-option:has(input:checked){background:#eef2ff;border-color:#c7d2fe;color:var(--primary)}
.weekday-option input{accent-color:var(--primary)}
.recurring-inactive{opacity:.6}
.alert-success{margin-bottom:18px}
@media(max-width:650px){.mini-task{grid-template-columns:auto minmax(0,1fr)}.mini-task .priority-badge{grid-column:2;justify-self:start}}

/* Phase 5: Reports & Analytics */
.reports-content{max-width:1600px}
.report-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.report-toolbar label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}
.report-toolbar select,.report-toolbar input{min-height:42px;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:10px 12px;outline:none}
.report-toolbar select:focus,.report-toolbar input:focus{border-color:var(--primary)}
.report-nav{display:flex;justify-content:center;align-items:center;gap:12px;margin:-5px 0 20px}
.today-link{font-weight:800;color:var(--primary)}
.report-stats{margin-bottom:18px}
.comparison-strip{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.comparison-strip>div{display:flex;align-items:center;gap:12px}
.comparison-label{font-size:12px;color:var(--muted)}
.delta-positive{color:var(--success)}
.delta-negative{color:var(--danger)}
.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}
.chart-panel{min-height:330px}
.chart-large{grid-column:span 2}
.bar-chart{height:235px;display:flex;align-items:stretch;gap:clamp(6px,1vw,16px);padding-top:12px}
.bar-column{min-width:0;flex:1;display:grid;grid-template-rows:20px 1fr 22px;gap:4px;text-align:center}
.bar-value{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-area{display:flex;align-items:flex-end;justify-content:center;min-height:0;border-bottom:1px solid var(--border);background:linear-gradient(to top,rgba(148,163,184,.04),transparent)}
.bar{width:min(34px,75%);min-height:2px;background:var(--primary);border-radius:7px 7px 2px 2px;transition:height .3s ease}
.bar-task{background:#10b981}
.bar-label{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.category-list{display:grid;gap:17px;margin-top:4px}
.category-item{display:grid;gap:7px}
.category-header{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.category-header span{color:var(--text);font-weight:600}
.category-header strong{color:var(--muted)}
.category-track{height:8px;border-radius:999px;background:#eef2f7;overflow:hidden}
.category-fill{height:100%;background:var(--primary);border-radius:inherit}
.health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:22px}
.health-card{padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}
.health-card strong{display:block;font-size:27px;line-height:1;margin-bottom:6px}
.health-card span{font-size:11px;color:var(--muted)}
.health-progress-track{height:10px;background:#eef2f7;border-radius:999px;overflow:hidden}
.health-progress-fill{height:100%;background:var(--success);border-radius:inherit}
.health-caption{font-size:12px;margin:9px 0 0}
.rate-pill{display:inline-flex;padding:5px 8px;border-radius:999px;background:#eef2ff;color:var(--primary);font-weight:800;font-size:11px}
.breakdown-table-wrap{overflow:auto}
.breakdown-table{width:100%;border-collapse:collapse;min-width:620px}
.breakdown-table th,.breakdown-table td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--border);font-size:13px}
.breakdown-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.breakdown-table tbody tr:last-child td{border-bottom:0}
@media(max-width:1000px){.chart-large{grid-column:span 1}.report-grid{grid-template-columns:1fr}}
@media(max-width:700px){.welcome-row{gap:16px}.report-toolbar{width:100%}.report-toolbar>div{flex:1;min-width:130px}.comparison-strip{align-items:flex-start;flex-direction:column}.report-nav{justify-content:space-between}.bar-chart{gap:5px}.bar{width:65%}}