/* =============================================================
   HeyItsMOO PMS — pulled from heyitsmoo.com header.php
   This stylesheet is the SAAS app version of the marketing brand.
   ============================================================= */

:root {
    --cow-black:     #1a1a1a;
    --cow-white:     #ffffff;
    --pasture-green: #4ade80;
    --accent-yellow: #facc15;
    --bg-light:      #f0fdf4;
    --pasture-deep:  #16a34a;
    --soft-grey:     #4b5563;

    --bs-primary: var(--pasture-green);
    --bs-primary-rgb: 74,222,128;
    --bs-body-bg: var(--bg-light);
    --bs-body-color: var(--cow-black);
    --bs-body-font-family: 'Nunito', sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--bg-light);
    background-image: radial-gradient(var(--pasture-green) 1px, transparent 1px);
    background-size: 40px 40px;
    color: var(--cow-black);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.fw-black { font-weight: 900 !important; }
.tracking-widest { letter-spacing: 0.15em; }
.tracking-tighter { letter-spacing: -0.02em; }

.text-pasture-green { color: var(--pasture-green) !important; }
.bg-pasture-green   { background-color: var(--pasture-green) !important; }
.text-cow-black     { color: var(--cow-black) !important; }
.bg-cow-black       { background-color: var(--cow-black) !important; }
.text-accent-yellow { color: var(--accent-yellow) !important; }
.bg-accent-yellow   { background-color: var(--accent-yellow) !important; }
.border-pasture-green { border-color: var(--pasture-green) !important; }
.border-cow-black     { border-color: var(--cow-black) !important; }
.border-dashed { border-style: dashed !important; }

a { color: var(--pasture-deep); font-weight: 700; }
a:hover { color: var(--cow-black); }

.hover-yellow { transition: color 0.2s; }
.hover-yellow:hover { color: var(--accent-yellow) !important; }

/* ---------- buttons (the chunky pill) ---------- */
.btn-moo, button.btn-moo, a.btn-moo, input.btn-moo {
    background-color: var(--pasture-green);
    color: var(--cow-black);
    font-weight: 900;
    font-family: 'Nunito', sans-serif;
    border: 3px solid var(--cow-black);
    border-radius: 50px;
    box-shadow: 4px 4px 0 var(--cow-black);
    transition: all 0.2s;
    padding: 0.8rem 1.8rem;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
}
.btn-moo:hover {
    background-color: var(--accent-yellow);
    transform: translate(-2px,-2px);
    box-shadow: 6px 6px 0 var(--cow-black);
    color: var(--cow-black);
}
.btn-moo:active {
    transform: translate(2px,2px);
    box-shadow: 1px 1px 0 var(--cow-black);
}
.btn-moo-sm { padding: 0.4rem 1rem; font-size: 0.875rem; box-shadow: 3px 3px 0 var(--cow-black); }
.btn-moo-sm:hover { box-shadow: 4px 4px 0 var(--cow-black); }
.btn-moo-light {
    background-color: var(--cow-white);
    color: var(--cow-black);
}
.btn-moo-light:hover { background-color: var(--accent-yellow); }
.btn-moo-danger {
    background-color: #fee2e2;
    color: #991b1b;
}
.btn-moo-danger:hover { background-color: #fecaca; color: #991b1b; }
.btn-moo-dark {
    background-color: var(--cow-black);
    color: var(--cow-white);
}
.btn-moo-dark:hover { background-color: var(--accent-yellow); color: var(--cow-black); }

/* override Bootstrap btn-primary so internal Bootstrap forms also look right */
.btn-primary {
    background-color: var(--pasture-green) !important;
    border-color: var(--cow-black) !important;
    color: var(--cow-black) !important;
    font-weight: 900;
    border-radius: 50px;
    border-width: 3px;
    box-shadow: 4px 4px 0 var(--cow-black);
    padding: 0.6rem 1.5rem;
}
.btn-primary:hover {
    background-color: var(--accent-yellow) !important;
    color: var(--cow-black) !important;
}

/* ---------- cards (the chunky 8px green shadow) ---------- */
.card-moo, .card.card-moo {
    background: var(--cow-white);
    border: 4px solid var(--cow-black);
    border-radius: 1rem;
    box-shadow: 8px 8px 0 var(--pasture-green);
    transition: all 0.2s;
}
.card-moo:hover {
    transform: translateY(-5px);
    box-shadow: 8px 12px 0 var(--accent-yellow);
}
.card-moo-flat {  /* no hover lift, e.g. forms */
    background: var(--cow-white);
    border: 4px solid var(--cow-black);
    border-radius: 1rem;
    box-shadow: 8px 8px 0 var(--pasture-green);
}

/* Plain bootstrap cards keep something gentler */
.card {
    background: var(--cow-white);
    border: 3px solid var(--cow-black);
    border-radius: 0.85rem;
    box-shadow: 4px 4px 0 var(--cow-black);
}
.card-header {
    background: var(--bg-light) !important;
    border-bottom: 3px solid var(--cow-black) !important;
    border-radius: 0.6rem 0.6rem 0 0 !important;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
}

/* ---------- alerts ---------- */
.alert-moo, .alert-error {
    background: var(--cow-white);
    border: 4px solid var(--cow-black);
    border-radius: 1rem;
    box-shadow: 6px 6px 0 var(--pasture-green);
    color: var(--cow-black);
    font-weight: 700;
}
.alert-error { box-shadow: 6px 6px 0 #f87171; background: #fef2f2; }
.alert {
    border: 3px solid var(--cow-black);
    border-radius: 0.85rem;
    font-weight: 700;
}
.alert-success { background: #dcfce7; color: var(--cow-black); }
.alert-danger  { background: #fee2e2; color: #991b1b; }

/* ---------- forms ---------- */
.form-control, .form-select {
    border: 3px solid var(--cow-black);
    border-radius: 0.7rem;
    padding: 0.7rem 1rem;
    background: var(--cow-white);
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
}
.form-control:focus, .form-select:focus {
    border-color: var(--pasture-deep);
    box-shadow: 4px 4px 0 var(--pasture-green);
    transform: translate(-1px,-1px);
}
.form-control-lg, .form-select-lg { padding: 0.9rem 1.1rem; font-size: 1.1rem; }
.form-label { font-weight: 900; }

/* ---------- auth pages ---------- */
.auth-bg {
    min-height: 100vh;
    background-color: var(--bg-light);
    background-image: radial-gradient(var(--pasture-green) 1px, transparent 1px);
    background-size: 40px 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* ---------- navbar (sticky app nav) ---------- */
#site-header { transition: transform 0.3s ease-in-out; z-index: 1050; }

.app-navbar {
    background: var(--cow-white) !important;
    border-bottom: 4px solid var(--pasture-green);
    padding: 0.75rem 0;
}
.app-navbar .navbar-brand {
    font-family: 'Fredoka', sans-serif;
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--cow-black);
    text-decoration: none;
}
.app-navbar .nav-link {
    color: var(--soft-grey) !important;
    font-weight: 800;
    position: relative;
    text-decoration: none;
    padding: 0.5rem 0.9rem !important;
    border-radius: 0.4rem;
}
.app-navbar .nav-link::after {
    content: ''; position: absolute; width: 0; height: 3px; bottom: 0px; left: 0;
    background-color: var(--pasture-green); transition: width 0.3s;
}
.app-navbar .nav-link:hover::after, .app-navbar .nav-link.active::after { width: 100%; }
.app-navbar .nav-link:hover, .app-navbar .nav-link.active { color: var(--cow-black) !important; }

.dropdown-menu {
    border: 3px solid var(--cow-black);
    border-radius: 0.85rem;
    box-shadow: 6px 6px 0 var(--cow-black);
    padding: 0.5rem;
    font-weight: 700;
}
.dropdown-item { border-radius: 0.4rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-light); color: var(--cow-black); }

/* ---------- workspace switcher ---------- */
.ws-switcher {
    background: var(--bg-light);
    border: 3px solid var(--cow-black);
    border-radius: 0.7rem;
    padding: 0.4rem 0.9rem;
    font-weight: 800;
    font-family: 'Fredoka', sans-serif;
    color: var(--cow-black);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.ws-switcher:hover { background: var(--accent-yellow); color: var(--cow-black); }
.ws-switcher .ws-emoji { font-size: 1.1rem; }

/* ---------- avatars ---------- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--avatar-bg, var(--pasture-green));
    color: var(--cow-black);
    font-weight: 900;
    border: 2px solid var(--cow-black);
    flex-shrink: 0;
    font-family: 'Nunito', sans-serif;
}
.avatar-more {
    background: var(--cow-black) !important;
    color: var(--cow-white);
    border: 2px solid var(--cow-black);
}

/* ---------- stat cards ---------- */
.stat-card {
    background: var(--cow-white);
    border: 4px solid var(--cow-black);
    border-radius: 1rem;
    box-shadow: 6px 6px 0 var(--pasture-green);
    position: relative;
    overflow: hidden;
    transition: all 0.2s;
    padding: 1.25rem;
}
.stat-card:hover {
    transform: translate(-2px,-2px);
    box-shadow: 8px 8px 0 var(--accent-yellow);
}
.stat-card .stat-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 44px;
    opacity: 0.18;
}
.stat-card .stat-value {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.05;
    margin-top: 4px;
    color: var(--cow-black);
}
.stat-card .stat-label {
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--soft-grey);
}

/* ---------- project tile ---------- */
.project-tile {
    background: var(--cow-white);
    border: 4px solid var(--cow-black);
    border-left: 12px solid var(--accent, var(--pasture-green));
    border-radius: 1rem;
    box-shadow: 6px 6px 0 var(--cow-black);
    transition: all 0.2s;
    padding: 1.1rem 1.25rem;
}
.project-tile:hover {
    transform: translate(-2px,-2px);
    box-shadow: 8px 8px 0 var(--accent-yellow);
}

/* ---------- badges ---------- */
.badge {
    border: 2px solid var(--cow-black);
    border-radius: 0.4rem;
    padding: 0.25rem 0.55rem;
    font-weight: 900;
    font-family: 'Nunito', sans-serif;
}
.badge.text-bg-primary    { background: var(--pasture-green) !important; color: var(--cow-black) !important; }
.badge.text-bg-success    { background: #86efac !important;             color: var(--cow-black) !important; }
.badge.text-bg-info       { background: #bae6fd !important;             color: var(--cow-black) !important; }
.badge.text-bg-warning    { background: var(--accent-yellow) !important; color: var(--cow-black) !important; }
.badge.text-bg-danger     { background: #fca5a5 !important;             color: var(--cow-black) !important; }
.badge.text-bg-secondary  { background: #e5e7eb !important;             color: var(--cow-black) !important; }
.badge.text-bg-dark       { background: var(--cow-black) !important;    color: var(--cow-white) !important; }
.badge.text-bg-light      { background: var(--cow-white) !important;    color: var(--cow-black) !important; }

/* ---------- dots ---------- */
.dot {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--cow-black);
    flex-shrink: 0;
}
.status-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    border: 2px solid var(--cow-black);
}
.status-dot.status-todo        { background: #e5e7eb; }
.status-dot.status-in_progress { background: var(--pasture-green); }
.status-dot.status-review      { background: #bae6fd; }
.status-dot.status-done        { background: #86efac; }

.pulse-dot {
    width: 10px; height: 10px;
    background-color: var(--pasture-green);
    border: 2px solid var(--cow-black);
    border-radius: 50%;
    display: inline-block;
    animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* ---------- kanban ---------- */
.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(260px, 1fr));
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 8px;
}
@media (max-width: 991px) { .kanban-board { grid-template-columns: repeat(4, 280px); } }

.kanban-col {
    background: var(--cow-white);
    border: 4px solid var(--cow-black);
    border-radius: 1rem;
    box-shadow: 6px 6px 0 var(--cow-black);
    display: flex;
    flex-direction: column;
    min-height: 200px;
}
.kanban-col-header {
    padding: 0.85rem 1rem;
    border-bottom: 3px solid var(--cow-black);
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-light);
    border-radius: 0.85rem 0.85rem 0 0;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
}
.kanban-col-body {
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    min-height: 60px;
}
.kanban-card {
    display: block;
    background: var(--cow-white);
    border: 3px solid var(--cow-black);
    border-radius: 0.65rem;
    padding: 0.75rem 0.9rem;
    box-shadow: 3px 3px 0 var(--cow-black);
    transition: all 0.15s;
    cursor: grab;
    color: var(--cow-black);
    text-decoration: none;
}
.kanban-card:hover {
    transform: translate(-1px,-1px);
    box-shadow: 4px 4px 0 var(--accent-yellow);
    color: var(--cow-black);
}
.kanban-card.sortable-ghost { opacity: .35; background: var(--bg-light); }
.kanban-card.sortable-chosen { cursor: grabbing; }
.kanban-card.sortable-drag {
    transform: rotate(2deg);
    box-shadow: 8px 8px 0 var(--accent-yellow);
}
.kanban-empty {
    border: 3px dashed rgba(26,26,26,0.2);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    color: rgba(26,26,26,0.5);
    font-weight: 700;
    font-size: 0.85rem;
}

/* ---------- comments ---------- */
.comment-bubble {
    background: var(--bg-light);
    border: 3px solid var(--cow-black);
    border-radius: 0.85rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
}

/* ---------- list groups ---------- */
.list-group { border: 3px solid var(--cow-black); border-radius: 0.85rem; overflow: hidden; }
.list-group-item {
    border: 0 !important;
    border-bottom: 2px solid var(--cow-black) !important;
    padding: 1rem 1.2rem;
    font-weight: 600;
}
.list-group-item:last-child { border-bottom: 0 !important; }
.list-group-item-action:hover { background: var(--bg-light); }

/* ---------- tables ---------- */
.table-wrapper {
    border: 3px solid var(--cow-black);
    border-radius: 0.85rem;
    overflow: hidden;
    background: var(--cow-white);
}
.table { color: var(--cow-black); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 0.85rem 1rem; }
.table > thead {
    background: var(--cow-black) !important;
    color: var(--cow-white);
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}
.table > thead th { color: var(--cow-white) !important; border-bottom: 0 !important; }
.table > tbody > tr { border-bottom: 2px solid #e5e7eb; }
.table > tbody > tr:last-child { border-bottom: 0; }

/* ---------- toasts ---------- */
.toast-stack {
    position: fixed;
    top: 80px; right: 20px;
    z-index: 2000;
    display: flex; flex-direction: column;
    gap: 12px;
    max-width: 380px;
}
.moo-toast {
    background: var(--cow-white);
    border: 4px solid var(--cow-black);
    border-radius: 0.85rem;
    box-shadow: 6px 6px 0 var(--pasture-green);
    padding: 0.85rem 1.1rem;
    display: flex; align-items: center; gap: 0.7rem;
    animation: toastIn .3s cubic-bezier(.34,1.56,.64,1) both;
    font-weight: 700;
}
.moo-toast.success { background: #dcfce7; box-shadow: 6px 6px 0 var(--pasture-green); }
.moo-toast.error   { background: #fee2e2; box-shadow: 6px 6px 0 #f87171; }
.moo-toast .moo-toast-mark {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--cow-white);
    border: 3px solid var(--cow-black);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-weight: 900;
}
.moo-toast.success .moo-toast-mark { background: var(--pasture-green); }
.moo-toast.error .moo-toast-mark { background: #fca5a5; }
@keyframes toastIn {
    from { transform: translateX(30px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* ---------- modals ---------- */
.modal-content {
    border: 4px solid var(--cow-black);
    border-radius: 1rem;
    box-shadow: 10px 10px 0 var(--pasture-green);
}
.modal-header { border-bottom: 3px solid var(--cow-black); font-family: 'Fredoka', sans-serif; font-weight: 700; }
.modal-footer { border-top: 3px solid var(--cow-black); }
.modal-title { font-family: 'Fredoka', sans-serif; font-weight: 700; }

/* ---------- helpers ---------- */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.min-w-0 { min-width: 0; }
.task-description { white-space: pre-wrap; word-wrap: break-word; font-weight: 600; }
hr { opacity: .15; border-top: 3px solid var(--cow-black); }

.brand-tag {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--soft-grey);
    font-weight: 900;
}

/* ---------- footer ---------- */
.app-footer {
    background: var(--cow-black);
    color: var(--cow-white);
    border-top: 20px solid var(--pasture-green);
    margin-top: 4rem;
    padding: 3rem 0 0;
}
.app-footer h5, .app-footer h6 { font-family: 'Fredoka', sans-serif; }
.app-footer .footer-tag {
    font-family: 'Fredoka', sans-serif;
    font-weight: 900;
    color: var(--accent-yellow);
    font-style: italic;
}
.app-footer .footer-heading {
    font-family: 'Fredoka', sans-serif;
    font-weight: 900;
    color: var(--pasture-green);
    border-bottom: 2px dashed #6b7280;
    padding-bottom: 0.4rem;
    display: inline-block;
}
.app-footer .footer-credit {
    background: #000;
    color: rgba(255,255,255,0.5);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1rem 0;
    margin-top: 2rem;
    text-align: center;
    font-weight: 900;
    letter-spacing: 0.15em;
    font-size: 0.7rem;
    text-transform: uppercase;
}
.app-footer .footer-credit .build-id {
    font-family: monospace;
    font-size: 10px;
    opacity: 0.4;
    text-transform: uppercase;
    margin-top: 4px;
}
.app-footer .btn-warning-moo {
    background-color: var(--accent-yellow);
    color: var(--cow-black);
    font-weight: 900;
    border: 3px solid var(--cow-black);
    border-radius: 0.5rem;
    box-shadow: 4px 4px 0 var(--cow-black);
    padding: 0.5rem 1.2rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}
.app-footer .btn-warning-moo:hover {
    background-color: var(--cow-white);
    color: var(--cow-black);
    transform: translate(-1px,-1px);
    box-shadow: 5px 5px 0 var(--cow-black);
}

/* organic asymmetric border (used for hero accent decorations) */
.organic-border { border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important; }
.btn-shadow { box-shadow: 4px 4px 0 var(--cow-black); }

/* ============================================================
   Layered header — 2-row clean design (logged-in app)
   Row 1 (utility, dark, ~36px) + Row 2 (main nav, white, ~64px)
   ============================================================ */
#site-header { z-index: 1050; }

/* ----- Row 1: utility bar ----- */
.util-bar {
    background: var(--cow-black);
    color: var(--cow-white);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transition: max-height .35s ease, opacity .25s ease, padding .35s ease;
    max-height: 60px;
    overflow: hidden;
}
.util-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 24px;
    max-width: 1500px;
    margin: 0 auto;
}
.util-left, .util-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.util-right { flex-wrap: nowrap; flex-shrink: 0; }
.util-sep { opacity: 0.4; }
.util-plan-pill {
    background: var(--pasture-green);
    color: var(--cow-black);
    border: 1.5px solid var(--cow-black);
    border-radius: 4px;
    padding: 1.5px 7px;
    font-weight: 900;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.util-icon {
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.18);
    color: var(--cow-white);
    border-radius: 6px;
    height: 28px;
    padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    flex-shrink: 0;
    transition: all .15s;
}
.util-icon:hover { background: var(--accent-yellow); color: var(--cow-black); border-color: var(--cow-black); }
.util-icon kbd {
    background: rgba(255,255,255,0.12);
    border: 0;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    font-family: 'Nunito', sans-serif;
    color: rgba(255,255,255,0.7);
}
.util-icon:hover kbd { background: var(--cow-black); color: var(--accent-yellow); }
#site-header.scrolled .util-bar { max-height: 0; padding: 0 !important; opacity: 0; }
.util-badge {
    position: absolute;
    top: -5px; right: -5px;
    background: #ef4444;
    border: 1.5px solid var(--cow-black);
    border-radius: 999px;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    padding: 1px 4px;
    min-width: 16px;
    text-align: center;
    line-height: 1.1;
}
.util-link { color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 800; padding: 0 6px; transition: color .15s; }
.util-link:hover { color: var(--accent-yellow); }
.util-link.util-cta { color: var(--accent-yellow); text-decoration: underline; }

/* ----- Row 2: main app nav ----- */
.sub-bar {
    background: var(--cow-white);
    border-bottom: 4px solid var(--pasture-green);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.sub-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    max-width: 1500px;
    margin: 0 auto;
}
.sub-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-family: 'Fredoka', sans-serif;
    text-decoration: none;
    flex-shrink: 0;
}
.sub-brand-emoji { font-size: 24px; }
.sub-brand-name  { font-weight: 700; font-size: 22px; color: var(--pasture-deep); }
.sub-brand-sub   { font-size: 12px; color: var(--soft-grey); font-family: 'Nunito', sans-serif; font-weight: 700; }
.sub-toggle {
    background: var(--bg-light);
    border: 2.5px solid var(--cow-black);
    border-radius: 8px;
    width: 38px; height: 38px;
    margin-left: auto;
    color: var(--cow-black);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}
.sub-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-grow: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav a {
    position: relative;
    color: var(--soft-grey);
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 8px;
    white-space: nowrap;
    transition: all .15s;
}
.sub-nav a:hover { color: var(--cow-black); background: var(--bg-light); }
.sub-nav a.active {
    color: var(--cow-black);
    background: var(--bg-light);
    box-shadow: inset 0 -3px 0 var(--pasture-deep);
}
.sub-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.user-pill {
    background: var(--bg-light);
    border: 2.5px solid var(--cow-black);
    border-radius: 50px;
    padding: 4px 14px 4px 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    color: var(--cow-black);
    cursor: pointer;
    transition: all .15s;
}
.user-pill:hover { background: var(--accent-yellow); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--cow-black); }
.user-pill::after { font-size: 0.7em; opacity: 0.6; }
.user-pill-name { line-height: 1; }

/* Header spacer */
.header-spacer { height: calc(38px + 64px); }   /* utility + sub */

/* Main content area — consistent spacing across all pages */
.app-main {
    max-width: 1500px;
    margin: 0 auto;
    padding: 28px 24px;
}

/* Mobile (≤991px) */
@media (max-width: 991px) {
    .util-bar { font-size: 11px; }
    .util-inner { padding: 7px 14px; gap: 10px; }
    .util-left strong { max-width: 130px !important; }
    .sub-inner { padding: 10px 14px; gap: 10px; flex-wrap: nowrap; position: relative; }
    .sub-brand-name { font-size: 18px; }
    .sub-brand-emoji { font-size: 20px; }
    .sub-nav {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--cow-white);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 12px;
        border-bottom: 4px solid var(--pasture-green);
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease, padding .25s ease;
        z-index: 1100;
    }
    .sub-nav.open { max-height: 520px; padding: 12px; }
    .sub-nav a { padding: 12px 16px; font-size: 16px; border-radius: 10px; margin-bottom: 2px; }
    .sub-nav a.active { background: var(--bg-light); box-shadow: inset 4px 0 0 var(--pasture-deep); }
    .header-spacer { height: calc(34px + 56px); }
    .user-pill { padding: 3px 10px 3px 3px; }
    .app-main { padding: 18px 14px; }
}
@media (max-width: 575px) {
    .util-right .util-link { display: none; }
    .util-icon kbd { display: none; }
    .util-icon { padding: 0 7px; height: 26px; font-size: 12px; }
    .util-left strong { max-width: 100px !important; }
}

/* ============================================================
   Search pill + modal
   ============================================================ */
.search-pill {
    background: var(--bg-light);
    border: 3px solid var(--cow-black);
    border-radius: 50px;
    padding: 6px 14px;
    font-weight: 700;
    color: var(--soft-grey);
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito', sans-serif;
    min-width: 240px;
}
.search-pill:hover { background: var(--accent-yellow); color: var(--cow-black); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--cow-black); }
.search-pill kbd {
    background: var(--cow-white);
    border: 2px solid var(--cow-black);
    border-radius: 4px;
    padding: 0 5px;
    font-size: 0.75rem;
    font-family: 'Nunito', sans-serif;
    color: var(--cow-black);
}
.search-modal {
    border: 4px solid var(--cow-black);
    border-radius: 1.2rem;
    box-shadow: 10px 10px 0 var(--pasture-green);
}
.search-modal .form-control { box-shadow: none; }
.search-modal .form-control:focus { box-shadow: none; transform: none; border-color: transparent; }
.search-modal .modal-header { padding: 1rem 1.2rem; }
.search-section-head {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--soft-grey);
    margin: 1rem 0 0.5rem;
}
.search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.65rem 0.8rem;
    border-radius: 0.6rem;
    text-decoration: none;
    color: var(--cow-black);
    font-weight: 700;
    transition: background 0.15s;
}
.search-result:hover { background: var(--bg-light); color: var(--cow-black); }
.search-result.active { background: var(--accent-yellow); }

/* ============================================================
   Icon buttons (theme toggle, bell)
   ============================================================ */
.btn-icon {
    background: var(--bg-light);
    border: 3px solid var(--cow-black);
    border-radius: 0.6rem;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--cow-black);
    cursor: pointer;
    text-decoration: none;
    font-size: 1.05rem;
    transition: all 0.15s;
    position: relative;
}
.btn-icon:hover { background: var(--accent-yellow); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--cow-black); }
.notif-badge {
    position: absolute;
    top: -8px; right: -8px;
    background: #ef4444;
    color: var(--cow-white);
    font-weight: 900;
    font-size: 0.7rem;
    border: 2px solid var(--cow-black);
    border-radius: 999px;
    padding: 1px 6px;
    min-width: 22px;
    text-align: center;
    line-height: 1.1;
}

/* Dark/light icon swap */
html:not(.dark) .theme-dark-icon { display: none; }
html.dark .theme-light-icon { display: none; }

/* ============================================================
   Markdown content styling
   ============================================================ */
.md-content h3 { font-family: 'Fredoka', sans-serif; font-weight: 700; margin: 1rem 0 0.5rem; }
.md-content h4 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.15rem; margin: 0.85rem 0 0.4rem; }
.md-content h5 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.05rem; margin: 0.7rem 0 0.4rem; }
.md-content p { margin-bottom: 0.7rem; line-height: 1.55; font-weight: 600; }
.md-content p:last-child { margin-bottom: 0; }
.md-content ul.md-list { padding-left: 1.5rem; margin: 0.5rem 0; }
.md-content li { font-weight: 600; margin-bottom: 0.2rem; }
.md-content code.md-inline {
    background: var(--bg-light);
    color: var(--cow-black);
    border: 2px solid var(--cow-black);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.875em;
    font-weight: 700;
}
.md-content pre.md-code {
    background: var(--cow-black);
    color: #86efac;
    border: 3px solid var(--cow-black);
    border-radius: 0.65rem;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    overflow-x: auto;
    margin: 0.75rem 0;
}
.md-content pre.md-code code { color: inherit; background: transparent; border: 0; padding: 0; }
.md-content blockquote {
    border-left: 4px solid var(--pasture-green);
    background: var(--bg-light);
    padding: 0.5rem 0.9rem;
    margin: 0.5rem 0;
    font-style: italic;
    font-weight: 700;
}
.md-content a { color: var(--pasture-deep); text-decoration: underline; font-weight: 700; }
.md-content .md-mention {
    background: var(--accent-yellow);
    border: 1.5px solid var(--cow-black);
    border-radius: 4px;
    padding: 0 6px;
    font-weight: 900;
    font-size: 0.9em;
}

/* ============================================================
   Calendar grid
   ============================================================ */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background: var(--cow-black);
    border: 4px solid var(--cow-black);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 6px 6px 0 var(--pasture-green);
}
.cal-head {
    background: var(--cow-black);
    color: var(--cow-white);
    text-align: center;
    padding: 0.5rem 0;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cal-cell {
    background: var(--cow-white);
    min-height: 110px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.cal-cell.cal-empty { background: var(--bg-light); opacity: 0.4; }
.cal-cell.cal-today { background: #fef9c3; }
.cal-day { font-weight: 900; font-family: 'Fredoka', sans-serif; font-size: 0.95rem; }
.cal-task {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--bg-light);
    border-left: 4px solid var(--accent, var(--pasture-green));
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--cow-black);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1.5px solid var(--cow-black);
    border-left-width: 4px;
}
.cal-task:hover { background: var(--accent-yellow); color: var(--cow-black); }
.cal-more { font-size: 0.7rem; font-weight: 900; color: var(--soft-grey); }
@media (max-width: 768px) {
    .cal-cell { min-height: 70px; }
    .cal-task { font-size: 0.65rem; }
}

/* ============================================================
   DARK MODE — swaps the CSS variables
   ============================================================ */
html.dark {
    --cow-black: #f5f5f5;
    --cow-white: #1c1f23;
    --bg-light:  #14171a;
    --soft-grey: #9ca3af;
}
html.dark body {
    background-color: #14171a;
    background-image: radial-gradient(rgba(74,222,128,0.4) 1px, transparent 1px);
    color: #f5f5f5;
}
html.dark .text-secondary { color: #d1d5db !important; }
html.dark a { color: #86efac; }
html.dark .navbar.app-navbar { background: #1c1f23 !important; }
html.dark .navbar.app-navbar .navbar-brand { color: #f5f5f5; }
html.dark .navbar.app-navbar .nav-link { color: #d1d5db !important; }
html.dark .navbar.app-navbar .nav-link:hover, html.dark .navbar.app-navbar .nav-link.active { color: #fff !important; }
html.dark .card-moo, html.dark .card-moo-flat,
html.dark .stat-card, html.dark .project-tile,
html.dark .feature-card, html.dark .pricing-card {
    background: #1c1f23;
    border-color: #f5f5f5;
    color: #f5f5f5;
}
html.dark .form-control, html.dark .form-select { background: #23272d; color: #f5f5f5; border-color: #f5f5f5; }
html.dark .modal-content, html.dark .search-modal { background: #1c1f23; }
html.dark .dropdown-menu { background: #1c1f23; border-color: #f5f5f5; }
html.dark .dropdown-item { color: #f5f5f5; }
html.dark .dropdown-item:hover { background: #23272d; color: #f5f5f5; }
html.dark .table-wrapper { background: #1c1f23; }
html.dark .kanban-col { background: #1c1f23; }
html.dark .kanban-col-header { background: #14171a; color: #f5f5f5; }
html.dark .kanban-card { background: #23272d; color: #f5f5f5; }
html.dark .kanban-card:hover { color: #f5f5f5; }
html.dark .comment-bubble { background: #23272d; }
html.dark .auth-bg { background-color: #14171a; background-image: radial-gradient(rgba(74,222,128,0.4) 1px, transparent 1px); }
html.dark .ws-switcher { background: #23272d; color: #f5f5f5; }
html.dark .btn-icon { background: #23272d; color: #f5f5f5; }
html.dark .search-pill { background: #23272d; color: #f5f5f5; }
html.dark .moo-toast { background: #1c1f23; color: #f5f5f5; }
html.dark .cal-cell { background: #1c1f23; color: #f5f5f5; }
html.dark .cal-cell.cal-empty { background: #14171a; }
html.dark .cal-cell.cal-today { background: #2a2a14; }
html.dark .cal-task { background: #23272d; color: #f5f5f5; border-color: #f5f5f5; }

/* ============================================================
   Bulk actions toolbar
   ============================================================ */
.bulk-bar {
    position: sticky;
    top: 80px;
    z-index: 100;
    background: var(--accent-yellow);
    border: 3px solid var(--cow-black);
    border-radius: 0.7rem;
    padding: 0.6rem 1rem;
    box-shadow: 4px 4px 0 var(--cow-black);
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 900;
}
.bulk-bar.show { display: flex; }

/* ============================================================
   Mobile bottom nav (only renders ≤991px)
   ============================================================ */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--cow-white);
    border-top: 4px solid var(--pasture-green);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    z-index: 1040;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px 6px;
    color: var(--soft-grey);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.04em;
    position: relative;
}
.bottom-nav-item i, .bottom-nav-item .bn-emoji { font-size: 22px; line-height: 1; }
.bottom-nav-item.active { color: var(--pasture-deep); }
.bottom-nav-item.active::before {
    content: '';
    position: absolute; top: 0; left: 18%; right: 18%;
    height: 4px; background: var(--pasture-green);
    border-radius: 0 0 4px 4px;
}
.bottom-nav-item .bn-badge {
    position: absolute;
    top: 4px; right: calc(50% - 18px);
    background: #ef4444;
    color: var(--cow-white);
    font-weight: 900;
    font-size: 0.6rem;
    border: 2px solid var(--cow-white);
    border-radius: 999px;
    padding: 0 4px;
    min-width: 16px;
    text-align: center;
    line-height: 1.2;
}
@media (max-width: 991px) {
    .bottom-nav { display: block; }
    /* Push body up to make room for the bottom nav (60-72px tall) */
    body.has-bottom-nav { padding-bottom: 72px; }
    /* Hide app-footer on mobile — replaced by bottom nav. Footer still on auth/landing pages. */
    body.has-bottom-nav .app-footer { display: none; }
}
html.dark .bottom-nav { background: #1c1f23; border-top-color: var(--pasture-green); }
html.dark .bottom-nav-item { color: #d1d5db; }
html.dark .bottom-nav-item.active { color: #86efac; }

/* ---------- landing page ---------- */
.hero {
    padding: 4rem 0 5rem;
    text-align: center;
}
.hero-title {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1;
    color: var(--cow-black);
    margin-bottom: 1rem;
}
.hero-title .accent { color: var(--pasture-deep); }
.hero-emoji { font-size: clamp(3rem, 7vw, 5rem); }
.hero-sub {
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    font-weight: 700;
    color: var(--soft-grey);
    max-width: 700px;
    margin: 0 auto 2rem;
    line-height: 1.5;
}
.feature-card {
    background: var(--cow-white);
    border: 4px solid var(--cow-black);
    border-radius: 1.2rem;
    box-shadow: 8px 8px 0 var(--pasture-green);
    padding: 1.8rem;
    height: 100%;
    transition: all 0.2s;
}
.feature-card:hover {
    transform: translate(-3px,-3px);
    box-shadow: 11px 11px 0 var(--accent-yellow);
}
.feature-emoji { font-size: 2.5rem; }
.feature-card h3 {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    margin: 0.5rem 0 0.5rem;
}
.feature-card p { font-weight: 700; color: var(--soft-grey); margin: 0; }

.pricing-card {
    background: var(--cow-white);
    border: 4px solid var(--cow-black);
    border-radius: 1.2rem;
    box-shadow: 8px 8px 0 var(--cow-black);
    padding: 2rem;
    height: 100%;
    transition: all 0.2s;
    position: relative;
}
.pricing-card.featured {
    background: var(--pasture-green);
    box-shadow: 10px 10px 0 var(--cow-black);
    transform: translateY(-10px);
}
.pricing-card.featured::before {
    content: 'Most Popular 🌟';
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    background: var(--accent-yellow);
    border: 3px solid var(--cow-black);
    border-radius: 50px;
    padding: 4px 14px;
    font-weight: 900;
    font-size: 0.8rem;
    white-space: nowrap;
}
.pricing-card h3 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.5rem; }
.price-tag {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
}
.price-tag .small { font-size: 1rem; font-weight: 700; color: var(--soft-grey); }
.price-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.price-list li {
    padding: 0.4rem 0;
    font-weight: 700;
    border-bottom: 2px dashed rgba(26,26,26,0.1);
}
.price-list li::before { content: '✓ '; font-weight: 900; color: var(--pasture-deep); }
.pricing-card.featured .price-list li::before { color: var(--cow-black); }

/* ============================================================
   Dashboard v2 — premium layout
   ============================================================ */
.dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.dash-hero h1 { font-size: 1.8rem; line-height: 1.1; }
.dash-hero-actions { flex-shrink: 0; }
@media (max-width: 575px) {
    .dash-hero h1 { font-size: 1.5rem; }
}

/* Stat cards v2 — solid block colors with corner emoji */
.stat-card-v2 {
    position: relative;
    background: var(--cow-white);
    border: 3px solid var(--cow-black);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 5px 5px 0 var(--cow-black);
    transition: all .2s;
    overflow: hidden;
}
.stat-card-v2:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--accent-yellow); }
.stat-card-v2 .stat-emoji {
    position: absolute;
    top: 10px; right: 10px;
    font-size: 26px;
    opacity: 0.85;
}
.stat-card-v2 .stat-value {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--cow-black);
    margin-bottom: 2px;
}
.stat-card-v2 .stat-label {
    font-weight: 900;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cow-black);
}
.stat-card-v2 .stat-meta {
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--soft-grey);
}
.stat-card-v2.stat-projects { background: #ecfdf5; }
.stat-card-v2.stat-mytasks  { background: #fef9c3; }
.stat-card-v2.stat-overdue  { background: #f3f4f6; }
.stat-card-v2.stat-overdue.is-warning { background: #fee2e2; }
.stat-card-v2.stat-overdue.is-warning .stat-value { color: #991b1b; }
.stat-card-v2.stat-team     { background: #ede9fe; }

/* Sections */
.dash-section {
    background: var(--cow-white);
    border: 3px solid var(--cow-black);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 5px 5px 0 var(--pasture-green);
}
.dash-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.dash-link { font-weight: 800; font-size: .85rem; color: var(--pasture-deep); text-decoration: none; }
.dash-link:hover { color: var(--cow-black); }
.dash-empty {
    text-align: center;
    padding: 28px 12px;
}
.dash-empty-emoji { font-size: 38px; margin-bottom: 6px; }

/* Today's task list */
.task-list { list-style: none; padding: 0; margin: 0; }
.task-list li { margin-bottom: 6px; }
.task-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--cow-black);
    border: 2px solid transparent;
    transition: all .15s;
}
.task-row:hover { background: var(--bg-light); border-color: var(--cow-black); color: var(--cow-black); }
.task-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--cow-black); flex-shrink: 0; }
.task-body { flex-grow: 1; min-width: 0; }
.task-title { font-weight: 800; line-height: 1.2; }
.task-meta { font-size: .78rem; font-weight: 700; margin-top: 2px; display: flex; gap: 8px; align-items: center; }
.task-pill {
    border: 1.5px solid var(--cow-black);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: .68rem;
    font-weight: 900;
}
.task-pill-urgent { background: #fee2e2; color: #991b1b; }
.task-pill-high   { background: var(--accent-yellow); }
.task-due { flex-shrink: 0; font-size: .78rem; font-weight: 800; }
.task-due-overdue { color: #dc2626; }
.task-due-today {
    background: var(--accent-yellow);
    border: 1.5px solid var(--cow-black);
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: 900;
}

/* Project cards on dashboard */
.dash-project-card {
    display: block;
    background: var(--cow-white);
    border: 2.5px solid var(--cow-black);
    border-left: 8px solid var(--accent, var(--pasture-green));
    border-radius: 10px;
    padding: 14px;
    text-decoration: none;
    color: var(--cow-black);
    transition: all .15s;
}
.dash-project-card:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--cow-black); color: var(--cow-black); }
.dpc-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; margin-bottom: 10px; }
.dpc-progress {
    height: 8px;
    border: 2px solid var(--cow-black);
    border-radius: 50px;
    overflow: hidden;
    background: #f3f4f6;
    margin-bottom: 8px;
}
.dpc-progress-bar { height: 100%; background: var(--accent, var(--pasture-green)); }
.dpc-meta { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 800; color: var(--soft-grey); }
.dpc-pct { color: var(--cow-black); }

/* Activity list */
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed rgba(0,0,0,0.06); }
.activity-list li:last-child { border-bottom: 0; }
.activity-list .activity-text { font-size: .85rem; font-weight: 700; line-height: 1.3; }
.activity-list .activity-time { font-size: .72rem; font-weight: 700; color: var(--soft-grey); margin-top: 2px; }

/* Dark mode dashboard tweaks */
html.dark .dash-section { background: #1c1f23; }
html.dark .stat-card-v2 { background: #23272d; color: #f5f5f5; }
html.dark .stat-card-v2 .stat-value, html.dark .stat-card-v2 .stat-label { color: #f5f5f5; }
html.dark .stat-card-v2.stat-projects { background: #14532d; }
html.dark .stat-card-v2.stat-mytasks  { background: #422006; }
html.dark .stat-card-v2.stat-team     { background: #2e1065; }
html.dark .stat-card-v2.stat-overdue  { background: #18181b; }
html.dark .stat-card-v2.stat-overdue.is-warning { background: #7f1d1d; }
html.dark .task-row { color: #f5f5f5; }
html.dark .task-row:hover { background: #23272d; }
html.dark .dash-project-card { background: #23272d; color: #f5f5f5; }
html.dark .dpc-progress { background: #18181b; }

/* ============================================================
   Guest header (4-layer SEOCheck pattern for marketing pages)
   ============================================================ */
.guest-page { padding-bottom: 0; }
.guest-header {
    position: sticky;
    top: 0;
    z-index: 1050;
    transition: transform .3s ease;
}

/* Layer 1 — yellow announcement */
.ann-bar {
    background: var(--accent-yellow);
    color: var(--cow-black);
    border-bottom: 3px solid var(--cow-black);
}

/* Layer 2 — dark utility bar */
.g-util-bar { background: var(--cow-black); color: var(--cow-white); font-size: 12px; font-weight: 700; }
.g-util-inner {
    max-width: 1500px; margin: 0 auto; padding: 9px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.g-util-left, .g-util-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Layer 3 — HeyItsMOO master row */
.g-master-bar { background: var(--cow-white); border-bottom: 1px solid #e5e7eb; }
.g-master-inner {
    max-width: 1500px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; gap: 32px;
}
.g-master-brand {
    font-family: 'Fredoka', sans-serif; font-weight: 900; font-size: 22px;
    color: var(--cow-black); text-decoration: none; flex-shrink: 0;
}
.g-master-brand:hover { color: var(--pasture-deep); }
.g-master-nav { display: flex; align-items: center; gap: 22px; flex-grow: 1; }
.g-master-nav a {
    color: var(--soft-grey); text-decoration: none; font-weight: 800; font-size: 14px;
    white-space: nowrap; transition: color .15s; padding: 4px 0;
    position: relative;
}
.g-master-nav a::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px;
    background: var(--pasture-green); transition: width .25s;
}
.g-master-nav a:hover { color: var(--cow-black); }
.g-master-nav a:hover::after { width: 100%; }
.g-master-cta {
    background: var(--pasture-green); color: var(--cow-black);
    font-weight: 900; border: 3px solid var(--cow-black); border-radius: 50px;
    box-shadow: 4px 4px 0 var(--cow-black);
    padding: 8px 22px; font-size: 14px; text-decoration: none; flex-shrink: 0; transition: all .15s;
}
.g-master-cta:hover { background: var(--accent-yellow); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--cow-black); color: var(--cow-black); }

/* Layer 4 — PMS sub-row */
.g-sub-bar { background: var(--cow-white); border-bottom: 4px solid var(--pasture-green); }
.g-sub-inner {
    max-width: 1500px; margin: 0 auto; padding: 12px 24px;
    display: flex; align-items: center; gap: 24px; flex-wrap: nowrap; position: relative;
}
.g-sub-brand { display: inline-flex; align-items: baseline; gap: 7px; font-family: 'Fredoka', sans-serif; text-decoration: none; flex-shrink: 0; }
.g-sub-emoji { font-size: 24px; }
.g-sub-name { font-weight: 700; font-size: 22px; color: var(--pasture-deep); }
.g-sub-tag { font-size: 12px; color: var(--soft-grey); font-family: 'Nunito', sans-serif; font-weight: 700; }
.g-sub-toggle {
    background: var(--bg-light); border: 2.5px solid var(--cow-black); border-radius: 8px;
    width: 38px; height: 38px; margin-left: auto; color: var(--cow-black); font-size: 18px; cursor: pointer; flex-shrink: 0;
}
.g-sub-nav { display: flex; align-items: center; gap: 4px; flex-grow: 1; }
.g-sub-nav a {
    color: var(--soft-grey); text-decoration: none; font-weight: 800; font-size: 14px;
    padding: 8px 14px; border-radius: 8px; white-space: nowrap; transition: all .15s;
}
.g-sub-nav a:hover, .g-sub-nav a.active { color: var(--cow-black); background: var(--bg-light); }
.g-sub-cta {
    background: var(--pasture-green); color: var(--cow-black);
    font-weight: 900; border: 3px solid var(--cow-black); border-radius: 50px;
    box-shadow: 4px 4px 0 var(--cow-black);
    padding: 8px 20px; font-size: 14px; text-decoration: none; flex-shrink: 0; transition: all .15s;
}
.g-sub-cta:hover { background: var(--accent-yellow); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--cow-black); color: var(--cow-black); }

/* Spacer (guest pages use sticky-top, not fixed-top, so spacer is minimal) */
.guest-spacer { height: 0; }
.guest-main { max-width: 1500px; margin: 0 auto; }

@media (max-width: 991px) {
    .g-master-bar { display: none !important; }
    .g-util-inner { padding: 7px 14px; gap: 8px; font-size: 11px; }
    .g-sub-inner { padding: 10px 14px; gap: 10px; }
    .g-sub-name { font-size: 18px; }
    .g-sub-emoji { font-size: 20px; }
    .g-sub-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--cow-white); flex-direction: column; align-items: stretch;
        gap: 0; padding: 0 12px; border-bottom: 4px solid var(--pasture-green);
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; z-index: 1100;
    }
    .g-sub-nav.open { max-height: 520px; padding: 12px; }
    .g-sub-nav a { padding: 12px 16px; font-size: 16px; }
    .g-sub-cta { padding: 6px 14px; font-size: 13px; }
}
@media (max-width: 575px) {
    .ann-bar { font-size: 10.5px; padding: 5px 8px !important; }
    .g-util-inner { font-size: 10.5px; }
}

/* ============================================================
   Guest page sections — consistent spacing
   ============================================================ */
.g-section { padding: 64px 24px; }
.g-section-inner { max-width: 1280px; margin: 0 auto; }
.g-section-head { margin-bottom: 48px; }
.g-section-head .brand-tag { margin-bottom: 8px; }
.g-section-head h2 { margin-bottom: 12px; }
.g-section-head .lead { margin-bottom: 0; }

.g-section-dark {
    background: var(--cow-black);
    color: var(--cow-white);
    border-top: 6px solid var(--pasture-green);
    border-bottom: 6px solid var(--pasture-green);
    margin: 32px 0;
}
.g-section-dark .brand-tag { color: var(--pasture-green); }
.g-section-pasture {
    background: var(--pasture-green);
    border-top: 4px solid var(--cow-black);
    border-bottom: 4px solid var(--cow-black);
}

/* Hero */
.g-hero { padding: 64px 24px 56px; text-align: center; }
.g-hero-emoji { font-size: clamp(3rem, 7vw, 4.5rem); margin-bottom: 16px; }
.g-hero-title {
    font-family: 'Fredoka', sans-serif; font-weight: 700;
    font-size: clamp(2.2rem, 5.5vw, 4.2rem); line-height: 1.05; color: var(--cow-black);
    margin-bottom: 20px;
}
.g-hero-title .accent { color: var(--pasture-deep); }
.g-hero-sub {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700; color: var(--soft-grey);
    max-width: 720px; margin: 0 auto 28px; line-height: 1.55;
}
.g-cta-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 18px;
}
.g-hero-meta { font-weight: 800; font-size: 13px; color: var(--soft-grey); }

/* Comparison table */
.g-compare-wrap { border: 3px solid var(--pasture-green); border-radius: 14px; overflow: hidden; background: #1c1f23; }
.g-compare-table { color: var(--cow-white); margin: 0; }
.g-compare-table thead { background: var(--pasture-green); color: var(--cow-black); }
.g-compare-table thead th { font-family: 'Fredoka', sans-serif; font-weight: 700; padding: 14px 16px; border: 0; }
.g-compare-table tbody td { padding: 12px 16px; border-bottom: 1px solid #4b5563; font-weight: 700; }
.g-compare-table tbody tr:last-child td { border-bottom: 0; }

/* FAQ */
.g-faq-item {
    background: var(--cow-white);
    border: 3px solid var(--cow-black);
    border-radius: 14px;
    margin-bottom: 14px;
    padding: 18px 22px;
    box-shadow: 4px 4px 0 var(--pasture-green);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.g-faq-item:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--accent-yellow); }
.g-faq-item summary {
    font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.15rem;
    cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.g-faq-item summary::-webkit-details-marker { display: none; }
.g-faq-item summary::after { content: '＋'; font-size: 1.5rem; color: var(--pasture-deep); transition: transform .25s; }
.g-faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent-yellow); }
.g-faq-item p { margin: 14px 0 0; font-weight: 700; color: var(--soft-grey); line-height: 1.55; }

@media (max-width: 768px) {
    .g-section { padding: 40px 16px; }
    .g-section-head { margin-bottom: 32px; }
    .g-hero { padding: 36px 16px 32px; }
    .g-hero-title { line-height: 1.1; }
}

/* ============================================================
   Standardized page-level spacing inside the app
   ============================================================ */
.page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.page-head h1 { font-family: 'Fredoka', sans-serif; font-weight: 900; font-size: 1.85rem; line-height: 1.1; margin: 0 0 4px; }
.page-head .page-sub { color: var(--soft-grey); font-weight: 700; font-size: .9rem; margin: 0; }
@media (max-width: 575px) { .page-head h1 { font-size: 1.5rem; } }