/* GTSM — PulseBoard dashboard: Ink/dark extended palette, Signal Red brand + Cyan Spark energy, Blender Pro (Hebrew) / PP Neue Montreal (English & numbers), WorkModeBadge header, cardIn entrance, fully responsive from 4K down to Galaxy Z Fold closed. */ @font-face { font-family:'Blender Pro'; src:url('../fonts/Blender-Light.9c99116393b8b3f17916f1f3b6d06998.woff2') format('woff2'); font-weight:300; font-display:swap; } @font-face { font-family:'Blender Pro'; src:url('../fonts/Blender-Regular.8230a21a71ee7cdaab4e6d8fd8b4c472.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Blender Pro'; src:url('../fonts/Blender-Bold.69fde62d77c995aab90d8568925986ba.woff2') format('woff2'); font-weight:700; font-display:swap; } @font-face { font-family:'Blender Pro'; src:url('../fonts/Blender-Black.129d546a19a68c88a5aa0a4d68465d4b.woff2') format('woff2'); font-weight:900; font-display:swap; } @font-face { font-family:'PP Neue Montreal'; src:url('../fonts/PPNeueMontrealTT-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'PP Neue Montreal'; src:url('../fonts/PPNeueMontrealTT-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; } /* Theme tokens matched to punch/HEARTBEAT (C:\Users\user\punch\style.css) — same GTSM 2026 palette, same variable roles, same mechanism: LIGHT is the default, dark is opt-in via .dark-mode on , toggled + persisted in localStorage (see assets/js/app.js initTheme). */ :root { --ink: #15110F; --bg: #F0EEE9; /* Bone */ --bg-elev: #ffffff; /* bg-card */ --bg-elev-2: #E8E4DA; /* bg-card-2 */ --border: #d9d4c9; --text: #15110F; /* Ink */ --text-dim: #6b645c; --text-3: #a39d92; --accent: #ED213A; /* Signal Red — brand */ --accent-2: #0C9C86; /* Cyan Spark, darkened for legible text on Bone */ --accent-2-bg: #15E0C0; /* true Cyan Spark — backgrounds/dots/borders only */ --blue: #2D5BFF; /* Volt Blue — clash accent, used sparingly */ --yellow: #FFD23F; --danger: #ED213A; --warn: #b8790a; --green: #16A34A; /* Flat design — no rounded corners, no shadows, per the established GTSM internal-tool rule */ --radius: 0; --radius-sm: 0; --shadow: none; --shadow-sm: none; font-family: 'Blender Pro', 'Rubik', sans-serif; } html.dark-mode, body.dark-mode { --bg: #080C12; /* midnight */ --bg-elev: #0E1219; --bg-elev-2: #141A24; --border: #1E2535; --text: #F0EEE9; /* Bone */ --text-dim: #7A8599; --text-3: #3D4A5C; --accent-2: #15E0C0; /* bright Cyan Spark reads fine directly on Ink */ --accent-2-bg: #15E0C0; --warn: #F59E0B; --green: #22C55E; } .pp, input, select, textarea, .status-pill, .date, code { font-family: 'PP Neue Montreal', 'Blender Pro', sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: inherit; } body { direction: rtl; min-height: 100vh; } /* Smooth cross-fade when the theme toggles (same pattern as punch/better-half-clone) */ body, body * { transition: background-color .45s ease, border-color .45s ease, color .3s ease; } a { color: var(--accent-2); text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* Dual logo (light/dark) — same pattern as punch/better-half-clone: swap by theme, not recolor */ img.logo-dark { display: none; } html.dark-mode img.logo-light { display: none; } html.dark-mode img.logo-dark { display: block; } .theme-toggle-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s ease; } .theme-toggle-btn:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle-btn svg { width: 16px; height: 16px; } @keyframes cardIn { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes wm-blink { 0%, 49%, 100% { opacity: 1; } 50%, 99% { opacity: 0.2; } } .card-in { animation: cardIn 0.35s cubic-bezier(0.22,1,0.36,1) forwards; } .fade-up { animation: fadeUp 0.3s ease both; } .slide-up { animation: slideUp 0.25s ease both; } /* #app is a column: .app-body (sidebar+main, grows to fill) on top, footer pinned below it — so the footer always sits at the bottom of the viewport, never just at the end of content. */ #app { display: flex; flex-direction: column; min-height: 100vh; } .app-body { display: flex; flex: 1; min-height: 0; } /* ── Work Mode badge ── */ .work-mode-badge { display: flex; align-items: center; gap: 6px; } .work-mode-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; flex-shrink: 0; animation: wm-blink 1.8s infinite; } .work-mode-label { font-family: 'PP Neue Montreal', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } /* ── Sidebar ── */ .sidebar { width: 260px; flex-shrink: 0; background: var(--bg-elev); border-left: 1px solid var(--border); padding: 20px 16px; display: flex; flex-direction: column; gap: 20px; } .brand-lockup { display: flex; align-items: center; gap: 10px; } .brand-lockup img { height: 22px; width: auto; flex-shrink: 0; } .sidebar h1 { font-family: 'PP Neue Montreal', sans-serif; font-size: 19px; margin: 0; letter-spacing: .3px; font-weight: 500; } .sidebar h1 span { color: var(--accent-2); font-weight: 700; } .client-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1; } .client-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; cursor: pointer; border-radius: var(--radius-sm); background: transparent; border: 1px solid transparent; color: var(--text); } .client-item:hover { background: var(--bg-elev-2); } .client-item.active { background: var(--bg-elev-2); border-color: var(--accent); } .client-item.dragging { opacity: .4; } .client-item .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: 8px; flex-shrink: 0; } .client-drag-handle { color: var(--text-3); font-size: 14px; cursor: grab; flex-shrink: 0; touch-action: none; user-select: none; padding: 2px 4px; transition: color .15s; } .client-item:hover .client-drag-handle { color: var(--text-dim); } .client-item.dragging { opacity: .5; } .client-item.dragging .client-drag-handle { cursor: grabbing; } .client-item .badge { font-size: 11px; font-family: 'PP Neue Montreal', sans-serif; background: var(--warn); color: var(--ink); border-radius: 20px; padding: 2px 8px; } .client-item-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .client-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .client-avatar-fallback { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; font-family: 'Blender Pro', 'PP Neue Montreal', sans-serif; } .client-edit-btn { opacity: 0; transition: opacity .15s; flex-shrink: 0; } .client-item:hover .client-edit-btn, .client-item.active .client-edit-btn { opacity: .7; } .client-edit-btn:hover { opacity: 1 !important; } .client-social-links { display: inline-flex; gap: 8px; margin-right: 10px; font-size: 15px; vertical-align: middle; } .client-social-links a { display: inline-flex; align-items: center; color: var(--text-dim); opacity: .75; transition: opacity .15s ease, color .15s ease; } .client-social-links a:hover { opacity: 1; color: var(--accent); } .user-chip { display: flex; align-items: center; gap: 8px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--border); } .user-chip-name { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .team-row:last-child { border-bottom: none; } .team-row .name { flex: 1; } .team-row .username { color: var(--text-dim); font-family: 'PP Neue Montreal', sans-serif; } .team-row.inactive { opacity: .5; } .btn { border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text); font-weight: 500; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; transition: border-color .15s, transform .1s, opacity .15s; } .btn:hover { border-color: var(--accent-2); } .btn:active { transform: scale(.97); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .btn-primary:hover { opacity: .88; border-color: var(--accent); } .btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); font-weight: 600; } .btn-danger:hover { background: var(--danger); color: #fff; } .btn-sm { padding: 6px 10px; font-size: 12px; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ── Styled confirm dialog (replaces native confirm()) ── */ .confirm-modal { width: 380px; } .confirm-message { font-size: 15px; line-height: 1.5; margin: 4px 0 0; } .monthly-alert-list { max-height: 40vh; overflow-y: auto; margin: 10px 0; } /* ── Main ── */ .main { flex: 1; padding: 24px 32px; overflow-y: auto; min-width: 0; } .daily-greeting { font-size: 13px; color: var(--text-dim); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .daily-greeting-extra { color: var(--accent-2); font-weight: 600; } .main-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; } .main-header h2 { margin: 0; font-size: 23px; font-weight: 700; display: flex; align-items: center; } .month-nav { display: flex; align-items: center; gap: 10px; } .month-nav .label { min-width: 140px; text-align: center; font-weight: 600; } .layout-cols { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; } .side-col { display: flex; flex-direction: column; gap: 16px; } /* ── Timeline / Gantt list ── */ .timeline { display: flex; flex-direction: column; gap: 16px; } .day-group { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .15s ease; } .day-group:hover { border-color: var(--text-3); } .day-group-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg-elev-2); font-size: 13px; color: var(--text-dim); flex-wrap: wrap; } .day-group-head .weekday { color: var(--text); font-weight: 600; font-family: 'Blender Pro', sans-serif; } .day-group-head .special-chip { background: rgba(21,224,192,.14); color: var(--accent-2); border-radius: 20px; padding: 2px 10px; font-size: 12px; } .item-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px 13px 14px; border-top: 1px solid var(--border); flex-wrap: wrap; position: relative; border-right: 3px solid transparent; transition: background-color .15s ease; } .item-row:hover { background: var(--bg-elev-2); } /* Monday-style color-coded left glance bar, per status — quick scanning without reading text */ .item-row.status-accent-idea { border-right-color: var(--text-3); } .item-row.status-accent-concept { border-right-color: var(--blue); } .item-row.status-accent-to_shoot { border-right-color: var(--warn); } .item-row.status-accent-ready { border-right-color: var(--accent-2-bg); } .item-row.status-accent-sent { border-right-color: var(--blue); } .item-row.status-accent-approved { border-right-color: var(--green); } .item-row.status-accent-changes_requested { border-right-color: var(--danger); } .item-row img.thumb { width: 46px; height: 46px; border-radius: var(--radius-sm); object-fit: cover; background: #000; flex-shrink: 0; } .item-row .thumb-placeholder { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--bg-elev-2); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .item-row .meta { flex: 1; min-width: 0; } .item-row .title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item-row .sub { font-size: 12px; color: var(--text-dim); display: flex; gap: 8px; margin-top: 2px; flex-wrap: wrap; } .tag { border-radius: 20px; padding: 2px 9px; font-size: 11px; border: 1px solid var(--border); } .status-pill { border-radius: 20px; padding: 4px 10px 4px 26px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; appearance: none; -webkit-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 d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 10px center; } .status-idea { background-color: var(--bg-elev-2); color: var(--text-dim); } .status-concept { background-color: rgba(45,91,255,.14); color: var(--blue); } .status-to_shoot { background-color: rgba(184,121,10,.14); color: var(--warn); } .status-ready { background-color: rgba(12,156,134,.14); color: var(--accent-2); } .status-sent { background-color: rgba(45,91,255,.14); color: var(--blue); } .status-approved { background-color: rgba(22,163,74,.14); color: var(--green); } .status-changes_requested { background-color: rgba(237,33,58,.14); color: var(--danger); } html.dark-mode .status-concept, body.dark-mode .status-concept { color: #8fa8ff; } html.dark-mode .status-sent, body.dark-mode .status-sent { color: #7ecbee; } html.dark-mode .status-changes_requested, body.dark-mode .status-changes_requested { color: #ff8a97; } .empty-day { padding: 22px 16px; color: var(--text-dim); font-size: 13px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } /* ── Calendar grid view (shared by index.php admin + share.php client view) ── */ .view-toggle { display: flex; gap: 6px; } .view-toggle button.active { background: var(--accent); border-color: var(--accent); color: #fff; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 16px; } .cal-weekday { text-align: center; font-size: 11px; color: var(--text-dim); padding-bottom: 4px; } .cal-day { aspect-ratio: 1; border: 1px solid var(--border); background: var(--bg-elev); padding: 6px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; position: relative; } .cal-day:hover { border-color: var(--accent-2); } .cal-day.empty { visibility: hidden; cursor: default; } .cal-day.selected { border-color: var(--accent); background: rgba(237,33,58,.06); } .cal-day.today .cal-day-num { color: var(--accent-2); font-weight: 700; } .cal-day-num { font-size: 12px; color: var(--text-dim); } .cal-dots { display: flex; flex-wrap: wrap; gap: 2px; } .cal-dot { width: 6px; height: 6px; border-radius: 50%; } /* ── Sidebar: special days panel ── */ .panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .panel h3 { margin: 0 0 10px; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .12em; font-weight: 500; } .special-day-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; flex-wrap: wrap; } .special-day-row:last-child { border-bottom: none; } .special-day-row .date { color: var(--text-dim); min-width: 46px; font-size: 12px; } .special-day-row .use-btn { margin-right: auto; } /* ── Modal ── */ .modal-overlay { position: fixed; inset: 0; background: rgba(8,12,18,.75); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; } .modal { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); width: 520px; max-width: 100%; max-height: 88vh; overflow-y: auto; padding: 22px; box-shadow: var(--shadow); } .modal h3 { margin-top: 0; font-weight: 700; font-size: 18px; } .form-row { margin-bottom: 14px; } .form-row label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; } .form-row input, .form-row select, .form-row textarea { width: 100%; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 9px 10px; font-family: inherit; font-size: 14px; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--accent-2); } .form-row textarea { min-height: 80px; resize: vertical; } .form-row input[type="file"] { padding: 8px; } .form-row input[type="file"]::file-selector-button { font-family: 'PP Neue Montreal', 'Blender Pro', sans-serif; font-size: 12px; font-weight: 600; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 7px 12px; margin-left: 10px; cursor: pointer; } .form-row input[type="file"]::file-selector-button:hover { opacity: .88; } .form-row input[type="color"] { padding: 4px; cursor: pointer; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; } .checkbox-chip { display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--bg-elev-2); border: 1px solid var(--border); padding: 8px 16px; font-size: 13px; cursor: pointer; user-select: none; flex: 1 1 auto; min-width: 84px; text-align: center; transition: all .15s ease; } .checkbox-chip:hover { border-color: var(--accent-2); } .checkbox-chip:has(input:checked) { border-color: var(--accent); background: rgba(237,33,58,.08); color: var(--accent); font-weight: 600; } .checkbox-chip input { margin: 0; accent-color: var(--accent); flex-shrink: 0; } .modal-actions { display: flex; justify-content: space-between; margin-top: 18px; gap: 10px; flex-wrap: wrap; } .image-preview { width: 100%; max-height: 180px; object-fit: contain; border-radius: var(--radius-sm); margin-bottom: 8px; background: #000; } .share-box { display: flex; gap: 8px; align-items: center; background: var(--bg-elev-2); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 16px; } .share-box input { flex: 1; background: transparent; border: none; color: var(--text-dim); font-size: 13px; } .toast { position: fixed; bottom: 20px; left: 20px; right: 20px; margin: 0 auto; max-width: 360px; background: var(--accent-2-bg); color: #05201b; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13px; z-index: 100; box-shadow: 0 4px 20px rgba(0,0,0,.25); font-weight: 600; } .toast-error { background: var(--danger); color: #fff; } /* ── RTM Radar panel ── */ .rtm-modal { width: 560px; } .rtm-body { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 12px 0; } .rtm-trend-row { display: flex; align-items: center; gap: 10px; background: var(--bg-elev-2); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text); } .rtm-trend-row:hover { outline: 1px solid var(--accent-2); } .rtm-rank { font-family: 'PP Neue Montreal', sans-serif; font-weight: 700; color: var(--accent-2); min-width: 18px; } .rtm-title { flex: 1; font-size: 14px; } .rtm-traffic { color: var(--text-dim); font-size: 12px; } .rtm-error { color: var(--text-dim); font-size: 13px; text-align: center; padding: 20px; } .rtm-error a { color: var(--accent-2); } .empty-state { text-align: center; padding: 60px 20px; color: var(--text-dim); font-size: 15px; line-height: 1.6; max-width: 420px; margin: 0 auto; } /* ── Footer — "Made with ♥" + Sagigi Holdings credit, ported from better-half-clone/calendar ── */ .pulseboard-footer { border-top: 1px solid var(--border); margin-top: 32px; padding: 18px 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pulseboard-footer .footer-brand { display: flex; align-items: center; gap: 6px; font-family: 'PP Neue Montreal', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); } .pulseboard-footer .footer-heart { flex-shrink: 0; } .pulseboard-footer .footer-holding { font-family: 'PP Neue Montreal', sans-serif; font-size: 11px; letter-spacing: 1px; color: var(--text-3); } @media (max-width: 430px) { .pulseboard-footer { justify-content: center; text-align: center; } } /* ── Password show/hide toggle — ported from HEARTBEAT ── */ .password-wrap { position: relative; } .password-wrap input { padding-left: 42px; } .password-toggle { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-dim); cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: color .15s ease; } .password-toggle:hover { color: var(--accent); } .password-toggle svg { width: 18px; height: 18px; } /* ── Welcome splash — ported from HEARTBEAT's employee login pattern ── */ .welcome-splash { position: fixed; inset: 0; z-index: 200; background: radial-gradient(circle at 30% 20%, rgba(237,33,58,.14), transparent 50%), var(--bg); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 24px; } .welcome-splash.closing { animation: welcomeOut .6s ease both; } .welcome-splash.hide { display: none; } .welcome-word { font-family: 'PP Neue Montreal', sans-serif; font-weight: 500; font-size: clamp(3rem, 14vw, 6.5rem); letter-spacing: -.02em; color: var(--text); line-height: 1; animation: welcomeWordIn .6s cubic-bezier(.22,1,.36,1) both; direction: ltr; unicode-bidi: isolate; } .welcome-word span { color: var(--accent); } .welcome-line { margin-top: 16px; font-size: 15px; color: var(--text-dim); max-width: 380px; animation: fadeUp .5s ease .25s both; } .welcome-name { color: var(--text); font-weight: 700; } @keyframes welcomeWordIn { from { opacity:0; transform: translateY(18px) scale(.96);} to { opacity:1; transform: translateY(0) scale(1);} } @keyframes welcomeOut { from { opacity:1; visibility:visible;} to { opacity:0; visibility:hidden; pointer-events:none;} } .quote-footer { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-3); line-height: 1.5; } .quote-footer .quote-text { font-style: italic; } .quote-footer .quote-author { margin-top: 2px; color: var(--text-dim); } @media (max-width: 430px) { .welcome-line { font-size: 13px; } } /* ── Comments (share view reuses these) ── */ .comments-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .comment { background: var(--bg-elev-2); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; } .comment .author { font-weight: 600; margin-left: 6px; color: var(--accent-2); } /* ══════════════════════════════════════════════════════════ RESPONSIVE — Desktop large → Fold closed ══════════════════════════════════════════════════════════ */ /* Desktop 4K / large monitors — more breathing room, bigger type */ @media (min-width: 1920px) { .main { padding: 32px 48px; } .sidebar { width: 300px; padding: 28px 20px; } .main-header h2 { font-size: 26px; } .modal { width: 580px; } } /* Tablet / Fold open (616–1024px) — stack the special-days panel under the timeline */ @media (max-width: 1024px) { .layout-cols { grid-template-columns: 1fr; } .main { padding: 20px 24px; } .sidebar { width: 220px; } } /* Mobile general — sidebar becomes a horizontal top bar, main stacks full-width */ @media (max-width: 700px) { #app { flex-direction: column; } .sidebar { width: 100%; flex-direction: row; align-items: center; flex-wrap: wrap; border-left: none; border-bottom: 1px solid var(--border); padding: 14px 16px; gap: 12px; } .brand-lockup { order: 1; } #new-client-btn { order: 2; margin-right: auto; } .client-list { order: 3; width: 100%; flex-direction: row; overflow-x: auto; flex: 0 0 auto; padding-bottom: 4px; } .client-item { flex-shrink: 0; white-space: nowrap; } .main { padding: 16px; } .main-header { gap: 10px; } .main-header h2 { font-size: 19px; } .month-nav .label { min-width: 100px; font-size: 13px; } .day-group-head { font-size: 12px; padding: 10px 12px; } .day-group-head [data-add-date] { margin-right: 0; flex-basis: 100%; order: 5; } .item-row { padding: 12px; } .item-row .sub { gap: 6px; } .form-grid-2 { grid-template-columns: 1fr; } .modal { padding: 18px; } } /* Mobile M/S — iPhone Pro Max down to Galaxy S21/22 */ @media (max-width: 430px) { .sidebar h1 { font-size: 17px; } .brand-lockup img { height: 18px; } .main-header { flex-direction: column; align-items: stretch; } .main-header > div { display: flex; gap: 8px; } .main-header > div .btn { flex: 1; } .month-nav { justify-content: center; } .item-row { flex-wrap: wrap; position: relative; padding-right: 40px; } .item-row .status-pill { order: 4; flex-basis: 100%; margin-top: 6px; } .item-row [data-edit-item] { position: absolute; right: 12px; top: 12px; } .panel { padding: 14px; } } /* Fold closed / very narrow (≤280px) — survive at any cost */ @media (max-width: 280px) { .main { padding: 10px; } .sidebar { padding: 10px; gap: 8px; } .sidebar h1 span, .brand-lockup img { display: none; } .main-header h2 { font-size: 15px; } .month-nav .label { display: none; } .item-row img.thumb, .item-row .thumb-placeholder { width: 34px; height: 34px; } .tag { display: none; } .modal { padding: 12px; } } /* Short screens (laptop taskbar / landscape mobile) */ @media (max-height: 650px) { .modal { max-height: 94vh; } .main { padding-top: 12px; } } @media (max-height: 500px) and (max-width: 932px) { .modal-overlay { align-items: flex-start; padding-top: 8px; } .modal { max-height: 96vh; } }