/* ============================================================
   HRS Design System — Web tokens
   Petrol (deep teal) primary + warm sand accent.
   Mirrors the design tokens.css from the Claude Design bundle.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --hrs-primary:        #0E4F4A;
  --hrs-primary-700:    #0A3D39;
  --hrs-primary-600:    #0E4F4A;
  --hrs-primary-500:    #146962;
  --hrs-primary-100:    #DCEAE7;
  --hrs-primary-50:     #EEF5F3;

  --hrs-accent:         #C9A66B;   /* warm sand */
  --hrs-accent-700:     #A98549;
  --hrs-accent-100:     #F2E8D2;

  /* ── Semantic ──────────────────────────────────────── */
  --hrs-success:    #1F7A4D;
  --hrs-success-bg: #E2F1E8;
  --hrs-warning:    #B5761B;
  --hrs-warning-bg: #FBEFD7;
  --hrs-danger:     #B23A3A;
  --hrs-danger-bg:  #FAE3E1;
  --hrs-info:       #2A5A8A;
  --hrs-info-bg:    #E2ECF5;

  /* ── Neutrals (warm-cool, near-white) ────────────────── */
  --hrs-bg-page:    #F6F5F1;
  --hrs-bg-card:    #FFFFFF;
  --hrs-bg-subtle:  #ECEAE3;
  --hrs-bg-inset:   #F2F0EA;
  --hrs-border:     #E2DED4;
  --hrs-border-strong: #C9C3B4;

  --hrs-text:       #1B2220;
  --hrs-text-muted: #5A625F;
  --hrs-text-faint: #8A8F89;

  /* ── Type ──────────────────────────────────────────── */
  --hrs-font-ar:   'Cairo', system-ui, sans-serif;
  --hrs-font-en:   'Inter', system-ui, sans-serif;
  --hrs-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ── Spacing / Radius ──────────────────────────────── */
  --hrs-r-sm: 6px;
  --hrs-r-md: 10px;
  --hrs-r-lg: 14px;
  --hrs-r-xl: 18px;

  --hrs-s-1: 4px;
  --hrs-s-2: 8px;
  --hrs-s-3: 12px;
  --hrs-s-4: 16px;
  --hrs-s-5: 20px;
  --hrs-s-6: 24px;

  /* ── Shadows ───────────────────────────────────────── */
  --hrs-shadow-sm: 0 1px 2px rgba(15, 35, 33, 0.04);
  --hrs-shadow-md: 0 4px 14px rgba(15, 35, 33, 0.06), 0 1px 2px rgba(15, 35, 33, 0.04);
  --hrs-shadow-lg: 0 12px 36px rgba(15, 35, 33, 0.10), 0 2px 6px rgba(15, 35, 33, 0.05);

  /* ── Layout sizes ──────────────────────────────────── */
  --hrs-sidebar-w: 248px;
  --hrs-topbar-h:  64px;
}

/* ─────────────────────────────────────────────────────
   GLOBAL BASE
   ───────────────────────────────────────────────────── */
html, body.hrs-themed {
  background: var(--hrs-bg-page);
  color: var(--hrs-text);
  font-family: var(--hrs-font-ar);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.hrs-themed .en, body.hrs-themed .num {
  font-family: var(--hrs-font-en);
}

body.hrs-themed .tabular {
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────
   HRS LOGO MARK (Dhow Sail — Option D)
   Use: <span class="hrs-logo"></span> with width/height controlled by parent.
   ───────────────────────────────────────────────────── */
.hrs-logo {
  display: inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' fill='none'><path d='M30 80 L60 12 L90 80 Z' fill='%230E4F4A'/><path d='M40 80 L60 30 L80 80 Z' fill='%23C9A66B'/><path d='M52 80 L60 50 L68 80 Z' fill='%23FFFFFF'/><path d='M16 88 Q 30 82, 44 88 T 72 88 T 104 88' stroke='%230E4F4A' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  aspect-ratio: 120 / 100;
}
.hrs-logo.on-petrol {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' fill='none'><path d='M30 80 L60 12 L90 80 Z' fill='%23FFFFFF'/><path d='M40 80 L60 30 L80 80 Z' fill='%23C9A66B'/><path d='M52 80 L60 50 L68 80 Z' fill='%230E4F4A'/><path d='M16 88 Q 30 82, 44 88 T 72 88 T 104 88' stroke='%23FFFFFF' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>");
}
.hrs-logo.on-sand {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' fill='none'><path d='M30 80 L60 12 L90 80 Z' fill='%230E4F4A'/><path d='M40 80 L60 30 L80 80 Z' fill='%230E4F4A'/><path d='M52 80 L60 50 L68 80 Z' fill='%23C9A66B'/><path d='M16 88 Q 30 82, 44 88 T 72 88 T 104 88' stroke='%230E4F4A' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>");
}

/* Brand mark tile (sand square containing the logo) */
.hrs-brand-tile {
  display: inline-grid;
  place-items: center;
  background: var(--hrs-accent);
  border-radius: 8px;
  flex-shrink: 0;
}
.hrs-brand-tile .hrs-logo {
  width: 70%;
  height: 70%;
}

/* ─────────────────────────────────────────────────────
   BUTTONS (.hrs-btn-*)
   ───────────────────────────────────────────────────── */
.hrs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 38px;
  border-radius: var(--hrs-r-md);
  font: 600 14px/1 var(--hrs-font-ar);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  white-space: nowrap;
  text-decoration: none;
}
.hrs-btn:active { transform: translateY(1px); }
.hrs-btn-primary {
  background: var(--hrs-primary);
  color: #fff;
}
.hrs-btn-primary:hover {
  background: var(--hrs-primary-700);
  color: #fff;
}
.hrs-btn-secondary {
  background: var(--hrs-bg-card);
  color: var(--hrs-text);
  border-color: var(--hrs-border-strong);
}
.hrs-btn-secondary:hover {
  background: var(--hrs-bg-subtle);
  color: var(--hrs-text);
}
.hrs-btn-ghost {
  background: transparent;
  color: var(--hrs-text-muted);
}
.hrs-btn-ghost:hover {
  background: var(--hrs-bg-subtle);
  color: var(--hrs-text);
}
.hrs-btn-danger {
  background: var(--hrs-danger);
  color: #fff;
}
.hrs-btn-success {
  background: var(--hrs-success);
  color: #fff;
}
.hrs-btn-sm { height: 30px; padding: 0 12px; font-size: 13px; }
.hrs-btn-lg { height: 46px; padding: 0 22px; font-size: 15px; }
.hrs-btn-block { width: 100%; justify-content: center; }

/* ─────────────────────────────────────────────────────
   INPUTS
   ───────────────────────────────────────────────────── */
.hrs-input {
  height: 38px;
  padding: 0 12px;
  background: var(--hrs-bg-card);
  border: 1px solid var(--hrs-border);
  border-radius: var(--hrs-r-md);
  font: 400 14px var(--hrs-font-ar);
  color: var(--hrs-text);
  outline: none;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.hrs-input:focus {
  border-color: var(--hrs-primary-500);
  box-shadow: 0 0 0 3px var(--hrs-primary-100);
}
.hrs-label {
  display: block;
  font-size: 13px;
  color: var(--hrs-text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────
   BADGES
   ───────────────────────────────────────────────────── */
.hrs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font: 600 11px/1 var(--hrs-font-ar);
  letter-spacing: .01em;
  white-space: nowrap;
}
.hrs-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: .9;
}
.hrs-badge.no-dot::before { display: none; }
.hrs-badge-success { background: var(--hrs-success-bg); color: var(--hrs-success); }
.hrs-badge-warning { background: var(--hrs-warning-bg); color: var(--hrs-warning); }
.hrs-badge-danger  { background: var(--hrs-danger-bg);  color: var(--hrs-danger); }
.hrs-badge-info    { background: var(--hrs-info-bg);    color: var(--hrs-info); }
.hrs-badge-neutral { background: var(--hrs-bg-subtle);  color: var(--hrs-text-muted); }
.hrs-badge-brand   { background: var(--hrs-primary-100); color: var(--hrs-primary-700); }
.hrs-badge-sand    { background: var(--hrs-accent-100); color: var(--hrs-accent-700); }

/* ─────────────────────────────────────────────────────
   CARDS
   ───────────────────────────────────────────────────── */
.hrs-card {
  background: var(--hrs-bg-card);
  border: 1px solid var(--hrs-border);
  border-radius: var(--hrs-r-lg);
  box-shadow: var(--hrs-shadow-sm);
}
.hrs-card-pad { padding: 20px; }
.hrs-card-title {
  font: 600 16px/1.3 var(--hrs-font-ar);
  color: var(--hrs-text);
  margin: 0 0 4px;
}
.hrs-card-sub {
  font-size: 12px;
  color: var(--hrs-text-muted);
}

/* KPI card (used on dashboard stat tiles) */
.hrs-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--hrs-bg-card);
  border: 1px solid var(--hrs-border);
  border-radius: var(--hrs-r-lg);
  position: relative;
  overflow: hidden;
}
.hrs-kpi-label {
  font: 500 12px var(--hrs-font-ar);
  color: var(--hrs-text-muted);
}
.hrs-kpi-value {
  font: 800 28px/1 var(--hrs-font-en);
  color: var(--hrs-text);
  font-variant-numeric: tabular-nums;
}
.hrs-kpi-value small {
  font: 500 12px var(--hrs-font-ar);
  color: var(--hrs-text-muted);
  margin-inline-start: 6px;
}
.hrs-kpi-trend {
  font: 600 11px var(--hrs-font-en);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hrs-kpi-trend.up   { color: var(--hrs-success); }
.hrs-kpi-trend.down { color: var(--hrs-danger); }

.hrs-kpi-icon {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 16px;
}
.hrs-kpi-icon.bg-primary { background: var(--hrs-primary); }
.hrs-kpi-icon.bg-sand    { background: var(--hrs-accent-700); }
.hrs-kpi-icon.bg-success { background: var(--hrs-success); }
.hrs-kpi-icon.bg-warning { background: var(--hrs-warning); }
.hrs-kpi-icon.bg-danger  { background: var(--hrs-danger); }
.hrs-kpi-icon.bg-info    { background: var(--hrs-info); }

/* ─────────────────────────────────────────────────────
   TABLES (.hrs-tbl)
   ───────────────────────────────────────────────────── */
.hrs-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.hrs-tbl thead th {
  text-align: start;
  font: 600 13px/1.4 var(--hrs-font-ar);
  color: var(--hrs-text-muted);
  background: var(--hrs-bg-inset);
  padding: 12px 14px;
  border-bottom: 1px solid var(--hrs-border);
  white-space: nowrap;
}
.hrs-tbl tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hrs-border);
  vertical-align: middle;
  color: var(--hrs-text);
}
.hrs-tbl tbody tr:last-child td { border-bottom: 0; }
.hrs-tbl tbody tr:hover { background: var(--hrs-bg-inset); }

/* ─────────────────────────────────────────────────────
   PAGE HEADER
   ───────────────────────────────────────────────────── */
.hrs-page-header {
  margin-bottom: 24px;
}
.hrs-page-header h1 {
  font: 700 24px var(--hrs-font-ar);
  color: var(--hrs-text);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hrs-page-header p {
  font: 500 14px var(--hrs-font-ar);
  color: var(--hrs-text-muted);
  margin: 0;
}

/* ─────────────────────────────────────────────────────
   UTILITY HELPERS
   ───────────────────────────────────────────────────── */
.hrs-divider { height: 1px; background: var(--hrs-border); border: 0; margin: 0; }
.hrs-mt-1 { margin-top: 4px;  } .hrs-mt-2 { margin-top: 8px;  } .hrs-mt-3 { margin-top: 12px; }
.hrs-mt-4 { margin-top: 16px; } .hrs-mt-5 { margin-top: 20px; } .hrs-mt-6 { margin-top: 24px; }
.hrs-text-muted { color: var(--hrs-text-muted); }
.hrs-text-primary { color: var(--hrs-primary); }
.hrs-text-success { color: var(--hrs-success); }
.hrs-text-danger  { color: var(--hrs-danger); }
.hrs-text-warning { color: var(--hrs-warning); }