/* Moderela · konzola
   ==================
   Deliberately plainer than the app. This is an operator's tool, seen by one
   person on a laptop, and it should never be mistaken at a glance for a salon's
   own screen - which matters most in the second after leaving an impersonated
   session, when the only thing telling you where you are is what the page
   looks like. Hence the dark top bar the app never uses. */

/* Tamno tijelo, papir kao sloj iza sadržaja - isti razlog kao u
   `moderela.css`: Safari odatle uzima boju gornjeg pojasa. */
.adm-body { background-color: #241D1A; color: #241D1A;
  font-family: "IBM Plex Sans", system-ui, sans-serif; }
.adm-body .page { max-width: 1180px; margin: 0 auto; padding: 28px 24px 64px; }
.adm-body .mono { font-family: "IBM Plex Mono", monospace; }
.adm-body .muted { color: #6B6055; }
.adm-body .small { font-size: 12.5px; }

/* Ostaje na ekranu: konzola se otvara s telefona kad nesto zapne, i tada je
   put natrag na popis obrta ono sto treba biti nadohvat. Usput drzi i boju
   gornjeg pojasa pri skrolanju - vidi `moderela.css`. */
.adm-top { display: flex; align-items: center; gap: 18px; background: #241D1A;
  color: #FBF7F1; padding: 12px 24px;
  position: sticky; top: 0; z-index: 40; }
.adm-brand { display: flex; align-items: center; gap: 10px; color: #FBF7F1; text-decoration: none; }
.adm-brand span { font-family: Archivo, sans-serif; font-size: 17px; font-weight: 800;
  letter-spacing: -.02em; }
.adm-crumb { font-size: 14px; color: #C9BEB2; }
.adm-search { margin-left: auto; }
.adm-search input { width: 300px; font: inherit; font-size: 14px; padding: 8px 12px;
  border-radius: 6px; border: 1px solid #40352F; background: #1B1512; color: #FBF7F1; }
.adm-search input::placeholder { color: #7C7068; }
.adm-who { font-size: 13px; color: #C9BEB2; margin-left: auto; }
.adm-search ~ .adm-who { margin-left: 0; }

.adm-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.adm-head h1 { font-family: Archivo, sans-serif; font-size: 26px; font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 2px; }
.adm-head p { margin: 0; font-size: 13.5px; }

.adm-card { background: #FBF7F1; border: 1px solid #E3D7C8; border-radius: 12px;
  padding: 22px; margin-bottom: 18px; }
.adm-card h2 { font-family: Archivo, sans-serif; font-size: 17px; font-weight: 700; margin: 0; }
.adm-card .lede { font-size: 13.5px; color: #6B6055; margin: 6px 0 16px; }

/* ── the list of businesses ───────────────────────────────────────────────── */
.adm-table { background: #FBF7F1; border: 1px solid #E3D7C8; border-radius: 12px; overflow: hidden; }
.adm-tr { display: grid; grid-template-columns: 2fr 1.6fr 70px 70px 80px 80px 24px;
  gap: 12px; align-items: center; padding: 13px 18px; border-top: 1px solid #EFE3D2;
  color: inherit; text-decoration: none; }
.adm-tr:first-child { border-top: 0; }
a.adm-tr:hover { background: #F5EDE3; }
.adm-th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #6B6055; background: #F0E8DC; padding-top: 9px; padding-bottom: 9px; }
.adm-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.adm-name i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.adm-go { color: #9C9086; text-align: right; font-size: 18px; }

/* ── one business ─────────────────────────────────────────────────────────── */
.adm-users { display: flex; flex-direction: column; gap: 8px; }
.adm-user { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid #EFE3D2; border-radius: 10px; background: #FDFBF7; }
.adm-user.is-off { opacity: .55; }
.adm-user-who { display: flex; flex-direction: column; min-width: 210px; }
.adm-role { font-size: 12px; color: #6B6055; background: #F0E8DC; border-radius: 999px;
  padding: 3px 10px; }
.adm-enter { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.adm-enter input { font: inherit; font-size: 13px; padding: 8px 10px; width: 230px;
  border: 1px solid #C6B7A4; border-radius: 6px; background: #fff; }

.adm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px;
  border: 1px solid #E3D7C8; border-radius: 999px; font-size: 13.5px; background: #FDFBF7; }
.adm-chip i { font-style: normal; font-size: 11.5px; color: #9C9086; }

.adm-log { display: flex; flex-direction: column; }
.adm-log-row { display: grid; grid-template-columns: 240px 1fr 1fr 110px; gap: 12px;
  align-items: baseline; padding: 9px 0; border-top: 1px solid #EFE3D2; font-size: 13.5px; }
.adm-log-row:first-child { border-top: 0; }
.adm-open { color: #C1502E; }

.adm-live { background: #241D1A; color: #FBF7F1; border-radius: 12px; padding: 16px 20px;
  margin-bottom: 18px; }
.adm-live strong { display: block; font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: #E08A62; margin-bottom: 8px; }
.adm-live-row { display: flex; justify-content: space-between; gap: 16px;
  font-size: 14px; padding: 3px 0; }

/* ── the gate ─────────────────────────────────────────────────────────────── */
.adm-gate .page { display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; }
.adm-login { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 6px; }
.adm-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.adm-login-brand strong { display: block; font-family: Archivo, sans-serif; font-size: 19px;
  font-weight: 800; letter-spacing: -.02em; }
.adm-login-brand span { font-size: 13px; color: #6B6055; }
.adm-login input { font: inherit; font-size: 15px; padding: 11px 13px; border: 1px solid #C6B7A4;
  border-radius: 6px; background: #fff; margin-bottom: 10px; }
.adm-login input:focus { outline: none; border-color: #C1502E;
  box-shadow: 0 0 0 3px rgba(193,80,46,.16); }
.adm-login .label { font-size: 12px; color: #6B6055; margin-bottom: 4px; }
.adm-err { background: #F7E2DA; border: 1px solid #E0A995; color: #7A2E1E;
  border-radius: 6px; padding: 9px 12px; font-size: 13.5px; margin: 0 0 12px; }
.adm-fine { font-size: 12.5px; color: #6B6055; margin: 14px 0 0; line-height: 1.5; }

/* ── the banner, which lives in the app and not here ──────────────────────── */
.imp-bar { display: flex; align-items: center; gap: 14px; background: #7A2E1E;
  color: #FBF7F1; padding: 9px 18px; font-size: 13.5px; position: relative; z-index: 60; }
.imp-bar b { font-weight: 700; }
.imp-bar form { margin-left: auto; }
.imp-bar button { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: #FBF7F1; color: #7A2E1E; border: 0; border-radius: 5px; padding: 6px 14px; }
.imp-bar button:hover { background: #fff; }

@media (max-width: 900px) {
  .adm-tr { grid-template-columns: 1.4fr 60px 60px 24px; }
  .adm-tr > span:nth-child(2), .adm-th > span:nth-child(2),
  .adm-tr > span:nth-child(5), .adm-th > span:nth-child(5) { display: none; }
  .adm-search { display: none; }
  .adm-enter { margin-left: 0; width: 100%; }
  .adm-enter input { width: 100%; }
  .adm-user { flex-wrap: wrap; }
  .adm-log-row { grid-template-columns: 1fr; gap: 2px; }
}

/* The console's own documentation page. The shared markup comes from
   _upute_parts.html; only the wrapper differs, because the console has no
   rail to sit beside. */
.adm-wrap { max-width: 1180px; margin: 0 auto; padding: 28px 24px 64px; }

/* ── konzola na telefonu ──────────────────────────────────────────────────
   Pisano 21.08.2026., nakon što je Tom otvorio konzolu na iPhoneu: „izgleda
   užasno". I je: tamna traka je prelazila desni rub pa je Odjava visjela izvan
   ekrana, ime se lomilo u dva retka, a popis obrta je ostao tablica sa sedam
   stupaca stisnutih u 402 piksela - naziv u dva retka, strelica u trećem,
   adresa sakrivena, a brojke bez ijedne riječi uz sebe.

   Konzola nije aplikacija za telefon i neće to postati. Ali se otvara s
   telefona kad nešto zapne, i tada mora biti čitljiva. */

.adm-top a { color: #FBF7F1; text-decoration: none; font-size: 14px; }
.adm-top a:hover { color: #fff; text-decoration: underline; }
.adm-brand:hover { text-decoration: none; }

@media (max-width: 767px) {
  /* Traka se lomi umjesto da izlazi van: prvi redak je tko i izlaz, drugi
     su poveznice i pretraga. */
  /* Dva retka, i svaki ima svoj posao: gore tko si i izlaz, dolje kamo dalje.
     Sve u jednom retku na 402 piksela znači da Odjava visi izvan ekrana. */
  .adm-top { flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px; }
  /* Gornji redak: ime i kamo dalje. Donji: tko si i izlaz. Prijelom je
     `::after` samog spremnika, jer je to jedini način da se u flex retku
     napravi prazan član bez praznog `<div>` u predlošku. */
  .adm-top::after { content: ""; order: 3; flex: 1 0 100%; height: 0; }
  .adm-brand { order: 1; margin-right: auto; }
  .adm-top a:not(.adm-brand) { order: 2; font-size: 13px; color: #C9BEB2; }
  .adm-top .adm-who { order: 4; font-size: 12px; white-space: nowrap;
    margin-left: 0; align-self: center; }
  .adm-top form:not(.adm-search) { order: 5; margin-left: auto; }
  /* Pretraga u svoj redak, ispod svega. `.adm-top form` niže je specifičnije
     od `.adm-search`, pa bi joj inače uzelo i redoslijed i `margin-left`, i
     tražilica bi se natiskala uz Odjavu i nestala. */
  /* Pravilo za 900px je tražilicu skrivalo, jer u traci koja se ne lomi za nju
     nije bilo mjesta. Sad se traka lomi, a pretraga obrta po imenu je upravo
     ono zbog čega se konzola i otvara s telefona. */
  .adm-top form.adm-search { display: block; order: 6; margin-left: 0;
    flex: 1 0 100%; }
  /* Ime obrta u traci nema `order`, pa je kao nula padalo ispred znaka i
     guralo "Konzolu" u sredinu prvog retka, uz "Upute" i ime operatera.
     Ovdje ga se ne premješta nego briše: naslov odmah ispod trake je isto to
     ime, dvostruko veće. Mrvica je za široki zaslon, gdje naslov nije u
     vidokrugu čim se malo zaskrola. */
  .adm-crumb { display: none; }
  .adm-search input { width: 100%; }
  /* Donja traka je fiksna i stoji preko sadržaja, pa zadnja kartica inače
     završi ispod nje. Isti razmak kakav ima djelatnikov zaslon. */
  .adm-body .page { padding: 18px 14px 88px; }
  .adm-wrap { padding: 18px 14px 88px; }

  /* Redak popisa postaje kartica. Tablica sa sedam stupaca na 402 piksela
     nije tablica nego zagonetka. */
  .adm-tr { display: block; position: relative; padding: 14px 34px 14px 14px; }
  /* Iza `.adm-tr`, i s obje klase: zaglavlje tablice je i samo redak, pa bi
     ga pravilo iznad inače vratilo u vidljivo i ispisalo kao "OBRTKORISNICI
     EKIPA 30 DANA". */
  .adm-tr.adm-th { display: none; }
  .adm-name { font-size: 16px; margin-bottom: 2px; }
  .adm-tr > .mono.small { display: block; color: #6B6055; margin-bottom: 8px; }
  /* Brojke u jedan redak, svaka sa svojom riječi. */
  .adm-tr > span[data-sto] { display: inline; font-size: 13px; color: #6B6055; }
  .adm-tr > span[data-sto]::after { content: " " attr(data-sto); }
  /* Razdjelnik ide **ispred** svake sljedeće brojke, ne iza svake osim
     zadnje: zadnji element retka je strelica, pa bi "osim zadnje" ostavilo
     točku iza posljednje brojke. */
  .adm-tr > span[data-sto] ~ span[data-sto]::before { content: " · "; }
  .adm-go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 22px; }

  /* Detalj obrta: redovi korisnika i dnevnik prestaju biti stupci. */
  .adm-user { flex-wrap: wrap; }
  .adm-user-who { min-width: 0; flex: 1 0 100%; }
  .adm-card { padding: 16px; }
}


/* Boja je tamna jer je Safari cita za traku sa satom; slika je papir jer nju
   vidi covjek. Vidi `moderela.css`. */
.adm-body { background-image: linear-gradient(#F0E8DC, #F0E8DC); }


/* Odjava u donjoj traci konzole je gumb u obrascu, a ne poveznica, pa mu treba
   skinuti ono što preglednik daje svakom gumbu. Ostalo nosi `.bottomtab`. */
.bottombar form { flex: 1; display: flex; }
.bottombar button.bottomtab {
  width: 100%;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-60); font: 700 12px var(--font-body);
}


/* Obrazac za novi obrt. `.row-form` je red kontrola jedne uz drugu i dobar je
   za paket (tri polja, jedan redak). Ovdje su polja duga i svako nosi rečenicu
   objašnjenja ispod, pa idu jedno ispod drugoga. */
.stack-form { display: flex; flex-direction: column; gap: 18px; }
.stack-form > label { display: flex; flex-direction: column; gap: 5px; }
.stack-form > label > .label { margin: 0; }
.stack-form .small.muted { line-height: 1.45; max-width: 62ch; }

.adm-fieldset {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 14px 16px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.adm-fieldset > legend { padding: 0 6px; }

/* Kvačica i tekst uz nju: kvačica gore lijevo, a objašnjenje ispod naslova
   opcije, ne u istom retku. Bez `align-items: flex-start` bi se kvačica
   centrirala prema tri retka teksta i visjela u zraku. */
.adm-radio { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.adm-radio input { margin-top: 3px; flex: none; }
.adm-radio > span { display: flex; flex-direction: column; gap: 3px; }