/* ============================
   BASE
   ============================ */

body {
    font-family: "Segoe UI Black", "Segoe UI", system-ui, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background-color: #b0b0b0;
    color: #474d56;
}
/* ============================
   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: 24px;
    font-weight: 550;
    color: #888d97;
    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="number"],
input[type="date"] {
    width: 48px;
    height: 20px;
    font-weight: 400;
}
input[type="text"] {
    height: 32px;
}
textarea {
    font-size: 12px;
    resize: none;
}
/* ============================  BUTTONS  ============================ */
button {
    cursor: pointer;
}
.icon-button {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* maximize while staying fully visible */
    background-origin: padding-box;
    background-clip: padding-box;
    border-width: 0px;
    outline: none;
    transition: 0.25s;
    cursor: pointer;
}
.icon-button:hover {
    transform: scale(1.25);
}
.icon-button:active {
    transform: translateY(2px);
}
.basepage-button {
    border-style: solid;
    border-width: 8px;
    border-radius: 18px;
    border-color: #86c6b7;
    color: white;
    background-color: #1faa92;
    font-size: 20px;
    font-weight: 650;
}
.basepage-button:hover {
    border-width: 12px;
    text-decoration: underline;
}
.basepage-button:active {
    transform: translateY(6px);
}
.dialog-button {
    border-style: solid;
    border-width: 10px;
    border-radius: 20px;
    border-color: #7bc466;
    color: #7bc466;
    background-color: white;
    font-size: 18px;
    font-weight: 550;
}
.dialog-button:hover {
    border-width: 4px;
    text-decoration: underline;
    font-size: 24px;
    font-weight: bold;
}
.dialog-button:active {
    transform: translateY(6px);
}
.image-toggle {
    background-color: #ffffff;
    border-style: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.image-toggle:hover {
    transform: scale(1.25);
}

/* ============================  CONTAINERS ============================ */
.popup {
    background: rgba(240, 240, 240, 0.9);
    backdrop-filter: blur(8px);
    border: 7px solid #006eb0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
}

/* ============================  TEXT ============================ */
.app-title {
    font-weight: 900;
    font-size: 46px;
    letter-spacing: 0.03em;

    /* Darkblue → teal “sheen” (stays punchy on white) */
    background: linear-gradient(
        180deg,
        #00529c 0%,
        /* NDARKBLUE */ #006eb0 35%,
        /* NMEDIUMBLUE */ #1faa92 70%,
        /* NTEAL */ #00529c 100% /* NDARKBLUE */
    );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* Prevents the “faded on white” look */
    -webkit-text-stroke: 0.9px #00529c; /* NDARKBLUE */

    /* Crisp depth (not fog) */
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.08),
        0 6px 14px rgba(71, 77, 86, 0.18); /* NDARKGREY */

    -webkit-font-smoothing: antialiased;

    filter: saturate(1.15) contrast(1.1);
}
.page-title {
    font-weight: 800;
    font-size: 42px;
    color: #00a6dc;
}
.section-title {
    font-weight: 700;
    font-size: 28px;
    color: #00529c;
}
.information {
    color: black;
    font-size: 24px;
    font-weight: 600;
}
.note {
    color: black;
    font-size: 16px;
}
.label {
    color: #888d97;
    font-size: 28px;
    font-weight: 550;
    user-select: none;
}
/* ============================  LIST============================ */
.list-item {
    cursor: pointer;
    border: 1px solid #bdc1c9;
    background-color: rgba(218, 220, 225, 0.6);
    color: #262626;
    font-size: 24px;
    padding: 2px 2px;
}
.list-item:hover {
    background-color: #1faa92;
    color: #ffffff;
}
.list-item:active {
    transform: translateY(2px);
}
.list-item-selected {
    background-color: #ffff05;
    font-weight: bold;
}
.sm-list-item {
    cursor: pointer;
    border: 1px solid #bdc1c9;
    background-color: rgba(218, 220, 225, 0.6);
    color: #727272;
    font-size: 17px;
    padding: 2px 2px;
}
.sm-list-item:hover {
    background-color: #1faa92;
    color: #ffffff;
}
.sm-list-item:active {
    transform: translateY(2px);
}
.sm-list-item-selected {
    background-color: #d6186e;
    color: white;
    font-weight: bold;
}
.sm-list-item-selected:hover {
    background-color: #e382a7;
}