/* My Diary — base styles Warm palette with amber accents. Theme resolution: [data-effective-theme="light"|"dark"] set by tiny inline JS in . That ensures no flash-of-wrong-theme on first paint. */ /* ============ LIGHT THEME (default) ============ */ :root, [data-effective-theme="light"] { --bg: #fdf9f3; /* warm off-white */ --bg-alt: #f7f1e7; --card: #ffffff; --ink: #1c1917; /* near-black, warm */ --ink-soft: #44403c; --muted: #78716c; --muted-2: #a8a29e; --border: #eee5d6; --border-strong: #e0d4bd; --accent: #ea7d1a; /* amber-orange */ --accent-hover: #c9661a; --accent-soft: #fef3e2; --accent-ink: #9a4b0e; /* dark accent text on light bg */ --danger: #dc2626; --danger-soft: #fee2e2; --danger-ink: #991b1b; --success: #16a34a; --success-soft: #dcfce7; --success-ink: #14532d; --shadow-sm: 0 1px 2px rgba(28, 25, 23, .06); --shadow: 0 4px 12px rgba(28, 25, 23, .08); --shadow-lg: 0 12px 32px rgba(28, 25, 23, .14); --input-bg: #ffffff; --table-head-bg: #faf6ee; --table-row-hov: #fdfaf3; --avatar-grad: linear-gradient(135deg, #f59e0b, #ea580c); --brand-grad: linear-gradient(135deg, #f59e0b, #ea580c); --auth-glow-a: rgba(245, 158, 11, .10); --auth-glow-b: rgba(234, 88, 12, .10); } /* ============ DARK THEME ============ */ [data-effective-theme="dark"] { --bg: #1a1614; /* warm dark */ --bg-alt: #141110; --card: #262220; /* slightly lifted */ --ink: #f5f1ea; --ink-soft: #d6cfc2; --muted: #9a8f80; --muted-2: #6b6258; --border: #3a342f; --border-strong: #4d463f; --accent: #fbbf24; /* brighter amber, readable on dark */ --accent-hover: #f59e0b; --accent-soft: rgba(251, 191, 36, .12); --accent-ink: #fbbf24; --danger: #f87171; --danger-soft: rgba(248, 113, 113, .14); --danger-ink: #fca5a5; --success: #4ade80; --success-soft: rgba(74, 222, 128, .14); --success-ink: #86efac; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 4px 12px rgba(0, 0, 0, .4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55); --input-bg: #1f1b19; --table-head-bg: #1f1b19; --table-row-hov: #2e2925; --avatar-grad: linear-gradient(135deg, #f59e0b, #b45309); --brand-grad: linear-gradient(135deg, #f59e0b, #b45309); --auth-glow-a: rgba(245, 158, 11, .15); --auth-glow-b: rgba(234, 88, 12, .10); color-scheme: dark; } /* ============ BASE ============ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color .2s, color .2s; } h1 { font-size: 22px; margin: 0 0 4px; color: var(--ink); } h2 { font-size: 16px; margin: 0; color: var(--ink); } .muted { color: var(--muted); } a { color: var(--accent); } a:hover { color: var(--accent-hover); } hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; } /* ============ TOPBAR ============ */ .topbar { position: sticky; top: 0; z-index: 40; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .topbar-inner { max-width: 1200px; margin: 0 auto; height: 60px; padding: 0 20px; display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; white-space: nowrap; } .brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--brand-grad); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: -.5px; box-shadow: 0 2px 6px rgba(234, 125, 26, .3); } .brand-name { font-size: 15px; } .main-nav { flex: 1; } .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; } .main-nav a { display: inline-block; padding: 8px 14px; border-radius: 8px; color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 14px; transition: background .12s, color .12s; } .main-nav a:hover { background: var(--bg-alt); color: var(--ink); } .main-nav a.is-active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; } .nav-toggle { display: none; background: none; border: 1px solid var(--border); border-radius: 8px; width: 38px; height: 38px; padding: 0; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 4px; } .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; } /* ============ USER MENU ============ */ .user-menu { position: relative; } .user-menu-trigger { display: inline-flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); padding: 5px 12px 5px 5px; border-radius: 999px; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .12s, background .12s; } .user-menu-trigger:hover { border-color: var(--border-strong); background: var(--bg-alt); } .user-menu-name { font-size: 14px; font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chev { color: var(--muted); transition: transform .15s; } .user-menu.open .chev { transform: rotate(180deg); } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--avatar-grad); color: #fff; font-size: 13px; font-weight: 600; display: inline-grid; place-items: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(234, 125, 26, .25); } .user-menu-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 50; } .user-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .user-menu-name-lg { font-weight: 600; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-email { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 14px; color: var(--ink-soft); text-decoration: none; border-radius: 6px; } .user-menu-item:hover { background: var(--bg-alt); color: var(--ink); } .user-menu-item svg { color: var(--muted); flex-shrink: 0; } .user-menu-item-danger { color: var(--danger); } .user-menu-item-danger svg { color: var(--danger); } .user-menu-item-danger:hover { background: var(--danger-soft); color: var(--danger); } .user-menu-pop hr { margin: 6px 0; border: 0; border-top: 1px solid var(--border); } /* Theme switcher inside the menu */ .theme-switcher { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 4px; } .theme-switcher-label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; } .theme-switcher-form { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; } .theme-btn { display: inline-grid; place-items: center; width: 28px; height: 24px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 5px; padding: 0; transition: background .12s, color .12s; } .theme-btn:hover { color: var(--ink); } .theme-btn.is-active { background: var(--card); color: var(--accent); box-shadow: var(--shadow-sm); } /* ============ PAGE ============ */ .page { max-width: 1200px; margin: 0 auto; padding: 28px 20px 80px; } .page-narrow { max-width: 760px; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .page-head h1 { margin: 0; } .back-link { display: inline-block; color: var(--muted); text-decoration: none; font-size: 13px; margin-bottom: 8px; } .back-link:hover { color: var(--accent); } /* ============ AUTH ============ */ .auth-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 600px at 10% -10%, var(--auth-glow-a), transparent 60%), radial-gradient(1000px 600px at 110% 110%, var(--auth-glow-b), transparent 60%), var(--bg); } .auth-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 36px; } .auth-card h1 { margin-bottom: 4px; } .auth-card p { margin: 0 0 20px; color: var(--muted); font-size: 14px; } .auth-card label { display: block; margin-top: 16px; margin-bottom: 6px; font-size: 13px; font-weight: 600; } .auth-card input[type="email"], .auth-card input[type="password"] { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; background: var(--input-bg); color: var(--ink); } .auth-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .auth-card button[type="submit"] { margin-top: 22px; width: 100%; background: var(--accent); color: #fff; border: 0; padding: 11px 14px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; } .auth-card button[type="submit"]:hover { background: var(--accent-hover); } /* ============ CARD / FORMS ============ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 24px; box-shadow: var(--shadow-sm); } .card h2 { margin-top: 8px; margin-bottom: 4px; } .card hr { margin: 22px 0 14px; } .card label { display: block; margin-top: 14px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); } .card input[type="text"], .card input[type="email"], .card input[type="password"], .card input[type="date"], .card input[type="time"], .card textarea, .card select { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; background: var(--input-bg); color: var(--ink); font-family: inherit; } .card input:focus, .card textarea:focus, .card select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } } .check-inline { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 16px !important; margin-bottom: 0 !important; font-weight: 500; cursor: pointer; color: var(--ink-soft); } .check-inline input { margin: 0; accent-color: var(--accent); } .form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; } /* ============ BUTTONS ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; line-height: 1.2; font-family: inherit; transition: background .12s, border-color .12s, color .12s; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { background: var(--card); color: var(--ink-soft); border-color: var(--border); } .btn-ghost:hover { background: var(--bg-alt); color: var(--ink); border-color: var(--border-strong); } /* ============ VIEWER PICKER ============ */ .viewer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 12px; } .viewer-row { display: flex !important; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin: 0 !important; cursor: pointer; font-weight: 500 !important; background: var(--card); color: var(--ink); transition: border-color .12s, background .12s; } .viewer-row[hidden] { display: none !important; } .viewer-row:hover { border-color: var(--accent); background: var(--accent-soft); } .viewer-row input { margin: 0; accent-color: var(--accent); } .viewer-row span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* ============ DATA TABLE ============ */ .table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); } .data-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--ink); } .data-table thead { background: var(--table-head-bg); text-align: left; } .data-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; } .data-table th, .data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table tbody tr:hover { background: var(--table-row-hov); } .data-table .actions { text-align: right; } .data-table .actions a { color: var(--accent); text-decoration: none; margin-left: 10px; font-weight: 500; } .data-table .actions a:hover { text-decoration: underline; } /* ============ BADGES ============ */ .badge { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 999px; font-weight: 600; letter-spacing: .3px; } .badge-ok { background: var(--success-soft); color: var(--success-ink); } .badge-muted { background: var(--bg-alt); color: var(--muted); border: 1px solid var(--border); } .badge-admin { background: var(--accent-soft); color: var(--accent-ink); } /* ============ ALERTS ============ */ .alert { padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } .alert-success { background: var(--success-soft); color: var(--success-ink); border: 1px solid var(--border); } .alert-error { background: var(--danger-soft); color: var(--danger-ink); border: 1px solid var(--border); } .alert-list { margin: 0; padding-left: 20px; } /* ============ RESPONSIVE ============ */ @media (max-width: 720px) { .nav-toggle { display: inline-flex; } .main-nav { position: absolute; top: 60px; left: 0; right: 0; background: var(--card); border-bottom: 1px solid var(--border); padding: 8px 16px 16px; box-shadow: var(--shadow); display: none; } .main-nav.is-open { display: block; } .main-nav ul { flex-direction: column; gap: 2px; } .main-nav a { display: block; padding: 10px 12px; } .user-menu-name { display: none; } .user-menu-trigger { padding: 4px; } .brand-name { display: none; } .page-head { flex-direction: column; align-items: flex-start; } } /* ============ CALENDAR TOOLBAR ============ */ .cal-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; } .cal-toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cal-toolbar-right { display: flex; align-items: center; gap: 10px; } .cal-title { margin: 0 0 0 4px; font-size: 18px; font-weight: 600; } .view-switch { display: inline-flex; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 3px; } .view-switch a { padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; border-radius: 5px; transition: color .12s, background .12s; } .view-switch a:hover { color: var(--ink); } .view-switch a.is-active { background: var(--card); color: var(--accent); box-shadow: var(--shadow-sm); font-weight: 600; } .cal-nav { display: inline-flex; gap: 4px; } .btn.btn-icon { padding: 6px 10px; font-size: 18px; line-height: 1; } .cal-owner-select { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; } .cal-owner-select select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 13px; font-family: inherit; } /* ============ DAY VIEW ============ */ .day-view { background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden; } .allday-strip { display: grid; grid-template-columns: 72px 1fr; border-bottom: 1px solid var(--border); background: var(--bg-alt); } .allday-label { padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; border-right: 1px solid var(--border); } .allday-items { padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; } .hour-grid { display: block; } .hour-row { display: grid; grid-template-columns: 72px 1fr; border-top: 1px solid var(--border); min-height: 32px; } .hour-row:first-child { border-top: 0; } .hour-row.is-half { border-top-style: dashed; } .hour-label { padding: 4px 12px; font-size: 12px; color: var(--muted); font-weight: 500; border-right: 1px solid var(--border); background: var(--bg-alt); } .hour-slot { padding: 2px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: background .12s; } .hour-slot:hover { background: var(--accent-soft); } /* ============ APPOINTMENT BLOCKS ============ */ .appt { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; background: var(--accent); color: #fff; border-radius: 6px; text-decoration: none; font-size: 13px; line-height: 1.35; box-shadow: 0 1px 3px rgba(0,0,0,.1); transition: transform .08s, box-shadow .12s; } .appt:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.18); } .appt-time { font-size: 11px; font-weight: 600; opacity: .95; } .appt-title { font-weight: 600; } .appt-loc { font-size: 11px; opacity: .9; } .appt-allday { background: var(--accent); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 12px; } .appt-compact, .appt-pill { padding: 3px 6px; font-size: 12px; flex-direction: row; align-items: baseline; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .appt-compact .appt-time, .appt-pill .appt-time { font-size: 11px; } .appt-compact .appt-title, .appt-pill .appt-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============ WEEK VIEW ============ */ .week-view { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); } .week-header { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg-alt); border-bottom: 1px solid var(--border); } .week-day-head { padding: 10px 8px; text-align: center; border-left: 1px solid var(--border); } .week-day-head:first-child { border-left: 0; } .week-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; } .week-dom { font-size: 20px; font-weight: 600; color: var(--ink); margin-top: 2px; } .week-day-head.is-today .week-dom { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; margin-top: 0; font-size: 16px; } .week-body { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 500px; } .week-cell { border-left: 1px solid var(--border); padding: 6px; min-height: 200px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: background .12s; } .week-cell:first-child { border-left: 0; } .week-cell:hover { background: var(--accent-soft); } /* ============ MONTH VIEW ============ */ .month-view { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); } .month-header { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg-alt); border-bottom: 1px solid var(--border); } .month-dow-head { padding: 10px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; text-align: center; border-left: 1px solid var(--border); } .month-dow-head:first-child { border-left: 0; } .month-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(110px, 1fr); } .month-cell { border-left: 1px solid var(--border); border-top: 1px solid var(--border); padding: 6px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; transition: background .12s; overflow: hidden; } .month-cell:nth-child(7n+1) { border-left: 0; } .month-cell:nth-child(-n+7) { border-top: 0; } .month-cell:hover { background: var(--accent-soft); } .month-cell.is-other { background: var(--bg-alt); color: var(--muted); } .month-cell.is-other .month-num { color: var(--muted-2); } .month-num { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 2px; } .month-cell.is-today .month-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; } .appt-more { font-size: 11px; color: var(--muted); padding: 0 4px; } /* ============ MODAL ============ */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; } .modal[hidden] { display: none; } .modal-backdrop { position: fixed; inset: 0; background: rgba(17, 24, 39, .55); backdrop-filter: blur(2px); } .modal-card { position: relative; width: 100%; max-width: 560px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; z-index: 1; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .modal-head h2 { margin: 0; font-size: 16px; } .modal-close { background: none; border: 0; font-size: 24px; color: var(--muted); cursor: pointer; line-height: 1; padding: 0 6px; } .modal-close:hover { color: var(--ink); } .modal-body { padding: 20px; max-height: calc(100vh - 160px); overflow-y: auto; } .modal-body input[type="text"], .modal-body input[type="email"], .modal-body input[type="date"], .modal-body input[type="time"], .modal-body textarea, .modal-body select { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; background: var(--input-bg); color: var(--ink); font-family: inherit; } .modal-body input:focus, .modal-body textarea:focus, .modal-body select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .modal-body label { display: block; margin-top: 14px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); } .modal-body hr { margin: 20px 0 12px; } .modal-body h2 { font-size: 15px; margin-bottom: 4px; } .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); } .invitee-grid { max-height: 180px; overflow-y: auto; padding: 2px; } .invitee-row { font-size: 13px; } .btn-danger { background: var(--danger); color: #fff; margin-right: auto; /* push to the left */ } .btn-danger:hover { background: #b91c1c; color: #fff; } /* ============ SENDING / WAIT MODAL ============ */ .sending-modal { align-items: center; } .sending-card { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 28px 32px; text-align: center; min-width: 280px; max-width: 360px; } .sending-text { font-weight: 600; color: var(--ink); margin-top: 16px; } .sending-sub { font-size: 13px; margin-top: 4px; } .spinner { width: 40px; height: 40px; margin: 0 auto; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.85s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============ SETTINGS PAGE ============ */ .settings-form textarea { min-height: 60px; } .settings-test-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .settings-test-bar input { flex: 1; min-width: 200px; } .settings-result { margin-top: 14px; } /* ============ RECURRENCE UI ============ */ .weekday-picker { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .weekday-chip { display: inline-flex !important; align-items: center; margin: 0 !important; cursor: pointer; position: relative; } .weekday-chip input { position: absolute; opacity: 0; pointer-events: none; } .weekday-chip span { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--ink-soft); font-size: 13px; font-weight: 500; transition: border-color .12s, background .12s, color .12s; } .weekday-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; } .weekday-chip:hover span { border-color: var(--accent); } .recur-end { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; } .recur-end .check-inline { margin-top: 0 !important; } .recur-end-field { max-width: 170px; padding: 7px 10px !important; font-size: 14px !important; } .recur-end-field:disabled { opacity: .5; } /* ============ DRAG / DROP / RESIZE ============ */ .appt { position: relative; cursor: grab; } .appt:active { cursor: grabbing; } .appt.is-dragging { opacity: .35; } /* Resize handle - 6px bottom strip, only on full day-view blocks */ .appt-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; background: transparent; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .appt-resize:hover { background: rgba(255,255,255,.35); } .appt.is-resizing { cursor: ns-resize; } /* Drop-target hover states */ .hour-slot.is-drop-over, .week-cell.is-drop-over, .month-cell.is-drop-over { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -4px; } /* ============ CONFIRM TOAST ============ */ .confirm-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 14px 16px; min-width: 320px; max-width: 480px; display: flex; flex-direction: column; gap: 10px; animation: toast-in .18s ease-out; } .confirm-toast[hidden] { display: none; } .confirm-toast-msg { color: var(--ink); font-size: 14px; line-height: 1.4; } .confirm-toast-msg strong { color: var(--accent); } .confirm-toast-actions { display: flex; gap: 8px; justify-content: flex-end; } .confirm-toast .btn { padding: 7px 14px; font-size: 13px; } @keyframes toast-in { from { transform: translateX(-50%) translateY(20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } } /* When resize mode is active, prevent pointer-events on child spans that could confuse the drag start */ .appt.is-resizing .appt-title, .appt.is-resizing .appt-time, .appt.is-resizing .appt-loc { pointer-events: none; } /* ============ MEETING NOTES ============ */ .notes-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; } .notes-sidebar { background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); padding: 12px; display: flex; flex-direction: column; gap: 12px; min-height: 400px; } .notes-search-form input[type="search"] { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--input-bg); color: var(--ink); } .notes-sidebar-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; } .notes-tag-list { display: flex; flex-wrap: wrap; gap: 4px; } .notes-tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--ink-soft); text-decoration: none; transition: background .12s, border-color .12s, color .12s; } .notes-tag-chip:hover { border-color: var(--accent); color: var(--accent-ink); } .notes-tag-chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); } .notes-tag-chip.is-active:hover { color: #fff; } .notes-tag-count { font-size: 10px; opacity: .8; } .notes-tag-clear { color: var(--muted); background: transparent; border-color: transparent; } .notes-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: calc(100vh - 280px); margin: -4px; padding: 4px; } .notes-list-item { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); border: 1px solid transparent; transition: background .12s, border-color .12s; } .notes-list-item:hover { background: var(--bg-alt); color: var(--ink); } .notes-list-item.is-active { background: var(--accent-soft); border-color: var(--accent); } .notes-list-title { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notes-list-preview { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .notes-list-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; align-items: center; margin-top: 6px; } .notes-appt-pill { font-size: 11px; background: var(--bg-alt); padding: 1px 6px; border-radius: 4px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notes-mini-tag { font-size: 11px; color: var(--accent-ink); background: var(--accent-soft); padding: 0 6px; border-radius: 999px; } .notes-empty { padding: 40px 16px; text-align: center; font-size: 13px; } /* Editor pane */ .notes-editor { background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); min-height: 500px; display: flex; flex-direction: column; } .notes-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; text-align: center; color: var(--muted); flex: 1; } .notes-placeholder-icon { font-size: 40px; margin-bottom: 8px; } .notes-form { display: flex; flex-direction: column; padding: 16px; gap: 12px; flex: 1; } .notes-title-input { width: 100%; font-size: 22px; font-weight: 600; padding: 6px 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink); font-family: inherit; } .notes-title-input:focus { outline: none; border-bottom-color: var(--accent); } .notes-meta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .notes-meta-field { display: flex; flex-direction: column; gap: 4px; margin: 0; } .notes-meta-label { font-size: 12px; color: var(--muted); font-weight: 600; } .notes-meta-field input, .notes-meta-field select { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--input-bg); color: var(--ink); font-family: inherit; } .notes-meta-field input:focus, .notes-meta-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .notes-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px 8px 0 0; margin-bottom: -1px; /* blend into body top border */ align-items: center; } .notes-tb-btn { background: transparent; border: 1px solid transparent; padding: 4px 9px; border-radius: 4px; cursor: pointer; font-size: 13px; color: var(--ink-soft); font-family: inherit; min-width: 28px; } .notes-tb-btn:hover { background: var(--card); border-color: var(--border); color: var(--ink); } .notes-tb-sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; } .notes-body { flex: 1; min-height: 280px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 0 0 8px 8px; background: var(--input-bg); color: var(--ink); font-size: 15px; line-height: 1.55; outline: none; overflow-y: auto; } .notes-body:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .notes-body.is-empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; } .notes-body p { margin: 0 0 8px; } .notes-body h1, .notes-body h2, .notes-body h3 { margin: 12px 0 6px; line-height: 1.25; } .notes-body ul, .notes-body ol { margin: 6px 0 8px 24px; } .notes-body a { color: var(--accent); } .notes-body code { background: var(--bg-alt); padding: 1px 5px; border-radius: 4px; font-size: .9em; } .notes-body blockquote { border-left: 3px solid var(--accent); padding-left: 12px; margin: 8px 0; color: var(--ink-soft); } .notes-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 6px; } .notes-actions .btn-danger { margin-right: auto; } .notes-filter-bar { background: var(--accent-soft); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; font-size: 13px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; } .notes-clear { color: var(--muted); text-decoration: none; font-size: 12px; } .notes-clear:hover { color: var(--accent); } /* ============ NOTES SHARING ============ */ .notes-share-banner { background: var(--accent-soft); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink-soft); } .notes-share-banner strong { color: var(--ink); } .notes-share-perm { font-size: 12px; color: var(--muted); font-weight: 500; } .notes-share-pill { font-size: 11px; color: var(--accent-ink); background: var(--accent-soft); padding: 1px 6px; border-radius: 4px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notes-share-picker { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); } .share-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; } .share-row { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--card); display: flex; flex-direction: column; gap: 6px; font-size: 13px; transition: border-color .12s; } .share-row:hover { border-color: var(--accent); } .share-row-main { display: flex !important; align-items: center; gap: 8px; cursor: pointer; margin: 0 !important; font-weight: 500 !important; } .share-row-main input { margin: 0; accent-color: var(--accent); } .share-row-main span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .share-row-main .muted { font-weight: 400 !important; font-size: 12px; } .share-perm-pills { display: flex; gap: 4px; padding: 2px; background: var(--bg-alt); border-radius: 6px; align-self: flex-start; } .share-perm-pills[hidden] { display: none; } .perm-pill { display: inline-block !important; cursor: pointer; margin: 0 !important; position: relative; font-weight: 500 !important; } .perm-pill input { position: absolute; opacity: 0; pointer-events: none; } .perm-pill span { display: inline-block; padding: 3px 10px; font-size: 12px; color: var(--muted); border-radius: 4px; transition: background .12s, color .12s; } .perm-pill input:checked + span { background: var(--card); color: var(--accent); box-shadow: var(--shadow-sm); font-weight: 600; } /* Read-only editor state */ .notes-form.is-readonly .notes-toolbar { opacity: .5; pointer-events: none; } .notes-form.is-readonly .notes-body { background: var(--bg-alt); }