/* ============================
   BASE
   ============================ */
body {
    font-family:
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background-color: #a0a0a0;
    color: #474d56;
}

select,
input,
textarea,
button {
    font-family: inherit;
}

/* ============================
   FORM ELEMENTS
   ============================ */

select,
input[type="text"],
input[type="number"],
input[type="date"],
textarea {
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid #bdc1c9;
    border-radius: 4px;
    font-size: 20px;
    color: #262626;
    padding: 3px;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

select:focus,
input:focus,
textarea:focus {
    outline: none;
    border-color: #00a6dc;
    box-shadow: 0 0 0 1px #00a6dc inset;
}

select {
    height: 28px;
    padding: 2px 6px;
}

input[type="color"] {
    width: 50px;
    height: 24px;
    padding: 0;
}

input[type="number"],
input[type="date"] {
    width: 48px;
    height: 20px;
    font-weight: 400;
}

input[type="text"] {
    height: 32px;
}

/* ============================
   CONTAINERS / PANES
   ============================ */

.bordered-pane {
    background-color: #ffffff;
    border: 1px solid #bdc1c9;
}
.border-only {
    border: 1px solid #bdc1c9;
}

/* ============================
   TEXT, LABELS, TITLES
   ============================ */
.med-label {
    font-size: 20px;
    color: #474d56;
    font-weight: 700;
}
.editor-label {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #474d56;
}
/* ============================
   BUTTONS
   ============================ */
.standard-button {
    background-color: #ffffff;
    border: 1px solid #bdc1c9;
    border-radius: 6px;
    color: #00529c;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    width: 120px;
    height: 26px;
    font-size: 14px;
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.standard-button:hover {
    background-color: #bfdfd7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

.standard-button:active {
    transform: translateY(2px);
}
/* *-------- --------------------------------------*/
/* *--------                 TOGGLES              --*/
/* *-------- --------------------------------------*/
/* ------------------------------
   TOGGLE — OFF (idle, clickable)
   ------------------------------ */
.std-toggle-off {
    width: 60px;
    height: 24px;

    background: linear-gradient(#f7f7f7, #e6e6e6);
    border: 1px solid #b8bcc4;
    border-radius: 4px;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);

    color: #5a5f66;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    user-select: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
}

.std-toggle-off:hover {
    background: linear-gradient(#ffffff, #eeeeee);
    border-color: #9aa0a9;
}

.std-toggle-off:active {
    transform: translateY(1px);
    box-shadow:
        0 0 1px rgba(0, 0, 0, 0.25),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ------------------------------
   TOGGLE — ON (active)
   ------------------------------ */
.std-toggle-on {
    width: 60px;
    height: 24px;

    background: linear-gradient(#3aa0ff, #2a70ff);
    border: 1px solid #245fd6;
    border-radius: 4px;

    box-shadow:
        0 2px 4px rgba(42, 112, 255, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);

    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    user-select: none;

    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
}

.std-toggle-on:hover {
    background: linear-gradient(#4db0ff, #3a80ff);
}

.std-toggle-on:active {
    transform: translateY(1px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35),
        inset 0 2px 4px rgba(0, 0, 0, 0.25);
}