/* OfficeTamed design tokens.
   Extracted from datatamed.com (site.css) on 13 July 2026 so the two products are visibly siblings.
   Do not hand-pick new colours: add them here, harmonised, or not at all. */
:root {
  --ot-teal:        #3d8f93;
  --ot-teal-dark:   #2c6669;
  --ot-teal-lite:   #d4eaeb;
  --ot-mint:        #2ec19a;
  --ot-mint-lite:   #e0f6ef;

  --ot-dark:        #0d1117;
  --ot-dark-2:      #161b22;
  --ot-dark-3:      #21262d;
  --ot-border-dk:   #30363d;

  --ot-light:       #f6f8fa;
  --ot-white:       #ffffff;
  --ot-border:      #e1e4e8;

  --ot-text:        #24292f;
  --ot-text-mid:    #57606a;
  --ot-mid:         #6e7681;

  /* New to OfficeTamed: the Out-tray / awaiting-approval state. Harmonised with the palette. */
  --ot-amber:       #bf8700;
  --ot-amber-lite:  #fff3d1;
  --ot-amber-dark:  #7a5a00;   /* names the amber text colour already used across the components below */

  --ot-radius:      12px;
  --ot-radius-pill: 100px;
  --ot-shadow:      0 4px 24px rgba(0,0,0,.08);
  --ot-shadow-lg:   0 12px 48px rgba(0,0,0,.14);

  --ot-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html { font-size: 14px; }
body { margin: 0; font-family: var(--ot-font); color: var(--ot-text); background: var(--ot-light); }

/* App chrome (P1-02): a top bar for signed-in users, and the page body inset. */
.ot-topbar { display: flex; align-items: center; gap: 20px; padding: 11px 24px; background: var(--ot-white);
             border-bottom: 1px solid var(--ot-border); box-shadow: var(--ot-shadow); position: sticky; top: 0; z-index: 20; }
.ot-brand { font-weight: 800; font-size: 15px; color: var(--ot-teal-dark); text-decoration: none; letter-spacing: -.01em; }
.ot-nav { display: flex; gap: 16px; }
.ot-nav a { font-size: 13px; font-weight: 600; color: var(--ot-text-mid); text-decoration: none; }
.ot-nav a:hover { color: var(--ot-teal-dark); }
.ot-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ot-who { font-size: 12.5px; font-weight: 600; color: var(--ot-text-mid); }
.ot-main { max-width: 1120px; margin: 0 auto; padding: 26px 24px 60px; }

/* Sign-in / registration cards (P1-02). */
.auth-wrap { min-height: 88vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: 100%; max-width: 380px; box-sizing: border-box; background: var(--ot-white);
             border: 1px solid var(--ot-border); border-radius: var(--ot-radius); box-shadow: var(--ot-shadow-lg);
             padding: 30px 28px; }
.auth-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ot-text-mid); margin: 0 0 11px; }
.auth-input { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; padding: 9px 11px; font-size: 13.5px;
              font-family: inherit; border: 1px solid var(--ot-border); border-radius: 8px; background: var(--ot-white); }
.auth-input:focus { outline: 2px solid var(--ot-teal); outline-offset: 0; border-color: var(--ot-teal); }
.auth-error { background: var(--ot-amber-lite); border: 1px solid #eeddaa; color: #7a5a00; border-radius: 8px;
              padding: 9px 12px; font-size: 12.5px; margin: 0 0 14px; }

/* The signature element: a staffed office has presence. Every employee card carries a live status. */
.status { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
          font-size: 11.5px; font-weight: 600; border-radius: var(--ot-radius-pill); padding: 4px 10px; }
.status .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.status.working  { background: var(--ot-teal-lite); color: var(--ot-teal-dark); }
.status.working .dot  { background: var(--ot-teal); animation: ot-pulse 1.8s infinite; }
.status.oncall   { background: var(--ot-mint-lite); color: #0e7a5f; }
.status.oncall .dot   { background: var(--ot-mint); animation: ot-pulse 1.2s infinite; }
.status.approval { background: var(--ot-amber-lite); color: #7a5a00; }
.status.approval .dot { background: var(--ot-amber); }
.status.idle     { background: var(--ot-light); color: var(--ot-mid); }
.status.idle .dot     { background: var(--ot-mid); }

@keyframes ot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61,143,147,.45); }
  70%  { box-shadow: 0 0 0 6px rgba(61,143,147,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,143,147,0); }
}
@media (prefers-reduced-motion: reduce) { .status .dot { animation: none !important; } }

.desk { background: var(--ot-white); border: 1px solid var(--ot-border); border-radius: var(--ot-radius);
        box-shadow: var(--ot-shadow); padding: 16px; transition: box-shadow .2s, transform .2s; }
.desk:hover { box-shadow: var(--ot-shadow-lg); transform: translateY(-2px); }
.desk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 14px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
          font-weight: 700; background: var(--ot-teal-lite); color: var(--ot-teal-dark); }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--ot-white);
        border: 1px solid var(--ot-border); border-radius: var(--ot-radius-pill);
        padding: 7px 14px; font-size: 12.5px; font-weight: 600; }
.chip.amber { border-color: #eeddaa; background: var(--ot-amber-lite); color: #7a5a00; }
.pill { border-radius: var(--ot-radius-pill); font-size: 12px; font-weight: 600; padding: 7px 15px;
        cursor: pointer; border: 1px solid transparent; font-family: inherit; }
.pill.solid { background: var(--ot-teal); color: #fff; }
.pill.solid:hover { background: var(--ot-teal-dark); }
.pill.ghost { background: var(--ot-white); border-color: var(--ot-border); color: var(--ot-text); }
.pill.ghost:hover { background: var(--ot-light); }
.pill.amber { background: var(--ot-amber-lite); border-color: #eeddaa; color: #7a5a00; }
.pill.amber:hover { background: #ffe9ad; }
.pill:disabled { opacity: .5; cursor: default; }
.pill:focus-visible { outline: 2px solid var(--ot-teal); outline-offset: 2px; }

/* The Out-tray: the supervision surface (P1-05). Cards for each waiting action, grouped by employee. */
.ot-group { margin-bottom: 26px; }
.ot-group-head { display: flex; align-items: center; gap: 11px; margin: 0 0 12px; }
.ot-item { background: var(--ot-white); border: 1px solid var(--ot-border); border-radius: var(--ot-radius);
           box-shadow: var(--ot-shadow); padding: 15px 18px; margin-bottom: 12px; }
.ot-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.ot-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ot-text-mid); }
.ot-label { font-size: 12px; color: var(--ot-text-mid); }
.ot-preview { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.5;
              background: var(--ot-light); border: 1px solid var(--ot-border); border-radius: 8px; padding: 12px 14px; }
.ot-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ot-edit { width: 100%; box-sizing: border-box; min-height: 130px; resize: vertical;
           font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
           border: 1px solid var(--ot-border); border-radius: 8px; padding: 11px 13px; }
.ot-empty { text-align: center; padding: 60px 20px; }
.ot-empty .big { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.ot-dial { background: var(--ot-light); border: 1px solid var(--ot-border); border-radius: var(--ot-radius);
           padding: 12px 16px; margin: 0 0 12px; }
.ot-dial-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 7px 0; }
.ot-dial select, .ot-dial input { font-family: inherit; font-size: 12.5px; background: var(--ot-white);
           border: 1px solid var(--ot-border); border-radius: 8px; padding: 6px 9px; }
.ot-dial input[type=checkbox] { width: auto; }

/* The public demo Out-tray (P1-14): a drafted email rendered as an email, a post as a post — so a
   visitor sees the actual medium, not a raw text blob. Colours are all from the tokens above. */
.draft { max-width: 560px; }
.draft-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.draft-who { font-weight: 700; font-size: 13px; }

.mail { border: 1px solid var(--ot-border); border-radius: var(--ot-radius); overflow: hidden;
        background: var(--ot-white); box-shadow: var(--ot-shadow); }
.mail-head { display: flex; align-items: center; gap: 11px; padding: 12px 16px;
             background: var(--ot-light); border-bottom: 1px solid var(--ot-border); }
.mail-from { font-weight: 700; font-size: 13px; }
.mail-addr { font-size: 11.5px; color: var(--ot-mid); }
.mail-fields { padding: 11px 16px; border-bottom: 1px solid var(--ot-border); }
.mail-to { font-size: 12.5px; color: var(--ot-text-mid); }
.mail-to b { color: var(--ot-text); font-weight: 600; }
.mail-subject { font-weight: 700; font-size: 14.5px; margin-top: 5px; }
.mail-body { padding: 15px 16px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

.post { border: 1px solid var(--ot-border); border-radius: var(--ot-radius);
        background: var(--ot-white); box-shadow: var(--ot-shadow); padding: 16px 18px; }
.post-head { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.post-author { font-weight: 700; font-size: 13.5px; }
.post-meta { font-size: 11.5px; color: var(--ot-mid); }
.post-body { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Draft cards for the other mediums (support ticket, CRM update, calendar invite) reuse the .post shell,
   with an emphasised line (subject / contact / title) and a muted sub-line (ticket no / company / when). */
.card-line { font-weight: 700; font-size: 14px; margin: 2px 0 5px; }
.card-sub { font-size: 12px; color: var(--ot-text-mid); margin-bottom: 10px; }
.card-sub b { color: var(--ot-text); font-weight: 600; }

/* Medium badges, all from the palette above — teal for email/LinkedIn/calendar, dark for X, mint for a
   support ticket, amber for a CRM update. The label text ("X", "LinkedIn", ...) still names the medium. */
.tag { margin-left: auto; font-size: 11px; font-weight: 700; white-space: nowrap;
       border-radius: var(--ot-radius-pill); padding: 3px 11px; }
.tag.teal  { background: var(--ot-teal-lite);  color: var(--ot-teal-dark); }
.tag.dark  { background: var(--ot-dark);        color: var(--ot-white); }
.tag.mint  { background: var(--ot-mint-lite);   color: var(--ot-teal-dark); }
.tag.amber { background: var(--ot-amber-lite);  color: var(--ot-amber-dark); }

/* ---- Narrow screens (phones in portrait, small desktop windows) ---------------------------------
   Everything above is a desktop-first layout. Below 640px wide the top bar wraps to two rows —
   brand + sign-out, then the nav across the full width — the long user name is dropped to save
   space, and the body inset tightens. Wide tables scroll inside their own card rather than pushing
   the page sideways (see the admin/people component CSS). */
@media (max-width: 640px) {
  .ot-topbar { flex-wrap: wrap; gap: 8px 14px; padding: 9px 14px; }
  .ot-nav { order: 3; width: 100%; gap: 18px; }
  .ot-who { display: none; }
  .ot-main { padding: 18px 14px 46px; }
  .auth-wrap { padding: 16px; }
  .auth-card { padding: 26px 20px; }
  .desk-grid { grid-template-columns: 1fr; }
}