/* ------------------------------------------------------------------
   Bridge styles for the server-rendered portal.
   portal.css targets <button> for nav/menu items; here the same look is
   applied to the <a> and <form><button> markup the PHP pages emit.
   ------------------------------------------------------------------ */

/* ---- sidebar nav (anchors instead of buttons) ---- */
.nav a.navbtn{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
  color:var(--soft);font-weight:500;font-size:14px;text-align:left;width:100%;position:relative;
  text-decoration:none}
.nav a.navbtn .ic{width:20px;text-align:center;flex:none;font-size:15px}
.nav a.navbtn .tx{white-space:nowrap;overflow:hidden}
.nav a.navbtn:hover{background:#f3f5f9;color:var(--ink)}
.nav a.navbtn.on{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(59,130,246,.32)}
.nav a.navbtn.on .nbadge{background:rgba(255,255,255,.28)}
.side.q .nav a.navbtn{justify-content:center;padding:10px}
.me a.who{text-decoration:none;color:inherit}

/* ---- auth pages: larger logo (INTENTIONAL divergence from the reference) ----
   portal.css sets .art-logo svg to 62px. Requested bigger on the sign-in,
   register, forgot- and reset-password screens. .art-logo appears only in
   views/auth/_shell.php, so nothing else is affected; the sidebar logo
   (.logo .logo-full svg, 44px) is untouched. */
.art-logo svg{height:72px !important;max-width:100%}
@media(max-width:1100px){.art-logo svg{height:74px}}

/* On a phone portal.css collapses the art panel to a header strip. Size the
   wordmark by HEIGHT here, never height:auto — logo.php's <svg> carries only
   a viewBox with no width/height attributes, so height:auto can resolve to
   zero and the logo vanishes inside .logo's overflow:hidden. At 48px the
   wordmark is ~155px wide, well inside max-width on any phone, so the aspect
   ratio is never squashed. */
@media(max-width:860px){
  .art-logo .logo-full{display:block}
  .art-logo .logo-mark{display:none}
  .auth-art {
    background: #fff;
  }
  .art-logo svg{height:48px !important;width:auto !important;max-width:86vw}
}

/* The auth logo links to the public site; keep it a clean block with no
   underline or visited colour bleeding onto the artwork. */
.art-logo a{display:inline-block;text-decoration:none;line-height:0}

/* ---- clickable things the original drove with JS ----------------------------
   The reference made these <button>s and <div>s and wired click handlers. The
   server app navigates, so they are real links — and a bare <a> inherits the
   browser's blue underline, which is what made dashboard rows and hero chips
   look wrong. Anything given an href needs a line here.

   Those with their own colour (.export, .rchip) only need the underline
   cleared; containers whose children carry the colour (.htag, .trk, .pmrow)
   also need colour:inherit so the text inside keeps its intended shade. */
a.empchip,a.histchip,a.histclear,a.caliconbtn,a.calbtn,a.export,a.rchip{text-decoration:none}
a.htag,a.trk,a.pmrow{text-decoration:none;color:inherit}
a.caliconbtn,a.calbtn{display:inline-flex;align-items:center;justify-content:center}
.cal td a.day{text-decoration:none;color:inherit}

/* ---- profile menu (mixed anchors + inline forms) ---- */
.tb-profile .menu a,
.tb-profile .menu form>button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 11px;border-radius:9px;font-size:13.5px;color:var(--ink);font-weight:500;
  text-decoration:none;background:none;border:0;cursor:pointer;font-family:inherit}
.tb-profile .menu a:hover,
.tb-profile .menu form>button:hover{background:#f4f6f9}
.tb-profile .menu form{margin:0}
.tb-profile .menu form>button.mlogout{color:var(--coral);font-weight:600}
.tb-profile .menu form>button.mlogout:hover{background:#fdeceb}
.tb-profile .menu a.menu-head{display:flex;align-items:center;gap:10px;padding:8px 10px 12px;
  border-bottom:1px solid var(--line);margin-bottom:5px;border-radius:0}
.tb-profile .menu a.menu-head:hover{background:transparent}
.notifpanel .nh .nhacts form{margin:0}
.notifpanel .nh .nhacts button{background:none;border:0;font:inherit;cursor:pointer;
  font-size:11.5px;font-weight:600;color:var(--blue)}
.notifpanel .nh .nhacts button.nclear{color:var(--coral)}
.nitem form{margin:0}
.nitem .ngo{color:var(--blue);text-decoration:none}

/* ---- generic data table ---- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead th{text-align:left;font-size:11px;letter-spacing:.7px;text-transform:uppercase;
  color:var(--faint);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line2);
  white-space:nowrap}
.tbl tbody td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#f8fafc}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.tbl td.act{text-align:right;white-space:nowrap}
.tbl .who2{display:flex;align-items:center;gap:10px;min-width:0}
.tbl .who2 .nm{font-weight:600}
.tbl .who2 .em{font-size:11.5px;color:var(--faint)}
.tblwrap{overflow-x:auto;margin:0 -4px;padding:0 4px}

/* ---- layout helpers ----
   .row is identical in portal.css — left to the reference. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:16px}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.stack{display:flex;flex-direction:column;gap:14px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.muted{color:var(--soft)}
.tiny{font-size:11.5px}
.mono{font-family:var(--mono)}
.mt{margin-top:14px}
.nowrap{white-space:nowrap}
.inlineform{display:inline;margin:0}
.right{margin-left:auto}

/* ---- cards ----
   This file loads after portal.css, so anything declared here beats the
   reference on equal specificity. The old rules repainted EVERY card in the
   app: flat white instead of the reference's frosted gradient, a grey border
   instead of the white one, and padding on .card itself — which the reference
   never has, because .pad or .tile-h/.tile-b supply it. Cards that used both
   ended up double-padded.

   The chrome is now left entirely to portal.css. Padding is given only to
   cards that use neither .pad nor the tile structure, so screens not yet
   migrated to the reference markup still look right. */
.card:not(.pad):not(.stat):not(:has(> .tile-h)):not(:has(> .tile-b)){padding:16px 18px}
.card>h3{margin:0 0 12px;font-size:15px;font-weight:800}

/* ---- stat tiles ----
   Scoped to :not(.tinted). This file loads after portal.css, so an unscoped
   .stat here would beat the reference's own .stat rules on equal specificity
   and repaint the tinted dashboard cards (uppercase grey labels, flat white
   background). The reference's `.stat.tinted` cards must keep portal.css. */
.stat:not(.tinted){background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:15px 17px}
.stat:not(.tinted) .lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--faint);font-weight:700}
.stat:not(.tinted) .big{font-size:27px;font-weight:800;line-height:1.15;margin-top:6px;letter-spacing:-.6px}
.stat:not(.tinted) .sub{font-size:12px;color:var(--soft);margin-top:3px}
.stat.g .big{color:var(--green)}
.stat.b .big{color:var(--blue)}
.stat.o .big{color:var(--orange)}
.stat.c .big{color:var(--coral)}
.stat.p .big{color:var(--purple)}

/* A stat card that links somewhere must not inherit the anchor underline. */
a.stat,a.card{text-decoration:none;color:inherit;display:block}

/* ---- access badges ---- */
.ablvl{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.2px}
.ablvl.ab-admin{background:#efe8fe;color:#5b3fd6}
.ablvl.ab-mgr{background:#e3f0ff;color:#2b66d4}
.ablvl.ab-rev{background:#e2f7f6;color:#0d8a90}
.ablvl.ab-mem{background:#eef0f3;color:#5b6573}

/* ---- forms ---- */
.field textarea{padding:9px 11px;border:1px solid var(--line2);border-radius:9px;background:#fff;
  font-family:inherit;font-size:14px;resize:vertical;min-height:70px}
/* .field label is identical in portal.css — left to the reference. */
.field .req{color:var(--coral)}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.bar select,.bar input{background:#f7f9fb;border:1px solid var(--line);border-radius:9px;
  padding:7px 10px;font-size:12.5px;font-weight:600;color:var(--ink);font-family:inherit}
/* .btn.sm is defined in portal.css (12.5px) — left to the reference. */
.btn.red{background:#d9534f}
.btn.link{background:none;color:var(--blue);padding:4px 6px;font-weight:600}
.btn.link:hover{text-decoration:underline}
a.btn{text-decoration:none}

/* The .tsgrid table and .tstotal footer are gone — the timesheet now uses the
   reference's .tsheet CSS grid, styled in portal.css. */
.locked{background:#fdf6e3;border:1px solid #f0e0b0;color:#8a6d3b;border-radius:11px;
  padding:11px 14px;font-size:12.5px;margin-bottom:14px}

/* ---- week switcher ----
   .weeknav itself is the reference's (space-between + wrap); only the anchor
   styling is added here, since the original used <button>. */
.weeknav a.iconbtn{text-decoration:none}
.weeknav a:hover{background:#e8ecf2}
.weeknav .lbl{font-weight:700;font-size:14px;min-width:210px;text-align:center}

/* ---- simple bar chart ---- */
.hbars{display:flex;flex-direction:column;gap:9px}
.hbar{display:grid;grid-template-columns:96px 1fr 60px;align-items:center;gap:10px;font-size:12.5px}
.hbar .track{background:#eef1f5;border-radius:999px;height:9px;overflow:hidden}
.hbar .fill{height:100%;border-radius:999px;background:var(--blue)}
.hbar .v{text-align:right;font-family:var(--mono);font-weight:600}
/* .vbars is gone — bar charts now use the reference's .bars markup from
   bar_chart() in lib/helpers.php. */

/* ---- misc ---- */
.emptybox{text-align:center;color:var(--soft);padding:34px 16px;background:var(--card);
  border:1px dashed var(--line2);border-radius:var(--r)}
.emptybox h4{margin:0 0 5px;font-size:15px;color:var(--ink)}
/* .invitelink and .invitelink-row both come from portal.css. */
.perm{display:grid;grid-template-columns:1fr auto auto auto auto;gap:0;font-size:12.5px;
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.perm>div{padding:9px 12px;border-bottom:1px solid var(--line)}
.perm .hd2{background:#f7f9fb;font-weight:700;font-size:11px;text-transform:uppercase;
  letter-spacing:.6px;color:var(--faint);text-align:center}
.perm .c{text-align:center}
.perm .yes{color:var(--green);font-weight:800}
.perm .no{color:#d9d9de}
.modal-card form{margin:0}
template{display:none}

/* ==================================================================
   Additions for the second feature round: billing lock, calendar,
   search, donuts, wallpapers, pagination, working-day pickers.
   ================================================================== */

/* ---- billing lock / notices ---- */
.lockbox{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#fdeceb;border:1px solid #f3c2c2;color:#8a2b26;border-radius:13px;
  padding:13px 16px;margin:0 0 14px;font-size:13.5px}
.lockbox b{color:#7a201c}
.lockbox .tiny{color:#a4544f;margin-top:2px}
.notebox{background:#eef4ff;border:1px solid #cfe0fb;color:#2b4f8f;border-radius:12px;
  padding:11px 15px;font-size:13px;margin:0 0 14px}
.notebox a{color:#2b66d4;font-weight:600}
.notebox.warn{background:#fdf6e3;border-color:#f0e0b0;color:#8a6d3b}
.okbox{background:#eafaf1;border:1px solid #b7e6cd;color:#17804f;border-radius:12px;
  padding:11px 15px;font-size:13px}

.lbl2{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin:0 0 8px}
.ticklist{margin:6px 0 0;padding-left:0;list-style:none;font-family:var(--mono);font-size:12px}
.ticklist li{padding:4px 0 4px 20px;position:relative;color:var(--soft)}
.ticklist li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}

/* ---- pagination ---- */
.pager{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:14px 2px 2px}
.pager .pg{min-width:32px;height:32px;padding:0 9px;border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:600;text-decoration:none;
  color:var(--ink);background:#f4f6f9;border:1px solid var(--line2)}
.pager .pg:hover{background:#e8ecf2}
.pager .pg.on{background:var(--blue);border-color:var(--blue);color:#fff}
.pager .pg.off{opacity:.4;pointer-events:none;background:transparent;border-color:transparent}
.pager .pgcount{margin-left:auto;font-size:11.5px;color:var(--faint)}

/* ---- calendar ---- */
.cal2{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.cal2 th{font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--faint);
  font-weight:700;padding:4px 2px 8px;text-align:center}
.cal2 th.off{color:#c7cfd9}
.cal2 td{vertical-align:top;height:88px;border:1px solid var(--line);border-radius:10px;
  padding:5px 6px;background:var(--card)}
.cal2 td.mute{background:transparent;border-color:transparent}
.cal2 td.nonwork{background:#f7f9fc}
.cal2 td.today{border-color:var(--blue);box-shadow:0 0 0 2px rgba(59,130,246,.18)}
.cal2 td.sel{border-color:var(--green);box-shadow:0 0 0 2px rgba(31,157,99,.2)}
.cal2 .dnum{display:inline-block;font-size:12.5px;font-weight:700;color:var(--ink);
  text-decoration:none;padding:1px 5px;border-radius:6px;margin-bottom:3px}
.cal2 .dnum:hover{background:#eef2f7}
.cal2 td.today .dnum{background:var(--blue);color:#fff}
.cal2 .cev{font-size:10.5px;line-height:1.35;padding:2px 5px;border-radius:5px;margin-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal2 .cev.ann{background:#e9eefe;color:#3457c4}
.cal2 .cev.hol{background:#fdf3e1;color:#a96a09}
.cal2 .cev.leave{background:#e7f6ee;color:#17804f}
.cal2 .cmore{font-size:10px;color:var(--faint);padding-left:5px}
.callegend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:11.5px;color:var(--soft)}
.callegend i.d{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px}
.callegend i.d.ann{background:#3457c4}.callegend i.d.hol{background:#a96a09}
.callegend i.d.leave{background:#17804f}.callegend i.d.nonwork{background:#c7cfd9}
.cdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.cdot.ann{background:#3457c4}.cdot.hol{background:#a96a09}.cdot.leave{background:#17804f}

/* ---- working-day pickers ---- */
.wdchip,.wdtoggle{display:inline-flex;align-items:center;justify-content:center;min-width:36px;
  height:34px;padding:0 10px;border-radius:9px;font-size:12px;font-weight:700;
  background:#f4f6f9;border:1px solid var(--line2);color:var(--faint)}
.wdchip.on{background:var(--green);border-color:var(--green);color:#fff}
.wdtoggle{cursor:pointer;position:relative}
.wdtoggle input{position:absolute;opacity:0;pointer-events:none}
.wdtoggle.on,.wdtoggle:has(input:checked){background:var(--green);border-color:var(--green);color:#fff}

/* ---- donuts ----
   .donutwrap is the reference's 160px centred box (portal.css). It was being
   overridden here into a flex row, which broke the platform dashboard's
   Workforce Mix donut and its centre figure. */
.dlegend{display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--soft);min-width:130px}
.dlegend div{display:flex;align-items:center;gap:8px}
.dlegend i{width:10px;height:10px;border-radius:3px;flex:none}
.dlegend b{margin-left:auto;color:var(--ink);font-family:var(--mono)}

/* ---- global search results ---- */
.sres{display:flex;align-items:center;gap:13px;padding:11px 6px;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;border-radius:9px}
.sres:hover{background:#f7f9fc}
.sres:last-child{border-bottom:0}
.sres .sic{font-size:19px;width:30px;text-align:center;flex:none}
.sres .stx{display:flex;flex-direction:column;min-width:0;flex:1}
.sres .st{font-weight:600;font-size:13.5px}
.sres .ss{font-size:11.5px;color:var(--faint)}
.sres .sgo{font-size:11.5px;color:var(--blue);font-weight:600;flex:none}

/* ---- topbar search is a form now ---- */
form.tb-search{display:flex;align-items:center;gap:7px}
form.tb-search input{border:0;background:transparent;outline:0;font-size:13.5px;min-width:0;
  width:100%;color:inherit}

/* ---- wallpaper picker ---- */
/* .wpgrid's 3-column layout comes from portal.css — do not restate it here or
   this file wins on load order and the tiles re-flow. Each tile is wrapped in
   its own <form> to post the choice, so the form must not become the grid item
   itself; display:contents hands that role back to the button. */
.wpgrid form{margin:0;display:contents}
.wpgrid .wpopt{width:100%}
/* ---- page wallpapers ----
   The eighteen wallpapers live in lib/wallpapers.php and are applied inline on
   <body>, so this file carries no gradients.

   wp-dark marks a DARK WALLPAPER, not a dark theme. In the reference it only
   deepens card/sidebar shadows, brightens the card border and turns the page
   title white — the cards themselves stay light and frosted, so their content
   keeps reading in dark ink. Those rules live in portal.css.

   The rewrite had bolted a full dark mode on here (dark card and stat
   backgrounds, light body text, dark inputs, tables and pagers). That is what
   turned every card navy on Deep Ocean and left the date field unreadable, so
   it is gone. Do not reintroduce it: a dark wallpaper must not repaint cards. */

/* ---- file input inside modals ---- */
.field input[type=file]{padding:8px;border:1px dashed var(--line2);border-radius:9px;
  background:#fafbfd;font-size:12.5px;width:100%}