/* =============================================================================
   Silver Gate Junior Sailing — Coach Admin
   Calm, focused dashboard UI. Shares the brand palette with the public site.
   ========================================================================== */

:root {
    --sg-blue:   #1378C2;
    --sg-blue-d: #0F5E9E;
    --navy:      #0B2A4A;
    --navy-d:    #07182B;
    --teal:      #15B7C7;
    --sun:       #FFB323;
    --coral:     #FF6B5E;
    --green:     #2BA84A;
    --ink:       #0B2A4A;
    --ink-soft:  #5b7186;
    --line:      #e4ecf3;
    --bg:        #f4f8fc;
    --card:      #ffffff;
    --radius:    14px;
    --shadow-sm: 0 2px 8px rgba(11,42,74,.06);
    --shadow:    0 12px 32px rgba(11,42,74,.12);
    --font-display: "Outfit", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, sans-serif;
    --side: 256px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body.adm {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.01em; line-height: 1.15; }

/* --- Sidebar ------------------------------------------------------------- */
.adm-side {
    position: fixed; inset: 0 auto 0 0; width: var(--side);
    background: linear-gradient(180deg, var(--navy), var(--navy-d));
    color: #fff; display: flex; flex-direction: column;
    padding: 1.3rem 1rem; z-index: 40;
}
.adm-brand { display: flex; align-items: center; gap: .65rem; padding: .3rem .4rem 1.3rem; }
.adm-brand img { width: 38px; height: 38px; border-radius: 9px; background: #fff; padding: 4px; }
.adm-brand b { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; display: block; }
.adm-brand small { color: rgba(255,255,255,.6); font-size: .76rem; }

.adm-nav { display: flex; flex-direction: column; gap: .18rem; }
.adm-nav__link {
    display: flex; align-items: center; gap: .7rem;
    padding: .68rem .8rem; border-radius: 10px;
    color: rgba(255,255,255,.78); font-weight: 600; font-size: .95rem;
    transition: background .18s, color .18s;
}
.adm-nav__link svg { stroke-width: 2; opacity: .9; flex: none; }
.adm-nav__link:hover { background: rgba(255,255,255,.08); color: #fff; }
.adm-nav__link.is-active { background: var(--sg-blue); color: #fff; box-shadow: var(--shadow-sm); }
.adm-nav__sep { height: 1px; background: rgba(255,255,255,.12); margin: .7rem .4rem; }
.adm-badge {
    margin-left: auto; background: var(--sun); color: var(--navy);
    font-size: .72rem; font-weight: 800; min-width: 20px; height: 20px;
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.adm-side__foot { margin-top: auto; padding: .9rem .6rem 0; border-top: 1px solid rgba(255,255,255,.12); }
.adm-side__foot span { font-weight: 700; font-size: .9rem; display: block; }
.adm-side__foot small { color: rgba(255,255,255,.55); font-size: .78rem; }

/* --- Main ---------------------------------------------------------------- */
.adm-main { margin-left: var(--side); min-height: 100vh; }
.adm-top {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 1rem;
    background: rgba(244,248,252,.85); backdrop-filter: blur(8px);
    padding: 1rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--line);
}
.adm-top h1 { font-size: 1.35rem; font-weight: 800; }
.adm-top__cta {
    margin-left: auto; display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 700; font-size: .88rem; color: var(--sg-blue);
    padding: .5rem .85rem; border-radius: 999px; background: #fff;
    box-shadow: var(--shadow-sm);
}
.adm-top__cta:hover { box-shadow: var(--shadow); }
.adm-body { padding: clamp(1.1rem, 3vw, 2rem); max-width: 1100px; }

.adm-burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: 4px; }
.adm-burger span { width: 22px; height: 2.5px; background: var(--navy); border-radius: 3px; }

/* --- Flash --------------------------------------------------------------- */
.adm-flash {
    padding: .8rem 1.1rem; border-radius: 11px; margin-bottom: 1.2rem;
    font-weight: 600; border: 1px solid;
}
.adm-flash--success { background: #e9f8ee; border-color: #b8e6c6; color: #1d7a38; }
.adm-flash--error   { background: #fdeceb; border-color: #f6c4bf; color: #c0392b; }
.adm-flash--info    { background: #eaf4fc; border-color: #c2dff5; color: var(--sg-blue-d); }

/* --- Cards / panels ------------------------------------------------------ */
.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card__head {
    display: flex; align-items: center; gap: .8rem;
    padding: 1rem 1.2rem; border-bottom: 1px solid var(--line);
}
.card__head h2 { font-size: 1.05rem; font-weight: 700; }
.card__head .btn { margin-left: auto; }
.card__pad { padding: 1.2rem; }

/* --- Stat tiles ---------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-tile {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.stat-tile__ic {
    width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
    color: #fff; margin-bottom: .7rem;
}
.stat-tile b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; display: block; line-height: 1; }
.stat-tile span { color: var(--ink-soft); font-size: .9rem; }
.t-blue  { background: linear-gradient(135deg,#1378C2,#0F5E9E); }
.t-sun   { background: linear-gradient(135deg,#F2A100,#FFB323); }
.t-teal  { background: linear-gradient(135deg,#15B7C7,#34D2DE); }
.t-coral { background: linear-gradient(135deg,#FF9D2E,#FF6B5E); }
.t-green { background: linear-gradient(135deg,#2BA84A,#46c965); }

/* --- Tables -------------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tbl th, .tbl td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl th { font-family: var(--font-display); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.tbl tbody tr:hover { background: #f8fbfe; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .muted { color: var(--ink-soft); }
.tbl td .sub { color: var(--ink-soft); font-size: .82rem; }

/* --- Badges / status ----------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .76rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px;
    text-transform: capitalize;
}
.badge--new       { background: #fff2d6; color: #9a6a00; }
.badge--contacted { background: #e4f0fc; color: var(--sg-blue-d); }
.badge--enrolled  { background: #e6f7ec; color: #1d7a38; }
.badge--archived  { background: #eef1f4; color: #6b7c8c; }
.badge--off       { background: #eef1f4; color: #6b7c8c; }
.badge--on        { background: #e6f7ec; color: #1d7a38; }
.dot-sm { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--font-display); font-weight: 700; font-size: .92rem;
    padding: .6rem 1.1rem; border-radius: 10px; border: 1px solid transparent;
    background: var(--sg-blue); color: #fff; box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--sun { background: var(--sun); color: var(--navy); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn--ghost:hover { border-color: var(--sg-blue); color: var(--sg-blue); }
.btn--danger { background: #fff; color: var(--coral); border-color: #f6c4bf; box-shadow: none; }
.btn--danger:hover { background: var(--coral); color: #fff; border-color: var(--coral); }
.btn--sm { padding: .4rem .75rem; font-size: .83rem; border-radius: 8px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.row-actions { display: flex; gap: .45rem; flex-wrap: wrap; }
.inline-form { display: inline; }

/* --- Forms --------------------------------------------------------------- */
.form-grid { display: grid; gap: 1.1rem; }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.fld { display: flex; flex-direction: column; gap: .35rem; }
.fld.col-span { grid-column: 1 / -1; }
.fld > span { font-weight: 600; font-size: .86rem; color: var(--ink); }
.fld > span .req { color: var(--coral); }
.fld input, .fld select, .fld textarea {
    font: inherit; color: var(--ink);
    padding: .65rem .8rem; border: 1.5px solid var(--line); border-radius: 10px;
    background: #fff; transition: border-color .15s, box-shadow .15s; width: 100%;
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
    outline: none; border-color: var(--sg-blue); box-shadow: 0 0 0 3px rgba(19,120,194,.14);
}
.fld textarea { resize: vertical; min-height: 90px; }
.fld small { color: var(--ink-soft); font-size: .8rem; }
.form-actions { display: flex; gap: .7rem; align-items: center; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.form-actions .spacer { margin-left: auto; }

/* --- Detail / definition list ------------------------------------------- */
.dl { display: grid; grid-template-columns: 150px 1fr; gap: .2rem 1rem; }
.dl dt { color: var(--ink-soft); font-size: .86rem; font-weight: 600; padding: .5rem 0; }
.dl dd { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.dl dt { border-bottom: 1px solid var(--line); }

.empty { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.empty svg { margin: 0 auto .8rem; opacity: .4; }

.back-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-soft); font-weight: 600; font-size: .9rem; margin-bottom: 1rem; }
.back-link:hover { color: var(--sg-blue); }
.back-link svg { transform: rotate(180deg); }

.pill-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.pill { font-size: .78rem; font-weight: 600; color: var(--ink-soft); background: #eef4f9; padding: .25rem .6rem; border-radius: 999px; }

/* --- Login --------------------------------------------------------------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
    background: radial-gradient(1200px 600px at 70% -10%, #1f8ad6, var(--navy)); }
.login-card { background: #fff; border-radius: 20px; box-shadow: 0 30px 70px rgba(7,24,43,.4); width: 100%; max-width: 400px; padding: 2.2rem; }
.login-card .brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem; margin-bottom: 1.6rem; }
.login-card .brand img { width: 64px; height: 64px; }
.login-card h1 { font-size: 1.4rem; }
.login-card .sub { color: var(--ink-soft); font-size: .92rem; }
.login-card .btn { width: 100%; justify-content: center; padding: .8rem; font-size: 1rem; margin-top: .4rem; }
.login-note { text-align: center; color: var(--ink-soft); font-size: .82rem; margin-top: 1.2rem; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
    .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .adm-side { transform: translateX(-100%); transition: transform .25s; box-shadow: var(--shadow); }
    .adm-side.is-open { transform: translateX(0); }
    .adm-main { margin-left: 0; }
    .adm-burger { display: flex; }
    .dl { grid-template-columns: 1fr; gap: 0; }
    .dl dt { border-bottom: 0; padding-bottom: 0; }
    .dl dd { padding-top: .15rem; }
}