/* ---- Kids4Kids brand ------------------------------------------------------------------------
   Ported from the HQ app (K4KAdmin) so the two sit side by side without looking like different
   charities. Palette and type from kids4kidsfoundation.org.au.

   Bubblegum Sans is deliberately scoped to the member-facing welcome, the way HQ scopes it to the
   public pages families see. Everything with a grid or a form in it — the whole /admin area — is
   set in Nunito: someone working through a day of bookings needs density and legibility, not
   personality. ---------------------------------------------------------------------------- */
:root {
    --k4k-purple:      #341C77;
    --k4k-purple-deep: #251352;
    --k4k-coral:       #FE5D37;
    --k4k-coral-dark:  #E04420;
    --k4k-teal:        #02B890;
    --k4k-yellow:      #FDB510;
    --k4k-blue:        #2575FC;
    --k4k-lavender:    #EDF1FC;
    --k4k-ink:         #333333;
    --k4k-muted:       #54595F;
    --k4k-line:        #E2E6F2;

    --k4k-body:    Nunito, 'Segoe UI', Helvetica, Arial, sans-serif;
    --k4k-display: 'Bubblegum Sans', Nunito, 'Segoe UI', sans-serif;
}

html, body {
    font-family: var(--k4k-body);
    color: var(--k4k-ink);
    background-color: var(--k4k-lavender);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--k4k-purple); font-weight: 800; }
h4, h5, h6 { font-weight: 800; }

a, .btn-link { color: var(--k4k-purple); text-decoration: none; }
a:hover      { color: var(--k4k-coral); }

/* Coral is the primary action in both apps. It was purple here and coral in HQ, so the same
   button rendered a different colour depending on which one you were standing in. */
.btn-primary {
    color: #fff;
    background-color: var(--k4k-coral);
    border-color: var(--k4k-coral);
    font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus {
    color: #fff;
    background-color: var(--k4k-coral-dark);
    border-color: var(--k4k-coral-dark);
}

/* The quieter of the two: used where an action is real but secondary. */
.btn-secondary-k4k {
    color: var(--k4k-purple);
    background: #fff;
    border: 1px solid var(--k4k-purple);
    border-radius: .375rem;
    font-weight: 700;
}
.btn-secondary-k4k:hover { background: var(--k4k-lavender); color: var(--k4k-purple); }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem rgba(52, 28, 119, .45);
}

/* ---- branded shell (identical to HQ) --------------------------------------------------------- */
.k4k-sidebar {
    background: linear-gradient(180deg, var(--k4k-purple) 0%, var(--k4k-purple-deep) 100%);
}

.k4k-brand {
    display: block;
    padding: 1rem .9rem .85rem;
    background: #fff;
    border-bottom: 4px solid var(--k4k-yellow);
}
.k4k-brand img { width: 100%; max-width: 190px; height: auto; display: block; margin: 0 auto; }
.k4k-brand .k4k-brand-sub {
    display: block; text-align: center; margin-top: .4rem;
    font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 700; color: var(--k4k-purple);
}

.k4k-nav .nav-section {
    padding: 1rem 1.25rem .3rem;
    font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 700; color: rgba(255, 255, 255, .45);
}
.k4k-nav .nav-link {
    color: rgba(255, 255, 255, .86);
    border-left: 3px solid transparent;
    border-radius: 0;
    font-weight: 600;
}
.k4k-nav .nav-link:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.k4k-nav .nav-link.active {
    background: rgba(255, 255, 255, .14);
    border-left-color: var(--k4k-yellow);
    color: #fff;
}

.k4k-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: #fff; border-bottom: 1px solid var(--k4k-line);
}
.k4k-topbar a { font-weight: 600; }

/* ---- page heads (identical to HQ) ------------------------------------------------------------ */
.page-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; flex-wrap: wrap; margin: .25rem 0 1.25rem;
}
.page-head h1 { font-size: 1.5rem; margin: 0 0 .25rem; font-weight: 800; }

/* The display face, only where it belongs — and at the one weight it actually has. Asking for 800
   makes the browser synthesise a fake bold, which reads as a different typeface to the logo. */
.k4k-welcome h1 {
    font-family: var(--k4k-display);
    font-weight: 400;
    font-size: 1.9rem;
    letter-spacing: .01em;
}
.lede  { color: #5a6b7a; margin: 0; max-width: 46rem; }
.count { color: #5a6b7a; font-size: .875rem; margin: 0 0 .75rem; }

/* ---- Cards ---- */
.k4k-card {
    background: #fff;
    border: 1px solid var(--k4k-line);
    border-top: 4px solid var(--k4k-purple);
    border-radius: .7rem;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 3px rgba(52, 28, 119, 0.06);
}
.k4k-card.accent-coral  { border-top-color: var(--k4k-coral); }
.k4k-card.accent-yellow { border-top-color: var(--k4k-yellow); }
.k4k-card.accent-teal   { border-top-color: var(--k4k-teal); }
.k4k-card h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--k4k-muted);
    margin: 0 0 0.4rem;
}
.k4k-metric { font-size: 2rem; font-weight: 800; color: var(--k4k-purple); margin: 0 0 0.25rem; }
.k4k-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.k4k-subtle { color: var(--k4k-muted); font-size: 0.9rem; }

/* ---- Slot picker grid (member /book page) ---- */
.k4k-slot-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.k4k-slot {
    border: 2px solid var(--k4k-line);
    background: #fff;
    color: var(--k4k-ink);
    border-radius: .4rem;
    padding: 0.4rem 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .12s ease-in-out;
}
.k4k-slot:hover:not(:disabled) { border-color: var(--k4k-teal); }
.k4k-slot.selected { background: var(--k4k-teal); border-color: var(--k4k-teal); color: #fff; }
.k4k-slot:disabled {
    background: var(--k4k-lavender);
    color: #b6b9c9;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* ---- Resource pick cards ---- */
.k4k-resource-card {
    border: 2px solid var(--k4k-line);
    border-radius: .7rem;
    background: #fff;
    padding: 1rem 1.1rem;
    cursor: pointer;
    transition: border-color .12s ease-in-out;
}
.k4k-resource-card:hover { border-color: var(--k4k-yellow); }
.k4k-resource-card.selected { border-color: var(--k4k-purple); box-shadow: 0 0 0 2px rgba(52,28,119,.15); }

/* ---- Admin page chrome ---- */
.k4k-swatch {
    display: inline-block; width: 18px; height: 18px;
    border-radius: 5px; vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 2px rgba(52, 28, 119, 0.15);
}

/* DevExpress grid dressed as a brand card */
.k4k-grid {
    border: 1px solid var(--k4k-line) !important;
    border-radius: .7rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(52, 28, 119, 0.06);
    margin-top: 1rem;
    background: #fff;
}
.k4k-grid .dxbl-grid-header {
    background: #f7f6ff;
    color: var(--k4k-purple);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.k4k-grid .dxbl-grid-table .dxbl-grid-data-row:hover > td { background: #f4f8ff; }

/* Scheduler gets the same card treatment */
.k4k-scheduler {
    background: #fff;
    border: 1px solid var(--k4k-line);
    border-radius: .7rem;
    padding: 0.5rem;
    box-shadow: 0 1px 3px rgba(52, 28, 119, 0.06);
    margin-top: 1rem;
}

/* Status badges */
.k4k-badge { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
.k4k-badge.good    { background: rgba(2, 184, 144, 0.14);  color: #01745b; }
.k4k-badge.info    { background: rgba(52, 28, 119, 0.10);  color: var(--k4k-purple); }
.k4k-badge.warn    { background: rgba(253, 181, 16, 0.18); color: #8a6003; }
.k4k-badge.bad     { background: rgba(254, 93, 55, 0.14);  color: #c23514; }
.k4k-badge.neutral { background: #eef0f6; color: #5a5f73; }

/* Grid action buttons pick up the palette */
.btn-outline-secondary { color: var(--k4k-purple); border-color: var(--k4k-purple); font-weight: 700; }
.btn-outline-secondary:hover { background: var(--k4k-purple); border-color: var(--k4k-purple); color: #fff; }
.btn-outline-danger { color: #c23514; border-color: #e8836b; font-weight: 700; }
.btn-outline-danger:hover { background: var(--k4k-coral); border-color: var(--k4k-coral); color: #fff; }
.btn-outline-warning { color: #8a6003; border-color: var(--k4k-yellow); font-weight: 700; }
.btn-outline-warning:hover { background: var(--k4k-yellow); border-color: var(--k4k-yellow); color: #3d2b00; }

/* Dashboard "today" list */
.k4k-today { list-style: none; padding: 0; margin: 0; }
.k4k-today li { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--k4k-line); }
.k4k-today li:last-child { border-bottom: none; }
.k4k-time-chip {
    background: rgba(2, 184, 144, 0.14); color: #01745b;
    font-weight: 800; border-radius: 999px; padding: 0.15rem 0.7rem;
    font-size: 0.8rem; white-space: nowrap;
}

.content { padding-top: 1.1rem; }

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }

.invalid { outline: 1px solid #e50000; }

.validation-message { color: #e50000; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}