/* ==========================================================================
   Time Saving Solutions: the one stylesheet for every page (app/ui package)
   Served as {{ ui_css_url() }} with a content hash, so a new deploy is never cached.
   Contents
     1. Tokens            colours shared by every section
     2. Site              reset, nav, buttons, cards, forms, alerts, pages
     3. Components        badges, status, tables, page head, side menu, side panel, field hints
     4. Project costing   priority plan (was costing.css)
     5. Invoice document  finance/invoice_view.html (was inline)
     6. Invoice editor    finance/invoice_form.html (was inline)
   Shared building blocks in templates use these: see app/ui/README.md.
   ========================================================================== */

/* 1. Tokens */
:root {
    --ui-primary: #4361ee;
    --ui-primary-dark: #3a56d4;
    --ui-ink: #1a1a2e;
    --ui-danger: #e63946;
    --ui-page: #f0f2f5;
    --ui-line: #e8eaf0;
    --ui-muted: #666;
    --panel-width: clamp(420px, 46vw, 860px);
}

/* 2. Site */
/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--ui-page);
    color: var(--ui-ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--ui-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Navbar */
.navbar {
    background: var(--ui-ink);
    padding: 0 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative;
    z-index: 100;
}

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.nav-brand {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
}
.nav-brand:hover { text-decoration: none; color: #4cc9f0; }
.nav-brand-dim {
    color: #8888aa;
    font-weight: 400;
    font-size: 1rem;
}
.nav-brand-user {
    color: #4cc9f0;
    font-weight: 400;
    font-size: 1rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.nav-links > a { color: #ccc; }
.nav-links > a:hover { color: #fff; text-decoration: none; }

.nav-user {
    color: #4cc9f0;
    font-weight: 500;
}

/* Hamburger toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: auto;
    z-index: 110;
}
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
    position: relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
}
.nav-toggle-icon::before { top: -7px; }
.nav-toggle-icon::after { top: 7px; }
.nav-toggle.active .nav-toggle-icon { background: transparent; }
.nav-toggle.active .nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}
.nav-toggle.active .nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

.nav-spacer { display: none; }

/* Nav Dropdown */
.nav-dropdown {
    position: relative;
}
.nav-dropdown-trigger {
    color: #ccc;
    cursor: pointer;
    padding: 0.5rem 0;
}
.nav-dropdown-trigger:hover { color: #fff; text-decoration: none; }

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    min-width: 200px;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
}
.nav-dropdown:hover .nav-dropdown-menu {
    display: block;
}
.nav-dropdown-menu a {
    display: block;
    padding: 0.6rem 1.2rem;
    color: var(--ui-ink);
    font-size: 0.9rem;
}
.nav-dropdown-menu a:hover {
    background: var(--ui-page);
    text-decoration: none;
    color: var(--ui-primary);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

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

.btn-outline { background: transparent; border: 1px solid #ccc; color: #ccc; }
.btn-outline:hover { border-color: #fff; color: #fff; }

.btn-outline-dark { background: transparent; border: 1px solid var(--ui-ink); color: var(--ui-ink); }
.btn-outline-dark:hover { background: var(--ui-ink); color: #fff; }

.btn-danger { background: var(--ui-danger); color: #fff; }
.btn-danger:hover { background: #c5303c; color: #fff; }

.btn-lg { padding: 0.75rem 2rem; font-size: 1rem; }
.btn-block { width: 100%; text-align: center; padding: 0.75rem; font-size: 1rem; }
.btn-sm { padding: 0.3rem 0.8rem; font-size: 0.8rem; }

/* Container */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem;
    flex: 1;
}

/* Project Costing */
.costing-page { display: grid; gap: 1.25rem; }
.costing-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.costing-header h1 { margin-bottom: 0.25rem; }
.muted { color: #666; }
.costing-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; }
.costing-toggle { display: inline-flex; border: 1px solid #d6d9e0; border-radius: 8px; overflow: hidden; background: #fff; }
.costing-toggle button, .costing-toggle a { border: 0; padding: 0.65rem 0.9rem; background: #fff; color: var(--ui-ink); font-weight: 700; cursor: pointer; text-decoration: none; }
.costing-toggle button.active, .costing-toggle a.active { background: var(--ui-ink); color: #fff; }
.costing-mode-toggle a { min-width: 96px; text-align: center; }
.costing-selectors, .costing-summary, .costing-task-form { display: grid; gap: 1rem; }
.costing-selectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.costing-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.costing-summary > div { background: #fff; border: 1px solid #e2e4ea; border-radius: 8px; padding: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.costing-summary span { display: block; color: #666; font-size: 0.9rem; }
.costing-summary strong { display: block; margin-top: 0.25rem; font-size: 1.5rem; }
.costing-summary small { display: block; margin-top: 0.15rem; color: #666; font-size: 0.82rem; }
.costing-form-card summary { cursor: pointer; font-weight: 700; }
.costing-task-form { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1rem; align-items: end; }
.costing-notes { grid-column: span 3; }
.costing-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 1rem; align-items: start; overflow-x: auto; padding-bottom: 0.5rem; }
.costing-column { min-height: 360px; background: #e9edf5; border: 1px solid #d6dbe6; border-radius: 8px; padding: 0.8rem; }
.costing-column h2 { margin-bottom: 0.75rem; color: #444; font-size: 0.85rem; letter-spacing: 0; }
.costing-card-list { display: grid; gap: 0.75rem; min-height: 260px; }
.costing-card { background: #fff; border: 1px solid #dde1ea; border-radius: 8px; padding: 0.9rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: grab; }
.costing-card.dragging { opacity: 0.55; }
.costing-card-title { font-weight: 800; margin-bottom: 0.3rem; }
.costing-card-package { color: var(--ui-primary); font-weight: 700; font-size: 0.9rem; margin-bottom: 0.5rem; }
.costing-card p { color: #555; font-size: 0.9rem; margin-bottom: 0.7rem; }
.costing-card-cost { font-size: 1.15rem; font-weight: 800; }
.costing-lock-note { display: inline-flex; margin-top: 0.55rem; padding: 0.18rem 0.45rem; border: 1px solid #d8dee9; border-radius: 999px; color: #555; font-size: 0.78rem; font-weight: 800; }
.costing-sprint-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.costing-card[draggable="false"] { cursor: default; background: #f8f9fb; }
.is-customer-view .costing-card { cursor: grab; }
.costing-edit { margin-top: 0.75rem; border-top: 1px solid #eceff5; padding-top: 0.6rem; }
.costing-edit summary { cursor: pointer; color: var(--ui-primary); font-weight: 700; }
.costing-edit form { display: grid; gap: 0.55rem; margin-top: 0.65rem; }
.costing-edit label { display: grid; gap: 0.25rem; font-size: 0.86rem; font-weight: 700; }
.costing-actions { display: flex; gap: 0.5rem; align-items: center; }
.costing-breakdown { max-width: 760px; }
.costing-breakdown-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid #eceff5; }
.costing-breakdown-heading { font-size: 1.15rem; font-weight: 800; }
.costing-package-total { padding-top: 1rem; font-weight: 800; }
.costing-task-total { padding-left: 1.5rem; color: #444; }
.costing-unallocated { margin-top: 0.75rem; font-weight: 800; color: #2f7d4f; border-bottom: 0; }


.priority-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    align-items: start;
}
.priority-column {
    min-height: 420px;
    background: #eef1f6;
    border: 1px solid #d8dee9;
    border-radius: 8px;
    padding: 0.8rem;
}
.priority-overflow { background: #fff2f0; border-color: #f2beb8; }
.priority-column-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.priority-column-head h2 {
    font-size: 0.9rem;
    line-height: 1.25;
    color: #333;
}
.priority-column-head span {
    white-space: nowrap;
    font-weight: 800;
    color: var(--ui-primary);
}
.priority-card-list {
    display: grid;
    gap: 0.75rem;
    min-height: 320px;
}
.priority-card { cursor: grab; }

/* Hero */
.hero {
    text-align: center;
    padding: 4rem 1rem 2rem;
}
.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
    color: var(--ui-ink);
    line-height: 1.2;
}
.hero-subtitle {
    font-size: 1.6rem;
    color: var(--ui-primary);
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.hero-text {
    font-size: 1.15rem;
    color: #555;
    max-width: 650px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}
.hero-buttons { display: flex; gap: 1rem; justify-content: center; }
.hero-buttons .btn-outline { color: var(--ui-primary); border-color: var(--ui-primary); }

/* Time Saved Counter */
.time-saved-section {
    text-align: center;
    padding: 3rem 1rem;
    margin: 2rem 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.time-saved-section h2 {
    font-size: 1.4rem;
    color: var(--ui-ink);
    margin-bottom: 1.5rem;
}
.time-counter {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 1rem;
}
.time-unit { display: flex; flex-direction: column; align-items: center; }
.time-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--ui-primary);
    line-height: 1;
}
.time-label {
    font-size: 0.9rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.3rem;
}
.time-saved-detail {
    font-size: 0.85rem;
    color: #999;
    margin-top: 1rem;
}

/* Features */
.features-section {
    padding: 2rem 0 3rem;
}
.feature-card {
    text-align: center;
    padding: 2rem 1.5rem;
}
.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Auth */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.auth-card {
    background: #fff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 420px;
}
.auth-card h2 { margin-bottom: 1.5rem; text-align: center; }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.4rem; font-weight: 500; font-size: 0.9rem; }

.form-control {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.2s;
}
.form-control:focus { outline: none; border-color: var(--ui-primary); box-shadow: 0 0 0 3px rgba(67,97,238,0.1); }

.form-check { display: flex; align-items: center; gap: 0.5rem; }
.form-check label { margin-bottom: 0; }

.form-error { color: var(--ui-danger); font-size: 0.8rem; display: block; margin-top: 0.3rem; }

.auth-link { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: #666; }

/* Alerts */
.alert {
    padding: 0.8rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-danger { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-warning { background: #fff8e1; color: #5d4600; border: 1px solid #ffe8a3; }
.alert-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* Dashboard */
.dashboard h1 { margin-bottom: 0.5rem; }
.dashboard > p { color: #666; margin-bottom: 2rem; }

.dashboard-link-card {
    display: block;
    color: var(--ui-ink);
    transition: transform 0.2s, box-shadow 0.2s;
}
.dashboard-link-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    text-decoration: none;
}

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }

.card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
/* Space between stacked cards; grids space their cards with gap instead. */
.card + .card { margin-top: 1.5rem; }
:where(.card-grid, .admin-access-grid, .meal-plan-grid, .invoice-form-grid, .pc-form-grid) > .card + .card { margin-top: 0; }
.integration-item { padding: 0.9rem 0; border-top: 1px solid #eee; }
.integration-item p { margin: 0.5rem 0 0; }
.integration-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.integration-head h3 { margin: 0; }
.integration-choice { padding: 0.5rem 0; }
.integration-item details { margin-top: 0.5rem; }
.integration-item summary { cursor: pointer; color: #555; }
.integration-form { margin-top: 0.75rem; max-width: 520px; }

/* Customer connection setup: numbered steps */
.connect-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.connect-head h2 { margin: 0; }
.connect-intro { margin: 0.5rem 0 0; }
.connect-scopes { margin: 0.25rem 0 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.connect-steps { list-style: none; counter-reset: connect; margin: 1.5rem 0 0; padding: 0; }
.connect-step { counter-increment: connect; position: relative; padding: 0 0 1.5rem 2.75rem; }
.connect-step:last-child { padding-bottom: 0; }
.connect-step::before { content: counter(connect); position: absolute; left: 0; top: -0.2rem; display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ui-primary); color: #fff; font-size: 0.9rem; font-weight: 600; }
.connect-step::after { content: ""; position: absolute; left: 0.9rem; top: 2rem; bottom: 0.3rem; width: 2px; background: #e6e6e6; }
.connect-step:last-child::after { display: none; }
.connect-step.is-done::before { content: "\2713"; background: #2e7d32; }
.card .connect-step h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.connect-form { max-width: 520px; }
.connect-guide summary { cursor: pointer; color: var(--ui-primary); font-weight: 500; }
.connect-guide ol { list-style: decimal; margin: 0.75rem 0 0; padding-left: 1.25rem; }
.connect-guide li { margin-bottom: 0.6rem; color: #555; line-height: 1.5; }
.connect-label { margin: 0.75rem 0 0.3rem; font-size: 0.9rem; font-weight: 500; }
.connect-copy { display: block; padding: 0.6rem 0.75rem; border-radius: 6px; background: #f3f4f7; color: var(--ui-ink); font-size: 0.85rem; overflow-wrap: anywhere; user-select: all; }
.connect-alert { margin: 0; }
.connect-footer { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eee; }
.card h3 { margin-bottom: 1rem; color: var(--ui-ink); }
.card p { color: #555; margin-bottom: 0.5rem; }

/* Solutions Page */
.solutions-page {}
.solutions-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.solutions-header h1 { margin-bottom: 0.5rem; }
.solutions-header p { color: #666; font-size: 1.1rem; }

.solution-card {
    position: relative;
    text-align: center;
    padding: 2rem 1.5rem;
}
.solution-card.coming-soon { opacity: 0.6; }

.solution-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    background: #e0e0e0;
    color: #666;
    margin-bottom: 1rem;
}
.solution-badge.available {
    background: #d4edda;
    color: #155724;
}

.solution-features {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem;
}
.solution-features li {
    padding: 0.3rem 0 0.3rem 1.5rem;
    position: relative;
    color: #555;
    font-size: 0.9rem;
}
.solution-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--ui-primary);
    font-weight: bold;
}

/* Recipes */
.recipes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.recipes-header h1 { margin: 0; }

.recipe-card { overflow: hidden; padding: 0; }
.recipe-card h3 a { color: var(--ui-ink); }
.recipe-card h3 a:hover { color: var(--ui-primary); text-decoration: none; }
.recipe-card-body { padding: 1.2rem; }

.recipe-thumb {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.recipe-meta {
    display: inline-block;
    font-size: 0.85rem;
    color: #666;
    background: var(--ui-page);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin-right: 0.3rem;
}
.recipe-meta-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }

.recipe-date { font-size: 0.85rem; color: #999; margin-top: 0.5rem; }

.recipe-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.recipe-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.recipe-hero-img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.recipe-text { line-height: 1.8; color: #555; }

.ingredient-list {
    list-style: none;
    padding: 0;
}
.ingredient-list li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--ui-page);
    color: #555;
}
.ingredient-list li:last-child { border-bottom: none; }

.empty-state { text-align: center; padding: 3rem; color: #999; font-size: 1.1rem; }

/* Shopping List */
.shopping-list {
    list-style: none;
    padding: 0;
}
.shopping-item {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--ui-page);
    transition: opacity 0.2s;
}
.shopping-item:last-child { border-bottom: none; }
.shopping-item.checked span {
    text-decoration: line-through;
    color: #999;
}
.shopping-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: #333;
}
.shopping-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Products & Stores */
.store-card {
    text-align: center;
    padding: 0;
    overflow: hidden;
}
.store-logo {
    padding: 1.5rem;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
}
.store-card h3 { padding: 1rem 1.5rem 0; }
.store-card p { padding: 0 1.5rem; }
.store-links {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.5rem 1.5rem;
    justify-content: center;
}

/* Floating Feedback Button */
.feedback-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    background: var(--ui-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(67,97,238,0.4);
    z-index: 50;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.feedback-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(67,97,238,0.5);
    text-decoration: none;
    color: #fff;
}

/* Feedback Page */
.feedback-header {
    text-align: center;
    margin-bottom: 2rem;
}
.feedback-header h1 { margin-bottom: 0.5rem; }
.feedback-header p { color: #666; font-size: 1.05rem; }

.feedback-form-card {
    max-width: 600px;
    margin: 0 auto 2rem;
    padding: 2rem;
}

.feedback-categories {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}
.feedback-cat { cursor: pointer; }
.feedback-cat input { display: none; }
.feedback-cat-label {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 2px solid #ddd;
    color: #666;
    transition: all 0.2s;
}
.feedback-cat input:checked + .feedback-cat-label.bug {
    background: #ffeaea; border-color: var(--ui-danger); color: var(--ui-danger);
}
.feedback-cat input:checked + .feedback-cat-label.improvement {
    background: #fff3e0; border-color: #f0ad4e; color: #c77c00;
}
.feedback-cat input:checked + .feedback-cat-label.idea {
    background: #e8f5e9; border-color: #4caf50; color: #2e7d32;
}

.feedback-history { max-width: 600px; margin: 0 auto; }
.feedback-history h2 { margin-bottom: 1rem; }

.feedback-item { margin-bottom: 0.75rem; padding: 1rem; }
.feedback-item-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.badge,
.feedback-badge {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
}
.feedback-badge.bug { background: #ffeaea; color: var(--ui-danger); }
.feedback-badge.improvement { background: #fff3e0; color: #c77c00; }
.feedback-badge.idea { background: #e8f5e9; color: #2e7d32; }

.feedback-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
}
.status-new { background: #e3f2fd; color: #1565c0; }
.status-reviewed { background: #fff3e0; color: #c77c00; }
.status-done { background: #e8f5e9; color: #2e7d32; }
.status-dismissed { background: #f5f5f5; color: #999; }

.feedback-date { font-size: 0.8rem; color: #999; margin-left: auto; }
.feedback-message { color: #333; line-height: 1.6; }
.feedback-user { font-size: 0.8rem; color: var(--ui-primary); font-weight: 500; }

/* Admin */
.stats,
.admin-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.stat,
.admin-stat {
    background: #fff;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    text-align: center;
    flex: 1;
    min-width: 100px;
}
.stat-number,
.admin-stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ui-primary);
}
.stat-label,
.admin-stat-label {
    font-size: 0.8rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.feedback-admin-item { margin-bottom: 0.75rem; }
.feedback-admin-actions { margin-top: 0.5rem; }
.feedback-status-select {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.admin-page h1 { margin-bottom: 1.5rem; }

/* Admin User Cards */
.admin-user-list { display: flex; flex-direction: column; gap: 0.75rem; }

.admin-user-card { padding: 1.2rem; }
.admin-user-header { margin-bottom: 0.75rem; }
.admin-user-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ui-ink);
}
.admin-user-email {
    font-size: 0.85rem;
    color: #666;
}

.admin-user-details {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.admin-user-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}
.admin-detail-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ui-primary);
    line-height: 1;
}
.admin-detail-label {
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.2rem;
}

.admin-user-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: #999;
    border-top: 1px solid var(--ui-page);
    padding-top: 0.6rem;
}

/* Footer */
.footer {
    text-align: center;
    padding: 1.5rem;
    color: #999;
    font-size: 0.85rem;
}

/* Tab Navigation */
.tab-nav {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 1.5rem;
    gap: 0;
    overflow-x: auto;
}
.tab-link {
    padding: 0.8rem 1.5rem;
    color: #666;
    font-weight: 500;
    font-size: 0.95rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
}
.tab-link:hover { color: var(--ui-ink); text-decoration: none; }
.tab-link.active {
    color: var(--ui-primary);
    border-bottom-color: var(--ui-primary);
    font-weight: 600;
}

.tab-content { min-height: 50vh; }

.page-head,
.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.tab-header h2 { margin: 0; }

/* Add Recipe Bar */
.add-recipe-bar { margin-bottom: 1.5rem; }
.url-form {
    display: flex;
    gap: 0.75rem;
}
.url-form .form-control { flex: 1; }

/* Finance */
.finance-page h1 { margin-bottom: 0.25rem; }
.button-row,
.invoice-actions,
.invoice-screen-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.finance-form { max-width: 900px; }
.invoice-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.table-wrap,
.finance-table-wrap { overflow-x: auto; }
.data-table,
.finance-table,
.invoice-doc-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th,
.data-table td,
.finance-table th,
.finance-table td,
.invoice-doc-table th,
.invoice-doc-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e8eaf0;
    text-align: left;
    vertical-align: top;
}
.data-table th,
.finance-table th,
.invoice-doc-table th {
    color: #666;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.numeric { text-align: right !important; }
.status,
.invoice-status {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #e3f2fd;
    color: #1565c0;
}
.status-green,
.status-paid { background: #e8f5e9; color: #2e7d32; }
.status-grey,
.status-cancelled { background: #f5f5f5; color: #777; }
.invoice-lines {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 1rem 0;
}
.invoice-line {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 90px 130px 90px auto;
    gap: 0.5rem;
    align-items: start;
}
.invoice-line-head {
    color: #666;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.invoice-document {
    background: #fff;
    color: #202332;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.invoice-doc-header,
.invoice-doc-meta {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}
.invoice-doc-header h1 {
    font-size: 2.5rem;
    margin: 0;
}
.invoice-number {
    color: var(--ui-primary);
    font-size: 1.2rem;
    font-weight: 700;
}
.invoice-company,
.invoice-doc-dates {
    text-align: right;
}
.invoice-company p,
.invoice-doc-meta p,
.invoice-payment p {
    color: #444;
    line-height: 1.5;
    margin-bottom: 0.25rem;
}
.invoice-totals {
    max-width: 320px;
    margin: 1.5rem 0 1.5rem auto;
}
.invoice-totals div {
    display: flex;
    justify-content: space-between;
    padding: 0.45rem 0;
    border-bottom: 1px solid #e8eaf0;
}
.invoice-grand-total {
    font-size: 1.2rem;
    color: var(--ui-ink);
}
.invoice-payment {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e8eaf0;
}

@media (max-width: 760px) {
    .invoice-line {
        grid-template-columns: 1fr;
    }
    .invoice-line-head {
        display: none;
    }
    .invoice-doc-header,
    .invoice-doc-meta {
        flex-direction: column;
    }
    .invoice-company,
    .invoice-doc-dates {
        text-align: left;
    }
}

@media print {
    body {
        background: #fff;
        display: block;
    }
    .navbar,
    .footer,
    .alert,
    .invoice-screen-actions,
    .feedback-fab {
        display: none !important;
    }
    .container {
        max-width: none;
        padding: 0;
    }
    .invoice-document {
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }
}


.recipe-card-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

/* Meal Plan */
.week-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.week-nav h2 { font-size: 1.1rem; white-space: nowrap; }

.meal-plan-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.plan-day {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
}

.plan-day-header {
    background: var(--ui-ink);
    color: #fff;
    text-align: center;
    padding: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
}

.plan-slot {
    padding: 0.5rem;
    border-bottom: 1px solid var(--ui-page);
    min-height: 60px;
}
.plan-slot:last-child { border-bottom: none; }

.plan-meal-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}

.plan-recipe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--ui-ink);
    background: #e8eaff;
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
}
.plan-recipe span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-remove {
    background: none;
    border: none;
    color: var(--ui-danger);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 0.2rem;
    line-height: 1;
}

.plan-select {
    width: 100%;
    padding: 0.25rem;
    border: 1px dashed #ddd;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #999;
    background: transparent;
    cursor: pointer;
}
.plan-select:focus { outline: none; border-color: var(--ui-primary); }

.plan-add-form { margin: 0; }

/* Checked section */
.checked-section { opacity: 0.7; }

/* Estimated total */
.estimated-total {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

/* Product matches on shopping items */
.shopping-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.item-product-match {
    margin-left: auto;
}
.product-link {
    font-size: 0.8rem;
    color: var(--ui-primary);
    background: #eef0ff;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
.product-link:hover { text-decoration: none; background: #dde0ff; }

/* Product cards */
.product-card { overflow: hidden; padding: 0; }
.product-img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    background: #fff;
    padding: 0.5rem;
}
.product-card-body { padding: 1rem; }
.product-card-body h3 { font-size: 0.95rem; }
.product-card-body h3 a { color: var(--ui-ink); }
.product-card-body h3 a:hover { color: var(--ui-primary); text-decoration: none; }

.product-info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}
.product-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2e7d32;
}
.product-keywords {
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 0.5rem;
}

/* Product Sticky Bar */
.product-sticky-bar {
    background: #fff;
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: 1.5rem;
}
.store-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.store-buttons-label {
    font-size: 0.85rem;
    color: #666;
}
.store-btn {
    font-weight: 600;
    color: #fff;
    border: none;
}
.store-btn-coles { background: #ed1c24; }
.store-btn-coles:hover { background: #d4171e; color: #fff; }
.store-btn-woolies { background: #125b2f; }
.store-btn-woolies:hover { background: #0e4a26; color: #fff; }
.store-btn-aldi { background: #00205b; }
.store-btn-aldi:hover { background: #001a4a; color: #fff; }
/* Product Add Tabs */
.product-add-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0.75rem;
}
.product-add-tab {
    padding: 0.4rem 1rem;
    border: 1px solid #ddd;
    background: #f5f5f5;
    color: #666;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
}
.product-add-tab:first-child { border-radius: 6px 0 0 6px; }
.product-add-tab:last-child { border-radius: 0 6px 6px 0; }
.product-add-tab.active {
    background: var(--ui-primary);
    color: #fff;
    border-color: var(--ui-primary);
}

/* Manual form */
.manual-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.manual-row .form-control { flex: 1; }
.form-control-sm { max-width: 120px; flex: 0 0 auto !important; }

/* Inline edit */
.inline-edit-form {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.3rem;
}
.form-control-xs {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: auto;
}
.product-edit-row {
    padding: 0.5rem 1rem 0.75rem;
    background: #fafafa;
    border-bottom: 1px solid var(--ui-page);
}

/* Pending card */
.pending-card {
    margin-bottom: 1.5rem;
    border-left: 4px solid #f0ad4e;
}
.pending-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.pending-row { opacity: 0.7; }

/* Unmatched items */
.unmatched-card {
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--ui-primary);
}
.unmatched-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.unmatched-chip {
    display: inline-block;
    background: #eef0ff;
    color: var(--ui-primary);
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.8rem;
}

/* Product List (compact rows) */
.products-summary {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.75rem;
}
.product-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.product-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--ui-page);
}
.product-row:first-child { border-radius: 12px 12px 0 0; }
.product-row:last-child { border-radius: 0 0 12px 12px; border-bottom: none; }
.product-row:only-child { border-radius: 12px; }

.product-row-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}
.product-row-placeholder {
    background: var(--ui-page);
}
.product-row-info {
    flex: 1;
    min-width: 0;
}
.product-row-name {
    color: var(--ui-ink);
    font-weight: 500;
    font-size: 0.9rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-row-name:hover { color: var(--ui-primary); text-decoration: none; }
.product-row-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.2rem;
}
.product-row-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* Price Comparison Groups */
.compare-group {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.compare-group.has-comparison {
    border-left: 4px solid var(--ui-primary);
}
.compare-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem 0.4rem;
}
.compare-group-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-ink);
    margin: 0;
}
.compare-best {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2e7d32;
    background: #e8f5e9;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}
.compare-stores {}
.compare-store-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid #f5f5f5;
}
.compare-store-row.cheapest {
    background: #f6fff6;
}
.compare-store-info {
    flex: 1;
    min-width: 0;
}
.compare-store-name {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    margin-right: 0.4rem;
    color: #fff;
}
.store-coles { background: #ed1c24; }
.store-woolworths { background: #125b2f; }
.store-aldi { background: #00205b; }
.store-other { background: #666; }

.compare-product-name {
    font-size: 0.85rem;
    color: #555;
}
a.compare-product-name:hover { color: var(--ui-primary); text-decoration: none; }

.cheapest-price {
    color: #2e7d32 !important;
    font-weight: 800;
}
.price-stale {
    color: #f0ad4e;
    font-size: 1.2em;
    margin-left: 2px;
    font-weight: 700;
}

/* ==========================================================
   RESPONSIVE — Mobile-first overrides
   Applied via base.html so all pages get these consistently
   ========================================================== */

/* Tablet — 900px */
@media (max-width: 900px) {
    .meal-plan-grid { grid-template-columns: 1fr; }
    .plan-day {
        display: grid;
        grid-template-columns: 80px 1fr 1fr 1fr;
        align-items: center;
    }
    .plan-day-header {
        border-radius: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
    }
    .plan-slot { min-height: auto; }
    .card-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile nav + layout — 768px */
@media (max-width: 768px) {
    /* Global overflow prevention */
    html, body { overflow-x: hidden; }

    /* Container — use full width with comfortable padding */
    .container { padding: 1rem; width: 100%; }

    /* Nav brand */
    .nav-brand {
        font-size: 1.05rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: calc(100% - 50px);
    }
    .nav-brand-dim { font-size: 0.85rem; }
    .nav-brand-user {
        font-size: 0.85rem;
        max-width: 100px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }

    /* Hamburger menu */
    .nav-toggle { display: flex; align-items: center; justify-content: center; }
    .nav-links {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--ui-ink);
        flex-direction: column;
        padding: 0.5rem 0;
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        border-top: 1px solid rgba(255,255,255,0.1);
        z-index: 200;
    }
    .nav-links.open {
        display: flex;
        animation: slideDown 0.25s ease;
    }
    .nav-links > a,
    .nav-links > .btn {
        color: #ccc;
        padding: 0.9rem 1.5rem;
        font-size: 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        display: block;
        text-align: left;
    }
    .nav-links > a:hover,
    .nav-links > .btn:hover {
        background: rgba(255,255,255,0.08);
        color: #fff;
        text-decoration: none;
    }
    .nav-links > .btn.btn-primary {
        background: var(--ui-primary);
        color: #fff;
        margin: 0.75rem 1.5rem;
        text-align: center;
        border-radius: 6px;
        border-bottom: none;
    }
    .nav-links > .btn.btn-outline {
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        border-radius: 0;
    }
    .nav-spacer {
        display: block;
        height: 1px;
        background: rgba(255,255,255,0.1);
        margin: 0.25rem 1.5rem;
    }

    /* Cards single column, full width */
    .card-grid { grid-template-columns: 1fr; }
    .card { word-wrap: break-word; }

    /* All forms — stacked, full width */
    .url-form { flex-direction: column; width: 100%; }
    .url-form .form-control { width: 100%; }
    .url-form .btn { width: 100%; }

    /* All headers — stack vertically, full width */
    .tab-header,
    .recipes-header,
    .recipe-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        width: 100%;
    }

    /* All action button groups — 2-column grid */
    .recipe-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
        width: 100%;
    }
    .recipe-actions form { width: 100%; }
    .recipe-actions .btn {
        width: 100%;
        font-size: 0.78rem;
        padding: 0.5rem 0.3rem;
        white-space: nowrap;
    }

    /* Tabs — equal width, no scroll */
    .tab-nav { gap: 0; }
    .tab-link {
        padding: 0.6rem 0;
        font-size: 0.78rem;
        flex: 1;
        text-align: center;
        white-space: nowrap;
    }

    /* Recipe cards */
    .recipe-card { width: 100%; }
    .recipe-card-body { padding: 1rem; }
    .recipe-card-body h3 { font-size: 1.05rem; }
    .recipe-card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }
    .recipe-card-actions form { width: 100%; }
    .recipe-card-actions .btn { width: 100%; text-align: center; }
    .recipe-thumb { height: 180px; }

    /* Recipe detail page */
    .recipe-hero-img { border-radius: 8px; max-height: 250px; }
    .recipe-detail h1 { font-size: 1.4rem; }

    /* Meal plan */
    .plan-day { grid-template-columns: 1fr; }
    .plan-day-header { padding: 0.5rem; font-size: 0.9rem; }
    .plan-slot { padding: 0.5rem; }
    .week-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }
    .week-nav h2 {
        font-size: 0.95rem;
        text-align: center;
        width: 100%;
        order: -1;
    }
    .week-nav .btn { font-size: 0.85rem; }

    /* Shopping list */
    .shopping-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
        padding: 0.7rem 0;
        width: 100%;
    }
    .shopping-check { width: 100%; }
    .shopping-check span { word-break: break-word; }
    .item-product-match { margin-left: 1.8rem; margin-top: 0.2rem; }
    .estimated-total { font-size: 0.95rem; padding: 0.75rem 1rem; border-radius: 8px; }

    /* Product sticky bar */
    .product-sticky-bar {
        padding: 0.75rem;
        position: relative;
        border-radius: 8px;
    }
    .product-add-tabs {
        width: 100%;
        display: flex;
    }
    .product-add-tab {
        font-size: 0.8rem;
        padding: 0.4rem 0.5rem;
        flex: 1;
        text-align: center;
    }
    .store-buttons { justify-content: center; gap: 0.4rem; }
    .store-buttons .btn { font-size: 0.75rem; padding: 0.35rem 0.6rem; }
    .manual-row { flex-direction: column; gap: 0.5rem; }
    .manual-row .form-control,
    .manual-row .form-control-sm {
        max-width: none !important;
        flex: none !important;
        width: 100%;
    }
    .manual-row .btn { width: 100%; }

    /* Product/compare rows */
    .compare-group { border-radius: 8px; margin-bottom: 0.75rem; }
    .compare-group-header {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.75rem;
    }
    .compare-store-row {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
    }
    .product-row-img { width: 40px; height: 40px; }
    .compare-store-info { min-width: 0; }
    .compare-product-name { font-size: 0.8rem; display: block; }
    .product-price { font-size: 1rem; }
    .product-row-actions {
        width: 100%;
        justify-content: flex-end;
        padding-top: 0.3rem;
    }
    .product-row {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
    }
    .inline-edit-form { flex-direction: column; gap: 0.4rem; }
    .inline-edit-form .form-control-xs { width: 100%; min-width: 0; }
    .inline-edit-form .btn { width: 100%; }
    .product-edit-row { padding: 0.5rem 0.75rem; }
    .pending-card, .unmatched-card { border-radius: 8px; }
    .unmatched-chip { font-size: 0.75rem; padding: 0.25rem 0.6rem; }

    /* Dashboard */
    .dashboard h1 { font-size: 1.4rem; }

    /* Solutions page */
    .solutions-header h1 { font-size: 1.6rem; }
    .solutions-header p { font-size: 0.95rem; }
    .solution-card { padding: 1.5rem 1rem; }
    .solution-features li { font-size: 0.85rem; }

    /* Feedback */
    .feedback-form-card { padding: 1.2rem; }
    .feedback-header h1 { font-size: 1.4rem; }
    .feedback-header p { font-size: 0.9rem; }
    .feedback-categories { gap: 0.4rem; }
    .feedback-cat-label { font-size: 0.8rem; padding: 0.4rem 0.8rem; }

    /* Admin */
    .admin-stats { gap: 0.5rem; }
    .admin-stat { padding: 0.75rem; min-width: 80px; }
    .admin-stat-number { font-size: 1.5rem; }

    /* Feedback fab — smaller on mobile */
    .feedback-fab {
        font-size: 0.75rem;
        padding: 0.5rem 0.9rem;
        bottom: 1rem;
        right: 1rem;
    }
}

/* Small phones — 400px */
@media (max-width: 400px) {
    .container { padding: 0.75rem 0.5rem; }
    .nav-brand { font-size: 0.95rem; }
    .nav-brand-dim, .nav-brand-user { font-size: 0.8rem; }
    .tab-link { font-size: 0.72rem; }
    .hero h1 { font-size: 1.5rem; }
    .hero-subtitle { font-size: 1rem; }
    .hero-text { font-size: 0.9rem; }
    .time-number { font-size: 2rem; }
    .time-counter { gap: 1rem; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Admin: member creation and per-user access */
.admin-new-member { margin-bottom: 1.5rem; }
.admin-new-member h3 { margin-bottom: 0.4rem; }
.admin-new-member p { color: #666; font-size: 0.9rem; margin-bottom: 1rem; }
.admin-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.admin-access-grid { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.admin-access-option { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 500; cursor: pointer; margin: 0; }
.admin-access-option input { width: 16px; height: 16px; accent-color: var(--ui-primary); }
.admin-access-form { border-top: 1px solid var(--ui-page); padding-top: 0.75rem; margin-bottom: 0.75rem; }
.admin-access-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
.admin-password-input { max-width: 240px !important; }
.admin-user-admin-note { font-size: 0.85rem; color: var(--ui-primary); margin-bottom: 0.75rem; }
.form-group .admin-access-option { display: flex; margin-bottom: 0; }
.admin-dropdown { position: relative; font-size: 0.9rem; font-weight: 500; }
.admin-dropdown summary { list-style: none; cursor: pointer; padding: 0.3rem 0.7rem; border: 1px solid #ddd; border-radius: 6px; background: #fff; user-select: none; }
.admin-dropdown summary::-webkit-details-marker { display: none; }
.admin-dropdown summary::after { content: " \25BE"; color: #666; }
.admin-dropdown[open] summary { border-color: var(--ui-primary); }
.admin-dropdown-count { color: var(--ui-primary); font-weight: 600; }
.admin-dropdown-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 240px; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; }

@media (max-width: 760px) {
    .costing-header { flex-direction: column; }
    .costing-toggle { width: 100%; }
    .costing-toggle button { flex: 1; }
    .costing-selectors, .costing-summary, .costing-task-form { grid-template-columns: 1fr; }
    .costing-notes { grid-column: auto; }
    .costing-board { grid-template-columns: minmax(260px, 1fr); overflow-x: visible; }
    .costing-column { min-height: 240px; }
}

/* Email module */
.mail-row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.mail-row-actions form { margin: 0; }
.mail-connect-options { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.mail-disabled { opacity: 0.55; cursor: not-allowed; }
.mail-error { font-size: 0.85rem; margin-top: 0.25rem; }
.mail-server-settings { margin: 1rem 0; }
.mail-server-settings summary { cursor: pointer; font-weight: 600; margin-bottom: 0.75rem; }
.mail-checkbox { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0 1rem; }

/* Inbox / Sent list (templates/mail/inbox.html): day headings, then a row per email with the subject on its own line */
.mail-list { margin: 0.5rem 0 1rem; }
.mail-day { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: #666; padding: 1rem 0 0.35rem; border-bottom: 1px solid #e3e5ea; }
.mail-row { position: relative; padding: 0.6rem 0.5rem; border-bottom: 1px solid #f0f1f4; }
.mail-row:hover { background: #f7f8fb; }
.mail-row-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mail-who { font-weight: 500; }
.mail-time { margin-left: auto; color: #888; font-size: 0.85rem; white-space: nowrap; }
.mail-subject { display: block; color: #333; margin-top: 0.15rem; overflow-wrap: anywhere; }
.mail-subject::after { content: ""; position: absolute; inset: 0; }  /* whole row is clickable */
.mail-row.unread .mail-who, .mail-row.unread .mail-subject { font-weight: 700; color: var(--ui-ink); }
.mail-row.unread { border-left: 3px solid var(--ui-primary); }

/* Email marks (app/mail/marks.py) */
.mail-row .badge { position: relative; z-index: 1; }    /* badges stay clickable above the row link */
.mail-row.marked { opacity: 0.6; }
.mail-filter { margin: 0.25rem 0 0.5rem; }
.mail-mark-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.5rem 0; }
.mail-mark-form .btn { padding: 0.3rem 0.8rem; }
.mark-suggested { box-shadow: 0 0 0 2px var(--ui-primary); }

/* 3. Components (app/ui/templates/ui/macros.html) */

/* Badges: ui.badge(text, colour) */
.badge-blue { background: #e3f2fd; color: #1565c0; }
.badge-orange { background: #fff3e0; color: #c77c00; }
.badge-purple { background: #f3e5f5; color: #7b1fa2; }
.badge-grey { background: #eeeeee; color: #616161; }
.badge-green { background: #e8f5e9; color: #2e7d32; }
.badge-teal { background: #e0f2f1; color: #00695c; }
.badge-red { background: #ffeaea; color: var(--ui-danger); }
a.badge:hover { text-decoration: none; filter: brightness(0.96); }

/* Status pills: ui.status(text, colour) */
.status-blue { background: #e3f2fd; color: #1565c0; }
.status-orange { background: #fff3e0; color: #c77c00; }

/* Small bits */
[hidden] { display: none !important; }
.inline-form { display: inline; margin: 0; }
.button-row form { margin: 0; }
.pre-wrap { white-space: pre-wrap; }
.field-hint { display: block; color: var(--ui-muted); font-size: 0.85rem; margin-top: 0.2rem; }
.check-row { display: block; margin: 0.25rem 0; }
.select-inline { display: inline-block; width: auto; }
.no-feedback .feedback-fab { display: none !important; }

/* Split layout with a menu on the left: ui.side_menu(...) */
.split { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; align-items: start; }
.split-main { min-width: 0; }
.side-menu { display: flex; flex-direction: column; gap: 0.15rem; position: sticky; top: 1rem; }
.side-menu a { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.6rem; border-radius: 6px; color: var(--ui-ink); }
.side-menu a:hover { background: #e6e9f2; text-decoration: none; }
.side-menu a.active { background: #dfe5ff; font-weight: 600; }
.side-menu-heading { font-size: 0.75rem; text-transform: uppercase; color: #777; margin: 0.8rem 0 0.2rem 0.6rem; }
.side-menu-count { font-size: 0.8rem; color: var(--ui-muted); }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } .side-menu { flex-direction: row; flex-wrap: wrap; position: static; } }

/* Side panel (ui/side_panel.html): docked on the right; the page moves left to make room */
.side-panel {
    position: fixed; top: 0; right: 0; height: 100vh; width: var(--panel-width);
    background: var(--ui-page); border-left: 1px solid #dde0e6; box-shadow: -2px 0 12px rgba(0,0,0,0.06); z-index: 150;
    transform: translateX(100%); transition: transform 0.2s ease; visibility: hidden;
}
body.panel-open .side-panel { transform: translateX(0); visibility: visible; }
body { transition: padding-right 0.2s ease; }
body.panel-open { padding-right: var(--panel-width); }
.side-panel iframe { width: 100%; height: 100%; border: 0; display: block; }
.panel-active, .panel-active:hover { background: #e8edff !important; }
@media (max-width: 900px) {  /* too narrow to share: the panel covers the page */
    :root { --panel-width: 100vw; }
    body.panel-open { padding-right: 0; overflow: hidden; }
}
body.in-panel { min-height: 0; padding: 1rem; }
body.in-panel .invoice-form-grid { grid-template-columns: 1fr; }

/* Email body (mail/message.html) */
.mail-frame { width: 100%; min-height: 70vh; border: 0; background: #fff; }
.mail-frame.short { min-height: 40vh; }
.mail-text { white-space: pre-wrap; font-family: inherit; margin: 0; }

/* Smart tables: ui.table(..., smart=True) + ui-table.js */
main.container:has(.tbl) { max-width: none; padding-left: 1.5rem; padding-right: 1.5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-link { background: none; border: 0; padding: 0; color: var(--ui-primary, #1565c0); cursor: pointer; font: inherit; }
.btn-link:hover { text-decoration: underline; }
.tbl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.75rem; }
.tbl-search input { width: 280px; max-width: 100%; padding: 0.45rem 0.7rem; border: 1px solid #d0d4dc; border-radius: 8px; font: inherit; }
.tbl-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tbl-chip { background: #e3f2fd; color: #1565c0; border: 0; border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.85rem; cursor: pointer; }
.tbl-chip:hover { background: #bbdefb; }
.tbl-status { color: #666; font-size: 0.85rem; }
.tbl-tools { margin-left: auto; display: flex; gap: 0.5rem; }
.tbl-colwrap { position: relative; }
.tbl-colmenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; background: #fff; border: 1px solid #e0e3ea; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 0.6rem 0.8rem; min-width: 200px; display: grid; gap: 0.35rem; }
.tbl-colmenu label { display: flex; gap: 0.5rem; align-items: center; white-space: nowrap; }
.tbl .data-table th .th-inner { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.th-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.th-sort:hover, .is-sorted .th-sort { color: var(--ui-ink); }
.th-filter { background: none; border: 0; padding: 2px; color: #b0b4bc; cursor: pointer; border-radius: 4px; line-height: 0; }
.th-filter:hover, .is-filtered .th-filter { color: #1565c0; background: #e3f2fd; }
.tbl-pop { position: absolute; z-index: 60; background: #fff; border: 1px solid #e0e3ea; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 0.6rem; width: 260px; }
.tbl-pop-actions { display: flex; justify-content: space-between; margin: 0.4rem 0; font-size: 0.85rem; }
.tbl-pop-values { max-height: 260px; overflow-y: auto; display: grid; gap: 0.2rem; }
.tbl-pop-values label { display: flex; gap: 0.45rem; align-items: center; font-size: 0.9rem; cursor: pointer; }
.tbl-pop-values label span:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-pop-count { color: #999; font-size: 0.8rem; }
.tbl-empty { margin: 0.75rem 0 0; }

/* 4. Project costing: priority plan (was costing.css) */
.pc-page { display: grid; gap: 1.25rem; }

/* Header */
.pc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pc-header h1 { margin-bottom: 0.2rem; font-size: 1.9rem; letter-spacing: -0.01em; }
.pc-header .muted { max-width: 60ch; font-size: 0.95rem; }
.pc-mode { display: inline-flex; border: 1px solid #d6d9e0; border-radius: 999px; overflow: hidden; background: #fff; flex-shrink: 0; }
.pc-mode a { padding: 0.45rem 1rem; color: var(--ui-ink); font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.pc-mode a.active { background: var(--ui-ink); color: #fff; }
.pc-mode a:hover { text-decoration: none; }

/* Selectors */
.pc-selectors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; background: #fff; border: 1px solid #e2e4ea; border-radius: 12px; padding: 1rem 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.pc-selectors label { display: grid; gap: 0.35rem; min-width: 0; }
.pc-selectors label span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #666; }
.pc-selectors select { width: 100%; min-width: 0; padding: 0.65rem 0.8rem; border: 1px solid #d6d9e0; border-radius: 8px; background: #fff; font: inherit; font-weight: 600; color: var(--ui-ink); }

/* Stats line */
.pc-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; color: #666; font-size: 0.9rem; padding: 0 0.25rem; }
.pc-stats strong { color: var(--ui-ink); font-size: 1.05rem; }
.pc-stat-locked { color: #b8860b; font-weight: 600; }

/* Category filter */
.pc-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.pc-filter-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #666; margin-right: 0.2rem; }
.pc-filter-chip { border: 1px solid #d6d9e0; border-radius: 999px; padding: 0.35rem 0.85rem; background: #fff; color: var(--ui-ink); font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.pc-filter-chip:hover { border-color: var(--ui-primary); color: var(--ui-primary); }
.pc-filter-chip.active { background: var(--ui-ink); border-color: var(--ui-ink); color: #fff; }

/* Filtered-out task: thin line, still draggable */
.pc-task.is-dimmed { grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; background: #f6f7fa; border-color: #e6e8ee; box-shadow: none; opacity: 0.8; cursor: pointer; }
.pc-task.is-dimmed .pc-task-grip { height: 100%; border-right-color: #eceef3; }
.pc-task.is-dimmed .pc-task-body { padding: 0.3rem 0.8rem; display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.pc-task.is-dimmed .pc-task-head { flex: 1; min-width: 0; align-items: center; gap: 0.6rem; cursor: grab; }
.pc-task.is-dimmed .pc-task-head h3 { font-size: 0.8rem; font-weight: 600; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-task.is-dimmed .pc-points { padding: 0 0.45rem; font-size: 0.78rem; background: transparent; color: #999; }
.pc-task.is-dimmed .pc-points small { display: none; }
.pc-task.is-dimmed .pc-task-tags, .pc-task.is-dimmed .pc-task-desc, .pc-task.is-dimmed .pc-edit-toggle { display: none; }
.pc-task.is-dimmed:hover { opacity: 1; }

/* Plan */
.pc-plan { display: grid; gap: 1.75rem; }
.pc-plan.is-saving { opacity: 0.75; pointer-events: none; }
.pc-sprint { display: grid; gap: 0.75rem; }

/* Sprint bar */
.pc-sprint-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.9rem 1.1rem 1rem; border-radius: 12px; background: linear-gradient(135deg, var(--ui-ink) 0%, #26335f 100%); color: #fff; box-shadow: 0 6px 18px rgba(26,26,46,0.18); overflow: hidden; }
.pc-sprint-title { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.pc-sprint-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: #4cc9f0; color: var(--ui-ink); font-weight: 800; font-size: 0.95rem; flex-shrink: 0; }
.pc-sprint-bar h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.3; }
.pc-lock-badge { padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(255,255,255,0.15); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.pc-sprint-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-left: auto; }
.pc-sprint-meta form { margin: 0; }
.pc-sprint-points { font-size: 0.9rem; color: #c9d1ff; white-space: nowrap; }
.pc-sprint-points strong { color: #fff; font-size: 1.15rem; }
.is-over .pc-sprint-points strong { color: #ffb4b4; }
.pc-bar-btn { border: 0; border-radius: 8px; padding: 0.42rem 0.8rem; background: var(--ui-primary); color: #fff; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.pc-bar-btn:hover { background: var(--ui-primary-dark); }
.pc-bar-btn:disabled { opacity: 0.45; cursor: default; }
.pc-bar-btn-ghost { background: rgba(255,255,255,0.12); }
.pc-bar-btn-ghost:hover { background: rgba(255,255,255,0.22); }
.pc-sprint-track { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.12); }
.pc-sprint-track span { display: block; height: 100%; background: #4cc9f0; transition: width 0.25s ease; }
.is-over .pc-sprint-track span { background: var(--ui-danger); }
.pc-overflow .pc-sprint-bar { background: #fff; color: var(--ui-ink); border: 1px dashed #c9cdd8; box-shadow: none; }
.pc-overflow .pc-sprint-bar h2 { color: var(--ui-ink); }
.pc-overflow .pc-sprint-num { background: #e9edf5; color: #444; }
.pc-overflow .pc-sprint-points, .pc-overflow .pc-sprint-points strong { color: #666; }

/* Task list */
.pc-tasks { display: grid; gap: 0.6rem; min-height: 56px; padding: 0.15rem; border-radius: 10px; transition: background 0.15s ease; }
.pc-tasks:empty { border: 2px dashed #d6d9e0; }
.pc-tasks:empty::after { content: "Drag a task here"; display: block; padding: 0.95rem; text-align: center; color: #999; font-size: 0.88rem; }
.is-static .pc-tasks:empty::after { content: "No tasks in this sprint"; }

/* Task card */
.pc-task { display: grid; grid-template-columns: 26px minmax(0, 1fr); background: #fff; border: 1px solid #e0e3ea; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); transition: box-shadow 0.15s ease, transform 0.15s ease; }
.pc-task:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.pc-task-grip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: grab; border-right: 1px solid var(--ui-page); border-radius: 10px 0 0 10px; background: #fafbfd; touch-action: none; }
.pc-task-grip span { width: 4px; height: 4px; border-radius: 999px; background: #b7bcc9; }
.pc-task-body { padding: 0.8rem 1rem 0.85rem; min-width: 0; }
.pc-task-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; cursor: grab; }
.pc-task-head h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ui-ink); line-height: 1.35; overflow-wrap: anywhere; }
.pc-points { display: inline-flex; align-items: baseline; gap: 0.2rem; flex-shrink: 0; padding: 0.2rem 0.6rem; border-radius: 999px; background: #eef1ff; color: var(--ui-primary); font-weight: 800; font-size: 1rem; line-height: 1.3; }
.pc-points small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; }
.pc-task-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.pc-chip { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.pc-package { background: var(--ui-page); color: #555; }
.pc-status { background: #eef0f4; color: #555; }
.pc-status-ready { background: #e3f1ff; color: #1f5fa8; }
.pc-status-in-progress { background: #fff3d6; color: #8a5a00; }
.pc-status-done { background: #dff5e5; color: #1f6b3a; }
.pc-task-desc { margin: 0.55rem 0 0; color: #555; font-size: 0.92rem; line-height: 1.5; white-space: pre-line; }
.pc-edit-toggle { margin-top: 0.6rem; border: 0; padding: 0; background: none; color: var(--ui-primary); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.pc-edit-toggle:hover { text-decoration: underline; }
.pc-task.pc-ghost { opacity: 0.35; background: #eef1ff; border-style: dashed; }
.pc-task.pc-chosen { box-shadow: 0 8px 24px rgba(26,26,46,0.18); }
.pc-task.pc-dragging { transform: rotate(0.5deg); }
.is-locked .pc-task-grip, .is-locked .pc-task-head, .is-static .pc-task-grip, .is-static .pc-task-head { cursor: default; }
.is-locked .pc-task { background: #f8f9fb; }
.is-customer-view .pc-task-body { padding-bottom: 0.95rem; }

/* Inline edit on the card */
.pc-task.is-editing { border-color: var(--ui-primary); box-shadow: 0 0 0 3px rgba(67,97,238,0.12); }
.pc-task.is-editing .pc-task-head, .pc-task.is-editing .pc-task-tags, .pc-task.is-editing .pc-task-desc, .pc-task.is-editing .pc-edit-toggle { display: none; }
.pc-task.is-editing .pc-task-grip { cursor: default; }
.pc-task-new .pc-task-head h3 { color: #666; }
.pc-inline-edit { padding-top: 0.1rem; }

/* Forms */
.pc-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.pc-form-grid label { display: grid; gap: 0.25rem; min-width: 0; }
.pc-form-grid label span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #666; }
.pc-form-grid input, .pc-form-grid select, .pc-form-grid textarea { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid #d6d9e0; border-radius: 8px; font: inherit; color: var(--ui-ink); background: #fff; }
.pc-form-grid textarea { resize: vertical; }
.pc-span-2 { grid-column: span 2; }
.pc-span-3 { grid-column: span 3; }
.pc-span-4 { grid-column: span 4; }
.pc-form-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; }
.pc-delete { margin-left: auto; border: 0; background: none; color: var(--ui-danger); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.pc-delete:hover { text-decoration: underline; }

.pc-empty-state { padding: 3rem 1rem; text-align: center; color: #666; background: #fff; border: 1px dashed #d6d9e0; border-radius: 12px; }

/* Mobile */
@media (max-width: 768px) {
    .pc-header h1 { font-size: 1.6rem; }
    .pc-mode { width: 100%; }
    .pc-mode a { flex: 1; text-align: center; }
    .pc-selectors { grid-template-columns: 1fr; padding: 0.9rem 1rem; }
    .pc-sprint-bar { padding: 0.8rem 0.9rem 0.95rem; }
    .pc-sprint-bar h2 { font-size: 0.95rem; }
    .pc-sprint-meta { width: 100%; margin-left: 0; justify-content: space-between; }
    .pc-task-body { padding: 0.7rem 0.8rem 0.75rem; }
    .pc-task-head h3 { font-size: 0.95rem; }
    .pc-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pc-span-3 { grid-column: span 2; }
    .pc-span-4 { grid-column: span 2; }
    .pc-form-actions { flex-wrap: wrap; }
    .pc-filter-chip { padding: 0.3rem 0.7rem; font-size: 0.78rem; }
}

/* 5. Invoice document (finance/invoice_view.html) */
.inv-doc {
    max-width: 860px;
    margin: 0 auto;
    background: #fff;
    color: #202332;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}
.inv-doc-band { height: 8px; background: var(--ui-primary); }
.inv-doc-body { padding: 2.5rem; }
.inv-top {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.25rem;
}
.inv-brand h2 { font-size: 1.5rem; margin: 0 0 0.5rem; color: var(--ui-ink); }
.inv-brand p, .inv-billto p { margin: 0 0 0.15rem; color: #555; line-height: 1.45; font-size: 0.92rem; }
.inv-title { text-align: right; }
.inv-title h1 {
    font-size: 2.1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
    color: var(--ui-ink);
}
.inv-facts { display: grid; grid-template-columns: auto auto; gap: 0.2rem 1rem; justify-content: end; font-size: 0.92rem; }
.inv-facts dt { color: #888; text-align: right; }
.inv-facts dd { margin: 0; font-weight: 600; text-align: right; }
.inv-mid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
}
.inv-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ui-primary);
    margin-bottom: 0.4rem;
}
.inv-billto strong { font-size: 1.1rem; color: var(--ui-ink); }
.inv-due-box {
    background: #f4f6fe;
    border-radius: 8px;
    padding: 1rem 1.4rem;
    text-align: right;
    min-width: 220px;
}
.inv-due-box .inv-due-amount { font-size: 1.8rem; font-weight: 800; color: var(--ui-ink); line-height: 1.2; }
.inv-due-box .inv-due-date { color: #555; font-size: 0.9rem; }
.inv-items { width: 100%; border-collapse: collapse; }
.inv-items th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
    text-align: left;
    padding: 0 0 0.6rem;
    border-bottom: 2px solid var(--ui-ink);
}
.inv-items td { padding: 1.1rem 0; border-bottom: 1px solid #e8eaf0; vertical-align: top; }
.inv-items .num { text-align: right; padding-left: 1rem; white-space: nowrap; }
.inv-items td.num { font-weight: 600; }
.inv-items tr { break-inside: avoid; }
.inv-item-title { font-weight: 800; font-size: 1.15rem; color: var(--ui-ink); margin-bottom: 0.4rem; }
.inv-item-tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: middle;
    white-space: nowrap;
}
.inv-item-tag.tag-progress { background: #fff4e0; color: #a35c00; }
.inv-item-points { margin: 0; padding-left: 1.1rem; color: #555; font-size: 0.9rem; line-height: 1.55; }
.inv-sum { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.inv-sum-table { width: 300px; }
.inv-sum-table div { display: flex; justify-content: space-between; padding: 0.4rem 0; color: #555; }
.inv-sum-table .inv-sum-total {
    border-top: 2px solid var(--ui-ink);
    margin-top: 0.3rem;
    padding-top: 0.6rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ui-ink);
}
.inv-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e8eaf0;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
}
.inv-thanks { text-align: center; color: #888; font-size: 0.85rem; margin-top: 2rem; }
.inv-screen-only-status { margin-left: auto; }

@media screen and (max-width: 760px) {
    .inv-doc-body { padding: 1.25rem; }
    .inv-top, .inv-mid { flex-direction: column; gap: 1.25rem; }
    .inv-title { text-align: left; order: -1; }
    .inv-title h1 { font-size: 1.6rem; margin-bottom: 0.5rem; }
    .inv-facts { justify-content: start; }
    .inv-facts dt, .inv-facts dd { text-align: left; }
    .inv-due-box { text-align: left; width: 100%; }
    .inv-sum-table { width: 100%; }
    .inv-foot { grid-template-columns: 1fr; gap: 1rem; }
    .invoice-screen-actions { gap: 0.4rem; }
}

@media print {
    @page { size: A4; margin: 10mm 12mm; }
    .inv-doc { box-shadow: none; border-radius: 0; max-width: none; }
    .inv-doc-body { padding: 1.25rem 0 0; }
    .inv-top, .inv-mid { margin-bottom: 1.25rem; }
    .inv-brand p, .inv-billto p { line-height: 1.35; }
    .inv-items td { padding: 0.7rem 0; }
    .inv-item-points { line-height: 1.32; font-size: 0.86rem; }
    .inv-item-title { margin-bottom: 0.25rem; }
    .inv-doc-body { padding-top: 0.9rem; }
    .inv-title h1 { margin-bottom: 0.4rem; }
    .inv-sum { margin-top: 0.75rem; }
    .inv-foot { margin-top: 1.25rem; padding-top: 1rem; }
    .inv-thanks { margin-top: 1rem; }
    .inv-due-box, .inv-doc-band, .inv-item-tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 6. Invoice editor (finance/invoice_form.html) */
.invoice-editor-page { padding-bottom: 5rem; }
.invoice-editor { max-width: 900px; margin: 0 auto; }
.invoice-editor .inv-input {
    width: 100%;
    font: inherit;
    color: inherit;
    background: #f7f8fc;
    border: 1px solid transparent;
    border-bottom: 1px dashed #c9cede;
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    transition: background 0.15s, border-color 0.15s;
}
.invoice-editor .inv-input:hover { background: #eef1fb; }
.invoice-editor .inv-input:focus {
    outline: none;
    background: #fff;
    border: 1px solid var(--ui-primary);
    box-shadow: 0 0 0 3px rgba(67,97,238,0.1);
}
.invoice-editor textarea.inv-input { resize: vertical; min-height: 2.4rem; font-size: 0.9rem; color: #555; }
.invoice-editor textarea.inv-heading { font-weight: 800; color: var(--ui-ink); font-size: 1.15rem; margin-bottom: 0.35rem; resize: none; min-height: 0; }
.invoice-editor .inv-invalid { border: 1px solid var(--ui-danger) !important; background: #fff5f5; }
.inv-number-draft { color: #888; font-size: 0.85rem; font-weight: 400; }
.inv-small-link { font-size: 0.8rem; }
.inv-customer-select { font-weight: 700; margin-bottom: 0.4rem; }
.inv-customer-details p { margin-bottom: 0.15rem; }
.inv-meta-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}
.inv-meta-row label { font-weight: 700; white-space: nowrap; margin: 0; font-size: 0.9rem; }
.inv-meta-row .inv-input { max-width: 170px; }
.inv-lines-table th:first-child { width: 46%; }
.inv-lines-table td { padding: 0.5rem 0.35rem; vertical-align: top; }
.inv-lines-table .inv-input.numeric { text-align: right; }
.inv-line-amount { padding-top: 0.85rem !important; font-weight: 600; white-space: nowrap; }
.inv-remove {
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.35rem 0.4rem;
    cursor: pointer;
}
.inv-remove:hover { color: var(--ui-danger); }
.inv-add-line {
    background: none;
    border: 1px dashed #c9cede;
    border-radius: 6px;
    color: var(--ui-primary);
    font-weight: 600;
    width: 100%;
    padding: 0.6rem;
    margin-top: 0.5rem;
    cursor: pointer;
}
.inv-add-line:hover { background: #f7f8fc; }
.inv-error {
    display: none;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.inv-error.show { display: block; }
.inv-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: rgba(255,255,255,0.97);
    border-top: 1px solid #e8eaf0;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    padding: 0.7rem 16px calc(0.7rem + env(safe-area-inset-bottom));
}
.inv-actionbar-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.inv-actionbar-total { margin-right: auto; font-size: 0.9rem; color: #666; }
.inv-actionbar-total strong { color: var(--ui-ink); font-size: 1.1rem; }

@media (max-width: 760px) {
    .invoice-editor.invoice-document { padding: 1.1rem; }
    .invoice-editor .invoice-doc-header h1 { font-size: 1.9rem; }
    .inv-meta-row { justify-content: space-between; }
    .inv-meta-row .inv-input { max-width: 60%; }
    .inv-lines-table thead { display: none; }
    .inv-lines-table, .inv-lines-table tbody { display: block; }
    .inv-lines-table tr.inv-line {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr auto;
        gap: 0.4rem 0.5rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid #e8eaf0;
    }
    .inv-lines-table td { display: block; padding: 0; border: none; }
    .inv-lines-table td.inv-cell-desc { grid-column: 1 / 4; }
    .inv-lines-table td.inv-cell-remove { grid-column: 4; grid-row: 1; }
    .inv-lines-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 0.15rem;
    }
    .inv-lines-table td.inv-line-amount {
        grid-column: 1 / 5;
        text-align: right !important;
        padding-top: 0.2rem !important;
    }
    .invoice-editor .invoice-totals { max-width: none; }
}