/* ============================================
   PRETTY FORM
   ============================================
   The stylesheet that webroot/js/pretty-form.js was written for.

   pretty-form.js restructures every scaffolded add/edit form into
   .cand-section cards with .cand-section-header, .icon-chip, a
   .cand-section-body, .cand-switch-tile checkboxes and a .cand-form-actions
   bar. None of those class names appeared in any stylesheet in the project,
   so the script had been rearranging the markup into a shape nothing styled -
   which is why the "already enhanced" forms looked as plain as the ones that
   were never touched.

   Element/entity_form.ctp writes the same class names by hand, so a template
   that opts into the element and a template the script rewrites come out
   looking the same.

   The palette is the one in form-styles.css: cyan #00BCD4 -> #0097A7.
   ============================================ */

:root {
    --pf-accent: #00BCD4;
    --pf-accent-dark: #0097A7;
    --pf-ink: #2c3e50;
    --pf-muted: #7b8a9a;
    --pf-line: #e6ecf1;
    --pf-surface: #ffffff;
    --pf-surface-soft: #f7fbfc;
}

/* ---- The form page ---- */

.cand-form {
    max-width: 1080px;
    margin: 0 auto;
}

/* ---- Section card ---- */

.cand-section {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(20, 40, 60, 0.06);
    margin-bottom: 22px;
    overflow: hidden;
}

.cand-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: linear-gradient(135deg, #f7fdfe 0%, #eef8fa 100%);
    border-bottom: 1px solid var(--pf-line);
}

.cand-section-header h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--pf-ink);
    letter-spacing: 0.01em;
}

.cand-section-header p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--pf-muted);
}

.icon-chip {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--pf-accent) 0%, var(--pf-accent-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 3px 10px rgba(0, 151, 167, 0.28);
}

.cand-section-body {
    padding: 22px;
}

/* A fieldset inside a section has already had its frame drawn by the card. */
.cand-section-body fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

/* ---- Fields ---- */

.cand-form .form-label,
.cand-form label:not(.form-check-label) {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #55677a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cand-form .cand-field,
.cand-form .form-group {
    margin-bottom: 18px;
}

/* Inside a .cand-field the wrapper CakePHP emits carries no bottom margin of
   its own - the field owns the spacing, so a help sentence sits against the
   input it explains rather than a gap away from it. */
.cand-form .cand-field .input {
    margin-bottom: 0;
}

.cand-form .input {
    margin-bottom: 18px;
}

.cand-form .form-control,
.cand-form .form-select {
    width: 100%;
    border: 1px solid #d8e1e8;
    border-radius: 9px;
    padding: 10px 13px;
    font-size: 14px;
    color: var(--pf-ink);
    background-color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cand-form .form-control:focus,
.cand-form .form-select:focus {
    border-color: var(--pf-accent);
    box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.18);
    outline: 0;
}

.cand-form .form-control[readonly],
.cand-form .form-control:disabled {
    background-color: #f4f7f9;
    color: var(--pf-muted);
}

.cand-form textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

/* A required field says so once, quietly, next to its label. */
.cand-form .cand-required::after {
    content: "*";
    margin-left: 4px;
    color: #e5533d;
    font-weight: 700;
}

/* The sentence under a field that explains what belongs in it. */
.cand-form .cand-help {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--pf-muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.cand-form .error-message {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #e5533d;
}

.cand-form .form-control.form-error,
.cand-form .error input,
.cand-form .error select,
.cand-form .error textarea {
    border-color: #e5533d;
}

/* ---- Checkbox rendered as a switch tile ----

   One tile is one yes/no answer, so it is a single row: the switch, then the
   question, on one line. The rules below undo three things that fought that.

   CakePHP renders a checkbox control with the <input> INSIDE its <label>.
   Bootstrap's .form-check and .form-switch indent their box and pull the input
   back with a negative margin, which assumes the input is a direct child - with
   the input nested one level deeper those two cancel out into a gap between the
   border and the switch instead. Both are reset here.

   A tile inside a tile draws two borders and two paddings around one switch.
   pretty-form.js no longer produces that, but the guard costs one rule and
   covers any template whose markup takes a different path through it. */

.cand-switch-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--pf-line);
    border-radius: 9px;
    background: var(--pf-surface-soft);
    min-height: 40px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cand-switch-tile:hover {
    border-color: #b9c6d0;
}

/* Keyboard focus has to be visible on the tile, because the switch itself is
   small and sits against a tinted background. */
.cand-switch-tile:focus-within {
    border-color: var(--pf-accent);
    box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.18);
}

/* A tile nested in a tile contributes no frame of its own. */
.cand-switch-tile .cand-switch-tile {
    border: 0;
    background: none;
    padding: 0;
    min-height: 0;
    box-shadow: none;
}

/* Bootstrap's indent, and CakePHP's own wrapper, both flattened into the row. */
.cand-switch-tile .form-check,
.cand-switch-tile .form-switch,
.cand-switch-tile .input {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
}

.cand-switch-tile .form-check-input {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 1.3rem;
    margin: 0;
    cursor: pointer;
    background-color: #e4eaef;
    border-color: #cfd8e0;
}

.cand-switch-tile .form-check-input:checked {
    background-color: var(--pf-accent);
    border-color: var(--pf-accent);
}

.cand-switch-tile .form-check-input:focus {
    box-shadow: none;
}

/* The label carries the switch, so clicking anywhere along the row toggles it. */
.cand-switch-tile .form-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #55677a;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

/* On and off should be readable at a glance, not only from the switch. */
.cand-switch-tile:has(.form-check-input:checked) {
    background: #edfafc;
    border-color: #9fdde7;
}

.cand-switch-tile:has(.form-check-input:checked) .form-check-label {
    color: var(--pf-ink);
}

/* ---- Action bar ---- */

.cand-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    margin-bottom: 22px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(20, 40, 60, 0.06);
}

.cand-form-actions .cand-actions-note {
    flex: 1 1 auto;
    font-size: 12.5px;
    color: var(--pf-muted);
}

.btn-cand-save,
.cand-form-actions button[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 26px;
    border: 0;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--pf-accent) 0%, var(--pf-accent-dark) 100%);
    box-shadow: 0 3px 10px rgba(0, 151, 167, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-cand-save:hover,
.cand-form-actions button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 151, 167, 0.36);
    color: #fff;
}

.btn-cand-cancel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #d8e1e8;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: #55677a;
    background: #fff;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-cand-cancel:hover {
    background: #f1f5f8;
    color: var(--pf-ink);
    text-decoration: none;
}

/* ---- Page header above the form ---- */

.cand-page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 22px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--pf-accent) 0%, var(--pf-accent-dark) 100%);
    box-shadow: 0 4px 16px rgba(0, 151, 167, 0.25);
}

.cand-page-header .cand-page-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex: 0 0 auto;
}

.cand-page-header h1 {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
}

.cand-page-header p {
    margin: 3px 0 0;
    font-size: 13px;
    opacity: 0.92;
}

.cand-page-header .cand-page-spacer {
    flex: 1 1 auto;
}

.cand-page-header .btn-cand-cancel {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.cand-page-header .btn-cand-cancel:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* ---- Small screens ---- */

@media (max-width: 768px) {
    .cand-section-body,
    .cand-form-actions {
        padding: 16px;
    }

    .cand-page-header {
        padding: 16px;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* The back link gets its own row rather than squeezing the title into two
       words per line. */
    .cand-page-header .cand-page-spacer {
        display: none;
    }

    .cand-page-header .btn-cand-cancel {
        flex: 1 0 100%;
        justify-content: center;
    }

    .cand-page-header h1 {
        font-size: 18px;
    }

    .cand-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cand-form-actions .btn-cand-save,
    .cand-form-actions .btn-cand-cancel {
        justify-content: center;
    }

    .cand-form-actions .cand-actions-note {
        order: 3;
        text-align: center;
    }
}