@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

:root {
  --navy: #0d2738;
  --navy-2: #143b4f;
  --ink: #182a34;
  --muted: #82909a;
  --line: #e7edf0;
  --bg: #f5f8f9;
  --white: #fff;
  --teal: #2f94a2;
  --shadow: 0 12px 28px rgba(27, 58, 72, .06);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: 'Vazirmatn', Tahoma, Arial, sans-serif; font-size: 13px; }
[hidden] { display: none !important; }
body.role-partner .admin-nav, body.role-partner .admin-only { display: none !important; }
body.role-admin .partner-only { display: none !important; }
body.role-admin .traveler-only, body.role-partner .traveler-only,
body.role-traveler .admin-nav, body.role-traveler .admin-only,
body.role-traveler .partner-only { display: none !important; }
body.role-admin .hotel-only, body.role-admin .guide-only, body.role-admin .reception-only,
body.role-partner .hotel-only, body.role-partner .guide-only, body.role-partner .reception-only,
body.role-traveler .hotel-only, body.role-traveler .guide-only, body.role-traveler .reception-only,
body.role-hotel .admin-nav, body.role-hotel .admin-only, body.role-hotel .partner-only, body.role-hotel .traveler-only, body.role-hotel .guide-only, body.role-hotel .reception-only,
body.role-guide .admin-nav, body.role-guide .admin-only, body.role-guide .partner-only, body.role-guide .traveler-only, body.role-guide .hotel-only, body.role-guide .reception-only,
body.role-reception .admin-nav, body.role-reception .admin-only, body.role-reception .partner-only, body.role-reception .traveler-only, body.role-reception .hotel-only, body.role-reception .guide-only { display: none !important; }
body.role-admin .activity-staff-only, body.role-partner .activity-staff-only, body.role-traveler .activity-staff-only,
body.role-hotel .activity-staff-only, body.role-guide .activity-staff-only, body.role-reception .activity-staff-only,
body.role-activity .admin-nav, body.role-activity .admin-only, body.role-activity .partner-only, body.role-activity .traveler-only,
body.role-activity .hotel-only, body.role-activity .guide-only, body.role-activity .reception-only { display: none !important; }
body.role-admin .finance-only, body.role-partner .finance-only, body.role-traveler .finance-only,
body.role-hotel .finance-only, body.role-guide .finance-only, body.role-reception .finance-only, body.role-activity .finance-only,
body.role-finance .admin-nav, body.role-finance .admin-only, body.role-finance .partner-only, body.role-finance .traveler-only,
body.role-finance .hotel-only, body.role-finance .guide-only, body.role-finance .reception-only, body.role-finance .activity-staff-only { display: none !important; }
button, input { font: inherit; }
button { cursor: pointer; border: 0; }
.login-screen { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 20% 10%, #285a6b, transparent 35%), var(--navy); }.login-screen[hidden] { display: none; }.login-card { width: min(410px, 100%); padding: 34px; background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.23); text-align: right; }.login-language { display: flex; justify-content: center; gap: 5px; margin-bottom: 14px; direction: ltr; }.login-lang { padding: 6px 9px; border-radius: 6px; color: #8b9ba0; background: transparent; font-size: 10px; }.login-lang.active { color: #fff; background: var(--navy); }.login-logo { display: block; width: 90px; height: 90px; object-fit: contain; margin: 0 auto 16px; }.login-card .eyebrow { text-align: center; margin-bottom: 5px; color: #4c9ca5; }.login-card h1 { text-align: center; font-size: 23px; margin-bottom: 7px; }.login-subtitle { text-align: center; color: #95a3a8; font-size: 11px; margin-bottom: 25px; }.login-card label { display: block; margin: 14px 0; }.login-card label span { display: block; color: #586f78; font-size: 10px; margin-bottom: 6px; }.login-card label input { width: 100%; border: 1px solid #dce6e8; border-radius: 7px; padding: 11px; outline: 0; font-size: 11px; }.login-card label input:focus { border-color: #53a7af; box-shadow: 0 0 0 3px rgba(83,167,175,.12); }.login-button { width: 100%; justify-content: center; margin-top: 20px; }.login-error { color: #cc6c64; background: #fff1ef; padding: 9px; border-radius: 6px; font-size: 10px; text-align: center; }.demo-accounts { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); color: #9aa8ad; font-size: 9px; }.demo-accounts small { width: 100%; color: #607780; }.logout-button { color: #9aa8ad; background: transparent; font-size: 10px; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 258px; height: 100vh; position: sticky; top: 0; background: var(--navy); color: #fff; display: flex; flex-direction: column; flex-shrink: 0; padding: 30px 18px 18px; }
.mobile-sidebar-close { display: none; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 16px 32px; }
.brand-logo { width: 56px; height: 56px; object-fit: contain; object-position: center; border-radius: 8px; background: #fff; }
.brand-copy { display: flex; align-items: baseline; gap: 4px; }
.brand-copy span { color: #b5c8cf; font-size: 11px; white-space: nowrap; }
.nav-label { color: #73909e; font-size: 11px; margin: 0 14px 10px; }
.nav-label-spaced { margin-top: 27px; }
.nav-item { color: #a9c0c9; text-decoration: none; height: 45px; display: flex; align-items: center; gap: 12px; border-radius: 9px; padding: 0 14px; margin: 3px 0; transition: .2s; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.1); color: #fff; }
.nav-item.active { box-shadow: inset 3px 0 #4eb2bd; }
.nav-icon { width: 18px; text-align: center; font-size: 19px; color: #92afbb; }
.nav-item.active .nav-icon { color: #6ed1d0; }
.nav-count { margin-right: auto; min-width: 25px; padding: 2px 6px; text-align: center; border-radius: 20px; color: #8ad1d3; background: rgba(83,181,188,.18); font-size: 11px; }
.sidebar-bottom { margin-top: auto; }
.support-card { display: flex; gap: 10px; align-items: center; padding: 13px 12px; background: rgba(93,161,173,.13); border: 1px solid rgba(116,194,201,.13); border-radius: 10px; }
.support-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #4b929e; font-weight: 700; }
.support-card strong, .support-card small, .profile-mini strong, .profile-mini small { display: block; }
.support-card strong { font-size: 11px; }
.support-card small { color: #8faab3; font-size: 9px; margin-top: 3px; }
.profile-mini { border-top: 1px solid rgba(255,255,255,.1); margin-top: 18px; padding: 18px 6px 0; display: flex; align-items: center; gap: 9px; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #d7a173; color: #fff; font-weight: 700; }
.avatar-dark { background: #477b8b; }
.profile-mini strong { font-size: 11px; }
.profile-mini small { color: #78939f; font-size: 9px; margin-top: 3px; }
.more-button { margin-right: auto; background: transparent; color: #829da8; letter-spacing: 2px; }
.content { min-width: 0; flex: 1; }
.topbar { height: 78px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 42px; }
.breadcrumb { color: #a0adb4; font-size: 12px; }
.breadcrumb strong { color: #52636d; font-weight: 600; }
.crumb-divider { margin: 0 9px; color: #d3dce0; }
.topbar-actions { display: flex; align-items: center; gap: 22px; }
.quick-search { width: 184px; height: 32px; display: flex; align-items: center; gap: 7px; color: #9aa9af; background: #f8fafb; border: 1px solid var(--line); border-radius: 7px; padding: 0 9px; }
.quick-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10px; }
.quick-search input::placeholder { color: #a7b2b6; }
.language-switcher { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; direction: ltr; }
.lang { min-width: 31px; height: 25px; color: #9ba9af; background: transparent; border-radius: 5px; font-size: 10px; }
.lang.active { color: var(--navy); background: #e7f2f3; font-weight: 700; }
.icon-button { position: relative; background: transparent; color: #6f818a; font-size: 22px; }
.notification-dot { position: absolute; width: 7px; height: 7px; background: #e27165; border: 2px solid white; border-radius: 50%; top: 0; right: -1px; }
.notification-panel { position: absolute; top: 62px; left: 42px; z-index: 8; width: 320px; max-width: calc(100vw - 32px); padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 18px 45px rgba(13,39,56,.16); }
.notification-panel-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 9px; border-bottom: 1px solid var(--line); color: #3d5862; font-size: 11px; }
.notification-panel-heading button { color: #4c9da5; background: transparent; font-size: 9px; }
.notification-item { padding: 10px 4px; border-bottom: 1px solid #eff3f4; color: #62767e; font-size: 10px; line-height: 1.8; }
.notification-item:last-child { border-bottom: 0; }
.notification-item small { display: block; color: #a0adb1; font-size: 9px; }
.top-profile { display: flex; align-items: center; gap: 9px; }
.top-profile-copy strong, .top-profile-copy small { display: block; }
.top-profile-copy strong { font-size: 11px; }
.top-profile-copy small { color: #99a6ac; font-size: 9px; margin-top: 3px; }
.chevron { color: #9caab0; margin-right: 4px; }
.mobile-menu { display: none; background: transparent; color: var(--navy); font-size: 23px; }
.page-body { padding: 34px 42px 20px; max-width: 1540px; margin: auto; }
.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.eyebrow { color: #9aa8ae; font-size: 11px; margin: 0 0 8px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: 25px; letter-spacing: -.04em; }
h1 span { color: #e4ae65; font-size: 17px; }
.subtitle { color: #8c9ba3; margin: 0; font-size: 12px; }
.primary-button { display: flex; align-items: center; gap: 8px; color: #fff; background: var(--navy); border-radius: 8px; padding: 12px 16px; box-shadow: 0 7px 16px rgba(13,39,56,.15); transition: transform .2s, background .2s; }
.primary-button:hover { transform: translateY(-2px); background: #1a4b60; }
.primary-button span:first-child { font-size: 19px; line-height: 14px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; margin-bottom: 19px; }
.stat-card, .panel { background: var(--white); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.stat-card { min-height: 121px; display: flex; align-items: flex-start; padding: 19px; gap: 12px; position: relative; overflow: hidden; }
.stat-icon { width: 37px; height: 37px; border-radius: 9px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.stat-icon-blue { background: #e6f3f6; color: #4599aa; }.stat-icon-green { background: #e7f4ee; color: #45a47d; }.stat-icon-orange { background: #fff1df; color: #e2a452; }.stat-icon-purple { background: #eeeafb; color: #8573c8; }
.stat-content > span { display: block; color: #84939a; font-size: 11px; margin: 1px 0 3px; }.stat-content strong { display: block; color: #203540; font-size: 23px; line-height: 1.3; }.stat-content small { font-size: 9px; }.stat-content em { font-style: normal; color: #a1adb2; margin-right: 3px; }.positive { color: #48a480; }.warning { color: #d99546; }.stat-spark { position: absolute; height: 34px; width: 94px; left: -5px; bottom: 10px; opacity: .55; border-bottom: 2px solid currentColor; transform: skewY(-17deg) rotate(-4deg); border-radius: 50%; }.spark-blue { color: #62b4be; }.spark-green { color: #7fc89e; }.spark-orange { color: #e7b26b; }.spark-purple { color: #9c8ed8; }
.dashboard-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 19px; margin-bottom: 19px; }.lower-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 19px; }
.panel { padding: 22px 23px; }.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }.panel-heading h2 { margin: 0 0 5px; font-size: 14px; }.panel-heading p { margin: 0; color: #98a5aa; font-size: 10px; }.text-button { color: #3f98a2; background: transparent; font-size: 10px; padding: 3px; }.task-count { display: grid; place-items: center; width: 22px; height: 22px; background: #fff1dd; color: #d9974c; border-radius: 50%; font-size: 10px; }
.arrival-item { display: flex; align-items: center; min-height: 67px; border-top: 1px solid #eff3f4; gap: 12px; }.arrival-item:first-child { border-top: 0; }.arrival-time { width: 54px; flex-shrink: 0; }.arrival-time strong, .arrival-time small { display: block; }.arrival-time strong { color: #2e4753; font-size: 12px; }.arrival-time small { color: #a7b1b5; font-size: 9px; margin-top: 2px; }.arrival-line { width: 8px; height: 8px; border: 2px solid #59a9b0; border-radius: 50%; position: relative; flex-shrink: 0; }.arrival-line:after { content: ''; position: absolute; width: 1px; height: 49px; background: #dcebed; top: 6px; right: 1px; }.arrival-item:last-child .arrival-line:after { display: none; }.arrival-info { flex: 1; min-width: 0; }.arrival-info strong, .arrival-info span { display: block; }.arrival-info strong { font-size: 11px; color: #344c57; }.arrival-info span { color: #9aa7ad; font-size: 9px; margin-top: 5px; }.arrival-info i { font-style: normal; color: #d3dbde; padding: 0 4px; }.status-badge { padding: 5px 7px; border-radius: 5px; white-space: nowrap; font-size: 9px; }.status-badge span:first-child { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-left: 5px; }.confirmed { color: #4a9e7e; background: #eaf7f1; }.confirmed span:first-child { background: #63b78e; }.waiting { color: #c78b45; background: #fff5e7; }.waiting span:first-child { background: #e2aa58; }.row-menu { color: #aab5ba; background: transparent; letter-spacing: 2px; font-size: 11px; }
.task-list { display: flex; flex-direction: column; gap: 3px; }.task-item { display: flex; align-items: center; gap: 9px; min-height: 52px; cursor: pointer; border-bottom: 1px solid #eff3f4; }.task-item:last-child { border: 0; }.task-item input { display: none; }.checkmark { width: 16px; height: 16px; border: 1px solid #d2dfe2; border-radius: 4px; flex-shrink: 0; position: relative; }.task-item input:checked + .checkmark { background: #4fa5a7; border-color: #4fa5a7; }.task-item input:checked + .checkmark:after { content: '✓'; color: white; font-size: 11px; position: absolute; right: 2px; top: -2px; }.task-item > span:not(.checkmark) { flex: 1; min-width: 0; }.task-item strong, .task-item small { display: block; }.task-item strong { font-size: 10px; color: #455963; font-weight: 600; }.task-item small { color: #a2adb1; font-size: 9px; margin-top: 3px; }.task-item em { color: #c98e4c; font-size: 9px; font-style: normal; }.task-item em.urgent { color: #df786b; }.task-item em.muted { color: #adb7bb; }
.filter-button { color: #83939a; background: #f8fafb; border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font-size: 9px; }.chart-wrap { display: flex; height: 195px; margin-top: 10px; }.chart-y { width: 35px; display: flex; flex-direction: column; justify-content: space-between; color: #a8b2b6; font-size: 9px; padding-bottom: 25px; }.chart { position: relative; flex: 1; padding-bottom: 25px; }.grid-lines { position: absolute; inset: 0 0 25px; display: flex; flex-direction: column; justify-content: space-between; }.grid-lines i { height: 1px; background: #edf1f2; }.chart svg { position: absolute; inset: 0 0 25px; width: 100%; height: calc(100% - 25px); overflow: visible; }.chart-area { fill: url(#fill); }.chart-line { fill: none; stroke: #3a9ba6; stroke-width: 3; stroke-linecap: round; }.chart-x { display: flex; justify-content: space-between; position: absolute; bottom: 0; left: 0; right: 0; color: #a8b2b6; font-size: 9px; }
.donut-wrap { display: flex; align-items: center; justify-content: space-around; min-height: 195px; gap: 20px; }.donut { width: 142px; height: 142px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#4c9da8 0 86%, #e7b365 86% 95%, #dfe8e9 95%); position: relative; }.donut:after { content: ''; position: absolute; width: 98px; height: 98px; background: #fff; border-radius: 50%; }.donut div { position: relative; z-index: 1; text-align: center; }.donut strong, .donut small { display: block; }.donut strong { font-size: 24px; color: #2b4651; }.donut small { font-size: 9px; color: #9ca9ad; margin-top: 2px; }.legend { display: flex; flex-direction: column; gap: 16px; min-width: 116px; }.legend span { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; column-gap: 6px; color: #9ca7ab; font-size: 9px; }.legend i { width: 7px; height: 7px; border-radius: 2px; }.legend-confirmed { background: #4c9da8; }.legend-pending { background: #e7b365; }.legend-free { background: #dfe8e9; }.legend b { font-weight: 500; }.legend strong { color: #3c525c; font-size: 11px; }
.page-footer { display: flex; justify-content: space-between; color: #aab4b8; font-size: 9px; padding: 24px 3px 0; }.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 80px); opacity: 0; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 7px; box-shadow: var(--shadow); transition: .3s; z-index: 5; }.toast.show { transform: translate(-50%, 0); opacity: 1; }
.tours-panel { margin-top: 19px; }.tours-heading { align-items: center; margin-bottom: 12px; }.table-actions { display: flex; align-items: center; gap: 12px; }.table-actions select { border: 1px solid var(--line); border-radius: 6px; color: #84939a; background: #f8fafb; padding: 7px 10px; outline: 0; font-size: 9px; }.table-scroll { overflow-x: auto; }.tour-table { width: 100%; border-collapse: collapse; min-width: 690px; }.tour-table th { color: #9ba8ad; font-size: 9px; font-weight: 500; text-align: right; padding: 9px 10px; background: #f8fafb; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.tour-table td { color: #51656e; font-size: 10px; padding: 13px 10px; border-bottom: 1px solid #eff3f4; white-space: nowrap; }.tour-table tr:last-child td { border-bottom: 0; }.tour-name { color: #304a56 !important; font-weight: 700; }.tour-company { color: #89999f !important; }.table-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 5px; font-size: 9px; }.table-status:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.table-status.confirmed { color: #4a9e7e; background: #eaf7f1; }.table-status.waiting { color: #c78b45; background: #fff5e7; }.delete-tour { color: #a6b2b6; background: transparent; font-size: 14px; }.empty-state { padding: 28px; text-align: center; color: #a4b0b5; font-size: 11px; }
.travelers-panel { margin-top: 19px; }.travelers-heading { align-items: center; margin-bottom: 16px; }.traveler-total { display: flex; align-items: baseline; gap: 6px; padding: 7px 11px; background: #eaf5f5; border-radius: 7px; color: #4c9ca5; }.traveler-total strong { font-size: 17px; }.traveler-total span { font-size: 9px; }.upload-zone { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px dashed #9bc6ca; border-radius: 9px; background: #f5fbfb; }.upload-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 8px; color: #36949e; background: #dff1f1; font-size: 22px; }.upload-zone div { flex: 1; }.upload-zone strong, .upload-zone small { display: block; }.upload-zone strong { color: #42606a; font-size: 11px; }.upload-zone small { color: #9ba9ae; font-size: 9px; margin-top: 4px; }.upload-zone .secondary-button { padding: 8px 12px; font-size: 10px; }.traveler-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 10px; }.table-search { width: 235px; height: 31px; display: flex; align-items: center; gap: 7px; color: #9aa9af; background: #f8fafb; border: 1px solid var(--line); border-radius: 7px; padding: 0 9px; }.table-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10px; }.traveler-table { width: 100%; border-collapse: collapse; min-width: 650px; }.traveler-table th { color: #9ba8ad; font-size: 9px; font-weight: 500; text-align: right; padding: 9px 10px; background: #f8fafb; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.traveler-table td { color: #586c74; font-size: 10px; padding: 12px 10px; border-bottom: 1px solid #eff3f4; }.traveler-name { color: #304a56 !important; font-weight: 700; }.room-ready { color: #4a9e7e; background: #eaf7f1; }.room-pending { color: #c78b45; background: #fff5e7; }
.module-page { min-height: 420px; margin-top: 19px; }.module-hero { display: flex; align-items: center; gap: 15px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }.module-symbol { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: #438f99; background: #e5f3f4; font-size: 25px; }.module-hero h2 { margin: 0 0 5px; font-size: 20px; }.module-hero p:not(.eyebrow) { margin: 0; color: #95a3a8; font-size: 11px; }.module-placeholder { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #94a3a8; gap: 10px; }.module-placeholder span { color: #5ba9af; font-size: 28px; }.module-placeholder strong { color: #506973; font-size: 13px; }.module-placeholder small { font-size: 10px; }
.package-manager { padding-top: 22px; }.package-manager[hidden] { display: none; }.package-form { padding-bottom: 22px; border-bottom: 1px solid var(--line); }.defined-packages { padding-top: 20px; }.package-card { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid #eff3f4; }.package-card h3 { margin: 0 0 5px; color: #3b5661; font-size: 11px; }.package-card p { margin: 0; color: #9aa8ad; font-size: 9px; }.package-price { color: #4d9da5; font-weight: 700; font-size: 11px; white-space: nowrap; }
.price-toggle { position: relative; display: flex; align-items: center; gap: 9px; min-height: 42px; padding-top: 17px; cursor: pointer; }.price-toggle > span { position: absolute; top: 0; right: 0; }.price-toggle input { position: absolute; opacity: 0; pointer-events: none; }.price-toggle b { width: 42px; height: 23px; border-radius: 20px; background: #d7e1e3; position: relative; transition: .2s; }.price-toggle b:after { content: ''; position: absolute; width: 17px; height: 17px; top: 3px; right: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: .2s; }.price-toggle input:checked + b { background: #4c9fa8; }.price-toggle input:checked + b:after { transform: translateX(-19px); }.price-toggle em { color: #8d9da2; font-size: 10px; font-style: normal; }.asset-manager { padding-top: 22px; }.asset-manager[hidden] { display: none; }.asset-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-top: 20px; }.asset-card { display: flex; gap: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; }.asset-card img, .asset-placeholder { width: 92px; min-height: 92px; object-fit: cover; background: #e8f4f4; }.asset-placeholder { display: grid; place-items: center; color: #55a3ab; font-size: 24px; }.asset-card-content { padding: 13px 8px 13px 4px; }.asset-card h3 { margin: 0 0 5px; color: #405b65; font-size: 11px; }.asset-card p { margin: 0; color: #98a6ab; font-size: 9px; line-height: 1.8; }.asset-card strong { display: block; color: #4c9ea5; font-size: 10px; margin-top: 6px; }.partner-tours-page { min-height: 420px; margin-top: 19px; }.partner-tour-list { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }.partner-tour-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px; border: 1px solid var(--line); border-radius: 9px; }.partner-tour-card h3 { margin: 0 0 6px; color: #3c5761; font-size: 12px; }.partner-tour-card p { margin: 0; color: #9aa7ab; font-size: 10px; }.partner-tour-card .table-status { flex-shrink: 0; }
.full-span { grid-column: 1 / -1; }.hotel-selection { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }.hotel-selection-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }.hotel-selection-heading strong { color: #526b74; font-size: 11px; }.hotel-selection-heading small { color: #9aa8ad; font-size: 9px; }.city-hotels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.city-hotels fieldset { min-width: 0; margin: 0; padding: 12px; border: 1px solid #e5edef; border-radius: 8px; }.city-hotels legend { padding: 0 7px; color: #3f96a0; font-size: 10px; font-weight: 700; }.city-hotels label { display: flex; align-items: center; gap: 8px; padding: 7px 0; color: #657981; font-size: 10px; cursor: pointer; }.city-hotels label + label { border-top: 1px solid #f0f4f5; }.city-hotels input { accent-color: #419aa3; }.price-toggle { position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; cursor: pointer; }.price-toggle > span { grid-column: 2; }.price-toggle input { position: absolute; opacity: 0; }.price-toggle b { grid-row: 1 / span 2; width: 34px; height: 19px; border-radius: 20px; background: #d6e1e3; position: relative; }.price-toggle b:after { content: ''; position: absolute; width: 15px; height: 15px; top: 2px; right: 2px; background: #fff; border-radius: 50%; transition: .2s; }.price-toggle input:checked + b { background: #4c9fa8; }.price-toggle input:checked + b:after { transform: translateX(-15px); }.price-toggle em { grid-column: 2; color: #9aa8ad; font-size: 9px; font-style: normal; }
.workflow-page { min-height: 420px; margin-top: 19px; }.workflow-head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--line); }.workflow-head h2 { margin: 0 0 5px; font-size: 20px; }.workflow-head p:not(.eyebrow) { margin: 0; color: #95a3a8; font-size: 11px; }.workflow-status { padding: 7px 10px; color: #3e929d; background: #e8f5f5; border-radius: 6px; font-size: 10px; }.workflow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 22px 0; }.workflow-step { display: grid; grid-template-columns: 30px 1fr; column-gap: 9px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 9px; color: #89999f; }.workflow-step b { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #edf2f3; font-size: 11px; }.workflow-step span { color: #596e77; font-size: 11px; font-weight: 700; }.workflow-step small { font-size: 9px; margin-top: 3px; }.workflow-step.current { border-color: #9bcacc; background: #f5fbfb; }.workflow-step.current b { color: #fff; background: #4c9fa8; }.workflow-step.current small { color: #4c9fa8; }.request-form { padding-top: 5px; }.request-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 23px; }.request-note { color: #9aa8ad; font-size: 10px; }
.detail-banner { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px; margin-bottom: 20px; border-radius: 8px; color: #477c70; background: #eaf7f0; font-size: 10px; }.detail-banner span { color: #7d9e95; }
.request-waiting { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 9px; }.request-waiting[hidden] { display: none; }.waiting-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: #4c9fa8; font-size: 24px; }.request-waiting h3 { margin: 5px 0 0; color: #304c58; font-size: 17px; }.request-waiting p { margin: 0; color: #8d9da3; font-size: 11px; }.countdown-label { margin-top: 12px; color: #9ba8ad; font-size: 10px; }.countdown { color: #2f8f99; font-size: 34px; letter-spacing: 2px; }.request-waiting small { color: #a0adb1; font-size: 9px; }.request-waiting .secondary-button { margin-top: 12px; }
.room-assignment { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }.assignment-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: #4d6670; font-size: 11px; }.assignment-heading span { color: #4c9ca5; font-size: 10px; }.assignment-row { display: grid; grid-template-columns: 1fr 150px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid #eff3f4; }.assignment-row strong { color: #526a73; font-size: 10px; }.assignment-row small { display: block; color: #a0adb1; font-size: 9px; margin-top: 3px; }.assignment-row select { border: 1px solid #dce6e8; border-radius: 6px; padding: 7px; color: #61767e; background: #fff; font-size: 10px; }.assignment-row select.invalid { border-color: #df7d72; background: #fff4f2; }.upload-zone.dragging { background: #e7f7f7; border-color: #4c9fa8; }
.approval-page { min-height: 420px; margin-top: 19px; }.approval-list { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }.approval-card { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 9px; }.approval-card h3 { margin: 0 0 5px; color: #38535e; font-size: 12px; }.approval-card p { margin: 0; color: #94a3a8; font-size: 10px; }.approval-meta { display: flex; gap: 16px; margin-top: 10px; color: #71858d; font-size: 9px; }.approval-actions { display: flex; gap: 8px; }.approve-button, .reject-button { padding: 9px 12px; border-radius: 6px; font-size: 10px; }.approve-button { color: #fff; background: #4d9e91; }.reject-button { color: #c27168; background: #fff1ef; }.approval-empty { padding: 40px; text-align: center; color: #9ba8ad; font-size: 11px; }
.approval-subheading { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.reports-page { min-height: 420px; margin-top: 19px; }
.users-page { min-height: 420px; margin-top: 19px; }
.user-form { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: #f8fbfb; }
.user-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.user-card { display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.user-card h3 { margin: 0 0 5px; color: #38535e; font-size: 12px; }
.user-card p { margin: 0; color: #94a3a8; font-size: 10px; line-height: 1.9; }
.user-card-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.user-card-actions button { padding: 8px 10px; border-radius: 6px; color: #3f8f99; background: #eaf5f5; font-size: 9px; }
.user-card-actions .send-sms { color: #fff; background: #4d9e91; }
@media (max-width: 700px) { .user-card { grid-template-columns: 1fr; }.user-card-actions { justify-content: flex-start; } }
.report-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 20px 0; }
.report-stat { padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfb; }
.report-stat strong, .report-stat span { display: block; }
.report-stat strong { color: #2f8f99; font-size: 22px; }
.report-stat span { color: #71858d; font-size: 10px; margin-top: 5px; }
.report-table-wrap { overflow-x: auto; }
.report-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.report-table th, .report-table td { padding: 11px; border-bottom: 1px solid #edf2f3; text-align: right; font-size: 10px; }
.report-table th { color: #8b9ba1; background: #f8fafb; font-weight: 500; }
.report-table td { color: #506771; }
@media (max-width: 700px) { .report-stats { grid-template-columns: 1fr 1fr; } }
.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(9, 30, 42, .5); opacity: 0; visibility: hidden; transition: .2s; z-index: 10; }
.modal-backdrop.open { opacity: 1; visibility: visible; }
.tour-modal { width: min(570px, 100%); background: #fff; border-radius: 14px; padding: 26px; box-shadow: 0 24px 70px rgba(5, 28, 42, .25); transform: translateY(12px); transition: .2s; }
.modal-backdrop.open .tour-modal { transform: translateY(0); }
.modal-heading { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 20px; }.modal-heading h2 { margin: 0 0 5px; font-size: 18px; }.modal-heading p:not(.eyebrow) { color: var(--muted); margin: 0; font-size: 11px; }.modal-close { width: 30px; height: 30px; border-radius: 7px; color: #8a999f; background: #f3f7f8; font-size: 21px; line-height: 1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.form-grid label, .full-field { display: block; }.form-grid label > span, .full-field > span { display: block; color: #647780; font-size: 10px; margin-bottom: 6px; }.form-grid input, .form-grid select, .full-field textarea { width: 100%; border: 1px solid #dce6e8; border-radius: 7px; background: #fbfcfc; color: var(--ink); outline: 0; padding: 10px; font-size: 11px; }.form-grid input:focus, .form-grid select:focus, .full-field textarea:focus { border-color: #54a8af; box-shadow: 0 0 0 3px rgba(84,168,175,.1); }.full-field { margin-top: 15px; }.full-field textarea { resize: vertical; }.modal-actions { display: flex; justify-content: flex-start; gap: 9px; margin-top: 20px; }.secondary-button { padding: 11px 16px; background: #f1f5f6; color: #708188; border-radius: 7px; }
[dir="ltr"] .nav-item.active { box-shadow: inset -3px 0 #4eb2bd; } [dir="ltr"] .nav-count { margin-left: auto; margin-right: 0; } [dir="ltr"] .support-card, [dir="ltr"] .profile-mini { direction: ltr; } [dir="ltr"] .more-button { margin-left: auto; margin-right: 0; } [dir="ltr"] .arrival-line:after { right: auto; left: 1px; } [dir="ltr"] .arrival-info i { padding: 0 4px; } [dir="ltr"] .donut-wrap { direction: ltr; }
@media (max-width: 1100px) { .sidebar { width: 220px; }.topbar, .page-body { padding-left: 25px; padding-right: 25px; }.stats-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-grid, .lower-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .sidebar { position: fixed; z-index: 4; inset: 0 auto 0 0; transform: translateX(105%); transition: .25s; width: 258px; }.sidebar.open { transform: translateX(0); }.topbar { padding: 0 16px; height: 68px; }.mobile-menu { display: block; }.breadcrumb { display: none; }.topbar-actions { gap: 11px; }.quick-search { width: 34px; padding: 0 8px; border: 0; background: transparent; }.quick-search input { display: none; }.top-profile-copy, .chevron { display: none; }.page-body { padding: 24px 16px 18px; }.welcome-row { align-items: flex-start; flex-direction: column; gap: 18px; }.welcome-row .primary-button { width: 100%; justify-content: center; }.stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.stat-card { min-height: 113px; padding: 13px; }.stat-icon { width: 31px; height: 31px; font-size: 16px; }.stat-content strong { font-size: 20px; }.stat-content > span { font-size: 10px; }.stat-spark { display: none; }.panel { padding: 17px 14px; }.arrival-item { gap: 7px; }.arrival-time { width: 48px; }.status-badge { display: none; }.row-menu { margin-right: 0; }.donut-wrap { gap: 8px; }.donut { width: 120px; height: 120px; }.donut:after { width: 82px; height: 82px; }.legend { min-width: 103px; gap: 13px; }.page-footer { gap: 8px; flex-wrap: wrap; }.page-footer span:last-child { width: 100%; }.form-grid { grid-template-columns: 1fr; }.tours-heading, .travelers-heading { align-items: flex-start; flex-direction: column; gap: 12px; }.table-actions, .traveler-toolbar { width: 100%; justify-content: space-between; }.table-search { width: 190px; }.upload-zone { align-items: flex-start; flex-wrap: wrap; }.upload-zone div { min-width: calc(100% - 55px); }.upload-zone .secondary-button { margin-right: 48px; } }
@media (max-width: 700px) { .workflow-steps { grid-template-columns: 1fr; }.workflow-head { gap: 12px; flex-direction: column; }.request-actions { align-items: flex-start; flex-direction: column; }.request-actions .primary-button { width: 100%; justify-content: center; } }
@media (max-width: 700px) { .city-hotels { grid-template-columns: 1fr; }.hotel-selection-heading { align-items: flex-start; flex-direction: column; gap: 5px; } }
@media (max-width: 700px) { .asset-list { grid-template-columns: 1fr; }.partner-tour-card { align-items: flex-start; flex-direction: column; } }
@media (max-width: 700px) { .traveler-portal-grid { grid-template-columns: 1fr; }.exchange-section { grid-column: auto; }.traveler-activities { grid-template-columns: 1fr; }.itinerary-item { grid-template-columns: 58px 12px 1fr; } }

@media (max-width: 700px) {
  html, body { width: 100%; min-width: 0; overflow-x: hidden; }
  .app-shell { display: block; min-height: 100vh; }
  html[dir="rtl"] .sidebar { right: 0; left: auto; transform: translateX(105%); }
  html[dir="ltr"] .sidebar { left: 0; right: auto; transform: translateX(-105%); }
  .sidebar.open { transform: translateX(0) !important; box-shadow: 0 0 35px rgba(5,25,37,.35); }
  .sidebar { height: 100dvh; max-height: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-top: 54px; }
  .mobile-sidebar-close { display: grid; place-items: center; position: absolute; top: 12px; left: 12px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 8px; color: #fff; background: rgba(255,255,255,.12); font-size: 24px; line-height: 1; }
  html[dir="rtl"] .mobile-sidebar-close { left: auto; right: 12px; }
  body.menu-open { overflow: hidden; }
  .content { width: 100%; min-width: 0; }
  .topbar { width: 100%; box-sizing: border-box; }
  .topbar-actions { min-width: 0; }
  .page-body { width: 100%; box-sizing: border-box; }
  .panel, .workflow-page, .operations-portal-page, .module-page { width: 100%; box-sizing: border-box; }
  .workflow-head, .module-hero { align-items: flex-start; }
  .workflow-head h2, .module-hero h2 { font-size: 18px; line-height: 1.6; }
  .workflow-head p:not(.eyebrow), .module-hero p:not(.eyebrow) { line-height: 1.8; }
  .workflow-steps { gap: 8px; }
  .workflow-step { min-width: 0; padding: 11px; }
  .workflow-step span { line-height: 1.7; }
  .operation-card, .partner-tour-card { align-items: stretch; }
  .operation-card-actions, .partner-tour-card-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .operation-card-actions button, .partner-tour-card-actions button { max-width: 100%; }
  .tourism-cover { min-height: 0; }
  .tourism-route { flex-wrap: wrap; }
  .login-screen { overflow-y: auto; align-items: start; padding: 14px; }
  .login-card { margin: auto; padding: 23px 18px; }
  .demo-accounts { line-height: 1.8; }
  .modal { max-height: calc(100vh - 20px); overflow-y: auto; }
}

.traveler-portal-page { min-height: 420px; margin-top: 19px; }
.traveler-portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; padding-top: 20px; }
.traveler-section { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: #fbfdfd; }
.exchange-section { grid-column: 1 / -1; }
.itinerary-list { display: flex; flex-direction: column; }
.itinerary-item { display: grid; grid-template-columns: 72px 12px 1fr; gap: 10px; min-height: 64px; align-items: start; }
.itinerary-time { color: #3f96a0; font-size: 10px; font-weight: 700; }
.itinerary-dot { width: 10px; height: 10px; margin-top: 3px; border: 2px solid #52a8ae; border-radius: 50%; position: relative; }
.itinerary-item:not(:last-child) .itinerary-dot::after { content: ''; position: absolute; top: 8px; right: 2px; width: 2px; height: 59px; background: #dcebed; }
.itinerary-copy strong, .itinerary-copy small { display: block; }
.itinerary-copy strong { color: #415b65; font-size: 11px; }
.itinerary-copy small { color: #98a6ab; font-size: 9px; line-height: 1.8; margin-top: 3px; }
.traveler-activities { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.traveler-activity { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.traveler-activity img, .traveler-activity .asset-placeholder { width: 100%; height: 86px; min-height: 86px; object-fit: cover; }
.traveler-activity-content { padding: 9px; }
.traveler-activity h3 { margin: 0 0 4px; color: #405b65; font-size: 10px; }
.traveler-activity p { margin: 0; color: #98a6ab; font-size: 9px; line-height: 1.6; }
.traveler-activity-footer { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 8px; }
.traveler-activity-footer strong { color: #4c9ea5; font-size: 9px; }
.reserve-button { padding: 6px 8px; color: #fff; background: #4c9fa8; border-radius: 5px; font-size: 9px; }
.reserve-button.reserved { color: #4a9e7e; background: #eaf7f1; }
.exchange-status { margin-top: 15px; padding: 11px 13px; border-radius: 7px; color: #477c70; background: #eaf7f0; font-size: 10px; }
.exchange-history { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.exchange-history:empty { display: none; }
.exchange-history-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #61767e; font-size: 10px; }
.exchange-history-item small { display: block; color: #9aa8ad; font-size: 9px; margin-top: 3px; }
.exchange-rates-card { margin-bottom: 18px; padding: 13px 15px; border: 1px solid #dcebed; border-radius: 8px; background: #f5fbfb; }
.exchange-rates-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #42616a; font-size: 11px; }
.exchange-rates-heading small { color: #94a4a9; font-size: 9px; }
.exchange-rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.exchange-rate-item { padding: 9px; border-radius: 6px; background: #fff; border: 1px solid #e8f0f1; }
.exchange-rate-item strong, .exchange-rate-item span { display: block; }
.exchange-rate-item strong { color: #3f8f99; font-size: 10px; }
.exchange-rate-item span { margin-top: 4px; color: #647980; font-size: 10px; }
@media (max-width: 700px) { .exchange-rates { grid-template-columns: 1fr; } }
.operations-portal-page { min-height: 420px; margin-top: 19px; }
.rate-editor { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: #f8fbfb; }
.rate-editor .panel-heading { margin-bottom: 14px; }
.operations-list { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.operation-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.operation-card h3 { margin: 0 0 6px; color: #38535e; font-size: 12px; }
.operation-card p { margin: 0; color: #94a3a8; font-size: 10px; line-height: 1.9; }
.operation-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.operation-confirm { padding: 9px 12px; color: #fff; background: #4d9e91; border-radius: 6px; font-size: 10px; }
.operation-confirm.done { color: #4a9e7e; background: #eaf7f1; }
.report-action { padding: 9px 12px; color: #3f8f99; background: #eaf5f5; white-space: nowrap; font-size: 10px; }
.portal-head-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.pdf-button { white-space: nowrap; font-size: 10px; }
@media (max-width: 700px) { .portal-head-actions { justify-content: flex-start; } }
.tourism-cover { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 118px; margin-bottom: 22px; padding: 22px 28px; overflow: hidden; border: 1px solid rgba(91,169,177,.24); border-radius: 16px; color: #fff; background: linear-gradient(115deg, #0d2738 0%, #17485c 55%, #2f94a2 100%); box-shadow: 0 14px 30px rgba(13,39,56,.14); position: relative; }
.tourism-cover::before { content: ''; position: absolute; width: 270px; height: 270px; left: 18%; top: -180px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 22px rgba(255,255,255,.06), 0 0 0 44px rgba(255,255,255,.035); }
.tourism-cover::after { content: '✈'; position: absolute; right: 43%; top: 21px; color: rgba(255,255,255,.2); font-size: 44px; transform: rotate(-18deg); }
.tourism-cover-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.tourism-cover-copy .eyebrow { margin: 0; color: #a9dadd; letter-spacing: 1px; }
.tourism-cover-copy strong { font-size: 22px; letter-spacing: -.04em; }
.tourism-cover-copy small { color: #c5e1e3; font-size: 10px; }
.tourism-route { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; color: #e9f7f7; font-size: 11px; white-space: nowrap; }
.tourism-route i { color: #f0bf7c; font-style: normal; font-size: 20px; }
.tourism-route b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #0d2738; background: #f4c681; font-size: 19px; }
@media (max-width: 700px) { .tourism-cover { align-items: flex-start; flex-direction: column; padding: 18px; }.tourism-cover-copy strong { font-size: 18px; }.tourism-route { width: 100%; justify-content: space-between; gap: 6px; font-size: 9px; }.tourism-cover::after { right: 12%; top: 15px; } }

/* Branded tourism login */
.login-screen { overflow: hidden; }
.login-screen::before, .login-screen::after { content: ''; position: absolute; border: 1px solid rgba(168,222,224,.16); border-radius: 50%; pointer-events: none; }
.login-screen::before { width: 620px; height: 620px; left: -250px; top: -280px; box-shadow: 0 0 0 28px rgba(168,222,224,.04), 0 0 0 56px rgba(168,222,224,.025); }
.login-screen::after { width: 460px; height: 460px; right: -180px; bottom: -180px; box-shadow: 0 0 0 24px rgba(229,179,111,.06), 0 0 0 48px rgba(229,179,111,.035); }
.login-card { position: relative; overflow: hidden; border: 1px solid rgba(125,190,195,.22); }
.login-card::before { display: none; }
.login-logo { margin-top: 26px; padding: 8px; border: 1px solid #dcebed; border-radius: 18px; box-shadow: 0 10px 24px rgba(13,39,56,.08); }
.login-tourism-visual { display: flex; align-items: center; justify-content: center; gap: 0; margin: -3px auto 15px; color: #2f94a2; }
.login-tourism-visual span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #b8dcde; border-radius: 50%; background: #f2fbfb; font-size: 13px; }
.login-tourism-visual i { width: 24px; border-top: 1px dashed #a8cfd1; }
.login-promise { margin: 0 0 19px; padding: 9px 12px; border-radius: 7px; color: #52727b; background: linear-gradient(90deg, #effafa, #fff8ee); text-align: center; font-size: 10px; }
.price-toggle { min-height: 58px; padding: 8px 11px; border: 1px solid #dce6e8; border-radius: 8px; background: #f8fbfb; }
.price-toggle > span { position: static; grid-column: 2; color: #526d76; font-size: 10px; }
.price-toggle em { color: #b16f3d; font-size: 10px; font-weight: 600; }
.price-toggle input:not(:checked) ~ em { color: #9aa8ad; }
.price-toggle input:checked ~ em::before { content: '✓ '; color: #4c9fa8; }
.price-toggle input:not(:checked) ~ em::before { content: '× '; color: #d27c70; }

/* Tourism visual language */
.page-body { position: relative; isolation: isolate; }
.page-body::before { content: '✈  ·  ◇  ·  ⌂  ·  ♧'; position: fixed; z-index: -1; top: 105px; left: 38px; color: rgba(47,148,162,.06); font-size: 48px; letter-spacing: 18px; transform: rotate(-8deg); pointer-events: none; }
.page-body::after { content: ''; position: fixed; z-index: -1; right: 0; bottom: 0; width: 54vw; height: 43vh; opacity: .42; background: radial-gradient(circle at 20% 20%, rgba(47,148,162,.09) 0 2px, transparent 3px) 0 0 / 28px 28px, linear-gradient(145deg, transparent 48%, rgba(229,179,111,.08) 49% 50%, transparent 51%); pointer-events: none; }
.panel { position: relative; overflow: hidden; }
.panel::after { content: ''; position: absolute; width: 150px; height: 150px; left: -75px; bottom: -78px; border: 1px solid rgba(47,148,162,.12); border-radius: 50%; box-shadow: 0 0 0 18px rgba(47,148,162,.035), 0 0 0 36px rgba(47,148,162,.025); pointer-events: none; }
.traveler-portal-page, .operations-portal-page, .reports-page, .users-page { background: linear-gradient(135deg, #fff 0%, #fff 72%, #f1f9f9 100%); }
.traveler-portal-page .workflow-head::before { content: '🧳'; }
.hotelPortalPage .workflow-head::before, #hotelPortalPage .workflow-head::before { content: '⌂'; }
.guidePortalPage .workflow-head::before, #guidePortalPage .workflow-head::before { content: '✦'; }
.receptionPortalPage .workflow-head::before, #receptionPortalPage .workflow-head::before { content: '✈'; }
.activityStaffPortalPage .workflow-head::before, #activityStaffPortalPage .workflow-head::before { content: '◇'; }
.financePortalPage .workflow-head::before, #financePortalPage .workflow-head::before { content: '▣'; }
.reports-page .workflow-head::before { content: '▤'; }
.users-page .workflow-head::before { content: '♙'; }
.traveler-portal-page .workflow-head::before, .operations-portal-page .workflow-head::before, .reports-page .workflow-head::before, .users-page .workflow-head::before { display: grid; place-items: center; float: right; width: 48px; height: 48px; margin-left: 13px; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #3fa2ad, #1e7281); font-size: 24px; box-shadow: 0 8px 16px rgba(47,148,162,.18); }
.stat-card, .asset-card, .operation-card, .partner-tour-card { transition: transform .2s, box-shadow .2s; }
.stat-card:hover, .asset-card:hover, .operation-card:hover, .partner-tour-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(27,58,72,.1); }
.asset-placeholder { background: linear-gradient(135deg, #e2f3f4, #f8efe2); }

/* Final mobile layout pass */
@media (max-width: 700px) {
  html {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-text-size-adjust: 100%;
  }

  body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .app-shell,
  .content,
  .page-body {
    min-height: 100dvh;
  }

  .content {
    overflow: visible;
  }

  .page-body {
    overflow: visible;
    padding-bottom: 32px;
  }

  .topbar {
    position: relative;
    z-index: 3;
  }

  .sidebar {
    z-index: 40;
    top: 0;
    bottom: 0;
    height: 100dvh;
    max-height: none;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  .mobile-sidebar-close {
    position: fixed;
    z-index: 42;
  }

  .main-nav {
    padding-bottom: 18px;
  }

  .workflow-page,
  .operations-portal-page,
  .module-page,
  .traveler-portal-page,
  .partner-tours-page,
  .reports-page,
  .users-page {
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  .workflow-head,
  .module-hero,
  .panel-heading,
  .hotel-selection-heading,
  .request-actions,
  .portal-head-actions {
    min-width: 0;
  }

  .workflow-head h2,
  .workflow-head p,
  .module-hero h2,
  .module-hero p,
  .panel-heading h2,
  .panel-heading p {
    overflow-wrap: anywhere;
  }

  .form-grid,
  .city-hotels,
  .asset-list,
  .traveler-portal-grid,
  .traveler-activities {
    width: 100%;
    min-width: 0;
  }

  .form-grid > *,
  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .full-field,
  .full-field textarea {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .request-form,
  .package-form,
  .user-form,
  .rate-editor {
    overflow: visible;
  }

  .upload-zone {
    min-width: 0;
  }

  .upload-zone .secondary-button {
    margin-right: 0;
  }

  .assignment-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .assignment-row select {
    width: 100%;
  }

  .table-scroll,
  .report-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .modal-backdrop {
    display: block;
    padding: 10px;
    pointer-events: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .modal-backdrop.open {
    pointer-events: auto;
  }

  .tour-modal {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 20px);
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .modal-heading {
    position: sticky;
    top: -26px;
    z-index: 1;
    padding-top: 6px;
    background: #fff;
  }

  .modal-actions {
    position: sticky;
    bottom: -26px;
    z-index: 1;
    padding: 12px 0 6px;
    background: #fff;
  }

  .modal-actions button {
    flex: 1;
    min-width: 0;
  }

  button,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  .primary-button,
  .secondary-button,
  .report-action,
  .operation-confirm,
  .reserve-button {
    min-height: 42px;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  textarea {
    min-height: 96px;
  }

  .login-screen {
    position: fixed;
    inset: 0;
    display: block;
    height: 100dvh;
    max-height: none;
    padding: 12px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .login-card {
    width: min(410px, 100%);
    min-height: min-content;
    margin: 0 auto 20px;
    box-sizing: border-box;
  }

  .login-language {
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
  }

  .login-logo {
    margin-top: 12px;
  }

  .page-footer {
    padding-bottom: 16px;
  }
}

/* Mobile overflow and touch safety */
@media (max-width: 700px) {
  html, body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    width: min(86vw, 310px);
    height: 100dvh;
    max-height: 100dvh;
    padding-bottom: 20px;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  .sidebar .brand,
  .sidebar .main-nav,
  .sidebar .sidebar-bottom {
    flex: 0 0 auto;
  }

  .sidebar .sidebar-bottom {
    margin-top: 18px;
  }

  .mobile-sidebar-close {
    position: sticky;
    top: 12px;
    align-self: flex-start;
    flex: 0 0 34px;
  }

  html[dir="rtl"] .mobile-sidebar-close {
    align-self: flex-end;
  }

  .content,
  .page-body,
  .panel,
  .workflow-page,
  .module-page,
  .partner-tours-page,
  .traveler-portal-page,
  .operations-portal-page,
  .reports-page,
  .users-page,
  .form-grid,
  .form-grid > *,
  .full-field,
  .request-actions,
  .workflow-head,
  .module-hero,
  .panel-heading,
  .traveler-toolbar,
  .table-actions,
  .upload-zone,
  .partner-tour-card,
  .approval-card,
  .user-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .form-grid input,
  .form-grid select,
  .full-field textarea,
  .request-actions > *,
  .upload-zone > *,
  .partner-tour-card-actions,
  .approval-actions,
  .user-card-actions {
    max-width: 100%;
  }

  .request-actions,
  .approval-actions,
  .user-card-actions {
    flex-wrap: wrap;
  }

  .modal-backdrop {
    align-items: flex-start;
    justify-items: stretch;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .tour-modal {
    width: 100%;
    max-height: none;
    min-height: 0;
    margin: 0;
    overflow: visible;
  }

  .tour-modal form {
    min-width: 0;
  }

  .tour-modal .modal-heading,
  .tour-modal .modal-actions {
    position: static;
  }

  .login-screen {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* iOS Safari touch scrolling */
@supports (-webkit-touch-callout: none) {
  html,
  body {
    min-height: -webkit-fill-available;
    overflow-x: hidden;
  }

  body {
    position: relative;
  }

  .app-shell,
  .content,
  .page-body {
    min-height: -webkit-fill-available;
  }

  .sidebar {
    height: -webkit-fill-available;
    max-height: -webkit-fill-available;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .login-screen {
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .modal-backdrop {
    height: -webkit-fill-available;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  input,
  select,
  textarea,
  button {
    -webkit-appearance: none;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}