/* Keep the edit and delete actions beside the ride type. */
.ride-row { grid-template-columns:100px 1fr 185px 125px 32px 32px; }
.edit-button { width:30px; height:30px; border:0; background:transparent; color:var(--teal); font-size:17px; opacity:0; transition:opacity .2s,color .2s; }
.ride-row:hover .edit-button { opacity:1; }
.edit-button:hover { color:#0e4f4e; }
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root { --ink:#1e2b2b; --muted:#71807d; --line:#dfe4df; --paper:#f4f0e8; --white:#fffdf9; --yellow:#e9b949; --teal:#176b69; --soft-teal:#e3efeb; --red:#b5574c; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 86% 5%, #fff9df 0, transparent 28%), var(--paper); font-family:'DM Sans',sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { max-width:1180px; margin:auto; padding:28px 42px 22px; min-height:100vh; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding-bottom:45px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:13px 13px 13px 4px; background:var(--ink); color:#fff; font-weight:700; font-size:13px; letter-spacing:.04em; }
.brand strong,.brand small { display:block; }.brand strong { font-size:15px; letter-spacing:-.02em; }.brand small { color:var(--muted); font-size:11px; margin-top:2px; }
.live-status { color:var(--teal); font-size:12px; font-weight:600; display:flex; gap:8px; align-items:center; }.live-dot { width:8px; height:8px; border-radius:50%; background:#45aa82; box-shadow:0 0 0 4px #d9eee2; }
.intro-section { padding-bottom:24px; }.eyebrow { text-transform:uppercase; letter-spacing:.15em; font-weight:700; color:var(--teal); font-size:10px; margin:0 0 12px; }
.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:38px; max-width:700px; }.summary-card { position:relative; min-height:67px; overflow:hidden; background:rgba(255,253,249,.82); border:1px solid var(--line); border-radius:7px; padding:12px 17px; display:flex; flex-direction:column; justify-content:center; box-shadow:0 4px 14px rgba(30,43,43,.05); transition:transform .2s,box-shadow .2s,border-color .2s; }.summary-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--teal); }.summary-card:nth-child(2)::before { background:#1e2b2b; }.summary-card:nth-child(3)::before { background:#b5574c; }.summary-card:nth-child(4)::before { background:#28734e; }.summary-card:hover { transform:translateY(-2px); border-color:#c8d2cc; box-shadow:0 7px 18px rgba(30,43,43,.09); }.summary-card strong { color:var(--ink); font-size:24px; line-height:1; letter-spacing:-.04em; }.summary-label { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.13em; margin-bottom:6px; }
.section-toolbar { display:flex; align-items:end; justify-content:flex-end; margin-bottom:14px; }.toolbar-actions { display:flex; gap:10px; align-items:center; }.date-filter { height:40px; display:flex; align-items:center; background:var(--white); border:1px solid var(--line); padding:0 7px 0 13px; }.calendar-icon { font-size:18px; color:var(--teal); transform:rotate(45deg); margin-right:8px; }.date-filter input { border:0; outline:0; color:var(--ink); background:transparent; font-size:12px; }.clear-filter { display:none; border:0; background:none; color:var(--muted); font-size:19px; padding:0 4px; }.date-filter.has-value .clear-filter { display:block; }.add-button,.submit-button { border:0; background:var(--yellow); color:var(--ink); height:40px; padding:0 17px; font-weight:700; font-size:12px; transition:transform .2s,background .2s; }.add-button:hover,.submit-button:hover { background:#f1c55d; transform:translateY(-2px); }.add-button span { font-size:21px; vertical-align:-2px; margin-right:5px; font-weight:400; }
.rides-list { border-top:1px solid var(--ink); }.ride-row { display:grid; grid-template-columns:100px 1fr 185px 125px 32px; gap:22px; align-items:center; min-height:58px; border-bottom:1px solid var(--line); animation:rise .35s both; }.ride-time { display:inline-flex; align-items:center; justify-content:center; width:68px; height:31px; border:1px solid #cfd3d0; border-radius:6px; background:#f1f2ef; color:var(--ink); font:700 16px/1 'DM Sans',sans-serif; font-variant-numeric:tabular-nums; letter-spacing:.04em; }.ride-route { display:flex; align-items:center; gap:13px; font-size:13px; font-weight:600; }.route-arrow { color:var(--teal); font-size:15px; }.ride-meta { color:var(--muted); font-size:11px; }.ride-meta strong { color:var(--ink); font-size:13px; }.ride-tag { display:inline-block; width:max-content; padding:5px 8px; font-size:9px; font-weight:700; }.type-departure { color:#b5574c; background:#f6e5e1; }.type-arrival { color:var(--ink); background:#ecebe7; }.type-welcome { color:#28734e; background:#e2f0e5; }.type-other { color:var(--teal); background:var(--soft-teal); }.delete-button { width:30px; height:30px; border:0; color:#9ba7a3; background:transparent; font-size:20px; opacity:0; transition:opacity .2s,color .2s; }.ride-row:hover .delete-button { opacity:1; }.delete-button:hover { color:var(--red); }.empty-state { text-align:center; padding:70px 20px; border-top:1px solid var(--ink); }.empty-icon { margin:auto; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:#e9e4d8; color:var(--teal); font-size:24px; }.empty-state h3 { font:600 22px 'Fraunces',serif; margin:16px 0 7px; }.empty-state p { color:var(--muted); font-size:13px; margin:0 0 20px; }.text-button { border:0; background:none; color:var(--teal); font-weight:700; font-size:12px; }.text-button span { font-size:17px; margin-left:5px; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
footer { display:flex; justify-content:space-between; padding-top:70px; font-size:10px; color:#9ba29d; letter-spacing:.03em; }
.date-filter { gap:3px; }.date-nav-button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; background:transparent; color:var(--teal); font-size:25px; line-height:1; }.date-nav-button:hover { background:var(--soft-teal); }.selected-date-label { min-width:98px; color:var(--ink); font-size:11px; font-weight:700; text-align:center; text-transform:capitalize; white-space:nowrap; }
.modal-backdrop { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:rgba(30,43,43,.45); backdrop-filter:blur(5px); }.modal-backdrop[hidden] { display:none; }.modal { position:relative; width:min(100%,550px); max-height:calc(100vh - 40px); overflow-y:auto; background:var(--white); padding:37px 42px 40px; box-shadow:0 20px 70px rgba(30,43,43,.2); animation:modalIn .25s ease-out; }.modal h2 { font:600 34px 'Fraunces',serif; letter-spacing:-.04em; margin:0; }.modal-subtitle { color:var(--muted); font-size:13px; margin:9px 0 28px; }.close-button { position:absolute; top:18px; right:22px; border:0; background:none; color:var(--muted); font-size:26px; line-height:1; }.form-row { display:grid; gap:13px; margin-bottom:16px; }.form-row-split { grid-template-columns:1fr 1fr; }.modal label { display:block; color:var(--muted); font-size:11px; font-weight:700; }.modal input,.modal select { width:100%; border:1px solid var(--line); background:#fbfaf6; color:var(--ink); padding:12px 13px; margin-top:7px; outline:0; font-size:13px; border-radius:0; }.modal select { appearance:auto; cursor:pointer; touch-action:manipulation; }.modal input:focus,.modal select:focus { border-color:var(--teal); box-shadow:0 0 0 3px #e3efeb; }.custom-type-field { margin-bottom:16px; }.form-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:12px; }.cancel-button { border:1px solid var(--line); background:transparent; color:var(--muted); padding:0 17px; height:45px; font-weight:600; font-size:12px; }.submit-button { height:45px; }.submit-button span { font-size:17px; margin-left:8px; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } @keyframes modalIn { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
@media (max-width:760px) {
	.app-shell { padding:18px 16px; }
	.topbar { padding-bottom:34px; }
	.brand-mark { width:39px; height:39px; }
	.live-status { font-size:10px; }
	.intro-section { padding-bottom:28px; }
	.summary-grid { grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:34px; }
	.summary-card { min-height:60px; padding:9px 5px; }
	.summary-card-main { grid-column:auto; gap:8px; }
	.summary-icon { width:24px; height:24px; font-size:14px; }
	.summary-card strong { font-size:20px; }
	.summary-card-main span:not(.summary-icon) { font-size:8px; }
	.summary-label { font-size:7px; letter-spacing:.03em; margin-bottom:5px; }
	.section-toolbar { margin-bottom:11px; }
	.toolbar-actions { width:100%; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; }
	.date-filter { min-width:0; height:44px; padding-left:10px; }
	.date-filter input { min-width:0; width:100%; }
	.selected-date-label { min-width:0; flex:1; font-size:10px; }
	.date-nav-button { width:32px; height:36px; }
	.add-button { min-height:44px; white-space:nowrap; padding:0 13px; }
	.ride-row { grid-template-columns:66px minmax(0, 1fr) auto 34px; grid-template-rows:auto auto; grid-template-areas:"time route route delete" "time meta tag delete"; column-gap:8px; row-gap:4px; min-height:72px; padding:8px 0; }
	.ride-time { grid-area:time; align-self:center; width:62px; height:28px; font-size:14px; }
	.ride-route { grid-area:route; min-width:0; align-items:center; flex-wrap:wrap; gap:4px 8px; font-size:12px; line-height:1.25; }
	.route-arrow { display:inline; font-size:14px; }
	.ride-meta { grid-area:meta; display:block; align-self:start; font-size:10px; }
	.ride-meta strong { font-size:11px; margin-left:3px; }
	.ride-tag { grid-area:tag; display:inline-block; align-self:start; justify-self:end; padding:3px 5px; font-size:8px; white-space:nowrap; }
	.delete-button { grid-area:delete; opacity:1; align-self:start; width:34px; height:34px; }
	.modal { width:min(100%,340px); max-height:calc(100vh - 80px); padding:24px 18px 20px; border-radius:12px; }
	.modal h2 { font-size:28px; }
	.modal input, .modal select { min-height:46px; font-size:16px; }
	.form-row-split { grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
	.form-actions { display:grid; grid-template-columns:1fr 1fr; }
	.cancel-button, .submit-button { min-height:46px; padding:0 10px; }
	footer { padding-top:42px; flex-direction:column; gap:8px; }
}
@media (max-width:390px) {
	.app-shell { padding-left:13px; padding-right:13px; }
	.live-status { font-size:0; }
	.live-dot { margin-right:3px; }
	.toolbar-actions { gap:6px; }
	.add-button { padding:0 9px; font-size:11px; }
	.ride-row { grid-template-columns:62px minmax(0, 1fr) auto 32px; column-gap:6px; }
}

/* Keep the edit and delete actions beside the ride type. */
.ride-row { grid-template-columns:100px 1fr 185px 125px 32px 32px; }
.edit-button { width:30px; height:30px; border:0; background:transparent; color:var(--teal); font-size:17px; opacity:0; transition:opacity .2s,color .2s; }
.ride-row:hover .edit-button { opacity:1; }
.edit-button:hover { color:#0e4f4e; }
@media (max-width:760px) {
	.ride-row { grid-template-columns:66px minmax(0, 1fr) auto 30px 30px; grid-template-rows:auto auto; grid-template-areas:"time route route edit delete" "time meta tag edit delete"; column-gap:5px; row-gap:4px; min-height:72px; }
	.edit-button { grid-area:edit; opacity:1; align-self:start; }
	.delete-button { grid-area:delete; width:30px; height:30px; }
	.ride-tag { justify-self:end; }
}
@media (max-width:390px) {
	.ride-row { grid-template-columns:62px minmax(0, 1fr) auto 28px 28px; column-gap:4px; }
}

/* Keep the fare and ride type together in the schedule. */
.ride-row { grid-template-columns:100px 1fr minmax(220px, auto) 32px 32px; }
.ride-meta { display:flex; align-items:center; gap:10px; }
@media (max-width:760px) {
	.ride-row { grid-template-columns:66px minmax(0, 1fr) auto 30px 30px; grid-template-areas:"time route route edit delete" "time meta meta edit delete"; }
	.ride-meta { grid-area:meta; display:flex; align-items:center; gap:8px; }
	.ride-tag { grid-area:auto; justify-self:auto; }
}
@media (max-width:390px) {
	.ride-row { grid-template-columns:62px minmax(0, 1fr) auto 28px 28px; }
}

@media (min-width:761px) {
	.ride-row { grid-template-columns:100px minmax(0, 1fr) 300px 32px; }
	.ride-route { gap:13px; }
	.ride-meta { display:grid; grid-template-columns:64px 95px; gap:20px; align-items:center; }
	.ride-price { margin-left:0; }
}
@media (max-width:760px) {
	.ride-row { grid-template-columns:66px minmax(0, 1fr) 30px; grid-template-areas:"time route edit" "time meta edit"; }
	.ride-meta { grid-area:meta; display:flex; align-items:center; gap:8px; }
	.edit-button { align-self:center; justify-self:center; }
}
@media (max-width:390px) {
	.ride-row { grid-template-columns:62px minmax(0, 1fr) 28px; }
}

.client-details-button { border:0; cursor:pointer; font-family:inherit; }
.client-details-button:hover { background:#cfe7d5; }
.client-details-list { display:grid; grid-template-columns:1fr 1fr; gap:17px 14px; margin:0; }
.client-details-list dt { color:var(--muted); font-size:10px; margin-bottom:6px; }
.client-details-list dd { margin:0; font-size:14px; font-weight:700; overflow-wrap:anywhere; }
.client-comment { grid-column:1 / -1; }

.type-client { color:#28734e; background:#e2f0e5; letter-spacing:.06em; }

@media (min-width:761px) {
	.ride-row { grid-template-columns:100px minmax(0, 1fr) 300px 32px; }
	.ride-route { gap:13px; }
	.ride-meta { display:grid; grid-template-columns:64px 95px 95px; gap:20px; align-items:center; }
	.ride-price { margin-left:0; }
}
@media (max-width:760px) {
	.ride-row { grid-template-columns:66px minmax(0, 1fr) 30px; grid-template-areas:"time route edit" "time meta edit"; }
	.ride-meta { grid-area:meta; display:flex; align-items:center; gap:8px; }
}
@media (max-width:390px) {
	.ride-row { grid-template-columns:62px minmax(0, 1fr) 28px; }
}

.delete-modal-button { height:45px; border:1px solid #e5c7c3; background:#fff5f3; color:var(--red); padding:0 17px; font-weight:700; font-size:12px; }
.delete-modal-button:hover { background:#f6e5e1; }
@media (max-width:760px) {
	.form-actions:has(.delete-modal-button:not([hidden])) { grid-template-columns:repeat(3, minmax(0, 1fr)); }
	.delete-modal-button { min-height:46px; padding:0 8px; }
}

.ride-row { grid-template-columns:100px minmax(0, 1fr) 32px; }
.ride-price { color:var(--ink); font-size:13px; white-space:nowrap; }
@media (min-width:761px) {
	.ride-route { gap:24px; }
	.ride-price { margin-left:64px; }
}
@media (max-width:760px) {
	.ride-row { grid-template-columns:66px minmax(0, 1fr) 30px; grid-template-areas:"time route edit"; }
	.edit-button { grid-area:edit; }
}
@media (max-width:390px) {
	.ride-row { grid-template-columns:62px minmax(0, 1fr) 28px; }
}

@media (min-width:761px) {
	.ride-row { grid-template-columns:100px minmax(0, 1fr) 300px 32px; }
	.ride-route { gap:13px; }
	.ride-meta { display:grid; grid-template-columns:64px 95px 95px; gap:20px; align-items:center; }
	.ride-price { margin-left:0; }
}
@media (max-width:760px) {
	.ride-row { grid-template-columns:66px minmax(0, 1fr) 30px; grid-template-areas:"time route edit" "time meta edit"; }
	.ride-meta { grid-area:meta; display:flex; align-items:center; gap:8px; }
}
@media (max-width:390px) {
	.ride-row { grid-template-columns:62px minmax(0, 1fr) 28px; }
}

/* Final layout for the single action shown in each ride row. */
.ride-row { grid-template-columns:100px 1fr minmax(220px, auto) 32px; }
@media (max-width:760px) {
	.ride-row { grid-template-columns:66px minmax(0, 1fr) auto 30px; grid-template-areas:"time route route edit" "time meta meta edit"; }
	.edit-button { grid-area:edit; }
}
@media (max-width:390px) {
	.ride-row { grid-template-columns:62px minmax(0, 1fr) auto 28px; }
}

.ride-row { grid-template-columns:100px 1fr minmax(220px, auto) 32px; }
@media (max-width:760px) {
	.ride-row { grid-template-columns:66px minmax(0, 1fr) auto 30px; grid-template-areas:"time route route delete" "time meta meta delete"; }
	.delete-button { grid-area:delete; }
}
@media (max-width:390px) {
	.ride-row { grid-template-columns:62px minmax(0, 1fr) auto 28px; }
}

.ride-meta { align-items:center; }
.ride-meta strong,
.ride-tag,
.status-button { display:inline-flex; align-items:center; height:22px; line-height:1; font-size:9px; }
.ride-meta strong { padding:0 2px; }
.ride-tag { padding:0 7px; }
.status-button { padding:0 6px; }
.ride-meta .status-button { font-size:9px; }

.ride-row { min-height:52px; }
@media (max-width:760px) {
	.ride-row { min-height:64px; padding:6px 0; row-gap:3px; }
}

.summary-card.is-active { background:var(--teal); border-color:var(--teal); box-shadow:0 7px 18px rgba(23,107,105,.18); }
.summary-card.is-active .summary-label,
.summary-card.is-active strong { color:#fff; }
.summary-card.is-active:hover { border-color:var(--teal); }
.status-button { min-width:0; height:22px; padding:0 6px; border:1px solid #d9dedb; border-radius:4px; background:#f3f4f1; color:var(--muted); font-size:8px; font-weight:700; white-space:nowrap; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.status-button:hover { border-color:#aab8b0; color:var(--ink); }
.status-button.is-done { border-color:var(--teal); background:var(--teal); color:#fff; }
.status-button.is-done:hover { background:#125856; color:#fff; }
.ride-row { grid-template-columns:100px minmax(0, 1fr) 300px 32px; }
@media (min-width:761px) {
	.ride-route { gap:13px; }
	.ride-meta { display:grid; grid-template-columns:64px 95px 95px; gap:20px; align-items:center; }
	.ride-price { margin-left:0; }
}
@media (max-width:760px) {
	.ride-row { grid-template-columns:66px minmax(0, 1fr) 30px; grid-template-areas:"time route edit" "time meta edit"; }
	.ride-meta { grid-area:meta; display:flex; align-items:center; gap:8px; }
}
@media (max-width:390px) {
	.ride-row { grid-template-columns:62px minmax(0, 1fr) 28px; }
}