/* Shuttly coaching portal — shared premium theme (used across the coaching web pages). */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
    --ink:#0f1f33; --muted:#64748b; --line:#e6ecf4; --bg:#eef2f7;
    --blue:#1565c0; --blue-d:#0f52a0; --green:#2e9e5b; --orange:#f57c00;
}
*{ box-sizing:border-box; }
body{
    font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
    background:var(--bg) !important; background-image:none !important; color:var(--ink);
    -webkit-font-smoothing:antialiased;
}

/* ── gradient header + hero ─────────────────────────────── */
.sh-head{
    color:#fff; position:relative; overflow:hidden;
    background:
        radial-gradient(760px 300px at 86% -70%, rgba(41,182,246,.5), transparent 60%),
        linear-gradient(135deg,#0b2a4a 0%,#14428a 55%,#1565c0 100%);
    padding:16px clamp(16px,5vw,46px) 64px;
}
.sh-row1{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.sh-brand{ display:flex; align-items:center; gap:11px; }
.sh-logo{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:21px;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); }
.sh-wm{ font-size:18px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.sh-wm-sub{ font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; opacity:.82; margin-top:2px; }
.sh-nav a{ color:#fff; text-decoration:none; font-weight:700; font-size:13px; margin-left:8px;
    padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.08); transition:background .15s; }
.sh-nav a:hover{ background:rgba(255,255,255,.2); color:#fff; }
.sh-hero{ position:relative; z-index:2; margin-top:20px; }
.sh-chip{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:.05em;
    padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26); text-transform:uppercase; }
.sh-chip .dot{ width:7px; height:7px; border-radius:50%; background:#7CF5B0; box-shadow:0 0 0 3px rgba(124,245,176,.25); }
.sh-hero h1{ font-size:clamp(23px,4.4vw,34px); font-weight:800; letter-spacing:-.02em; margin:12px 0 4px; }
.sh-lede{ font-size:14px; opacity:.9; font-weight:500; margin:0; }
.sh-wrap{ max-width:1000px; margin-top:-44px; position:relative; z-index:3; padding-bottom:40px; }

/* ── cards ──────────────────────────────────────────────── */
.card{ border:1px solid var(--line) !important; border-radius:18px !important;
    box-shadow:0 6px 22px rgba(15,31,51,.07) !important; margin-bottom:16px !important; overflow:hidden; }
.card-header{ background:#fff !important; border-bottom:1px solid var(--line) !important; padding:15px 20px !important; }
.card-header h3, .card-header h4, .card-header strong{ font-weight:800 !important; color:var(--ink); letter-spacing:-.01em; }
.card-header h3{ font-size:18px; } .card-header h4{ font-size:16px; }
.card-body{ padding:18px 20px !important; }
.grade-current{ border-left:5px solid var(--blue) !important; }

/* ── labels, inputs, buttons ────────────────────────────── */
.form-label{ font-size:11px !important; font-weight:800 !important; color:var(--muted) !important;
    text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px !important; }
.control-label{ font-size:12px; font-weight:700; color:var(--muted); margin-bottom:5px; }
.form-select, .form-control{ border-radius:11px !important; border:1px solid #d8e0ea !important; font-size:14px; padding:9px 12px; }
.form-select:focus, .form-control:focus{ border-color:var(--blue) !important; box-shadow:0 0 0 3px rgba(21,101,192,.15) !important; }
.form-select-sm, .form-control-sm{ border-radius:9px !important; }
.btn{ border-radius:11px !important; font-weight:700 !important; padding:9px 16px; }
.btn-sm{ border-radius:9px !important; padding:6px 12px; font-size:13px; }
.btn-primary{ background:var(--blue) !important; border-color:var(--blue) !important; box-shadow:0 4px 12px rgba(21,101,192,.28); }
.btn-primary:hover{ background:var(--blue-d) !important; }
.btn-success{ background:var(--green) !important; border-color:var(--green) !important; }
.btn-secondary{ background:#64748b !important; border-color:#64748b !important; }
.btn-outline-primary{ color:var(--blue) !important; border-color:#a9c8ee !important; }
.btn-outline-primary:hover{ background:var(--blue) !important; color:#fff !important; }
.btn-outline-success{ color:#1c7a43 !important; border-color:#8fd3ab !important; }
.btn-outline-success:hover{ background:var(--green) !important; color:#fff !important; border-color:var(--green) !important; }
.btn-outline-danger{ color:#c0313c !important; border-color:#eaa6ac !important; }
.btn-outline-danger:hover{ background:#e03e4a !important; color:#fff !important; border-color:#e03e4a !important; }
.btn-outline-warning{ color:#a86500 !important; border-color:#f0c987 !important; }
.star-btn.active{ background:var(--orange) !important; border-color:var(--orange) !important; color:#fff !important; }

/* ── tables ─────────────────────────────────────────────── */
.table{ margin-bottom:0; }
.table thead th{ font-size:11px !important; text-transform:uppercase; letter-spacing:.06em;
    color:var(--muted) !important; font-weight:800; border-bottom:1px solid var(--line) !important; border-top:0; padding:10px 12px; }
.table td{ vertical-align:middle !important; border-color:#eef2f7 !important; padding:11px 12px; font-size:14px; }
.table-striped>tbody>tr:nth-of-type(odd)>*{ background:#f8fafc !important; }
.table-hover>tbody>tr:hover>*, .table tbody tr:hover>*{ background:#eef4fb !important; }
.skill-met>td{ background:linear-gradient(90deg, rgba(46,158,91,.08), transparent) !important; }
.skill-met td:first-child{ font-weight:700; }
.criteria{ font-size:.8rem; color:#8a97a4; }

/* ── badges (soft pills) ────────────────────────────────── */
.badge{ border-radius:999px !important; font-weight:800 !important; padding:.45em .8em !important; font-size:11px; letter-spacing:.02em; }
.badge.bg-success{ background:#e3f6ec !important; color:#1c7a43 !important; }
.badge.bg-danger{ background:#fdeaec !important; color:#c0313c !important; }
.badge.bg-warning{ background:#fff3d6 !important; color:#946200 !important; }
.badge.bg-secondary{ background:#e7ecf3 !important; color:#334155 !important; }
.badge.bg-dark{ background:#e7ecf3 !important; color:#334155 !important; }
.badge.bg-light{ background:#eef2f7 !important; color:#5a6673 !important; }
.badge-makeup{ background:#e7effc !important; color:var(--blue) !important; }
.badge-trial{ background:#efe8fe !important; color:#6b34d6 !important; }
.grade-badge{ font-weight:800; padding:.32rem .62rem; border-radius:9px; color:#fff; font-size:.76rem; }

.alert{ border-radius:14px !important; border:0 !important; font-weight:600; }
.alert-success{ background:#e3f6ec !important; color:#1c7a43 !important; }
.alert-danger{ background:#fdeaec !important; color:#c0313c !important; }
.add-actions .btn{ margin-right:8px; margin-top:4px; }

/* ── coaching-home tiles (also usable elsewhere) ────────── */
.tools-label{ font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--muted); margin:0 4px 12px; text-transform:uppercase; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.tile{ position:relative; display:flex; align-items:center; gap:15px; text-decoration:none; background:#fff;
    border:1px solid var(--line); border-radius:18px; padding:18px; color:var(--ink);
    box-shadow:0 6px 20px rgba(15,31,51,.06); transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, border-color .16s; }
.tile:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(15,31,51,.14); border-color:transparent; }
.tile .ico{ width:52px; height:52px; border-radius:15px; flex:none; display:grid; place-items:center; font-size:26px; }
.tile .t{ display:block; font-size:16.5px; font-weight:800; letter-spacing:-.01em; }
.tile .s{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; font-weight:500; }
.tile .arrow{ color:#cbd5e1; font-size:20px; font-weight:700; transition:transform .16s, color .16s; }
.tile:hover .arrow{ transform:translateX(4px); }

/* ── login ──────────────────────────────────────────────── */
.login-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
    background:
        radial-gradient(900px 480px at 82% -10%, rgba(41,182,246,.5), transparent 60%),
        radial-gradient(700px 420px at 6% 110%, rgba(123,63,242,.28), transparent 60%),
        linear-gradient(135deg,#0b2a4a 0%,#14428a 55%,#1565c0 100%);
}
.login-card{ width:100%; max-width:400px; background:#fff; border-radius:22px; overflow:hidden;
    box-shadow:0 30px 70px rgba(6,20,40,.45); }
.login-top{ background:linear-gradient(135deg,#0e3a6b,#1565c0); color:#fff; padding:26px 28px 22px; text-align:center; }
.login-top .logo{ width:52px; height:52px; border-radius:15px; margin:0 auto 12px; display:grid; place-items:center; font-size:28px;
    background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.24); }
.login-top .wm{ font-size:22px; font-weight:800; letter-spacing:-.02em; }
.login-top .sub{ font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; opacity:.85; margin-top:3px; }
.login-body{ padding:24px 28px 28px; }
.login-body .btn-primary{ width:100%; padding:12px; font-size:15px; }
.login-links{ font-size:13px; color:var(--muted); margin-top:16px; text-align:center; }
.login-links a{ color:var(--blue); font-weight:700; text-decoration:none; }

@media (prefers-reduced-motion:reduce){ .tile,.tile .arrow,.sh-nav a{ transition:none; } }