:root { --bg: #0f172a; --panel: #1e293b; --panel-2: #243449; --accent: #10b981; --accent-2: #34d399; --text: #f1f5f9; --muted: #94a3b8; --border: #334155; --danger: #f87171; --heb-date: #a78bfa; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Date inputs — ensure native calendar picker opens correctly on dark theme */ input[type="date"], input[type="time"] { color-scheme: dark; cursor: pointer; } body { font-family: "Segoe UI", "Arial Hebrew", Arial, sans-serif; background: radial-gradient(circle at 70% 0%, #134e4a 0%, var(--bg) 55%); color: var(--text); min-height: 100vh; color-scheme: dark; } /* ---------- Landing ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 2rem; } .brand { font-size: 1.5rem; font-weight: 800; background: linear-gradient(90deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .auth-corner { display: flex; gap: 0.6rem; } .btn { display: inline-block; padding: 0.55rem 1.2rem; border-radius: 999px; text-decoration: none; font-weight: 600; cursor: pointer; border: none; font-family: inherit; font-size: 1rem; transition: transform .08s ease, box-shadow .2s ease; } .btn:hover { transform: translateY(-1px); } .btn-ghost { color: var(--text); border: 1px solid var(--border); background: transparent; } .btn-primary { color: #052e2b; background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 6px 20px rgba(16, 185, 129, .25); } .btn-lg { padding: 0.8rem 2rem; font-size: 1.1rem; } .hero { text-align: center; padding: 7rem 1.5rem 3rem; max-width: 760px; margin: 0 auto; } .hero h1 { font-size: 3rem; line-height: 1.15; margin-bottom: 1rem; } .subtitle { font-size: 1.25rem; color: var(--muted); margin-bottom: 2rem; } .hero-actions { margin-bottom: 2.5rem; } /* ---------- Forms ---------- */ /* The .auth-page/.auth-card dark shell that used to live here is gone: every auth screen now renders through auth/_shell.html + auth-light.css, and no template in app/web/ carries those class names any more. (admin_app has its own copy in admin_app/static/style.css — untouched.) The .form-grid rules below stay as the base layer auth-light.css overrides. */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; } .form-grid label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; color: var(--muted); } .form-grid input, .form-grid select { padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1rem; font-family: inherit; } .form-grid input:focus, .form-grid select:focus { outline: 2px solid var(--accent); } .form-actions { grid-column: 1 / -1; margin-top: .5rem; } .form-actions .btn { width: 100%; } .alert { background: rgba(248,113,113,.12); border: 1px solid var(--danger); color: #fecaca; padding: .7rem 1rem; border-radius: 10px; margin-top: 1rem; } /* Same blue as the .flash strip above — a success message reads the same whether it arrives on an auth page or in the manage area. */ .alert-success { background: #E8EBFC; border: 1px solid #4B5FE8; color: #2F3EAE; } .muted { color: var(--muted); font-size: .9rem; } .center { text-align: center; margin-top: 1.2rem; } a { color: var(--accent-2); } /* ---------- Manage area ---------- */ body.manage { display: grid; grid-template-columns: 240px 1fr; height: 100vh; overflow: hidden; background: var(--bg); } .sidebar { background: var(--panel); border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.2rem 0; height: 100vh; overflow-y: auto; position: sticky; top: 0; } .sidebar-brand { font-size: 1.1rem; font-weight: 800; padding: 0 1.4rem 1rem; color: var(--accent-2); border-bottom: 1px solid var(--border); margin-bottom: 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; } .sidebar-logo-wrap { width: 58px; height: 58px; border-radius: 50%; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.25); flex-shrink: 0; } .sidebar-logo-wrap img { width: 82%; height: 82%; object-fit: contain; display: block; } .sidebar-nav { display: flex; flex-direction: column; gap: .15rem; flex: 1; } .nav-item { padding: .7rem 1.4rem; color: var(--text); text-decoration: none; font-weight: 500; border-inline-start: 3px solid transparent; } .nav-item:hover { background: var(--panel-2); } .nav-item.active { background: var(--panel-2); border-inline-start-color: var(--accent); color: var(--accent-2); font-weight: 700; } .sidebar-footer { padding: 1rem 1.4rem 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .6rem; } .plan-chip { display: block; text-align: center; padding: .5rem; border-radius: 10px; background: var(--panel-2); color: var(--text); text-decoration: none; font-weight: 600; } .logout { color: var(--muted); text-decoration: none; font-size: .9rem; text-align: center; } .content { padding: 2.2rem 2.6rem; height: 100vh; overflow-y: auto; } .content h1 { margin-bottom: 1.4rem; } .content h2 { margin: 1.8rem 0 .8rem; font-size: 1.2rem; } .attention-section { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.4rem; } .attention-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.4rem; } .attention-value { font-weight: 700; } .attention-detail { display: flex; flex-direction: column; margin-top: .3rem; } .attention-detail span { color: var(--muted); font-size: .85rem; } /* Owner-facing alerts above "מה דורש טיפול היום" (manage/_tenant_alerts.html). Same card geometry as .attention-row so the two read as one column, with a warning tint and an accent edge to mark it as the thing to look at first. The whole block is absent, not empty, when there is nothing to report. */ .tenant-alerts { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.4rem; } .tenant-alert { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .45); border-inline-start: 4px solid #d97706; border-radius: 14px; padding: 1rem 1.4rem; } .tenant-alert-title { font-weight: 700; } .tenant-alert-detail { color: var(--muted); font-size: .9rem; margin-top: .3rem; } .tenant-alert-items { margin: .4rem 0 0; padding-inline-start: 1.1rem; font-size: .92rem; } .tenant-alert-items li { margin-top: .15rem; } .tenant-alert-actions { display: flex; align-items: center; gap: .5rem; } .tenant-alert-dismiss { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0 .3rem; } .tenant-alert-dismiss:hover { color: inherit; } .cards { display: flex; gap: 1.2rem; flex-wrap: wrap; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1.2rem 1.4rem; min-width: 220px; } .card-label { color: var(--muted); font-size: .85rem; margin-bottom: .4rem; } .card-value { font-size: 1.5rem; font-weight: 700; } .card-value.small { font-size: 1rem; } .card code { background: var(--bg); padding: .2rem .4rem; border-radius: 6px; } .copy-field-wrap { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; } .copy-field-wrap input, .copy-field-wrap .card-value { flex: 1; min-width: 0; } .copy-field-wrap .card-value code { display: block; overflow-x: auto; white-space: nowrap; } .empty-state { background: var(--panel); border: 1px dashed var(--border); border-radius: 14px; padding: 2rem; color: var(--muted); text-align: center; line-height: 1.7; } .inline-form { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .inline-form input, .inline-form select, .inline-form textarea { padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 1rem; font-family: inherit; } .inline-form input:focus, .inline-form select:focus, .inline-form textarea:focus { outline: 2px solid var(--accent); } .data-table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 12px; overflow: hidden; } .data-table th, .data-table td { text-align: start; padding: .7rem 1rem; border-bottom: 1px solid var(--border); } .data-table th { background: var(--panel-2); color: var(--muted); font-weight: 600; } .task-list { list-style: none; display: flex; flex-direction: column; gap: 0; } .tabs { display: flex; gap: .5rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--border); } .tab { padding: .6rem 1rem; } .tab.active { color: var(--accent-2); border-bottom: 2px solid var(--accent); font-weight: 700; } .settings-tabs { margin-bottom: 1.6rem; } .settings-tabs .tab { text-decoration: none; color: var(--muted); padding: .6rem 1rem; display: inline-block; } .settings-tabs .tab:hover { color: var(--text); } /* profile form */ .profile-form { display: flex; flex-direction: column; gap: 1.2rem; } .profile-form fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.2rem; } .profile-form legend { color: var(--muted); font-size: .9rem; padding: 0 .4rem; } .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: .6rem; } .profile-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--muted); } .profile-form input { padding: .6rem .75rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1rem; font-family: inherit; } .profile-form input:focus { outline: 2px solid var(--accent); } .profile-form input:disabled { opacity: .5; cursor: not-allowed; } .field-readonly label, .field-readonly { opacity: .7; } /* logo */ .logo-preview { margin: .8rem 0; } .logo-preview img { max-height: 120px; max-width: 100%; border-radius: 10px; border: 1px solid var(--border); background: #fff; padding: .4rem; } .logo-form { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .8rem; } .logo-upload-label { display: flex; align-items: center; cursor: pointer; } .logo-input { display: none; } .logo-preview-new { max-height: 80px; border-radius: 8px; margin-top: .5rem; display: block; } .book-logo-circle { width: 110px; height: 110px; border-radius: 50%; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; margin: 0 auto .8rem; box-shadow: 0 2px 16px rgba(0,0,0,.18); } .book-logo { width: 90%; height: 90%; object-fit: contain; display: block; } /* ---------- Settings / calendar management ---------- */ /* Shared box for every flash; the .flash-{kind} modifier below supplies the colors, so a refusal stops reading like the confirmation it is not. The border geometry stays HERE, transparent, and the modifiers only recolor it: manage/messages.html's phone-token banner is a bare .flash that sets border-color inline, and a colour with no width or style renders nothing. */ .flash { padding: .7rem 1rem; border-radius: 10px; margin-bottom: 1.4rem; border: 1px solid transparent; } /* Both tints are OPAQUE and both are light-on-dark inversions of the page, which .flash-floating depends on twice over: it renders this same box as a fixed overlay with no background of its own, so a translucent tint shows the page content straight through the message. The default/success strip is the brand blue (#4B5FE8), not the green --accent it used to borrow — border and text are the blue itself and a darker shade of the same hue, over a light tint of it. */ .flash-ok { background: #E8EBFC; border-color: #4B5FE8; color: #2F3EAE; } /* The same construction in red (7.1:1 on its own tint). NOT .alert's colours: that one is translucent over the dark page and pairs a LIGHT red text with it, which on this opaque light tint would be unreadable — and --danger (#f87171) is likewise picked to sit on the dark background, not on this. */ .flash-error { background: #FCE8E8; border-color: #DC2626; color: #991B1B; } /* A flash delivered by an htmx fragment swap, rather than by a page load. The in-flow message above sits at the top of .content, which worked only because every action used to reload the page and land the user back up there to read it. A fragment swap deliberately leaves them where they were, so the same message would be off-screen — it has to come to them instead. Below the modal backdrop (z-index 200): a confirmation the user is still answering matters more than the result of the last action. */ .flash-floating { position: fixed; top: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 150; margin-bottom: 0; max-width: min(90vw, 34rem); box-shadow: 0 10px 30px rgba(31,42,120,.38); animation: flash-in .18s ease-out, flash-out .45s ease-in 4s forwards; } @keyframes flash-in { from { opacity: 0; transform: translate(-50%, -.6rem); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes flash-out { to { opacity: 0; visibility: hidden; } } /* The message must not vanish on its own for anyone who has asked the system to stop animating — it just stays until the next action replaces it. */ @media (prefers-reduced-motion: reduce) { .flash-floating { animation: none; } } /* ── working hours ── */ .wh-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .6rem .8rem; margin-bottom: .45rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; } /* [data-il-time] is time-il.js's visible box (ADR-192) — a type="text" input standing in front of the real, hidden type="time" one, so it no longer matches the attribute selector these boxes were styled by. Without it the working-hours row renders as bare white UA inputs in a dark panel. */ .wh-row input[type="time"], .wh-row input[data-il-time] { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .38rem .5rem; font-family: inherit; font-size: .95rem; width: 7rem; } .wh-row input[type="time"]:focus, .wh-row input[data-il-time]:focus { outline: 2px solid var(--accent); } .wh-dash { color: var(--muted); font-size: 1.1rem; } .wh-days { display: flex; gap: .28rem; flex-wrap: wrap; } .wh-pill { cursor: pointer; } .wh-pill input { display: none; } /* hide real checkbox */ .wh-pill span { display: inline-block; padding: .28rem .55rem; border-radius: 999px; border: 1px solid var(--border); font-size: .82rem; font-weight: 700; color: var(--muted); transition: background .12s, border-color .12s, color .12s; user-select: none; } .wh-pill input:checked + span { background: rgba(16,185,129,.2); border-color: var(--accent); color: var(--accent-2); } .wh-remove { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: .1rem .35rem; border-radius: 6px; line-height: 1; margin-inline-start: auto; } .wh-remove:hover { color: var(--danger); background: rgba(248,113,113,.1); } .wh-footer { display: flex; gap: .7rem; align-items: center; margin-top: .7rem; } .settings-section { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem 1.6rem; margin-bottom: 1.6rem; } .settings-section h2 { margin-top: 0; } .settings-section .btn { margin-top: 1rem; } .open-form { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; } .open-form.auto { margin-bottom: 1.4rem; } .open-form label { display: flex; flex-direction: column; gap: .3rem; color: var(--muted); font-size: .9rem; } .open-form .btn { margin-top: 0; } .open-form input[type="date"], .open-form input[type="number"] { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .45rem .5rem; min-width: 150px; } .open-form input[type="date"]:focus, .open-form input[type="date"]:hover { outline: 2px solid var(--accent); } .checkbox-inline { flex-direction: row !important; align-items: center; gap: .4rem !important; } .btn-link { background: none; border: none; color: var(--accent-2); cursor: pointer; font-family: inherit; font-size: .9rem; padding: 0; text-decoration: underline; } .btn-link.danger { color: var(--danger); } /* booking confirmation message */ .booking-message { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.35); border-radius: 12px; padding: 1rem 1.2rem; color: var(--text); margin: 1rem 0; font-size: 1rem; line-height: 1.6; white-space: pre-wrap; text-align: right; } /* appointment type rows */ .types-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; } .type-row { display: flex; align-items: center; justify-content: space-between; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: .6rem 1rem; gap: 1rem; } .type-info { display: flex; align-items: center; gap: 1rem; flex: 1; } .type-name { font-weight: 600; } .type-dur { font-size: .9rem; } .type-actions { display: flex; align-items: center; gap: 1rem; } .type-edit-form { display: flex; align-items: center; gap: .5rem; flex: 1; flex-wrap: wrap; } .type-edit-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .type-price { color: var(--accent-2); font-weight: 700; font-size: .95rem; } .price-sep { margin: 0 .1rem; } .type-meta { color: var(--muted); font-size: .9rem; } .type-has-msg { font-size: 1rem; cursor: default; } .type-msg-toggle { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .9rem; margin-top: .4rem; cursor: pointer; } .type-msg-area { width: 100%; margin-top: .4rem; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: inherit; font-size: .95rem; resize: vertical; min-height: 70px; } .type-msg-area:focus { outline: 2px solid var(--accent); } .type-edit-btns { display: flex; gap: .5rem; margin-top: .6rem; } .add-type-details { margin-top: .8rem; } .add-type-details summary { color: var(--accent-2); } .add-type-details[open] summary { margin-bottom: .2rem; } .type-edit-form input { padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: inherit; font-size: .95rem; flex: 1; min-width: 6rem; } .type-edit-form input:focus { outline: 2px solid var(--accent); } /* per-minute service pricing (ADR-269): mode switch, prep-time fields and the * live indicator under them. `.type-edit-form input` above already styles * every plain here regardless of nesting — this block only covers * the markup this feature added that no earlier screen had. */ .svc-modes { display: flex; gap: .5rem; width: 100%; } .svc-mode { display: flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); font-size: .9rem; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .svc-mode:has(input:checked) { border-color: var(--accent); color: var(--text); background: var(--panel-2); } .svc-mode input { accent-color: var(--accent); } /* `.svc-fixed`/`.svc-per-minute` have their own `display` (block/none) set * inline by Jinja on first paint and by svcMode() on every switch — this * only fixes their WIDTH as flex items of `.type-edit-form`, never `display` * itself, which the inline style always wins over anyway. */ .svc-fixed, .svc-per-minute { width: 100%; } .svc-per-minute > * + * { margin-top: .6rem; } .svc-hint { margin: 0; } .svc-prep-fields { gap: 1.2rem; flex-wrap: wrap; } .svc-prep-fields label, .svc-preview-input { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--muted); } .svc-preview { width: 100%; } .svc-preview-line { margin: 0 0 .5rem; font-weight: 600; color: var(--accent-2); } .svc-preview-calendar { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .9rem; } .svc-preview-title { font-weight: 700; margin-bottom: .3rem; } .svc-preview-bar { margin: .4rem 0; } .svc-preview-total { margin: 0; color: var(--muted); } /* ---------- Calendar — week view (Google-style) ---------- */ .cal-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; } .cal-nav { display: flex; align-items: center; gap: .5rem; } .cal-week-label { font-size: 1.1rem; font-weight: 700; min-width: 16rem; text-align: center; } .btn-sm { padding: .35rem .8rem; font-size: .9rem; } /* Same height as the "+ פגישה חדשה" button next to them (.add-appt-btn, 40px) — the arrows/"היום"/date-jump used to rely on .btn-sm's own (shorter) padding-driven height, so the whole toolbar row read uneven. */ .cal-nav .btn, .cal-nav .cal-jump { height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } .cal-today-btn { background: #4B5FE8; color: #fff; } .cal-today-btn:hover { background: #3d4fd1; } /* ── week-wrap: flex column, fixed height ── */ .week-wrap { display: flex; flex-direction: column; height: calc(100vh - 148px); border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; } /* ── fixed header row (never scrolls) ── */ .week-header-row { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* hide scrollbar — synced by JS */ } .week-header-row::-webkit-scrollbar { display: none; } .gutter-head { min-width: 3.6rem; flex-shrink: 0; border-inline-end: 1px solid var(--border); } .day-head { flex: 1; display: flex; flex-direction: column; align-items: center; padding: .5rem .25rem .4rem; gap: .1rem; border-inline-end: 1px solid var(--border); min-width: 80px; } .day-head.open { background: rgba(16,185,129,.07); } .day-head.closed { background: #16202e; } .day-head.vacation { background: rgba(245,158,11,.14); } .day-head.today { border-bottom: 2px solid #60a5fa; } .day-vacation-tag { font-size: .66rem; font-weight: 700; color: #f59e0b; background: rgba(245,158,11,.15); border-radius: 6px; padding: .04rem .35rem; margin-top: .1rem; } .day-wd { font-size: .72rem; color: var(--muted); text-transform: uppercase; } .day-num { font-size: 1rem; font-weight: 700; } .day-heb-date { font-size: .68rem; color: var(--heb-date); font-weight: 600; } .day-head.today .day-num { background: #3b82f6; color: #fff; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* ── scrollable body ── */ .week-body-scroll { display: flex; flex: 1; overflow-y: auto; overflow-x: auto; } /* time gutter */ .time-gutter { min-width: 3.6rem; flex-shrink: 0; position: relative; border-inline-end: 1px solid var(--border); } .hour-label { position: absolute; right: .4rem; transform: translateY(-50%); font-size: .72rem; color: var(--muted); white-space: nowrap; } /* 7-column grid */ .week-grid { display: grid; grid-template-columns: repeat(7, minmax(80px, 1fr)); flex: 1; min-width: 0; } .day-col { border-inline-end: 1px solid var(--border); } .day-col:last-child { border-inline-end: none; } /* day body — the actual time canvas */ .day-body { position: relative; cursor: pointer; } .day-body:hover { background: rgba(255,255,255,.025); } /* hour lines */ .hline { position: absolute; inset-inline: 0; border-top: 1px solid var(--border); opacity: .5; } /* working-hour highlight */ .work-band { position: absolute; inset-inline: 0; background: rgba(16,185,129,.08); pointer-events: none; } /* vacation day overlay (full-day "יום חופש" block) */ .vacation-overlay { position: absolute; inset: 0; z-index: 6; background: repeating-linear-gradient(135deg, rgba(245,158,11,.10), rgba(245,158,11,.10) 10px, rgba(245,158,11,.18) 10px, rgba(245,158,11,.18) 20px); display: flex; align-items: flex-start; justify-content: center; padding-top: 1.5rem; pointer-events: none; } .vacation-overlay span { font-size: .8rem; font-weight: 700; color: #f59e0b; background: rgba(20,24,34,.85); border-radius: 8px; padding: .25rem .6rem; } /* event blocks */ .event-block { position: absolute; inset-inline: 3px; background: #1d4ed8; border-radius: 6px; padding: .2rem .35rem; overflow: hidden; text-decoration: none; color: #fff; display: flex; flex-direction: column; gap: .05rem; box-shadow: 0 2px 8px rgba(0,0,0,.35); transition: filter .12s; cursor: pointer; z-index: 1; } .event-block:hover { filter: brightness(1.15); } /* `color: #fff` above is not the last word on the light pages: a pair of generic link rules in manage-light.css outrank it — one for the resting state, one for `:hover` — and used to repaint this text in the same blue as the block's background. Both are answered there, next to the background they have to contrast against, not here. The GPU-layer promotion (`transform: translateZ(0)`, `backface-visibility`, `isolation`) and the `position:relative; z-index:1` on the spans that used to sit here were attempts at the same symptom under the theory that Chrome was skipping the text on first paint. It never was: the text painted correctly all along, in a colour identical to what was behind it. Removed rather than left in place, since neither had any effect and both pointed the next reader at the wrong layer. */ .ev-time { font-size: .7rem; opacity: .85; } .ev-subject { font-size: .8rem; font-weight: 700; line-height: 1.2; } .ev-client { font-size: .75rem; opacity: .8; } .task-block { background: #7c3aed; } .task-block.task-done { background: #6b7280; } .allday-task { height: 22px !important; top: 2px !important; } /* ---------- Appointment form ---------- */ .form-page { display: flex; justify-content: center; padding: 1rem 1.5rem 3rem; } .form-card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 2rem; width: 100%; max-width: 540px; box-shadow: 0 20px 60px rgba(0,0,0,.3); } .form-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .form-card-header h1 { margin: 0; font-size: 1.4rem; } .appt-form { display: flex; flex-direction: column; gap: 1rem; } .appt-form label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; color: var(--muted); } .appt-form input, .appt-form select, .appt-form textarea { padding: .6rem .75rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1rem; font-family: inherit; resize: vertical; } .appt-form input:focus, .appt-form select:focus, .appt-form textarea:focus { outline: 2px solid var(--accent); } .appt-datetime { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .appt-actions { display: flex; gap: .7rem; align-items: center; margin-top: .5rem; } /* delete form sits directly after the edit form — keep them visually together */ .delete-form { margin-top: .5rem; } .btn-danger { color: var(--danger) !important; border-color: var(--danger) !important; } .btn-full { width: 100%; } /* ═══════════ Public booking page ═══════════ */ body.book-page { background: radial-gradient(circle at 60% 10%, #134e4a 0%, var(--bg) 55%); min-height: 100vh; } .book-header { text-align: center; padding: 1.4rem 1rem .6rem; } .book-brand { font-size: 1.5rem; font-weight: 800; background: linear-gradient(90deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .book-message-link { display: block; margin-top: .5rem; font-size: .85rem; color: var(--muted); text-decoration: none; } .book-message-link:hover { color: var(--accent-2); } .book-main { display: flex; justify-content: center; padding: .5rem 1rem 3rem; } .book-card { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 2rem 1.6rem; width: 100%; max-width: 640px; box-shadow: 0 24px 60px rgba(0,0,0,.35); } .book-card h1 { margin-bottom: .5rem; } .book-step-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; flex-wrap: wrap; gap: .5rem; } .book-step-header h1 { margin: 0; } .type-badge { background: rgba(16,185,129,.15); color: var(--accent-2); padding: .3rem .8rem; border-radius: 999px; font-size: .9rem; font-weight: 600; } /* type selection list */ .type-list { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.2rem; } .type-item { display: flex; align-items: center; justify-content: space-between; background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.2rem; text-decoration: none; color: var(--text); transition: border-color .15s, background .15s; } .type-item:hover { border-color: var(--accent); background: rgba(16,185,129,.08); } .type-name { font-weight: 700; font-size: 1.05rem; } .type-dur { color: var(--muted); font-size: .9rem; } /* step label */ .step-label { font-size: 1rem; color: var(--muted); font-weight: 600; margin: 1.4rem 0 .8rem; } /* circles row — shared by days and times */ .circles-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .5rem; } /* day circles */ .circle { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--border); background: var(--panel-2); text-decoration: none; color: var(--text); cursor: pointer; gap: .05rem; padding: 0; transition: border-color .15s, background .15s, transform .1s; font-family: inherit; } .circle:hover { border-color: var(--accent); transform: scale(1.06); } .circle.selected { border-color: var(--accent); background: rgba(16,185,129,.18); color: var(--accent-2); font-weight: 700; } .c-top { font-size: .68rem; color: var(--muted); } .c-mid { font-size: 1.15rem; font-weight: 800; line-height: 1.1; } .c-bot { font-size: .62rem; color: var(--muted); } /* free-time windows (ADR-278) — a card per contiguous range, split by part of the day; the start times live inside it and open on click. */ .times-section { margin-top: .6rem; border-top: 1px solid var(--border); padding-top: 1.2rem; } .range-group { margin-bottom: 1.1rem; } .range-part { font-size: .82rem; font-weight: 700; color: var(--muted); margin: 0 0 .5rem; letter-spacing: .02em; } .range-card { background: var(--panel-2); border: 1px solid rgba(16,185,129,.35); border-radius: 14px; margin-bottom: .6rem; overflow: hidden; } .range-card[open] { border-color: var(--accent); } .range-summary { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .85rem 1rem; cursor: pointer; font-weight: 700; list-style: none; } .range-summary::-webkit-details-marker { display: none; } .range-summary::after { content: "▾"; color: var(--muted); font-size: .8rem; transition: transform .15s; } .range-card[open] .range-summary::after { transform: rotate(180deg); } .range-summary:hover { background: rgba(16,185,129,.08); } .range-window { color: var(--text); } .range-count { color: var(--muted); font-size: .8rem; font-weight: 600; } /* The start times: one horizontal, scrollable strip per window, so a long morning never pushes the next window off the screen. */ .range-times { display: flex; gap: .45rem; overflow-x: auto; scroll-snap-type: x proximity; padding: .2rem 1rem 1rem; -webkit-overflow-scrolling: touch; } .range-time { flex: 0 0 auto; scroll-snap-align: start; min-width: 68px; padding: .55rem .3rem; border-radius: 10px; border: 1px solid rgba(16,185,129,.35); background: rgba(16,185,129,.1); color: var(--text); font-family: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; } .range-time:hover { background: rgba(16,185,129,.22); border-color: var(--accent); } .range-time:active { transform: scale(.96); } .change-date { margin-top: 1rem; } .change-date a { color: var(--muted); font-size: .9rem; text-decoration: none; } .change-date a:hover { color: var(--accent-2); } /* slot badge */ .slot-badge { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); border-radius: 12px; padding: .7rem 1rem; color: var(--accent-2); font-weight: 600; margin: 1rem 0 1.4rem; font-size: 1rem; } .slot-badge.large { font-size: 1.1rem; padding: 1rem 1.2rem; } /* details form */ .details-form { display: flex; flex-direction: column; gap: .9rem; } .details-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--muted); } .details-form input, .details-form textarea { padding: .65rem .8rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1rem; font-family: inherit; resize: vertical; } .details-form input:focus, .details-form textarea:focus { outline: 2px solid var(--accent); } .small { font-size: .85rem; margin-top: .8rem; } .consent-notice { font-size: .82rem; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .9rem; margin-bottom: .2rem; } /* confirmed */ .confirmed-card { text-align: center; padding: 2.5rem 1.6rem; } .confirmed-icon { font-size: 3rem; margin-bottom: 1rem; } .confirmed-card h1 { margin-bottom: .5rem; } .confirmed-card .btn { margin-top: 1.5rem; } /* ═══════════ Calendar toolbar extras ═══════════ */ .cal-jump { padding: .25rem .5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: .82rem; cursor: pointer; } .cal-jump:focus { outline: 2px solid var(--accent); } .btn.active { background: rgba(16,185,129,.18); border-color: var(--accent); } /* ═══════════ Month calendar grid ═══════════ */ .month-grid { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .month-header-row { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--panel-2); border-bottom: 1px solid var(--border); } .month-wd-head { text-align: center; padding: .5rem 0; font-size: .82rem; color: var(--muted); font-weight: 700; } .month-week-row { display: grid; grid-template-columns: repeat(7, 1fr); } .month-cell { min-height: 110px; padding: .35rem .4rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; overflow: hidden; } .month-cell:first-child { border-right: none; } .month-cell:hover { background: rgba(16,185,129,.06); } .month-cell.other-month { opacity: .35; cursor: default; } .month-cell.other-month:hover { background: transparent; } .month-cell.today .month-day-num { background: var(--accent); color: #000; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } .month-cell.closed { background: repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(255,255,255,.02) 6px, rgba(255,255,255,.02) 12px); } .month-cell.vacation { background: repeating-linear-gradient(135deg, rgba(245,158,11,.07), rgba(245,158,11,.07) 7px, rgba(245,158,11,.15) 7px, rgba(245,158,11,.15) 14px); } .month-cell.vacation:hover { background: rgba(245,158,11,.18); } .month-day-head { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .25rem; flex-wrap: wrap; } .month-day-num { font-size: .88rem; font-weight: 700; color: var(--text); line-height: 1; } .month-holiday { font-size: .72rem; color: var(--accent-2); font-weight: 600; white-space: nowrap; } .month-vacation { font-size: .72rem; color: #f59e0b; font-weight: 700; white-space: nowrap; } .month-heb-date { font-size: .68rem; color: var(--heb-date); font-weight: 600; margin: -.05rem 0 .3rem; white-space: nowrap; } .month-event { display: block; font-size: .75rem; padding: .15rem .35rem; background: rgba(16,185,129,.18); border-radius: 5px; color: var(--text); text-decoration: none; margin-bottom: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .12s; } .month-event:hover { background: rgba(16,185,129,.35); } .month-ev-time { color: var(--accent); font-weight: 700; } /* ═══════════ Tasks ═══════════ */ .task-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0; } /* Task status: the badge that names it and the three controls that change it. Shared, not page-scoped — the tasks page's rows and the dashboard's task panel both draw them from manage/_task_status_macros.html, so one definition of the markup deserves one definition of the look. */ .task-status-badge { font-size:.75rem; font-weight:700; padding:.18rem .55rem; border-radius:99px; white-space:nowrap; } .status-pill-pending { background:rgba(148,163,184,.18); color:var(--muted); } .status-pill-in_progress { background:rgba(251,191,36,.18); color:#fbbf24; } .status-pill-completed { background:rgba(16,185,129,.18); color:var(--accent-2); } .task-status-btns { display:flex; gap:.25rem; flex-shrink:0; } /* Icon-only (explicit request — used to carry a text label too); square and fixed-size instead of hugging the old label's width. title= on each button (in the template) is the tooltip/accessible name now that there is no visible text. */ .ts-btn { width:1.6rem; height:1.6rem; padding:0; line-height:1; background:none; border:1px solid var(--border); border-radius:6px; color:var(--muted); cursor:pointer; font-size:.8rem; display:flex; align-items:center; justify-content:center; } .ts-btn:hover { border-color:var(--accent); color:var(--text); } .ts-inprog:hover { border-color:#fbbf24; color:#fbbf24; } .ts-done:hover { border-color:var(--accent); color:var(--accent-2); } .task-item { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .9rem; } .task-item.done { opacity: .55; } .task-item.done .task-title { text-decoration: line-through; } .task-top { display: flex; align-items: center; gap: .6rem; } .task-check { background: none; border: 2px solid var(--border); border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: .9rem; color: var(--accent); flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; } .task-item.done .task-check { border-color: var(--accent); background: rgba(16,185,129,.15); } .task-title { flex: 1; font-weight: 600; } .task-due { font-size: .8rem; color: var(--muted); white-space: nowrap; } .task-desc { font-size: .85rem; color: var(--muted); margin-top: .35rem; padding-right: 2rem; } .inbox-message-content { white-space: pre-wrap; } /* ═══════════ Modal ═══════════ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 200; } .modal-box { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 1.8rem; min-width: 320px; max-width: 90vw; } .modal-box h3 { margin: 0 0 1.2rem; } .form-row { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; } .form-row label { font-size: .85rem; color: var(--muted); } .form-row input, .form-row select, .form-row textarea { padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1rem; font-family: inherit; } .form-row textarea { resize: vertical; min-height: 72px; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 2px solid var(--accent); } .form-actions { display: flex; gap: .7rem; margin-top: .4rem; } /* table action column */ .row-actions { white-space: nowrap; } /* ═══════════ Search & filter bar ═══════════ */ .search-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .search-input { flex: 1; min-width: 200px; padding: .5rem .8rem; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: .95rem; font-family: inherit; color-scheme: dark; } .search-input:focus { outline: 2px solid var(--accent); } .filter-pills { display: flex; gap: .35rem; flex-wrap: wrap; } .filter-pill { padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: .85rem; cursor: pointer; font-family: inherit; white-space: nowrap; text-decoration: none; display: inline-block; transition: background .12s, border-color .12s, color .12s; } .filter-pill:hover { border-color: var(--accent); color: var(--text); } .filter-pill.active { background: rgba(16,185,129,.18); border-color: var(--accent); color: var(--accent-2); font-weight: 600; } /* calendar week/month toggle — same height as the "+ פגישה חדשה" button next to it */ .cal-view-toggle { display: flex; gap: .4rem; align-items: center; } .cal-view-toggle .filter-pill { height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; } /* ═══════════ Cash-flow form ═══════════ */ .cf-form input, .cf-form select, .cf-form textarea { padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: .95rem; font-family: inherit; color-scheme: dark; } .cf-form select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2394a3b8' d='M5 6L0 0h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left .65rem center; padding-left: 1.8rem; } .cf-form input:focus, .cf-form select:focus, .cf-form textarea:focus { outline: 2px solid var(--accent); } .cf-select { padding: .35rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: inherit; font-size: .95rem; color-scheme: dark; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2394a3b8' d='M5 6L0 0h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left .65rem center; padding-left: 1.8rem; } .cf-select:focus { outline: 2px solid var(--accent); } .cf-dropdown { display: none; position: absolute; top: 100%; right: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.4); z-index: 50; min-width: 260px; max-height: 220px; overflow-y: auto; } .cf-dropdown-item { padding: .55rem .9rem; cursor: pointer; border-bottom: 1px solid var(--border); color: var(--text); font-size: .9rem; } .cf-dropdown-item:last-child { border-bottom: none; } .cf-dropdown-item:hover { background: var(--panel-2); } /* appointment status badges */ .status-badge { display:inline-block; padding:.15rem .55rem; border-radius:99px; font-size:.8rem; font-weight:600; } .status-booked { background:#dbeafe; color:#1d4ed8; } .status-completed { background:#dcfce7; color:#15803d; } .status-canceled { background:#fee2e2; color:#b91c1c; } .status-no_show { background:#fef9c3; color:#854d0e; } /* phone-charge origin/verification badge (ADR-032) */ .phone-charge-badge { display:inline-block; margin-inline-start:.4rem; padding:.1rem .5rem; border-radius:99px; font-size:.72rem; font-weight:600; white-space:nowrap; } .phone-charge-verified { background:#dcfce7; color:#15803d; } .phone-charge-unverified { background:#fef9c3; color:#854d0e; } /* toggle switch */ .toggle-label { display:inline-flex; align-items:center; cursor:pointer; gap:.5rem; } .toggle-input { position:absolute; opacity:0; width:0; height:0; } .toggle-track { position:relative; display:inline-block; width:44px; height:24px; border-radius:12px; background:var(--border); transition:background .2s; flex-shrink:0; } .toggle-track::after { content:''; position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; } .toggle-input:checked + .toggle-track { background:var(--accent); } .toggle-input:checked + .toggle-track::after { transform:translateX(-20px); } /* ── Manage lists: the row that closes every table (ADR-178) ────────────── Count line, and while rows are left, the control that appends the next chunk. It is a real table row (see manage/_list_foot.html for why), so it gets its own quieter treatment rather than reading as data. */ .data-table tr.list-foot > td { text-align: center; padding: .9rem .6rem; border-bottom: none; } .data-table tr.list-foot .list-count { display: block; margin-top: .45rem; font-size: .85rem; } .data-table tr.list-foot .load-more-btn { min-width: 12rem; } .list-toolbar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } /* Sits between the toolbar and the list/table below it (clients page, status board on) — had no margin of its own, so the gap the toolbar now carries (manage-light.css's .search-bar.list-toolbar) closed right back up whenever this row was in between. */ .view-toggle { margin-bottom: 1rem; } /* The rows are what swaps, so they are what dims: `hx-indicator` puts htmx-request on the swap target itself (a tbody, or the tasks