/* Reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#111827; background:#f3f4f6; }

/* Top bar */
.topbar {
  height: 56px; display:flex; align-items:center; justify-content:space-between;
  padding: 0 16px; background:#1f6feb; color:#fff; position:sticky; top:0; z-index:20;
}
.brand { font-weight:700; }
.topbar-right { display:flex; align-items:center; gap:8px; }
.topbar .btn { background:#fff; color:#1f2937; }

/* Layout */
.layout { height: calc(100vh - 56px); display:grid; grid-template-columns: 300px 1fr; gap:16px; padding:16px; }
.sidebar { overflow:auto; }
.main { overflow:auto; }

/* Cards */
.card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
.card.soft { background:#fafafa; }

/* Typography */
h1 { margin:0 0 8px; font-size:24px; }
h2 { margin:8px 0; font-size:20px; }
h3 { margin:8px 0; font-size:16px; }
.muted { color:#6b7280; }
.mt8{margin-top:8px}.mt12{margin-top:12px}
.sep{border:0;border-top:1px solid #e5e7eb;margin:16px 0}

/* Grid and rows */
.grid2 { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; }
.row { display:flex; align-items:center; gap:8px; }
.row.between{justify-content:space-between}
.row.end{justify-content:flex-end}
.gap8{gap:8px}

/* Inputs */
label { display:flex; flex-direction:column; gap:6px; font-size:14px; }
input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="date"] {
  height: 36px; padding: 6px 10px; border:1px solid #d1d5db; border-radius:8px; background:#fff; width:100%;
}

/* Company list */
.company-list .company-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed #eee; }
.company-list .name { font-weight:600; cursor:pointer; }

/* Buttons */
.btn { height:36px; padding:0 12px; border:1px solid #d1d5db; background:#f9fafb; border-radius:8px; cursor:pointer; }
.btn.primary { background:#2563eb; border-color:#1d4ed8; color:#fff; }
.btn.success { background:#16a34a; border-color:#15803d; color:#fff; }
.btn.warning { background:#f59e0b; border-color:#d97706; color:#111; }
.btn.danger { background:#ef4444; border-color:#dc2626; color:#fff; }

/* Date dual: vidljivo DMY + skriveni native date sa kalendarom */
.date-dual { position:relative; display:flex; align-items:center; }
.date-display { font-variant-numeric: tabular-nums; background:#fff; cursor:pointer; }
.date-native {
  position:absolute; left:0; top:0; width:0; height:0;
  opacity:0; pointer-events:none; /* prisutan u DOM-u zbog showPicker, ali ne zauzima prostor */
}
.cal-btn { margin-left:8px; height:36px; min-width:36px; border-radius:8px; border:1px solid #d1d5db; background:#f3f4f6; cursor:pointer; }

/* Form actions */
.form-actions { display:flex; gap:8px; justify-content:flex-end; padding-top:12px; border-top:1px solid #e5e7eb; margin-top:12px; }

/* Small helpers */
.facts p{margin:0}

/* Collapse functionality for templates */
.toggle-icon {
  font-size: 14px;
  margin-left: 8px;
  transition: transform 0.3s ease;
  user-select: none;
}

.templates-content {
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  max-height: 2000px;
  opacity: 1;
}

.templates-content.collapsed {
  max-height: 0;
  opacity: 0;
}

.templates-content.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

/* Global section styling */
.global-section {
  margin-bottom: 16px;
}

.global-section .card {
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Template list styling */
.template-list {
  margin-top: 12px;
}

.template-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fff;
  transition: box-shadow 0.2s ease;
}

.template-item:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 960px){
  .layout { grid-template-columns: 1fr; }
}