/* css/style.css - CARROTATING
   Single CSS file for all pages.
   Responsive, mobile-first, minimalist, white background. */

/* ========== RESET & BASE ========== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --szColorPrimary: #2563eb;
    --szColorPrimaryDark: #1d4ed8;
    --szColorPrimaryLight: #dbeafe;
    --szColorAccent: #10b981;
    --szColorAccentDark: #059669;
    --szColorText: #1f2937;
    --szColorTextLight: #6b7280;
    --szColorBorder: #e5e7eb;
    --szColorBg: #ffffff;
    --szColorBgAlt: #f9fafb;
    --szColorError: #ef4444;
    --szColorErrorLight: #fef2f2;
    --szColorSuccess: #10b981;
    --szColorSuccessLight: #ecfdf5;
    --szColorWarning: #f59e0b;
    --szColorWarningLight: #fffbeb;
    --szFontFamily: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --szRadius: 0.5rem;
    --szRadiusSm: 0.375rem;
    --szShadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --szShadowMd: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --szMaxWidth: 1024px;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--szFontFamily);
    color: var(--szColorText);
    background-color: var(--szColorBg);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--szColorPrimary);
    text-decoration: none;
    transition: color 0.15s;
}
a:hover { color: var(--szColorPrimaryDark); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { list-style: none; }

/* ========== UTILITY ========== */
.szContainer {
    width: 100%;
    max-width: var(--szMaxWidth);
    margin: 0 auto;
    padding: 0 1rem;
}

.szSrOnly {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}

.bHidden { display: none !important; }

/* ========== BUTTONS ========== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem; font-weight: 500; font-family: inherit;
    border: 1px solid transparent; border-radius: var(--szRadiusSm);
    cursor: pointer; transition: all 0.15s;
    line-height: 1.4;
}
.btn:active { transform: scale(0.98); }

.btnPrimary {
    background-color: var(--szColorPrimary);
    color: #ffffff;
}
.btnPrimary:hover { background-color: var(--szColorPrimaryDark); }

.btnAccent {
    background-color: var(--szColorAccent);
    color: #ffffff;
}
.btnAccent:hover { background-color: var(--szColorAccentDark); }

.btnOutline {
    background-color: transparent;
    border-color: var(--szColorBorder);
    color: var(--szColorText);
}
.btnOutline:hover { background-color: var(--szColorBgAlt); }

.btnGhost {
    background-color: transparent;
    color: var(--szColorTextLight);
}
.btnGhost:hover { color: var(--szColorText); background-color: var(--szColorBgAlt); }

.btnSm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btnLg { padding: 0.75rem 1.5rem; font-size: 1rem; }

.btnBlock { display: flex; width: 100%; }

/* ========== FORMS ========== */
.formGroup {
    margin-bottom: 1rem;
}

.formLabel {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--szColorText);
    margin-bottom: 0.375rem;
}

.formInput,
.formSelect,
.formTextarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem; font-family: inherit;
    color: var(--szColorText);
    background-color: var(--szColorBg);
    border: 1px solid var(--szColorBorder);
    border-radius: var(--szRadiusSm);
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.5;
}

.formInput:focus,
.formSelect:focus,
.formTextarea:focus {
    outline: none;
    border-color: var(--szColorPrimary);
    box-shadow: 0 0 0 3px var(--szColorPrimaryLight);
}

.formInput.szError,
.formSelect.szError,
.formTextarea.szError {
    border-color: var(--szColorError);
}
.formInput.szError:focus {
    box-shadow: 0 0 0 3px var(--szColorErrorLight);
}

.formTextarea { resize: vertical; min-height: 100px; }

.formError {
    font-size: 0.8125rem;
    color: var(--szColorError);
    margin-top: 0.25rem;
}

.formRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ========== CARDS ========== */
.card {
    background: var(--szColorBg);
    border: 1px solid var(--szColorBorder);
    border-radius: var(--szRadius);
    padding: 1.25rem;
    box-shadow: var(--szShadow);
}

.cardHeader {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--szColorBorder);
}

.cardBody { }

/* ========== ALERTS ========== */
.alert {
    padding: 0.875rem 1rem;
    border-radius: var(--szRadiusSm);
    font-size: 0.9375rem;
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.5rem;
}

.alertSuccess {
    background-color: var(--szColorSuccessLight);
    color: var(--szColorAccentDark);
    border: 1px solid var(--szColorAccent);
}

.alertError {
    background-color: var(--szColorErrorLight);
    color: var(--szColorError);
    border: 1px solid var(--szColorError);
}

.alertWarning {
    background-color: var(--szColorWarningLight);
    color: #92400e;
    border: 1px solid var(--szColorWarning);
}

/* ========== HEADER ========== */
#IdHeader {
    background: var(--szColorBg);
    border-bottom: 1px solid var(--szColorBorder);
    position: sticky;
    top: 0;
    z-index: 100;
}

#IdHeader .szHeaderInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

#IdLogo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--szColorPrimary);
    letter-spacing: -0.02em;
    display: flex; align-items: center; gap: 0.5rem;
}

#IdLogo:hover { color: var(--szColorPrimaryDark); }

#IdLogoIcon {
    width: 32px; height: 32px;
    background: var(--szColorPrimary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1rem;
}

#IdNav { display: flex; align-items: center; gap: 0.25rem; }

#IdNav .szNavLink {
    padding: 0.5rem 0.875rem;
    border-radius: var(--szRadiusSm);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--szColorTextLight);
    transition: all 0.15s;
}
#IdNav .szNavLink:hover {
    color: var(--szColorText);
    background-color: var(--szColorBgAlt);
}
#IdNav .szNavLink.szActive {
    color: var(--szColorPrimary);
    background-color: var(--szColorPrimaryLight);
}

#IdLangSwitch {
    display: flex;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--szColorBorder);
}

#IdLangSwitch .szLangFlag {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem;
    border-radius: var(--szRadiusSm);
    opacity: 0.85;
    transition: opacity 0.15s, background-color 0.15s;
}
#IdLangSwitch .szLangFlag:hover {
    opacity: 1;
    background-color: var(--szColorPrimaryLight);
}

#IdMenuToggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--szColorText);
}

#IdUserMenu {
    display: flex; align-items: center; gap: 0.5rem;
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--szColorBorder);
}

#IdUserAvatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--szColorPrimaryLight);
    color: var(--szColorPrimary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

/* ========== FOOTER ========== */
#IdFooter {
    margin-top: auto;
    padding: 1.5rem 0;
    border-top: 1px solid var(--szColorBorder);
    background-color: var(--szColorBgAlt);
}

#IdFooter .szFooterInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

#IdFooterCopy {
    font-size: 0.875rem;
    color: var(--szColorTextLight);
}

#IdFooterLinks {
    display: flex;
    gap: 1.5rem;
}

#IdFooterLinks a {
    font-size: 0.875rem;
    color: var(--szColorTextLight);
}
#IdFooterLinks a:hover { color: var(--szColorText); }

/* ========== MAIN CONTENT ========== */
#IdMain {
    flex: 1;
    padding: 2rem 0;
}

/* ========== HERO (home) ========== */
#IdHero {
    text-align: center;
    padding: 3rem 0;
}

#IdHeroTitle {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--szColorText);
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

#IdHeroSubtitle {
    font-size: 1.125rem;
    color: var(--szColorTextLight);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

#IdHeroActions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========== STEPS (home) ========== */
#IdSteps {
    padding: 3rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.stepCard {
    text-align: center;
    padding: 1.5rem;
}

.stepIcon {
    width: 64px; height: 64px;
    margin: 0 auto 1rem;
    background: var(--szColorPrimaryLight);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    color: var(--szColorPrimary);
}

.stepTitle {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.stepText {
    font-size: 0.9375rem;
    color: var(--szColorTextLight);
    line-height: 1.6;
}

/* ========== TRIP LIST ========== */
#IdTripList {
    display: grid;
    gap: 1rem;
}

.tripCard {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tripHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tripRoute {
    font-size: 1.0625rem;
    font-weight: 600;
}

.tripRouteArrow { color: var(--szColorPrimary); margin: 0 0.5rem; }

.tripBadge {
    display: inline-block;
    padding: 0.2rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tripBadgeRotating { background: var(--szColorPrimaryLight); color: var(--szColorPrimary); }
.tripBadgeOccasional { background: var(--szColorSuccessLight); color: var(--szColorAccentDark); }

.tripInfo {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--szColorTextLight);
}

.tripInfoItem {
    display: flex; align-items: center; gap: 0.375rem;
}

.tripFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--szColorBorder);
}

.tripDriver {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* ========== AUTH PAGES ========== */
#IdAuthPage {
    max-width: 440px;
    margin: 2rem auto;
}

#IdAuthTitle {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
}

#IdAuthSubtitle {
    text-align: center;
    color: var(--szColorTextLight);
    margin-bottom: 2rem;
    font-size: 0.9375rem;
}

.authDivider {
    display: flex; align-items: center;
    margin: 1.5rem 0;
    color: var(--szColorTextLight);
    font-size: 0.8125rem;
}
.authDivider::before,
.authDivider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--szColorBorder);
}
.authDivider span { padding: 0 1rem; }

.authFooter {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    color: var(--szColorTextLight);
}

/* ========== DASHBOARD ========== */
#IdDashboard {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
}

#IdSidebar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.szSidebarLink {
    padding: 0.625rem 0.875rem;
    border-radius: var(--szRadiusSm);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--szColorTextLight);
    display: flex; align-items: center; gap: 0.625rem;
    transition: all 0.15s;
}
.szSidebarLink:hover,
.szSidebarLink.szActive {
    color: var(--szColorPrimary);
    background-color: var(--szColorPrimaryLight);
}

#IdDashboardContent { }

/* ========== MODAL ========== */
.modalOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modalContent {
    background: var(--szColorBg);
    border-radius: var(--szRadius);
    padding: 1.5rem;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--szShadowMd);
}

.modalTitle {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ========== TABLES ========== */
.tblResponsive {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.tblResponsive th,
.tblResponsive td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--szColorBorder);
}

.tblResponsive th {
    font-weight: 600;
    color: var(--szColorTextLight);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--szColorBgAlt);
}

.tblResponsive tr:hover td {
    background-color: var(--szColorBgAlt);
}

/* ========== EMPTY STATE ========== */
.emptyState {
    text-align: center;
    padding: 3rem 1.5rem;
}

.emptyIcon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--szColorBorder);
}

.emptyTitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--szColorTextLight);
    margin-bottom: 0.5rem;
}

.emptyText {
    font-size: 0.9375rem;
    color: var(--szColorTextLight);
    margin-bottom: 1.5rem;
}

/* ========== MOBILE (< 768px) ========== */
@media (max-width: 767px) {
    :root { --szMaxWidth: 100%; }

    #IdHeroTitle { font-size: 1.75rem; }

    #IdSteps {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    #IdDashboard {
        grid-template-columns: 1fr;
    }

    #IdSidebar {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.375rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--szColorBorder);
    }

    #IdMenuToggle {
        display: flex;
    }

    #IdNav {
        display: none;
        position: absolute;
        top: 60px;
        left: 0; right: 0;
        background: var(--szColorBg);
        border-bottom: 1px solid var(--szColorBorder);
        flex-direction: column;
        padding: 0.5rem 1rem 1rem;
        gap: 0.125rem;
        box-shadow: var(--szShadowMd);
    }

    #IdNav.bOpen {
        display: flex;
    }

    #IdLangSwitch {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        justify-content: center;
        padding-top: 0.5rem;
    }

    #IdUserMenu {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        justify-content: center;
        padding-top: 0.5rem;
    }

    .formRow { grid-template-columns: 1fr; }

    #IdFooter .szFooterInner {
        flex-direction: column;
        text-align: center;
    }

    #IdFooterLinks {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .tripInfo { flex-direction: column; gap: 0.375rem; }

    .tripFooter { flex-direction: column; align-items: flex-start; }

    .tblResponsive { font-size: 0.8125rem; }
    .tblResponsive th,
    .tblResponsive td { padding: 0.5rem 0.75rem; }
}