/* ══════════════════════════════════════════
   LAYOUT FIXES FROM TESTLAYOUT.HTML
   Focus: Forms, Typography, Text Content
══════════════════════════════════════════ */

/* ── TYPOGRAPHY ── */
h1 {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: -0.03em !important;
}

h2 {
    font-size: 2.0rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: -0.02em !important;
}

h3 {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.5rem !important;
}

h4 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

h5 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

h6 {
    font-size: 1.0rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--muted) !important;
}

.text-large {
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    font-weight: 300 !important;
    margin-bottom: 1rem !important;
}

.text-base {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    margin-bottom: 1rem !important;
    color: var(--muted) !important;
}

.text-small {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    margin-bottom: 1rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.panel-title {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--accent) !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: -0.01em !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 0.8rem !important;
}

/* ── FORM ELEMENTS ── */
.form-group {
    margin-bottom: 1.2rem !important;
}

.field-label {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    color: white !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    outline: none !important;
    transition: all 0.2s !important;
}

/* Height adjustments */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
    height: var(--touch) !important;
    padding: 0 1rem !important;
}

textarea {
    padding: 1rem !important;
    resize: vertical !important;
    min-height: 120px !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.15) !important;
}

/* Checkbox & Radio */
.check-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    cursor: pointer !important;
}

.check-wrap input {
    display: none !important;
}

.check-box,
.radio-box {
    width: 22px !important;
    height: 22px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

.check-box {
    border-radius: 6px !important;
}

.radio-box {
    border-radius: 50% !important;
}

.check-wrap input:checked ~ .check-box,
.check-wrap input:checked ~ .radio-box {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

.check-wrap input:checked ~ .check-box::after {
    content: '✓' !important;
    color: #0f2027 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.check-wrap input:checked ~ .radio-box::after {
    content: '' !important;
    width: 10px !important;
    height: 10px !important;
    background: #0f2027 !important;
    border-radius: 50% !important;
}

.check-label {
    font-size: 0.9rem !important;
    color: var(--muted) !important;
}

/* Buttons */
.btn {
    height: var(--touch) !important;
    padding: 0 1.5rem !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s !important;
}

.btn-primary {
    background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
    color: #0f2027 !important;
    box-shadow: 0 8px 24px rgba(0, 245, 212, 0.25) !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: white !important;
}


.field-label {
    color: var(--accent) !important;
    
}

.v-application {
    [class*='text-'] {
        font-family: 'Roboto', sans-serif !important;
    }

    font-family: 'Roboto',
    sans-serif !important;
}

/* Material Design Icons - reduced to only used icons */
@font-face {
    font-family: "Material Design Icons";
    src: url("../assets/fonts/materialdesignicons-webfont.eot?v=7.4.47");
    src: url("../assets/fonts/materialdesignicons-webfont.eot?#iefix&v=7.4.47") format("embedded-opentype"), url("../assets/fonts/materialdesignicons-webfont.woff2?v=7.4.47") format("woff2"), url("../assets/fonts/materialdesignicons-webfont.woff?v=7.4.47") format("woff"), url("../assets/fonts/materialdesignicons-webfont.ttf?v=7.4.47") format("truetype");
    font-weight: normal;
    font-style: normal
}

.mdi:before,
.mdi-set {
    display: inline-block;
    font: normal normal normal 24px/1 "Material Design Icons";
    font-size: inherit;
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

/* ========== USED ICONS ========== */
.mdi-account::before {
    content: "\F0004"
}
.mdi-account-group::before {
    content: "\F0849"
}
.mdi-account-off::before {
    content: "\F0012"
}
.mdi-account-outline::before {
    content: "\F0013"
}
.mdi-arrow-left::before {
    content: "\F004D"
}
.mdi-calendar-end::before {
    content: "\F166C"
}
.mdi-calendar-start::before {
    content: "\F166D"
}
.mdi-card-account-details::before {
    content: "\F05D2"
}
.mdi-card-account-details-outline::before {
    content: "\F0DAB"
}
.mdi-chart-line::before {
    content: "\F012A"
}
.mdi-chart-line-stacked::before {
    content: "\F076B"
}
.mdi-chart-off::before {
    content: "\F1BFF"
}
.mdi-chart-timeline-variant::before {
    content: "\F0E93"
}
.mdi-chevron-down::before {
    content: "\F0140"
}
.mdi-city::before {
    content: "\F0146"
}
.mdi-clock::before {
    content: "\F0954"
}
.mdi-clock-outline::before {
    content: "\F0150"
}
.mdi-close::before {
    content: "\F0156"
}
.mdi-code-tags::before {
    content: "\F0174"
}
.mdi-cog::before {
    content: "\F0493"
}
.mdi-delete::before {
    content: "\F01B4"
}
.mdi-email::before {
    content: "\F01EE"
}
.mdi-email-open::before {
    content: "\F01EF"
}
.mdi-fuel::before {
    content: "\F07CA"
}
.mdi-gas-station::before {
    content: "\F0298"
}
.mdi-heart::before {
    content: "\F02D1"
}
.mdi-information::before {
    content: "\F02FC"
}
.mdi-lock::before {
    content: "\F033E"
}
.mdi-magnify::before {
    content: "\F0349"
}
.mdi-map-marker::before {
    content: "\F034E"
}
.mdi-map-marker-distance::before {
    content: "\F08F0"
}
.mdi-message-text::before {
    content: "\F0369"
}
.mdi-pencil::before {
    content: "\F03EB"
}
.mdi-plus::before {
    content: "\F0415"
}
.mdi-refresh::before {
    content: "\F0450"
}
.mdi-reply::before {
    content: "\F045A"
}
.mdi-road-variant::before {
    content: "\F0462"
}
.mdi-shield-lock-outline::before {
    content: "\F0CCC"
}
.mdi-speedometer::before {
    content: "\F04C5"
}
.mdi-timeline-text-outline::before {
    content: "\F0BD4"
}

/* ========== SIZE & UTILITY CLASSES (kept as is) ========== */
.mdi-18px.mdi-set,
.mdi-18px.mdi:before {
    font-size: 18px
}

.mdi-24px.mdi-set,
.mdi-24px.mdi:before {
    font-size: 24px
}

.mdi-36px.mdi-set,
.mdi-36px.mdi:before {
    font-size: 36px
}

.mdi-48px.mdi-set,
.mdi-48px.mdi:before {
    font-size: 48px
}

.mdi-dark:before {
    color: rgba(0, 0, 0, 0.54)
}

.mdi-dark.mdi-inactive:before {
    color: rgba(0, 0, 0, 0.26)
}

.mdi-light:before {
    color: #fff
}

.mdi-light.mdi-inactive:before {
    color: rgba(255, 255, 255, 0.3)
}

.mdi-rotate-45:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.mdi-rotate-90:before {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.mdi-rotate-135:before {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg)
}

.mdi-rotate-180:before {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.mdi-rotate-225:before {
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg)
}

.mdi-rotate-270:before {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

.mdi-rotate-315:before {
    -webkit-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    transform: rotate(315deg)
}

.mdi-flip-h:before {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH"
}

.mdi-flip-v:before {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV"
}

.mdi-spin:before {
    -webkit-animation: mdi-spin 2s infinite linear;
    animation: mdi-spin 2s infinite linear
}

@-webkit-keyframes mdi-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes mdi-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}