/* =========================================================
   TUCAL — Design system
   Palette : bleu-nuit logistique + ambre "étiquette d'entrepôt"
   Type : Inter (UI) + JetBrains Mono (références palettes)
   ========================================================= */

:root{
  --navy-900: #0F1B2E;
  --navy-800: #152238;
  --navy-700: #1D3050;
  --navy-600: #2B4266;
  --steel-300: #A9B7CC;
  --steel-100: #E7ECF3;
  --paper: #F6F5F1;
  --amber: #EA9010;
  --amber-dark: #C77208;
  --green: #3B7A57;
  --green-bg: #E4F0E9;
  --red: #B23A48;
  --red-bg: #F6E3E5;
  --line: #DDE2EA;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-1: 0 1px 2px rgba(15,27,46,0.06), 0 1px 1px rgba(15,27,46,0.04);
  --shadow-2: 0 8px 24px rgba(15,27,46,0.14);

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--navy-900);
  -webkit-font-smoothing: antialiased;
}
button, input{ font-family: inherit; }
h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
a{ color: inherit; }

.screen{ min-height:100dvh; }
.screen[hidden]{ display:none; }

/* ---------------- Toasts ---------------- */
.toast-zone{
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 999; display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  background: var(--navy-900); color:#fff;
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight:500; box-shadow: var(--shadow-2);
  animation: toast-in .18s ease-out;
  max-width: 90vw;
}
.toast.success{ background: var(--green); }
.toast.error{ background: var(--red); }
@keyframes toast-in{ from{ opacity:0; transform: translateY(-8px);} to{opacity:1; transform:none;} }

/* ---------------- Login ---------------- */
#view-login{
  background:
    radial-gradient(1100px 500px at 12% -10%, #1D3050 0%, transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
  display:flex; align-items:center; justify-content:center; padding: 32px 20px;
}
.login-wrap{ width:100%; max-width: 380px; }
.brand-mark{ margin-bottom: 18px; }
#view-login h1{
  color:#fff; font-size: 30px; font-weight:800; letter-spacing: 0.5px;
}
.login-sub{ color: var(--steel-300); font-size: 14px; margin-top:4px; margin-bottom: 28px; }
.login-form{ display:flex; flex-direction:column; gap:14px; }
.login-form label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color: var(--steel-300); font-weight:500; }
.login-form input{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color:#fff; border-radius: var(--radius-sm); padding: 11px 12px; font-size: 15px;
  outline:none;
}
.login-form input::placeholder{ color: rgba(255,255,255,0.35); }
.login-form input:focus{ border-color: var(--amber); box-shadow: 0 0 0 3px rgba(234,144,16,0.25); }
.login-error{ color:#FFB4BB; font-size: 13px; }

.login-config{ margin-top: 26px; color: var(--steel-300); }
.login-config summary{ cursor:pointer; font-size: 13px; font-weight:600; }
.config-body{ margin-top: 12px; display:flex; flex-direction:column; gap:10px; }
.config-body input{
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  color:#fff; border-radius: var(--radius-sm); padding: 9px 10px; font-size: 13px; width:100%;
}
.config-body .hint{ font-size: 11.5px; color: rgba(255,255,255,0.4); line-height:1.5; }

/* ---------------- Buttons ---------------- */
.btn{
  border:none; border-radius: var(--radius-sm); padding: 11px 18px;
  font-size: 14.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; transition: transform .05s ease, background .15s ease;
}
.btn:active{ transform: scale(0.98); }
.btn-block{ width:100%; }
.btn-primary{ background: var(--amber); color: var(--navy-900); }
.btn-primary:hover{ background: var(--amber-dark); }
.btn-secondary{ background: var(--navy-800); color:#fff; }
.btn-secondary:hover{ background: var(--navy-700); }
.btn-ghost{ background: transparent; color: var(--steel-300); border:1px solid rgba(255,255,255,0.16); }
.btn-outline{ background:#fff; color: var(--navy-800); border:1px solid var(--line); }
.btn-outline:hover{ border-color: var(--navy-600); }
.btn-danger{ background: var(--red-bg); color: var(--red); }
.btn-sm{ padding: 7px 12px; font-size: 13px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------------- App shell ---------------- */
.app-shell{ display:flex; flex-direction:column; height:100dvh; overflow:hidden; }

.topbar{
  height:56px; flex:0 0 auto; background: var(--navy-900); color:#fff;
  display:flex; align-items:center; padding: 0 12px; gap:12px; z-index:20;
}
.icon-btn{
  background:none; border:none; color:#fff; width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-btn:hover{ background: rgba(255,255,255,0.08); }
.topbar-title{ font-weight:700; font-size: 16px; flex:1; }
.role-pill{
  font-size: 11px; font-weight:700; letter-spacing:.3px; background: rgba(234,144,16,0.18);
  color: var(--amber); padding: 4px 9px; border-radius: 999px;
}

.sidenav{
  position: fixed; top:0; left:0; bottom:0; width: 232px; background: var(--navy-800);
  color: var(--steel-100); z-index: 40; display:flex; flex-direction:column; padding: 16px 10px;
  transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-2);
}
.sidenav.open{ transform: translateX(0); }
.sidenav-brand{ font-weight:800; font-size:18px; color:#fff; padding: 6px 12px 18px; letter-spacing:.5px; }
.nav-item{
  background:none; border:none; color: var(--steel-100); text-align:left; padding: 11px 12px;
  border-radius: var(--radius-sm); display:flex; align-items:center; gap:12px; font-size: 14.5px;
  font-weight:500; cursor:pointer;
}
.nav-item:hover{ background: rgba(255,255,255,0.06); }
.nav-item.active{ background: rgba(234,144,16,0.16); color: var(--amber); }
.nav-ico{ width:18px; text-align:center; font-size: 16px; }
.sidenav-spacer{ flex:1; }
.nav-logout{ color:#FFB4BB; }
.nav-overlay{
  position:fixed; inset:0; background: rgba(15,27,46,0.5); z-index:30; opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
.nav-overlay.show{ opacity:1; pointer-events:auto; }

.content{ flex:1; overflow-y:auto; padding: 18px 16px 90px; }
@media (min-width: 900px){
  .sidenav{ transform: translateX(0); position: sticky; box-shadow:none; }
  .nav-overlay{ display:none; }
  .app-shell{ flex-direction: row; flex-wrap:wrap; }
  .topbar{ width:100%; }
  .content{ padding: 26px 32px 40px; max-width: 1080px; }
  .bottom-tabs{ display:none; }
  #btn-menu{ display:none; }
}

.bottom-tabs{
  position: fixed; bottom:0; left:0; right:0; height: 62px; background:#fff; border-top: 1px solid var(--line);
  display:flex; z-index: 20; padding-bottom: env(safe-area-inset-bottom);
}
.tab-item{
  flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; color: var(--navy-600); font-size:11px; cursor:pointer;
}
.tab-item .nav-ico{ font-size: 19px; }
.tab-item.active{ color: var(--amber-dark); }

/* ---------------- Generic content blocks ---------------- */
.page-head{ margin-bottom: 18px; }
.page-head h2{ font-size: 21px; font-weight:800; }
.page-head p{ color: var(--navy-600); font-size: 13.5px; margin-top:4px; }

.card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow-1);
}
.card + .card{ margin-top: 14px; }

.grid-stats{ display:grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media (min-width:700px){ .grid-stats{ grid-template-columns: repeat(3,1fr);} }
.stat-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 16px;
}
.stat-card .stat-num{ font-family: var(--font-mono); font-size: 28px; font-weight:700; color: var(--navy-900); }
.stat-card .stat-label{ font-size: 12.5px; color: var(--navy-600); margin-top:4px; }
.stat-card.accent .stat-num{ color: var(--amber-dark); }

.quick-actions{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top: 18px; }
@media (min-width:700px){ .quick-actions{ grid-template-columns: repeat(4,1fr);} }
.quick-action{
  background: var(--navy-800); color:#fff; border:none; border-radius: var(--radius);
  padding: 18px 14px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; cursor:pointer;
  font-weight:600; font-size: 13.5px;
}
.quick-action .qa-ico{ font-size: 20px; color: var(--amber); }
.quick-action:hover{ background: var(--navy-700); }

/* Search / list */
.search-bar{ display:flex; gap:8px; margin-bottom:14px; }
.search-bar input{
  flex:1; padding: 11px 14px; border-radius: var(--radius-sm); border:1px solid var(--line); font-size:14.5px;
}
.filters-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 14px; }
.chip{
  padding: 6px 12px; border-radius: 999px; border:1px solid var(--line); font-size: 12.5px; cursor:pointer;
  background:#fff; color: var(--navy-700); font-weight:600;
}
.chip.active{ background: var(--navy-800); color:#fff; border-color: var(--navy-800); }

.palette-row{
  display:flex; align-items:center; gap:12px; padding: 13px 14px; background:#fff;
  border:1px solid var(--line); border-radius: var(--radius-sm); cursor:pointer; margin-bottom:8px;
}
.palette-row:hover{ border-color: var(--navy-600); }
.palette-ref{ font-family: var(--font-mono); font-weight:700; font-size: 14px; }
.palette-meta{ font-size: 12px; color: var(--navy-600); margin-top:2px; }
.palette-row .spacer{ flex:1; }

.badge{
  display:inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight:700;
  letter-spacing:.2px;
}
.badge.tunis{ background:#E7ECF3; color: var(--navy-700); }
.badge.sousse{ background: #FCEBD6; color: var(--amber-dark); }
.badge.transit{ background: var(--green-bg); color: var(--green); }
.badge.archive{ background:#eee; color:#888; }

/* Palette detail */
.detail-header{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; flex-wrap:wrap; }
.detail-ref{ font-family: var(--font-mono); font-size: 22px; font-weight:800; }
.detail-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 12px 20px; margin-top: 14px; }
@media (min-width:600px){ .detail-grid{ grid-template-columns: repeat(3,1fr);} }
.detail-field .k{ font-size: 11.5px; color: var(--navy-600); text-transform:none; }
.detail-field .v{ font-size: 14.5px; font-weight:600; margin-top:2px; }

.action-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 18px; }

.timeline{ margin-top: 6px; }
.tl-item{ display:flex; gap:12px; padding: 10px 0; border-bottom:1px dashed var(--line); }
.tl-item:last-child{ border-bottom:none; }
.tl-dot{ width:10px; height:10px; border-radius:50%; background: var(--amber); margin-top:5px; flex:0 0 auto; }
.tl-body .tl-op{ font-weight:700; font-size:13.5px; }
.tl-body .tl-sub{ font-size: 12px; color: var(--navy-600); margin-top:2px; }

/* Scan */
.scan-frame{
  aspect-ratio: 1/1; max-width: 380px; margin: 0 auto; border-radius: var(--radius);
  overflow:hidden; background: var(--navy-900); position:relative;
}
#qr-reader{ width:100%; height:100%; }
.scan-hint{ text-align:center; color: var(--navy-600); font-size: 13px; margin-top: 14px; }
.manual-entry{ display:flex; gap:8px; margin-top: 18px; max-width: 420px; margin-left:auto; margin-right:auto; }
.manual-entry input{ flex:1; padding:11px 12px; border-radius: var(--radius-sm); border:1px solid var(--line); font-family: var(--font-mono);}

.qr-preview{ display:flex; flex-direction:column; align-items:center; gap:10px; padding: 20px; }
.qr-preview canvas, .qr-preview img{ background:#fff; padding:10px; border-radius: 8px; border:1px solid var(--line);}

/* Forms */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width:560px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size: 12.5px; font-weight:600; color: var(--navy-700); }
.field input, .field select, .field textarea{
  padding: 10px 12px; border-radius: var(--radius-sm); border:1px solid var(--line); font-size:14px;
}
.field.full{ grid-column: 1/-1; }

/* Table (admin/export) */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius); background:#fff; }
table{ width:100%; border-collapse: collapse; font-size: 13.5px; }
th{ text-align:left; padding: 10px 14px; background: var(--steel-100); font-weight:700; color: var(--navy-700); white-space:nowrap; }
td{ padding: 10px 14px; border-top:1px solid var(--line); white-space:nowrap; }
tr:hover td{ background: #FAFAF8; }

.tabs-row{ display:flex; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.tab-btn{
  background:none; border:none; padding: 10px 14px; font-weight:600; color: var(--navy-600); cursor:pointer;
  border-bottom: 2px solid transparent; font-size: 13.5px;
}
.tab-btn.active{ color: var(--navy-900); border-bottom-color: var(--amber); }

.empty-state{ text-align:center; padding: 40px 20px; color: var(--navy-600); }
.empty-state .es-ico{ font-size: 34px; margin-bottom:10px; opacity:.5; }

.modal-backdrop{
  position:fixed; inset:0; background: rgba(15,27,46,0.55); z-index:60; display:flex;
  align-items:center; justify-content:center; padding: 20px;
}
.modal{ background:#fff; border-radius: var(--radius); padding: 22px; max-width: 440px; width:100%; box-shadow: var(--shadow-2); }
.modal h3{ font-size: 17px; margin-bottom: 6px; }
.modal p{ font-size: 13.5px; color: var(--navy-600); margin-bottom: 16px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top: 18px; }

.demo-banner{
  background: var(--amber); color: var(--navy-900); font-size: 12.5px; font-weight:700;
  text-align:center; padding: 7px; letter-spacing:.2px;
}