/* ==========================================================================
   Revara — traffic surveillance console

   The same system as the rest of the Revara product: ground and ink, rules
   instead of boxes, radius 0, no shadows, Jost for display and Archivo for
   text, and the accent spent once per view rather than sprinkled.

   This sits on top of the existing theme rather than replacing it. The console
   carries a lot of inherited markup, and rewriting it screen by screen is a
   project; restyling the shell is an afternoon. Loaded last so it wins.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Jost:wght@300..600&display=swap');

:root {
  --rv-ground: #f3f2f2;
  --rv-surface: #ffffff;
  --rv-ink: #201e1d;
  --rv-ink-soft: #6a6663;
  --rv-ink-mute: #9a9491;
  --rv-rule: #d6d3d1;
  --rv-accent: #ec3013;
  --rv-accent-text: #b4260f;
}

body,
.page,
.content,
#kt_content,
.wrapper {
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  background: var(--rv-ground) !important;
  color: var(--rv-ink);
}

/* ---- headings and figures in the display face -------------------------- */
h1, h2, h3, h4, h5,
.card-title, .modal-title, .box_number, .page-title {
  font-family: "Jost", "Archivo", system-ui, sans-serif !important;
  font-weight: 500 !important;
  color: var(--rv-ink) !important;
  letter-spacing: 0.01em;
}

/* ---- panels: a rule on top, not a floating rounded card ---------------- */
.card,
.box,
.modal-content,
.dataTables_wrapper,
.panel {
  background: var(--rv-surface) !important;
  border: 0 !important;
  border-top: 2px solid var(--rv-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.card-header, .box-header {
  background: transparent !important;
  border-bottom: 2px solid var(--rv-rule) !important;
  border-radius: 0 !important;
}

/* The figure tiles across the top of the dashboard and the ticketing page. */
.box_number {
  font-size: 34px !important;
  line-height: 1.05 !important;
}
.box_text {
  font-family: "Archivo", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--rv-ink-soft) !important;
}

/* ---- the top bar and the rail ------------------------------------------ */
.app-header, .header, #kt_header, .main-header, .navbar {
  background: var(--rv-surface) !important;
  border-bottom: 2px solid var(--rv-ink) !important;
  box-shadow: none !important;
}

.app-sidebar, .main-sidebar, #kt_aside, .sidebar {
  background: var(--rv-ink) !important;
}
.app-sidebar a, .main-sidebar a, #kt_aside a, .sidebar a { color: #e8e6e5 !important; }
.app-sidebar a:hover, .main-sidebar a:hover, #kt_aside a:hover, .sidebar a:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
}
.app-sidebar .active, .main-sidebar .active > a, #kt_aside .active {
  border-left: 3px solid var(--rv-accent) !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

/* ---- tables: structure from horizontal rules --------------------------- */
table.dataTable, .table {
  border-radius: 0 !important;
  border-color: var(--rv-rule) !important;
}
table thead th, .table thead th {
  background: var(--rv-surface) !important;
  border-bottom: 2px solid var(--rv-ink) !important;
  font-family: "Archivo", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--rv-ink) !important;
}
table tbody td, .table tbody td {
  border-top: 0 !important;
  border-bottom: 1px solid var(--rv-rule) !important;
  color: var(--rv-ink) !important;
}
table tbody tr:hover td { background: #eeecec !important; }

/* ---- controls ----------------------------------------------------------- */
.form-control, .form-select, input[type="text"], input[type="password"],
input[type="email"], input[type="number"], select, textarea {
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid var(--rv-rule) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--rv-ink) !important;
}
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  border-bottom-color: var(--rv-accent) !important;
  box-shadow: 0 2px 0 0 var(--rv-accent) !important;
  outline: none !important;
}

.btn {
  border-radius: 0 !important;
  font-family: "Archivo", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  box-shadow: none !important;
}
/* One accent-filled button per view; everything else is an ink outline. */
.btn-primary, .cus_login_bg_color, .btn-danger {
  background: var(--rv-accent) !important;
  border: 2px solid var(--rv-accent) !important;
  color: #ffffff !important;
}
.btn-primary:hover, .cus_login_bg_color:hover, .btn-danger:hover {
  background: var(--rv-accent-text) !important;
  border-color: var(--rv-accent-text) !important;
}
.btn-secondary, .btn-light, .btn-default, .btn-outline-secondary {
  background: transparent !important;
  border: 2px solid var(--rv-ink) !important;
  color: var(--rv-ink) !important;
}

/* ---- status language --------------------------------------------------- */
.badge, .label {
  border-radius: 0 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
}

/* Nothing in this product is round except an avatar. */
.rounded, .rounded-circle, .card, .modal-content, .btn, .form-control,
.badge, .alert, .dropdown-menu, .nav-link {
  border-radius: 0 !important;
}
.symbol img, .user-image, .avatar { border-radius: 50% !important; }

.dropdown-menu {
  border: 0 !important;
  border-top: 2px solid var(--rv-ink) !important;
  box-shadow: none !important;
}

/* The product name in the top bar. */
.brand-text, .logo-lg, .app-brand-text {
  font-family: "Jost", sans-serif !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--rv-ink) !important;
}

/* ==========================================================================
   Sign-in page

   The brand panel was written for a dark background image, so its wordmark is
   white and its strapline near-white. Once the theme forced surfaces light, both
   disappeared — white on #fcfcfc measures 1.03:1, which is invisible rather than
   merely low contrast. Painting the panel ink is the fix that keeps the intent:
   an ink panel carrying the brand, a light panel carrying the form.
   ========================================================================== */

#image-head,
#image-head .brand_panel {
  background-color: var(--rv-ink) !important;
  background-image: none !important;
}

/* Now that the panel is ink, these are on the right side of the contrast. */
#image-head .brand_panel span { color: #ffffff !important; }
#image-head .brand_panel div  { color: #b8b3b0 !important; }

#image-head .brand_panel {
  justify-content: center !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* The "or" between the password form and the SSO button sat at 2.4:1. */
.text-muted { color: var(--rv-ink-soft) !important; }

/* ---- menu icons on the ink rail ----------------------------------------
   The navigation icons are SVG *images* with dark artwork, drawn for the light
   sidebar this theme replaced. On ink they were all but invisible. Font icons
   in the same rail already inherit a light colour; images cannot, so they are
   flipped to white. brightness(0) flattens whatever colour the file carries,
   invert(1) turns it white — so it works regardless of what each icon was. */
.main-sidebar img,
.app-sidebar img,
#kt_aside img,
.sidebar img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.main-sidebar a:hover img,
.app-sidebar a:hover img,
#kt_aside a:hover img,
.sidebar a:hover img { opacity: 1; }

/* The active item keeps the accent marker; its icon goes full white. */
.main-sidebar .active img,
.app-sidebar .active img,
#kt_aside .active img { opacity: 1; }

/* The search affordance in the rail was mid-grey on ink. */
.main-sidebar .fa-search,
.app-sidebar .fa-search { color: #b8b3b0 !important; }