/* ===== CRM — monday.com-style board platform ===== */ * { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #ffffff; --surface: #f6f7fb; --ink: #323338; --ink-soft: #676879; --line: #e6e9ef; --line-dark: #d0d4e4; --primary: #0073ea; --primary-dark: #0060c2; --green: #00c875; --red: #e2445c; --radius: 8px; /* Card / modal surface colour, used by everything that needs a step above the page background (modals, cards, popovers, table rows). Defined here so dark mode can re-tune one variable instead of hunting through every #fff in the sheet. */ --card: #ffffff; --shadow: 0 4px 12px rgba(0,0,0,.08); --scrollbar: #c9cdda; } /* Dark theme — toggled by adding .theme-dark to (set inline by layout.php before paint to avoid a flash, then flipped by the navbar toggle in app.js, persisted in localStorage). Variables are tuned so contrast stays accessible: ink above ~#e0 on a ~#1e bg = WCAG AA for body text. */ html.theme-dark, body.theme-dark { --bg: #14161f; --surface: #1e2030; --ink: #e8eaf2; --ink-soft: #8b8fa8; --line: #2a2d3f; --line-dark: #3a3e54; --primary: #4a8eff; --primary-dark: #2f72e5; --green: #2ad395; --red: #f06983; --card: #1a1c2a; --shadow: 0 4px 14px rgba(0,0,0,.45); --scrollbar: #3a3e54; color-scheme: dark; } html, body { height: 100%; } body { font-family: 'Noto Sans Thai', 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } ::-webkit-scrollbar { height: 10px; width: 10px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; } /* ---------- Share-link passcode prompt ---------- Shown only when the link's owner set a passcode. Visually distinct from the login card so visitors don't mistake it for an account login — no gradient backdrop, no email field, explicit "ไม่ต้องล็อกอิน" hint. */ .share-gate-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f6f7fb; padding: 16px; } .share-gate { background: var(--card); padding: 30px 28px; border-radius: 12px; border: 1px solid var(--line); width: 360px; max-width: calc(100vw - 24px); box-shadow: 0 10px 30px rgba(0,0,0,.08); text-align: center; } .share-gate .sg-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(0,115,234,.1); color: var(--primary); margin-bottom: 14px; } .share-gate h2 { font-size: 18px; margin: 0 0 8px; } .share-gate .sg-board { margin: 0 0 4px; font-size: 14px; color: var(--ink); } .share-gate .sg-hint { font-size: 12px; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.5; } .share-gate .sg-field { display: block; text-align: left; font-weight: 600; font-size: 13px; margin-bottom: 12px; } .share-gate .sg-field input { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line-dark); border-radius: 7px; font-size: 14px; font-family: inherit; } .share-gate .sg-field input:focus { outline: none; border-color: var(--primary); } .share-gate .sg-submit { width: 100%; justify-content: center; padding: 10px 14px; } /* ---------- Login ---------- */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient(circle at 30% 20%, #3d4a8a, #1f2240 70%); } .login-card { background: var(--card); padding: 40px; border-radius: 14px; width: 380px; max-width: calc(100vw - 24px); /* never overflow narrow phones */ box-shadow: 0 24px 60px rgba(0,0,0,.35); } .login-card .logo-row { font-size: 26px; font-weight: 800; color: var(--primary); margin-bottom: 4px; } .login-card p { color: var(--ink-soft); margin-bottom: 22px; } .login-card label { display: block; margin-bottom: 16px; font-weight: 600; } .login-card input { width: 100%; margin-top: 6px; padding: 11px 13px; border: 1px solid var(--line-dark); border-radius: var(--radius); font-size: 14px; } .login-card input:focus { outline: none; border-color: var(--primary); } .login-hint { margin-top: 18px; font-size: 12px; color: var(--ink-soft); } .login-foot { margin-top: 16px; text-align: center; font-size: 13px; } .login-foot a { color: var(--primary); font-weight: 600; text-decoration: none; } .login-foot a:hover { text-decoration: underline; } /* ---------- App shell ---------- */ /* 100dvh = dynamic viewport height: tracks the visible area as the mobile browser's toolbar collapses on scroll, so the app fills the screen and the toolbar effectively gets out of the way (and is hidden entirely in home-screen standalone mode). Falls back to 100vh on older browsers. */ .app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; } /* top navbar */ .navbar { /* Light mode = white navbar; dark mode keeps the original navy (overridden below). Children read these vars so colours flip with the theme. */ --nav-fg: var(--ink); --nav-muted: var(--ink-soft); --nav-btn: rgba(0,0,0,.05); --nav-btn-hover: rgba(0,0,0,.09); height: 48px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #fff; color: var(--nav-fg); z-index: 30; border-bottom: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); } html.theme-dark .navbar { --nav-fg: #fff; --nav-muted: #8b8fb0; --nav-btn: rgba(255,255,255,.08); --nav-btn-hover: rgba(255,255,255,.18); background: #1d2042; border-bottom-color: transparent; } .nav-toggle { background: var(--nav-btn); border: none; color: var(--nav-muted); width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; } .nav-toggle:hover { background: var(--nav-btn-hover); color: var(--nav-fg); } .nav-brand { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 800; color: var(--nav-fg); } .nav-brand .logo { color: #6c8cff; display: inline-flex; align-items: center; } /* Custom company logo replaces the default icon — fixed height, natural width (keeps the logo's aspect ratio; never cropped). Capped so a very wide logo can't crowd the navbar. */ .nav-brand .logo img { height: 22px; width: auto; max-width: 160px; border-radius: 4px; object-fit: contain; display: block; } .nav-spacer { flex: 1; } /* Navbar board search — type to jump straight to any board the user can reach. */ .nav-search { position: relative; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px; border-radius: 6px; background: var(--nav-btn); color: var(--nav-muted); flex: 0 1 280px; max-width: 280px; min-width: 0; transition: background .12s; } .nav-search:focus-within { background: var(--nav-btn-hover); color: var(--nav-fg); } .ns-ico { display: inline-flex; flex-shrink: 0; opacity: .85; } .ns-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--nav-fg); font-size: 13px; font-family: inherit; } .ns-input::placeholder { color: var(--nav-muted); } .nav-search-results { display: none; position: absolute; top: calc(100% + 6px); left: 0; width: 340px; max-width: 90vw; max-height: 62vh; overflow-y: auto; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 38px rgba(0,0,0,.22); z-index: 60; padding: 4px; } .nav-search.ns-open .nav-search-results { display: block; } .ns-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--ink); font-size: 13px; text-decoration: none; } .ns-item:hover, .ns-item.ns-active { background: var(--surface); } .ns-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ns-item-name mark { background: rgba(0,115,234,.22); color: inherit; border-radius: 2px; padding: 0 1px; } .ns-empty { padding: 16px; text-align: center; font-size: 12.5px; color: var(--ink-soft); } @media (max-width: 768px) { /* Collapsed by default — just a tappable search-icon button. */ .nav-search { flex: 0 0 auto; width: 34px; max-width: none; padding: 0; justify-content: center; background: rgba(255,255,255,.08); } .nav-search .ns-input { display: none; } .ns-ico { cursor: pointer; } /* Tapping the icon expands the field to fill the bar; the wordmark and the spacer step aside so the input gets the room. */ .nav-search.ns-expanded { flex: 1 1 auto; width: auto; padding: 0 10px; justify-content: flex-start; } .nav-search.ns-expanded .ns-input { display: block; } .navbar.ns-search-open .nav-brand, .navbar.ns-search-open .nav-spacer { display: none; } .nav-search-results { position: fixed; top: 56px; left: 8px; right: 8px; width: auto; max-width: none; } } .nav-user { display: flex; align-items: center; gap: 8px; } .nav-user-name { font-size: 12px; line-height: 1.2; } .nav-user-name small { color: var(--nav-muted); } .nav-user .cv-avatar { width: 28px; height: 28px; font-size: 11px; } .nav-logout { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: var(--nav-btn); color: var(--nav-muted); } .nav-logout:hover { background: rgba(226,68,92,.3); color: #fff; } /* Notification bell — dropdown of unread followup messages. */ .nav-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: var(--nav-btn); color: var(--nav-muted); cursor: pointer; } .nav-bell:hover { background: var(--nav-btn-hover); color: var(--nav-fg); } .nav-bell-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .nav-bell-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 90vw; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 38px rgba(0,0,0,.22); z-index: 60; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease; overflow: hidden; } .nav-bell.nav-bell-open .nav-bell-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Mobile — anchor the dropdown to the viewport (fixed, full-width minus margins) so it never spills off-screen near the navbar's right edge. */ @media (max-width: 768px) { .nav-bell-menu { position: fixed; top: 56px; right: 8px; left: 8px; width: auto; max-width: none; } } .nbm-head { padding: 12px 14px; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--line); } .nbm-list { max-height: 60vh; overflow-y: auto; } .nbm-empty { padding: 22px; text-align: center; font-size: 13px; } .nbm-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; } .nbm-item:hover { background: var(--surface); } .nbm-av { width: 32px !important; height: 32px !important; font-size: 12px !important; flex-shrink: 0; } .nbm-body { flex: 1; min-width: 0; } .nbm-line { font-size: 12.5px; } .nbm-prev { font-size: 12px; color: var(--ink); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nbm-prev.nbm-detail { color: var(--ink-soft); font-size: 11.5px; } /* Right-aligned type marker — distinguishes followup messages from board change alerts at a glance. */ .nbm-type { margin-left: auto; align-self: center; flex-shrink: 0; display: inline-flex; width: 22px; height: 22px; border-radius: 6px; align-items: center; justify-content: center; } .nbm-item.nbm-fu .nbm-type { color: var(--primary); background: rgba(0,115,234,.1); } .nbm-item.nbm-board .nbm-type { color: #e07a00; background: rgba(245,158,11,.15); } .nbm-item.nbm-trash .nbm-type { color: #b8253a; background: rgba(226,68,92,.12); } .nbm-when { font-size: 11px; margin-top: 2px; } /* Theme toggle — sun shown in light mode, moon in dark, swap via the .theme-dark class on . */ .nav-theme { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: var(--nav-btn); color: var(--nav-muted); border: none; } .nav-theme:hover { background: var(--nav-btn-hover); color: var(--nav-fg); } .nav-theme .nt-moon { display: none; } html.theme-dark .nav-theme .nt-sun { display: none; } html.theme-dark .nav-theme .nt-moon { display: inline-flex; } /* Nav user menu — click the avatar/name on the right of the navbar to open a dropdown. The trigger has cursor:pointer; CSS doesn't drive open state — JS toggles .nav-user-open. */ .nav-user { position: relative; cursor: pointer; user-select: none; padding: 3px 7px; border-radius: 6px; } .nav-user:hover { background: var(--nav-btn); } .nav-user-caret { display: inline-flex; color: var(--nav-muted); transition: transform .15s ease; } .nav-user.nav-user-open .nav-user-caret { transform: rotate(180deg); } .nav-user-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 6px; z-index: 60; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease; } .nav-user.nav-user-open .nav-user-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .num-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; } .num-item:hover { background: var(--surface); } .num-item.num-danger { color: var(--red); } .num-item.num-danger:hover { background: rgba(226,68,92,.1); } .num-ico { display: inline-flex; width: 18px; justify-content: center; color: var(--ink-soft); } .num-item.num-danger .num-ico { color: var(--red); } .num-sep { height: 1px; background: var(--line); margin: 4px 2px; } /* Language switcher block inside the user menu. */ .num-head { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px; margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .num-head .num-ico { width: 16px; color: var(--muted); } .num-item.num-lang { padding: 7px 10px; } .num-flag { display: inline-flex; width: 18px; justify-content: center; font-size: 15px; line-height: 1; } .num-item.num-lang .num-lbl { flex: 1; } .num-item.num-lang.is-active { color: var(--primary); font-weight: 700; } .num-check { display: inline-flex; color: var(--primary); } /* Profile page */ .profile-wrap { padding: 18px 32px 60px; max-width: 760px; } .profile-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 26px; } .prof-avatar-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; } .prof-avatar-pic .cv-avatar { width: 88px; height: 88px; font-size: 30px; } .prof-avatar-pic .cv-avatar-img { object-fit: cover; } .prof-pick { cursor: pointer; } /* Click-the-photo picker (mirrors company.php's cs-logo-pick) — camera badge, and an X on hover to remove. Size unchanged (the 64px .cv-avatar above). */ .prof-avatar-pick { position: relative; width: 88px; height: 88px; cursor: pointer; border-radius: 50%; transition: box-shadow .12s ease; } .prof-avatar-pick:hover { box-shadow: 0 0 0 3px rgba(0,115,234,.18); } .prof-avatar-prev { display: inline-flex; width: 100%; height: 100%; } .prof-avatar-edit { position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--card); pointer-events: none; } .prof-avatar-edit .icon { width: 13px; height: 13px; } .prof-avatar-x { position: absolute; right: -2px; top: -2px; width: 24px; height: 24px; padding: 0; border-radius: 50%; background: var(--red); color: #fff; border: 2px solid var(--card); cursor: pointer; display: none; align-items: center; justify-content: center; } .prof-avatar-x .icon { width: 13px; height: 13px; } .prof-avatar-pick.has-avatar:hover .prof-avatar-x { display: inline-flex; } .prof-avatar-pick.has-avatar:hover .prof-avatar-edit { display: none; } .prof-pick input[type="file"] { display: none; } .prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .prof-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; min-width: 0; } .prof-field-wide { grid-column: 1 / -1; } .prof-field input, .prof-field textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 400; } .prof-field input:focus, .prof-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0,115,234,.18); } .prof-field input:disabled { background: var(--surface); color: var(--ink-soft); cursor: not-allowed; } .prof-pwsec { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px 14px; margin-top: 18px; } .prof-pwsec legend { font-size: 13px; font-weight: 700; padding: 0 6px; color: var(--ink); } .prof-actions { margin-top: 20px; display: flex; justify-content: flex-end; } @media (max-width: 640px) { .profile-wrap { padding: 14px 8px 40px; } .profile-card { padding: 18px 14px; } .prof-grid { grid-template-columns: 1fr; } } .app-body { flex: 1; display: flex; overflow: hidden; } /* Board fullscreen — toggled by the 3-dot menu. Hides the top navbar and left sidebar so the board area takes the full viewport. ESC exits. */ body.board-fullscreen .navbar, body.board-fullscreen .sidebar { display: none; } body.board-fullscreen .app-body { height: 100vh; } /* Share-link guest mode — anonymous visitor accessed via a share URL. Strip the app chrome entirely: no navbar, no sidebar, just the board. The visitor came in for one board and can't navigate anywhere else, so showing app shell would be misleading. The board area expands to fill the viewport like in fullscreen mode. */ body.is-guest .navbar, body.is-guest .sidebar { display: none !important; } body.is-guest .app-body { height: 100vh; } body.is-guest .main { width: 100%; } /* Even if the share link granted "edit", guests are not board managers — strip every schema/structure control so they can only touch cell data (and add items, if the link allows that). */ body.is-guest #btn-board-menu, body.is-guest #btn-board-icon, body.is-guest .view-add, body.is-guest .view-menu, body.is-guest .col-menu, body.is-guest .btn-add-col, body.is-guest .col-add-th, body.is-guest .g-menu, body.is-guest .g-color, body.is-guest #btn-add-group, body.is-guest .dw-menu, body.is-guest #dash-add, body.is-guest .cal-settings-btn { display: none !important; } body.is-guest #board-name { cursor: default; } /* Board permission gating — body classes set by app.js bootstrap. Hides every control that would otherwise post to an API the user can't act on (and saves a round-trip to a 403). The backend always enforces too — this is purely UX. */ body.bp-no-edit .cal-settings-btn, body.bp-no-edit #btn-board-icon, body.bp-no-edit #btn-board-menu, body.bp-no-edit #btn-add-view, body.bp-no-edit .view-add, body.bp-no-edit .view-menu, body.bp-no-edit .col-menu, body.bp-no-edit .btn-add-col, body.bp-no-edit .col-add-th, body.bp-no-edit #btn-add-group, body.bp-no-edit .g-menu, body.bp-no-edit .dw-menu, body.bp-no-edit #dash-add, body.bp-no-edit .board-fab, body.bp-no-edit .g-color { display: none !important; } /* Non-edit users can still see contenteditable surfaces but the cursor shouldn't suggest they can type into them. JS also strips the attr. */ body.bp-no-edit #board-name, body.bp-no-edit .g-title, body.bp-no-edit .th-name { cursor: default; } /* No add permission → hide every "add a new row / subitem" affordance. Edit-only users (e.g. cleanup roles) can still rename/edit existing content even without add. */ body.bp-no-add #btn-new-item, body.bp-no-add .add-row, body.bp-no-add .sub-add-row, body.bp-no-add .add-subitem-input, body.bp-no-add .add-item-input { display: none !important; } /* No delete permission → hide the cell-level file remove "x". The menu delete options are gated in JS (each .opt is built conditionally so the popover only renders the entry when canDelete()). */ body.bp-no-delete .cv-file-x { display: none !important; } /* sidebar */ .sidebar { /* Light mode = soft light sidebar; dark mode keeps the navy gradient (overridden below). Children read these vars so colours flip with theme. */ --sb-fg: #4b5070; --sb-hover-bg: rgba(0,0,0,.05); --sb-hover-fg: var(--ink); --sb-active-bg: rgba(0,115,234,.10); --sb-active-fg: var(--primary); --sb-muted: var(--ink-soft); --sb-chip-bg: rgba(0,0,0,.06); width: 248px; flex-shrink: 0; color: var(--sb-fg); display: flex; flex-direction: column; background: linear-gradient(180deg, #fbfcfe 0%, #f1f3f8 100%); border-right: 1px solid var(--line); transition: width .18s ease; overflow: hidden; } html.theme-dark .sidebar { --sb-fg: #c9cce0; --sb-hover-bg: rgba(255,255,255,.08); --sb-hover-fg: #fff; --sb-active-bg: rgba(108,140,255,.28); --sb-active-fg: #fff; --sb-muted: #7a7e9e; --sb-chip-bg: rgba(255,255,255,.08); background: linear-gradient(180deg, #2a2e54 0%, #1d2042 100%); border-right-color: transparent; } .side-link { display: flex; align-items: center; gap: 9px; margin: 2px 10px; padding: 7px 12px; border-radius: 7px; color: var(--sb-fg); font-weight: 500; font-size: 11.5px; white-space: nowrap; } .side-link:hover { background: var(--sb-hover-bg); color: var(--sb-hover-fg); } .side-link.active { background: var(--sb-active-bg); color: var(--sb-active-fg); } .side-link .ico { display: inline-flex; width: 18px; justify-content: center; flex-shrink: 0; } .side-link .ico .icon, .side-folder-head .ico .icon { width: 13px; height: 13px; } .side-link .side-label { overflow: hidden; text-overflow: ellipsis; } .side-section { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 6px; font-size: 11px; letter-spacing: .08em; color: var(--sb-muted); } .side-section button, .side-add-btn { background: var(--sb-chip-bg); border: none; color: var(--sb-hover-fg); width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; } .side-section button:hover, .side-add-btn:hover { background: var(--primary); color: #fff; } .board-nav { flex: 1; overflow-y: auto; overflow-x: hidden; } .side-top { padding-top: 10px; } .side-empty { padding: 8px 22px; color: var(--sb-muted); font-size: 12px; } /* collapsed sidebar — icon rail */ .app.nav-collapsed .sidebar { width: 64px; } .app.nav-collapsed .side-label, .app.nav-collapsed .side-section span, .app.nav-collapsed .side-empty { display: none; } .app.nav-collapsed .side-link { justify-content: center; padding-left: 0; padding-right: 0; } .app.nav-collapsed .side-sublink { margin-left: 10px; } .app.nav-collapsed .side-section { justify-content: center; padding: 14px 0 6px; } .app.nav-collapsed .side-folder-head { display: none; } .app.nav-collapsed .side-folder-boards { display: block !important; } .app.nav-collapsed .side-section-actions { display: none; } /* folders in sidebar */ .side-section-actions { display: inline-flex; gap: 6px; } .side-folder-head { display: flex; align-items: center; gap: 8px; margin: 2px 10px; padding: 7px 10px; border-radius: 7px; color: var(--sb-fg); font-weight: 600; font-size: 11.5px; cursor: pointer; white-space: nowrap; } .side-folder-head:hover { background: var(--sb-hover-bg); color: var(--sb-hover-fg); } .sf-caret { display: inline-flex; transition: transform .15s ease; flex-shrink: 0; } .side-folder.collapsed .sf-caret { transform: rotate(-90deg); } .side-folder.collapsed .side-folder-boards { display: none; } .sf-name { flex: 1; overflow: hidden; text-overflow: ellipsis; } .sf-count { font-size: 11px; color: var(--sb-muted); background: var(--sb-chip-bg); border-radius: 9px; padding: 1px 7px; font-weight: 600; } .sf-menu { opacity: 0; display: inline-flex; color: var(--sb-muted); } .side-folder-head:hover .sf-menu { opacity: 1; } .sf-menu:hover { color: var(--sb-hover-fg); } /* "ถูกแชร์" category — boards shared to a member, grouped like a folder but with a share glyph tinted to set it apart from their own folders. The tint is scoped to the section header only (direct child) so nested folders inside it keep a normal folder glyph. */ .side-shared > .side-folder-head > .ico { color: #6c8cff; } /* A shared board kept inside its owner's folder is shown as a folder nested one level deeper inside the แชร์ section. */ .side-shared > .side-folder-boards > .side-shared-sub { margin-left: 8px; } .side-sublink { margin-left: 22px; } .side-folder-boards .side-empty { padding: 6px 14px; } /* Board name shrinks so the 3-dot menu has room to sit on the right edge. */ .sb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* 3-dot ⋯ menu on each sidebar board — hidden until hover, like the folder menu. Sits right-aligned at the end of the row. */ .sb-menu { opacity: 0; display: inline-flex; flex-shrink: 0; color: var(--sb-muted); padding: 0 2px; border-radius: 4px; margin-left: auto; } .side-link:hover .sb-menu { opacity: 1; } .sb-menu:hover { color: var(--sb-hover-fg); background: var(--sb-hover-bg); } /* Admin-only — group sidebar boards by their creator. Each user gets a collapsible header that contains their folders + standalone boards. */ .side-user-head { display: flex; align-items: center; gap: 8px; margin: 10px 10px 4px; padding: 6px 10px; border-radius: 7px; color: var(--sb-hover-fg); font-weight: 700; font-size: 12px; background: var(--sb-chip-bg); text-transform: uppercase; letter-spacing: .02em; cursor: pointer; white-space: nowrap; } .side-user-head:hover { background: var(--sb-hover-bg); } .su-caret { display: inline-flex; transition: transform .15s ease; flex-shrink: 0; } .side-user.collapsed .su-caret { transform: rotate(-90deg); } .side-user.collapsed .side-user-content { display: none; } .su-name { flex: 1; overflow: hidden; text-overflow: ellipsis; } .su-count { font-size: 11px; color: var(--sb-muted); background: var(--sb-chip-bg); border-radius: 9px; padding: 1px 7px; font-weight: 600; } /* Indent everything inside a user section so the hierarchy reads at a glance */ .side-user-content > .side-folder { margin-left: 6px; } .side-user-content > .side-link { margin-left: 16px; } .app.nav-collapsed .side-user-head { display: none; } /* popover head / separator */ .pop-head { font-size: 11px; font-weight: 700; color: var(--ink-soft); padding: 3px 8px 2px; } .pop-sep { height: 1px; background: var(--line); margin: 3px 0; } .main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } /* ---------- Alerts ---------- */ .alert { margin: 14px 28px 0; padding: 11px 14px; border-radius: var(--radius); font-weight: 500; } .alert-success { background: #e6f8f0; color: #027a48; } .alert-error { background: #fdeaec; color: #b42318; } /* ---------- Generic ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius); border: 1px solid var(--line-dark); background: var(--card); color: var(--ink); font-weight: 600; font-size: 13px; } .btn:hover { background: var(--surface); } .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-dark); } .btn-sm { padding: 6px 10px; font-size: 12px; } .muted { color: var(--ink-soft); } /* ---------- Home / board list ---------- */ .page-head { padding: 26px 32px 6px; } .page-head h1 { font-size: 24px; } .page-head p { color: var(--ink-soft); } .board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; padding: 22px 32px; } .board-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; transition: .12s; position: relative; } .board-card:hover { border-color: var(--primary); box-shadow: 0 6px 20px rgba(0,115,234,.12); } .board-card .bc-icon { font-size: 28px; } .board-card .bc-head { display: flex; align-items: center; gap: 8px; } /* Creator chip is the first item after the icon — margin-left:auto pushes it (and everything after it — the pin button) to the right edge, leaving the icon alone on the left. */ .board-card .bc-creator { margin-left: auto; } .board-card .bc-creator { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-soft); font-weight: 500; background: var(--surface); border-radius: 11px; padding: 3px 9px; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-card .bc-creator .icon { width: 12px; height: 12px; flex-shrink: 0; } .board-card h3 { margin: 10px 0 4px; font-size: 16px; } .board-card .bc-meta { color: var(--ink-soft); font-size: 12px; } .board-card .bc-bar { height: 4px; border-radius: 4px; margin-top: 14px; background: var(--primary); } /* Hidden-from-sidebar card — slightly dimmed so the state is visible at a glance on boards.php without competing for attention. */ .board-card.bc-sidebar-hidden { opacity: .78; } .board-card.bc-sidebar-hidden:hover { opacity: 1; } .bc-hidden-badge { /* legacy — kept in case any other view still references it */ display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 10.5px; font-weight: 600; color: #b8253a; background: rgba(226,68,92,.1); border-radius: 9px; padding: 1px 7px; } .bc-hidden-badge .icon { width: 11px; height: 11px; } /* Pin toggle on each board card. Sits right after the creator chip; the creator's margin-left:auto already shoves both of them to the right edge, so no extra positioning needed here. */ .bc-pin { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--ink-soft); cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .bc-pin:hover { background: var(--surface); color: var(--ink); } .bc-pin.bc-pin-on { color: var(--primary); } .bc-pin.bc-pin-on:hover { background: rgba(0,115,234,.1); border-color: rgba(0,115,234,.3); } /* Share-link badges — open = blue (anyone with the URL), pass = amber (URL requires a code). Sits in the meta row beside item count. */ .bc-share-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 10.5px; font-weight: 600; border-radius: 9px; padding: 1px 7px; } .bc-share-badge .icon { width: 11px; height: 11px; } .bc-share-open { color: #0060c2; background: rgba(0,115,234,.1); } .bc-share-pass { color: #a96f00; background: rgba(255,176,0,.12); } /* Folder grouping on the boards landing page. Each group has a clickable header (caret + folder icon + name + count) that toggles the body. */ .folder-group { padding: 0 32px; margin-top: 8px; } .folder-group:first-of-type { margin-top: 4px; } .folder-group-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; user-select: none; transition: background .12s; } .folder-group-head:hover { background: var(--surface); } .fg-caret { display: inline-flex; transition: transform .15s ease; color: var(--ink-soft); flex-shrink: 0; } .folder-group.collapsed .fg-caret { transform: rotate(-90deg); } .folder-group.collapsed .folder-group-body { display: none; } .folder-group.collapsed .folder-group-head { margin-bottom: 0; } .fg-icon { display: inline-flex; color: var(--primary); flex-shrink: 0; } .fg-name { flex: 1; font-size: 15px; font-weight: 700; color: var(--ink); } .fg-count { font-size: 11px; color: var(--ink-soft); background: var(--surface); border-radius: 10px; padding: 2px 9px; font-weight: 600; } .fg-actions { display: inline-flex; align-items: center; gap: 6px; } .folder-group-body .board-grid { padding: 14px 0 4px; } .folder-group-body .empty-state { background: transparent; } /* ---------- Board view ---------- */ .board-top { padding: 20px 32px 0; border-bottom: 1px solid var(--line); background: var(--card); position: sticky; top: 0; z-index: 20; } .board-title { display: flex; align-items: center; gap: 10px; } .board-title .b-icon { font-size: 26px; } .board-title h1 { font-size: 22px; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; } .board-title h1:focus { outline: none; } .board-menu-btn { border: none; background: transparent; color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; } .board-menu-btn:hover { background: var(--surface); color: var(--ink); } /* Right-aligned ownership / share indicator on the board title row */ .board-share-ind, .board-owner { margin-left: auto; flex-shrink: 0; } .board-share-ind { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: #6c8cff; background: var(--surface); } .board-owner { border: none; background: transparent; padding: 0; cursor: pointer; display: inline-flex; } .board-owner .cv-avatar.bo-av { width: 30px; height: 30px; font-size: 12px; } .board-owner:hover .cv-avatar { filter: brightness(1.08); } .bo-pop { position: fixed; z-index: 1200; min-width: 220px; max-width: 300px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 14px; } .bo-pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .bo-pop-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-weight: 700; font-size: 15px; } img.bo-pop-avatar { object-fit: cover; } .bo-pop-name { font-weight: 700; color: var(--ink); font-size: 14px; } .bo-pop-role { font-size: 12px; color: var(--ink-soft); margin-top: 1px; } .bo-pop-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding-top: 9px; border-top: 1px solid var(--line); } .bo-pop-lbl { color: var(--ink-soft); font-weight: 600; min-width: 38px; } .bo-pop-email { color: var(--primary); text-decoration: none; word-break: break-all; } .bo-pop-email:hover { text-decoration: underline; } /* Per-user "alert me about changes" toggle. Muted (outline bell) when off, filled in the brand colour when subscribed. */ .board-alert-btn { border: none; background: transparent; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; } .board-alert-btn:hover { background: var(--surface); color: var(--ink); } .board-alert-btn.on { color: var(--primary); } .board-alert-btn.on svg { fill: var(--primary); fill-opacity: .18; } /* Robot/integration toggle — same chrome as the other header icon buttons. */ .board-integrate-btn { border: none; background: transparent; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; } .board-integrate-btn:hover { background: var(--surface); color: var(--ink); } /* ---- Integration (robot) modal ---- */ .intg-modal { width: 480px; max-width: 94vw; } .intg-title { font-size: 17px; font-weight: 800; margin: 0; } .intg-lead { font-size: 12.5px; margin: 2px 0 16px; } /* Each integration is a card with a brand chip header. */ .intg-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: var(--card); } .intg-card-top { display: flex; align-items: center; gap: 11px; } .intg-card-meta { flex: 1; min-width: 0; } .intg-card-title { font-size: 14px; font-weight: 700; } .intg-card-sub { font-size: 12px; color: var(--ink-soft); margin-top: 1px; line-height: 1.4; } .intg-brand { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; } .intg-brand-discord { background: #5865f2; color: #fff; } .intg-brand-google { background: #fff; border: 1px solid var(--line); } /* Google account card — email + app-password inputs reuse .intg-dc-field for the leading-icon input styling. The fields are DIRECT children of .intg-card (Discord's live deeper inside .intg-dc-list) so `>` scopes the gap to Google. */ .intg-card > .intg-dc-field { margin-top: 10px; } .intg-gg-hint { font-size: 11.5px; margin: 8px 0 0; line-height: 1.45; } .intg-gg-link { color: var(--primary); font-weight: 600; text-decoration: underline; } .intg-gg-link:hover { opacity: .85; } /* Discord webhook rows — name + URL stacked (each with a leading icon), delete on the right. Row lifts on focus. */ .intg-dc-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 10px; } .intg-dc-row { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: border-color .12s, box-shadow .12s; } .intg-dc-row .cs-select { background: var(--bg); } .intg-dc-row:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,115,234,.12); } .intg-dc-field { position: relative; } .intg-dc-fic { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--ink-soft); pointer-events: none; } .intg-dc-fic svg { width: 14px; height: 14px; } /* Scoped under .intg-modal so it beats the generic `.cs-set-modal .cs-select` padding rule (same specificity, but that one is later in the file). */ .intg-modal .intg-dc-field .cs-select { width: 100%; padding-left: 32px; } .intg-modal .intg-dc-field .intg-dc-label { font-weight: 600; } .intg-modal .intg-dc-field .intg-dc-url { font-size: 12px; } /* Footer = an input-group of two equal-width buttons: an ใช้งาน toggle (grey = off, green = on) joined to a delete button. */ .intg-dc-foot { display: flex; margin-top: 3px; } .intg-dc-foot > button { flex: 1; min-width: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; transition: background .12s, color .12s, border-color .12s; } .intg-dc-foot > button svg { width: 15px; height: 15px; } .intg-dc-on { border-radius: 8px 0 0 8px; } .intg-dc-del { border-radius: 0 8px 8px 0; margin-left: -1px; } .intg-dc-on.is-on { background: rgba(0,200,117,.14); color: #00a35e; border-color: rgba(0,200,117,.55); z-index: 1; } .intg-dc-on.is-on svg { color: #00a35e; } .intg-dc-del:hover { background: rgba(226,68,92,.1); color: var(--red); border-color: rgba(226,68,92,.45); z-index: 1; } /* Gmail card footer: ทดสอบ (left) + ลบ (right) — same two-button group shape. */ .intg-gg-test { border-radius: 8px 0 0 8px; color: var(--primary); } .intg-gg-test:hover { background: rgba(0,115,234,.08); color: var(--primary); border-color: var(--primary); z-index: 1; } .intg-gg-del { border-radius: 0 8px 8px 0; margin-left: -1px; } .intg-gg-del:hover { background: rgba(226,68,92,.1); color: var(--red); border-color: rgba(226,68,92,.45); z-index: 1; } .intg-gg-test svg, .intg-gg-del svg { width: 15px; height: 15px; } /* Dashed "add webhook" button spanning the card. */ .intg-dc-add { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border: 1px dashed var(--line-dark); border-radius: 9px; background: transparent; color: var(--primary); cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; } .intg-dc-add:hover { background: rgba(0,115,234,.06); border-color: var(--primary); } .intg-dc-add svg { width: 15px; height: 15px; } /* Per-column integration picker — checkbox list of the board's webhooks. */ /* Scheduled-send (time-based integration) modal */ .csch-modal { width: 440px; max-width: 94vw; } .csch-modal .csch-title { display: flex; align-items: center; gap: 7px; } .csch-modal .csch-title svg { width: 18px; height: 18px; flex-shrink: 0; } .csch-modal .csch-sec { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px 11px; margin-bottom: 10px; } .csch-modal .csch-line { display: flex; align-items: center; gap: 7px; font-size: 13px; margin: 7px 0; flex-wrap: wrap; } .csch-modal .csch-head { margin-top: 0; } .csch-modal .csch-line .cs-select { margin-left: 4px; flex: 1; min-width: 140px; } .colintg-modal { width: 420px; max-width: 94vw; } .colintg-modal .intg-title { display: flex; align-items: center; gap: 7px; } .colintg-modal .intg-title svg { width: 18px; height: 18px; } .colintg-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; } .colintg-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; background: var(--card); transition: border-color .12s, background .12s; } .colintg-row:hover { border-color: var(--primary); background: rgba(0,115,234,.04); } .colintg-row .colintg-cb { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; } .colintg-brand { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; } .colintg-brand svg { width: 18px; height: 18px; } .colintg-brand-discord { color: #5865F2; } .colintg-name { flex: 1; font-size: 13px; font-weight: 600; } /* A disabled (board-wide) integration is still selectable here and looks identical to an enabled one — only the "ปิดอยู่" tag marks it. */ .colintg-offtag { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; } .colintg-empty { padding: 14px 4px; font-size: 13px; text-align: center; } .b-icon { border: 1px solid transparent; background: transparent; color: var(--primary); border-radius: 7px; padding: 3px; cursor: pointer; } .b-icon:hover { border-color: var(--line-dark); background: var(--surface); } .icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; max-height: 280px; overflow-y: auto; } .ic-opt { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 7px; cursor: pointer; color: var(--ink-soft); } .ic-opt:hover { background: var(--surface); color: var(--primary); } .board-desc { color: var(--ink-soft); font-size: 13px; margin: 4px 0 14px; } /* Horizontally scrollable when there are more views than the row can fit. Scrollbar hidden — drag-to-scroll wired in app.js (same pattern as the gallery thumb strip). */ .view-tabs { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; user-select: none; } .view-tabs::-webkit-scrollbar { display: none; } .view-tabs.dragging { cursor: grabbing; } .view-tabs > * { flex-shrink: 0; } /* Reorder-drag feedback — owner/admin only, draggable=true on each tab. The dragged element fades out so the user can see where it'll land. */ .view-tabs[data-can-reorder="1"] .view-tab { cursor: grab; } .view-tabs[data-can-reorder="1"] .view-tab:active { cursor: grabbing; } .view-tab-dragging { opacity: .35; } /* Home dashboard tab: the icon is clickable to change it (data-page-icon). */ .home-page-tabs .page-ico { display: inline-flex; align-items: center; cursor: pointer; border-radius: 6px; padding: 2px; margin: -2px 0; transition: background .12s ease; } .home-page-tabs .page-ico:hover { background: rgba(0,0,0,.10); } /* Table view column reorder — owner/admin sees grab cursor on data column headers (the name column has no data-col and isn't draggable so it stays fixed at the start). */ .tbl thead th[draggable="true"] { cursor: grab; } .tbl thead th[draggable="true"]:active { cursor: grabbing; } .th-dragging { opacity: .4; } .view-tabs a { padding: 8px 14px; font-weight: 600; font-size: 13px; color: var(--ink-soft); border-bottom: 3px solid transparent; white-space: nowrap; } .view-tabs a.active { color: var(--ink); border-bottom-color: var(--primary); } /* Gmail view tab — tint it Gmail red so it stands out from the other views. Scoped under `.view-tabs a` so each rule outranks the base/active rules above. */ .view-tabs a[data-vtype="gmail"] { color: #d93025; } .view-tabs a[data-vtype="gmail"] .icon { color: #ea4335; } .view-tabs a[data-vtype="gmail"]:hover { color: #ea4335; } .view-tabs a.active[data-vtype="gmail"] { color: #d93025; border-bottom-color: #ea4335; } /* join_board settings — Gmail integrate rows for joined email columns. */ .jb-gmail-list { display: flex; flex-direction: column; gap: 6px; } .jb-gm-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); } .jb-gm-name { font-weight: 600; font-size: 13px; } .jb-gm-on { font-size: 12px; color: #2e7d32; } .jb-gm-off { font-size: 12px; } .jb-gm-row .jb-gm-btn { margin-left: auto; } .view-menu { cursor: pointer; opacity: .55; display: inline-flex; margin-left: 2px; } .view-menu:hover { opacity: 1; } .view-add { border: none; background: transparent; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; padding: 8px 12px; display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; } .view-add:hover { background: var(--surface); color: var(--primary); } /* Home dashboard page tabs — the .view-tabs bar reused on the home page; it is the page header now (no greeting block). It sits in a sticky .page-head that mirrors the board's .board-top: pinned to the top of the scroll area with an opaque background + a full-width bottom divider, so the tabs stay visible while the cards scroll. The two-class selector outranks .page-head's own padding (incl. its mobile override). Settings / rename / delete live in the active tab's ⋯ menu. */ .page-head.home-tabs-head { padding: 20px 32px 0; border-bottom: 1px solid var(--line); background: var(--card); position: sticky; top: 0; z-index: 20; } .board-actions { display: flex; gap: 8px; padding: 14px 32px; align-items: center; } /* ── Board-level filter bar — flat horizontal form ──────────────────── One light card containing label/input columns flowing left-to-right. Action buttons (ค้นหา, ล้างทั้งหมด) sit at the right edge of the row. Active filters are added/removed via the ⋯ menu. */ .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 10px 32px 0; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; } .filter-bar:empty { display: none; } .filter-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; min-width: 0; } .filter-field .fr-col { font-size: 11.5px; font-weight: 600; color: var(--ink); } .filter-field .fr-ed { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .filter-field .fr-input { padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; font-family: inherit; font-size: 12px; background: var(--card); width: 100%; box-sizing: border-box; } .filter-field .fr-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(87,155,252,.18); } .filter-field .fr-num { flex: 1 1 70px; width: auto; } .filter-field .fr-date { flex: 1 1 130px; width: auto; } /* Bootstrap-style connected input group for range filters (date, number) */ .filter-field .fr-group { display: flex; align-items: stretch; width: 100%; } .filter-field .fr-group > * { border: 1px solid var(--line); } .filter-field .fr-group > .fr-input { border-radius: 0; min-width: 0; flex: 1; } .filter-field .fr-group > .fr-sep { display: inline-flex; align-items: center; padding: 0 10px; background: var(--surface); color: var(--ink-soft); font-size: 12px; white-space: nowrap; border-left: none; border-right: none; } .filter-field .fr-group > *:first-child { border-radius: 6px 0 0 6px; } .filter-field .fr-group > *:last-child { border-radius: 0 6px 6px 0; } .filter-field .fr-group > .fr-input:focus { z-index: 1; box-shadow: 0 0 0 2px rgba(87,155,252,.18); } .filter-field .fr-chip { border: 1px solid transparent; color: #fff; padding: 4px 10px; border-radius: 12px; font-size: 11.5px; font-weight: 600; cursor: pointer; opacity: .55; transition: opacity .1s ease; } .filter-field .fr-chip:hover { opacity: .85; } .filter-field .fr-chip.on { opacity: 1; box-shadow: 0 0 0 2px rgba(0,0,0,.18) inset; } .filter-field .fr-people { background: #e6efff; color: var(--ink); opacity: 1; border: 1px solid var(--line); } .filter-field .fr-people.on { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: none; } .filter-field .fr-select { cursor: pointer; appearance: auto; } /* Custom dropdown widget — used by both filter bar and form view. Scoped to the bare class so it works anywhere with a .fr-csel container. */ .fr-csel { position: relative; width: 100%; } .fr-csel-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 5px 8px; font-size: 12px; font-family: inherit; border: 1px solid var(--line); border-radius: 5px; background: var(--card); color: var(--ink); cursor: pointer; text-align: left; } .fr-csel-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr-csel-caret { color: var(--ink-soft); font-size: 10px; margin-left: 6px; } .fr-csel-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.12); padding: 4px; max-height: 280px; overflow-y: auto; } .fr-csel-opt { padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; margin-bottom: 2px; transition: filter .1s ease; } .fr-csel-opt:last-child { margin-bottom: 0; } .fr-csel-opt:hover { filter: brightness(0.92); } .fr-csel-opt-all { background: var(--surface); color: var(--ink); } /* Searchable variant — search input on top, scrollable list below */ .fr-csel-pop-people { padding: 6px; max-height: 320px; width: 240px; } .fr-csel-search { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; font-family: inherit; font-size: 12px; margin-bottom: 6px; box-sizing: border-box; } .fr-csel-search:focus { outline: none; border-color: var(--primary); } .fr-csel-list { max-height: 240px; overflow-y: auto; } .fr-csel-opt-check { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; background: var(--card); color: var(--ink); margin-bottom: 2px; } .fr-csel-opt-check:hover { background: var(--surface); filter: none; } .fr-csel-opt-check.on { background: #eef5ff; } .fr-csel-opt-check input[type="checkbox"] { accent-color: var(--primary); width: 14px; height: 14px; cursor: pointer; margin: 0; } .fr-csel-empty { text-align: center; color: var(--ink-soft); font-size: 12px; padding: 12px; } .filter-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; } /* both buttons share the .btn-sm sizing so they're visually equal */ .filter-search-btn, .filter-clear-btn { padding: 6px 14px; font-size: 12px; } .filter-clear-btn { color: var(--ink-soft); } .filter-clear-btn:hover { color: var(--red); border-color: #f3c2c8; } /* Filter config modal — option list of columns to filter on. Rendered as a single bordered box with rows inside (no per-row borders). */ .flt-col-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--card); padding: 4px; } /* `.modal label` adds margin-bottom: 14px to every