/* ===================================================================
   FHC Calculator – fhc.css
   Works 1:1 with the markup generated by frontend.js (latest revision)
   =================================================================== */

/* -------- CSS Variables (theme) -------- */
:root{
  --fhc-bg: #f8fafc;
  --fhc-surface: #ffffff;
  --fhc-border: #e5e7eb;
  --fhc-border-strong: #cbd5e1;
  --fhc-text: #0f172a;
  --fhc-muted: #64748b;
  --fhc-primary: #0b3c6f;
  --fhc-primary-600: #0b3c6f;
  --fhc-accent: #1e40af;
  --fhc-danger: #dc2626;
  --fhc-shadow: 0 8px 24px rgba(2,6,23,.08);
  --fhc-radius: 10px;
  --fhc-radius-lg: 12px;
  --fhc-pad: 12px;
  --fhc-gap: 14px;
  --fhc-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* -------- Global reset-ish -------- */
#fhc-step-container, #fhc-step-container *{
  box-sizing: border-box;
  font-family: var(--fhc-font);
}
#fhc-step-container{
  background: var(--fhc-bg);
  color: var(--fhc-text);
}

/* -------- Utilities -------- */
.fhc-muted{ color: var(--fhc-muted); }
.fhc-small{ font-size: 12px; line-height: 1.35; }
.fhc-page-title{ letter-spacing: -0.2px; }
.fhc-step-subtitle{ color: var(--fhc-muted); }

/* -------- Buttons -------- */
.fhc-btn{
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--fhc-border);
  background: var(--fhc-surface);
  color: var(--fhc-text);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease;
}
.fhc-btn:hover{ background:#f9fafb; }
.fhc-btn:active{ transform: translateY(1px); }

.fhc-btn-ghost{
  background: var(--fhc-surface);
  border-color: var(--fhc-border);
}
.fhc-btn-light{
  background: #eef2ff;
  color: #1e3a8a;
  border-color: #c7d2fe;
}
.fhc-btn-primary{
  background: var(--fhc-primary);
  color: #fff;
  border-color: #0a2f56;
}
.fhc-btn-primary:hover{ background:#0a2f56; }
.fhc-btn-danger{
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.fhc-btn-danger:hover{ background:#fecaca; }

/* Icon buttons inside grid cards inherit .fhc-btn-ghost base styles */

/* -------- Inputs / selects -------- */
.fhc-input, .fhc-select, .fhc-input-wide{
  width: 100%;
  background: #fff;
  border: 1px solid var(--fhc-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--fhc-text);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.fhc-input:focus, .fhc-select:focus, .fhc-input-wide:focus{
  border-color: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148,163,184,.25);
}
.fhc-label{
  display:block;
  font-size:12px;
  color:var(--fhc-muted);
  margin-bottom:6px;
}
.fhc-field{ margin-bottom: 10px; }

/* Larger checkboxes (fallback for inline-width set in HTML) */
input[type="checkbox"].fhc-inc,
input[type="checkbox"].fhc-screed{
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

/* -------- Layout grid -------- */
.fhc-canvas-layout{
  display:grid;
  gap: var(--fhc-gap);
  padding: var(--fhc-pad);
  grid-template-columns: 280px minmax(720px,1fr) 360px;
  grid-template-areas:
    "lib canvas right"
    "files files right";
}

/* Cards / Surfaces */
.fhc-room-lib,
.fhc-canvas-container,
.fhc-files,
.fhc-canvas-panel,
.fhc-thermo-panel,
.fhc-card{
  background: var(--fhc-surface);
  border: 1px solid var(--fhc-border);
  border-radius: var(--fhc-radius);
  box-shadow: var(--fhc-shadow);
}

/* Library */
.fhc-room-lib #fhc-room-lib-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.fhc-lib-card{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px;
  background:#fff;
  border:1px solid var(--fhc-border);
  border-radius: var(--fhc-radius);
  cursor:pointer;
  transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
}
.fhc-lib-card:hover{ border-color: var(--fhc-border-strong); box-shadow: 0 6px 16px rgba(2,6,23,.06); transform: translateY(-1px); }

/* Canvas container */
.fhc-canvas-container{
  padding: 12px;
}
#konva-stage{
  display:block;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid var(--fhc-border);
  border-radius: var(--fhc-radius);
}

/* Right column panels */
.fhc-right{
  display:flex;
  flex-direction:column;
  gap: var(--fhc-gap);
}

/* File Explorer */
.fhc-files{
  grid-area: files;
  padding: 12px;
}
#fhc-files-list{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap:10px;
}
.fhc-file-card{
  background:#fff;
  border:1px solid var(--fhc-border);
  border-radius: var(--fhc-radius);
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.fhc-file-card:hover{ border-color: var(--fhc-border-strong); box-shadow: 0 6px 16px rgba(2,6,23,.06); transform: translateY(-1px); }

/* Thermostat panel */
.fhc-thermo-panel .fhc-thermo-row input[type="text"]{
  flex: 1 1 220px;
}

/* Tables (Step 2) */
.fhc-table{
  width: 100%;
  border-collapse: collapse;
}
.fhc-table th,
.fhc-table td{
  font-size: 13px;
  padding: 8px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}
.fhc-table thead th{
  background: #f8fafc;
  color: var(--fhc-text);
  font-weight: 700;
}
.fhc-table tbody tr:hover{
  background: #fbfdff;
}

/* Progress bar (optional hooks if present) */
#fhc-progress{
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
#fhc-progress-bar{
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, #1e3a8a, #0ea5e9);
}

/* Topbar */
.fhc-topbar{
  background: transparent;
}
.fhc-topbar .fhc-btn{ box-shadow:none; }

/* Thermostat modal overlay */
#fhc-thermo-modal{
  backdrop-filter: blur(2px);
}

/* Konva Transformer handles (slight polish) */
.konvajs-content ~ div, /* keep default konva layers unaffected */
.konvajs-content{ outline: none; }

/* -------- Responsive tweaks -------- */
@media (max-width: 1200px){
  .fhc-canvas-layout{
    grid-template-columns: 240px minmax(600px,1fr) 320px;
  }
}
@media (max-width: 1024px){
  .fhc-canvas-layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "lib"
      "canvas"
      "files"
      "right";
  }
  #konva-stage{ min-height: 560px; }
}
@media (max-width: 560px){
  .fhc-lib-card{ padding:8px; gap:6px; }
  .fhc-btn{ padding:7px 10px; font-size:12px; }
  .fhc-table th, .fhc-table td{ padding:7px; font-size:12px; }
}
/* Canvas kartica i sam canvas imaju isti radius i kliping */
.fhc-canvas-container{
  border-radius: 12px;             /* veći, jasniji radius */
  overflow: hidden;                /* kliping sadržaja */
  background: #fff;                /* bela pozadina */
  border: 1px solid #e5e7eb;       /* tanka ivica oko cele kartice */
}

/* <div id="konva-stage"> koji drži Konva canvas */
#konva-stage{
  border-radius: 12px;             /* isti radius kao kontejner */
  overflow: hidden;                /* obavezno, da desna ivica ne „bode” */
  display: block;
  margin: 0;                       /* bez spoljnog margina */
}

/* mala optika: skini „halo” boje pozadine oko canvasa */
#konva-stage > canvas {
  display: block;
  border: 0;
  outline: none;
  border-radius: 12px;             /* radi i na samom <canvas> elementu */
}

/* opcionalno: crisper tekst i linije na većim zumovima */
#konva-stage,
#konva-stage > canvas {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}