/* KLG workspace layout, adapted from the supplied corporate portal reference. */
:root {
  --paper:#f6f7fa; --panel:#fff; --ink:#171c26; --muted:#7a8192;
  --line:#e1e5ee; --wash:#f3f4f7; --progress:#009ed6; --focus:#009ed6;
  --brand:#009ed6; --brand-wash:#eaf7fd; --sidebar-width:260px;
}
body { font-size:14px; }
button,input,textarea,select { font:inherit; }
.sidebar { position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);z-index:40;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);padding:0 22px;transition:transform .18s; }
.brand { height:88px;display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--line);flex-shrink:0; }
.brand img { width:190px;height:auto;filter:invert(1);display:block; }
.sidebar-section { font-size:10px;letter-spacing:.12em;font-weight:700;color:var(--muted);padding:28px 12px 12px; }
.side-link { width:100%;display:flex;gap:14px;align-items:center;padding:14px 12px;margin:3px 0;border:0;border-radius:10px;background:transparent;color:var(--muted);text-align:left;cursor:pointer;position:relative;line-height:1.4;font-weight:500; }
.side-link svg { width:21px;height:21px;flex-shrink:0; }
.side-link:hover:not(:disabled) { color:var(--ink);background:var(--wash); }
.side-link[aria-current=page] { color:var(--ink);background:var(--wash);font-weight:650; }
.side-link[aria-current=page] svg { color:var(--brand); }
.side-link[aria-current=page]::before { content:'';position:absolute;left:-22px;top:13px;bottom:13px;width:4px;border-radius:0 4px 4px 0;background:var(--brand); }
.side-link:disabled { cursor:default;opacity:.5; }
.sidebar-footer { margin-top:auto;padding:24px 12px;color:var(--muted);font-size:11px;display:grid;gap:7px; }
.sidebar-footer small { font-size:10px; }
.topbar { height:88px;position:sticky;top:0;z-index:30;margin-left:var(--sidebar-width);background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:12px 30px; }
.menu-toggle { width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex-shrink:0; }
.menu-toggle svg { width:20px;height:20px; }
.topbar-context { display:grid;gap:2px; }
.topbar-context span { font-size:10px;color:var(--muted); }
.topbar-context strong { font-size:13px;font-weight:600; }
.topbar-account { margin-left:auto;min-width:0; }
.user-badge { border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:8px;font-size:0;max-width:680px; }
#curUserEmail { font-size:11px;max-width:310px;overflow-wrap:anywhere;font-weight:500;line-height:1.5; }
#adminRolesBtn,#logoutBtn { font-size:11px;padding:7px 9px;font-weight:500;white-space:nowrap; }
.signed-out-label { color:var(--muted);font-size:12px;border:1px solid var(--line);border-radius:9px;padding:10px 14px; }
.workspace { margin-left:var(--sidebar-width);padding:30px 28px; }
main { width:100%;max-width:760px;margin:0 auto;padding:0 0 36px;transition:max-width .18s; }
main.wide-layout { max-width:1240px; }
header.portal-head { margin:4px 0 26px; }
.page-eyebrow { font-size:10px;letter-spacing:.13em;color:var(--muted);font-weight:600;margin-bottom:8px; }
header.portal-head h1 { font-size:27px;letter-spacing:-.7px;line-height:1.3;font-weight:700; }
header.portal-head p { margin-top:8px;font-size:12px;line-height:1.65;color:var(--muted);max-width:70ch; }
#portal { background:var(--panel);border-radius:18px;padding:22px;box-shadow:0 5px 32px rgb(18 40 70 / .025); }
.tabs { display:flex;flex-wrap:nowrap;gap:5px;border:0;background:var(--wash);padding:6px;border-radius:12px;margin-bottom:24px;overflow-x:auto; }
.tab { flex:1;justify-content:center;white-space:nowrap;padding:11px 10px;font-size:12px;font-weight:500;border:0;border-radius:8px;margin:0; }
.tab[aria-selected=true] { background:var(--panel);box-shadow:0 2px 7px rgb(26 40 60 / .08);font-weight:650;color:var(--ink);border:0; }
.tab-badge { background:var(--brand); }
section.card { border-radius:12px;padding:22px;margin-bottom:20px;box-shadow:none; }
section.card h2 { font-size:16px;font-weight:650; }
.step { border-radius:50%;background:var(--brand-wash);color:var(--brand);font-size:12px;width:27px;height:27px; }
input[type=text],input[type=email],input[type=date],input[type=search],select,textarea { border-radius:9px;padding:11px 13px;min-height:43px; }
textarea { min-height:106px; }
label,legend { font-weight:550;color:var(--ink);font-size:12px;margin-bottom:7px; }
.hint { font-size:11px;line-height:1.6; }
.choice { border-radius:10px;padding:13px;font-size:12px; }
.choice:has(input:checked) { background:var(--brand-wash);border-color:var(--brand);box-shadow:none; }
.choice input { accent-color:var(--brand); }
button.primary,.save,.btn-review { background:var(--brand);color:#fff;border-radius:9px;font-weight:600; }
button.primary:hover,.save:hover,.btn-review:hover { background:#008bc0; }
.btn-outline,.retry { border-radius:8px;font-weight:500; }
#submitSection { border:0;background:var(--wash); }
#submit { width:auto;min-width:160px;display:block;margin-left:auto; }
.pipe { border:1px solid var(--line);border-radius:11px; }
.stage { min-width:92px;border-bottom-width:3px;padding:13px 12px; }
.stage b { font-size:24px; }
.stage[aria-pressed=true] { background:var(--brand-wash);color:var(--brand); }
.stage span { font-size:11px; }
.review-layout { gap:20px;grid-template-columns:minmax(260px,380px) minmax(0,1fr); }
.queue,.detail,.p-item,details.rq { border-radius:12px; }
.head h2 { font-size:24px; }
.ask h3,.r-form h3 { font-size:14px;font-weight:650; }
.ask .text { font-size:13px; }
.facts-grid dt,.facts-grid dd { font-size:11px; }
.r-form { border-top:1px solid var(--line); }
.actions { border-radius:0 0 12px 12px;box-shadow:0 -4px 16px rgb(20 40 60 / .035); }
#authView { max-width:580px;margin:52px auto;padding:36px; }
#authView h2 { font-size:23px; }
#authView p { font-size:13px;line-height:1.7;color:var(--muted); }
#authMessage { padding:12px 14px;background:var(--wash);border-radius:9px; }
#googleSignIn { margin-top:22px; }
.sidebar-scrim { position:fixed;inset:0;background:rgb(10 20 35 / .4);border:0;z-index:35; }
body.sidebar-collapsed .sidebar { transform:translateX(-100%); }
body.sidebar-collapsed .topbar,body.sidebar-collapsed .workspace { margin-left:0; }
@media (max-width:1100px) { .topbar-context { display:none; } .review-layout { grid-template-columns:1fr; } }
@media (max-width:760px) {
  .sidebar { transform:translateX(-100%);width:260px; }
  .topbar { margin-left:0;padding:10px 16px;height:72px;gap:10px; }
  .workspace { margin-left:0;padding:24px 14px; }
  body.sidebar-open .sidebar { transform:translateX(0); }
  .user-badge { border:0;padding:0;gap:6px;flex-wrap:wrap;justify-content:flex-end; }
  #curUserEmail { max-width:190px;font-size:10px; }
  #adminRolesBtn,#logoutBtn { font-size:10px;padding:5px 7px; }
  header.portal-head h1 { font-size:24px; }
  #portal { padding:12px;border-radius:14px; }
  .tabs { padding:5px;gap:3px; }
  .tab { flex:1 0 auto;font-size:11px;padding:10px; }
  section.card { padding:18px 14px; }
  #authView { padding:24px 20px;margin-top:28px; }
  .review-layout { grid-template-columns:1fr; }
  .stage { min-width:92px; }
}

:root[data-theme="dark"] { --paper:#11161c;--panel:#1a2129;--ink:#e8edf2;--muted:#9ba7b7;--line:#303b48;--wash:#242e3a;--brand:#20ace1;--brand-wash:#15384a; }
:root[data-theme="dark"] .brand img { filter:none; }
:root[data-theme="dark"] button.primary, :root[data-theme="dark"] .save, :root[data-theme="dark"] .btn-review { color:#fff; }
:root[data-theme="dark"] .stage[aria-pressed=true] { color:var(--brand); }

@media(prefers-reduced-motion:reduce) { main,.sidebar { transition:none; } }
/* Request register and add-request form, following the supplied list layout. */
.request-toolbar { display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px; }
.rows-control { display:flex;align-items:center;gap:9px;margin:0;white-space:nowrap;font-weight:500;color:var(--muted); }
.rows-control select { width:74px;min-height:40px;padding:8px 12px; }
.request-tools { display:flex;gap:10px;align-items:center;margin-left:auto; }
#requestSearch { width:260px; }
#addRequestBtn { min-height:43px;white-space:nowrap;padding:10px 18px;font-size:13px; }
#addRequestBtn span { font-size:19px;line-height:1; }
.request-filters { display:flex;align-items:end;gap:14px;background:var(--wash);padding:15px;border-radius:10px;margin-bottom:18px; }
.request-filters label { display:grid;gap:6px;margin:0;min-width:230px; }
.request-table-scroll { width:100%;overflow-x:auto;border-radius:10px; }
.request-table { border-collapse:collapse;width:100%;min-width:1070px;text-align:left;font-size:12px; }
.request-table th { background:var(--wash);color:var(--muted);font-weight:550;padding:14px 16px;white-space:nowrap; }
.request-table th:first-child { border-radius:9px 0 0 9px; }
.request-table th:last-child { border-radius:0 9px 9px 0; }
.request-table td { padding:20px 16px;border-bottom:1px solid var(--line);line-height:1.6; }
.request-table td:first-child { white-space:nowrap; }
.request-table tbody tr:hover { background:color-mix(in srgb,var(--brand-wash) 40%,var(--panel)); }
.request-id-link { border:0;padding:0;background:none;color:var(--brand);font:inherit;cursor:pointer;font-weight:550; }
.request-id-link:hover { text-decoration:underline; }
.request-status-badge { display:inline-block;border-radius:20px;padding:3px 9px;font-size:10px;white-space:nowrap;font-weight:650;background:var(--brand-wash);color:var(--brand); }
.request-status-badge[data-status="Delivered"],.request-status-badge[data-status="Approved by Sponsor"] { background:color-mix(in srgb,var(--done) 12%,var(--panel));color:var(--done); }
.request-status-badge[data-status="Rejected"],.request-status-badge[data-status="Rejected by Sponsor"] { background:color-mix(in srgb,var(--alert) 10%,var(--panel));color:var(--alert); }
.request-pagination { display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:22px;font-size:12px; }
.request-pagination nav { display:flex;align-items:center;gap:9px; }
.request-pagination button { border:0;color:var(--muted);font-weight:450; }
.request-pagination button:disabled { opacity:.4;cursor:default; }
.request-page-number { background:var(--brand);color:#fff;border-radius:8px;min-width:37px;height:37px;display:grid;place-items:center;font-variant-numeric:tabular-nums; }
#requestListMessage { padding:24px 0;color:var(--muted);font-size:13px;text-align:center; }
#requestDialog,#requestDetailDialog { color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:15px;width:min(1000px,calc(100% - 32px));max-height:90vh;padding:0; }
#requestDialog::backdrop,#requestDetailDialog::backdrop { background:rgb(15 25 40 / .45); }
.request-dialog-header { display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:5; }
.request-dialog-header h2 { margin:0;font-size:20px;font-weight:650; }
.request-dialog-body { padding:24px; }
#requestDialog #form { max-width:760px;margin:0 auto; }
#requestDialog .done { margin-bottom:12px; }
#backToRequests { display:block;margin:0 auto; }
@media(max-width:760px) {
  .request-tools { width:100%;flex-wrap:wrap; }
  #requestSearch { width:100%; }
  #addRequestBtn { margin-left:auto; }
  .request-pagination { flex-direction:column;align-items:flex-start; }
  .request-dialog-header { padding:16px; }
  .request-dialog-body { padding:16px; }
  .request-filters { flex-wrap:wrap; }
  .request-filters label { min-width:0;width:100%; }
}
:root[data-theme="dark"] { color-scheme:dark; }
.theme-control { display:flex;align-items:center;gap:8px;margin:0 0 0 auto;font-size:11px;color:var(--muted);white-space:nowrap; }
.theme-control select { width:100px;min-height:38px;padding:8px 10px;font-size:12px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:9px; }
.topbar-account { margin-left:0; }
@media(max-width:760px) {
  .topbar { height:auto;min-height:72px;flex-wrap:wrap; }
  .theme-control span { display:none; }
  .theme-control select { width:92px; }
  .topbar-account { width:100%; }
  #curUserEmail { max-width:100%; }
  .signed-out-label { display:none; }
}

.attachment-panel { margin:16px 0;padding:14px;border:1px solid var(--line);border-radius:10px;min-width:0; }
.attachment-panel h4 { margin:0 0 8px; }
.attachment-list { margin:8px 0;padding-left:20px; }
.attachment-list li { margin:8px 0;overflow-wrap:anywhere; }
.attachment-list input { display:block;max-width:100%;margin-top:8px; }
.attachment-panel a { color:var(--accent,#176bd1);overflow-wrap:anywhere; }
#driveSettingsDialog { width:min(620px,calc(100% - 32px));color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:0; }
#driveSettingsDialog::backdrop { background:rgb(15 25 40 / .45); }

.shopping-toolbar { display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0; }
.shopping-toolbar .hint { margin-right:auto; }
.shopping-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;max-height:290px;overflow:auto; }
.shopping-option { display:flex;gap:9px;align-items:flex-start;padding:8px;border:1px solid var(--line);border-radius:7px;cursor:pointer;min-width:0; }
.shopping-option span,.shopping-summary li { overflow-wrap:anywhere; }
.shopping-option input { margin:3px 0 0;flex:none; }
.shopping-summary ul { padding-left:20px;margin-bottom:0; }
@media(max-width:600px){.shopping-options{grid-template-columns:1fr;}.shopping-toolbar{align-items:stretch;}}