*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Global scrollbars — floating rounded thumb, clear track, no arrow buttons.
   Standard properties only for Firefox: setting them makes Chromium ignore the webkit rules. */
::-webkit-scrollbar {
  width: var(--scroll-size);
  height: var(--scroll-size);
  background: transparent;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
  border: 3.5px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  min-height: 36px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--sb-thumb-hover);
  border-width: 2.5px;
}
::-webkit-scrollbar-thumb:active {
  background-color: var(--accent);
  border-width: 2.5px;
}
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner {
  display: none;
  background: transparent;
}
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) transparent;
  }
}

/* Panels: thumb appears on hover only; touch devices use the OS overlay bar */
.scroll-soft::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.pms-drawer-body::-webkit-scrollbar,
.finance-qe-body::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scroll-soft::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.pms-drawer-body::-webkit-scrollbar-thumb,
.finance-qe-body::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-width: 3px;
}
.scroll-soft:hover::-webkit-scrollbar-thumb,
.sidebar-nav:hover::-webkit-scrollbar-thumb,
.pms-drawer-body:hover::-webkit-scrollbar-thumb,
.finance-qe-body:hover::-webkit-scrollbar-thumb,
.table-wrap:hover::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
}
@media (hover: none) {
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

/* Scroll-edge fade: content fades at an edge only while there is more to scroll */
@property --fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes scroll-edge-fade {
  0% { --fade-start: 0px; --fade-end: 28px; }
  8%, 92% { --fade-start: 28px; --fade-end: 28px; }
  100% { --fade-start: 28px; --fade-end: 0px; }
}
.scroll-fade {
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
}
@supports (animation-timeline: scroll()) {
  .scroll-fade {
    animation: scroll-edge-fade linear both;
    animation-timeline: scroll(self);
  }
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html:has(.app-shell),
body:has(.app-shell) {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-optical-sizing: auto;
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Urdu / Arabic: no Latin tracking; room for Nastaliq strokes */
:lang(ur),
[lang="ur"],
[dir="rtl"] {
  letter-spacing: 0;
  line-height: 1.85;
}

input,
select,
button,
textarea,
[contenteditable="true"] {
  font-family: var(--font);
  letter-spacing: inherit;
}

/* Hierarchy from weight + size + leading as a set; tracking tightens as size grows */
h1, h2, h3, h4, .page-title, .auth-title, .app-topbar h1, .public-hero h1 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-title);
}

a {
  color: var(--accent-text);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

a:hover {
  color: var(--primary-600);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: rgba(var(--accent-rgb), 0.22);
}

/* —— Auth —— */
.auth-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(var(--accent-rgb), 0.14), transparent 60%),
    var(--canvas);
  padding: 1.5rem;
}

.auth-shell {
  width: 100%;
  max-width: 920px;
}

.auth-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
  animation: pms-materialize var(--dur-enter) var(--ease-spring) both;
}

.auth-pane {
  min-width: 0;
  padding: 2.5rem 2.25rem 2.25rem;
}

.auth-logo {
  display: block;
  width: 148px;
  height: auto;
  margin: 0 0 1.75rem;
}

.auth-aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
  min-width: 0;
  padding: 2rem 1.85rem;
  background:
    radial-gradient(ellipse at 80% 110%, rgba(var(--accent-rgb), 0.28), transparent 52%),
    radial-gradient(ellipse at 0% 0%, rgba(var(--accent-rgb), 0.12), transparent 46%),
    var(--surface-soft);
  color: var(--ink-strong);
}

.auth-aside h2 {
  margin: 0;
  max-width: 12ch;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

.auth-aside p {
  margin: 0;
  max-width: 28ch;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.auth-points {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}

.auth-points li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.auth-points li::before {
  content: '';
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--r-pill);
  background: var(--accent);
}

@media (max-width: 760px) {
  .auth-body {
    place-items: start center;
    padding: 1rem 1rem max(1.25rem, env(safe-area-inset-bottom));
  }
  .auth-card {
    grid-template-columns: 1fr;
  }
  .auth-aside {
    padding: 1.35rem 1.25rem 1.25rem;
  }
  .auth-aside h2 {
    max-width: none;
    font-size: 1.4rem;
  }
  .auth-pane {
    padding: 1.5rem 1.25rem 1.6rem;
  }
}

.auth-title {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

.auth-sub {
  margin: 0.35rem 0 1.5rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

.auth-alert {
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--r-field);
  background: var(--negative-soft);
  color: var(--negative);
  border: 1px solid rgba(229, 72, 77, 0.25);
  font-size: 0.8125rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field select {
  height: var(--control-h);
  padding: 0 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: var(--surface-soft);
  color: var(--ink-strong);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.field textarea {
  height: auto;
  min-height: 88px;
  padding: 0.7rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--r-field);
  background: var(--surface-soft);
  color: var(--ink-strong);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  resize: vertical;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-muted);
  font-weight: 400;
}

.field input[list]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: var(--focus-ring);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: var(--control-h);
  padding: 0 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-body);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

/* Feedback lives on the press, and it is instant */
.btn:active,
.tag:active,
.seg-item:active,
.icon-btn:active,
.nav-link:active,
.sidebar-icon-btn:active,
.notif-bell:active,
.topbar-avatar:active,
.shell-nav-toggle:active,
.sticky-tabs a:active,
.tab-nav a:active {
  transform: scale(0.97);
  transition-duration: var(--dur-press);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--solid);
  color: var(--ink-on-solid);
}

.btn-primary:hover {
  background: var(--solid-hover);
  color: var(--ink-on-solid);
}

.btn-accent {
  background: var(--accent);
  color: var(--accent-contrast);
}

.btn-accent:hover {
  background: var(--primary-600);
  color: var(--accent-contrast);
}

.btn-secondary {
  background: var(--surface);
  color: var(--ink-strong);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-soft);
}

.btn-secondary:hover {
  background: var(--surface-soft);
}

.btn-soft {
  background: var(--sand);
  color: var(--ink-strong);
}

.btn-soft:hover {
  background: var(--sand-strong);
}

.btn-ghost {
  background: var(--solid-soft);
  color: var(--ink-strong);
  border-color: transparent;
}

.btn-ghost:hover {
  color: var(--ink-strong);
  background: var(--sand-strong);
}

.btn-block {
  width: 100%;
}

/* —— App shell —— */
/* Chrome (sidebar + topbar) stays put; only .app-content scrolls.
   Productivity chrome: quiet idle states, soft active, small icons — page content keeps focus. */
.app-shell {
  /* 100vh on a phone is the height WITHOUT the browser bars: the bottom of the page
     (the chat box, for one) would sit under them. dvh is the height that is really visible. */
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  background: var(--canvas);
}

/* Skip link — keyboard a11y */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 200;
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  background: var(--solid);
  color: var(--ink-on-solid);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0.75rem;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.shell-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--scrim);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.shell-nav-backdrop[hidden] {
  display: none;
}

html.shell-nav-lock,
html.shell-nav-lock body {
  overflow: hidden;
}

.app-sidebar {
  background: var(--sidebar-bg);
  -webkit-backdrop-filter: var(--material-filter);
  backdrop-filter: var(--material-filter);
  color: var(--sidebar-ink);
  padding: 0.85rem 0.7rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border-right: 1px solid var(--border-hairline);
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.sidebar-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
  flex-shrink: 0;
  margin: 0 0.1rem;
  padding-bottom: 0.35rem;
}

.shell-nav-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0.15rem 0.1rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.shell-nav-close:hover {
  background: var(--solid-soft);
  color: var(--ink-strong);
}

.shell-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
}
.shell-nav-toggle:hover {
  background: var(--solid-soft);
  color: var(--ink-strong);
}

.app-sidebar .brand {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  padding: 0.2rem 0.4rem;
  margin: 0;
  opacity: 0.92;
  border-bottom: none;
}

.app-sidebar .brand:hover {
  opacity: 1;
}

.app-sidebar .brand-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 34px;
  object-fit: contain;
  object-position: left center;
}

.app-sidebar .brand-mark {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 3px;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.app-sidebar .brand-text {
  color: var(--ink-strong);
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.1rem 0.1rem 0.35rem;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.nav-group-label {
  margin: 0 0 0.2rem;
  padding: 0 0.7rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  line-height: 1.3;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.nav-link .nav-badge {
  margin-left: auto;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--accent, #F35B25);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
  flex-shrink: 0;
}

.nav-link .nav-ico {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  opacity: 0.7;
  transition: opacity var(--dur-fast) ease, color var(--dur-fast) ease;
}

.nav-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--ink-strong);
  background: var(--surface-hover);
}

.nav-link:hover .nav-ico {
  opacity: 0.85;
}

.nav-link.active {
  color: var(--sidebar-active-ink);
  background: var(--sidebar-active-bg);
  font-weight: 600;
}

.nav-link.active .nav-ico {
  opacity: 1;
  color: var(--accent);
}

.sidebar-foot {
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  padding: 0.65rem 0.35rem 0.35rem;
  border-top: 1px solid var(--border-hairline);
}

.sidebar-foot-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}

.sidebar-impersonate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.55rem 0.55rem 0.6rem;
  border-radius: var(--r-inner, 10px);
  background: var(--sand);
  border: 1px solid var(--border-hairline);
}
.sidebar-impersonate-kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
}
.sidebar-impersonate-name {
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--ink-strong);
  word-break: break-word;
}
.sidebar-impersonate .badge {
  margin: 0.1rem 0 0.15rem;
  font-size: 0.6875rem;
}
.sidebar-impersonate-meta {
  font-size: 0.6875rem;
  color: var(--ink-muted);
  line-height: 1.3;
  margin-bottom: 0.25rem;
}
.sidebar-impersonate-form {
  width: 100%;
  margin: 0.15rem 0 0;
}
.sidebar-impersonate-form .btn {
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem;
}

.sidebar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  color: var(--ink-muted);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.sidebar-icon-btn .nav-ico {
  opacity: 0.55;
}

.sidebar-icon-btn:hover {
  color: var(--ink-strong);
  background: var(--solid-soft);
}

.sidebar-icon-btn:hover .nav-ico {
  opacity: 1;
}

.sidebar-icon-btn.is-muted:hover {
  color: var(--negative);
  background: var(--negative-soft);
}

/* Legacy foot link classes (keep safe if referenced elsewhere) */
.sidebar-link,
.sidebar-signout {
  display: none;
}

.app-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* Translucent bar floating over the scrolling content (not an opaque strip) */
.app-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  height: var(--topbar-h);
  padding: 0 1.5rem;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: var(--material-filter);
  backdrop-filter: var(--material-filter);
  border-bottom: 1px solid var(--border-hairline);
}

.app-topbar-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  line-height: 1.2;
}
.app-topbar-area {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
}
.app-topbar-title strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Global search replaces page title in topbar */
.app-topbar-search {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 28rem;
}
.topbar-search-field {
  width: 100%;
  margin: 0;
}
.topbar-search-field > span:last-of-type {
  background: transparent;
}
.topbar-search-field input[type="search"] {
  min-height: 2.25rem;
  padding-block: 0.35rem;
  background: var(--solid-soft);
}
.topbar-search-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 80;
  max-height: min(70vh, 22rem);
  overflow: auto;
  padding: 0.4rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-inner);
  box-shadow: var(--shadow-raised);
  transform-origin: top center;
  animation: pms-pop-in var(--dur-enter) var(--ease-spring) both;
}
.topbar-search-group + .topbar-search-group {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border-hairline);
}
.topbar-search-label {
  margin: 0.15rem 0.45rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
}
.topbar-search-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--r-inner, 8px);
  color: inherit;
  text-decoration: none;
}
.topbar-search-item:hover,
.topbar-search-item.is-active {
  background: var(--surface-hover);
}
.topbar-search-item-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-strong);
}
.topbar-search-item-sub {
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.topbar-search-empty {
  margin: 0;
  padding: 0.75rem 0.55rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-align: center;
}

.app-topbar-spacer {
  flex: 1;
  min-width: 0;
}

.app-topbar h1 {
  display: none;
}

.app-topbar .meta {
  color: var(--ink-muted);
  font-size: 0.75rem;
}

.impersonate-bar {
  display: none; /* moved to sidebar (.sidebar-impersonate) */
}
.impersonate-bar p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.impersonate-bar strong {
  color: var(--ink-strong);
}
.impersonate-bar .badge {
  margin-inline: 0.25rem;
}
.impersonate-bar form {
  margin: 0;
}

.app-content {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  /* Content scrolls underneath the translucent topbar */
  /* Sticky offsets are measured from this padding edge, so sticky rows use
     top: calc(0.5rem - var(--content-pad-top)) to dock 0.5rem below the topbar. */
  --content-pad-top: 1.25rem;
  padding: calc(var(--topbar-h) + var(--content-pad-top)) 1.5rem 2rem;
  scroll-padding-top: calc(var(--topbar-h) + 3.5rem);
}
.app-content > * {
  min-width: 0;
}
.shift-cue {
  position: fixed;
  z-index: 40;
  top: 80%;
  left: calc(244px + (100vw - 244px) / 2);
  width: min(34rem, calc(100vw - 244px - 3rem));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: var(--r-card);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-raised);
}
html.nav-collapsed .shift-cue {
  left: calc(68px + (100vw - 68px) / 2);
  width: min(34rem, calc(100vw - 68px - 3rem));
}
.shift-cue[hidden] { display: none; }
.shift-cue-text {
  margin: 0;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--accent-contrast);
}
.shift-cue-go {
  flex: 0 0 auto;
  background: var(--surface);
  color: var(--ink-strong);
}
.shift-cue-go:hover { background: var(--surface); color: var(--ink-strong); }
@media (max-width: 800px) {
  .shift-cue {
    left: 50%;
    width: min(34rem, calc(100vw - 2rem));
  }
}

/* Inbox chat: fill remaining viewport — no page scroll to reach the chat box */
.app-content:has(.inbox-chat-mode) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0.75rem;
}
.app-content:has(.inbox-chat-mode) > .inbox-chat-mode {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Tasks kanban: board fills leftover height; columns scroll inside */
.app-content:has(> .kanban-board) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0.75rem;
}
.app-content:has(> .kanban-board) > :not(.kanban-board) {
  flex-shrink: 0;
}
.app-content:has(> .kanban-board) > .kanban-board {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0;
}

/* —— Admin pages —— */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.page-head > * {
  min-width: 0;
}
.page-title {
  margin: 0;
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  color: var(--ink-strong);
}
.page-sub {
  margin: 0.35rem 0 0;
  color: var(--ink-muted);
  font-size: 0.875rem;
  max-width: 42rem;
}
.sticky-tabs {
  position: sticky;
  top: calc(0.5rem - var(--content-pad-top));
  z-index: 5;
  display: flex;
  gap: 0.15rem;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 1.1rem;
  padding: 0.25rem;
  border-radius: var(--r-pill);
  background: var(--material-thick);
  -webkit-backdrop-filter: var(--material-filter);
  backdrop-filter: var(--material-filter);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-soft);
}
.sticky-tabs::-webkit-scrollbar {
  display: none;
}
.sticky-tabs a {
  flex-shrink: 0;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.sticky-tabs a:hover {
  background: var(--surface-hover);
  color: var(--ink-strong);
}
.sticky-tabs a.active {
  background: var(--solid);
  color: var(--ink-on-solid);
}
.panel {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  min-width: 0;
}

.panel h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--ink-strong);
}

.panel p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-transform: capitalize;
}

.badge.ok {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.badge.off {
  background: var(--surface-soft);
  color: var(--ink-muted);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--ink-strong);
  font-size: 0.8125rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.tag.is-active {
  background: var(--accent);
  color: var(--ink-on-solid);
}

.seg {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
}

.seg-item {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.seg-item.is-active {
  background: var(--surface);
  color: var(--ink-strong);
  box-shadow: var(--shadow-soft), 0 0 0 0.5px var(--border-strong);
}

.public-hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--primary-rgb), 0.18), transparent 55%),
    var(--canvas);
}

.public-hero h1 {
  margin: 0.4rem 0;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--ink-strong);
}

.public-hero p {
  color: var(--ink-soft);
  max-width: 28rem;
  margin: 0 auto 1.5rem;
}

/* —— Admin pages —— */
.inline-form {
  margin-bottom: 1rem;
}
.inline-form h3,
.inline-form h4 {
  margin: 0 0 1rem;
  color: var(--ink-strong);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.9rem 1rem;
}
.form-grid select,
.form-grid input[type="datetime-local"] {
  height: var(--control-h);
  padding: 0 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  color: var(--ink-strong);
  font-family: var(--font);
  font-size: 0.875rem;
}
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.table-wrap {
  position: relative;
  overflow-x: auto;
  max-width: 100%;
}
.panel.table-wrap {
  padding: 0.35rem 0.5rem;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.data-table th,
.data-table td {
  text-align: start;
  padding: 0.8rem 0.75rem;
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: middle;
}
.data-table th {
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 0.75rem;
  white-space: nowrap;
}
.data-table tbody tr {
  transition: background var(--dur-fast) ease;
}
.data-table tbody tr:hover {
  background: var(--surface-hover);
}
.data-table tbody tr:last-child td {
  border-bottom: 0;
}
.data-table .empty {
  text-align: center;
  color: var(--ink-muted);
  padding: 2rem;
}
.row-actions {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
}
.icon-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--font);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.pms-ico {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: -0.15em;
}
.icon-btn:hover {
  color: var(--ink-strong);
  background: var(--solid-soft);
}
.icon-btn.danger:hover {
  color: var(--negative);
  background: var(--negative-soft);
}
.muted {
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 400;
}
.section-label {
  margin: 1.5rem 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-strong);
}
.perm-modules {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 52vh;
  overflow: auto;
  padding-right: 0.25rem;
}
.perm-module {
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 0.65rem 0.9rem;
}
.perm-module[open] {
  background: var(--surface-soft);
}
.perm-module summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-strong);
  font-size: 0.8125rem;
}
.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.perm-item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.75rem;
  color: var(--ink);
}
.perm-item strong {
  display: block;
  color: var(--ink-strong);
}
.perm-item small {
  display: block;
  color: var(--ink-muted);
  font-weight: 400;
}

.tab-nav {
  display: inline-flex;
  gap: 0.2rem;
  margin-bottom: 1rem;
  padding: 0.2rem;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  border-bottom: none;
}
.tab-nav a {
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.tab-nav a:hover {
  color: var(--ink-strong);
}
.tab-nav a.active {
  background: var(--surface);
  color: var(--ink-strong);
  box-shadow: var(--shadow-soft), 0 0 0 0.5px var(--border-strong);
}

.btn-sm {
  padding: 0 0.8rem;
  font-size: 0.8125rem;
  min-height: var(--control-h-sm);
  height: var(--control-h-sm);
}

.perm-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.perm-toolbar .section-label {
  margin: 1.5rem 0 0.75rem;
  flex: 1;
}
.perm-module summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.perm-module-toggle {
  margin-left: auto;
}

.field.full {
  grid-column: 1 / -1;
}
[hidden],
.is-section-hidden {
  display: none !important;
}
.form-grid textarea {
  width: 100%;
  min-height: 72px;
  padding: 0.85rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--r-field);
  background: var(--surface-soft);
  color: var(--ink-strong);
  font-family: var(--font);
  font-size: 0.875rem;
  resize: vertical;
}

.panel-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.field-with-action {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.field-with-action input {
  flex: 1;
  min-width: 0;
}
.system-currency-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-hairline);
}
.field.inline {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.modal[hidden] {
  display: none;
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-xl);
  padding: 1.25rem;
  animation: pms-materialize var(--dur-enter) var(--ease-spring) both;
}

.profile-layout {
  max-width: 720px;
}
.profile-hero {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1.15rem 1.25rem;
}
.profile-hero-avatar {
  position: relative;
  flex-shrink: 0;
}
.profile-hero-avatar img,
.profile-hero-avatar .avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-hairline);
  display: block;
}
.profile-avatar-edit {
  position: absolute;
  left: 50%;
  bottom: -0.25rem;
  transform: translateX(-50%);
  background: var(--solid);
  color: var(--ink-on-solid);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.profile-hero-name {
  margin: 0;
  font-size: 1.15rem;
  color: var(--ink-strong);
}
.profile-hero-email {
  margin: 0.2rem 0 0.45rem;
}
.profile-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.profile-hero-stats {
  margin: 0;
}
.profile-section-title {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--ink-strong);
}
.profile-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1rem;
}
.profile-avatar-hint {
  margin: 0.35rem 0 0;
}
.profile-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.profile-section-head .profile-section-title {
  margin-bottom: 0.25rem;
}
.profile-payout-form {
  border: 1px dashed var(--border-hairline);
  border-radius: var(--r-field);
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--surface-soft);
}
.profile-payout-form.is-hidden[hidden] {
  display: none;
}
.profile-payout-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.profile-payout-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-hairline);
}
.profile-payout-item:last-child {
  border-bottom: 0;
}
.profile-payout-item .badge {
  margin-left: 0.35rem;
}
.profile-payout-item p {
  margin: 0.2rem 0 0;
}
.profile-empty {
  margin: 0 0 1rem;
}
.profile-session-card {
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-field);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  background: var(--surface-soft);
}
.profile-session-card p {
  margin: 0 0 0.35rem;
}
.profile-pass-meter {
  margin: 0 0 1.25rem;
}
.profile-pass-meter-bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  overflow: hidden;
  margin-bottom: 0.35rem;
}
.profile-pass-meter-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--ink-muted);
  transition: width 0.2s ease, background 0.2s ease;
}
.profile-pass-meter-bar span[data-level="1"],
.profile-pass-meter-bar span[data-level="2"] {
  background: var(--danger, #b42318);
}
.profile-pass-meter-bar span[data-level="3"] {
  background: var(--warning, #b54708);
}
.profile-pass-meter-bar span[data-level="4"],
.profile-pass-meter-bar span[data-level="5"] {
  background: var(--ok, #027a48);
}
.profile-top {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.profile-avatar img,
.avatar-placeholder {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-hairline);
}
.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
  color: var(--accent);
  font-size: 1.75rem;
  font-weight: 700;
}
@media (max-width: 600px) {
  .profile-hero {
    flex-direction: column;
    text-align: center;
  }
  .profile-hero-tags {
    justify-content: center;
  }
}

/* Finance hub — overview / statement */
.finance-stats-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.finance-stats-grid {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.finance-stats-grid.finance-stats-primary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.finance-stats-grid.finance-stats-secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.finance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.finance-stat {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  min-width: 0;
}
.finance-stat-compact {
  padding: 0.85rem 1rem;
}
.finance-stat-compact .finance-stat-value {
  font-size: 1.05rem;
}
.finance-stat-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.finance-stat-body {
  flex: 1;
  min-width: 0;
}
.finance-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finance-stat-label {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-weight: 600;
}
.finance-stat.is-accounts .finance-stat-icon { background: var(--accent-soft); color: var(--accent); }
.finance-stat.is-net-worth .finance-stat-icon,
.finance-stat.is-usable .finance-stat-icon { background: var(--info-soft); color: var(--info); }
.finance-stat.is-cash-in .finance-stat-icon { background: var(--positive-soft); color: var(--positive); }
.finance-stat.is-cash-out .finance-stat-icon { background: var(--negative-soft); color: var(--negative); }
.finance-stat.is-loans .finance-stat-icon { background: var(--accent-soft); color: var(--accent); }
.finance-stat.is-wallet .finance-stat-icon { background: var(--caution-soft); color: var(--caution); }
.finance-stat.is-bills .finance-stat-icon { background: var(--caution-soft); color: var(--caution); }
.finance-stat.is-invoices .finance-stat-icon { background: var(--info-soft); color: var(--info); }
.finance-stat.is-receivables .finance-stat-icon { background: var(--negative-soft); color: var(--negative); }
.finance-stat.is-salary .finance-stat-icon { background: var(--positive-soft); color: var(--positive); }
.finance-stat.is-marketing .finance-stat-icon { background: var(--accent-soft); color: var(--accent); }
.finance-stat.is-recurring .finance-stat-icon { background: var(--info-soft); color: var(--info); }

.amount-pos,
.stat-pos { color: var(--positive); }
.amount-neg,
.stat-neg { color: var(--negative); }
.amount-neutral { color: var(--ink-strong); }
.amount-transfer { color: var(--caution); }

.finance-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1rem;
  align-items: start;
}
.finance-overview-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.finance-overview-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.finance-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.finance-panel {
  padding: 1.15rem 1.25rem;
}
.finance-panel-flush {
  padding-bottom: 0;
}
.finance-panel-pad {
  padding: 0 1.25rem 1.15rem;
}
.finance-panel-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-strong);
  margin-bottom: 0.75rem;
}
.finance-panel .panel-head-row {
  margin-bottom: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-hairline);
}
.finance-panel .panel-head-row .finance-panel-title {
  margin-bottom: 0;
}
.finance-insight-banner {
  background: var(--accent-soft);
  border: 1px solid rgba(243, 91, 37, 0.18);
  border-radius: var(--r-inner);
  padding: 1rem 1.15rem;
}
.finance-insight-banner p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.finance-insight-banner strong {
  color: var(--ink-strong);
}
.finance-insight-row {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.finance-insight-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Finance view drawer (read-only detail) */
.finance-view-body {
  min-height: 120px;
}
.finance-view-toolbar {
  margin-bottom: 1rem;
}
.finance-view-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.finance-view-stats.finance-stats-primary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .finance-view-stats.finance-stats-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.finance-view-stat {
  background: var(--surface-soft);
  border-radius: var(--r-inner);
  padding: 0.65rem 0.85rem;
}
.finance-view-stat .muted {
  display: block;
  font-size: 0.75rem;
  margin-bottom: 0.2rem;
}
.finance-view-stat strong {
  font-size: 0.9375rem;
  color: var(--ink-strong);
}
.finance-view-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  margin: 0 0 1.25rem;
}
.finance-view-dl > div.full {
  grid-column: 1 / -1;
}
.finance-view-dl dt {
  font-size: 0.6875rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-muted);
  margin: 0 0 0.15rem;
}
.finance-view-dl dd {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-strong);
}
.finance-view-progress {
  height: 8px;
  background: var(--surface-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.finance-view-progress-bar {
  height: 100%;
  background: var(--solid);
  border-radius: var(--r-pill);
  transition: width 0.2s ease;
}
.finance-view-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.finance-view-section-head .finance-panel-title {
  margin-bottom: 0;
}
.finance-view-panel {
  background: var(--surface-soft);
  border-radius: var(--r-inner);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.finance-view-empty {
  font-size: 0.8125rem;
  margin: 0 0 1.25rem;
}
.finance-view-desc {
  font-size: 0.8125rem;
  margin: 0 0 1rem;
}
.finance-view-table-wrap {
  margin-bottom: 1.25rem;
}
.finance-view-table {
  font-size: 0.8125rem;
}
.finance-view-table th,
.finance-view-table td {
  padding: 0.45rem 0.65rem;
}

.invoice-rate-wrap {
  position: relative;
  display: block;
}
.invoice-rate-wrap input {
  width: 100%;
  padding-inline-end: 2.5rem;
  /* Keep room for the in-field refresh; native steppers collide with it */
  -moz-appearance: textfield;
  appearance: textfield;
}
.invoice-rate-wrap input::-webkit-outer-spin-button,
.invoice-rate-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.invoice-rate-refresh {
  position: absolute;
  top: 50%;
  inset-inline-end: 0.35rem;
  transform: translateY(-50%);
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s ease, background 0.12s ease;
}
.invoice-rate-refresh:hover:not(:disabled) {
  color: var(--ink-strong);
  background: var(--solid-soft);
}
.invoice-rate-refresh:disabled {
  opacity: 0.45;
  cursor: wait;
}
.invoice-rate-refresh.is-loading {
  animation: invoice-rate-spin 0.7s linear infinite;
}
@keyframes invoice-rate-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}
.invoice-lines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
}
.invoice-lines-wrap {
  margin-top: 0.25rem;
}
.invoice-line-header,
.invoice-line-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1.2fr) minmax(10rem, 2fr) 4.5rem 5.5rem 4.5rem 2rem;
  gap: 0.5rem;
  align-items: center;
}
.invoice-line-header {
  padding: 0 0.5rem 0.35rem;
  font-size: 0.6875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
}
.invoice-line-header .col-qty,
.invoice-line-header .col-rate,
.invoice-line-header .col-total {
  text-align: right;
}
.invoice-lines {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.invoice-line-row {
  padding: 0.45rem 0.5rem;
  background: var(--surface-soft);
  border-radius: var(--r-inner);
}
.invoice-line-row input {
  width: 100%;
  min-height: 2.25rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-pill);
  background: var(--surface);
  font: inherit;
  color: var(--ink-strong);
}
.invoice-line-row input:focus {
  outline: none;
  border-color: var(--ink-soft);
}
.invoice-line-ac-wrap {
  position: relative;
  min-width: 0;
}
.invoice-line-ac-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-inner);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 11rem;
  overflow-y: auto;
}
.invoice-line-ac-list[hidden] {
  display: none !important;
}
.invoice-line-ac-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: calc(var(--r-inner) - 2px);
  cursor: pointer;
}
.invoice-line-ac-list li:hover,
.invoice-line-ac-list li.is-active {
  background: var(--sand);
}
.invoice-line-ac-list li strong {
  font-size: 0.8125rem;
  grid-column: 1;
}
.invoice-line-ac-list li .muted {
  font-size: 0.75rem;
  grid-column: 1;
}
.invoice-line-ac-price {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 0.75rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.invoice-line-total {
  text-align: right;
  font-size: 0.875rem;
  padding-right: 0.15rem;
}
.invoice-lines-total {
  margin: 0.5rem 0 0;
  text-align: right;
}
@media (max-width: 720px) {
  .invoice-line-header {
    display: none;
  }
  .invoice-line-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
  .invoice-line-ac-wrap {
    grid-column: 1 / -1;
  }
  .invoice-line-desc {
    grid-column: 1 / -1;
  }
}

.finance-cashflow-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.65rem;
  height: 140px;
  padding-top: 0.35rem;
}
.finance-cashflow-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 0;
}
.finance-cashflow-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  width: 100%;
}
.finance-cashflow-bar {
  width: 12px;
  border-radius: var(--r-inner) var(--r-inner) 0 0;
  min-height: 4px;
}
.finance-cashflow-bar.is-income { background: var(--positive); }
.finance-cashflow-bar.is-expense { background: var(--negative); }
.finance-cashflow-label {
  margin-top: 0.4rem;
  font-size: 0.6875rem;
  color: var(--ink-muted);
  font-weight: 600;
}
.finance-bar-row {
  margin-bottom: 0.75rem;
}
.finance-bar-row:last-child {
  margin-bottom: 0;
}
.finance-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.finance-bar-label strong {
  color: var(--ink-strong);
  font-weight: 700;
  white-space: nowrap;
}
.finance-bar-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--sand);
  overflow: hidden;
}
.finance-bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
}
.finance-bar-fill.is-income { background: var(--positive); }
.finance-bar-fill.is-expense { background: var(--negative); }

.badge-pos {
  background: var(--positive-soft);
  color: var(--positive);
}
.badge-neg {
  background: var(--negative-soft);
  color: var(--negative);
}
.badge-neutral {
  background: var(--sand);
  color: var(--ink-soft);
}

.finance-list-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border-hairline);
}
.finance-list-row:first-of-type {
  border-top: 0;
}
.finance-list-row:hover {
  background: var(--surface-sunken);
}
.finance-list-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.finance-list-icon.tone-pos {
  background: var(--positive-soft);
  color: var(--positive);
}
.finance-list-icon.tone-neg {
  background: var(--negative-soft);
  color: var(--negative);
}
.finance-list-icon.tone-neutral {
  background: var(--caution-soft);
  color: var(--caution);
}
.finance-list-main {
  flex: 1;
  min-width: 0;
}
.finance-list-name {
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finance-list-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: var(--ink-muted);
}
.finance-list-date,
.finance-list-account {
  font-weight: 600;
}
.finance-list-amount {
  flex-shrink: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: right;
}

.finance-side-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.45rem 0;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--border-hairline);
}
.finance-side-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.finance-side-row span {
  color: var(--ink-soft);
  min-width: 0;
}
.finance-side-row strong {
  color: var(--ink-strong);
  white-space: nowrap;
}

.finance-quick-action {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.65rem 0;
  border: none;
  border-bottom: 1px solid var(--border-hairline);
  background: transparent;
  color: var(--ink-strong);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.finance-quick-action:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.finance-quick-action:hover {
  color: var(--accent);
}
.finance-quick-action-btn {
  margin-top: 0.15rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  padding: 0.85rem 1rem;
}
.stat-card .stat-label {
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}
.stat-card .stat-value {
  font-size: 1.05rem;
  font-weight: 700;
}
.finance-alert-row {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 0.9rem;
}
.finance-alert-row:last-child { border-bottom: 0; }
.bar-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
  font-size: 0.9rem;
}
.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.recurring-pending-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-hairline);
  align-items: start;
}
.recurring-pending-row:last-child { border-bottom: 0; }
.recurring-pending-row .recurring-release-form {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
}
.btn-sm {
  min-height: 32px;
  padding: 0.25rem 0.75rem;
  font-size: 0.82rem;
}

/* Finance tabs row + Quick Entry bolt */
.finance-tabs-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: sticky;
  top: calc(0.5rem - var(--content-pad-top));
  z-index: 5;
  margin-bottom: 1.1rem;
  min-width: 0;
}
.finance-scope-banner {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-inner);
  background: var(--sand);
  color: var(--ink);
  font-size: 0.85rem;
}
.finance-tabs-row .sticky-tabs {
  position: static;
  flex: 0 1 auto;
  min-width: 0;
  margin-bottom: 0;
  overflow-x: auto;
}
.settings-tabs-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: sticky;
  top: calc(0.5rem - var(--content-pad-top));
  z-index: 5;
  margin-bottom: 1.1rem;
  min-width: 0;
  flex-wrap: wrap;
}
.settings-tabs-row .sticky-tabs {
  position: static;
  flex: 0 1 auto;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0;
}
.settings-smtp-btn {
  flex: 0 0 auto;
  margin-inline-start: auto;
}
.finance-quick-entry-btn {
  flex-shrink: 0;
  width: var(--control-h);
  min-width: var(--control-h);
  height: var(--control-h);
  min-height: var(--control-h);
  padding: 0;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
}

/* Side drawer — shared shell (Quick Entry uses same classes) */
.pms-drawer-overlay,
.finance-qe-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  background: var(--scrim);
  animation: financeQeFadeIn var(--dur-enter) ease both;
}
.pms-drawer-overlay[hidden],
.finance-qe-overlay[hidden] {
  display: none !important;
}
.pms-drawer-overlay.closing,
.finance-qe-overlay.closing {
  animation: financeQeFadeOut var(--dur-exit) ease forwards;
  pointer-events: none;
}
.pms-drawer,
.finance-qe-drawer {
  width: min(560px, calc(100% - 1rem));
  max-width: calc(100% - 1rem);
  height: calc(100% - 1rem);
  margin: 0.5rem;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: pan-y;
  animation: financeQeSlideIn var(--dur-enter) var(--ease-spring) both;
}
.pms-drawer.closing,
.finance-qe-drawer.closing {
  animation: financeQeSlideOut var(--dur-exit) var(--ease-in) forwards;
}
.pms-drawer > form,
.finance-qe-drawer > form {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
@keyframes financeQeFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes financeQeFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes financeQeSlideIn {
  from { transform: translateX(calc(100% + 1rem)); }
  to { transform: translateX(0); }
}
/* Exit retraces the entry path, starting from wherever the sheet currently is */
@keyframes financeQeSlideOut {
  from { transform: translateX(var(--drawer-x, 0px)); }
  to { transform: translateX(calc(100% + 1rem)); }
}
/* Shared entrances: surfaces arrive as a material (scale + fade), anchored to their source */
@keyframes pms-materialize {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
}
@keyframes pms-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
}
@keyframes pms-pop-out {
  to { opacity: 0; transform: translateY(-4px) scale(0.97); }
}
@keyframes pms-sheet-up {
  from { transform: translateY(100%); }
}
@keyframes pms-sheet-down {
  to { transform: translateY(100%); }
}
.pms-drawer-wide { width: min(720px, calc(100% - 1rem)); }
.pms-drawer-resizable {
  position: relative;
  max-width: 96vw;
}
.pms-drawer-resizable.is-user-sized {
  max-width: 96vw;
}
.pms-drawer-resize {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  margin-left: -4px;
  cursor: ew-resize;
  z-index: 2;
  touch-action: none;
}
.pms-drawer-resize::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 2.5rem;
  border-radius: 2px;
  background: var(--border-hairline);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.pms-drawer-resizable:hover .pms-drawer-resize::after,
.pms-drawer-resizing .pms-drawer-resize::after {
  opacity: 1;
}
body.pms-drawer-resizing {
  cursor: ew-resize !important;
  user-select: none;
}
body.pms-drawer-resizing .pms-drawer-resize {
  background: rgba(0, 0, 0, 0.04);
}
.pms-drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}
.pms-drawer-header-actions .drawer-head-sep {
  width: 1px;
  height: 1.1rem;
  background: var(--line, rgba(0, 0, 0, 0.15));
  margin: 0 0.15rem;
  flex-shrink: 0;
}
.pms-drawer-header,
.finance-qe-header {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1rem 0.9rem 3.35rem;
  border-bottom: 1px solid var(--border-hairline);
}
.pms-drawer-close,
.finance-qe-close {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: var(--solid-soft);
  color: var(--ink-soft);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.pms-drawer-close:hover,
.finance-qe-close:hover {
  background: var(--sand);
  color: var(--ink-strong);
}
.pms-drawer-header-main,
.finance-qe-header-main {
  min-width: 0;
  flex: 1;
}
.pms-drawer-title,
.finance-qe-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  color: var(--ink-strong);
  line-height: 1.3;
}
.pms-drawer-subtitle,
.finance-qe-subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.pms-drawer-body,
.finance-qe-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}
.pms-drawer-footer,
.finance-qe-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-hairline);
  background: var(--surface);
}
.finance-qe-type-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.finance-qe-type-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-field);
  background: var(--sand);
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.finance-qe-type-btn.active {
  background: var(--solid);
  border-color: var(--solid);
  color: var(--ink-on-solid);
}
.finance-qe-mode-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.finance-qe-mode-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.finance-qe-mode-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.finance-qe-mode-btn.active {
  background: rgba(243, 91, 37, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.finance-qe-section-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-strong);
  margin-bottom: 0.75rem;
}
.finance-qe-form-grid {
  grid-template-columns: 1fr 1fr;
}
.finance-qe-span-2 {
  grid-column: 1 / -1;
}
.finance-qe-more-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  margin: 0.25rem 0 0.75rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-field);
  background: var(--sand);
  color: var(--ink-strong);
  font-weight: 700;
  font-size: 0.8125rem;
  cursor: pointer;
}
.finance-qe-more-toggle[aria-expanded="true"] .finance-qe-more-chevron {
  transform: rotate(180deg);
}
.finance-qe-more-chevron {
  transition: transform 0.2s ease;
}
.finance-qe-more {
  padding: 0.25rem 0 0.5rem;
}
.finance-qe-info {
  font-size: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--r-field);
  background: var(--sand);
  color: var(--ink);
  margin-top: 0.5rem;
}
.finance-qe-recurring-hint {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
}

@media (max-width: 1100px) {
  .finance-stats-grid.finance-stats-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-stats-grid.finance-stats-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .shell-nav-toggle {
    display: inline-flex;
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 88vw);
    height: 100%;
    z-index: 100;
    transform: translateX(-105%);
    transition: transform var(--dur-enter) var(--ease-spring);
    box-shadow: none;
    padding: 0.85rem 0.65rem 0.75rem;
    grid-column: 1;
    grid-row: 1;
  }

  .app-main {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    height: 100%;
  }

  .app-shell.is-nav-open .app-sidebar {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  .shell-nav-close {
    display: inline-flex;
  }

  .app-sidebar .brand {
    border-bottom: none;
    padding: 0.15rem 0.25rem 0.35rem;
    margin: 0;
  }

  .app-sidebar .brand-logo {
    height: 32px;
  }

  .sidebar-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-y: auto;
  }

  .nav-group {
    flex-direction: column;
  }

  .nav-group-label {
    display: block;
  }

  .app-topbar {
    padding-inline: 0.85rem;
  }

  .app-topbar-search {
    max-width: none;
  }

  .app-content {
    --content-pad-top: 1rem;
    padding: calc(var(--topbar-h) + var(--content-pad-top)) 1rem 1.5rem;
  }

  .finance-overview-grid,
  .finance-two-col {
    grid-template-columns: 1fr;
  }
  .finance-stats-grid.finance-stats-primary,
  .finance-stats-grid.finance-stats-secondary,
  .finance-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* Projects hub */
.project-name-link {
  color: var(--ink-strong);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.project-name-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.project-preview {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.project-preview-head {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.project-preview-badges {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.project-preview-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--surface-soft);
  border-radius: var(--r-card);
}
.project-preview-dl > div dt {
  font-size: 0.75rem;
  text-transform: none;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.project-preview-dl > div dd {
  margin: 0;
  color: var(--ink-strong);
  font-weight: 600;
  font-size: 0.85rem;
}
.project-preview-desc {
  padding: 0.6rem 0.75rem;
  border: 1px dashed var(--border-hairline);
  border-radius: var(--r-inner);
}
.project-preview-desc p {
  margin: 0.3rem 0 0;
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Project detail page */
.project-detail-head { align-items: flex-start; }
.project-detail-crumb {
  margin-bottom: 0.35rem;
}
.project-detail-crumb a {
  font-size: 0.75rem;
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 600;
}
.project-detail-crumb a:hover { color: var(--accent); }
.project-detail-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.project-detail-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.project-tab-icon {
  font-size: 0.85rem;
  color: currentColor;
}
.project-tab-count {
  background: var(--surface-soft);
  color: var(--ink-strong);
  border-radius: var(--r-pill);
  padding: 0.05rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 700;
  min-width: 1.1rem;
  text-align: center;
}
.tabs.sticky-tabs a.active .project-tab-count {
  background: var(--accent);
  color: var(--ink-on-solid);
}
.project-tab-empty {
  padding: 2.75rem 1rem;
  display: flex;
  justify-content: center;
}
.project-tab-empty-inner {
  max-width: 480px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border-hairline);
  border-radius: var(--r-card);
  padding: 2rem 1.5rem;
}
.project-tab-empty-icon {
  font-size: 2.4rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.project-tab-empty h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: var(--ink-strong);
}
.project-tab-empty p {
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Project tab common */
.project-tab-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin: 0 0 0.85rem 0;
  flex-wrap: wrap;
}
.project-tab-title {
  margin: 0 0 0.15rem 0;
  font-size: 1.125rem;
  letter-spacing: var(--tracking-title);
  color: var(--ink-strong);
}
.project-empty-block {
  padding: 1.4rem 1rem;
  text-align: center;
  border: 1px dashed var(--border-hairline);
  border-radius: var(--r-card);
  background: var(--surface-soft);
}
.project-empty-block h4 {
  margin: 0 0 0.3rem;
  color: var(--ink-strong);
}
.project-empty-block p { margin: 0; }

/* Milestones */
.milestone-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.milestone-card {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color 0.15s ease;
}
.milestone-card:hover {
  border-color: var(--border-strong);
}
.milestone-card.is-complete {
  background: var(--surface-soft);
}
.milestone-card.is-complete .milestone-card-title h4 {
  text-decoration: line-through;
  color: var(--ink-muted);
}
.milestone-card-head {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.milestone-card-title h4 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: var(--ink-strong);
}
.milestone-card-meta {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
}
.milestone-card-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.milestone-card-desc {
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.5;
}
.milestone-progress-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.milestone-progress-row .project-progress-bar {
  flex: 1;
  margin: 0;
}

/* Tasks tab */
.task-group {
  margin-bottom: 1.2rem;
}
.task-group-title {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  color: var(--ink-strong);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.task-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.task-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 0.6rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  padding: 0.6rem 0.75rem;
  transition: border-color 0.15s ease;
}
.task-row:hover {
  border-color: var(--border-strong);
}
.task-row.is-complete {
  background: var(--surface-soft);
}
.task-row.is-complete .task-title {
  text-decoration: line-through;
  color: var(--ink-muted);
}
.task-check {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.task-row.is-complete .task-check {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
.task-check:hover {
  border-color: var(--accent);
}
.task-check.is-static {
  cursor: default;
}
.task-check.is-static:hover {
  border-color: var(--border-strong);
}
.task-body {
  min-width: 0;
}
.task-title-row {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}
.task-title {
  color: var(--ink-strong);
  font-size: 0.92rem;
}
.task-meta {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
}
.task-details {
  margin: 0.3rem 0 0;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.5;
}
.task-assignees {
  margin-top: 0.4rem;
  display: flex;
  gap: -0.25rem;
}
.task-assignees .project-avatar {
  margin-left: -0.35rem;
}
.task-assignees .project-avatar:first-child {
  margin-left: 0;
}
.task-actions {
  display: flex;
  gap: 0.25rem;
}
.multi-select {
  min-height: 6rem;
}

/* Finance inline stats (compact variant) */
.finance-stats-grid.finance-stats-inline {
  margin-bottom: 0.85rem;
}
.data-table tr.is-income-row td strong {
  color: var(--good, #059669);
}
.data-table tr.is-expense-row td strong {
  color: var(--bad, #dc2626);
}
.toolbar-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Project files */
.project-files-dropzone {
  border: 2px dashed transparent;
  border-radius: var(--r-card);
  transition: border-color 0.15s, background 0.15s;
  padding: 0.5rem 0;
}
.project-files-dropzone.is-drag {
  border-color: var(--accent);
  background: var(--surface-soft);
}
.project-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.75rem;
}
.project-file-card {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}
.project-file-card:hover {
  border-color: var(--border-strong);
}
.project-file-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.6/1;
  background: var(--surface-soft);
  color: var(--ink-muted);
  font-weight: 700;
  font-size: 0.95rem;
  overflow: hidden;
}
.project-file-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-file-ext {
  letter-spacing: 0;
}
.project-file-info {
  padding: 0.5rem 0.65rem;
  border-top: 1px solid var(--border-hairline);
  min-width: 0;
}
.project-file-name {
  font-size: 0.82rem;
  color: var(--ink-strong);
  font-weight: 600;
  word-break: break-word;
}
.project-file-meta {
  display: flex;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}
.project-file-actions {
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem 0.5rem 0.5rem;
  justify-content: flex-end;
}

/* Client updates */
.project-updates-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.update-card {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.update-card.is-pinned {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(243, 91, 37, 0.05), transparent);
}
.update-card.is-draft {
  opacity: 0.75;
}
.update-card-head {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.update-card-title {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.update-card-title h4 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 0.95rem;
  unicode-bidi: plaintext;
}
.update-pin-badge {
  color: var(--accent);
  font-size: 1rem;
}
.update-card-meta {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.update-unread {
  color: var(--warn, #b45309);
}
.update-short {
  color: var(--ink-strong);
  font-size: 0.85rem;
  font-weight: 500;
  unicode-bidi: plaintext;
}
.update-body {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.55;
  unicode-bidi: plaintext;
}
.update-body p,
.update-preview-body p {
  margin: 0 0 0.55rem;
}
.update-body p:last-child,
.update-preview-body p:last-child {
  margin-bottom: 0;
}
.update-preview-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: var(--ink-strong);
  unicode-bidi: plaintext;
}
.update-preview-body {
  margin-top: 0.75rem;
}
.update-card.is-unread {
  box-shadow: inset 3px 0 0 var(--accent);
}
.update-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}
.update-att-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.update-att-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  background: var(--surface-soft);
  border-radius: var(--r-inner);
  font-size: 0.8rem;
}
.icon-btn.is-on {
  color: var(--accent);
  background: var(--accent-soft);
}
.field-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Activity timeline */
.activity-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.activity-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.6rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
}
.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--ink-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}
.activity-item.is-task .activity-icon { background: var(--info-soft); color: var(--info); }
.activity-item.is-milestone .activity-icon { background: var(--accent-soft); color: var(--accent); }
.activity-item.is-file .activity-icon { background: var(--positive-soft); color: var(--positive); }
.activity-item.is-finance .activity-icon { background: var(--caution-soft); color: var(--caution); }
.activity-item.is-update .activity-icon { background: var(--accent-soft); color: var(--accent); }
.activity-item.is-risk .activity-icon { background: var(--negative-soft); color: var(--negative); }
.activity-line {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.activity-action {
  color: var(--ink);
}
.activity-summary {
  margin-top: 0.2rem;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.5;
}
.activity-meta {
  margin-top: 0.25rem;
}

/* Risks */
.risk-stats {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.risk-stat {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  padding: 0.5rem 0.85rem;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.85rem;
}
.risk-stat.is-active {
  border-color: var(--caution);
  background: var(--caution-soft);
}
.risk-stat.is-mit {
  border-color: var(--positive);
  background: var(--positive-soft);
}
.risk-stat strong {
  color: var(--ink-strong);
  font-size: 1rem;
}
.risk-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.risk-card {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  padding: 0.75rem 1rem;
}
.risk-card.is-mitigated {
  opacity: 0.7;
}
.risk-card-head {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.risk-card-title {
  margin: 0 0 0.35rem;
  color: var(--ink-strong);
  font-size: 0.95rem;
}
.risk-card-meta {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.risk-card-actions {
  display: flex;
  gap: 0.25rem;
}
.risk-mitigation {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.5;
}

/* Tasks hub */
.task-hub-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.task-stat-card {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  padding: 0.6rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.task-stat-card span {
  color: var(--ink-muted);
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
}
.task-stat-card strong {
  color: var(--ink-strong);
  font-size: 1.25rem;
}
.task-stat-card.is-in-progress { border-color: rgba(59, 130, 246, 0.35); }
.task-stat-card.is-pending { border-color: rgba(245, 158, 11, 0.35); }
.task-stat-card.is-blocked { border-color: rgba(239, 68, 68, 0.35); }
.task-stat-card.is-completed { border-color: rgba(16, 185, 129, 0.35); }
.task-stat-card.is-upcoming {
  border-color: rgba(99, 102, 241, 0.35);
}
.task-stat-card.is-overdue {
  border-color: rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.05);
}
.task-stat-card.is-soon {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.05);
}

/* Kanban board */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .kanban-board { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 640px) {
  .kanban-board { grid-template-columns: 1fr; }
  .app-content:has(> .kanban-board) > .kanban-board {
    overflow-y: auto;
    grid-auto-rows: minmax(16rem, 40vh);
  }
}
.kanban-column {
  background: var(--surface-soft);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 0;
  overflow: hidden;
}
.kanban-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.15rem 0.35rem 0.4rem;
  flex-shrink: 0;
  gap: 0.35rem;
}
.kanban-column-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.kanban-archive-btn {
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  color: var(--ink-muted);
  opacity: 0.7;
}
.kanban-archive-btn:hover {
  opacity: 1;
  color: var(--ink-strong);
  background: var(--surface);
}
.kanban-archive-btn svg {
  display: block;
}
.kanban-column-head h4 {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-strong);
}
.kanban-count {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.kanban-column-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.15rem;
  border-radius: var(--r-inner);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.kanban-column-body.is-drop-target {
  background: rgba(243, 91, 37, 0.06);
  box-shadow: inset 0 0 0 2px rgba(243, 91, 37, 0.35);
}
.kanban-card {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kanban-card:hover {
  border-color: var(--border-strong);
}
.kanban-card.is-dragging {
  opacity: 0.5;
  transform: rotate(-1deg);
}
.kanban-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}
.kanban-card-title {
  color: var(--ink-strong);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.kanban-card-title:hover { color: var(--accent); }
.kanban-card-team {
  display: flex;
  gap: -0.25rem;
  margin-top: 0.15rem;
}
.kanban-card-team .project-avatar {
  margin-left: -0.35rem;
}
.kanban-card-team .project-avatar:first-child {
  margin-left: 0;
}
.kanban-empty {
  padding: 1rem 0.5rem;
  text-align: center;
  border: 1px dashed var(--border-hairline);
  border-radius: var(--r-inner);
}

/* Task detail */
.task-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.85rem;
}
@media (max-width: 900px) {
  .task-detail-grid { grid-template-columns: 1fr; }
}
.task-detail-main, .task-detail-side {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.task-detail-body {
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
  font-size: 0.9rem;
}
.task-comments {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.task-comment {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0.5rem;
  align-items: flex-start;
}
.task-comment-head {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 0.15rem;
}
.task-comment-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink);
}
.task-comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 1px solid var(--border-hairline);
  padding-top: 0.75rem;
}
.task-comment-form textarea,
.tv-panel .task-comment-form textarea {
  width: 100%;
  min-height: 2.5rem;
  height: 2.5rem;
  max-height: 9.5rem;
  padding: 0.5rem 0.75rem;
  line-height: 1.45;
  resize: none;
  overflow-y: hidden;
  box-sizing: border-box;
}
.task-comment-form button {
  align-self: flex-end;
}
.task-assignee-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.task-assignee-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.4rem;
  align-items: center;
}
.task-file-list {
  padding-left: 1.25rem;
  margin: 0;
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Task view drawer */
.tv-title-field input {
  font-size: 1.05rem;
  font-weight: 700;
}
[data-tv-cap].is-locked.tv-edit,
[data-tv-cap].is-locked > .tv-edit {
  display: none;
}
.tv-slot:not(.is-locked) > .tv-fact {
  display: none;
}
.tv-slot.full {
  grid-column: 1 / -1;
}
.tv-fact {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.tv-fact-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.tv-fact-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-strong);
  min-width: 0;
}
.tv-fact-people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
}
.tv-assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  min-width: 0;
}
.tv-details-read {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
}
.tv-fullpage {
  margin: -0.35rem 0 0.75rem;
}
.tv-fullpage a {
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.tv-fullpage a:hover { color: var(--accent); }
.tv-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 0.75rem;
  margin-bottom: 0.85rem;
}
@media (max-width: 640px) {
  .tv-meta { grid-template-columns: 1fr; }
}
.tv-tabs {
  display: flex;
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--border-hairline);
  margin: 0 -0.15rem 0.75rem;
}
.tv-tab {
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tv-tab:hover { color: var(--ink-strong); }
.tv-tab.is-active {
  color: var(--ink-strong);
  border-bottom-color: var(--solid);
}
.tv-tab-count:empty { display: none; }
.tv-tab-count {
  display: inline-flex;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  margin-left: 0.2rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--sand);
  font-size: 0.6875rem;
}
.tv-tab.is-active .tv-tab-count {
  background: var(--solid);
  color: var(--ink-on-solid);
}
.tv-panel textarea {
  width: 100%;
  min-height: 10rem;
  resize: vertical;
  border-radius: var(--r-field);
}
.tv-panel-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
#taskViewUpdate {
  position: relative;
  min-width: 7.25rem;
}
#taskViewUpdate [data-ico] {
  width: 1rem;
  height: 1rem;
}
#taskViewUpdate.is-done {
  animation: tv-updated 0.55s var(--ease-bounce);
}
#taskViewUpdate.is-done::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--accent);
  pointer-events: none;
  animation: tv-updated-ring 0.65s var(--ease-out) forwards;
}
@keyframes tv-updated {
  0% { transform: scale(0.94); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes tv-updated-ring {
  from { opacity: 0.75; transform: scale(0.92); }
  to { opacity: 0; transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  #taskViewUpdate.is-done,
  #taskViewUpdate.is-done::after {
    animation: none;
  }
}
.tv-file-toolbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.tv-file-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.tv-file-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-inner);
  background: var(--surface-soft);
}
.tv-file-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--r-chip, 10px);
  object-fit: cover;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-muted);
  flex-shrink: 0;
  overflow: hidden;
}
.tv-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tv-file-info { flex: 1; min-width: 0; }
.tv-file-name {
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-file-row .row-actions { flex-shrink: 0; }
.tv-comment-actions {
  display: flex;
  gap: 0.15rem;
  margin-left: auto;
}
.tv-loading {
  padding: 1.5rem 0.25rem;
}
.tv-overdue {
  color: var(--danger);
  font-weight: 700;
}
.kanban-card { cursor: pointer; }
.kanban-card-badge {
  display: inline-flex;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--ink-on-solid);
  font-size: 0.6875rem;
  font-weight: 700;
  margin-left: auto;
}
.kanban-card-badge.is-unread {
  background: var(--solid);
  color: var(--ink-on-solid);
}
.kanban-card.is-cancelled {
  opacity: 0.72;
}
.muted.small.is-overdue,
.is-overdue {
  color: var(--danger);
}
.page-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.kanban-card-title {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  color: inherit;
  width: 100%;
}
.tasks-hub-table .project-name-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.tasks-hub-table .project-name-link:hover,
.kanban-card-title:hover { color: var(--accent); }

/* Sales hub */
.sales-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  margin: 0 0 1rem;
}
.sales-kpi {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sales-kpi span {
  color: var(--ink-muted);
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
}
.sales-kpi strong {
  color: var(--ink-strong);
  font-size: 1.5rem;
  line-height: 1.1;
}
.sales-kpi small {
  color: var(--ink);
  font-size: 0.75rem;
}
.sales-kpi em {
  color: var(--accent);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 600;
}

.sales-bars {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  height: 140px;
  padding-top: 0.5rem;
}
.sales-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.sales-bar-fill {
  width: 60%;
  min-height: 0;
  background: linear-gradient(180deg, var(--accent), rgba(243, 91, 37, 0.5));
  border-radius: 6px 6px 0 0;
  transition: height 0.3s ease;
  align-self: center;
}
.sales-bar-fill.is-empty {
  width: 40%;
  height: 2px !important;
  min-height: 2px;
  background: var(--border-hairline);
  opacity: 0.55;
  border-radius: 1px;
}
.sales-bar-label {
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.sales-bar-value {
  font-size: 0.75rem;
  margin-top: 0.15rem;
}
.sales-tab-filter {
  display: flex;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  flex-wrap: wrap;
}
.sales-tab-filter .chip {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-hairline);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.8rem;
  transition: all 0.15s ease;
}
.sales-tab-filter .chip:hover {
  border-color: var(--accent);
}
.sales-tab-filter .chip.is-active {
  background: var(--ink-strong);
  color: var(--ink-inverse);
  border-color: var(--ink-strong);
}

/* Task title link inside project tab list */
.task-title-link {
  color: inherit;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color .12s;
  cursor: pointer;
  display: inline;
  text-align: left;
}
.task-title-link:hover,
.task-title-link:focus {
  border-bottom-color: var(--ink-strong);
}
.task-title-row .task-title {
  position: relative;
  z-index: 1;
}

/* Employee hub */
.emp-name-cell {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.emp-name-cell .project-avatar {
  flex-shrink: 0;
}
/* Teams: compact add row, then one card per leader (cards keep their own height) */
.team-add-panel {
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.team-add {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.team-add .field {
  flex: 1 1 13rem;
  max-width: 20rem;
}
.team-add .btn {
  flex: 0 0 auto;
}
/* Columns (not grid rows) so short and long teams pack without gaps */
.teams-grid {
  columns: 300px;
  column-gap: 1rem;
}
.team-card {
  break-inside: avoid;
  margin-bottom: 1rem;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.team-card-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border-hairline);
}
.team-card-lead {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.team-card-head h4 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
}
.team-avatar.is-leader {
  width: 2.25rem;
  height: 2.25rem;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.9375rem;
}
.team-avatar.is-removed,
.is-removed > .team-avatar {
  background: var(--surface-soft);
  color: var(--ink-muted);
}
.team-members {
  list-style: none;
  padding: 0.35rem;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.team-members li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.3rem 0.3rem 0.65rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  transition: background var(--dur-fast) ease;
}
.team-members li:hover {
  background: var(--surface-hover);
}
.team-member-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-members li.is-removed .team-member-name,
.team-card-head h4.is-removed {
  color: var(--ink-muted);
  font-weight: 500;
  font-style: italic;
}
/* Pointer devices: the remove control appears with the row; touch keeps it visible */
@media (hover: hover) {
  .team-members li .icon-btn {
    opacity: 0;
    transition: opacity var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .team-members li:hover .icon-btn,
  .team-members li .icon-btn:focus-visible {
    opacity: 1;
  }
}

.project-search-toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1rem 0;
}
.project-search-field {
  flex: 1;
  margin: 0;
}
.project-search-field input {
  width: 100%;
}
.project-timeline-cell .badge {
  font-size: 0.6875rem;
  padding: 0.15rem 0.5rem;
  margin-left: 0.35rem;
}
.badge.warn { background: var(--caution-soft); color: var(--caution); }
.badge.bad { background: var(--negative-soft); color: var(--negative); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.muted { background: var(--surface-soft); color: var(--ink-muted); }
.project-count-cell {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-strong);
}
.project-count-cell .dot { color: var(--ink-muted); }
.project-progress-bar {
  margin-top: 0.35rem;
  height: 4px;
  background: var(--surface-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.project-progress-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}
.small { font-size: 0.75rem; }
.project-assignee-stack {
  display: inline-flex;
}
.project-avatar {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px solid var(--surface);
  margin-left: -0.4rem;
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
}
.project-assignee-stack .project-avatar:first-child,
.project-avatar-stack .project-avatar:first-child,
.kanban-card-team .project-avatar:first-child,
.task-assignees .project-avatar:first-child { margin-left: 0; }
.project-avatar-stack {
  display: inline-flex;
  margin-top: 0.45rem;
}
.project-avatar-letter {
  line-height: 1;
}
.project-avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: var(--surface-soft);
}
.project-avatar.is-more {
  background: var(--surface-soft);
  color: var(--ink-strong);
  overflow: visible;
}
.project-avatar.lg {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.95rem;
  border: none;
  margin: 0;
}

/* Project view drawer detail cards */
.project-insights {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
}
.project-insight-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.project-insight-title h3 {
  font-size: 0.95rem;
  margin: 0;
  color: var(--ink-strong);
}
.project-insight-icon {
  color: var(--accent);
  font-size: 1.05rem;
}
.project-insight-badges {
  margin-inline-start: auto;
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.project-insight-list {
  list-style: disc;
  padding-left: 1.1rem;
  margin: 0;
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.5;
}
.project-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.project-card {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.project-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.project-card-head h4 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-strong);
}
.project-desc-card,
.project-finance-card { grid-column: 1 / -1; }
.project-health-card {
  align-items: center;
  text-align: center;
}
.project-health-ring {
  position: relative;
  width: 120px;
  height: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.project-health-ring svg { transform: rotate(0); }
.project-health-score {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.project-health-score strong { font-size: 1.4rem; color: var(--ink-strong); }
.project-health-score span { font-size: 0.75rem; color: var(--ink-muted); margin-top: 0.15rem; }
.project-health-ok { color: var(--positive); }
.project-health-warn { color: var(--caution); }
.project-health-bad { color: var(--negative); }
.project-health-label {
  margin: 0;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink-strong);
}
.project-kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1rem;
  margin: 0;
}
.project-kv > div dt {
  font-size: 0.75rem;
  text-transform: none;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.project-kv > div dd {
  margin: 0;
  color: var(--ink-strong);
  font-weight: 600;
  font-size: 0.85rem;
}
.project-person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.project-person-info { min-width: 0; }
.project-person-name {
  font-weight: 700;
  color: var(--ink-strong);
}
.project-person-meta {
  font-size: 0.75rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-budget-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--border-hairline);
  font-size: 0.85rem;
}
.project-finance-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.project-finance-item {
  background: var(--surface-soft);
  border-radius: var(--r-inner);
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.project-finance-item span {
  font-size: 0.75rem;
  color: var(--ink-muted);
  text-transform: none;
  font-weight: 600;
}
.project-finance-item strong {
  font-size: 0.95rem;
  color: var(--ink-strong);
}
.project-finance-item.is-income strong { color: var(--positive); }
.project-finance-item.is-expense strong { color: var(--negative); }
.project-finance-item.is-profit-pos strong { color: var(--positive); }
.project-finance-item.is-profit-neg strong { color: var(--negative); }

.project-future-modules {
  background: var(--surface-soft);
  border-radius: var(--r-card);
  padding: 1rem 1.15rem;
  border: 1px dashed var(--border-hairline);
}
.project-modules-title {
  margin: 0 0 0.15rem 0;
  font-size: 0.9rem;
  color: var(--ink-strong);
}
.project-module-grid {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6rem;
}
.project-module-card {
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.project-module-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.project-module-head h5 {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-strong);
}
.project-module-icon {
  color: var(--accent);
  font-size: 0.95rem;
}
.project-module-card p {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .project-detail-grid { grid-template-columns: 1fr; }
  .project-kv { grid-template-columns: 1fr; }
  .project-finance-row { grid-template-columns: 1fr; }
}

/* Admin / client dashboard */
a.sales-kpi {
  text-decoration: none;
  color: inherit;
}
a.sales-kpi:hover {
  border-color: var(--ink);
}
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.9fr);
  gap: 1rem;
  align-items: start;
}
.dash-overview-grid {
  margin-bottom: 0.75rem;
}
.dash-module-grid {
  margin-bottom: 1rem;
}
.sales-kpi.is-compact strong {
  font-size: 1.15rem;
}
.sales-kpi.is-compact strong small {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.dash-row .pos { color: var(--ok, #027a48); }
.dash-row .neg { color: var(--danger, #b42318); }
.dash-main,
.dash-side,
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.app-content > .panel + .panel,
.att-cal + .panel,
.att-cal + .project-empty-block {
  margin-top: 1rem;
}
.dash-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border-hairline);
  text-decoration: none;
  color: inherit;
}
.dash-row:last-child { border-bottom: 0; }
.dash-row:hover { background: var(--surface-soft); }
.dash-row-static:hover { background: transparent; }
.dash-row-name {
  font-weight: 600;
  color: var(--ink-strong);
}
.dash-row-meta { margin-top: 0.15rem; }
.dash-row.is-overdue .dash-row-name { color: var(--negative); }
.dash-row.is-unread .dash-row-name { font-weight: 700; }
.dash-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  flex-shrink: 0;
}
.client-renewal-alert {
  margin-bottom: 1rem;
}
.client-wallet-mini {
  padding-top: 0.35rem;
  padding-bottom: 0.85rem;
}

/* Employee dashboard */
.emp-ded-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.kpi-card.is-deducted {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.04);
}
.kpi-card.emp-ded-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}
.kpi-card.is-deducted:hover {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: var(--shadow-card);
}
.emp-ded-ask {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 1;
  color: var(--danger, #dc2626);
  background: rgba(239, 68, 68, 0.16);
  overflow: visible;
}
.emp-ded-ask::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--danger, #dc2626);
  pointer-events: none;
  animation: empDedPing 2s var(--ease-out) infinite;
}
.emp-ded-ask [data-ico] {
  animation: empDedNudge 2s var(--ease-spring) infinite;
}
@keyframes empDedPing {
  0% { transform: scale(0.85); opacity: 0.7; }
  70% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes empDedNudge {
  0%, 58%, 100% { transform: rotate(0); }
  66% { transform: rotate(-14deg); }
  74% { transform: rotate(12deg); }
  82% { transform: rotate(-8deg); }
  90% { transform: rotate(4deg); }
}
.emp-ded-ask:hover,
.kpi-card.is-open .emp-ded-ask {
  color: var(--danger, #dc2626);
  background: rgba(239, 68, 68, 0.22);
}
.emp-ded-ask:hover::after,
.emp-ded-ask:hover [data-ico],
.kpi-card.is-open .emp-ded-ask::after,
.kpi-card.is-open .emp-ded-ask [data-ico] {
  animation: none;
}
.emp-ded-pop {
  position: absolute;
  z-index: 8;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.9rem 0.95rem;
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-raised);
  text-align: center;
  animation: pmsDialogPopIn var(--dur-enter) var(--ease-spring) both;
}
.emp-ded-pop p {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.kpi-card.is-deducted.is-open { z-index: 6; }
@media (prefers-reduced-motion: reduce) {
  .emp-ded-pop,
  .emp-ded-ask::after,
  .emp-ded-ask [data-ico] { animation: none; }
  .emp-ded-ask::after { opacity: 0.55; }
}
.emp-att-card .emp-att-status { margin: 0 0 0.65rem; }
.emp-att-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8rem;
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--border-hairline);
}
.emp-att-row:last-of-type { border-bottom: 0; }
.emp-att-row span { color: var(--ink-muted); }
.emp-att-row strong { color: var(--ink-strong); font-weight: 600; }

.emp-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.emp-quick-link {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-hairline);
  background: var(--surface-soft);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
}
.emp-quick-link:hover {
  background: var(--solid-soft);
  color: var(--ink-strong);
  border-color: var(--ink);
}

.emp-sticky-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, 10.25rem);
  gap: 0.65rem;
  justify-content: start;
  padding: 0.85rem 1rem 1rem;
}
.emp-sticky-empty { grid-column: 1 / -1; margin: 0; }
.emp-sticky-note {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 10.25rem;
  height: 10.25rem;
  margin: 0;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  background: var(--sand);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: none;
}
.emp-sticky-note:hover {
  border-color: var(--border-strong);
}
.emp-sticky-note:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.emp-sticky-note:active {
  transform: scale(0.98);
}
.emp-sticky-note.is-yellow,
.emp-note-swatch.is-yellow { background: color-mix(in srgb, var(--caution) 34%, var(--surface)); }
.emp-sticky-note.is-pink,
.emp-note-swatch.is-pink { background: color-mix(in srgb, var(--negative) 22%, var(--surface)); }
.emp-sticky-note.is-blue,
.emp-note-swatch.is-blue { background: color-mix(in srgb, var(--info) 30%, var(--surface)); }
.emp-sticky-note.is-green,
.emp-note-swatch.is-green { background: color-mix(in srgb, var(--positive) 28%, var(--surface)); }
.emp-sticky-note.is-purple,
.emp-note-swatch.is-purple { background: color-mix(in srgb, var(--chart-4) 26%, var(--surface)); }
.emp-sticky-note.is-orange,
.emp-note-swatch.is-orange { background: color-mix(in srgb, var(--accent) 26%, var(--surface)); }
.emp-sticky-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1.3;
}
.emp-sticky-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  flex: 1;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}
.emp-sticky-when {
  margin-top: auto;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.emp-note-dialog { max-width: 32rem; }
.emp-note-dialog .pms-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.emp-note-dialog .pms-dialog-close [data-ico] {
  width: 16px;
  height: 16px;
}
.emp-note-read {
  margin: 0;
  max-height: min(52vh, 22rem);
  overflow: auto;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.emp-note-read.is-empty { color: var(--ink-muted); }
.emp-note-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.emp-note-form .field-error {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
}
.emp-note-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.emp-note-swatch {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.emp-note-swatch.is-on {
  border-color: var(--surface);
  box-shadow: 0 0 0 2px var(--ink-strong);
}
.emp-note-when { margin: 0.85rem 0 0; }
.emp-note-foot .emp-note-del { margin-right: auto; }
@media (prefers-reduced-motion: reduce) {
  .emp-sticky-note:active { transform: none; }
}

.client-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}
a.client-project-card {
  text-decoration: none;
  color: inherit;
}
a.client-project-card:hover {
  border-color: var(--ink);
}

/* Attendance calendar */
.att-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0.5rem 0 1rem;
}
.att-cal-dow {
  text-align: center;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-muted);
  padding: 0.25rem 0;
}
.att-cal-cell {
  min-height: 64px;
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-inner);
  padding: 0.35rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-decoration: none;
  color: inherit;
}
a.att-cal-cell:hover { border-color: var(--ink); }
.att-cal-cell.is-empty {
  background: transparent;
  border-color: transparent;
}
.att-cal-cell.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.att-cal-cell.is-selected { border-color: var(--ink); background: var(--sand); }
.att-cal-cell.is-present { border-color: rgba(16, 185, 129, 0.4); }
.att-cal-cell.is-absent { border-color: rgba(220, 38, 38, 0.35); }
.att-cal-cell.is-other { border-color: rgba(245, 158, 11, 0.4); }
.att-cal-num { font-weight: 600; font-size: 0.85rem; }
.att-cal-count {
  font-size: 0.75rem;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .att-cal-cell { min-height: 52px; }
}

a.task-stat-card {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.task-stat-card:hover {
  border-color: var(--ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* Store hosting linked-domains panel (order drawer) */
.sto-hdp {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border-hairline);
}
.sto-hdp-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.sto-hdp-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}
.sto-hdp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  background: var(--surface-soft);
  border-radius: var(--r-inner);
  padding: 0.55rem 0.75rem;
}
.sto-hdp-name {
  font-weight: 600;
  flex: 1 1 140px;
  font-size: 0.85rem;
}
.sto-hdp-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
}
.sto-hdp-actions {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}
.sto-hdp-add {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.sto-hdp-add input {
  flex: 1;
  min-width: 0;
  height: var(--control-h, 2.25rem);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-pill);
  padding: 0 0.85rem;
  font: inherit;
  background: var(--surface);
}
.sto-meta-block {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-hairline);
}
.sto-meta-block .full {
  grid-column: 1 / -1;
}

/* Password reveal toggle (login) */
.pw-wrap {
  position: relative;
  display: block;
}
.pw-wrap input {
  width: 100%;
  padding-right: 3rem !important;
}
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.pw-toggle:hover {
  color: var(--ink-strong);
  background: var(--surface-soft);
}
.pw-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.pw-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* —— Topbar search: quiet pill; the floating label just fades (no label-on-border over glass) —— */
.topbar-search-field input[type="search"] {
  border-color: transparent;
  border-radius: var(--r-pill);
  padding-inline: 1rem;
}
.topbar-search-field > span:last-of-type {
  left: 0.6rem;
  transition: opacity var(--dur-fast) ease;
}
.topbar-search-field:focus-within > span:last-of-type,
.topbar-search-field:has(input:not(:placeholder-shown)) > span:last-of-type {
  top: 50%;
  font-size: 0.8125rem;
  background: transparent;
  opacity: 0;
}

/* —— Layout discipline: nothing may widen the page —— */
.app-content :where(.panel, .form-grid, .finance-stat, .page-head, .filter-bar) {
  min-width: 0;
}
.app-content :where(img, video, canvas, svg) {
  max-width: 100%;
}
.sticky-tabs,
.tab-nav,
.seg {
  max-width: 100%;
}
.tab-nav,
.seg {
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar,
.seg::-webkit-scrollbar {
  display: none;
}
.is-filtered {
  display: none !important;
}

@media (max-width: 640px) {
  .page-head > .btn,
  .page-head > .page-actions {
    flex: 1 1 100%;
  }
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Phones: sheets use the full width, docked to the edge */
  .pms-drawer,
  .finance-qe-drawer,
  .pms-drawer-wide {
    width: 100% !important;
    max-width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
  }
  .pms-dialog-overlay {
    align-items: flex-end;
    padding: 0.75rem;
  }
  .pms-dialog-footer .btn {
    flex: 1;
  }
}

/* Touch devices: comfortable 44px targets */
@media (pointer: coarse) {
  :root {
    --control-h: 46px;
    --control-h-sm: 38px;
  }
  .icon-btn {
    width: 40px;
    height: 40px;
  }
}

/* —— Accessibility: gentler, non-vestibular equivalents —— */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep a short cross-fade so surfaces still arrive, without sliding or scaling */
  .pms-drawer-overlay,
  .finance-qe-overlay,
  .pms-dialog-overlay,
  .pms-select-dropdown,
  .pms-select-scrim {
    animation: financeQeFadeIn 180ms ease both !important;
  }
  .pms-drawer,
  .finance-qe-drawer,
  .pms-dialog {
    animation: none !important;
  }
  .btn:active,
  .icon-btn:active,
  .nav-link:active {
    transform: none;
  }
}

/* —— Icons: one stroke set drawn with CSS masks (inherits currentColor). Markup: <i data-ico=name></i> —— */
[data-ico] {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.icon-btn > [data-ico],
.btn > [data-ico] {
  width: 16px;
  height: 16px;
}
.finance-stat-icon > [data-ico] {
  width: 18px;
  height: 18px;
}
[data-ico="x"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
[data-ico="trash"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
[data-ico="pencil"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.17 6.81a1 1 0 0 0-3.99-3.98L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5zM15 5l4 4'/%3E%3C/svg%3E"); }
[data-ico="eye"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
[data-ico="power"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v10M18.4 6.6a9 9 0 1 1-12.77.04'/%3E%3C/svg%3E"); }
[data-ico="check"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
[data-ico="arrow-down"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M19 12l-7 7-7-7'/%3E%3C/svg%3E"); }
[data-ico="arrow-up"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); }
[data-ico="arrow-right"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"); }
[data-ico="arrow-up-right"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E"); }
[data-ico="download"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
[data-ico="archive"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='5' rx='1'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8M10 12h4'/%3E%3C/svg%3E"); }
[data-ico="refresh"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8M21 3v5h-5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16M8 16H3v5'/%3E%3C/svg%3E"); }
[data-ico="rotate-ccw"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8M3 3v5h5'/%3E%3C/svg%3E"); }
[data-ico="user"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
[data-ico="users"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E"); }
[data-ico="target"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
[data-ico="log-in"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E"); }
[data-ico="chevron-down"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
[data-ico="copy"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='14' height='14' rx='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E"); }
[data-ico="printer"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E"); }
[data-ico="clock"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
[data-ico="list"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h.01M3 18h.01M3 6h.01M8 12h13M8 18h13M8 6h13'/%3E%3C/svg%3E"); }
[data-ico="home"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8M3 10a2 2 0 0 1 .71-1.53l7-6a2 2 0 0 1 2.58 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
[data-ico="zap"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E"); }
[data-ico="swap"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 4 7l4 4M4 7h16M16 21l4-4-4-4M20 17H4'/%3E%3C/svg%3E"); }
[data-ico="more"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E"); }
[data-ico="mic"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19v3M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Crect x='9' y='2' width='6' height='13' rx='3'/%3E%3C/svg%3E"); }

/* A panel that directly holds a table is its scroll container — wide tables scroll inside it */
.panel:has(> .data-table) {
  position: relative;
  overflow-x: auto;
  max-width: 100%;
  padding: 0.35rem 0.5rem;
}
[data-ico="chevron-left"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
[data-ico="chevron-right"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
[data-ico="upload"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E"); }
[data-ico="pin"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); }
[data-ico="star"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.53 2.3a.53.53 0 0 1 .95 0l2.31 4.68a2.12 2.12 0 0 0 1.6 1.16l5.16.75a.53.53 0 0 1 .3.9l-3.74 3.64a2.12 2.12 0 0 0-.61 1.88l.88 5.14a.53.53 0 0 1-.77.56l-4.62-2.43a2.12 2.12 0 0 0-1.97 0L6.4 21.01a.53.53 0 0 1-.77-.56l.88-5.14a2.12 2.12 0 0 0-.61-1.88L2.16 9.8a.53.53 0 0 1 .3-.9l5.16-.76a2.12 2.12 0 0 0 1.6-1.16z'/%3E%3C/svg%3E"); }
[data-ico="paperclip"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.23 8.44 7.6 14.1a2 2 0 0 0 2.83 2.83l8.48-8.49a4 4 0 0 0-5.66-5.66L4.77 11.27a6 6 0 0 0 8.49 8.49l5.65-5.66'/%3E%3C/svg%3E"); }
[data-ico="flag"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7'/%3E%3C/svg%3E"); }
[data-ico="folder"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z'/%3E%3C/svg%3E"); }
[data-ico="alert"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
[data-ico="sparkles"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.14-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.14a.5.5 0 0 1 .96 0L14.06 8.5A2 2 0 0 0 15.5 9.94l6.14 1.58a.5.5 0 0 1 0 .96L15.5 14.06a2 2 0 0 0-1.44 1.44l-1.58 6.14a.5.5 0 0 1-.96 0zM20 3v4M22 5h-4'/%3E%3C/svg%3E"); }
[data-ico="grid"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
[data-ico="activity"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2'/%3E%3C/svg%3E"); }
[data-ico="megaphone"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3zM11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }
[data-ico="message"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
[data-ico="card"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }

/* —— Filter dates: the idle float label starts after the calendar icon —— */
.field.float:has(.pms-dp-value.is-placeholder) > span:last-of-type {
  left: 2.05rem;
}
.field.float:has(.pms-dp):focus-within > span:last-of-type {
  left: 0.55rem;
}

/* —— Theme toggle + dark mode fixes —— */
.theme-toggle-btn .theme-icon-light {
  display: none;
}
[data-theme="dark"] .theme-toggle-btn .theme-icon-light {
  display: inline;
}
[data-theme="dark"] .theme-toggle-btn .theme-icon-dark {
  display: none;
}
/* Ease the brightness change instead of an abrupt jump */
html.theme-fade,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}
/* Monochrome dark logo → light on dark surfaces */
[data-theme="dark"] .app-sidebar .brand-logo,
[data-theme="dark"] .auth-logo {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
[data-theme="dark"] .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
[data-theme="dark"] .field textarea {
  caret-color: var(--accent);
}

/* —— Sticky sub-menu: once it reaches the header it docks there on a solid band,
   so page content slides away behind it instead of showing around the capsule.
   The band is canvas-coloured, so it is invisible until something scrolls under it. —— */
.sticky-tabs,
.finance-tabs-row,
.settings-tabs-row {
  box-shadow: var(--shadow-soft), 0 0 0 100vmax var(--canvas);
  clip-path: inset(-0.55rem -100vmax -0.6rem -100vmax);
}
.finance-tabs-row,
.settings-tabs-row {
  background: var(--canvas);
  box-shadow: 0 0 0 100vmax var(--canvas);
}
.finance-tabs-row .sticky-tabs,
.settings-tabs-row .sticky-tabs {
  box-shadow: var(--shadow-soft);
  clip-path: none;
}

/* —— Profile: identity card beside the settings panel —— */
.sticky-tabs.is-static {
  position: static;
  box-shadow: var(--shadow-soft);
  clip-path: none;
}
.profile-shell {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  max-width: 1080px;
}
.profile-content {
  min-width: 0;
}
.profile-content .profile-layout {
  max-width: none;
}
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1.25rem 1.25rem;
}
.profile-card .profile-hero-avatar img,
.profile-card .profile-hero-avatar .avatar-placeholder {
  width: 112px;
  height: 112px;
  border: 0;
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--border-strong);
}
.profile-card .profile-hero-avatar .avatar-placeholder {
  display: flex;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 2.5rem;
  letter-spacing: var(--tracking-display);
}
.profile-card .profile-avatar-edit {
  left: auto;
  right: -2px;
  bottom: -2px;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 3px solid var(--surface);
  border-radius: 50%;
  font-size: 0.9375rem;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.profile-card .profile-avatar-edit:hover {
  background: var(--solid-hover);
}
.profile-card .profile-avatar-edit:active {
  transform: scale(0.94);
}
.profile-card .profile-hero-name {
  margin: 1rem 0 0;
  font-size: 1.25rem;
  letter-spacing: var(--tracking-title);
  overflow-wrap: anywhere;
}
.profile-card .profile-hero-email {
  margin: 0.15rem 0 0.7rem;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.profile-card .profile-hero-tags {
  justify-content: center;
  margin: 0;
}
.profile-facts {
  width: 100%;
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: start;
}
.profile-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
}
.profile-facts dt {
  color: var(--ink-muted);
  flex-shrink: 0;
}
.profile-facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink-strong);
  text-align: end;
  overflow-wrap: anywhere;
}
.profile-card .profile-avatar-hint {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
}
.profile-card #profileAvatarRemove {
  margin-top: 0.75rem;
}
.profile-main .profile-section-title {
  font-size: 1.0625rem;
  letter-spacing: var(--tracking-title);
}
.profile-main .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.profile-main .form-actions {
  justify-content: flex-end;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-hairline);
}
.profile-main .field input:disabled {
  color: var(--ink-muted);
  cursor: not-allowed;
}
/* Notification switches as one grouped list */
.profile-toggles {
  gap: 0;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-inner);
  overflow: hidden;
}
.profile-toggles .field.check {
  margin: 0;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 0.875rem;
  color: var(--ink);
}
.profile-toggles .field.check:last-child {
  border-bottom: 0;
}
@media (max-width: 900px) {
  .profile-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .profile-main .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
[data-ico="camera"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); }
.profile-main .section-label {
  margin: 1.6rem 0 0.75rem;
  font-size: 0.9375rem;
}

/* ══ Shell v2: breadcrumb header, grouped sidebar, user card ══ */
.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
}
.btn-primary:hover {
  background: var(--primary-600);
  color: var(--accent-contrast);
}
.btn > [data-ico] {
  margin-inline-start: -0.15rem;
}

/* Sidebar */
.nav-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 0.25rem;
  padding: 0.25rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  text-align: start;
  transition: color var(--dur-fast) ease;
}
.nav-group-label:hover {
  color: var(--ink-strong);
}
.nav-group-label [data-ico] {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-enter) var(--ease-spring);
}
.nav-group.is-collapsed .nav-group-label [data-ico] {
  transform: rotate(-90deg);
}
.nav-group.is-collapsed .nav-link {
  display: none;
}
.nav-link.active {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.nav-link.active .nav-ico {
  color: var(--accent);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-inner);
  background: var(--surface);
  min-width: 0;
}
.sidebar-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.875rem;
  font-weight: 700;
}
.sidebar-user-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-decoration: none;
}
.sidebar-user-meta strong {
  font-size: 0.8125rem;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user-meta span {
  font-size: 0.6875rem;
  color: var(--ink-muted);
}
.sidebar-foot {
  border-top: 0;
  padding: 0.35rem 0.1rem 0.1rem;
}

/* Topbar */
.topbar-crumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-muted);
  white-space: nowrap;
}
.topbar-crumb [data-ico] {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}
.topbar-crumb strong {
  font-weight: 600;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-topbar-search {
  flex: 0 1 22rem;
  margin-inline-start: auto;
  max-width: 22rem;
}
.app-topbar .app-topbar-actions {
  margin-left: 0.25rem;
}
/* Headers without search still keep account controls at the trailing edge. */
.app-topbar:not(:has(.app-topbar-search)) .app-topbar-actions {
  margin-inline-start: auto;
}
.topbar-search-field input[type="search"] {
  padding-inline: 2.3rem 2.4rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
.app-topbar-search .field.float.topbar-search-field.is-search > span:last-of-type {
  left: 1.95rem;
}
.topbar-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 16px;
  height: 16px;
  color: var(--ink-muted);
  pointer-events: none;
}
.topbar-kbd {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  min-width: 1.35rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-soft);
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-muted);
  text-align: center;
  pointer-events: none;
}
.app-topbar-search:focus-within .topbar-kbd {
  opacity: 0;
}
.app-topbar .topbar-avatar {
  width: auto;
  padding: 0;
  border-radius: var(--r-pill);
}
.topbar-avatar-circle {
  position: relative;
  overflow: hidden;
  width: 1.9rem;
  height: 1.9rem;
  background: var(--accent);
  color: var(--accent-contrast);
  border: 0;
  font-size: 0.75rem;
}
.topbar-avatar-circle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 800px) {
  .topbar-crumb {
    display: none;
  }
  .app-topbar-search {
    flex: 1 1 auto;
    max-width: none;
    margin-inline-start: 0;
  }
  .topbar-kbd {
    display: none;
  }
}

/* ══ Dashboard ══ */
.dash-title {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
}
.dash-head {
  align-items: center;
  margin-bottom: 1.4rem;
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 0.9rem;
  margin: 0 0 0.9rem;
}
/* Ten module counts: two even rows of five on wide screens, auto-fit below */
.kpi-grid.is-compact {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 1.1rem;
}
@media (max-width: 1100px) {
  .kpi-grid.is-compact {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  }
}
.kpi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding: 1.1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.kpi-card:hover {
  color: inherit;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}
.kpi-card:active {
  transform: scale(0.985);
  transition-duration: var(--dur-press);
}
.kpi-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-inline-end: 1.6rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.3;
}
.kpi-label [data-ico] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--ink-muted);
}
.kpi-icon {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 18px;
  height: 18px;
  color: var(--ink-muted);
}
.kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  line-height: 1.2;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kpi-value small {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.kpi-value.is-warn {
  color: var(--accent-text);
}
.kpi-card.is-pos .kpi-icon,
.kpi-value.is-pos { color: var(--positive); }
.kpi-card.is-neg .kpi-icon,
.kpi-value.is-neg { color: var(--negative); }
.kpi-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.kpi-sub [data-ico] {
  width: 13px;
  height: 13px;
}
.kpi-sub.is-up {
  color: var(--positive);
  font-weight: 600;
}
.kpi-sub.is-down {
  color: var(--negative);
  font-weight: 600;
}
.kpi-grid.is-compact .kpi-card {
  padding: 0.9rem 1rem;
  gap: 0.45rem;
}
.kpi-grid.is-compact .kpi-label {
  padding-inline-end: 0;
  font-size: 0.8125rem;
}
.kpi-grid.is-compact .kpi-value {
  font-size: 1.25rem;
}

.dash-charts {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: stretch;
}
.dash-chart-panel,
.dash-split-panel {
  padding: 1.25rem 1.35rem;
}
.dash-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.dash-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  height: 260px;
  margin-top: 0.5rem;
  overflow-x: clip;
}
.dash-chart-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 1.6rem;
  font-size: 0.6875rem;
  color: var(--ink-muted);
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.dash-chart-y span {
  line-height: 1;
  transform: translateY(-50%);
}
.dash-chart-y span:last-child {
  transform: translateY(50%);
}
.dash-chart-plot {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  /* 4 horizontal gridlines + baseline, drawn behind the bars */
  background-image: linear-gradient(to bottom, var(--border-hairline) 1px, transparent 1px);
  background-size: 100% calc((100% - 1.6rem) / 4);
  background-repeat: repeat-y;
}
.dash-chart-col {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 1.6rem;
  min-width: 0;
  border-radius: 8px;
  outline: none;
}
.dash-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 0 12%;
  border-bottom: 1px solid var(--border-strong);
}
.dash-bar {
  display: block;
  flex: 1 1 0;
  max-width: 22px;
  height: var(--h, 0%);
  min-height: 2px;
  border-radius: 5px 5px 0 0;
  transform-origin: bottom;
  animation: dash-bar-grow 0.7s var(--ease-spring) both;
  transition: filter var(--dur-fast) ease;
}
.dash-bar.is-in {
  background: var(--accent);
}
.dash-bar.is-out {
  background: var(--chart-ink);
}
@keyframes dash-bar-grow {
  from { transform: scaleY(0); }
}
.dash-chart-col:hover .dash-bar,
.dash-chart-col:focus-visible .dash-bar {
  filter: brightness(0.9);
}
.dash-chart-col:hover,
.dash-chart-col:focus-visible {
  background: var(--surface-hover);
}
.dash-chart-x {
  align-self: center;
  font-size: 0.6875rem;
  color: var(--ink-muted);
  text-align: center;
}
.dash-chart-tip {
  position: absolute;
  bottom: calc(100% - 3.2rem);
  left: 50%;
  z-index: 6;
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 11.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  box-shadow: var(--shadow-raised);
  font-size: 0.75rem;
  color: var(--ink-soft);
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
.dash-chart-tip strong {
  color: var(--ink-strong);
  font-size: 0.8125rem;
}
.dash-chart-tip span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.dash-chart-tip b {
  margin-inline-start: auto;
  padding-inline-start: 0.75rem;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.dash-chart-col:hover .dash-chart-tip,
.dash-chart-col:focus-visible .dash-chart-tip {
  display: flex;
}
/* Edge columns open inward so the tooltip never widens the page */
.dash-chart-col:nth-child(-n+2) .dash-chart-tip {
  left: 0;
  transform: none;
}
.dash-chart-col:nth-last-child(-n+2) .dash-chart-tip {
  left: auto;
  right: 0;
  transform: none;
}
.dash-legend {
  display: flex;
  gap: 1.1rem;
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.dash-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.dash-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--ink-muted);
}
.dash-dot.is-in { background: var(--accent); }
.dash-dot.is-out { background: var(--chart-ink); }
.is-c1 { background: var(--chart-1); }
.is-c2 { background: var(--chart-2); }
.is-c3 { background: var(--chart-3); }
.is-c4 { background: var(--chart-4); }
.is-c5 { background: var(--chart-5); }
.is-c6 { background: var(--chart-6); }
.dash-split-bar {
  display: flex;
  gap: 2px;
  height: 14px;
  margin: 1.1rem 0 0.9rem;
  border-radius: 999px;
  overflow: hidden;
}
.dash-split-bar span {
  display: block;
  flex: 0 0 var(--w, 0%);
  min-width: 3px;
}
.dash-split-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.dash-split-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
}
.dash-split-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.dash-split-list strong {
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-split-pct {
  flex: 0 0 2.6rem;
  text-align: end;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1000px) {
  .dash-charts {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .dash-chart {
    height: 220px;
  }
  .dash-chart-bars {
    padding: 0 6%;
    gap: 2px;
  }
  .dash-head .page-head-actions {
    width: 100%;
  }
  .dash-head .page-head-actions .btn {
    flex: 1;
  }
}
[data-ico="plus"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
[data-ico="search"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
[data-ico="arrow-down-right"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 7 10 10M17 7v10H7'/%3E%3C/svg%3E"); }

/* KPI cards written as <span>label</span> <strong>value</strong> <small>sub</small> get the same look */
.kpi-card > span:first-child:not(.kpi-label) {
  display: block;
  padding-inline-end: 1.6rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.3;
}
.kpi-card > strong:not(.kpi-value) {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  line-height: 1.2;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kpi-card > strong:not(.kpi-value) small {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.kpi-card > small:not(.kpi-sub) {
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.kpi-grid.is-compact .kpi-card > span:first-child:not(.kpi-label) {
  padding-inline-end: 0;
  font-size: 0.8125rem;
}
.kpi-grid.is-compact .kpi-card > strong:not(.kpi-value) {
  font-size: 1.25rem;
}
/* Fewer than ten counts (permission-gated strips): let them size themselves */
.kpi-grid.is-compact.emp-dash-ops {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
div.kpi-card:hover {
  border-color: var(--border-hairline);
  box-shadow: none;
}
.dash-inline-actions {
  margin-top: 0.75rem;
}
.dash-row-name .badge {
  margin-inline-end: 0.3rem;
}
.dash-side .dash-split-bar {
  margin-top: 0.9rem;
}
/* Exactly six headline cards: two even rows of three instead of 5 + 1 */
@media (min-width: 720px) {
  .kpi-grid:not(.is-compact):has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* —— Client update: read-only view drawer —— */
.update-title-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--ink-strong);
  text-align: start;
  cursor: pointer;
}
.update-title-link:hover {
  color: var(--accent-text);
}
.update-view {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0.25rem 0.25rem 1rem;
}
.update-view-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.update-view-title {
  margin: 0;
  font-size: 1.375rem;
  letter-spacing: var(--tracking-title);
  line-height: 1.3;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}
.update-view-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-inner);
  background: var(--surface-soft);
}
.update-view-facts dt {
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.update-view-facts dd {
  margin: 0.1rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}
.update-view-lead {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.update-view-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.update-view-heading {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-strong);
}
.update-view-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.6rem;
}
.update-view-image {
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-inner);
  overflow: hidden;
  background: var(--surface-soft);
}
.update-view-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.update-view-files {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.update-view-file {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-inner);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-strong);
  transition: background var(--dur-fast) ease;
}
.update-view-file:hover {
  background: var(--surface-hover);
  color: var(--ink-strong);
}
.update-view-file span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* User-written text (dir="auto") may be Urdu: never apply Latin tracking to it */
[dir="auto"] {
  letter-spacing: 0;
}
.update-view-title {
  line-height: 1.6;
}
/* Action cells stay real table cells so their row border lines up with the rest of the row */
.data-table td.row-actions {
  display: table-cell;
  text-align: end;
  white-space: nowrap;
}
.data-table td.row-actions > * + * {
  margin-inline-start: 0.2rem;
}

/* —— Sales: proposal templates —— */
.proposal-dates {
  display: contents;
}
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
}
.tpl-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  padding: 1.1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.tpl-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}
.tpl-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.tpl-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
.tpl-card-title {
  min-width: 0;
  line-height: 1.3;
}
.tpl-card-title h4 {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tpl-card-total {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.tpl-card-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-hairline);
}
.tpl-card-actions .btn {
  margin-inline-end: auto;
}

/* Text direction icons (rich-text toolbar) */
[data-ico="dir-ltr"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v11M10 9H7a3 3 0 0 1 0-6h8M14 3v11M18 14l4 4H2M22 18l-4 4'/%3E%3C/svg%3E"); }
[data-ico="dir-rtl"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v11M14 9h-3a3 3 0 0 1 0-6h8M18 3v11M22 18H2l4-4M6 22l-4-4'/%3E%3C/svg%3E"); }

/* —— Line items: Item · Qty · Rate · Total on one line; Details opens underneath on double-click —— */
.invoice-line-header,
.invoice-line-row {
  grid-template-columns: minmax(10rem, 1fr) 4.5rem 5.5rem 4.5rem 2rem;
}
.invoice-line-header .col-details {
  display: none;
}
.invoice-line-row .invoice-line-desc {
  display: none;
  grid-column: 1 / -1;
  grid-row: 2;
  border-radius: 10px;
  font-size: 0.875rem;
  color: var(--ink);
}
/* Shown when opened by hand, while typing in it, or whenever it already holds text */
.invoice-line-row.is-details-open .invoice-line-desc,
.invoice-line-row .invoice-line-desc:focus,
.invoice-line-row .invoice-line-desc:not(:placeholder-shown) {
  display: block;
  animation: pms-pop-in 0.28s var(--ease-spring) both;
  transform-origin: top center;
}
.invoice-line-row input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
/* Touch screens have no reliable double-click: keep the details box available */
@media (pointer: coarse) {
  .invoice-line-row .invoice-line-desc {
    display: block;
    animation: none;
  }
}
@media (max-width: 720px) {
  .invoice-line-row {
    grid-template-columns: 1fr 1fr;
  }
  .invoice-line-row .invoice-line-desc {
    grid-row: auto;
  }
}

[data-ico="link"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }


/* ---- Dashboard period switch (Daily / Monthly / 6 months / Yearly) ---- */
a.seg-item {
  text-decoration: none;
  white-space: nowrap;
}
.dash-period {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border-hairline);
}
.dash-period .seg-item.is-active {
  background: var(--ink-strong);
  color: var(--surface);
  box-shadow: none;
}
@media (max-width: 640px) {
  .dash-period {
    width: 100%;
  }
  .dash-period .seg-item {
    flex: 1 1 0;
    padding-inline: 0.4rem;
    text-align: center;
  }
}


/* ---- Drawer close button: a drawn, centred cross with room from the rounded corner ---- */
.pms-drawer-header,
.finance-qe-header {
  padding-left: 4.1rem;
}
.pms-drawer-close,
.finance-qe-close {
  left: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pms-drawer-close [data-ico],
.finance-qe-close [data-ico] {
  width: 0.95rem;
  height: 0.95rem;
}
.pms-drawer-close:active,
.finance-qe-close:active {
  transform: translateY(-50%) scale(0.92);
}
.task-file-pick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.45rem 0.75rem;
  border-radius: var(--r-control);
  background: var(--surface-soft);
  color: var(--ink-soft);
}
.task-file-pick [data-ico] {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}
.task-file-pick input[type="file"] {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink);
}

/* Date + time stays on one line in tables */
.data-table td.cell-when {
  white-space: nowrap;
}

/* Record-payment form inside the view drawers: room between the fields, the button and what follows */
.finance-view-pay-form {
  margin: 0.6rem 0 1.5rem;
}
.finance-view-pay-form > .btn {
  margin-top: 0.9rem;
}

/* Loan view: inline form to correct one entry of the history */
.loan-tx-edit-row > td {
  padding: 0.75rem 0.65rem 0.9rem;
  background: var(--surface-soft);
}
.loan-tx-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.finance-view-table .row-actions {
  white-space: nowrap;
  text-align: right;
}

/* Recurring: release popup (review, change, publish) */
.pms-dialog.rec-release-dialog {
  max-width: 520px;
}
.rec-release-dialog .pms-dialog-body {
  overflow-y: auto;
}
.rec-release-head {
  flex: 1;
  min-width: 0;
}
.rec-release-head p {
  margin: 0.3rem 0 0;
}
.rec-release-summary {
  margin: 0.4rem 0 1rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--r-inner);
  background: var(--surface-soft);
}
.rec-release-effect {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-strong);
}

/* ---- Status colours, the same everywhere ----
   green = done / paid / active · grey = sent, waiting on the other side · red = overdue /
   failed · amber = needs attention · blue = in progress / seen · violet = draft ·
   faint grey = cancelled / off */
.badge.ok,
.badge.badge-success {
  background: var(--positive-soft);
  color: var(--positive);
}
.badge.sent {
  background: rgba(38, 38, 45, 0.1);
  color: var(--ink-soft);
}
.badge.draft {
  background: rgba(124, 92, 252, 0.13);
  color: #6746E8;
}
.badge.badge-warning {
  background: var(--caution-soft);
  color: var(--caution);
}
.badge.badge-danger {
  background: var(--negative-soft);
  color: var(--negative);
}
.badge.badge-info,
.badge.badge-primary {
  background: var(--info-soft);
  color: var(--info);
}
.badge.badge-secondary,
.badge.neutral {
  background: var(--surface-soft);
  color: var(--ink-muted);
}
:root[data-theme="dark"] .badge.sent {
  background: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] .badge.draft {
  background: rgba(155, 132, 255, 0.2);
  color: #B3A3FF;
}


/* ---- Urdu / Arabic text (class added by shell-chrome.js wherever such text appears) ----
   No Latin tracking (it breaks the joined Nastaliq shapes) and tall lines (the strokes need
   the room, otherwise lines run into each other). */
.is-urdu {
  letter-spacing: 0 !important;
  word-spacing: 0;
  font-family: var(--font-urdu), var(--font);
  font-feature-settings: normal;
  font-synthesis: none; /* the Nastaliq file has one weight; a faked bold smears it */
}
.is-urdu:not(input):not(select) {
  line-height: 2;
}
textarea.is-urdu {
  line-height: 2.1;
  padding-top: 0.5rem;
}
h1.is-urdu,
h2.is-urdu,
h3.is-urdu,
h4.is-urdu,
.page-title.is-urdu {
  line-height: 1.8;
}
/* Single-line clipped text: keep the row height sensible but let the strokes show */
.is-urdu[dir="auto"] {
  text-align: start;
}

/* Text written with the toolbar: every paragraph takes its own direction, so an Urdu
   paragraph sits on the right and an English one on the left without pressing anything.
   The direction buttons still force one when needed. */
.pms-rt-editor p,
.pms-rt-editor h2,
.pms-rt-editor h3,
.pms-rt-editor li,
.proposal-rich p,
.proposal-rich h2,
.proposal-rich h3,
.proposal-rich li,
.rt-view p,
.rt-view h2,
.rt-view h3,
.rt-view li {
  unicode-bidi: plaintext;
  text-align: start;
}
.pms-rt-editor [dir="rtl"],
.proposal-rich [dir="rtl"],
.rt-view [dir="rtl"] {
  unicode-bidi: isolate;
  direction: rtl;
  text-align: right;
}
.pms-rt-editor [dir="ltr"],
.proposal-rich [dir="ltr"],
.rt-view [dir="ltr"] {
  unicode-bidi: isolate;
  direction: ltr;
  text-align: left;
}
.pms-rt-editor.is-urdu,
.pms-rt-editor.is-urdu h2,
.pms-rt-editor.is-urdu h3 {
  letter-spacing: 0;
  line-height: 2.1;
}

/* Rich text shown outside the editor (task details) */
.rt-view {
  font-size: 0.9375rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.rt-view h2 {
  margin: 1rem 0 0.4rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-strong);
}
.rt-view h3 {
  margin: 0.8rem 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-strong);
}
.rt-view p {
  margin: 0 0 0.6rem;
}
.rt-view ul,
.rt-view ol {
  margin: 0 0 0.6rem;
  padding-inline-start: 1.3rem;
}
.rt-view li::marker {
  color: var(--accent);
}
.rt-view > :first-child {
  margin-top: 0;
}
.rt-view > :last-child {
  margin-bottom: 0;
}
.rt-view a.pms-autolink,
.proposal-rich a.pms-autolink {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.pms-link-note {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 80;
  transform: translateX(-50%);
  max-width: min(28rem, calc(100% - 2rem));
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-card);
  background: var(--ink);
  color: var(--canvas);
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: var(--shadow-raised);
}

/* ---- Password fields: show / hide and generate buttons (added by shell-chrome.js) ---- */
.pw-wrap.pw-auto input {
  padding-right: 2.9rem !important;
}
.pw-wrap.pw-auto.has-generate input {
  padding-right: 5rem !important;
}
.pw-tools {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 0.1rem;
}
.pw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.pw-btn:hover {
  background: var(--solid-soft);
  color: var(--ink-strong);
}
.pw-btn:active {
  transform: scale(0.92);
}
.pw-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.pw-btn i {
  width: 1.05rem;
  height: 1.05rem;
}
[data-ico="eye-off"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.2A10.9 10.9 0 0 1 12 4c6.5 0 10 8 10 8a17.6 17.6 0 0 1-2.2 3.3M6.6 6.6A17.3 17.3 0 0 0 2 12s3.5 8 10 8a10.6 10.6 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2M2 2l20 20'/%3E%3C/svg%3E"); }
[data-ico="key"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m10.7 12.3 9.3-9.3M17 6l3 3M14 9l2 2'/%3E%3C/svg%3E"); }


/* ---- System emails: admin list, template editor, user preferences ---- */
.email-master {
  flex-shrink: 0;
  margin: 0;
}
.email-event-list {
  display: grid;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-inner);
  overflow: hidden;
}
.email-event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
}
.email-event-row + .email-event-row {
  border-top: 1px solid var(--border-hairline);
}
.email-event-main {
  min-width: 0;
}
.email-event-main .badge {
  margin-inline-start: 0.4rem;
}
.email-event-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.email-event-actions .field.check {
  margin: 0;
}
.email-log-panel {
  margin-top: 1rem;
}
.email-vars {
  margin-top: 1rem;
}
.email-var-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.4rem 0 0.5rem;
}
.email-var {
  border: none;
  border-radius: 8px;
  padding: 0.25rem 0.55rem;
  background: var(--surface-soft);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
}
.email-var:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.email-var.is-copied {
  background: var(--positive-soft);
  color: var(--positive);
}
.email-tpl-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.email-preview-frame {
  width: 100%;
  height: 520px;
  margin-top: 1rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-inner);
  background: #f4f4f6;
}
.profile-email-prefs .profile-email-desc {
  display: block;
  font-weight: 400;
}
.profile-email-prefs .field.check.is-disabled {
  opacity: 0.7;
}
@media (max-width: 640px) {
  .email-event-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- System emails by menu; loan repayment plan ---- */
.email-menu-seg {
  flex-wrap: wrap;
  margin: 0.4rem 0 1.1rem;
  border-radius: var(--r-inner);
}
.email-menu-group[hidden],
.email-recent[hidden],
.email-reports[hidden] {
  display: none;
}
.email-reports > .muted {
  margin: 0 0 0.75rem;
}
.email-recent > .muted {
  margin: 0 0 0.75rem;
}
.email-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}
.email-menu-head .section-label {
  margin: 0;
}
.email-menu-head .section-label .muted {
  font-weight: 500;
  margin-inline-start: 0.4rem;
}
.email-menu-tools {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}
.loan-plan {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-hairline);
}
.loan-plan[hidden],
.loan-plan-part[hidden] {
  display: none;
}
.loan-plan-part {
  grid-column: 1 / -1;
}
.loan-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 0.9rem 1rem;
}
.loan-plan-grid .full {
  grid-column: 1 / -1;
  margin: 0;
}

/* ---- Sign-in helpers: forgot / reset password pages ---- */
.auth-card.auth-card-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 440px;
  margin-inline: auto;
}
.auth-foot {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: 0.875rem;
}
.auth-foot a {
  color: var(--accent-text, var(--accent));
  font-weight: 600;
  text-decoration: none;
}
.auth-foot a:hover {
  text-decoration: underline;
}
.auth-pane .auth-sub + .auth-sub {
  margin-top: -0.4rem;
}
.auth-pane .auth-sub + .btn {
  margin-top: 0.6rem;
}
.auth-show {
  margin: -0.2rem 0 0.2rem;
}

/* ---- Global search: the typed word highlighted, a taller panel, result counts ---- */
.topbar-search-panel {
  max-height: min(74vh, 30rem);
}
.topbar-search-panel mark {
  padding: 0 0.1em;
  border-radius: 3px;
  background: var(--accent-soft);
  color: inherit;
  font-weight: 700;
}
.topbar-search-label span {
  margin-inline-start: 0.3rem;
  font-weight: 500;
  opacity: 0.7;
}

/* Roles picker on the user form: one role per line */
#userEmployeeRoleField .pms-multi-list {
  flex-direction: column;
  align-items: flex-start;
}

/* Links inside chat and support messages */
.wa-bubble-text a.wa-link {
  color: #1a73e8;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.wa-bubble-text a.wa-link:hover {
  color: #1558b0;
}
.wa-bubble-text a.wa-link:visited {
  color: #6b4fbb;
}
:root[data-theme="dark"] .wa-bubble-text a.wa-link {
  color: #8ab4f8;
}

/* ------------------------------------------------------------------
 * Monthly project reports (admin): one card per report, approve before it is emailed
 * ------------------------------------------------------------------ */
.report-month-pick { min-width: 190px; }
.report-kpis { margin-bottom: 18px; }
.report-kpis .kpi-value.is-warn { color: var(--warn, #b7791f); }
.report-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); align-items: start; }
.report-card { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.report-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.report-card-title { margin: 0 0 2px; font-size: 1rem; font-weight: 700; }
.report-card-head .badge { flex-shrink: 0; white-space: nowrap; }
.report-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.report-facts > div { min-width: 0; }
.report-facts > .full { grid-column: 1 / -1; }
.report-facts dt { font-size: 0.75rem; color: var(--text-muted, #8a8a96); margin: 0; }
.report-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.report-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, rgba(127, 127, 127, 0.08)); font-size: 0.875rem; overflow-wrap: anywhere; }
.report-details summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; }
.report-details p { margin: 8px 0 0; font-size: 0.875rem; color: var(--text-muted, #8a8a96); overflow-wrap: anywhere; }
.report-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border, rgba(127, 127, 127, 0.18)); margin-top: auto; }
.report-card-foot .row-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* ------------------------------------------------------------------
 * Inbox → Email (admin): write to chosen people or a whole group
 * ------------------------------------------------------------------ */
.inbox-mail { display: grid; gap: 16px; max-width: 980px; }
.inbox-mail-compose { display: flex; flex-direction: column; gap: 14px; }
.inbox-mail-head .project-tab-title { margin: 0 0 2px; }
.inbox-mail-head p { margin: 0; }
.inbox-mail-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: start; }
.inbox-mail-row[hidden] { display: none; }
.inbox-mail-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted, #8a8a96); padding-top: 8px; }
.inbox-mail-audience { display: flex; flex-wrap: wrap; gap: 6px; }
.inbox-mail-audience label { cursor: pointer; }
.inbox-mail-audience input { position: absolute; opacity: 0; pointer-events: none; }
.inbox-mail-audience span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border, rgba(127, 127, 127, 0.25)); font-size: 0.875rem; font-weight: 600; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.inbox-mail-audience em { font-style: normal; font-size: 0.75rem; opacity: 0.7; }
.inbox-mail-audience input:checked + span { background: var(--text, #26262d); color: var(--surface, #fff); border-color: transparent; }
.inbox-mail-audience input:focus-visible + span { outline: 2px solid var(--brand, #f35b25); outline-offset: 2px; }
.inbox-mail-picker { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.inbox-mail-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; }
.inbox-mail-chip { border: 0; cursor: pointer; padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 0.8125rem; font-weight: 600; background: var(--brand-soft, rgba(243, 91, 37, 0.12)); color: var(--brand, #f35b25); }
.inbox-mail-chip:hover { filter: brightness(0.95); }
.inbox-mail-people { max-height: 230px; overflow-y: auto; border: 1px solid var(--border, rgba(127, 127, 127, 0.2)); border-radius: 12px; padding: 6px; }
.inbox-mail-group[hidden], .inbox-mail-person[hidden] { display: none; }
.inbox-mail-group-title { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #8a8a96); padding: 8px 8px 4px; }
.inbox-mail-person { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 0.875rem; }
.inbox-mail-person:hover { background: var(--surface-2, rgba(127, 127, 127, 0.08)); }
.inbox-mail-person-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-mail-person-email { color: var(--text-muted, #8a8a96); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.inbox-mail-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.inbox-mail-attach-btn { cursor: pointer; }
.inbox-mail-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.inbox-mail-files:empty { display: none; }
.inbox-mail-files li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 11px; border-radius: 8px; background: var(--surface-2, rgba(127, 127, 127, 0.1)); font-size: 0.8125rem; max-width: 100%; }
.inbox-mail-files li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-mail-file-remove { border: 0; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 5px; border-radius: 6px; color: inherit; }
.inbox-mail-file-remove:hover { background: rgba(127, 127, 127, 0.2); }
.inbox-mail-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border, rgba(127, 127, 127, 0.18)); }
.inbox-mail-foot .btn { margin-left: auto; }
.inbox-mail-history .project-tab-title { margin-top: 0; }
@media (max-width: 640px) {
  .inbox-mail-row { grid-template-columns: 1fr; gap: 4px; }
  .inbox-mail-label { padding-top: 0; }
  .inbox-mail-person { grid-template-columns: auto minmax(0, 1fr); }
  .inbox-mail-person-email { grid-column: 2; text-align: left; }
}
.inbox-mail-picker input[type="search"] { width: 100%; padding: 9px 14px; border-radius: 10px; border: 1px solid transparent; background: var(--surface-2, rgba(127, 127, 127, 0.1)); color: inherit; font: inherit; font-size: 0.875rem; }
.inbox-mail-picker input[type="search"]:focus { outline: none; border-color: var(--brand, #f35b25); }

/* ------------------------------------------------------------------
 * Sidebar collapse (desktop): a button folds the sidebar to icons only
 * ------------------------------------------------------------------ */
.shell-nav-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-top: 0.15rem;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.shell-nav-collapse:hover { background: var(--solid-soft); color: var(--ink-strong); }
.shell-nav-collapse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shell-nav-collapse-arrow { transform-origin: 14.5px 12px; transition: transform var(--dur-enter) var(--ease-spring); }
@media (max-width: 800px) {
  .shell-nav-collapse { display: none; }
}
@media (min-width: 801px) {
  .app-shell { transition: grid-template-columns 0.22s ease; }
  html.nav-collapsed .app-shell { grid-template-columns: 68px minmax(0, 1fr); }
  html.nav-collapsed .shell-nav-collapse-arrow { transform: rotate(180deg); }
  html.nav-collapsed .app-sidebar { padding-left: 0.6rem; padding-right: 0.6rem; }
  html.nav-collapsed .sidebar-top { flex-direction: column; align-items: center; gap: 0.5rem; margin: 0; }
  /* Logo: only the mark at its left end */
  html.nav-collapsed .app-sidebar .brand { flex: none; width: 27px; padding: 0.2rem 0; overflow: hidden; }
  html.nav-collapsed .app-sidebar .brand-logo { max-width: none; height: 34px; }
  html.nav-collapsed .shell-nav-collapse { margin: 0; }
  /* Menu: icons only; group names become a thin divider and every group stays open */
  html.nav-collapsed .nav-group-label { height: 1px; margin: 0.45rem 0.6rem; padding: 0; font-size: 0; background: var(--border-hairline); pointer-events: none; overflow: hidden; }
  html.nav-collapsed .nav-group:first-child .nav-group-label { display: none; }
  html.nav-collapsed .nav-group-label [data-ico] { display: none; }
  html.nav-collapsed .nav-group.is-collapsed .nav-link { display: flex; }
  html.nav-collapsed .nav-link { position: relative; justify-content: center; gap: 0; padding: 0.6rem 0; }
  html.nav-collapsed .nav-link > span:not(.nav-badge) { display: none; }
  html.nav-collapsed .nav-link .nav-ico { width: 20px; height: 20px; }
  html.nav-collapsed .nav-link .nav-badge { position: absolute; top: 3px; right: 5px; margin: 0; min-width: 1rem; height: 1rem; line-height: 1rem; font-size: 0.625rem; padding: 0 0.2rem; }
  /* Foot: avatar and sign-out only */
  html.nav-collapsed .sidebar-user { flex-direction: column; gap: 0.4rem; padding: 0.45rem 0; border: 0; background: transparent; }
  html.nav-collapsed .sidebar-user-meta { display: none; }
  html.nav-collapsed .sidebar-impersonate { padding: 0.35rem; }
  html.nav-collapsed .sidebar-impersonate > :not(form) { display: none; }
  html.nav-collapsed .sidebar-impersonate .btn { font-size: 0; padding: 0.45rem 0; min-width: 0; }
  html.nav-collapsed .sidebar-impersonate .btn::before { content: "\21A9"; font-size: 1rem; line-height: 1; }
}

/* ------------------------------------------------------------------
 * File upload box: dashed drop area used for every plain file input
 * ------------------------------------------------------------------ */
.pms-dropzone-input { position: absolute !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.pms-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 78px;
  padding: 0.85rem 1rem;
  border: 1.5px dashed var(--border-strong, rgba(127, 127, 127, 0.4));
  border-radius: var(--r-inner, 12px);
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.pms-dropzone > [data-ico] { width: 20px; height: 20px; color: var(--accent); }
.pms-dropzone-text { max-width: 100%; overflow-wrap: anywhere; }
.pms-dropzone-text strong { color: var(--ink-strong); font-weight: 700; }
.pms-dropzone:hover,
.pms-dropzone.is-over,
.pms-dropzone-input:focus-visible + .pms-dropzone { border-color: var(--accent); background: var(--accent-soft); }
.pms-dropzone.has-files { border-style: solid; }
.pms-dropzone.is-disabled { opacity: 0.55; cursor: not-allowed; }
.pms-dropzone.is-disabled:hover { border-color: var(--border-strong, rgba(127, 127, 127, 0.4)); background: var(--surface-soft); }
.field:has(> .pms-dropzone) { position: relative; }
/* Narrow places (drawers, half-width fields): icon and text on one line */
.pms-drawer .pms-dropzone,
.inbox-mail-attach .pms-dropzone { flex-direction: row; gap: 0.6rem; min-height: 56px; padding: 0.7rem 0.9rem; text-align: start; }
.inbox-mail-attach > label { flex: 1 1 100%; position: relative; }

/* ------------------------------------------------------------------
 * Employee area polish: table panels with a heading, schedule, performance, wallet
 * ------------------------------------------------------------------ */
/* A panel that holds a table has tight padding: give its heading and text the table's inset */
.panel:has(> .data-table) > .project-tab-title { padding: 0.85rem 0.75rem 0.5rem; margin: 0; font-size: 1rem; }
.panel:has(> .data-table) > p { padding: 0 0.75rem 0.5rem; }
.app-content > .panel + .panel,
.app-content > .panel + .project-empty-block,
.app-content > .project-empty-block + .panel { margin-top: 1rem; }

.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem 1.5rem; margin: 0; }
.meta-grid > div { min-width: 0; }
.meta-grid dt { margin: 0 0 0.15rem; font-size: 0.75rem; color: var(--ink-muted); }
.meta-grid dd { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--ink-strong); overflow-wrap: anywhere; }

.sched-card { display: flex; flex-direction: column; gap: 1rem; }
.sched-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sched-card-head .badge { flex-shrink: 0; }
.sched-card .meta-grid { padding-top: 1rem; border-top: 1px solid var(--border-hairline); }
.data-table tr.is-today td { background: var(--accent-soft); }
.data-table tr.is-today td:first-child { border-radius: 10px 0 0 10px; }
.data-table tr.is-today td:last-child { border-radius: 0 10px 10px 0; }

.perf-rate { display: flex; flex-direction: column; gap: 0.9rem; }
.perf-rate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.perf-rate-label { display: block; font-size: 0.75rem; color: var(--ink-muted); }
.perf-rate-value { display: block; font-size: 2rem; line-height: 1.15; letter-spacing: var(--tracking-title); color: var(--ink-strong); }
.perf-rate-bar { height: 10px; border-radius: 999px; background: var(--solid-soft); overflow: hidden; }
.perf-rate-bar span { display: block; height: 100%; min-width: 0; border-radius: 999px; background: var(--accent); transition: width 0.4s ease; }
.perf-rate-bar.is-excellent span { background: #10b981; }
.perf-rate-bar.is-good span { background: #3b82f6; }
.perf-rate-bar.is-average span { background: #f59e0b; }
.perf-rate-bar.is-poor span { background: #ef4444; }
.perf-rate-actions { display: flex; gap: 0.5rem; }

.wallet-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.wallet-forms .panel { display: flex; flex-direction: column; gap: 0.9rem; }
.wallet-forms .project-tab-title { margin: 0; font-size: 1rem; }
.wallet-forms .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wallet-forms .form-grid .full { grid-column: 1 / -1; }
.wallet-forms .form-actions { justify-content: flex-end; }
.wallet-lists { display: grid; gap: 1rem; }
@media (max-width: 900px) {
  .wallet-forms { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .wallet-forms .form-grid { grid-template-columns: minmax(0, 1fr); }
}
.chat-img-missing { display: inline-flex; align-items: center; padding: 0.35rem 0.6rem; border-radius: 8px; border: 1px dashed var(--border-strong, rgba(127, 127, 127, 0.4)); font-size: 0.75rem; color: var(--ink-muted); }
.data-table td.cell-nowrap, .table td.cell-nowrap { white-space: nowrap; }
/* Long emails in people tables: one line, cut with … (full address on hover) */
.data-table td.cell-contact { max-width: 220px; }
.data-table td.cell-contact > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Extra icons */
[data-ico="send"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E"); }
[data-ico="file-text"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M10 9H8M16 13H8M16 17H8'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------
 * Phones: the header search is an icon; tapping it opens the field across the whole
 * header, and it folds back to the icon once the text is cleared
 * ------------------------------------------------------------------ */
@media (max-width: 800px) {
  .topbar-crumb { display: flex; flex: 1 1 auto; min-width: 0; }
  .topbar-crumb > span,
  .topbar-crumb > [data-ico] { display: none; }
  .topbar-crumb > strong { overflow: hidden; text-overflow: ellipsis; font-size: 0.9375rem; }
  .app-topbar-search {
    flex: 0 0 auto;
    width: 2.15rem;
    height: 2.15rem;
    max-width: none;
    margin-inline-start: auto;
    border-radius: 10px;
  }
  .app-topbar .app-topbar-actions { margin-left: 0; }
  .app-topbar-search:not(.is-open) .topbar-search-icon { left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; color: var(--ink-soft); }
  /* Closed: the (invisible) field lies over the icon, so a tap focuses it directly */
  .app-topbar-search:not(.is-open) .topbar-search-field { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
  .app-topbar-search:not(.is-open) .topbar-search-field input { height: 100%; padding: 0; cursor: pointer; }
  .app-topbar-search:not(.is-open) .topbar-search-panel { display: none; }
  .app-topbar-search.is-open {
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    top: 50%;
    width: auto;
    height: auto;
    transform: translateY(-50%);
    z-index: 6;
  }
  .app-topbar:has(.app-topbar-search.is-open) > :not(.app-topbar-search) { visibility: hidden; }
  .app-topbar-search.is-open .topbar-search-panel { left: 0; right: 0; width: auto; max-width: none; }
}
@media (max-width: 560px) {
  /* Too narrow for a readable title next to the header buttons: the page shows its own */
  .topbar-crumb { display: none; }
}
@media (max-width: 800px) {
  .app-topbar-search.is-open .topbar-search-field input[type="search"] { padding-inline: 2.4rem 1rem; }
}

/* ------------------------------------------------------------------
 * Phones: number cards two to a row, tables keep readable columns (they scroll sideways
 * inside their panel), comfortable touch targets
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .finance-stats-grid.finance-stats-primary,
  .finance-stats-grid.finance-stats-secondary,
  .finance-kpi-grid,
  .kpi-grid,
  .kpi-grid.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  /* An odd card at the end takes the whole row instead of leaving a hole */
  .finance-stats-grid > :last-child:nth-child(odd),
  .finance-kpi-grid > :last-child:nth-child(odd),
  .kpi-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .finance-stat { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.85rem 0.9rem; }
  .finance-stat-value { font-size: 1.0625rem; overflow-wrap: anywhere; }
  .finance-stat-icon { width: 2rem; height: 2rem; }
  .kpi-card { padding: 0.85rem 0.9rem; }
  .kpi-value { font-size: 1.25rem; overflow-wrap: anywhere; }

  .panel:has(> .data-table) > .data-table,
  .table-wrap > .data-table,
  .table-wrap > .table { min-width: 620px; }
  .data-table td:first-child strong,
  .data-table td:first-child a { overflow-wrap: normal; word-break: normal; }

  .icon-btn { min-width: 2.1rem; min-height: 2.1rem; }
  .page-head { gap: 0.75rem; }
  .report-list { grid-template-columns: minmax(0, 1fr); }
  .report-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inbox-mail-audience span { padding: 7px 11px; }
}
@media (max-width: 640px) {
  /* The first (name) column keeps a readable width instead of one word per line */
  .data-table td:first-child:not(:has(input[type="checkbox"])):not(.empty) { min-width: 9.5rem; }
}
@media (max-width: 640px) {
  .panel:has(> .data-table) > .data-table,
  .table-wrap > .data-table,
  .table-wrap > .table { min-width: 720px; }
}

/* ------------------------------------------------------------------
 * Maintenance mode: the page users see, the admin banner, the settings section
 * ------------------------------------------------------------------ */
.maint-shell { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.maint-card { width: 100%; max-width: 30rem; padding: 2.25rem 1.75rem 1.75rem; border-radius: var(--r-card, 20px); background: var(--surface); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-card); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.maint-logo { height: 34px; width: auto; margin-bottom: 0.35rem; }
.maint-preview { margin: 0; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text, var(--accent)); font-size: 0.75rem; font-weight: 600; }
.maint-icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.maint-title { margin: 0.2rem 0 0; font-size: 1.6rem; line-height: 1.2; letter-spacing: var(--tracking-title); color: var(--ink-strong); }
.maint-text { margin: 0; max-width: 24rem; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); overflow-wrap: anywhere; }
.maint-timer { display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.5rem; }
.maint-unit { min-width: 4.4rem; padding: 0.75rem 0.5rem 0.6rem; border-radius: 14px; background: var(--surface-soft); border: 1px solid var(--border-hairline); display: flex; flex-direction: column; gap: 0.15rem; }
.maint-unit[hidden] { display: none; }
.maint-unit strong { font-size: 1.75rem; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.maint-unit span { font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.maint-until { margin: 0; font-size: 0.8125rem; color: var(--ink-muted); }
.maint-until strong { color: var(--ink-strong); }
.maint-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.6rem; }
.maint-contact { margin: 0.4rem 0 0; font-size: 0.8125rem; color: var(--ink-muted); }
.maint-contact a { color: var(--accent); }
@media (max-width: 420px) {
  .maint-card { padding: 1.75rem 1.1rem 1.4rem; }
  .maint-unit { min-width: 0; flex: 1 1 0; }
  .maint-unit strong { font-size: 1.4rem; }
}

.maint-banner { margin: 0 0 1rem; padding: 0.7rem 1rem; border-radius: 12px; border: 1px solid rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.1); color: var(--ink-strong); font-size: 0.8125rem; line-height: 1.5; }
.maint-banner a { color: var(--accent); font-weight: 600; margin-inline-start: 0.25rem; }

.maint-settings { display: flex; flex-direction: column; gap: 1rem; }
.maint-settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.maint-settings-head h3 { margin: 0 0 0.3rem; }
.maint-settings-head .badge { flex-shrink: 0; }
.maint-status { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.08); }
.maint-status > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.maint-status-label { font-size: 0.75rem; color: var(--ink-muted); }
.maint-status-value { font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.maint-settings-actions { justify-content: space-between; margin-top: 1rem; }

/* ------------------------------------------------------------------
 * Updates for employees: admin drawer bits, the employee's list, the pop-up
 * ------------------------------------------------------------------ */
[data-ico="megaphone"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }
.page-head.page-head-sub { margin-top: 0.25rem; align-items: flex-start; }
.page-head.page-head-sub .project-tab-title { margin: 0 0 0.2rem; }
.staff-update-people { max-height: 210px; }
.staff-update-people .inbox-mail-person { grid-template-columns: auto minmax(0, 1fr); }
.field.check.staff-update-popup { align-items: flex-start; padding: 0.85rem 1rem; border-radius: 12px; background: var(--surface-soft); border: 1px solid var(--border-hairline); }
.field.check.staff-update-popup > span { font-weight: 400; line-height: 1.5; white-space: normal; }

.staff-update-list { display: grid; gap: 0.9rem; max-width: 860px; }
.staff-update-card { display: flex; flex-direction: column; gap: 0.4rem; }
.staff-update-card.is-new { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.staff-update-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.staff-update-title { margin: 0; font-size: 1.0625rem; color: var(--ink-strong); overflow-wrap: anywhere; }
.staff-update-tags { display: flex; gap: 0.35rem; flex-shrink: 0; }
.staff-update-meta { margin: 0; }
.staff-update-body, .staff-popup-body { font-size: 0.9375rem; line-height: 1.65; color: var(--ink-soft); overflow-wrap: anywhere; }
.staff-update-body > :first-child, .staff-popup-body > :first-child { margin-top: 0; }
.staff-update-body > :last-child, .staff-popup-body > :last-child { margin-bottom: 0; }
.staff-update-body p, .staff-popup-body p { margin: 0 0 0.7rem; font-size: inherit; color: inherit; }
.staff-update-body h2, .staff-update-body h3, .staff-popup-body h2, .staff-popup-body h3 { margin: 0.9rem 0 0.4rem; font-size: 1rem; color: var(--ink-strong); }
.staff-update-body ul, .staff-update-body ol, .staff-popup-body ul, .staff-popup-body ol { margin: 0 0 0.7rem; padding-inline-start: 1.25rem; }

.staff-popup-overlay { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 15, 20, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: staffPopupFade 0.2s ease; }
.staff-popup-overlay[hidden] { display: none; }
.staff-popup { width: 100%; max-width: 32rem; max-height: min(88vh, 40rem); display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem 1.5rem 1.2rem; border-radius: var(--r-card, 20px); background: var(--surface); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-xl, 0 24px 60px rgba(0, 0, 0, 0.25)); animation: staffPopupRise 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
.staff-popup-kicker { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.staff-popup-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.staff-popup-title { margin: 0; font-size: 1.3rem; line-height: 1.3; letter-spacing: var(--tracking-title); color: var(--ink-strong); overflow-wrap: anywhere; }
.staff-popup-meta { margin: 0; font-size: 0.75rem; color: var(--ink-muted); }
.staff-popup-meta:empty { display: none; }
.staff-popup-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.35rem 0.1rem 0.2rem; }
.staff-popup-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.85rem; border-top: 1px solid var(--border-hairline); }
.staff-popup-count { font-size: 0.75rem; color: var(--ink-muted); }
.staff-popup-foot .btn { margin-inline-start: auto; }
html.staff-popup-lock, html.staff-popup-lock body { overflow: hidden; }
@keyframes staffPopupFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes staffPopupRise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .staff-popup-overlay, .staff-popup { animation: none; }
}
@media (max-width: 520px) {
  .staff-popup { padding: 1.2rem 1.1rem 1rem; }
  .staff-popup-title { font-size: 1.15rem; }
}

.settings-clock { margin: 0; min-height: var(--control-h, 2.75rem); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.875rem; }
.settings-clock strong { font-size: 1.125rem; color: var(--ink-strong); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------
 * Working schedules (week editor), today's attendance card, performance score
 * ------------------------------------------------------------------ */
.sched-week-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 0.75rem; }
.sched-week-title { margin: 0 0 0.2rem; font-size: 1rem; color: var(--ink-strong); }
.sched-week-head .btn { flex-shrink: 0; }
.sched-week { display: grid; gap: 0.6rem; }
.sched-day { border: 1px solid var(--border-hairline); border-radius: 14px; background: var(--surface); padding: 0.75rem 0.9rem; }
.sched-day.is-off { background: var(--surface-soft); }
.sched-day-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.sched-day-head strong { font-size: 0.9375rem; color: var(--ink-strong); }
.sched-day.is-off .sched-day-head strong { color: var(--ink-muted); }
.sched-day-toggle { margin: 0; }
.sched-day-body { margin-top: 0.7rem; display: grid; gap: 0.7rem; }
.sched-day-body[hidden] { display: none; }
.sched-day-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 0.6rem; }
.sched-field { margin: 0; min-width: 0; }
.sched-field > span { font-size: 0.75rem; }
.sched-field input { width: 100%; }
.sched-breaks { display: grid; gap: 0.45rem; justify-items: start; }
.sched-breaks-label { font-size: 0.75rem; font-weight: 600; color: var(--ink-muted); }
.sched-break-list { display: grid; gap: 0.4rem; width: 100%; }
.sched-break { display: grid; grid-template-columns: minmax(0, 1fr) 7.2rem auto 7.2rem auto; align-items: center; gap: 0.4rem; }
.sched-break input { height: 2.4rem; padding: 0 0.7rem; border-radius: 10px; border: 1px solid transparent; background: var(--surface-soft); color: inherit; font: inherit; font-size: 0.875rem; min-width: 0; width: 100%; }
.sched-break input:focus { outline: none; border-color: var(--accent); }
.sched-break-sep { color: var(--ink-muted); }
@media (max-width: 560px) {
  .sched-week-head { flex-direction: column; }
  .sched-break { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .sched-break > input[type="text"] { grid-column: 1 / -1; }
  .sched-break-sep { display: none; }
}

.att-today { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1rem; }
.att-today-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.att-today-head .project-tab-title { margin: 0 0 0.2rem; }
.att-today-head .badge { flex-shrink: 0; }
.att-today-note { margin: 0; padding: 0.65rem 0.85rem; border-radius: 12px; background: var(--surface-soft); font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); }
.att-today-note.is-warn { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.35); color: var(--ink-strong); }
.att-today-note a { color: var(--accent); font-weight: 600; }
.att-breaks { display: grid; gap: 0.45rem; }
.att-breaks-label { font-size: 0.75rem; font-weight: 600; color: var(--ink-muted); }
.att-break { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.6rem 0.8rem; border: 1px solid var(--border-hairline); border-radius: 12px; }
.att-break > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.att-break strong { font-size: 0.875rem; color: var(--ink-strong); }
.att-break-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

.perf-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.perf-layout .panel { margin: 0; }
.perf-rate-value small { font-size: 1rem; font-weight: 600; color: var(--ink-muted); margin-inline-start: 0.15rem; }
.perf-parts { display: grid; gap: 0.7rem; }
.perf-part-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.3rem; font-size: 0.8125rem; color: var(--ink-soft); }
.perf-part-head em { font-style: normal; font-size: 0.6875rem; color: var(--ink-muted); margin-inline-start: 0.25rem; }
.perf-part-head strong { font-size: 0.9375rem; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.perf-rate-bar.is-sm { height: 6px; }
.perf-rate-bar.is-none span { background: var(--border-strong); }
.perf-rules .project-tab-title { margin: 0 0 0.6rem; font-size: 1rem; }
.perf-rule-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.1rem; }
.perf-rule-list li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border-hairline); font-size: 0.8125rem; color: var(--ink-soft); }
.perf-rule-list li:last-child { border-bottom: 0; }
.perf-rule-list strong { color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.perf-kpis { margin-bottom: 1rem; }
.kpi-value.is-bad { color: #dc2626; }
.perf-score { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.perf-cell { display: inline-block; min-width: 2.3rem; padding: 0.15rem 0.45rem; border-radius: 8px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--surface-soft); }
.perf-cell.is-ok { background: rgba(16, 185, 129, 0.14); color: #047857; }
.perf-cell.is-info { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; }
.perf-cell.is-warn { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.perf-cell.is-bad { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
[data-theme="dark"] .perf-cell.is-ok { color: #6ee7b7; }
[data-theme="dark"] .perf-cell.is-info { color: #93c5fd; }
[data-theme="dark"] .perf-cell.is-warn { color: #fcd34d; }
[data-theme="dark"] .perf-cell.is-bad { color: #fca5a5; }
@media (max-width: 900px) {
  .perf-layout { grid-template-columns: minmax(0, 1fr); }
}
.sched-break { grid-template-columns: minmax(0, 1fr) 8.8rem auto 8.8rem auto; }

/* Attendance: correct a day recorded with the wrong clock */
.att-fix { margin-top: 1rem; padding: 0.85rem 1.1rem; }
.att-fix > summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--ink-strong); }
.att-fix > p { margin: 0.6rem 0 0.75rem; }
.att-fix-form { display: flex; align-items: flex-end; gap: 0.75rem 1rem; flex-wrap: wrap; }
.att-fix-form .field { margin: 0; }
.att-fix-form input[type="number"] { width: 7rem; }

/* ------------------------------------------------------------------
 * The mascot: sizes, gentle motions, and the places it appears
 * ------------------------------------------------------------------ */
.pms-mascot { display: block; flex-shrink: 0; width: 120px; height: 120px; object-fit: contain; user-select: none; pointer-events: none; transform-origin: 50% 85%; }
.pms-mascot.is-xs { width: 40px; height: 40px; }
.pms-mascot.is-sm { width: 72px; height: 72px; }
.pms-mascot.is-md { width: 120px; height: 120px; }
.pms-mascot.is-lg { width: 168px; height: 168px; }
.pms-mascot.is-xl { width: 220px; height: 220px; }

.pms-mascot.is-float { animation: mascotFloat 3.6s ease-in-out infinite; }
.pms-mascot.is-wave { animation: mascotWave 2.8s ease-in-out infinite; }
.pms-mascot.is-run { animation: mascotRun 0.62s ease-in-out infinite; }
.pms-mascot.is-bounce { animation: mascotBounce 1.5s cubic-bezier(0.3, 0.7, 0.4, 1) infinite; }
.pms-mascot.is-pop { animation: mascotPop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both, mascotFloat 3.6s ease-in-out 0.6s infinite; }
.pms-mascot.is-shake { animation: mascotShake 0.7s ease-in-out both, mascotFloat 3.6s ease-in-out 0.7s infinite; }
.pms-mascot.is-nod { animation: mascotNod 2.4s ease-in-out infinite; }
.pms-mascot.is-sway { animation: mascotSway 3.2s ease-in-out infinite; }
.pms-mascot.is-breathe { animation: mascotBreathe 3.8s ease-in-out infinite; }

@keyframes mascotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes mascotWave { 0%, 100% { transform: rotate(0) translateY(0); } 20% { transform: rotate(-4deg) translateY(-2px); } 40% { transform: rotate(3deg) translateY(-3px); } 60% { transform: rotate(-3deg) translateY(-2px); } 80% { transform: rotate(1deg) translateY(0); } }
@keyframes mascotRun { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes mascotBounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(0) scale(1.05, 0.94); } 45% { transform: translateY(-14px) scale(0.97, 1.04); } 78% { transform: translateY(0) scale(1.04, 0.96); } }
@keyframes mascotPop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes mascotShake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-7px) rotate(-3deg); } 30% { transform: translateX(6px) rotate(3deg); } 45% { transform: translateX(-5px) rotate(-2deg); } 60% { transform: translateX(4px) rotate(2deg); } 75% { transform: translateX(-2px); } }
@keyframes mascotNod { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes mascotSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes mascotBreathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, 0.97); } }
@media (prefers-reduced-motion: reduce) {
  .pms-mascot { animation: none !important; }
}

/* Empty states */
.project-empty-block > .pms-mascot { margin: 0 auto 0.6rem; }
/* Animated poses come wrapped in <picture>; the wrapper must not change the layout */
.pms-mascot-pic { display: contents; }

/* Dialogs */
.pms-dialog-mascot { display: flex; justify-content: center; padding: 1.1rem 1rem 0; }
.pms-dialog-mascot[hidden] { display: none; }
.pms-dialog.has-mascot .pms-dialog-header { justify-content: center; text-align: center; padding-top: 0.6rem; }
.pms-dialog.has-mascot .pms-dialog-message { text-align: center; }
.pms-dialog.has-mascot .pms-dialog-footer { justify-content: center; }

/* Global search */
.topbar-search-empty > .pms-mascot { margin: 0.4rem auto 0.5rem; }

/* Employee update pop-up */
.staff-popup-mascot { display: flex; justify-content: center; margin: -0.3rem 0 -0.2rem; }

/* Maintenance, 404, login */
.maint-card > .pms-mascot { margin: 0.2rem 0 -0.2rem; }
.public-hero .pms-mascot { margin: 0 auto 0.75rem; }
.auth-aside > .pms-mascot { margin: 0 0 1rem -0.4rem; }

/* Dashboards: greeting */
.dash-hello { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.dash-hello > div { min-width: 0; }
@media (max-width: 640px) {
  .dash-hello > .pms-mascot { width: 56px; height: 56px; }
}

/* Attendance (today) and performance */
.att-today-head > .pms-mascot { margin-top: -0.2rem; }
.att-today-head > .att-today-text { flex: 1 1 auto; min-width: 0; }
.perf-rate-head > .pms-mascot { margin: -0.3rem 0 -0.3rem -0.3rem; }
.perf-rate-head > .perf-rate-main { flex: 1 1 auto; min-width: 0; }

/* ===== Time account + break reminders (2026-10-13) ===== */
.att-account { display: grid; gap: 0.6rem; padding: 0.8rem 0.9rem; border: 1px solid var(--border-hairline); border-radius: 14px; background: var(--surface-soft); }
.att-account.is-charged { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.06); }
.att-account-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.att-account-total { font-size: 0.9375rem; color: var(--ink-strong); }
.att-account.is-charged .att-account-total, .att-ded, .att-account-grid dd.is-bad { color: var(--danger, #dc2626); }
.att-account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem 0.9rem; margin: 0; }
.att-account-grid dt { font-size: 0.6875rem; font-weight: 600; color: var(--ink-muted); }
.att-account-grid dd { margin: 0.1rem 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.att-account p { margin: 0; }
.break-popup { max-width: 27rem; text-align: center; }
.break-popup .staff-popup-kicker { justify-content: center; }
.break-popup-text { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }
.break-popup-over { margin: 0; padding: 0.5rem 0.75rem; border-radius: 10px; background: rgba(239, 68, 68, 0.1); color: var(--danger, #dc2626); font-weight: 700; font-size: 0.875rem; }
.break-popup .staff-popup-foot { flex-wrap: wrap; }
.break-popup .staff-popup-foot .btn { margin-inline-start: 0; flex: 1 1 9rem; }

/* ===== File viewer: pictures and PDFs open inside the PMS (2026-10-13) ===== */
.file-viewer { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; background: rgba(12, 12, 16, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: staffPopupFade 0.18s ease; }
.file-viewer[hidden] { display: none; }
.file-viewer-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; color: #fff; }
.file-viewer-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 600; }
.file-viewer-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; text-decoration: none; transition: background 0.15s ease; }
.file-viewer-btn:hover, .file-viewer-btn:focus-visible { background: rgba(255, 255, 255, 0.24); color: #fff; }
.file-viewer-btn [data-ico] { width: 18px; height: 18px; }
.file-viewer-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 1rem 1rem; overflow: auto; }
.file-viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; cursor: zoom-in; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
.file-viewer-stage.is-zoomed { align-items: flex-start; justify-content: flex-start; }
.file-viewer-stage.is-zoomed img { max-width: none; max-height: none; margin: auto; cursor: zoom-out; }
.file-viewer-stage iframe { width: min(100%, 68rem); height: 100%; border: 0; border-radius: 10px; background: #fff; }
.file-viewer-stage video { max-width: 100%; max-height: 100%; border-radius: 10px; background: #000; }
.file-viewer-card { display: grid; gap: 0.6rem; justify-items: center; max-width: 24rem; padding: 1.6rem 1.4rem; border-radius: var(--r-card, 20px); background: var(--surface); color: var(--ink-strong); text-align: center; overflow-wrap: anywhere; }
.file-viewer-card p { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
html.file-viewer-lock, html.file-viewer-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .file-viewer { animation: none; } }
@media (max-width: 640px) { .file-viewer-stage { padding: 0 0.4rem 0.4rem; } .file-viewer-stage iframe { border-radius: 0; } }

/* ===== Chat bubbles: messages on every page (2026-10-13) ===== */
.chat-dock { position: fixed; right: 1rem; bottom: 1rem; z-index: 70; display: flex; align-items: flex-end; gap: 0.75rem; pointer-events: none; }
.chat-dock > * { pointer-events: auto; }
.chat-dock-wins { display: flex; align-items: flex-end; gap: 0.75rem; }
.chat-dock-bubbles { display: flex; flex-direction: column-reverse; gap: 0.6rem; }
.chat-dock-bubbles:empty, .chat-dock-wins:empty { display: none; }
.chat-dock-bubble { position: relative; animation: chatDockPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.chat-dock-bubble-btn { position: relative; display: block; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--border-hairline); cursor: pointer; transition: transform 0.15s ease; }
.chat-dock-bubble-btn:hover, .chat-dock-bubble-btn:focus-visible { transform: scale(1.06); }
.chat-dock-bubble.has-unread .chat-dock-bubble-btn { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--accent); }
.chat-dock-avatar { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--accent-soft); color: var(--accent-text, var(--accent)); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; }
.chat-dock-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-dock-avatar.is-sm { flex: 0 0 34px; width: 34px; height: 34px; font-size: 0.75rem; }
.chat-dock-count { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--danger, #dc2626); color: #fff; font-size: 0.6875rem; font-weight: 700; box-shadow: 0 0 0 2px var(--surface); }
.chat-dock-bubble-x { position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--ink-strong); color: var(--surface); font-size: 0.875rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s ease; }
.chat-dock-bubble:hover .chat-dock-bubble-x, .chat-dock-bubble-x:focus-visible { opacity: 1; }
.chat-dock-tip { position: absolute; right: calc(100% + 0.6rem); top: 50%; transform: translateY(-50%); width: max-content; max-width: 15rem; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.75rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-hairline); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.chat-dock-tip strong { font-size: 0.8125rem; color: var(--ink-strong); }
.chat-dock-tip span { font-size: 0.75rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.chat-dock-bubble:hover .chat-dock-tip, .chat-dock-bubble:focus-within .chat-dock-tip, .chat-dock-bubble.has-unread:first-child .chat-dock-tip { opacity: 1; }

.chat-dock-win { width: 21rem; height: min(29rem, calc(100vh - 6rem)); display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--border-hairline); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); animation: chatDockRise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.chat-dock-head { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.6rem 0.6rem 0.75rem; border-bottom: 1px solid var(--border-hairline); }
.chat-dock-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.chat-dock-title strong { font-size: 0.875rem; color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-dock-title span { font-size: 0.6875rem; color: var(--ink-muted); }
.chat-dock-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font-size: 0.8125rem; cursor: pointer; text-decoration: none; }
.chat-dock-icon:hover, .chat-dock-icon:focus-visible { background: var(--surface-soft); color: var(--ink-strong); }
.chat-dock-icon [data-ico] { width: 16px; height: 16px; }
.chat-dock-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem; background: var(--surface-soft); overscroll-behavior: contain; }
.chat-dock-note { margin: auto; font-size: 0.8125rem; color: var(--ink-muted); text-align: center; }
.chat-dock-msg { display: flex; }
.chat-dock-msg.is-mine { justify-content: flex-end; }
.chat-dock-msg-b { max-width: 82%; display: flex; flex-direction: column; gap: 0.2rem; padding: 0.45rem 0.7rem; border-radius: 16px 16px 16px 5px; background: var(--surface); color: var(--ink-strong); font-size: 0.875rem; line-height: 1.45; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.chat-dock-msg.is-mine .chat-dock-msg-b { border-radius: 16px 16px 5px 16px; background: var(--accent); color: var(--accent-contrast, #fff); }
.chat-dock-msg-from { font-size: 0.6875rem; font-weight: 700; color: var(--accent-text, var(--accent)); }
.chat-dock-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-dock-msg-text a { color: inherit; text-decoration: underline; }
.chat-dock-msg-text.is-deleted { font-style: italic; opacity: 0.7; }
.chat-dock-msg-time { align-self: flex-end; font-size: 0.625rem; opacity: 0.65; }
.chat-dock-msg audio { width: 13rem; max-width: 100%; height: 34px; }
.chat-dock-att { display: block; color: inherit; }
.chat-dock-att img { display: block; max-width: 100%; max-height: 11rem; border-radius: 10px; }
.chat-dock-att.is-file { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 600; text-decoration: underline; overflow-wrap: anywhere; }
.chat-dock-att.is-file [data-ico] { flex: 0 0 14px; width: 14px; height: 14px; }
.chat-dock-file { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.75rem; font-size: 0.75rem; color: var(--ink-soft); border-top: 1px solid var(--border-hairline); }
.chat-dock-file[hidden] { display: none; }
.chat-dock-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-dock-file button { border: 0; background: transparent; color: var(--ink-muted); font-size: 1rem; cursor: pointer; }
.chat-dock-form { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 0.35rem; padding: 0.5rem; border-top: 1px solid var(--border-hairline); }
.wa-ref-card { display: flex; align-items: center; gap: 0.55rem; margin: 0.2rem 0 0.35rem; padding: 0.45rem 0.6rem; min-width: 11rem; max-width: 100%; border-radius: var(--r-field); background: var(--surface); color: var(--ink); text-decoration: none; border: 1px solid var(--border-hairline); }
.wa-bubble.is-mine .wa-ref-card, .chat-dock-msg.is-mine .wa-ref-card { background: var(--surface); color: var(--ink); }
.wa-ref-card span { display: flex; flex-direction: column; min-width: 0; }
.wa-ref-card strong, .wa-ref-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-ref-card strong { font-size: 0.82rem; font-weight: 700; }
.wa-ref-card small { color: var(--ink-soft); font-size: 0.72rem; }
.wa-ref-card:hover { border-color: var(--accent); }
.wa-ref-card.is-missing { opacity: 0.72; }
.wa-ref-pick { position: absolute; left: 0.65rem; right: 0.65rem; bottom: calc(100% + 0.35rem); z-index: 6; display: flex; flex-direction: column; gap: 0.4rem; max-height: 16rem; padding: 0.55rem; background: var(--surface); color: var(--ink); border: 1px solid var(--border-hairline); border-radius: var(--r-card); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); }
.chat-dock-win .wa-ref-pick { position: static; margin: 0; max-height: 10rem; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
.wa-ref-pick[hidden], .wa-ref-preview[hidden] { display: none; }
.wa-ref-types { display: flex; gap: 0.25rem; }
.wa-ref-types button { border: 0; border-radius: var(--r-pill); padding: 0.28rem 0.7rem; background: var(--surface-soft); color: var(--ink-soft); font: inherit; font-size: 0.75rem; cursor: pointer; }
.wa-ref-types button.is-on { background: var(--accent); color: var(--accent-contrast); }
.wa-ref-search { width: 100%; border: 0; border-radius: var(--r-control); background: var(--surface-soft); color: var(--ink); font: inherit; font-size: 0.82rem; padding: 0.4rem 0.65rem; }
.wa-ref-list { overflow: auto; display: flex; flex-direction: column; min-height: 0; }
.wa-ref-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; width: 100%; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; padding: 0.4rem 0.35rem; border-radius: var(--r-field); cursor: pointer; }
.wa-ref-list button:hover { background: var(--surface-soft); }
.wa-ref-list strong { font-size: 0.82rem; }
.wa-ref-list small { color: var(--ink-soft); font-size: 0.72rem; }
.wa-ref-preview { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; background: var(--surface); color: var(--ink); font-size: 0.8rem; }
.wa-ref-preview span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-ref-preview button { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; display: inline-flex; }
.data-table tr.is-focus td { background: rgba(var(--accent-rgb), 0.08); }
.data-table tr.is-focus { box-shadow: inset 3px 0 0 var(--accent); }
.chat-dock-input { flex: 1 1 auto; min-width: 0; max-height: 96px; padding: 0.5rem 0.8rem; border: 0; border-radius: 18px; background: var(--surface-soft); color: var(--ink-strong); font: inherit; font-size: 0.875rem; line-height: 1.4; resize: none; outline: none; }
.chat-dock-input:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); }
.chat-dock-send { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-contrast, #fff); cursor: pointer; }
.chat-dock-send:disabled { opacity: 0.5; cursor: default; }
.chat-dock-send [data-ico] { width: 16px; height: 16px; }
@keyframes chatDockPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes chatDockRise { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-dock-bubble, .chat-dock-win { animation: none; } }
@media (max-width: 640px) {
  .chat-dock { right: 0.6rem; bottom: 0.6rem; }
  .chat-dock-bubble-btn { width: 46px; height: 46px; }
  .chat-dock-tip { display: none; }
  .chat-dock-bubble-x { opacity: 1; }
  .chat-dock-win { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; border: 0; z-index: 210; }
}
@media print { .chat-dock { display: none; } }

/* ===== Client area polish (2026-10-13) ===== */
.dash-greet { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.client-project-progress { height: 6px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; margin: 0.15rem 0 0.1rem; }
.client-project-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.finance-view-stat small { display: block; margin-top: 0.15rem; font-size: 0.75rem; font-weight: 400; }
.dash-row-meta .badge { margin-inline-end: 0.35rem; }
/* A long update is folded; "Show more" opens it */
.update-body.is-folded { max-height: 15rem; overflow: hidden; position: relative; }
.update-body.is-folded::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4rem; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; }
.update-more { align-self: flex-start; margin-top: 0.35rem; }
.client-due-card.is-due { box-shadow: inset 0 0 0 2px rgba(245, 158, 11, 0.55); }
.client-due-card.is-overdue { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.05); }
.client-due-card.is-due strong { color: var(--warn-text, #b45309); }
.client-due-card.is-overdue strong, .client-due-card small b { color: var(--danger, #dc2626); }
.client-inv-amount { font-size: 1rem; font-variant-numeric: tabular-nums; }
.client-inv-amount span { font-size: 0.75rem; font-weight: 500; color: var(--ink-muted); }
.client-inv-amount.is-overdue { color: var(--danger, #dc2626); }

/* ===== Client updates: quiet list + reader (2026-10-13) ===== */
.upd-feed { padding: 0.35rem; display: flex; flex-direction: column; }
.upd-row { display: flex; align-items: center; gap: 0.9rem; width: 100%; padding: 0.8rem 0.85rem; border: 0; border-radius: 14px; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background 0.15s ease; }
.upd-row + template + .upd-row { box-shadow: 0 -1px 0 var(--border-hairline); }
.upd-row:hover, .upd-row:focus-visible { background: var(--surface-soft); box-shadow: none; outline: none; }
.upd-row:hover + template + .upd-row, .upd-row:focus-visible + template + .upd-row { box-shadow: none; }
.upd-date { flex: 0 0 3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 3rem; border-radius: 12px; background: var(--surface-soft); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); line-height: 1.1; }
.upd-date b { font-size: 1.05rem; font-weight: 700; color: var(--ink-strong); letter-spacing: 0; }
.upd-row:hover .upd-date, .upd-row:focus-visible .upd-date { background: var(--surface); }
.upd-row.is-unread .upd-date { background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.upd-row.is-unread .upd-date b { color: var(--accent-text, var(--accent)); }
.upd-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.upd-title { font-size: 0.9375rem; font-weight: 600; color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upd-row.is-unread .upd-title { font-weight: 700; }
.upd-title [data-ico] { width: 13px; height: 13px; margin-inline-end: 0.3rem; color: var(--accent); vertical-align: -1px; }
.upd-line { font-size: 0.8125rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upd-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.1rem; font-size: 0.6875rem; color: var(--ink-muted); }
.upd-chip { padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--surface-soft); font-weight: 600; }
.upd-row:hover .upd-chip, .upd-row:focus-visible .upd-chip { background: var(--surface); }
.upd-files { display: inline-flex; align-items: center; gap: 0.2rem; }
.upd-files [data-ico] { width: 12px; height: 12px; }
.upd-new { flex: 0 0 auto; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--accent); color: var(--accent-contrast, #fff); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.upd-go { flex: 0 0 14px; width: 14px; height: 14px; color: var(--ink-muted); opacity: 0.6; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.upd-reader-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding: 3.5vh 1rem; background: rgba(15, 15, 20, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: staffPopupFade 0.18s ease; }
.upd-reader-overlay[hidden] { display: none; }
.upd-reader { position: relative; width: 100%; max-width: 44rem; max-height: 93vh; overflow-y: auto; display: flex; flex-direction: column; border-radius: var(--r-card, 20px); background: var(--surface); border: 1px solid var(--border-hairline); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); outline: none; animation: staffPopupRise 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); overscroll-behavior: contain; }
.upd-reader-close { position: sticky; top: 0.75rem; align-self: flex-end; flex: 0 0 36px; margin: 0.75rem 0.75rem -2.75rem 0; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--ink-soft); cursor: pointer; }
.upd-reader-close:hover, .upd-reader-close:focus-visible { color: var(--ink-strong); }
.upd-reader-close [data-ico] { width: 16px; height: 16px; }
.upd-reader-content { flex: 1 0 auto; padding: 2rem 2.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.upd-reader-kicker { margin: 0; padding-inline-end: 2.5rem; font-size: 0.75rem; font-weight: 600; color: var(--accent-text, var(--accent)); }
.upd-reader-title { margin: 0; font-size: 1.5rem; line-height: 1.3; letter-spacing: var(--tracking-title); color: var(--ink-strong); overflow-wrap: anywhere; }
.upd-reader-lead { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.upd-reader-body { font-size: 0.9375rem; line-height: 1.75; color: var(--ink-strong); overflow-wrap: anywhere; }
.upd-reader-files { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; }
.upd-file { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%; padding: 0.5rem 0.8rem; border-radius: 12px; background: var(--surface-soft); color: var(--ink-strong); font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
.upd-file:hover, .upd-file:focus-visible { background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.upd-file [data-ico] { flex: 0 0 14px; width: 14px; height: 14px; }
.upd-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upd-reader-foot { margin: 0; }
.upd-reader-nav { position: sticky; bottom: 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 1rem; border-top: 1px solid var(--border-hairline); background: var(--surface); }
html.upd-reader-lock, html.upd-reader-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .upd-reader-overlay, .upd-reader { animation: none; } }
@media (max-width: 640px) {
  .upd-row { gap: 0.7rem; padding: 0.7rem 0.6rem; }
  .upd-date { flex-basis: 2.6rem; height: 2.6rem; }
  .upd-go { display: none; }
  .upd-reader-overlay { padding: 0; }
  .upd-reader { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  .upd-reader-content { padding: 1.5rem 1.1rem 1rem; }
  .upd-reader-title { font-size: 1.25rem; }
}


.filter-count { margin: -0.25rem 0 0.5rem; }

/* ===== Admin gigs: list / cards + marketplace-style preview (2026-10-13) ===== */
.gig-toolbar { align-items: center; }
.gig-toolbar p { margin: 0; }
.gig-toolbar .seg-item { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; cursor: pointer; font: inherit; }
.gig-toolbar .seg-item [data-ico] { width: 14px; height: 14px; }
#gigCatalog[data-layout="list"] .gig-cards, #gigCatalog[data-layout="cards"] .gig-list { display: none; }
.gig-title-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.gig-title-link:hover strong, .gig-title-link:focus-visible strong { color: var(--accent); }

.gig-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.gig-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border-hairline); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.gig-card:hover, .gig-card:focus-within { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }
.gig-card-cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; background: var(--surface-soft); cursor: pointer; overflow: hidden; }
.gig-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.gig-card:hover .gig-card-cover img { transform: scale(1.04); }
.gig-card.is-off .gig-card-cover img { filter: grayscale(0.7); opacity: 0.8; }
.gig-card-nocover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--ink-muted); }
.gig-card-nocover [data-ico] { width: 16px; height: 16px; }
.gig-card-status { position: absolute; top: 0.6rem; left: 0.6rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.gig-card-video { position: absolute; right: 0.6rem; bottom: 0.6rem; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(15, 15, 20, 0.7); color: #fff; font-size: 0.6875rem; padding-left: 2px; }
.gig-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.8rem 0.9rem 0.6rem; }
.gig-card-cat { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }
.gig-card-title { padding: 0; border: 0; background: none; color: var(--ink-strong); font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; text-align: start; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gig-card-title:hover, .gig-card-title:focus-visible { color: var(--accent); }
.gig-card-foot { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border-top: 1px solid var(--border-hairline); }
.gig-card-price { display: flex; flex-direction: column; line-height: 1.15; margin-inline-end: auto; }
.gig-card-price span { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.gig-card-price strong { font-size: 1rem; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.gig-card-actions { display: inline-flex; gap: 0.15rem; }

.gig-view-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding: 3vh 1rem; background: rgba(15, 15, 20, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: staffPopupFade 0.18s ease; }
.gig-view-overlay[hidden] { display: none; }
.gig-view { width: 100%; max-width: 68rem; max-height: 94vh; overflow-y: auto; border-radius: var(--r-card, 20px); background: var(--surface); border: 1px solid var(--border-hairline); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); outline: none; overscroll-behavior: contain; animation: staffPopupRise 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.gig-view-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.9rem 0.7rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border-hairline); }
.gig-view-crumb { min-width: 0; font-size: 0.75rem; font-weight: 600; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gig-view-bar-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.gig-view-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--ink-soft); cursor: pointer; }
.gig-view-close:hover, .gig-view-close:focus-visible { color: var(--ink-strong); }
.gig-view-close [data-ico] { width: 16px; height: 16px; }
.gig-view-body { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2rem; padding: 1.5rem; align-items: start; }
.gig-view-wait { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 3rem 1rem; text-align: center; }
.gig-view-main { min-width: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.gig-view-title { margin: 0; font-size: 1.5rem; line-height: 1.3; letter-spacing: var(--tracking-title); color: var(--ink-strong); overflow-wrap: anywhere; }
.gig-view-meta { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.8125rem; color: var(--ink-soft); }
.gig-view-media { display: flex; flex-direction: column; gap: 0.6rem; }
.gig-view-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--surface-soft); display: flex; align-items: center; justify-content: center; }
.gig-view-stage a { display: block; width: 100%; height: 100%; }
.gig-view-stage img:not(.pms-mascot) { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.gig-view-stage iframe { width: 100%; height: 100%; border: 0; }
.gig-view-stage.is-empty { flex-direction: column; gap: 0.4rem; color: var(--ink-muted); font-size: 0.875rem; }
.gig-view-stage.is-empty p { margin: 0; }
.gig-view-link { display: flex !important; align-items: center; justify-content: center; gap: 0.5rem; color: var(--accent-text, var(--accent)); font-weight: 600; text-decoration: none; padding: 1rem; text-align: center; overflow-wrap: anywhere; }
.gig-view-link [data-ico] { flex: 0 0 18px; width: 18px; height: 18px; }
.gig-view-thumbs { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.2rem; }
.gig-view-thumb { position: relative; flex: 0 0 5.5rem; height: 3.6rem; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--surface-soft); color: var(--ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gig-view-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gig-view-thumb.is-active { border-color: var(--accent); }
.gig-view-thumb [data-ico] { width: 16px; height: 16px; }
.gig-view-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15, 15, 20, 0.35); color: #fff; font-size: 0.875rem; }
.gig-view-h { margin: 0.5rem 0 0; font-size: 1.05rem; color: var(--ink-strong); }
.gig-view-desc { font-size: 0.9375rem; line-height: 1.75; color: var(--ink-strong); overflow-wrap: anywhere; }
.gig-view-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.25rem; }
.gig-view-tags span { padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--surface-soft); font-size: 0.75rem; color: var(--ink-soft); }
.gig-view-packages { position: sticky; top: 4.25rem; border: 1px solid var(--border-hairline); border-radius: 16px; overflow: hidden; background: var(--surface); }
.gig-view-packages > p { margin: 0; padding: 1.1rem; }
.gig-view-ptabs { display: flex; border-bottom: 1px solid var(--border-hairline); }
.gig-view-ptab { flex: 1 1 0; padding: 0.8rem 0.4rem; border: 0; border-bottom: 2px solid transparent; background: var(--surface-soft); color: var(--ink-muted); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; }
.gig-view-ptab.is-active { background: var(--surface); color: var(--ink-strong); border-bottom-color: var(--accent); }
.gig-view-pane { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.1rem; }
.gig-view-phead { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.gig-view-phead strong { font-size: 0.9375rem; color: var(--ink-strong); }
.gig-view-price { font-size: 1.35rem; font-weight: 700; color: var(--ink-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gig-view-pdesc { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); }
.gig-view-facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8125rem; font-weight: 600; color: var(--ink-strong); }
.gig-view-facts span { display: inline-flex; align-items: center; gap: 0.35rem; }
.gig-view-facts [data-ico] { width: 14px; height: 14px; color: var(--ink-muted); }
.gig-view-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.gig-view-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-strong); }
.gig-view-features [data-ico] { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 0.15rem; color: var(--success, #16a34a); }
.gig-view-features li.is-out { color: var(--ink-muted); }
.gig-view-features li.is-out [data-ico] { color: var(--ink-muted); opacity: 0.5; }
html.gig-view-lock, html.gig-view-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .gig-view-overlay, .gig-view, .gig-card, .gig-card-cover img { animation: none; transition: none; } }
@media (max-width: 900px) {
  .gig-view-body { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.1rem; }
  .gig-view-packages { position: static; }
}
@media (max-width: 640px) {
  .gig-view-overlay { padding: 0; }
  .gig-view { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  .gig-view-title { font-size: 1.2rem; }
  .gig-view-bar { padding-left: 1rem; }
  .gig-cards { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
}

/* ===== One invoice, several clients (2026-10-13) ===== */
.inv-share { display: flex; flex-direction: column; gap: 0.4rem; }
.inv-share[hidden] { display: none; }
.inv-share-search { max-width: 18rem; }
.inv-share-list { display: flex; flex-wrap: wrap; gap: 0.4rem; max-height: 9.5rem; overflow-y: auto; padding: 0.5rem; border-radius: 14px; background: var(--surface-soft); }
.inv-share-item { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem 0.3rem 0.5rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-hairline); font-size: 0.8125rem; cursor: pointer; user-select: none; }
.inv-share-item[hidden] { display: none; }
.inv-share-item:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text, var(--accent)); font-weight: 600; }
.inv-share-item input { margin: 0; accent-color: var(--accent); }
.inv-shared-note { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.9rem; }
.inv-shared-note [data-ico] { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 0.15rem; }

/* Store products use the same list / cards switch and preview as the gigs */
.layout-switch[data-layout="list"] .gig-cards, .layout-switch[data-layout="cards"] .gig-list { display: none; }
.store-view-specs { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border-hairline); }
.store-view-specs div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-hairline); font-size: 0.8125rem; }
.store-view-specs div:last-child { border-bottom: 0; padding-bottom: 0; }
.store-view-specs dt { color: var(--ink-muted); }
.store-view-specs dd { margin: 0; font-weight: 600; color: var(--ink-strong); text-align: end; overflow-wrap: anywhere; }

/* ===== Store subscriptions + store money (2026-10-13) ===== */
.sto-subscription-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 1rem;
}
.sto-subscription-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.sto-subscription-toolbar .sto-subscription-search {
  flex: 1 1 15rem;
  min-width: 0;
  margin: 0;
}
.sto-subscription-toolbar > .btn,
.sto-subscription-scopes .btn {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .sto-subscription-scopes { flex-basis: 100%; }
  .sto-subscription-toolbar .sto-subscription-search { flex-basis: 12rem; }
}
tr.is-muted-row td { opacity: 0.6; }
.pms-dialog.sto-pop { max-width: 540px; }
.pms-dialog.sto-pop.is-wide { max-width: 720px; }
.sto-pop .pms-dialog-body { overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; }
.sto-pop .rec-release-summary { margin: 0; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.sto-pop .rec-release-effect { margin: 0; }
.sto-pop-h { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--ink-strong); }
.sto-pop-table { font-size: 0.8125rem; }
.sto-renew-row { display: grid; grid-template-columns: minmax(0, 1.3fr) 9rem 8rem 10rem; gap: 0.6rem; align-items: end; padding: 0.7rem 0.8rem; border: 1px solid var(--border-hairline); border-radius: 14px; }
.sto-renew-row .field { margin: 0; }
.sto-renew-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; align-self: center; }
.sto-renew-info strong { font-size: 0.9375rem; color: var(--ink-strong); }
.sto-renew-row.is-off { background: var(--surface-soft); }
.sto-renew-row.is-off .sto-renew-info strong { color: var(--ink-muted); }
.sto-renew-row.is-stop { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.05); }
.sto-renew-note { grid-column: 1 / -1; margin: 0; font-size: 0.75rem; color: var(--ink-soft); }
.sto-renew-note:empty { display: none; }
.sto-renew-row.is-stop .sto-renew-note { color: var(--danger, #dc2626); font-weight: 600; }
.sto-money { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.8rem; border-radius: 14px; background: var(--surface-soft); }
.sto-money-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }
.sto-money-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.sto-money-mode { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.7rem; border: 1px solid var(--border-hairline); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.sto-money-mode[hidden] { display: none; }
.sto-money-mode strong { font-size: 0.8125rem; color: var(--ink-strong); }
.sto-money-mode span { font-size: 0.6875rem; line-height: 1.4; color: var(--ink-muted); }
.sto-money-mode.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.sto-money-mode.is-active strong { color: var(--accent-text, var(--accent)); }
.sto-money-new[hidden], .sto-money-existing[hidden] { display: none; }
.sto-money-existing p { margin: 0 0 0.4rem; }
.sto-cand-list { display: flex; flex-direction: column; gap: 0.35rem; max-height: 13rem; overflow-y: auto; }
.sto-cand { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem; border: 1px solid var(--border-hairline); border-radius: 12px; background: var(--surface); cursor: pointer; }
.sto-cand:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sto-cand input { margin: 0; accent-color: var(--accent); }
.sto-cand-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sto-cand-text strong { font-size: 0.8125rem; color: var(--ink-strong); }
.sto-cand-text span { font-size: 0.75rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sto-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--ink-strong); cursor: pointer; }
.sto-check input { margin: 0; accent-color: var(--accent); }
.sto-history { display: flex; flex-direction: column; gap: 0.5rem; }
.sto-history-item { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.65rem 0.8rem; border: 1px solid var(--border-hairline); border-radius: 12px; }
.sto-history-item.is-ended { background: var(--surface-soft); }
.sto-history-top { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.sto-history-top strong { font-size: 0.875rem; color: var(--ink-strong); }
.sto-history-total { margin-inline-start: auto; font-weight: 700; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.sto-history-line { font-size: 0.8125rem; color: var(--ink-strong); }
.sto-payment-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0.75rem; margin-block: 0.75rem; }
.sto-payment-pages { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem; }
.sto-invoice-reference { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; }
.sto-invoice-reference > p { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) { .sto-payment-filters, .sto-invoice-reference { grid-template-columns: minmax(0, 1fr); } }
.store-money-kpis .kpi-card small { display: block; margin-top: 0.15rem; font-size: 0.75rem; }
.store-money-split { display: flex; flex-direction: column; gap: 0.6rem; }
.store-money-split h3 { margin: 0; }
.store-money-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; }
.store-money-service { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.7rem 0.85rem; border-radius: 14px; background: var(--surface-soft); color: inherit; text-decoration: none; }
.store-money-service:hover, .store-money-service:focus-visible { background: var(--accent-soft); }
.store-money-service span { font-size: 0.75rem; font-weight: 600; color: var(--ink-muted); }
.store-money-service strong { font-size: 1.05rem; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.store-money-service small { font-size: 0.6875rem; }
@media (max-width: 720px) {
  .sto-renew-row { grid-template-columns: 1fr 1fr; }
  .sto-renew-info { grid-column: 1 / -1; }
}


.btn.sto-end-btn { background: var(--danger, #dc2626); color: #fff; border-color: transparent; }
.btn.sto-end-btn:hover, .btn.sto-end-btn:focus-visible { filter: brightness(0.94); }

/* List / Cards switch sits at the end of the tabs row */
.tabs-tools-row { justify-content: space-between; }
.tabs-tools-row > .seg { flex: 0 0 auto; margin-inline-start: auto; }
.tabs-tools-row .seg-item { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; cursor: pointer; font: inherit; }
.tabs-tools-row .seg-item [data-ico] { width: 14px; height: 14px; }
.gig-toolbar { margin: 0 0 0.6rem; }
@media (max-width: 640px) { .tabs-tools-row .seg-item { padding-inline: 0.6rem; font-size: 0; gap: 0; } .tabs-tools-row .seg-item [data-ico] { width: 16px; height: 16px; } }

/* Users and Employees: one List / Cards choice for every submenu of that menu */
html:not([data-hub-layout="cards"]) .hub-cards-only { display: none; }
html[data-hub-layout="cards"] .hub-list-only { display: none; }
html[data-hub-layout="cards"] .hub-switch.panel {
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
html[data-hub-layout="cards"] .hub-switch > h4,
html[data-hub-layout="cards"] .hub-switch > .finance-panel-title { margin: 0 0 0.6rem; }
html[data-hub-layout="cards"] .hub-switch .data-table { display: block; min-width: 0; }
html[data-hub-layout="cards"] .hub-switch .data-table thead { display: none; }
html[data-hub-layout="cards"] .hub-switch .data-table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.75rem;
}
html[data-hub-layout="cards"] .hub-switch .data-table tr {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  background: var(--surface);
}
html[data-hub-layout="cards"] .hub-switch .data-table tr:hover { background: var(--surface); }
html[data-hub-layout="cards"] .hub-switch .data-table tr:has(td[colspan]) {
  grid-column: 1 / -1;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
html[data-hub-layout="cards"] .hub-switch .data-table td {
  display: grid;
  grid-template-columns: 6.75rem minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  align-items: start;
  padding: 0;
  border: 0;
  min-width: 0;
}
html[data-hub-layout="cards"] .hub-switch .data-table td::before {
  content: attr(data-col);
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}
html[data-hub-layout="cards"] .hub-switch .data-table td:first-child {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--ink-strong);
}
html[data-hub-layout="cards"] .hub-switch .emp-name-cell { gap: 0.75rem; }
html[data-hub-layout="cards"] .hub-switch .emp-name-cell .project-avatar {
  width: 3rem;
  height: 3rem;
  margin: 0;
  font-size: 1.05rem;
  border-width: 0;
}
html[data-hub-layout="cards"] .hub-switch .emp-name-cell .project-name-link,
html[data-hub-layout="cards"] .hub-switch .emp-name-cell .person-name {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-strong);
}
html[data-hub-layout="cards"] .hub-switch .data-table td:first-child::before,
html[data-hub-layout="cards"] .hub-switch .data-table td[data-col=""]::before,
html[data-hub-layout="cards"] .hub-switch .data-table td.row-actions::before { content: none; }
html[data-hub-layout="cards"] .hub-switch .data-table td[data-col=""],
html[data-hub-layout="cards"] .hub-switch .data-table td.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-top: auto;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border-hairline);
}

/* ===== Admin dashboard: attention first, then the everyday actions (2026-10-13) ===== */
.dash-attn { margin: 0 0 1rem; }
.dash-attn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.6rem; }
.dash-block-title { margin: 0; font-size: 1rem; letter-spacing: var(--tracking-title); color: var(--ink-strong); }
.dash-attn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 0.6rem; }
.dash-attn-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-hairline); color: inherit; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.dash-attn-card:hover, .dash-attn-card:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); }
.dash-attn-ico { flex: 0 0 38px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-soft); color: var(--ink-soft); }
.dash-attn-ico [data-ico] { width: 18px; height: 18px; }
.dash-attn-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.dash-attn-text strong { font-size: 0.875rem; color: var(--ink-strong); }
.dash-attn-text small { font-size: 0.75rem; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-attn-count { flex: 0 0 auto; min-width: 2.1rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--surface-soft); color: var(--ink-strong); font-size: 1rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.dash-attn-card.is-bad { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.04); }
.dash-attn-card.is-bad .dash-attn-ico, .dash-attn-card.is-bad .dash-attn-count { background: rgba(239, 68, 68, 0.12); color: var(--danger, #dc2626); }
.dash-attn-card.is-warn .dash-attn-ico, .dash-attn-card.is-warn .dash-attn-count { background: rgba(245, 158, 11, 0.14); color: var(--warn-text, #b45309); }
.dash-attn-card.is-info .dash-attn-ico, .dash-attn-card.is-info .dash-attn-count { background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.dash-attn-clear { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-hairline); }
.dash-attn-clear p { margin: 0.1rem 0 0; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.1rem; }
.dash-action { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-hairline); color: var(--ink-strong); font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.dash-action [data-ico] { width: 15px; height: 15px; color: var(--accent); }
.dash-action:hover, .dash-action:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast, #fff); }
.dash-action:hover [data-ico], .dash-action:focus-visible [data-ico] { color: inherit; }
@media (max-width: 640px) {
  .dash-attn-grid { grid-template-columns: 1fr; }
  .dash-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -0.25rem; padding-inline: 0.25rem; }
  .dash-actions::-webkit-scrollbar { display: none; }
  .dash-action { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .dash-attn-card { transition: none; } }

/* ===== Admin invoices: Unpaid / Paid / All and cards (2026-10-14) ===== */
.filter-bar .inv-pay-seg { flex: 0 0 auto; align-self: center; }
.inv-pay-seg .seg-item { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.inv-pay-count { min-width: 1.35rem; padding: 0 0.35rem; border-radius: 999px; background: var(--surface-soft); color: var(--ink-muted); font-size: 0.6875rem; font-weight: 700; line-height: 1.35rem; text-align: center; }
.inv-pay-seg .seg-item.is-active .inv-pay-count { background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.inv-cards { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.inv-cards-empty { grid-column: 1 / -1; }
.inv-card { display: flex; flex-direction: column; gap: 0.65rem; padding: 1rem 1.05rem 0.85rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--border-hairline); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.inv-card:hover, .inv-card:focus-within { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.09); transform: translateY(-2px); }
.inv-card.is-late { border-color: rgba(239, 68, 68, 0.35); }
.inv-card.is-cancelled, .inv-card.is-draft { background: var(--surface-soft); }
.inv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.inv-card-number { padding: 0; border: 0; background: none; color: var(--ink-muted); font: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-card-number:hover, .inv-card-number:focus-visible { color: var(--accent); }
.inv-card-client { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-card-money { display: flex; flex-direction: column; gap: 0.05rem; }
.inv-card-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-muted); }
.inv-card-money strong { font-size: 1.45rem; line-height: 1.2; letter-spacing: var(--tracking-title); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.inv-card.is-late .inv-card-money strong { color: var(--danger, #dc2626); }
.inv-card.is-paid .inv-card-money strong { color: var(--success, #16a34a); }
.inv-card-money small { min-height: 1rem; font-size: 0.75rem; }
.inv-card-bar { height: 5px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; }
.inv-card.is-cancelled .inv-card-bar, .inv-card.is-draft .inv-card-bar { background: var(--border-hairline); }
.inv-card-bar span { display: block; height: 100%; border-radius: inherit; background: var(--success, #16a34a); }
.inv-card-dates { display: flex; gap: 1.2rem; margin: 0; }
.inv-card-dates dt { font-size: 0.6875rem; color: var(--ink-muted); }
.inv-card-dates dd { margin: 0.05rem 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--ink-strong); }
.inv-card-dates dd.is-late { color: var(--danger, #dc2626); }
.inv-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.65rem; border-top: 1px solid var(--border-hairline); }
.inv-card-foot .btn [data-ico] { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .inv-card { transition: none; } }

/* Gig / product cards: the footer never squeezes. On a narrow card (side menu open, many
   columns) the action buttons take their own line under the price; on a wide card
   everything stays on one line. Every card of a grid has the same width, so they all agree. */
.gig-card { container-type: inline-size; }
.gig-card-foot { flex-wrap: wrap; row-gap: 0.45rem; }
.gig-card-price { flex: 1 1 auto; min-width: 0; }
.gig-card-price strong, .gig-card-foot > .muted { white-space: nowrap; }
.gig-card-actions { flex: 0 0 auto; margin-inline-start: auto; }
@container (max-width: 21rem) {
  .gig-card-foot { padding-bottom: 0.45rem; }
  .gig-card-actions { flex: 1 0 100%; justify-content: flex-end; margin: 0; padding-top: 0.35rem; border-top: 1px solid var(--border-hairline); }
}

/* ===== Version sticker in the side menu (2026-10-14) ===== */
.pms-version { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start; margin: 0 0 0.5rem 0.35rem; padding: 0.38rem 0.5rem 0.38rem 0.65rem; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.32));
  -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb, 243, 91, 37), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  font-size: 0.75rem; line-height: 1; letter-spacing: 0.02em; user-select: none; }
/* a soft colour glow behind the glass and a slow shine across it */
.pms-version::before { content: ""; position: absolute; inset: -40% -10%; z-index: -1; background: radial-gradient(circle at 15% 50%, rgba(var(--accent-rgb, 243, 91, 37), 0.28), transparent 55%), radial-gradient(circle at 90% 30%, rgba(124, 92, 255, 0.18), transparent 50%); }
.pms-version::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-18deg); animation: pmsVersionShine 6s ease-in-out infinite; pointer-events: none; }
.pms-version-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 243, 91, 37), 0.18); }
.pms-version-name { font-weight: 800; color: var(--ink-strong); }
.pms-version-num { padding: 0.16rem 0.4rem; border-radius: 999px; background: rgba(var(--accent-rgb, 243, 91, 37), 0.12); color: var(--accent-text, var(--accent)); font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes pmsVersionShine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
[data-theme="dark"] .pms-version { background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)); border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .pms-version::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent); }
@media (prefers-reduced-motion: reduce) { .pms-version::after { animation: none; display: none; } }
/* Side menu folded to icons: only the number stays */
html.nav-collapsed .pms-version { align-self: center; margin: 0 0 0.6rem; padding: 0.3rem 0.45rem; }
html.nav-collapsed .pms-version-name, html.nav-collapsed .pms-version-dot { display: none; }

/* ===== Daily welcome: the mascot greets you the first time each day (2026-10-14) ===== */
.pms-welcome { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb, 243, 91, 37), 0.16), transparent 55%), var(--canvas, #f5f5f7);
  animation: pmsWelcomeIn 0.45s ease both; }
.pms-welcome[hidden] { display: none; }
.pms-welcome.is-leaving { animation: pmsWelcomeOut 0.6s ease forwards; pointer-events: none; }
html.pms-welcome-on, html.pms-welcome-on body { overflow: hidden; }
.pms-welcome-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; max-width: 32rem; }
.pms-welcome-mascot { margin-bottom: 0.4rem; animation: pmsWelcomeHop 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) 0.1s both; }
.pms-welcome-mascot .pms-mascot { width: 200px; height: 200px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.18)); }
.pms-welcome-kicker { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text, var(--accent)); animation: pmsWelcomeRise 0.5s ease 0.35s both; }
.pms-welcome-title { margin: 0; font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-strong); animation: pmsWelcomeRise 0.55s ease 0.45s both; }
.pms-welcome-wish { margin: 0.2rem 0 0; font-size: 1.15rem; color: var(--ink-soft); animation: pmsWelcomeRise 0.55s ease 0.6s both; }
.pms-welcome-date { margin: 0.6rem 0 0; padding: 0.45rem 1rem; border-radius: 999px; font-size: 0.875rem; color: var(--ink-soft);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.35)); border: 1px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06); animation: pmsWelcomeRise 0.55s ease 0.75s both; }
.pms-welcome-date strong { color: var(--ink-strong); }
.pms-welcome-skip { margin-top: 1.1rem; padding: 0.5rem 1.1rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-muted); font: inherit; font-size: 0.8125rem; cursor: pointer; animation: pmsWelcomeRise 0.5s ease 1.1s both; }
.pms-welcome-skip:hover, .pms-welcome-skip:focus-visible { background: var(--surface-soft); color: var(--ink-strong); }
[data-theme="dark"] .pms-welcome-date { background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)); border-color: rgba(255, 255, 255, 0.14); }
@keyframes pmsWelcomeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmsWelcomeOut { to { opacity: 0; transform: scale(1.02); } }
@keyframes pmsWelcomeHop { from { opacity: 0; transform: translateY(30px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes pmsWelcomeRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pms-welcome, .pms-welcome-mascot, .pms-welcome-kicker, .pms-welcome-title, .pms-welcome-wish, .pms-welcome-date, .pms-welcome-skip { animation: none; }
  .pms-welcome.is-leaving { animation: pmsWelcomeIn 0.3s ease reverse forwards; }
}
@media (max-width: 640px) { .pms-welcome-mascot .pms-mascot { width: 160px; height: 160px; } }

/* Welcome: the mascot speaks */
.pms-welcome-sound { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border: 1px solid var(--border-hairline); border-radius: 50%; background: var(--surface); font-size: 1.05rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.pms-welcome-sound:hover, .pms-welcome-sound:focus-visible { background: var(--surface-soft); }
.pms-welcome-hear { margin-top: 0.9rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.15rem; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-contrast, #fff); font: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px rgba(var(--accent-rgb, 243, 91, 37), 0.3); animation: pmsWelcomeRise 0.4s ease both; }
.pms-welcome-hear[hidden] { display: none; }
/* while it talks the mascot bobs gently, like speaking */
.pms-welcome.is-speaking .pms-welcome-mascot .pms-mascot { animation: pmsWelcomeTalk 0.42s ease-in-out infinite alternate; }
@keyframes pmsWelcomeTalk { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-5px) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .pms-welcome.is-speaking .pms-welcome-mascot .pms-mascot { animation: none; } }

/* Phones: the inbox chat box stays above the browser bar and the home indicator */
@media (max-width: 900px) {
  .app-content:has(.inbox-chat-mode) { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Phones: the logo sits in the header next to the menu button and opens the dashboard */
.topbar-brand { display: none; }
@media (max-width: 800px) {
  .topbar-brand { display: inline-flex; align-items: center; flex: 0 0 auto; height: 40px; padding: 0 0.35rem; margin-inline-end: auto; border-radius: 10px; }
  .topbar-brand img { display: block; height: 30px; width: auto; }
  .topbar-brand:active { background: var(--surface-soft); }
  [data-theme="dark"] .topbar-brand img { filter: brightness(0) invert(1); opacity: 0.92; }
}
@media (max-width: 380px) { .topbar-brand img { height: 26px; } }
/* Narrow phones: the bigger logo and every header button fit on one line (the avatar was
   pushed past the right edge) — a little less space between the header items */
@media (max-width: 420px) {
  .app-topbar { gap: 0.35rem; padding-inline: 0.6rem; }
  .topbar-brand { padding: 0 0.15rem; }
  .app-topbar-actions { gap: 0.2rem; }
  .app-topbar-actions > *:not(#userMenuRoot) > button, .app-topbar-actions > button { width: 32px; height: 32px; }
}

/* Proposal templates: the ready-made ones that come with the PMS */
.tpl-library { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: 16px; border: 1px dashed rgba(var(--accent-rgb, 243, 91, 37), 0.45); background: var(--accent-soft); }
.tpl-library-title { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text, var(--accent)); }
.tpl-library-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.6rem 0.75rem; border-radius: 12px; background: var(--surface); }
.tpl-library-item > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tpl-library-item strong { font-size: 0.9375rem; color: var(--ink-strong); }

/* Reports: date and period step sit at the end of the period tabs */
.report-tabs-row { flex-wrap: wrap; align-items: center; }
.report-tab-tools {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline-start: auto;
  min-width: 0;
}
.report-tab-tools .field.float { width: 15rem; flex: 0 0 15rem; margin: 0; }
.report-tab-tools .btn { flex: 0 0 auto; }
@media (max-width: 720px) {
  .report-tab-tools { width: 100%; margin-inline-start: 0; }
  .report-tab-tools .field.float { flex: 1 1 8rem; width: auto; }
}

/* Project credentials */
.cred-list { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.cred-card {
  min-width: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  background: var(--surface);
}
.cred-card-head { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.cred-card-head strong { min-width: 0; overflow-wrap: anywhere; color: var(--ink-strong); }
.cred-card-actions { display: flex; gap: 0.25rem; margin-inline-start: auto; flex: 0 0 auto; }
.cred-rows { display: grid; gap: 0.65rem; margin: 0.9rem 0 0; }
.cred-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.cred-row dt { margin: 0; color: var(--ink-muted); font-size: 0.8125rem; font-weight: 600; }
.cred-row dd {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
  color: var(--ink-strong);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.cred-row dd span,
.cred-row dd a { min-width: 0; overflow-wrap: anywhere; }
.cred-copy { flex: 0 0 auto; }
.cred-copy.is-on { color: var(--accent); }
@media (max-width: 640px) {
  .cred-row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

/* Project detail: List / Cards follows every section of this page */
html:not([data-hub-layout="cards"]) .project-view .project-detail-grid,
html:not([data-hub-layout="cards"]) .project-view .project-files-grid {
  grid-template-columns: minmax(0, 1fr);
}
html:not([data-hub-layout="cards"]) .project-view .project-file-card {
  flex-direction: row;
  align-items: center;
}
html:not([data-hub-layout="cards"]) .project-view .project-file-preview {
  width: 4.25rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
}
html:not([data-hub-layout="cards"]) .project-view .project-file-info {
  flex: 1 1 auto;
  border-top: 0;
  border-inline-start: 1px solid var(--border-hairline);
}
html:not([data-hub-layout="cards"]) .project-view .project-file-actions {
  flex: 0 0 auto;
  padding-inline-end: 0.65rem;
}
html[data-hub-layout="cards"] .project-view .milestone-list,
html[data-hub-layout="cards"] .project-view .task-list,
html[data-hub-layout="cards"] .project-view .risk-list,
html[data-hub-layout="cards"] .project-view .project-updates-list,
html[data-hub-layout="cards"] .project-view .activity-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 0.75rem;
  align-items: start;
}
html[data-hub-layout="cards"] .project-view .cred-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}
html[data-hub-layout="cards"] .project-view .cred-rows {
  gap: 0.4rem;
  margin-top: 0.65rem;
}
html[data-hub-layout="cards"] .project-view .cred-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.05rem;
}
html[data-hub-layout="cards"] .project-view .cred-row dd,
html[data-hub-layout="cards"] .project-view .cred-row dd span,
html[data-hub-layout="cards"] .project-view .cred-row dd a {
  line-height: 1.25;
}
@media (max-width: 1100px) {
  html[data-hub-layout="cards"] .project-view .cred-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  html[data-hub-layout="cards"] .project-view .cred-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
html[data-hub-layout="cards"] .project-view .task-row,
html[data-hub-layout="cards"] .project-view .milestone-card,
html[data-hub-layout="cards"] .project-view .risk-card,
html[data-hub-layout="cards"] .project-view .update-card,
html[data-hub-layout="cards"] .project-view .activity-item,
html[data-hub-layout="cards"] .project-view .cred-card {
  min-width: 0;
  height: 100%;
}
html[data-hub-layout="cards"] .project-view .task-list { align-items: stretch; }
html[data-hub-layout="cards"] .project-view .task-body { min-width: 0; }
html[data-hub-layout="cards"] .project-view .task-row {
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: start;
  height: auto;
  align-self: stretch;
  padding: 0.9rem 1rem 0.75rem;
}
html[data-hub-layout="cards"] .project-view .task-check { grid-column: 1; grid-row: 1; }
html[data-hub-layout="cards"] .project-view .task-body { grid-column: 2; grid-row: 1; }
html[data-hub-layout="cards"] .project-view .task-details {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
html[data-hub-layout="cards"] .project-view .task-actions {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.85rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-hairline);
}
.task-actions { align-items: center; }
.task-view-btn { margin-inline-end: auto; }

/* Loans: Outstanding / Settled / All at the end of the finance submenu */
.loan-balance-seg {
  flex: 0 0 auto;
  margin-inline-start: auto;
  background: transparent;
  padding: 0;
  gap: 0.15rem;
}
.loan-balance-seg .seg-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}
.loan-balance-count {
  min-width: 1.25rem;
  padding: 0 0.4rem;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.loan-balance-seg .seg-item.is-active {
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  box-shadow: none;
}
.loan-balance-seg .seg-item.is-active .loan-balance-count {
  background: color-mix(in srgb, var(--accent-contrast, #fff) 24%, transparent);
  color: var(--accent-contrast, #fff);
}
@media (max-width: 720px) {
  .finance-tabs-row.is-loans {
    flex-wrap: wrap;
  }
  .finance-tabs-row.is-loans .sticky-tabs {
    flex: 1 1 0;
    min-width: 0;
    order: 0;
  }
  .finance-tabs-row.is-loans .finance-quick-entry-btn {
    order: 1;
  }
  .finance-tabs-row.is-loans .loan-balance-seg {
    order: 2;
    flex: 1 0 100%;
    margin-inline-start: 0;
  }
}

/* Settings → Storage */
.storage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
}
.storage-head h3 { margin: 0; }
.storage-panel > .muted { margin: 0 0 0.85rem; }
.storage-layout-seg { flex: 0 0 auto; }
.storage-layout-seg .seg-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.storage-layout-seg .seg-item [data-ico] { width: 14px; height: 14px; }
.storage-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.75rem;
}
.storage-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 8.5rem);
  gap: 0.35rem 0.75rem;
  align-items: end;
  min-width: 0;
  padding: 0.7rem 0;
  border-top: 1px solid var(--border-hairline);
}
.storage-panel[data-layout="list"] .storage-rule:nth-child(-n+2) {
  border-top: 0;
  padding-top: 0;
}
.storage-panel .form-actions { margin-top: 1rem; }
.storage-panel[data-layout="cards"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.storage-panel[data-layout="cards"] .storage-rules {
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 0.75rem;
}
.storage-panel[data-layout="cards"] .storage-rule {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-card);
  background: var(--surface);
}
@media (max-width: 720px) {
  .storage-head { align-items: flex-start; }
  .storage-panel[data-layout="list"] .storage-rules { grid-template-columns: minmax(0, 1fr); }
  .storage-panel[data-layout="list"] .storage-rule:nth-child(2) {
    border-top: 1px solid var(--border-hairline);
    padding-top: 0.7rem;
  }
  .storage-rule { grid-template-columns: minmax(0, 1fr); }
}

/* Settings → Email: when Reports emails go out. Desktop is two rows. */
.report-mail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.75rem;
}
.report-mail-rule {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--border-hairline);
}
.report-mail-list > .report-mail-rule:nth-child(-n + 2) {
  border-top: 0;
  padding-top: 0;
}
.report-mail-rule > .field.check { flex: 0 0 auto; margin: 0 0 0.55rem; }
.report-mail-fields {
  flex: 1 1 auto;
  display: flex;
  gap: 0.75rem;
  min-width: 0;
}
.report-mail-fields > .field { flex: 1 1 0; min-width: 0; }
@media (max-width: 720px) {
  .report-mail-list { grid-template-columns: minmax(0, 1fr); }
  .report-mail-list > .report-mail-rule:nth-child(2) {
    border-top: 1px solid var(--border-hairline);
    padding-top: 0.85rem;
  }
}

/* SMTP fields: a short port, encryption sized to its longest option, emails wider. */
#emailSettingsForm .smtp-fields {
  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    5.75rem
    minmax(0, 1.15fr)
    minmax(0, 1fr)
    14.75rem
    minmax(0, 1.85fr)
    minmax(0, 1.05fr);
  align-items: end;
}
#emailSettingsForm .smtp-fields > .is-test {
  grid-column: 1 / 3;
  max-width: 22rem;
}
@media (max-width: 1180px) {
  #emailSettingsForm .smtp-fields {
    grid-template-columns: minmax(0, 1.5fr) 5.75rem minmax(0, 1.2fr) minmax(0, 1fr) minmax(11rem, 14.75rem);
  }
  #emailSettingsForm .smtp-fields > .is-from-email { grid-column: 1 / 3; }
  #emailSettingsForm .smtp-fields > .is-from-name { grid-column: 3 / 5; }
  #emailSettingsForm .smtp-fields > .is-test { grid-column: 5 / 6; max-width: none; }
}
@media (max-width: 640px) {
  #emailSettingsForm .smtp-fields { grid-template-columns: minmax(0, 1fr); }
  #emailSettingsForm .smtp-fields > .is-from-email,
  #emailSettingsForm .smtp-fields > .is-from-name,
  #emailSettingsForm .smtp-fields > .is-test {
    grid-column: auto;
    max-width: none;
  }
}

/* Settings forms other than SMTP: width follows the value, not an even grid. */
#generalSettingsForm .form-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem 1rem;
}
#generalSettingsForm .form-grid > .field { min-width: 0; }
#generalSettingsForm .is-name { flex: 0 1 16rem; }
#generalSettingsForm .is-url { flex: 1 1 22rem; max-width: 36rem; }
#generalSettingsForm .is-desc,
#generalSettingsForm .is-address { flex: 1 0 100%; }
#generalSettingsForm .is-email { flex: 1 1 18rem; max-width: 28rem; }
#generalSettingsForm .is-phone { flex: 0 1 14rem; }
#generalSettingsForm .is-tz { flex: 1 1 22rem; max-width: 34rem; }
#generalSettingsForm .is-ver { flex: 0 0 8.5rem; }
#generalSettingsForm .is-clock { flex: 0 1 16rem; }

#storeSettingsForm .form-grid {
  grid-template-columns: 8.75rem minmax(12rem, 16rem) minmax(0, 1fr);
  justify-content: start;
}
#storeSettingsForm .is-note {
  grid-column: 1 / -1;
  max-width: 42rem;
}

#walletSettingsForm .form-grid {
  grid-template-columns: 11rem minmax(14rem, 22rem);
  justify-content: start;
  margin: 0.35rem 0 1rem;
}
.maint-settings .form-grid {
  grid-template-columns: minmax(12rem, 18rem) minmax(14rem, 20rem);
  justify-content: start;
}
.maint-settings .is-message {
  grid-column: 1 / -1;
  max-width: 40rem;
}

.settings-checks {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  gap: 0.35rem 2.25rem;
  margin-bottom: 1rem;
}
.settings-checks .field.check > span {
  flex: 0 1 auto;
}
.settings-checks.is-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.35rem;
  margin-bottom: 0.35rem;
}
.settings-checks.is-inline .settings-break {
  flex-basis: 100%;
  height: 0;
}
.settings-checks.is-inline .is-span {
  flex: 0 1 auto;
}
.settings-checks.is-inline .field.check > span {
  flex: 0 1 auto;
}
.system-currency-row > .field {
  flex: 0 1 26rem;
  min-width: min(100%, 16rem);
}
.system-currency-row > .field select {
  width: 100%;
}

@media (max-width: 980px) {
  #generalSettingsForm .is-url,
  #generalSettingsForm .is-email,
  #generalSettingsForm .is-tz { max-width: none; }
}
@media (max-width: 720px) {
  #walletSettingsForm .settings-checks { grid-template-columns: minmax(0, 1fr); }
  #storeSettingsForm .is-note,
  .maint-settings .is-message { max-width: none; }
}
@media (max-width: 640px) {
  #storeSettingsForm .form-grid,
  #walletSettingsForm .form-grid,
  .maint-settings .form-grid { grid-template-columns: minmax(0, 1fr); }
  #generalSettingsForm .form-grid > .field { flex: 1 0 100%; max-width: none; }
  #storeSettingsForm .is-note,
  .maint-settings .is-message { grid-column: auto; max-width: none; }
}

/* Registered account introduction, using the shared theme and shell. */
.registration-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.prospect-dashboard { display: grid; gap: 1.5rem; max-width: 1200px; margin-inline: auto; }
.prospect-hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2rem; padding: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.prospect-hero h1 { font-size: clamp(1.65rem, 3vw, 2.5rem); line-height: var(--leading-display); letter-spacing: var(--tracking-display); margin: 1rem 0; overflow-wrap: anywhere; }
.prospect-hero h2 { font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: var(--leading-title); margin: 0 0 1rem; }
.prospect-dashboard p { color: var(--ink-muted); line-height: var(--leading-body); }
.prospect-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.prospect-start-card { background: var(--surface-soft); border-radius: var(--r-inner); padding: 1.5rem; min-width: 0; }
.prospect-start-card .badge { white-space: normal; }
.prospect-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.prospect-benefit { padding: 1.5rem; }
.prospect-benefit > i { color: var(--accent-text); width: 1.5rem; height: 1.5rem; }
.prospect-benefit h3 { margin: 1rem 0 .75rem; font-size: 1.05rem; line-height: var(--leading-title); }
.prospect-benefit p { margin: 0 0 1rem; }
.prospect-process { padding: 1.5rem; }
.prospect-process h2, .prospect-contact h2 { font-size: 1.25rem; margin: 0 0 1rem; }
.prospect-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-left: 1.5rem; margin-bottom: 0; }
.prospect-steps li { padding-left: .25rem; }
.prospect-steps li::marker { color: var(--accent-text); font-weight: 700; }
.prospect-steps p { margin-bottom: 0; }
.prospect-contact { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; padding: 1.5rem; }
.prospect-contact > div { min-width: 0; }
.prospect-contact .btn { flex-shrink: 0; }
.prospect-contact p { margin: 0; }
.prospect-admin-note { padding: .75rem 1rem; margin-bottom: 1rem; }
.prospect-admin-note p { margin: 0; }
.prospect-dashboard .btn { white-space: normal; text-align: center; }
i[data-ico="whatsapp"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a9 9 0 0 1-13.4 7.9L3 21l1.6-4.6A9 9 0 1 1 21 11.5Z'/%3E%3Cpath d='m8 7 2 3-1 1c1 2 2 3 4 4l1-1 3 2c-1 3-4 2-7-1S6 8 8 7Z'/%3E%3C/svg%3E"); -webkit-mask-image: var(--ico); mask-image: var(--ico); }
@media (max-width: 1000px) {
  .prospect-hero { grid-template-columns: minmax(0, 1fr); }
  .prospect-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prospect-contact { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .prospect-benefits, .prospect-steps { grid-template-columns: minmax(0, 1fr); }
  .prospect-steps { gap: 1.25rem; }
  .prospect-actions { align-items: stretch; flex-direction: column; }
  .prospect-contact .btn { width: 100%; }
}

/* Shared administrator account details / role control. */
.account-role-panel { padding: 1.25rem; margin-bottom: 1rem; }
.account-role-panel h3 { margin-top: 0; }
.account-role-panel form { max-width: 38rem; }