:root{
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  /* Light industrial */
  --bg: #eef2f6;        /* mai “soft”, nu alb */
  --grid: rgba(15, 23, 42, 0.055);

  --panel: #f6f8fb;     /* carduri ușor “tinted” */
  --panel-2: #f1f5f9;   /* secundar */

  --text: #0f172a;
  --muted: #64748b;

  --border: #d8e0ea;
  --border-2: #e6edf5;

  /* Industrial accent */
  --accent: #0ea5e9;     /* industrial blue */
  --accent-strong: #0284c7;
  --warning: #f59e0b;    /* safety amber */
  --success: #16a34a;
  --danger: #dc2626;

  --radius: 12px;
  --radius-sm: 10px;

  --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.08);
  --shadow: 0 10px 26px rgba(15, 23, 42, 0.10);

  --ring: 0 0 0 4px rgba(14, 165, 233, 0.18);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

/* Media defaults */
img{
  max-width: 100%;
  height: auto;
}
svg{
  max-width: 100%;
}

/* Prevent form controls from overflowing on small screens */
input, select, textarea{
  max-width: 100%;
}

body{
  margin: 0;
  font-family: var(--font);
  color: var(--text);

  /* “industrial sheet” + grid discret (ca planșe tehnice) */
  background:
  radial-gradient(900px 520px at 18% 6%, rgba(14,165,233,0.10), transparent 60%),
  radial-gradient(860px 520px at 88% 92%, rgba(245,158,11,0.06), transparent 55%),
  linear-gradient(180deg, #eef2f6 0%, #e7edf4 100%);
}

a{ color: var(--accent-strong); text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px;
}

.muted{ color: var(--muted); }
.small{ font-size: 12px; }

/* Headings */
h1{
  margin: 10px 0 14px;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -0.02em;
}
h2{ margin: 10px 0; font-size: 18px; }
h3{ margin: 14px 0 8px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.row{
  display: flex;
  gap: 12px;
  align-items: center;
}

/* allow flex children to shrink (avoid horizontal overflow) */
.row > *{ min-width: 0; }

.space{ justify-content: space-between; }

/* Header: keep single-line on desktop; allow wrap on mobile */
.topbar .row{
  flex-wrap: nowrap;
}

.brand{
  font-weight: 900;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.nav{
  margin-left: auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.nav a{
  color: var(--text);
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.nav a:hover{
  text-decoration: none;
  background: rgba(14,165,233,0.08);
  border-color: rgba(14,165,233,0.18);
}

@media (max-width: 760px){
  .container{ padding: 14px; }

  .topbar .row{ flex-wrap: wrap; }

  .nav{
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .nav a,
  .nav .muted{
    white-space: nowrap;
  }

  .card{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table th,
  .table td{
    padding: 10px;
  }
}

.footer{
  opacity: .9;
  padding: 26px 18px 34px;
}

/* Cards */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.link{ display: block; color: inherit; }
.link:hover{ text-decoration: none; border-color: rgba(14,165,233,0.35); }

/* Forms */
label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}

input{
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  outline: none;
}

input:focus{
  border-color: rgba(14,165,233,0.55);
  box-shadow: var(--ring);
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 12px;

  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #f3f6fb);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(15,23,42,0.04);
}

.btn:hover{ filter: brightness(1.02); text-decoration: none; }

.btn-primary{
  border-color: rgba(14,165,233,0.45);
  background: linear-gradient(180deg, rgba(14,165,233,0.18), rgba(14,165,233,0.06));
}

.btn-primary:hover{
  border-color: rgba(14,165,233,0.65);
}

/* Flash messages */
.flash{
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.flash-error{
  border-color: rgba(220,38,38,0.30);
  background: rgba(220,38,38,0.06);
}

.flash-success{
  border-color: rgba(22,163,74,0.30);
  background: rgba(22,163,74,0.06);
}

/* Tables */
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table th, .table td{
  padding: 12px;
  border-bottom: 1px solid var(--border-2);
  vertical-align: top;
}

.table th{
  text-align: left;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: linear-gradient(180deg, #ffffff, #f7fafc);
}

.table tr:last-child td{ border-bottom: none; }

/* Grid & pills */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.pill{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #f4f7fb);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(15,23,42,0.03);
}

/* Code chips (în permissions list) */
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  background: rgba(2,132,199,0.08);
  border: 1px solid rgba(2,132,199,0.18);
  padding: 2px 6px;
  border-radius: 8px;
}

/* ---------------- AUTH (login) minimal layout ---------------- */
.auth-body{
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 16px;

  background:
    radial-gradient(950px 520px at 18% 10%, rgba(14,165,233,0.12), transparent 60%),
    radial-gradient(860px 520px at 88% 92%, rgba(245,158,11,0.08), transparent 55%),
    repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.05) 0, rgba(15, 23, 42, 0.05) 1px, transparent 1px, transparent 26px),
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.05) 0, rgba(15, 23, 42, 0.05) 1px, transparent 1px, transparent 26px),
    var(--bg);
}

.auth-wrap{
  width: 100%;
  max-width: 560px;
}

.auth-main{
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(246,248,251,0.92); /* mai “tinted” */
  backdrop-filter: blur(8px);
  padding: clamp(14px, 3vw, 22px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

/* responsive fine-tuning */
@media (max-width: 480px){
  .container{ padding: 14px; }
  .auth-body{ padding: 12px; }
  .nav{ justify-content: flex-start; margin-left: 0; }
}

.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
}

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}

.kpi-label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 800;
}

.kpi-value{
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.02em;
  margin-top: 6px;
}

.kpi-sub{ margin-top: 6px; }

.tile-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.tile{
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.tile-icon{
  font-size: 22px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.75);
}

.tile-title{
  margin-top: 10px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.tile-sub{ margin-top: 6px; }

.tile.link:hover{
  text-decoration: none;
  border-color: rgba(14,165,233,0.45);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
  transition: 140ms ease;
}

.tile-disabled{
  opacity: .55;
  border-style: dashed;
}

.details summary{
  cursor: pointer;
  font-weight: 900;
}

.pill-wrap{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}


.dashboard-shell{
  margin-bottom: 16px;
}

.dashboard-shell-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.dashboard-title{
  font-size: 16px;
  font-weight: 900;
}

.dashboard-create-form,
.dashboard-assign-form,
.dashboard-active-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.dashboard-create-form input,
.dashboard-assign-form select{
  min-width: 220px;
}

.dashboard-tabs-nav{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.dashboard-tab-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #f3f6fb);
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
}

.dashboard-tab-chip:hover{
  text-decoration: none;
  border-color: rgba(14,165,233,0.4);
}

.dashboard-tab-chip.is-active{
  border-color: rgba(14,165,233,0.6);
  background: linear-gradient(180deg, rgba(14,165,233,0.2), rgba(14,165,233,0.08));
  box-shadow: var(--shadow-sm);
}

.dashboard-tab-count{
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,0.07);
  font-size: 12px;
}

.dashboard-active-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.dashboard-active-title{
  margin: 0 0 6px;
}

.dashboard-module-wrap{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-module-remove{
  display: flex;
}

.dashboard-empty{
  border-style: dashed;
  color: var(--muted);
}

.btn-ghost-danger,
.btn-danger-soft{
  border-color: rgba(220,38,38,0.25);
  background: rgba(220,38,38,0.06);
  color: #991b1b;
}

.btn-ghost-danger:hover,
.btn-danger-soft:hover{
  border-color: rgba(220,38,38,0.4);
}

/* Tree indentation helper (used in locations/categories tables) */
.tree-indent{
  padding-left: var(--indent, 0px);
}

@media (max-width: 760px){
  .dashboard-create-form,
  .dashboard-assign-form,
  .dashboard-active-actions{
    width: 100%;
  }

  .dashboard-create-form input,
  .dashboard-assign-form select,
  .dashboard-create-form .btn,
  .dashboard-assign-form .btn,
  .dashboard-active-actions form,
  .dashboard-active-actions .btn{
    width: 100%;
  }

  .dashboard-tabs-nav{
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .tree-indent{
    /* cap indent so deep trees don't blow up the table on phones */
    padding-left: clamp(0px, var(--indent, 0px), 18px);
  }
}

/* ---- Brand logo (global) ---- */
.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-logo{
  height: 52px;        /* <- mai mare */
  width: auto;
  max-width: 240px;    /* să nu rupă headerul dacă e foarte lat */
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.18));
}

@media (max-width: 520px){
  .brand-logo{ height: 40px; }
}

/* ---- Auth (login) logo ---- */
.auth-logo{
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.auth-logo img{
  height: 90px;        /* <- login mai mare */
  width: auto;
  max-width: 320px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(15, 23, 42, 0.18));
}

@media (max-width: 520px){
  .auth-logo img{ height: 70px; }
}

/* =========================================================
   Inline checkbox rows as toggle switches (putaway/pick etc.)
   ========================================================= */

label.row.inline{
  /* override global label column */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
  padding: 10px 12px;
  margin: 10px 0;

  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.65);
}

label.row.inline > span{
  order: 1;       /* text first */
  flex: 1;
  font-weight: 800;
}

label.row.inline > input[type="checkbox"]{
  order: 2;       /* switch on the right */
  margin: 0;

  -webkit-appearance: none;
  appearance: none;

  width: 46px;
  height: 26px;
  border-radius: 999px;

  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #f3f6fb);

  position: relative;
  cursor: pointer;
  outline: none;
}

label.row.inline > input[type="checkbox"]::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;

  width: 20px;
  height: 20px;
  border-radius: 999px;

  background: #ffffff;
  border: 1px solid var(--border);

  transform: translateY(-50%);
  transition: 160ms ease;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

label.row.inline > input[type="checkbox"]:checked{
  border-color: rgba(14,165,233,0.55);
  background: linear-gradient(180deg, rgba(14,165,233,0.35), rgba(14,165,233,0.12));
}

label.row.inline > input[type="checkbox"]:checked::after{
  left: 22px;
  border-color: rgba(14,165,233,0.35);
}

label.row.inline > input[type="checkbox"]:focus{
  box-shadow: var(--ring);
}

label.row.inline > input[type="checkbox"]:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* Textarea (global) */
textarea{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  outline: none;

  resize: vertical;
  min-height: 90px;          /* rows=3 ~ ok */
  line-height: 1.35;
}

textarea::placeholder{
  color: color-mix(in srgb, var(--muted) 75%, transparent);
}

textarea:focus{
  border-color: rgba(14,165,233,0.55);
  box-shadow: var(--ring);
}

/* optional: disabled look */
textarea:disabled{
  background: rgba(255,255,255,0.55);
  color: var(--muted);
  cursor: not-allowed;
}