/* ============================================================
   CMMS Business - Design System De Nigris
   Palette bordeaux, layout responsive (desktop / tablet / mobile)
   ============================================================ */

:root{
  --brand:#6b1530;
  --brand-dark:#4a0f21;
  --brand-light:#8a2540;
  --brand-tint:#f6ecef;
  --bg:#f4f2f1;
  --surface:#ffffff;
  --text:#1c1c1c;
  --muted:#6b6b6b;
  --border:#e2ddd9;
  --danger:#c0392b;
  --danger-dark:#a93226;
  --success:#2e7d32;
  --warning:#e08e00;
  --radius:10px;
  --shadow:0 1px 3px rgba(20,10,12,.08), 0 1px 2px rgba(20,10,12,.06);
  --shadow-md:0 4px 14px rgba(20,10,12,.12);
  --font:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

h1{font-size:24px;font-weight:700;margin:0 0 16px;color:var(--brand-dark)}
h2{font-size:18px;font-weight:700;margin:24px 0 10px;color:var(--brand-dark)}
h3{font-size:15px;font-weight:700;margin:0 0 10px;color:var(--brand-dark)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
p{color:var(--text)}
.muted{color:var(--muted);font-size:13px}

/* ---------- Header / Nav ---------- */
header{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
  color:#fff;
  box-shadow:var(--shadow-md);
  position:sticky;top:0;z-index:50;
}
header::before{
  content:'';position:absolute;top:0;right:0;bottom:0;width:320px;
  background:
    linear-gradient(90deg,var(--brand) 0%,rgba(107,21,48,.15) 45%,transparent 75%),
    url('/static/denigris_hero.webp') center/cover no-repeat;
  background-blend-mode:multiply;
  opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 35%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 35%,#000 100%);
  pointer-events:none;
}
header .headbar{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;
  max-width:1400px;margin:0 auto;
  gap:12px;flex-wrap:wrap;
}
.brand{
  font-size:20px;font-weight:800;letter-spacing:.2px;
  display:flex;align-items:center;gap:12px;color:#fff;white-space:nowrap;
}
.brand::before{
  content:'';
  display:inline-block;width:40px;height:40px;
  background:url('/static/logo_denigris.png') center/contain no-repeat;
  border-radius:6px;background-color:rgba(255,255,255,.15);
}
nav{
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  flex:1;justify-content:flex-end;
}
nav a{
  color:rgba(255,255,255,.92);
  padding:8px 12px;border-radius:6px;font-size:14px;font-weight:600;
  white-space:nowrap;transition:background .15s;
}
nav a:hover{background:rgba(255,255,255,.14);text-decoration:none}
nav form{margin:0}
nav select,nav input{
  font-family:var(--font);border-radius:6px;border:1px solid rgba(255,255,255,.3);
  padding:6px 8px;font-size:13px;background:rgba(255,255,255,.1);color:#fff;
}
nav select option{color:#111}
nav label{font-size:12px;color:rgba(255,255,255,.85)}
nav button{
  background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3);
  border-radius:6px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;
}
nav button:hover{background:rgba(255,255,255,.28)}
.user-chip{color:#fff;font-size:13px;font-weight:600;white-space:nowrap;margin-left:4px}
.navlink-changepw{color:rgba(255,255,255,.85);font-size:12px;text-decoration:underline;margin-left:4px}

.mobile-toggle{
  display:none;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);
  color:#fff;border-radius:6px;padding:8px 11px;font-size:16px;cursor:pointer;
}

/* ---------- Layout ---------- */
main.wrap{max-width:1400px;margin:0 auto;padding:22px 20px 60px}
body::after{
  content:'';
  position:fixed;right:0;bottom:0;width:210px;height:380px;
  background:url('/static/bottle_watermark.png') right bottom/contain no-repeat;
  opacity:.12;
  pointer-events:none;
  z-index:5;
}

/* ---------- Cards / grid (forms) ---------- */
.grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;margin:10px 0;
}
.grid input,.grid select,.grid textarea{
  width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:7px;
  font-family:var(--font);font-size:14px;background:var(--surface);color:var(--text);
}
.grid label{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.grid input[disabled]{background:#f2efee;color:var(--muted)}

input,select,textarea,button{font-family:var(--font)}
input[type=text],input[type=date],input[type=number],input[type=password],
input[type=email],input:not([type]),select,textarea{
  padding:9px 10px;border:1px solid var(--border);border-radius:7px;font-size:14px;
  background:var(--surface);color:var(--text);
}
textarea{width:100%}

button,input[type=submit]{
  background:var(--brand);color:#fff;border:none;border-radius:7px;
  padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .15s;
}
button:hover,input[type=submit]:hover{background:var(--brand-light)}
button.danger{background:var(--danger)}
button.danger:hover{background:var(--danger-dark)}

/* ---------- Tables ---------- */
table{
  width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border-radius:var(--radius);box-shadow:var(--shadow);
  margin:12px 0;
}
.table-scroll table{width:max-content;min-width:100%}
th,td{padding:10px 12px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--border)}
th{
  background:var(--brand-tint);color:var(--brand-dark);font-weight:700;
  text-transform:uppercase;font-size:11.5px;letter-spacing:.4px;
  white-space:nowrap;
}
.table-scroll table tr:first-child th{position:sticky;top:0;z-index:2}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fbf7f8}

/* Responsive tables: horizontal scroll instead of overflow/breakage.
   The table gets its own bounded vertical scroll area so its header
   row can stick reliably at the top of THAT area (top:0) instead of
   depending on the outer page header's height, which varies with how
   many lines the nav wraps onto - fragile and proved unreliable. */
.table-scroll{width:100%;overflow-x:auto;overflow-y:auto;max-height:65vh;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}
.table-scroll-top{width:100%;overflow-x:auto;overflow-y:hidden;height:14px;margin:8px 0 -4px}
.table-scroll-top>div{height:1px}
.table-filter-row td{background:#fbfbfb;padding:4px 6px}

/* ---------- Toolbar / misc structural classes already used in templates ---------- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.logo{max-width:120px;height:auto}
.box{display:inline-block;width:16px;height:16px;border:1px solid #000;vertical-align:middle;border-radius:3px}
.sign{height:34px}
.wrap{white-space:pre-wrap;word-break:break-word}
.eq,.pf{color:var(--muted);font-size:12.5px}
.photo{height:44px;border-radius:6px;border:1px solid var(--border);object-fit:cover}
.techrow,.activityrow{background:var(--surface);border-radius:7px;padding:6px;border:1px solid var(--border)}

/* Uniform row heights: long text is truncated with ellipsis instead of
   wrapping to multiple lines, which is what made table rows look uneven.
   Elements that genuinely need full text (descriptions, textareas, form
   controls) opt back in via .wrap or are auto-exempted. */
td{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
td.wrap,td:has(textarea),td:has(select),td:has(input){max-width:none;overflow:visible;text-overflow:clip;white-space:normal}

/* ---------- KPI cards (dashboard) ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:18px 0}
.kpi-card{
  background:var(--surface);border-radius:var(--radius);padding:16px 18px;
  box-shadow:var(--shadow);border-left:4px solid var(--brand);
}
.kpi-card .kpi-label{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;display:block;min-height:32px;line-height:1.3}
.kpi-card .kpi-value{font-size:28px;font-weight:800;margin-top:4px;color:var(--text)}
.kpi-card.kpi-ok{border-left-color:var(--success)}
.kpi-card.kpi-warn{border-left-color:var(--warning)}
.kpi-card.kpi-danger{border-left-color:var(--danger)}
.kpi-card.kpi-ok .kpi-value{color:var(--success)}
.kpi-card.kpi-warn .kpi-value{color:var(--warning)}
.kpi-card.kpi-danger .kpi-value{color:var(--danger)}

.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:8px}
.chart-card{background:var(--surface);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.chart-card.span-full{grid-column:1 / -1}
.chart-canvas-wrap{position:relative;height:240px;width:100%}
.chart-canvas-wrap.tall{height:280px}

/* ---------- Auth pages (login / change password) ---------- */
.auth-shell{
  min-height:100vh;display:flex;background:var(--brand-dark);
}
.auth-visual{
  flex:1.1;position:relative;min-height:100vh;overflow:hidden;
  background:var(--brand-dark);
  display:flex;align-items:flex-end;
}
.auth-visual img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;
}
.auth-visual::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(20,6,12,.88) 0%,rgba(20,6,12,.3) 55%,rgba(20,6,12,.58) 100%);
}
.auth-visual .auth-caption{
  position:relative;z-index:2;color:#fff;padding:36px;max-width:480px;
}
.auth-visual .auth-caption h2{color:#fff;font-size:26px;margin-bottom:8px}
.auth-visual .auth-caption p{color:rgba(255,255,255,.82);font-size:14px}
.auth-form-side{
  flex:1;min-width:340px;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:32px;
}
.auth-box{
  background:var(--surface);padding:34px 36px;border-radius:14px;
  box-shadow:var(--shadow-md);width:100%;max-width:360px;
}
.auth-box h2{text-align:center;margin-top:0;color:var(--brand-dark);font-size:22px}
.auth-box .field{margin-bottom:14px}
.auth-box .field label{display:block;margin-bottom:5px;font-size:13px;color:var(--muted);font-weight:600}
.auth-box .field input{width:100%}
.auth-box button{width:100%;padding:11px;font-size:15px;margin-top:4px}
.auth-error{background:#fdecea;color:#7a2018;border:1px solid #f3c6c1;padding:9px 11px;border-radius:7px;margin-bottom:14px;font-size:13.5px}
.auth-notice{background:#fff4e1;color:#6b4a00;border:1px solid #f0d69b;padding:9px 11px;border-radius:7px;margin-bottom:14px;font-size:13.5px}
@media (max-width:820px){
  .auth-visual{display:none}
  .auth-form-side{min-height:100vh}
}

/* ---------- Print header logo/brand already inline in odl_print - untouched ---------- */

/* ---------- Responsive breakpoints ---------- */
@media (max-width:900px){
  main.wrap{padding:16px 14px 50px}
  h1{font-size:20px}
  .mobile-toggle{display:inline-block}
  nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:var(--brand-dark);
    flex-direction:column;align-items:stretch;
    padding:8px 14px 16px;box-shadow:var(--shadow-md);
  }
  nav.open{display:flex}
  nav a{padding:11px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
  nav form{width:100%;margin:6px 0}
  nav form[action="/plant/select"]{flex-wrap:wrap}
  .user-chip{margin:8px 0 0}
  table{font-size:13px}
  th,td{padding:8px}
}
@media (max-width:560px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .kpi-card .kpi-value{font-size:22px}
  .grid{grid-template-columns:1fr}
  .auth-box{padding:26px 22px}
}