/* ═══════════════════════════════════════════════════════════════════ Snowzen — Healthy Life Assistant | style.css ───────────────────────────────────────────────────────────────── Default theme: Emerald (overridden by data-theme on ) ═══════════════════════════════════════════════════════════════════ */ /* ── CSS custom properties — Emerald (default) ──────────────────── */ :root { --primary : #2f9e44; --primary-strong: #237635; --primary-soft : rgba(47, 158, 68, 0.14); --bg-color : #f4f7f6; --bg-accent : #eaf4ed; --card-bg : #ffffff; --surface-alt : #f8fbf9; --text : #21302a; --muted : #5e6f67; --border : rgba(33, 48, 42, 0.1); --shadow : 0 16px 40px rgba(28, 42, 35, 0.08); --radius-card : 18px; --radius-input : 12px; --radius-btn : 12px; --radius-pill : 999px; --transition : 0.2s ease; } /* ── Midnight ───────────────────────────────────────────────────── */ body[data-theme="midnight"] { --primary : #58a6ff; --primary-strong: #2f7bd3; --primary-soft : rgba(88, 166, 255, 0.18); --bg-color : #0f1722; --bg-accent : #152033; --card-bg : #162131; --surface-alt : #101a28; --text : #edf4ff; --muted : #9db0ca; --border : rgba(237, 244, 255, 0.1); --shadow : 0 18px 45px rgba(0, 0, 0, 0.32); } /* ── Sunset ─────────────────────────────────────────────────────── */ body[data-theme="sunset"] { --primary : #f26b3a; --primary-strong: #d85323; --primary-soft : rgba(242, 107, 58, 0.18); --bg-color : #fff6f1; --bg-accent : #ffe4d6; --card-bg : #ffffff; --surface-alt : #fff9f5; --text : #43261e; --muted : #86645a; --border : rgba(67, 38, 30, 0.1); --shadow : 0 16px 40px rgba(146, 79, 42, 0.12); } /* ── Lavender ───────────────────────────────────────────────────── */ body[data-theme="lavender"] { --primary : #7c5cff; --primary-strong: #6447e1; --primary-soft : rgba(124, 92, 255, 0.16); --bg-color : #f7f4ff; --bg-accent : #ece7ff; --card-bg : #ffffff; --surface-alt : #fbfaff; --text : #2f2850; --muted : #736c9b; --border : rgba(47, 40, 80, 0.1); --shadow : 0 16px 40px rgba(93, 74, 174, 0.12); } /* ── Cotton Candy (Pink Blue) ───────────────────────────────────── */ body[data-theme="cotton-candy"] { --primary : #ff5fa2; --primary-strong: #e23d86; --primary-soft : rgba(255, 95, 162, 0.16); --bg-color : #f5f8ff; --bg-accent : #dff1ff; --card-bg : #ffffff; --surface-alt : #f8fbff; --text : #213056; --muted : #6f7da4; --border : rgba(33, 48, 86, 0.1); --shadow : 0 16px 40px rgba(74, 112, 196, 0.14); } /* ── Ocean ──────────────────────────────────────────────────────── */ body[data-theme="ocean"] { --primary : #0077b6; --primary-strong: #005f8a; --primary-soft : rgba(0, 119, 182, 0.16); --bg-color : #f0f8ff; --bg-accent : #e0f4f9; --card-bg : #ffffff; --surface-alt : #f6fbfe; --text : #102a43; --muted : #527993; --border : rgba(16, 42, 67, 0.1); --shadow : 0 16px 40px rgba(0, 119, 182, 0.08); } /* ── Event Badges ────────────────────────────────────────────── */ .event-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.1; white-space: nowrap; } .badge-birthday { background: rgba(236, 72, 153, 0.15); color: #db2777; } .badge-anniversary { background: rgba(239, 68, 68, 0.15); color: #dc2626; } .badge-meeting { background: rgba(59, 130, 246, 0.15); color: #2563eb; } .badge-exam { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; } .badge-holiday { background: rgba(34, 197, 94, 0.15); color: #16a34a; } .badge-default { background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border); padding: 0.15rem 0.5rem; } /* ═══════════════════════════════════════════════════════════════════ RESET / BASE ═══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background: radial-gradient(circle at top left, var(--bg-accent), transparent 36%), var(--bg-color); color: var(--text); line-height: 1.55; transition: background-color var(--transition), color var(--transition); min-height: 100vh; } /* ═══════════════════════════════════════════════════════════════════ GLOBAL LOADER ═══════════════════════════════════════════════════════════════════ */ .global-loader { position: fixed; inset: 0; background: var(--bg-color); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0.4s ease; } .global-loader.hide { opacity: 0; visibility: hidden; } .spinner { width: 48px; height: 48px; border: 4px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loader-msg { color: var(--muted); font-weight: 500; margin-top: -0.5rem; } /* ═══════════════════════════════════════════════════════════════════ VIEW SYSTEM (login-page / app-container) ═══════════════════════════════════════════════════════════════════ */ .view { display: none; } .view.active { display : flex; flex-direction : column; min-height : 100vh; } .content-view { display: none; padding: 2rem; } .content-view.active { display: block; } main { width : min(1180px, calc(100% - 32px)); margin : 0 auto 3rem; } /* ═══════════════════════════════════════════════════════════════════ AUTH PAGE ═══════════════════════════════════════════════════════════════════ */ #login-page { justify-content : center; align-items : center; padding : 1.5rem; background : radial-gradient(ellipse at 60% 0%, var(--bg-accent) 0%, transparent 55%), var(--bg-color); } .auth-card { width : min(420px, 100%); display : flex; flex-direction: column; gap : 1.25rem; } .auth-logo { display : flex; flex-direction : column; align-items : center; gap : 0.3rem; padding-bottom : 0.5rem; border-bottom : 1px solid var(--border); } .auth-logo .logo { font-size: 1.9rem; } .auth-logo .nav-tag { font-size: 0.95rem; } /* Tab switcher */ .auth-tabs { display : flex; border : 1px solid var(--border); border-radius : var(--radius-pill); overflow : hidden; background : var(--surface-alt); gap : 0; } .auth-tab { flex : 1; width : auto; padding : 0.7rem 1rem; border-radius : 0; background : transparent; color : var(--muted); font-size : 0.95rem; font-weight : 600; border : none; box-shadow : none; transition : background var(--transition), color var(--transition); } .auth-tab:hover { background : var(--primary-soft); color : var(--primary); transform : none; } .auth-tab.active { background : var(--primary); color : #fff; } /* Auth panels */ .auth-panel { display: flex; flex-direction: column; gap: 0; } .auth-divider { display: flex; align-items: center; text-align: center; margin: 1.25rem 0 0.5rem; color: var(--muted); font-size: 0.9rem; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border); } .auth-divider span { padding: 0 0.75rem; } .google-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; } .google-icon { width: 20px; height: 20px; } /* ── Events Filter Header ── */ .events-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .events-header .subsection-title { margin: 0; } .event-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; } .event-filters select, .event-filters input[type="month"] { width: auto; margin: 0; padding: 0.4rem 1rem; border-radius: var(--radius-pill); font-size: 0.85rem; } /* ═══════════════════════════════════════════════════════════════════ INPUTS ═══════════════════════════════════════════════════════════════════ */ input, textarea, select { width : 100%; padding : 0.9rem 1rem; margin : 0.45rem 0 0.9rem; border : 1px solid var(--border); border-radius : var(--radius-input); background : var(--surface-alt); color : var(--text); font-family : inherit; font-size : 0.97rem; outline : none; transition : border-color var(--transition), box-shadow var(--transition); } input:focus, textarea:focus, select:focus { border-color : var(--primary); box-shadow : 0 0 0 4px var(--primary-soft); } input[type="time"], input[type="date"] { cursor: pointer; } label { display : block; font-weight: 600; font-size : 0.93rem; margin-top : 0.35rem; color : var(--text); } /* ═══════════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════════ */ button { background : var(--primary); color : #ffffff; display : flex; align-items : center; justify-content: center; text-align : center; border : none; padding : 0.9rem 1.1rem; border-radius : var(--radius-btn); cursor : pointer; width : 100%; font-family : inherit; font-size : 1rem; font-weight : 600; transition : background-color var(--transition), transform var(--transition), box-shadow var(--transition); } button:hover { background : var(--primary-strong); transform : translateY(-1px); box-shadow : 0 6px 18px rgba(0,0,0,0.12); } .secondary-btn { background : var(--surface-alt); color : var(--text); border : 1px solid var(--border); } .secondary-btn:hover { background : var(--primary-soft); color : var(--primary); } .hidden { display: none !important; } /* ═══════════════════════════════════════════════════════════════════ CARD ═══════════════════════════════════════════════════════════════════ */ .card { background : var(--card-bg); padding : 1.5rem; border-radius : var(--radius-card); border : 1px solid var(--border); box-shadow : var(--shadow); width : 100%; } .form-card { max-width : 680px; margin-bottom : 2rem; padding : 2rem; box-shadow : 0 4px 24px rgba(0,0,0,0.06); } /* ═══════════════════════════════════════════════════════════════════ NAVBAR ═══════════════════════════════════════════════════════════════════ */ #navbar { width : min(1180px, calc(100% - 90px)); margin : 1rem auto 0 1rem; padding : 1rem 1.25rem; background : rgba(255,255,255,0.72); border : 1px solid var(--border); border-radius : var(--radius-card); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow : var(--shadow); display : flex; flex-direction: column; align-items : stretch; gap : 1rem; position : sticky; top : 12px; z-index : 100; } body[data-theme="midnight"] #navbar { background: rgba(22, 33, 49, 0.82); } body[data-theme="sunset"] #navbar { background: rgba(255, 250, 245, 0.82); } body[data-theme="lavender"] #navbar { background: rgba(251, 249, 255, 0.82); } body[data-theme="cotton-candy"] #navbar{ background: rgba(248, 251, 255, 0.82); } @media (min-width: 1350px) { #navbar { width: min(1180px, calc(100% - 32px)); margin: 1rem auto 0; } } .nav-topbar { display : flex; align-items : center; justify-content: space-between; gap : 1rem; } .nav-brand { display : flex; flex-direction : column; gap : 0.2rem; } /* Interactive Fluid Logo Animation */ .logo { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(270deg, var(--primary), var(--primary-strong), #ff89bd, #8dd6ff, var(--primary)); background-size: 400% 400%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: fluidGradient 6s ease infinite; cursor: pointer; display: inline-block; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .logo:hover { transform: scale(1.08) rotate(-3deg); } .logo:active { transform: scale(0.9) rotate(3deg); } @keyframes fluidGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .nav-tag { font-size : 0.88rem; color : var(--muted); font-weight: 400; } .nav-toggle { width : 48px; height : 48px; padding : 0; border-radius : 14px; background : var(--surface-alt); border : 1px solid var(--border); display : inline-flex; align-items : center; justify-content: center; gap : 4px; flex-direction : column; box-shadow : none; cursor : pointer; } .nav-toggle:hover { background: var(--primary-soft); transform: none; box-shadow: none; } .nav-toggle span { width : 18px; height : 2px; background : var(--text); border-radius : 999px; transition : transform 0.22s ease, opacity 0.22s ease; display : block; } #navbar.is-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } #navbar.is-open .nav-toggle span:nth-child(2) { opacity: 0; } #navbar.is-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav-links { display : flex; flex-wrap : wrap; justify-content: flex-end; gap : 0.75rem; overflow : hidden; transition : max-height 0.25s ease, opacity 0.25s ease; } #navbar.is-open .nav-links { max-height: 260px; opacity: 1; pointer-events: auto; } #navbar:not(.is-open) .nav-links { max-height: 0; opacity: 0; pointer-events: none; } .nav-btn { display : inline-flex; align-items : center; gap : 0.4rem; width : auto; border : 1px solid transparent; background : transparent; color : var(--text); padding : 0.65rem 1.1rem; border-radius : var(--radius-pill); font-size : 0.95rem; font-weight : 600; cursor : pointer; transition : background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); box-shadow : none; } .nav-btn:hover, .nav-btn.active { background : var(--primary-soft); color : var(--primary); border-color : var(--primary-soft); transform : none; box-shadow : none; } .logout-btn { background: #e15353; color: #fff; } .logout-btn:hover { background: #c83f3f; color: #fff; } .nav-badge { background : #e15353; color : #ffffff; font-size : 0.75rem; font-weight : 800; padding : 0.15rem 0.45rem; border-radius : 999px; line-height : 1; } /* ═══════════════════════════════════════════════════════════════════ TYPOGRAPHY HELPERS ═══════════════════════════════════════════════════════════════════ */ .section-heading { margin-bottom: 1.5rem; } .section-heading h2, .subsection-title, .card-header h3 { margin: 0; } .subsection-title { margin: 0 0 1rem; font-size: 1.05rem; } .section-heading p, .card-header p { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.94rem; } /* ═══════════════════════════════════════════════════════════════════ DASHBOARD GRID ═══════════════════════════════════════════════════════════════════ */ .dashboard-grid { display : grid; grid-template-columns : minmax(0, 1.6fr) minmax(280px, 0.9fr); gap : 1.25rem; margin-bottom : 2rem; align-items : start; } /* ═══════════════════════════════════════════════════════════════════ CARD HEADER ═══════════════════════════════════════════════════════════════════ */ .card-header { display : flex; justify-content: space-between; align-items : flex-start; gap : 1rem; margin-bottom : 1.25rem; } .chart-header-actions { display : flex; flex-direction : column; align-items : flex-end; gap : 0.75rem; } .stat-chip { padding : 0.45rem 0.8rem; border-radius : var(--radius-pill); background : var(--primary-soft); color : var(--primary); font-size : 0.88rem; font-weight : 600; white-space : nowrap; } /* ═══════════════════════════════════════════════════════════════════ CHART LAYOUT ═══════════════════════════════════════════════════════════════════ */ .chart-layout { display : grid; grid-template-columns : minmax(240px, 280px) minmax(0, 1fr); gap : 1.5rem; align-items : start; } .chart-layout.expanded-view { grid-template-columns: 1fr; } .chart-layout.expanded-view .chart-detail-panel { width: 100%; } .chart-card { align-self: start; } /* Chart mode switcher buttons */ .chart-mode-switcher { display : inline-flex; gap : 0.4rem; flex-wrap : wrap; justify-content: flex-end; } .chart-mode-btn { width : auto; padding : 0.5rem 0.85rem; border-radius : var(--radius-pill); background : var(--surface-alt); color : var(--text); border : 1px solid var(--border); font-size : 0.88rem; font-weight : 600; box-shadow : none; } .chart-mode-btn:hover, .chart-mode-btn.active { background : var(--primary-soft); color : var(--primary); border-color : var(--primary-soft); transform : none; box-shadow : none; } /* Chart stage */ .chart-stage { background : var(--surface-alt); border : 1px solid var(--border); border-radius : 18px; padding : 1rem; min-height : 320px; cursor : pointer; outline : none; display : flex; align-items : center; justify-content: center; } /* Smooth fade-in for dynamic chart switches */ .chart-stage > div { width: 100%; animation: smoothFade 0.4s ease-out forwards; } @keyframes smoothFade { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .chart-layout.expanded-view .chart-stage { min-height: auto; } .chart-stage:focus-visible { box-shadow: 0 0 0 4px var(--primary-soft); } .chart-detail-panel { display: grid; gap: 0.75rem; } /* ─ Pie chart ──────────────────────────────────────────────── */ .pie-chart-wrap { position : relative; width : min(280px, 100%); aspect-ratio: 1; margin : 0 auto; align-self : start; } .pie-chart { width : 100%; height : 100%; border-radius : 50%; background : conic-gradient(var(--primary) 0deg 360deg); box-shadow : inset 0 0 0 1px rgba(255,255,255,0.4); } .chart-center { position : absolute; inset : 22%; border-radius : 50%; background : var(--card-bg); border : 1px solid var(--border); display : flex; align-items : center; justify-content : center; flex-direction : column; box-shadow : 0 8px 20px rgba(0,0,0,0.07); } .chart-center strong { font-size: 1.65rem; } .chart-center span { color: var(--muted); font-size: 0.88rem; } /* ─ Legend ─────────────────────────────────────────────────── */ .chart-legend { display: grid; gap: 0.75rem; } .legend-item { display : grid; grid-template-columns : 12px minmax(0, 1fr) auto; gap : 0.75rem; align-items : center; padding : 0.75rem 0.9rem; border-radius : 12px; background : var(--surface-alt); border : 1px solid var(--border); } .legend-color { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .legend-label strong, .legend-label span { display: block; } .legend-label span { color: var(--muted); font-size: 0.88rem; } .legend-time { font-weight : 600; white-space : nowrap; font-size : 0.9rem; color : var(--muted); } /* ─ Table view ─────────────────────────────────────────────── */ .chart-table { display: grid; gap: 0.65rem; width: 100%; } .chart-table-row { display : grid; grid-template-columns : minmax(0, 1fr) auto auto; gap : 0.75rem; align-items : center; padding : 0.8rem 0.9rem; border-radius : 12px; border : 1px solid var(--border); background : var(--card-bg); min-height : 66px; } .chart-table-row strong, .chart-table-row span { display: block; } .chart-table-row span { color: var(--muted); font-size: 0.88rem; } /* ─ Bar / graph view ───────────────────────────────────────── */ .chart-bars { display: grid; gap: 0.85rem; width: 100%; } .chart-bar-item { display: grid; gap: 0.4rem; } .chart-bar-label { display : flex; justify-content : space-between; gap : 0.75rem; font-size : 0.92rem; } .chart-bar-track { position : relative; width : 100%; height : 16px; border-radius : 999px; background : rgba(120,120,120,0.12); overflow : hidden; } .chart-bar-fill { height: 100%; border-radius: inherit; transition: width 0.4s ease; } /* ─ Detail note ─────────────────────────────────────────────── */ .detail-note { padding : 0.9rem 1rem; border-radius : 12px; border : 1px dashed var(--border); color : var(--muted); background : var(--surface-alt); font-size : 0.93rem; } /* ═══════════════════════════════════════════════════════════════════ QUICK SNAPSHOT / STATS GRID ═══════════════════════════════════════════════════════════════════ */ .stats-grid { display: grid; gap: 0.9rem; } .current-progress-wrap { margin-top: 0.5rem; display: grid; gap: 0.35rem; } .current-progress-track { width: 100%; height: 10px; background: rgba(120, 120, 120, 0.12); border-radius: 999px; overflow: hidden; } .current-progress-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; } .current-progress-fill.paused { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, transparent 75%, transparent); background-size: 1rem 1rem; animation: progressPause 1.5s linear infinite; } @keyframes progressPause { 0% { background-position: 1rem 0; } 100% { background-position: 0 0; } } .progress-time-left { font-size: 0.8rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } .stat-card { padding : 1rem; border-radius : 14px; background : var(--surface-alt); border : 1px solid var(--border); transition : transform 0.3s ease, box-shadow 0.3s ease; } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); } .stat-card span { display: block; color: var(--muted); font-size: 0.88rem; margin-bottom: 0.3rem; } .stat-card strong { font-size: 1rem; } .stat-card.highlight-event { background: var(--primary-soft); border-color: var(--primary); } .stat-card.highlight-event span, .stat-card.highlight-event strong { color: var(--primary-strong); } /* ═══════════════════════════════════════════════════════════════════ ACTIVITY TIMELINE ═══════════════════════════════════════════════════════════════════ */ .timeline { display : flex; flex-direction : column; gap : 0.85rem; margin-bottom : 1.5rem; } .timeline-entry { background : var(--card-bg); padding : 1rem 1.1rem; border-radius: 14px; border : 1px solid var(--border); box-shadow : var(--shadow); display : flex; justify-content: space-between; align-items : flex-start; gap : 1rem; transition : transform 0.3s ease, box-shadow 0.3s ease; will-change : transform; } .timeline-entry:hover { transform: translateX(8px); box-shadow: var(--shadow); } .timeline-entry.schedule-entry { border-left: 5px solid var(--primary); } .timeline-entry.record-entry { background: var(--surface-alt); border-left: 5px solid transparent; } .timeline-entry-main { display: grid; gap: 0.35rem; width: 100%; } .timeline-entry-row { display : inline-flex; flex-wrap : wrap; gap : 0.45rem; align-items : center; } .timeline-entry-row strong { color: var(--primary); min-width: 75px; } .timeline-entry-meta { color : var(--muted); font-size : 0.9rem; line-height: 1.45; } .timeline small { color: var(--muted); font-size: 0.88rem; } /* Status badges */ .record-badge { padding : 0.3rem 0.65rem; border-radius : var(--radius-pill); font-size : 0.78rem; font-weight : 700; text-transform : capitalize; } .record-badge.complete { background: rgba(47,158,68,0.14); color: #237635; } .record-badge.pending { background: rgba(120,120,120,0.12); color: #777; } .record-badge.prepone { background: rgba(59,130,246,0.14); color: #2563eb; } .record-badge.not-done { background: rgba(225,83,83,0.14); color: #c83f3f; } .record-badge.cancel { background: rgba(120,120,120,0.12); color: #777; } .record-badge.break { background: rgba(245, 158, 11, 0.14); color: #d97706; } .records-empty { padding : 1rem; border-radius : 14px; border : 1px dashed var(--border); background : var(--surface-alt); color : var(--muted); } /* ═══════════════════════════════════════════════════════════════════ EDIT MY DAY — FORM ═══════════════════════════════════════════════════════════════════ */ .time-inputs { display : flex; gap : 1.5rem; margin-bottom : 0.5rem; background : var(--surface-alt); padding : 1rem; border-radius : var(--radius-input); border : 1px solid var(--border); } .time-inputs input { margin : 0; border-color : rgba(0,0,0,0.05); } .form-actions { display : grid; grid-template-columns : repeat(2, minmax(0, 1fr)); gap : 0.9rem; } .form-msg { min-height : 1.2rem; margin : 0.6rem 0 0; color : var(--muted); font-size : 0.92rem; } .form-msg.error { color: #c83f3f; } /* ── Task list ───────────────────────────────────────────────── */ .task-list { list-style: none; padding: 0; margin: 0; } .task-list li { background : var(--card-bg); padding : 0.95rem 1rem; margin-bottom: 0.75rem; border-radius: 14px; border : 1px solid var(--border); display : flex; justify-content: space-between; align-items : center; gap : 1rem; } .task-details { display: grid; gap: 0.25rem; } .task-details strong, .task-meta { display: block; } .task-meta { color: var(--muted); font-size: 0.9rem; } .task-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; } .task-controls button { width : auto; padding : 0.45rem 1.1rem; border-radius : 999px; font-size : 0.88rem; font-weight : 700; letter-spacing: 0.03em; background : transparent; transition : all 0.25s ease; } .edit-btn { color : #3b82f6; border : 2px solid #3b82f6; } .edit-btn:hover { background : #3b82f6; color : #ffffff; box-shadow : 0 6px 16px rgba(59, 130, 246, 0.3); transform : translateY(-2px); } .delete-btn { color : #e15353; border : 2px solid #e15353; } .delete-btn:hover { background : #e15353; color : #ffffff; box-shadow : 0 6px 16px rgba(225, 83, 83, 0.3); transform : translateY(-2px); } /* ═══════════════════════════════════════════════════════════════════ PROFILE — THEME SWITCHER ═══════════════════════════════════════════════════════════════════ */ .theme-switcher { display : grid; grid-template-columns : repeat(auto-fit, minmax(120px, 1fr)); gap : 0.85rem; margin : 0.5rem 0 1.25rem; } .theme-option { width : 100%; padding : 0.8rem; border-radius : 14px; border : 1px solid var(--border); background : var(--surface-alt); color : var(--text); display : flex; flex-direction : column; align-items : flex-start; gap : 0.6rem; font-size : 0.9rem; font-weight : 600; box-shadow : none; transition : border-color var(--transition), background var(--transition), transform var(--transition); } .theme-option:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); } .theme-option.active { border-color: var(--primary); box-shadow : inset 0 0 0 1px var(--primary); background : var(--primary-soft); color : var(--primary); } .theme-preview { width : 100%; height : 36px; border-radius : 10px; display : block; } .emerald-preview { background: linear-gradient(135deg, #2f9e44, #dff5e3); } .midnight-preview { background: linear-gradient(135deg, #58a6ff, #0f1722); } .sunset-preview { background: linear-gradient(135deg, #f26b3a, #ffe4d6); } .lavender-preview { background: linear-gradient(135deg, #7c5cff, #efe9ff); } .cotton-candy-preview { background: linear-gradient(135deg, #ff5fa2, #8dd6ff); } .ocean-preview { background: linear-gradient(135deg, #0077b6, #e0f4f9); } /* ═══════════════════════════════════════════════════════════════════ PROFILE TAB CENTERING & PICTURE ═══════════════════════════════════════════════════════════════════ */ #profile .section-heading { text-align: center; } .profile-center { display: flex; flex-direction: column; align-items: center; text-align: center; margin-left: auto; margin-right: auto; } .profile-center label { width: 100%; max-width: 400px; text-align: left; } .profile-center input, .profile-center .theme-switcher, .profile-center button, .profile-center .form-msg, .profile-center .success-msg { width: 100%; max-width: 400px; } .profile-pic-container { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; margin-bottom: 1.5rem; } .profile-pic-preview { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); box-shadow: var(--shadow); background: var(--surface-alt); } /* ═══════════════════════════════════════════════════════════════════ UTILITY MESSAGES ═══════════════════════════════════════════════════════════════════ */ .success-msg { min-height : 1.2rem; color : var(--muted); font-size : 0.92rem; margin : 0; } .record-time { font-size : 0.88rem; white-space : nowrap; color : var(--muted); } /* ═══════════════════════════════════════════════════════════════════ REMINDER POPUP ═══════════════════════════════════════════════════════════════════ */ .reminder-popup { position : fixed; right : 20px; bottom : 20px; width : min(520px, calc(100% - 28px)); padding : 1.25rem; border-radius : 20px; background : var(--card-bg); border : 1px solid var(--border); box-shadow : 0 24px 64px rgba(0,0,0,0.18); display : grid; gap : 1rem; transform : translateY(28px) scale(0.97); opacity : 0; pointer-events: none; transition : transform 0.28s ease, opacity 0.28s ease; z-index : 9000; } .reminder-popup.show { transform : translateY(0) scale(1); opacity : 1; pointer-events: auto; } .reminder-popup__badge { display : inline-flex; width : fit-content; padding : 0.3rem 0.7rem; border-radius : var(--radius-pill); background : var(--primary-soft); color : var(--primary); font-size : 0.75rem; font-weight : 700; text-transform: uppercase; letter-spacing: 0.05em; } .reminder-popup__content strong { display : block; font-size : 1.1rem; margin-bottom : 0.3rem; } .reminder-popup__content p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 0.93rem; } .reminder-popup__actions { display : grid; grid-template-columns : repeat(2, minmax(0, 1fr)); gap : 0.75rem; } .popup-action { width: 100%; border-radius: 14px; font-size: 0.95rem; } .complete-action { background: #2f9e44; } .complete-action:hover { background: #237635; } .prepone-action { background: #3b82f6; } .prepone-action:hover{ background: #2563eb; } .not-done-action { background: #e15353; } .not-done-action:hover{ background: #c83f3f; } .cancel-action { background: #6b7280; } .cancel-action:hover { background: #4b5563; } /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE — 900 px ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .dashboard-grid, .chart-layout { grid-template-columns: 1fr; } .card-header { flex-direction: column; } .chart-header-actions { align-items: flex-start; } } /* ═══════════════════════════════════════════════════════════════════ CALENDAR WIDGET ═══════════════════════════════════════════════════════════════════ */ .calendar-wrapper { max-width: 100%; padding: 1.5rem; margin-bottom: 2rem; background: var(--card-bg); } .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .calendar-header h3 { margin: 0; font-size: 1.2rem; font-weight: 700; } .icon-btn { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 600; color: var(--muted); font-size: 0.85rem; margin-bottom: 0.5rem; } .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 0.35rem; border-radius: 10px; cursor: pointer; transition: background 0.2s, border-color 0.2s; border: 1px solid transparent; overflow: hidden; } .cal-day:hover:not(.empty) { background: var(--surface-alt); border-color: var(--border); } .cal-day.today { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-strong); font-weight: bold; } .cal-date-num { font-size: 0.95rem; } .cal-events { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 0 4px; margin-top: 4px; } .cal-event-label { font-size: 0.65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; padding: 2px 4px; text-align: center; line-height: 1.2; } /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE — 720 px (mobile) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { #navbar { width: calc(100% - 24px); margin: 12px auto 0; } main { width: min(calc(100% - 24px), 1180px); padding-bottom: 5rem; } .nav-topbar { width: 100%; } .nav-toggle { display: none !important; } @keyframes slideUpBar { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Transform to Native-App Bottom Bar */ .nav-links { position: fixed !important; bottom: 0; left: 0; right: 0; background: var(--card-bg); border-top: 1px solid var(--border); padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom)); flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-around; align-items: center; gap: 0.2rem; z-index: 9999; box-shadow: 0 -4px 24px rgba(0,0,0,0.08); border-radius: 20px 20px 0 0; max-height: none !important; opacity: 1 !important; pointer-events: auto !important; animation: slideUpBar 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .nav-btn { flex: 1; display: flex; padding: 0.5rem 0.1rem; font-size: 0.65rem; border-radius: 12px; justify-content: center; align-items: center; flex-direction: column; text-align: center; white-space: normal; line-height: 1.1; } .nav-btn[data-view="calendar"] { position: relative; } .nav-badge { position: absolute; top: -4px; right: -4px; padding: 0.15rem 0.35rem; font-size: 0.6rem; } .chat-widget { bottom: 90px; } .reminder-popup { bottom: 90px; } .content-view { padding: 1.5rem 0; } .time-inputs, .form-actions { grid-template-columns: 1fr; flex-direction : column; align-items : stretch; } .chart-mode-switcher, .task-controls { flex-direction: row; justify-content: center; align-items: center; width: 100%; } .timeline-entry, .task-list li { flex-direction: column; align-items: stretch; } .reminder-popup__actions { grid-template-columns: 1fr; } .chart-table-row { grid-template-columns: 1fr; text-align: center; justify-items: center; } .record-time { white-space: normal; } .events-header { flex-direction: column; align-items: center; text-align: center; } .event-filters { justify-content: center; width: 100%; } .calendar-wrapper { padding: 1rem 0.5rem; } .calendar-weekdays { font-size: 0.75rem; } .calendar-days { gap: 2px; } .cal-day { padding-top: 0.25rem; border-radius: 8px; } .cal-date-num { font-size: 0.85rem; } .cal-events { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; padding: 0; margin-top: 2px; } .cal-event-label { width: 6px; height: 6px; padding: 0 !important; border-radius: 50%; color: transparent !important; font-size: 0; min-width: 6px; border: none !important; } .cal-event-label.badge-birthday { background: #db2777 !important; } .cal-event-label.badge-anniversary { background: #dc2626 !important; } .cal-event-label.badge-meeting { background: #2563eb !important; } .cal-event-label.badge-exam { background: #8b5cf6 !important; } .cal-event-label.badge-holiday { background: #16a34a !important; } .cal-event-label.badge-default { background: var(--muted) !important; } .pie-chart-wrap { width: min(240px, 100%); } } /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE — 480 px (small phones) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .auth-card { padding: 1.2rem; } .theme-switcher { grid-template-columns: repeat(2, 1fr); } .chart-center strong { font-size: 1.35rem; } } /* ═══════════════════════════════════════════════════════════════════ FORCED ALARM VISUAL EFFECT ═══════════════════════════════════════════════════════════════════ */ @keyframes pulseAlarm { 0% { box-shadow: 0 24px 64px rgba(225, 83, 83, 0.15); border-color: var(--border); } 50% { box-shadow: 0 24px 64px rgba(225, 83, 83, 0.7); border-color: #e15353; } 100% { box-shadow: 0 24px 64px rgba(225, 83, 83, 0.15); border-color: var(--border); } } .reminder-popup.show.alarm-active { animation: pulseAlarm 1.2s infinite; } /* Make the title text red while ringing for extra urgency */ .reminder-popup.show.alarm-active #reminder-title { color: #e15353; } /* ═══════════════════════════════════════════════════════════════════ AI CHAT BOT ═══════════════════════════════════════════════════════════════════ */ .chat-widget { position: fixed; left: 20px; bottom: 20px; z-index: 8000; display: flex; flex-direction: column; align-items: flex-start; } .chat-toggle-btn { width: 60px; height: 60px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 0; z-index: 2; transition: transform 0.3s ease, background 0.3s ease; } .chat-toggle-btn:hover { transform: scale(1.05); } .chat-toggle-btn img { filter: brightness(0) invert(1); } .chat-window { position: absolute; bottom: 76px; left: 0; width: min(350px, calc(100vw - 40px)); background: var(--card-bg); border-radius: var(--radius-card); box-shadow: var(--shadow); border: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; transform-origin: bottom left; } .chat-window.hidden { transform: scale(0); opacity: 0; pointer-events: none; } .chat-header { background: var(--primary); color: white; padding: 0.9rem 1.25rem; display: flex; justify-content: space-between; align-items: center; font-weight: 600; } .close-chat-btn { background: transparent; color: white; box-shadow: none; width: auto; padding: 0; font-size: 1.5rem; line-height: 1; } .close-chat-btn:hover { background: transparent; transform: scale(1.1); box-shadow: none; } .chat-messages { height: 320px; padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; background: var(--bg-color); } .msg { max-width: 85%; padding: 0.65rem 0.95rem; border-radius: 14px; font-size: 0.92rem; line-height: 1.45; } .user-msg { align-self: flex-end; background: var(--primary-strong); color: white; border-bottom-right-radius: 4px; } .bot-msg { align-self: flex-start; background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .chat-input-area { display: flex; padding: 0.85rem; gap: 0.6rem; background: var(--card-bg); border-top: 1px solid var(--border); } .chat-input-area input { margin: 0; padding: 0.6rem 0.8rem; } .send-chat-btn { width: auto; padding: 0 1rem; }