:root {
    --travel-blue: #2563eb;
    --travel-sky: #eaf6ff;
    --travel-ink: #0f172a;
}
html { scroll-behavior: smooth; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.shadow-blue { box-shadow: 0 14px 30px rgba(37, 99, 235, .22); }
.shadow-travel { box-shadow: 0 18px 55px rgba(15, 23, 42, .10); }
.travel-card { border: 1px solid rgba(147, 197, 253, .45); background: rgba(255,255,255,.94); box-shadow: 0 12px 34px rgba(15, 23, 42, .07); }
.travel-input { border: 1px solid #dbeafe; border-radius: 8px; background: #fff; padding: .65rem .8rem; outline: none; }
.travel-input:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .14); border-color: #60a5fa; }
.badge-blue { background: #dbeafe; color: #1d4ed8; }
.badge-green { background: #d1fae5; color: #047857; }
.badge-amber { background: #fef3c7; color: #b45309; }
.anime-title, .anime-fade, .feature-card { opacity: 0; }
@media (max-width: 640px) {
    .shadow-travel { box-shadow: 0 10px 30px rgba(15, 23, 42, .08); }
}
.field-wrap { min-width: 0; }
.travel-input {
    display: block;
    min-height: 40px;
    color: #334155;
    font-weight: 500;
    line-height: 1.25rem;
}
select.travel-input {
    appearance: auto;
}
input[type="file"].travel-input {
    padding: .48rem .7rem;
}
.wizard-steps a {
    height: 40px;
    overflow: hidden;
    white-space: nowrap;
}
.wizard-steps a svg {
    flex: 0 0 auto;
}
.wizard-steps a {
    text-overflow: ellipsis;
}
@media (max-width: 640px) {
    .wizard-steps {
        grid-template-columns: 1fr 1fr;
    }
    .wizard-steps a {
        font-size: .78rem;
        padding-left: .65rem;
        padding-right: .65rem;
    }
}
.admin-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-width: max-content;
    height: 42px;
    border-radius: 8px;
    padding: 0 .75rem;
    color: #475569;
    font-size: .875rem;
    font-weight: 700;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.admin-nav-link:hover { background: #eff6ff; color: #1d4ed8; }
.admin-nav-active { background: #2563eb; color: #fff; box-shadow: 0 12px 24px rgba(37, 99, 235, .18); }
.admin-nav-active:hover { background: #2563eb; color: #fff; }
.admin-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #dbeafe; border-radius: 8px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 560px; }
.admin-table thead { background: #f0f9ff; color: #64748b; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.admin-table th, .admin-table td { padding: .85rem .9rem; vertical-align: middle; text-align: left; }
.admin-table tbody tr { border-top: 1px solid #dbeafe; background: rgba(255,255,255,.88); }
.admin-table tbody tr:hover { background: #f8fbff; }
.admin-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-width: 1px;
    border-radius: 8px;
    transition: background-color .18s ease, transform .18s ease;
}
.admin-icon-btn:hover { transform: translateY(-1px); }
@media (min-width: 1024px) {
    .admin-nav-link { width: 100%; min-width: 0; }
}
@media (max-width: 640px) {
    .admin-table { min-width: 0; }
    .admin-table th, .admin-table td { padding: .75rem .65rem; }
    .admin-sidebar-scroll { scrollbar-width: none; }
    .admin-sidebar-scroll::-webkit-scrollbar { display: none; }
}

/* Admin panel alignment refinements */
.admin-table-wrap {
    overflow-x: visible;
}
.admin-table {
    min-width: 0;
    table-layout: auto;
}
.admin-table th,
.admin-table td {
    overflow-wrap: anywhere;
}
.admin-table td .flex {
    align-items: center;
}
.admin-table td form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.admin-table td form .admin-icon-btn,
.admin-table form.space-y-3 > .admin-icon-btn {
    margin-top: 0 !important;
}
@media (max-width: 640px) {
    .admin-table-wrap {
        overflow-x: auto;
    }
}

/* Admin mobile cleanup */
@media (max-width: 767px) {
    .admin-sidebar-scroll {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
        overflow-x: visible;
        padding-left: .75rem;
        padding-right: .75rem;
    }
    .admin-nav-link {
        width: 100%;
        min-width: 0;
        height: 38px;
        gap: .5rem;
        padding: 0 .65rem;
        font-size: .8rem;
    }
    .admin-nav-link span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .admin-table-wrap {
        overflow-x: visible;
    }
    .admin-table {
        font-size: .8rem;
    }
    .admin-table th,
    .admin-table td {
        padding: .7rem .55rem;
    }
    .admin-icon-btn {
        width: 34px;
        height: 34px;
    }
}
@media (max-width: 420px) {
    .admin-sidebar-scroll {
        grid-template-columns: 1fr;
    }
}

/* Home and user dashboard mobile balance */
@media (max-width: 640px) {
    .home-page {
        background-position: 58% center;
    }
    .home-page nav a:first-child {
        font-size: .85rem;
    }
    .home-hero h1 {
        max-width: 18rem;
    }
    .home-hero .anime-fade,
    .home-hero .anime-title {
        opacity: 1;
    }
    .home-hero .mt-6 a {
        width: 100%;
    }
    .home-feature-card {
        min-height: 0;
        padding: .75rem !important;
    }
    .home-feature-card span {
        width: 2.25rem !important;
        height: 2.25rem !important;
        margin-bottom: .6rem !important;
    }
    .home-feature-card h3 {
        line-height: 1.15rem;
    }
    .home-feature-card p {
        margin-top: .25rem;
        line-height: 1.15rem;
    }
    .user-dashboard-hero {
        background-position: center;
    }
    .dashboard-stat-grid .travel-card {
        padding: .75rem !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
    }
    .dashboard-stat-grid .travel-card > div {
        gap: .5rem;
    }
    .dashboard-stat-grid .travel-card span:first-child {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
    .dashboard-stat-grid .travel-card span:last-child {
        display: none;
    }
    .dashboard-stat-grid .travel-card p {
        margin-top: .6rem !important;
        line-height: 1.15rem;
    }
}

/* Future plans mobile touch polish */
.future-trip-card form {
    margin: 0;
}
.future-trip-card form button {
    margin-top: 0 !important;
}
.future-trip-card a,
.future-trip-card button {
    min-width: 0;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .future-trip-card {
        box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
    }
    .future-trip-card .grid-cols-3 {
        gap: .45rem;
    }
    .future-trip-card a,
    .future-trip-card button {
        height: 38px;
        font-size: .72rem;
    }
}

/* Trip summary and trip detail mobile fixes */
.trip-summary-grid {
    align-items: stretch;
}
.trip-summary-card {
    min-width: 0;
}
.trip-summary-card p {
    overflow-wrap: anywhere;
}
.trip-module-card {
    min-width: 0;
}
.trip-module-card > h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
    font-size: 1rem;
    line-height: 1.35rem;
}
.trip-module-editor summary::-webkit-details-marker {
    display: none;
}
.trip-module-editor .trip-module-chevron {
    transition: transform .18s ease;
}
.trip-module-editor[open] .trip-module-chevron {
    transform: rotate(180deg);
}
.trip-module-editor form button,
.trip-module-card form button {
    margin-top: .75rem;
}
.trip-module-card p,
.trip-module-card a,
.trip-module-card button {
    overflow-wrap: anywhere;
}
@media (max-width: 640px) {
    .trip-detail-page {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }
    .trip-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .trip-summary-card {
        padding: .75rem !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
    }
    .trip-summary-card svg {
        width: 1rem;
        height: 1rem;
        margin-bottom: .4rem !important;
    }
    .trip-summary-card p:first-of-type {
        font-size: .72rem;
        line-height: 1rem;
    }
    .trip-summary-card p:last-child {
        font-size: .95rem;
        line-height: 1.2rem;
    }
    .trip-module-card {
        padding: .75rem !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
    }
    .trip-module-card > h2 {
        font-size: .98rem;
    }
    .trip-module-editor summary {
        min-height: 42px;
        padding: .55rem .65rem;
    }
    .trip-module-editor .travel-input,
    .trip-detail-page .travel-input {
        min-height: 42px;
        font-size: .9rem;
    }
    .trip-detail-page aside {
        max-height: none;
    }
}
@media (max-width: 640px) {
    .wizard-summary-actions a {
        width: 100%;
        min-height: 42px;
    }
}

/* Extra narrow trip detail safeguards */
.trip-detail-page,
.trip-detail-page > div,
.trip-detail-page aside,
.trip-module-card,
.trip-module-card * {
    min-width: 0;
}
.trip-detail-page {
    overflow-x: hidden;
}
.trip-module-card > p,
.trip-module-card > a,
.trip-module-card form + p,
.trip-module-card form + a {
    display: block;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.trip-module-editor summary span,
.trip-module-editor summary i {
    flex-shrink: 0;
}
.trip-module-editor summary span span {
    flex-shrink: 1;
}
@media (max-width: 420px) {
    body {
        overflow-x: hidden;
    }
    .trip-detail-page {
        gap: .75rem !important;
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }
    .trip-detail-page .grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .trip-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .trip-module-card {
        border-radius: 8px !important;
    }
    .trip-module-card > p,
    .trip-module-card > a,
    .trip-module-card button {
        font-size: .78rem !important;
        line-height: 1.15rem !important;
        padding: .65rem !important;
    }
    .trip-module-editor summary {
        font-size: .78rem !important;
    }
    .trip-module-editor summary svg {
        width: .95rem;
        height: .95rem;
    }
}

/* Trip detail horizontal scroll fix */
.trip-detail-page,
.trip-detail-page * {
    box-sizing: border-box;
}
.trip-detail-page {
    width: 100%;
    max-width: 80rem;
    overflow-x: clip;
}
.trip-detail-page > div,
.trip-detail-page aside,
.trip-detail-page .grid,
.trip-module-card,
.trip-module-editor,
.trip-module-editor summary,
.trip-module-editor summary > span,
.trip-module-editor summary > span > span {
    max-width: 100%;
    min-width: 0;
}
.trip-module-editor summary > span {
    flex: 1 1 auto;
    overflow: hidden;
}
.trip-module-editor summary > span > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trip-module-editor summary > i,
.trip-module-editor summary svg {
    flex: 0 0 auto;
}
.trip-module-card > p,
.trip-module-card > a,
.trip-module-card button,
.trip-module-card span,
.trip-module-card b,
.trip-detail-page aside p {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
@media (max-width: 640px) {
    .trip-detail-page {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: .75rem !important;
        padding-right: .75rem !important;
        overflow-x: hidden;
    }
    .trip-detail-page > div,
    .trip-detail-page aside,
    .trip-module-card {
        width: 100%;
        max-width: 100%;
    }
    .trip-detail-page .grid:not(.trip-summary-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .trip-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .trip-module-card > p,
    .trip-module-card > a {
        font-size: .78rem !important;
        line-height: 1.15rem !important;
        padding: .65rem !important;
    }
}

/* Trip detail full mobile containment */
.trip-detail-hero,
.trip-detail-hero *,
.trip-detail-page,
.trip-detail-page * {
    max-width: 100%;
    min-width: 0;
}
.trip-detail-hero,
.trip-detail-page {
    overflow-x: hidden;
}
.trip-detail-title,
.trip-detail-meta {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.trip-detail-cover {
    display: block;
}
@media (max-width: 640px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }
    .trip-detail-hero {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 1rem .75rem !important;
    }
    .trip-detail-hero > div {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .trip-detail-title {
        font-size: 1.35rem !important;
        line-height: 1.65rem !important;
    }
    .trip-detail-meta {
        font-size: .82rem !important;
        line-height: 1.2rem !important;
    }
    .trip-detail-cover {
        height: 7.75rem !important;
        width: 100% !important;
    }
    .trip-detail-page {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    .trip-detail-page > div,
    .trip-detail-page aside,
    .trip-detail-page .travel-card,
    .trip-module-card,
    .trip-module-editor {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Mobile header compact logout */
@media (max-width: 640px) {
    nav .mx-auto {
        gap: .5rem !important;
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }
    nav .flex-wrap {
        flex-wrap: nowrap !important;
        overflow: hidden;
    }
    nav a {
        white-space: nowrap;
    }
    nav a:not(.header-logout) {
        padding-left: .55rem !important;
        padding-right: .55rem !important;
        font-size: .78rem !important;
    }
    .header-logout {
        width: 38px;
        height: 38px;
        padding: 0 !important;
        flex: 0 0 38px;
    }
    .header-logout span {
        display: none;
    }
}

/* Admin mobile hamburger drawer */
.admin-mobile-drawer {
    will-change: transform;
}
.admin-mobile-drawer.is-open {
    transform: translateX(0) !important;
}
.admin-drawer-overlay.is-open {
    display: block !important;
    opacity: 1 !important;
}
body.admin-drawer-open {
    overflow: hidden;
}
.admin-mobile-drawer .admin-nav-link {
    width: 100%;
    min-width: 0;
    height: 44px;
    justify-content: flex-start;
    gap: .75rem;
    padding: 0 .85rem;
    font-size: .9rem;
}
.admin-mobile-drawer .admin-nav-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 1023px) {
    .admin-desktop-sidebar {
        display: none !important;
    }
    .admin-mobile-topbar + .admin-drawer-overlay + .admin-mobile-drawer + .lg\:flex {
        display: block;
    }
    .admin-mobile-drawer .admin-nav-link {
        display: flex;
    }
}

/* Admin lower header mobile cleanup */
@media (max-width: 639px) {
    .admin-mobile-topbar + .admin-drawer-overlay + .admin-mobile-drawer + .lg\:flex header .sm\:flex {
        display: none !important;
    }
    .admin-mobile-topbar + .admin-drawer-overlay + .admin-mobile-drawer + .lg\:flex header .mx-auto {
        gap: .25rem !important;
    }
}

/* Admin mobile data cards: no horizontal table scroll */
.admin-table td .inline-flex,
.admin-table td span[class*="bg-"] {
    word-break: normal;
    overflow-wrap: normal;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .admin-table-wrap {
        overflow-x: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
    }
    .admin-table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate;
        font-size: .86rem;
    }
    .admin-table thead {
        display: none;
    }
    .admin-table tbody {
        display: grid;
        gap: .75rem;
        width: 100%;
    }
    .admin-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        overflow: hidden;
        border: 1px solid #dbeafe !important;
        border-radius: 10px;
        background: #fff !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    }
    .admin-table tr.hidden {
        display: none !important;
    }
    .admin-table td {
        display: grid !important;
        grid-template-columns: 6.6rem minmax(0, 1fr);
        align-items: center;
        gap: .65rem;
        width: 100%;
        padding: .65rem .75rem !important;
        border: 0 !important;
        text-align: left !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }
    .admin-table td + td {
        border-top: 1px solid #eef6ff !important;
    }
    .admin-table td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .02em;
        text-transform: uppercase;
    }
    .admin-table td.text-right,
    .admin-table th.text-right + td {
        text-align: left !important;
    }
    .admin-table td .flex {
        justify-content: flex-start !important;
        flex-wrap: wrap;
        gap: .45rem;
    }
    .admin-table td .admin-icon-btn {
        width: 36px;
        height: 36px;
    }
    .admin-table td p,
    .admin-table td span:not([class*="bg-"]),
    .admin-table td a,
    .admin-table td b {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .admin-table tr[id] td {
        display: block !important;
        padding: .75rem !important;
    }
    .admin-table tr[id] td::before {
        display: none;
    }
    .admin-table tr[id] .grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
@media (max-width: 380px) {
    .admin-table td {
        grid-template-columns: 5.4rem minmax(0, 1fr);
        gap: .5rem;
        padding: .6rem .65rem !important;
    }
    .admin-table td::before {
        font-size: .66rem;
    }
}

/* Admin destination image previews */
.admin-destination-thumb {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 42px;
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
}
.admin-destination-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.admin-destination-placeholder {
    color: #94a3b8;
    background: #f8fafc;
}
@media (max-width: 767px) {
    .admin-destination-thumb {
        width: 72px;
        height: 52px;
    }
}

/* Reminder highlight states */
.reminder-highlight {
    border: 1px solid #bfdbfe;
    border-left-width: 4px;
    border-radius: 8px;
    background: #eff6ff;
    color: #0f172a;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .06);
}
.reminder-highlight small,
.reminder-highlight .text-slate-500 {
    color: #475569;
}
.reminder-upcoming {
    border-color: #93c5fd;
    background: linear-gradient(90deg, #eff6ff 0%, #f8fbff 100%);
}
.reminder-today {
    border-color: #f59e0b;
    background: linear-gradient(90deg, #fffbeb 0%, #fff7ed 100%);
}
.reminder-overdue {
    border-color: #fb7185;
    background: linear-gradient(90deg, #fff1f2 0%, #fff7f7 100%);
}
.reminder-done {
    border-color: #6ee7b7;
    background: linear-gradient(90deg, #ecfdf5 0%, #f7fefb 100%);
}
.reminder-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-height: 1.65rem;
    white-space: nowrap;
    border-radius: 999px;
    padding: .22rem .58rem;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
}
.reminder-badge.reminder-upcoming {
    background: #dbeafe;
    color: #1d4ed8;
}
.reminder-badge.reminder-today {
    background: #fef3c7;
    color: #b45309;
}
.reminder-badge.reminder-overdue {
    background: #ffe4e6;
    color: #be123c;
}
.reminder-badge.reminder-done {
    background: #d1fae5;
    color: #047857;
}
.admin-table tr.admin-reminder-row td:first-child {
    border-left: 4px solid transparent;
}
.admin-table tr.admin-reminder-row.reminder-upcoming td:first-child {
    border-left-color: #93c5fd;
}
.admin-table tr.admin-reminder-row.reminder-today td:first-child {
    border-left-color: #f59e0b;
}
.admin-table tr.admin-reminder-row.reminder-overdue td:first-child {
    border-left-color: #fb7185;
}
.admin-table tr.admin-reminder-row.reminder-done td:first-child {
    border-left-color: #6ee7b7;
}
@media (max-width: 767px) {
    .reminder-highlight {
        border-left-width: 3px;
    }
    .reminder-badge {
        padding: .2rem .5rem;
        font-size: .68rem;
    }
    .admin-table tr.admin-reminder-row {
        border-left: 4px solid #93c5fd;
    }
    .admin-table tr.admin-reminder-row.reminder-today {
        border-left-color: #f59e0b;
    }
    .admin-table tr.admin-reminder-row.reminder-overdue {
        border-left-color: #fb7185;
    }
    .admin-table tr.admin-reminder-row.reminder-done {
        border-left-color: #6ee7b7;
    }
}

/* Trip detail action icon alignment */
.trip-row-actions {
    align-items: center;
}
.trip-row-actions form {
    margin: 0;
    display: inline-flex;
}
.trip-row-actions button,
.trip-row-actions [type="button"] {
    flex: 0 0 2.25rem;
}
@media (max-width: 640px) {
    .trip-row-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Fine tune trip action icon centering */
.trip-row-actions form,
.trip-row-actions button {
    height: 2.25rem;
    min-height: 2.25rem;
    line-height: 1;
}
.trip-row-actions button {
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
}
.trip-row-actions svg {
    display: block;
    width: 1rem;
    height: 1rem;
    margin: 0;
    transform: translateY(0);
}
.trip-row-actions [data-lucide="pencil"],
.trip-row-actions [data-lucide="trash-2"],
.trip-row-actions [data-lucide="check-circle"] {
    position: static;
}

/* Optical adjustment: pencil icon sits slightly higher than trash/check */
.trip-row-actions [data-lucide="pencil"] {
    transform: translateY(1.5px);
}

/* Pencil edit icon optical correction inside trip action buttons */
.trip-row-actions svg[data-lucide="pencil"],
.trip-row-actions [data-lucide="pencil"] {
    transform: translate(1px, 2.5px) !important;
}

/* Force edit icon visual alignment via parent button, after Lucide renders SVG */
.trip-row-actions button[data-admin-edit] svg {
    position: relative !important;
    top: 3px !important;
    left: 1px !important;
    transform: none !important;
}