/*
 * Quickflow Auto Lube — Brand Theme
 *
 * Drop-in CSS variables and base styling derived from the official brand guide
 * (Aurora Digital, v1.0, 1 June 2026).
 *
 * This file is the canonical source of brand colours, fonts, and base styles
 * for the Quickflow Blazor application. All component styles should reference
 * the CSS custom properties defined here rather than hard-coding colour or
 * font values.
 *
 * Cross-reference: docs/BRAND.md (machine-readable brand guide)
 *                  docs/QFAL_Brand_Guide_V1_O_.pdf (canonical source)
 */

/* -------------------------------------------------------------------------- */
/* Font loading — Outfit (UI) and Zen Dots (logo wordmark only)               */
/* -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600&family=Zen+Dots&display=swap');


/* -------------------------------------------------------------------------- */
/* Brand custom properties                                                    */
/* -------------------------------------------------------------------------- */

:root {
  /* -- Brand colours (the only five) -- */
  --qf-yellow:     #ffcf02;  /* Pantone 109 C   — primary accent */
  --qf-black:      #231f20;  /* Pantone Black 7 C — primary text, dark surfaces */
  --qf-grey-10c:   #6d6e71;  /* Pantone Cool Gray 10 C — secondary text, strong borders */
  --qf-grey-8c:    #808285;  /* Pantone Cool Gray 8 C  — mid-tone, AUTO LUBE wordmark */
  --qf-grey-6c:    #939598;  /* Pantone Cool Gray 6 C  — light borders, dividers */

  /* -- Functional aliases for clarity at usage sites -- */
  --qf-surface:           #ffffff;
  --qf-surface-elevated:  #ffffff;
  --qf-surface-subtle:    #faf9f5;
  --qf-text-primary:      var(--qf-black);
  --qf-text-secondary:    var(--qf-grey-10c);
  --qf-text-tertiary:     var(--qf-grey-8c);
  --qf-border-default:    var(--qf-grey-6c);
  --qf-border-strong:     var(--qf-black);
  --qf-accent:            var(--qf-yellow);
  --qf-accent-fg:         var(--qf-black);   /* text on yellow */

  /* -- Status colours (NOT brand colours; use sparingly for their dedicated purpose) -- */
  --qf-status-success:    #3B6D11;
  --qf-status-success-bg: #E1F5EE;
  --qf-status-warning:    #854F0B;
  --qf-status-warning-bg: #FAEEDA;
  --qf-status-error:      #B81B1B;
  --qf-status-error-bg:   #FBEAEA;
  --qf-status-overtime:   #C2410C;  /* burnt orange — escalation between warning gold and error red */
  --qf-status-overtime-bg:#FBEAE0;
  --qf-status-info:       var(--qf-grey-10c);
  --qf-status-info-bg:    var(--qf-surface-subtle);

  /* -- Typography -- */
  --qf-font-ui:   'Outfit', -apple-system, 'Segoe UI', sans-serif;
  --qf-font-mark: 'Zen Dots', 'Outfit', sans-serif;  /* logo wordmark only */

  /* -- Sizing -- */
  --qf-radius-card:   4pt;
  --qf-radius-button: 6pt;
  --qf-border-width:  1px;
}


/* -------------------------------------------------------------------------- */
/* Base element styles                                                        */
/* -------------------------------------------------------------------------- */

html, body {
  font-family: var(--qf-font-ui);
  font-weight: 500;             /* Outfit Medium for body */
  color: var(--qf-text-primary);
  background: var(--qf-surface);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--qf-font-ui);
  font-weight: 600;             /* Outfit SemiBold for headings */
  color: var(--qf-text-primary);
  letter-spacing: -0.2px;
}

h1 { font-size: 28pt; line-height: 1.2; }
h2 { font-size: 20pt; line-height: 1.25; }
h3 { font-size: 15pt; line-height: 1.3; }
h4 { font-size: 12pt; line-height: 1.35; }

/* FocusOnNavigate moves focus to the page <h1> on route change (accessibility).
   Suppress the resulting focus ring so the heading doesn't look boxed. */
h1:focus, h1:focus-visible {
  outline: none;
}

/* Form controls don't inherit font-family by default — force Outfit everywhere
   (buttons especially, which otherwise fall back to the browser default font). */
button, input, select, textarea, optgroup {
  font-family: var(--qf-font-ui);
}

a {
  color: var(--qf-text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
a:hover { border-bottom-color: var(--qf-accent); }


/* -------------------------------------------------------------------------- */
/* Top navigation bar — black surface with yellow accent for logo / active    */
/* -------------------------------------------------------------------------- */

.qf-navbar {
  background: var(--qf-black);
  color: var(--qf-surface);
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 24px;
}

.qf-navbar .qf-logo {
  font-family: var(--qf-font-mark);
  font-size: 18pt;
  color: var(--qf-yellow);
  letter-spacing: 0;
  /* When the logo SVG is available, replace this text with an <img src="...logo.svg"> */
}

.qf-navbar a {
  color: var(--qf-surface);
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.qf-navbar a:hover {
  color: var(--qf-yellow);
  border-bottom-color: transparent;
}
.qf-navbar a.active {
  color: var(--qf-surface);
  border-bottom-color: var(--qf-yellow);  /* yellow underline for current section */
}


/* -------------------------------------------------------------------------- */
/* Sidebar navigation                                                         */
/* -------------------------------------------------------------------------- */

.qf-sidebar {
  background: var(--qf-surface);
  border-right: var(--qf-border-width) solid var(--qf-border-default);
  width: 220px;
  padding: 16px 0;
}

.qf-sidebar a {
  display: block;
  padding: 8px 24px;
  color: var(--qf-text-primary);
  border-left: 3px solid transparent;
}

.qf-sidebar a:hover {
  background: var(--qf-surface-subtle);
}

.qf-sidebar a.active {
  border-left-color: var(--qf-yellow);
  font-weight: 600;
  background: var(--qf-surface-subtle);
}


/* -------------------------------------------------------------------------- */
/* Cards and panels                                                           */
/* -------------------------------------------------------------------------- */

.qf-card {
  background: var(--qf-surface);
  border: var(--qf-border-width) solid var(--qf-border-default);
  border-radius: var(--qf-radius-card);
  padding: 16px 20px;
}

.qf-card:hover,
.qf-card.selected {
  border-color: var(--qf-border-strong);  /* black on hover/select — NOT yellow */
}


/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */

.qf-btn {
  font-family: var(--qf-font-ui);
  font-weight: 600;
  font-size: 10.5pt;
  padding: 8px 16px;
  border-radius: var(--qf-radius-button);
  border: var(--qf-border-width) solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.qf-btn-primary {
  background: var(--qf-yellow);
  color: var(--qf-accent-fg);
}
.qf-btn-primary:hover {
  background: #ffd932;     /* very slight yellow shift, still on brand */
}

.qf-btn-secondary {
  background: var(--qf-surface);
  color: var(--qf-text-primary);
  border-color: var(--qf-border-strong);
}
.qf-btn-secondary:hover {
  background: var(--qf-surface-subtle);
}

.qf-btn-destructive {
  background: var(--qf-surface);
  color: var(--qf-status-error);
  border-color: var(--qf-status-error);
}
.qf-btn-destructive:hover {
  background: var(--qf-status-error-bg);
}


/* -------------------------------------------------------------------------- */
/* Form inputs                                                                */
/* -------------------------------------------------------------------------- */

.qf-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  font-family: var(--qf-font-ui);
  font-weight: 500;
  font-size: 10.5pt;
  color: var(--qf-text-primary);
  background: var(--qf-surface);
  border: var(--qf-border-width) solid var(--qf-border-default);
  border-radius: 4pt;
  padding: 8px 12px;
}

.qf-input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--qf-border-strong);
  box-shadow: 0 0 0 2px rgba(255, 207, 2, 0.35);  /* soft yellow halo on focus */
}


/* -------------------------------------------------------------------------- */
/* Tables                                                                     */
/* -------------------------------------------------------------------------- */

.qf-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--qf-font-ui);
  font-weight: 500;
}

.qf-table th {
  background: var(--qf-surface-subtle);
  color: var(--qf-text-primary);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: var(--qf-border-width) solid var(--qf-border-strong);
}

.qf-table td {
  padding: 10px 12px;
  border-bottom: var(--qf-border-width) solid var(--qf-border-default);
}

.qf-table tr:hover td {
  background: var(--qf-surface-subtle);
}


/* -------------------------------------------------------------------------- */
/* Status badges and messages                                                 */
/* -------------------------------------------------------------------------- */

.qf-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 9pt;
  font-weight: 600;
  background: var(--qf-surface-subtle);
  color: var(--qf-text-primary);
}

.qf-badge-success { background: var(--qf-status-success-bg); color: var(--qf-status-success); }
.qf-badge-warning { background: var(--qf-status-warning-bg); color: var(--qf-status-warning); }
.qf-badge-error   { background: var(--qf-status-error-bg);   color: var(--qf-status-error); }
.qf-badge-info    { background: var(--qf-status-info-bg);    color: var(--qf-status-info); }


/* -------------------------------------------------------------------------- */
/* What NOT to use — guard rails                                              */
/* -------------------------------------------------------------------------- */

/*
 * Do not introduce any of the following colours anywhere in the application:
 *   - Magenta / hot pink (#EC008C, #FF1493, etc.)
 *   - Blue (#185FA5, #0066CC, etc.)
 *   - Loud green (#28A745, etc.)  — use --qf-status-success only for true success states
 *   - Loud red (#DC3545, etc.)    — use --qf-status-error only for true error states
 *
 * Do not introduce any font other than Outfit and Zen Dots.
 * Do not use Zen Dots for UI text — only for the logo wordmark.
 */