@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:     #0d1117;
  --bg2:    #161b26;
  --bg3:    #1c2333;
  --bg4:    #212840;
  --border: #2a3148;
  --accent: #e84040;
  --green:  #3fb950;
  --yellow: #d29922;
  --blue:   #388bfd;
  --text:   #c9d1d9;
  --dim:    #6e7681;
  --head:   #f0f6fc;
  --mono:   'JetBrains Mono', monospace;
  --sans:   'Inter', sans-serif;
  --r:      6px;
  --sidebar-w: 220px;
}

body{font-family:var(--sans);font-size:.9rem;background:var(--bg);color:var(--text);line-height:1.5}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
img{display:block;max-width:100%}
.mono{font-family:var(--mono);font-size:.8rem}
.dim{color:var(--dim)}
.warn{color:var(--yellow)}

/* ── LAYOUT ──────────────────────────────── */
.admin-body{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}

/* ── SIDEBAR ─────────────────────────────── */
.admin-sidebar{
  background:var(--bg2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto
}
.admin-logo{
  font-family:var(--mono);font-size:1.2rem;font-weight:700;
  color:var(--head);padding:1.2rem 1.2rem .8rem;letter-spacing:.08em
}
.admin-logo span{color:var(--accent)}
.admin-nav{flex:1;padding:.4rem 0}
.admin-nav a{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem 1.2rem;color:var(--dim);font-size:.88rem;
  border-left:3px solid transparent;transition:background .12s,color .12s,border-color .12s
}
.admin-nav a:hover{background:var(--bg3);color:var(--text);text-decoration:none;border-left-color:var(--border)}
.admin-nav a.active{background:var(--bg3);color:var(--head);border-left-color:var(--accent);font-weight:500}
.admin-sidebar-footer{
  padding:.8rem 1.2rem;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;color:var(--dim)
}
.logout-link{color:var(--dim);font-size:.78rem}
.logout-link:hover{color:var(--accent)}

/* ── MAIN ────────────────────────────────── */
.admin-main{display:flex;flex-direction:column;min-width:0}
.admin-topbar{
  background:var(--bg2);border-bottom:1px solid var(--border);
  padding:.8rem 1.5rem;position:sticky;top:0;z-index:50
}
.admin-page-title{font-size:1.1rem;font-weight:600;color:var(--head)}
.admin-content{padding:1.5rem;flex:1}

/* ── CARD ────────────────────────────────── */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.card-header{
  padding:.7rem 1rem;background:var(--bg3);border-bottom:1px solid var(--border);
  font-weight:600;color:var(--head);font-size:.88rem;display:flex;align-items:center;gap:.5rem
}
.mt-1{margin-top:1rem}.mt-2{margin-top:1.5rem}
.empty-hint{padding:2rem;text-align:center;color:var(--dim)}

/* ── STATS ───────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:1.2rem 1rem;text-align:center
}
.stat-card--warn{border-color:var(--yellow)}
.stat-icon{font-size:1.5rem;margin-bottom:.4rem}
.stat-value{font-size:2rem;font-weight:700;color:var(--head);line-height:1}
.stat-label{font-size:.78rem;color:var(--dim);margin-top:.3rem}

/* ── TABLE ───────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;font-size:.85rem}
.data-table th{
  background:var(--bg3);color:var(--dim);font-weight:500;
  padding:.55rem .8rem;text-align:left;border-bottom:1px solid var(--border);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.05em
}
.data-table td{padding:.5rem .8rem;border-bottom:1px solid var(--border);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:rgba(255,255,255,.02)}
.data-table tr.row-warn td{background:rgba(210,153,34,.05)}
.table-thumb{width:44px;height:34px;object-fit:contain;border-radius:3px;background:var(--bg3)}
.actions{display:flex;gap:.3rem;flex-wrap:wrap}

/* ── TOOLBAR ─────────────────────────────── */
.toolbar{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
.toolbar-search{display:flex;gap:.4rem;flex:1;flex-wrap:wrap}
.toolbar-search input,.toolbar-search select{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:.4rem .8rem;color:var(--text);font-size:.88rem;outline:none
}
.toolbar-search input:focus,.toolbar-search select:focus{border-color:var(--accent)}

/* ── BUTTONS ─────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.4rem .9rem;border-radius:var(--r);border:1px solid transparent;
  font-size:.85rem;font-weight:500;cursor:pointer;font-family:var(--sans);
  transition:background .15s,border-color .15s,color .15s;white-space:nowrap;
  text-decoration:none
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:#c83535;border-color:#c83535}
.btn-ghost{background:var(--bg3);color:var(--text);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--text)}
.btn-danger{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-danger:hover{background:var(--accent);color:#fff}
.btn-sm{padding:.3rem .65rem;font-size:.78rem}
.btn-block{width:100%;justify-content:center}

/* ── FORMS ───────────────────────────────── */
.edit-form{padding:1.2rem}
.form-group{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.form-group label{font-size:.82rem;color:var(--dim);font-weight:500}
.form-group input,.form-group select,.form-group textarea{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  padding:.5rem .8rem;color:var(--text);font-size:.9rem;font-family:var(--sans);outline:none;width:100%
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent)}
.form-group textarea{resize:vertical;min-height:100px}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-section{
  border:1px solid var(--border);border-radius:var(--r);padding:1rem;
  margin-bottom:1rem;
}
.form-section legend{
  padding:0 .5rem;color:var(--dim);font-size:.82rem;font-weight:600
}
.form-actions{display:flex;gap:.6rem;padding-top:.5rem;border-top:1px solid var(--border);margin-top:1rem}
.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--text)}
.checkbox-label input{width:auto}

/* Tabs dla źródeł obrazków */
.img-source-tabs{display:flex;gap:.3rem;margin-bottom:.6rem;flex-wrap:wrap}
.tab-btn{
  background:var(--bg3);border:1px solid var(--border);color:var(--dim);
  border-radius:var(--r);padding:.3rem .7rem;font-size:.78rem;cursor:pointer;font-family:var(--sans)
}
.tab-btn.active{background:var(--bg4);border-color:var(--accent);color:var(--text)}
.tab-content{display:none}
.tab-content.active{display:block}

/* Galeria w formularzu */
.gallery-current{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.8rem}
.gallery-current-item{display:flex;flex-direction:column;gap:.2rem;align-items:center}
.gallery-current-item img{width:72px;height:56px;object-fit:contain;border:1px solid var(--border);border-radius:3px;background:var(--bg3)}
.gallery-current-item small{font-size:.65rem;color:var(--dim);max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gallery-url-row{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}
.gallery-slot-no{color:var(--dim);font-family:var(--mono);font-size:.78rem;min-width:1.2rem}
.remove-row{flex-shrink:0}
.current-img-wrap{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
.current-img-preview{width:80px;height:60px;object-fit:contain;border:1px solid var(--border);border-radius:var(--r);background:var(--bg3)}

/* ── STOCK ───────────────────────────────── */
.stock-layout{display:grid;grid-template-columns:280px 1fr;gap:1rem;align-items:start}
.stock-list-card{max-height:calc(100vh - 120px);display:flex;flex-direction:column}
.stock-product-list{overflow-y:auto;flex:1}
.stock-product-row{
  display:flex;align-items:center;gap:.5rem;
  padding:.55rem .8rem;border-bottom:1px solid var(--border);
  color:var(--text);cursor:pointer;transition:background .1s;text-decoration:none
}
.stock-product-row:hover{background:var(--bg3)}
.stock-product-row.active{background:var(--bg4);border-left:3px solid var(--accent)}
.stock-product-row.zero{color:var(--yellow)}
.stock-product-name{flex:1;font-size:.85rem}
.stock-product-meta{font-size:.72rem;color:var(--dim)}
.stock-right{display:flex;flex-direction:column;gap:1rem}
.stock-current-box{display:flex;align-items:center;gap:1.5rem;padding:1rem 1.2rem}
.stock-current-label{font-size:.82rem;color:var(--dim)}
.stock-current-value{font-size:2.5rem;font-weight:700;color:var(--green);line-height:1}
.stock-current-value.zero{color:var(--yellow)}
.stock-form{padding:0 1.2rem 1.2rem}
.stock-badge{
  display:inline-block;padding:.1rem .45rem;border-radius:3px;
  font-family:var(--mono);font-size:.78rem;background:rgba(63,185,80,.15);color:var(--green)
}
.stock-zero{background:rgba(210,153,34,.15);color:var(--yellow)}
.stock-low{background:rgba(232,64,64,.12);color:#e84040}
.stock-old{color:var(--dim)}

/* ── SHELVES ─────────────────────────────── */
.shelves-layout{display:grid;grid-template-columns:260px 1fr;gap:1rem;align-items:start}
.shelves-list-card{max-height:calc(100vh - 120px);display:flex;flex-direction:column}
.shelves-list{overflow-y:auto;flex:1}
.shelf-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem .9rem;border-bottom:1px solid var(--border);
  color:var(--text);text-decoration:none;transition:background .1s
}
.shelf-row:hover{background:var(--bg3)}
.shelf-row.active{background:var(--bg4);border-left:3px solid var(--accent)}
.shelf-name{font-weight:500}
.shelf-count{font-family:var(--mono);font-size:.8rem;color:var(--dim)}
.shelves-right{display:flex;flex-direction:column;gap:1rem}

/* ── ROLE BADGES ─────────────────────────── */
.role-badge{
  display:inline-block;padding:.1rem .5rem;border-radius:3px;font-size:.72rem;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em
}
.role-superadmin{background:rgba(232,64,64,.2);color:var(--accent)}
.role-admin{background:rgba(56,139,253,.2);color:var(--blue)}
.role-magazynier{background:rgba(63,185,80,.15);color:var(--green)}

/* ── USERS ───────────────────────────────── */
.users-layout{display:flex;flex-direction:column;gap:1rem}

/* ── MODAL ───────────────────────────────── */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.7);
  z-index:200;display:flex;align-items:center;justify-content:center
}
.modal-box{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  width:460px;max-width:95vw;max-height:90vh;overflow-y:auto
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1rem;border-bottom:1px solid var(--border)
}
.modal-header h2{font-size:1rem;font-weight:600;color:var(--head)}
.modal-close{background:none;border:none;color:var(--dim);font-size:1.2rem;cursor:pointer;line-height:1}
.modal-close:hover{color:var(--accent)}
.modal-box .edit-form{padding:1rem}

/* ── ALERTS ──────────────────────────────── */
.alert{padding:.7rem 1rem;border-radius:var(--r);margin-bottom:1rem;font-size:.88rem;border:1px solid}
.alert-error{background:rgba(232,64,64,.12);border-color:rgba(232,64,64,.4);color:#ff8080}
.alert-success{background:rgba(63,185,80,.1);border-color:rgba(63,185,80,.3);color:var(--green)}

/* ── LOGIN ───────────────────────────────── */
.login-wrap{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:2.5rem 2rem;width:360px;max-width:95vw
}
.login-logo{
  font-family:var(--mono);font-size:1.4rem;font-weight:700;
  color:var(--head);text-align:center;margin-bottom:1.5rem;letter-spacing:.08em
}
.login-logo span{color:var(--accent)}
.login-logo small{font-size:.7rem;color:var(--dim);display:block;letter-spacing:.15em;margin-top:.2rem}
.login-form{display:flex;flex-direction:column;gap:1rem}
.login-form label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;color:var(--dim)}
.login-form input{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  padding:.6rem .9rem;color:var(--text);font-size:.95rem;outline:none
}
.login-form input:focus{border-color:var(--accent)}
.login-hint{text-align:center;font-size:.75rem;color:var(--dim);margin-top:1rem}
.login-hint code{background:var(--bg3);padding:.1rem .3rem;border-radius:3px;font-family:var(--mono)}

/* ============================================================
   RESPONSYWNOŚĆ – panel admina na mobile
   ============================================================ */
@media (max-width: 900px) {
  :root { --sidebar-w: 180px; }
  .admin-body { grid-template-columns: var(--sidebar-w) 1fr; }
  .admin-nav a { padding: .5rem .8rem; font-size: .82rem; }
  .admin-logo { font-size: 1rem; padding: 1rem .8rem .6rem; }
}

@media (max-width: 680px) {
  /* Sidebar chowany – tylko ikony lub hamburger */
  .admin-body { grid-template-columns: 1fr; }

  .admin-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 240px;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .admin-sidebar.open { transform: translateX(0); }

  .admin-main { min-width: 0; }

  .admin-topbar {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem 1rem;
  }
  .admin-topbar::before {
    content: '☰';
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--text);
    flex-shrink: 0;
  }
  .admin-content { padding: 1rem; }

  .form-grid-2 { grid-template-columns: 1fr; }

  /* Tabela poziomo scrollowalna */
  .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 600px; }
  .card { overflow-x: auto; }

  /* Toolbar pionowo */
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-search { flex-wrap: wrap; }

  /* Upload – pełna szerokość */
  input[type="file"] { width: 100%; font-size: .85rem; }

  /* Stock layout */
  .stock-layout { grid-template-columns: 1fr; }
  .shelves-layout { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .admin-content { padding: .6rem; }
  .edit-form { padding: .8rem; }
  .form-section { padding: .75rem; }
  .btn { padding: .4rem .7rem; font-size: .8rem; }
}

.nav-group-label {
  font-size: .67rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--border);
  padding: .9rem 1.2rem .2rem;
  font-weight: 600;
}
.btn-yellow{background:rgba(240,180,41,.1);border-color:#f0b429;color:#f0b429}