/* ========================================================================== ธีมใหม่ (Redesign 2569) — Modern SaaS + โทน Executive แดงเข้ม-ทอง ใช้แทน public/css/style.css เดิมได้ทันที (class names เดิมทั้งหมด) เปลี่ยนธีมสีทั้งระบบ: ใส่ data-theme="navy" | "green" | "purple" | "modern" ที่ ("modern" = แนว 1a Modern SaaS: เมนูข้างสีขาว พื้นหลังครีมอ่อน accent แดงสด) ========================================================================== */ :root { --side-1: #5f0c18; /* sidebar gradient บน */ --side-2: #7a0f1f; /* sidebar gradient ล่าง */ --primary: #7a0f1f; --primary-dark: #5f0c18; --primary-light: #a8162c; --gold: #d8a94e; --gold-light: #ecd8a4; --danger: #c0392b; --warn: #b2842f; --bg: #fbf6ec; --card: #ffffff; --border: #e4d3ae; --border-soft: #f0e5cc; --text: #2a2320; --muted: #8a6416; --muted-2: #7d7261; --success: #2e7d4f; --font-display: "IBM Plex Sans Thai", "Noto Sans Thai", -apple-system, "Segoe UI", Tahoma, sans-serif; } body[data-theme="navy"] { --side-1:#0d2b4e; --side-2:#123c66; --primary:#123c66; --primary-dark:#0d2b4e; --primary-light:#1c568f; } body[data-theme="green"] { --side-1:#123f2e; --side-2:#1a5d3a; --primary:#1a5d3a; --primary-dark:#123f2e; --primary-light:#2e7d4f; } body[data-theme="purple"] { --side-1:#2f2352; --side-2:#463579; --primary:#463579; --primary-dark:#2f2352; --primary-light:#5b4a9b; } /* ---- ธีม "modern" (1a Modern SaaS): เมนูข้างขาว ตัวหนังสือเข้ม ---- */ body[data-theme="modern"] { --side-1: #ffffff; --side-2: #ffffff; --primary: #8f1424; --primary-dark: #7a0f1f; --primary-light: #b01c30; --bg: #faf9f7; --border: #eee6d8; --border-soft: #f0e9dc; --muted: #9a8f83; --muted-2: #8a8072; } body[data-theme="modern"] aside.sidebar { color: #5c554d; border-right: 1px solid var(--border); } body[data-theme="modern"] .brand-name { color: var(--text); } body[data-theme="modern"] .brand-caption { color: var(--muted); } body[data-theme="modern"] .sidebar-brand img.logo { border-color: var(--border); } body[data-theme="modern"] .sidebar-divider { border-top-color: var(--border-soft); } body[data-theme="modern"] .nav-item { color: #5c554d; } body[data-theme="modern"] .nav-item:hover { background: var(--bg); color: var(--text); } body[data-theme="modern"] .nav-item.active { background: var(--primary); color: #fff; } body[data-theme="modern"] .nav-item.active .nav-icon { color: #fff; } body[data-theme="modern"] .nav-badge { background: var(--danger); color: #fff; } body[data-theme="modern"] .sidebar-footer { border-top-color: var(--border-soft); } body[data-theme="modern"] .user-avatar { background: var(--gold-light); color: var(--primary-dark); } body[data-theme="modern"] .user-name { color: var(--text); } body[data-theme="modern"] .user-name small { color: var(--muted); } body[data-theme="modern"] .logout-btn { background: #fff; border: 1px solid var(--border); color: #5c554d; } body[data-theme="modern"] .logout-btn:hover { background: var(--bg); color: var(--text); } body[data-theme="modern"] header.topbar-mobile { background: #fff; color: var(--text); border-bottom: 1px solid var(--border); } body[data-theme="modern"] .menu-toggle { background: var(--bg); color: var(--text); } body[data-theme="modern"] .info-modal-header { background: var(--primary); } * { box-sizing: border-box; } @keyframes fadeInUp { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} } @keyframes popIn { from { opacity:0; transform:scale(0.96);} to { opacity:1; transform:scale(1);} } @keyframes fadeIn { from { opacity:0;} to { opacity:1;} } body { margin: 0; font-family: "IBM Plex Sans Thai", -apple-system, "Segoe UI", "Noto Sans Thai", Tahoma, sans-serif; background: var(--bg); color: var(--text); } /* ---- ขนาดตัวอักษร/การแสดงผลทั้งระบบ (ตั้งค่าในหน้า "ตั้งค่า") ---- ดีไซน์ทั้งไฟล์ใช้หน่วย px การปรับ root font-size จึงไม่ขยาย UI — ใช้ `zoom` ขยายทั้งชุด (ตัวอักษร+ระยะ+ไอคอน) ตามสัดส่วน. Chromium/Edge (ที่แอปรันเป็น PWA) รองรับเต็ม. 'normal' ไม่มีกฎ = zoom ปกติ. หน้าเอกสาร (doc-*.ejs) มี ของตัวเองไม่มี data-font จึงไม่โดน. */ body[data-font="small"] { zoom: 0.9; } body[data-font="large"] { zoom: 1.15; } body[data-font="xlarge"] { zoom: 1.3; } ::selection { background: var(--gold-light); color: var(--primary-dark); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* ---- Mobile top bar ---- */ header.topbar-mobile { display: none; background: linear-gradient(135deg, var(--side-1), var(--side-2)); color: #fff; padding: 10px 14px; align-items: center; gap: 12px; border-bottom: 2px solid var(--gold); position: sticky; top: 0; z-index: 30; } .menu-toggle { display: none; background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 18px; padding: 6px 12px; border-radius: 8px; cursor: pointer; margin-top: 0; } .topbar-mobile-brand { font-weight: 700; font-size: 14px; } .doc-guide-fab { position: fixed; top: 14px; right: 16px; z-index: 70; width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform 0.15s ease, box-shadow 0.15s ease; } .doc-guide-fab:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 4px 14px rgba(0,0,0,0.35); color: #fff; opacity: 1; } @media (max-width: 720px) { .doc-guide-fab { top: 8px; right: 10px; width: 36px; height: 36px; font-size: 16px; } } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(20,15,10,0.45); z-index: 40; } .sidebar-overlay.show { display: block; } /* ---- App shell / sidebar (ใหม่: เข้มไล่เฉด + accent ทอง) ---- */ .app-shell { display: flex; align-items: stretch; } aside.sidebar { background: linear-gradient(180deg, var(--side-1), var(--side-2)); border-right: none; flex-shrink: 0; width: 260px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; color: rgba(255,255,255,0.78); } aside.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); } .sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 20px 18px 16px; } .sidebar-brand img.logo { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--gold); object-fit: cover; flex-shrink: 0; background: #fff; transition: transform 0.35s ease; } .sidebar-brand img.logo:hover { transform: rotate(-8deg) scale(1.08); } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; line-height: 1.3; } .brand-caption { font-size: 10.5px; color: var(--gold); margin-top: 2px; } .sidebar-divider { border: none; border-top: 1px solid rgba(216,169,78,0.25); margin: 0 18px; } .sidebar-divider-tight { margin: 8px 18px; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: rgba(255,255,255,0.78); font-weight: 500; font-size: 13.5px; white-space: nowrap; border-left: none; transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; } .nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; transform: translateX(2px); opacity: 1; } .nav-item.active { background: color-mix(in srgb, var(--gold) 20%, transparent); border-left: none; color: #fff; font-weight: 600; } .nav-item.active .nav-icon { color: var(--gold); } .nav-badge { margin-left: auto; background: var(--gold); color: var(--side-1); font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; flex-shrink: 0; animation: badgePulse 1.6s ease-in-out infinite; } @keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(216,169,78,0.45); } 50% { box-shadow: 0 0 0 6px rgba(216,169,78,0); } } /* ไอคอน: รองรับทั้ง SVG (nav.ejs ใหม่) และอีโมจิเดิม — พื้นหลัง chip ถูกถอดออก */ .nav-icon { width: 22px; height: 22px; border-radius: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; color: currentColor; background: none !important; } .nav-icon svg { width: 17px; height: 17px; } .chip-green, .chip-amber, .chip-red, .chip-blue, .chip-purple, .chip-teal, .chip-gray, .chip-indigo, .chip-rose, .chip-yellow { background: none; } .sidebar-footer { padding: 14px 16px 16px; border-top: 1px solid rgba(216,169,78,0.25); } .user-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--side-1); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; font-weight: 700; } .user-name { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.4; } .user-name small { display: block; font-weight: 400; color: var(--gold); font-size: 10.5px; text-transform: capitalize; } .logout-btn { width: 100%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); border-radius: 9px; padding: 9px; font-weight: 600; font-size: 12.5px; margin-top: 0; box-shadow: none; } .logout-btn:hover { background: rgba(255,255,255,0.16); color: #fff; transform: none; box-shadow: none; } main { max-width: 900px; margin: 0 auto; padding: 16px; } .app-shell main { margin: 0; flex: 1; min-width: 0; padding: 24px 28px; } @media (max-width: 768px) { header.topbar-mobile { display: flex; } .menu-toggle { display: inline-flex; align-items: center; } .app-shell { display: block; } aside.sidebar { position: fixed; top: 0; left: -280px; width: 260px; height: 100vh; height: 100dvh; /* dvh = ความสูงจอจริงบนมือถือ กัน logout ตกใต้แถบเบราว์เซอร์ */ overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 50; transition: left 0.3s ease; box-shadow: 4px 0 24px rgba(0,0,0,0.3); } aside.sidebar.open { left: 0; } .app-shell main { padding: 14px; } .card { overflow-x: auto; } .card table { min-width: 480px; } h1 { font-size: 18px; } .balance { font-size: 26px; } .stat .value { font-size: 16px; } form > button:last-child { display: block; width: 100%; text-align: center; } } /* ---- Cards / type ---- */ .card { background: var(--card); border: 1px solid var(--border); border-top: 1px solid var(--border); /* ถอดแถบทองบนการ์ดเดิม */ border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; box-shadow: none; transition: box-shadow 0.25s ease; animation: fadeInUp 0.35s ease; } .card:hover { box-shadow: 0 4px 14px rgba(42,35,32,0.08); } h1 { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; color: var(--text); letter-spacing: -0.2px; } h2 { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin: 0 0 10px; color: var(--text); } label { display: block; font-size: 12.5px; font-weight: 600; color: #5c554d; margin: 14px 0 5px; } input[type=text], input[type=number], input[type=password], input[type=date], select, textarea { width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; font-size: 14px; font-family: inherit; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); } input[type=file] { width: 100%; } textarea { resize: vertical; min-height: 60px; } button, .btn { display: inline-block; border: none; background: var(--primary); color: #fff; padding: 10px 20px; border-radius: 9px; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; margin-top: 12px; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease; box-shadow: none; } button.danger, .btn.danger { background: var(--danger); } button.secondary, .btn.secondary { background: #fff; color: var(--primary); border: 1px solid var(--border); } button:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 25%, transparent); } button:active, .btn:active { transform: translateY(0); box-shadow: none; } button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 520px) { .grid-2 { grid-template-columns: 1fr; } } /* ---- Tables ---- */ table { width: 100%; border-collapse: collapse; font-size: 12.5px; } th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; } th { color: var(--muted); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; } tbody tr { transition: background 0.15s ease; } tbody tr:hover { background: var(--bg); } /* ---- Badges (ถอดอีโมจินำหน้า — ใช้สีอย่างเดียว) ---- */ .badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 10.5px; font-weight: 600; animation: popIn 0.25s ease; } .badge.pending { background: #fdf3e0; color: var(--warn); } .badge.approved { background: #e8f3ec; color: var(--success); } .badge.rejected { background: #fbe9e7; color: var(--danger); } .badge.voided { background: #eee9dd; color: var(--muted-2); } .badge.pending::before, .badge.approved::before, .badge.rejected::before, .badge.voided::before { content: ""; } .balance { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--primary-dark); letter-spacing: -0.4px; } .balance small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); } .stat-row { display: flex; gap: 14px; flex-wrap: wrap; } .stat { flex: 1; min-width: 150px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card .stat { background: var(--bg); border: 1px solid var(--border-soft); } .stat:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(42,35,32,0.08); } .stat .label { font-size: 11.5px; color: var(--muted); font-weight: 500; } .stat .value { font-size: 19px; font-weight: 700; margin-top: 4px; letter-spacing: -0.3px; } .error-box { background: #fbe9e7; color: var(--danger); padding: 10px 14px; border-radius: 9px; margin-bottom: 12px; font-size: 13.5px; animation: popIn 0.25s ease; } .muted { color: var(--muted-2); font-size: 13px; } a { color: var(--primary); transition: color 0.15s ease, opacity 0.15s ease; } a:hover { opacity: 0.75; } .thumb { max-width: 100%; border-radius: 10px; margin-top: 8px; border: 1px solid var(--border); transition: transform 0.25s ease, box-shadow 0.25s ease; } .thumb:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgba(42,35,32,0.15); } .actions-inline { display: flex; gap: 8px; flex-wrap: wrap; } /* ---- นับเงินปิดสิ้นวัน ---- */ .denom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 8px; } .denom-item { background: var(--bg); border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px; text-align: center; transition: transform 0.15s ease, box-shadow 0.15s ease; } .denom-item:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(42,35,32,0.08); } .denom-img { width: 100%; max-width: 84px; height: 84px; object-fit: contain; margin: 0 auto 4px; display: block; } .denom-label { font-size: 12px; font-weight: 600; color: var(--primary-dark); margin-bottom: 4px; } .denom-item .denom-count { width: 100%; text-align: center; padding: 6px 4px; margin: 0; } .denom-subtotal { margin-top: 4px; font-size: 11px; } .denom-total { font-size: 16px; } form.inline { display: inline; } /* ---- จัดการผู้ใช้ ---- */ .perm-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 6px; } .perm-checkbox-item { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 13.5px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 9px; padding: 8px 10px; margin: 0; color: var(--text); } .perm-checkbox-item input[type=checkbox] { width: auto; margin: 0; flex-shrink: 0; } /* ---- Callouts / tags ---- */ .callout { border-radius: 10px; padding: 12px 14px; margin-top: 12px; font-size: 13px; line-height: 1.7; border: 1px solid transparent; } .callout.info { background: #eef3fa; border-color: #d5e2f2; color: #1e3a5f; } .callout.good { background: #e8f3ec; border-color: #cfe6d8; color: #1a5d3a; } .callout.warn { background: #fdf3e0; border-color: #ecd8a4; color: #7a5a10; } .callout.weak { background: #fbe9e7; border-color: #f0c4bd; color: var(--danger); } .callout b { display: block; margin-bottom: 4px; } .tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .tag { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: var(--text); } .use-list { margin: 8px 0 4px; padding-left: 20px; line-height: 1.9; font-size: 13.5px; } /* ---- Info modal ---- */ .info-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(42,35,32,0.55); z-index: 1000; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.15s ease; } .info-modal-overlay.show { display: flex; } .info-modal { background: var(--card); border-radius: 16px; max-width: 560px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(42,35,32,0.35); animation: popIn 0.2s ease; } .info-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; background: linear-gradient(135deg, var(--side-1), var(--side-2)); color: #fff; flex-shrink: 0; } .info-modal-header h3 { margin: 0; font-size: 16px; } .info-modal-close { background: rgba(255,255,255,0.15); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer; flex-shrink: 0; box-shadow: none; margin-top: 0; padding: 0; } .info-modal-close:hover { background: rgba(255,255,255,0.3); transform: none; box-shadow: none; } .info-modal-body { padding: 18px 20px; overflow-y: auto; font-size: 13.5px; line-height: 1.7; } .info-modal-body p:first-child { margin-top: 0; } .info-modal-footer { padding: 14px 20px; border-top: 1px solid var(--border-soft); flex-shrink: 0; text-align: right; } .info-modal-footer button { margin-top: 0; } @media (max-width: 520px) { .info-modal { max-height: 90vh; } .info-modal-header h3 { font-size: 15px; } } /* ---- Toasts ---- */ .toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; max-width: 340px; } @media (max-width: 520px) { .toast-container { left: 14px; right: 14px; bottom: 14px; max-width: none; } } .toast { display: flex; align-items: center; gap: 10px; background: var(--card); color: var(--text); border-radius: 12px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(42,35,32,0.22); border: 1px solid var(--border-soft); border-left: 4px solid var(--success); opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity 0.25s ease, transform 0.25s ease; font-size: 13px; } .toast.show { opacity: 1; transform: translateY(0) scale(1); } .toast-danger { border-left-color: var(--danger); } .toast-info { border-left-color: #1e3a5f; } .toast-icon { flex-shrink: 0; font-size: 16px; } .toast-msg { line-height: 1.4; } /* ---- Spinner ---- */ @keyframes spin { to { transform: rotate(360deg); } } .btn-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; margin-right: 2px; vertical-align: -1px; } .btn.secondary .btn-spinner { border-color: color-mix(in srgb, var(--primary) 35%, transparent); border-top-color: var(--primary); } .pdf-print-btn.is-loading { opacity: 0.85; pointer-events: none; } /* ---- Page header + segmented period toggle (dashboard ใหม่) ---- */ .page-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .page-head h1 { margin: 0; } .page-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .seg { margin-left: auto; display: flex; gap: 4px; background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 3px; } .seg a { padding: 5px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); text-decoration: none; } .seg a:hover { opacity: 1; background: var(--bg); } .seg a.active { background: var(--primary); color: #fff; font-weight: 600; } .seg a.active:hover { background: var(--primary); } .stat.kpi-accent { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border: none; color: #fff; } .stat.kpi-accent .label { color: rgba(255,255,255,0.85); } .stat.kpi-accent .value { color: #fff; } .stat.kpi-accent a { color: var(--gold-light); text-decoration: none; } .grid-2col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 16px; } @media (max-width: 900px) { .grid-2col { grid-template-columns: 1fr; } } .bar-row { margin-top: 12px; } .bar-row .bar-head { display: flex; justify-content: space-between; font-size: 12px; gap: 10px; } .bar-row .bar-head b { font-weight: 600; } .bar-track { height: 7px; border-radius: 99px; background: var(--bg); margin-top: 5px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 99px; } /* ---- Donut legend ---- */ .donut-wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .donut-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 220px; } .donut-legend li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; } .donut-legend .swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; } .donut-legend .donut-label { flex: 1; } .donut-legend .donut-amount { font-weight: 700; } .donut-legend .donut-pct { color: var(--muted-2); font-size: 12px; width: 42px; text-align: right; }