/* BeeBeeper design system: tokens and base components.
   The admin pages are its first user; the website builds on the same file.
   Brand values mirror the app theme (mobile_app/lib/theme.dart) — change them
   in both places or they drift apart. */

@import url('https://fonts.googleapis.com/css2?family=Solway:wght@400;500;700&display=swap');

:root {
    /* colour */
    --bb-bg: #FBFAF3;
    --bb-surface: #FFFFFF;
    --bb-surface-2: #F3F1E7;
    --bb-text: #1F1D16;
    --bb-muted: #6F6A5C;
    --bb-border: #E3DFCF;
    --bb-yellow: #FFEE58;
    --bb-purple: #9B51E0;
    --bb-green: #C4E56F;
    --bb-gold: #FBE15E;
    --bb-ok: #2E7D32;
    --bb-ok-bg: #E8F5E9;
    --bb-warn: #B07A1C;
    --bb-warn-bg: #FFF4DD;
    --bb-error: #B71C1C;
    --bb-error-bg: #FFEBEE;
    --bb-gradient: linear-gradient(135deg, var(--bb-green), var(--bb-gold));

    /* type */
    --bb-font: 'Solway', Georgia, serif;
    --bb-mono: ui-monospace, Menlo, Consolas, monospace;
    --bb-size-sm: 13px;
    --bb-size: 15px;
    --bb-size-lg: 18px;
    --bb-size-h2: 22px;
    --bb-size-h1: 28px;

    /* shape and space */
    --bb-radius-sm: 8px;
    --bb-radius: 12px;
    --bb-radius-lg: 20px;
    --bb-radius-pill: 999px;
    --bb-space-1: 4px;
    --bb-space-2: 8px;
    --bb-space-3: 12px;
    --bb-space-4: 16px;
    --bb-space-6: 24px;
    --bb-space-8: 32px;
    --bb-shadow: 0 1px 2px rgba(31, 29, 22, .06), 0 4px 16px rgba(31, 29, 22, .06);
    --bb-content-width: 960px;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: var(--bb-font);
    font-size: var(--bb-size);
    line-height: 1.5;
    color: var(--bb-text);
    background: var(--bb-bg);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--bb-purple); }
h1, h2, h3 { margin: 0 0 var(--bb-space-3); font-weight: 700; line-height: 1.25; }
h1 { font-size: var(--bb-size-h1); }
h2 { font-size: var(--bb-size-h2); }
h3 { font-size: var(--bb-size-lg); }
p { margin: 0 0 var(--bb-space-3); }
code, .bb-mono { font-family: var(--bb-mono); font-size: var(--bb-size-sm); }

.bb-gradient-text {
    background: var(--bb-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.bb-muted { color: var(--bb-muted); }
.bb-small { font-size: var(--bb-size-sm); }

/* ---------------------------------------------------------------- shell */
.bb-header {
    background: var(--bb-surface);
    border-bottom: 1px solid var(--bb-border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.bb-header__inner {
    max-width: var(--bb-content-width);
    margin: 0 auto;
    padding: var(--bb-space-3) var(--bb-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-space-4);
}
.bb-brand {
    font-size: var(--bb-size-h2);
    font-weight: 700;
    text-decoration: none;
    color: var(--bb-text);
}
.bb-brand span { color: var(--bb-muted); font-weight: 500; font-size: var(--bb-size); margin-left: var(--bb-space-2); }
.bb-header__user { display: flex; align-items: center; gap: var(--bb-space-3); color: var(--bb-muted); font-size: var(--bb-size-sm); }
.bb-nav {
    max-width: var(--bb-content-width);
    margin: 0 auto;
    padding: 0 var(--bb-space-4);
    display: flex;
    gap: var(--bb-space-1);
    overflow-x: auto;
}
.bb-nav a {
    padding: var(--bb-space-2) var(--bb-space-3);
    text-decoration: none;
    color: var(--bb-muted);
    font-weight: 500;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.bb-nav a:hover { color: var(--bb-text); }
.bb-nav a.is-active { color: var(--bb-text); border-image: var(--bb-gradient) 1; border-bottom: 3px solid var(--bb-gold); }
.bb-main {
    max-width: var(--bb-content-width);
    margin: 0 auto;
    padding: var(--bb-space-6) var(--bb-space-4) var(--bb-space-8);
}
.bb-main--narrow { max-width: 480px; }

/* ---------------------------------------------------------------- layout */
.bb-card {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    padding: var(--bb-space-6);
    margin-bottom: var(--bb-space-6);
    box-shadow: var(--bb-shadow);
}
.bb-row { display: flex; gap: var(--bb-space-3); align-items: center; flex-wrap: wrap; }
.bb-row--between { justify-content: space-between; }
.bb-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--bb-space-3) var(--bb-space-4); }
.bb-stack > * + * { margin-top: var(--bb-space-3); }

/* ---------------------------------------------------------------- forms */
.bb-field { display: block; margin-bottom: var(--bb-space-3); }
.bb-field > span, .bb-label { display: block; font-weight: 700; font-size: var(--bb-size-sm); margin-bottom: var(--bb-space-1); }
.bb-input, .bb-select, .bb-textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    color: var(--bb-text);
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
}
.bb-input:focus, .bb-select:focus, .bb-textarea:focus { outline: 2px solid var(--bb-gold); outline-offset: 1px; border-color: var(--bb-gold); }
.bb-textarea { min-height: 90px; resize: vertical; }
.bb-textarea--code { font-family: var(--bb-mono); font-size: var(--bb-size-sm); }
.bb-check { display: flex; align-items: center; gap: var(--bb-space-2); cursor: pointer; margin: var(--bb-space-2) 0; }
.bb-check input { width: 18px; height: 18px; accent-color: var(--bb-purple); }
.bb-hint { color: var(--bb-muted); font-size: var(--bb-size-sm); margin-top: var(--bb-space-1); }

/* ---------------------------------------------------------------- buttons */
.bb-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--bb-space-2);
    padding: 10px 20px;
    font: inherit;
    font-weight: 700;
    color: var(--bb-text);
    background: var(--bb-gradient);
    border: 0;
    border-radius: var(--bb-radius-pill);
    cursor: pointer;
    text-decoration: none;
}
.bb-btn:hover { filter: brightness(.96); }
.bb-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.bb-btn--secondary { background: var(--bb-surface-2); }
.bb-btn--danger { background: var(--bb-error-bg); color: var(--bb-error); }
.bb-btn--sm { padding: 6px 12px; font-size: var(--bb-size-sm); }

/* ---------------------------------------------------------------- tables */
.bb-table { width: 100%; border-collapse: collapse; font-size: var(--bb-size-sm); }
.bb-table th, .bb-table td { text-align: left; padding: var(--bb-space-2) var(--bb-space-2); border-bottom: 1px solid var(--bb-border); vertical-align: middle; }
.bb-table th { background: var(--bb-surface-2); font-weight: 700; }
.bb-table tr.is-link { cursor: pointer; }
.bb-table tr.is-link:hover td { background: #FAF8EE; }
.bb-table-wrap { overflow-x: auto; }

/* ---------------------------------------------------------------- feedback */
.bb-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--bb-radius-pill);
    background: var(--bb-yellow);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.bb-badge--muted { background: var(--bb-surface-2); color: var(--bb-muted); }
.bb-badge--ok { background: var(--bb-ok-bg); color: var(--bb-ok); }
.bb-badge--warn { background: var(--bb-warn-bg); color: var(--bb-warn); }
.bb-badge--purple { background: #F1E6FB; color: var(--bb-purple); }
.bb-status {
    margin-top: var(--bb-space-4);
    padding: var(--bb-space-3);
    border-radius: var(--bb-radius-sm);
    white-space: pre-wrap;
    font-family: var(--bb-mono);
    font-size: var(--bb-size-sm);
}
.bb-status.ok { background: var(--bb-ok-bg); color: var(--bb-ok); }
.bb-status.err { background: var(--bb-error-bg); color: var(--bb-error); }
.bb-toast {
    position: fixed;
    left: 50%;
    bottom: var(--bb-space-6);
    transform: translateX(-50%);
    padding: var(--bb-space-3) var(--bb-space-4);
    background: var(--bb-text);
    color: #fff;
    border-radius: var(--bb-radius-sm);
    box-shadow: var(--bb-shadow);
    z-index: 20;
    max-width: calc(100vw - 32px);
}
.bb-toast.err { background: var(--bb-error); }
.bb-codes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--bb-space-2);
    font-family: var(--bb-mono);
    font-size: var(--bb-size);
    padding: var(--bb-space-3);
    background: var(--bb-surface-2);
    border-radius: var(--bb-radius-sm);
}
.bb-note { padding: var(--bb-space-3) 0; border-bottom: 1px solid var(--bb-border); }
.bb-note:last-child { border-bottom: 0; }
.bb-note__meta { color: var(--bb-muted); font-size: var(--bb-size-sm); display: flex; justify-content: space-between; gap: var(--bb-space-3); }
.bb-note__body { white-space: pre-wrap; margin-top: var(--bb-space-1); }

@media (max-width: 600px) {
    .bb-card { padding: var(--bb-space-4); }
    .bb-main { padding: var(--bb-space-4) var(--bb-space-4) var(--bb-space-8); }
}