/* =====================================================================
   RAG Solutions — application theme

   Design posture ported from the Innova LicenseManager dashboard
   (dashboard/tailwind.config.js + src/index.css), which is the same
   design language as the mother app's common-front. The rules that
   define the look there, and that this file reproduces on Bootstrap:

     - FLAT surfaces. One dark ink bar, no gradients anywhere.
     - HAIRLINES do the separating (#C4D9E9), not shadows. Shadows are
       two barely-there navy-tinted layers, never a lift.
     - LOW-NOISE. Section subtitles and hint lines are deliberately not
       rendered; labels are small, uppercase and tracked instead.
     - STATUS IS TONAL. No solid traffic-light fills — soft tint + ink +
       hairline, so the page reads as a tool, not a mood board.

   Loaded by views/partials/brand-head.ejs → /login, /signup, /customer
   ONLY. The admin editor and /accounts do not include it.
   Load AFTER bootstrap.min.css.
   ===================================================================== */
:root {
  /* --- Brand (RAG Solutions navy + silver) --- */
  --brand-navy:        #1e2b4a;
  --brand-navy-deep:   #131d33;
  --brand-navy-600:    #26365c;
  --brand-silver:      #9aa1ab;
  --brand-silver-light:#c9ced5;
  /* Link/accent blue: the suite's #16498f, not an electric blue. Quiet
     enough to sit in body text without pulling the eye off the action. */
  --brand-accent:      #16498f;
  --brand-accent-600:  #113b7d;

  /* --- Surfaces (Innova shell tones) --- */
  --app-bg:        #f5f8ff;      /* bluish page canvas */
  --surface:       #ffffff;
  --surface-muted: #f5f7fc;      /* zebra / subtle fills */
  --border:        #c4d9e9;      /* the hairline colour */
  --border-soft:   #dbe7f2;      /* hairline at ~60%, for inner dividers */
  --ink:           #293137;      /* primary text — also the header bar */
  --ink-muted:     #5b6c85;      /* secondary text */

  /* --- Status vocabulary --- */
  --ok-color:      #048304;
  --error-color:   #e22a01;
  --warning-color: #ff6600;
  --skipped-color: #9fa3aa;
  --running-color: #2e3436;
  --waiting-color: #6a87b4;

  /* --- The one shadow. Two near-invisible navy layers, no spread. --- */
  --shadow-card: 0 1px 2px rgba(17, 59, 125, .05), 0 1px 3px rgba(17, 59, 125, .07);
  --shadow-pop:  0 4px 16px rgba(17, 59, 125, .10), 0 1px 3px rgba(17, 59, 125, .07);

  --radius: 10px;

  /* --- Bootstrap remap --- */
  --bs-primary:          var(--brand-navy);
  --bs-primary-rgb:      30, 43, 74;
  --bs-link-color:       var(--brand-accent);
  --bs-link-color-rgb:   22, 73, 143;
  --bs-link-hover-color: var(--brand-accent-600);
  --bs-body-color:       var(--ink);
  --bs-body-bg:          var(--app-bg);
  --bs-body-font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --bs-border-color:     var(--border);
}

body {
  background: var(--app-bg);
  color: var(--ink);
  font-family: var(--bs-body-font-family);
}

/* =====================================================================
   Buttons — rounded-md, tracked, flat. The suite's action vocabulary:
   primary = the "do it" action, secondary = tonal support, the rest quiet.
   ===================================================================== */
.btn {
  --bs-btn-border-radius: 6px;
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 500;
  letter-spacing: .01em;
}
.btn-primary {
  --bs-btn-bg: var(--brand-navy);
  --bs-btn-border-color: var(--brand-navy);
  --bs-btn-hover-bg: var(--brand-navy-600);
  --bs-btn-hover-border-color: var(--brand-navy-600);
  --bs-btn-active-bg: var(--brand-navy-deep);
  --bs-btn-active-border-color: var(--brand-navy-deep);
  --bs-btn-disabled-bg: var(--brand-silver);
  --bs-btn-disabled-border-color: var(--brand-silver);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-navy);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--brand-navy);
  --bs-btn-hover-border-color: var(--brand-navy);
  --bs-btn-active-bg: var(--brand-navy);
  --bs-btn-active-border-color: var(--brand-navy);
}
/* Secondary actions are TONAL, not solid: soft tint, hairline, ink text.
   Applies to the outline-secondary buttons that make up the row toolbars. */
.btn-outline-secondary {
  --bs-btn-color: var(--ink-muted);
  --bs-btn-border-color: var(--border);
  --bs-btn-bg: var(--surface);
  --bs-btn-hover-bg: var(--surface-muted);
  --bs-btn-hover-border-color: var(--brand-silver-light);
  --bs-btn-hover-color: var(--brand-accent);
  --bs-btn-active-bg: var(--surface-muted);
  --bs-btn-active-border-color: var(--brand-silver-light);
  --bs-btn-active-color: var(--brand-accent);
  --bs-btn-disabled-color: var(--skipped-color);
  --bs-btn-disabled-border-color: var(--border-soft);
}
/* The two coloured row actions stay recognisable but stop shouting: the
   success green and the danger red become tonal like everything else. */
.btn-success {
  --bs-btn-color: var(--ok-color);
  --bs-btn-bg: #eef7ee;
  --bs-btn-border-color: #c9e3c9;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ok-color);
  --bs-btn-hover-border-color: var(--ok-color);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #036903;
  --bs-btn-active-border-color: #036903;
  --bs-btn-disabled-color: var(--skipped-color);
  --bs-btn-disabled-bg: var(--surface-muted);
  --bs-btn-disabled-border-color: var(--border-soft);
}
.btn-outline-danger {
  --bs-btn-color: var(--ink-muted);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--error-color);
  --bs-btn-hover-border-color: var(--error-color);
  --bs-btn-active-bg: #c62401;
  --bs-btn-active-border-color: #c62401;
}
.btn-link { text-decoration: none; }

a { color: var(--brand-accent); text-decoration: none; }
a:hover { color: var(--brand-accent-600); }

/* =====================================================================
   Form chrome — hairline border, quiet focus ring.
   ===================================================================== */
.form-control, .form-select {
  border-color: var(--border);
  border-radius: 6px;
  color: var(--ink);
}
.form-control:focus,
.form-select:focus {
  border-color: #7f9bc7;
  box-shadow: 0 0 0 .18rem rgba(22, 73, 143, .15);
}
/* Small, uppercase, tracked — the suite's label idiom. It carries the
   "what is this" job that a subtitle line used to do. */
.form-label {
  color: var(--ink-muted);
  font-size: .6875rem;          /* 11px — the reference's label scale */
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
/* Inline qualifiers inside a label (e.g. "(optional)", the required *) keep
   sentence case — only the label itself is tracked. */
.form-label .text-muted,
.form-label .text-danger { text-transform: none; letter-spacing: normal; }
.form-text { color: var(--ink-muted); font-size: .6875rem; line-height: 1.4; }
.input-group-text {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--ink-muted);
}

/* =====================================================================
   Cards — white surface, hairline, the one soft shadow. No hover lift.
   ===================================================================== */
.card {
  border-color: var(--border-soft);
  border-radius: var(--radius);
}
.card.shadow-sm { box-shadow: var(--shadow-card) !important; }

/* =====================================================================
   Status badges — TONAL, never a solid traffic light. Bootstrap's
   .text-bg-* utilities set colour+background with !important, so these
   need both !important and the extra .badge class to win the cascade.
   The JS keeps emitting the same class names; only the look changes.
   ===================================================================== */
.badge {
  --bs-badge-font-weight: 500;
  --bs-badge-padding-x: .55em;
  --bs-badge-padding-y: .4em;
  border-radius: 6px;
  border: 1px solid transparent;
  letter-spacing: .01em;
}
.badge.text-bg-success {
  color: var(--ok-color) !important;
  background-color: #eef7ee !important;
  border-color: #cfe6cf;
}
.badge.text-bg-danger {
  color: var(--error-color) !important;
  background-color: #fdefeb !important;
  border-color: #f6d3c8;
}
.badge.text-bg-warning {
  color: #b34700 !important;
  background-color: #fff4e8 !important;
  border-color: #ffdcbb;
}
.badge.text-bg-primary {
  color: var(--brand-accent) !important;
  background-color: #eef4fc !important;
  border-color: #cfe0f2;
}
.badge.text-bg-info {
  color: var(--ink-muted) !important;
  background-color: var(--surface-muted) !important;
  border-color: var(--border);
}
.badge.text-bg-secondary {
  color: var(--skipped-color) !important;
  background-color: var(--surface-muted) !important;
  border-color: var(--border-soft);
}
.badge.text-bg-light {
  color: var(--ink-muted) !important;
  background-color: var(--surface-muted) !important;
  border-color: var(--border-soft);
}

/* Alerts follow the same tonal rule (the wizard error + HTTPS warning). */
.alert { border-radius: 8px; border-width: 1px; }
.alert-danger  { color: var(--error-color); background: #fdefeb; border-color: #f6d3c8; }
.alert-warning { color: #b34700;            background: #fff4e8; border-color: #ffdcbb; }

/* =====================================================================
   Top bar — FLAT ink, one hairline of shadow. Nav text is uppercase and
   tracked (the suite's menu idiom); no gradient, no glow.
   ===================================================================== */
.navbar.brand-bar {
  background: var(--ink) !important;
  box-shadow: 0 1px 0 rgba(17, 59, 125, .5);
  min-height: 56px;
}
.navbar.brand-bar .navbar-brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: #fff; font-size: .95rem; font-weight: 600; letter-spacing: .02em;
}
.navbar.brand-bar .navbar-brand img { height: 22px; display: block; }
.navbar.brand-bar .navbar-text { color: rgba(255, 255, 255, .72); }
/* The Odoo surface keeps its identity through the plum LOGO CHIP, not a
   coloured bar — one dark bar across the app, as in the reference. */
.navbar.brand-bar-odoo { background: var(--ink) !important; }
.brand-logo-chip {
  background: #fff; border-radius: 6px; padding: .25rem .45rem;
  display: inline-flex; align-items: center;
}
.navbar.brand-bar .brand-logo-chip img { height: 18px; display: block; }
/* Quiet outline buttons on the dark bar (language switch, sign out). */
.navbar.brand-bar .btn-outline-light {
  --bs-btn-color: rgba(255, 255, 255, .72);
  --bs-btn-border-color: rgba(255, 255, 255, .22);
  --bs-btn-hover-bg: rgba(255, 255, 255, .10);
  --bs-btn-hover-border-color: rgba(255, 255, 255, .35);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, .18);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
}

/* =====================================================================
   Modals — hairline header/footer dividers, soft pop shadow, ink scrim.
   ===================================================================== */
.modal-content { border: 1px solid var(--border-soft); border-radius: 12px; box-shadow: var(--shadow-pop); }
.modal-header { border-bottom-color: var(--border-soft); padding: 1.1rem 1.4rem .9rem; }
.modal-header .modal-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.modal-body { padding: 1.25rem 1.4rem; }
.modal-footer { border-top-color: var(--border-soft); background: rgba(245, 247, 252, .5); padding: .9rem 1.4rem; }
.modal-backdrop.show { opacity: .4; background: var(--ink); }

/* =====================================================================
   Auth screens (login / signup) — split brand panel + form.
   The panel is a FLAT ink field: no radial gradient, no dot texture, no
   drop-shadowed logo plate. The brand reads from the mark and the type.
   ===================================================================== */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .auth-shell { grid-template-columns: 1.05fr 0.95fr; } }

.auth-brand {
  display: none; position: relative; overflow: hidden; color: #fff;
  padding: 3rem 3.25rem; background: var(--ink);
}
@media (min-width: 992px) {
  .auth-brand { display: flex; flex-direction: column; justify-content: space-between; }
}
/* The decorative dot field is kept in the markup but switched off — the
   reference shell has no texture. Restore by raising the opacity. */
.auth-brand .auth-deco { display: none; }
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand .auth-logo {
  background: #fff; border-radius: 8px; padding: .8rem 1.1rem; align-self: flex-start;
}
.auth-brand .auth-logo img { height: 34px; display: block; }
.auth-brand h1 { font-weight: 600; font-size: 1.75rem; line-height: 1.25; margin: 0 0 .75rem; }
.auth-brand .auth-lead { color: rgba(255, 255, 255, .72); font-size: .95rem; max-width: 44ch; margin: 0; }
.auth-brand .auth-points { list-style: none; padding: 0; margin: 2.25rem 0 0; }
.auth-brand .auth-points li {
  display: flex; gap: .65rem; align-items: flex-start;
  margin-bottom: .7rem; color: rgba(255, 255, 255, .86); font-size: .9rem;
}
.auth-brand .auth-points i { color: rgba(255, 255, 255, .45); margin-top: .1rem; font-size: .95rem; }
.auth-brand .auth-foot { color: rgba(255, 255, 255, .42); font-size: .78rem; }

.auth-form-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1.25rem; background: var(--surface);
}
.auth-form { width: 100%; max-width: 380px; }
.auth-form .auth-title { font-weight: 600; font-size: 1.4rem; color: var(--ink); margin-bottom: .25rem; }
.auth-form .auth-subtitle { color: var(--ink-muted); font-size: .88rem; margin-bottom: 1.75rem; }

.auth-mobile-logo { text-align: center; margin-bottom: 1.75rem; }
.auth-mobile-logo img { height: 30px; }
@media (min-width: 992px) { .auth-mobile-logo { display: none; } }

.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }