:root {
  --bg:       #f0f5f0;
  --bg2:      #ffffff;
  --bg3:      #e8f0e8;
  --border:   rgba(0,120,0,0.25);
  --border2:  rgba(0,100,0,0.18);
  --text:     #1c2a1c;
  --text2:    #2e3e2e;
  --text3:    #5a7a5a;
  --accent:   #78be31;
  --accent2:  #5f9a22;
  --accentbg: #eaf6d4;
  --red:      #d42020;
  --redbg:    #fdeaea;
  --green:    #2da44e;
  --greenbg:  #e6f6ec;
  --blue:     #0969da;
  --bluebg:   #ddf4ff;
  --amber:    #bf8700;
  --amberbg:  #fff8c5;
  /* Status action buttons — pastel palette (Tailwind 200-level), dark text for contrast */
  --btn-close:   #bbf7d0;
  --btn-reject:  #fecaca;
  --btn-pending: #fde68a;
  --btn-cancel:  #e5e7eb;
  --btn-signoff: #bfdbfe;
  --radius:   10px;
  --radius-lg:16px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:17px;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}

#loginScreen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);}
.login-box{width:380px;padding:44px;background:var(--bg2);border:0.5px solid var(--border2);border-radius:var(--radius-lg);box-shadow:0 4px 24px rgba(0,0,0,0.06);}
.login-logo{font-size:13px;letter-spacing:0.18em;color:var(--text3);text-transform:uppercase;margin-bottom:8px;}
.login-title{font-size:29px;font-weight:700;color:var(--text);margin-bottom:32px;}
.login-title span{color:var(--accent);}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;color:var(--text2);margin-bottom:6px;letter-spacing:0.04em;font-weight:500;}
.field input{width:100%;padding:10px 12px;background:var(--bg3);border:0.5px solid var(--border2);border-radius:var(--radius);color:var(--text);font-size:17px;outline:none;transition:border-color 0.15s;}
.field input:focus{border-color:var(--accent);background:var(--bg2);}
.btn-login{width:100%;padding:12px;margin-top:8px;background:var(--accent);color:#fff;font-size:17px;font-weight:600;border:none;border-radius:var(--radius);transition:background 0.15s;}
.btn-login:hover{background:var(--accent2);}
.login-err{margin-top:12px;padding:9px 12px;background:var(--redbg);border:0.5px solid rgba(224,53,53,0.25);border-radius:var(--radius);font-size:14px;color:var(--red);display:none;}

#app{display:none;height:100vh;flex-direction:row;}
#app.visible{display:flex;}

.nav-panel{width:240px;background:var(--bg2);border-right:0.5px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;overflow-x:visible;}
.nav-logo{padding:16px;height:86px;box-sizing:border-box;border-bottom:0.5px solid var(--border);display:flex;justify-content:center;align-items:center;flex-shrink:0;}
.nav-logo-text{font-size:20px;font-weight:700;color:var(--text);}
.brand-section{padding:2px 8px;}
.brand-header{display:flex;align-items:center;gap:8px;padding:5px 8px;cursor:pointer;border:1px solid var(--border2);background:var(--bg3);width:100%;text-align:left;transition:all 0.15s;border-radius:var(--radius-lg);margin:1px 0;}
.brand-header:hover{background:var(--accentbg);border-color:var(--accent);}
.brand-header.active{background:var(--accentbg);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.brand-av{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.brand-lbl{font-size:14px;font-weight:700;color:var(--text);flex:1;text-align:left;}
.brand-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.brand-menus{padding:2px 0 4px 8px;display:none;margin-left:38px;border-left:2px solid var(--border2);}
.brand-section.active .brand-menus{display:block;}
.nav-item{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:var(--radius);cursor:pointer;font-size:13px;color:var(--text2);border:none;background:transparent;width:100%;text-align:left;transition:background 0.1s,color 0.1s;font-weight:500;}
.nav-item:hover{background:var(--bg3);color:var(--text);}
.nav-item.active{background:var(--accentbg);color:var(--accent);font-weight:700;}
.nav-item-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.nav-dot{width:6px;height:6px;border-radius:50%;margin-left:auto;flex-shrink:0;background:var(--accent);}
.nav-footer{padding:10px 8px;border-top:0.5px solid var(--border);margin-top:auto;}
.user-row{display:flex;align-items:center;gap:8px;padding:6px 8px;}
.user-av{width:28px;height:28px;border-radius:50%;background:var(--accentbg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--accent);}
.user-name{font-size:14px;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.btn-logout{padding:4px 9px;font-size:13px;border:0.5px solid var(--border2);border-radius:7px;background:transparent;color:var(--text2);font-weight:500;cursor:pointer;}
.btn-logout:hover{color:var(--red);border-color:var(--red);}

.main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.topbar{height:86px;border-bottom:0.5px solid var(--border);display:flex;align-items:center;padding:0 22px;gap:12px;background:var(--bg2);flex-shrink:0;}
.topbar-title{font-size:18px;font-weight:700;color:var(--text);flex:1;display:flex;align-items:center;justify-content:flex-start;text-align:left;min-width:0;}
/* Collapse the left menu (handy on square tablet screens). ☰ button in the topbar toggles it. */
.nav-toggle{background:transparent;border:none;color:var(--text3);font-size:16px;line-height:1;cursor:pointer;padding:4px 6px;flex-shrink:0;opacity:0.22;transition:opacity .15s;}
.nav-toggle:hover{opacity:0.75;}
#app.nav-collapsed .nav-panel{display:none;}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:0.04em;}
.badge-green{background:var(--greenbg);color:var(--green);}
.badge-amber{background:var(--amberbg);color:var(--amber);}
.badge-gray{background:var(--bg3);color:var(--text2);}
.badge-blue{background:var(--bluebg);color:var(--blue);}

.content{flex:1;padding:22px;overflow-y:auto;overflow-x:hidden;background:var(--bg);min-width:0;}

.metrics-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;}
.metric{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius);padding:16px 18px;}
.metric-lbl{font-size:13px;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.05em;font-weight:700;}
.metric-val{font-size:31px;font-weight:700;color:var(--text);}
.metric-val.green{color:var(--green);}
.metric-val.amber{color:var(--amber);}
.metric-val.red{color:var(--red);}
.metric-val.blue{color:var(--blue);}
.metric-sub{font-size:14px;color:var(--text2);margin-top:4px;font-weight:500;}

.card{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:14px;}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.card-title{font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:0.07em;}

table{width:100%;border-collapse:collapse;font-size:16px;}
th{text-align:left;color:var(--text2);font-weight:700;font-size:13px;padding:0 8px 10px 0;text-transform:uppercase;letter-spacing:0.05em;}
td{padding:1px 8px 1px 0;border-top:0.5px solid var(--border);color:var(--text);vertical-align:middle;}
tr:hover td{background:var(--bg3);}

.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}
.pill-green{background:var(--greenbg);color:var(--green);}
.pill-red{background:var(--redbg);color:var(--red);}
.pill-amber{background:var(--amberbg);color:var(--amber);}
.pill-blue{background:var(--bluebg);color:var(--blue);}
.pill-gray{background:var(--bg3);color:var(--text2);}
.pill-purple{background:#ede9fe;color:#7c3aed;}

.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:var(--radius);font-size:14px;border:0.5px solid var(--border2);background:transparent;color:var(--text2);transition:background 0.1s,color 0.1s;font-weight:500;}
.btn-back{background:#0891b2!important;color:#fff!important;border-color:#0891b2!important;font-weight:700!important;padding:5px 12px!important;font-size:14px!important;min-width:110px!important;justify-content:center!important;}
.btn-back:hover{background:#0e7490!important;}
.btn:hover{background:var(--bg3);color:var(--text);}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;}
.btn-primary:hover{background:var(--accent2);border-color:var(--accent2);}
.btn-danger{border-color:rgba(224,53,53,0.3);color:var(--red);}
.btn-danger:hover{background:var(--redbg);}

/* ── Standard status action buttons (Pending / Reject / Cancel / Sign Off / Close / Back) ── */
.btn-status{padding:5px 12px;border-radius:var(--radius);border:0.5px solid var(--border2);color:var(--text);font-size:14px;font-weight:700;cursor:pointer;min-width:110px;text-align:center;transition:filter 0.1s;}
.btn-status:hover{filter:brightness(0.96);}

/* ── Standard "+ Add" button used in card headers (Interventions, Milestones, Technicians, Materials, …) ── */
.btn-add{padding:5px 12px;border-radius:var(--radius);border:none;background:var(--accent);color:#fff;font-size:14px;font-weight:700;cursor:pointer;min-width:110px;text-align:center;transition:background 0.1s;}
.btn-add:hover{background:var(--accent2);}
.btn-status-close   {background:var(--btn-close);}
.btn-status-reject  {background:var(--btn-reject);}
.btn-status-pending {background:var(--btn-pending);}
.btn-status-cancel  {background:var(--btn-cancel);}
.btn-status-signoff {background:var(--btn-signoff);}

.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.fg{display:flex;flex-direction:column;gap:5px;}
.fg label{font-size:13px;color:var(--text2);font-weight:500;}
.fg input,.fg select,.fg textarea{padding:9px 11px;background:var(--bg3);border:0.5px solid var(--border2);border-radius:var(--radius);color:var(--text);font-size:16px;outline:none;transition:border-color 0.15s;}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent);background:var(--bg2);}
.form-actions{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end;padding-top:4px;}

.bar-row{margin-bottom:12px;}
.bar-meta{display:flex;justify-content:space-between;font-size:14px;color:var(--text2);margin-bottom:5px;font-weight:500;}
.bar-track{background:var(--bg3);border-radius:4px;height:6px;overflow:hidden;}
.bar-fill{height:100%;border-radius:4px;background:var(--accent);}

.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--text3);font-size:16px;gap:8px;}
.spinner{width:16px;height:16px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.empty{padding:40px;text-align:center;color:var(--text3);font-size:16px;}
.card .empty{padding:4px 0;text-align:left;font-size:13px;}
.dm-scroll::-webkit-scrollbar{width:14px;height:14px;}
.dm-scroll::-webkit-scrollbar-track{background:var(--bg2);border-radius:4px;}
.dm-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;border:2px solid var(--bg2);}
.dm-scroll::-webkit-scrollbar-thumb:hover{background:var(--text3);}
.dm-scroll::-webkit-scrollbar-corner{background:var(--bg2);}

.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;z-index:100;min-height:500px;}
.modal{background:var(--bg2);border:0.5px solid var(--border2);border-radius:var(--radius-lg);padding:26px;width:500px;max-width:95%;box-shadow:0 8px 40px rgba(0,0,0,0.12);}
.modal-title{font-size:19px;font-weight:700;margin-bottom:20px;color:var(--text);}
/* Product image — replace/delete buttons appear only on hover.
   On touch devices (no hover) buttons stay visible so users can tap them. */
.prod-img-actions { opacity:0; transition:opacity 0.15s; pointer-events:none; }
.prod-img-box:hover .prod-img-actions { opacity:1; pointer-events:auto; }
@media (hover: none) { .prod-img-actions { opacity:1; pointer-events:auto; } }

/* ─── Print stylesheet ──────────────────────────────────────────────────────
   Ctrl+P (or browser's Print) should output ONLY the central content card —
   no sidebar, no topbar, no action buttons. Background flat white so we
   don't waste toner on the green theme.                                   */
@media print {
  .nav-panel, .topbar, #profileModal, #reqModal { display: none !important; }

  body, #app, .main { display: block !important; height: auto !important; overflow: visible !important; background: #fff !important; }
  .main    { flex: none !important; }
  .content { padding: 0 !important; overflow: visible !important; background: #fff !important; }

  /* Hide every action button — they don't do anything on paper */
  .btn, .btn-back, .btn-primary, .btn-add, .btn-danger, .btn-logout, button { display: none !important; }

  /* Cards: lighter border, no shadow, don't split rows across pages */
  .card           { box-shadow: none !important; border: 0.5px solid #ccc !important; break-inside: avoid; page-break-inside: avoid; }
  table tr        { break-inside: avoid; page-break-inside: avoid; }

  /* Tell browsers to actually print background colors on pills/badges/etc.
     (Chrome/Edge respect this; Firefox needs the user to also tick "Print
     backgrounds" in the print dialog.) */
  *               { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Links printed in black, no underline noise */
  a               { color: #000 !important; text-decoration: none !important; }
}