/* The app's frame: the sizes the dashboard page uses (the claude.ai dashboard's tokens, from its Whitman "look"),
   the sign-in bar above the page, the sign-in page and the Upload Data page. The page's own styles are in page.css. */
:root {
  --cds-font-size-body: 14px; --cds-font-size-caption: 12px; --cds-font-size-heading: 16px; --cds-font-size-title: 24px;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 16px; --cds-gap-lg: 24px;
  --cds-pad-md: 12px; --cds-pad-lg: 16px; --cds-pad-xl: 24px; --cds-dur-slow: .4s;
  --s-bg: #F4F6FA; --s-panel: #FFFFFF; --s-fg: #071842; --s-muted: #55647D; --s-line: #DDE3EE; --s-brand: #021B66;
  --s-accent: #1C9EEF; --s-ok: #1B7F3B; --s-bad: #C62828; --s-soft: #EAF0FA;
  --s-font: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}
html[data-theme="dark"] {
  --s-bg: #0E1627; --s-panel: #162136; --s-fg: #E8EEF8; --s-muted: #9DACC4; --s-line: #283550; --s-brand: #6F9BFF;
  --s-accent: #4FC3F7; --s-ok: #5CCB7B; --s-bad: #F27C7C; --s-soft: #1B2A45;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--s-bg); color: var(--s-fg); font-family: var(--s-font); font-size: 14px; }
[hidden] { display: none !important; }

/* sign-in bar and notice above the dashboard */
.shell-bar { display: flex; justify-content: flex-end; align-items: center; gap: 16px; max-width: 1440px; margin: 0 auto;
             padding: 8px clamp(16px, 3vw, 40px) 0; font-size: 12px; color: var(--s-muted); }
.shell-link { color: var(--s-brand); font-weight: 700; text-decoration: none; }
html[data-theme="dark"] .shell-link { color: var(--s-accent); }
.shell-link:hover { text-decoration: underline; }
.shell-msg { max-width: 1440px; margin: 8px auto 0; padding: 10px clamp(16px, 3vw, 40px); color: var(--s-bad); font-size: 13px; }
/* overflow clip: hidden ⓘ tooltips at the right edge must not widen the page (shown ones are moved inside it) */
#dash-root { max-width: 1440px; margin: 0 auto; padding: 4px 0 24px; overflow-x: clip; }
/* loading placeholders are styled by the page (page.css: a soft shimmer) */

/* sign-in page */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login .card, .admin { background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 12px;
                       box-shadow: 0 10px 30px rgba(2, 27, 102, .08); }
.login .card { width: min(360px, 100%); padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.login img { width: 140px; height: auto; align-self: center; }
.login h1 { margin: 4px 0 0; font-size: 22px; text-align: center; }
.login .login-sub { margin-top: -6px; text-align: center; }
.muted { color: var(--s-muted); margin: 0; font-size: 13px; }
#pw { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.login label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--s-muted); }
.login input:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 1px; }
.login input, .admin input[type="file"] { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--s-line);
                            border-radius: 8px; background: var(--s-bg); color: var(--s-fg); }
.btn { font: inherit; font-weight: 700; border: 0; border-radius: 8px; padding: 9px 16px; cursor: pointer;
       background: var(--s-brand); color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }
.msg { margin: 0; color: var(--s-bad); font-size: 13px; }
.msg.ok { color: var(--s-ok); }

/* Home: choose the Sales Report or the Commission Report (as the SRIM / ORIM chooser: navy, two white cards). Card
   rules stay under .home-cards: the dashboard's table rows also use the class "pick" */
body.home-page { min-height: 100vh; background: linear-gradient(135deg, #122952, #1B3A6B 55%, #2B9FD8); }
.home { min-height: 100vh; max-width: 860px; margin: 0 auto; padding: 32px 16px; display: flex; flex-direction: column;
        justify-content: center; gap: 26px; }
.home-head { text-align: center; color: #fff; }
.home-logo { display: inline-flex; background: #fff; border-radius: 14px; padding: 8px 12px; margin-bottom: 14px;
             box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.home-logo img { width: 96px; height: auto; display: block; }
.home-head .sub { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: #9BD3F0; }
.home-head h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 30px; font-weight: 600; margin: 6px 0 0; }
.home-head p { font-size: 14px; opacity: .82; margin: 8px 0 0; }
.home-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.home-cards .pick { display: flex; flex-direction: column; text-decoration: none; background: rgba(255, 255, 255, .96); border-radius: 16px;
        padding: 26px; min-height: 250px; box-shadow: 0 20px 60px rgba(27, 58, 107, .28); border: 2px solid transparent;
        transition: transform .18s, border-color .18s, box-shadow .18s; }
.home-cards .pick:hover { transform: translateY(-3px); border-color: #2B9FD8; box-shadow: 0 26px 70px rgba(27, 58, 107, .36); }
.home-cards .pick:focus-visible { outline: 3px solid #9BD3F0; outline-offset: 3px; }
.home-cards .pick h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 26px; color: #122952; margin: 0 0 4px; font-weight: 600; }
.home-cards .pick .full { font-size: 13px; color: #2A3F5F; font-weight: 600; }
.home-cards .pick .desc { font-size: 13.5px; color: #4A5C74; line-height: 1.55; margin: 12px 0 0; }
.home-cards .pick .ctype { margin: 14px 0 18px; display: flex; align-items: center; gap: 9px; background: #EAF3FB;
               border-left: 3px solid #1B3A6B; border-radius: 8px; padding: 10px 12px; }
.home-cards .pick.commission .ctype { border-left-color: #2B9FD8; }
.home-cards .pick .ic { width: 18px; height: 18px; flex: none; fill: none; stroke: #1B3A6B; stroke-width: 2.2; stroke-linecap: round;
            stroke-linejoin: round; }
.home-cards .pick.commission .ic { stroke: #2B9FD8; }
.home-cards .pick .val { font-size: 14px; font-weight: 700; color: #122952; }
.home-cards .pick .go { align-self: flex-end; margin-top: auto; padding: 10px 18px; border-radius: 8px; background: #1B3A6B; color: #fff;
            font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.home-cards .pick.commission .go { background: #2B9FD8; }
.home-foot { text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.home-foot b { color: #fff; }
.home-foot a { color: rgba(255, 255, 255, .85); text-decoration: underline; }
.home-foot a:hover { color: #fff; }
@media (max-width: 680px) { .home-cards { grid-template-columns: 1fr; } .home-head h1 { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .home-cards .pick { transition: none; } .home-cards .pick:hover { transform: none; } }

/* Upload Data page */
.admin-wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.admin-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-top img { width: 120px; height: auto; }
.admin-top .sp { flex: 1 1 auto; }
.admin { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.admin h1 { margin: 0; font-size: 22px; }
.admin h2 { margin: 0; font-size: 16px; }
.admin ol { margin: 0; padding-left: 20px; color: var(--s-muted); font-size: 13px; line-height: 1.6; }
.admin .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ok { margin: 0; color: var(--s-ok); font-weight: 700; }
.ok::before { content: "\2713"; display: inline-block; margin-right: 6px; }
/* upload progress, then the tick pops in */
.pg { height: 8px; border-radius: 4px; background: var(--s-soft); overflow: hidden; }
.pg i { display: block; height: 100%; width: 0; background: var(--s-ok); transition: width .3s ease-out; }
@media (prefers-reduced-motion: no-preference) {
  .ok.pop { animation: s-pop .38s cubic-bezier(.2, .7, .2, 1); }
  @keyframes s-pop { from { opacity: 0; transform: scale(.85); } 70% { opacity: 1; transform: scale(1.04); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .pg i { transition: none; } }
.bad { margin: 0; color: var(--s-bad); }
.bad ul { margin: 4px 0 0; padding-left: 20px; }
.files { width: 100%; border-collapse: collapse; font-size: 13px; }
.files th, .files td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--s-line); }
.files th { color: var(--s-muted); font-size: 12px; }
.files td.num, .files th.num { text-align: right; font-variant-numeric: tabular-nums; }