/* ========================================================================== AltusHelpDesk design system - vanilla CSS, no frameworks. Tokens are set per theme via (css/themes/*.css); this file holds structure + components only. ========================================================================== */ * { box-sizing: border-box; } :root { --bg: #f4f6f8; --panel: #ffffff; --panel-2: #f8fafc; --ink: #1f2937; --muted: #6b7280; --line: #d9e0e6; --accent: #1e7d3c; --accent-ink: #ffffff; --accent-soft: #e2f1e6; --danger: #c0392b; --warn: #96650a; --ok: #1f7a3d; --info: #23567d; /* two-zone Part A/B separation (plan 6.2) */ --panel-user: #eef4fb; --panel-user-line: #c6d8ec; --panel-altus: #e2f1e6; --panel-altus-line: #c3dec9; /* lifted surface inside zone panels / readonly fields; dark themes override */ --overlay: rgba(255, 255, 255, 0.65); --radius: 10px; --shadow: 0 1px 3px rgba(16, 24, 40, 0.08); --font: "Segoe UI", Arial, Helvetica, sans-serif; } html { font-size: clamp(14px, 0.9vw + 10px, 16px); } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.5; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ------------------------------- layout --------------------------------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 220px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 10px; } .sidebar .brand { font-weight: 800; font-size: 1.05rem; color: var(--accent); padding: 4px 8px 10px; border-bottom: 1px solid var(--line); } .menu-section-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 8px 8px 4px; } .menu-links { display: flex; flex-direction: column; gap: 2px; } .menu-links a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--ink); min-height: 38px; } .menu-links a:hover { background: var(--accent-soft); text-decoration: none; } .menu-links a.active { background: var(--accent); color: var(--accent-ink); font-weight: 600; } .menu-links .ico { width: 1.3em; text-align: center; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { background: var(--panel); border-bottom: 1px solid var(--line); padding: 8px 18px; display: flex; align-items: center; gap: 12px; justify-content: flex-end; flex-wrap: wrap; } .topbar .who { color: var(--muted); font-size: 0.85rem; margin-right: auto; } .topbar .who b { color: var(--ink); } .content { padding: 18px; width: 100%; } /* ------------------------------ components ------------------------------- */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 14px; } .panel h1, .panel h2 { margin: 0 0 12px; font-size: 1.15rem; } .panel h3 { margin: 14px 0 8px; font-size: 1rem; } .btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 8px; padding: 8px 14px; font-size: 0.9rem; cursor: pointer; min-height: 38px; font-family: var(--font); } .btn:hover { filter: brightness(1.07); text-decoration: none; } .btn.secondary { background: var(--panel); color: var(--ink); border-color: var(--line); } .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn.small { padding: 4px 10px; min-height: 30px; font-size: 0.8rem; } /* disabled button look (e.g. Unlock on a user with no failed logins) */ .btn.disabled { opacity: 0.45; cursor: not-allowed; } /* admin user list: all row action buttons share one width */ .row-actions { white-space: nowrap; } .row-actions .btn { min-width: 88px; justify-content: center; } /* ------------------- file picker (styled "Choose file") ------------------- */ .filepicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* the real input stays focusable for keyboard users but is visually hidden; the styled label opens the browser's file dialog */ .filepicker input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* keyboard focus ring moves to the visible label while the hidden input holds focus (tab to it, press Enter to pick a file) */ .filepicker:focus-within .btn { outline: 2px solid var(--accent); outline-offset: -1px; } .filepicker .filepicker-name { font-size: 0.85rem; color: var(--muted); word-break: break-all; } .filepicker .filepicker-name.has-file { color: var(--ink); font-weight: 600; } /* ------------------------------- tables ---------------------------------- */ table.data { width: 100%; border-collapse: collapse; background: var(--panel); font-size: 0.88rem; } table.data th, table.data td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; } table.data thead th { background: var(--panel-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } table.data th.col-num, table.data td.col-num { width: 38px; text-align: center; vertical-align: middle; color: var(--muted); font-variant-numeric: tabular-nums; } table.data tbody tr:nth-child(even) { background: var(--panel-2); } table.data tbody tr:hover { background: var(--accent-soft); } .table-scroll { overflow-x: auto; } /* -------------------------------- forms ---------------------------------- */ label { display: block; font-size: 0.85rem; margin-bottom: 4px; color: var(--muted); } input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="datetime-local"], input[type="number"], select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-family: var(--font); font-size: 0.92rem; min-height: 38px; } textarea { min-height: 90px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } /* bottom-align label+control groups so inputs line up across a row even when one label wraps to two lines */ .form-grid > div { display: flex; flex-direction: column; justify-content: flex-end; } .form-grid .full { grid-column: 1 / -1; } /* inline checkbox cell inside form-grid: sits on the input baseline */ label.check-row { display: flex; align-items: center; gap: 8px; color: var(--ink); margin: 0; min-height: 38px; cursor: pointer; } label.check-row input[type="checkbox"] { width: auto; min-height: 0; margin: 0; } /* flatpickr: match app look (calendar popup) */ .flatpickr-calendar { border-radius: 10px; box-shadow: var(--shadow); font-family: var(--font); } .flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--accent); border-color: var(--accent); } fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 12px; } legend { font-weight: 700; padding: 0 6px; } /* ------------------------------ zone panels ------------------------------ */ .zone-user { background: var(--panel-user); border: 1px solid var(--panel-user-line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; } .zone-altus { background: var(--panel-altus); border: 1px solid var(--panel-altus-line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; } .zone-email { background: var(--panel-email); border: 1px solid var(--panel-email-line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; } .zone-email .zone-title { color: var(--warn); } /* recipient address in the "Resolution email to ..." heading: a distinct link-blue so it reads as the destination, not part of the label */ .email-addr { color: var(--info); font-weight: 700; } /* sent-mail history: its own card inside the email zone (light orange) */ .email-history-card { background: var(--panel-emailhist); border: 1px solid var(--panel-emailhist-line); border-radius: var(--radius); padding: 12px 14px; margin-top: 14px; } .email-history-card h3 { margin-top: 0; } .zone-title { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 999px; padding: 2px 12px; margin-bottom: 10px; background: var(--overlay); color: var(--info); } .zone-altus .zone-title { color: var(--accent); } .readonly-field { background: var(--overlay); border-radius: 8px; padding: 8px 10px; } .readonly-block { white-space: pre-wrap; background: var(--overlay); border: 1px dashed var(--panel-user-line); border-radius: 8px; padding: 10px 12px; min-height: 60px; } /* -------------------------------- badges --------------------------------- */ .badge { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; } .badge-ok { background: #d9f0e0; color: #17663a; } .badge-ongoing { background: #fcf0d5; color: #96650a; } .badge-hold { background: #f3e6fb; color: #6b3fa0; } .badge-muted { background: #e6e9ec; color: #5c6770; } .badge-archived { background: #e6ecf1; color: #4a6272; } .badge-danger { background: #fbe4e1; color: #c0392b; } .badge-sla { background: #c0392b; color: #ffffff; } /* --------------------------------- misc ---------------------------------- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 16px; } .kpi { background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 12px 16px; } .kpi .v { font-size: 1.6rem; font-weight: 800; color: var(--accent); } .kpi .l { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .flash { border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 0.9rem; } .flash.ok { background: #d9f0e0; color: #17663a; } .flash.err { background: #fbe4e1; color: #c0392b; } .flash.info { background: #e3edf8; color: #23567d; } .pagination { display: flex; gap: 6px; margin: 12px 0; flex-wrap: wrap; } .pagination a, .pagination .current { border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; background: var(--panel); min-width: 36px; text-align: center; } .pagination .current { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .pagination a:hover { background: var(--accent-soft); text-decoration: none; } .pagination .gap { align-self: center; color: var(--muted); padding: 0 2px; } /* display-only filter on an entry screen (new case): visibly not part of the saved data */ .nih-filter-box { border: 1px dashed var(--accent); border-radius: 10px; background: var(--accent-soft); padding: 10px 14px; margin-bottom: 14px; } .nih-filter-box .nih-filter-note { color: var(--accent); font-size: 0.8rem; font-style: italic; } .filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; } .filters > div { min-width: 150px; } .filters > div.btn-cell { min-width: 0; } .filters > div.date-cell { min-width: 115px; max-width: 130px; } .filters > div.date-cell input { width: 100%; } .filters > div.search-cell { flex: 1; min-width: 140px; max-width: 260px; } .filters > div.search-cell input { width: 100%; } /* saved case-list views (Enhancement 02): chips under the filter bar */ .saved-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; } .saved-filters .saved-label { font-size: 0.8rem; color: var(--muted); } form.filter-chip { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); background: var(--panel-2); border-radius: 999px; padding: 2px 4px 2px 12px; min-height: 32px; } form.filter-chip .chip-link { color: var(--ink); text-decoration: none; font-size: 0.82rem; white-space: nowrap; } form.filter-chip .chip-link:hover { color: var(--accent); text-decoration: underline; } form.filter-chip button.chip-del { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 0.8rem; line-height: 1; padding: 4px 8px; border-radius: 999px; min-height: 0; width: auto; } form.filter-chip button.chip-del:hover { color: var(--danger); background: var(--overlay); } .saved-filters form.filter-save { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } .saved-filters form.filter-save input[type="text"] { min-width: 190px; max-width: 240px; min-height: 32px; padding: 4px 10px; } @media (max-width: 720px) { .saved-filters form.filter-save { margin-left: 0; width: 100%; } } /* attachment inline preview on the case view (Enhancement 02) */ .attachment-preview { margin-top: 12px; } .attachment-preview a { display: inline-block; } .attachment-preview img { display: block; max-width: 480px; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); box-shadow: var(--shadow); } .attachment-preview a:hover img { border-color: var(--accent); } /* ------------------------------- login card ------------------------------ */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .login-card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 26px 28px; } .login-card h1 { margin: 0 0 4px; font-size: 1.3rem; } .login-card .sub { color: var(--muted); font-size: 0.85rem; margin-bottom: 16px; } .captcha-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .captcha-row img { border-radius: 8px; border: 1px solid var(--line); height: 52px; } /* keep a small gap above flash banners inside the login/forgot/reset card (e.g. captcha error sitting right under the input) */ .login-card .flash { margin-top: 10px; } /* --------------------- public feedback form (AU_FeedbackForm) ------------ */ .login-card.wide { max-width: 680px; } .fb-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .fb-top .brand { font-weight: 800; color: var(--accent); font-size: 1.05rem; } .fb-theme { display: flex; align-items: center; gap: 6px; margin: 0; } .fb-theme label { margin: 0; } .fb-theme select { width: auto; } .req { color: var(--danger); } .login-card input[type="file"] { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-family: var(--font); font-size: 0.85rem; } .stage2 { display: none; } /* password field with show/hide eye button */ .pwd-field { position: relative; } .pwd-field input { padding-right: 46px; } .pwd-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 4px 8px; min-height: 30px; border-radius: 6px; } .pwd-toggle:hover { background: var(--accent-soft); } .pwd-toggle:focus-visible { outline: 2px solid var(--accent); } .phrase-box { background: var(--accent-soft); border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-weight: 600; } /* ------------------------------ responsive ------------------------------- */ .nav-toggle { display: none; } @media (max-width: 768px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--line); padding: 8px 12px; } .sidebar .menu-links { display: none; } .sidebar.open .menu-links { display: flex; } .nav-toggle { display: inline-flex; align-self: flex-end; } .content { padding: 12px; } /* data tables become stacked cards on phones */ table.data.card-mobile, .card-mobile table.data { border: 0; } .card-mobile thead { display: none; } .card-mobile tbody tr { display: block; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; background: var(--panel); } .card-mobile tbody tr td { display: flex; justify-content: space-between; gap: 12px; border: none; border-bottom: 1px dashed var(--line); } .card-mobile tbody tr td::before { content: attr(data-label); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; color: var(--muted); flex-shrink: 0; } .topbar .who { width: 100%; } } /* collapsible technical help block (admin users page) */ details.rules-help { margin-top: 14px; } details.rules-help > summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; user-select: none; } details.rules-help[open] > summary { margin-bottom: 4px; } details.rules-help table.data td { font-size: 0.85rem; } details.rules-help code { background: var(--overlay); border-radius: 4px; padding: 1px 5px; font-size: 0.82rem; } /* slow-action progress dialog (forms marked data-progress) */ .slow-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 18, 22, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; } .slow-modal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 22px 24px; width: 100%; max-width: 360px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; } .slow-modal h3 { margin: 0; font-size: 1.05rem; } .slow-note { margin: 0; color: var(--muted); font-size: 0.85rem; } .slow-count { width: 100%; display: flex; flex-direction: column; gap: 6px; } .slow-secs { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; } .slow-bar { height: 6px; border-radius: 4px; background: var(--overlay); overflow: hidden; } .slow-bar span { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 4px; transition: width 1s linear; } .slow-spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--overlay); border-top-color: var(--accent); animation: slow-spin 0.9s linear infinite; } @keyframes slow-spin { to { transform: rotate(360deg); } } .slow-timeout, .slow-overlay .slow-dismiss { display: none; } .slow-timed-out .slow-count { display: none; } .slow-timed-out .slow-timeout { display: block; margin: 0; font-size: 0.85rem; color: var(--danger); } .slow-timed-out .slow-dismiss { display: inline-block; } .slow-timed-out .slow-spinner { border-top-color: var(--danger); animation-duration: 1.6s; } /* ------------------- modal dialogs (js/dialog.js) ------------------------ */ /* Above the slow-progress overlay so a late error can still be shown. */ body.dlg-scroll-lock { overflow: hidden; } .dlg-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(15, 18, 22, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; animation: dlg-fade-in 0.14s ease-out; } .dlg-overlay.dlg-closing { animation: dlg-fade-out 0.14s ease-in forwards; } .dlg { background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 14px; box-shadow: 0 12px 40px rgba(16, 24, 40, 0.28); padding: 20px 22px 18px; width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; animation: dlg-pop-in 0.16s ease-out; } .dlg-closing .dlg { animation: dlg-pop-out 0.14s ease-in forwards; } .dlg-icon { font-size: 1.9rem; line-height: 1; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--overlay); margin-bottom: 4px; } .dlg-title { margin: 0; font-size: 1.05rem; } .dlg-msg { font-size: 0.92rem; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; max-height: 55vh; overflow-y: auto; } /* type accents: icon bubble tint + card top border */ .dlg-success { border-top-color: var(--ok); } .dlg-success .dlg-icon { background: #d9f0e0; } .dlg-error { border-top-color: var(--danger); } .dlg-error .dlg-icon { background: #fbe4e1; } .dlg-warning { border-top-color: var(--warn); } .dlg-warning .dlg-icon { background: #f7ecd2; } .dlg-info .dlg-icon { background: #e3edf8; } .dlg-question .dlg-icon { background: #e3edf8; } .dlg-input { width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-family: var(--font); font-size: 0.95rem; } .dlg-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; } @keyframes dlg-fade-in { from { opacity: 0; } } @keyframes dlg-fade-out { to { opacity: 0; } } @keyframes dlg-pop-in { from { opacity: 0; transform: scale(0.94) translateY(8px); } } @keyframes dlg-pop-out { to { opacity: 0; transform: scale(0.96); } } @media (prefers-reduced-motion: reduce) { .dlg-overlay, .dlg, .dlg-closing, .dlg-closing .dlg { animation: none; } }