/* PickUp Admin - brand styles from mockup photo_2026-06-23_15-42-34.jpg */
:root{
  --navy:#16233E;      /* logo text, headings, topnav bg */
  --accent:#F5B301;    /* logo box, primary buttons, active accents */
  --bg:#EEF2F8;        /* page background */
  --card:#FFFFFF;      /* tables, cards */
  --blue:#2D7DD2; --green:#4CAF50; --purple:#8E63C9; --danger:#E24C4C;
  --muted:#6B7688; --line:#DCE3EE;
  --radius:10px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--navy);
  font-family:var(--font);
  font-size:15px;
  line-height:1.45;
}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- top nav ---- */
.topnav{
  display:flex;align-items:center;gap:22px;
  background:var(--navy);
  padding:0 24px;height:58px;
  color:#fff;
}
.topnav a{color:#fff;font-weight:500}
.topnav a:hover{text-decoration:none;opacity:.85}
.topnav .brand{display:flex;align-items:center;gap:8px;margin-right:12px}
.topnav .brand b{font-size:19px;letter-spacing:.2px}
.topnav .brand small{
  color:var(--muted);font-size:10px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
}
.topnav .brand .box{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  background:var(--accent);font-size:17px;
}
.topnav form{margin-left:auto}

/* ---- layout ---- */
.wrap{max-width:1100px;margin:26px auto;padding:0 24px}
h1{font-size:24px;margin:0 0 18px}
h2{font-size:18px;margin:26px 0 12px}

/* ---- KPI cards ---- */
.cards{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:8px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;min-width:180px;flex:0 0 auto;
  display:flex;flex-direction:column;gap:2px;
}
.card b{font-size:30px;line-height:1;color:var(--navy)}
.card span{color:var(--muted);font-size:13px}
.card a{margin-top:6px;font-size:13px}

/* ---- tables ---- */
table.grid{
  width:100%;border-collapse:collapse;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
table.grid th,table.grid td{
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
  vertical-align:top;
}
table.grid th{
  background:#F6F8FC;color:var(--muted);
  font-size:12px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;
}
table.grid tr:last-child td{border-bottom:none}

/* ---- buttons ---- */
.btn{
  display:inline-block;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  color:var(--navy);font:inherit;font-size:13px;font-weight:600;
  padding:6px 12px;
}
.btn:hover{border-color:var(--muted)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--navy)}
.btn--primary:hover{filter:brightness(.96)}
.btn--danger{background:#fff;border-color:var(--danger);color:var(--danger)}
.btn--danger:hover{background:var(--danger);color:#fff}

/* action forms sit inline in a cell */
.actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.actions form{display:flex;gap:4px;align-items:center;margin:0}
.actions input,.actions select{
  font:inherit;font-size:13px;padding:5px 7px;
  border:1px solid var(--line);border-radius:7px;max-width:110px;
}
.filter{margin-bottom:14px}
.filter select{font:inherit;padding:6px 9px;border:1px solid var(--line);border-radius:8px}

/* ---- status badges ---- */
.badge{
  display:inline-block;padding:3px 9px;border-radius:20px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  background:#E4E9F2;color:var(--muted);
}
.badge--new{background:#E4E9F2;color:var(--muted)}
.badge--priced{background:#FCEFC7;color:#8A6D00}
.badge--confirmed{background:#DCEBFA;color:var(--blue)}
.badge--published{background:#DDE3F0;color:var(--navy)}
.badge--assigned{background:#EADFF6;color:var(--purple)}
.badge--in_progress{background:#DCEBFA;color:var(--blue)}
.badge--done{background:#DBF0DC;color:#2E7D32}
.badge--cancelled{background:#FADCDC;color:var(--danger)}

/* ---- detail fragment ---- */
.detail{
  margin-top:8px;padding:10px 12px;background:#F6F8FC;
  border:1px solid var(--line);border-radius:8px;font-size:13px;
}
.detail div{margin:2px 0}

/* ---- login ---- */
.login{
  max-width:340px;margin:9vh auto;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:30px 28px;
  box-shadow:0 8px 30px rgba(22,35,62,.08);
}
.login h1{text-align:center;margin-bottom:20px}
.login label{display:block;margin-bottom:14px;font-size:13px;color:var(--muted)}
.login input{
  display:block;width:100%;margin-top:5px;padding:9px 11px;
  border:1px solid var(--line);border-radius:8px;font:inherit;font-size:15px;
}
.login button{
  width:100%;margin-top:6px;padding:10px;
  background:var(--accent);border:none;border-radius:8px;
  color:var(--navy);font:inherit;font-size:15px;font-weight:700;cursor:pointer;
}
.login button:hover{filter:brightness(.96)}

/* ---- error row / message ---- */
.err{
  background:#FADCDC;color:var(--danger);
  padding:9px 12px;border-radius:8px;font-size:13px;margin:0 0 12px;
}
td.err{border-radius:0}

p{color:var(--muted)}

/* ================= mobile / adaptive (управление с телефона) =================
   HTMX свопает <tr>-фрагменты (outerHTML по #order-/#courier-), поэтому строки
   ОБЯЗАНЫ оставаться table-rows. На узком экране перестраиваем table→карточки
   средствами CSS: строка = карточка, ячейка = «метка (data-label) : значение». */
@media (max-width:640px){
  .wrap{margin:16px auto;padding:0 14px}
  h1{font-size:21px;margin-bottom:14px}
  h2{font-size:16px}

  /* topnav переносится, тап-таргеты крупнее */
  .topnav{flex-wrap:wrap;height:auto;gap:12px 18px;padding:11px 16px}
  .topnav .brand{margin-right:0}
  .topnav a{padding:5px 0;font-size:15px}
  .topnav form{margin-left:auto}
  .topnav .btn{padding:8px 14px}

  /* KPI-карточки в одну колонку */
  .cards{flex-direction:column;gap:12px}
  .card{min-width:0;width:100%}

  /* таблица → стопка карточек */
  table.grid{border:none;background:transparent;border-radius:0}
  table.grid tr{
    display:block;background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);margin-bottom:12px;overflow:hidden;
  }
  table.grid tr:first-child{display:none;}       /* прячем строку-заголовок */
  table.grid td{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    justify-content:space-between;text-align:right;
    padding:10px 13px;border-bottom:1px solid var(--line);
  }
  table.grid tr td:last-child{border-bottom:none}
  table.grid td::before{
    content:attr(data-label);
    flex:0 0 auto;text-align:left;
    font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
    color:var(--muted);
  }
  table.grid td[data-label=""]::before,
  table.grid td.actions::before{display:none}

  /* раскрытая деталь заказа уезжает на всю ширину под ячейку # */
  table.grid td [id^="detail-"]{flex:0 0 100%}
  .detail{text-align:left}

  /* блок действий: формы в столбик, крупные поля/кнопки под палец */
  table.grid td.actions{flex-direction:column;align-items:stretch;text-align:left;gap:8px}
  .actions form{width:100%;gap:8px}
  .actions input,.actions select{
    max-width:none;width:100%;padding:11px 12px;font-size:16px;  /* 16px = без iOS-зума */
  }
  .actions .btn{width:100%;padding:12px;font-size:15px}
  .actions form:has(select[name="status"]) .btn{display:none}    /* статус сабмитит onchange */

  /* фильтр и его select на всю ширину */
  .filter select{width:100%;padding:11px 12px;font-size:16px}

  /* кнопка-ссылка в таблицах (дашборд «Назвати ціну») тянется по ширине ячейки */
  table.grid td a.btn{width:auto}
}