@import "tailwindcss";

:root {
  /* Brand gradient: sky → royal blue → indigo (white text stays readable on every stop) */
  --brand-from: #0284c7;
  --brand-mid: #2563eb;
  --brand-to: #3730a3;
  --brand-gradient: linear-gradient(180deg, var(--brand-from), var(--brand-mid) 50%, var(--brand-to));
  --brand-gradient-diag: linear-gradient(135deg, var(--brand-from), var(--brand-mid) 50%, var(--brand-to));

  --ink: #0f172a;
  --muted: #5b6b82;
  --paper: #f3f6fb;
  --panel: #ffffff;
  --line: #dfe6f0;
  --hover: #eef4ff;
  --sidebar: var(--brand-to);
  --accent: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-soft: #dbe7fe;
  --good: #168a4a;
  --warn: #b7700c;
  --bad: #c23a2e;
  --chip: #e9eef6;
  --chip-good: #d7efe2;
  --chip-warn: #f7e6c4;
  --chip-bad: #f5d5d1;
  color-scheme: light;
}

html.dark {
  /* Deeper gradient so the sidebar does not glare on a dark page */
  --brand-from: #075985;
  --brand-mid: #1e40af;
  --brand-to: #312e81;

  --ink: #e6edf7;
  --muted: #94a3b8;
  --paper: #0b1220;
  --panel: #121a2b;
  --line: #243049;
  --hover: #1a2640;
  --accent: #7aa7ff;
  --accent-ink: #ffffff;
  --accent-soft: #1b2b52;
  --good: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --chip: #1e2940;
  --chip-good: #133024;
  --chip-warn: #3a2d12;
  --chip-bad: #3a1b18;
  color-scheme: dark;
}

@theme inline {
  --color-ink: var(--ink);
  --color-muted: var(--muted);
  --color-paper: var(--paper);
  --color-panel: var(--panel);
  --color-line: var(--line);
  --color-sidebar: var(--sidebar);
  --color-accent: var(--accent);
  --color-good: var(--good);
  --color-warn: var(--warn);
  --color-bad: var(--bad);
  --font-sans: var(--font-geist-sans);
}

html,
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}

html[lang="ar"],
html[lang="ar"] body {
  font-family: var(--font-arabic), var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}

/* Letter-spacing breaks the joins between Arabic letters. */
html[lang="ar"] body * {
  letter-spacing: normal !important;
}

* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }

/* The sidebar list scrolls on short screens; keep that visible instead of silently cutting items off. */
.sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.45) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 0.45);
  border-radius: 999px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 10px;
  padding: 0.45rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.btn-primary { background-image: var(--brand-gradient-diag); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.06); }

.brand-gradient { background-image: var(--brand-gradient); }
.brand-gradient-diag { background-image: var(--brand-gradient-diag); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-danger { background: #c23a2e; color: white; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

table.data th,
table.data td {
  text-align: start;
  padding: 0.65rem 0.55rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

table.data th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}

/* Phones: let wide tables scroll sideways instead of squashing or overflowing the card. */
@media (max-width: 767px) {
  table.data {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  table.data th,
  table.data td {
    padding: 0.5rem 0.45rem;
  }
}

@media print {
  aside, .no-print { display: none !important; }
  main { padding: 0 !important; }
  .card { border: none; }
}