/* ============================================================================ HealthUp POS — Apple HIG redesign theme (design_handoff_healthup_pos_hig) Self-hosted IBM Plex Sans Thai (offline-safe) + design tokens (light/dark) + MudBlazor component overrides. Dark theme flips via [data-hig-theme="dark"] on (set by MainLayout through JS interop). ============================================================================ */ @font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibmplex/ibmplexthai-400-thai.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;} @font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibmplex/ibmplexthai-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibmplex/ibmplexthai-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibmplex/ibmplexthai-500-thai.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;} @font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibmplex/ibmplexthai-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibmplex/ibmplexthai-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibmplex/ibmplexthai-600-thai.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;} @font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibmplex/ibmplexthai-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibmplex/ibmplexthai-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ibmplex/ibmplexthai-700-thai.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;} @font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ibmplex/ibmplexthai-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'IBM Plex Sans Thai';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ibmplex/ibmplexthai-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* ---- Design tokens: LIGHT (default) ------------------------------------- */ :root { --bg: #F5F5F7; --card: #FFFFFF; --card-2: #FBFBFC; --text: #1D1D1F; --text2: #6E6E73; --text3: #86868B; --line: rgba(0,0,0,0.06); --line-strong: rgba(0,0,0,0.12); --fill: rgba(0,0,0,0.045); --sidebar: #FBFBFD; --header: rgba(255,255,255,0.80); --accent: #12A594; --accent-press: #0F8E7F; --accent-tint: #E3F4F2; --accent-weak: #F1FAF9; --accent-glow: rgba(18,165,148,0.22); --hig-error: #C4362B; --hig-warning: #FF9500; --hig-info: #0A84FF; --good: #1B9E6F; --good-tint: #E3F5EE; --danger-weak: #FFF0EF; --danger-line: #F2C7C2; --danger: #C4362B; --danger-tint: #FBE9E7; --warn: #C77700; --warn-tint: #FDF0DC; --info: #0A6CD6; --info-tint: #E4F0FC; --login-bg: linear-gradient(180deg, #F1F5F4 0%, #E6EFEC 100%); --shadow-sm: 0 1px 2px rgba(20,25,30,0.05); --shadow: 0 1px 2px rgba(20,25,30,0.04), 0 6px 20px rgba(20,25,30,0.06); --shadow-lg: 0 2px 6px rgba(20,25,30,0.06), 0 18px 44px rgba(20,25,30,0.12); --r-card: 16px; --r-ctl: 11px; --r-chip: 999px; --hig-font: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ---- Design tokens: DARK ------------------------------------------------- */ :root[data-hig-theme="dark"] { --bg: #151517; --card: #1E1E21; --card-2: #212125; --text: #F5F5F7; --text2: #C0C0C6; --text3: #98989F; --line: rgba(255,255,255,0.09); --line-strong: rgba(255,255,255,0.16); --fill: rgba(255,255,255,0.07); --sidebar: rgba(24,24,27,0.95); --header: rgba(30,30,33,0.80); --accent: #12A594; --accent-press: #2EB0A1; --accent-tint: #1B4441; --accent-weak: #1C3433; --accent-glow: rgba(0,60,40,0.45); --good: #35C08D; --good-tint: #16352B; --warn: #E9A23B; --warn-tint: #3A2E1A; --info: #57A9F5; --info-tint: #16283C; --danger: #E5645A; --danger-tint: #3A2320; --login-bg: linear-gradient(180deg, #121816 0%, #0C110F 100%); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.35); --shadow-lg: 0 2px 6px rgba(0,0,0,0.5), 0 18px 44px rgba(0,0,0,0.55); --danger-weak: rgba(196,54,43,0.14); --danger-line: rgba(196,54,43,0.42); } /* ---- Global typography: IBM Plex Sans Thai + tabular numerals ------------ */ html, body { font-family: var(--hig-font); background: var(--bg); color: var(--text); } body { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } :root { --mud-typography-default-family: var(--hig-font) !important; --mud-typography-h1-family: var(--hig-font) !important; --mud-typography-h2-family: var(--hig-font) !important; --mud-typography-h3-family: var(--hig-font) !important; --mud-typography-h4-family: var(--hig-font) !important; --mud-typography-h5-family: var(--hig-font) !important; --mud-typography-h6-family: var(--hig-font) !important; --mud-typography-subtitle1-family: var(--hig-font) !important; --mud-typography-subtitle2-family: var(--hig-font) !important; --mud-typography-body1-family: var(--hig-font) !important; --mud-typography-body2-family: var(--hig-font) !important; --mud-typography-button-family: var(--hig-font) !important; --mud-typography-caption-family: var(--hig-font) !important; --mud-typography-overline-family: var(--hig-font) !important; --mud-typography-input-family: var(--hig-font) !important; } /* ---- MudBlazor component overrides (HIG look) --------------------------- */ .mud-paper { border-radius: var(--r-card); } .mud-paper.mud-elevation-1 { box-shadow: var(--shadow); border: 1px solid var(--line); } .mud-paper.mud-elevation-2 { box-shadow: var(--shadow); border: 1px solid var(--line); } .mud-paper.mud-elevation-3, .mud-paper.mud-elevation-4 { box-shadow: var(--shadow-lg); border: 1px solid var(--line); } .mud-dialog { border-radius: var(--r-card); box-shadow: var(--shadow-lg); } .mud-button-root { border-radius: var(--r-ctl); text-transform: none; font-weight: 600; } .mud-icon-button { border-radius: var(--r-ctl); } .mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: var(--r-ctl); } .mud-input-outlined-border { border-color: var(--line); } .mud-chip { border-radius: var(--r-chip); font-weight: 600; } .mud-table-root { background: var(--card); } .mud-table-container .mud-table-head .mud-table-cell { color: var(--text3); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; background: var(--card-2); border-bottom: 1px solid var(--line); white-space: nowrap; } .mud-table-container .mud-table-row:hover { background: var(--accent-weak) !important; } .mud-table-container .mud-table-row.mud-selected-row, .mud-table-container .mud-table-row.mud-table-row-selected { background: var(--accent-weak) !important; } .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-tint); } /* ---- Sidebar nav (global — Item() builds nodes without the scoped attribute, so these must beat app.css `a { color:#006bb7 }` from here, not scoped css) --- */ .sidebar .nav-link { color: var(--text2); text-decoration: none; border-radius: 10px; padding: 0 11px; height: 2.5rem; display: flex; align-items: center; font-weight: 500; transition: background .12s ease, color .12s ease; } .sidebar .nav-link:hover { background: var(--fill); color: var(--text); text-decoration: none; } .sidebar .nav-link.active { background: var(--accent-tint); color: var(--accent); font-weight: 600; } .content { padding-top: 1.1rem; background: var(--bg); } /* ---- Segmented tabs (HIG): active = surface card + accent + shadow --------- */ .mud-tabs .mud-tabs-tabbar { background: var(--fill); border-radius: var(--r-ctl); padding: 4px; min-height: auto; border: none; } .mud-tabs .mud-tabs-tabbar-inner, .mud-tabs .mud-tabs-tabbar-content, .mud-tabs .mud-tabs-tabbar-wrapper { min-height: auto; } .mud-tabs .mud-tab { border-radius: 8px; text-transform: none; min-height: 34px; padding: 0 14px; color: var(--text2); font-weight: 600; min-width: 0; } .mud-tabs .mud-tab.mud-tab-active { background: var(--card); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .mud-tabs .mud-tab-slider { display: none !important; } /* ---- Destructive confirm panel (HIG): red-tinted inline panel + reason ----- */ .hig-danger-panel { background: var(--danger-weak) !important; border: 1px solid var(--danger-line) !important; box-shadow: none !important; } /* ---- Sidebar nav icons (leading glyph per item) -------------------------- */ .sidebar .nav-link { gap: 11px; } .sidebar .nav-ico { display: inline-flex; width: 18px; height: 18px; flex: none; opacity: 0.8; } .sidebar .nav-ico svg { width: 18px; height: 18px; } .sidebar .nav-link.active .nav-ico { opacity: 1; } /* ---- Status chips (tables / dashboard) ----------------------------------- */ .hig-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: var(--r-chip); line-height: 1.4; white-space: nowrap; } .hig-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .hig-chip.ok { background: var(--good-tint); color: var(--good); } .hig-chip.void { background: var(--danger-tint); color: var(--danger); } .hig-chip.wait { background: var(--warn-tint); color: var(--warn); } .hig-chip.info { background: var(--info-tint); color: var(--info); } /* ---- Dashboard KPI + panels ---------------------------------------------- */ .dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .dash-2col { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; } @media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } .dash-2col { grid-template-columns: 1fr; } } @media (max-width: 640px) { .dash-grid { grid-template-columns: 1fr; } } .kpi { padding: 16px 18px 14px; display: flex; flex-direction: column; } .kpi-top { display: flex; align-items: center; justify-content: space-between; } .kpi-lbl { font-size: 0.8rem; color: var(--text2); font-weight: 500; } .kpi-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; } .kpi-ico svg { width: 18px; height: 18px; } .kpi-val { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 10px; line-height: 1.1; } .kpi-val small { font-size: 0.85rem; color: var(--text3); font-weight: 600; } .kpi-delta { font-size: 0.75rem; font-weight: 600; margin-top: 5px; color: var(--text3); } .kpi-delta.up { color: var(--good); } .kpi-delta.down { color: var(--danger); } .kpi-ico.a { background: var(--accent-tint); color: var(--accent); } .kpi-ico.i { background: var(--info-tint); color: var(--info); } .kpi-ico.g { background: var(--good-tint); color: var(--good); } .kpi-ico.w { background: var(--warn-tint); color: var(--warn); } .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px 12px; border-bottom: 1px solid var(--line); } .panel-head h3 { margin: 0; font-size: 0.95rem; font-weight: 700; } .panel-head a { color: var(--accent); font-size: 0.8rem; font-weight: 600; text-decoration: none; } .panel-head a:hover { text-decoration: underline; } .bar-row .bar-track { height: 7px; background: var(--fill); border-radius: 99px; overflow: hidden; } .bar-row .bar-fill { height: 100%; background: var(--accent); border-radius: 99px; } /* ---- Page heading rhythm ------------------------------------------------- */ .hig-page-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .hig-page-sub { color: var(--text2); font-size: 0.86rem; margin-top: 2px; } /* ---- Plain HIG table (dashboard + lists) --------------------------------- */ .hig-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; } .hig-table thead th { text-align: left; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text3); padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--card-2); white-space: nowrap; } .hig-table tbody td { padding: 11px 20px; border-bottom: 1px solid var(--line); } .hig-table tbody tr:last-child td { border-bottom: 0; } .hig-table tbody tr:hover { background: var(--accent-weak); } .hig-table .num, .hig-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .hig-table .docno { font-weight: 600; letter-spacing: -0.01em; } .hig-table .muted { color: var(--text3); } .hig-empty { text-align: center; color: var(--text3); padding: 34px 0; }