/* ========================================================================== sendmn-ui.css — SendmnOffice v3 design system -------------------------------------------------------------------------- Ported from the Claude Design prototype "SendmnOffice v3 (all pages)". The prototype computed every colour in JS and emitted inline styles. That does not survive a move to Razor, so the same values live here as CSS custom properties with a [data-theme="dark"] override on . Everything is prefixed `sm-` and no bare element selectors are used, so this can sit alongside Bootstrap 3 / AdminLTE / DevExtreme without fighting them. Where we DO have to beat Bootstrap (tables, buttons) the specificity is raised deliberately and commented. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* surfaces */ --sm-bg: #f5f7fa; --sm-panel: #ffffff; --sm-panel2: #f7f9fc; --sm-head: #f7f9fc; /* borders — bd is structural, bd2 is the lighter row divider */ --sm-bd: #e8ebf0; --sm-bd2: #f0f2f6; /* text ramp: tx primary, tx2 secondary, tx3 muted/labels */ --sm-tx: #0f1728; --sm-tx2: #5a6474; --sm-tx3: #98a0ae; --sm-sh: 0 1px 2px rgba(16, 24, 40, .05); --sm-sh-pop: 0 14px 34px rgba(8, 14, 26, .14); --sm-sh-notif: 0 22px 60px rgba(15, 23, 40, .22); /* accent */ --sm-acc: #1a6fd4; --sm-acc-dk: #12539f; --sm-accbg: #eaf2fe; --sm-hover: #f2f5f9; /* Hover lift for a surface that already carries a tone — laid over the tone as a gradient so one token covers every tint. Darkens in light mode, lightens in dark, which is the direction "raised" reads as in each. --sm-hover only works for untinted rows; this is its counterpart. */ --sm-lift: rgba(16, 24, 40, .05); /* tone pairs — background / foreground. Re-saturated 2026-08-07: the first set sat ΔE2000 3–8 from plain white, so a tinted row read as "slightly off-white" rather than as a colour, and the two tints that matter most to tell apart — pending purple against approved blue — were only 6.4 apart. Chroma is roughly doubled at the same lightness, which puts every tint 11–14 from white and every pair at 7 or more (pending vs approved is now 10.7). The foregrounds are unchanged except --sm-nw-fg: the stronger blue tint dropped its badge text to 3.9:1, under AA, so it goes one step deeper for 4.9:1. It is only ever used as a text colour; --sm-acc still carries the button blue. */ --sm-nw-bg: #d7e7fd; --sm-nw-fg: #1560bd; --sm-ok-bg: #d9f2e3; --sm-ok-fg: #1f7a44; --sm-bad-bg: #fcdcd8; --sm-bad-fg: #b42318; --sm-wn-bg: #fdeccc; --sm-wn-fg: #95590a; /* Purple — a leave request nobody has decided yet. Red and blue mixed, which is exactly what the state is: not yet resolved into declined or approved. Only the two outcomes get a pure hue. */ --sm-pd-bg: #e6dffc; --sm-pd-fg: #5b3fc4; --sm-mt-bg: #e9ecf2; --sm-mt-fg: #5a6474; /* Teal — Илүү цаг and Бүх нийтийн амралт, i.e. "this day is not ordinary work". A type, not a status, so it deliberately sits outside the red → purple → blue status progression below. Held midway between --sm-nw and --sm-ok: pushed toward either one it stops being its own colour. Amber is never free for any of this — it means Хоцорсон / Эрт тарсан and is in the Цаг legend under that meaning. */ --sm-tl-bg: #d3ecf0; --sm-tl-fg: #0e6b74; /* tone borders, used by the approve/decline row buttons and by the status-tinted request cards on Цагийн хүсэлт. Deepened alongside the tints above: against the old borders the new fills left only ΔE 1.7–3.6, so the outline all but vanished. These hold ΔE 7–8 from their own fill, which is where the original pairs sat. */ --sm-ok-bd: #b3ddc4; --sm-bad-bd: #f3bdb6; --sm-nw-bd: #b3d3fa; --sm-pd-bd: #cdc0f6; --sm-tl-bd: #aedde4; /* the "already punched" chip — a slightly warmer green than --sm-ok */ --sm-punch-done-bg: #eaf7ef; --sm-punch-done-fg: #1c7a48; --sm-punch-done-bd: #bfe3cd; /* The two big punch buttons get their own pair rather than borrowing --sm-ok / --sm-bad: those are shared by every badge in the app, and these need to be tuned for a large solid area without dragging the badges along with them. Light mode keeps the soft tints. */ --sm-punch-in-bg: #eaf7ef; --sm-punch-in-bd: #bfe3cd; --sm-punch-in-fg: #1c7a48; --sm-punch-out-bg: #fdeeec; --sm-punch-out-bd: #f5cfcb; --sm-punch-out-fg: #b42318; /* calendar day tints */ --sm-cal-work: #fbfcfe; --sm-cal-late: #fffdf7; --sm-cal-late-bd: #f2e6cc; /* Holiday / Илүү цаг day wash — teal, following the tone but NOT equal to it: the day washes below are a separate family, kept quieter than the badge tints because seven of them sit side by side in a week with text on top. It was held near the old --sm-tl-bg rather than washed out the way the purple it replaced was — teal and the green "worked" cell are neighbouring hues, so a paler teal collapses into it (ΔE 2.7 at #f1fafb). This clears every neighbouring cell state by ≥5, including the blue leave wash the old purple only managed 2.9 against. The 2026-08-07 re-saturation deliberately stopped at the tones and left this family alone; the chips ON the cells carry the stronger colour. */ --sm-cal-hol: #e2f5f9; --sm-cal-hol-bd: #c8e6ea; --sm-cal-off: #f6f8fb; --sm-cal-weekend: #f7f8fa; /* A finished day with nothing wrong, and the two request outcomes. Washes rather than fills: seven of these sit side by side in a week, so the tint has to name the day without shouting over the text on it. */ --sm-cal-done: #f4fbf7; --sm-cal-done-bd: #cdead6; --sm-cal-leave: #f2f7fe; --sm-cal-leave-bd: #cfe2fb; --sm-cal-rej: #fdf4f3; --sm-cal-rej-bd: #f5cfcb; /* status dots on calendar cells */ --sm-dot-ok: #5cb488; --sm-dot-wn: #e0a53c; --sm-dot-nw: #6fa8e8; --sm-dot-bad: #e08078; --sm-dot-mt: #cfd5df; --sm-dot-tl: #4fb3bd; --sm-dot-pd: #9b87e0; /* input surface inside data tables */ --sm-inp-bg: #ffffff; --sm-inp-td-bg: #fcfdff; /* geometry */ --sm-side-w: 248px; --sm-side-w-collapsed: 64px; --sm-topbar-h: 64px; --sm-cell-y: 13px; --sm-cell-x: 14px; --sm-th-y: 12px; --sm-scroll: rgba(120, 132, 155, .4); --sm-scroll-hover: rgba(120, 132, 155, .62); color-scheme: light; } /* Dark theme. Set by the toggle in the topbar (writes data-theme on and mirrors it to localStorage). */ :root[data-theme="dark"] { --sm-bg: #0e131c; --sm-panel: #151c28; --sm-panel2: #1b2431; --sm-head: #1b2431; --sm-bd: #252f3f; --sm-bd2: #1f2836; /* The light thumb is a translucent grey that composites to about #3d4656 over a panel — against a dark surface that reads as a bright bar. These are solid and a couple of steps down from it: still clearly a scrollbar, no longer the brightest thing on the card. */ --sm-scroll: #2b3546; --sm-scroll-hover: #3b4759; --sm-tx: #e8ecf3; --sm-tx2: #a3adbe; --sm-tx3: #6f7b8e; --sm-sh: 0 1px 2px rgba(0, 0, 0, .5); --sm-sh-pop: 0 14px 34px rgba(8, 14, 26, .6); --sm-accbg: #16304f; --sm-hover: #1e2836; --sm-lift: rgba(255, 255, 255, .05); --sm-nw-bg: #16304f; --sm-nw-fg: #7db4f5; --sm-ok-bg: #123024; --sm-ok-fg: #5fcf92; --sm-bad-bg: #3a1a17; --sm-bad-fg: #f0938a; --sm-wn-bg: #3a2b12; --sm-wn-fg: #e0b45c; --sm-pd-bg: #241f47; --sm-pd-fg: #a996f0; --sm-mt-bg: #222b39; --sm-mt-fg: #a3adbe; --sm-tl-bg: #10333a; --sm-tl-fg: #63cad6; --sm-ok-bd: #1d4a32; --sm-bad-bd: #52251f; --sm-nw-bd: #2b4a63; --sm-pd-bd: #3a3068; --sm-tl-bd: #1d525c; --sm-punch-done-bg: #16321f; --sm-punch-done-fg: #7fd6a2; --sm-punch-done-bd: #2c5a3f; /* Dark mode runs these considerably richer than the badge tints — a large button needs real colour to read against the dark surface, where a subtle wash just looks grey. Ирсэн is a brighter, greener green; Явсан a deep apple red, so the pair separates at a glance. */ --sm-punch-in-bg: #123f26; --sm-punch-in-bd: #2f8a52; --sm-punch-in-fg: #6ff0a5; --sm-punch-out-bg: #571712; --sm-punch-out-bd: #932c22; --sm-punch-out-fg: #ffa094; --sm-cal-work: #131b26; --sm-cal-late: #221b12; --sm-cal-late-bd: #4a3a1c; --sm-cal-hol: #10333a; --sm-cal-hol-bd: #1d525c; --sm-cal-off: #1a2331; --sm-cal-weekend: #141a23; --sm-cal-done: #10241a; --sm-cal-done-bd: #1d4a32; --sm-cal-leave: #121f31; --sm-cal-leave-bd: #2b4a63; --sm-cal-rej: #291614; --sm-cal-rej-bd: #52251f; --sm-dot-ok: #3f9c68; --sm-dot-wn: #b98a2e; --sm-dot-nw: #3d7ab8; --sm-dot-bad: #b0554b; --sm-dot-mt: #3a4553; --sm-dot-tl: #35848d; --sm-dot-pd: #6f5fb8; --sm-inp-bg: #0f1620; --sm-inp-td-bg: #131b26; color-scheme: dark; } /* Compact tables. Toggled from the topbar; the class goes on . */ :root[data-density="dense"] { --sm-cell-y: 8px; --sm-th-y: 9px; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ .sm-app, .sm-app input, .sm-app select, .sm-app textarea, .sm-app button { font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; } .sm-app { background: var(--sm-bg); color: var(--sm-tx); } .sm-app a { color: var(--sm-acc); text-decoration: none; } .sm-app a:hover, .sm-app a:focus { color: var(--sm-acc-dk); text-decoration: none; } /* Thin scrollbars everywhere inside the app shell. */ .sm-app *::-webkit-scrollbar { height: 9px; width: 9px; } .sm-app *::-webkit-scrollbar-thumb { background: var(--sm-scroll); border-radius: 9px; } .sm-app *::-webkit-scrollbar-thumb:hover { background: var(--sm-scroll-hover); } .sm-app *::-webkit-scrollbar-track { background: transparent; } @keyframes sm-fadeup { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .sm-fadeup { animation: sm-fadeup .3s ease both; } /* -------------------------------------------------------------------------- 3. Shell — sidebar + main column -------------------------------------------------------------------------- */ .sm-shell { height: 100vh; display: flex; background: var(--sm-bg); overflow: hidden; } .sm-side { width: var(--sm-side-w); flex: 0 0 var(--sm-side-w); display: flex; flex-direction: column; background: var(--sm-panel); border-right: 1px solid var(--sm-bd); padding: 14px 12px 12px; box-sizing: border-box; transition: width .18s ease, flex-basis .18s ease; } /* Collapsed state is driven by data-side on rather than a class on the element itself, so _LoginLayout's head script can restore it before first paint — a class added after DOMContentLoaded makes the sidebar visibly snap from 248px to 64px on every navigation. */ :root[data-side="collapsed"] .sm-side { width: var(--sm-side-w-collapsed); flex-basis: var(--sm-side-w-collapsed); padding-left: 8px; padding-right: 8px; /* the toggle button is hidden at 64px, so the strip itself is what you click to get back — see the expand handler in _Layout */ cursor: pointer; } /* brand */ .sm-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; } .sm-brand-mark { width: 32px; height: 32px; border-radius: 9px; background: #0f1728; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sm-brand-mark img { width: 19px; height: 23px; object-fit: contain; } .sm-brand-name { font-size: 14.5px; font-weight: 600; color: var(--sm-tx); letter-spacing: -.01em; white-space: nowrap; } .sm-side-toggle { margin-left: auto; width: 28px; height: 28px; border: none; border-radius: 8px; background: transparent; color: var(--sm-tx3); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; } .sm-side-toggle svg { transition: transform .18s ease; } :root[data-side="collapsed"] .sm-side-toggle svg { transform: rotate(180deg); } :root[data-side="collapsed"] .sm-brand { justify-content: center; padding-bottom: 14px; } :root[data-side="collapsed"] .sm-brand-name, :root[data-side="collapsed"] .sm-side-toggle { display: none; } /* nav */ .sm-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; flex: 1; margin: 0 -4px; padding: 0 4px; list-style: none; } .sm-nav-foot { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--sm-bd); } /* One row in the sidebar — used for both links and