/* ==================================================================== *
 * CropVision theme — UPL South Africa brand
 *
 * Same method as the Revolute toolbox theme: one set of design tokens,
 * then overrides for every Quasar component the app uses, so nothing
 * falls back to the stock Material look.
 *
 * Brand colour values are verbatim from the UPL ZA brand reference.
 * Actions are ink-on-white by request; orange is the brand accent
 * (header band, active nav, focus ring, tab indicator, selected row,
 * spinners). Orange is never text: it is 2.38:1 on white.
 *
 * Cascade: every rule sits in NiceGUI's `components` layer. That layer
 * beats Quasar's own styles but loses to Tailwind utilities, so a
 * `.classes('shadow-lg rounded-none')` in page code still wins. The few
 * `!important` flags beat Quasar's `!important` colour helpers
 * (`bg-primary`, `text-white`), which live in a later layer.
 * ==================================================================== */

:root {
  /* ------------------------------------------------ brand (verbatim) */
  --upl-orange: #ff8833;
  --upl-orange-alt: #ff7733;
  --upl-orange-mid: #f38026;
  --upl-orange-access: #a8480a; /* AA-safe orange for text and icons */
  --upl-orange-deep: #eb4724;
  --upl-magenta: #c500b7;
  --upl-red: #e33a40;
  --upl-green: #479036;

  --upl-ink: #010101;
  --upl-900: #292929;
  --upl-700: #4e4e4e;
  --upl-600: #595959;
  --upl-500: #808080;
  --upl-400: #9f9f9f;
  --upl-300: #cecece;
  --upl-200: #dddddd;
  --upl-150: #e4e4e4;
  --upl-100: #eeeded;
  --upl-50: #f3f3f3;
  --upl-white: #ffffff;

  /* -------------------------------------------------------- derived */
  --upl-orange-soft: #fff6ef; /* brand reference callout background */
  --upl-orange-tint: #ffead9; /* active nav, selected option */

  /* Surfaces */
  --bg: var(--upl-50);
  --surface: var(--upl-white);
  --surface-2: #fafafa;
  --surface-hover: #f5f5f5;
  --border: var(--upl-150);
  --border-strong: var(--upl-300);

  /* Text. Tertiary is darker than grey 500 so small labels pass AA. */
  --text: var(--upl-900);
  --text-secondary: var(--upl-600);
  --text-tertiary: #6e6e6e;

  /* Status. Text-safe shades of the brand green and red (the brand
     reference's pass/fail colours); the brand values stay for fills. */
  --success: #2b6e1f;
  --danger: #b3261e;
  --danger-soft: #fbe9e8;

  /* Geometry */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
  --focus-ring: 0 0 0 3px rgba(255, 136, 51, 0.28);
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

@layer components {
  /* ============================================================ base */
  body {
    font-family: "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  *::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }
  *::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 5px;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: var(--upl-400);
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }

  /* ========================================================== header */
  .app-header {
    background: var(--surface);
    color: var(--text);
    border-top: 3px solid var(--upl-orange);
    box-shadow: 0 1px 0 var(--border);
    min-height: 56px;
    padding: 0 16px 0 8px;
    gap: 12px;
  }
  .app-header-logo {
    height: 28px;
    width: auto;
  }
  .app-header .app-header-divider {
    background: var(--border);
    height: 24px;
  }
  .app-header-product {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text);
  }
  .app-header-crumb {
    color: var(--upl-400);
    margin: 0 -6px;
  }
  .app-header-page {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
  }

  /* ========================================================== drawer */
  .q-drawer {
    background: var(--surface);
  }
  .q-drawer--bordered.q-drawer--left {
    border-right-color: var(--border);
  }
  .q-drawer .nicegui-drawer {
    padding: 12px;
    gap: 2px;
  }
  /* Small-caps section label with the brand's short orange rule. */
  .drawer-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 16px 0 6px;
    padding: 0 10px;
  }
  .drawer-section-label::before {
    content: "";
    width: 14px;
    height: 3px;
    background: var(--upl-orange);
  }

  .q-btn.nav-btn {
    color: var(--text) !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    min-height: 38px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
  }
  .q-btn.nav-btn .q-icon {
    color: var(--text-tertiary);
    font-size: 20px;
    margin-right: 12px;
  }
  .q-btn.nav-btn:hover .q-icon {
    color: var(--text);
  }
  .q-btn.nav-btn--active {
    background: var(--upl-orange-tint);
    font-weight: 600;
  }
  .q-btn.nav-btn--active .q-icon,
  .q-btn.nav-btn--active:hover .q-icon {
    color: var(--upl-orange-access);
  }
  .q-btn.nav-btn--active .q-focus-helper {
    display: none;
  }
  .q-btn.nav-btn.text-negative {
    color: var(--danger) !important;
  }
  .q-btn.nav-btn.text-negative .q-icon {
    color: var(--danger);
  }

  /* ========================================================== fields */
  /* Every variant (standard, outlined, filled) renders as one boxed
     control. The border is an inset shadow, so it never shifts layout. */
  .q-field__control {
    height: 40px;
    padding: 0 12px;
    color: var(--text);
    background: var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--border-strong);
    transition: box-shadow var(--transition);
  }
  .q-field__control::before,
  .q-field__control::after {
    display: none;
  }
  .q-field:hover .q-field__control {
    box-shadow: inset 0 0 0 1px var(--upl-500);
  }
  .q-field.q-field--focused .q-field__control {
    box-shadow: inset 0 0 0 1px var(--upl-orange), var(--focus-ring);
  }
  .q-field.q-field--error .q-field__control {
    box-shadow: inset 0 0 0 1px var(--danger);
  }
  .q-field--disabled .q-field__control {
    background: var(--surface-2);
  }
  .q-field.q-field--borderless .q-field__control {
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .q-field--dense .q-field__control,
  .q-field--dense .q-field__marginal {
    height: 36px;
  }
  /* Fields that grow with their content: select, file, textarea and
     autogrow input. Quasar gives a textarea (and an autogrow input) the
     q-textarea class, not q-field--auto-height. This layer beats Quasar's
     own height: auto, so both classes must be named here. */
  .q-field--auto-height .q-field__control,
  .q-textarea .q-field__control {
    height: auto;
    min-height: 40px;
  }
  .q-field--auto-height.q-field--dense .q-field__control,
  .q-textarea.q-field--dense .q-field__control {
    min-height: 36px;
  }

  .q-field__marginal {
    height: 40px;
    font-size: 20px;
    color: var(--text-tertiary);
  }

  /* Labels sit above the box, never inside it. The map overlay opts out
     with `field-inline-label`: a label above it would sit on imagery. */
  .q-field--labeled:not(.field-inline-label) {
    padding-top: 20px;
  }
  .q-field--labeled:not(.field-inline-label) .q-field__label,
  .q-field--labeled.q-field--float:not(.field-inline-label) .q-field__label {
    /* ponytail: -12px undoes the control padding; a field with a prepend
       icon would need the icon width too. None exist yet. */
    top: -20px;
    left: -12px;
    transform: none;
    max-width: calc(100% + 24px);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0;
    color: var(--text-secondary);
  }
  .q-field--focused:not(.field-inline-label) .q-field__label {
    color: var(--text);
  }
  .q-field--error:not(.field-inline-label) .q-field__label {
    color: var(--danger);
  }

  .q-field:not(.field-inline-label) .q-field__native,
  .q-field:not(.field-inline-label) .q-field__prefix,
  .q-field:not(.field-inline-label) .q-field__suffix {
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 24px;
  }
  .q-field--dense:not(.field-inline-label) .q-field__native,
  .q-field--dense:not(.field-inline-label) .q-field__prefix,
  .q-field--dense:not(.field-inline-label) .q-field__suffix {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .q-field--auto-height:not(.field-inline-label) .q-field__native {
    min-height: 40px;
  }
  .q-field--auto-height.q-field--dense:not(.field-inline-label) .q-field__native {
    min-height: 36px;
  }
  .q-field:not(.field-inline-label) .q-field__control-container {
    padding-top: 0;
  }
  .q-textarea:not(.field-inline-label) .q-field__native {
    min-height: 80px;
    line-height: 20px;
  }

  .q-field__native,
  .q-field__input {
    font-size: 14px;
    color: var(--text);
  }
  .q-field__native::placeholder,
  .q-field__input::placeholder,
  .q-field--labeled:not(.q-field--float) .q-field__native::placeholder,
  .q-field--labeled:not(.q-field--float) .q-field__input::placeholder {
    color: var(--text-tertiary);
  }
  .q-field__bottom {
    padding: 4px 0 0;
    font-size: 12px;
  }

  /* ========================================================= buttons */
  /* Sentence case, semibold, flat. Quasar paints elevation on ::before,
     which is why a plain `box-shadow: none` never took it away. */
  .q-btn {
    text-transform: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .q-btn::before {
    box-shadow: none;
  }
  .q-btn--rectangle {
    border-radius: var(--radius-sm);
  }
  .q-btn--rectangle:not(.q-btn--dense) {
    min-height: 36px;
    padding: 4px 14px;
  }
  .q-btn .q-icon.on-left {
    margin-right: 8px;
  }
  .q-btn--push {
    border-radius: var(--radius-sm);
  }
  .q-btn--push::before {
    border-bottom: 0;
  }
  /* Outline takes the button's own colour, softened. */
  .q-btn--outline::before {
    border-color: color-mix(in srgb, currentColor 40%, transparent);
  }
  .q-btn--outline:hover::before {
    border-color: currentColor;
  }
  .q-btn:focus-visible {
    outline: 2px solid var(--upl-orange);
    outline-offset: 2px;
  }

  /* =========================================================== cards */
  .q-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
  }
  .q-separator {
    background: var(--border);
  }

  /* ========================================================= dialogs */
  .q-dialog__backdrop {
    background: rgba(1, 1, 1, 0.45);
    backdrop-filter: blur(2px);
  }
  .q-dialog .q-card {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  /* ========================================================== tables */
  .q-table__card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
  }
  .q-table th,
  .q-table td,
  .q-table thead,
  .q-table tr {
    border-color: var(--border);
  }
  .q-table thead tr {
    height: 40px;
  }
  .q-table th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    background: var(--surface-2);
  }
  .q-table th .q-table__sort-icon {
    color: var(--upl-orange-access);
  }
  .q-table tbody td {
    font-size: 13px;
    color: var(--text);
  }
  .q-table tbody tr:last-child > td {
    border-bottom-width: 0;
  }
  /* Selected row: brand tint plus an orange edge so it reads at a glance. */
  .q-table tbody tr.selected > td {
    background: var(--upl-orange-soft);
  }
  .q-table tbody tr.selected > td::after {
    background: transparent;
  }
  .q-table tbody tr.selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--upl-orange);
  }
  .q-table__bottom {
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
  }

  /* ============================================================ tabs */
  .q-tabs--horizontal {
    box-shadow: inset 0 -1px 0 var(--border);
  }
  .q-tab {
    min-height: 44px;
    padding: 0 14px;
    text-transform: none;
    color: var(--text-secondary);
  }
  .q-tab__label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
  }
  .q-tab--active {
    color: var(--text);
  }
  .q-tab--active .q-tab__label {
    font-weight: 600;
  }
  .q-tab__indicator {
    background: var(--upl-orange);
    height: 3px;
  }
  .q-tab-panels {
    background: transparent;
  }

  /* ================================================ menus and popups */
  .q-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 4px;
  }
  .q-menu .q-item {
    min-height: 36px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
  }
  .q-menu .q-item--active {
    background: var(--upl-orange-tint);
    font-weight: 600;
  }
  /* Quasar's 15% hover overlay turns the orange tint muddy. */
  .q-menu .q-hoverable:hover > .q-focus-helper,
  .q-menu .q-manual-focusable--focused > .q-focus-helper {
    opacity: 0.06;
  }
  .q-tooltip {
    background: var(--upl-900);
    color: var(--upl-white);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
  }

  /* One dark toast for every type; a coloured edge and the type's icon
     carry the meaning. Quasar sets the type colour as `!important`. */
  .q-notification {
    background: var(--upl-900) !important;
    color: var(--upl-white) !important;
    border-left: 4px solid var(--upl-500);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    font-size: 13px;
  }
  .q-notification.bg-positive {
    border-left-color: var(--upl-green);
  }
  .q-notification.bg-negative {
    border-left-color: var(--upl-red);
  }
  .q-notification.bg-warning {
    border-left-color: var(--upl-orange);
  }
  .q-notification .q-btn {
    color: var(--upl-white) !important;
  }

  /* ========================================================== badges */
  .q-badge {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  /* ======================================================== uploader */
  .q-uploader {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    box-shadow: none;
    background: var(--surface-2);
  }
  .q-uploader__header {
    background: transparent !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border);
  }

  /* ======================================================== spinners */
  /* Every loading spinner takes the brand orange, whatever colour prop
     the element was given. */
  .q-spinner {
    color: var(--upl-orange) !important;
  }
}