/* ================================
   RESET
================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ================================
   BODY
================================ */

html,
body {
    width: 100%;
    min-height: 100%;
}

body {

    min-height: 100vh;

    font-family: 'Signika Negative', 'Segoe UI', Tahoma, sans-serif;

    background-color: #579268;

    background-image: url("../images/background.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    overflow-x: hidden;
}


/* ================================
   TOP BAR
================================ */

.top-bar {

    width: 100%;

    height: 63px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    z-index: 10;
}


/* ================================
   MENU BUTTON
================================ */

.menu-btn {

    position: absolute;

    left: 17px;

    top: 18px;

    width: 30px;

    height: 30px;

    border: none;

    background: transparent;

    color: white;

    font-size: 26px;

    cursor: pointer;

    z-index: 20;
}


/* ================================
   LOGO
================================ */

.logo {

    color: white;

    font-family: 'Signika Negative', 'Segoe UI', Tahoma, sans-serif;

    font-size: 33px;

    font-weight: bold;

    display: flex;

    align-items: center;

    gap: 7px;

    text-shadow: 0 2px 2px rgba(0,0,0,0.15);
}


/* ================================
   HISTORY CONTAINER
================================ */

.history-container {

    width: 100%;

    display: flex;

    justify-content: center;

    position: relative;

    z-index: 2;

    /* side padding matches .feedback-container */
    padding: 0 35px 40px;
}


/* ================================
   HISTORY CARD
================================ */

.history-card {

    /* same footprint as .feedback-card */
    width: 100%;

    /* fills the page like the admin cards */
    max-width: none;

    min-height: 520px;

    max-height: calc(100vh - 80px);

    background: #ffffff;

    /* rounded on all four corners, matching the profile card */
    border-radius: 22px;

    padding: 18px 30px 35px;

    position: relative;

    box-shadow: 0 3px 15px rgba(0,0,0,0.08);

    overflow-y: auto;
}


/* ================================
   BACK
================================ */

.back-btn {

    border: none;

    background: transparent;

    color: #405749;

    font-size: 23px;

    cursor: pointer;

    margin-bottom: 10px;
}


/* ================================
   HEADER
================================ */

.history-header {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-bottom: 25px;
}

.history-icon {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: #dce8dc;

    color: #4f805d;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;
}

.history-header h1 {

    font-family: 'Signika Negative', 'Segoe UI', Tahoma, sans-serif;

    color: #3f594a;

    font-size: 44px;

    line-height: 1;
}

.history-header p {

    color: #728273;

    font-size: 15px;

    margin-top: 5px;
}


/* ================================
   LOADING
================================ */

.loading {

    text-align: center;

    color: #587261;

    font-size: 16px;

    padding: 45px 10px;
}

.loading i {

    margin-right: 8px;
}


/* ================================
   EMPTY
================================ */

.empty-history {

    text-align: center;

    padding: 55px 20px;

    color: #728273;
}

.empty-history i {

    font-size: 63px;

    color: #8baa94;

    margin-bottom: 18px;
}

.empty-history h2 {

    color: #405749;

    font-family: 'Signika Negative', 'Segoe UI', Tahoma, sans-serif;

    font-size: 29px;

    margin-bottom: 7px;
}

.empty-history p {

    font-size: 15px;

    margin-bottom: 20px;
}

.empty-history button {

    border: none;

    background: #62786a;

    color: white;

    padding: 11px 20px;

    border-radius: 7px;

    cursor: pointer;

    font-weight: bold;
}

.empty-history button:hover {

    background: #4f6558;
}


/* ================================
   TRIP LIST
================================ */

.trip-list {

    display: flex;

    flex-direction: column;

    gap: 12px;
}


/* ================================
   TRIP CARD
================================ */

.trip-card {

    background: #ffffff;

    border: 1px solid #dde5de;

    border-radius: 10px;

    padding: 15px;

    border-left: 5px solid #579268;

    transition: 0.2s;
}

.trip-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}


/* ================================
   TRIP TOP
================================ */

.trip-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;
}

.trip-number {

    color: #405749;

    font-weight: bold;

    font-size: 16px;
}

.trip-date {

    color: #728273;

    font-size: 13px;
}


/* ================================
   ROUTE
================================ */

.route {

    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-bottom: 14px;
}

.location {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #405749;

    font-size: 15px;

    font-weight: 600;
}

.location i {

    width: 20px;

    text-align: center;
}

.origin-icon {

    color: #579268;
}

.destination-icon {

    color: #b65b5b;
}

.route-line {

    width: 1px;

    height: 12px;

    background: #9baa9d;

    margin-left: 9px;
}


/* ================================
   TRIP DETAILS
================================ */

.trip-details {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 7px;
}

.detail {

    background: #eef5f0;

    border: 1px solid #d5e4d9;

    border-radius: 8px;

    padding: 10px 8px;

    text-align: center;
}

.detail small {

    display: block;

    color: #5f7a68;

    font-size: 11px;

    font-weight: 600;

    margin-bottom: 3px;
}

.detail strong {

    color: #405749;

    font-size: 15px;
}


/* ================================
   ERROR
================================ */

.error-message {

    text-align: center;

    padding: 35px 15px;

    color: #a94c4c;

    font-size: 15px;
}

.error-message i {

    font-size: 40px;

    margin-bottom: 10px;
}

.retry-btn {

    display: block;

    margin: 15px auto 0;

    border: none;

    background: #62786a;

    color: white;

    padding: 9px 18px;

    border-radius: 6px;

    cursor: pointer;
}


/* ================================
   SIDEBAR
================================ */

.sidebar {

    position: fixed;

    top: 0;

    left: -320px;

    width: 300px;

    height: 100vh;

    background: #3B5643 url("../images/bg-dark.jpg") center center / cover no-repeat;

    padding: 25px;

    z-index: 99999;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: left 0.3s ease;
}

.sidebar.open {

    left: 0;
}


/* ================================
   SIDEBAR LOGO
================================ */

.sidebar-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 40px;
}

.sidebar-logo i {

    font-size: 34px;
}

.sidebar-logo h1 {

    font-family: 'Signika Negative', 'Segoe UI', Tahoma, sans-serif;

    font-size: 37px;
}


/* ================================
   SIDEBAR NAV
================================ */

.sidebar nav {

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.sidebar nav a {

    color: white;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px;

    border-radius: 12px;

    transition: 0.2s;
}

.sidebar nav a:hover {

    background: rgba(255,255,255,0.15);
}

.sidebar nav a.active {

    background: white;

    color: #4f805d;

    font-weight: bold;
}


/* ================================
   LOGOUT
================================ */

#sidebarLogout {

    border: none;

    background: #b65b5b;

    color: white;

    padding: 14px;

    border-radius: 12px;

    cursor: pointer;

    font-weight: bold;

    font-size: 16px;
}

#sidebarLogout:hover {

    background: #a44e4e;
}


/* ================================
   OVERLAY
================================ */

.sidebar-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.35);

    z-index: 9999;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;
}

.sidebar-overlay.show {

    opacity: 1;

    pointer-events: auto;
}


/* ================================
   MOBILE
================================ */

@media (max-width: 700px) {

    .history-card {

        width: calc(100% - 25px);

        padding-left: 20px;

        padding-right: 20px;
    }

    .history-header h1 {

        font-size: 37px;
    }

    .trip-details {

        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 400px) {

    .logo {

        font-size: 26px;
    }

    .history-header h1 {

        font-size: 31px;
    }

    .trip-details {

        grid-template-columns: 1fr;
    }
}

.feedback-dialog {
    box-sizing: border-box;
    width: min(560px, calc(100vw - 32px));
    max-height: 85vh;
    margin: auto;
    padding: 24px;
    border: 0;
    border-radius: 18px;
    overflow-y: auto;
    background: #fffdf4;
    color: #304a39;
}

.feedback-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.feedback-dialog h2,
.feedback-dialog h3 {
    margin-bottom: 12px;
}

#feedbackTripSummary {
    margin: 12px 0;
    overflow-wrap: anywhere;
}

.feedback-disclosure {
    font-size: 14px;
    line-height: 1.6;
    margin: 12px 0;
}

.feedback-dialog label {
    display: block;
    margin: 12px 0 8px;
}

.feedback-dialog textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 12px;
    border: 1px solid #b7c9bc;
    border-radius: 10px;
    font: inherit;
    resize: vertical;
}

.trip-feedback-btn,
.feedback-dialog button {
    padding: 10px 14px;
    border: 0;
    border-radius: 9px;
    background: #4c6b54;
    color: white;
    cursor: pointer;
    margin-top: 12px;
}

.feedback-dialog button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.feedback-dialog :focus-visible {
    outline: 3px solid #1e70b4;
    outline-offset: 2px;
}

.feedback-dialog form[hidden] {
    display: none;
}

#feedbackNotice {
    margin: 14px 0;
    line-height: 1.5;
}

.feedback-entry {
    padding: 12px 0;
    border-bottom: 1px solid #d7e2da;
}

.feedback-entry p {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.feedback-entry small {
    display: block;
    margin-top: 8px;
    line-height: 1.5;
}

.feedback-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ===========================================================
   BRAND ASSETS (logo mark + wordmark)
   White versions sit on the green sidebar,
   green versions sit on the white top bar.
=========================================================== */

.sidebar-logo,
.admin-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sidebar-logo .brand-icon,
.admin-logo .brand-icon {
    width: 54px;
    height: auto;
    display: block;
}

.sidebar-logo .brand-name,
.admin-logo .brand-name {
    width: 140px;
    max-width: 100%;
    height: auto;
    display: block;
}

header .logo,
.top-bar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

header .logo .brand-icon,
.top-bar .logo .brand-icon {
    width: 34px;
    height: auto;
    display: block;
}

header .logo .brand-name,
.top-bar .logo .brand-name {
    width: 120px;
    height: auto;
    display: block;
}


/* ===========================================================
   TYPEFACE — Signika (Google Fonts, OFL)
   Loaded via <link> in each page head.
=========================================================== */

html,
body,
button,
input,
select,
textarea {
    font-family: 'Signika Negative', 'Segoe UI', Tahoma, sans-serif;

    /* SemiBold is the base weight for this design */
    font-weight: 600;
}


/* reason shown under "Unable to load your travel history." */
.error-message .error-detail {
    display: block;
    max-width: 420px;
    margin: -4px auto 14px;
    color: #8a5a5a;
    font-size: 14px;
    line-height: 1.4;
}

.error-message .error-detail:empty {
    display: none;
}


/* PHONES: sidebar uses the visible height so Logout is never under the browser bar */
@supports (height: 100dvh) {
    .sidebar {
        height: 100dvh;
    }
}

.sidebar {
    overflow-y: auto;
    padding-bottom: calc(25px + env(safe-area-inset-bottom, 0px));
}


/* ===========================================================
   PHONES: centred Travel History card and header
   (smaller side gaps; icon above the title so "Travel History"
   stays on one line and sits in the middle)
=========================================================== */

@media (max-width: 700px) {

    .history-container {
        padding: 0 14px 24px;
    }

    .history-card {
        width: 100%;
        margin: 0 auto;
        padding: 14px 18px 28px;
        max-height: calc(100dvh - 90px);
    }

    .history-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        margin-bottom: 22px;
    }

    .history-header h1 {
        font-size: 32px;
    }
}

@media (max-width: 400px) {

    .history-header h1 {
        font-size: 29px;
    }
}


/* =====================================================
   PHONE VIEW: My Profile, Travel History and Feedback &
   Report share one card size, and the card fills the screen
===================================================== */
@media (max-width: 700px) {

    .profile-container,
    .history-container,
    .feedback-container {
        min-height: 0;
        padding: 0 12px 12px;
        align-items: stretch;
    }

    .profile-card,
    .history-card,
    .feedback-card {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        min-height: calc(100vh - 75px);
        min-height: calc(100dvh - 75px);
        max-height: none;
        margin: 0;
        padding: 16px 16px 24px;
        border-radius: 18px;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
    }

    /* Distance, Fare and Duration stay in one even row */
    .trip-details {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .detail {
        padding: 9px 4px;
    }

    .detail strong {
        font-size: 14px;
    }
}