/* ============================================================
   Turnir Lapovci — ADMIN stylesheet  (v2 "premium sport")
   Drop-in zamjena za /assets/css/admin.css
   - Koristi POSTOJEĆE klase iz admin/_layout.php, login.php,
     dashboard.php, teams.php, groups.php, playoff.php.
   - Usklađeno s novim frontend stilom (Barlow + crveno/plavo).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box}

:root{
  --c-red:#d6202a;
  --c-red-d:#a8161e;
  --c-blue:#1f3c99;
  --c-blue-d:#152a6e;
  --c-primary:var(--c-blue);
  --c-primary-d:var(--c-blue-d);
  --c-accent:var(--c-red);
  --c-bg:#eef1f8;
  --c-text:#141a2b;
  --c-muted:#5b6478;
  --c-card:#fff;
  --c-border:#e1e5f0;
  --c-ink:#0a0f20;
  --c-ink-2:#121a35;
  --font-body:"Barlow",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Barlow Condensed",var(--font-body);
  --shadow-sm:0 1px 3px rgba(15,30,80,.08);
  --shadow:0 4px 16px rgba(15,30,80,.10);
  --shadow-lg:0 14px 40px rgba(15,30,80,.18);
}

html,body{margin:0;padding:0;font-family:var(--font-body);background:var(--c-bg);color:var(--c-text);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--c-blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ============================================================
   SHELL + SIDEBAR
   ============================================================ */
.admin-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.admin-side{
  background:linear-gradient(180deg,var(--c-ink) 0,var(--c-blue-d) 100%);
  color:#e5e7eb;padding:18px 14px;border-right:3px solid var(--c-red);
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.admin-side .logo-block{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.admin-side .logo-block img{height:46px;width:auto;background:#fff;border-radius:8px;padding:3px;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.admin-side .logo{font-family:var(--font-display);font-weight:800;color:#fff;font-size:20px;line-height:1;text-transform:uppercase;letter-spacing:.4px}
.admin-side .who{
  font-size:12px;color:#aeb8d8;margin-bottom:18px;padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.admin-side nav a{
  display:flex;align-items:center;color:#dfe4f5;padding:10px 12px;border-radius:8px;
  font-size:14px;font-weight:600;margin-bottom:3px;transition:background .14s,padding .14s,color .14s;
}
.admin-side nav a:hover{background:rgba(255,255,255,.09);text-decoration:none;color:#fff;padding-left:15px}
.admin-side nav a.active{
  background:linear-gradient(90deg,var(--c-red),var(--c-red-d));color:#fff;
  box-shadow:0 3px 10px rgba(214,32,42,.35);
}
.admin-side .logout{margin-top:16px}
.admin-side .logout a{color:#fca5a5;font-weight:600}
.admin-side .logout a:hover{color:#fff}

/* ============================================================
   MAIN
   ============================================================ */
.admin-main{padding:30px 34px;max-width:1140px}
.admin-main h1{
  margin:0 0 6px;font-family:var(--font-display);color:var(--c-ink);font-size:32px;
  font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  display:flex;align-items:center;gap:12px;padding-bottom:0;border:0;
}
.admin-main h1::before{
  content:"";width:10px;height:28px;background:var(--c-red);border-radius:3px;
  box-shadow:3px 0 0 var(--c-blue);flex:none;
}

/* ============================================================
   KPI KARTICE
   ============================================================ */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:20px 0}
.kpi{
  background:#fff;border:1px solid var(--c-border);border-radius:12px;padding:18px;
  border-left:5px solid var(--c-red);box-shadow:var(--shadow-sm);
  transition:transform .15s,box-shadow .15s;
}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.kpi .num{font-family:var(--font-display);font-size:40px;font-weight:800;color:var(--c-blue-d);line-height:1}
.kpi .lbl{font-size:13px;color:var(--c-muted);text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-top:4px}

/* ============================================================
   PANELI
   ============================================================ */
.panel{
  background:#fff;border:1px solid var(--c-border);border-radius:14px;padding:22px;
  margin-bottom:20px;box-shadow:var(--shadow-sm);border-top:none;position:relative;overflow:hidden;
}
.panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c-red)}
.panel h2{
  margin:0 0 14px;font-family:var(--font-display);color:var(--c-ink);font-size:21px;
  font-weight:700;text-transform:uppercase;letter-spacing:.3px;
}
.panel h3{margin:16px 0 8px;font-family:var(--font-display);font-size:16px;color:var(--c-blue-d);text-transform:uppercase;letter-spacing:.3px}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.toolbar .spacer{flex:1}

/* ============================================================
   FORME
   ============================================================ */
.form-row{margin-bottom:14px;display:flex;flex-direction:column;gap:5px}
.form-row label{font-weight:600;font-size:13px;color:var(--c-text);letter-spacing:.2px}
.form-row input,.form-row select,.form-row textarea{
  padding:10px 12px;border:1.5px solid var(--c-border);border-radius:8px;font-size:14px;
  font-family:inherit;background:#fff;transition:border-color .14s,box-shadow .14s;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;border-color:var(--c-blue);box-shadow:0 0 0 3px rgba(31,60,153,.14);
}
.form-row textarea{min-height:150px;resize:vertical}
.form-row .hint{font-size:12px;color:var(--c-muted)}
.form-inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.form-inline .form-row{margin-bottom:0}

/* --- Date / time input (kalendar) — brendirana ikona + polje --- */
.form-row input[type="date"],
.form-row input[type="datetime-local"],
.form-row input[type="time"],
input[type="date"],input[type="datetime-local"],input[type="time"]{
  color:var(--c-text);accent-color:var(--c-blue);
}
/* ikona koja otvara kalendar — zamijenjena brend-plavom SVG ikonom */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  width:20px;height:20px;padding:3px;border-radius:6px;cursor:pointer;opacity:1;
  background-color:rgba(31,60,153,.08);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3c99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4.5' width='18' height='17' rx='2.5'/><line x1='16' y1='2.5' x2='16' y2='6.5'/><line x1='8' y1='2.5' x2='8' y2='6.5'/><line x1='3' y1='9.5' x2='21' y2='9.5'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:15px;
  transition:background-color .14s,transform .1s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover{
  background-color:rgba(214,32,42,.14);transform:scale(1.06);
}
/* Firefox: barem obojaj fokus polja (popup se ne može stilizirati nigdje) */
@supports (-moz-appearance:none){
  .form-row input[type="date"],.form-row input[type="datetime-local"]{accent-color:var(--c-blue)}
}

/* ============================================================
   GUMBI
   ============================================================ */
.btn{
  display:inline-block;background:linear-gradient(180deg,var(--c-blue),var(--c-blue-d));color:#fff;
  border:none;padding:9px 16px;border-radius:8px;cursor:pointer;font-family:var(--font-display);
  font-size:14px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  box-shadow:0 2px 8px rgba(21,42,110,.25);transition:transform .12s,box-shadow .12s,filter .12s;
}
.btn:hover{filter:brightness(1.08);text-decoration:none;color:#fff;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn.alt{background:linear-gradient(180deg,var(--c-red),var(--c-red-d));box-shadow:0 2px 8px rgba(214,32,42,.25)}
.btn.danger{background:linear-gradient(180deg,#dc2626,#991b1b)}
.btn.small{padding:5px 10px;font-size:12px;letter-spacing:.2px}
.btn.ghost{background:transparent;color:var(--c-blue);border:2px solid var(--c-blue);box-shadow:none}
.btn.ghost:hover{background:var(--c-blue);color:#fff}

/* ============================================================
   TABLICE
   ============================================================ */
.adm-table{
  width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--c-border);border-radius:10px;overflow:hidden;font-size:14px;margin-bottom:18px;
}
.adm-table th{
  background:linear-gradient(180deg,var(--c-blue),var(--c-blue-d));color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.6px;
  text-transform:uppercase;padding:11px 12px;text-align:left;
}
.adm-table td{padding:10px 12px;border-bottom:1px solid var(--c-border);text-align:left;vertical-align:middle}
.adm-table tr:last-child td{border-bottom:0}
.adm-table tbody tr:nth-child(even){background:#f7f9fd}
.adm-table tbody tr:hover{background:#eaf0fd}

/* ============================================================
   OZNAKE (tags)
   ============================================================ */
.tag{
  display:inline-block;background:#e5e7eb;color:#374151;padding:2px 9px;border-radius:20px;
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;margin-right:4px;
}
.tag.green{background:#dcfce7;color:#166534}
.tag.orange{background:#ffedd5;color:#9a3412}
.tag.red{background:#fee2e2;color:#991b1b}
.tag.blue{background:#dbeafe;color:#1e40af}

/* ============================================================
   FLASH / NOTICE / HINT
   ============================================================ */
.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-weight:600;border:1px solid transparent}
.flash.ok{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.flash.err{background:#fee2e2;color:#991b1b;border-color:#fecaca}

.notice{
  padding:20px;background:#fff;border:1.5px dashed var(--c-border);border-radius:12px;
  color:var(--c-muted);text-align:center;font-weight:500;margin-bottom:18px;
}
.hint{font-size:12px;color:var(--c-muted)}

/* ============================================================
   LOGIN
   ============================================================ */
.login-shell{
  display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;
  background:
    linear-gradient(180deg,rgba(8,12,28,.55),rgba(8,12,28,.78)),
    linear-gradient(135deg,var(--c-ink) 0,var(--c-blue-d) 55%,var(--c-blue) 120%);
  position:relative;overflow:hidden;
}
.login-shell::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 2px,transparent 2px 24px);
  pointer-events:none;
}
.login-card{
  position:relative;z-index:1;background:#fff;padding:32px 30px;border-radius:16px;width:100%;
  max-width:390px;box-shadow:var(--shadow-lg);border-top:5px solid var(--c-red);
}
.login-card img.logo{display:block;margin:0 auto 16px;height:96px;width:auto}
.login-card h1{
  margin:0 0 18px;font-family:var(--font-display);color:var(--c-ink);font-size:24px;
  text-align:center;text-transform:uppercase;letter-spacing:.5px;
}

/* ============================================================
   DATETIME-LOCAL / DATE / TIME — brendirano polje
   ============================================================ */
input[type="date"],
input[type="datetime-local"],
input[type="time"]{
  font-family:var(--font-body);
  font-size:14px;
  padding:9px 12px;
  border:1.5px solid var(--c-border);
  border-radius:8px;
  background:linear-gradient(180deg,#fff,#f6f8fd);
  color:var(--c-text);
  min-height:40px;
  transition:border-color .14s,box-shadow .14s,background .14s;
  cursor:pointer;
}
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover{ border-color:var(--c-blue) }
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus{
  outline:none;
  border-color:var(--c-blue);
  box-shadow:0 0 0 3px rgba(31,60,153,.18);
  background:#fff;
}

/* ============================================================
   SCOREBOARD - unos rezultata
   "ploča" osjećaj: tamno polje, sportski font, veliki brojevi
   Cilja name="score_..." da ne zahvati ostale brojeve.
   ============================================================ */
input[type="number"][name^="score"]{
  font-family:var(--font-display);
  font-weight:800;
  font-size:20px;
  letter-spacing:.5px;
  text-align:center;
  width:64px!important;
  padding:6px 4px 6px 8px;
  border:1.5px solid var(--c-border);
  border-radius:8px;
  background:linear-gradient(180deg,#fff,#f6f8fd);
  color:var(--c-blue-d);
  box-shadow:none;
  transition:border-color .14s,box-shadow .14s,transform .08s;
}
input[type="number"][name^="score"]:hover{ border-color:var(--c-blue) }
/* Native +/− strelice unutar polja */
input[type="number"][name^="score"]::-webkit-inner-spin-button,
input[type="number"][name^="score"]::-webkit-outer-spin-button{
  opacity:1;
  cursor:pointer;
  height:auto;
  margin-left:2px;
}
input[type="number"][name^="score"]:focus{
  outline:none;
  border-color:var(--c-blue);
  box-shadow:0 0 0 3px rgba(31,60,153,.18);
  background:#fff;
}
input[type="number"][name^="score"]::placeholder{ color:#a8b2c8;font-weight:600 }

/* Manje varijanta - penali */
input[type="number"][name*="pen"]{
  font-size:14px;
  width:54px!important;
  padding:4px 2px 4px 6px;
  color:var(--c-blue-d);
}

/* Dvotočka između rezultata u tablicama - veća i brendirana */
.adm-table td:has(input[name^="score"]){
  white-space:nowrap;
  font-family:var(--font-display);
  font-weight:800;
  font-size:22px;
  color:var(--c-red);
  letter-spacing:2px;
}

/* ============================================================
   GRUPNA TABLICA UTAKMICA - brendirani stilovi po stupcu
   ============================================================ */
/* Ime ekipe */
.adm-table .td-team{
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  letter-spacing:.4px;
  color:var(--c-ink);
  text-transform:uppercase;
}
.adm-table .td-team.home{ text-align:right }
.adm-table .td-team.away{ text-align:left }

/* Termin / Mjesto polja - kompaktna brendirana
   Pokrij i originalni i flatpickr alt input (flatpickr promijeni type) */
.adm-table .td-when input:not([type="hidden"]){
  font-family:var(--font-display)!important;
  font-weight:700!important;
  font-size:14px!important;
  letter-spacing:.5px!important;
  padding:7px 10px!important;
  min-height:34px;
  color:var(--c-blue-d)!important;
  text-transform:uppercase;
  background:linear-gradient(180deg,#fff,#f6f8fd)!important;
  border:1.5px solid var(--c-border)!important;
  border-radius:8px!important;
}
.adm-table .td-when input:not([type="hidden"]):focus{
  outline:none!important;
  border-color:var(--c-blue)!important;
  box-shadow:0 0 0 3px rgba(31,60,153,.18)!important;
}
.adm-table .td-where input{
  font-family:var(--font-display);
  font-weight:600;
  font-size:13px;
  letter-spacing:.4px;
  padding:7px 10px;
  text-transform:uppercase;
  color:var(--c-blue-d);
  background:linear-gradient(180deg,#fff,#f6f8fd);
  border:1.5px solid var(--c-border);
  border-radius:8px;
  min-height:34px;
}
.adm-table .td-where input:focus{
  outline:none;border-color:var(--c-blue);
  box-shadow:0 0 0 3px rgba(31,60,153,.18);
}

/* ============================================================
   RESPONZIVNOST
   ============================================================ */
@media (max-width:760px){
  .admin-shell{grid-template-columns:1fr}
  .admin-side{
    position:static;height:auto;padding:12px;
    display:grid;grid-template-columns:1fr;
  }
  .admin-side nav{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
  .admin-side nav a{margin-bottom:0}
  .admin-main{padding:20px 16px}
  .admin-main h1{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .kpi:hover,.btn:hover{transform:none}
}