/* TripNest — OTA (customer + partner + admin) prototype.
   Vibrant travel blue + warm orange, destination-gradient cards. */

.tn {
    --tn-blue: #1e3a8a;
    --tn-blue-2: #2563eb;
    --tn-orange: #f97316;
    --tn-ink: #101828;
    --tn-bg: #f5f7fb;
    --tn-panel: var(--panel, #fff);
    --tn-line: #e4e8f2;
    --tn-muted: #667085;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--tn-ink);
}
.tn * { box-sizing: border-box; }

.tn-topbar { display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem; background: var(--tn-panel); border-bottom: 1px solid var(--tn-line); position: sticky; top: 0; z-index: 20; }
.tn-brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; }
.tn-brand .logo { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--tn-blue), var(--tn-blue-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.tn-brand small { display: block; font-weight: 600; color: var(--tn-muted); font-size: .66rem; }
.tn-nav { display: flex; gap: .3rem; margin-left: .5rem; }
.tn-navbtn { border: none; background: none; padding: .45rem .9rem; border-radius: 999px; font: 700 .8rem/1 inherit; color: var(--tn-muted); cursor: pointer; }
.tn-navbtn.active { background: var(--tn-orange); color: #fff; }
.tn-top-actions { margin-left: auto; }
.tn-live-dot { font-size: .66rem; font-weight: 800; color: #ea580c; display: inline-flex; align-items: center; gap: .3rem; }
.tn-live-dot::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: #f97316; }

.tn-view { display: none; } .tn-view.active { display: block; }

/* ── Phone frame ─────────────────────────────────────────────────── */
.tn-app-wrap { background: var(--tn-bg); min-height: calc(100vh - 56px); display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; }
.tn-phone { width: 100%; max-width: 360px; background: #0b1220; border-radius: 2.1rem; padding: .55rem; box-shadow: 0 40px 80px -30px rgba(30, 58, 138, .35); }
.tn-phone-screen { background: var(--tn-panel); border-radius: 1.7rem; overflow: hidden; position: relative; height: 700px; display: flex; flex-direction: column; }
.tn-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 22px; background: #0b1220; border-radius: 0 0 14px 14px; z-index: 5; }
.tn-statusbar { display: flex; justify-content: space-between; padding: .5rem 1.1rem .2rem; font-size: .72rem; font-weight: 700; flex: none; }
.tn-screen-scroll { flex: 1; overflow-y: auto; padding-bottom: 4.4rem; }

.tn-app-hd { display: flex; align-items: center; justify-content: space-between; padding: .3rem 1.1rem .7rem; }
.tn-app-hd b { font-size: 1.05rem; font-weight: 800; }

.tn-searchtabs { display: flex; gap: .4rem; padding: 0 1.1rem .6rem; }
.tn-searchtab { flex: 1; text-align: center; padding: .45rem; border-radius: .7rem; font-size: .76rem; font-weight: 700; background: var(--tn-bg); border: 1px solid var(--tn-line); color: var(--tn-muted); cursor: pointer; }
.tn-searchtab.on { background: var(--tn-blue); color: #fff; border-color: transparent; }
.tn-searchbox { display: flex; gap: .5rem; padding: 0 1.1rem 1rem; }
.tn-searchbox input { flex: 1; border: 1px solid var(--tn-line); border-radius: .8rem; padding: .6rem .8rem; font-size: .8rem; }
.tn-searchbox button { background: var(--tn-orange); color: #fff; border: none; border-radius: .8rem; padding: .6rem 1rem; font-weight: 800; font-size: .78rem; cursor: pointer; }

.tn-sect-hd { padding: 0 1.1rem .5rem; } .tn-sect-hd h4 { font-size: .9rem; font-weight: 800; }

.tn-dest-card { margin: 0 1.1rem .8rem; border-radius: 1rem; overflow: hidden; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(16,24,40,.2); }
.tn-dest-img { height: 110px; display: flex; align-items: flex-end; padding: .7rem .9rem; color: #fff; position: relative; }
.tn-dest-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 60%); }
.tn-dest-img span { position: relative; font-weight: 800; font-size: 1rem; }
.tn-dest-info { background: var(--tn-panel); padding: .6rem .9rem; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--tn-line); border-top: none; border-radius: 0 0 1rem 1rem; }
.tn-dest-info .px { font-weight: 800; color: var(--tn-blue); font-size: .84rem; }
.tn-dest-info .rt { font-size: .72rem; color: var(--tn-muted); }

.tn-back-row { display: flex; align-items: center; gap: .6rem; padding: .3rem 1.1rem .8rem; }
.tn-back-row .back { font-size: 1.1rem; cursor: pointer; }
.tn-back-row b { font-size: .95rem; font-weight: 800; flex: 1; text-align: center; margin-right: 1.5rem; }

.tn-result-card { margin: 0 1.1rem .7rem; background: var(--tn-panel); border: 1px solid var(--tn-line); border-radius: 1rem; padding: .85rem; display: flex; gap: .8rem; cursor: pointer; }
.tn-result-card .ic { width: 44px; height: 44px; border-radius: .8rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: none; }
.tn-result-card .t { font-weight: 800; font-size: .84rem; }
.tn-result-card .meta { font-size: .72rem; color: var(--tn-muted); margin-top: .15rem; }
.tn-result-card .px { margin-left: auto; text-align: right; font-weight: 800; color: var(--tn-blue); font-size: .88rem; flex: none; }
.tn-result-card .px small { display: block; font-weight: 600; color: var(--tn-muted); font-size: .62rem; }

.tn-detail-card { margin: 0 1.1rem 1rem; background: var(--tn-panel); border: 1px solid var(--tn-line); border-radius: 1rem; overflow: hidden; }
.tn-detail-hero { height: 120px; display: flex; align-items: flex-end; padding: .8rem 1rem; color: #fff; position: relative; }
.tn-detail-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 60%); }
.tn-detail-hero span { position: relative; font-weight: 800; font-size: 1.05rem; }
.tn-detail-body { padding: .9rem 1rem; }
.tn-detail-row { display: flex; justify-content: space-between; padding: .45rem 0; border-top: 1px solid var(--tn-line); font-size: .8rem; }
.tn-detail-row .k { color: var(--tn-muted); } .tn-detail-row .v { font-weight: 700; }
.tn-price-card { margin: 0 1.1rem 1rem; background: var(--tn-bg); border: 1px solid var(--tn-line); border-radius: 1rem; padding: .9rem 1rem; }
.tn-price-row { display: flex; justify-content: space-between; font-size: .78rem; padding: .25rem 0; }
.tn-price-row.total { font-weight: 800; font-size: .92rem; border-top: 1px solid var(--tn-line); margin-top: .4rem; padding-top: .5rem; color: var(--tn-blue); }
.tn-book-bar { position: sticky; bottom: 0; padding: .8rem 1.1rem; background: var(--tn-panel); border-top: 1px solid var(--tn-line); }
.tn-book-bar button { width: 100%; background: var(--tn-orange); color: #fff; border: none; border-radius: .8rem; padding: .75rem; font-weight: 800; font-size: .85rem; cursor: pointer; }

.tn-trip-card { margin: 0 1.1rem .7rem; background: var(--tn-panel); border: 1px solid var(--tn-line); border-radius: 1rem; padding: .85rem; }
.tn-trip-card .t { font-weight: 800; font-size: .84rem; } .tn-trip-card .dt { font-size: .72rem; color: var(--tn-muted); margin: .2rem 0 .5rem; }
.tn-trip-badge { font-size: .64rem; font-weight: 800; padding: .12rem .5rem; border-radius: 999px; background: #dcfce7; color: #166534; }

.tn-bottomnav { position: absolute; bottom: 0; left: 0; right: 0; background: var(--tn-panel); border-top: 1px solid var(--tn-line); display: flex; padding: .6rem 0 .7rem; }
.tn-bottomnav button { flex: 1; border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .62rem; font-weight: 700; color: var(--tn-muted); cursor: pointer; }
.tn-bottomnav button.active { color: var(--tn-orange); }
.tn-bottomnav .ic { font-size: 1.15rem; }

.tn-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--tn-ink); color: #fff; padding: .5rem 1rem; border-radius: 999px; font-size: .74rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; }
.tn-toast.show { opacity: 1; }

/* ── Partner app (hotel) extras ─────────────────────────────────── */
.tn-earn-card { margin: 0 1.1rem 1rem; background: var(--tn-ink); color: #fff; border-radius: 1rem; padding: 1rem; display: flex; justify-content: space-around; }
.tn-earn-card small { display: block; opacity: .7; font-size: .68rem; margin-bottom: .2rem; } .tn-earn-card b { font-size: 1.2rem; }
.tn-req-card { margin: 0 1.1rem .8rem; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 1rem; padding: .85rem; }
.tn-req-card .t { font-weight: 800; font-size: .84rem; } .tn-req-card .meta { font-size: .72rem; color: var(--tn-muted); margin: .2rem 0 .6rem; }
.tn-req-actions { display: flex; gap: .5rem; }
.tn-req-actions button { flex: 1; border: none; border-radius: .6rem; padding: .5rem; font-weight: 800; font-size: .76rem; cursor: pointer; }
.tn-req-actions .accept { background: var(--tn-blue); color: #fff; }
.tn-req-actions .decline { background: #fff; border: 1px solid var(--tn-line); color: var(--tn-muted); }
.tn-calendar-strip { display: flex; gap: .5rem; padding: 0 1.1rem 1rem; overflow-x: auto; }
.tn-cal-day { flex: none; width: 52px; text-align: center; border-radius: .8rem; padding: .6rem .3rem; background: var(--tn-panel); border: 1px solid var(--tn-line); cursor: pointer; }
.tn-cal-day.booked { background: #fee2e2; border-color: #fecaca; }
.tn-cal-day.avail { background: #dcfce7; border-color: #bbf7d0; }
.tn-cal-day .d { font-size: .64rem; color: var(--tn-muted); font-weight: 700; }
.tn-cal-day .n { font-size: .9rem; font-weight: 800; margin: .15rem 0; }
.tn-cal-day .s { font-size: .58rem; font-weight: 700; }

/* ── Admin ────────────────────────────────────────────────────────── */
.tn-admin { display: flex; min-height: calc(100vh - 56px); background: var(--tn-bg); }
.tn-admin-side { width: 220px; flex: none; background: var(--tn-ink); color: #b7bfd1; padding: 1rem .6rem; }
.tn-admin-side .brand { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem 1.1rem; color: #fff; font-weight: 800; }
.tn-admin-side .mark { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--tn-blue-2), var(--tn-orange)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .78rem; }
.tn-admin-side .brand small { display: block; font-weight: 600; color: #6e7690; font-size: .66rem; }
.tn-admin-nav { display: flex; flex-direction: column; }
.tn-admin-nav button { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; padding: .5rem .6rem; border-radius: .6rem; font: 700 .8rem/1 inherit; color: #b7bfd1; background: none; border: none; cursor: pointer; margin-bottom: .1rem; }
.tn-admin-nav button:hover { background: rgba(255,255,255,.06); }
.tn-admin-nav button.active { background: var(--tn-orange); color: #fff; }
.tn-admin-main { flex: 1; padding: 1.4rem 1.8rem; overflow-x: auto; }
.tn-admin-hd h2 { font-size: 1.2rem; font-weight: 800; } .tn-admin-hd p { font-size: .8rem; color: var(--tn-muted); }
.tn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; margin: 1.1rem 0; }
.tn-stat { background: var(--tn-panel); border: 1px solid var(--tn-line); border-radius: .9rem; padding: .9rem 1rem; }
.tn-stat .ic { width: 34px; height: 34px; border-radius: .6rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .95rem; margin-bottom: .5rem; }
.tn-stat .v { font-size: 1.3rem; font-weight: 800; } .tn-stat .k { font-size: .72rem; color: var(--tn-muted); font-weight: 700; }
.tn-charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; }
.tn-chart-card { background: var(--tn-panel); border: 1px solid var(--tn-line); border-radius: 1rem; padding: 1rem; }
.tn-chart-card h4 { font-size: .84rem; font-weight: 800; margin-bottom: .7rem; }
.tn-chart-card svg { width: 100%; height: 180px; display: block; }

@media (max-width: 860px) {
    .tn-admin { flex-direction: column; }
    .tn-admin-side { width: 100%; display: flex; overflow-x: auto; padding: .6rem; }
    .tn-admin-side .brand { display: none; }
    .tn-admin-nav { flex-direction: row; gap: .3rem; }
    .tn-admin-nav button { white-space: nowrap; }
    .tn-charts { grid-template-columns: 1fr; }
}