/* Project-wide styles. Keep this small; Bootstrap does most of the work. */

.sensitive {
  font-family: var(--bs-font-monospace);
  letter-spacing: 0.05em;
}

.table td,
.table th {
  vertical-align: middle;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Extra status colours beyond Bootstrap's palette (see TaxFiling.STATUS_CLASSES). */
.text-bg-purple {
  background-color: #6f42c1 !important;
  color: #fff !important;
}

.text-bg-teal {
  background-color: #b7e4c7 !important;
  color: #1b4332 !important;
}

.text-bg-approved {
  background-color: #d1e7dd !important;
  color: #0a3622 !important;
  border: 1px solid #198754 !important;
}

/* The status dropdown in lists is coloured like a badge. */
.status-select {
  width: auto;
  min-width: 10.5rem;
  font-weight: 500;
  border-color: rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.status-select option {
  background-color: #fff;
  color: #212529;
  font-weight: 400;
}

/* Open the Clients menu on hover on desktop; the link itself still goes to the list. */
@media (min-width: 992px) {
  .navbar .nav-item.dropdown-hover:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* ---------------------------------------------------------------------------
   Application shell: left sidebar (collapsible on desktop, off-canvas on mobile)
   --------------------------------------------------------------------------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  --bs-offcanvas-width: 260px;
  --bs-offcanvas-bg: #1c2128;
  --bs-offcanvas-color: #fff;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  width: 240px;
  min-height: 100vh;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  background: #1c2128;
  color: #c9d1d9;
}

.sidebar-brand {
  display: block;
  padding: 1rem 1.25rem;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand:hover { color: #fff; }
.app-logo { height: 36px; width: auto; display: block; }
.app-logo-sm { height: 26px; width: auto; }
.auth-logo { height: 64px; width: auto; }

.sidebar-nav { padding: 0.5rem 0.75rem; }

.sidebar-link,
.sidebar-sublink {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.4rem;
  color: #c9d1d9;
  text-decoration: none;
  font-size: 0.95rem;
}

.sidebar-link i { width: 1.1rem; text-align: center; font-size: 1rem; opacity: 0.85; }

.sidebar-link:hover,
.sidebar-sublink:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

.sidebar-link.active,
.sidebar-sublink.active { background: rgba(13, 110, 253, 0.25); color: #fff; font-weight: 500; }

.sidebar-subnav { padding-left: 1.7rem; }

/* Sections that unfold when their chevron is clicked (Clients, Billing, Settings);
   always open on their own pages. */
.sidebar-hover .sidebar-subnav {
  max-height: 0; overflow: hidden;
  transition: max-height 0.2s ease 0.4s;
}
.sidebar-hover.open .sidebar-subnav { max-height: 24rem; transition-delay: 0s; }
/* Sections that only unfold on their own pages (Triage). */
.sidebar-section .sidebar-subnav { display: none; }
.sidebar-section.open .sidebar-subnav { display: block; }
.sidebar-hint { width: auto !important; font-size: 0.8rem !important; opacity: 0.7; padding: .25rem .4rem; margin-right: -.3rem; border-radius: .3rem; transition: transform 0.15s ease; }
.sidebar-hint:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; }
.sidebar-hover.open .sidebar-hint { transform: rotate(180deg); }


.sidebar-sublink { font-size: 0.875rem; padding: 0.3rem 0.6rem; }
.sidebar-sublink i { width: 1rem; text-align: center; font-size: 0.85rem; opacity: 0.8; }

.sidebar-footer {
  margin-top: auto;
  padding-bottom: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-heading {
  padding: 0.85rem 1.35rem 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b949e;
}

.sidebar-user { padding: 0.25rem 0.75rem 0; }

.sidebar-user .dropdown-toggle::after { margin-left: auto; }

.app-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--bs-border-color);
}

.app-content {
  flex: 1 1 auto;
  padding: 1.5rem;
}

@media (min-width: 992px) {
  .app-sidebar { flex: 0 0 auto; transition: margin-left 0.2s ease; position: sticky; top: 0; height: 100vh; align-self: flex-start; }
  .sidebar-collapsed .app-sidebar { margin-left: -240px; }
}

/* Timesheet */
.timesheet tr.today th { background-color: #e7f1ff !important; }
.timesheet td, .timesheet th { padding-top: 0.35rem; padding-bottom: 0.35rem; }


/* Timeline and @mentions */
.mention { background: #e7f1ff; color: #0a58ca; border-radius: .25rem; padding: 0 .2rem; font-weight: 500; }
.mention-menu { position: absolute; left: 0; top: 100%; z-index: 1050; min-width: 16rem; }
.timeline-body { white-space: normal; }
.timeline-body p { margin: 0 0 .4rem; }
.timeline-body p:last-child { margin-bottom: 0; }
.timeline-body ul, .timeline-body ol { margin: .2rem 0 .5rem 1.25rem; padding-left: .5rem; }
.timeline-body li { margin-bottom: .15rem; }
.timeline-icon { width: 1.6rem; text-align: center; padding-top: .1rem; }
.timeline-who { font-size: .9rem; }

/* Round initials for senders (Triage rows, timeline); the hue comes from the name. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font-size: .68rem; font-weight: 600; letter-spacing: .02em; font-style: normal;
  color: hsl(var(--hue, 210) 45% 32%); background: hsl(var(--hue, 210) 70% 90%);
}
.avatar-kind { color: #6c757d; background: #eef0f3; font-size: .8rem; }
.triage-row .row-from { font-size: .9rem; font-weight: 500; color: #343a40; min-width: 0; }
.triage-row.unread .row-from { font-weight: 600; color: #212529; }


/* Triage split view */
.triage-list { max-height: calc(100vh - 12rem); overflow-y: auto; }
.triage-list .active-item { background: #e7f1ff; border-left: 3px solid #0d6efd; }
.email-frame { width: 100%; min-height: 28rem; border: 0; background: #fff; }
.label-caps { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #6c757d; margin-bottom: .35rem; }

/* Relative due-date pills: one width everywhere so columns line up */
.due-pill { display: inline-block; min-width: 8.5em; text-align: center; }
.due-pill.text-bg-dark, .due-pill.text-bg-danger { letter-spacing: -.01em; }
/* Date + pill as two fixed columns so the pills line up down a list */
.due-when { display: inline-flex; align-items: center; white-space: nowrap; }
.due-date { display: inline-block; min-width: 6.6em; }
.due-date-short { min-width: 3.8em; }
.table-compact .due-date { min-width: 6.2em; }

/* Billed-to type-ahead inside a table cell */
.billed-to-search { position: relative; min-width: 16rem; }
.billed-to-search .list-group { position: absolute; z-index: 20; left: 0; right: 0; background: #fff; max-height: 16rem; overflow-y: auto; border: 1px solid #dee2e6; border-radius: .375rem; }

/* Job commentary popover next to the status dropdown */
.job-notes { position: relative; display: inline-block; }
.job-notes-toggle { line-height: 1; color: #0d6efd; }
.job-notes-toggle.text-muted { color: #adb5bd !important; }
.job-notes-count { font-size: .65rem; }
.billed-to, .billed-to-search { max-width: 18rem; }
.job-notes-panel { display: none; position: fixed; z-index: 1050; width: 22rem; max-width: 80vw;
  background: #fff; border: 1px solid #dee2e6; border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); padding: .6rem; text-align: left; white-space: normal; }
.job-notes:hover .job-notes-panel, .job-notes.open .job-notes-panel { display: block; }
.job-notes-list { max-height: 12rem; overflow-y: auto; }
td .job-notes-panel { font-weight: normal; }

/* Compact list layout: more rows on screen, one line per row */
.table-compact .table > :not(caption) > * > * { padding: .15rem .4rem; font-size: .8rem; line-height: 1.25; }
.table-compact .table th { font-size: .75rem; white-space: nowrap; }
.table-compact .job-period-note { display: none !important; }
.table-compact .form-select-sm, .table-compact .status-select { padding-top: .05rem; padding-bottom: .05rem; font-size: .75rem; min-width: 8rem; }
.table-compact .btn-sm { padding: .05rem .35rem; font-size: .72rem; }
.table-compact .badge { font-size: .65rem; }
.table-compact .due-pill { min-width: 8em; }
.table-compact .job-notes-toggle .job-notes-count { font-size: .6rem; }
.table-compact td { white-space: nowrap; }
.list-layout .btn-sm { padding: .2rem .5rem; }

/* MTD planner */
.mtd-select { min-width: 8.5rem; }
.mtd-select.mtd-required { background-color: #fff3cd; }
.mtd-select.mtd-registered { background-color: #d1e7dd; }
.mtd-select.mtd-exempt { background-color: #e2e3e5; }
.mtd-notes-col { min-width: 14rem; }
.mtd-notes input[title="Saved"] { border-color: #198754; }

/* Triage: folders, rows, thread view */
.triage-folders .nav-link { color: inherit; border-radius: .25rem; }
.triage-folders .nav-link.active { background: #e7f1ff; }
.triage-row .row-title { font-weight: 400; }
.triage-row.unread .row-title { font-weight: 600; }
.triage-row.unread { border-left: 3px solid #0d6efd; }
/* Row tools float over the top-right corner on hover, so the date column stays put
   whatever the number of tools a row has. */
.triage-row { position: relative; }
/* the hover tools hang outside the row to its right, over whatever is beside the list,
   so the row itself (name, subject, preview, time) is never covered */
/* a strip of its own under the preview text holds the hover tools, so they never sit
   over any wording and are easy to reach */
.triage-row > .d-flex > a { padding-bottom: 1.7rem !important; }
.triage-row .row-actions { display: none; position: absolute; bottom: .35rem; left: 3.35rem; align-items: center; gap: .3rem; padding: 0; background: none; border: 0; box-shadow: none; z-index: 2; white-space: nowrap; }
.triage-row .row-actions .btn { width: 1.45rem; height: 1.45rem; padding: 0; margin: 0 !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; background: #eef2f7; color: #495057 !important; border: 0; }
.triage-row .row-actions .btn:hover { background: #0d6efd; color: #fff !important; }
.triage-row .row-actions .btn.text-success { color: #0d6efd !important; }  /* the clear tick: blue */
.triage-row .row-actions .btn.text-success:hover { background: #0d6efd; color: #fff !important; }  /* white on blue */
.triage-row .row-actions .btn.text-danger:hover { background: #b02a37; color: #fff !important; }
.triage-row:hover { background: #f3f6fa; }
.triage-row > .d-flex > a { padding-top: .4rem !important; }
.triage-row .row-from { font-size: .86rem; }
.triage-row .row-title { font-size: .86rem; line-height: 1.3; }
.triage-row .row-preview { font-size: .78rem; line-height: 1.3; }
.triage-row .row-date { font-size: .74rem; }
.triage-row .badge { font-size: .66rem; }
.triage-day { font-size: .84rem !important; letter-spacing: .03em; text-transform: uppercase; font-weight: 600; color: #495057 !important; padding-top: .4rem !important; padding-bottom: .4rem !important; }
.triage-row:hover .row-actions, .triage-row.active-item .row-actions { display: flex; }
.triage-row.active-item { background: #e7f1ff; }
.triage-row.cursor { outline: 2px solid #0d6efd; outline-offset: -2px; }
.min-w-0 { min-width: 0; }
.thread-message .thread-body { display: none; }
.thread-message.open .thread-body { display: block; }
.thread-message.open .thread-preview { display: none; }
.thread-message.outgoing { border-left: 3px solid #0d6efd; }
.thread-head { cursor: pointer; }
.avatar-dot { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: #fff; text-align: center; line-height: 1.5rem; font-size: .8rem; margin-right: .35rem; }
.bulk-bar { min-height: 2rem; }

/* Global search in the top bar */
.global-search { position: relative; max-width: 42rem; }
.global-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 1040; background: #fff; border: 1px solid #dee2e6; border-radius: .375rem; max-height: 70vh; overflow-y: auto; display: none; }
.global-search-results:not(:empty) { display: block; }
.search-group-title { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #6c757d; padding: .4rem .75rem .1rem; }
.search-hit { display: flex; align-items: baseline; gap: .5rem; padding: .3rem .75rem; text-decoration: none; color: inherit; }
.search-hit:hover, .search-hit.active { background: #e7f1ff; }
.search-hit-title { font-weight: 500; white-space: nowrap; }
.search-hit-sub { color: #6c757d; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { padding: .6rem .75rem; color: #6c757d; font-size: .85rem; }
.search-page .search-hit { padding: .4rem 0; }
.ask-q { margin: .5rem 0; }
.ask-a p:last-child { margin-bottom: 0; }

/* Resizable Triage split: the list and the thread pane share a flex row */
@media (min-width: 992px) {
  .triage-split > .triage-list-col { flex: 0 0 var(--triage-list, 34%); max-width: none; width: var(--triage-list, 34%); }
  .triage-split > .triage-pane { flex: 1 1 0; max-width: none; width: auto; min-width: 20rem; }
}
.triage-divider { flex: 0 0 8px; cursor: col-resize; margin: 0 -4px; position: relative; }
.triage-divider::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: #dee2e6; }
.triage-divider:hover::after, .triage-divider.dragging::after { background: #0d6efd; }
.timeline-preview { white-space: pre-line; }

/* Thread pane: wide thread, narrow action column (about half a Bootstrap quarter) */
.conversation-main { flex: 1 1 0; min-width: 0; }
@media (min-width: 1200px) { .triage-side { flex: 0 0 13rem; max-width: 13rem; } }
.triage-side .card-body { padding: .6rem .7rem; }
.triage-side .form-select, .triage-side .form-control, .triage-side .btn { font-size: .8rem; }

/* The thread's title bar and action toolbar sit on top of the messages as one box */
.thread-toolbar { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0 !important; }
.thread-toolbar + .thread-message { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
.thread-toolbar .card-footer { background: #f8f9fa; }
.item-actions .btn { white-space: nowrap; }

/* Timeline emails expand in place */
.timeline-email-toggle { cursor: pointer; color: #495057; margin-top: .15rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.timeline-email-toggle:hover { color: #0d6efd !important; }
.timeline-email-toggle.open .bi-chevron-down { transform: rotate(180deg); display: inline-block; }
.email-full .email-frame { min-height: 16rem; }

/* Address suggestions under To / Cc */
.address-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 1060; max-height: 16rem; overflow-y: auto; }
.address-menu.show { display: block; }

/* The @ button in the top bar lights up while a mention waits. */
#mention-bell.has-mentions { animation: mention-pulse 1.4s ease-in-out 3; }
@keyframes mention-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, .55); }
  50% { box-shadow: 0 0 0 .4rem rgba(13, 110, 253, 0); }
}
/* A popped-out compose form fills its window. */
#compose-modal .card { margin: 0; border: 0; }

/* Debtors commentary cell */
.debtor-note { min-width: 16rem; max-width: 26rem; }
.text-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Timeline: what each entry is, and the filter buttons */
.timeline-kind { font-size: .72rem; padding: .05rem .4rem; border-radius: 1rem; background: #eef0f3; color: #495057; }
.timeline-kind.kind-EMAIL { background: #e7f1ff; color: #0b5ed7; }
.timeline-kind.kind-NOTE, .timeline-kind.kind-COMMENT { background: #fff3cd; color: #8a6d00; }
.timeline-kind.kind-STATUS, .timeline-kind.kind-ASSIGNMENT, .timeline-kind.kind-JOB, .timeline-kind.kind-TASK { background: #e2f0e6; color: #146c43; }
.timeline-kind.kind-INVOICE, .timeline-kind.kind-RECEIPT, .timeline-kind.kind-CREDIT { background: #fde2e4; color: #b02a37; }
.timeline-filter .btn { font-size: .75rem; padding: .15rem .5rem; }
.timeline li.timeline-hidden { display: none; }

/* Thumbs up on notes and comments */
.reaction-btn { font-size: 1rem; filter: grayscale(1); opacity: .6; }
.reaction-btn:hover, .reaction-btn.active { filter: none; opacity: 1; }
.reaction-chip { background: #e7f1ff; border-radius: 1rem; padding: .05rem .5rem; font-size: .8rem; }

/* Signature editor (Settings → Email account) */
.signature-editor { min-height: 9rem; max-height: 24rem; overflow: auto; font-family: Calibri, Arial, sans-serif; font-size: 11pt; }
.signature-editor:empty::before { content: attr(data-placeholder); color: #6c757d; }
.signature-editor img { max-width: 100%; height: auto; }

/* Timeline cards (client, job, contact pages) */
.timeline-period { letter-spacing: .04em; font-size: .72rem; }
.timeline-list { background: #f5f6f8; padding-bottom: .75rem; border-radius: 0 0 .375rem .375rem; }
.timeline-card { background: #fff; border: 1px solid #e3e6ea; border-radius: .5rem; padding: .6rem .75rem; margin-bottom: .5rem; }
.timeline-card.pinned { border-color: #f1d27a; background: #fffbea; }
.timeline-card .timeline-head { font-size: .85rem; }
.timeline-card .timeline-who { font-size: .9rem; }
.timeline-subject { font-weight: 600; margin-top: .15rem; }
.timeline-card .timeline-body { margin-top: .15rem; }
.timeline-card .timeline-tools { visibility: hidden; }
.timeline-card:hover .timeline-tools { visibility: visible; }
.timeline-reply { margin: .4rem 0 0 .25rem; padding: .3rem .6rem; background: #f5f6f8; border-radius: .4rem; }
.timeline-actions summary { cursor: pointer; }
.timeline-actions details[open] summary { display: none; }
.timeline-actions details { flex: 1 1 auto; min-width: 0; }
.timeline-toolbar { border-bottom: 1px solid #e3e6ea; }

/* Emoji picker and attachment chips */
.emoji-panel { display: inline-flex; flex-wrap: wrap; gap: .1rem; width: 17rem; padding: .3rem; background: #fff; border: 1px solid #dee2e6; border-radius: .4rem; margin-left: .25rem; vertical-align: middle; }
.emoji-choice { border: 0; background: none; font-size: 1.15rem; line-height: 1.6rem; width: 1.9rem; border-radius: .3rem; }
.emoji-choice:hover { background: #e7f1ff; }
.attachment-chip { display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; padding: .1rem .5rem; border: 1px solid #dee2e6; border-radius: 1rem; background: #f8f9fa; color: #343a40; max-width: 100%; }
.attachment-chip:hover { background: #e7f1ff; border-color: #b6d4fe; }

/* Comment box (Triage thread comments, mention replies): shaded, roomy, with tools */
.comment-box { background: #e6f6f1; border: 1px solid #bfe6d9; border-radius: .6rem; padding: .75rem; }
.comment-box .comment-input { background: transparent; border: 0; box-shadow: none; resize: vertical; font-size: .95rem; padding: .25rem .25rem; }
.comment-box .btn-light { background: #fff; }
.comment-card { padding: .5rem .6rem; margin-bottom: .5rem; background: #f8f9fa; border-radius: .5rem; }
.comment-card .timeline-body { font-size: .95rem; }

/* Remind me menu: quick times */
.remind-menu { min-width: 19rem; }
.remind-menu .dropdown-item { padding: .35rem 1rem; }

/* Timeline card action bar (Reply to all / Reply / Forward / Comment) */
.timeline-actionbar { gap: .4rem !important; }
.timeline-actionbar .btn-primary i { font-size: 1rem; vertical-align: -.1rem; }
.comment-form:not(.open) { display: none !important; }
.comment-form.open { display: flex !important; }
.timeline-card .email-full .email-full-inner { border: 0 !important; padding: 0 !important; margin-top: .25rem; }
.timeline-card .email-full .email-frame { min-height: 5rem; height: 12rem; max-height: 60rem; overflow: hidden; }

/* Comment cards in a mention thread */
.comment-thread .comment-card { margin-bottom: .5rem; }
.comment-highlight { background: #fff8e1; border: 1px solid #f1d27a; }

/* Long email threads: first and latest shown, the middle folded behind a count */
.thread-message.thread-hidden { display: none; }
.thread-more { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: none; padding: .25rem 0 .6rem; color: #495057; font-size: .85rem; cursor: pointer; }
.thread-more::before, .thread-more::after { content: ""; flex: 1 1 auto; border-top: 1px dashed #ced4da; }
.thread-more-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.8rem; height: 1.8rem; padding: 0 .4rem; border-radius: 1rem; border: 1px solid #ced4da; background: #fff; font-weight: 600; }
.thread-more:hover { color: #0d6efd; }
.thread-more:hover .thread-more-count { border-color: #0d6efd; }

/* Thread header buttons: one line where the pane allows it */
.item-actions { flex-wrap: nowrap !important; }
.item-actions .btn { white-space: nowrap; }
@media (max-width: 1400px) { .item-actions { flex-wrap: wrap !important; } }

/* Attachments under an email: big enough to notice */
.email-attachment { display: inline-flex; align-items: center; gap: .2rem; margin: .15rem .4rem .15rem 0; padding: .35rem .7rem; font-size: .92rem; font-weight: 500; color: #1b1f3b; background: #f1f3f5; border: 1px solid #ced4da; border-radius: .5rem; }
.email-attachment:hover { background: #e6f6f1; border-color: #bfe6d9; color: #146c43; }
.email-attachment .text-muted { font-weight: 400; }

/* Formatting toolbar above writing boxes */
.fmt-toolbar { display: flex; gap: .15rem; margin-bottom: .25rem; }
.fmt-btn { border: 1px solid #dee2e6; background: #fff; border-radius: .3rem; min-width: 1.9rem; height: 1.7rem; font-size: .8rem; line-height: 1; color: #495057; }
.fmt-btn:hover { background: #e6f6f1; border-color: #bfe6d9; color: #146c43; }
.comment-tools { visibility: hidden; }
.comment-card:hover .comment-tools { visibility: visible; }
.timeline-body em { font-style: italic; }

/* Rich editor (emails) */
.rich-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; padding: .3rem; border: 1px solid #dee2e6; border-bottom: 0; border-radius: .375rem .375rem 0 0; background: #f8f9fa; }
.rich-btn { border: 1px solid transparent; background: none; border-radius: .3rem; min-width: 1.9rem; height: 1.8rem; font-size: .85rem; line-height: 1; color: #343a40; padding: 0 .35rem; }
.rich-btn:hover { background: #fff; border-color: #dee2e6; }
.rich-a { border-bottom: 3px solid #b02a37; line-height: 1; }
.rich-menu { position: relative; }
.rich-menu-list { display: none; position: absolute; z-index: 20; top: 100%; left: 0; background: #fff; border: 1px solid #dee2e6; border-radius: .4rem; box-shadow: 0 4px 12px rgba(0,0,0,.12); padding: .25rem; min-width: 7rem; }
.rich-menu-list.show { display: flex; flex-wrap: wrap; gap: .15rem; }
.rich-menu-item { border: 0; background: none; text-align: left; padding: .25rem .5rem; border-radius: .3rem; width: 100%; }
.rich-menu-item:hover { background: #e6f6f1; }
.rich-menu-item:has(.rich-swatch) { width: auto; }
.rich-swatch { display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: .25rem; border: 1px solid #ced4da; }
.rich-area { min-height: 11rem; max-height: 30rem; overflow: auto; border-radius: 0 0 .375rem .375rem; font-family: Calibri, Arial, sans-serif; font-size: 11pt; }
.rich-area:empty::before { content: attr(data-placeholder); color: #6c757d; }
.rich-area ul, .rich-area ol { margin: .25rem 0 .5rem 1.25rem; }
.rich-area p { margin: 0 0 .5rem; }

/* Top bar: + menu and stopwatch */
.quick-tools .btn { white-space: nowrap; }
.quick-menu { min-width: 14rem; }
#timer-display { font-variant-numeric: tabular-nums; }
.rich-menu-sizes { max-height: 18rem; overflow: auto; min-width: 5rem; }
.rich-menu-sizes .rich-menu-item { width: 100%; }

/* Files being attached, and dropping files onto a form */
.file-list { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.chip-remove { line-height: 1; }
.chip-remove:hover { color: #b02a37 !important; }
form.drop-target { outline: 2px dashed #12b8a0; outline-offset: 4px; background: #e6f6f1; }

/* Compact mode: everything is sized in rem, so shrinking the root shrinks type and
   spacing together, like zooming out; a few paddings are tightened further. */
html.compact { font-size: 85%; }
html.compact .app-content { padding: .75rem 1rem; }
html.compact .app-topbar { padding: .3rem .75rem; }
html.compact .table > :not(caption) > * > * { padding: .3rem .45rem; }
html.compact .card-body { padding: .6rem .8rem; }
html.compact .list-group-item { padding: .35rem .7rem; }
html.compact .triage-row { padding-top: .3rem !important; padding-bottom: .3rem !important; }
html.compact h1.h3, html.compact .h3 { font-size: 1.35rem; }
html.compact .btn { --bs-btn-padding-y: .2rem; }
html.compact .form-control, html.compact .form-select { padding-top: .25rem; padding-bottom: .25rem; }

/* Review points on a job: open ones stand out, resolved ones fade */
.timeline-kind.kind-REVIEW { background: #fff3cd; color: #664d03; }
.timeline-card.review-point { border-left: 3px solid #ffc107; }
.timeline-card.review-point.resolved { border-left-color: #198754; opacity: .75; }
.timeline-card.review-point.resolved .timeline-subject { text-decoration: line-through; }

/* Menu along the top (a person's choice, desktop only): the same navigation laid out
   as a bar, with each section's sub-items as a drop-down on hover. */
@media (min-width: 992px) {
  html.topnav .app-shell { flex-direction: column; }
  html.topnav .app-sidebar { position: sticky; top: 0; z-index: 1030; width: 100%; height: auto; margin-left: 0 !important; }
  html.topnav .sidebar-inner { flex-direction: row; align-items: center; width: 100%; min-height: 0; height: auto; overflow: visible; }
  html.topnav .sidebar-brand { padding: .35rem 1rem; border-bottom: 0; flex: 0 0 auto; }
  html.topnav .app-logo { height: 28px; }
  html.topnav .sidebar-nav { display: flex; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: .1rem; padding: .25rem .5rem; flex: 1 1 auto; }
  html.topnav .sidebar-nav > li { display: block; }
  html.topnav .sidebar-nav > li { position: relative; }
  html.topnav .sidebar-link { padding: .35rem .6rem; font-size: .9rem; white-space: nowrap; }
  html.topnav .sidebar-link .badge { margin-left: .35rem !important; }
  html.topnav .sidebar-hint { display: none; }
  html.topnav .sidebar-subnav,
  html.topnav .sidebar-hover .sidebar-subnav,
  html.topnav .sidebar-section .sidebar-subnav,
  html.topnav .sidebar-section.open .sidebar-subnav { display: none; position: absolute; top: 100%; left: 0; min-width: 15rem; max-height: none; padding: .35rem; background: #1c2128; border-radius: .4rem; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: none; z-index: 1040; }
  html.topnav .sidebar-nav > li:hover > .sidebar-subnav,
  html.topnav .sidebar-nav > li:focus-within > .sidebar-subnav { display: block; }
  html.topnav .sidebar-subnav .sidebar-sublink { white-space: nowrap; }
  html.topnav .sidebar-user { margin-left: auto; padding: 0 .5rem; }
  html.topnav .sidebar-user .sidebar-link { padding: .35rem .6rem; }
  html.topnav .sidebar-user .dropdown-menu { right: 0; left: auto; }
  html.topnav .sidebar-footer { margin-top: 0; padding: 0; border-top: 0; }
  html.topnav .sidebar-heading { display: none; }
  html.topnav #sidebar-toggle { display: none !important; }
  html.topnav .app-main { width: 100%; }
  html.topnav #nav-quick-slot { display: flex; align-items: center; margin-left: .35rem; }
  html.topnav #nav-quick-slot .btn { padding: .2rem .5rem; color: #fff; border-color: rgba(255,255,255,.35); }
  html.topnav #nav-quick-slot .btn:hover { background: rgba(255,255,255,.1); }
}
.topnav-only:empty { display: none; }

/* Month calendar */
.month-grid td { width: 14.28%; height: 6.5rem; padding: .3rem .4rem; }
.month-grid td.today { background: #eef5ff; }
.calendar-day { cursor: pointer; }
.calendar-day:hover { background: #f1f3f5; }
.calendar-event { line-height: 1.25; }

/* Invoice page in the style of an accounting package: a sheet, a lines table, totals */
.invoice-sheet .form-control, .invoice-sheet .form-select { font-size: .9rem; }
.invoice-lines td, .invoice-lines th { vertical-align: middle; }
.invoice-lines input.form-control { min-width: 4.5rem; }
.invoice-totals td, .invoice-totals th { border: 0; padding: .2rem .4rem; }
.invoice-totals tr.fs-5 th { border-top: 2px solid #212529; padding-top: .4rem; }

/* Timeline filter: easy to see, the chosen one filled in */
.timeline-filter .btn { font-weight: 500; }
.timeline-filter .btn.active { background: #0d6efd; color: #fff; }

/* A compose window of its own */
.window-body main { max-width: 960px; margin: 0 auto; }
.window-body #compose { margin-top: 0 !important; }

.text-bg-orange { background: #fd7e14 !important; color: #fff !important; }

/* a Send button that has been clicked and is waiting for the server */
.btn.sending { opacity: .65; cursor: progress; }
.btn.sending .bi { display: none; }
.btn.sending::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .35em; vertical-align: -.1em; border: .15em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner-border .75s linear infinite; }

/* ---------------------------------------------------------------------------
   The modern look (html.modern): softer cards with a shadow, pill buttons, pastel
   badges, email threads as chat bubbles and a rounded typeface. Toggled from the
   top bar, remembered on this PC, and works together with compact.
   --------------------------------------------------------------------------- */
html.modern {
  --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-bg: #f3f5fa; --bs-body-color: #1f2937;
  --bs-primary: #2f6fed; --bs-primary-rgb: 47, 111, 237;
  --bs-link-color: #2f6fed; --bs-link-color-rgb: 47, 111, 237; --bs-link-hover-color: #1d4ed8; --bs-link-hover-color-rgb: 29, 78, 216;
  --bs-border-color: #e6e9f0; --bs-border-radius: .75rem; --bs-border-radius-sm: .5rem; --bs-border-radius-lg: 1rem;
  --bs-tertiary-bg: #f3f5fa; --bs-secondary-bg: #eef1f6;
}
html.modern body { font-family: var(--bs-body-font-family); background: #f3f5fa !important; color: #1f2937; }
html.modern h1, html.modern h2, html.modern h3, html.modern .h1, html.modern .h2, html.modern .h3 { font-weight: 800; letter-spacing: -.01em; }
html.modern h4, html.modern h5, html.modern .h4, html.modern .h5 { font-weight: 700; }

/* buttons: pills, one brand blue */
html.modern .btn { border-radius: 999px; font-weight: 600; }
html.modern .btn-primary { --bs-btn-bg: #2f6fed; --bs-btn-border-color: #2f6fed; --bs-btn-hover-bg: #1d5be0; --bs-btn-hover-border-color: #1d5be0; --bs-btn-active-bg: #1a4fc4; --bs-btn-active-border-color: #1a4fc4; --bs-btn-disabled-bg: #2f6fed; --bs-btn-disabled-border-color: #2f6fed; }
html.modern .btn-outline-primary { --bs-btn-color: #2f6fed; --bs-btn-border-color: #c7d7fb; --bs-btn-hover-bg: #2f6fed; --bs-btn-hover-border-color: #2f6fed; --bs-btn-active-bg: #2f6fed; --bs-btn-active-border-color: #2f6fed; }
html.modern .btn-outline-secondary { --bs-btn-color: #4b5563; --bs-btn-border-color: #dfe3ea; --bs-btn-hover-bg: #eef1f6; --bs-btn-hover-color: #1f2937; --bs-btn-hover-border-color: #dfe3ea; --bs-btn-active-bg: #e3ecff; --bs-btn-active-color: #1d4ed8; --bs-btn-active-border-color: #c7d7fb; }
html.modern .btn-link { font-weight: 600; }
html.modern .btn-close { border-radius: 50%; }

/* cards: no border, a soft shadow, rounder corners */
html.modern .card { border: 0; border-radius: 1rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(16, 24, 40, .06); }
html.modern .card > .card-header { background: transparent; border-bottom: 1px solid #eef0f4; font-weight: 700; border-radius: 1rem 1rem 0 0; }
html.modern .card > .card-footer { background: #fafbfd; border-top: 1px solid #eef0f4; border-radius: 0 0 1rem 1rem; }
html.modern .card .list-group-flush > .list-group-item { border-color: #eef0f4; }
html.modern .card .table { margin-bottom: 0; }

/* the shell: deep navy menu, a white top bar without a hard line */
html.modern .app-sidebar { --bs-offcanvas-bg: #16213a; }
html.modern .sidebar-inner { background: #16213a; }
html.modern .sidebar-brand { border-bottom-color: rgba(255, 255, 255, .06); }
html.modern .sidebar-link, html.modern .sidebar-sublink { border-radius: .6rem; }
html.modern .sidebar-link i { opacity: 1; color: #9db8f4; }
html.modern .sidebar-link.active, html.modern .sidebar-sublink.active { background: #2f6fed; color: #fff; }
html.modern .sidebar-link.active i { color: #fff; }
html.modern .sidebar-footer { border-top-color: rgba(255, 255, 255, .06); }
html.modern .app-topbar { border-bottom: 0; box-shadow: 0 1px 0 #e9edf3; }
html.modern .global-search .input-group-text { border-radius: 999px 0 0 999px; border-color: #dfe3ea; }
html.modern .global-search .form-control { border-radius: 0 999px 999px 0; }

/* fields */
html.modern .form-control, html.modern .form-select { border-radius: .6rem; border-color: #dfe3ea; }
html.modern .form-control:focus, html.modern .form-select:focus { border-color: #93b4f8; box-shadow: 0 0 0 .2rem rgba(47, 111, 237, .15); }
html.modern .input-group-text { border-color: #dfe3ea; background: #fafbfd; }
html.modern .form-check-input:checked { background-color: #2f6fed; border-color: #2f6fed; }

/* badges: pastel pills, dark text */
html.modern .badge { border-radius: 999px; font-weight: 700; padding: .3em .65em; }
html.modern .badge.text-bg-primary { background: #e3ecff !important; color: #1d4ed8 !important; }
html.modern .badge.text-bg-success { background: #dcf5e7 !important; color: #15803d !important; }
html.modern .badge.text-bg-warning { background: #fff1d6 !important; color: #b45309 !important; }
html.modern .badge.text-bg-danger { background: #fde2e2 !important; color: #b91c1c !important; }
html.modern .badge.text-bg-secondary { background: #eceff4 !important; color: #4b5563 !important; }
html.modern .badge.text-bg-info { background: #dff4fb !important; color: #0e7490 !important; }
html.modern .badge.text-bg-dark { background: #e5e7eb !important; color: #111827 !important; }
html.modern .badge.text-bg-light { background: #f3f4f6 !important; color: #374151 !important; }
html.modern .badge.text-bg-orange { background: #ffe8d6 !important; color: #c2410c !important; }

/* tables and lists */
html.modern .table { --bs-table-border-color: #eef0f4; --bs-table-hover-bg: #f6f8fc; }
html.modern .table > thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 700; border-bottom-width: 1px; }
html.modern .list-group { --bs-list-group-border-color: #eef0f4; --bs-list-group-border-radius: 1rem; }
html.modern .nav-pills .nav-link { border-radius: 999px; font-weight: 600; }
html.modern .nav-pills .nav-link.active { background: #2f6fed; }
html.modern .nav-tabs .nav-link { border: 0; font-weight: 600; color: #6b7280; }
html.modern .nav-tabs .nav-link.active { color: #1d4ed8; border-bottom: 2px solid #2f6fed; background: transparent; }
html.modern .triage-folders .nav-link { border-radius: 999px; }
html.modern .triage-folders .nav-link.active { background: #e3ecff; color: #1d4ed8; }
html.modern .triage-row.unread { border-left-color: #2f6fed; }
html.modern .triage-row:hover { background: #f6f8fc; }
html.modern .triage-day { background: transparent !important; color: #6b7280 !important; }
html.modern .triage-row .row-actions .btn:hover, html.modern .triage-row .row-actions .btn.text-success:hover { background: #2f6fed; }
html.modern .triage-row .row-actions .btn.text-success { color: #2f6fed !important; }
html.modern .pagination { --bs-pagination-border-radius: 999px; --bs-pagination-active-bg: #2f6fed; --bs-pagination-active-border-color: #2f6fed; --bs-pagination-color: #2f6fed; }
html.modern .page-item .page-link { border-radius: 999px; margin: 0 .1rem; border-color: transparent; }

/* pop-ups and menus */
html.modern .modal-content { border: 0; border-radius: 1.1rem; box-shadow: 0 20px 60px rgba(16, 24, 40, .2); }
html.modern .dropdown-menu { border: 0; border-radius: .9rem; box-shadow: 0 8px 30px rgba(16, 24, 40, .14); padding: .4rem; }
html.modern .dropdown-item { border-radius: .6rem; }
html.modern .dropdown-item:active { background: #2f6fed; }
html.modern .alert { border: 0; border-radius: .9rem; }
html.modern .toast { border: 0; border-radius: .9rem; }
html.modern .mention { background: #e3ecff; color: #1d4ed8; border-radius: .35rem; }

/* people: avatars with a white ring */
html.modern .avatar { box-shadow: 0 0 0 2px #fff; font-weight: 700; }
html.modern .avatar-dot { width: 1.9rem; height: 1.9rem; line-height: 1.9rem; font-size: .85rem; font-weight: 700; box-shadow: 0 0 0 2px #fff; }

/* an email thread as chat bubbles: theirs on the left, ours on the right in blue */
html.modern .thread-toolbar { margin-bottom: .75rem !important; }
html.modern .thread-toolbar + .thread-message { border-radius: 1.1rem; border-top: 0; }
html.modern .thread-message { max-width: 88%; border: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06); background: #fff; border-radius: 1.1rem; border-bottom-left-radius: .3rem; margin-bottom: .6rem !important; }
html.modern .thread-message.outgoing { margin-left: auto; background: #e3ecff; border-left: 0; border-bottom-left-radius: 1.1rem; border-bottom-right-radius: .3rem; box-shadow: none; }
html.modern .thread-message.open { max-width: 100%; }
html.modern .thread-message .thread-head { padding: .6rem .95rem .45rem; }
html.modern .thread-message.open .thread-head { padding-bottom: .25rem; }
html.modern .thread-message .thread-body { border-top: 1px solid #eef0f4 !important; margin: 0 .5rem .25rem; padding: .75rem .45rem; }
html.modern .thread-message.outgoing .thread-body { background: #fff; border-top: 0 !important; margin: 0 .5rem .5rem; border-radius: .8rem; padding: .75rem .9rem; }
html.modern .thread-message:not(.outgoing) .avatar-dot { background: #64748b !important; }
html.modern .thread-message.outgoing .avatar-dot { background: #2f6fed !important; }
html.modern .thread-more { color: #6b7280; }
html.modern #compose.card { border: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(47, 111, 237, .12); }

/* comments as bubbles too */
html.modern .comment-card { background: #f6f8fc; border-radius: 1rem; border-top-left-radius: .3rem; padding: .6rem .85rem; }
html.modern .comment-box .form-control { border-radius: 1rem; }
html.modern .timeline-card { border-radius: .9rem; }