/* ==========================================================================
   Lönmeter – main stylesheet
   1. Design tokens
   2. Base
   3. Layout
   4. Cards
   5. Brand wordmarks
   6. Form fields
   7. Tables
   8. Result lines
   9. Buttons
   10. Footer
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */
:root{
  --bg:#000000;
  --panel:#121212;
  --panel-2:#1A1A1A;
  --panel-sunken:#0C0C0C;
  --ink:#F4F6F3;
  --muted:#9AA39C;
  --line:#2B2E2A;
  --green:#22A74C;
  --green-dk:#1A7D3A;
  --green-deep:#0E4322;
  --green-ink:#08170D;
  --yellow-green:#CEDC34;
  --radius:12px;

  --font-body:'Inter',system-ui,sans-serif;
  --font-display:'Space Grotesk',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

/* 2. Base ---------------------------------------------------------------- */
*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  padding:28px 16px 60px;
}

/* 3. Layout -------------------------------------------------------------- */
.wrap{max-width:920px;margin:0 auto;}

.app-logo{width:180px;display:block;margin:0 auto 18px;}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  min-width:0;
}
.grid.weeks{grid-template-columns:repeat(5,minmax(0,1fr));}

.stack{margin-top:16px;}
.stack--tight{margin-top:14px;}

#print-header{display:none;}

/* 4. Cards --------------------------------------------------------------- */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 22px 20px;
  margin-bottom:20px;
}
.card h2{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:600;
  margin:0 0 4px;
  display:flex;align-items:center;gap:8px;
  color:var(--ink);
}
.card .desc{color:var(--muted);font-size:0.95rem;margin:0 0 18px;line-height:1.45;}

.card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:16px;min-width:0;
}
.card-head h2{margin:0;min-width:0;overflow-wrap:anywhere;}

.row-title{font-size:0.92rem;color:var(--muted);font-weight:600;margin:14px 0 8px;}

.subsection{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);}
.subsection-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.subsection-title{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--ink);}

.final-card{
  background:linear-gradient(135deg, var(--green-dk), var(--green-deep));
  color:#F4FBF4;
  border:none;
}
.final-card h2{color:#fff;}
.final-card .result-line{border-bottom:1px dashed rgba(255,255,255,0.18);}
.final-card .result-line .label{color:#C7D4CC;}
.final-card .result-line .value{color:#fff;}
.final-card .result-line.total .value{color:var(--yellow-green);font-size:1.9rem;}

/* 5. Brand wordmarks ----------------------------------------------------- */
.brand{
  display:inline-block;
  padding:5px 14px;
  border-radius:6px;
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:-0.02em;
  font-size:1.25rem;
  line-height:1.2;
}
.brand-bolt{background:#34D186;color:#0A2E1C;}
.brand-uber{background:#FFFFFF;color:#000000;}
.brand-wecab{background:#1F3A5F;color:#FFFFFF;}
.brand-forare{background:var(--green);color:var(--green-ink);}

/* 6. Form fields --------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:5px;min-width:0;}
.field label{
  font-size:0.8rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.03em;
}
.field input{
  border:1.5px solid var(--line);
  border-radius:7px;
  padding:11px 12px;
  font-size:1.05rem;
  font-family:var(--font-mono);
  background:var(--panel-2);
  color:var(--ink);
  width:100%;min-width:0;
}
.field input:focus{outline:none;border-color:var(--green);background:#0F0F0F;}
.field input:disabled{opacity:0.55;cursor:not-allowed;background:var(--panel-sunken);}
.field input[readonly]{
  background:var(--panel-sunken);color:var(--green);
  border-style:dashed;cursor:default;
}
.field input::placeholder{color:var(--green);opacity:0.85;font-family:var(--font-mono);}
.field.rate input{color:var(--yellow-green);}

@media (max-width:640px){
  .grid.weeks{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .grid.weeks .field input{font-size:0.78rem;padding:8px 4px;}
  .grid.weeks .field label{font-size:0.65rem;}
}

/* 7. Tables -------------------------------------------------------------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -22px;padding:0 22px;}
.table-scroll table{min-width:560px;}

table{width:100%;border-collapse:collapse;margin-top:6px;font-size:0.98rem;}
th,td{padding:8px;text-align:right;border-bottom:1px solid var(--line);}
th:first-child,td:first-child{text-align:left;}
th{
  color:var(--muted);font-weight:600;font-size:0.8rem;
  text-transform:uppercase;letter-spacing:0.03em;
}
td{color:var(--ink);}
td.mono,th.mono{font-family:var(--font-mono);}
tfoot td{font-weight:700;border-top:2px solid var(--green);border-bottom:none;color:var(--ink);}

/* 8. Result lines -------------------------------------------------------- */
.result-line{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 0;
  border-bottom:1px dashed var(--line);
}
.result-line:last-child{border-bottom:none;}
.result-line .label{color:var(--muted);font-size:1rem;flex:1 1 auto;min-width:0;}
.result-line .value{
  font-family:var(--font-mono);font-weight:600;font-size:1.1rem;
  color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;flex:0 0 auto;
}
.result-line.total .label{font-weight:700;color:var(--ink);}
.result-line.total .value{color:var(--green);font-size:1.45rem;}

/* Highlighted row: bold on a green band */
.result-line.highlight{
  background:var(--green-dk);
  border-radius:8px;
  border-bottom-color:transparent;
  padding:10px 12px;
  margin:4px -12px;
}
.result-line.highlight .label,
.result-line.highlight .value{color:#fff;font-weight:700;}

/* 9. Buttons ------------------------------------------------------------- */
.lock-btn{
  background:var(--panel-2);
  border:1.5px solid var(--line);
  color:var(--muted);
  border-radius:8px;
  padding:6px 12px;
  font-size:1.05rem;
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
.lock-btn:hover{border-color:var(--green);}
.lock-btn.unlocked{border-color:var(--yellow-green);color:var(--yellow-green);}

.pdf-btn{
  display:inline-block;
  flex:0 0 auto;
  text-decoration:none;text-align:center;white-space:nowrap;
  background:var(--panel-2);
  color:var(--green);
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:6px 12px;
  font-family:var(--font-body);font-weight:700;font-size:0.85rem;line-height:1.2;
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s, transform .15s;
}
.pdf-btn:hover{
  background:var(--yellow-green);
  border-color:var(--green);
  color:var(--green-ink);
  transform:translateY(-1px);
}

/* File import (Wecab report) */
.import-row{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:10px 14px;
  margin:-4px 0 18px;
}
.import-btn{
  display:inline-block;
  background:var(--panel-2);
  color:var(--ink);
  border:1.5px dashed var(--line);
  border-radius:8px;
  padding:8px 14px;
  font-weight:600;font-size:0.9rem;
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
.import-btn:hover,
.import-row:has(input[type=file]:focus-visible) .import-btn{border-color:var(--green);color:var(--green);}
.import-status{color:var(--muted);font-size:0.88rem;min-width:0;}
.import-status.ok{color:var(--green);}
.import-status.error{color:#E0576A;}

.drop-target.dragover{border-color:var(--green);box-shadow:0 0 0 2px var(--green) inset;}

.visually-hidden{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* 10. Footer------------------------------------------------------------- */
.app-footer{
  text-align:center;
  color:var(--ink);opacity:0.75;
  font-size:0.9rem;letter-spacing:0.01em;
  margin-top:26px;padding:18px 0 6px;
  border-top:1px solid var(--line);
}