:root {
  --bulma-family-primary: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bulma-primary-h: 236deg;
  --bulma-primary-s: 72%;
  --bulma-primary-l: 58%;
  --bulma-link-h: 236deg;
  --bulma-link-s: 72%;
  --bulma-link-l: 58%;
  --app-bg: hsl(220, 25%, 97%);
  --app-border: hsl(220, 15%, 90%);
  --app-muted: hsl(220, 10%, 46%);
  --app-row-hover: hsl(236, 70%, 97%);
  --app-note: hsla(45, 100%, 60%, 0.14);
  --app-note-border: hsl(42, 90%, 55%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-bg: hsl(222, 18%, 10%);
    --app-border: hsl(222, 12%, 22%);
    --app-muted: hsl(220, 10%, 64%);
    --app-row-hover: hsl(236, 25%, 18%);
    --app-note: hsla(45, 100%, 60%, 0.08);
  }
}
:root[data-theme="dark"] {
  --app-bg: hsl(222, 18%, 10%);
  --app-border: hsl(222, 12%, 22%);
  --app-muted: hsl(220, 10%, 64%);
  --app-row-hover: hsl(236, 25%, 18%);
  --app-note: hsla(45, 100%, 60%, 0.08);
}

/* Light mode, toned down: off-white surfaces on a soft grey page instead of pure white. Written twice (system light,
   and an explicit choice) so a device in dark mode keeps Bulma's dark values. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bulma-scheme-main-l: 92.5%;
    --bulma-scheme-main-bis-l: 90.5%;
    --bulma-scheme-main-ter-l: 88.5%;
    --bulma-background-l: 88%;
    --bulma-border-weak-l: 84%;
    --bulma-border-l: 77%;
    --app-bg: hsl(220, 13%, 85%);
    --app-border: hsl(220, 12%, 78%);
    --app-row-hover: hsl(236, 30%, 88%);
  }
}
:root[data-theme="light"] {
  --bulma-scheme-main-l: 92.5%;
  --bulma-scheme-main-bis-l: 90.5%;
  --bulma-scheme-main-ter-l: 88.5%;
  --bulma-background-l: 88%;
  --bulma-border-weak-l: 84%;
  --bulma-border-l: 77%;
  --app-bg: hsl(220, 13%, 85%);
  --app-border: hsl(220, 12%, 78%);
  --app-row-hover: hsl(236, 30%, 88%);
}

html, body { background: var(--app-bg); }
body { min-height: 100vh; }
.app-main { padding-top: 1.75rem; }

/* Navbar ---------------------------------------------------------------- */
.app-nav { border-bottom: 1px solid var(--app-border); }
.brand { gap: .6rem; }
.brand-mark {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: .6rem;
  background: linear-gradient(135deg, hsl(236, 72%, 58%), hsl(270, 70%, 60%));
  color: #fff; font-size: .9rem;
}
.brand-mark.is-large { width: 3.25rem; height: 3.25rem; font-size: 1.4rem; border-radius: .9rem; }

/* Avatars --------------------------------------------------------------- */
.avatar {
  --hue: 236;
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: hsl(var(--hue), 65%, 90%); color: hsl(var(--hue), 55%, 32%);
  font-weight: 600; font-size: .8rem;
}
.avatar.is-small { width: 1.6rem; height: 1.6rem; font-size: .65rem; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .avatar { background: hsl(var(--hue), 35%, 28%); color: hsl(var(--hue), 70%, 85%); }
}
:root[data-theme="dark"] .avatar { background: hsl(var(--hue), 35%, 28%); color: hsl(var(--hue), 70%, 85%); }

/* Stat cards ------------------------------------------------------------ */
.stat-card {
  display: block; border: 1px solid var(--app-border); border-radius: .75rem;
  padding: .9rem 1.1rem; background: var(--bulma-scheme-main);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.column > .stat-card { height: 100%; }
.stat-card:hover { border-color: var(--bulma-primary); transform: translateY(-1px); box-shadow: 0 4px 14px hsla(236, 60%, 50%, .08); }
.stat-card.is-active { border-color: var(--bulma-primary); box-shadow: inset 0 0 0 1px var(--bulma-primary); }
.stat-card .stat-label { color: var(--app-muted); font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; color: var(--bulma-text-strong); line-height: 1.2; }
.stat-card .stat-icon { float: right; opacity: .55; font-size: 1.1rem; margin-top: .2rem; }

/* Panels / tables ------------------------------------------------------- */
.panel-card {
  background: var(--bulma-scheme-main); border: 1px solid var(--app-border);
  border-radius: .75rem; overflow: hidden;
}
.panel-card > header { padding: .85rem 1rem; border-bottom: 1px solid var(--app-border); }
.filters { padding: .85rem 1rem; border-bottom: 1px solid var(--app-border); }
.table-wrap { overflow-x: auto; }
.ticket-table { width: 100%; margin: 0 !important; }
.ticket-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted) !important; font-weight: 600; white-space: nowrap; }
.ticket-table td { vertical-align: middle; border-color: var(--app-border) !important; }
.ticket-table tbody tr { cursor: pointer; transition: background .1s; }
.ticket-table tbody tr:hover { background: var(--app-row-hover); }
.ticket-table .subject { font-weight: 600; color: var(--bulma-text-strong); }
.ticket-table .preview { color: var(--app-muted); font-size: .85rem; }
.ticket-table tr.is-new .subject::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--bulma-link); margin-right: .45rem; vertical-align: middle;
}
.muted { color: var(--app-muted); }
.nowrap { white-space: nowrap; }
.empty-state { padding: 4rem 1rem; text-align: center; color: var(--app-muted); }
.empty-state i { font-size: 2.5rem; opacity: .4; margin-bottom: 1rem; }

.bulk-bar { padding: .6rem 1rem; border-bottom: 1px solid var(--app-border); background: var(--app-row-hover); display: none; }
.bulk-bar.is-visible { display: flex; }

/* Timeline -------------------------------------------------------------- */
.timeline-item { display: flex; gap: .85rem; margin-bottom: 1.1rem; }
.timeline-item .bubble {
  flex: 1; min-width: 0; background: var(--bulma-scheme-main);
  border: 1px solid var(--app-border); border-radius: .75rem;
}
.timeline-item .bubble-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .65rem 1rem; border-bottom: 1px solid var(--app-border); font-size: .9rem;
}
.timeline-item .bubble-body { padding: 1rem; overflow-x: auto; }
.timeline-item.is-outbound .bubble { border-left: 3px solid var(--bulma-primary); }
.timeline-item.is-note .bubble { background: var(--app-note); border-color: var(--app-note-border); border-style: dashed; }
.timeline-event {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 1.1rem 3.1rem;
  font-size: .8rem; color: var(--app-muted);
}
.timeline-event::before { content: ""; width: 1.25rem; border-top: 1px dashed var(--app-border); }

.email-body { font-size: .95rem; word-wrap: break-word; }
.email-body img { max-width: 100%; height: auto; }
.email-body table { width: auto !important; max-width: 100%; }
/* Who's online: a dot on the avatar (green = online, amber = away) */
.avatar.is-online, .avatar.is-away { position: relative; overflow: visible; }
.avatar.is-online::after, .avatar.is-away::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 42%; height: 42%;
  min-width: 6px; min-height: 6px; border-radius: 50%; border: 2px solid var(--bulma-scheme-main); background: hsl(145, 63%, 42%); }
.avatar.is-away::after { background: hsl(38, 95%, 55%); }

/* Several assignees: chips on the ticket, a stack of avatars in lists */
.assignee-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.assignee-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .35rem .2rem .25rem; font-size: .85rem;
  border: 1px solid var(--app-border); border-radius: 999px; background: var(--bulma-scheme-main); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar + .avatar { margin-left: -.45rem; box-shadow: 0 0 0 2px var(--bulma-scheme-main); }

/* Notifications: navbar bell + list */
.notif-icon { position: relative; }
.notif-count { position: absolute; top: -.45rem; right: -.6rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem;
  border-radius: 999px; background: var(--bulma-danger); color: #fff; font-size: .65rem; font-weight: 700; line-height: 1.1rem; text-align: center; }
.notif-menu { width: 24rem; max-width: calc(100vw - 2rem); padding-top: 0; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: .5rem .75rem; border-bottom: 1px solid var(--app-border); }
.notif-row, .notif-menu .navbar-item.notif-item { display: flex; gap: .6rem; align-items: flex-start; white-space: normal; padding-right: .75rem; }
.notif-menu .notif-link { display: flex; gap: .6rem; align-items: flex-start; flex: 1; min-width: 0; color: inherit; }
.notif-menu .notif-dismiss { margin-top: .15rem; flex: none; opacity: .55; }
.notif-menu .notif-item:hover .notif-dismiss, .notif-menu .notif-dismiss:focus { opacity: 1; }
.notif-link > i, .notif-row > i { margin-top: .2rem; color: var(--app-muted); width: 1rem; text-align: center; }
.notif-item .notif-text { display: block; font-size: .85rem; line-height: 1.3; }
.notif-item.is-unread .notif-text, .notif-row.is-unread .notif-text { font-weight: 600; }
.notif-item.is-unread .notif-link > i, .notif-row.is-unread > i { color: var(--bulma-link); }
.notif-empty { padding: .75rem; }
.notif-row { padding: .75rem 1rem; border-top: 1px solid var(--app-border); color: var(--bulma-text); }
.notif-row:first-child { border-top: 0; }
.notif-row .notif-text { flex: 1; }
.notif-row:hover { background: var(--app-hover, rgba(127, 127, 127, .08)); }

/* Inbound email in a sandboxed frame: white like a mail client, in both themes (emails are designed for white). */
.timeline-item .bubble-body.email-frame-body { padding: .5rem; }
.email-frame { display: block; width: 100%; height: 160px; border: 0; border-radius: .35rem; background: #fff; }
.email-original { display: inline-block; margin: .35rem .25rem 0; color: var(--app-muted); }
.email-original:hover { color: var(--bulma-link); }
.email-body blockquote { border-left: 3px solid var(--app-border); padding: .25rem .75rem; color: var(--app-muted); background: none; }

.attachments { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1rem 1rem; }
.attachment-chip {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem;
  border: 1px solid var(--app-border); border-radius: .5rem; padding: .35rem .65rem;
  color: var(--bulma-text);
}
.attachment-chip:hover { border-color: var(--bulma-primary); }

/* Reply form ------------------------------------------------------------ */
.reply-card { margin-top: 1.5rem; }
.reply-form textarea { transition: background .15s; min-height: 8rem; }
.reply-form[data-kind="note"] textarea { background: var(--app-note); border-color: var(--app-note-border); }
.reply-form .when-note { display: none; }
.reply-form[data-kind="note"] .when-note { display: inline; }
.reply-form[data-kind="note"] .when-reply { display: none; }
.kind-switch input { position: absolute; opacity: 0; pointer-events: none; }
.kind-switch label { cursor: pointer; }
.kind-switch input:checked + label { background: var(--bulma-primary); color: var(--bulma-primary-invert); border-color: var(--bulma-primary); }
.kind-switch input[value="note"]:checked + label { background: var(--app-note-border); border-color: var(--app-note-border); color: #3a2c00; }

/* Sidebar --------------------------------------------------------------- */
.side-section { padding: 1rem; border-bottom: 1px solid var(--app-border); }
.side-section:last-child { border-bottom: 0; }
.side-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--app-muted); margin-bottom: .35rem; display: block; }

/* htmx ------------------------------------------------------------------ */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request.button, .htmx-request .button.is-submit { pointer-events: none; opacity: .7; }
#ticket-table.htmx-request { opacity: .6; transition: opacity .2s; }
.htmx-added { animation: fade-in .35s ease-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Toasts ---------------------------------------------------------------- */
#toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; max-width: min(380px, calc(100vw - 2rem)); }
.toast { margin: 0 !important; padding-right: 3rem !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); animation: fade-in .25s ease-out; transition: opacity .4s, transform .4s; }
.toast.is-leaving { opacity: 0; transform: translateX(20px); }

/* Login ----------------------------------------------------------------- */
.login-wrap { min-height: 80vh; display: grid; place-items: center; }
.login-box { width: 100%; max-width: 380px; padding: 2.25rem; border: 1px solid var(--app-border); }

@media screen and (max-width: 768px) {
  .app-main { padding: 1rem 0; }
  .hide-mobile { display: none !important; }
}

/* Bulma's "is-light" colour variants stay pale in dark mode; tint them instead. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.tag, .button, .notification).is-light:is(.is-primary, .is-link, .is-info, .is-success, .is-warning, .is-danger) {
    background: hsla(var(--c-h), var(--c-s), 55%, 0.18);
    color: hsl(var(--c-h), var(--c-s), 78%);
  }
  :root:not([data-theme="light"]) :is(.tag, .button, .notification).is-light.is-primary { --c-h: var(--bulma-primary-h); --c-s: var(--bulma-primary-s); }
  :root:not([data-theme="light"]) :is(.tag, .button, .notification).is-light.is-link { --c-h: var(--bulma-link-h); --c-s: var(--bulma-link-s); }
  :root:not([data-theme="light"]) :is(.tag, .button, .notification).is-light.is-info { --c-h: var(--bulma-info-h); --c-s: var(--bulma-info-s); }
  :root:not([data-theme="light"]) :is(.tag, .button, .notification).is-light.is-success { --c-h: var(--bulma-success-h); --c-s: var(--bulma-success-s); }
  :root:not([data-theme="light"]) :is(.tag, .button, .notification).is-light.is-warning { --c-h: var(--bulma-warning-h); --c-s: var(--bulma-warning-s); }
  :root:not([data-theme="light"]) :is(.tag, .button, .notification).is-light.is-danger { --c-h: var(--bulma-danger-h); --c-s: var(--bulma-danger-s); }
}
:root[data-theme="dark"] :is(.tag, .button, .notification).is-light:is(.is-primary, .is-link, .is-info, .is-success, .is-warning, .is-danger) {
  background: hsla(var(--c-h), var(--c-s), 55%, 0.18);
  color: hsl(var(--c-h), var(--c-s), 78%);
}
:root[data-theme="dark"] :is(.tag, .button, .notification).is-light.is-primary { --c-h: var(--bulma-primary-h); --c-s: var(--bulma-primary-s); }
:root[data-theme="dark"] :is(.tag, .button, .notification).is-light.is-link { --c-h: var(--bulma-link-h); --c-s: var(--bulma-link-s); }
:root[data-theme="dark"] :is(.tag, .button, .notification).is-light.is-info { --c-h: var(--bulma-info-h); --c-s: var(--bulma-info-s); }
:root[data-theme="dark"] :is(.tag, .button, .notification).is-light.is-success { --c-h: var(--bulma-success-h); --c-s: var(--bulma-success-s); }
:root[data-theme="dark"] :is(.tag, .button, .notification).is-light.is-warning { --c-h: var(--bulma-warning-h); --c-s: var(--bulma-warning-s); }
:root[data-theme="dark"] :is(.tag, .button, .notification).is-light.is-danger { --c-h: var(--bulma-danger-h); --c-s: var(--bulma-danger-s); }

/* "has-text-warning-dark" is dark yellow: readable on white, not on the dark background. Lighten it in dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .has-text-warning-dark { color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 70%) !important; }
}
:root[data-theme="dark"] .has-text-warning-dark { color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 70%) !important; }

/* Timer ------------------------------------------------------------------ */
.timer-pill {
  display: inline-flex; align-items: center; gap: .55rem; padding: .2rem .25rem .2rem .75rem;
  border: 1px solid hsla(348, 86%, 61%, .45); border-radius: 999px; background: hsla(348, 86%, 61%, .08);
}
.timer-pill a { display: inline-flex; gap: .45rem; align-items: baseline; color: var(--bulma-text-strong); }
.timer-clock { font-variant-numeric: tabular-nums; font-weight: 600; }
.timer-dot { width: .5rem; height: .5rem; border-radius: 50%; background: hsl(348, 86%, 61%); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.timer-pill .button { height: 1.75rem; width: 1.75rem; padding: 0; }
.timer-running-box { border: 1px solid hsla(348, 86%, 61%, .45); background: hsla(348, 86%, 61%, .06); border-radius: .6rem; padding: .75rem; }
.timer-running-box .timer-clock { font-size: 1.5rem; }

.time-entry { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; border-top: 1px solid var(--app-border); font-size: .85rem; }
.time-entry:first-child { border-top: 0; }
.time-entry .dur { font-weight: 600; min-width: 3.5rem; font-variant-numeric: tabular-nums; }
.time-entry .actions { margin-left: auto; display: flex; gap: .25rem; opacity: .6; }
.time-entry:hover .actions { opacity: 1; }

/* Day bars on the timesheet */
.day-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(2.6rem, 1fr)); gap: .4rem; align-items: end; }
.day-bar { text-align: center; font-size: .72rem; color: var(--app-muted); }
.day-bar .bar-track { height: 5rem; display: flex; align-items: flex-end; justify-content: center; }
.day-bar .bar { width: 70%; max-width: 2.25rem; border-radius: .35rem .35rem .15rem .15rem; background: var(--bulma-primary); min-height: 2px; opacity: .85; }
.day-bar.is-today .bar { background: hsl(270, 70%, 60%); }
.day-bar.is-weekend { opacity: .6; }
.day-bar .val { font-weight: 600; color: var(--bulma-text-strong); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; font-size: .9rem; }
.kv dt { color: var(--app-muted); }
.tabs a { color: var(--app-muted); }
.progress.is-small { height: .5rem; }

/* Client portal */
.portal-wrap { max-width: 900px; margin: 0 auto; }

/* Trash */
.trash-box summary { cursor: pointer; list-style: none; }
.trash-box summary::-webkit-details-marker { display: none; }
.trash-reasons input { position: absolute; opacity: 0; pointer-events: none; }
.trash-reasons input:checked + label { background: hsl(348, 86%, 61%); border-color: hsl(348, 86%, 61%); color: #fff; }
.trash-box .when-spam { display: none; }
.trash-box:has(input[value="spam"]:checked) .when-spam { display: block; }
.trash-banner { border: 1px dashed hsl(348, 86%, 61%); background: hsla(348, 86%, 61%, .07); border-radius: .75rem; padding: 1rem 1.25rem; }

/* Billing plan switch on the client form */
.plan-switch input { position: absolute; opacity: 0; pointer-events: none; }
.plan-switch input:checked + label { background: var(--bulma-primary); color: var(--bulma-primary-invert); border-color: var(--bulma-primary); }
.billing-plan:has(input[value="adhoc"]:checked) .when-managed,
.billing-plan:has(input[value="managed"]:checked) .when-adhoc { display: none; }
.billing-plan .field .help:not(.is-danger) { display: none; }

/* Purchase status stepper */
.steps { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; }
.steps .step { flex: 1; min-width: 6rem; text-align: center; font-size: .8rem; padding: .45rem .5rem; border-radius: .5rem;
  border: 1px solid var(--app-border); color: var(--app-muted); }
.steps .step.is-done { background: hsla(153, 53%, 53%, .12); border-color: hsla(153, 53%, 53%, .4); color: var(--bulma-text); }
.steps .step.is-current { background: var(--bulma-primary); border-color: var(--bulma-primary); color: var(--bulma-primary-invert); font-weight: 600; }

/* Merge */
.merge-box summary { cursor: pointer; list-style: none; }
.merge-box summary::-webkit-details-marker { display: none; }
.merge-candidates { max-height: 14rem; overflow-y: auto; margin-bottom: .5rem; }
.merge-option { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem .4rem; border-radius: .4rem; cursor: pointer; }
.merge-option:hover { background: var(--app-row-hover); }
.merge-option input { margin-top: .2rem; }
.input[type="search"] { box-sizing: border-box; }  /* browsers default search inputs to content-box: 100% + padding overflows */
.related-option { width: 100%; text-align: left; border: 0; background: none; color: inherit; font: inherit; }
.related-option .fa-plus { margin-top: .25rem; font-size: .7rem; }

/* Profile: theme picker */
.theme-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.theme-choice { cursor: pointer; border: 2px solid var(--app-border); border-radius: .75rem; padding: .6rem; display: flex; flex-direction: column; gap: .5rem; }
.theme-choice:has(input:checked) { border-color: var(--bulma-primary); box-shadow: 0 0 0 3px hsla(236, 72%, 58%, .15); }
.theme-choice input { position: absolute; opacity: 0; pointer-events: none; }
.theme-choice .theme-label { font-size: .85rem; font-weight: 600; text-align: center; }
.theme-preview { display: grid; grid-template-rows: .6rem 1fr; grid-template-columns: 1fr 2fr; gap: 3px; height: 4.25rem; border-radius: .45rem; padding: 4px; }
.theme-preview span:first-child { grid-column: 1 / 3; border-radius: 3px; }
.theme-preview span { border-radius: 3px; }
.theme-preview.is-light { background: #f4f6fa; }
.theme-preview.is-light span { background: #fff; border: 1px solid #e1e5ee; }
.theme-preview.is-light span:first-child { background: #5058e0; border: 0; }
.theme-preview.is-dark { background: #14171f; }
.theme-preview.is-dark span { background: #1d212b; border: 1px solid #2e3340; }
.theme-preview.is-dark span:first-child { background: #5058e0; border: 0; }
.theme-preview.is-system { background: linear-gradient(135deg, #f4f6fa 50%, #14171f 50%); }
.theme-preview.is-system span { background: linear-gradient(135deg, #fff 50%, #1d212b 50%); border: 1px solid #8884; }
.theme-preview.is-system span:first-child { background: #5058e0; border: 0; }

/* Copyable code blocks */
.code-box { position: relative; margin: .5rem 0 1rem; }
.code-box pre { font-size: .72rem; white-space: pre; overflow-x: auto; padding: .75rem; border-radius: .5rem; }
.code-box .copy-btn { position: absolute; top: .4rem; right: .4rem; z-index: 1; }

/* Sign-in & two-factor */
.ms-button { font-weight: 600; }
.or-divider { display: flex; align-items: center; gap: .75rem; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--app-border); }
.code-input { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.qr-box { display: inline-block; padding: .5rem; background: #fff; border-radius: .5rem; border: 1px solid var(--app-border); }
.qr-box svg { display: block; }
.backup-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.backup-codes code { text-align: center; font-size: 1rem; padding: .4rem; letter-spacing: .05em; }

.code-box pre .is-placeholder { color: hsl(35, 90%, 45%); font-weight: 600; }

/* Integrations */
.integration-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }
.integration-card { display: block; background: var(--bulma-scheme-main); border: 1px solid var(--app-border); border-radius: .75rem;
  padding: 1rem; color: var(--bulma-text); transition: border-color .15s, transform .15s; }
a.integration-card[href]:hover { border-color: var(--bulma-primary); transform: translateY(-1px); }
.integration-card.is-coming_soon { opacity: .6; cursor: default; }
.integration-card.is-attention { border-color: hsla(42, 90%, 55%, .7); }
.integration-icon { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .6rem; flex-shrink: 0;
  background: hsla(236, 72%, 58%, .12); color: var(--bulma-primary); font-size: 1.1rem; }
.integration-icon.is-large { width: 3rem; height: 3rem; font-size: 1.4rem; }
/* Status text can be long (a mailbox address): wrap inside the card instead of running past its edge. */
.tag.integration-status { max-width: 100%; height: auto; min-height: 1.5em; white-space: normal; overflow-wrap: anywhere;
  justify-content: flex-start; text-align: left; line-height: 1.35; padding-top: .2rem; padding-bottom: .2rem; }

/* Tenants: a quiet tag on rows when several tenants are shown (tokens are already themed for dark mode). */
.tag.tenant-tag { background: transparent; border: 1px solid var(--app-border); color: var(--app-muted); font-weight: 500; }
.tenant-switcher .navbar-link { white-space: nowrap; }
.tenant-switcher .navbar-dropdown .button { justify-content: flex-start; }


/* Navbar on mid-size screens (desktop menu, but not wide enough for every label): drop the least useful text first. */
@media screen and (min-width: 1024px) and (max-width: 1599px) {
  .app-nav .nav-label-wide { display: none; }
}
@media screen and (min-width: 1024px) and (max-width: 1499px) {
  .app-nav .nav-label { display: none; }
  .app-nav .navbar-dropdown .nav-label { display: inline; }  /* menus keep their words; links show tooltips */
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .app-nav .nav-label-tenant { display: none; }
}

/* Team calendar ----------------------------------------------------------- */
/* Translucent fills read the same on the light and dark backgrounds, so no separate dark rules are needed. */
.roster-table { font-size: .8rem; }
.roster-table th, .roster-table td { padding: .3rem .15rem; text-align: center; border-color: var(--app-border) !important; }
.roster-table th { color: var(--app-muted) !important; font-weight: 600; min-width: 1.7rem; line-height: 1.1; }
.roster-table th span { display: block; font-size: .65rem; font-weight: 500; }
.roster-table .roster-name { text-align: left; white-space: nowrap; min-width: 11rem; padding-left: .75rem;
  position: sticky; left: 0; background: var(--bulma-scheme-main); z-index: 1; }
.roster-table th.is-today { color: var(--bulma-primary) !important; }
.roster-cell { padding: 2px !important; }
.roster-cell > a, .roster-cell > span { display: block; height: 1.6rem; border-radius: .3rem; }
.roster-cell.is-on > * { background: hsla(145, 55%, 45%, .35); }
.roster-cell.is-extra > * { background: hsla(var(--bulma-primary-h), 70%, 60%, .45); }
.roster-cell.is-off > * { background: hsla(38, 95%, 55%, .45); }
.roster-cell.is-none > * { background: transparent; }
.roster-cell.is-weekend { background: hsla(220, 10%, 50%, .07); }
.roster-cell.is-today > * { box-shadow: inset 0 0 0 2px var(--bulma-primary); }
.roster-cell > a:hover { filter: brightness(1.15); outline: 1px solid var(--app-muted); }
.roster-legend { display: flex; gap: .9rem; flex-wrap: wrap; color: var(--app-muted); }
.roster-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; margin-right: .3rem; vertical-align: -1px;
  border: 1px solid var(--app-border); }
.roster-swatch.is-on { background: hsla(145, 55%, 45%, .35); }
.roster-swatch.is-extra { background: hsla(var(--bulma-primary-h), 70%, 60%, .45); }
.roster-swatch.is-off { background: hsla(38, 95%, 55%, .45); }
.avatar.is-tiny { width: 1.15rem; height: 1.15rem; font-size: .5rem; }
.team-today .tag { height: auto; padding-top: .2rem; padding-bottom: .2rem; }

/* Tickets: assignee sidebar ----------------------------------------------- */
.assignee-column { width: 15rem; }
.assignee-sidebar { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.assignee-list { padding: .4rem; }
.assignee-list hr { margin: .35rem .5rem; background: var(--app-border); height: 1px; }
.assignee-list a { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: .4rem;
  color: inherit; font-size: .875rem; }
.assignee-list a:hover { background: var(--app-row-hover); }
.assignee-list a.is-active { background: hsla(var(--bulma-primary-h), 70%, 60%, .16); color: var(--bulma-primary); font-weight: 600; }
.assignee-list .icon { width: 1.15rem; color: var(--app-muted); }
.assignee-list .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignee-list .count { font-size: .75rem; font-weight: 600; min-width: 1.6rem; text-align: center; padding: .05rem .35rem;
  border-radius: 999px; background: hsla(220, 10%, 50%, .14); }
.assignee-list .count.is-zero { opacity: .45; }
.assignee-list .count.is-attention { background: hsla(38, 95%, 55%, .35); }
.assignee-list .presence { width: .5rem; height: .5rem; border-radius: 50%; flex: none; background: transparent;
  border: 1px solid var(--app-border); }
.assignee-list .presence.is-on, .assignee-list .presence.is-extra { background: hsl(145, 55%, 45%); border-color: transparent; }
.assignee-list .presence.is-off { background: hsl(38, 95%, 55%); border-color: transparent; }
/* Filter sidebar sections */
.filter-section + .filter-section { border-top: 1px solid var(--app-border); }
.filter-section-head { display: flex; align-items: center; gap: .3rem; width: 100%; padding: .55rem 1rem .2rem; border: 0;
  background: none; color: var(--app-muted); font: inherit; font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; cursor: pointer; }
.filter-section-head .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.filter-section-head i { margin-left: auto; font-size: .65rem; transition: transform .15s; }
.filter-section.is-folded .filter-section-head i { transform: rotate(-90deg); }
.filter-section.is-folded .assignee-list { display: none; }
.assignee-list .avatar.is-square { border-radius: .3rem; }
.status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--app-muted); }
.status-dot.is-new { background: var(--bulma-link); }
.status-dot.is-open { background: var(--bulma-info); }
.status-dot.is-pending { background: var(--bulma-warning); }
.status-dot.is-resolved { background: var(--bulma-success); }
.status-dot.is-closed { background: hsl(220, 8%, 45%); }
.priority-icon.is-4 { color: var(--bulma-danger) !important; }
.priority-icon.is-3 { color: var(--bulma-warning) !important; }
.assignee-list .count.is-urgent { background: var(--bulma-danger); color: #fff; }

/* Mailbox form: connection status */
.connect-box { padding: .75rem; border-radius: .5rem; background: var(--app-row-hover); }

/* Tasks */
.task-row { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.task-row .task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row.is-done .task-title, .task-table tr.is-done .subject { text-decoration: line-through; color: var(--app-muted); }
.task-check { width: 1rem; height: 1rem; flex-shrink: 0; cursor: pointer; accent-color: var(--bulma-success); }
.task-people { display: inline-flex; gap: .15rem; }
.task-table .check-col { width: 2rem; }
.tasks-due { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; color: inherit; }
.tasks-due:hover { background: var(--app-row-hover); }
.repeat-box { border: 1px solid var(--app-border); border-radius: .6rem; padding: 1rem 1rem .25rem; margin-bottom: 1rem; }
.schedule-form:not(:has(#id_frequency option[value="weekly"]:checked)) .when-weekly,
.schedule-form:not(:has(#id_frequency option[value="monthly"]:checked)) .when-monthly,
.schedule-form:not(:has(input[name="monthly_by"][value="day"]:checked)) .when-monthly-day,
.schedule-form:not(:has(input[name="monthly_by"][value="weekday"]:checked)) .when-monthly-weekday { display: none; }
.schedule-form .unit span { display: none; }
.schedule-form:has(#id_frequency option[value="daily"]:checked) .unit-daily,
.schedule-form:has(#id_frequency option[value="weekly"]:checked) .unit-weekly,
.schedule-form:has(#id_frequency option[value="monthly"]:checked) .unit-monthly,
.schedule-form:has(#id_frequency option[value="yearly"]:checked) .unit-yearly { display: inline; }

/* Task checklist */
.checklist header { padding-bottom: .75rem; }
.checklist-count { font-size: .8rem; font-weight: 600; color: var(--app-muted); }
.checklist.is-complete .checklist-count { color: var(--bulma-success); }
.checklist-bar { height: 4px; background: var(--app-border); }
.checklist-bar span { display: block; height: 100%; background: var(--bulma-success); border-radius: 0 2px 2px 0; transition: width .3s ease; }
.checklist-items { padding: .35rem 0; }
.checklist-empty { padding: .75rem 1rem 0; font-size: .85rem; color: var(--app-muted); }
.step { display: flex; align-items: flex-start; gap: .55rem; padding: .5rem .6rem .5rem .2rem; border-radius: .5rem; margin: 0 .4rem; }
.step:hover { background: var(--app-row-hover); }
.step.is-ghost { opacity: .4; }
.step-grip { color: var(--app-muted); cursor: grab; padding: 0 .2rem; opacity: 0; font-size: .8rem; line-height: 1.4rem; }
.step:hover .step-grip { opacity: .7; }
.step-check { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 1.3rem; height: 1.3rem; margin: .05rem 0 0;
  border: 2px solid var(--app-muted); border-radius: 50%; cursor: pointer; position: relative;
  transition: background .15s, border-color .15s; }
.step-check:hover { border-color: var(--bulma-success); }
.step-check:focus-visible { outline: 2px solid var(--bulma-link); outline-offset: 2px; }
.step-check:checked { background: var(--bulma-success); border-color: var(--bulma-success); animation: step-pop .2s ease; }
.step-check:checked::after { content: ""; position: absolute; left: .34rem; top: .14rem; width: .32rem; height: .6rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes step-pop { 50% { transform: scale(1.2); } }
.step-body { flex: 1; min-width: 0; }
.step-text { display: block; cursor: pointer; line-height: 1.4rem; overflow-wrap: anywhere; transition: color .15s; }
.step.is-done .step-text { color: var(--app-muted); text-decoration: line-through; }
.step-meta { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--app-muted); margin-top: .15rem; }
.step-edit { display: none; }
.step.is-editing .step-edit { display: block; }
.step.is-editing .step-text, .step.is-editing .step-meta, .step.is-editing .step-tools { display: none; }
.step-tools { display: inline-flex; gap: .1rem; opacity: 0; transition: opacity .15s; }
.step:hover .step-tools, .step:focus-within .step-tools { opacity: 1; }
@media (hover: none) { .step-tools, .step-grip { opacity: .7; } }
.step-tool { border: 0; background: none; color: var(--app-muted); cursor: pointer; padding: .2rem .35rem; border-radius: .35rem; font-size: .8rem; }
.step-tool:hover { background: var(--app-border); color: inherit; }
.step-tool.is-danger:hover { color: var(--bulma-danger); }
.step-add { display: flex; align-items: center; gap: .55rem; margin: .25rem 1rem 1rem; padding: .45rem .6rem;
  border: 1px dashed var(--app-border); border-radius: .5rem; transition: border-color .15s; }
.step-add:focus-within { border-style: solid; border-color: var(--bulma-link); }
.step-add-icon { color: var(--app-muted); font-size: .8rem; }
.step-add-input { flex: 1; border: 0; background: none; color: inherit; font: inherit; outline: none; }
.step-add-input::placeholder { color: var(--app-muted); }

/* Checklist headings ("## Before day 1") */
.step.is-heading { padding-top: .8rem; }
.step-heading { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); line-height: 1.4rem; }
.steps-builder .step.is-heading .step-input { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); }
.steps-builder .step.is-heading { padding-top: .6rem; }

/* Task form: start from a template, and the {name} it asks for */
.template-picker { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border: 1px solid var(--app-border); border-radius: .75rem; background: var(--app-row-hover); }
.name-box { padding: .75rem 1rem .1rem; margin-bottom: 1rem; border-left: 3px solid var(--bulma-link); background: var(--app-row-hover); border-radius: .4rem; }

/* The step builder on the task / recurring task forms (static/js/checklist.js) */
.steps-builder { display: none; border: 1px solid var(--app-border); border-radius: .6rem; padding: .3rem 0 0; }
.steps-field.is-enhanced .steps-builder { display: block; }
.steps-field.is-enhanced .steps-source { display: none; }
.steps-builder .steps-list:empty { display: none; }
.steps-builder .step { align-items: center; padding: .25rem .5rem .25rem .2rem; }
.steps-builder .step:hover .step-grip { opacity: .7; }
.steps-builder .step-add { margin: .3rem .5rem .5rem; }
.step-dot { flex-shrink: 0; width: 1.1rem; height: 1.1rem; border: 2px solid var(--app-muted); border-radius: 50%; opacity: .6; }
.step-input { flex: 1; min-width: 0; border: 0; border-radius: .35rem; background: none; color: inherit; font: inherit; padding: .2rem .35rem; outline: none; }
.step-input:focus { background: var(--app-row-hover); box-shadow: 0 0 0 1px var(--bulma-link); }
.steps-builder .step .step-tool { opacity: 0; }
.steps-builder .step:hover .step-tool, .steps-builder .step:focus-within .step-tool { opacity: 1; }
@media (hover: none) { .steps-builder .step .step-tool { opacity: .7; } }

/* Task page: Details card (due, client, assignees) */
.task-details .side-label { display: block; }
.assignee-picks { display: flex; flex-direction: column; gap: .3rem; }