/* Scoped extensions for the standalone payroll demo */
body[data-payroll-theme="ruby"]{--p:#c62828;--p-d:#a91e1e;--p-50:#fff4f4;--p-100:#fee2e2;--ink:#451a1a;--ink2:#6b2424}
body[data-payroll-theme="ocean"]{--p:#087e9b;--p-d:#06637b;--p-50:#effaff;--p-100:#d7f3fb;--ink:#082f49;--ink2:#0c4a6e}
body[data-payroll-theme="emerald"]{--p:#16835d;--p-d:#106b4c;--p-50:#effcf6;--p-100:#d8f7e6;--ink:#073d32;--ink2:#125744}
body[data-payroll-theme="indigo"]{--p:#4f46e5;--p-d:#4338ca;--p-50:#f4f4ff;--p-100:#e0e7ff;--ink:#24204c;--ink2:#373075}
.payroll-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}
.payroll-grid .card{min-width:0}
.payroll-theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.payroll-theme-grid button{border:2px solid #ddd;border-radius:12px;background:white;padding:14px;cursor:pointer;text-align:left}
.payroll-theme-grid button[aria-pressed="true"]{border-color:var(--p);box-shadow:0 0 0 2px var(--p-100)}
.payroll-theme-grid i{display:block;width:32px;height:32px;border-radius:50%;margin-bottom:8px}
.payroll-data-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.payroll-data-actions input,.payroll-data-actions select{min-width:0;max-width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:8px}
.payroll-status{min-height:24px;color:var(--p-d)}
@media(max-width:800px){.payroll-grid{grid-template-columns:1fr}.payroll-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.payroll-theme-grid{grid-template-columns:1fr}}

/* Keep original inline SVG icon alignment in shared-menu rendered anchors. */
.sidebar .nav a .payroll-menu-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px}
.sidebar .nav a .payroll-menu-icon svg{width:18px;height:18px;display:block;stroke:currentColor}
.sidebar .nav a[aria-disabled="true"]{opacity:.65;cursor:not-allowed}
#payroll-demo-settings{margin-top:24px}
.payroll-section-title{font-size:18px;line-height:1.4;font-weight:700;margin:0 0 12px;color:var(--ink)}
#payroll-demo-settings .payroll-grid .card{padding:18px}
#payroll-demo-settings .payroll-grid .card h3{margin:0 0 12px}
@media(max-width:800px){#payroll-demo-settings .payroll-grid .card[style*="grid-column"]{grid-column:auto!important}}

/* Five responsive palette preview cards; legacy theme tokens stay unchanged. */
.payroll-theme-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.payroll-theme-grid button{position:relative;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start;outline-offset:3px}
.payroll-theme-grid button:focus-visible{outline:3px solid var(--p)}
.payroll-theme-grid .payroll-palette{display:flex;width:100%;height:40px;overflow:hidden;border-radius:8px}
.payroll-theme-grid .payroll-palette i{flex:1;width:auto;height:100%;margin:0;border-radius:0}
.payroll-theme-check{position:absolute;right:8px;top:8px;display:none;background:#fff;border-radius:50%;padding:0 5px;font-weight:800;color:#166534}
.payroll-theme-grid button[aria-pressed="true"] .payroll-theme-check{display:block}
@media(max-width:1000px){.payroll-theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.payroll-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}