:root{
  /* ---------- IBA Sukkur brand palette ----------
     Primary navy from the IBA website top band and hero section.
     Brand maroon from IBA section headings ("Flexible-Electronic-Devices-Lab", "Events"...).
     Accent gold from the carousel arrow. Backgrounds: clean white + a faint blue-grey panel
     tint that reads as "institutional / academic" rather than warm/casual. */
  --ink:#0a0f16;                /* near-black for body text (darkened for max readability) */
  --paper:#ffffff;              /* page background: pure white */
  --card:#ffffff;               /* card / panel background: clean white */
  --line:#c3ccd8;   /* darkened so cards keep definition on the white background */               /* cool grey border (replaces warm beige line) */
  --navy:#0e2c5b;               /* PRIMARY brand — IBA deep navy */
  --navy-strong:#0a2247;        /* darker navy for hover / strong header strip */
  --teal:#3a5f88;               /* steel blue secondary, used for Author panel */
  --green:#2e7d52;              /* status green — Approved / Published */
  --amber:#9a6303;   /* darkened from #c8841a for legible text on white */              /* status amber — In process / pending */
  --gold:#955a1d;    /* darkened from #b87333 for legible text on white */               /* IBA-accent gold, used for Submission Handler panel */
  --red:#a51c1c;                /* IBA-toned red — Rejected status */
  --maroon:#7a1a1a;             /* SECONDARY brand — IBA section-heading maroon, used for Writer panel */
  --purple:#3a5f88;             /* alias for compatibility — points to steel blue */
  --muted:#2b333d;   /* darkened for maximum-contrast secondary/help text */              /* cool grey for muted text */
  /* Professional, restrained elevation — a soft key shadow only. The old double shadow
     (with a 28px blur) made cards look like they were floating off the page. */
  --shadow:0 1px 2px rgba(16,32,56,.06),0 2px 8px rgba(16,32,56,.07);
  --radius:10px;                /* one shared corner radius across cards/panels/forms */
  --line-soft:#e2e8f0;          /* hairline for row separators */
}
html{scroll-padding-top:140px;scroll-behavior:smooth}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;background:#ffffff;color:var(--ink);
  font-size:15px;line-height:1.55;
  text-rendering:optimizeLegibility;
  min-height:100vh;display:flex;flex-direction:column}

/* ---------- top bar ----------
   Two-stripe pattern modelled on the IBA Sukkur website: a strong navy upper band
   carries the brand and the signed-in user; a clean white sub-nav below carries
   page links. The thin maroon line between the two strips ties back to the IBA
   secondary brand color (also visible on every panel's role badge). */
.topbar{background:var(--navy);border-bottom:3px solid var(--maroon);position:sticky;top:0;z-index:20;box-shadow:0 2px 6px rgba(14,44,91,.18)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 24px;max-width:1180px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;color:#fff;min-width:0}
.brand > div{min-width:0}
/* Brand mark = logo "A1" adapted for the dark bar: white tile, navy "P", maroon folded
   corner. (The installable app icon in icon.php keeps the navy-tile version.) */
.brand .mk{width:40px;height:40px;flex-shrink:0;border-radius:10px;background:#ffffff;
  color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:23px;
  position:relative;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,.28)}
.brand .mk::after{content:"";position:absolute;top:0;right:0;width:0;height:0;
  border-top:15px solid var(--maroon);border-left:15px solid transparent}
.brand .bt{font-weight:700;font-size:17px;line-height:1.1;color:#fff;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand .bs{font-size:12px;color:#cdd7e6;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* The top-row mobile name badge is only used on phones (see mobile media query). */
.badge-mobile{display:none}
/* Badge sits on the navy topbar. The white border + subtle text-shadow make sure even the
   admin badge (which is navy on navy by design — to telegraph "you ARE in the primary panel")
   stays readable, while a writer-maroon or handler-gold badge pops naturally. */
.badge{font-size:12px;font-weight:600;padding:6px 13px;border-radius:30px;color:#fff;
  border:1.5px solid rgba(255,255,255,.45);
  text-shadow:0 1px 1px rgba(0,0,0,.25);
  box-shadow:0 1px 2px rgba(0,0,0,.15)}
.logout{border:1.5px solid rgba(255,255,255,.4);background:transparent;border-radius:9px;
  padding:7px 13px;font-size:12.5px;cursor:pointer;color:#fff;text-decoration:none;transition:.15s}
.logout:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---------- notification bell (topbar) ---------- */
.bell-wrap{position:relative}
.bell-btn{position:relative;background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff;
  border-radius:9px;width:38px;height:34px;font-size:16px;cursor:pointer;transition:.15s;line-height:1}
.bell-btn:hover{background:rgba(255,255,255,.12);border-color:#fff}
.bell-count{position:absolute;top:-7px;right:-7px;background:#c62d21;color:#fff;font-size:10.5px;font-weight:700;
  min-width:18px;height:18px;padding:0 4px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--navy)}
.bell-drop{display:none;position:absolute;right:0;top:44px;width:360px;max-width:calc(100vw - 24px);
  background:#fff;border:1px solid var(--line-soft);border-radius:12px;box-shadow:0 12px 36px rgba(10,25,50,.22);
  z-index:60;overflow:hidden}
.bell-drop.open{display:block}
.bell-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;
  border-bottom:1px solid var(--line-soft);background:#f8fafc;font-size:13px;font-weight:700;color:var(--navy)}
.bell-head a{font-size:12px;font-weight:600;color:var(--maroon);text-decoration:none}
.bell-empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:13px}
.bell-item{display:block;padding:10px 14px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--ink);transition:.12s}
.bell-item:last-child{border-bottom:none}
.bell-item:hover{background:#f4f6fa}
.bell-item.unread{background:#eef4fb}
.bell-item.unread:hover{background:#e4edf8}
.bell-item .bi-title{display:block;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--navy)}
.bell-item .bi-body{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}
.bell-item .bi-time{display:block;font-size:11.5px;color:#5f6b7a;margin-top:3px}

/* Sub-navigation: clean white panel with navy active state. The active page is underlined
   in IBA maroon to echo the brand line above. */
.subnav{background:#fff;border-bottom:1px solid var(--line)}
.subnav-in{display:flex;gap:4px;max-width:1180px;margin:0 auto;padding:0 18px;flex-wrap:wrap}
.subnav-in a{padding:11px 14px;font-size:14px;color:var(--muted);text-decoration:none;
  border-bottom:3px solid transparent;font-weight:600;transition:.15s}
.subnav-in a:hover{color:var(--navy)}
.subnav-in a.active{color:var(--navy);font-weight:700;border-bottom-color:var(--maroon)}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:24px;width:100%;flex:1}
.wrap-wide{max-width:1480px}
.foot{padding:24px;text-align:center;color:var(--muted);font-size:13px}
/* Page heading. Mirrors the IBA institutional heading style — solid navy text with a short
   maroon underline accent below, the same red used on IBA's "Events", "Headlines", and
   department-name section headings. */
h1.page{font-size:26px;font-weight:700;margin-bottom:4px;color:var(--navy);
  padding-bottom:8px;position:relative;display:inline-block}
h1.page::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:3px;background:var(--maroon);border-radius:2px}
.sub{color:var(--muted);font-size:15px;margin-top:10px;margin-bottom:18px;line-height:1.55}
.flash{padding:12px 16px;border-radius:10px;font-size:13.5px;margin-bottom:18px;font-weight:600}

/* ---------- KPI cards ---------- */
.kpis{display:grid;gap:14px;margin-bottom:22px;grid-template-columns:repeat(4,1fr)}
.kpi{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);
  position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c,var(--navy))}
.kpi .lab{font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:#2c3947;font-weight:700}
.kpi .val{font-size:25px;font-weight:700;margin-top:6px;color:var(--c,var(--navy));font-variant-numeric:tabular-nums}
.kpi .note{font-size:13px;color:var(--muted);margin-top:3px}
/* Clickable KPI variant — wraps the card content in an <a>. Lifts slightly on hover so the user knows it's a link. */
a.kpi{text-decoration:none;display:block;color:inherit;transition:.15s}
a.kpi:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(31,58,95,.15);border-color:#c8baa1}
a.kpi:hover .lab{color:var(--c,var(--navy))}

/* Alert KPI — applied only when the count is non-zero on cards that demand action
   (Awaiting Review on dashboard, Needs Assignment on Paper Tasks). The card has a clear
   pink background + thick red border + small warning chip so it stands out even when not
   animating, AND it pulses gently to draw the eye. */
@keyframes kpi-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(178, 58, 46, 0.55), 0 1px 3px rgba(0,0,0,.08); }
  50%      { box-shadow: 0 0 0 9px rgba(178, 58, 46, 0),    0 1px 3px rgba(0,0,0,.08); }
}
@keyframes kpi-bar-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.kpi.kpi-alert,
a.kpi.kpi-alert {
  background: #fdf3f2 !important;          /* light red wash so the cell stands out even when still */
  border: 1.5px solid #c4574c !important;  /* clear but not shouting */
  animation: kpi-pulse 2.2s ease-out infinite;
}
.kpi.kpi-alert::before {
  width: 5px;
  background: #b23a2e !important;
}
.kpi.kpi-alert .lab { color: #9c2f24; font-weight: 700; letter-spacing: .03em; }
.kpi.kpi-alert .val { font-weight: 800; font-size: 26px; color: #b23a2e !important; }
.kpi.kpi-alert .note { color: #9c2f24; font-weight: 600; }
/* Small "ACTION NEEDED" chip in the top-right corner of the card — extra signal in case the user has motion sensitivity / reduced-motion preferences. */
.kpi.kpi-alert::after {
  content: "!";
  position: absolute;
  top: 8px; right: 10px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: #b23a2e; color: #fff;
  font-weight: 900; font-size: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fdecea;
}
/* Respect prefers-reduced-motion: cell stays highlighted, no pulse/blink. */
@media (prefers-reduced-motion: reduce) {
  .kpi.kpi-alert,
  a.kpi.kpi-alert,
  .kpi.kpi-alert::before { animation: none !important; }
}

/* ---------- panels & tables ---------- */
.panel{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:22px;overflow:hidden}
.panel-h{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;
  border-bottom:1px solid var(--line-soft);flex-wrap:wrap;gap:10px;background:#f8fafc}
.panel-h h2{font-size:15.5px;font-weight:700;color:var(--navy);letter-spacing:.01em}
.panel-b{padding:6px 0}
.tbl-scroll{overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:auto}
/* Table header: cool grey-blue (replaces warm cream #f6f2e9) so the look reads as
   "institutional dataset" rather than "warm document". Header text stays IBA navy. */
table.grid th{text-align:left;padding:10px 12px;background:#eef1f6;color:#22304a;font-weight:700;font-size:12px;
  letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--line)}
table.grid td{padding:12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
/* Subtle zebra striping (standard in editorial-manager style data tables) + cool hover tint. */
table.grid tbody tr:nth-child(even){background:#fafbfd}
table.grid tbody tr:hover{background:#f1f5fa}
.stack{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.4}
.stack .lab{font-size:12px;color:#26313d;text-transform:uppercase;letter-spacing:.02em;font-weight:700}
.stack .val{font-weight:600}
.stack .val.due{color:var(--red)}
.empty{padding:30px 24px;text-align:center;color:#33415a;font-size:14px;font-weight:500;line-height:1.55;
  background:#f8fafc;border-radius:8px;margin:6px}

/* ---------- pills ---------- */
.pill{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap}
.p-green{background:#e2f3e8;color:#1e6b41}.p-amber{background:#fbf0d8;color:#8a5a08}
.p-red{background:#f8e2de;color:#8f2114}.p-blue{background:#dde9f7;color:#16406e}.p-grey{background:#ece7dc;color:#5a5346}
.money{font-variant-numeric:tabular-nums;font-weight:600}
.money.due{color:var(--red)}

/* ---------- buttons & forms ---------- */
.btn{display:inline-block;font-family:inherit;font-size:13px;font-weight:600;border:none;border-radius:8px;
  padding:10px 16px;cursor:pointer;transition:.15s;white-space:nowrap;text-decoration:none}
/* Primary = IBA navy. On hover, shifts to the IBA brand maroon — a deliberate brand handshake
   that ties the action back to the secondary brand color used for section headings and the
   topbar accent line. */
.btn-p{background:var(--navy);color:#fff;box-shadow:0 1px 2px rgba(14,44,91,.25)}
.btn-p:hover{background:var(--navy-strong);box-shadow:0 2px 5px rgba(14,44,91,.3)}
.btn-g{background:var(--green);color:#fff}
.btn-a{background:var(--amber);color:#fff}
.btn-r{background:var(--red);color:#fff}
.btn-o{background:#fff;border:1.5px solid var(--line);color:var(--navy);font-weight:600}
.btn-o:hover{border-color:var(--navy);background:#f4f6fa}
.btn:hover{filter:brightness(1.04)}
.btn-sm{padding:7px 12px;font-size:12.5px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

form.card,.formbox{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 24px;margin-bottom:22px}
label{display:block;font-size:12.5px;font-weight:700;color:#22304a;text-transform:uppercase;letter-spacing:.03em;margin:14px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;border:1.5px solid var(--line);border-radius:8px;padding:11px 13px;font-size:14px;font-family:inherit;
  outline:none;background:#fff;color:var(--ink);transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(14,44,91,.1)}

/* Locked / read-only fields (e.g. Author ID, email, admin-set names): keep the greyed
   background that signals "not editable", but the TEXT must stay dark and clearly readable.
   Browser defaults render disabled text a faint grey — we override that here. */
input:disabled,input[readonly],select:disabled,textarea:disabled,textarea[readonly]{
  background:#eef1f6;color:#1d2733;-webkit-text-fill-color:#1d2733;opacity:1;cursor:not-allowed}

/* per-field inline validation messages — bold red with highlight so they're impossible to miss */
.field-error{color:#dc2626 !important;font-size:13.5px;font-weight:700 !important;margin-top:6px;display:flex;align-items:center;gap:7px;line-height:1.4;background:#fee2e2;border-left:4px solid #dc2626;border-radius:6px;padding:8px 12px}
.field-error::before{content:"\26A0";color:#dc2626;font-size:15px;font-weight:700;line-height:1;flex-shrink:0}
input.has-error,select.has-error,textarea.has-error{border-color:#dc2626 !important;background:#fff5f5}
input.has-error:focus,select.has-error:focus,textarea.has-error:focus{box-shadow:0 0 0 3px rgba(220,38,38,.18)}
textarea{min-height:80px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.help{font-size:13.5px;color:var(--muted);margin-top:5px}
.formfoot{margin-top:18px;display:flex;gap:10px}

/* ---------- attachment dropzone (publisher-style file area) ---------- */
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:24px 18px;margin:4px 0 0;border:1.5px dashed #a9b8cc;border-radius:var(--radius);
  background:#f8fafc;cursor:pointer;text-align:center;transition:.15s;
  text-transform:none;letter-spacing:0}
.dropzone:hover,.dropzone.dz-over{border-color:var(--navy);background:#eef4fb}
.dropzone .dz-icon{font-size:22px;line-height:1}
.dropzone .dz-title{font-size:13.5px;color:var(--navy);font-weight:600;text-transform:none;letter-spacing:0}
.dropzone .dz-sub{font-size:13px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.dropzone input[type=file]{display:none}
/* Bare file inputs elsewhere (not yet converted to the dropzone) still get a tidy button. */
input[type=file]::file-selector-button{font-family:inherit;font-size:12.5px;font-weight:600;
  border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:7px;
  padding:7px 14px;margin-right:10px;cursor:pointer;transition:.15s}
input[type=file]::file-selector-button:hover{border-color:var(--navy);background:#f4f6fa}

/* progress tracker (author view) */
.track{display:flex;flex-direction:column;gap:0;margin-top:8px}
.tk{display:flex;gap:14px;align-items:flex-start;padding-bottom:16px;position:relative}
.tk:not(:last-child)::after{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line)}
.tk.done:not(:last-child)::after{background:var(--green)}
.tk .dot{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:13px;font-weight:700;
  background:#efe9dc;color:#8a8170;z-index:1}
.tk.done .dot{background:var(--green);color:#fff}
.tk.cur .dot{background:var(--navy);color:#fff;box-shadow:0 0 0 4px rgba(31,58,95,.15)}
.tk .tkt{font-weight:600;font-size:14.5px}.tk.cur .tkt{color:var(--navy)}
.tk .tks{font-size:13px;color:var(--muted)}

/* Login background. Mimics the IBA Sukkur website hero band — deep navy with a subtle
   gradient toward the IBA brand maroon at the bottom corner, giving the login screen the
   same institutional feel as IBA's landing page header. */
.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(135deg,#0a2247 0%,#0e2c5b 55%,#3a1a1a 100%)}
.login-card{background:var(--card);border-radius:16px;padding:42px 38px;max-width:420px;width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.45);border-top:5px solid var(--maroon)}
.login-card h1{font-size:25px;font-weight:700;margin-bottom:4px;color:var(--navy)}
.login-card .lede{color:var(--muted);font-size:14px;margin-bottom:22px}
.tag{display:inline-block;font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.5}
.divider{height:1px;background:var(--line);margin:18px 0}

/* ---------- responsive / mobile ---------- */
@media(max-width:1024px){
  .kpis{grid-template-columns:repeat(3,1fr) !important}
}
@media(max-width:820px){
  .kpis{grid-template-columns:1fr 1fr !important}
  .row,.row3{grid-template-columns:1fr}
  .wrap{padding:16px 14px}
  .topbar-in{padding:10px 14px}
  .brand .bt{font-size:15px}
  h1.page{font-size:21px}
  .subnav-in{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 10px}
  .subnav-in::-webkit-scrollbar{display:none}
  .subnav-in a{white-space:nowrap;padding:11px 12px}
  form.card,.formbox{padding:16px}
  table.grid{font-size:13px}
  table.grid th, table.grid td{padding:9px 8px}
  .bell-drop{position:fixed;top:60px;right:8px;left:8px;width:auto}
}
@media(max-width:600px){
  /* Phone layout: TWO rows sharing the same navy background.
     Row 1 = logo (left) + the user's name badge (right-aligned).
     Row 2 = the controls (search, notifications, sign out, activity, backup). */
  .topbar-in{flex-flow:row wrap;align-items:center;padding:10px 12px 8px;gap:8px}
  /* Row 1 — branding on the left, taking the remaining width. */
  .brand{gap:10px;justify-content:flex-start;flex:1 1 auto;min-width:0}
  .brand .mk{width:36px;height:36px;font-size:17px;border-radius:9px}
  /* The logo wordmark ("Prolancea" + "Paper Management System") shows in full — the
     name lives in the logo, so both lines appear next to the mark. */
  .brand .bt{font-size:16px;line-height:1.1}
  .brand .bs{display:block;font-size:11px;line-height:1.2;white-space:normal}
  /* Row 1 (right) — the name badge, pinned to the right edge next to the logo. */
  .badge-mobile{display:inline-block;flex:0 0 auto;margin-left:auto;max-width:44vw;
    font-size:11.5px;padding:5px 11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Row 2 — the control cluster wraps onto its own full-width line below row 1,
     right-aligned. The desktop name badge inside this cluster is hidden here (the
     name now lives on row 1). */
  .who{flex:1 1 100%;width:100%;gap:8px;justify-content:flex-end;flex-wrap:nowrap}
  .who .badge{display:none}
  .bell-btn{flex-shrink:0;width:32px;height:31px;font-size:14px}
  .bell-count{top:-6px;right:-6px;min-width:16px;height:16px;font-size:10px}
  .logout{flex-shrink:0;padding:6px 12px;font-size:12px}
}
@media(max-width:520px){
  .kpis{grid-template-columns:1fr 1fr !important;gap:10px}
  .kpi{padding:12px 14px}
  .kpi .val{font-size:20px}
  .actions{gap:6px}
  .btn{padding:9px 13px;font-size:12.5px}
  .formfoot{flex-wrap:wrap}
  .formfoot .btn{flex:1 1 auto;text-align:center}
  h1.page{font-size:19px}
  .sub{font-size:13.5px}
  .dropzone{padding:18px 12px}
  .panel-h{padding:12px 14px}
  .subtabs a.subtab{padding:9px 12px;font-size:12.5px}
}
@media(max-width:420px){
  /* Very narrow phones: two-row top bar still applies. Keep the branding readable and
     tighten row-2 controls slightly so the whole cluster fits on one line. */
  .brand .bt{font-size:15px;line-height:1.12}
  .brand .bs{font-size:10.5px}
  .badge-mobile{max-width:40vw;font-size:11px;padding:5px 9px}
  .who{gap:6px}
  .bell-btn{width:32px;height:31px;font-size:14px}
  .logout{padding:5px 9px;font-size:11.5px}
}

/* ---------- global legibility floor ----------
   Many templates carry inline font-size:10–12px styles. These attribute selectors raise
   every one of them to a readable minimum in a single place — text on every panel stays
   crisp instead of looking faint/blurry, especially on Windows display scaling. */
[style*="font-size:10px"],[style*="font-size:10.5px"]{font-size:12px !important}
[style*="font-size:11px"],[style*="font-size:11.5px"]{font-size:12.5px !important}
[style*="font-size:12px"]{font-size:13px !important}
[style*="font-size:12.5px"]{font-size:13px !important}
/* Lightest inline greys → darker, fully legible grey. */
[style*="color:#7a8594"],[style*="color:#8b95a3"],[style*="color:#8a95a3"]{color:#4a5665 !important}
[style*="color:#5a6675"]{color:#3c4754 !important}

/* ---------- sub-tabs (merged panels: Papers/Approvals, Tasks, Authors/Orders) ---------- */
.subtabs{display:flex;gap:4px;margin:0 0 20px;border-bottom:2px solid var(--line)}
.subtabs a.subtab{padding:10px 18px;font-size:13.5px;font-weight:600;color:var(--muted);
  text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-2px;transition:.15s}
.subtabs a.subtab:hover{color:var(--navy);background:#f4f6fa;border-radius:8px 8px 0 0}
.subtabs a.subtab.active{color:var(--navy);border-bottom-color:var(--maroon)}


/* ===== PPMS professional polish (additive layer) ===== */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{letter-spacing:-.015em}
.card,[class*=card]{border-radius:12px;box-shadow:0 1px 2px rgba(14,44,91,.06),0 4px 14px rgba(14,44,91,.05);transition:box-shadow .18s ease,transform .18s ease}
.card:hover,[class*=card]:hover{box-shadow:0 4px 10px rgba(14,44,91,.10),0 10px 28px rgba(14,44,91,.08);transform:translateY(-1px)}
button,.btn,[class*=btn]{border-radius:8px;transition:filter .15s ease,box-shadow .15s ease}
button:hover,.btn:hover{filter:brightness(1.05)}
input,select,textarea{border-radius:8px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:#0e2c5b;box-shadow:0 0 0 3px rgba(14,44,91,.12)}
table tbody tr{transition:background .12s}
table tbody tr:hover{background:rgba(14,44,91,.035)}
::selection{background:#0e2c5b;color:#fff}