/* 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=Inter:wght@400..700&display=swap');

/* Ουδέτερη παλέτα (ανοιχτό γκρι φόντο, καθαρό λευκό κάρτες) — ίδια με τη Διαχείριση. */
:root { --ink:#1e2b2b; --muted:#71807d; --line:#e4e7eb; --paper:#f4f5f7; --white:#ffffff; --yellow:#e9b949; --teal:#176b69; --soft-teal:#e3efeb; --red:#b5574c; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Inter','Segoe UI',system-ui,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(2,1fr); gap:10px; margin-bottom:38px; max-width:360px; }.summary-card { position:relative; min-height:67px; overflow:hidden; background:var(--white); 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:#e9b949; }.summary-card:nth-child(3)::before { background:#b5574c; }.summary-card:nth-child(4)::before { background:#28734e; }
.summary-card:nth-child(5)::before { background:#e9b949; }
/* Κρυμμένο κουτί (το «MyRides» πριν το bootstrap) — το display:flex του
   .summary-card θα υπερίσχυε του hidden attribute χωρίς αυτόν τον κανόνα. */
.summary-card[hidden] { display:none; }
/* Dropdown ονόματος οδηγού μέσα στο κουτί «MyRides» (μόνο admin). */
.summary-select { margin-top:5px; max-width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; font-size:11px; padding:1px 0; outline:0; cursor:pointer; }
.summary-select[hidden] { display:none; }
.summary-select:focus { border-bottom-color:var(--teal); }.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-icon { 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 { position:relative; 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; border:0; background:transparent; color:var(--ink); font-size:11px; font-weight:700; text-align:center; text-transform:capitalize; white-space:nowrap; border-radius:5px; padding:6px 4px; transition:background .2s; }.selected-date-label:hover { background:var(--soft-teal); }
.calendar-popover { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:15; width:250px; background:var(--white); border:1px solid var(--line); border-radius:10px; padding:12px; box-shadow:0 14px 34px rgba(30,43,43,.16); animation:calendarPopIn .15s ease-out; }
@keyframes calendarPopIn { from { opacity:0; transform:translateX(-50%) translateY(6px) scale(.98); } to { opacity:1; transform:translateX(-50%) scale(1); } }.calendar-popover[hidden] { display:none; }.calendar-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }.calendar-header .date-nav-button { width:24px; height:24px; font-size:18px; border-radius:5px; }.calendar-month-label { color:var(--ink); font-size:12px; font-weight:700; text-transform:capitalize; }.calendar-weekdays { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; color:var(--muted); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin:8px 0 3px; }.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }.calendar-day { position:relative; aspect-ratio:1; display:grid; place-items:center; border:0; background:transparent; color:var(--ink); font-size:11px; font-weight:600; border-radius:6px; transition:background .2s,color .2s; }.calendar-day:hover { background:var(--soft-teal); }.calendar-day.is-other-month { color:#c3c9c4; }.calendar-day.is-today { color:var(--teal); box-shadow:inset 0 0 0 1.5px var(--teal); }.calendar-day.is-selected { background:var(--teal); color:#fff; }.calendar-day.is-selected:hover { background:#0e4f4e; }.calendar-today-button { display:block; width:100%; margin-top:8px; border:0; border-top:1px solid var(--line); background:none; color:var(--teal); font-size:11px; font-weight:700; padding-top:8px; }.calendar-today-button:hover { color:#0e4f4e; }
.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:#f8f9fa; 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; }.driver-field { position:relative; margin-top:7px; }.driver-field input { margin-top:0; padding-right:34px; }.driver-dropdown-toggle { position:absolute; top:0; right:0; bottom:0; width:34px; border:0; background:transparent; color:var(--muted); font-size:12px; cursor:pointer; }.driver-dropdown-list { position:absolute; bottom:calc(100% + 4px); left:0; right:0; z-index:5; margin:0; padding:4px 0; list-style:none; background:var(--white); border:1px solid var(--line); box-shadow:0 -8px 20px rgba(30,43,43,.12); max-height:180px; overflow-y:auto; }.driver-dropdown-list[hidden] { display:none; }.driver-dropdown-list li { padding:9px 13px; font-size:13px; color:var(--ink); cursor:pointer; }.driver-dropdown-list li:hover { background:var(--soft-teal); }
.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(2,1fr); gap:5px; margin-bottom:34px; }
	.summary-select { font-size:10px; }
	.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:auto minmax(0, 1fr) auto; gap:6px; }
	/* Visual order on mobile: hide-completed toggle, then the date picker,
	   then the add button — DOM order stays as-is (only `order` changes). */
	.hide-completed-button { order:1; }
	.date-filter { order:2; min-width:0; height:44px; padding-left:10px; }
	.add-button { order:3; }
	.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; }
	/* Only the "+" icon fits next to the date picker and the hide-completed
	   toggle on one row, so the "New Ride" label is dropped on mobile. */
	.add-button { min-height:48px; min-width:48px; white-space:nowrap; padding:0; display:grid; place-items:center; }
	.add-button-icon { margin-right:0; font-weight:700; }
	.add-button-label { display:none; }
	.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:4px; }
	.add-button { min-width:44px; font-size:11px; }
	.hide-completed-button { width:40px; height:40px; }
	.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:var(--teal); background:var(--soft-teal); letter-spacing:.06em; }
/* Αίτημα κράτησης εκτός κανόνων (status pending — worker/bookings.js): πορτοκαλί
   «ΑΙΤΗΜΑ» στη θέση του CLIENT και η γραμμή με πορτοκαλί ένδειξη, μέχρι το
   γραφείο να πατήσει Αποδοχή/Απόρριψη στα «Στοιχεία πελάτη». */
.type-request { color:#7a4b00; background:#ffe3b3; letter-spacing:.06em; animation:request-pulse 1.8s ease-in-out infinite; }
.type-request:hover { background:#ffd48a; }
@keyframes request-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(217,139,26,.6); } 50% { box-shadow:0 0 0 5px rgba(217,139,26,0); } }
.ride-row.is-pending { background:linear-gradient(90deg,#fff4e0 0,transparent 140px); box-shadow:inset 3px 0 0 #d98b1a; }
.ride-row.is-pending .ride-time { border-style:dashed; border-color:#d98b1a; color:#7a4b00; background:#fff8ec; }
.request-box { margin-top:18px; padding:14px 16px; background:#fff4e0; border-left:3px solid #d98b1a; }
.request-box-title { margin:0 0 6px; color:#b26a00; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.request-box-note { margin:0; color:#7a4b00; font-size:13px; font-weight:600; line-height:1.5; }
.request-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.accept-request-button { background:#28734e; color:#fff; }
.accept-request-button:hover { background:#1f5c3e; }
.reject-request-button { height:45px; padding:0 17px; border:1px solid var(--red); background:transparent; color:var(--red); font-weight:700; font-size:12px; }
.reject-request-button:hover { background:#fbeaea; }
.reject-request-button.is-confirm { background:var(--red); color:#fff; }
.reject-request-button.is-confirm:hover { background:#9c4a40; }
.reject-reason-box { margin-top:14px; }
.reject-reason-box label { display:block; color:var(--muted); font-size:11px; font-weight:700; margin-bottom:6px; }
.reject-reason-box textarea { width:100%; box-sizing:border-box; border:1px solid var(--line); background:#f8f9fa; color:var(--ink); padding:10px 12px; font:inherit; font-size:14px; resize:vertical; }
.request-error { margin:10px 0 0; color:var(--red); font-size:12px; font-weight:600; }
body[data-bookings-level="0"] #requestActions, body[data-bookings-level="1"] #requestActions, body[data-bookings-level="2"] #requestActions { display:none; }
.booking-notification.kind-request { border-color:#d98b1a; background:#fff8ec; }
.booking-notification.kind-request h3 { color:#b26a00; }
/* Κράτηση που έγραψε το πρόγραμμα ξενοδοχείου Avelink (source avelink) —
   ίδιο κουμπί «Στοιχεία πελάτη» με το CLIENT, σε μπλε για να ξεχωρίζει. */
.type-avelink { color:#1f4e8c; background:#e1eaf7; letter-spacing:.04em; }
.type-avelink:hover { background:#cfdcf0; }

@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; }
}

/* version2: the meta row now carries a variable number of badges (price,
   type, driver, client-info icon), so it needs to wrap instead of relying
   on the fixed-column grid from earlier rules. */
.ride-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.type-driver { color:#000; background:#faf1d9; }
.type-vehicle { color:#3d5a99; background:#e7ecf7; }
.client-info-button { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:1px solid #bcd6d0; background:var(--soft-teal); color:var(--teal); font-family:Georgia,'Times New Roman',serif; font-size:14px; font-weight:700; font-style:italic; padding:0; line-height:1; }
.client-info-button:hover { background:#cfe7d5; }
.phone-copy-button { border:1px solid var(--line); background:#f8f9fa; color:var(--teal); font-weight:700; font-size:14px; padding:8px 12px; cursor:pointer; border-radius:4px; }
.phone-copy-button:hover:not(:disabled) { background:var(--soft-teal); border-color:var(--teal); }
.phone-copy-button:disabled { color:var(--muted); cursor:default; }
.phone-copy-button.is-copied { background:var(--teal); color:#fff; border-color:var(--teal); }

.driver-edit-button { border:0; font-family:inherit; cursor:pointer; }
.driver-edit-button:hover { filter:brightness(.94); }

/* Double-clicking a ride row toggles "completed" — a checkmark badge on the
   time box once it lands. Pinned to the box's own corner (not floated into
   the route column) so it never sits on top of the route text on narrow
   mobile widths. */
.ride-row { touch-action:manipulation; user-select:none; }
.ride-time { position:relative; overflow:visible; }
.ride-done-check { position:absolute; top:-6px; left:-6px; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--teal); color:#fff; font-weight:700; font-size:10px; line-height:1; box-shadow:0 0 0 2px var(--paper); }
.ride-row.is-completed .ride-time { border-color:var(--teal); background:var(--soft-teal); }

/* Bump the fare up a bit — it was inheriting the same tiny 9px size as the
   badges/tags next to it, which made it hard to read at a glance. */
.ride-meta .ride-price { font-size:13px; }
/* Στο desktop το όνομα του οδηγού (δίπλα στην τιμή) σε μεγαλύτερα γράμματα
   από τα υπόλοιπα tags, ώστε να διαβάζεται με μια ματιά. */
@media (min-width:761px) {
	.ride-meta .type-driver { font-size:12px; height:24px; padding:0 9px; }
}

/* Brand header: logo plus a "Ταμείο" tile, replacing the old text eyebrow. */
.brand-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand-logo { height:56px; width:auto; display:block; mix-blend-mode:multiply; }
.brand-header-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
/* Διακόπτης «Ειδοποιήσεις» (push-client.js): πάνω αριστερά, πάνω από το «Σύνολο». */
.push-toggle { display:inline-flex; align-items:center; gap:9px; padding:7px 12px 7px 8px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--ink); font:inherit; font-size:12px; font-weight:700; cursor:pointer; box-shadow:0 4px 14px rgba(30,43,43,.05); }
.push-toggle[hidden] { display:none; }
.push-toggle:disabled { opacity:.6; cursor:wait; }
.push-toggle-switch { position:relative; flex:none; width:34px; height:20px; border-radius:999px; background:#c9d1cc; transition:background .2s; }
.push-toggle-switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.push-toggle.is-on .push-toggle-switch { background:var(--teal); }
.push-toggle.is-on .push-toggle-switch::after { transform:translateX(14px); }
.push-toast { position:fixed; left:50%; bottom:20px; z-index:200; max-width:min(92vw,460px); padding:12px 16px; border-radius:10px; background:#1e2b2b; color:#fff; font-size:13px; line-height:1.45; box-shadow:0 10px 30px rgba(0,0,0,.25); transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; }
.push-toast.is-on { opacity:1; transform:translate(-50%,0); }
.push-toast.is-error { background:#9b2c2c; }
.tamio-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:78px; height:56px; border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink); font-weight:700; font-size:11px; text-decoration:none; box-shadow:0 4px 14px rgba(30,43,43,.05); transition:transform .2s,box-shadow .2s,border-color .2s; }
.tamio-tile:hover { transform:translateY(-2px); border-color:#c8d2cc; box-shadow:0 7px 18px rgba(30,43,43,.09); }
.tamio-icon { font-size:19px; line-height:1; }
/* Ταμείο στην έκδοση Pro (TAMEIO_PRO στο app.js): αχνό, χωρίς link, με χρυσό σήμα «PRO» στη γωνία. */
.tamio-tile.is-pro { position:relative; cursor:not-allowed; }
.tamio-tile.is-pro > :not(.tamio-pro) { opacity:.5; }
.tamio-tile.is-pro:hover { transform:none; border-color:var(--line); box-shadow:0 4px 14px rgba(30,43,43,.05); }
.tamio-pro { position:absolute; top:-7px; right:-7px; padding:1px 5px; border-radius:4px; background:#e9b949; color:#1e2b2b; font-size:9px; font-weight:800; letter-spacing:.06em; line-height:1.4; }
/* Admin: «Dashboard» χωρίς εικονίδιο — ίδιο ύψος με το φίλτρο ημερομηνίας */
.tamio-tile.is-text { flex-direction:row; width:auto; height:40px; padding:0 16px; font-size:12px; letter-spacing:.02em; }
@media (max-width:760px) {
	.brand-logo { height:42px; }
	.tamio-tile { width:60px; height:46px; font-size:9px; gap:2px; }
	.tamio-icon { font-size:15px; }
}

/* Bell icon next to Ταμείο that announces product updates. It is only
   rendered (see NOTIFICATION_VISIBLE_DAYS in app.js) while at least one
   announcement is still within its visibility window, and disappears
   entirely — badge included — once that window passes for everyone.
   Kept small, borderless and grayscale (via filter, since the 🔔 emoji is
   colored by default) so it stays quiet next to the Ταμείο tile. */
.notification-bell { position:relative; display:grid; place-items:center; width:26px; height:26px; border:0; background:transparent; padding:0; }
/* Only the emoji itself is grayscaled/faded — the badge is a separate
   sibling so it keeps its red color instead of being desaturated too. */
.notification-bell > span:first-child { font-size:15px; filter:grayscale(1); opacity:.75; transition:opacity .2s; }
.notification-bell:hover > span:first-child { opacity:1; }
.notification-badge { position:absolute; top:-4px; right:-4px; display:grid; place-items:center; min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:var(--red); color:#fff; font-size:9px; font-weight:700; line-height:1; box-shadow:0 0 0 2px var(--paper); }
.notification-badge:empty { display:none; }
@media (max-width:760px) {
	.notification-bell { width:22px; height:22px; }
	.notification-bell > span:first-child { font-size:13px; }
}

.notification-list { display:grid; gap:16px; margin:6px 0 4px; }
/* «Εκκαθάριση όλων» στο παράθυρο του καμπανακιού — ουδέτερο, στο ύφος του
   «Κλείσιμο», κρύβεται όταν δεν υπάρχει τίποτα να σβήσει. */
.clear-notifications-button { height:45px; border:1px solid var(--line); background:transparent; color:var(--muted); padding:0 17px; font-weight:600; font-size:12px; }
.clear-notifications-button:hover { color:var(--ink); border-color:var(--ink); }
.notification-modal .form-actions:has(.clear-notifications-button:not([hidden])) { justify-content:space-between; }
@media (max-width:760px) {
	.clear-notifications-button { min-height:46px; padding:0 10px; }
}
.notification-item h3 { margin:0 0 8px; font:600 16px 'Inter',sans-serif; }
.notification-item ul { margin:0; padding-left:18px; color:var(--ink); font-size:13px; line-height:1.5; }
.notification-item li + li { margin-top:6px; }

/* Toggle button next to the date picker: hides/shows completed (ticked)
   rides. The on/off state is stored per-device in localStorage (see
   HIDE_COMPLETED_KEY in app.js), so it stays local to this browser and
   persists until the same device flips it back. */
.hide-completed-button { position:relative; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid var(--line); background:var(--white); color:var(--muted); font-size:15px; font-weight:700; transition:color .2s,border-color .2s; }
.hide-completed-button:hover { border-color:#aab8b0; color:var(--ink); }
/* Active state: keep the plain button look and cross the checkmark out with
   a red diagonal line, instead of inverting the background. */
.hide-completed-button.is-active::after { content:""; position:absolute; top:50%; left:50%; width:2px; height:22px; background:var(--red); border-radius:1px; transform:translate(-50%,-50%) rotate(-45deg); }
@media (max-width:760px) {
	.hide-completed-button { width:44px; height:44px; }
}

/* Δικαιώματα προγράμματος κρατήσεων, ορίζονται από τον admin (Ταμείο ->
   Ρυθμίσεις) και εκτίθενται εδώ ως data-bookings-level στο <body>:
     0 = Μόνο προβολή — κρύβει προσθήκη, επεξεργασία και διαγραφή.
     1 = Προβολή + Νέα κούρσα — μόνο το New ride· κρύβει επεξεργασία και
         διαγραφή, και το tag του οδηγού δεν είναι κλικαρίσιμο.
     2 = Προβολή + Νέα κούρσα + Οδηγός — κρύβει επεξεργασία και διαγραφή,
         αλλά το tag του οδηγού μένει κλικαρίσιμο (αλλαγή μόνο οδηγού).
     3 = Πλήρης επεξεργασία εκτός διαγραφής — κρύβει μόνο τη διαγραφή.
     4 = Πλήρης επεξεργασία (και ο admin) — τίποτα κρυμμένο.
   Το API επιβάλλει το ίδιο όριο ούτως ή άλλως — αυτό είναι μόνο ώστε να μη
   φαίνονται κουμπιά που θα έδιναν 403. */
body[data-bookings-level="0"] #openModal,
body[data-bookings-level="0"] #openModalEmpty { display:none; }
body[data-bookings-level="0"]:not([data-bookings-delete="1"]) .edit-button,
body[data-bookings-level="1"]:not([data-bookings-delete="1"]) .edit-button,
body[data-bookings-level="2"]:not([data-bookings-delete="1"]) .edit-button { display:none; }
/* Το ίδιο tag δείχνει το όνομα του οδηγού ΚΑΙ λειτουργεί σαν κουμπί
   επεξεργασίας — αν το κρύβαμε εντελώς για χαμηλά επίπεδα δικαιωμάτων θα
   εξαφανιζόταν και το όνομα, όχι μόνο η δυνατότητα επεξεργασίας. Γι' αυτό
   εδώ μένει ορατό, απλώς μη κλικάρισμα. */
body[data-bookings-level="0"] .driver-edit-button,
body[data-bookings-level="1"] .driver-edit-button { pointer-events:none; cursor:default; }
/* Επίπεδο 2: το modal ανοίγει σε λειτουργία «μόνο οδηγός» — τα υπόλοιπα
   πεδία φαίνονται (για context) αλλά είναι απενεργοποιημένα. */
.modal form.driver-only input:disabled,
.modal form.driver-only select:disabled { opacity:.55; cursor:not-allowed; }
/* Η διαγραφή: επίπεδο 4, ή οποιοδήποτε επίπεδο με το τικ «Διαγραφή»
   (data-bookings-delete="1") — τότε κάτω από το 3 το ✎ ανοίγει την κούρσα
   μόνο για ανάγνωση, με κουμπί Διαγραφή. */
body:not([data-bookings-delete="1"]) #deleteRideButton { display:none; }

/* The info/client badge and the edit (pencil) button live together in their
   own .ride-actions box, separate from the price/type/driver tags in
   .ride-meta — same idea as the time badge: a fixed slot, centered in the
   middle of the row, instead of drifting with however many tags a ride
   has. */
.ride-actions { display:flex; align-items:center; justify-content:center; gap:6px; }
.ride-row { grid-template-columns:100px minmax(0, 1fr) 300px 64px; }
@media (max-width:760px) {
	.ride-row { grid-template-columns:66px minmax(0, 1fr) 64px; grid-template-areas:"time route actions" "time meta actions"; }
	.ride-actions { grid-area:actions; }
}
@media (max-width:390px) {
	.ride-row { grid-template-columns:62px minmax(0, 1fr) 58px; }
	.ride-actions { gap:4px; }
}

/* Μετά την πρώτη εμφάνιση της λίστας (βλ. render() στο app.js) οι γραμμές
   δεν ξαναπαίζουν το εφέ εισόδου — οι επανασχεδιάσεις αλλάζουν μόνο δεδομένα. */
.rides-list[data-painted] .ride-row { animation:none; }

/* Το μολύβι επεξεργασίας πάντα ορατό, και στο desktop (πριν εμφανιζόταν μόνο
   στο hover της γραμμής). Η απόκρυψη για χαμηλά δικαιώματα (data-bookings-level)
   παραμένει. */
.edit-button { opacity:1; }

/* Στήλη ενεργειών σε δύο σταθερές θέσεις: αριστερά το «i» ή το «CLIENT», δεξιά
   το μολύβι — ώστε τα μολύβια να στοιχίζονται το ένα κάτω από το άλλο, όποιο
   από τα δύο κι αν έχει η γραμμή. Το «CLIENT» στενεύει για να χωράει στη θέση του. */
.ride-actions { display:grid; grid-template-columns:34px 30px; gap:0; justify-items:center; align-items:center; }
.ride-actions .type-client, .ride-actions .type-avelink, .ride-actions .type-request { padding:0 3px; font-size:8px; letter-spacing:.02em; max-width:34px; }
@media (max-width:390px) {
	.ride-actions { grid-template-columns:28px 30px; }
	.ride-actions .type-client, .ride-actions .type-avelink, .ride-actions .type-request { font-size:7px; padding:0 2px; max-width:28px; }
}

/* Mobile: το «i»/«CLIENT» και το μολύβι δίπλα-δίπλα, δεξιά, κεντραρισμένα
   κάθετα στη γραμμή όπως το ρολόι. Παλιότεροι κανόνες mobile πιο πάνω
   έδιναν στο μολύβι grid-area:edit / align-self:start από τότε που ήταν
   απευθείας παιδί της γραμμής — μέσα στο .ride-actions αυτό το έστελνε σε
   δική του (implicit) σειρά, με το «i» πάνω-αριστερά και το μολύβι
   κάτω-δεξιά. Εδώ μηδενίζονται. */
.ride-actions .edit-button { grid-area:auto; align-self:center; justify-self:center; }
.ride-actions .client-info-button,
.ride-actions .type-client, .ride-actions .type-avelink, .ride-actions .type-request { grid-area:auto; align-self:center; justify-self:center; }
@media (max-width:760px) {
	.ride-row { align-items:center; }
	.ride-actions { grid-area:actions; align-self:center; justify-self:end; grid-template-columns:30px 30px; gap:2px; }
	.ride-actions .type-client, .ride-actions .type-avelink, .ride-actions .type-request { max-width:30px; }
	.ride-actions .edit-button { width:30px; height:30px; font-size:16px; }
}
@media (max-width:390px) {
	.ride-row { grid-template-columns:62px minmax(0, 1fr) 62px; }
	.ride-actions { grid-template-columns:28px 30px; gap:2px; }
	.ride-actions .type-client, .ride-actions .type-avelink, .ride-actions .type-request { max-width:28px; }
}

/* Πεδίο «Οδηγός» στο modal: το βελάκι που ανοίγει τη λίστα γίνεται ένα
   ευδιάκριτο κουμπί δεξιά (πιο φαρδύ, με χρώμα και διαχωριστική γραμμή), ώστε
   να μην πατάς κατά λάθος μέσα στο input και να βγαίνει το πληκτρολόγιο. */
.driver-field input { padding-right:56px; }
.driver-dropdown-toggle { width:46px; border-left:1px solid var(--line); background:var(--soft-teal); color:var(--teal); font-size:22px; line-height:1; font-weight:700; cursor:pointer; transition:background .2s; }
.driver-dropdown-toggle:hover { background:#cfe7d5; }
.driver-field input:focus + .driver-dropdown-toggle { border-left-color:var(--teal); }

/* Παράθυρο «Νέα κράτηση / Νέες κρατήσεις» (βλ. announceNewBookings στο app.js):
   ανοίγει μόνο του όταν φτάσει από τον server κράτηση πελάτη (CLIENT / AVELINK)
   που δεν είχε ξαναδεί αυτή η συσκευή. Πάνω από κάθε άλλο παράθυρο. Κάθε
   κράτηση μία συνοπτική γραμμή: ώρα + ημέρα | από → προς | ετικέτα, όνομα,
   άτομα, τύπος, τιμή. Πάτημα = μετάβαση στην ημέρα της. */
.new-bookings-backdrop { z-index:12; }
.new-bookings-modal { width:min(100%,600px); border-top:5px solid var(--yellow); }
.new-bookings-modal .eyebrow { color:var(--red); }
.new-bookings-modal .modal-subtitle { margin-bottom:18px; }
.new-bookings-list { display:grid; gap:8px; margin:0 0 6px; max-height:50vh; overflow-y:auto; }
.new-booking-row { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"when route" "when who"; column-gap:14px; row-gap:4px; align-items:center; width:100%; text-align:left; border:1px solid var(--line); background:#f8f9fa; padding:9px 12px; font-family:inherit; color:var(--ink); cursor:pointer; transition:background .2s,border-color .2s; }
.new-booking-row:hover { background:var(--soft-teal); border-color:var(--teal); }
.new-booking-when { grid-area:when; display:grid; justify-items:center; gap:3px; }
.new-booking-time { display:inline-flex; align-items:center; justify-content:center; min-width:60px; height:28px; border:1px solid #cfd3d0; border-radius:6px; background:#f1f2ef; font:700 14px/1 'Inter',sans-serif; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.new-booking-date { color:var(--muted); font-size:10px; font-weight:700; white-space:nowrap; text-transform:capitalize; }
.new-booking-route { grid-area:route; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.new-booking-who { grid-area:who; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; color:var(--muted); font-size:11px; }
.new-booking-who .ride-tag { height:18px; padding:0 6px; font-size:8px; letter-spacing:.06em; }
/* Η γραμμή της κράτησης στη λίστα αναβοσβήνει για λίγο μετά τη μετάβαση από το παράθυρο. */
/* Highlight γραμμής μετά από πάτημα στο «Νέα κράτηση» / στο καμπανάκι (βλ.
   goToRide στο app.js). Ο selector είναι σκόπιμα πιο ισχυρός από το
   `.rides-list[data-painted] .ride-row { animation:none }` παραπάνω — αλλιώς
   εκείνος κερδίζει και το flash δεν παίζει ποτέ μετά την πρώτη εμφάνιση. */
.rides-list .ride-row.is-highlighted, .rides-list[data-painted] .ride-row.is-highlighted { animation:rowFlash 2.8s ease-out; }
@keyframes rowFlash { 0%,45% { background:#fdf0c9; box-shadow:inset 4px 0 0 var(--yellow), 0 0 0 2px var(--yellow); } 100% { background:transparent; box-shadow:none; } }
@media (max-width:640px) {
	.new-bookings-modal { padding:30px 20px 24px; }
	.new-booking-row { column-gap:10px; padding:8px 10px; }
	.new-booking-route { font-size:12px; }
}

/* Ειδοποίηση καμπανακιού «Νέα κράτηση από client για <ημερομηνία>» (κρατήσεις
   πελάτη για επόμενη μέρα — βλ. addBookingNotifications στο app.js). Μη-ιδωμένη
   = κίτρινο πλαίσιο. Πάτημα = μετάβαση στην ημέρα της, × = αφαίρεση. */
.booking-notification { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px; border:1px solid var(--line); background:#f8f9fa; padding:10px 12px; }
.booking-notification.is-unseen { border-color:var(--yellow); background:#fff8e6; }
.booking-notification-body { display:block; width:100%; text-align:left; border:0; background:none; padding:0; font-family:inherit; color:var(--ink); cursor:pointer; }
.booking-notification-body:hover h3 { color:var(--teal); }
.notification-item.booking-notification h3 { margin:0 0 4px; font:600 15px 'Inter',sans-serif; transition:color .2s; }
.booking-notification-body p { margin:0; color:var(--muted); font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
/* Πότε στάλθηκε η κράτηση / αλλαγή (σκέτη ώρα «14:32», ή «3 Οκτ 18:40» αν
   δεν είναι σημερινή) — μικρά γκρίζα γράμματα σε δική
   της γραμμή που πιάνει και τις δύο στήλες του grid, στοιχισμένα ΔΕΞΙΑ, κάτω
   κάτω στην κάρτα. Αριστερά στην <p> είναι η ώρα της μεταφοράς· έτσι οι δύο
   ώρες δεν μπερδεύονται. */
.booking-notification-sent { grid-column:1 / -1; justify-self:end; display:block; margin-top:2px; color:var(--muted); font-size:10.5px; line-height:1.3; opacity:.85; white-space:nowrap; }
.booking-notification-dismiss { border:0; background:none; color:var(--muted); font-size:22px; line-height:1; padding:0 2px; margin-top:-3px; }
.booking-notification-dismiss:hover { color:var(--red); }
/* Ειδοποιήσεις «Αλλαγή» / «Ακύρωση» κράτησης Avelink (βλ. announceBookingChanges):
   η ακύρωση διαγράφει τη γραμμή στοιχείων και χρωματίζει τον τίτλο κόκκινο,
   η αλλαγή τον τίτλο μπλε — για να ξεχωρίζουν από τις «Νέα» με μια ματιά. */
.booking-notification.kind-cancel h3 { color:var(--red); }
.booking-notification.kind-cancel p { text-decoration:line-through; }
.booking-notification.kind-update h3 { color:#1f4e8c; }

/* Πληρωμή κούρσας (στήλη payment: '' / cash / card). Το παράθυρο «Πώς
   πληρώθηκες;» ανοίγει με διπλό κλικ (ή παρατεταμένο πάτημα σε οθόνη αφής)
   αντί να μπαίνει το ✓ κατευθείαν. Στη λίστα δεν φαίνεται σηματάκι — η
   πληρωμή γράφεται μόνο στα «Στοιχεία πελάτη» και στη φόρμα επεξεργασίας. */
.payment-modal { width:min(100%,420px); }
.payment-ride { margin-bottom:20px; font-weight:600; color:var(--ink); }
.payment-choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.payment-choice { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:100px; border:2px solid var(--line); border-radius:8px; background:#f8f9fa; color:var(--ink); font:700 15px 'DM Sans',sans-serif; cursor:pointer; touch-action:manipulation; transition:border-color .2s,background .2s; }
.payment-choice:hover { border-color:var(--teal); background:var(--soft-teal); }
.payment-choice.is-selected { border-color:var(--teal); background:var(--soft-teal); box-shadow:0 0 0 3px #e3efeb; }
.payment-choice-icon { font-size:32px; line-height:1; }
.payment-actions { margin-top:18px; justify-content:space-between; }
.payment-actions .cancel-button { margin-left:auto; }
.undo-complete-button { height:45px; padding:0 17px; border:1px solid var(--red); background:transparent; color:var(--red); font-weight:700; font-size:12px; cursor:pointer; }
.undo-complete-button:hover { background:#fbeaea; }
.undo-complete-button[hidden] { display:none; }
@media (max-width:760px) {
	.payment-modal { width:min(100%,360px); }
	.payment-choice { min-height:88px; }
	.payment-actions { grid-template-columns:1fr 1fr; }
	.payment-actions:has(.undo-complete-button[hidden]) { grid-template-columns:1fr; }
	.undo-complete-button { min-height:46px; }
}