/* Torongo Panel — shared styles. Two themes via CSS variables: default = lite; switches to dark. */ :root { /* teal "Umbrella" palette — ref: logserver.evillage.net.bd (Modernize theme) */ --bg: #f3f6f9; --bg2: #ffffff; --bg3: #eef3f7; --border: #ebf1f6; --text: #5a6a85; --muted: #8a99b5; --accent: #01757a; --accent-2: #01c0c8; --accent-d: #015b5f; --heading: #2a3547; --ok: #13a05c; --warn: #c98a00; --crit: #c0392b; --info: #01757a; --shadow: rgba(145, 158, 171, .2) 0 0 2px 0, rgba(145, 158, 171, .12) 0 12px 24px -4px; --shadow-pop: rgba(31, 45, 61, .18) 0 10px 34px -6px; --th-bg: #f6f9fb; --td-border: #eef3f7; --row-hover: #eef6f6; --btn-bg: #f2f6f9; --input-bg: #ffffff; --input-border: #d6e0e7; --focus-ring: rgba(1, 117, 122, .18); --pre-bg: #f4f8f9; --pre-text: #24404a; --tint-accent-bg: #e3f4f5; --tint-ok-bg: #e2f6ec; --tint-ok-fg: #0d7d45; --tint-crit-bg: #fbe4e1; --tint-crit-fg: #a3271b; --tint-warn-bg: #fdf3d9; --tint-warn-fg: #8a5e00; --tint-info-bg: #e0f3f4; --tint-info-fg: #016368; --tint-mut-bg: #eef2f6; --tint-mut-fg: #5b6672; --step-dot: #cbd6df; --rx-high: #01757a; --rx-high-warn: #2fb1b7; --rx-low-warn: #d99000; --rx-low: #c0392b; --rx-grid: rgba(192, 57, 43, .16); --invalid-ring: #f6d3ce; --login-grad: linear-gradient(160deg, #e2f4f5 0%, #f3f6f9 60%); } html[data-theme="dark"] { --bg: #161c26; --bg2: #202936; --bg3: #26303f; --border: #2b3648; --text: #a2b0c6; --muted: #71809b; --accent: #2bc4cb; --accent-2: #2bd4dc; --accent-d: #17a2a8; --heading: #eaeff4; --ok: #3fbb6f; --warn: #f0b429; --crit: #f2685a; --info: #2bc4cb; --shadow: rgba(0, 0, 0, .36) 0 6px 22px -6px; --shadow-pop: rgba(0, 0, 0, .55) 0 12px 34px -6px; --th-bg: #1a222e; --td-border: #28323f; --row-hover: #232e3d; --btn-bg: #26303f; --input-bg: #1a222e; --input-border: #38455a; --focus-ring: rgba(43, 196, 203, .28); --pre-bg: #161d27; --pre-text: #c4cede; --tint-accent-bg: #123b40; --tint-ok-bg: #123322; --tint-ok-fg: #5fd68f; --tint-crit-bg: #3a1d1a; --tint-crit-fg: #ff9186; --tint-warn-bg: #39300f; --tint-warn-fg: #f6c445; --tint-info-bg: #0f353a; --tint-info-fg: #59d6dc; --tint-mut-bg: #26303f; --tint-mut-fg: #97a2b8; --step-dot: #3a4657; --rx-high: #2bc4cb; --rx-high-warn: #4fd6dc; --rx-low-warn: #f0b429; --rx-low: #f2685a; --rx-grid: rgba(242, 104, 90, .16); --invalid-ring: #4a2420; --login-grad: linear-gradient(160deg, #12333a 0%, #161c26 60%); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font: 14px/1.5 "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } .layout { display: flex; min-height: 100vh; } .sidebar { width: 236px; background: var(--bg2); border-right: 1px solid var(--border); padding: 6px 0 14px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; } .brand { display: flex; align-items: center; gap: 11px; padding: 16px 18px 14px; margin-bottom: 6px; } .brand .logo { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 14px -4px rgba(1, 117, 122, .55); } .brand .logo svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .brand-tx { min-width: 0; } .brand-tx b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.2px; color: var(--heading); } .brand-tx small { display: block; color: var(--muted); font-weight: 500; font-size: 11px; margin-top: 1px; } .nav { flex: 1; overflow-y: auto; padding: 4px 12px; } .nav-cap { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); padding: 15px 12px 6px; opacity: .85; } .nav-cap:first-child { padding-top: 6px; } .nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin: 2px 0; border-radius: 8px; color: var(--text); font-size: 13.5px; font-weight: 500; transition: background .13s, color .13s; } .nav a:hover { background: var(--bg3); color: var(--heading); } .nav a.active { background: linear-gradient(100deg, var(--accent), var(--accent-d)); color: #fff; font-weight: 600; box-shadow: 0 8px 16px -6px rgba(1, 117, 122, .6); } .nav .nav-ic { display: inline-flex; flex: 0 0 19px; } .nav .nav-ic svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); } .nav a:hover .nav-ic svg { color: var(--accent); } .nav a.active .nav-ic svg { color: #fff; } .nav a.nav-logout { margin-top: 10px; color: var(--muted); } .theme-toggle { margin: 10px 14px 4px; display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; padding: 9px; width: auto; border-radius: 8px; } .main { flex: 1; padding: 18px 22px; min-width: 0; } .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .topbar h1 { font-size: 19px; color: var(--heading); display: flex; align-items: center; gap: 8px; min-width: 0; } .topbar h1 .h-ic { flex: 0 0 20px; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--accent); } .topbar h1 .h-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* global top-bar search */ .topsearch { position: relative; margin-left: auto; width: clamp(190px, 30vw, 360px); transition: width .18s ease; } .topsearch:focus-within { width: clamp(230px, 38vw, 460px); } .topsearch .ts-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; transition: color .15s; } .topsearch:focus-within .ts-ic { color: var(--accent); } .topsearch input { width: 100%; padding: 8px 36px 8px 35px; font-size: 13px; border-radius: 22px; background: var(--bg2); border: 1px solid var(--border); box-shadow: var(--shadow); transition: background .15s, border-color .15s, box-shadow .15s; } .topsearch input::placeholder { color: var(--muted); } .topsearch input:hover { border-color: var(--input-border); } .topsearch input:focus { outline: none; background: var(--bg2); border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .topsearch input::-webkit-search-cancel-button { -webkit-appearance: none; } .ts-kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font: 600 11px/1 ui-monospace, Menlo, monospace; color: var(--muted); background: var(--bg3); border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; pointer-events: none; transition: opacity .12s; } .topsearch:focus-within .ts-kbd, .topsearch.has-val .ts-kbd { opacity: 0; } .ts-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 80; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-pop); max-height: 64vh; overflow-y: auto; padding: 6px; display: none; } .ts-results.open { display: block; animation: tsIn .14s ease; } @keyframes tsIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .ts-group { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; padding: 8px 10px 4px; } .ts-item { padding: 7px 10px; border-radius: 8px; cursor: pointer; border-left: 2px solid transparent; } .ts-item:hover, .ts-item.active { background: var(--tint-accent-bg); border-left-color: var(--accent); } .ts-item .t1 { font-size: 13px; color: var(--text); } .ts-item .t2 { font-size: 11px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ts-empty { padding: 14px 10px; color: var(--muted); font-size: 12.5px; text-align: center; } @media (max-width: 640px) { .topsearch, .topsearch:focus-within { width: clamp(130px, 46vw, 240px); } .ts-kbd { display: none; } } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 18px; } .card { background: var(--bg2); border: 1px solid transparent; border-radius: 10px; padding: 16px 18px; box-shadow: var(--shadow); } .card .label { color: var(--muted); font-size: 12.5px; font-weight: 600; } .card .value { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin-top: 4px; color: var(--heading); font-variant-numeric: tabular-nums; } .card .value.ok { color: var(--ok); } .card .value.warn { color: var(--warn); } .card .value.crit { color: var(--crit); } .card .value.info { color: var(--info); } /* stat cards — optional left accent stripe (.acc-*) + .sub caption; shared across Dashboard / ONU Table / User List / Support / Switch pages */ .card.acc-ok, .card.acc-crit, .card.acc-warn, .card.acc-info { position: relative; overflow: hidden; } .card.acc-ok::before, .card.acc-crit::before, .card.acc-warn::before, .card.acc-info::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border); } .card.acc-ok::before { background: var(--ok); } .card.acc-crit::before { background: var(--crit); } .card.acc-warn::before { background: var(--warn); } .card.acc-info::before { background: var(--info); } .card .sub { color: var(--muted); font-size: 11px; margin-top: 3px; white-space: nowrap; } .panel { background: var(--bg2); border: 1px solid transparent; border-radius: 10px; padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow); } .panel h2 { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--heading); } table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; padding: 9px 9px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--th-bg); } td { padding: 8px 9px; border-bottom: 1px solid var(--td-border); } th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; } tr:hover td { background: var(--row-hover); } /* column headers stick to the top when the table scrolls vertically (engages on mobile where .tablewrap gets a max-height; harmless on desktop) */ thead th { position: sticky; top: 0; z-index: 2; } .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; } .badge.online, .badge.success, .badge.sent, .badge.info2 { background: var(--tint-ok-bg); color: var(--tint-ok-fg); } .badge.offline, .badge.critical, .badge.error, .badge.failed { background: var(--tint-crit-bg); color: var(--tint-crit-fg); } .badge.warning, .badge.pending { background: var(--tint-warn-bg); color: var(--tint-warn-fg); } .badge.info { background: var(--tint-info-bg); color: var(--tint-info-fg); } .badge.noise { background: var(--tint-mut-bg); color: var(--tint-mut-fg); } input, select, button, textarea { background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: 8px; padding: 7px 11px; font-size: 13px; font-family: inherit; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } button { cursor: pointer; background: var(--btn-bg); font-weight: 600; } button.primary { background: linear-gradient(100deg, var(--accent), var(--accent-d)); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 8px 16px -7px rgba(1, 117, 122, .7); } button.danger { background: var(--crit); border-color: var(--crit); color: #fff; } button.warn { background: var(--tint-warn-bg); border-color: var(--tint-warn-fg); color: var(--tint-warn-fg); } button.info { background: var(--tint-info-bg); border-color: var(--tint-info-fg); color: var(--tint-info-fg); } button:hover { filter: brightness(0.97); } button.primary:hover, button.danger:hover, button.warn:hover, button.info:hover { filter: brightness(1.08); } /* dark theme — distinctive button styling */ html[data-theme="dark"] button { background: linear-gradient(180deg, #2a3757, #222d49); border-color: #3d4d78; color: #d6e1f5; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 4px rgba(0,0,0,.35); } html[data-theme="dark"] button:hover { filter: none; background: linear-gradient(180deg, #33426a, #283557); border-color: #4f6296; } html[data-theme="dark"] button.primary { background: linear-gradient(135deg, #0f8b90 0%, #17a2a8 100%); border: 1px solid #1fb3ba; color: #eafeff; box-shadow: 0 2px 12px rgba(23, 162, 168, .40); } html[data-theme="dark"] button.primary:hover { filter: none; background: linear-gradient(135deg, #12a0a6 0%, #1fbcc3 100%); box-shadow: 0 3px 16px rgba(31, 188, 195, .5); } html[data-theme="dark"] button.danger { background: linear-gradient(135deg, #ef4444, #b91c1c); border: none; color: #fff; box-shadow: 0 2px 10px rgba(239, 68, 68, .3); } html[data-theme="dark"] button.danger:hover { filter: none; background: linear-gradient(135deg, #ff5a5a, #d42a2a); } html[data-theme="dark"] button.warn { background: rgba(212, 160, 23, .18); border-color: rgba(212, 160, 23, .55); color: #e8c465; } html[data-theme="dark"] button.info { background: rgba(13, 148, 136, .18); border-color: rgba(13, 148, 136, .55); color: #6fd9cd; } html[data-theme="dark"] button:disabled { background: #232c42; border: 1px solid #2f3a58; color: #6b7690; box-shadow: none; } html[data-theme="dark"] .rowmenu button, html[data-theme="dark"] .modal-close, html[data-theme="dark"] .hamburger { background: var(--btn-bg); box-shadow: none; } html[data-theme="dark"] .rowmenu button { background: none; border: none; } html[data-theme="dark"] .rowmenu button:hover { background: var(--bg3); } button:disabled { opacity: .55; cursor: not-allowed; filter: none !important; } .toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; } .muted { color: var(--muted); } .mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; } /* inline-SVG action icons inside buttons (see ic()/data-ic in base.html) */ .btn-ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .modal-bg { position: fixed; inset: 0; background: rgba(5, 9, 18, .55); display: none; align-items: center; justify-content: center; z-index: 50; } .modal-bg.open { display: flex; } .modal { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 18px; max-width: 720px; width: 92%; max-height: 84vh; overflow: auto; box-shadow: var(--shadow-pop); } .modal h3 { margin-bottom: 10px; color: var(--heading); } .modal-head { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 14px; } .modal-head h3 { margin: 0; flex: 1; min-width: 0; } .modal-close { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; line-height: 1; padding: 0; color: var(--muted); flex-shrink: 0; } .modal-close:hover { color: var(--crit); border-color: var(--crit); } .section-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; } .btn-spin { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; } @keyframes spin { to { transform: rotate(360deg); } } pre { background: var(--pre-bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; color: var(--pre-text); } .formgrid { display: grid; grid-template-columns: 130px 1fr; gap: 9px 12px; align-items: center; margin-bottom: 12px; } .formgrid > input, .formgrid > select, .formgrid > textarea { width: 100%; } /* inline checkbox row (label + control) for modals / settings forms */ .ckrow { display: flex; align-items: center; gap: 8px; margin: 6px 0; } .ckrow input { width: auto; } /* selectable page/permission chips (highlight when checked) */ .checkchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; cursor: pointer; user-select: none; } .checkchip input { width: auto; margin: 0; } .checkchip:has(input:checked) { border-color: var(--accent); background: var(--tint-accent-bg); color: var(--accent); } /* task progress bar — segmented ok/skip/fail over the remaining track */ .taskprog { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; } .taskprog .pbar { flex: 1 1 220px; max-width: 440px; } .taskprog .cap { font-size: 12px; white-space: nowrap; } .pbar { display: flex; height: 9px; min-width: 120px; border-radius: 5px; overflow: hidden; background: var(--bg3); border: 1px solid var(--border); } .pbar > span { display: block; height: 100%; } .pbar .ok { background: var(--ok); } .pbar .skip { background: var(--step-dot); } .pbar .fail { background: var(--crit); } .pbar .rest { background: transparent; } .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; } .dot.ok { background: var(--ok); } .dot.bad { background: var(--crit); } /* hamburger — hidden on desktop */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 36px; padding: 8px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; } .hamburger span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; } body.nav-open .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.nav-open .hamburger span:nth-child(2) { opacity: 0; } body.nav-open .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .backdrop { display: none; } /* ------------------------------------------------ mobile (≤ 900px) */ @media (max-width: 900px) { .hamburger { display: flex; flex-shrink: 0; } .backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(5, 9, 18, .5); opacity: 0; pointer-events: none; transition: opacity .2s; } .backdrop.open { opacity: 1; pointer-events: auto; } .sidebar { position: fixed; left: 0; top: 0; z-index: 45; height: 100vh; width: 240px; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-pop); overflow-y: auto; } .sidebar.open { transform: translateX(0); } .nav a { padding: 12px 18px; font-size: 15px; } .main { padding: 12px 12px 24px; } .topbar { gap: 10px; margin-bottom: 12px; } .topbar h1 { font-size: 16.5px; flex: 1; min-width: 0; } .topbar .meta { display: none; } .cards { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .card { padding: 10px 12px; } .card .value { font-size: 21px; } .panel { padding: 11px 12px; border-radius: 8px; } .toolbar { gap: 6px; } /* direct toolbar controls form a neat ~2-per-row grid; labelled wrappers (e.g. VSOL-import config) keep their own field widths and just wrap */ .toolbar > input, .toolbar > select { flex: 1 1 140px; min-width: 0; max-width: 100%; } .toolbar > button { flex: 0 0 auto; } /* 16px form controls stop iOS Safari auto-zooming on focus */ input, select, textarea { font-size: 16px; padding: 9px 11px; } button { padding: 9px 12px; font-size: 15px; } table { font-size: 12.5px; } th, td { padding: 7px 8px; } /* full-bleed, vertically-scrollable table with a sticky header */ .tablewrap { margin: 0 -12px; padding: 0 12px; max-height: 72vh; } .modal { width: 96%; max-height: 90vh; padding: 14px; } .modal .tablewrap { max-height: none; } /* modal itself already scrolls */ .formgrid { grid-template-columns: 1fr; gap: 5px; } .formgrid label { font-size: 12px; color: var(--muted); margin-top: 6px; } } /* ------------------------------------------------ small phones (≤ 560px) */ @media (max-width: 560px) { .main { padding: 10px 10px 22px; } .cards { grid-template-columns: 1fr 1fr; } .card .value { font-size: 19px; } table { font-size: 12px; } th, td { padding: 6px 7px; } /* pagination row: big, easy-to-tap Prev/Next */ #pgPrev, #pgNext { flex: 1 1 44%; padding: 11px; } #pgInfo { flex: 1 1 100%; order: -1; text-align: center; } } /* login */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--login-grad); } .login-box { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 28px; width: 330px; box-shadow: var(--shadow-pop); } .login-box h1 { font-size: 19px; margin-bottom: 18px; text-align: center; color: var(--heading); } .login-box input { width: 100%; margin-bottom: 12px; padding: 9px 11px; } .login-box button { width: 100%; padding: 9px; } .login-error { color: var(--crit); font-size: 13px; margin-bottom: 10px; text-align: center; } /* Deactivate ⇄ Activate toggle: fixed width so the label flip doesn't resize the button */ button.actbtn { width: 118px; text-align: center; padding-left: 0; padding-right: 0; } /* page head — a title, one line of context, the actions, and the facts as chips. Replaces the paragraph-of-prose intros; shared so every page reads the same. */ .pagehead { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .pagehead .ph-txt { flex: 1 1 320px; min-width: 0; } .ph-title { font-size: 14.5px; font-weight: 650; color: var(--heading); } .ph-sub { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-top: 3px; } .ph-actions { display: flex; gap: 8px; flex-wrap: wrap; } .chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 11.5px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg3); color: var(--muted); } .chip b { color: var(--text); font-weight: 600; } .chip .dot { margin-right: 0; } details.ph-help { margin-top: 9px; } details.ph-help > summary { cursor: pointer; color: var(--muted); font-size: 12px; list-style: none; width: fit-content; } details.ph-help > summary::-webkit-details-marker { display: none; } details.ph-help > summary::before { content: "＋ "; font-size: 11px; } details.ph-help[open] > summary::before { content: "－ "; } details.ph-help > div { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-top: 7px; padding-left: 12px; border-left: 2px solid var(--border); } .statusline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-height: 18px; color: var(--muted); font-size: 12px; margin-top: 10px; } .statusline .dot { margin-right: 0; flex: 0 0 auto; } .statusline b { color: var(--text); font-weight: 600; } @media (max-width: 720px) { .pagehead { flex-direction: column; gap: 10px; } .ph-actions { width: 100%; } .ph-actions button { flex: 1 1 auto; } } /* click-to-sort column headers (the server does the ordering) */ th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { color: var(--text); } th.sorted { color: var(--text); } /* vendor names run long — keep the column narrow, full name in the tooltip */ td.vendorcell { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }