/* ============================================================
   OrderPlaced — Website Theme
   Extracted from the Flutter app (main.dart, login_screen.dart,
   dashboard_screen.dart, registration_screen.dart)
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────────
   THESE ARE FALLBACKS ONLY.

   The live palette is computed from ONE colour: "Theme": { "Primary": … } in
   appsettings.json. ThemeSettings derives every value below from it in HSL,
   ThemeProvider caches the result, and Views/Shared/_ThemeVariables.cshtml
   re-declares this whole :root block in every layout AFTER this file loads.
   Same specificity, later wins — so the values below are only what the site
   falls back to if the Theme section is missing, and changing a hex HERE has
   no effect on a running site. Re-theme by editing Theme:Primary; touch this
   block only to change a fallback.

   Kept in step with the derivation: these are the values the engine produces
   for Primary #1A6B4A, so the fallback and the computed palette agree.

   Every colour also carries an `-rgb` twin holding just the channels, for
   translucent fills: rgba(var(--color-primary-rgb), 0.12). Literal
   rgba(26, 107, 74, …) would survive a re-theme and leave washed-out tints of
   the old green behind, so use the variable form in new CSS.
   ───────────────────────────────────────────────────────────── */
:root {
  /* Primary palette */
  --color-primary:            #1A6B4A;   /* main green — buttons, header, links   */
  --color-primary-rgb:        26, 107, 74;
  --color-primary-dark:       #0D4432;   /* dark green — gradient end, hover      */
  --color-primary-dark-rgb:   13, 68, 50;
  --color-primary-mid:        #4FA37C;   /* mid stop in the 3-colour accent bars  */
  --color-primary-mid-rgb:    79, 163, 124;
  --color-primary-light:      #E8F5EE;   /* tinted bg  — banner, section bg       */
  --color-primary-light-rgb:  232, 245, 238;

  /* Accent */
  --color-accent:             #F5A623;   /* amber — highlights, badges, CTA       */
  --color-accent-rgb:         245, 166, 35;
  --color-accent-dark:        #B97200;   /* amber gradient end                    */
  --color-accent-dark-rgb:    185, 114, 0;
  --color-accent-text:        #A66A00;   /* amber readable on a light fill         */
  --color-accent-text-rgb:    166, 106, 0;
  --color-accent-deep:        #7A5A12;   /* small print on an accent panel        */
  --color-accent-deep-rgb:    122, 90, 18;
  --color-accent-light:       #FFF8E8;   /* tinted amber — banner bg              */
  --color-accent-light-rgb:   255, 248, 232;

  /* App / brand (MaterialApp seed) */
  --color-brand:              #210440;   /* deep purple — registration screen     */
  --color-brand-rgb:          33, 4, 64;
  --color-brand-rose:         #E5958E;   /* rose — secondary brand touch          */
  --color-brand-rose-rgb:     229, 149, 142;

  /* Text */
  --color-text-dark:          #1A1A2E;   /* headings, labels                      */
  --color-text-dark-rgb:      26, 26, 46;
  --color-text-grey:          #6B7280;   /* placeholders, secondary text          */
  --color-text-grey-rgb:      107, 114, 128;
  --color-text-white:         #FFFFFF;
  --color-text-white-rgb:     255, 255, 255;

  /* Backgrounds */
  --color-page-bg:            #F8FAF9;   /* page / input fill background          */
  --color-page-bg-rgb:        248, 250, 249;
  --color-card-bg:            #FFFFFF;   /* card / form panel                     */
  --color-card-bg-rgb:        255, 255, 255;

  /* Border */
  --color-border:             #D4E8DE;   /* input border, dividers                */
  --color-border-rgb:         212, 232, 222;
  --color-border-strong:      #C9D6D0;   /* heavier rules, disabled fills          */
  --color-border-strong-rgb:  201, 214, 208;

  /* Status / feedback */
  --color-error:              #D32F2F;   /* validation errors                     */
  --color-error-rgb:          211, 47, 47;
  --color-danger:             #C0392B;   /* destructive actions, blocked badges   */
  --color-danger-rgb:         192, 57, 43;
  --color-danger-dark:        #96271B;   /* danger hover                          */
  --color-danger-dark-rgb:    150, 39, 27;
  --color-danger-text:        #B03A28;   /* danger readable on a light fill        */
  --color-danger-text-rgb:    176, 58, 40;
  --color-danger-light:       #FADBD6;   /* tinted danger bg                      */
  --color-danger-light-rgb:   250, 219, 214;
  --color-success:            #1A6B4A;   /* same as primary                       */
  --color-success-rgb:        26, 107, 74;
  --color-info:               #1565C0;   /* in-progress / processing statuses     */
  --color-info-rgb:           21, 101, 192;
  --color-info-mid:           #3B82F6;   /* outline paired with Info text         */
  --color-info-mid-rgb:       59, 130, 246;
  --color-info-light:         #E8F0FD;   /* tinted info bg                        */
  --color-info-light-rgb:     232, 240, 253;
  --color-warning:            #D9A404;   /* pending outline / marker              */
  --color-warning-rgb:        217, 164, 4;

  /* Category icon colours */
  --color-cat-vegetables:     #4CAF50;
  --color-cat-vegetables-rgb: 76, 175, 80;
  --color-cat-bakery:         #F5A623;   /* same as accent                        */
  --color-cat-bakery-rgb:     245, 166, 35;
  --color-cat-drinks:         #29B6F6;
  --color-cat-drinks-rgb:     41, 182, 246;
  --color-cat-drinks-dark:    #01579B;   /* blue tile gradient end, paired text   */
  --color-cat-drinks-dark-rgb: 1, 87, 155;
  --color-cat-dairy:          #FF8A65;
  --color-cat-dairy-rgb:      255, 138, 101;
  --color-cat-dairy-dark:     #BF360C;   /* coral tile gradient end, paired text  */
  --color-cat-dairy-dark-rgb: 191, 54, 12;

  /* Banner / card tint backgrounds */
  --color-banner-1:           #E8F5EE;
  --color-banner-1-rgb:       232, 245, 238;
  --color-banner-2:           #FFF8E8;
  --color-banner-2-rgb:       255, 248, 232;
  --color-banner-3:           #E8F0FD;
  --color-banner-3-rgb:       232, 240, 253;
  --color-banner-4:           #FFF0F3;
  --color-banner-4-rgb:       255, 240, 243;
  --color-banner-5:           #EEF8F4;
  --color-banner-5-rgb:       238, 248, 244;

  /* Gradients */
  --gradient-header: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );

  /* Accent gradient — buttons and chips that sit opposite a primary one */
  --gradient-accent: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    var(--color-accent-dark) 100%
  );

  /* Border-radius */
  --radius-sm:     8px;
  --radius-md:     12px;   /* inputs, product cards                          */
  --radius-btn:    14px;   /* buttons                                        */
  --radius-lg:     20px;   /* chips / pill badges                            */
  --radius-xl:     36px;   /* bottom-sheet / hero card top corners           */
  --radius-full:   9999px; /* fully rounded — bubbles                        */

  /* Typography — sizes */
  --font-size-xs:   10px;
  --font-size-sm:   11px;
  --font-size-base: 13px;
  --font-size-body: 14px;
  --font-size-md:   15px;
  --font-size-lg:   16px;
  --font-size-xl:   22px;
  --font-size-2xl:  26px;

  /* Typography — weights */
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* Letter spacing */
  --letter-spacing-brand:  0.5px;  /* app name "OrderPlaced"                 */

  /* Shadows */
  --shadow-card:    0 -4px 20px rgba(0, 0, 0, 0.08);
  --shadow-float:   0  4px 16px rgba(0, 0, 0, 0.10);
  --shadow-btn:     0  2px  8px rgba(var(--color-primary-rgb), 0.30);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ── Reset / base ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-page-bg);
  color: var(--color-text-dark);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Header / Navbar ───────────────────────────────────────── */
.header {
  background: var(--gradient-header);
  color: var(--color-text-white);
  padding: 16px 24px;
}

.header .brand-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-brand);
}

.header .brand-tagline {
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.75);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border: none;
  border-radius: var(--radius-btn);
  padding: 14px 24px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-btn);
}

.btn-primary:disabled {
  background-color: rgba(var(--color-primary-rgb), 0.50);
  cursor: not-allowed;
}

.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-text-white);
  border: none;
  border-radius: var(--radius-btn);
  padding: 14px 24px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.btn-accent:hover {
  opacity: 0.88;
}

.btn-text {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  padding: 4px 0;
}

/* ── Inputs ────────────────────────────────────────────────── */
.input-field {
  width: 100%;
  background-color: var(--color-page-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: var(--font-size-md);
  color: var(--color-text-dark);
  transition: border-color var(--transition-fast);
  outline: none;
}

.input-field::placeholder {
  color: var(--color-text-grey);
  font-size: var(--font-size-body);
}

.input-field:focus {
  border-color: var(--color-primary);
  border-width: 1.5px;
}

.input-field.error {
  border-color: var(--color-error);
}

.input-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  margin-bottom: 8px;
  display: block;
}

.input-error-text {
  color: var(--color-error);
  font-size: var(--font-size-base);
  margin-top: 4px;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  padding: 16px;
}

.card-sheet {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-card);
  padding: 28px;
}

/* ── Badges / Chips ────────────────────────────────────────── */
.badge-accent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: rgba(var(--color-accent-rgb), 0.12);
  border: 1px solid rgba(var(--color-accent-rgb), 0.30);
  border-radius: var(--radius-lg);
  padding: 5px 10px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
}

.badge-primary {
  background-color: rgba(var(--color-primary-rgb), 0.12);
  border: 1px solid rgba(var(--color-primary-rgb), 0.30);
  border-radius: var(--radius-lg);
  padding: 4px 10px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

/* ── Category icon bubble ──────────────────────────────────── */
.category-bubble {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 1.5px;
  border-style: solid;
}

.category-bubble.vegetables {
  background-color: rgba(var(--color-cat-vegetables-rgb), 0.20);
  border-color:     rgba(var(--color-cat-vegetables-rgb), 0.45);
  color: var(--color-cat-vegetables);
}

.category-bubble.drinks {
  background-color: rgba(var(--color-cat-drinks-rgb), 0.20);
  border-color:     rgba(var(--color-cat-drinks-rgb), 0.45);
  color: var(--color-cat-drinks);
}

.category-bubble.dairy {
  background-color: rgba(var(--color-cat-dairy-rgb), 0.20);
  border-color:     rgba(var(--color-cat-dairy-rgb), 0.45);
  color: var(--color-cat-dairy);
}

.category-bubble.bakery {
  background-color: rgba(var(--color-accent-rgb), 0.20);
  border-color:     rgba(var(--color-accent-rgb), 0.45);
  color: var(--color-cat-bakery);
}

/* ── Banner / promo cards ──────────────────────────────────── */
.banner-1 { background-color: var(--color-banner-1); }
.banner-2 { background-color: var(--color-banner-2); }
.banner-3 { background-color: var(--color-banner-3); }
.banner-4 { background-color: var(--color-banner-4); }
.banner-5 { background-color: var(--color-banner-5); }

/* ── Typography helpers ────────────────────────────────────── */
.text-heading {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.text-subheading {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  letter-spacing: var(--letter-spacing-brand);
}

.text-body {
  font-size: var(--font-size-body);
  color: var(--color-text-grey);
}

.text-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

.text-muted {
  font-size: var(--font-size-base);
  color: var(--color-text-grey);
}

.text-accent {
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

.text-primary {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* ── Hero / illustration section ───────────────────────────── */
.hero-section {
  background: var(--gradient-header);
  padding: 48px 24px;
  text-align: center;
  color: var(--color-text-white);
  position: relative;
  overflow: hidden;
}

.hero-section .hero-icon-wrapper {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.hero-section .hero-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-brand);
}

.hero-section .hero-subtitle {
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.75);
  margin-top: 4px;
}

/* decorative background circles */
.hero-section::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.06);
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: -20px;
  width: 90px;
  height: 90px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.05);
}

/* ── Snackbar / Toast ──────────────────────────────────────── */
.toast {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: var(--font-size-body);
  color: var(--color-text-white);
  box-shadow: var(--shadow-float);
}

.toast.error   { background-color: var(--color-error); }
.toast.success { background-color: var(--color-primary); }

/* ── Order status pills ────────────────────────────────────── */
.status-delivered       { color: var(--color-primary);  background: var(--color-banner-1); }
.status-processing      { color: var(--color-info);               background: var(--color-banner-3); }
.status-out-for-delivery{ color: var(--color-accent);   background: var(--color-banner-2); }
.status-cancelled       { color: var(--color-error);    background: var(--color-banner-4); }

[class^="status-"] {
  display: inline-block;
  border-radius: var(--radius-lg);
  padding: 3px 10px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}