/* ==================================================================
   PCD Hub — Console B
   pcdhub.com/assets/style.css

   Sections 1 to 8 are the Console B kit, unchanged. Do not edit them:
   the point of the kit is that SMR Control, HubTrack, Transfer Hub and
   this hub feel like one system.

   Section 9 is what the hub adds — the tiles the directory is made of.
   Same tokens, same type, no new colours.

   If you change anything here, bump CSS_VERSION in config.php or
   browsers will keep serving the old file.
   ================================================================== */

/* ---------- 1. Tokens ------------------------------------------- */
:root{
  --ink:#0F1E2E;
  --ink-2:#3A5266;
  --muted:#71889C;
  --line:#DFE7EE;
  --line-2:#EDF2F6;
  --bg:#FFFFFF;
  --surface:#F6F9FB;
  --brand:#12446E;
  --brand-2:#1D6BA8;
  --accent:#0E8F8C;
  --amber:#B4720F;
  --danger:#A33232;
  --shadow:0 1px 2px rgba(15,30,46,.05), 0 8px 24px rgba(15,30,46,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#E9EEF3; color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px}

/* ---------- 2. Top bar ------------------------------------------ */
.appbar{
  background:var(--ink); color:#fff; position:relative;
  padding:0 20px; height:56px; display:flex; align-items:center; gap:12px;
}
.mark{
  width:30px;height:30px;border-radius:7px;background:var(--brand-2);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:11px;letter-spacing:-.02em;flex:none;
}
.appbar .bn{font-weight:700; font-size:15px; letter-spacing:-.01em; line-height:1.1}
.appbar .bs{font-size:10px; color:#8FA6BA; letter-spacing:.11em; text-transform:uppercase; font-weight:700}
.appbar .sp{flex:1}
.appbar .lnk{color:#B9CBDA; text-decoration:none; font-size:13px; padding:6px 10px; border-radius:6px}
.appbar .lnk:hover{color:#fff; background:rgba(255,255,255,.08)}
.appbar .sep{width:1px; height:18px; background:rgba(255,255,255,.18); margin:0 2px; flex:none}
.who{
  display:flex; align-items:center; gap:9px; padding:4px 13px 4px 4px; cursor:pointer;
  border:1px solid rgba(255,255,255,.2); border-radius:22px; font-size:13px; color:#DCE7F0;
}
.who:hover{background:rgba(255,255,255,.07)}
.av{
  width:26px;height:26px;border-radius:50%;background:var(--brand-2);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;flex:none;
}
.who .role{font-size:10px; color:#8FA6BA; letter-spacing:.06em; text-transform:uppercase; font-weight:700}

/* The menu that drops out of the bar. Same as HubTrack. */
.hidden{display:none !important}
#userMenu{
  position:absolute; top:56px; right:20px; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 12px 32px rgba(15,30,46,.18); padding:6px; min-width:190px;
  display:flex; flex-direction:column;
}
#userMenu a{
  display:block; padding:9px 14px; font-size:13.5px; color:var(--ink);
  text-decoration:none; border-radius:7px; white-space:nowrap;
}
#userMenu a:hover{background:var(--surface); color:var(--brand)}

/* ---------- 3. Shell -------------------------------------------- */
.page{display:flex; flex-direction:column; min-height:100vh}
.shell{display:flex; min-height:calc(100vh - 56px - 29px); background:var(--bg)}
.side{
  width:250px; flex:none; background:var(--surface);
  border-right:1px solid var(--line); padding:16px 14px 20px; display:flex; flex-direction:column;
}
.nav{display:flex; flex-direction:column; gap:2px}
.lbl{font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:14px 10px 6px}
.nav a{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px;
  text-decoration:none; color:var(--ink-2); font-size:13.5px; font-weight:700;
}
.nav a:hover{background:#EAF0F5; color:var(--ink)}
.nav a.on{background:var(--brand); color:#fff}
.nav a.on .cnt{background:rgba(255,255,255,.22); color:#fff}
.nav a.dis{color:#A9BAC8; cursor:default; font-weight:400}
.nav a.dis:hover{background:transparent}
.gl{width:17px; text-align:center; flex:none; font-size:13px; opacity:.85}
.cnt{margin-left:auto; font-size:11px; background:#E4EBF1; color:var(--ink-2); padding:1px 7px; border-radius:10px; font-weight:700}
.quota{margin-top:14px; padding:11px 12px; background:#fff; border:1px solid var(--line); border-radius:9px; font-size:11.5px; color:var(--muted)}
.quota b{color:var(--ink); font-size:12.5px}
.bar{height:5px; background:var(--line-2); border-radius:99px; margin:7px 0 5px; overflow:hidden}
.bar>i{display:block; height:100%; background:var(--brand-2); width:38%}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topstrip{padding:11px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px}
.topstrip .sp{flex:1}
.search{
  display:flex; align-items:center; gap:9px; background:#fff;
  border:1px solid var(--line); border-radius:9px; padding:8px 13px; flex:1; max-width:420px;
}
.search svg{flex:none; opacity:.45}
.search input[type=text]{
  border:0; outline:0; padding:0; font:inherit; font-size:13.5px;
  width:100%; min-width:0; color:var(--ink); background:transparent; border-radius:0;
}
.search input::placeholder{color:#9FB2C2}
.content{padding:26px 26px 40px; overflow:auto; flex:1}
h1.pt{margin:0 0 4px; font-size:21px; letter-spacing:-.02em}
p.ps{color:var(--muted); font-size:13.5px; margin:0 0 22px}

/* ---------- 4. Forms -------------------------------------------- */
.panel-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:24px 26px; box-shadow:var(--shadow); max-width:720px}
.panel-card + .panel-card{margin-top:16px}
label{display:block; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-2); margin:20px 0 6px}
label .hint{text-transform:none; letter-spacing:0; color:var(--muted); font-weight:400; font-size:12px}
input[type=text],input[type=email],input[type=password],input[type=date],textarea,select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  font-size:13.5px; font-family:inherit; background:#fff; color:var(--ink);
}
textarea{resize:vertical; min-height:74px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.btn{
  display:inline-block; background:var(--brand); color:#fff; border:0; border-radius:8px;
  padding:11px 20px; font-size:13.5px; font-weight:700; cursor:pointer; text-decoration:none;
  font-family:inherit; margin-top:22px;
}
.btn:hover{background:#0D3557}
.btn.sm{padding:8px 14px; font-size:12.5px; margin-top:0}
.btn.ghost{background:#fff; color:var(--ink-2); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surface); color:var(--ink)}
.btn.full{width:100%; text-align:center}
.note{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brand-2);
  border-radius:7px; padding:11px 14px; font-size:12.5px; color:var(--ink-2); margin-top:16px;
}

/* ---------- 5. Notices ------------------------------------------ */
.alert{padding:11px 15px; border-radius:8px; margin-bottom:18px; font-size:13px; max-width:720px}
.alert-ok{background:#E2F4F3; color:#0B6F6D; border:1px solid #CDEAE9}
.alert-warn{background:#FDF3E3; color:#8A5709; border:1px solid #F2E2C7}
.alert-err{background:#FBEDED; color:var(--danger); border:1px solid #F2D6D6}

/* ---------- 6. States ------------------------------------------- */
.chip{display:inline-flex; align-items:center; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:5px}
.chip-live{background:#E2F4F3; color:#0B6F6D}
.chip-off{background:#F1F4F7; color:#7C90A2}
.chip-warn{background:#FDF3E3; color:#8A5709}
/* Destructive chip. The kit had no red one; SMR Control needed it too. */
.chip-bad{background:#FBEDED; color:var(--danger)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.dot.live{background:var(--accent)} .dot.off{background:#C3CFD9}

/* ---------- 7. Table -------------------------------------------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; font-size:13px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden}
table.tbl thead th{
  text-align:left; padding:10px 16px; background:var(--surface); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); font-weight:700; border-bottom:1px solid var(--line);
}
table.tbl tbody td{padding:12px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:#FAFCFD}
table.tbl tr.off{opacity:.55}
.act a{color:var(--brand-2); text-decoration:none; font-weight:700; font-size:12.5px; margin-right:12px; white-space:nowrap}
.act a.del{color:var(--danger)}
.act button{background:none; border:0; padding:0; font:inherit; font-weight:700; font-size:12.5px;
  color:var(--brand-2); cursor:pointer; margin-right:12px; white-space:nowrap}
.act button.del{color:var(--danger)}
.mono{font-family:"Courier New",monospace; font-size:12.5px}

/* ---------- 8. Blocks ------------------------------------------- */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:20px; max-width:820px}
.stat{background:#fff; border:1px solid var(--line); border-radius:11px; padding:13px 15px}
.stat .n{font-size:20px; font-weight:700; letter-spacing:-.02em}
.stat .l{font-size:11px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; font-weight:700; margin-top:1px}
.empty{padding:44px 20px; text-align:center; color:var(--muted); background:#fff;
  border:1px solid var(--line); border-radius:12px}
.empty h3{margin:0 0 4px; color:var(--ink); font-size:16px}
.linkbox{display:flex; gap:8px; margin-top:6px}
.linkbox input{flex:1; background:var(--surface); font-family:"Courier New",monospace; font-size:12.5px}
.kv{font-size:13px; color:var(--muted); margin:5px 0}
.kv b{color:var(--ink)}
.rule{height:1px; background:var(--line); margin:22px 0}
.centered{flex:1; display:flex; align-items:flex-start; justify-content:center; padding:56px 20px 70px; background:#E9EEF3}
.auth{width:100%; max-width:400px; background:#fff; border:1px solid var(--line); border-radius:13px; padding:30px 30px 34px; box-shadow:var(--shadow)}
.auth.wide{max-width:520px}
.auth h1{margin:0 0 5px; font-size:20px; letter-spacing:-.02em}
.auth p.sub{margin:0 0 4px; color:var(--muted); font-size:13px}
.foot{text-align:center; color:var(--muted); font-size:11.5px; padding:16px; background:#E9EEF3}
.foot .legal{margin-top:4px; font-size:11px; opacity:.75}
@media(max-width:900px){ .two{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ==================================================================
   9. THE HUB'S OWN PIECES — the directory tiles
   ==================================================================
   pcdhub.com is a list of links, and a list of links reads better as
   tiles than as a table: the icon carries the type, so you can find the
   thing you want by shape before you read a word.

   These are the only classes the hub adds to the kit. They use the same
   tokens and the same type. If a second app ever needs a directory,
   promote this block into the kit rather than copying it.
   ------------------------------------------------------------------ */

.sect + .sect{margin-top:30px}
.sect-h{display:flex; align-items:baseline; gap:10px; margin:0 0 14px}
.sect-h h2{margin:0; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--brand); font-weight:700}
.sect-h .n{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.sect-h .ln{flex:1; height:1px; background:var(--line)}
.sect-h .more{font-size:12px; color:var(--brand-2); text-decoration:none; font-weight:700; white-space:nowrap}
.sect-h .more:hover{text-decoration:underline}

.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
@media(max-width:1180px){ .grid3{grid-template-columns:repeat(2,minmax(0,1fr))} }

.tile{
  display:flex; align-items:flex-start; gap:12px; padding:15px 16px;
  border:1px solid var(--line); border-radius:11px; background:#fff;
  text-decoration:none; color:inherit; transition:border-color .14s, box-shadow .14s, transform .14s;
}
.tile:hover{border-color:var(--brand-2); box-shadow:var(--shadow); transform:translateY(-1px)}
.tile.off{opacity:.55; cursor:default}
.tile.off:hover{transform:none; border-color:var(--line); box-shadow:none}
.tile .tbody{min-width:0; flex:1}
.tile .tgo{color:#B7C6D3; font-size:13px; flex:none; margin-top:2px}
.tile:hover .tgo{color:var(--brand-2)}
.tile.off:hover .tgo{color:#B7C6D3}

.ico{
  width:34px;height:34px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  background:var(--surface); color:var(--brand); border:1px solid var(--line-2);
}
/* The icon is the type. Four kinds, four tints — kept quiet so the teal
   still means "ours" and nothing else. */
.ico.app { background:#E8F0F7; color:var(--brand);  border-color:#D3E3F0 }
.ico.link{ background:#FDF3E3; color:#8A5709;       border-color:#F2E2C7 }
.ico.doc { background:#EDF2F6; color:var(--ink-2);  border-color:#E0E8EF }
.ico.form{ background:#E2F4F3; color:#0B6F6D;       border-color:#CDEAE9 }

.tname{font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; line-height:1.35}
.tdesc{font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.45; display:block}
.thost{
  font-family:"Courier New",monospace; font-size:11.5px; color:#9FB2C2;
  margin-top:6px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chip-new { background:#E2F4F3; color:#0B6F6D }
.chip-soon{ background:#F1F4F7; color:#7C90A2 }
.chip-ext { background:#FDF3E3; color:#8A5709 }

/* Role badges on the Users screen. Same three roles as HubTrack, same look. */
.role-tag{font-size:10px; font-weight:700; padding:2px 10px; border-radius:11px;
  display:inline-block; letter-spacing:.05em; text-transform:uppercase}
.role-tag.admin{background:var(--brand); color:#fff}
.role-tag.pcd{background:var(--brand-2); color:#fff}
.role-tag.odm{background:#E2F4F3; color:#0B6F6D}

/* An embedded page — today only the vacation calendar on Administrative.
   The old pto.php embedded it and people used it as a calendar, not as a
   link, so the directory keeps it rather than costing them that. */
.embed{background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:14px 16px 16px; margin-top:26px; box-shadow:var(--shadow)}
.embed-h{margin-bottom:12px}
.embed-h b{display:block; font-size:14.5px}
.embed-h span{display:block; font-size:12.5px; color:var(--muted)}
.embed iframe{display:block; width:100%; height:620px; border:1px solid var(--line-2);
  border-radius:8px; background:var(--surface)}
@media(max-width:820px){ .embed{padding:12px} .embed iframe{height:460px} }

/* The one-time temporary password, shown once after a reset. */
.cred{background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:18px; max-width:720px}
.cred .pw{font-family:"Courier New",monospace; font-size:16px; background:var(--brand);
  color:#fff; padding:4px 12px; border-radius:6px; letter-spacing:.04em; display:inline-block}

/* ==================================================================
   10. MOBILE — one breakpoint, 820px
   ================================================================== */
.burger{
  display:none; background:transparent; border:1px solid rgba(255,255,255,.22);
  color:#fff; width:34px; height:34px; border-radius:8px; cursor:pointer;
  font-size:16px; line-height:1; flex:none; padding:0;
}
.backdrop{
  display:none; position:fixed; inset:56px 0 0 0; background:rgba(15,30,46,.45);
  z-index:39; border:0;
}

@media (max-width:820px){
  .burger{display:flex; align-items:center; justify-content:center}
  /* The backdrop covers only what is to the right of the drawer, so a tap
     on it always closes and never lands on the menu. */
  body.nav-open .backdrop{display:block; left:262px}
  body.nav-open{overflow:hidden}

  .appbar{padding:0 12px; gap:9px}
  .appbar .bs{display:none}
  .appbar .bn{font-size:14px; white-space:nowrap}
  .appbar .who > div > div:first-child{display:none}   /* keep the avatar and the role */
  .mark{width:28px; height:28px; font-size:10px}
  #userMenu{right:12px}

  .side{
    position:fixed; top:56px; bottom:0; left:0; width:262px; z-index:40;
    transform:translateX(-100%); transition:transform .18s ease-out;
    overflow-y:auto; box-shadow:6px 0 22px rgba(15,30,46,.16);
  }
  body.nav-open .side{transform:translateX(0)}
  .nav a{padding:12px 12px; font-size:14.5px}    /* fingers, not cursors */

  .main{min-width:0}
  .content{padding:18px 14px 30px}
  h1.pt{font-size:19px}
  p.ps{font-size:13px}

  .topstrip{padding:9px 14px; gap:9px; flex-wrap:wrap}
  .topstrip .sp{display:none}
  .topstrip .btn{order:1; margin-left:auto; width:auto; display:inline-block; margin-top:0; white-space:nowrap}
  .search{order:2; flex:1 1 100%; max-width:none; min-width:0}
  .search input[type=text]{font-size:16px}   /* below 16px iOS zooms on focus */

  .two{grid-template-columns:1fr; gap:0}
  .panel-card{padding:18px 16px; border-radius:10px}
  input[type=text],input[type=email],input[type=password],input[type=date],textarea,select{font-size:16px}
  .btn{padding:13px 20px; font-size:15px}
  .btn.sm{padding:10px 14px}
  .content .btn:not(.sm){display:block; width:100%; text-align:center}
  .content .btn.ghost:not(.sm){margin-top:10px}

  .stats{grid-template-columns:1fr 1fr; gap:10px}
  .stat{min-width:0}
  .grid3{grid-template-columns:1fr}
  .sect-h .more{display:none}

  /* Tables become cards. Scrolling one sideways hides exactly what
     matters — the status and the actions. Each td needs data-label. */
  table.tbl thead{display:none}
  table.tbl, table.tbl tbody, table.tbl tr, table.tbl td{display:block; width:100%}
  table.tbl tr{
    background:#fff; border:1px solid var(--line); border-radius:10px;
    padding:11px 13px; margin-bottom:10px;
  }
  table.tbl tr:hover{background:#fff}
  table.tbl td{
    border:0; padding:4px 0; font-size:13.5px;
    display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  }
  table.tbl td::before{
    content:attr(data-label); flex:none; color:var(--muted);
    font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700;
  }
  table.tbl td:empty{display:none}
  table.tbl td.act{
    justify-content:flex-start; gap:18px; padding-top:11px; margin-top:7px;
    border-top:1px solid var(--line-2); flex-wrap:wrap;
  }
  table.tbl td.act::before{display:none}
  table.tbl td.act a, table.tbl td.act button{margin:0; font-size:13.5px}

  .linkbox{flex-direction:column}
  .linkbox .btn{width:100%}
  .centered{padding:26px 14px 40px}
  .foot{padding:16px 14px}
}

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