/* =====================================================================
   PBI 8531 — pravila obračuna dolaska i odlaska po smjeni (korak 1)
   Prefiks: str-  (shift time rules). Tokeni --is-* su globalni (ne redefinisati :root).
   Dizajn: projects/PBI-8531-shift-time-rules/design/project/{Main,ShiftRules}.dc.html
   ===================================================================== */

/* ---------- Ekran 1: Postavke kompanije → Unos sati ---------- */
.str-company-block {
  margin-top: 6px;
  border-top: 1px solid #f0f2f6;
  background: #fafdff;                       /* dizajn: ruleBg kad je uključeno */
  padding: 0 14px 12px;
}
.str-company-hint { padding: 0 0 6px; }
.str-company-count { margin-top: 12px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.str-company-count a { color: var(--is-brand-blue-700, #0273a8); font-weight: 600; text-decoration: none; }
.str-company-count a:hover { text-decoration: underline; }
.str-warn { color: var(--is-warning-700, #b4530a); font: 500 12px var(--is-font-sans, 'Plus Jakarta Sans'); }

.str-radio {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font: 400 13px var(--is-font-sans, 'Plus Jakarta Sans'); color: var(--is-fg-1, #1a1f2e);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.str-radio input { accent-color: var(--is-brand-blue, #0494da); }

.str-date.is-invalid .e-input-group,
.str-dd.is-invalid .e-input-group { border-color: var(--is-danger, #dc3545) !important; box-shadow: 0 0 0 2px rgba(220, 53, 69, .12); }

/* ---------- Ekran 2: editor smjene → Obračun dolaska i odlaska ---------- */
.str-rules {
  border: 1px solid var(--is-border-1, #e6e8ee);
  border-radius: var(--is-radius-sm, 6px);
  padding: 12px 14px;
  background: #fff;
  display: flex; flex-direction: column; gap: 12px;
}
.str-locked {
  display: flex; align-items: center; gap: 8px;
  font: 500 13px var(--is-font-sans, 'Plus Jakarta Sans'); color: var(--is-fg-3, #8a93a6);
}
.str-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.str-check { display: flex; align-items: center; gap: 8px; font: 600 13px var(--is-font-sans, 'Plus Jakarta Sans'); color: var(--is-fg-1, #1a1f2e); cursor: pointer; margin: 0; }
.str-hint { font: 400 12px/1.4 var(--is-font-sans, 'Plus Jakarta Sans'); color: var(--is-fg-muted, #9aa3b3); }

.str-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.str-presets__lbl { font: 600 11px var(--is-font-sans, 'Plus Jakarta Sans'); color: var(--is-fg-3, #8a93a6); text-transform: uppercase; letter-spacing: .03em; }
.str-preset {
  height: 28px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--is-brand-blue-300, #b9ddf1); background: #fff; color: var(--is-brand-blue-700, #0273a8);
  font: 600 12px var(--is-font-sans, 'Plus Jakarta Sans'); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.str-preset:hover:not(:disabled) { background: var(--is-brand-blue-100, #eaf4fb); }
.str-preset:disabled { opacity: .45; cursor: not-allowed; }

.str-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .str-grid { grid-template-columns: 1fr; } }
.str-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.str-col__title { font: 700 11px var(--is-font-sans, 'Plus Jakarta Sans'); letter-spacing: .06em; color: var(--is-fg-3, #8a93a6); text-transform: uppercase; }
.str-rule { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px dashed #eef0f4; }
.str-rule:last-child { border-bottom: none; }
.str-rule__name { font: 600 13px var(--is-font-sans, 'Plus Jakarta Sans'); color: var(--is-fg-1, #1a1f2e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.str-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 400 12.5px var(--is-font-sans, 'Plus Jakarta Sans'); color: var(--is-fg-2, #4a5468); }

.str-num, .str-sel {
  height: 30px; border: 1px solid var(--is-border-2, #d6d5d5); border-radius: var(--is-radius-xs, 3px);
  background: #fff; color: var(--is-fg-1, #1a1f2e);
}
.str-num { width: 64px; padding: 0 6px; text-align: center; font: 500 13px var(--is-font-mono, 'JetBrains Mono', monospace); }
.str-sel { padding: 0 6px; font: 400 12.5px var(--is-font-sans, 'Plus Jakarta Sans'); max-width: 100%; }
.str-sel--sm { width: 64px; font-family: var(--is-font-mono, 'JetBrains Mono', monospace); }
.str-num:focus, .str-sel:focus { outline: none; border-color: var(--is-action-blue, #007bff); box-shadow: 0 0 0 3px rgba(0, 123, 255, .15); }
.str-num:disabled, .str-sel:disabled { background: #f6f7f9; color: var(--is-fg-3, #8a93a6); }

.str-legacy {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: var(--is-radius-xs, 3px);
  background: #fff8ec; color: var(--is-warning-700, #b4530a);
  font: 400 12.5px var(--is-font-sans, 'Plus Jakarta Sans');
}

.str-preview { border-top: 1px solid #f0f2f6; padding-top: 10px; }
.str-preview__title { font: 600 12.5px var(--is-font-sans, 'Plus Jakarta Sans'); color: var(--is-fg-2, #4a5468); margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.str-preview__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .str-preview__grid { grid-template-columns: 1fr; } }
.str-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.str-tbl th {
  font: 700 10.5px var(--is-font-sans, 'Plus Jakarta Sans'); text-transform: uppercase; letter-spacing: .04em;
  color: var(--is-fg-3, #8a93a6); text-align: left; padding: 4px 6px; border-bottom: 1px solid #eef0f4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.str-tbl td { padding: 4px 6px; border-bottom: 1px solid #f5f6f8; font: 400 12.5px var(--is-font-sans, 'Plus Jakarta Sans'); color: var(--is-fg-1, #1a1f2e); }
.str-mono, .str-calc { font: 500 12.5px var(--is-font-mono, 'JetBrains Mono', monospace) !important; }
.str-calc.is-arr { color: #0273a8; font-weight: 700 !important; }     /* dizajn: plavo — pravilo promijenilo dolazak */
.str-calc.is-dep { color: #b4530a; font-weight: 700 !important; }     /* dizajn: narandžasto — pravilo promijenilo odlazak */
.str-rulecell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--is-fg-2, #4a5468) !important; }

/* ---------- Ekran 4: unos sati — obračunato vrijeme, stvarno u tooltipu ---------- */
.str-entry-time { display: flex; align-items: center; gap: 4px; font-family: var(--is-font-mono, 'JetBrains Mono', monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.str-entry-time .str-t.is-arr { color: #0273a8; font-weight: 700; }   /* pravilo promijenilo dolazak */
.str-entry-time .str-t.is-dep { color: #b4530a; font-weight: 700; }   /* pravilo promijenilo odlazak */
.str-ruled-ico { font-size: 11px; color: var(--is-brand-blue-700, #0273a8); margin-left: 2px; }
.str-manual {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: #f3f4f6; color: var(--is-fg-3, #8a93a6);
  font: 600 10px var(--is-font-sans, 'Plus Jakarta Sans'); white-space: nowrap;
}