/* CRM styles -- palette + theme mechanism mirror the main dashboard * (web/style.css): light is the :root default, dark is [data-theme="dark"] on * . The CRM reads the same localStorage 'cc-theme' so it matches whatever * theme the operator set on the dashboard. */ :root { --bg: #faf9f5; --panel: #ffffff; --panel2: #f0eee6; --panel-hover: #f5f4ed; --text: #141413; --muted: #87867f; --accent: #d97757; --accent-hover: #c46849; --line: #d1cfc5; --ok: #788c5d; --warn: #c08a2d; --bad: #bf4d43; --lock: #87867f; --shadow: 0 1px 3px rgba(20,20,19,0.06); --shadow-pop: 0 8px 28px rgba(20,20,19,.14); --ink-soft: #5b5a54; } [data-theme="dark"] { --bg: #141413; --panel: #1f1e1d; --panel2: #30302e; --panel-hover: #262624; --text: #faf9f5; --muted: #73726c; --accent: #d97757; --accent-hover: #c46849; --line: #3d3d3a; --ok: #8ba46d; --warn: #d9a441; --bad: #d9695f; --lock: #73726c; --shadow: 0 1px 3px rgba(0,0,0,0.25); --shadow-pop: 0 10px 30px rgba(0,0,0,.5); --ink-soft: #c7c6bf; } * { box-sizing: border-box; } /* The hidden attribute MUST win over the display set by .modal/.login/.toast * (class display:flex otherwise overrides the UA [hidden]{display:none}, leaving * an empty modal backdrop covering the page -- it dims everything and eats all * clicks). This one rule keeps every hidden overlay truly hidden. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } .muted { color: var(--muted); font-weight: 400; font-size: .8em; } a { color: var(--accent); } button { cursor: pointer; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; font-size: 14px; transition: .2s ease; } button:hover { border-color: var(--accent); color: var(--accent); } select, input, textarea { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 14px; } /* ---- header: "A" variant (tab-nav + user menu + mobile hamburger) ---- */ .topbar { display: flex; align-items: center; gap: 16px; padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); } .topbar .brand { font-weight: 700; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; } .topbar .brand .co { color: var(--muted); font-weight: 400; font-size: .78em; margin-left: 6px; } .topbar .grow { flex: 1 1 auto; } /* tab navigation */ .navtabs { display: flex; gap: 4px; } .navtabs .tab { border: none; background: transparent; color: var(--ink-soft); font-size: 14px; font-weight: 500; padding: 7px 13px; border-radius: 8px; white-space: nowrap; } .navtabs .tab:hover { background: var(--panel-hover); color: var(--text); } .navtabs .tab.active { background: var(--panel2); color: var(--text); } .navtabs .tab.active::after { content: ""; display: block; height: 2px; background: var(--accent); border-radius: 2px; margin: 5px 8px -1px; } /* icon button (bell / hamburger) + notification dot */ .icobtn { position: relative; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .icobtn:hover { border-color: var(--accent); color: var(--accent); } .ndot { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--panel); } .ndot.zero { display: none; } /* primary CTA (+ Új projekt) */ .topbar .cta { border: none; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; padding: 9px 15px; border-radius: 9px; white-space: nowrap; box-shadow: 0 1px 2px rgba(217,119,87,.35); } .topbar .cta:hover { background: var(--accent-hover); color: #fff; border: none; } /* user menu (avatar + dropdown) */ .menuhost { position: relative; } .avatar { display: flex; align-items: center; gap: 9px; padding: 5px 6px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); } .avatar:hover { border-color: var(--accent); color: var(--text); } .ava { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; } .avatar .who { font-size: 13px; font-weight: 600; padding-right: 2px; text-align: left; line-height: 1.15; } .avatar .who small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; } .avatar .caret { color: var(--muted); font-size: 10px; margin-right: 4px; } .menu { position: absolute; z-index: 50; min-width: 214px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; top: calc(100% + 8px); right: 0; } .menu .mhead { padding: 9px 11px 7px; font-size: 12px; color: var(--muted); } .menu .mhead b { display: block; color: var(--text); font-size: 14px; font-weight: 650; } .menu .msep { height: 1px; background: var(--line); margin: 6px 8px; } .mrow { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 11px; border-radius: 8px; font-size: 13.5px; color: var(--text); background: transparent; border: none; } .mrow:hover { background: var(--panel-hover); color: var(--text); } .mrow .mi { width: 18px; text-align: center; color: var(--muted); font-size: 14px; } .mrow.danger { color: var(--bad); } .mrow.danger:hover { color: var(--bad); } .mrow.danger .mi { color: var(--bad); } /* mobile drawer */ .nav-hamburger { display: none; } .m-drawer { position: absolute; top: 100%; left: 0; right: 0; z-index: 49; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-pop); } .m-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 18px; border: none; border-bottom: 1px solid var(--line); background: var(--panel); font-size: 14.5px; color: var(--text); border-radius: 0; } .m-row:hover { background: var(--panel-hover); color: var(--text); } .m-row .mi { width: 20px; text-align: center; color: var(--muted); } .m-row.danger { color: var(--bad); } .m-row.danger .mi { color: var(--bad); } /* focus visibility for keyboard users */ .topbar .tab:focus-visible, .topbar .icobtn:focus-visible, .topbar .cta:focus-visible, .avatar:focus-visible, .mrow:focus-visible, .m-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 640px) { .topbar { position: relative; gap: 10px; padding: 10px 14px; } .navtabs, .menuhost { display: none; } /* into the hamburger drawer */ .topbar .brand .co { display: none; } .nav-hamburger { display: inline-flex; } .topbar .cta { padding: 9px 12px; } /* "+" stays, compact */ } main { padding: 20px; max-width: 1100px; margin: 0 auto; } .list-search { width: 100%; margin-bottom: 12px; padding: 9px 12px; font-size: 14px; } .filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .filter.active { border-color: var(--accent); color: var(--accent); } .project-list { display: grid; gap: 10px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; box-shadow: var(--shadow); } .card:hover { border-color: var(--accent); background: var(--panel-hover); } .card h3 { margin: 0 0 4px; font-size: 16px; } .card .row { display: flex; gap: 14px; color: var(--muted); font-size: 13px; flex-wrap: wrap; } .pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); } .pill.open { color: var(--accent); } .pill.closed { color: var(--muted); } .pill.archived { color: var(--lock); } .phase { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow); } .phase.current { border-color: var(--accent); } .phase.locked { opacity: .85; } .phase-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .phase-head .title { font-weight: 600; } .status { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); } .status.open { color: var(--muted); } .status.in_progress { color: var(--accent); } .status.done { color: var(--ok); } .status.blocked { color: var(--bad); } .lock-ico { color: var(--lock); font-size: 12px; } .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 10px; } .field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; } .field input, .field select, .field textarea { width: 100%; } .phase-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .back { margin-bottom: 14px; } button.danger { background: #b3261e; border-color: #b3261e; color: #fff; } button.danger:hover { background: #8f1d17; } .detail-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; } .two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; } .side h4 { margin: 0 0 8px; } .event, .comment { border-bottom: 1px solid var(--line); padding: 6px 0; font-size: 13px; } .event .t, .comment .t { color: var(--muted); font-size: 11px; } .side .box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 14px; box-shadow: var(--shadow); } .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--accent); padding: 10px 16px; border-radius: 8px; z-index: 50; box-shadow: var(--shadow); } .toast.err { border-color: var(--bad); } .modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 40; } .modal .sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; width: min(460px, 92vw); max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow); } .modal .sheet h3 { margin-top: 0; } .modal .sheet label { display: block; margin: 10px 0 2px; font-size: 13px; color: var(--muted); } .modal .sheet input, .modal .sheet select { width: 100%; } .modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } /* login overlay when no/invalid token */ .login { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 60; } .login .sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; width: min(420px, 92vw); box-shadow: var(--shadow); } .login input { width: 100%; margin: 10px 0; } @media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } .fields { grid-template-columns: 1fr; } } /* Support chatbot: floating bubble + chat panel (bottom-right). */ .help-bubble { position: fixed; right: 20px; bottom: 20px; z-index: 55; background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 11px 18px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); } .help-bubble:hover { background: var(--accent-hover); color: #fff; } .help-panel { position: fixed; right: 20px; bottom: 20px; z-index: 56; width: min(360px, 94vw); height: min(520px, 80vh); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; } .help-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--panel2); border-bottom: 1px solid var(--line); } .help-head .muted { flex: 1; } .help-close { background: none; border: none; font-size: 20px; line-height: 1; padding: 0 4px; color: var(--muted); } .help-close:hover { color: var(--accent); border: none; } .help-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .help-msg { max-width: 85%; padding: 8px 11px; border-radius: 12px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .help-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } .help-bot { align-self: flex-start; background: var(--panel2); color: var(--text); border-bottom-left-radius: 4px; } .help-foot { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); } .help-foot textarea { flex: 1; resize: none; } .help-foot button { align-self: stretch; } /* Support-chatbot answer feedback (thumbs up/down) */ .help-fb { align-self: flex-start; display: flex; align-items: center; gap: 6px; margin: -2px 0 2px 2px; font-size: 12px; } .help-fb-btn { padding: 2px 8px; font-size: 14px; line-height: 1; border-radius: 999px; background: var(--panel2); } .help-fb-btn.sel { border-color: var(--accent); background: var(--accent); } /* Per-phase notified people (read-only list) */ .phase-members { margin: 2px 0 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .phase-members .pill { font-size: 12px; } /* ---- Riport (vezetői analitika) ---- */ .r-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .r-head h2 { margin: 0; font-size: 20px; } /* stat cards row */ .stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); } .stat .s-lbl { color: var(--muted); font-size: 12px; font-weight: 500; margin-bottom: 6px; } .stat .s-val { font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; } .stat .s-sub { color: var(--muted); font-size: 12px; margin-top: 4px; } .stat.bad .s-val { color: var(--bad); } .stat.ok .s-val { color: var(--ok); } /* report sections + charts */ .r-sect { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow); } .r-sect h3 { margin: 0 0 2px; font-size: 16px; } .r-sect h4 { margin: 16px 0 6px; font-size: 13.5px; color: var(--ink-soft); } .r-sect > .muted { margin: 0 0 12px; } .chart-wrap { width: 100%; overflow-x: auto; } .chart { display: block; } .chart .c-lbl { fill: var(--text); font-size: 12px; } .chart .c-val { fill: var(--muted); font-size: 12px; font-weight: 600; } .chart .c-track { fill: var(--panel2); } .chart .c-tick { fill: var(--muted); font-size: 11px; } .chart .c-axis { stroke: var(--line); stroke-width: 1; } /* legend */ .legend { display: flex; gap: 16px; margin-bottom: 8px; } .legend .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); } .legend .lg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } /* arrears mini table */ .r-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .r-tr { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; } .r-tr:last-child { border-bottom: none; } .r-tr span:not(:first-child) { text-align: right; } .r-th { color: var(--muted); font-size: 12px; font-weight: 600; background: var(--panel2); } .r-sum { font-weight: 700; background: var(--panel2); } .r-tr .r-bad { color: var(--bad); } @media (max-width: 720px) { .stat-cards { grid-template-columns: 1fr 1fr; } } /* ---- AI record summary (AIDA) ---- */ .ai-summary { margin: 0 0 16px; } .ai-sum-btn { background: var(--panel2); border: 1px solid var(--line); color: var(--text); font-weight: 600; } .ai-sum-btn:hover { border-color: var(--accent); color: var(--accent); } .ai-sum-btn:disabled { opacity: .6; cursor: default; } .ai-sum-panel { margin-top: 10px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); white-space: pre-wrap; word-break: break-word; line-height: 1.5; } .ai-sum-panel strong { display: inline-block; margin-top: 8px; color: var(--accent); font-size: 14px; } .ai-sum-panel strong:first-child { margin-top: 0; } .ai-sum-panel .t { color: var(--muted); font-size: 11px; margin-top: 12px; display: block; white-space: normal; }