/* Teachers of Lebanon
   Design rules for this audience:
   - one accent colour, nothing decorative
   - every control carries a text label, never an icon alone
   - 44px minimum touch targets
   - system fonts only, so nothing is waiting on a font download */

:root {
  --tabpad: 14px;
  --bg: #f4f6f9;
  --panel: #ffffff;
  --ink: #16202e;
  --ink-2: #4a5768;
  --ink-3: #75839a;
  --line: #dde3ec;
  --line-2: #eef1f6;
  --accent: #1a5c9e;
  --accent-dark: #14497e;
  --accent-soft: #e8f0f9;
  --danger: #b4342a;
  --danger-soft: #fbecea;
  --ok: #1c7a4d;
  --ok-soft: #e7f4ed;
  --warn: #8a6206;
  --warn-soft: #fdf3dc;
  --radius: 10px;
  --wrap: 1560px;      /* content container */
  --gutter: clamp(16px, 3.2vw, 48px);
  --shadow: 0 1px 2px rgba(22, 32, 46, .06), 0 4px 14px rgba(22, 32, 46, .05);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* The browser default [hidden]{display:none} loses to any author display
   rule, so an element with display:flex stays visible even when hidden is
   set. This makes the attribute mean what it says, everywhere. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  /* Stops a short page leaving a large empty band under the footer. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .foot { flex: none; }
img { max-width: 100%; display: block; }
a { color: var(--accent); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 460px; }
.mid { max-width: 780px; }

/* ---------- top bar ---------- */
.top {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.top-in {
  height: 60px; display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 0 var(--gutter);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px; color: var(--ink);
  text-decoration: none; white-space: nowrap; min-width: 0;
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.brand-text { overflow: hidden; text-overflow: ellipsis; }
.top-spacer { flex: 1 1 auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border-radius: var(--radius); border: 1px solid var(--accent);
  background: var(--accent); color: #fff;
  font: 600 15px/1.2 var(--font); cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .12s ease;
  /* nowrap keeps the top bar tidy, but it must never let a button push
     the page wider than the screen. */
  max-width: 100%;
}
/* For buttons whose label is a whole sentence. The French and Arabic
   strings run far longer than the English, and at 320px a nowrap label
   overflowed the page by 85px. */
.btn.wrap { white-space: normal; text-align: center; line-height: 1.35; }
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--line-2); border-color: var(--line); }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: #9a2b22; border-color: #9a2b22; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 14px; border-radius: 8px; }
.btn.block { width: 100%; }
.btn.link {
  background: none; border: none; color: var(--accent);
  min-height: 36px; padding: 4px 6px; text-decoration: underline;
}
.btn.link:hover { background: none; color: var(--accent-dark); }

/* ---------- forms ---------- */
.field { margin-bottom: 16px; }
.field label {
  display: block; font-weight: 600; font-size: 14px;
  color: var(--ink-2); margin-bottom: 6px;
}
.input, select, textarea {
  width: 100%; min-height: 46px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink);
  font: 400 16px/1.4 var(--font); /* 16px stops iOS zooming on focus */
}
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hint { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 200px; min-width: 0; }

/* ---------- panels ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow);
}
.card-pad { padding: 22px; }
h1 { font-size: 26px; line-height: 1.25; letter-spacing: -.01em; }
h2 { font-size: 20px; line-height: 1.3; }
h3 { font-size: 17px; line-height: 1.35; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }

/* ---------- messages ---------- */
.msg {
  padding: 12px 14px; border-radius: var(--radius);
  font-size: 15px; margin-bottom: 16px; border: 1px solid transparent;
}
.msg.err { background: var(--danger-soft); color: var(--danger); border-color: #f0cdc9; }
.msg.ok { background: var(--ok-soft); color: var(--ok); border-color: #c8e6d6; }
.msg.warn { background: var(--warn-soft); color: var(--warn); border-color: #f0dfb0; }
.msg:empty { display: none; }

/* ---------- app shell ---------- */
.tabs {
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 60px; z-index: 40;
}
/* The band stays full width so the border runs edge to edge, while the
   buttons line up with the header and the page content. */
.tabs-in {
  display: flex; gap: 4px; padding: 0 var(--gutter);
  width: 100%;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tabs-in::-webkit-scrollbar { display: none; }
/* BS-TAB-FLUSH */
.tabs-in .tab:first-child { margin-left: calc(var(--tabpad) * -1); }
.tab {
  appearance: none; background: none; border: none;
  padding: 14px var(--tabpad); min-height: 50px;
  font: 600 15px/1 var(--font); color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

.page { padding-top: 22px; padding-bottom: 60px; } /* horizontal padding stays with .wrap */
.page-head {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.page-head h1 { flex: 1 1 auto; min-width: 0; }

/* ---------- lists ---------- */
.list { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--line-2);
  min-height: 62px; text-align: left; width: 100%;
  background: none; border-left: none; border-right: none; border-top: none;
  font: inherit; color: inherit; cursor: pointer;
}
.item:last-child { border-bottom: none; }
.item:hover { background: #fafbfd; }
.item-main { flex: 1 1 auto; min-width: 0; }
.item-title {
  font-weight: 600; font-size: 15.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-sub { font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.item-actions { display: flex; gap: 6px; flex: none; }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  background: var(--line-2); color: var(--ink-2);
}
.badge.blue { background: var(--accent-soft); color: var(--accent); }
.badge.green { background: var(--ok-soft); color: var(--ok); }
.badge.red { background: var(--danger-soft); color: var(--danger); }

.filetype {
  width: 42px; height: 42px; border-radius: 8px; flex: none;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.filetype.folder { background: #fdf3dc; color: #8a6206; }

/* ---------- empty / loading ---------- */
.empty { padding: 46px 22px; text-align: center; color: var(--ink-3); }
.empty h3 { color: var(--ink-2); margin-bottom: 6px; }
.skeleton {
  height: 62px; border-bottom: 1px solid var(--line-2);
  background: linear-gradient(90deg, #f2f4f8 25%, #e8ecf3 50%, #f2f4f8 75%);
  background-size: 200% 100%; animation: sk 1.2s linear infinite;
}
@keyframes sk { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none } * { transition: none !important } }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(16, 24, 36, .5);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-box {
  background: var(--panel); border-radius: 14px;
  width: 100%; max-width: 520px;
  max-height: calc(100vh - 32px); overflow-y: auto;
  box-shadow: 0 20px 60px rgba(10, 18, 30, .3);
}
.modal-head {
  padding: 18px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; background: var(--panel); border-radius: 14px 14px 0 0;
}
.modal-head h2 { flex: 1 1 auto; min-width: 0; font-size: 18px; }
.modal-body { padding: 20px; }
.modal-foot {
  padding: 16px 20px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  position: sticky; bottom: 0; background: var(--panel);
}
/* Buttons never wrap their label, so allowing them to shrink below their
   content clipped the text. They keep their natural width and the row
   wraps instead. Equal widths are applied only to a two button footer,
   where a lopsided pair looks unfinished. */
.modal-foot .btn { flex: 0 1 auto; }
.modal-foot .btn:first-child:nth-last-child(2),
.modal-foot .btn:first-child:nth-last-child(2) ~ .btn { flex: 1 1 0; }

/* ---------- storage meter ---------- */
.meter { height: 8px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.meter.warn > span { background: #d08700; }
.meter.full > span { background: var(--danger); }

/* ---------- toolbar ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.toolbar .search { flex: 1 1 260px; min-width: 0; }
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; font-size: 14.5px; }
.crumbs button { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 4px 2px; text-decoration: underline; }
.crumbs span { color: var(--ink-3); }

/* ---------- calendar ---------- */
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-head h2 { flex: 1 1 auto; min-width: 0; font-size: 18px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cal-dow { background: #eef1f6; padding: 8px 4px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }
.cal-cell { background: var(--panel); min-height: 84px; padding: 6px; cursor: pointer; }
.cal-cell.out { background: #fafbfd; color: var(--ink-3); }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-num { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.cal-ev {
  font-size: 11.5px; background: var(--accent-soft); color: var(--accent-dark);
  border-radius: 4px; padding: 2px 5px; margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600;
}
.day-list { margin-top: 18px; }

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--line); background: var(--panel);
  padding: 26px 0; margin-top: 40px;
  font-size: 14px; color: var(--ink-3);
}
.foot-in { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* ---------- language switch ---------- */
.lang { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.lang button {
  appearance: none; background: var(--panel); border: none;
  padding: 0 11px; height: 38px; min-width: 42px;
  font: 600 13px/1 var(--font); color: var(--ink-2); cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* ---------- impersonation banner ---------- */
.imp-bar {
  background: var(--warn-soft); border-bottom: 1px solid #f0dfb0;
  color: var(--warn); padding: 10px 16px; font-size: 14px; font-weight: 600;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 14px; }
  :root { --gutter: 14px; }
  .top-in { height: 56px; gap: 10px; }
  .tabs { top: 56px; }
  .tabs-in { padding: 0 14px; }
  :root { --tabpad: 13px; }
  .tab { padding: 13px var(--tabpad); font-size: 14.5px; }
  h1 { font-size: 21px; }
  h2 { font-size: 18px; }
  .card-pad { padding: 16px; }
  .page { padding-top: 16px; padding-bottom: 48px; }
  .item { padding: 12px 13px; gap: 11px; min-height: 58px; }
  .filetype { width: 38px; height: 38px; font-size: 10px; }
  .item-title { font-size: 15px; }
  .brand { font-size: 15.5px; }
  .brand-mark { width: 29px; height: 29px; font-size: 14px; }
  /* Centred, not a bottom sheet. A dialog in the middle of the screen is
     what this audience expects; a panel sliding up from the bottom is a
     newer app convention they have no reason to recognise. */
  .modal { padding: 16px; align-items: center; }
  .modal-box { max-width: 100%; border-radius: 14px; max-height: calc(100vh - 32px); }
  .modal-head { border-radius: 14px 14px 0 0; }
  .cal-cell { min-height: 58px; padding: 4px; }
  .cal-ev { font-size: 10px; padding: 1px 3px; }
  .cal-dow { font-size: 10.5px; padding: 6px 2px; }
  .foot { padding: 20px 0; margin-top: 28px; }
}

@media (max-width: 380px) {
  .brand-text { display: none; }
  :root { --tabpad: 10px; }
  .tab { padding: 12px var(--tabpad); font-size: 14px; }
  .btn { padding: 10px 13px; font-size: 14.5px; }
  .cal-cell { min-height: 50px; }
}


/* ============================================================
   BS-RTL  Arabic right to left
   Only the rules that actually flip. Anything centred or using
   flex space-between already works in both directions.
   ============================================================ */
[dir="rtl"] { text-align: right; }

[dir="rtl"] .item-title,
[dir="rtl"] .item-sub,
[dir="rtl"] .field label,
[dir="rtl"] .hint { text-align: right; }

[dir="rtl"] .input,
[dir="rtl"] select,
[dir="rtl"] textarea { text-align: right; }

/* Latin content stays readable inside an Arabic page: file names,
   emails and invite codes are not Arabic and must not be reordered. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="number"] { direction: ltr; text-align: right; }

[dir="rtl"] .tabs-in .tab:first-child { margin-left: 0; margin-right: calc(var(--tabpad) * -1); }
[dir="rtl"] .rule { margin-left: auto; margin-right: 0; }
[dir="rtl"] .meter > span { float: right; }
[dir="rtl"] .steps { padding-right: 0; }
[dir="rtl"] .steps li { padding: 14px 52px 14px 0; }
[dir="rtl"] .steps li::before { left: auto; right: 0; }
[dir="rtl"] .legal ul { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .modal-foot { justify-content: flex-start; }
[dir="rtl"] .crumbs { direction: rtl; }
[dir="rtl"] .cal-grid { direction: rtl; }
[dir="rtl"] .cal-num { text-align: right; }
[dir="rtl"] .cal-ev { text-align: right; }
[dir="rtl"] .wm, [dir="rtl"] .bname { letter-spacing: 0; }

/* Numbers, sizes and dates read left to right even in Arabic. */
[dir="rtl"] .filetype,
[dir="rtl"] .code-pill,
[dir="rtl"] .stat b { direction: ltr; unicode-bidi: embed; }


/* BS-TOPBAR-FIT
   The bar carries a brand, three language buttons and two labelled
   buttons. French labels are long and buttons never wrap, so on a narrow
   screen the row pushed the whole page sideways. The Find link is
   reachable from the hero and the footer on every page that has one, so
   it is the item that gives way first. */
@media (max-width: 640px) {
  .top-in .nav-find { display: none; }
  .lang button { min-width: 34px; padding: 0 8px; height: 34px; font-size: 12.5px; }
  .top-in .btn.small { padding: 6px 11px; font-size: 13.5px; }
  .top-in { gap: 8px; }
}
@media (max-width: 400px) {
  .lang button { min-width: 30px; padding: 0 6px; font-size: 12px; }
  .top-in .btn.small { padding: 6px 9px; font-size: 13px; }
}