/*!
 * Tel5 theme  v1.0
 * Orange + charcoal, DM Sans, and the letterhead's angled orange cut.
 *
 * Usage
 *   <link rel="stylesheet" href="tel5.css">
 *   <body class="t5">                      normal app pages
 *   <body class="t5 t5-brand-screen">      sign-in / splash / message pages
 *
 * Everything is scoped under body.t5 or prefixed "t5-", so it won't clash
 * with Bootstrap, Tailwind or a project's own CSS.
 */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap");

/* ------------------------------------------------------------- tokens */
:root {
  --t5-orange: #F79321;        /* brand orange: primary buttons, active nav, accents */
  --t5-orange-deep: #D9780A;   /* hover, links, focus borders */
  --t5-orange-tint: #FEF1E2;   /* selected rows, tags, light highlights */
  --t5-orange-ink: #8A4A00;    /* readable text on orange-tint */
  --t5-charcoal: #222021;      /* top bar, headings, dark panels */
  --t5-ink: #2B2A2A;           /* body text */
  --t5-muted: #6E6B6A;         /* secondary text, hints */
  --t5-line: #DCD9D6;          /* borders */
  --t5-line-soft: #EEEBE8;     /* table row dividers */
  --t5-surface: #F6F5F4;       /* page background */
  --t5-paper: #FFFFFF;         /* cards, inputs */
  --t5-ok: #1E4620;     --t5-ok-tint: #EEF6EC;
  --t5-danger: #B3261E; --t5-danger-tint: #FBEAEA;
  --t5-warn: #7A4B00;   --t5-warn-tint: #FFF4B8;

  --t5-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t5-radius: 10px;
  --t5-radius-sm: 6px;
  --t5-slash-angle: -32deg;    /* the letterhead cut */
}

/* ------------------------------------------------------------- base */
body.t5 { margin: 0; background: var(--t5-surface); color: var(--t5-ink); font: 15px/1.5 var(--t5-font); }
.t5 *, .t5 *::before, .t5 *::after { box-sizing: border-box; }
.t5 a { color: var(--t5-orange-deep); }
.t5 h1 { font-size: 24px; line-height: 1.2; margin: 0 0 4px; color: var(--t5-charcoal); letter-spacing: -0.01em; }
.t5 h2 { font-size: 17px; margin: 0 0 12px; color: var(--t5-charcoal); }
.t5 h3 { font-size: 15px; margin: 0 0 8px; color: var(--t5-charcoal); }
.t5 :focus-visible { outline: 3px solid var(--t5-orange); outline-offset: 1px; }
.t5 code { background: var(--t5-orange-tint); color: var(--t5-orange-ink); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.t5 [hidden] { display: none !important; }

/* ------------------------------------------------------------- top bar */
.t5-topbar { position: sticky; top: 0; z-index: 10; overflow: hidden; background: var(--t5-charcoal); color: #fff;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; min-height: 60px;
  padding: 10px clamp(16px, 4vw, 40px) 10px calc(clamp(16px, 4vw, 40px) + 64px); }
.t5-topbar::before { content: ""; position: absolute; left: -30px; top: 0; bottom: 0; width: 92px;
  background: var(--t5-orange); transform: skewX(var(--t5-slash-angle)); }
.t5-topbar__brand { position: relative; color: #fff !important; text-decoration: none; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.t5-topbar nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.t5-topbar nav a, .t5-topbar__link { color: #DAD6D3 !important; text-decoration: none; font: inherit; font-weight: 600; font-size: 14px;
  padding: 7px 12px; border-radius: var(--t5-radius-sm); background: none; border: 0; cursor: pointer; }
.t5-topbar nav a:hover, .t5-topbar__link:hover { color: #fff !important; background: rgba(255,255,255,.08); }
.t5-topbar nav a[aria-current="page"], .t5-topbar nav a.is-active { color: var(--t5-charcoal) !important; background: var(--t5-orange); }
.t5-topbar__who { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #DAD6D3; }
.t5-topbar__who b { color: #fff; font-weight: 600; }
.t5-topbar__role { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 4px; background: rgba(255,255,255,.12); color: #fff; }
.t5-topbar form { margin: 0; }
@media (max-width: 720px) { .t5-topbar__who b { display: none; } }

/* ------------------------------------------------------------- layout */
.t5-page { max-width: 1180px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 64px; }
.t5-page--narrow { max-width: 760px; }
.t5-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.t5-lede { margin: 0 0 22px; color: var(--t5-muted); }
.t5-card { background: var(--t5-paper); border: 1px solid var(--t5-line); border-radius: var(--t5-radius); padding: 22px 24px; margin-bottom: 18px; }
.t5-card--flush { padding: 0; overflow: hidden; }
.t5-card--dark { position: relative; overflow: hidden; background: var(--t5-charcoal); color: #fff; border-color: var(--t5-charcoal); }
.t5-card--dark h2, .t5-card--dark h3 { color: #fff; }
.t5-card--dark::after { content: ""; position: absolute; right: -40px; top: 0; bottom: 0; width: 60px;
  background: var(--t5-orange); transform: skewX(var(--t5-slash-angle)); }
.t5-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.t5-grid .t5-full { grid-column: 1 / -1; }
@media (max-width: 560px) { .t5-grid { grid-template-columns: 1fr; } }
.t5-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.t5-row form { margin: 0; }

/* ------------------------------------------------------------- forms */
.t5 label { display: block; font-size: 13px; font-weight: 600; color: var(--t5-charcoal); margin-bottom: 5px; }
.t5 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .t5 select, .t5 textarea {
  width: 100%; font: inherit; color: var(--t5-ink); background: var(--t5-paper);
  border: 1px solid var(--t5-line); border-radius: var(--t5-radius-sm); padding: 9px 11px; min-height: 40px; }
.t5 input:hover, .t5 select:hover, .t5 textarea:hover { border-color: #BDB8B4; }
.t5 input:focus, .t5 select:focus, .t5 textarea:focus { outline: 3px solid var(--t5-orange); outline-offset: 1px; border-color: var(--t5-orange-deep); }
.t5 input:disabled, .t5 select:disabled, .t5 textarea:disabled { background: var(--t5-surface); color: var(--t5-muted); }
.t5 input[type=checkbox], .t5 input[type=radio] { accent-color: var(--t5-orange-deep); }
.t5-field { margin-bottom: 14px; }
.t5-hint { margin: 6px 0 0; color: var(--t5-muted); font-size: 13.5px; }
.t5-check { display: flex !important; gap: 8px; align-items: center; font-weight: 500 !important; font-size: 14px !important; }

/* ------------------------------------------------------------- buttons */
.t5-btn { font: inherit; font-size: 14px; font-weight: 700; border-radius: 8px; padding: 9px 16px; cursor: pointer;
  border: 1px solid var(--t5-charcoal); background: var(--t5-paper); color: var(--t5-charcoal) !important; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.t5-btn:hover { background: var(--t5-charcoal); color: #fff !important; }
.t5-btn--primary { background: var(--t5-orange); border-color: var(--t5-orange); color: var(--t5-charcoal) !important; }
.t5-btn--primary:hover { background: var(--t5-orange-deep); border-color: var(--t5-orange-deep); color: #fff !important; }
.t5-btn--danger { color: var(--t5-danger) !important; border-color: #E3B4B0; }
.t5-btn--danger:hover { background: var(--t5-danger); border-color: var(--t5-danger); color: #fff !important; }
.t5-btn--sm { padding: 5px 11px; font-size: 13px; border-radius: var(--t5-radius-sm); }
.t5-btn--block { width: 100%; padding: 12px; }
.t5-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------------------- tables */
.t5-table-wrap { overflow-x: auto; background: var(--t5-paper); border: 1px solid var(--t5-line); border-radius: var(--t5-radius); }
.t5-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.t5-table th { text-align: left; font-size: 12.5px; font-weight: 700; color: var(--t5-muted); text-transform: uppercase; letter-spacing: .03em;
  padding: 11px 14px; border-bottom: 1px solid var(--t5-line); background: var(--t5-surface); white-space: nowrap; }
.t5-table td { padding: 11px 14px; border-bottom: 1px solid var(--t5-line-soft); vertical-align: top; }
.t5-table tbody tr:last-child td { border-bottom: 0; }
.t5-table tbody tr:hover td { background: #FCFBFA; }
.t5-table .t5-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t5-table .t5-sub { display: block; color: var(--t5-muted); font-size: 12.5px; }
.t5-empty { text-align: center; padding: 40px 20px; color: var(--t5-muted); }

/* ------------------------------------------------------------- pills, tags, messages */
.t5-pill { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--t5-surface); color: var(--t5-charcoal); border: 1px solid var(--t5-line); }
.t5-pill--dark { background: var(--t5-charcoal); color: #fff; border-color: var(--t5-charcoal); }
.t5-pill--ok { background: var(--t5-ok-tint); color: var(--t5-ok); border-color: #CFE3CB; }
.t5-pill--warn { background: var(--t5-warn-tint); color: var(--t5-warn); border-color: #EBDC8A; }
.t5-pill--danger { background: var(--t5-danger-tint); color: var(--t5-danger); border-color: #EFC9C6; }
.t5-tag { display: inline-block; background: var(--t5-orange-tint); color: var(--t5-orange-ink) !important; border-radius: 4px;
  padding: 1px 8px; font-size: 12px; font-weight: 600; text-decoration: none; margin: 0 4px 4px 0; }
.t5-flash { border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; background: var(--t5-ok-tint); color: var(--t5-ok); }
.t5-flash--error { background: var(--t5-danger-tint); color: var(--t5-danger); }
.t5-notice { background: var(--t5-warn-tint); color: var(--t5-charcoal); border-radius: var(--t5-radius); padding: 14px 18px; margin-bottom: 18px; }
.t5-muted { color: var(--t5-muted); }

/* ------------------------------------------------------------- brand screen (sign-in, splash, messages) */
body.t5-brand-screen { background: var(--t5-charcoal); min-height: 100vh; position: relative; overflow-x: hidden; }
body.t5-brand-screen::before { content: ""; position: fixed; left: -140px; top: 0; bottom: 0; width: 360px;
  background: var(--t5-orange); transform: skewX(var(--t5-slash-angle)); }
body.t5-brand-screen::after { content: ""; position: fixed; left: 250px; top: 0; bottom: 0; width: 22px;
  background: var(--t5-orange); transform: skewX(var(--t5-slash-angle)); opacity: .55; }
.t5-brand-screen__center { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px; }
.t5-signin { width: min(420px, 100%); background: var(--t5-paper); border-radius: 12px; padding: 32px 30px 28px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.t5-signin__mark { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t5-orange-deep); margin: 0 0 6px; }
.t5-signin h1 { font-size: 24px; margin: 0 0 4px; }
.t5-signin__sub { margin: 0 0 22px; color: var(--t5-muted); font-size: 14px; }
.t5-signin .t5-btn--block { margin-top: 6px; }
.t5-signin__foot { margin: 18px 0 0; font-size: 12.5px; color: var(--t5-muted); text-align: center; }
.t5-signin__error { background: var(--t5-danger-tint); color: var(--t5-danger); border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-bottom: 16px; }
.t5-signin--center { text-align: center; }
@media (max-width: 640px) { body.t5-brand-screen::before { left: -260px; } body.t5-brand-screen::after { display: none; } }

@media (prefers-reduced-motion: reduce) { .t5 * { transition: none !important; animation: none !important; } }