/* References: Happy Hues palettes 12/15 and Linear's interface hierarchy.
   Local Century Gothic avoids redistributing the installed desktop font. */
@font-face{font-family:FamilyCentury;src:local('Century Gothic');font-weight:400;unicode-range:U+0000-024F,U+2000-206F;font-display:swap}
@font-face{font-family:FamilyCentury;src:local('Century Gothic Bold');font-weight:600 900;unicode-range:U+0000-024F,U+2000-206F;font-display:swap}
[data-design=c]{--body-font:FamilyCentury,'Century Gothic','Avenir Next','PingFang TC','Microsoft JhengHei',sans-serif;--title-font:var(--body-font);--metric-font:FamilyCentury,'Century Gothic','Avenir Next',sans-serif}
[data-palette=a]{--ink:#203047;--muted:#52647a;--paper:#dce6f0;--surface:#ffffff;--line:#bccbdc;--green:#315f9b;--tint:#dfeaf8;--tint2:#eef3f9;--gold:#60748c;--head:#ecf1f7;--stripe:#f5f8fc;--shadow:0 3px 12px #2030470a;--side:#d2d9e3;--nav-active:#fafcff;--nav-ink:#45556e;--card2:#ffffff;--card3:#ffffff;}
[data-palette=b]{--ink:#293c35;--muted:#53685d;--paper:#dce7dc;--surface:#fffffc;--line:#bacbbb;--green:#3d5d73;--tint:#e1eaf0;--tint2:#eef3ec;--gold:#62776a;--head:#edf2eb;--stripe:#f6f8f3;--shadow:0 3px 12px #293c350a;--side:#d2d9e3;--nav-active:#fafcff;--nav-ink:#45556e;--card2:#fffffc;--card3:#fffffc;}
[data-palette=c]{--ink:#363047;--muted:#655b77;--paper:#e4dfee;--surface:#fffdff;--line:#c8bfd8;--green:#70558f;--tint:#e8dff4;--tint2:#f2edf8;--gold:#786988;--head:#f0ebf6;--stripe:#f8f5fc;--shadow:0 3px 12px #3630470a;--side:#d2d9e3;--nav-active:#fafcff;--nav-ink:#45556e;--card2:#fffdff;--card3:#fffdff;}
[data-design=c] .sidebar{background:var(--side);border-color:var(--side)}
[data-design=c] .sidebar .brand{color:var(--ink)}
[data-design=c] .sidebar .brand small,[data-design=c] .nav-label,[data-design=c] .sidebar-bottom,[data-design=c] .sidebar-bottom button{color:var(--nav-ink)}
[data-design=c] #nav button{color:var(--nav-ink);background:transparent}
[data-design=c] #nav button.active{background:var(--nav-active);color:var(--green);box-shadow:0 2px 8px #27334c08;font-weight:700}
[data-design=c] #nav button .nav-icon,[data-design=c] #nav button.active .nav-icon{color:inherit!important;background:transparent!important}
[data-design=c] .sidebar .brandmark{background:var(--nav-active);color:var(--green)}
[data-design=c] #nav b{background:var(--nav-active);color:var(--green)}
[data-design=c] .sidebar-bottom .dot{background:#b8c1ec}
[data-design=c] #nav svg circle[fill]{fill:var(--side)}
.design-a{background:#86ac91}.design-b{background:#86b4d9}.design-c{background:#d7a88d}
[data-design=c] .stat .number,[data-design=c] .stat:nth-child(2) .number{color:var(--ink)}
[data-design=c] .overview-stats .stat:first-child .number,[data-design=c] .overview-stats .stat:nth-child(3) .number{color:#b93448}
/* Semantic status colours are independent of all palette variables. */
[data-design=c] .badge.completed,[data-design=c] .expense-status.paid{background:#e4f2e8;color:#27613e}
[data-design=c] .badge.pending,[data-design=c] .expense-status.unpaid{background:#fff2da;color:#8a5914}
[data-design=c] .badge.overdue,[data-design=c] .expense-status.overdue{background:#fde9ed;color:#ae3549}

/* Phone navigation uses a separate light surface for readable icons and labels. */
@media(max-width:650px){
 [data-design=c] .sidebar{background:#f8f9fd;border-color:#dce1eb;box-shadow:0 -2px 12px #27334c08}
 [data-design=c] #nav button{color:#4c5870}
 [data-design=c] #nav button.active{background:#e4eaf6;color:#304b7c;font-weight:700}
 [data-design=c] #nav b{background:#e4eaf6;color:#304b7c}
 [data-design=c] #nav svg circle[fill]{fill:#f8f9fd}
}

/* Clearly separate cards from the coloured canvas. */
[data-design=c] .panel,[data-design=c] .stat,[data-design=c] .document-card,[data-design=c] .inventory-table{border:1px solid var(--line);box-shadow:var(--shadow)}
[data-design=c] .panel-heading h3{color:var(--ink)}
[data-design=c] .badge.completed,[data-design=c] .expense-status.paid{background:#e4f2e8;color:#27613e;border:1px solid #97bf9f}

/* A restrained hierarchy based on independent surface and semantic roles. */
[data-design=c]{--radius:18px;--button-radius:11px}
[data-palette=a],[data-palette=b],[data-palette=c]{--side:#dedddb;--nav-ink:#465165}
[data-design=c] .sidebar{border-right:1px solid #b9c4d2}
[data-design=c] .sidebar .brand{color:#28384f}
[data-design=c] #nav button.active{color:#294e7e;border:1px solid #b9c9dd;box-shadow:none}
[data-design=c] .sidebar .brandmark{color:#294e7e}
[data-design=c] .topbar{background:var(--surface)}
[data-design=c] .panel-heading h3{font-size:17px;font-weight:650}
[data-design=c] .page-heading h1{font-size:28px;letter-spacing:0}
[data-design=c] .stat .number{font-size:40px;font-variant-numeric:tabular-nums}
[data-design=c] .compact-stats .stat .number{font-size:28px}
[data-design=c] .empty{padding:22px 12px;min-height:0}
[data-design=c] .empty .empty-icon{font-size:24px;margin-bottom:10px}
[data-design=c] .empty p{margin-bottom:0}
[data-design=c] .primary{font-weight:650}
[data-design=c] .secondary{border:1px solid var(--line)}
[data-design=c] .document-tabs button{border-color:var(--line)}
.design-a{background:#315f9b}.design-b{background:#7f9c82}.design-c{background:#70558f}
@media(max-width:650px){
 [data-design=c] .sidebar{background:#f8fafc;border-right:0;border-top:1px solid #c5cfdb}
 [data-design=c] .page-heading h1{font-size:24px}
 [data-design=c] .stat .number,[data-design=c] .stat:nth-child(2) .number,[data-design=c] .stat:nth-child(3) .number{font-size:28px}
 [data-design=c] .compact-stats .stat .number{font-size:25px}
 [data-design=c] .empty{padding:18px 8px}
 [data-design=c] #nav button{font-size:10px}
}

/* One label shape and type scale throughout every view. */
[data-design=c] .badge,[data-design=c] .expense-status,[data-design=c] .inventory-status .badge{
 display:inline-block;box-sizing:content-box;
 height:auto;min-height:0;min-width:0;padding:4px 6px;border:0;
 border-radius:7px;font-family:var(--body-font);font-size:10px;font-weight:400;
 line-height:1.6;letter-spacing:0;white-space:nowrap;vertical-align:middle;
 background:#eef1f5;color:#536174;flex-shrink:0;
}
[data-design=c] .badge.completed,[data-design=c] .expense-status.paid{
 background:#e5e8ed;color:#424e62;border:0;
}
[data-design=c] .badge.pending,[data-design=c] .expense-status.unpaid{
 background:#fff2da;color:#8a5914;border:0;
}
[data-design=c] .badge.overdue,[data-design=c] .expense-status.overdue{
 background:#fde7ec;color:#a62c44;border:0;
}
[data-design=c] .check-button.checked{background:#e5e8ed;color:#424e62;border-color:#b2bccb}
/* Circular stock controls preserve the two-row action layout. */
[data-design=c] .inventory-actions [data-item-action]{
 width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;
 display:inline-flex;align-items:center;justify-content:center;
 font-family:var(--body-font);font-size:12px;font-weight:600;line-height:1;
 border-width:1px;border-style:solid;flex-shrink:0;
}
[data-design=c] .inventory-actions [data-item-action="stock-out"]{
 background:#fbe7eb;border-color:#dca3b0;color:#8e3c52;
}
[data-design=c] .inventory-actions [data-item-action="stock-in"]{
 background:#e0f0ee;border-color:#8db8b1;color:#2b625c;
}
[data-design=c] .inventory-actions [data-item-action]:hover{filter:brightness(.96)}
[data-design=c] .inventory-actions [data-item-action]:focus-visible{outline:2px solid #334d73;outline-offset:3px}
[data-design=c] .inventory-control-top{min-height:34px}

/* Item and record titles lead; tags remain supporting information. */
[data-design=c] .inventory-name strong,[data-design=c] .row-main strong{font-size:14px;font-weight:650}
@media(max-width:650px){
 [data-design=c] .inventory-name strong,[data-design=c] .row-main strong{font-size:13px}
}

/* Add/create affordances use the same light, rounded outline as the date pill. */
[data-design=c] .add-button{
 display:inline-flex;align-items:center;justify-content:center;
 border:1px solid var(--line);border-radius:30px;background:var(--surface);
 color:var(--ink);font-family:var(--body-font);font-size:12px;font-weight:500;
 line-height:1.4;padding:10px 14px;min-height:40px;white-space:nowrap;
 box-shadow:none;
}
[data-design=c] .add-button:hover{background:var(--tint2);filter:none}
[data-design=c] .add-button:focus-visible{outline:2px solid var(--green);outline-offset:3px}