/* ============================================================
   Osmijeh Admin CSS — v3 Mobile-First
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --blue:#1258e8; --blue2:#0943c8; --blue3:#eaf1ff;
  --ink:#0d1520; --g1:#374151; --g2:#6b7a99; --g3:#b0bad4; --g4:#dde3ef;
  --bg:#f0f4fb; --sb:#0d1520; --white:#fff;
  --sh:0 2px 12px rgba(13,21,32,.08);
  --ff:'Manrope',system-ui,sans-serif;
  --sw:240px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--ff); background:var(--bg); color:var(--ink); font-size:14px; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font-family:var(--ff); }
img { max-width:100%; }

/* ── LAYOUT ── */
.admin-wrap { display:flex; min-height:100vh; }
.admin-sidebar {
  width:var(--sw); background:var(--sb); flex-shrink:0;
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; height:100vh;
  overflow-y:auto; z-index:300;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.admin-main { flex:1; margin-left:var(--sw); display:flex; flex-direction:column; min-height:100vh; min-width:0; }

/* Sidebar internals */
.sidebar-logo { padding:22px 20px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-logo .logo { font-family:Georgia,serif; font-style:italic; font-size:22px; color:#fff; }
.sidebar-logo .logo em { font-style:normal; font-weight:900; color:var(--blue); }
.sidebar-logo .admin-tag { font-size:9px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.28); margin-top:4px; display:block; }
.sidebar-user { padding:12px 20px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:10px; }
.user-avatar { width:32px; height:32px; background:var(--blue); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; flex-shrink:0; }
.user-name { font-size:12px; font-weight:700; color:#fff; }
.user-role { font-size:10px; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.08em; }
.sidebar-nav { flex:1; padding:10px 0; }
.nav-section-title { padding:14px 20px 5px; font-size:9px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.22); display:block; }
.sidebar-nav a { display:flex; align-items:center; gap:10px; padding:10px 20px; font-size:13px; font-weight:600; color:rgba(255,255,255,.52); border-left:3px solid transparent; transition:all .15s; }
.sidebar-nav a:hover { color:#fff; background:rgba(255,255,255,.06); border-left-color:rgba(255,255,255,.18); }
.sidebar-nav a.active { color:#fff; background:rgba(18,88,232,.22); border-left-color:var(--blue); }
.sidebar-nav svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; stroke-linecap:round; stroke-linejoin:round; }
.sidebar-footer { padding:14px 20px; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-footer a { display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(255,255,255,.32); transition:color .15s; padding:4px 0; }
.sidebar-footer a:hover { color:#fff; }
.sidebar-footer svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }

/* ── HAMBURGER ── */
.sidebar-toggle {
  display:none; position:fixed; top:10px; right:14px; z-index:400;
  width:40px; height:40px; border-radius:9px;
  background:var(--sb); border:none; cursor:pointer;
  align-items:center; justify-content:center;
  box-shadow:0 2px 12px rgba(13,21,32,.25);
}
.sidebar-toggle .icon-ham { display:block; }
.sidebar-toggle .icon-x   { display:none; }
.sidebar-toggle.open .icon-ham { display:none; }
.sidebar-toggle.open .icon-x   { display:block; }
.sidebar-toggle svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(13,21,32,.55); z-index:250; backdrop-filter:blur(2px); }
.sidebar-overlay.visible { display:block; }

/* ── TOPBAR ── */
.admin-topbar {
  background:var(--white); border-bottom:1px solid var(--g4);
  padding:0 24px; height:56px;
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; position:sticky; top:0; z-index:100; gap:12px;
}
.topbar-title { font-size:16px; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* ── BUTTONS ── */
.tb-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; border:none; transition:all .15s; text-decoration:none; white-space:nowrap; }
.tb-btn.primary { background:var(--blue); color:#fff; }
.tb-btn.primary:hover { background:var(--blue2); }
.tb-btn.ghost { background:var(--g4); color:var(--g1); }
.tb-btn.ghost:hover { background:var(--g3); }
.tb-btn.danger { background:#fff0f0; color:#e84040; border:1px solid #ffd0d0; }
.tb-btn.danger:hover { background:#e84040; color:#fff; }
.tb-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }

/* ── BODY ── */
.admin-body { padding:20px 24px; flex:1; }

/* ── STATS ── */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
.stat-card { background:var(--white); border:1px solid var(--g4); border-radius:12px; padding:16px; display:flex; align-items:center; gap:14px; }
.stat-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
.stat-num { font-size:22px; font-weight:800; line-height:1; }
.stat-lbl { font-size:11px; color:var(--g2); font-weight:600; margin-top:3px; }

/* ── DATA CARD ── */
.data-card { background:var(--white); border:1px solid var(--g4); border-radius:12px; overflow:hidden; margin-bottom:20px; }
.dc-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--g4); background:#fafbfd; gap:10px; flex-wrap:wrap; }
.dc-title { font-size:14px; font-weight:800; }

/* ── DESKTOP TABLE (hidden on mobile) ── */
.orders-table-wrap { overflow-x:auto; }
.order-cards { display:none; }

table { width:100%; border-collapse:collapse; }
th { padding:10px 14px; text-align:left; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--g2); background:#f6f8fb; white-space:nowrap; }
td { padding:10px 14px; border-top:1px solid var(--g4); font-size:13px; vertical-align:middle; }
tr:hover td { background:#fafbfd; }
.td-act { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.act-btn { width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; background:var(--g4); border:none; cursor:pointer; color:var(--g2); transition:all .12s; text-decoration:none; flex-shrink:0; }
.act-btn:hover { background:var(--blue3); color:var(--blue); }
.act-btn.del:hover { background:#fff0f0; color:#e84040; }
.act-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }

/* ── MOBILE CARD ROW ── */
/* Generic: used for tables on mobile */
.card-list { display:none; }
.c-row {
  padding:14px 16px;
  border-bottom:1px solid var(--g4);
  background:var(--white);
  text-decoration:none; color:inherit;
  display:block;
}
.c-row:last-child { border-bottom:none; }
.c-row:hover { background:#fafbfd; }
.c-row-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; gap:8px; }
.c-row-title { font-weight:700; font-size:14px; color:var(--ink); }
.c-row-sub { font-size:12px; color:var(--g2); margin-bottom:6px; }
.c-row-meta { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.c-row-actions { display:flex; gap:6px; margin-top:10px; }

/* Order cards (dashboard) */
.order-card { display:block; padding:14px 18px; border-bottom:1px solid var(--g4); text-decoration:none; color:inherit; transition:background .15s; }
.order-card:last-child { border-bottom:none; }
.order-card:hover { background:#fafbfd; }
.order-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.order-card-num { font-weight:800; font-size:13px; color:var(--blue); }
.order-card-name { font-size:13px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.order-card-meta { font-size:11px; color:var(--g2); }

/* ── FORM CARD ── */
.form-card { background:var(--white); border:1px solid var(--g4); border-radius:12px; overflow:hidden; margin-bottom:20px; }
.fc-head { padding:14px 18px; border-bottom:1px solid var(--g4); background:#fafbfd; }
.fc-head h2 { font-size:14px; font-weight:800; }
.fc-body { padding:18px; }
.form-group { margin-bottom:14px; }
.form-row { margin-bottom:14px; }
.form-label { display:block; font-size:12px; font-weight:700; color:var(--ink); margin-bottom:5px; }
.form-input,.form-select,.form-textarea {
  width:100%; padding:9px 13px; border:1.5px solid var(--g4);
  border-radius:8px; font-size:13px; outline:none;
  transition:border-color .2s,box-shadow .2s; background:var(--white); color:var(--ink);
}
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(18,88,232,.1); }
.form-textarea { resize:vertical; min-height:80px; }
.form-hint { font-size:11px; color:var(--g2); margin-top:4px; }
.form-footer { padding:14px 18px; border-top:1px solid var(--g4); background:#fafbfd; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* ── TOGGLE ── */
.toggle-wrap { display:flex; align-items:center; gap:10px; }
.toggle { position:relative; width:42px; height:24px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle label { position:absolute; inset:0; background:var(--g3); border-radius:12px; cursor:pointer; transition:background .2s; }
.toggle label::after { content:''; position:absolute; width:18px; height:18px; background:#fff; border-radius:50%; top:3px; left:3px; transition:transform .2s; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.toggle input:checked + label { background:var(--blue); }
.toggle input:checked + label::after { transform:translateX(18px); }

/* ── BADGES ── */
.status-badge { display:inline-block; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.04em; white-space:nowrap; }
.status-nova { background:#fff8e0; color:#b07b00; }
.status-obrada,.status-u-obradi { background:var(--blue3); color:var(--blue); }
.status-zavrsena { background:#e4fff3; color:#00a058; }
.status-otkazana { background:#fff0f0; color:#cc2020; }

/* ── FLASH ── */
.flash { padding:12px 16px; border-radius:9px; font-size:13px; font-weight:600; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.ok  { background:#e4fff3; color:#008a50; border:1px solid #b8fce0; }
.err { background:#fff0f0; color:#cc2020; border:1px solid #ffc0c0; }
.flash svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.5; flex-shrink:0; }

/* ── SVG PREVIEW ── */
.svg-preview { width:48px; height:48px; background:var(--blue3); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--blue); }
.svg-preview svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; }

/* ── PAGINATION ── */
.pagination { display:flex; gap:6px; flex-wrap:wrap; padding:14px 18px; border-top:1px solid var(--g4); }
.page-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:7px; font-size:12px; font-weight:700; color:var(--g1); background:var(--g4); border:none; cursor:pointer; text-decoration:none; transition:all .12s; }
.page-btn:hover,.page-btn.active { background:var(--blue); color:#fff; }

/* ── GRID HELPERS ── */
.adm-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.adm-grid-s { display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
.adm-grid-m { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
.adm-grid-l { display:grid; grid-template-columns:1fr 400px; gap:20px; align-items:start; }
.adm-stack  { display:flex; flex-direction:column; gap:16px; }

/* ── LOGIN ── */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0d1520,#1a2a40); padding:20px; }
.login-box { background:var(--white); border-radius:16px; padding:36px; width:100%; max-width:380px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.login-logo { text-align:center; margin-bottom:26px; }
.login-logo .logo { font-family:Georgia,serif; font-style:italic; font-size:28px; color:var(--ink); }
.login-logo .logo em { font-style:normal; font-weight:900; color:var(--blue); }
.login-logo small { display:block; font-size:11px; color:var(--g2); margin-top:4px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.lock-icon { width:56px; height:56px; background:var(--blue3); border-radius:14px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.lock-icon svg { width:26px; height:26px; stroke:var(--blue); fill:none; stroke-width:2; }

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
@media(max-width:1200px) {
  .stats-grid { grid-template-columns:repeat(3,1fr); }
}

@media(max-width:1024px) {
  :root { --sw:220px; }
  .adm-grid-l { grid-template-columns:1fr 360px; }
}

@media(max-width:768px) {
  /* Sidebar drawer */
  .admin-sidebar { transform:translateX(-100%); }
  .admin-sidebar.open { transform:translateX(0); box-shadow:4px 0 32px rgba(13,21,32,.35); }
  .admin-main { margin-left:0; }
  .sidebar-toggle { display:flex; }

  /* Topbar */
  .admin-topbar { padding:0 60px 0 16px; height:52px; }
  .topbar-title { font-size:14px; }

  /* Body */
  .admin-body { padding:12px 12px 24px; }

  /* Stats — 2 cols */
  .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .stat-card { padding:12px; gap:10px; }
  .stat-num { font-size:20px; }
  .stat-icon { width:38px; height:38px; }

  /* Grids → 1 col */
  .adm-grid-2,
  .adm-grid-s,
  .adm-grid-m,
  .adm-grid-l { grid-template-columns:1fr !important; }

  /* Form */
  .form-row.cols-2,.form-row.cols-3 { grid-template-columns:1fr; }
  .form-footer { flex-direction:column; }
  .form-footer .tb-btn { width:100%; justify-content:center; }

  /* TABLE: hide on mobile, show cards */
  .orders-table-wrap { display:none; }
  .order-cards { display:block; }

  /* Generic table → card list */
  .data-card > .table-wrap { display:none; }
  .card-list { display:block; }

  /* Buttons in topbar - icon only */
  .topbar-right .tb-btn span { display:none; }

  /* Hide desktop-only cols */
  .hide-mob { display:none !important; }
}

@media(max-width:480px) {
  .stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .stat-card { flex-direction:column; text-align:center; gap:6px; padding:10px; }
  .admin-topbar { padding:0 54px 0 12px; height:48px; }
  .admin-body { padding:10px 10px 24px; }
  .login-box { padding:24px 18px; }
  .tb-btn { padding:7px 10px; font-size:11px; }
}