/*
 * horilla-theme.css
 *
 * Design tokens extracted directly from Horilla HRMS's own compiled
 * stylesheet (horilla-hr/static/build/css/style.min.css), NOT invented.
 * Where Horilla's own components (.oh-card, .oh-btn, .oh-input, .oh-table,
 * .oh-modal, .select2-container--default) are used as-is (they are, via
 * build/css/style.min.css + bootstrap.min.css, both ported verbatim from
 * Horilla), these variables exist for the small amount of CSS this project
 * writes on top: the app shell (sidebar/topbar) and a few reusable
 * components that don't already exist in Horilla's compiled output.
 *
 * Sources (line refs are against horilla-hr's style.min.css at the time
 * this was extracted):
 *   --ot-radius        .oh-card / .oh-btn / .oh-input / .oh-modal__dialog / select2 (all: border-radius: 0)
 *   --ot-border-color   .oh-card / .oh-input: 1px solid hsl(213, 22%, 84%)
 *   --ot-border-light   .oh-table borders: hsl(0, 0%, 95%)
 *   --ot-text           .oh-input color: hsl(0, 0%, 11%)
 *   --ot-muted          .text-muted: #6c757d
 *   --ot-table-head     .oh-table thead th color: hsl(0, 0%, 37%)
 *   --ot-page-bg        body background-color: hsl(0, 0%, 97.5%)
 *   --ot-accent         .oh-btn--secondary background: hsl(8, 77%, 56%)
 *   --ot-accent-dark    .oh-btn--secondary:hover background: hsl(8, 61%, 50%)
 *   --ot-sidebar-w      .oh-sidebar max-width: 230px
 *   --ot-topbar-h       .oh-navbar height: 65px
 */

:root {
  --ot-radius: 0rem;
  --ot-radius-sm: 6px;
  --ot-border-color: hsl(213, 22%, 84%);
  --ot-border-light: hsl(0, 0%, 95%);
  --ot-text: hsl(0, 0%, 11%);
  --ot-muted: #6c757d;
  --ot-table-head: hsl(0, 0%, 37%);
  --ot-page-bg: hsl(0, 0%, 97.5%);
  --ot-card-bg: #fff;
  --ot-accent: hsl(8, 77%, 56%);
  --ot-accent-dark: hsl(8, 61%, 50%);
  --ot-accent-soft: hsla(8, 77%, 56%, 0.1);
  --ot-sidebar-w: 230px;
  --ot-topbar-h: 65px;
  --ot-font: "Inter", var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);

  /* Status colors -- not in Horilla's base CSS as named tokens, but match
     the hue family already used across its badges/alerts (green=success,
     red=danger, amber=warning, gray=neutral). */
  --ot-success: #2ca87f;
  --ot-success-bg: #e6f6f0;
  --ot-danger: #e2593c;
  --ot-danger-bg: #fdeeeb;
  --ot-warning: #c98a1c;
  --ot-warning-bg: #fbf1de;
  --ot-neutral: #6c757d;
  --ot-neutral-bg: #eef0f2;
  --ot-info: #2f7fd1;
  --ot-info-bg: #e8f2fc;
}

body {
  font-family: var(--ot-font);
  background: var(--ot-page-bg);
  margin: 0;
  color: var(--ot-text);
}

/* Native <select> doesn't get Select2's JS-driven chrome here (this app
   intentionally carries no jQuery/Select2 dependency -- see README), but is
   sized/bordered to match .oh-input so it doesn't look like a foreign
   control next to real Horilla-styled inputs. */
select.oh-select {
  border: 1px solid var(--ot-border-color);
  border-radius: var(--ot-radius);
  padding: 0.8rem 1.25rem;
  color: var(--ot-text);
  background-color: #fff;
  height: 48.84px;
}