/* Winner ERP theme — Modernist system, Winner Blue accent.
   Drop this file in at static/css/theme.css and link it in templates/base.html
   AFTER the Bootstrap <link> and AFTER the existing style.css:
     <link href="{% static 'css/theme.css' %}" rel="stylesheet">
   No template markup changes needed — this overrides Bootstrap's own variables
   and a few of the app's existing classes (navbar-dark, card-stat, low-stock, voucher/invoice).
*/
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 12%, transparent);
  --color-divider-strong: color-mix(in srgb, #201e1d 25%, transparent);

  --color-accent: #1596c0;
  --color-accent-100: #eef8fb;
  --color-accent-200: #d3eef6;
  --color-accent-300: #a6dced;
  --color-accent-400: #66bfdb;
  --color-accent-500: #2ba1c4;
  --color-accent-600: #157fa1;
  --color-accent-700: #0c6480;
  --color-accent-800: #0a4f65;
  --color-accent-900: #073c4c;

  --color-success: #2e7d4f;
  --color-warning: #b8871f;
  --color-danger: #ae1800;

  --font: "Archivo", system-ui, sans-serif;

  /* Bootstrap variable overrides — Bootstrap 5.3 reads these directly */
  --bs-body-font-family: var(--font);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 21, 150, 192;
  --bs-link-color: var(--color-accent-700);
  --bs-link-hover-color: var(--color-accent-900);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-success: var(--color-success);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
}

body { font-family: var(--font); line-height: 1.55; }
h1, h2, h3, h4, h5, h6, .navbar-brand, .btn, .card-title, .dialog-title {
  font-family: var(--font); letter-spacing: -0.01em;
}
h1, h2, h3, .navbar-brand { font-weight: 800; }
h4, h5, h6, .card-title, .dialog-title { font-weight: 700; }
.btn { font-weight: 600; }

/* — flat, zero-radius everywhere — */
.btn, .card, .form-control, .form-select, .modal-content, .table, .alert, .input,
.card-stat, .voucher, .invoice { border-radius: 0 !important; }

/* — nav bar: ink, not Bootstrap dark-gray — */
.navbar.bg-dark { background-color: var(--color-text) !important; }
.navbar-dark .nav-link:hover, .navbar-dark .nav-link.active { color: var(--color-accent-300) !important; }

/* — primary buttons: accent fill, flush-left label (Modernist convention) — */
.btn-primary {
  background-color: var(--color-accent) !important; border-color: var(--color-accent) !important;
  color: #fff !important; text-align: left; justify-content: flex-start;
}
.btn-primary:hover { background-color: var(--color-accent-600) !important; border-color: var(--color-accent-600) !important; }
.btn-primary:active { background-color: var(--color-accent-700) !important; border-color: var(--color-accent-700) !important; }
.btn-outline-primary { color: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.btn-outline-primary:hover { background-color: var(--color-accent) !important; color: #fff !important; }
.btn:focus-visible, .form-control:focus, .form-select:focus {
  outline: 2px solid var(--color-accent) !important; outline-offset: 2px; box-shadow: none !important;
  border-color: var(--color-accent) !important;
}

/* — cards / stat tiles: no boxed outline, the white fill against the page's
   grey ground is separation enough — leaner than a bordered tile — */
.card-stat { border: none !important; box-shadow: none !important; }

/* — tables: a clear but light header rule, roomier rows, easier to scan — */
.table thead th {
  text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em;
  border-bottom: 1.5px solid var(--color-divider-strong) !important; color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.table td, .table th { border-color: var(--color-divider) !important; }
.table { font-size: 0.92rem; }
.table td, .table th { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.table-sm > :not(caption) > * > * { padding: 0.55rem 0.7rem; }

/* — status utility classes already used in the app — */
.low-stock { color: var(--color-danger) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }

/* — voucher / invoice print surfaces — */
.voucher, .invoice { border: 1px solid var(--color-divider); box-shadow: none; }
@media print {
  .voucher, .invoice { border: 1px solid #000 !important; }
}