/* ============================================================================
   QuickStart — application styles
   Single source of truth for custom styling that used to live in per-template
   <style> blocks and inline style="" attributes.

   Load order: quickstart.css (compiled Bootstrap + brand vars)  ->  app.css
   Loaded once in templates/base.html and templates/dashboard_base.html, so it
   reaches every page through the base-template inheritance chain.

   When adding styles, prefer a class here over an inline style in a template,
   and reference the design tokens below instead of retyping raw hex values.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Design tokens
   The brand color mirrors $primary in scss/quickstart.scss. Exposing it (and
   the supporting palette) as custom properties gives templates a shared handle,
   so nobody has to hardcode #6552E8 / rgba(101,82,232,…) by hand again.
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --qs-brand:                #6552e8;
    --qs-brand-soft:           rgba(101, 82, 232, .06);
    --qs-brand-soft-2:         rgba(101, 82, 232, .12);
    --qs-brand-secondary:      #e8834a;
    --qs-brand-secondary-soft: rgba(232, 131, 74, .12);

    /* Surfaces & borders */
    --qs-surface:          #ffffff;
    --qs-surface-muted:    #faf3ea;
    --qs-border:           #ece3d8;
    --qs-border-strong:    #d9cbb8;

    /* Text */
    --qs-text-muted:       #7a7188;

    /* Status */
    --qs-success:          #198754;
    --qs-success-ink:      #137a3f;
    --qs-success-bg:       #d1f7e0;
    --qs-danger:           #dc3545;
    --qs-danger-ink:       #b42318;
    --qs-danger-bg:        #fde2e2;
    --qs-warning:          #ffc107;

    /* Radius */
    --qs-radius:           14px;
    --qs-radius-sm:        11px;
    --qs-radius-pill:      999px;

    /* Elevation (warm-tinted, not flat black) */
    --qs-shadow-card:      0 4px 16px rgba(101, 82, 62, .08);
    --qs-shadow-lift:      0 10px 28px rgba(101, 82, 62, .14);

    /* Dashboard sidebar */
    --qs-sidebar-bg:           #221b36;
    --qs-sidebar-hover:        rgba(255, 255, 255, .08);
    --qs-sidebar-text:         rgba(255, 255, 255, .78);
    --qs-sidebar-text-active:  #ffffff;
}

/* ----------------------------------------------------------------------------
   2. Utilities
   Small, reusable helpers that replace repeated inline styles.
   -------------------------------------------------------------------------- */

/* Toggle helper used as a JS hook across several forms (was redefined in
   client_detail, edit_booking, add_invoice, edit_invoice). */
.hidden { display: none; }

/* Auth / reset pages centered their card in a 60vh column via inline style. */
.min-vh-60 { min-height: 60vh; }

/* Dark scrim laid over hero imagery (was style="opacity: 0.5"). */
.hero-scrim { opacity: 0.5; }

/* Soft brand-tinted section background (marketing page). */
.section-brand-soft { background-color: var(--qs-brand-soft); }

/* Square brand icon tile (marketing feature/step lists). */
.brand-tile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-color: var(--qs-brand-soft-2);
}
.brand-tile--solid { background-color: var(--qs-brand); }

/* ----------------------------------------------------------------------------
   3. Forms
   -------------------------------------------------------------------------- */

/* Narrow, centered form column (was .container{max-width:600px} scoped inside
   create_staff_user — kept off Bootstrap's global .container on purpose). */
.form-narrow { max-width: 600px; margin-inline: auto; }

/* Leading icon inside an input/select. Shared by create_staff_user and
   edit_staff_user, which previously defined near-identical copies. */
.form-control-icon { position: relative; }
.form-control-icon input,
.form-control-icon select { padding-left: 2.5rem; }
.form-control-icon .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--qs-text-muted);
    pointer-events: none;
    z-index: 2;
}

/* Section wrapper spacing (feedback + booking forms). */
.form-section { margin-bottom: 2rem; }

/* Uppercase micro-heading that labels a group of fields. */
.section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--qs-text-muted);
    margin-bottom: 0.75rem;
}

/* Feedback star rating control. */
.star-rating {
    font-size: 1.5rem;
    color: var(--qs-warning);
    cursor: pointer;
}

/* Invoice line-item rows are laid out as space-between flex rows. Scoped to the
   formset container so it never touches create_client's "form-row row" (which
   rides on Bootstrap's .row and must stay a plain grid row). */
#formset-container .form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ----------------------------------------------------------------------------
   4. Components
   -------------------------------------------------------------------------- */

/* Card shell — staff edit screen. */
.edit-staff-wrapper { max-width: 1100px; margin: 2rem auto; }
.edit-staff-card {
    background: var(--qs-surface);
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-card);
}
.edit-staff-card .card-header {
    background: var(--qs-surface-muted);
    border-bottom: 1px solid var(--qs-border);
    padding: 1rem 1.25rem;
    border-radius: var(--qs-radius) var(--qs-radius) 0 0;
}
.edit-staff-card .card-body { padding: 1.5rem; }

/* Permissions summary panel (staff edit screen). */
.access-card {
    background: var(--qs-surface-muted);
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-sm);
    padding: 1rem 1.25rem;
}
.access-card h6 { margin-bottom: 0.5rem; font-weight: 600; }
.access-list { list-style: none; padding-left: 0; margin-bottom: 0.75rem; }
.access-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.9rem;
}
.access-list li .bi { flex-shrink: 0; margin-top: 2px; }
.access-allowed { color: var(--qs-success); }
.access-denied { color: #adb5bd; text-decoration: line-through; }
.access-denied .bi { color: var(--qs-danger); text-decoration: none; }

/* Group permission panels toggled by JS on the staff edit screen. */
.group-panel { display: none; }
.group-panel.active { display: block; }

/* Larger, pointer-friendly toggle switch (staff edit screen only — scoped so it
   doesn't resize Bootstrap switches on other forms like partner_company_form). */
.edit-staff-wrapper .form-check.form-switch .form-check-input {
    width: 2.5em;
    height: 1.4em;
    cursor: pointer;
}

/* Scrollable checkbox list (ticketing branches). */
.ticketing-branches-box {
    border: 1px solid var(--qs-border-strong);
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
    max-height: 180px;
    overflow-y: auto;
    background: var(--qs-surface);
}
.ticketing-branches-box .form-check { margin-bottom: 0.2rem; }
.ticketing-branches-box .form-check:last-child { margin-bottom: 0; }

/* Active / inactive status pill. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--qs-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}
.status-pill.active { background: var(--qs-success-bg); color: var(--qs-success-ink); }
.status-pill.inactive { background: var(--qs-danger-bg); color: var(--qs-danger-ink); }

/* Ticket table row hover emphasis. */
.ticket-row:hover {
    background-color: rgba(101, 82, 232, 0.08) !important;
}
.ticket-row:hover .branch-cell,
.ticket-row:hover .category-cell {
    background-color: rgba(101, 82, 232, 0.15) !important;
}

/* Keep long <select> option text from overflowing its control. */
select.form-control {
    max-width: 100%;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Audit / activity log dashboard. */
.audit-changes { font-size: 0.8rem; color: #444; max-width: 420px; }
.audit-changes code { white-space: normal; word-break: break-word; }
.audit-badge { font-size: 0.7rem; }
.audit-table td { vertical-align: top; }
.audit-meta { font-size: 0.75rem; color: #888; }

/* ----------------------------------------------------------------------------
   5. Dashboard sidebar
   Scoped by the .dashboard-sidebar class added to both the mobile navbar and
   the desktop sidebar in templates/dashboard_base.html, so it can carry its
   own dark tone (deep plum) distinct from other .bg-dark usages elsewhere
   (hero scrims, badges) which stay on the Sass $dark value.
   -------------------------------------------------------------------------- */
.dashboard-sidebar.bg-dark {
    background-color: var(--qs-sidebar-bg) !important;
}

.dashboard-sidebar .nav-link {
    border-radius: var(--qs-radius-sm);
    margin: 2px 8px;
    padding: .5rem .75rem;
    color: var(--qs-sidebar-text);
}
.dashboard-sidebar .nav-link:hover,
.dashboard-sidebar .nav-link:focus {
    background-color: var(--qs-sidebar-hover);
    color: var(--qs-sidebar-text-active);
}

.dashboard-sidebar .row.mb-4 > div,
.dashboard-sidebar .row.mt-auto > div {
    margin: 2px 12px;
    border-radius: var(--qs-radius-sm);
    transition: background-color .15s ease;
}
.dashboard-sidebar .row.mb-4 > div:hover,
.dashboard-sidebar .row.mt-auto > div:hover {
    background-color: var(--qs-sidebar-hover);
}
.dashboard-sidebar .row.mb-4 > div a,
.dashboard-sidebar .row.mt-auto > div a {
    color: var(--qs-sidebar-text);
    font-weight: 500;
}
.dashboard-sidebar .row.mb-4 > div a:hover,
.dashboard-sidebar .row.mt-auto > div a:hover {
    color: var(--qs-sidebar-text-active);
}