/* MIG Auto brand theme (logo: gold emblem on anthracite). Loaded after demo.css + app.css: same layout,
   new colours. Gold is used for fills, accents and selections -- never as small text on a light background.
   Status colours (warning / error / in progress / done) stay distinct. */
:root{
  --ink:#1c1c1e;           /* text on light + dark surfaces */
  --green:#2a2a2e;         /* (former green) secondary dark surface */
  --lime:#e0ca71;          /* (former light green) = logo gold */
  --gold:#e0ca71; --gold-light:#fbea96; --gold-deep:#b8962e;
  --gold-ink:#6e5a12;      /* gold-family TEXT on light backgrounds (contrast >= 6:1) */
  --gold-tint:#f6efd6;     /* selected item on light background */
  --night:#141417;         /* header, rail, hero */
  --bg:#f4f4f2; --muted:#64646a; --line:#e2e2de;
}
body{background:var(--bg);color:var(--ink)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px}
a{color:var(--gold-ink)}

/* header with the logo */
header{background:var(--night);border-bottom:2px solid var(--gold-deep)}
.brandwrap{display:flex;align-items:center;gap:14px}
.brandlogo{height:58px;width:auto;display:block}
.tag{color:#b9b4a2}
.avatar{background:#2a2a2e;color:var(--gold);border:1px solid var(--gold-deep)}
.mode{background:#0b0b0d}
.mode button{color:#bdbab0}
.mode .active{background:#2e2e33;color:#fff;box-shadow:inset 0 -2px 0 var(--gold)}
.demo{background:#ebebe7;color:#4a4a4f}

/* hero / cards */
.hero{background:linear-gradient(135deg,#232327,#141417);border:1px solid #2f2f33}
.hero p{color:#c9c6bb}
.hero strong{color:var(--gold)}
.hero .eyebrow{color:#cdbb72!important}
.btn{background:var(--ink);color:#fff}
.btn.light{background:var(--gold);color:var(--ink)}
.btn.light:hover{background:var(--gold-light)}
.btn.secondary{background:#e8e8e4;color:var(--ink)}
.textbtn{color:var(--gold-ink)}
.caricon{background:var(--gold-tint);color:var(--gold-ink)}
.bubble{background:#ececea;color:var(--ink)}
.stat b{color:var(--ink)}
.chips button{color:#55555b}
.chips .active{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.close{background:#e4e4e0;color:var(--ink)}
.field input,.field select,.field textarea{border-color:#d6d6d1}
.check input,.task input{accent-color:var(--gold-deep)}
.meta{border-top-color:#efefeb}
.progress{background:#ececea}.progress i{background:var(--gold-deep)}
dialog::backdrop{background:#0b0b0d99}
.toast{background:var(--ink);color:#fff;border-left:4px solid var(--gold)}
.back{color:var(--gold-ink)}
.badge-count{background:var(--gold);color:var(--ink)}

/* remaining greenish greys of the forms */
.lines input,.lines select{border-color:#d6d6d1}
.sig{border-color:#b5b2a8}
.docimg{border-color:var(--line)}

/* status colours: unchanged meaning, neutral default */
.pill{background:#ececea;color:#4a4a4f}
.pill.orange{background:#fff0dc;color:#8a5a1c}
.pill.blue{background:#e7eefa;color:#3f5f8c}
.pill.green{background:#e3efdc;color:#3d6334}
.pill.red{background:#fde3df;color:#9b3328}
.pill.grey{background:#ececea;color:#5a5a60}

/* bottom navigation (phone) */
.bottom button{color:#5e5e64}
.bottom button.active{color:var(--ink);font-weight:800}
.bottom button.active svg{color:var(--gold-deep)}
.bottom button.active span{box-shadow:inset 0 -2px 0 var(--gold)}
.raillogo{display:none}

/* login */
.loginbrand{background:var(--night);border-radius:22px;padding:26px;display:grid;place-items:center;margin:0 0 18px;border:1px solid #2f2f33}
.loginbrand img{width:min(260px,70%);height:auto;display:block}

@media(min-width:700px){.brandlogo{height:66px}}
/* PC: dark rail with the logo, gold selection */
@media(min-width:1100px){
  .bottom{background:var(--night)!important;border-right:1px solid #2f2f33!important;backdrop-filter:none}
  .bottom:before{content:none!important}
  .raillogo{display:block;padding:4px 18px 22px;border-bottom:1px solid #2f2f33;margin-bottom:14px}
  .raillogo img{width:100%;max-width:170px;height:auto;display:block;margin:0 auto}
  .bottom button{color:#c8c5bb}
  .bottom button:hover{background:#222226}
  .bottom button.active{background:#2a2a2e!important;color:#fff;box-shadow:inset 3px 0 0 var(--gold)}
  .bottom button.active span{box-shadow:none}
  .bottom button.active svg{color:var(--gold)}
  header .brandlogo{height:70px}
}
@media print{.brandlogo{filter:none}}
/* warning states must win over the button variants above */
.btn.unsaved,.btn.secondary.unsaved,.btn.light.unsaved{background:#8a5a1c;color:#fff}
.btn.danger{background:#b4473a;color:#fff}
.meta .amount,.amount{color:var(--ink)}
@media(min-width:1100px){body:has(#nav[hidden]){padding-left:0}}