/* -----------------------------------------------------------
   Imam Al-Hujjah Hospital – Application Styles
   Clean, bilingual (EN/AR) + RTL support
   ----------------------------------------------------------- */

/* ========= Base + Theme ========= */
:root{
  --brand:#996c2f;         /* gold-ish accent */
  --brand-2:#1e3a8a;       /* deep blue accent (optional) */
  --text:#24303f;          /* main text */
  --muted:#6b7280;         /* secondary text */
  --bg:#f7f8fa;            /* page background */
  --card:#ffffff;          /* panels & cards */
  --line:#e5e7eb;          /* borders */
  --focus:#0ea5e9;         /* focus ring */
  --radius:14px;
  --shadow:0 8px 24px rgba(17,24,39,.08);
  --shadow-sm:0 3px 10px rgba(17,24,39,.05);

  --max: 1100px;
  --pad: 18px;
  --font: "Inter", "Cairo", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========= Layout ========= */
.wrapper{
  max-width: var(--max);
  margin: 28px auto 60px;
  padding: 0 var(--pad);
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 2.4vw, 28px);
}

/* Header / Brand */
.site-header{
  background:var(--card);
  border-bottom:1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.site-header .bar{
  max-width: var(--max);
  margin:0 auto;
  padding: 12px var(--pad);
  display:flex; align-items:center; gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit;
}
.brand .logo{
  width:52px; height:52px; object-fit:contain;
}
.brand .titles{
  line-height:1.15;
}
.brand .title{
  font-weight:800; letter-spacing:.1px; font-size: clamp(16px, 2.2vw, 20px);
}
.brand .subtitle{
  color:var(--muted); font-size: 13px;
}

/* Heading styles */
h1,h2,h3{ margin:0 0 12px; }
h1{ font-size: clamp(22px, 3.2vw, 28px); }
h2{ font-size: clamp(18px, 2.4vw, 22px); margin-top:10px; }

/* ========= Form Elements ========= */
label{ display:block; font-weight:600; margin: 6px 0 6px; }
.help, .note{ color:var(--muted); font-size:12px; }
input, select, textarea{
  width:100%; appearance:none; background:#fff;
  border:1px solid var(--line); border-radius:12px;
  padding:12px 12px; font-size:14px; color:var(--text);
  outline:none; transition:.15s border, .15s box-shadow, .15s background;
}
textarea{ min-height:110px; resize: vertical; }
input:focus, select:focus, textarea:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 25%, transparent);
}

/* Radio & checkbox inline helpers */
.inline{
  display:flex; gap:14px; flex-wrap:wrap;
}
.inline label{
  font-weight:500; display:flex; align-items:center; gap:8px; margin:0;
}

/* Buttons */
.btn{
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 10px 16px;
  background:#fff; cursor:pointer; font-weight:600;
  transition:.15s transform, .15s box-shadow, .15s background, .15s border-color;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-primary{
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 92%, #fff) 0%, var(--brand) 100%);
  color:#fff; border-color: color-mix(in oklab, var(--brand) 80%, #000);
}
.btn-primary:hover{ filter:saturate(1.05) brightness(1.01); }
.btn-ghost{ background:transparent; }

/* Action row */
.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ========= Grids ========= */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width: 960px){
  .grid-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px){
  .grid-3, .grid-2, .grid-4{ grid-template-columns:1fr; }
}

/* ========= Table ========= */
table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; border:1px solid var(--line); border-radius: 12px; overflow:hidden;
  box-shadow: var(--shadow-sm); margin: 10px 0 14px;
}
th, td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
th{ background:#fafafa; text-align: start; font-weight:700; color:#374151; }
tr:last-child td{ border-bottom:none; }
td button{ white-space:nowrap; }

/* ========= Badges, chips ========= */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 10px; border:1px solid var(--line); border-radius:999px;
  background:#fff; font-size:12px; color:#334155;
}

/* ========= Language toggle ========= */
.lang-switch{ display:flex; gap:8px; align-items:center; margin: 8px 0 16px; }
.lang-btn{
  padding:6px 10px; border:1px solid var(--line); border-radius: 999px;
  background:#fff; cursor:pointer; font-weight:600;
}
.lang-btn.active{ border-color: var(--brand); color: var(--brand); }

/* ========= RTL support ========= */
.rtl{ direction: rtl; }
.rtl input, .rtl select, .rtl textarea{ text-align: right; }
.rtl .brand{ flex-direction: row-reverse; }
.rtl table th, .rtl table td{ text-align: start; } /* respects RTL */

/* ========= Utility ========= */
.mt-1{ margin-top:4px; } .mt-2{ margin-top:8px; } .mt-3{ margin-top:12px; }
.mb-2{ margin-bottom:8px; } .mb-3{ margin-bottom:12px; } .mb-4{ margin-bottom:16px; }
.center{ text-align:center; }
.hidden{ display:none !important; }
/* ====== Checkbox & Radio ====== */
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  appearance: none;
  border: 2px solid var(--brand);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  margin: 0 6px 0 0;
  vertical-align: middle;
  transition: all 0.2s ease;
}

/* For radio buttons (round) */
input[type="radio"] {
  border-radius: 50%;
}

/* Hover effect */
input[type="checkbox"]:hover, input[type="radio"]:hover {
  border-color: var(--focus);
}

/* When checked → blue fill */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--focus);
  border-color: var(--focus);
}

/* Checkmark for checkbox */
input[type="checkbox"]:checked::after {
  content: "✔";
  color: #fff;
  font-size: 12px;
  position: absolute;
  top: -1px; left: 2px;
}

/* Dot for radio */
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  top: 3px; left: 3px;
}

/* ====== Buttons ====== */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;

  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  user-select: none;
}

/* Primary style */
button, .btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, color-mix(in oklab, var(--brand) 85%, #fff) 100%);
  color: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
button:hover, .btn-primary:hover {
  filter: brightness(1.05) saturate(1.1);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0,0,0,.18);
}
/* Click (active) → blue */
button:active, .btn-primary:active {
  background: linear-gradient(135deg, var(--focus) 0%, color-mix(in oklab, var(--focus) 85%, #fff) 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transform: translateY(0);
}
/* ================== Responsive Upgrades ================== */

/* Make the 2-column landing layout collapse nicely on mobile */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;   /* stack panels */
    gap: 20px;
  }
}

/* Ensure brand row wraps and logo scales */
.site-header .bar { flex-wrap: wrap; }
.brand .logo { width: 48px; height: 48px; }
@media (max-width: 480px) {
  .brand .logo { width: 40px; height: 40px; }
  .brand .title { font-size: 16px; }
  .brand .subtitle { font-size: 12px; }
}

/* Inputs & selects already width:100%; make buttons flexible on small screens */
.actions { flex-wrap: wrap; }
.actions .btn,
.actions button {
  min-height: 42px;
}
@media (max-width: 560px) {
  .actions .btn,
  .actions button {
    width: 100%;                /* full-width buttons on phones */
  }
}

/* Tables: allow horizontal scroll on small screens */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.table-scroll table {
  min-width: 720px;             /* keeps columns readable; scrolls under 720px */
  border: none;                  /* container adds border/shadow */
  box-shadow: none;
  margin: 0;
}

/* Grid helpers you already have — add tighter breakpoints */
@media (max-width: 960px){
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
}

/* File inputs: keep label text from wrapping awkwardly */
input[type="file"] { padding: 8px; }

/* Radio / checkbox lines: avoid squish on small screens */
.inline { row-gap: 8px; }

/* RTL panel safe paddings on tiny screens */
.rtl .panel { padding-inline: 18px; }