/* ================================================================
   LOAN FUND — style.css
   ================================================================
   Organized into 6 sections, in this order:
     1. Reset & Variables    — browser reset, colors, spacing
     2. Global Layout        — navbar, footer, page structure,
                               tables, shared across every page
     3. Global Components    — buttons, form fields, badges,
                               alerts — small reusable pieces
     4. Global Modals        — the shared modal shell and the
                               "Info ..." field label/value standard
     5. Page-Specific Styles — one sub-section per page, only
                               rules used on exactly one page
     6. Responsive Overrides — @media breakpoints

   BEFORE ADDING A NEW RULE: search this file for the class name
   first. If it already exists, edit it in place — do not paste a
   second definition elsewhere. That single habit is what keeps
   this file from turning back into a pile of duplicates.
   ================================================================ */


/* ================================================================
   SECTION 1 — RESET & VARIABLES
   Browser reset, plus every color/spacing/radius value used
   anywhere else in this file. If you're about to type a hex
   color, check here first for an existing variable instead.
   ================================================================ */

:root {
    --blue:          #0562b0;
    --blue_dark:     #000034;
    --blue_light:    #e8f3fc;
    --yellow:        #fcd00b;
    --yellow_dark:   #fca80b;
    --yellow_deep:   #cd9100;
    --white:         #ffffff;
    --gray_light:    #f5f7fa;
    --gray_mid:      #e0e4ea;
    --gray_text:     #6b7280;
    --text_dark:     #000034;
    --green:         #00b050;
    --green_light:   #e6f9ee;
    --orange:        #f97316;
    --orange_light:  #fff3e8;
    --red:           #dc2626;
    --red_light:     #fef2f2;
    --radius:        12px;
    --radius_sm:     8px;
    --shadow:        0 4px 20px rgba(0,0,52,0.10);
    --shadow_sm:     0 2px 8px  rgba(0,0,52,0.07);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    -webkit-user-select: none;
    user-select: none;
}

body {
    font-family: Arial, sans-serif;
    font-size: 15px;
    background-color: var(--gray_light);
    color: var(--text_dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}


/* ================================================================
   SECTION 2 — GLOBAL LAYOUT
   Structural pieces shared by every page: navbar (incl. the
   dropdown menu), footer, page wrapper, section headers, data
   tables, filter tabs, language flags. If something looks the
   same on every page, it's defined here.
   ================================================================ */

.nav_logo {
    font-size: 22px;
}

.nav_title {
    font-size: 17px;
    font-weight: bold;
    color: var(--yellow);
    letter-spacing: 0.3px;
}

.nav_name {
    font-size: 14px;
    color: var(--white);
}

.footer {
    background: linear-gradient(to right, var(--blue_dark), var(--blue));
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

.page_wrap {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

.page_header {
    margin-bottom: 20px;
}

.page_title {
    font-size: 22px;
    font-weight: bold;
    color: var(--blue_dark);
}

.page_sub {
    font-size: 15px;
    color: var(--gray_text);
    margin-top: 2px;
}

.detail_card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow_sm);
}

.detail_title {
    font-size: 15px;
    font-weight: bold;
    color: var(--blue_dark);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gray_light);
}

.history_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.history_table thead tr {
    background: var(--gray_light);
}

.history_table th {
    padding: 8px 6px;
    text-align: left;
    font-size: 12px;
    color: var(--gray_text);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.history_table th:last-child,
.history_table td:last-child {
    text-align: right;
}

.history_table td {
    padding: 9px 6px;
    border-bottom: 1px solid var(--gray_light);
    color: var(--blue_dark);
}

.history_table tr:hover td {
    background: var(--blue_light);
}

.empty_card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 40px 20px;
    text-align: center;
    box-shadow: var(--shadow_sm);
    color: var(--gray_text);
}

.empty_icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty_card h3 {
    font-size: 18px;
    color: var(--blue_dark);
    margin-bottom: 8px;
}

.empty_card p {
    font-size: 14px;
    line-height: 1.6;
}

.page_wide {
    max-width: 960px;
}

.page_wrap.page_wide {
    max-width: 960px;
}

.page_header_row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
}
.page_header_row > *:first-child {
    justify-self: start;
}
.page_header_row .lang_switch {
    justify-self: end;
}

/* TRAINING environment marker — shown only in the training copy of
   this app, never in production. Sits between the page title and
   the language flags in every page header, and next to every
   modal's title, so nobody can mistake this for the live app. */
.training_banner {
    color: var(--red);
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    justify-self: center;
    text-align: center;
}

.training_banner_modal {
    color: var(--red);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-left: 14px;
}

.section_card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow_sm);
    margin-bottom: 16px;
    overflow: hidden;
}

.section_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 2px solid var(--gray_light);
}

.section_title {
    font-size: 17px;
    font-weight: bold;
    color: var(--blue_dark);
}

.table_wrap {
    overflow-x: auto;
}

.data_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data_table thead tr {
    background: var(--gray_light);
}

.data_table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray_text);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.data_table th.th_right {
    text-align: right;
}

.data_table th.th_center {
    text-align: center;
}

.data_table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--gray_light);
    color: var(--blue_dark);
    font-weight: 700;
    white-space: nowrap;
}

.data_table tr:last-child td {
    border-bottom: none;
}

.data_table tr:hover td {
    background: var(--blue_light);
}

.td_right {
    text-align: right;
}

.td_mono {
    font-family: monospace; font-size: 12px; letter-spacing: 0.5px;
}

.td_green {
    color: var(--green); font-weight: bold;
}

.form_card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 24px 20px;
    box-shadow: var(--shadow_sm);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.recent_panel {
    background: var(--white);
    border-radius: var(--radius_sm);
    border: 1px solid var(--gray_mid);
    overflow: hidden;
    margin-top: 8px;
}

.recent_title {
    font-size: 12px;
    font-weight: bold;
    color: var(--gray_text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    background: var(--gray_light);
    border-bottom: 1px solid var(--gray_mid);
}

.mini_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.mini_table th {
    padding: 6px 10px;
    text-align: left;
    font-size: 11px;
    color: var(--gray_text);
    text-transform: uppercase;
    background: var(--gray_light);
}

.mini_table th:nth-child(2),
.mini_table th:nth-child(3),
.mini_table th:nth-child(4) {
    text-align: center;
}

.mini_table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--gray_light);
    color: var(--blue_dark);
}

.mini_table td:nth-child(2),
.mini_table td:nth-child(3),
.mini_table td:nth-child(4) {
    text-align: center; font-weight: bold;
}

.mini_table tr:last-child td {
    border-bottom: none;
}

.mini_loading {
    text-align: center;
    color: var(--gray_text);
    padding: 12px;
    font-style: italic;
}

.nav_link {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius_sm);
    transition: background 0.2s, color 0.2s;
}

.nav_link:hover {
    background: rgba(255,255,255,0.12);
    color: var(--yellow);
}

.nav_dropdown {
    position: relative;
}

.nav_dropdown_toggle {
    cursor: pointer;
    border: none;
    background: transparent;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dropdown_arrow {
    font-size: 10px;
}

.nav_dropdown_menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: var(--white);
    border-radius: var(--radius_sm);
    box-shadow: var(--shadow_md);
    min-width: 220px;
    overflow: hidden;
    z-index: 1000;
}

.nav_dropdown_item {
    display: block;
    padding: 10px 16px;
    color: var(--blue_dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    transition: background 0.15s;
}

.nav_dropdown_item:hover {
    background: var(--blue_light);
}

.nav_dropdown.nav_dropdown_open .nav_dropdown_menu {
    display: block;
}

.td_gray {
    color: var(--gray_text); font-size: 13px;
}

.footer .nav_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tfoot_total td {
    border-top: 2px solid var(--gray_mid);
    padding: 10px 12px;
    background: var(--gray_light);
    font-size: 13px;
}

.flag_img {
    height: 28px;
    width: auto;
    margin: 0 3px;
    cursor: pointer;
    opacity: 1;
    border-radius: 3px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: flag_pulse 2.5s ease-in-out infinite;
}

@keyframes flag_pulse {
    0%,100% { transform: scale(1.0);  }
    50%      { transform: scale(1.1); }
}

.flag_img:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(252,208,11,0.6);
}

.flag_img.flag_active {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
    animation: none;
    transform: scale(0.85);
    box-shadow: none;
}

.footer_tall {
    min-height: 44px;
    padding: 10px 20px;
}

.footer_tall #footer_time {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.footer_tall .footer_copy {
    font-size: 13px;
}

.nav_left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.nav_right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

button.nav_logout:hover {
    background: var(--yellow) !important;
    color: var(--blue_dark) !important;
    border-color: var(--yellow) !important;
}

button.nav_logout {
    color: var(--gray_mid);
}

.footer_copy {
    font-size: 13px !important;
    color: var(--gray_mid) !important;
}

.navbar {
    background: linear-gradient(to right, var(--blue_dark), var(--blue));
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: auto;
    box-shadow: 0 2px 8px rgba(0,0,52,0.25);
    position: sticky;
    top: 0;
    z-index: 100;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-top: env(safe-area-inset-top);
    min-height: 52px;
}

.nav_brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 14px;
    padding-right: 14px;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.nav_badge {
    font-size: 12px;
    font-weight: bold;
    padding: 0 10px !important;
    border-radius: var(--radius_sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
    box-sizing: border-box !important;
}

.nav_badge_admin {
    background: var(--red);
    color: var(--white);
}

.nav_badge_manager {
    background: var(--yellow);
    color: var(--blue_dark);
}

.nav_badge_borrower {
    background: var(--green);
    color: var(--white);
}

.nav_logout {
    font-size: 14px;
    color: var(--gray_mid);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: var(--radius_sm);
    border: 1px solid rgba(255,255,255,0.25);
    transition: background 0.2s, color 0.2s;
    font-weight: bold;
    display: inline-block;
}

.nav_logout:hover {
    background: var(--yellow);
    color: var(--blue_dark);
    border-color: var(--yellow);
}

#footer_time {
    color: var(--yellow) !important;
    font-weight: bold !important;
    font-size: 15px !important;
    letter-spacing: 0.5px;
}

.lang_switch {
    display: flex;
    gap: 8px;
    margin-right: 6px;
    align-items: center;
    padding: 0 16px;
    border-left: 1px solid rgba(255,255,255,0.15);
    border-right: 1px solid rgba(255,255,255,0.15);
}

.dash_card {
    border-radius: var(--radius);
    padding: 18px 14px 14px;
    text-align: center;
    box-shadow: var(--shadow_sm);
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 130px;
    box-sizing: border-box;
    position: relative;
}

.dash_green {
    background: var(--green_light);
}

.dash_blue {
    background: var(--blue_light);
}

.dash_orange {
    background: var(--orange_light);
}

.dash_icon {
    font-size: 24px;
    margin-bottom: 6px;
}

.dash_value {
    font-size: 20px;
    font-weight: bold;
    color: var(--blue_dark);
    line-height: 1.2;
    word-break: break-all;
}

.dash_label {
    font-size: 11px;
    color: var(--gray_text);
    margin-top: 4px;
    line-height: 1.3;
}

.td_center {
    text-align: center;
}

.dash_stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px;
    margin-bottom: 16px;
    align-items: stretch !important;
}

.nav_inner {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.section_header_3col {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray_border);
    min-height: 52px;
}

.section_header_3col .section_title {
    margin: 0;
}

.users_count_badge {
    background: var(--blue_light);
    color: var(--blue);
    font-size: 14px;
    font-weight: bold;
    padding: 6px 14px;
    border-radius: var(--radius_sm);
    white-space: nowrap;
    display: inline-block;
}


/* ================================================================
   SECTION 3 — GLOBAL COMPONENTS
   Buttons, form fields, badges/pills (Status + Type), alerts,
   radio options, progress bars. Small, reusable building
   blocks used across many different pages and modals — this
   is the section you'll touch most often.
   ================================================================ */

.alert_icon {
    font-size: 16px;
    flex-shrink: 0;
}

.field_group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field_label {
    font-size: 13px;
    font-weight: bold;
    color: var(--blue_dark);
    -webkit-user-select: text;
    user-select: text;
}

.field_input.modal_field_value::placeholder {
    color: #dc2626;
    opacity: 1;
    font-weight: bold;
}

.field_input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: bold;
    color: var(--blue_dark);
    background: var(--gray_light);
    border: 2px solid var(--gray_mid) !important;
    border-radius: var(--radius_sm);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    -webkit-user-select: text;
    user-select: text;
}

.field_input:focus {
    background: var(--yellow_light, #fffde8);
    border-color: var(--yellow_dark) !important;
    box-shadow: 0 0 0 3px rgba(252,208,11,0.25);
}

.btn_calendar {
    width: 100%;
    height: 46px;
    border-radius: var(--radius_sm);
    border: 2px solid var(--blue);
    background: var(--blue_light);
    color: var(--blue);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
}

.btn_calendar:hover {
    background: var(--blue);
    color: var(--white);
}

.btn_login {
    width: 100%;
    height: 50px;
    background: linear-gradient(to right, var(--blue_dark), var(--blue));
    color: var(--white);
    font-size: 16px;
    font-weight: bold;
    border-radius: var(--radius_sm);
    cursor: pointer;
    margin-top: 6px;
    transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
    letter-spacing: 0.3px;
}

.btn_login:hover:not(:disabled) {
    background: linear-gradient(to right, var(--blue), var(--blue_dark));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(5,98,176,0.4);
    color: var(--yellow);
}

.btn_login:active:not(:disabled) {
    transform: translateY(0);
}

.btn_login:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.loan_ref_bar .role_badge {
    margin-left: auto;
}

.progress_wrap {
    background: var(--white);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow_sm);
}

.progress_labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--gray_text);
    margin-bottom: 8px;
}

.progress_labels:last-child {
    margin-bottom: 0;
    margin-top: 8px;
}

.progress_bar {
    height: 40px;
    background: var(--gray_mid);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress_fill {
    height: 100%;
    background: linear-gradient(to right, var(--blue), var(--yellow_dark));
    border-radius: 10px;
    transition: width 0.8s ease;
}

.progress_pct_text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: #000000;
}

.pay_type_badge {
    font-size: 13px;
    font-weight: bold;
    padding: 0 8px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.badge_daily {
    background: var(--blue_light); color: var(--blue);
}

.badge_weekend {
    background: #f3e8ff; color: #7c3aed;
}

.badge_single {
    background: #e0f2fe; color: #0369a1;
}

.badge_daycount {
    background: #fdf1dc; color: #92620a;
}

.field_select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230070C0' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.field_optional {
    font-weight: normal;
    color: var(--gray_text);
    font-size: 12px;
}

.radio_label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius_sm);
    border: 2px solid var(--gray_mid);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    -webkit-user-select: none;
    user-select: none;
}

.radio_label:has(input:checked) {
    border-color: var(--blue);
    background: var(--blue_light);
}

.radio_early:has(input:checked) {
    border-color: var(--orange);
    background: var(--orange_light);
}

.radio_label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
    flex-shrink: 0;
    cursor: pointer;
}

.radio_text {
    font-weight: bold;
    font-size: 14px;
    color: var(--blue_dark);
    flex: 1;
}

.count_badge {
    font-size: 12px;
    background: var(--blue_light);
    color: var(--blue);
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: bold;
}

.role_borrower {
    background: var(--green_light); color: var(--green);
}

.btn_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btn_row > .btn_back {
    width: 100%;
}

.field_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.field_row_3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.field_row_3col .radio_label {
    margin: 0;
}

.field_row_3col .field_input {
    height: 100%;
}

.btn_submit_sm.btn_blue:hover {
    box-shadow: 0 4px 12px rgba(5,98,176,0.35);
}

.alert_link {
    color: inherit;
    font-weight: bold;
    margin-left: 8px;
    text-decoration: underline;
}

.date_calendar_warning_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.date_calendar_stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.field_readonly {
    height: 46px;
    padding: 0 14px;
    background: var(--gray_light);
    border-radius: var(--radius_sm);
    display: flex;
    align-items: center;
    font-weight: bold;
    color: var(--blue_dark);
    font-size: 15px;
    border: 2px solid var(--gray_mid);
}

.pill_active {
    background: var(--green_light);  color: var(--green);
}

.pill_closed {
    background: var(--blue_light);   color: var(--blue);
}

.pill_early {
    background: var(--orange_light); color: var(--orange);
}

.btn_print_agreement {
    background: var(--blue_light) !important;
    color: var(--blue) !important;
    border: 2px solid var(--blue) !important;
    border-radius: var(--radius_sm);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 8px 18px;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn_print_agreement:hover {
    background: var(--blue) !important;
    color: var(--white) !important;
}

.alert_error {
    background: #f8d7da;
    box-shadow: inset 4px 0 0 0 var(--red);
    border-radius: var(--radius_sm);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
    color: #721c24;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #f5c6cb;
}

.btn_primary {
    background: var(--blue);
    color: var(--white);
    padding: 6px 18px;
    border-radius: var(--radius_sm);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    transition: background 0.15s;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.btn_primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5,98,176,0.35);
    color: var(--yellow);
    background: var(--blue_dark);
}

.btn_action:hover {
    background: var(--green);
    color: var(--white);
}

.btn_submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.alert_success {
    background: #d4edda;
    box-shadow: inset 4px 0 0 0 var(--green);
    border-radius: var(--radius_sm);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
    color: #155724;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    border: 1px solid #c3e6cb;
}

.role_badge {
    font-size: 13px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: var(--radius_sm);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 26px;
    white-space: nowrap;
}

.role_admin {
    background: var(--red_light);
    color: var(--red);
}

.role_manager {
    background: #fffbea;
    color: #92660a;
}

.role_borrower_active {
    background: var(--green_light);
    color: var(--green);
}

.role_borrower_inactive {
    background: #f3f4f6;
    color: #6b7280;
}

.btn_edit_user {
    background: var(--blue_light);
    color: var(--blue);
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: var(--radius_sm);
    transition: background 0.15s;
    white-space: nowrap;
}

.btn_edit_user:hover {
    background: var(--blue);
    color: var(--white);
}

.btn_back:hover {
    color: var(--white) !important;
    background: #dc2626 !important;
}

.btn_submit_sm {
    padding: 8px 20px;
    border-radius: var(--radius_sm);
    background: var(--green_light) !important;
    color: var(--green) !important;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid var(--green) !important;
    transition: background 0.15s, color 0.15s;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none;
    display: inline-block;
}

.btn_submit_sm:hover {
    transform: none !important;
    box-shadow: none !important;
    background: var(--green) !important;
    color: var(--white) !important;
}

.btn_submit_sm.btn_blue {
    background: var(--green_light) !important;
    color: var(--green) !important;
    border: 2px solid var(--green) !important;
    border-radius: var(--radius_sm);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 8px 20px;
    transition: background 0.15s, color 0.15s;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none;
    display: inline-block;
}

.btn_action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: var(--radius_sm);
    font-size: 13px !important;
    font-weight: bold;
    white-space: nowrap;
    text-decoration: none;
    border: none;
    background: var(--green_light);
    color: var(--green);
    transition: background 0.15s;
}

.btn_back {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 2px solid #dc2626 !important;
    border-radius: var(--radius_sm);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    padding: 8px 18px;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: 50px;
    box-sizing: border-box;
}

.btn_submit:hover:not(:disabled) {
    transform: none !important;
    box-shadow: none !important;
    background: var(--green) !important;
    color: var(--white) !important;
}

.btn_row > .btn_submit {
    width: 100%;
    margin-top: 0;
}

.btn_cancel {
    padding: 8px 18px;
    border-radius: var(--radius_sm);
    background: #fef2f2 !important;
    color: #dc2626 !important;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid #dc2626 !important;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    display: inline-block;
}

.btn_cancel:hover {
    background: #dc2626 !important;
    color: var(--white) !important;
}

.btn_submit {
    background: var(--green_light) !important;
    color: var(--green) !important;
    border: 2px solid var(--green) !important;
    border-radius: var(--radius_sm);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    padding: 8px 20px;
    transition: background 0.15s, color 0.15s;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 50px;
    letter-spacing: 0.3px;
    margin-top: 4px;
}


/* ================================================================
   SECTION 4 — GLOBAL MODALS
   The shared modal shell (overlay/box/header/body/footer),
   plus the modal_field_label / modal_field_value standard
   (black label, blue value, red placeholder) used by every
   "Info ..." detail modal in the app, and Capital's
   reinvest/event info boxes and date-warning tiles.
   ================================================================ */

.modal_field_label {
    font-size: 14px;
    font-weight: 700;
    color: #000000;
}

.modal_field_value,
.field_readonly.modal_field_value,
.field_input.modal_field_value {
    color: var(--blue);
}

.modal_overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,52,0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal_overlay.modal_open {
    display: flex;
}

.modal_box {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,52,0.3);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modal_in 0.2s ease;
}

@keyframes modal_in {
    from { opacity:0; transform: translateY(-16px) scale(0.97); }
    to   { opacity:1; transform: translateY(0)     scale(1); }
}

.modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 14px;
    border-bottom: 2px solid var(--gray_light);
}

.modal_header h3 {
    font-size: 16px;
    color: var(--blue_dark);
}

.modal_close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--gray_text);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}

.modal_close:hover {
    background: var(--gray_light); color: var(--red);
}

.modal_body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal_footer {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--gray_light);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.modal_footer > button {
    width: 100%;
    text-align: center;
}

.modal_footer > a {
    width: 100%;
    text-align: center;
}

.modal_footer_single {
    display: flex;
    justify-content: flex-end;
}

.modal_footer_single > button {
    flex: 0 0 50%;
    width: auto;
}

.descr_clickable {
    cursor: pointer;
}

.borrower_clickable {
    cursor: pointer;
}

.name_clickable {
    cursor: pointer;
}

.reinvest_banner {
    background: linear-gradient(to right, #fffbea, #fef3c7);
    border: 2px solid var(--yellow_dark);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.reinvest_info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--blue_dark);
    flex: 1;
}

.reinvest_icon {
    font-size: 24px; flex-shrink: 0;
}

.reinvest_info small {
    display: block;
    color: var(--gray_text);
    margin-top: 2px;
    font-size: 12px;
}

.btn_reinvest {
    background: linear-gradient(to right, var(--yellow_deep), var(--yellow_dark));
    color: var(--blue_dark);
    font-size: 14px;
    font-weight: bold;
    padding: 10px 18px;
    border-radius: var(--radius_sm);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
}

.btn_reinvest:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(205,145,0,0.4);
}

.event_info_box {
    background: var(--blue_light);
    box-shadow: inset 4px 0 0 0 var(--blue);
    border-radius: var(--radius_sm);
    padding: 10px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--blue_dark);
}

.event_info_icon {
    font-size: 20px; flex-shrink: 0;
}

.date_warning_tile {
    background: var(--red_light);
    box-shadow: inset 4px 0 0 0 var(--red);
    border-radius: var(--radius_sm);
    padding: 10px 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    color: var(--red);
}

.date_warning_tile .event_info_icon {
    color: var(--red);
}

.reinvest_green {
    background: linear-gradient(to right, #e6f9ee, #d1f5e0);
    border: 2px solid var(--green);
}

.reinvest_green .reinvest_info {
    color: #1a5c35;
}

.reinvest_red {
    background: linear-gradient(to right, #fef2f2, #fde8e8);
    border: 2px solid var(--red);
}

.reinvest_red .reinvest_info {
    color: var(--red);
}

.status_fill_active {
    background: var(--green_light) !important;
}

.status_fill_active .status_fill_text {
    color: var(--green);
}

.status_fill_closed {
    background: var(--blue_light) !important;
}

.status_fill_closed .status_fill_text {
    color: var(--blue);
}

.status_fill_early {
    background: var(--orange_light) !important;
}

.status_fill_early .status_fill_text {
    color: var(--orange);
}

/* Same full-box-fill pattern as status_fill_*, for the Role field in
   the "Info User - Edit" modal. */
.role_fill_admin {
    background: var(--red_light) !important;
}
.role_fill_admin .status_fill_text {
    color: var(--red);
}

.role_fill_manager {
    background: #fffbea !important;
}
.role_fill_manager .status_fill_text {
    color: #92660a;
}

.role_fill_borrower_active {
    background: var(--green_light) !important;
}
.role_fill_borrower_active .status_fill_text {
    color: var(--green);
}

.role_fill_borrower_inactive {
    background: #f3f4f6 !important;
}
.role_fill_borrower_inactive .status_fill_text {
    color: #6b7280;
}


/* ================================================================
   SECTION 5 — PAGE-SPECIFIC STYLES
   One sub-section per page. A rule only lives here if it's
   used on exactly ONE page — anything shared by two or more
   pages belongs in Sections 2-4 above instead.
   ================================================================ */

/* ----------------------------------------------------------------
   LOGIN PAGE
   The pre-login screen — its own card layout, separate from the rest of the app.
   ---------------------------------------------------------------- */

.login_wrap {
    min-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, var(--blue_dark) 0%, var(--blue) 100%);
}

.login_card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    padding: 36px 30px 28px;
    width: 100%;
    max-width: 380px;
}

.login_head {
    text-align: center;
    margin-bottom: 28px;
}

.login_icon {
    font-size: 44px;
    margin-bottom: 10px;
}

.login_title {
    font-size: 22px;
    font-weight: bold;
    color: var(--blue_dark);
    margin-bottom: 4px;
}

.login_subtitle {
    font-size: 14px;
    color: var(--gray_text);
}

.login_form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login_help {
    text-align: center;
    font-size: 12px;
    color: var(--gray_text);
    margin-top: 18px;
}

.login_version {
    color: rgba(255,255,255,0.35);
    font-size: 12px;
    margin-top: 16px;
}


/* ----------------------------------------------------------------
   DASHBOARD
   The 8 summary tiles, Active Loans List table, and its "Info" modals.
   ---------------------------------------------------------------- */

.dash_teal {
    background: #e6f7f7;
}

.dash_gray {
    background: var(--gray_light);
}

.dash_purple {
    background: #f3e8ff;
}

.dash_red {
    background: var(--red_light);
}

.dash_sub {
    font-size: 11px; color: var(--gray_text);
}

.empty_inline {
    padding: 24px 18px;
    color: var(--gray_text);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash_card_num {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 15px;
    font-weight: 800;
    color: rgba(0,0,0,0.45);
    line-height: 1;
}

.dash_yellow {
    background: #fffbea;
}

.days_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px !important;
    height: 28px !important;
    padding: 0 10px;
    border-radius: var(--radius_sm);
    font-size: 13px !important;
    font-weight: bold;
    white-space: nowrap;
    text-decoration: none;
    border: none;
    background: var(--green_light);
    color: var(--green);
    transition: background 0.15s;
}


/* ----------------------------------------------------------------
   CAPITAL PAGE
   Capital ledger table, Add Capital Event / Reinvest Now modals.
   ---------------------------------------------------------------- */

.cap_item {
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 120px;
}

.cap_label {
    font-size: 11px; color: var(--gray_text); text-transform: uppercase; letter-spacing: 0.4px;
}

.cap_value {
    font-size: 14px; font-weight: bold; color: var(--blue_dark);
}

.cap_divider {
    font-size: 20px; color: var(--gray_mid); font-weight: bold;
}

.cap_green {
    color: var(--green);
}

.cap_red {
    color: var(--red);
}

.cap_bold {
    font-size: 16px; color: var(--blue_dark);
}

.table_capital_history {
    font-size: 14px;
}

.table_capital_history th {
    font-size: 12px;
}

.table_capital_history .col_gray {
    background: var(--gray_light);
}

.table_capital_history .col_pink {
    background: var(--red_light);
}

.amt_green {
    color: var(--green);    font-weight: bold;
}

.amt_blue {
    color: var(--blue);     font-weight: bold;
}

.amt_red {
    color: var(--red);      font-weight: bold;
}

.capital_bar {
    background: var(--white);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow_sm);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    overflow-x: auto;
    justify-content: center !important;
}


/* ----------------------------------------------------------------
   USERS PAGE
   Users table, Add User / Edit User modals.
   ---------------------------------------------------------------- */

.table_with_bg {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--gray_border);
    overflow: hidden;
}


/* ----------------------------------------------------------------
   LOAN HISTORY PAGE
   All Loans table and its "Info Loan" modal.
   ---------------------------------------------------------------- */

.filter_row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter_btn {
    padding: 6px 14px;
    border-radius: var(--radius_sm);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: var(--blue);
    background: var(--blue_light);
    border: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    display: inline-block;
}

.filter_btn:hover {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}

.filter_active {
    background: var(--blue) !important;
    color: var(--white) !important;
    border-color: var(--blue_dark) !important;
    border: none !important;
}


/* ----------------------------------------------------------------
   NEW LOAN AGREEMENT PAGE
   The New Loan Agreement form — borrower/product/amount selection.
   ---------------------------------------------------------------- */

.loan_preview {
    background: var(--blue_light);
    border-radius: var(--radius_sm);
    box-shadow: inset 4px 0 0 0 var(--blue);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(5,98,176,0.1);
}

.preview_row:last-child {
    border-bottom: none;
}

.preview_row_bold .preview_label {
    font-weight: bold;
    font-size: 15px;
}

.preview_row_bold .preview_value {
    font-weight: bold;
    font-size: 15px;
}

.preview_label {
    color: var(--gray_text);
}

.preview_value {
    color: var(--blue_dark); font-weight: bold;
}

.preview_value.mono {
    font-family: monospace; letter-spacing: 1px;
}

.borrower_status {
    border-radius: var(--radius_sm);
    padding: 10px 14px;
    font-size: 14px;
}

.bs_green {
    background: var(--green_light);
    box-shadow: inset 4px 0 0 0 var(--green);
    color: #1a5c35;
}

.bs_red {
    background: var(--red_light);
    box-shadow: inset 4px 0 0 0 var(--red);
    color: var(--red);
}

.pay_type_option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 2px solid var(--gray_border);
    border-radius: var(--radius_sm);
    cursor: pointer;
    margin-bottom: 8px;
    background: var(--white);
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}

.pay_type_option:hover {
    border-color: var(--blue);
    background: var(--blue_light);
}

.pay_type_radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray_mid);
    border-radius: 50%;
    flex-shrink: 0;
    transition: border-color 0.15s;
    position: relative;
}

.pay_type_info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pay_type_sub {
    font-size: 12px;
    color: var(--gray_text);
}


/* ----------------------------------------------------------------
   REGISTER PAYMENT PAGE
   Register Payment form, Recent Payments + Registered Today tables.
   ---------------------------------------------------------------- */

.info_item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info_label {
    font-size: 11px;
    color: var(--gray_text);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.info_value {
    font-size: 15px;
    font-weight: bold;
    color: var(--blue_dark);
}

.status_bar {
    background: var(--blue_light);
    border-radius: var(--radius_sm);
    box-shadow: inset 4px 0 0 0 var(--blue);
    overflow: hidden;
}

.status_row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 12px 16px 10px;
}

.last_pay_bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: bold;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.lpb_green {
    background: var(--green_light);  color: var(--green);     box-shadow: inset 4px 0 0 0 var(--green);
}

.lpb_yellow {
    background: #fffbea;             color: #92660a;          box-shadow: inset 4px 0 0 0 #f59e0b;
}

.lpb_red {
    background: var(--red_light);    color: var(--red);       box-shadow: inset 4px 0 0 0 var(--red);
}

.lpb_gray {
    background: var(--gray_light);   color: var(--gray_text); box-shadow: inset 4px 0 0 0 var(--gray_mid);
}

.row_today td {
    background: #fffbea !important;
}


/* ----------------------------------------------------------------
   MY LOAN (BORROWER VIEW) PAGE
   The borrower's own loan summary and payment history.
   ---------------------------------------------------------------- */

.loan_ref_bar {
    background: linear-gradient(to right, var(--blue_dark), var(--blue));
    border-radius: var(--radius);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.loan_ref_label {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.loan_ref_no {
    font-size: 18px;
    font-weight: bold;
    color: var(--yellow);
    letter-spacing: 1px;
    font-family: monospace;
}

.stats_row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.stat_card {
    border-radius: var(--radius);
    padding: 16px 12px;
    text-align: center;
    box-shadow: var(--shadow_sm);
}

.stat_blue {
    background: var(--blue_light);
}

.stat_green {
    background: var(--green_light);
}

.stat_value {
    font-size: 18px;
    font-weight: bold;
    color: var(--blue_dark);
    line-height: 1.2;
    word-break: break-all;
}

.stat_label {
    font-size: 11px;
    color: var(--gray_text);
    margin-top: 4px;
    line-height: 1.3;
}

.detail_table {
    width: 100%;
    border-collapse: collapse;
}

.detail_table tr:not(:last-child) td {
    border-bottom: 1px solid var(--gray_light);
}

.dt_label {
    font-size: 13px;
    color: var(--gray_text);
    padding: 8px 0;
    width: 55%;
}

.dt_value {
    font-size: 14px;
    font-weight: bold;
    color: var(--blue_dark);
    text-align: right;
    padding: 8px 0;
}

.remaining_card {
    background: linear-gradient(135deg, var(--blue_dark), var(--blue));
    border-radius: var(--radius);
    padding: 20px 18px;
    margin-bottom: 16px;
    text-align: center;
    box-shadow: var(--shadow);
}

.remaining_label {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.remaining_value {
    font-size: 32px;
    font-weight: bold;
    color: var(--yellow);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.remaining_sub {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
}


/* ================================================================
   SECTION 6 — RESPONSIVE OVERRIDES
   @media breakpoints, kept together here. For any NEW
   responsive rule going forward, prefer placing it directly
   under the base rule it overrides instead (see the
   style-template.css skeleton for new projects) — these
   existing ones are grouped here simply because that's how
   they already existed before this file was reorganized.
   ================================================================ */

@media (max-width: 400px) {
    .stats_row {
        grid-template-columns: 1fr;
    }

    .stat_value {
        font-size: 22px;
    }

    .login_card {
        padding: 28px 20px 22px;
    }

    .loan_ref_no {
        font-size: 15px;
    }
}

@media (min-width: 401px) and (max-width: 600px) {
    .stat_value {
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .dash_value { font-size: 16px; }
    .page_wide { padding: 16px 12px 40px; }
}

@media (max-width: 360px) {
}

@media (max-width: 600px) {
    .dash_stats { grid-template-columns: repeat(2, 1fr); }
    .capital_bar { flex-direction: column; align-items: flex-start; }
    .cap_divider { display: none; }
}

@media (max-width: 360px) {
    .dash_stats { grid-template-columns: 1fr; }
}

@media (hover: hover) and (pointer: fine) {
    .nav_dropdown:hover .nav_dropdown_menu {
        display: block;
    }
}

@media (max-width: 420px) {
    .field_row { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .navbar {
        padding: 8px 12px;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .nav_inner {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* Logo stays left, flags center, user info right */
    .nav_left {
        gap: 6px;
        flex: 1;
        min-width: 0;
    }

    /* Hide menu text labels on small screens, keep icons */
    .nav_link {
        font-size: 12px;
        padding: 4px 6px;
    }

    /* Flags — smaller on mobile */
    .flag_img {
        height: 22px;
    }
    .flag_img.flag_active {
        transform: scale(0.8);
    }

    /* Right side — compact */
    .nav_right {
        gap: 6px;
        flex-wrap: nowrap;
    }

    .nav_name {
        font-size: 12px;
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav_badge {
        font-size: 9px;
        padding: 2px 5px;
    }

    .nav_logout {
        font-size: 11px;
        padding: 3px 8px;
    }


    /* Brand title — hide on very small screens */
    .nav_title {
        display: none;
    }

    /* Lang switch — no side borders on mobile */
    .lang_switch {
        padding: 0 6px;
        border-left: none;
        border-right: none;
    }
}

@media (max-width: 480px) {
    /* Hide nav links text — keep only icons */
    .nav_link span.link_text { display: none; }

    /* Page content padding — prevent content from touching edges */
    .page_wrap {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    /* Footer safe area */
    .footer {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 700px) {
    .nav_brand {
        margin-right: 6px;
        padding-right: 6px;
    }
}