:root {
  --ink: #172033;
  --muted: #667085;
  --line: #e4e8ef;
  --soft: #f5f7fa;
  --blue: #1d5fd1;
  --blue-dark: #123d83;
  --blue-soft: #edf4ff;
  --green: #16835f;
  --green-soft: #eaf8f2;
  --orange: #c56512;
  --orange-soft: #fff4e8;
  --red: #c43d4f;
  --red-soft: #fff0f2;
  --shadow: 0 12px 30px rgba(26, 42, 68, .08);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #eef1f5;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-height: 100vh; background: #eef1f5; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.demo-ribbon {
  position: fixed; right: -47px; top: 24px; z-index: 80; width: 200px;
  padding: 7px 0; transform: rotate(38deg); text-align: center;
  background: #f0b429; color: #4c3600; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; box-shadow: 0 3px 12px rgba(0,0,0,.12);
}

.app-shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; z-index: 30; display: flex; flex-direction: column;
  padding: 24px 14px 16px; background: #101b33; color: #dce5f5;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 27px; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(145deg,#3278eb,#73a5ff); color: white; font-weight: 900; }
.brand strong { display: block; font-size: 14px; letter-spacing: .04em; color: white; }
.brand span { display: block; margin-top: 2px; font-size: 11px; color: #8da1c3; letter-spacing: .14em; }
.main-nav { display: grid; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 9px 11px;
  border: 0; border-radius: 9px; background: transparent; color: #aebbd1; text-align: left; font-size: 13px;
}
.nav-item > span { width: 20px; color: #7f93b4; text-align: center; font-size: 17px; }
.nav-item em { margin-left: auto; min-width: 23px; padding: 2px 6px; border-radius: 12px; background: #263650; color: #dce5f5; font-style: normal; font-size: 10px; text-align: center; }
.nav-item em.warn { background: #6d342d; color: #ffd8ca; }
.nav-item:hover { background: #182844; color: white; }
.nav-item.active { background: linear-gradient(100deg,#224c91,#1f3e74); color: white; box-shadow: inset 3px 0 #68a1ff; }
.nav-item.active > span { color: #8bb7ff; }
.sidebar-bottom { margin-top: auto; }
.profile-card { display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 9px; margin-top: 12px; padding: 12px 8px 0; border-top: 1px solid #26344d; }
.profile-card .avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e8b85d; color: #402b00; font-size: 12px; font-weight: 800; }
.profile-card strong, .profile-card span { display: block; }
.profile-card strong { color: #fff; font-size: 12px; }
.profile-card span { margin-top: 2px; color: #8193b0; font-size: 10px; }
.profile-card button { border: 0; background: transparent; color: #8295b4; }

.main-area { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 25; display: grid; grid-template-columns: minmax(175px, 1fr) minmax(280px, 520px) auto;
  align-items: center; gap: 22px; min-height: 78px; padding: 12px 30px; background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(12px);
}
.page-heading span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.page-heading h1 { margin: 3px 0 0; font-size: 20px; line-height: 1.15; }
.global-search { display: flex; align-items: center; gap: 9px; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #dce2ea; border-radius: 10px; background: #f8f9fb; }
.global-search:focus-within { border-color: #8fb4ee; box-shadow: 0 0 0 3px #e8f1ff; background: white; }
.global-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.global-search kbd { padding: 3px 6px; border: 1px solid #d7dce5; border-radius: 5px; background: white; color: #7a8597; font-size: 9px; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.online { display: grid; grid-template-columns: 7px auto; column-gap: 5px; align-items: center; padding-right: 8px; }
.online i { width: 7px; height: 7px; border-radius: 50%; background: #2cb67d; box-shadow: 0 0 0 3px #dcf5eb; }
.online strong { font-size: 12px; }
.online span { grid-column: 2; color: var(--muted); font-size: 9px; }
.icon-button { position: relative; width: 40px; height: 40px; border: 1px solid #dde3ec; border-radius: 10px; background: white; color: #42526b; font-size: 20px; }
.icon-button b { position: absolute; right: -3px; top: -4px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--red); color: white; font-size: 9px; }
.primary-button, .secondary-button { min-height: 40px; padding: 0 15px; border-radius: 9px; font-weight: 700; font-size: 12px; }
.primary-button { border: 0; background: linear-gradient(135deg,#2365d5,#174ba3); color: white; box-shadow: 0 6px 14px rgba(29,95,209,.22); }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(29,95,209,.28); }
.secondary-button { border: 1px solid #d6dde8; background: white; color: #344054; }
.mobile-menu { display: none; }

.content { padding: 25px 30px 42px; }
.page { display: none; }
.page.active { display: block; animation: pageIn .25s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.welcome-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 2px 0 18px; }
.welcome-row h2 { margin: 0 0 4px; font-size: 23px; }
.welcome-row p { margin: 0; color: var(--muted); font-size: 13px; }
.quick-date { min-width: 240px; padding: 11px 14px; border-left: 3px solid #f0b429; background: white; border-radius: 5px 10px 10px 5px; box-shadow: var(--shadow); }
.quick-date span, .quick-date small { display: block; color: var(--muted); font-size: 9px; }
.quick-date strong { display: block; margin: 3px 0; font-size: 12px; }

.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-bottom: 16px; }
.metric-card { position: relative; overflow: hidden; padding: 17px 17px 15px; border: 1px solid #e1e6ed; border-radius: 13px; background: white; box-shadow: 0 4px 16px rgba(33,48,74,.045); }
.metric-card::after { content:""; position: absolute; right: -18px; top: -22px; width: 78px; height: 78px; border-radius: 50%; background: var(--tint,#eff5ff); }
.metric-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.metric-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--tint,#eff5ff); color: var(--accent,var(--blue)); font-size: 15px; }
.metric-value { margin: 9px 0 4px; font-size: 25px; font-weight: 800; letter-spacing: -.03em; }
.metric-note { display: flex; gap: 5px; color: var(--muted); font-size: 10px; }
.metric-note strong { color: var(--accent,var(--green)); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0,2.1fr) minmax(280px,.9fr); gap: 16px; }
.lower-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; margin-top: 16px; }
.panel { border: 1px solid #e1e6ed; border-radius: 13px; background: white; box-shadow: 0 5px 18px rgba(33,48,74,.045); }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 65px; padding: 14px 17px; border-bottom: 1px solid #edf0f4; }
.panel-header h3 { margin: 2px 0 0; font-size: 15px; }
.section-kicker { color: var(--blue); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.section-kicker.danger { color: var(--red); }
.toolbar, .filter-group, .view-switch { display: flex; align-items: center; gap: 6px; }
.chip { min-height: 30px; padding: 0 10px; border: 1px solid #e0e5ec; border-radius: 7px; background: white; color: #596579; font-size: 10px; }
.chip.active { border-color: #bdd1f5; background: var(--blue-soft); color: var(--blue-dark); font-weight: 700; }
.text-button { border: 0; background: transparent; color: var(--blue); font-size: 10px; font-weight: 700; }
.count-badge { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: var(--red-soft); color: var(--red); font-size: 11px; font-weight: 800; }

.table-wrap { overflow-x: auto; }
.trip-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.trip-table th { padding: 9px 12px; background: #fafbfc; color: #7a8596; font-size: 9px; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .04em; }
.trip-table td { padding: 12px; border-top: 1px solid #edf0f4; font-size: 11px; vertical-align: middle; }
.trip-table tbody tr { transition: background .15s; cursor: pointer; }
.trip-table tbody tr:hover { background: #f7faff; }
.trip-id { color: var(--blue-dark); font-weight: 800; }
.trip-id small { display: block; margin-top: 3px; color: #8a95a5; font-weight: 500; }
.route { min-width: 150px; font-weight: 650; }
.route small { display: block; margin-top: 3px; color: #8a95a5; font-weight: 400; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 15px; background: var(--blue-soft); color: var(--blue-dark); font-size: 9px; font-weight: 750; white-space: nowrap; }
.status-pill::before { content:""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill.green { background: var(--green-soft); color: var(--green); }
.status-pill.orange { background: var(--orange-soft); color: var(--orange); }
.status-pill.red { background: var(--red-soft); color: var(--red); }
.control-ok { color: var(--green); font-weight: 750; }
.control-warn { color: var(--orange); font-weight: 750; }
.control-danger { color: var(--red); font-weight: 750; }

.attention-list { padding: 6px 13px 13px; }
.attention-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: start; padding: 12px 3px; border-bottom: 1px solid #edf0f4; }
.attention-item:last-child { border: 0; }
.attention-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--orange-soft); color: var(--orange); font-size: 14px; }
.attention-icon.red { background: var(--red-soft); color: var(--red); }
.attention-item strong { display: block; font-size: 11px; }
.attention-item p { margin: 3px 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.attention-item time { color: #9aa3b1; font-size: 9px; }
.attention-item button { border: 0; background: transparent; color: var(--blue); font-size: 9px; font-weight: 700; }

.money-total { color: var(--green); font-size: 14px; }
.cash-chart { display: flex; align-items: end; gap: 11px; height: 155px; padding: 20px 20px 14px; }
.bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: end; }
.bar { width: min(32px,70%); height: var(--height); min-height: 8px; border-radius: 6px 6px 2px 2px; background: linear-gradient(#4e86e5,#245dbd); }
.bar-group.highlight .bar { background: linear-gradient(#43b68a,#17805e); }
.bar-group span { color: #7c8798; font-size: 9px; }
.manager-list { padding: 10px 17px 16px; }
.manager-row { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; }
.mini-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #edf3fc; color: var(--blue-dark); font-size: 10px; font-weight: 800; }
.manager-info strong { display: block; font-size: 10px; }
.progress { height: 5px; margin-top: 5px; overflow: hidden; border-radius: 3px; background: #edf0f4; }
.progress i { display: block; height: 100%; width: var(--progress); background: var(--color,var(--blue)); }
.manager-row > strong { font-size: 10px; }

.page-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 12px; }
.view-switch { padding: 3px; border: 1px solid #dce2ea; border-radius: 8px; background: white; }
.view-switch button { padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 10px; }
.view-switch button.active { background: #eaf2ff; color: var(--blue-dark); font-weight: 750; }
.kanban { display: grid; grid-template-columns: repeat(4,minmax(230px,1fr)); gap: 12px; overflow-x: auto; }
.kanban-column { min-width: 230px; padding: 10px; border: 1px solid #e0e5ec; border-radius: 12px; background: #f7f8fa; }
.kanban-head { display: flex; justify-content: space-between; align-items: center; margin: 2px 2px 9px; }
.kanban-head strong { font-size: 11px; }
.kanban-head span { padding: 2px 7px; border-radius: 12px; background: white; color: var(--muted); font-size: 9px; }
.kanban-card { margin-bottom: 8px; padding: 12px; border: 1px solid #e2e6ec; border-radius: 10px; background: white; box-shadow: 0 3px 10px rgba(20,38,68,.04); cursor: pointer; }
.kanban-card:hover { border-color: #a9c3ec; }
.kanban-card strong { font-size: 11px; }
.kanban-card p { margin: 7px 0; font-size: 10px; font-weight: 650; }
.kanban-card small { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }

.section-summary { display: grid; gap: 15px; }
.summary-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px; border-radius: 14px; background: linear-gradient(115deg,#173b75,#245fb3); color: white; box-shadow: var(--shadow); }
.summary-hero h2 { margin: 0 0 5px; font-size: 22px; }
.summary-hero p { margin: 0; max-width: 670px; color: #d5e2f7; font-size: 12px; }
.hero-stat { min-width: 130px; text-align: right; }
.hero-stat strong { display: block; font-size: 26px; }
.hero-stat span { color: #c8d8f1; font-size: 10px; }
.summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.summary-card { padding: 17px; border: 1px solid #e1e6ed; border-radius: 12px; background: white; }
.summary-card span { color: var(--muted); font-size: 10px; }
.summary-card strong { display: block; margin: 6px 0 4px; font-size: 22px; }
.summary-card small { color: var(--green); font-size: 9px; }
.list-panel { padding: 0 17px 12px; }
.list-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 15px; align-items: center; padding: 14px 2px; border-bottom: 1px solid #edf0f4; font-size: 11px; }
.list-row:last-child { border: 0; }
.list-row strong small { display: block; margin-top: 3px; color: var(--muted); font-weight: 400; }
.analytics-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 15px; }
.big-number { padding: 22px; }
.big-number strong { display: block; font-size: 38px; color: var(--blue-dark); }
.big-number p { color: var(--muted); font-size: 11px; }
.impact-bars { padding: 18px; }
.impact-row { margin-bottom: 16px; }
.impact-row div { display: flex; justify-content: space-between; font-size: 10px; }
.impact-row .progress { height: 8px; }

.side-panel { position: fixed; right: -390px; top: 0; z-index: 90; width: 370px; max-width: 94vw; height: 100vh; background: white; box-shadow: -15px 0 40px rgba(20,34,58,.18); transition: right .25s ease; }
.side-panel.open { right: 0; }
.side-panel-header { display: flex; justify-content: space-between; padding: 24px 20px 15px; border-bottom: 1px solid var(--line); }
.side-panel-header span { color: var(--muted); font-size: 10px; }
.side-panel-header h3 { margin: 3px 0 0; }
.side-panel-header button, .modal-close { border: 0; background: transparent; color: #6f7b8d; font-size: 25px; }
.notifications { padding: 8px 17px; }
.notification { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid #edf0f4; }
.notification i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font-style: normal; }
.notification strong { display: block; font-size: 11px; }
.notification p { margin: 4px 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.notification time { color: #9aa4b3; font-size: 9px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 24px; background: rgba(9,18,35,.48); backdrop-filter: blur(3px); }
.modal-backdrop.open { display: grid; }
.modal { width: min(920px,96vw); max-height: 92vh; overflow: auto; border-radius: 16px; background: white; box-shadow: 0 30px 80px rgba(10,25,50,.28); animation: modalIn .2s ease; }
@keyframes modalIn { from { opacity: 0; transform: scale(.975) translateY(8px); } to { opacity: 1; transform: none; } }
.modal-header { display: flex; justify-content: space-between; gap: 20px; padding: 22px 24px 16px; }
.modal-header h2 { margin: 8px 0 3px; font-size: 21px; }
.modal-header p { margin: 0; color: var(--muted); font-size: 11px; }
.trip-tabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.trip-tabs button { padding: 11px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 10px; white-space: nowrap; }
.trip-tabs button.active { border-color: var(--blue); color: var(--blue); font-weight: 750; }
.trip-tabs b { padding: 2px 5px; border-radius: 10px; background: #edf1f6; font-size: 8px; }
.modal-body { padding: 20px 24px; background: #f7f8fa; }
.trip-detail-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; }
.detail-card { padding: 17px; border: 1px solid #e1e6ed; border-radius: 11px; background: white; }
.detail-card h4 { margin: 0 0 13px; font-size: 12px; }
.route-timeline { position: relative; display: grid; gap: 17px; }
.route-timeline::before { content:""; position: absolute; left: 7px; top: 7px; bottom: 8px; width: 2px; background: #cbd8ec; }
.route-point { position: relative; padding-left: 27px; }
.route-point::before { content:""; position: absolute; left: 2px; top: 4px; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px #9db9e5; }
.route-point strong { display: block; font-size: 11px; }
.route-point span { color: var(--muted); font-size: 9px; }
.detail-list { display: grid; gap: 9px; }
.detail-line { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid #edf0f4; font-size: 10px; }
.detail-line span { color: var(--muted); }
.detail-line strong { text-align: right; }
.discussion-box { grid-column: 1 / -1; }
.message { display: grid; grid-template-columns: 30px 1fr; gap: 10px; margin-top: 10px; }
.message p { margin: 2px 0; color: #4c586c; font-size: 10px; }
.message small { color: #929baa; font-size: 8px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 24px; border-top: 1px solid var(--line); background: white; }
.compact-modal { width: min(610px,95vw); }
.new-trip-form { padding: 0 24px 20px; }
.new-trip-form label { display: grid; gap: 6px; margin-bottom: 13px; color: #475467; font-size: 10px; font-weight: 700; }
.new-trip-form input, .new-trip-form textarea { width: 100%; padding: 11px 12px; border: 1px solid #d9e0e9; border-radius: 8px; outline: 0; color: var(--ink); font-size: 11px; }
.new-trip-form input:focus, .new-trip-form textarea:focus { border-color: #80a8e7; box-shadow: 0 0 0 3px #eaf2ff; }
.new-trip-form textarea { min-height: 78px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.role-menu { position: fixed; left: 18px; bottom: 64px; z-index: 95; display: none; width: 190px; padding: 6px; border: 1px solid #dce2ea; border-radius: 10px; background: white; box-shadow: var(--shadow); }
.role-menu.open { display: grid; }
.role-menu button { padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: #344054; text-align: left; font-size: 11px; }
.role-menu button:hover { background: var(--blue-soft); color: var(--blue-dark); }
.toast { position: fixed; left: 50%; bottom: -70px; z-index: 130; transform: translateX(-50%); padding: 12px 17px; border-radius: 9px; background: #14213b; color: white; font-size: 11px; box-shadow: var(--shadow); transition: bottom .25s; }
.toast.show { bottom: 24px; }

/* Role workspaces and beginner guidance */
.learning-toggle { display: grid; grid-template-columns: 28px 1fr 24px; gap: 9px; align-items: center; width: 100%; margin-bottom: 8px; padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.05); color: #d6e2f5; text-align: left; }
.learning-toggle > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.1); color: #ffcc54; }
.learning-toggle strong, .learning-toggle small { display: block; }
.learning-toggle strong { font-size: 10px; }
.learning-toggle small { margin-top: 2px; color: #8fa6ca; font-size: 8px; }
.learning-toggle i { position: relative; width: 23px; height: 13px; border-radius: 20px; background: #52627d; }
.learning-toggle i::after { content:""; position: absolute; left: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: white; transition: .2s; }
.learning-toggle.is-on { border-color: rgba(74,222,170,.34); background: rgba(31,179,125,.12); }
.learning-toggle.is-on i { background: #27b77e; }
.learning-toggle.is-on i::after { transform: translateX(10px); }
.help-button { display: flex; align-items: center; gap: 6px; height: 37px; padding: 0 11px; border: 1px solid #d9e3f1; border-radius: 10px; background: #f7faff; color: #174f9f; }
.help-button span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: white; font-weight: 800; }
.help-button b { font-size: 9px; }
.role-context { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 15px; padding: 13px 16px; border: 1px solid #d8e5f7; border-radius: 13px; background: linear-gradient(105deg,#f5f9ff,#fff 55%,#f2fbf7); box-shadow: 0 5px 18px rgba(31,79,145,.06); }
.role-context-copy { display: flex; gap: 13px; align-items: center; }
.role-context-copy > div strong { display: block; font-size: 13px; }
.role-context-copy p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.role-mode { padding: 6px 8px; border-radius: 7px; background: var(--blue); color: white; font-size: 8px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.role-context-actions { display: flex; align-items: center; gap: 10px; }
.role-context-actions > span { padding: 5px 9px; border-radius: 15px; background: #e8f7f1; color: #167358; font-size: 9px; font-weight: 750; white-space: nowrap; }
.role-context-actions .secondary-button { height: 34px; }
.next-actions { margin-bottom: 15px; overflow: hidden; border: 1px solid #dbe5f2; border-radius: 14px; background: white; box-shadow: var(--shadow); }
.next-actions-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px 9px; border-bottom: 1px solid #edf1f6; }
.next-actions-head span { display: block; color: var(--blue); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.next-actions-head strong { font-size: 12px; }
.next-actions-head > b { padding: 4px 8px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-size: 9px; }
.next-actions-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.next-actions-grid button { display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center; padding: 13px 15px; border: 0; border-right: 1px solid #edf1f6; background: white; text-align: left; }
.next-actions-grid button:last-child { border-right: 0; }
.next-actions-grid button:hover { background: #f7faff; }
.next-actions-grid button.done { background: #effaf5; }
.next-actions-grid i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font-style: normal; font-size: 10px; font-weight: 800; }
.next-actions-grid button.done i { background: #d9f5e9; color: #16835f; }
.next-actions-grid strong, .next-actions-grid small { display: block; }
.next-actions-grid strong { font-size: 10px; }
.next-actions-grid small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.next-actions-grid em { color: var(--blue); font-size: 8px; font-style: normal; font-weight: 750; white-space: nowrap; }
.role-hero { position: relative; overflow: hidden; }
.role-hero::after { content:""; position: absolute; right: -50px; bottom: -70px; width: 220px; height: 220px; border: 38px solid rgba(255,255,255,.06); border-radius: 50%; }
.documents-hero { background: linear-gradient(120deg,#123a73,#155e75); }
.finance-hero { background: linear-gradient(120deg,#123a73,#12614b); }
.danger-card small { color: var(--red); }
.smart-hint { padding: 5px 9px; border-radius: 14px; background: #f0f6ff; color: #285ea9; font-size: 8px; }
.document-worklist, .finance-worklist { padding: 0 17px 12px; }
.document-task { display: grid; grid-template-columns: 36px 1.4fr .7fr auto; gap: 12px; align-items: center; padding: 13px 3px; border-bottom: 1px solid #edf0f4; }
.document-task:last-child, .finance-task:last-child { border-bottom: 0; }
.document-task.critical, .finance-task.critical { margin: 0 -8px; padding-left: 11px; padding-right: 11px; border-radius: 10px; background: #fff5f5; }
.document-task.completed, .finance-task.completed { background: #effaf5; opacity: .82; }
.doc-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #edf4ff; color: var(--blue); }
.document-task.critical .doc-icon { background: #ffe5e8; color: var(--red); }
.document-task strong, .document-task p, .document-task small { display: block; }
.document-task strong { font-size: 10px; }
.document-task p { margin: 3px 0; color: #4e5a6e; font-size: 9px; }
.document-task small { color: var(--muted); font-size: 8px; }
.doc-state { color: #566276; font-size: 9px; font-weight: 700; }
.finance-task { display: grid; grid-template-columns: 1.4fr .6fr .6fr auto; gap: 12px; align-items: center; padding: 15px 3px; border-bottom: 1px solid #edf0f4; font-size: 10px; }
.finance-task p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }
.finance-task > span { color: #6b7484; font-size: 9px; }
.coverage-banner { display: flex; gap: 12px; align-items: center; margin-bottom: 13px; padding: 13px 15px; border: 1px solid #bde6d5; border-radius: 12px; background: #effaf5; }
.coverage-banner > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #16835f; color: white; font-weight: 900; }
.coverage-banner strong { display: block; font-size: 11px; }
.coverage-banner p { margin: 3px 0 0; color: #47705f; font-size: 9px; }
.field-groups { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.field-groups section { padding: 15px; border: 1px solid #e0e6ee; border-radius: 11px; background: white; }
.field-groups h4 { display: flex; justify-content: space-between; margin: 0 0 12px; font-size: 11px; }
.field-groups h4 span { padding: 2px 6px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-size: 8px; }
.accent-card { background: linear-gradient(140deg,#f5f9ff,#fff); }
.accent-card p { color: var(--muted); font-size: 10px; line-height: 1.5; }
.history-list { overflow: hidden; border: 1px solid #e0e6ee; border-radius: 11px; background: white; }
.history-list > div { display: grid; grid-template-columns: 120px 1fr 140px; gap: 15px; padding: 14px; border-bottom: 1px solid #edf0f4; font-size: 10px; }
.history-list > div:last-child { border: 0; }
.history-list time, .history-list span { color: var(--muted); }
.empty-state { padding: 30px !important; color: #7b8798; text-align: center; }

.role-menu { bottom: 72px; width: 290px; padding: 9px; border-radius: 14px; }
.role-menu-title { padding: 8px 9px 10px; border-bottom: 1px solid #edf0f4; }
.role-menu-title strong, .role-menu-title small, .role-menu button b, .role-menu button small { display: block; }
.role-menu-title strong { font-size: 11px; }
.role-menu-title small, .role-menu button small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.role-menu button { padding: 10px; }
.role-menu button b { color: #22324c; font-size: 10px; }
.mobile-bottom-nav { display: none; }
.coach-fab { position: fixed; right: 22px; bottom: 20px; z-index: 80; display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px 0 7px; border: 0; border-radius: 23px; background: #123a73; color: white; box-shadow: 0 10px 28px rgba(18,58,115,.28); }
.coach-fab span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: linear-gradient(135deg,#4b8cff,#62d9b3); }
.coach-fab b { font-size: 9px; }
.coach-fab.hidden { display: none; }
.tour-backdrop { position: fixed; inset: 0; z-index: 150; display: none; background: rgba(5,17,36,.62); backdrop-filter: blur(1px); }
.tour-backdrop.open { display: block; }
.tour-target { position: relative !important; z-index: 155 !important; border-radius: 12px; box-shadow: 0 0 0 5px rgba(84,156,255,.9),0 0 0 9999px rgba(5,17,36,.08),0 18px 50px rgba(0,0,0,.32) !important; }
.tour-card { position: fixed; right: 24px; bottom: 24px; z-index: 160; display: none; width: 340px; max-width: calc(100vw - 24px); padding: 19px; border: 1px solid rgba(255,255,255,.3); border-radius: 17px; background: white; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: modalIn .24s ease; }
.tour-card.open { display: block; }
.tour-progress { display: flex; justify-content: space-between; color: var(--blue); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.tour-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-top: 16px; border-radius: 13px; background: linear-gradient(135deg,#e7f0ff,#e7fbf4); font-size: 20px; }
.tour-card h3 { margin: 12px 0 6px; font-size: 18px; }
.tour-card p { margin: 0; color: #59667a; font-size: 11px; line-height: 1.55; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.tour-actions > div { display: flex; gap: 7px; }
.tour-actions button:disabled { opacity: .35; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 210px 1fr; }
  .sidebar { padding-left: 10px; padding-right: 10px; }
  .topbar { grid-template-columns: 180px 1fr auto; padding: 12px 20px; }
  .content { padding: 22px 20px 38px; }
  .online { display: none; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .attention-panel { order: -1; }
  .attention-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 18px; }
}

@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -250px; width: 236px; transition: left .2s; box-shadow: 10px 0 30px rgba(0,0,0,.2); }
  .sidebar.open { left: 0; }
  .topbar { grid-template-columns: auto 1fr auto; gap: 11px; }
  .mobile-menu { display: block; border: 0; background: transparent; font-size: 19px; }
  .global-search { grid-column: 1 / -1; grid-row: 2; }
  .primary-button { padding: 0 11px; }
  .primary-button > span { margin-right: 0; }
  .top-actions .primary-button { font-size: 0; }
  .top-actions .primary-button span { font-size: 17px; }
  .lower-grid, .analytics-layout { grid-template-columns: 1fr; }
  .trip-detail-grid { grid-template-columns: 1fr; }
  .help-button b { display: none; }
  .help-button { padding: 0 8px; }
  .next-actions-grid { grid-template-columns: 1fr; }
  .next-actions-grid button { border-right: 0; border-bottom: 1px solid #edf1f6; }
  .field-groups { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  html, body { overflow-x: hidden; }
  body { padding-bottom: 68px; }
  .app-shell, .main-area, .content { min-width: 0; max-width: 100vw; }
  .content { padding: 12px 10px 26px; }
  .topbar { min-width: 0; padding: 10px 12px; overflow: hidden; }
  .page-heading { min-width: 0; }
  .page-heading span { display: none; }
  .page-heading h1 { font-size: 17px; }
  .metric-grid, .summary-grid { grid-template-columns: 1fr; }
  .welcome-row { align-items: stretch; flex-direction: column; }
  .quick-date { min-width: 0; }
  .attention-list { grid-template-columns: 1fr; }
  .lower-grid { grid-template-columns: 1fr; }
  .page-toolbar { align-items: stretch; flex-direction: column; }
  .filter-group { overflow-x: auto; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .modal-backdrop { padding: 8px; }
  .modal-body, .modal-header, .new-trip-form { padding-left: 15px; padding-right: 15px; }
  .demo-ribbon { right: -44px; top: 10px; font-size: 7px; }
  .top-actions { gap: 5px; }
  .top-actions #notificationButton { display: none; }
  .help-button { height: 34px; }
  .icon-button { width: 34px; height: 34px; }
  .role-context { align-items: stretch; flex-direction: column; margin-bottom: 10px; padding: 12px; }
  .role-context-copy { display: grid; grid-template-columns: 1fr; align-items: flex-start; }
  .role-context-copy .role-mode { justify-self: start; }
  .role-context-copy > div { min-width: 0; }
  .role-context-copy p { line-height: 1.4; overflow-wrap: anywhere; }
  .role-context-actions { flex-wrap: wrap; justify-content: space-between; }
  .role-context-actions .secondary-button { flex: 1 1 170px; }
  .welcome-row { margin-bottom: 10px; }
  .welcome-row > div:first-child { min-width: 0; }
  .welcome-row h2 { font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
  .quick-date { display: none; }
  .next-actions-head { padding: 11px 12px 8px; }
  .next-actions-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .next-actions-grid, .metric-grid, .filter-group, .toolbar { scrollbar-width: none; }
  .next-actions-grid::-webkit-scrollbar, .metric-grid::-webkit-scrollbar, .filter-group::-webkit-scrollbar, .toolbar::-webkit-scrollbar { display: none; }
  .next-actions-grid button { min-width: 88%; border-right: 1px solid #edf1f6; border-bottom: 0; scroll-snap-align: start; }
  .metric-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .metric-card { min-width: 78%; scroll-snap-align: start; }
  .panel-header { align-items: flex-start; }
  .toolbar { max-width: 100%; overflow-x: auto; }
  .trip-table thead { display: none; }
  .trip-table, .trip-table tbody { display: block; }
  .trip-table tbody { padding: 8px; }
  .trip-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 9px; padding: 10px; border: 1px solid #e0e7f0; border-radius: 12px; background: white; box-shadow: 0 4px 12px rgba(24,48,82,.05); }
  .trip-table td { display: flex; justify-content: space-between; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #edf1f5; font-size: 10px; text-align: right; }
  .trip-table td::before { content: attr(data-label); color: var(--muted); font-size: 8px; text-align: left; }
  .trip-table td:nth-child(1), .trip-table td:nth-child(2), .trip-table td:last-child { grid-column: 1 / -1; }
  .trip-table td:last-child { border-bottom: 0; }
  .trip-id, .route { text-align: right; }
  .attention-item { grid-template-columns: 32px 1fr auto; }
  .summary-hero { align-items: flex-start; flex-direction: column; padding: 19px; }
  .summary-hero h2 { font-size: 21px; }
  .hero-stat { text-align: left; }
  .smart-hint { display: none; }
  .document-task { grid-template-columns: 34px 1fr auto; gap: 9px; }
  .document-task .doc-state { display: none; }
  .document-task button { grid-column: 2 / -1; width: 100%; }
  .finance-task { grid-template-columns: 1fr auto; }
  .finance-task > span { grid-column: 1; }
  .finance-task button { grid-column: 2; grid-row: 1 / span 2; }
  .history-list > div { grid-template-columns: 1fr; gap: 4px; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal { width: 100vw; max-height: 94vh; border-radius: 18px 18px 0 0; }
  .modal-footer { position: sticky; bottom: 0; z-index: 3; }
  .role-menu { left: 8px; right: 8px; bottom: 74px; width: auto; border-radius: 17px; }
  .mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 88; display: grid; grid-template-columns: repeat(5,1fr); height: 64px; padding: 5px 6px max(5px,env(safe-area-inset-bottom)); border-top: 1px solid #dbe2ec; background: rgba(255,255,255,.96); box-shadow: 0 -8px 25px rgba(18,41,73,.1); backdrop-filter: blur(10px); }
  .mobile-bottom-nav button { display: grid; place-items: center; gap: 1px; border: 0; border-radius: 9px; background: transparent; color: #7a8799; font-size: 7px; }
  .mobile-bottom-nav button span { font-size: 16px; }
  .mobile-bottom-nav button.active { background: var(--blue-soft); color: var(--blue); font-weight: 800; }
  .coach-fab { right: 12px; bottom: 76px; height: 40px; }
  .tour-card { left: 10px; right: 10px; bottom: 76px; width: auto; }
  .tour-target { box-shadow: 0 0 0 4px rgba(84,156,255,.95),0 0 0 9999px rgba(5,17,36,.12) !important; }
  .toast.show { bottom: 78px; }
}