/* Copied from the 32bits UI guide (auto32-server-ui documentation/ui-guide/base.css @ 4900ea9).
   Do not edit here: Musis-specific rules go in musis.css. The @font-face block lives in fonts.css. */

/* 32bits UI base -- extracted from auto32-server (auto32_server/web/static/auto32.css, 2026-10-10).
   Tokens, typography, page shell and the generic components. Domain parts (tiles, KPIs, donuts,
   feed, screen viewer) stay in each system's own CSS. Guide: documentation/ui-guide/UI_GUIDE.md.
   Everything lives under #app; the effective palette is "Neutro" (auto32 palettes.css). */

/* ---------------------------------------------------------------- tokens */
:root{
  /* the 14 base colours; every other colour is derived from them with color-mix */
  --base:#121212; --surface:#1A1A1A; --elev:#242424; --elev2:#2E2E2E;
  --line:#3A3A3A; --line-soft:#262626; --text:#FFFFFF; --muted:#9E9E9E; --faint:#7C7C7C;
  --accent:#BDBDBD; --accent-bright:#D9D9D9;
  --ok:#00FF00; --warn:#FF9500; --crit:#FF0000; --idle:var(--faint);
  /* derived */
  --crit-hi:color-mix(in srgb, var(--crit) 82%, white); --crit-lo:color-mix(in srgb, var(--crit) 45%, var(--base));
  --warn-lo:color-mix(in srgb, var(--warn) 45%, var(--base));
  --backdrop:color-mix(in srgb, black 55%, var(--base) 45%);
  /* buttons: black and grey only (status colours stay on icons) */
  --btn-bg:#000; --btn-bg-hover:#1F1F1F; --btn-line:#4A4A4A; --btn-ic:#BDBDBD;
  --btn-primary:#BDBDBD; --btn-primary-hover:#D9D9D9;
}
#app{
  --font:'Karla','Inter',system-ui,sans-serif;
  --mono:'Karla',ui-monospace,'SF Mono',Menlo,monospace;
  --ease-collapse:cubic-bezier(.65,0,.35,1); --dur-collapse:.38s;   /* easeInOutCubic: every motion */
  --u:46px;    /* row / control height unit */
  --ug:14px;   /* grid gap */
  font-family:var(--font); background:var(--base); color:var(--text);
  min-height:100vh; padding:18px clamp(18px, 3.5vw, 56px); box-sizing:border-box;
}
html, body{margin:0; background:var(--base);}
#app *{box-sizing:border-box;}
#app h1,#app h2{margin:0;}
#app button{font-family:inherit; cursor:pointer;}
#app button:focus-visible,#app [tabindex]:focus-visible{outline:2px solid var(--accent-bright); outline-offset:2px;}
#app a.btn{text-decoration:none;}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------- page shell */
.topbar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 4px; margin-bottom:18px; min-height:84px;}
.spacer{flex:1;}
.brand{display:flex; align-items:center; gap:13px;}
.brand .t1{font-size:40px; line-height:1; letter-spacing:-.01em;}   /* system name: 40px, as in Kino32 */
.brand .t1-a{font-weight:200; text-transform:uppercase;}   /* AUTO: Karla ExtraLight, always */
.brand .t1-b{font-weight:700; font-size:.96em;}          /* 32: smaller, so the bold digits match the thin caps */
.brand .t2{font-size:32px; color:var(--muted); font-weight:200; text-transform:uppercase; letter-spacing:-.01em;}
/* header navigation: outlined links in caps; the current section filled */
.userbox{display:flex; align-items:center; gap:10px; margin-left:22px; color:var(--muted);}
.userbox a, .userbox button.linklike{color:var(--muted); text-decoration:none; background:none;
  border:1px solid var(--line-soft); border-radius:8px; padding:6px 12px;
  font-size:12.5px; font-weight:500; text-transform:uppercase; letter-spacing:normal;}
.userbox a:hover, .userbox button.linklike:hover{color:var(--text); border-color:var(--line); background:var(--elev);}
.userbox a.active{color:var(--base); background:var(--accent); border-color:var(--accent);}
.userbox form{margin:0;}
/* page title: big, thin, caps, muted; then the page body in its own box */
#app h1.page-title{font-size:44px; font-weight:300; text-transform:uppercase; letter-spacing:.04em; margin:0 0 18px; color:var(--muted);}
.page-box{border:1px solid var(--line); border-radius:16px; padding:22px 24px 26px;
  background:color-mix(in srgb, var(--surface) 45%, var(--base));}
/* tabs: caps; the active one joins the content box under it */
.tabs{display:flex; gap:2px; padding:0 10px; margin-bottom:-1px; position:relative; z-index:1; overflow-x:auto; scrollbar-width:none;}
.tabs a{font-size:12px; font-weight:600; color:var(--muted); text-decoration:none; padding:10px 16px 9px; white-space:nowrap;
  border:1px solid transparent; border-bottom:none; border-radius:10px 10px 0 0; text-transform:uppercase; letter-spacing:.04em;}
.tabs a:hover{color:var(--text);}
.tabs a.active{color:var(--text); background:var(--base); border-color:var(--line);}
.tab-box{border:1px solid var(--line); border-radius:14px; padding:20px 22px 22px; background:var(--base);}
@media (max-width:600px){ .tab-box{padding:14px;} }
/* sub-tabs: 2nd level of a tab group, first row inside .tab-box; no box, underline marks the active one */
.subtabs{display:flex; gap:18px; margin:-6px 0 18px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none;}
.subtabs a{font-size:11px; font-weight:600; color:var(--muted); text-decoration:none; text-transform:uppercase; letter-spacing:.04em;
  padding:4px 0 9px; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px;}
.subtabs a:hover{color:var(--text);}
.subtabs a.active, .subtabs a[aria-current="page"]{color:var(--text); border-bottom-color:var(--accent);}
/* panels and the main + side grid (4 + 1 columns) */
.panel{background:var(--surface); border:1px solid var(--line-soft); border-radius:14px; padding:16px;}
.body{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--ug); align-items:start;}
.main{grid-column:span 4; min-width:0; display:flex; flex-direction:column; gap:var(--ug);}
.side{grid-column:span 1; min-width:0; display:flex; flex-direction:column; gap:var(--ug); position:sticky; top:14px;}
@media (max-width:1024px){ .body{grid-template-columns:1fr;} .main,.side{grid-column:auto;} .side{position:static;} }

/* ---------------------------------------------------------------- type helpers */
.sec-title{font-size:14px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--muted);}
.sub-title{font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:18px 0 8px;}
.lead{font-size:13px; color:var(--muted); font-weight:500;}
.meta{font-size:11.5px; color:var(--faint); font-weight:500;}
.placeholder{padding:36px 16px; text-align:center; color:var(--faint); font-size:13.5px;}   /* empty state */

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:11px;
  font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:normal;
  border:1px solid var(--btn-line); background:var(--btn-bg); color:var(--text);}
.btn svg{width:16px; height:16px; color:var(--btn-ic);}
.btn:hover{background:var(--btn-bg-hover);}
.btn.primary{background:var(--btn-primary); border-color:var(--btn-primary); color:#000;}
.btn.primary svg{color:#000;}
.btn.primary:hover{background:var(--btn-primary-hover);}
/* needs attention (destructive, or confirmed with the password): yellow */
.btn.attn{border-color:color-mix(in srgb, var(--warn) 60%, var(--btn-line)); background:color-mix(in srgb, var(--warn) 10%, #000);}
.btn.attn:hover{background:color-mix(in srgb, var(--warn) 18%, #000);}
.btn.attn svg{color:var(--warn);}
/* critical and irreversible (wipe, reset): red -- rare */
/* selected / on: one of N side by side, or a toggle that is on (Danilo 2026-10-17); with aria-pressed="true" */
.btn.on{border-color:color-mix(in srgb, var(--ok) 60%, var(--btn-line)); background:color-mix(in srgb, var(--ok) 10%, #000);}
.btn.on:hover{background:color-mix(in srgb, var(--ok) 18%, #000);}
.btn.on svg{color:var(--ok);}
/* selected option that means "off" (Desligado): white border, no green */
.btn.sel{border-color:var(--text); background:color-mix(in srgb, var(--text) 8%, #000);}
.btn.sel:hover{background:color-mix(in srgb, var(--text) 14%, #000);}
/* one of N / toggles side by side (UI_GUIDE 4.1.1): the options not chosen are greyed out */
.btn-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.btn-row .btn{min-width:150px; justify-content:center;}
.btn-row .btn[aria-pressed="false"]{color:var(--muted); border-color:var(--line-soft); background:var(--base);}
.btn-row .btn[aria-pressed="false"]:hover{color:var(--text); border-color:var(--btn-line); background:var(--btn-bg-hover);}

.btn.crit{border-color:color-mix(in srgb, var(--crit) 65%, var(--btn-line)); background:color-mix(in srgb, var(--crit) 14%, #000);}
.btn.crit:hover{background:color-mix(in srgb, var(--crit) 24%, #000);}
.btn.ghost, .btn.muted{background:#000;}
.btn.muted{color:var(--muted); border-color:var(--line-soft);}
.btn.sm{padding:7px 11px; font-size:11px; border-radius:9px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.icon-btn{display:inline-grid; place-items:center; width:30px; height:30px; flex:none;
  border:1px solid var(--btn-line); background:var(--btn-bg); color:var(--muted); border-radius:9px;}
.icon-btn:hover{background:var(--btn-bg-hover); color:var(--text);}
.icon-btn svg{width:16px; height:16px;}
.actions{display:flex; justify-content:flex-end; gap:9px; margin-top:20px;}

/* ---------------------------------------------------------------- fields (label above, no placeholder) */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field > span{font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.field input,.field select,.field textarea{background:var(--elev); border:1px solid var(--line); color:var(--text);
  border-radius:9px; padding:10px 12px; font:inherit; font-size:14px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent);}
.field .ro-value{border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-size:14px; font-weight:600;}
/* a field with no label above it carries its name beside it */
.inl-field{display:flex; align-items:center; gap:8px; min-width:0;}
.inl-field input,.inl-field select{flex:1; min-width:0; background:var(--elev); border:1px solid var(--line); color:var(--text);
  border-radius:9px; padding:7px 10px; font:inherit; font-size:13px;}
.inl-field input:focus{outline:none; border-color:var(--accent);}
.inl-lab{font-size:12px; color:var(--muted); font-weight:600; white-space:nowrap;}
.check{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; cursor:pointer;}
.check input{width:16px; height:16px; margin:0; accent-color:var(--accent);}
/* file inputs: the browser's button wears the .btn.sm look */
input[type=file]{font:inherit; font-size:12.5px; color:var(--muted); max-width:100%;}
input[type=file]::file-selector-button{font:inherit; font-size:11px; font-weight:500; text-transform:uppercase; color:var(--text);
  padding:7px 11px; margin-right:12px; border-radius:9px; border:1px solid var(--btn-line); background:var(--btn-bg);
  cursor:pointer; transition:background .15s;}
input[type=file]::file-selector-button:hover{background:var(--btn-bg-hover);}

/* ---------------------------------------------------------------- tables (rows centred vertically, always) */
.atable{width:100%; border-collapse:collapse; font-size:13px;}
.atable th{text-align:left; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); font-weight:600;
  padding:8px 10px; border-bottom:1px solid var(--line);}
.atable td{padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
.atable td.num{font-family:var(--mono);}
.row-click{cursor:pointer;} .row-click:hover td{background:var(--elev);}

/* ---------------------------------------------------------------- status marks (colour on dots/icons/borders, never on text) */
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:99px; white-space:nowrap;
  font-size:12px; font-weight:500; text-transform:uppercase;}
.badge .d{width:8px; height:8px; border-radius:99px;}
.badge.on{color:var(--text); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 55%, transparent);}   .badge.on .d{background:var(--ok);}
.badge.warn{color:var(--text); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 55%, transparent);} .badge.warn .d{background:var(--warn);}
.badge.crit{color:var(--text); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--crit) 65%, transparent);} .badge.crit .d{background:var(--crit);}
.badge.off{color:var(--muted); background:color-mix(in srgb, var(--muted) 12%, transparent);}                .badge.off .d{background:var(--idle);}
.dot{display:inline-block; width:8px; height:8px; border-radius:99px; flex:none;}
.dot.ok{background:var(--ok);} .dot.warn{background:var(--warn);} .dot.crit{background:var(--crit);} .dot.off{background:var(--idle);}
.ic-ok{color:var(--ok);} .ic-warn{color:var(--warn);} .ic-crit{color:var(--crit);}
.note-ok,.note-warn,.note-crit{border-left:3px solid; padding-left:10px;}
.note-ok{border-color:var(--ok);} .note-warn{border-color:var(--warn);} .note-crit{border-color:var(--crit);}
.chip{font-size:11px; color:var(--muted); background:var(--elev); border:1px solid var(--line-soft); border-radius:7px; padding:3px 8px; font-weight:500;}
/* filter chips: one row above the list they filter */
.filters{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px;}
.fchip{border:1px solid var(--line); background:transparent; color:var(--muted); padding:5px 10px; border-radius:99px;
  font-size:11px; font-weight:500; text-transform:uppercase;}
.fchip.active{background:var(--accent); border-color:var(--accent); color:var(--base);}

/* ---------------------------------------------------------------- message box (the one message of the whole UI) */
/* right above the buttons it answers, pushing them down; warn yellow (default), crit red, ok green */
.msg-box{--mc:var(--warn); margin:14px 0 12px; padding:10px 14px; font-size:13px; color:var(--text);
  border:1px solid color-mix(in srgb, var(--mc) 45%, var(--line)); border-radius:10px;
  background:color-mix(in srgb, var(--mc) 7%, transparent);}
.msg-box.crit{--mc:var(--crit);} .msg-box.ok{--mc:var(--ok);}
.msg-box .msg-list{margin:6px 0 0; padding-left:18px;}

/* ---------------------------------------------------------------- modal */
.overlay{position:fixed; inset:0; z-index:60; padding:20px; display:none; overflow-y:auto;
  align-items:safe center; justify-content:center; background:color-mix(in srgb, var(--backdrop) 62%, transparent);}
.overlay.open{display:flex;}
.dlg{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px; width:min(460px,100%);}
.dlg h2{font-size:17px; font-weight:600;}
.dlg p{font-size:14px; color:var(--muted); line-height:1.45; margin:10px 0 0;}
.dlg .msg-box{margin:14px 0 0;}
/* re-authentication: yellow box with the responsibility text, the audit sentence and the password */
.pw-box{margin-top:18px; padding:14px 16px; border:1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  border-radius:12px; background:color-mix(in srgb, var(--warn) 6%, transparent);}
.pw-box p{font-size:13px; line-height:1.5; color:var(--text); margin:0 0 12px;}
.pw-box .field{margin:12px 0 0;}
/* unsaved changes: Esc or a click outside shakes Salvar / Cancelar instead of closing */
.actions.nudge{animation:nudge .36s ease;}
@keyframes nudge{0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}}

/* ---------------------------------------------------------------- menu (kebab) */
.menu-wrap{position:relative; flex:none;}
.menu{position:absolute; right:0; top:36px; z-index:20; min-width:210px; padding:6px;
  background:var(--elev); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 36px rgba(0,0,0,.55);}
.menu[hidden]{display:none;}
.menu button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:transparent; border:0;
  color:var(--text); font-size:13px; font-weight:500; padding:9px; border-radius:8px;}
.menu button:hover{background:var(--elev2);}
.menu button svg{width:15px; height:15px; color:var(--muted); flex:none;}
.menu button.attn svg{color:var(--warn);}
.menu .sep{height:1px; background:var(--line-soft); margin:5px 4px;}

/* ---------------------------------------------------------------- toasts (outside a modal only) */
#toasts{position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:90; max-width:380px;}
.toast{background:var(--elev); border:1px solid var(--line); border-radius:11px; padding:11px 14px; font-size:13px; font-weight:500;
  box-shadow:0 12px 28px rgba(0,0,0,.45); animation:rise-in var(--dur-collapse) var(--ease-collapse) both;}
.toast.crit{border-color:color-mix(in srgb, var(--crit) 60%, transparent);} .toast.warn{border-color:color-mix(in srgb, var(--warn) 55%, transparent);}
.toast b{display:block; margin-bottom:2px;}

/* ---------------------------------------------------------------- banners (system state at the top of a page) */
.banner{display:flex; align-items:center; gap:11px; min-height:var(--u); padding:8px 14px; border-radius:11px;
  background:var(--surface); border:1px solid var(--line-soft); font-size:13.5px; font-weight:500;}
.banner svg{width:17px; height:17px; flex:none; color:var(--muted);}
.banner.crit{border-color:color-mix(in srgb, var(--crit) 55%, transparent); background:color-mix(in srgb, var(--crit) 8%, transparent);} .banner.crit svg{color:var(--crit);}
.banner.warn{border-color:color-mix(in srgb, var(--warn) 50%, transparent); background:color-mix(in srgb, var(--warn) 7%, transparent);} .banner.warn svg{color:var(--warn);}

/* ---------------------------------------------------------------- motion */
@keyframes rise-in{from{opacity:0; transform:translateY(-5px);} to{opacity:1; transform:none;}}
/* content that arrives later slides in, one after another */
.arrive{animation:arrive .7s var(--ease-collapse) both;}
.arrive:nth-child(2){animation-delay:.09s;} .arrive:nth-child(3){animation-delay:.18s;}
@keyframes arrive{from{opacity:0; transform:translateY(10px) scale(.985); filter:blur(3px);} to{opacity:1; transform:none; filter:none;}}
/* boxes that open and close: grid rows 0fr <-> 1fr */
.collapse{display:grid; grid-template-rows:1fr; transition:grid-template-rows var(--dur-collapse) var(--ease-collapse);}
.collapsed .collapse{grid-template-rows:0fr;}
.collapse > *{overflow:hidden; min-height:0;}
/* waiting: a spinner, never a "Carregando..." text */
.spin{display:inline-block; width:26px; height:26px; border-radius:50%; vertical-align:middle;
  border:2px solid color-mix(in srgb, var(--accent-bright) 22%, transparent); border-top-color:var(--accent-bright);
  animation:spin .8s linear infinite;}
.spin.sm{width:10px; height:10px; border-width:1.5px; margin-right:5px;}
@keyframes spin{to{transform:rotate(360deg);}}
#app .htmx-indicator{opacity:0; transition:opacity .2s;}
#app .htmx-request .htmx-indicator, #app .htmx-request.htmx-indicator{opacity:1;}
@media (prefers-reduced-motion: reduce){
  #app *{animation:none!important; transition:none!important;}
  #app .collapse{transition:grid-template-rows var(--dur-collapse) var(--ease-collapse)!important;}   /* functional: kept */
  #app .spin{animation:spin 2.4s linear infinite!important;}
}

/* ---------------------------------------------------------------- scrollbars: black track, thin grey thumb */
@supports not selector(::-webkit-scrollbar){ html, #app *{scrollbar-width:thin; scrollbar-color:#5A5A5A #000;} }
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-button{display:none; width:0; height:0;}
::-webkit-scrollbar-track{background:#000;}
::-webkit-scrollbar-thumb{background:#5A5A5A; border-radius:8px; border:2px solid #000;}
::-webkit-scrollbar-thumb:hover{background:#7A7A7A;}
::-webkit-scrollbar-corner{background:#000;}