========================= Design tokens ========================= */ :root { /* Brand palette (PAG green) */
    --brand-accent: #2e7d32; /* mid green */
    --brand-accent-hover: #1e3d2b; /* dark forest green */
    --brand-accent-soft: #e8f5e9; /* light green tint */ /* Supporting tones */
    --brand-gold: #66bb6a; /* bright green accent */
    --brand-wood: #2e7d32;
    --brand-wood-dark: #1e3d2b; /* Neutrals tuned green */
    --text-primary: #1b2e1f;
    --text-muted: #4a6b50;
    --border-soft: #c8e6c9;
    --border-input: #a5d6a7;
    --bg-soft: #f1f8e9;
    --shadow-card: 0 1px 6px rgba(30,61,43,0.08);
    --focus-ring: 0 0 0 2px rgba(46,125,50,0.22);
}
/* ========================= Shell ========================= */

.app {
    font-family: system-ui, "Segoe UI", Arial, sans-serif;
    margin: 0;
    color: var(--text-primary);
    background: var(--bg-soft);
}

.app-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

.app-header {
    border-bottom: 1px solid var(--border-soft);
    padding: 12px 0;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand a {
    font-weight: 800;
    text-decoration: none;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}

.nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.nav-link {
    text-decoration: none;
    color: var(--text-primary);
    padding: 6px 8px;
    border-radius: 8px;
}

    .nav-link:hover {
        background: var(--brand-accent-soft);
    }

    .nav-link.active {
        background: var(--brand-accent-soft);
        border: 1px solid rgba(46,125,50,0.25);
    }

.nav-meta {
    color: #777;
    font-size: 0.9rem;
    padding: 6px 0;
}

.app-main {
    padding: 16px 0;
}

.app-footer {
    border-top: 1px solid var(--border-soft);
    padding: 14px 0;
    margin-top: 20px;
    color: var(--text-muted);
    background: transparent;
}
/* ========================= Buttons ========================= */

.btn {
    border: 1px solid var(--border-input);
    background: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-primary);
}

    .btn:hover {
        background: #f7f7f7;
    }

    .btn:focus {
        outline: none;
        box-shadow: var(--focus-ring);
        border-color: var(--brand-accent);
    }

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

    .btn-primary:hover {
        background: var(--brand-accent-hover);
    }

.btn-outline {
    background: #fff;
    color: var(--text-primary);
    border-color: var(--border-input);
}

.btn-danger {
    background: #fff;
    color: #b00020;
    border-color: #b00020;
}

    .btn-danger:hover {
        background: #fff3f3;
    }
/* ========================= Banners ========================= */

.banner {
    padding: 10px 12px;
    border-radius: 12px;
    margin: 12px 0;
}

.banner-error {
    border: 1px solid #c00;
    background: #fff3f3;
}

.banner-success {
    border: 1px solid #0a7;
    background: #f0fff9;
}
/* ========================= Breadcrumbs ========================= */

.breadcrumbs {
    margin: 6px 0 14px;
    font-size: 14px;
    color: #555;
}

    .breadcrumbs ol {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .breadcrumbs a {
        text-decoration: none;
        color: var(--text-primary);
    }

        .breadcrumbs a:hover {
            text-decoration: underline;
        }

    .breadcrumbs .sep {
        color: #aaa;
        margin: 0 2px;
    }

    .breadcrumbs .current {
        font-weight: 700;
        color: var(--text-primary);
    }
/* ========================= Cards + grids ========================= */ /* Admin page helpers */

.page-title {
    margin: 6px 0 14px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.kpi-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
}

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

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

.kpi-label {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kpi-value {
    margin-top: 6px;
    font-size: 30px;
    font-weight: 800;
}

.placeholder {
    border-style: dashed;
    background: var(--bg-soft);
}

    .placeholder .kpi-value {
        color: #999;
    }

.card {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 12px;
    box-shadow: var(--shadow-card);
}

.grid {
    display: grid;
    gap: 14px;
}

.grid-animals {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid-photos {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
/* ========================= Auth layout ========================= */

.auth-wrap {
    display: flex;
    justify-content: center;
    padding: 10px 0 22px;
}

.auth-card {
    width: 100%;
    max-width: 640px;
}
/* ========================= Form styling ========================= */

.form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-label {
    font-weight: 700;
}

.form-input, .form-select, textarea {
    border: 1px solid var(--border-input);
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    background: #fff;
    color: var(--text-primary);
}

    .form-input:focus, .form-select:focus, textarea:focus {
        outline: none;
        border-color: var(--brand-accent);
        box-shadow: var(--focus-ring);
    }

.divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 4px 0;
}

.help-text {
    color: var(--text-muted);
}
/* ========================= Plan tiles ========================= */

.plan-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.plan-tile {
    cursor: pointer;
    display: block;
    padding: 12px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .plan-tile:hover {
        background: #f7f7f7;
    }

.plan-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plan-title {
    font-weight: 800;
    margin-bottom: 4px;
}

.plan-meta {
    color: var(--text-muted);
    font-size: 0.95rem;
}
/* Highlight selected plan tile */

.plan-tile:has(.plan-radio:checked) {
    border-color: var(--brand-accent);
    box-shadow: var(--focus-ring);
}
/* Actions */

.form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 6px;
}
/* ========================= Hero ========================= */

.hero {
    padding: 18px 0 10px;
    background: var(--bg-soft);
    border-bottom: 1px solid #eee;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
    align-items: start;
}

.hero-title {
    margin: 0 0 6px;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: 0.2px;
}

.hero-subtitle {
    color: #555;
    margin: 0 0 14px;
    font-size: 1.1rem;
    max-width: 55ch;
}

.hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 10px;
}

.hero-note {
    color: var(--text-muted);
    margin: 10px 0 0;
}

.hero-card {
    padding: 14px;
}
/* Featured item card: ensure it sits at the top of the grid row */

.featured-card {
    align-self: start;
    margin-top: 0;
}

.hero-card-kicker {
    font-weight: 800;
    margin-bottom: 6px;
}

.hero-steps {
    margin: 0;
    padding-left: 18px;
    color: #333;
}

    .hero-steps li {
        margin: 8px 0;
    }
/* ========================= Trust row ========================= */

.trust-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.trust-pill {
    border: 1px solid rgba(46,125,50,0.25);
    background: var(--brand-accent-soft);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.9rem;
    color: #444;
}
/* ========================= Value section ========================= */

.value {
    padding: 18px 0;
}

.section-title {
    margin: 0 0 6px;
    font-size: 24px;
}

.section-subtitle {
    margin: 0 0 14px;
    color: var(--text-muted);
    max-width: 70ch;
}

.value-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* ========================= Responsive ========================= */

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

    .hero-title {
        font-size: 34px;
    }
}

@media (max-width: 640px) {
    .form-row-2 {
        grid-template-columns: 1fr;
    }
}
/* Browse profile cards */

.profile-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
}

    .profile-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.profile-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.profile-location {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.profile-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tag {
    border: 1px solid var(--border-soft);
    background: var(--brand-accent-soft);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.85rem;
}

.profile-cta {
    margin-top: 6px;
    align-self: flex-start;
}
/* ========================= Profiles / Details page ========================= */

.details-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin: 10px 0 14px;
    flex-wrap: wrap;
}

.details-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.details-subtitle {
    color: var(--text-muted);
    margin-top: 4px;
}

.details-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
/* Hero card */

.details-hero {
    padding: 0; /* override .card padding for media-first layout */
    overflow: hidden;
}

.details-hero-media {
    border-bottom: 1px solid var(--border-soft);
    background: #f0f0f0;
}

    .details-hero-media img {
        width: 100%;
        height: 320px;
        object-fit: cover;
        display: block;
    }

.details-hero-body {
    padding: 12px;
}

.details-hero-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.details-hero-name {
    font-size: 18px;
    font-weight: 800;
}
/* Section head inside card */

.details-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.details-card-title {
    font-weight: 800;
}
/* Chips */

.details-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(46,125,50,0.25);
    background: var(--brand-accent-soft);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #444;
}
/* Animals section */

.details-animals {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.details-animal {
    padding-top: 6px;
}

.details-animal-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
}

.details-animal-name {
    font-weight: 800;
    font-size: 1.05rem;
}
/* Photos */

.details-photos {
    margin-top: 10px;
}

.details-photo {
    display: block;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
}

    .details-photo:hover {
        background: #f7f7f7;
    }

    .details-photo img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
    }
/* Empty state */

.details-empty {
    border: 1px dashed #bbb;
    border-radius: 12px;
    background: #fcfcfc;
    padding: 14px;
}

.nav-link-with-badge {
    position: relative;
    padding-right: 14px;
}

.nav-badge {
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
}
/* ========================= Animals / Index cards ========================= */

.animal-card {
    padding: 0;
    overflow: hidden;
}

.animal-card-media {
    height: 180px;
    background: #f0f0f0;
    border-bottom: 1px solid var(--border-soft);
}

    .animal-card-media img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        display: block;
    }

.animal-card-body {
    padding: 12px;
}

.animal-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.animal-card-name {
    font-weight: 800;
    font-size: 1.1rem;
}

.animal-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
}
/* Client-side disabled anchor styling */

.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}
/* ========================= Photos / Manage ========================= */

.photo-card {
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.photo-card-media {
    height: 150px;
    background: #f0f0f0;
}

    .photo-card-media img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        display: block;
    }

.photo-card-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.photo-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.photo-name {
    font-weight: 700;
    font-size: 0.9rem;
}
/* Admin Layout (matches site look & feel) */

.admin-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

.admin-header {
    border-bottom: 1px solid var(--border-soft);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.admin-header-inner {
    padding: 12px 0;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

    .admin-brand strong {
        font-weight: 800;
        letter-spacing: 0.2px;
        color: var(--text-primary);
    }

.admin-user {
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50vw;
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

    .admin-nav a {
        display: inline-flex;
        align-items: center;
        padding: 8px 10px;
        border: 1px solid var(--border-soft);
        border-radius: 999px;
        text-decoration: none;
        color: var(--text-primary);
        background: #fff;
    }

        .admin-nav a:hover {
            border-color: var(--brand-accent);
            background: var(--bg-soft);
        }

    .admin-nav .nav-sep {
        width: 10px;
    }

    .admin-nav .return-site {
        border-color: #f0d6d1;
        background: var(--brand-accent-soft);
    }

.admin-main {
    padding: 16px 0 28px;
}
/* Optional: a small "Admin" pill to match the rest of the UI */

.admin-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--bg-soft);
    color: var(--text-primary);
    font-size: 12px;
}

.admin-nav a.active {
    background: var(--brand-accent-soft);
    border-color: rgba(46,125,50,0.25);
}
/* ========================================================= PATCH: Utilities + Admin tables (safe add-on) Paste at END of site.css ========================================================= */ /* Utilities */

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0 14px;
}

    .page-head h2 {
        margin: 0;
        font-size: 28px;
        font-weight: 800;
        letter-spacing: 0.2px;
    }

.page-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
}
/* Fix: main nav active state should NOT add border unless active (your earlier CSS only added border for .nav-link.active) */

.nav-link {
    border: 1px solid transparent;
}

    .nav-link:hover {
        border-color: transparent;
    }
/* -----------------------------------------
   Tables (Modern)
------------------------------------------ */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Add a modifier so this doesn't affect every Bootstrap table */
/* Keep date tight */
.table.table-modern .col-date {
    white-space: nowrap;
}

/* Make clickable dates look professional */
.table.table-modern td a {
    color: var(--link, #0b5ed7);
    text-decoration: none;
    font-weight: 600;
}

    .table.table-modern td a:hover {
        text-decoration: underline;
    }

/* Totals row: align baseline and make it feel �footer-like� */
.table.table-modern tr.row-total td {
    background: rgba(0,0,0,0.015);
    font-weight: 700;
    vertical-align: middle;
}

    .table.table-modern tr.row-total td:first-child {
        border-left: none;
    }


    /* Numeric alignment */
    .table.table-modern .num {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* Date column can stay compact */
    .table.table-modern .col-date {
        white-space: nowrap;
    }

    /* Comments column: nicer wrapping and readability */
    .table.table-modern .col-comments {
        max-width: 720px; /* prevents the �giant paragraph� effect */
        line-height: 1.35;
        color: var(--text-muted, #5b616a);
        word-break: break-word;
    }

    /* Totals / summary row styling */
    .table.table-modern tr.row-total td {
        background: rgba(0,0,0,0.015);
        font-weight: 700;
        border-top: 2px solid var(--border-soft);
    }

    /* Optional: compact variant (add class table-compact) */
    .table.table-modern.table-compact th,
    .table.table-modern.table-compact td {
        padding: 10px 12px;
        font-size: 0.92rem;
    }

/* Button-like link */

.btn-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-input);
    text-decoration: none;
    color: var(--text-primary);
    background: #fff;
}

    .btn-link:hover {
        background: #f7f7f7;
    }

    .btn-link:focus {
        outline: none;
        box-shadow: var(--focus-ring);
        border-color: var(--brand-accent);
    }
/* Admin: prefer app-shell in markup; keep admin-shell as alias for backwards compatibility */

.admin-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}
/* ========================= Utilities + Admin tables ========================= */

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0 14px;
}

    .page-head h2 {
        margin: 0;
        font-size: 28px;
        font-weight: 800;
        letter-spacing: 0.2px;
    }

.page-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
}

.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

    .table th, .table td {
        padding: 10px 12px;
        text-align: left;
        vertical-align: middle;
        border-bottom: 1px solid var(--border-soft);
        font-size: 0.95rem;
    }

    .table thead th {
        background: var(--bg-soft);
        color: #444;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .table tbody tr:hover td {
        background: #fcfcfc;
    }

    .table tbody tr:last-child td {
        border-bottom: none;
    }

.row-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

    .row-actions form {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        margin: 0;
    }

    .row-actions select {
        border: 1px solid var(--border-input);
        border-radius: 12px;
        padding: 8px 10px;
        font: inherit;
        background: #fff;
        color: var(--text-primary);
    }

.btn-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-input);
    text-decoration: none;
    color: var(--text-primary);
    background: #fff;
}

    .btn-link:hover {
        background: #f7f7f7;
    }

.card.placeholder {
    opacity: 0.6;
    background: #fafafa;
    border-style: dashed;
}
/* ========================= Status Badges ========================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.2px;
    border: 1px solid var(--border-input);
    background: #fff;
    color: var(--text-primary);
    white-space: nowrap;
}

    .badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #999;
    }

.badge-pending {
    background: var(--brand-accent-soft);
    border-color: #ffd6cf;
    color: #7a2a1f;
}

    .badge-pending::before {
        background: var(--brand-accent);
    }

.badge-approved {
    background: #eefbf1;
    border-color: #cfe9d6;
    color: #1f5e2f;
}

    .badge-approved::before {
        background: #2e8b57;
    }

.badge-rejected {
    background: #fff3f3;
    border-color: #f1c7c7;
    color: #7b1b1b;
}

    .badge-rejected::before {
        background: #b00020;
    }
/* Overlay placement on photo thumbnails */

.photo-card-media {
    position: relative;
}

.photo-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

@media (max-width: 640px) {
    .brand-text {
        display: none;
    }
}

.app-header .app-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
/* ========================= Admin: Product table thumbnails ========================= */

.table .thumb-cell {
    width: 56px;
}

.table .product-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-soft);
    border: 1px solid var(--border-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

    .table .product-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
/* Placeholder when no image exists */

.table .product-thumb--empty {
    color: #aaa;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
/* Slight hover affordance */

.table tbody tr:hover .product-thumb {
    border-color: var(--brand-accent);
    background: #fff;
}
/* === Product Thumbnail (Admin + Public exact match) === */

.product-thumb-admin {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid #ced4da; /* Bootstrap table border color */
    border-radius: 3px;
    background-color: #f8f9fa; /* Bootstrap light bg */
    padding: 2px;
}
/* ========================================= HEADER BRAND PATCH (paste at END of site.css) ========================================= */

.app-header .app-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
/* Keep nav from getting cramped; allow wrapping cleanly */

.nav {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* ========================================= HEADER BRAND PATCH (paste at END of site.css) ========================================= */

.app-header .app-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
/* Keep nav from getting cramped; allow wrapping cleanly */

.nav {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* ========================================= BRAND + HEADER REFINEMENTS (paste at END) ========================================= */

.app-header { /* Warm tint so it feels intentional, not stark white */
    background: linear-gradient(180deg, #fffdf4 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(199,184,73,0.35); /* brand gold-ish divider */
    box-shadow: 0 6px 18px rgba(30,61,43,0.04);
}
    /* Keep brand and nav aligned and spaced */

    .app-header .app-shell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
/* Brand link: larger click target, nicer hover */

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-primary);
    border-radius: 999px;
    padding: 6px 10px;
}

    .brand-link:hover {
        background: var(--brand-accent-soft);
    }

    .brand-link:focus {
        outline: none;
        box-shadow: var(--focus-ring);
    }
/* Header-only logo size */

.brand-logo-wrap--header {
    width: 72px;
    height: 72px;
    border-radius: 16px; /* �shop sign� feel; change to 999px for round */
    background: #fff;
    border: 1px solid var(--border-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-card);
    flex-shrink: 0;
}

    .brand-logo-wrap--header .brand-logo {
        width: 92%;
        height: 92%;
        object-fit: contain;
        display: block;
    }
/* Brand text stack */

.brand-text {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1.05;
    color: var(--text-primary);
}

.brand-tagline {
    font-weight: 700;
    font-size: 12px;
    color: var(--text-muted);
}
/* Nav polish */

.nav {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* Better nav �pill� affordance */

.nav-link {
    border: 1px solid transparent;
    padding: 7px 10px;
    border-radius: 999px;
}

    .nav-link:hover {
        background: var(--brand-accent-soft);
    }
    /* Active state: warm + branded border */

    .nav-link.active {
        background: var(--brand-accent-soft);
        border: 1px solid rgba(199,184,73,0.45);
    }
/* Cart badge: match brand, not Bootstrap blue */

.nav-badge {
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
}

.shipping-option {
    display: block;
    padding: 10px;
    border: 1px solid #ddd;
    margin-bottom: 8px;
    border-radius: 6px;
}

.badge-cheapest {
    background: #e6f4ea;
    color: #137333;
}

.badge-fastest {
    background: #e8f0fe;
    color: #1a73e8;
}

.badge-bestvalue {
    background: #fef7e0;
    color: #b06000;
}

.admin-metric-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 8px;
    padding: 18px 18px 16px 18px;
    max-width: 420px; /* optional */
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.admin-metric-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-metric-title {
    font-size: 20px;
    font-weight: 500;
    color: rgba(0,0,0,.70);
}

.admin-metric-link {
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #6f42c1; /* purple-ish like screenshot */
    white-space: nowrap;
}

    .admin-metric-link:hover {
        text-decoration: underline;
    }

.admin-metric-value {
    margin-top: 8px;
    font-size: 56px;
    line-height: 1;
    font-weight: 600;
    color: rgba(0,0,0,.90);
}

.admin-metric-subtext {
    margin-top: 10px;
    font-size: 15px;
    color: rgba(0,0,0,.45);
}

.badge-status {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
}
/* Status-specific */

.badge-pendingpayment {
    background: #FFE8A1;
    color: #7A5200;
}

.badge-paid {
    background: #D1FAE5;
    color: #065F46;
}

.badge-picking {
    background: #DBEAFE;
    color: #1E40AF;
}

.badge-shipped {
    background: #EDE9FE;
    color: #5B21B6;
}

.badge-completed {
    background: #DCFCE7;
    color: #166534;
}

.badge-cancelled {
    background: #FEE2E2;
    color: #991B1B;
}

.badge-refunded {
    background: #F3F4F6;
    color: #374151;
}

.orders-table td, .orders-table th {
    vertical-align: middle;
}

.order-filters .btn {
    border-radius: 999px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
}

.breadcrumb-link {
    text-decoration: none;
}

    .breadcrumb-link:hover {
        text-decoration: underline;
    }

.breadcrumb-current {
    font-weight: 600;
}

.breadcrumb-sep {
    opacity: .6;
}
/* Product cards � �directory card� look */

.product-card {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    transition: transform .12s ease, box-shadow .12s ease;
    background: #fff;
}

    .product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(0,0,0,.10);
    }

.product-card-imgwrap {
    display: block;
    background: #f6f7f9;
    aspect-ratio: 4 / 3; /* keeps a uniform image tile */
    overflow: hidden;
}

.product-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-card-title {
    font-weight: 600;
    line-height: 1.2; /* keep titles tidy like the screenshot */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card .badge.text-bg-light {
    background: #f8f9fa !important;
}
/* Featured card uses the same visual language as product cards */

.product-hero-card {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    background: #fff;
}
/* Make the hero column image slightly taller than the grid */

.hero-card .product-card-imgwrap {
    aspect-ratio: 16 / 10;
}
/* Ensure the featured card doesn�t inherit odd card padding from hero styles */

.hero-card .product-hero-card {
    margin-top: 0px;
}
/* Home - What's New tile */

.whatsnew-tile {
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    padding: 12px;
    background: rgba(255,255,255,.6);
}

.whatsnew-tile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.whatsnew-tile-title {
    font-weight: 700;
    margin: 0;
}

.whatsnew-tile-subtitle {
    opacity: .8;
    font-size: 0.95rem;
    line-height: 1.2;
}

.whatsnew-tile-preview {
    line-height: 1.25;
}
/* What's New page list spacing */

.whatsnew-list {
    display: grid;
    gap: 12px;
}
/* Mobile: keep header tight */
/* Ensure Bootstrap buttons render correctly even if anchor styles were customized */
/* Ensure Bootstrap button styles aren't overridden by global anchor rules */
a.btn.btn-primary,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus,
a.btn.btn-primary:active {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    text-decoration: none !important;
}

@media (max-width: 640px) {
    .brand-tagline {
        display: none;
    }

    .brand-logo-wrap--header {
        width: 56px;
        height: 56px;
        border-radius: 14px;
    }
}

/* ========================= FIX: Ensure primary buttons are visible site-wide ========================= */
/* Bootstrap 5 uses CSS vars for buttons; override those AND the physical properties to prevent
   "white on white" or transparent states caused by other rules later in the cascade. */

.btn.btn-primary {
    /* Bootstrap variables */
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-accent, #2e7d32);
    --bs-btn-border-color: var(--brand-accent, #2e7d32);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-accent-hover, #1e3d2b);
    --bs-btn-hover-border-color: var(--brand-accent-hover, #1e3d2b);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-accent-hover, #1e3d2b);
    --bs-btn-active-border-color: var(--brand-accent-hover, #1e3d2b);
    /* Physical properties (defensive) */
    background-color: var(--brand-accent, #2e7d32) !important;
    border-color: var(--brand-accent, #2e7d32) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important; /* helps on some Windows/Edge cases */
}

    .btn.btn-primary:hover,
    .btn.btn-primary:focus {
        background-color: var(--brand-accent-hover, #1e3d2b) !important;
        border-color: var(--brand-accent-hover, #1e3d2b) !important;
        color: #fff !important;
    }
/* ========================= FIX: Secondary buttons (dark neutral) ========================= */

.btn.btn-secondary {
    /* Bootstrap variables */
    --bs-btn-color: #fff;
    --bs-btn-bg: #4a4a4a; /* dark gray */
    --bs-btn-border-color: #4a4a4a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3a3a3a; /* slightly darker */
    --bs-btn-hover-border-color: #3a3a3a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2f2f2f;
    --bs-btn-active-border-color: #2f2f2f;
    /* Physical properties (defensive) */
    background-color: #4a4a4a !important;
    border-color: #4a4a4a !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

    .btn.btn-secondary:hover,
    .btn.btn-secondary:focus {
        background-color: #3a3a3a !important;
        border-color: #3a3a3a !important;
        color: #fff !important;
    }

/* ========================= FIX: Outline button visibility site-wide ========================= */
/* btn-outline-secondary was nearly invisible (faint beige border from base .btn rule).
   Give all outline variants strong borders, clear hover states, and consistent sizing. */

.btn.btn-outline-secondary {
    --bs-btn-color: #4a4a4a;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #4a4a4a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4a4a4a;
    --bs-btn-hover-border-color: #4a4a4a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3a3a3a;
    --bs-btn-active-border-color: #3a3a3a;
    background-color: transparent !important;
    border-color: #4a4a4a !important;
    border-width: 1.5px !important;
    color: #4a4a4a !important;
    -webkit-text-fill-color: #4a4a4a !important;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

    .btn.btn-outline-secondary:hover,
    .btn.btn-outline-secondary:focus {
        background-color: #4a4a4a !important;
        border-color: #4a4a4a !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

.btn.btn-outline-primary {
    --bs-btn-color: var(--brand-accent, #2e7d32);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--brand-accent, #2e7d32);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-accent, #2e7d32);
    --bs-btn-hover-border-color: var(--brand-accent, #2e7d32);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-accent-hover, #1e3d2b);
    --bs-btn-active-border-color: var(--brand-accent-hover, #1e3d2b);
    background-color: transparent !important;
    border-color: var(--brand-accent, #2e7d32) !important;
    border-width: 1.5px !important;
    color: var(--brand-accent, #2e7d32) !important;
    -webkit-text-fill-color: var(--brand-accent, #2e7d32) !important;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

    .btn.btn-outline-primary:hover,
    .btn.btn-outline-primary:focus {
        background-color: var(--brand-accent, #2e7d32) !important;
        border-color: var(--brand-accent, #2e7d32) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

.btn.btn-outline-danger {
    --bs-btn-color: #b00020;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #b00020;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b00020;
    --bs-btn-hover-border-color: #b00020;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8c001a;
    --bs-btn-active-border-color: #8c001a;
    background-color: transparent !important;
    border-color: #b00020 !important;
    border-width: 1.5px !important;
    color: #b00020 !important;
    -webkit-text-fill-color: #b00020 !important;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

    .btn.btn-outline-danger:hover,
    .btn.btn-outline-danger:focus {
        background-color: #b00020 !important;
        border-color: #b00020 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

/* ========================= FIX: Footer overlap (Bootstrap footer class) ========================= */
html, body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Your <main class="flex-fill"> will now actually "fill" */
main.flex-fill {
    flex: 1 0 auto;
}

/* Override any legacy template rule that makes the footer absolute/fixed */
footer.footer {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    flex-shrink: 0;
    padding: 14px 0;
    margin-top: 20px;
}
/* ===================== Client Portal - lightweight chart polish ===================== */

/* Smoother progress bars for "chart-like" visuals */
.progress {
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.06);
}

.progress-bar {
    border-radius: 999px;
}

/* AI Insights card tone -> also tint the progress bar inside it (no JS needed) */
.border-success .progress-bar {
    background-color: #198754;
}
/* Bootstrap success */
.border-warning .progress-bar {
    background-color: #ffc107;
}
/* Bootstrap warning */
.border-secondary .progress-bar {
    background-color: #6c757d;
}
/* Bootstrap secondary */

/* Make spark bars feel more like a chart */
.tt-spark .progress {
    height: 8px;
}

.tt-spark .progress-bar {
    opacity: 0.95;
}

.tt-spark .tt-spark-row {
    margin-bottom: 8px;
}
/* =======================================================================
   AI DASHBOARDS (Client + Admin) - consolidated visuals + Pathfinders accent
   Paste at END of site.css to override earlier duplicates safely.
   ======================================================================= */

:root {
    /* Pathfinders / PAG accent extracted from your DevTools (--fl-accent) */
    --pag-accent: #2b7bb9;
    --pag-accent-hover: #2b7bb9; /* refine later if you capture hover */
}

/* Small header badge */
.tt-badge-ai {
    background: rgba(43,123,185,0.12);
    border: 1px solid rgba(43,123,185,0.30);
    color: #333333;
    font-weight: 650;
    letter-spacing: 0.2px;
}

/* "Chart-like" progress bars (Option A) */
.progress {
    border-radius: 999px;
    background-color: rgba(0,0,0,0.06);
}

.progress-bar {
    border-radius: 999px;
    background-color: var(--pag-accent);
}

/* Tone-based overrides (used by AI banner card borders) */
.border-success .progress-bar {
    background-color: var(--pag-accent);
}
/* positive */
.border-warning .progress-bar {
    background-color: #f5b301;
}
/* caution */
.border-danger .progress-bar {
    background-color: #cf2e2e;
}
/* critical */
.border-secondary .progress-bar {
    background-color: #6c757d;
}
/* neutral */

/* Weekly spark bars */
.tt-spark .progress {
    height: 8px;
}

.tt-spark .progress-bar {
    opacity: 0.95;
}

.tt-spark .tt-spark-row {
    margin-bottom: 8px;
}
/* Brand link wrapper */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    color: inherit; /* inherits navbar text color */
}

/* icon container */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    overflow: visible;
}

    .brand-mark svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
    }

/* wordmark */
.brand-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: .5px;
    line-height: 1;
    font-size: 1.25rem;
    white-space: nowrap;
}

/* nice hover, especially on dark navbar */
.navbar .brand:hover,
.navbar .brand:focus {
    opacity: .95;
    text-decoration: none;
}

/* ── Event Ticker ── */
.event-ticker {
    background: linear-gradient(135deg, var(--brand-accent-soft, #e8f5e9) 0%, #e8f5e9 100%);
    border: 1px solid var(--brand-gold, #66bb6a);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.event-ticker-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: rgba(69, 80, 26, .08);
    border-bottom: 1px solid rgba(199, 184, 73, .3);
    font-size: .8rem;
    font-weight: 700;
    color: var(--brand-accent, #2e7d32);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.event-ticker-header .ticker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-accent, #2e7d32);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.event-ticker-body {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.event-ticker-scroll {
    display: inline-flex;
    gap: 3rem;
    padding: .55rem .75rem;
    animation: ticker-scroll 30s linear infinite;
}

.event-ticker-scroll:hover {
    animation-play-state: paused;
}

.event-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    font-size: .85rem;
    color: var(--text-primary, #1b2e1f);
}

.event-ticker-item .event-name {
    font-weight: 600;
}

.event-ticker-item .event-desc {
    color: var(--text-muted, #4a6b50);
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-ticker-item .event-separator {
    color: var(--brand-gold, #66bb6a);
    font-weight: 700;
}

.event-ticker-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--brand-accent, #2e7d32);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}

.event-ticker-link:hover {
    background: var(--brand-accent-hover, #1e3d2b);
    color: #fff;
    text-decoration: none;
}

/* Static list fallback for few events */
.event-ticker-static {
    padding: .55rem .75rem;
}

.event-ticker-static-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem 0;
    font-size: .85rem;
    color: var(--text-primary, #1b2e1f);
}

.event-ticker-static-item + .event-ticker-static-item {
    border-top: 1px solid rgba(199, 184, 73, .2);
}

.event-ticker-static-item .event-name {
    font-weight: 600;
}

.event-ticker-static-item .event-desc {
    color: var(--text-muted, #4a6b50);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-ticker-badge-draft {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 4px;
    background: rgba(108, 117, 125, .15);
    color: #495057;
    font-size: .7rem;
    font-weight: 600;
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}