@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Inter+Tight:wght@600;700&family=JetBrains+Mono:wght@400;700&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Brand */
    --olive:        #4A5C4E;
    --olive-light:  #5A6E5E;
    --vint-amber:   #E6C55A;
    --mustard:      #E6C55A;
    --blue:         #1C719B;
    --ink:          #1A1A18;

    /* Page surfaces */
    --bg-page:      #F8F7F3;
    --bg-panel:     #FFFFFF;
    --bg-card:      #ECEAE2;
    --bg-input:     #FFFFFF;

    /* Text */
    --text-dark:    #1A1A18;
    --text-body:    #3A3A36;
    --text-muted:   #6A6A64;
    --text-light:   #F3F1EA;

    /* Borders */
    --border:       rgba(26,26,24,0.12);
    --border-light: rgba(26,26,24,0.06);

    /* Status / legacy grey scale */
    --grey-1: #EEEEEE;
    --grey-2: #CCCCCC;
    --grey-3: #999999;
    --grey-5: #666666;
    --grey-7: #444444;
    --white:  #FFFFFF;
    --off:    #F5F5F5;
    --black:  #111111;

    /* Split-flap */
    --flap-bg:  #1A1A18;
    --flap-txt: #F3F1EA;

    /* Aliases for components that reference dark-theme vars */
    --bg-main:         #F4F2EE;
    --text-main:       #1A1A18;
    --text-muted-dark: #6A6A64;
    --border-dark:     rgba(26,26,24,0.12);
    --bg-row-hover:    rgba(26,26,24,0.03);

    /* Typography */
    --font-head: 'Inter Tight', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* ── BASE ─────────────────────────────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    font-weight: 400;
    background: var(--bg-page);
    color: var(--text-body);
    font-size: 15px;
    line-height: 1.6;
}

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

/* ── HEADER ─────────────────────────────────────────────────────────────────── */

.team-header {
    position: sticky;
    top: 0;
    z-index: 200;
}

.team-nav {
    position: sticky;
    top: 57px; /* height of the header — adjust if needed */
    z-index: 199;
}

.admin-dropdown {
    z-index: 300;
}

/* ── PUBLIC-FACING LAYOUT (portal, enquiry, etc.) ─────────────────────────── */
.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}

header {
    border-bottom: 1px solid var(--grey-1);
    padding: 24px 0;
    margin-bottom: 40px;
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.brand {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    text-decoration: none;
}
.brand:hover { color: var(--text-dark); text-decoration: none; }
.brand-sub { font-size: 13px; color: var(--text-muted); }

footer {
    border-top: 1px solid var(--border);
    margin-top: 64px;
    padding: 24px 0;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* ── TYPOGRAPHY ───────────────────────────────────────────────────────────── */
h1 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.025em;
    color: var(--text-dark);
}
h2 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    color: var(--text-dark);
}
h3 {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
p { margin-bottom: 14px; color: var(--text-body); }

/* ── FORMS ────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 22px; }

label {
    display: block;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="password"],
select,
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-2, 2px);
    padding: 11px 13px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-dark);
    background: var(--bg-input);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px var(--shadow-1c719b-a10, rgba(28,113,155,0.1));
}
textarea { min-height: 100px; resize: vertical; }

/* Radio + Checkbox */
.radio-group, .check-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.radio-group label, .check-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-body);
    cursor: pointer;
}
.radio-group input, .check-group input {
    accent-color: var(--mustard);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 11px 24px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-2, 2px);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    text-align: center;
}
.btn-primary {
    background: var(--vint-amber);
    color: var(--ink-1a1a18, #1A1A18);
    text-transform: uppercase;
    font-size: 13px;
}
.btn-primary:hover {
    background: var(--ink);
    color: var(--ink-f3f1ea, #F3F1EA);
    text-decoration: none;
}
.btn.btn-primary {
    font-family: var(--font-head);
    text-transform: none;
}
.btn-secondary {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-dark);
    font-family: var(--font-head);
    font-weight: 600;
}
.btn-secondary:hover {
    background: var(--border);
    text-decoration: none;
}
.btn.btn-secondary { font-family: var(--font-head); text-transform: none;}

.btn-urgent {
    background: var(--mustard);
    color: var(--ink);
}
.btn-urgent:hover {
    background: var(--ink);
    color: var(--ink-f3f1ea, #F3F1EA);
    text-decoration: none;
}

/* ── ALERTS ───────────────────────────────────────────────────────────────── */
.alert {
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 14px;
    border-radius: var(--radius-2, 2px);
}
.alert-error   { border-left: 3px solid var(--rule-c0392b, #C0392B); background: var(--bg-faeae8, #FAEAE8); color: var(--ink-8b3020, #8B3020); }
.alert-success { border-left: 3px solid var(--mustard); background: var(--bg-eaf0e8, #EAF0E8); color: var(--ink-3a5c33, #3A5C33); }
.alert-info    { border-left: 3px solid var(--blue); background: var(--bg-e8f0f6, #E8F0F6); color: var(--ink-1c5a7a, #1C5A7A); }

/* ── HELPERS ──────────────────────────────────────────────────────────────── */
.hidden { display: none; }
.field-note {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 4px;
}
.field-required { color: var(--ink-c0392b, #C0392B); margin-left: 2px; }
.empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 14px;
    padding: 16px 0;
}

/* ── ACTION LINKS ─────────────────────────────────────────────────────────── */
.action {
    color: var(--blue);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.action:hover { text-decoration: underline; }

/* ── PANELS (team area) ───────────────────────────────────────────────────── */
.panel label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* ── DIARY ────────────────────────────────────────────────────────────────── */
.diary-nav .btn-secondary {
    font-family: var(--font-head);
    font-weight: 600;
}

/* ── KB ARTICLE READING PANEL ─────────────────────────────────────────────── */
/* Stays cream — only overrides the panel background for this one view         */
.panel.kb-article-panel {
    background:    var(--bg-ffffff, #FFFFFF);
    color:         var(--ink-1a1a18, #1A1A18);
    border:        1px solid var(--rule-000000-a10, rgba(0,0,0,0.1));
    border-radius: var(--radius-2, 2px);
    padding:       20px 48px;
    max-width:     900px;
    margin:        0 auto;
}
.kb-article-panel h1,
.kb-article-panel h2,
.kb-article-panel h3,
.kb-article-panel h4 { color: var(--ink-1a1a18, #1A1A18); }
.kb-article-panel p,
.kb-article-panel li,
.kb-article-panel td,
.kb-article-panel th { color: var(--ink-2a2a28, #2A2A28); }
.kb-article-panel a  { color: var(--blue); }
.kb-article-panel blockquote {
    border-left: 3px solid var(--mustard);
    padding-left: 16px;
    margin: 16px 0;
    color: var(--ink-555555, #555);
}
.kb-article-panel pre,
.kb-article-panel code { background: var(--bg-eceae2, #ECEAE2); color: var(--ink-1a1a18, #1A1A18); }
.kb-article-panel table td,
.kb-article-panel table th { border-color: var(--rule-ddd9ce, #DDD9CE); }
.kb-article-panel .kb-article-number { color: var(--ink-888888, #888); }

/* KB content headings (inside article panel — dark on cream) */
.kb-content h1, .kb-content h2, .kb-content h3,
.kb-article h1, .kb-article h2, .kb-article h3 { color: var(--ink-1a1a18, #1A1A18); }
.kb-content p,  .kb-article p,
.kb-content li, .kb-article li { color: var(--text-body); }

/* ── Flatpickr mobile — prevent overflow on narrow screens ─────────────────── */
@media (max-width: 768px) {
    .flatpickr-wrapper,
    .flatpickr-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ── People tab — mobile: Name + Phone only ─────────────────────────────── */
@media (max-width: 768px) {
    #tab-people [data-col=role],
    #tab-people [data-col=email],
    #tab-people [data-col=actions] {
        display: none;
    }
    #tab-people [data-col=name] {
        font-weight: 600;
        font-size: 14px;
    }
    #tab-people [data-col=phone] {
        text-align: right;
    }
    #tab-people [data-col=phone] a {
        color: var(--blue);
        text-decoration: none;
        font-size: 14px;
    }
}

/* ── People tab: org table mobile ─────────────────────────────────────────── */
@media (max-width: 768px) {
    #tab-people .org-table [data-col=email],
    #tab-people .org-table [data-col=actions] {
        display: none;
    }
}