:root{
  --border:#e5e7eb; --muted:#6b7280; --bg:#ffffff; --bg-soft:#f8fafc;
  --txt:#0f172a; --primary:#2563eb; --primary-2:#1d4ed8;
  --control-h:48px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--txt);background:var(--bg)}
a{color:#1e40af;text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 8px}

/* ===== LOGO ===== */
.logo-header{text-align:center;margin:10px 0}
.logo-header img,.logo-header img.site-logo{height:80px!important;width:auto!important;display:inline-block}

/* ===== CONTAINERS ===== */
.container{max-width:1200px;margin:20px auto;padding:16px}
.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}

/* ===== TABLES ===== */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{background:#f8fafc}
th,td{padding:10px 12px;border:1px solid var(--border);vertical-align:top}

/* ===== FILTERS ===== */
form.filters{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr)) auto;gap:12px;align-items:end;margin:16px 0}
.filters .field{display:flex;flex-direction:column}
.filters input[type=text],.filters select{width:100%}
.filters .actions{display:flex;gap:10px}
.filters .actions input[type=submit],.filters .actions button[type=submit]{background:var(--primary);border:1px solid var(--primary-2);color:#fff;padding:10px 14px;border-radius:8px;cursor:pointer}
.filters .actions input[type=submit]:hover,.filters .actions button[type=submit]:hover{background:var(--primary-2)}

/* ===== HARD FORM NORMALIZATION (sve iste visine i širine) ===== */
form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=button]):not([type=submit]):not([type=range]),
form select,
form textarea{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:var(--control-h) !important;
  padding:12px 14px !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  background:#fff !important;
  color:var(--txt) !important;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  line-height:24px;
}
form textarea{ min-height:150px !important; height:auto !important; padding:12px 14px !important; resize:vertical }

/* Ujednačene, jače label-e */
form label{display:block;font-weight:700;font-size:14px;color:#0f172a;margin:2px 0 6px}

/* ===== LAYOUT 2 kolone (radi i bez klase) – add/edit/sell ===== */
form[action$="add.php"], form[action$="edit.php"], form[action$="sell.php"], form.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(380px,1fr));
  gap:16px;
}
form[action$="add.php"] > *, form[action$="edit.php"] > *, form[action$="sell.php"] > *, form.form-grid > *{
  min-width:0; display:flex; flex-direction:column; gap:6px;
}
/* Napomena širom forme */
form[action$="add.php"] textarea, form[action$="edit.php"] textarea, form[action$="sell.php"] textarea, form.form-grid textarea{ grid-column:1/-1; }

/* ===== DUGMAD – Sačuvaj + Otkaži (isti red, ista visina) ===== */
.form-actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;   /* promeni u center ako želiš centrirano */
  align-items:center;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}
/* primarno: Sačuvaj */
.form-actions .btn-primary,
.form-actions input[type="submit"],
.form-actions button[type="submit"]{
  background:var(--primary);
  border:1px solid var(--primary-2);
  color:#fff;
  height:var(--control-h);
  padding:0 20px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}
.form-actions .btn-primary:hover,
.form-actions input[type="submit"]:hover,
.form-actions button[type="submit"]{
  background:var(--primary-2);
}
/* sekundarno: Otkaži */
.form-actions .btn-secondary,
.form-actions a.button,
.form-actions a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--control-h);
  padding:0 20px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#f8fafc;
  color:#0f172a;
  text-decoration:none;
}
.form-actions .btn-secondary:hover,
.form-actions a.button:hover,
.form-actions a.btn:hover{
  background:#eef2ff;
  border-color:#c7d2fe;
}
/* fallback: kad je Otkaži odmah posle submit-a (bez .form-actions) */
input[type="submit"] + a,
button[type="submit"] + a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  height:var(--control-h);
  padding:0 20px;
  margin-left:12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#f8fafc;
  color:#0f172a;
  text-decoration:none;
}

/* ===== LOGIN ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);padding:24px}
.login-card{width:100%;max-width:420px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.login-card h2{text-align:center;margin:0 0 12px}
.login-card label{display:block;width:100%}
.login-card input[type=text],.login-card input[type=password]{display:block;width:100%!important;box-sizing:border-box}
.login-card input[type=submit]{width:100%;margin-top:10px;padding:12px;border-radius:10px;background:var(--primary);border:1px solid var(--primary-2);color:#fff;cursor:pointer}
.login-card input[type=submit]:hover{background:var(--primary-2)}

/* ===== STATUS “PILL” ===== */
.status-pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.9rem;border:1px solid var(--border)}
.pill-lager{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.pill-prodato{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.pill-otkupljeno,.pill-otkup{background:#eff6ff;color:#1e40af;border-color:#bfdbfe}
.pill-servis{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.pill-garancija{background:#f5f3ff;color:#5b21b6;border-color:#ddd6fe}
.pill-prodaja{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}
.pill-instock{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.pill-sold{background:#fef2f2;color:#991b1b;border-color:#fecaca}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  form.filters{grid-template-columns:1fr}
  form[action$="add.php"], form[action$="edit.php"], form[action$="sell.php"], form.form-grid{grid-template-columns:1fr}
}
/* === PATCH: Pretraži (index/default) ============================ */
/* hvata 'Pretraži' i kada nije u .filters .actions */
form[action$="index.php"] input[type="submit"],
form[action$="default.php"] input[type="submit"],
input[type="submit"][value*="Pretra"],
button[type="submit"][name*="search"]{
  background: var(--primary);
  border: 1px solid var(--primary-2);
  color: #fff;
  height: var(--control-h);
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
form[action$="index.php"] input[type="submit"]:hover,
form[action$="default.php"] input[type="submit"]:hover,
input[type="submit"][value*="Pretra"]:hover,
button[type="submit"][name*="search"]:hover{
  background: var(--primary-2);
}

/* === PATCH: Sačuvaj + Otkaži – isto, plavo, u istom redu ======= */
.form-actions{
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;   /* stavi 'center' ako želiš centrirano */
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* primarno: Sačuvaj */
.form-actions .btn-primary,
.form-actions input[type="submit"],
.form-actions button[type="submit"]{
  background: var(--primary);
  border: 1px solid var(--primary-2);
  color: #fff;
  height: var(--control-h);
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 700;
  min-width: 200px;
  cursor: pointer;
}
.form-actions .btn-primary:hover,
.form-actions input[type="submit"]:hover,
.form-actions button[type="submit"]:hover{
  background: var(--primary-2);
}

/* sekundarno: Otkaži → potpuno isto kao primarno (plavo i isto veliko) */
.form-actions .btn-secondary,
.form-actions a.button,
.form-actions a.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  padding: 0 20px;
  min-width: 200px;
  border: 1px solid var(--primary-2);
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.form-actions .btn-secondary:hover,
.form-actions a.button:hover,
.form-actions a.btn:hover{
  background: var(--primary-2);
  border-color: var(--primary-2);
}

/* Fallback: ako 'Otkaži' stoji ODMAH posle submit-a, ali van .form-actions */
input[type="submit"] + a,
button[type="submit"] + a{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  padding: 0 20px;
  min-width: 200px;
  margin-left: 12px;
  border: 1px solid var(--primary-2);
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
input[type="submit"] + a:hover,
button[type="submit"] + a:hover{
  background: var(--primary-2);
  border-color: var(--primary-2);
}

/* === PATCH: Sell dugme (prodaja) – da bude isto plavo ========== */
form[action$="sell.php"] input[type="submit"],
form[action$="sell.php"] button[type="submit"]{
  background: var(--primary);
  border: 1px solid var(--primary-2);
  color: #fff;
  height: var(--control-h);
  padding: 0 22px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}
form[action$="sell.php"] input[type="submit"]:hover,
form[action$="sell.php"] button[type="submit"]:hover{
  background: var(--primary-2);
}
/* Details page side-by-side layout */
.details-grid{ display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:flex-start; margin-top:10px; }
.media-preview{ width:100%; min-height:220px; border:1px dashed #e5e7eb; border-radius:12px; background:#fafafa; display:flex; align-items:center; justify-content:center; padding:8px; }
.media-preview img{ max-width:100%; height:auto; display:block; border-radius:10px; }
.details-table{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; }
.details-table th, .details-table td{ border-bottom:1px solid #e5e7eb; padding:10px 12px; }
.details-table th{ background:#f8fafc; width:240px; }
@media (max-width: 900px){ .details-grid{ grid-template-columns:1fr } }
/* === FORCE: akciona dugmad u 1 REDU (add/edit/sell) ===================== */
.span-2.form-actions,
.form-actions{
  display:flex !important;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:flex-start;   /* center ili flex-end po želji */
  margin-top:8px;
}

/* Sva dugmad unutar .form-actions – ista visina/širina, bez 100% */
.form-actions input[type="submit"],
.form-actions button[type="submit"],
.form-actions a.button,
.form-actions a.btn,
.form-actions .btn-primary,
.form-actions .btn-secondary{
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 20px;
  min-width:200px;
  border-radius:10px;
}

/* Ako negde postoji "globalno" full-width za link dugme u formi – poništi ga */
form a.button{ width:auto !important; display:inline-flex !important; }
/* === STATUS PILL: HARD OVERRIDE === */
.status-pill{
  display:inline-flex !important;
  align-items:center !important;
  padding:4px 12px !important;
  border-radius:999px !important;
  border:1px solid #e5e7eb !important;
  line-height:1.2 !important;
  font-size:14px !important;
  font-weight:600 !important;
  white-space:nowrap !important;
  vertical-align:middle !important;
}
.status-pill *{ font-size:14px !important; line-height:1.2 !important; }

.pill-lager{background:#ecfdf5 !important; color:#065f46 !important; border-color:#a7f3d0 !important;}
.pill-garancija{background:#f5f3ff !important; color:#5b21b6 !important; border-color:#ddd6fe !important;}
.pill-servis{background:#fff7ed !important; color:#9a3412 !important; border-color:#fed7aa !important;}
.pill-otkupljeno{background:#eff6ff !important; color:#1e40af !important; border-color:#bfdbfe !important;}
.pill-prodaja{background:#eef2ff !important; color:#3730a3 !important; border-color:#c7d2fe !important;}
.pill-prodato{background:#fef2f2 !important; color:#991b1b !important; border-color:#fecaca !important;}

/* === TOPBAR (naslov + dugmad) CENTAR === */
.logo-header{
  display:flex !important;
  justify-content:center !important;
  margin:8px 0 0 !important;
}
.site-logo{ max-height:52px !important; height:auto !important; width:auto !important; }

.topbar{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:10px !important;
  margin:10px 0 6px !important;
}
.topbar h1{
  text-transform:uppercase !important;
  text-align:center !important;
  font-weight:800 !important;
  letter-spacing:.5px !important;
  margin:0 !important;
}
.topbar > div{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  justify-content:center !important;
}

/* Dugmad da izgledaju konzistentno plavo */
a.button, .button, input[type="submit"].button {
  background:#2563eb !important;
  color:#fff !important;
  border:1px solid #1d4ed8 !important;
  padding:10px 16px !important;
  border-radius:10px !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
}
a.button:hover, .button:hover, input[type="submit"].button:hover {
  background:#1d4ed8 !important;
}
/* === Tabele: centriraj i prikaži VELIKIM slovima === */
table thead th,
table tbody td {
  text-align: center !important;
  vertical-align: middle !important;
  text-transform: uppercase !important;
}

/* Ako želiš da naslovi kolona budu malo “jači”, zadrži ovo: */
table thead th {
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* Ako želiš da dugmad/linkovi u ćelijama NE budu velikim slovima, otkomentariši: */
/*
table td .button,
table td a.button {
  text-transform: none !important;
}
*/