/*
 * Doify unified form design system.
 * Loaded after app.css/components.css so every module gets the same geometry
 * without forcing compact filters and row actions into the full editor layout.
 */
:root {
    --form-control-height: 40px;
    --form-gap-x: 16px;
    --form-gap-y: 15px;
    --form-field-radius: 9px;
    --form-section-bg: #fbfcff;
    --form-section-line: #e4eaf3;
}

/* Main editors */
form.form-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--form-gap-y) var(--form-gap-x);
    align-items: start;
}

form.form-grid > :where(label, .form-field) {
    grid-column: span 6;
    min-width: 0;
    align-content: start;
}

form.form-grid > :where(.full, .form-actions, fieldset, .form-section, .setup-section, .alert, .notice, h2) {
    grid-column: 1 / -1;
}

.form-grid :where(label, .form-field),
.form-stack :where(label, .form-field),
.settings-form :where(label, .form-field),
.compact-form :where(label, .form-field) {
    min-width: 0;
}

form :where(input:not([type="checkbox"]):not([type="radio"]), select) {
    height: var(--form-control-height);
    min-height: var(--form-control-height);
    border-radius: var(--form-field-radius);
}

form textarea {
    min-height: 96px;
    border-radius: var(--form-field-radius);
}

form :where(input, select, textarea)[aria-invalid="true"],
form :where(input, select, textarea):user-invalid {
    border-color: #e06a7d;
    background: #fffafb;
}

.field-label,
.form-grid > label,
.form-stack > label,
.form-section-grid > label,
.form-section-grid > .form-field {
    color: #344054;
    font-size: 11.5px;
    font-weight: 650;
}

.field-error {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 1px;
    font-size: 10px !important;
}

.field-error::before {
    content: "!";
    width: 15px;
    height: 15px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 15px;
    border-radius: 50%;
    color: #fff;
    background: var(--danger);
    font-size: 9px;
    font-weight: 800;
}

/* Logical groups inside long editors */
.form-section {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--form-section-line);
    border-radius: 13px;
    background: var(--form-section-bg);
}

.form-section-title,
.setup-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0 0 11px;
    border-bottom: 1px solid var(--form-section-line);
}

.form-section-title > span,
.setup-section > span {
    min-width: 0;
}

.form-section-title strong,
.setup-section strong {
    display: block;
    color: #253651;
    font-size: 13px;
    line-height: 1.55;
}

.form-section-title small,
.setup-section small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 400;
}

.form-section-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 13px var(--form-gap-x);
    align-items: start;
}

.form-section-grid > :where(label, .form-field) {
    grid-column: span 6;
    display: grid;
    gap: 5px;
    min-width: 0;
    align-content: start;
}

.form-section-grid > :where(.full, fieldset, .notice, .alert) { grid-column: 1 / -1; }
.form-section-grid > .span-4 { grid-column: span 4; }
.form-section-grid > .span-8 { grid-column: span 8; }
.form-section-grid > .span-3 { grid-column: span 3; }
.form-section-grid > .span-9 { grid-column: span 9; }

/* Section headings used by existing dynamic forms (assets and travel). */
form.form-grid > .setup-section {
    margin: 5px 0 -1px;
    padding: 12px 14px 10px;
    border: 1px solid var(--form-section-line);
    border-radius: 12px 12px 6px 6px;
    background: linear-gradient(135deg, #f6f9ff, #fbfcff);
}

form.form-grid > .setup-section strong { font-size: 12.5px; }

fieldset {
    align-items: stretch;
    padding: 13px;
    border-radius: 11px;
}

fieldset legend { font-size: 11.5px; }
fieldset .field-help { width: 100%; margin: 0 0 7px; color: var(--muted); font-size: 10px; }

.check {
    min-height: var(--form-control-height);
    border-radius: var(--form-field-radius);
}

.form-actions {
    min-height: 55px;
    margin-top: 2px;
    padding-top: 14px;
}

.form-actions > :where(button, .button) { min-width: 112px; }

/* A legacy main form occasionally places its submit button directly in the grid. */
form.form-grid > button:not(.icon-button):not(.link-danger) {
    grid-column: 1 / -1;
    justify-self: end;
    min-width: 112px;
    margin-top: 2px;
}

/* Compact forms keep compact proportions and never inherit editor columns. */
:where(.filter-bar, .inline-form, .compact-form, .audit-filter, .report-filters, .calendar-filter, .target-company-picker) {
    --form-control-height: 36px;
}

:where(.filter-bar, .inline-form, .compact-form, .audit-filter, .report-filters, .calendar-filter, .target-company-picker) label {
    display: grid;
    gap: 4px;
    color: #475467;
    font-size: 10.5px;
    font-weight: 600;
}

.filter-bar {
    padding: 13px 14px;
    border-radius: 13px;
}

.inline-form {
    min-width: 0;
    flex-wrap: wrap;
}

.inline-form > label { flex: 1 1 150px; }
.inline-form > :where(button, .button) { flex: 0 0 auto; }

/* Existing comprehensive employee/settings forms join the same visual language. */
.employee-form-section,
.settings-section {
    border-color: var(--form-section-line);
    border-radius: 13px;
}

.employee-form-section .form-grid,
.settings-section .form-grid {
    align-items: start;
}

@media (max-width: 1050px) {
    form.form-grid > :where(label, .form-field),
    .form-section-grid > :where(label, .form-field),
    .form-section-grid > :where(.span-3, .span-4, .span-8, .span-9) {
        grid-column: span 6;
    }
}

@media (max-width: 900px) {
    form.form-grid,
    .form-section-grid { grid-template-columns: 1fr; }

    form.form-grid > :where(label, .form-field, .full, .form-actions, fieldset, .form-section, .setup-section, .alert, .notice, h2),
    .form-section-grid > :where(label, .form-field, .full, .span-3, .span-4, .span-8, .span-9, fieldset, .notice, .alert) {
        grid-column: 1;
    }
}

@media (max-width: 600px) {
    :root { --form-control-height: 44px; --form-gap-y: 13px; }

    form.form-grid.panel { padding: 11px; }
    .form-section { padding: 12px; border-radius: 11px; }
    .form-section-title, .setup-section { display: block; margin-bottom: 12px; }
    .form-section-title strong, .setup-section strong { font-size: 12.5px; }
    .form-actions { margin-right: -11px; margin-left: -11px; margin-bottom: -11px; }
    .form-actions > :where(button, .button) { min-width: 0; }
    .inline-form { width: 100%; }
    .inline-form > label, .inline-form > :where(button, .button) { flex: 1 1 100%; }
}
.form-workflow-shell{display:grid;gap:10px;margin:0 0 14px}.form-stepper{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;list-style:none;margin:0;padding:0}.form-stepper li button{width:100%;min-height:54px;display:flex;align-items:center;gap:8px;text-align:right;background:#fff;color:#64748b;border:1px solid #dce5f1;box-shadow:none;padding:8px 10px}.form-stepper li b{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:#eef3ff;color:#4f6fd8;flex:0 0 auto}.form-stepper li.active button{border-color:#7898ff;background:#f5f8ff;color:#172033}.form-stepper li.active b,.form-stepper li.done b{background:#5d82f6;color:#fff}.form-stepper li.done button{color:#3155bd;border-color:#cbd8ff}.draft-status{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:8px 13px;border:1px solid #dce5f1;border-radius:12px;background:#f8fafc;color:#526177}.draft-status span{font-weight:700}.draft-status small{font-size:10px}.draft-status.saved,.draft-status.restored{background:#f0fdf7;border-color:#bbf0d4;color:#167352}.draft-status.error{background:#fff7ed;border-color:#fed7aa;color:#9a4b12}.draft-status.available{background:#eef4ff;border-color:#c8d7ff;color:#3155bd}.draft-status div{display:flex;gap:6px}.draft-status button{padding:6px 10px;font-size:10px}.form-workflow-active>[data-form-step][hidden]{display:none!important}.form-workflow-active>[data-form-step]{scroll-margin-top:96px}.form-workflow-navigation{display:flex;justify-content:space-between;align-items:center;gap:10px;grid-column:1/-1;margin-top:4px;padding-top:14px;border-top:1px solid #e8edf5}.form-review-step{display:grid;gap:14px}.form-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.form-review-grid>section{border:1px solid #e1e8f3;border-radius:14px;background:#fbfcff;overflow:hidden}.form-review-grid header{display:flex;align-items:center;gap:8px;padding:9px 11px;background:#f1f5fb}.form-review-grid header b{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#5d82f6;color:white}.form-review-grid header strong{flex:1}.form-review-grid header button{padding:5px 9px;font-size:10px;background:transparent;color:#3155bd;border:1px solid #b9c9f5}.form-review-grid dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0}.form-review-grid dl>div{padding:9px 11px;border-top:1px solid #edf1f7}.form-review-grid dt{font-size:10px;color:#718096}.form-review-grid dd{margin:3px 0 0;font-weight:650;white-space:pre-wrap;overflow-wrap:anywhere}.form-workflow-review-actions{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #e8edf5;padding-top:14px}.form-workflow-review-actions .form-actions,.form-workflow-review-actions .sticky-form-actions{margin:0;padding:0;border:0;background:transparent;box-shadow:none}.client-field-error{display:block}.recent-suggestions{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:5px}.recent-suggestions small{color:#718096}.recent-suggestions button{padding:3px 8px;font-size:9px;border-radius:999px;background:#eef3ff;color:#3155bd;border:1px solid #cfdbff;box-shadow:none}.form-advanced{grid-column:1/-1;border:1px solid #dde5f0;border-radius:13px;background:#fbfcff;padding:0}.form-advanced>summary{cursor:pointer;padding:12px 14px;font-weight:750;color:#334155}.form-advanced[open]>summary{border-bottom:1px solid #e7edf5}.form-advanced>.form-section-grid{padding:13px}.bulk-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;background:#f4f7fc;border:1px solid #dde6f3;border-radius:13px}.bulk-toolbar label{min-width:150px}.bulk-toolbar .bulk-count{margin-inline-start:auto;color:#526177}.bulk-select-cell{width:38px;text-align:center}.bulk-select-cell input{width:17px;height:17px}.catalog-bulk-item{display:flex;align-items:center;gap:8px}.catalog-bulk-item>input{width:17px;height:17px;flex:0 0 auto}
/* Full-width, readable review stage for multi-step forms. */
.form-workflow-active > .form-review-step {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
    padding: 0;
}

.form-review-grid {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 12px;
}

.form-review-grid > section { min-width: 0; }
.form-review-grid header { padding: 10px 12px; }
.form-review-grid header b { flex: 0 0 auto; }
.form-review-grid header strong { min-width: 0; }
.form-review-grid header button { white-space: nowrap; }
.form-review-grid dl > div { min-width: 0; padding: 10px 12px; }
.form-review-grid dd {
    max-width: 100%;
    line-height: 1.7;
    overflow-wrap: break-word;
    word-break: normal;
    unicode-bidi: plaintext;
}

.form-workflow-review-actions {
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
}

.form-workflow-review-actions > :is(.form-actions, .sticky-form-actions) {
    width: auto;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media(max-width:760px){.form-stepper{display:flex;overflow-x:auto;scrollbar-width:none}.form-stepper li{min-width:126px}.draft-status{align-items:flex-start;flex-direction:column}.form-review-grid,.form-review-grid dl{grid-template-columns:minmax(0,1fr)}.form-workflow-navigation button{flex:1}.form-workflow-review-actions{align-items:stretch;flex-direction:column}.form-workflow-review-actions>button,.form-workflow-review-actions>:is(.form-actions,.sticky-form-actions){width:100%}.form-workflow-review-actions>:is(.form-actions,.sticky-form-actions)>:is(button,.button){flex:1;min-width:0}.bulk-toolbar>*{width:100%}.bulk-toolbar .bulk-count{margin:0}.form-review-step{padding:0}}