/* ══════════════════════════════════════════════════════════════════════════════════════
   forms.css — the six field states, and the small pieces of form furniture that go with
   them (required star, footer note, read-only lock, currency prefix, em-dash).

   Cluster R4 of the ERP redesign, handoff chapter 4.1–4.3. It exists because today the
   first three states are indistinguishable: an empty field, a field showing a made-up
   example ("INV-001"), and a field holding a real value all render identically, and a
   read-only field looks like something you can type into.

   ── THE MARKUP PATTERN ────────────────────────────────────────────────────────────────

   A field is a label, a control, and at most ONE line under it. The state lives on the
   control as a class; the line under it says why.

     <div class="wiz-field">                      (or Blazorise <Field> outside a wizard)
         <FieldLabel>Broj računa <span class="stasf-req">*</span></FieldLabel>
         <TextEdit Class="@FieldStateCss" ... />
         <div class="stasf-hint">sljedeći slobodni</div>          ← neutral help
         <FieldStatus State="..." Message="..." />                ← error / verified
     </div>

   | state              | how it is expressed                                            |
   |--------------------|----------------------------------------------------------------|
   | Prazno             | placeholder="—" — NEVER an example value like "INV-001"         |
   | Placeholder s uput.| placeholder="dd.mm.gggg" (format) or "Odaberi gradilište" (CTA) |
   | Popunjeno          | no class — the base style IS the filled state                   |
   | U fokusu           | :focus, automatic                                              |
   | Read-only          | class="stasf-readonly" on the control, wrapper .stasf-lock      |
   | Greška             | class="stasf-error" + <FieldStatus State="Error">              |
   | Provjereno         | class="stasf-ok" + <FieldStatus State="Verified">              |

   Use STASApp.Helpers.FieldStateCss to turn a check result into the class, so the three
   screens that validate an OIB or an IBAN cannot drift apart.

   Colours are the handoff tokens, by variable with a fallback (R0 ships tokens.css).
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Empty ────────────────────────────────────────────────────────────────────────
   A placeholder is grey and never looks like data. The em-dash is the empty value; a
   format or a call to action is the instruction. Both are the same colour, because both
   are "there is nothing here yet". */

.form-control::placeholder,
.stas-wizard .wiz-field .form-control::placeholder,
.stasf-input::placeholder {
    color: var(--ink-6, #94a3b8);
    opacity: 1;
    font-weight: 400;
}

/* Missing value in a read-only position (not an input) — em-dash, muted. */
.stasf-dash {
    color: var(--ink-7, #cbd5e1);
    font-variant-numeric: tabular-nums;
}

/* Neutral help under a field: a format, a derivation, a note. Never an error. */
.stasf-hint {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--ink-6, #94a3b8);
    margin-top: 0.15rem;
}

/* A file field the app writes itself. A bare <input type="file"> is drawn by the browser, in
   the browser's language, so "Choose File | No file chosen" showed up untranslated among
   Croatian labels. The native input stays — it keeps the keyboard and screen-reader behaviour —
   and the label around it is what the user sees. */
.stasf-file {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.stasf-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--rule-head, #cbd5e1);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--teal, #003951);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
    transition: background .15s, border-color .15s;
}

.stasf-file-btn:hover,
.stasf-file-btn:focus-within {
    background: rgba(0, 57, 81, .06);
    border-color: var(--teal, #003951);
}

.stasf-file-btn-disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Off-screen rather than display:none, so the control still takes focus from the keyboard. */
.stasf-file-btn input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.stasf-file-name {
    font-size: 0.82rem;
    color: var(--ink-5, #64748b);
    overflow-wrap: anywhere;
}

/* ── 2 · Required vs optional ─────────────────────────────────────────────────────────
   The star is the only marker. There is no "optional" word anywhere — its absence is
   the marker for optional, and a word in the label breaks the line in a two-column form. */

.stasf-req {
    color: var(--alert, #dc2626) !important;
    font-weight: 700;
    margin-left: 0.15rem;
}

/* The one sentence in the modal footer, on the left. */
.stasf-required-note {
    margin-right: auto;
    align-self: center;
    font-size: 12.5px;
    color: var(--ink-6, #94a3b8);
    white-space: nowrap;
}

/* ── 3 · Read-only ────────────────────────────────────────────────────────────────────
   Grey ground, softer border, dimmed text and a padlock. A read-only field is a fact the
   screen is telling you, not a box you failed to fill in. Distinct from :disabled, which
   Blazorise renders for controls that are merely unavailable right now. */

.stasf-readonly,
.form-control.stasf-readonly,
.stas-wizard .wiz-field .form-control.stasf-readonly,
.stas-wizard .wiz-field .form-control.stasf-readonly:disabled {
    background: #f4f6f8 !important;
    border-color: #e4e9ee !important;
    color: var(--ink-3, #5b6b7c) !important;
    box-shadow: none !important;
    cursor: default;
    opacity: 1;
}

/* Wrapper that hangs the padlock inside the right edge of a read-only control. */
.stasf-lock {
    position: relative;
    display: block;
}

.stasf-lock > .stasf-lock-icon {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-5, #64748b);
    font-size: 0.75rem;
    pointer-events: none;
}

.stasf-lock .form-control {
    padding-right: 1.9rem;
}

/* A read-only value rendered as text rather than an input (certificate card rows etc.). */
.stasf-static {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 34px;
    padding: 0.4rem 0.65rem;
    background: #f4f6f8;
    border: 1px solid #e4e9ee;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--ink-3, #5b6b7c);
}

/* ── 4 · Error ────────────────────────────────────────────────────────────────────────
   Red border, red ring, and a line underneath that says WHAT is wrong — not "invalid". */

.form-control.stasf-error,
.custom-select.stasf-error,
.stas-wizard .wiz-field .form-control.stasf-error,
.stas-wizard .wiz-field .custom-select.stasf-error {
    border-color: var(--crit, #c53a3a) !important;
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.10) !important;
}

/* ── 5 · Verified ─────────────────────────────────────────────────────────────────────
   Green border and a confirmation underneath — the bank the IBAN belongs to, the name
   behind the OIB. A tick with no information is only half the point. */

.form-control.stasf-ok,
.custom-select.stasf-ok,
.stas-wizard .wiz-field .form-control.stasf-ok,
.stas-wizard .wiz-field .custom-select.stasf-ok {
    border-color: #2c8360 !important;
    box-shadow: 0 0 0 3px rgba(44, 131, 96, 0.10) !important;
}

/* The line under the field, for both outcomes. */
.stasf-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.35;
    margin-top: 0.2rem;
}

.stasf-msg i {
    margin-top: 0.15rem;
    font-size: 0.72rem;
}

.stasf-msg-error {
    color: var(--crit-ink, #a52f2f);
}

.stasf-msg-ok {
    color: #2c8360;
}

/* ── 6 · Focus ────────────────────────────────────────────────────────────────────────
   Teal border + soft teal ring, everywhere a control can take focus. The wizard already
   does this for its own fields; this covers plain pages (settings, company edit). */

.stasf-input:focus,
.form-control.stasf-input:focus {
    background: var(--surface, #fff);
    border-color: var(--teal, #003951);
    box-shadow: 0 0 0 3px rgba(0, 57, 81, 0.10);
    outline: none;
}

/* ── Currency prefix ──────────────────────────────────────────────────────────────────
   The currency belongs to the amount, so it is a grey box welded to its left edge — not
   a select sitting among the fields as if it were a decision to make on every invoice. */

.stasf-money {
    display: flex;
    align-items: stretch;
    border: 1px solid #c9d4dc;
    border-radius: 8px;
    background: var(--surface, #fff);
    overflow: hidden;
}

.stasf-money:focus-within {
    border-color: var(--teal, #003951);
    box-shadow: 0 0 0 3px rgba(0, 57, 81, 0.10);
}

.stasf-money.stasf-readonly-group {
    background: #f4f6f8;
    border-color: #e4e9ee;
}

.stasf-money .stasf-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 0 0.7rem;
    background: #f1f5f9;
    border-right: 1px solid #e2e8f0;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--teal, #003951);
    white-space: nowrap;
}

.stasf-money > .stasf-money-input,
.stasf-money > .stasf-money-input .form-control {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Amount shown rather than typed (auto-calculated from sold items). */
.stasf-money .stasf-money-display {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0.4rem 0.65rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--teal, #003951);
    font-variant-numeric: tabular-nums;
}

/* The one text action on the amount: reveal the currency picker. Text actions are
   --accent-700 in the token set. */
.stasf-textaction {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-700, #c9740f);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.stasf-textaction:hover {
    color: var(--accent-600, #d67a0b);
}

/* ── Live totals under an amount (osnovica → PDV → za platiti) ────────────────────── */

.stasf-totals {
    background: var(--surface-2, #fafbfc);
    border: 1px solid var(--rule-sec, #e6eaf0);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    margin-top: 0.6rem;
}

.stasf-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    color: var(--ink-2, #475569);
}

.stasf-totals-row > span:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink, #1e293b);
}

.stasf-totals-row.stasf-totals-final {
    margin-top: 0.3rem;
    padding-top: 0.5rem;
    border-top: 2px solid var(--teal, #003951);
    font-weight: 700;
}

.stasf-totals-row.stasf-totals-final > span:last-child {
    font-size: 1rem;
    font-weight: 800;
    color: var(--teal, #003951);
}

/* ── Unsaved-changes dialog ───────────────────────────────────────────────────────────
   S-size: one decision, no fields. Cancelling action left, confirming action right,
   destructive one in the middle so it is not the resting place of a reflex click. */

.stasf-guard {
    padding: 1.25rem 1.4rem 1.1rem;
    background: var(--surface, #fff);
}

.stasf-guard-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-strong, #0f2836);
    margin: 0 0 0.4rem;
}

.stasf-guard-title i {
    color: var(--accent, #ed880e);
}

.stasf-guard-text {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ink-3, #5b6b7c);
    margin: 0 0 1.1rem;
}

.stasf-guard-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stasf-guard-actions .stasf-guard-keep {
    margin-right: auto;
}

/* ── Certificate card (fiscal settings) ───────────────────────────────────────────── */

.stasf-cert {
    border: 1px solid var(--rule-card, #ccd6e0);
    border-radius: 12px;
    background: var(--surface, #fff);
    overflow: hidden;
}

.stasf-cert-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: var(--surface-2, #fafbfc);
    border-bottom: 1px solid var(--rule-sec, #e6eaf0);
}

.stasf-cert-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--teal, #003951);
}

.stasf-cert-rows {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 0;
}

.stasf-cert-key,
.stasf-cert-val {
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--rule-soft, #eef2f6);
}

.stasf-cert-key {
    color: var(--ink-5, #64748b);
    font-weight: 600;
}

.stasf-cert-val {
    color: var(--ink, #1e293b);
    word-break: break-word;
}

.stasf-cert-rows > :nth-last-child(-n + 2) {
    border-bottom: 0;
}

/* Expiry badge — four tiers, and they must not be able to be mistaken for each other. */
.stasf-expiry {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.stasf-expiry-ok {
    background: var(--ok-bg, #e6f2ec);
    color: var(--ok, #12724f);
}

.stasf-expiry-soon {
    background: var(--accent-bg, #fdf0e3);
    color: var(--accent-ink, #a75f0a);
}

.stasf-expiry-urgent,
.stasf-expiry-expired {
    background: var(--crit-bg, #f8dada);
    color: var(--crit-ink, #a52f2f);
}

/* ── Section card on a plain page (fiscal settings) ───────────────────────────────────
   Same language as the modal section: #E4E9EE border, #F6F8FA header, 10.5px uppercase
   title. Kept here rather than on the page so the next settings screen inherits it. */

.stasf-section {
    border: 1px solid #e4e9ee;
    border-radius: 12px;
    background: var(--surface, #fff);
    overflow: hidden;
    margin-bottom: 1rem;
}

.stasf-section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #f6f8fa;
    border-bottom: 1px solid #e4e9ee;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3, #5b6b7c);
}

.stasf-section-head i {
    color: var(--accent, #ed880e);
    font-size: 0.8rem;
}

.stasf-section-body {
    padding: 1rem;
}

@media (max-width: 640px) {
    .stasf-cert-rows {
        grid-template-columns: 1fr;
    }

    .stasf-cert-key {
        border-bottom: 0;
        padding-bottom: 0;
    }
}