/* ==========================================================================
   TESSLY CRM — SIMPLE CENTERED LOGIN WITH PROFESSIONAL CRM BACKGROUND
   ========================================================================== */

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

/* Full-Screen Centered Container with Professional CRM Background */
main.signin.signin--v2 {
  min-height: 100dvh !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background-color: #0b0f19 !important;
}

/* Professional CRM Background Image Layer */
.signin__bg-layer {
  position: absolute;
  inset: 0;
  background-image: url('/assets/crm-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  z-index: 1;
}

/* Frosted Backdrop Tint & Blur Overlay */
.signin__bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.72) 0%, rgba(10, 15, 30, 0.88) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
}

[data-theme="light"] .signin__bg-overlay {
  background: radial-gradient(circle at 50% 50%, rgba(241, 245, 249, 0.78) 0%, rgba(226, 232, 240, 0.88) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Centered Glassmorphic Login Container */
.signin__centered-box {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 440px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  box-shadow: 
    0 25px 60px -15px rgba(15, 23, 42, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 1px 1px rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  padding: 34px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  animation: fadeInModal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-theme="dark"] .signin__centered-box {
  background: rgba(17, 24, 39, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 30px 70px -15px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

@keyframes fadeInModal {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Card Top Bar: Status + Theme Toggle */
.signin__top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -4px;
}

.signin__hub-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  background: var(--well);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 999px;
}

.signin__hub-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseBeacon 1.8s infinite ease-in-out;
}

@keyframes pulseBeacon {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.8); opacity: 0.5; }
}

.signin__theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--well);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.signin__theme-btn:hover {
  background: var(--card);
  border-color: var(--line-2);
  transform: translateY(-1px);
}

/* Header & Brand Emblem */
.signin__card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.signin__card-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1e3fae 0%, #2c52cf 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(44, 82, 207, 0.35);
  margin-bottom: 2px;
}

.signin__card-icon-wrap .brand__mark svg {
  width: 24px;
  height: 24px;
  stroke: #ffffff;
  stroke-width: 2;
  fill: none;
}

.signin__card-title {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}

.signin__card-desc {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}

/* 1-Click Executive Profile Switcher */
.signin__rep-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--well);
  padding: 11px;
  border-radius: 16px;
  border: 1px solid var(--line);
}

.signin__rep-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.signin__rep-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.signin__rep-hint {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary);
}

.signin__rep-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.signin__rep-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 9px 5px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.signin__rep-item:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.signin__rep-item.is-selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: 0 0 0 2px var(--primary);
}

.signin__rep-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
}

.signin__rep-role {
  font-size: 9px;
  color: var(--muted);
}

.signin__rep-check {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 9px;
  font-weight: 800;
  color: var(--primary);
}

/* Fields & Inputs */
.signin__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
}

.signin__domain-chip {
  background: var(--well);
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  border-radius: 5px;
  padding: 2px 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.signin__domain-chip:hover {
  background: var(--primary);
  color: #ffffff;
}

.signin__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.signin__input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  font-size: 13.5px;
  color: var(--text);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.signin__input:focus {
  border-color: var(--primary);
  outline: none;
  background: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.signin__eye-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.65;
  padding: 4px;
  transition: opacity 0.15s;
}

.signin__eye-btn:hover {
  opacity: 1;
}

.signin__pass-meter {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}

.signin__pass-meter.is-weak {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.signin__pass-meter.is-good {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.signin__pass-meter.is-strong {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

/* Options */
.signin__options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.signin__checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  font-weight: 500;
}

.signin__checkbox {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  accent-color: var(--primary);
  cursor: pointer;
}

.signin__forgot-btn {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
}

.signin__forgot-btn:hover {
  text-decoration: underline;
}

/* Action Buttons */
.signin__actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 4px;
}

.signin__submit-btn {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #1e3fae 0%, #2c52cf 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(44, 82, 207, 0.3);
}

.signin__submit-btn:hover {
  background: linear-gradient(135deg, #18338f 0%, #2346b8 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 82, 207, 0.4);
}

.signin__btn-arrow {
  transition: transform 0.2s ease;
}

.signin__submit-btn:hover .signin__btn-arrow {
  transform: translateX(4px);
}

.signin__guest-btn {
  width: 100%;
  height: 40px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  border: 1px solid var(--line);
  background: var(--well);
  cursor: pointer;
  transition: all 0.15s ease;
}

.signin__guest-btn:hover {
  background: var(--card-2);
  border-color: var(--primary);
  color: var(--primary);
}

.signin__card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
  text-align: center;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

/* Bottom Hub Location Selector */
.signin__hub-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.signin__hub-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.signin__hub-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--well);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.signin__hub-pill:hover {
  color: var(--text);
  border-color: var(--line-2);
}

.signin__hub-pill.is-active {
  background: var(--card);
  color: var(--primary);
  font-weight: 800;
  border-color: var(--primary);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 15%, transparent);
}

/* ==========================================================================
   HEADER AS CONTAINER UI/UX (Matching Floating Sidebar Aesthetic)
   ========================================================================== */
header.top,
.top {
  position: sticky !important;
  top: var(--side-x, 14px) !important;
  z-index: 40 !important;
  margin: var(--side-x, 14px) 0 20px 0 !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 20px !important;
  border-radius: 20px !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 
    0 10px 28px -10px rgba(15, 23, 42, 0.08),
    0 2px 6px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease !important;
}

[data-theme="dark"] header.top,
[data-theme="dark"] .top {
  background: rgba(21, 26, 34, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 
    0 16px 36px -12px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Scrolled elevation */
html.is-scrolled header.top,
html.is-scrolled .top {
  box-shadow: 
    0 18px 42px -12px rgba(15, 23, 42, 0.16),
    0 3px 8px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] html.is-scrolled header.top,
[data-theme="dark"] html.is-scrolled .top {
  box-shadow: 
    0 22px 50px -12px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Adjust Main padding-top so content sits comfortably below container */
#main {
  padding-top: 0 !important;
}

/* Inner elements refinement inside container header */
header.top .top__page,
.top .top__page {
  display: block !important;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-left: 8px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
/* Page header container restored on every page (animated title card); the title is shown there, not in the top bar. */
header.top .top__page, .top .top__page { display: none !important; }

header.top .search,
.top .search {
  width: 340px !important;
  max-width: 420px !important;
  background: var(--well) !important;
  border: 1px solid var(--line) !important;
  height: 40px !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  font-size: 13.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  flex: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

header.top .search:hover,
.top .search:hover {
  border-color: var(--line-2) !important;
  background: var(--card) !important;
  color: var(--text) !important;
}

header.top .search:focus-within,
.top .search:focus-within {
  border-color: var(--primary) !important;
  background: var(--card) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important;
}

.top .search .ico {
  width: 16px !important;
  height: 16px !important;
  color: var(--faint) !important;
  flex-shrink: 0 !important;
}

.top .search > span:not(.kbd) {
  display: inline-block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}

.top .search .kbd {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  line-height: 1 !important;
}

[data-theme="dark"] .top .search .kbd {
  background: #1e2638 !important;
  border-color: #2e384d !important;
  color: #94a3b8 !important;
}

.top .top__spacer {
  flex: 1 !important;
  display: block !important;
}

.top .top__clock {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  padding: 6px 14px !important;
  background: var(--well) !important;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.top .top__clock .live-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--good, #17905e) !important;
}

.top .btn--primary.top__new {
  height: 40px !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border: none !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 30%, transparent) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.top .btn--primary.top__new:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 45%, transparent) !important;
}

.top .ibtn.top__theme,
.top .ibtn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: var(--well) !important;
  color: var(--text) !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.top .ibtn:hover {
  background: var(--card-2) !important;
  border-color: var(--line-2) !important;
  transform: translateY(-1px) !important;
}

.top .top__sidebar-toggle {
  flex-shrink: 0 !important;
  margin-right: 2px !important;
}

.top .top__sidebar-toggle .ico,
.top .top__sidebar-toggle svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--text) !important;
  color: var(--text) !important;
}

.top .ibtn.bell .bell__badge {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  background: var(--bad, #dc2626) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 16px !important;
  height: 16px !important;
  border: 2px solid var(--card) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 3px !important;
  line-height: 1 !important;
}

.top .me-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.top .me-btn:hover {
  transform: scale(1.08) !important;
}

.top .me-btn .av {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--primary) 18%, var(--card)) !important;
  color: var(--primary-ink) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  display: grid !important;
  place-items: center !important;
}

[data-theme="dark"] .top .me-btn .av {
  background: #1e293b !important;
  color: #93c5fd !important;
  border-color: #3b82f6 !important;
}

@media (max-width: 760px) {
  header.top,
  .top {
    margin: 8px 0 12px 0 !important;
    border-radius: 16px !important;
    padding: 0 12px !important;
    height: 54px !important;
    min-height: 54px !important;
    gap: 8px !important;
  }
  .top .search {
    flex: 1 !important;
    width: auto !important;
  }
  .top .top__clock {
    display: none !important;
  }
}



/* ==========================================================================
   ADMIN SETTINGS & PLATFORM CONFIGURATION (16 SECTIONS)
   ========================================================================== */

.admin-hub {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.admin-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 14px 20px;
  font-size: var(--fs-sm);
}

.admin-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #10b981;
}

.admin-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.admin-sections-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  background: var(--card) !important;
  padding: 14px 28px 18px 28px !important;
  border: 1px solid var(--line) !important;
  border-top: 1px solid var(--line-2, rgba(20, 28, 45, 0.08)) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: var(--r-card, 20px) !important;
  border-bottom-right-radius: var(--r-card, 20px) !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  box-shadow: 
    0 10px 28px -10px rgba(15, 23, 42, 0.08),
    0 2px 6px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

[data-theme="dark"] .admin-sections-nav {
  background: var(--card) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.7) !important;
}

.admin-sec-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 13px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: var(--card-2, rgba(20, 28, 45, 0.04)) !important;
  color: var(--muted) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
}

[data-theme="dark"] .admin-sec-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--muted) !important;
}

.admin-sec-btn:hover {
  background: var(--line) !important;
  color: var(--text) !important;
  border-color: var(--line-2) !important;
}

.admin-sec-btn.is-active {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

.admin-sec-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  margin-left: 4px;
}

.admin-field-desc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  display: block;
  line-height: 1.4;
}

.admin-subhead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0 10px;
  margin-top: 14px;
  border-top: 1px solid var(--line-2);
}
.admin-subhead b {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.admin-subhead .admin-field-desc {
  margin-top: 0;
  flex: 1;
}

.admin-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border: 1px solid var(--line-2);
}

.admin-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-tax-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: var(--fs-sm);
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-2);
}

.admin-tax-table th, .admin-tax-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
}

.admin-tax-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: color-mix(in srgb, var(--card) 90%, black);
}

.admin-tax-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.admin-tax-badge.standard {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.admin-tax-badge.zero {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.admin-tax-badge.exempt {
  background: rgba(99, 102, 241, 0.15);
  color: #6366f1;
}

/* ==========================================================================
   Aedentek CRM — Invoices & Commercial Propagations High-Fidelity Printable Documents & Styles
   ========================================================================== */

.printable-invoice-sheet {
  background: #ffffff;
  color: #1e293b;
  width: 100%;
  max-width: 794px;
  min-height: 1050px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.printable-invoice-sheet table {
  width: 100%;
  border-collapse: collapse;
}

.printable-invoice-sheet th {
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  border-bottom: 2px solid #e2e8f0;
}

.printable-invoice-sheet td {
  padding: 12px 14px;
  font-size: 13px;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
}

.printable-invoice-sheet tfoot td {
  padding: 8px 14px;
  font-size: 13px;
  border-bottom: 0;
}

.printable-seal-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #4d33b6;
  border-radius: 50%;
  width: 82px;
  height: 82px;
  color: #4d33b6;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(77, 51, 182, 0.04);
}

.fi-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.fi-badge-pill.paid, .fi-badge-pill.accepted {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.fi-badge-pill.partially, .fi-badge-pill.sent {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.fi-badge-pill.overdue, .fi-badge-pill.declined {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.fi-badge-pill.draft {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.fi-regime-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--card-2, rgba(255, 255, 255, 0.06));
  color: var(--muted, #94a3b8);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
}

/* ==========================================================================
   GLOBAL THEMED CONTAINER UI/UX FOR PAGE HEADER & INTEGRATED SECTION TABS
   ========================================================================== */
.phead {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 20px) !important;
  padding: 24px 28px !important;
  margin: 16px 0 24px 0 !important;
  box-shadow: 
    0 10px 28px -10px rgba(15, 23, 42, 0.06),
    0 2px 6px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .phead {
  background: var(--card) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 
    0 14px 32px -12px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.phead:has(+ .tabs) {
  border-bottom: 1px solid var(--line) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 20px !important;
  box-shadow: 
    0 4px 16px -6px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .phead:has(+ .tabs) {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 
    0 6px 18px -6px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.phead + .tabs,
.tabs {
  display: flex !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-top: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: var(--r-card, 20px) !important;
  border-bottom-right-radius: var(--r-card, 20px) !important;
  padding: 0 28px !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  box-shadow: 
    0 10px 28px -10px rgba(15, 23, 42, 0.08),
    0 2px 6px rgba(15, 23, 42, 0.04) !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
}

/* Connect seamlessly when tabs is followed by 13 points shelf in top container */
.tabs:has(+ .admin-sections-nav),
.phead + .tabs:has(+ .admin-sections-nav) {
  border-bottom: 1px solid var(--line-2, rgba(20, 28, 45, 0.08)) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .phead + .tabs,
[data-theme="dark"] .tabs {
  background: var(--card) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-top: none !important;
  box-shadow: 
    0 16px 36px -12px rgba(0, 0, 0, 0.7) !important;
}

.tabs .tab {
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  position: relative !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  transition: color 0.15s ease !important;
  white-space: nowrap !important;
}

.tabs .tab:hover {
  color: var(--text) !important;
}

.tabs .tab.is-active {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

/* Suppress duplicate tab pseudo-element underline; single indicator bar is powered by .tabs__bar */
.tabs .tab.is-active::after {
  display: none !important;
  content: none !important;
}

/* Ensure full-width container layout matching header and navigation across all sections */
.st-section,
.admin-hub,
.admin-status-banner,
.admin-sections-nav,
.finance-settings-hub,
.st-grid {
  max-width: 100% !important;
  width: 100% !important;
}

.phead .crumbs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
}

.phead .crumbs a {
  color: var(--muted) !important;
  transition: color 0.15s ease !important;
}

.phead .crumbs a:hover {
  color: var(--primary) !important;
}

.phead__sub {
  color: var(--muted) !important;
  font-size: 14px !important;
  margin-top: 6px !important;
  line-height: 1.5 !important;
}

@media (max-width: 768px) {
  .phead {
    padding: 18px 20px !important;
  }
}

/* Full-height layout for Inbox view without top PageHeader */
.page.ib {
  padding-top: 0 !important;
}

.ib-grid {
  height: calc(100dvh - var(--top-h, 68px) - 52px) !important;
  max-height: calc(100dvh - var(--top-h, 68px) - 40px) !important;
  margin-top: 4px !important;
}

@media print {
  body * {
    visibility: hidden;
  }
  #printable-invoice-doc, #printable-invoice-doc *,
  #printable-propagation-doc, #printable-propagation-doc *,
  .spec-sheet, .spec-sheet * {
    visibility: visible;
  }
  #printable-invoice-doc, #printable-propagation-doc, .spec-sheet {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
  }
}


/* ==========================================================================
   GLOBAL TABULAR COLUMN SYSTEM (UNIFIED HIGH-FIDELITY DESIGN ACROSS CRM)
   ========================================================================== */

/* 1. Global Table and Container Styles */
.card:has(.table),
.card:has(.table-wrap),
.card.card--flush {
  border-radius: var(--r-card, 20px) !important;
  border: 1px solid var(--line) !important;
  background: var(--card) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Hide redundant card header block on table cards so toolbar is directly at top */
.card:has(.table) > .card__head,
.card:has(.table-wrap) > .card__head,
.card:has(.toolbar) > .card__head {
  display: none !important;
}

/* 2. Global Integrated Master Table Toolbar (Single Straight Row, Perfectly Aligned) */
.card > .toolbar,
.card > div > .toolbar,
.client-master-toolbar,
.master-table-toolbar,
.fi-toolbar,
.acct-toolbar,
.hr-toolbar {
  padding: 14px 20px !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: nowrap !important; /* Keeps toolbar in one clean straight horizontal line */
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--card) !important;
  min-height: 66px !important;
  box-sizing: border-box !important;
}

/* 3. Global Searchbar UI/UX (Pixel-Perfect Straight Alignment of Icon, Text, and Box) */
.toolbar__search,
.toolbar .toolbar__search,
.acct-toolbar .toolbar__search,
.hr-toolbar .toolbar__search,
.client-master-toolbar .toolbar__search {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-width: 320px !important;
  max-width: 440px !important;
  width: 380px !important;
  height: 38px !important;
  flex: 0 1 380px !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

.toolbar__search .ico,
.toolbar__search svg {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  translate: none !important; /* CRITICAL: overrides translate: 0 -50% to prevent double-translation misalignment */
  width: 16px !important;
  height: 16px !important;
  color: var(--muted) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: 0.85 !important;
  margin: 0 !important;
}

.toolbar__search .input,
.toolbar__search input[type="search"],
.toolbar__search input[type="text"],
.toolbar__search input {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  line-height: 36px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 14px 0 38px !important; /* Exactly 38px clears 16px icon at left:14px with 8px margin */
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background-color: var(--card-2) !important;
  color: var(--text) !important;
  font-size: var(--fs-xs, 12.5px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  outline: none !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  display: block !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}

.toolbar__search .input::placeholder,
.toolbar__search input::placeholder {
  color: var(--muted) !important;
  font-size: var(--fs-xs, 12.5px) !important;
  font-weight: 500 !important;
  opacity: 0.8 !important;
  line-height: normal !important;
}

.toolbar__search .input:hover,
.toolbar__search input:hover {
  border-color: var(--line-2, rgba(20, 28, 45, 0.22)) !important;
  background-color: var(--card-2) !important;
}

.toolbar__search .input:focus,
.toolbar__search input:focus {
  background-color: var(--card) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

/* Toolbar search on left and controls pushed cleanly to right */
.acct-toolbar > :first-child,
.hr-toolbar > :first-child {
  margin-right: auto !important;
}

/* 4. Global Theme Filter Dropdowns and Date Inputs */
.toolbar select,
.toolbar .select,
.client-category-select,
.table-filter-select,
.acct-filter,
.hr-filter {
  height: 38px !important;
  width: auto !important;
  min-width: 135px !important;
  background-position: calc(100% - 14px) 16px, calc(100% - 9px) 16px !important;
  padding: 0 32px 0 12px !important;
  font-size: var(--fs-xs) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background-color: var(--card-2) !important;
  color: var(--text) !important;
  cursor: pointer !important;
  outline: none !important;
  appearance: none !important;
}

.toolbar input[type="date"],
.toolbar input[type="month"],
.acct-toolbar input[type="date"],
.hr-toolbar input[type="month"],
input.acct-date,
input.hr-filter {
  width: auto !important;
  min-width: 130px !important;
  max-width: 170px !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background-color: var(--card-2) !important;
  color: var(--text) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 600 !important;
  padding: 0 12px !important;
  outline: none !important;
  flex: 0 0 auto !important;
}

/* 4. Global Tabular Column Headers (Centered, Sub-Heading Typography) */
.table:not(.printable-invoice-sheet table) thead th,
.cl-table thead th,
.fi-table thead th,
.dl-table thead th,
.rp-table thead th,
.admin-tax-table thead th {
  background: var(--card-2) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--line) !important;
  white-space: nowrap !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* 5. Global Tabular Column Body Values (Centered, Polished Line Height) */
.table:not(.printable-invoice-sheet table) tbody td,
.cl-table tbody td,
.fi-table tbody td,
.dl-table tbody td,
.rp-table tbody td,
.admin-tax-table tbody td {
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--line) !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  text-align: center !important;
  font-size: var(--fs-sm) !important;
}

/* 6. Global Row Hover States */
.table:not(.printable-invoice-sheet table) tbody tr,
.cl-table tbody tr,
.fi-table tbody tr,
.dl-table tbody tr,
.rp-table tbody tr,
.admin-tax-table tbody tr {
  transition: background 0.15s ease !important;
}

.table:not(.printable-invoice-sheet table) tbody tr:hover td,
.cl-table tbody tr:hover td,
.fi-table tbody tr:hover td,
.dl-table tbody tr:hover td,
.rp-table tbody tr:hover td,
.admin-tax-table tbody tr:hover td {
  background: var(--card-2) !important;
}

.table:not(.printable-invoice-sheet table) tbody tr:last-child td,
.cl-table tbody tr:last-child td,
.fi-table tbody tr:last-child td,
.dl-table tbody tr:last-child td,
.rp-table tbody tr:last-child td,
.admin-tax-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* 7. Global S NO Column & Squircle Badges */
.table:not(.printable-invoice-sheet table) th:first-child,
.table:not(.printable-invoice-sheet table) td:first-child,
.cl-table th:first-child,
.cl-table td:first-child,
.fi-table th:first-child,
.fi-table td:first-child,
.dl-table th:first-child,
.dl-table td:first-child,
.rp-table th:first-child,
.rp-table td:first-child,
.admin-tax-table th:first-child,
.admin-tax-table td:first-child,
th.col-sno,
td.col-sno {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  text-align: center !important;
}

.sno-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.sno-pill--top,
.sno-pill--normal {
  background: var(--accent, #d7e262) !important;
  color: #1c2612 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  border: none !important;
}

/* 8. Global Centered Action Buttons & Icons */
.table:not(.printable-invoice-sheet table) td:last-child button,
.cl-table td:last-child button,
.fi-table td:last-child button,
.dl-table td:last-child button,
.rp-table td:last-child button,
.admin-tax-table td:last-child button,
.acct-actions-cell button,
.hr-actions-cell button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 auto !important;
  white-space: nowrap !important;
}

.acct-actions-cell,
.hr-actions-cell {
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.acct-row-actions,
.hr-row-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 auto !important;
}

/* ==========================================================================
   SIDEBAR CLEANUP (REMOVE SIDEBAR COUNTING BADGES GLOBALLY)
   ========================================================================== */
.side .nav__count,
.side__nav .nav__count,
.side .nav__item .nav__count,
.nav__item > .nav__count {
  display: none !important;
}

/* ==========================================================================
   GLOBAL ACTION BUTTONS — ICON ONLY WITH SEMANTIC COLOR SYSTEM
   Every table row action button across all pages: icon only, no text, with
   distinct semantic color themes for Edit, Collect, Print, Delete, View, etc.
   ========================================================================== */

/* Base icon-only action button */
.action-btn,
.acct-row-actions > button,
.hr-row-actions > button,
.acct-actions-cell button.btn,
.hr-actions-cell button.btn,
td.acct-actions-cell button,
td.hr-actions-cell button {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  margin: 0 1.5px !important;
  vertical-align: middle !important;
}

.acct-row-actions,
.hr-row-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  margin: 0 auto !important;
  flex-wrap: nowrap !important;
}

.table th,
.table td {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* Ensure SVG icon inside is perfectly sized and centered */
.action-btn svg,
.action-btn .ico,
.acct-row-actions > button svg,
.hr-row-actions > button svg,
.acct-actions-cell button svg,
.hr-actions-cell button svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  stroke-width: 2 !important;
  fill: none !important;
  stroke: currentColor !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.action-btn:hover:not(:disabled) svg,
.acct-row-actions > button:hover:not(:disabled) svg,
.hr-row-actions > button:hover:not(:disabled) svg {
  transform: scale(1.15);
}

.action-btn:disabled,
.acct-row-actions > button:disabled,
.hr-row-actions > button:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  filter: grayscale(1) !important;
  pointer-events: none !important;
}

/* --- 1. EDIT BUTTON: Professional Indigo/Blue --- */
.action-btn--edit,
.acct-row-actions > button:first-child:not(.action-btn--delete):not(.action-btn--view):not(.action-btn--collect):not(.action-btn--print):not(.action-btn--reverse),
.hr-row-actions > button:first-child:not(.action-btn--delete):not(.action-btn--view):not(.action-btn--approve) {
  background: rgba(37, 99, 235, 0.09) !important;
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.22) !important;
}
.action-btn--edit:hover:not(:disabled),
.acct-row-actions > button:first-child:not(.action-btn--delete):not(.action-btn--view):not(.action-btn--collect):not(.action-btn--print):not(.action-btn--reverse):hover:not(:disabled),
.hr-row-actions > button:first-child:not(.action-btn--delete):not(.action-btn--view):not(.action-btn--approve):hover:not(:disabled) {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3) !important;
}

/* --- 2. COLLECT / PAYMENT / PAY / MARK PAID: Emerald Green --- */
.action-btn--collect,
.action-btn--pay {
  background: rgba(16, 185, 129, 0.11) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}
.action-btn--collect:hover:not(:disabled),
.action-btn--pay:hover:not(:disabled) {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3) !important;
}

/* --- 3. PRINT / SAVE PDF / PAYSLIP: Purple / Violet --- */
.action-btn--print {
  background: rgba(139, 92, 246, 0.11) !important;
  color: #7c3aed !important;
  border-color: rgba(139, 92, 246, 0.25) !important;
}
.action-btn--print:hover:not(:disabled) {
  background: #7c3aed !important;
  color: #ffffff !important;
  border-color: #7c3aed !important;
  box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3) !important;
}

/* --- 4. DELETE / REMOVE / REJECT: Crimson Red --- */
.action-btn--delete,
.action-btn--reject,
.acct-row-actions > button.btn--ghost:last-child,
.hr-row-actions > button.btn--ghost:last-child {
  background: rgba(239, 68, 68, 0.09) !important;
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
}
.action-btn--delete:hover:not(:disabled),
.action-btn--reject:hover:not(:disabled),
.acct-row-actions > button.btn--ghost:last-child:hover:not(:disabled),
.hr-row-actions > button.btn--ghost:last-child:hover:not(:disabled) {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3) !important;
}

/* --- 5. VIEW / PREVIEW / OPEN / OPEN 360°: Cyan / Sky Blue --- */
.action-btn--view,
.action-btn--open {
  background: rgba(6, 182, 212, 0.11) !important;
  color: #0891b2 !important;
  border-color: rgba(6, 182, 212, 0.25) !important;
}
.action-btn--view:hover:not(:disabled),
.action-btn--open:hover:not(:disabled) {
  background: #0891b2 !important;
  color: #ffffff !important;
  border-color: #0891b2 !important;
  box-shadow: 0 4px 10px rgba(6, 182, 212, 0.3) !important;
}

/* --- 6. APPROVE / POST / CONFIRM: Emerald Green --- */
.action-btn--approve,
.action-btn--post {
  background: rgba(16, 185, 129, 0.11) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}
.action-btn--approve:hover:not(:disabled),
.action-btn--post:hover:not(:disabled) {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3) !important;
}

/* --- 7. REVERSE / UNDO: Amber / Warm Orange --- */
.action-btn--reverse {
  background: rgba(245, 158, 11, 0.11) !important;
  color: #d97706 !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}
.action-btn--reverse:hover:not(:disabled) {
  background: #d97706 !important;
  color: #ffffff !important;
  border-color: #d97706 !important;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3) !important;
}

/* --- 8. APPLY / DEPRECIATE: Indigo --- */
.action-btn--apply,
.action-btn--depreciate {
  background: rgba(99, 102, 241, 0.11) !important;
  color: #4f46e5 !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
}
.action-btn--apply:hover:not(:disabled),
.action-btn--depreciate:hover:not(:disabled) {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3) !important;
}

/* --- DARK THEME ADJUSTMENTS --- */
[data-theme="dark"] .action-btn--edit,
[data-theme="dark"] .acct-row-actions > button:first-child:not(.action-btn--delete):not(.action-btn--view):not(.action-btn--collect):not(.action-btn--print):not(.action-btn--reverse),
[data-theme="dark"] .hr-row-actions > button:first-child:not(.action-btn--delete):not(.action-btn--view):not(.action-btn--approve) {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #60a5fa !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
}
[data-theme="dark"] .action-btn--collect,
[data-theme="dark"] .action-btn--pay,
[data-theme="dark"] .action-btn--approve,
[data-theme="dark"] .action-btn--post {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}
[data-theme="dark"] .action-btn--print {
  background: rgba(139, 92, 246, 0.18) !important;
  color: #a78bfa !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
}
[data-theme="dark"] .action-btn--delete,
[data-theme="dark"] .action-btn--reject,
[data-theme="dark"] .acct-row-actions > button.btn--ghost:last-child,
[data-theme="dark"] .hr-row-actions > button.btn--ghost:last-child {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}
[data-theme="dark"] .action-btn--view,
[data-theme="dark"] .action-btn--open {
  background: rgba(6, 182, 212, 0.18) !important;
  color: #22d3ee !important;
  border-color: rgba(6, 182, 212, 0.35) !important;
}
[data-theme="dark"] .action-btn--reverse {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
[data-theme="dark"] .action-btn--apply,
[data-theme="dark"] .action-btn--depreciate {
  background: rgba(99, 102, 241, 0.18) !important;
  color: #818cf8 !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
}

/* ========================================================================
   ADMIN SETTINGS PAGE - THEME-BASED UI/UX
   ======================================================================== */

.admin-form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.admin-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.admin-settings-grid > * {
  grid-column: span 1 !important;
}

.admin-settings-grid > .span-2 {
  grid-column: span 1 !important;
}

.admin-settings-grid > .span-3 {
  grid-column: span 1 !important;
}

/* Ensure all children of form grid follow grid layout */
.admin-settings-grid > div {
  grid-column: span 1;
}

.admin-settings-grid > div.span-2 {
  grid-column: span 2;
}

.admin-settings-grid > div.span-3 {
  grid-column: span 3;
}

.admin-settings-grid > .span-1 {
  grid-column: span 1;
}

/* Themed Input Fields */
.admin-input {
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.admin-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(215, 226, 98, 0.1);
}

.admin-input::placeholder {
  color: var(--muted);
}

/* Themed Select Fields */
.admin-select {
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(215, 226, 98, 0.1);
}

.admin-select option {
  background: var(--card);
  color: var(--text);
}

/* Themed Textarea Fields */
.admin-textarea {
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  transition: all 0.2s ease;
}

.admin-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(215, 226, 98, 0.1);
}

/* Field Labels */
.admin-field-label {
  font-weight: 500;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 6px;
  display: block;
}

.admin-field-label.required::after {
  content: ' *';
  color: var(--red, #ef4444);
}

/* Field Hints/Descriptions */
.admin-field-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  display: block;
  line-height: 1.4;
}

/* Field Wrapper */
label {
  display: flex;
  flex-direction: column;
}

/* Admin Section Fields Container */
.admin-section-fields {
  display: contents;
}

/* Form Actions */
.admin-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.admin-form-actions button {
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.admin-form-actions button[type="submit"] {
  background: var(--accent, #d7e262);
  color: var(--accent-text, #1c2612);
}

.admin-form-actions button[type="submit"]:hover:not(:disabled) {
  opacity: 0.9;
  box-shadow: 0 4px 12px rgba(215, 226, 98, 0.2);
}

.admin-form-actions button[type="button"] {
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--line);
}

.admin-form-actions button[type="button"]:hover {
  background: var(--line);
}

.admin-form-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Admin Section Cards */
.admin-section-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

/* Database Status Badge */
.admin-db-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 6px 10px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
}

.admin-db-status.connected {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.admin-db-status.disconnected {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Module Badge */
.admin-module-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  height: auto;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
}

/* Settings Loading State */
.admin-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--muted);
  font-size: 14px;
}

/* GST Rate Table */
.admin-gst-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.admin-gst-table th,
.admin-gst-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.admin-gst-table th {
  background: var(--card-2);
  font-weight: 600;
  color: var(--text);
}

.admin-gst-table tr:hover {
  background: var(--card-2);
}

.admin-gst-table button {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  border: none;
  background: var(--red, #ef4444);
  color: white;
  cursor: pointer;
}

.admin-gst-table button:hover {
  opacity: 0.8;
}


/* Admin Field Container - Takes up single grid cell */
.admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  grid-column: auto;
}

.admin-field.span-2 {
  grid-column: span 2;
}

.admin-field.span-3 {
  grid-column: span 3;
}

.admin-field label {
  display: block;
}

.admin-field input,
.admin-field select,
.admin-field textarea {
  width: 100%;
  box-sizing: border-box;
}


/* Force 3 columns per row - override all span classes */
.admin-form-grid > * {
  grid-column: span 1 !important;
}

.admin-form-grid .span-2 {
  grid-column: span 1 !important;
}

.admin-form-grid .span-3 {
  grid-column: span 1 !important;
}

/* Styled for admin-form-grid */
.admin-form-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .admin-settings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .admin-settings-grid > .span-2 {
    grid-column: span 2;
  }
  
  .admin-settings-grid > .span-3 {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .admin-settings-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-settings-grid > .span-2 {
    grid-column: span 1;
  }
  
  .admin-settings-grid > .span-3 {
    grid-column: span 1;
  }
  
  .admin-form-actions {
    flex-direction: column;
  }
  
  .admin-form-actions button {
    width: 100%;
  }
}


/* ========================================================================
   PROFESSIONAL LOGIN PAGE UI/UX REDESIGN
   ======================================================================== */

.signin {
  background: linear-gradient(135deg, var(--bg) 0%, var(--card) 100%);
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

/* Login container with glassmorphism effect */
.signin__container {
  width: 100%;
  max-width: 480px;
}

/* Enhanced signin card */
.signin__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 20px 60px -20px rgba(20, 26, 38, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 48px 40px;
  display: grid;
  gap: 28px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

/* Background decoration */
.signin__card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
  opacity: 0.04;
  border-radius: 50%;
  pointer-events: none;
}

/* Logo section */
.signin__header {
  display: grid;
  gap: 12px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.signin__logo {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary) 0%, #5c7cff 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 8px 24px -10px rgba(44, 82, 207, 0.3);
  color: white;
  font-size: 28px;
  font-weight: 700;
}

.signin__title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}

.signin__subtitle {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  margin: 0;
}

/* Form section */
.signin__form {
  display: grid;
  gap: 16px;
  position: relative;
  z-index: 1;
}

/* Form group */
.form-group {
  display: grid;
  gap: 8px;
}

.form-group__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
}

.form-group__input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: all 0.2s ease;
  font-family: inherit;
}

.form-group__input::placeholder {
  color: var(--faint);
}

.form-group__input:hover {
  border-color: var(--line-2);
  background: var(--raised);
}

.form-group__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(44, 82, 207, 0.1);
  background: var(--raised);
}

.form-group__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Error state */
.form-group.is-error .form-group__input {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

.form-group.is-error .form-group__input:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-group__error {
  font-size: 12px;
  color: #ef4444;
  font-weight: 600;
  display: none;
}

.form-group.is-error .form-group__error {
  display: block;
}

/* Checkbox group */
.form-group__checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.form-group__checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
}

/* Password reveal button */
.form-group__password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.form-group__password-toggle:hover {
  color: var(--text);
}

.form-group__password-wrapper {
  position: relative;
}

/* Remember & Forgot section */
.signin__options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 12px;
}

.signin__options a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.signin__options a:hover {
  color: var(--primary-ink);
  text-decoration: underline;
}

/* Submit button */
.signin__submit {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, var(--primary) 0%, #5c7cff 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px -10px rgba(44, 82, 207, 0.3);
  position: relative;
  overflow: hidden;
  margin-top: 8px;
}

.signin__submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px -12px rgba(44, 82, 207, 0.4);
}

.signin__submit:active:not(:disabled) {
  transform: translateY(0);
}

.signin__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.signin__submit.is-loading {
  position: relative;
  color: transparent;
}

.signin__submit.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Divider */
.signin__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 8px 0;
}

.signin__divider::before,
.signin__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Social login buttons */
.signin__socials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.signin__social-btn {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}

.signin__social-btn:hover {
  background: var(--well);
  border-color: var(--line-2);
}

.signin__social-btn svg {
  width: 16px;
  height: 16px;
}

/* Footer */
.signin__footer {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

.signin__footer a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.signin__footer a:hover {
  text-decoration: underline;
}

/* Status messages */
.signin__message {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  display: none;
  position: relative;
  z-index: 1;
}

.signin__message.is-show {
  display: block;
}

.signin__message.is-error {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.signin__message.is-success {
  background: rgba(27, 117, 71, 0.1);
  color: #1b7547;
  border: 1px solid rgba(27, 117, 71, 0.2);
}

.signin__message.is-info {
  background: rgba(44, 82, 207, 0.1);
  color: #2c52cf;
  border: 1px solid rgba(44, 82, 207, 0.2);
}

/* Link to signup */
.signin__signup-link {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  position: relative;
  z-index: 1;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.signin__signup-link a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.signin__signup-link a:hover {
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 480px) {
  .signin__card {
    padding: 36px 24px;
    border-radius: 20px;
    gap: 24px;
  }

  .signin__title {
    font-size: 24px;
  }

  .signin__logo {
    width: 52px;
    height: 52px;
  }

  .signin__submit {
    height: 46px;
    font-size: 14px;
  }

  .signin__socials {
    grid-template-columns: 1fr;
  }

  .signin__options {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Dark theme adjustments */
:root[data-theme="dark"] .signin__card {
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .signin__card::before {
  opacity: 0.06;
}

:root[data-theme="dark"] .signin__logo {
  box-shadow: 0 8px 24px -10px rgba(147, 171, 255, 0.2);
}

:root[data-theme="dark"] .signin__submit {
  box-shadow: 0 8px 24px -10px rgba(147, 171, 255, 0.2);
}

:root[data-theme="dark"] .signin__submit:hover:not(:disabled) {
  box-shadow: 0 12px 36px -12px rgba(147, 171, 255, 0.3);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .signin__submit,
  .signin__options a,
  .form-group__input,
  .signin__social-btn {
    transition: none;
  }

  .signin__submit:hover:not(:disabled) {
    transform: none;
  }

  @keyframes spin {
    to { transform: translate(-50%, -50%); }
  }
}

/* Focus visible for keyboard navigation */
.form-group__input:focus-visible,
.signin__submit:focus-visible,
.signin__social-btn:focus-visible,
.signin__options a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ========================================================================
   COMPLETE LOGIN PAGE REDESIGN - MODERN MINIMAL
   ======================================================================== */

.signin {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

/* Animated background gradient */
.signin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
  animation: gradient-shift 15s ease infinite;
  pointer-events: none;
}

@keyframes gradient-shift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -30px); }
}

/* Main login container */
.signin__wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display: grid;
  gap: 32px;
}

/* Split layout: Left side hero, Right side form */
.signin__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: transparent;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Left side - Brand hero section */
.signin__hero {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
  position: relative;
  overflow: hidden;
}

.signin__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.signin__hero-content {
  position: relative;
  z-index: 1;
}

.signin__hero-logo {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.signin__hero-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}

.signin__hero-subtitle {
  font-size: 13px;
  opacity: 0.85;
  line-height: 1.5;
  font-weight: 400;
}

.signin__hero-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.signin__feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  opacity: 0.9;
}

.signin__feature::before {
  content: "✓";
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Right side - Login form */
.signin__form-wrapper {
  background: #f8fafc;
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:root[data-theme="dark"] .signin__form-wrapper {
  background: #1e293b;
}

.signin__form-header {
  margin-bottom: 28px;
}

.signin__form-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}

:root[data-theme="dark"] .signin__form-title {
  color: #f1f5f9;
}

.signin__form-subtitle {
  font-size: 13px;
  color: #64748b;
}

:root[data-theme="dark"] .signin__form-subtitle {
  color: #cbd5e1;
}

/* Form fields container */
.signin__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

/* Field wrapper */
.signin__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.signin__label {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

:root[data-theme="dark"] .signin__label {
  color: #cbd5e1;
}

.signin__input {
  height: 44px;
  padding: 0 14px;
  background: white;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  font-family: inherit;
  transition: all 0.2s ease;
}

:root[data-theme="dark"] .signin__input {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

.signin__input::placeholder {
  color: #94a3b8;
}

:root[data-theme="dark"] .signin__input::placeholder {
  color: #64748b;
}

.signin__input:hover {
  border-color: #cbd5e1;
}

:root[data-theme="dark"] .signin__input:hover {
  border-color: #475569;
}

.signin__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: white;
}

:root[data-theme="dark"] .signin__input:focus {
  background: #1e293b;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Password field wrapper */
.signin__password-wrapper {
  position: relative;
}

.signin__show-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: color 0.2s;
}

.signin__show-password:hover {
  color: #0f172a;
}

:root[data-theme="dark"] .signin__show-password:hover {
  color: #f1f5f9;
}

/* Options row */
.signin__options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  margin-bottom: 24px;
}

.signin__remember {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  cursor: pointer;
}

:root[data-theme="dark"] .signin__remember {
  color: #cbd5e1;
}

.signin__remember input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #3b82f6;
}

.signin__forgot {
  color: #3b82f6;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.signin__forgot:hover {
  color: #2563eb;
}

/* Sign in button */
.signin__button {
  height: 44px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 16px;
  letter-spacing: -0.005em;
  position: relative;
  overflow: hidden;
}

.signin__button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -6px rgba(59, 130, 246, 0.4);
}

.signin__button:active:not(:disabled) {
  transform: translateY(0);
}

.signin__button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.signin__button.is-loading {
  color: transparent;
}

.signin__button.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Divider */
.signin__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 16px 0;
}

:root[data-theme="dark"] .signin__divider {
  color: #64748b;
}

.signin__divider::before,
.signin__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

:root[data-theme="dark"] .signin__divider::before,
:root[data-theme="dark"] .signin__divider::after {
  background: #334155;
}

/* Social buttons */
.signin__socials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.signin__social {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: white;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.2s ease;
}

:root[data-theme="dark"] .signin__social {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

.signin__social:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

:root[data-theme="dark"] .signin__social:hover {
  border-color: #475569;
  background: #1e293b;
}

/* Footer link */
.signin__footer {
  text-align: center;
  font-size: 13px;
  color: #64748b;
  margin-top: 12px;
}

:root[data-theme="dark"] .signin__footer {
  color: #cbd5e1;
}

.signin__footer a {
  color: #3b82f6;
  font-weight: 600;
  text-decoration: none;
}

.signin__footer a:hover {
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .signin__layout {
    grid-template-columns: 1fr;
  }

  .signin__hero {
    padding: 32px 24px;
  }

  .signin__form-wrapper {
    padding: 36px 24px;
  }

  .signin__form-title {
    font-size: 20px;
  }

  .signin__hero-title {
    font-size: 20px;
  }

  .signin__socials {
    grid-template-columns: 1fr;
  }
}

/* Dark theme smooth transitions */
:root[data-theme="dark"] .signin {
  background: linear-gradient(135deg, #0a0e27 0%, #0f172a 50%, #0a0e27 100%);
}


/* ==========================================================================
   SIGN-IN POLISH (v2) — professional, calm, enterprise look.
   Scoped to main.signin--v2 so it overrides the legacy rules above.
   ========================================================================== */
main.signin--v2 {
  --si-brand: #2447c8;
  --si-brand-dark: #1b3699;
  --si-ink: #0f172a;
  --si-sub: #64748b;
  --si-line: #e2e8f0;
  --si-field: #ffffff;
  font-family: inherit;
}
main.signin--v2 .signin__bg-overlay {
  background: linear-gradient(160deg, rgba(15,23,42,.82) 0%, rgba(30,41,90,.78) 55%, rgba(15,23,42,.9) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
main.signin--v2 .signin__centered-box {
  max-width: 440px;
  padding: 36px 36px 28px;
  gap: 22px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 30px 80px -20px rgba(2,6,23,.6), 0 2px 6px rgba(2,6,23,.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-theme="dark"] main.signin--v2 .signin__centered-box {
  background: #111827;
  border-color: rgba(255,255,255,.08);
  --si-ink: #f1f5f9; --si-sub: #94a3b8; --si-line: #263244; --si-field: #0b1220;
}

/* Top bar */
main.signin--v2 .signin__top-bar { margin: 0 0 -6px; }
main.signin--v2 .signin__hub-status,
main.signin--v2 .signin__theme-btn {
  background: transparent;
  border: 1px solid var(--si-line);
  color: var(--si-sub);
  font-weight: 600;
  font-size: 11.5px;
  padding: 5px 11px;
}
main.signin--v2 .signin__theme-btn:hover { transform: none; background: rgba(100,116,139,.08); color: var(--si-ink); }
main.signin--v2 .signin__hub-pulse { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(16,185,129,.18); animation: none; }

/* Header */
main.signin--v2 .signin__card-header { gap: 8px; padding-top: 4px; }
main.signin--v2 .signin__card-icon-wrap {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 6px;
  background: linear-gradient(145deg, #2f5be0, #1b3699);
  box-shadow: 0 8px 20px rgba(36,71,200,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
main.signin--v2 .signin__card-title { font-size: 24px; font-weight: 700; color: var(--si-ink); letter-spacing: -.02em; }
main.signin--v2 .signin__card-desc { font-size: 13px; color: var(--si-sub); line-height: 1.4; }

/* Demo profile picker: quiet, secondary */
main.signin--v2 .signin__rep-picker { background: transparent; border: 1px dashed var(--si-line); border-radius: 14px; padding: 12px; gap: 10px; }
main.signin--v2 .signin__rep-label { font-size: 10px; letter-spacing: .09em; font-weight: 700; color: var(--si-sub); }
main.signin--v2 .signin__rep-hint { font-weight: 600; color: var(--si-brand); }
main.signin--v2 .signin__rep-item { padding: 10px 6px; border-radius: 10px; background: var(--si-field); box-shadow: none; gap: 3px; }
main.signin--v2 .signin__rep-item:hover { transform: none; border-color: var(--si-brand); box-shadow: none; }
main.signin--v2 .signin__rep-item.is-selected { border-color: var(--si-brand); background: rgba(36,71,200,.06); box-shadow: 0 0 0 1px var(--si-brand); }
main.signin--v2 .signin__rep-name { color: var(--si-ink); font-weight: 600; }
main.signin--v2 .signin__rep-role { font-size: 9.5px; line-height: 1.25; }
main.signin--v2 .signin__rep-check { color: var(--si-brand); }

/* Form: strip the legacy nested-card chrome */
main.signin--v2 form.signin__card {
  all: unset;
  display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; width: 100%;
}
main.signin--v2 form.signin__card::before { display: none !important; }
main.signin--v2 .signin__fields { gap: 16px; }
main.signin--v2 .field { display: flex; flex-direction: column; gap: 7px; margin: 0; }
main.signin--v2 .field__label-row { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--si-ink); }
main.signin--v2 .signin__domain-chip { background: rgba(36,71,200,.08); border-color: transparent; color: var(--si-brand); font-weight: 600; }
main.signin--v2 .signin__input {
  height: 46px; padding: 0 14px; border-radius: 10px; font-size: 14px;
  background: var(--si-field); color: var(--si-ink); border: 1px solid #cbd5e1;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
[data-theme="dark"] main.signin--v2 .signin__input { border-color: #334155; }
main.signin--v2 .signin__input::placeholder { color: #94a3b8; }
main.signin--v2 .signin__input:hover { border-color: #94a3b8; }
main.signin--v2 .signin__input:focus { border-color: var(--si-brand); box-shadow: 0 0 0 4px rgba(36,71,200,.15); background: var(--si-field); }
main.signin--v2 .signin__input-wrap .signin__input { padding-right: 44px; }

/* Eye button: replace emoji with a crisp icon */
main.signin--v2 .signin__eye-btn {
  right: 6px; width: 34px; height: 34px; padding: 0; font-size: 0; opacity: .75;
  border-radius: 8px; display: grid; place-items: center;
}
main.signin--v2 .signin__eye-btn:hover { opacity: 1; background: rgba(100,116,139,.12); }
main.signin--v2 .signin__eye-btn::before {
  content: ""; width: 18px; height: 18px; background: var(--si-sub);
  -webkit-mask: 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 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: 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 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Options row: align checkbox + label on one line */
main.signin--v2 .signin__options-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0; width: 100%; }
main.signin--v2 .signin__checkbox-label { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--si-sub); }
main.signin--v2 .signin__checkbox { margin: 0; width: 16px; height: 16px; flex: none; }
main.signin--v2 .signin__forgot-btn { font-size: 13px; font-weight: 600; color: var(--si-brand); }

/* Buttons */
main.signin--v2 .signin__actions { gap: 10px; margin-top: 2px; }
main.signin--v2 .signin__submit-btn {
  height: 48px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
  background: linear-gradient(180deg, #2f5be0, var(--si-brand-dark));
  box-shadow: 0 6px 16px rgba(36,71,200,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
main.signin--v2 .signin__submit-btn:hover { transform: translateY(-1px); background: linear-gradient(180deg, #3a66ea, #1f3dab); box-shadow: 0 10px 22px rgba(36,71,200,.4), inset 0 1px 0 rgba(255,255,255,.18); }
main.signin--v2 .signin__submit-btn:focus-visible,
main.signin--v2 .signin__guest-btn:focus-visible { outline: 3px solid rgba(36,71,200,.35); outline-offset: 2px; }
main.signin--v2 .signin__guest-btn { height: 44px; border-radius: 10px; background: transparent; color: var(--si-ink); border: 1px solid #cbd5e1; font-weight: 600; font-size: 13.5px; }
[data-theme="dark"] main.signin--v2 .signin__guest-btn { border-color: #334155; }
main.signin--v2 .signin__guest-btn:hover { background: rgba(36,71,200,.06); border-color: var(--si-brand); color: var(--si-brand); }

/* Footer + hub selector */
main.signin--v2 .signin__card-footer { border: 0; padding: 2px 0 0; color: var(--si-sub); font-size: 11.5px; gap: 7px; }
main.signin--v2 .signin__sec-icon { font-size: 0; width: 13px; height: 13px; display: inline-block;
  background: #10b981;
  -webkit-mask: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat; }
main.signin--v2 .signin__hub-selector { border-top: 1px solid var(--si-line); padding-top: 16px; }
main.signin--v2 .signin__hub-label { color: var(--si-sub); font-weight: 700; }
main.signin--v2 .signin__hub-pill { background: transparent; color: var(--si-sub); }
main.signin--v2 .signin__hub-pill.is-active { color: var(--si-brand); border-color: var(--si-brand); background: rgba(36,71,200,.07); box-shadow: none; }

@media (max-width: 480px) {
  main.signin--v2 { padding: 12px !important; }
  main.signin--v2 .signin__centered-box { padding: 26px 20px 22px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { main.signin--v2 * { transition: none !important; animation: none !important; } }

/* ==========================================================================
   SIGN-IN — "DEALSTACK" VIOLET NIGHT THEME
   Deep indigo/black surfaces, electric violet accent, hairline borders,
   squared corners, uppercase micro-labels, hatched progress motif.
   Applies in both light and dark app themes.
   ========================================================================== */
main.signin--v2 {
  --vi-bg: #07021a;
  --vi-panel: #0b0522;
  --vi-panel-2: #100833;
  --vi-line: rgba(139, 92, 246, .22);
  --vi-line-2: rgba(139, 92, 246, .42);
  --vi-accent: #7a1fff;
  --vi-accent-2: #9b4dff;
  --vi-ink: #ece8ff;
  --vi-sub: #8b86b5;
  --vi-faint: #5d5890;
  --si-ink: var(--vi-ink); --si-sub: var(--vi-sub); --si-line: var(--vi-line);
  --si-field: #080320; --si-brand: var(--vi-accent-2);
  background: var(--vi-bg) !important;
  color: var(--vi-ink);
}
/* Backdrop: violet glow + soft grain, no photo */
main.signin--v2 .signin__bg-layer {
  background:
    radial-gradient(900px 600px at 15% 110%, rgba(155,77,255,.75), transparent 60%),
    radial-gradient(800px 520px at 100% 100%, rgba(122,31,255,.55), transparent 62%),
    radial-gradient(700px 500px at 50% -10%, rgba(76,29,149,.7), transparent 65%),
    linear-gradient(180deg, #14063f 0%, #07021a 70%);
  transform: none;
}
main.signin--v2 .signin__bg-layer::after {
  content: ""; position: absolute; inset: 0; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main.signin--v2 .signin__bg-overlay { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Card */
main.signin--v2 .signin__centered-box,
[data-theme="dark"] main.signin--v2 .signin__centered-box {
  max-width: 456px; padding: 0 32px 26px; gap: 22px; overflow: hidden;
  background: linear-gradient(180deg, var(--vi-panel-2), var(--vi-panel) 40%);
  border: 1px solid var(--vi-line); border-radius: 4px;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.8), 0 0 80px -30px rgba(122,31,255,.55);
}
/* Hatched progress-bar motif across the card's top edge */
main.signin--v2 .signin__centered-box::before {
  content: ""; display: block; height: 6px; margin: 0 -32px; flex: none;
  background:
    repeating-linear-gradient(115deg, var(--vi-accent) 0 2px, transparent 2px 5px) 0 0/72% 100% no-repeat,
    linear-gradient(90deg, #fff, #fff) 72% 0/2px 100% no-repeat,
    rgba(122,31,255,.12);
}
main.signin--v2 .signin__top-bar { margin-top: 20px; }

/* Status + theme chips: square, uppercase mono-ish */
main.signin--v2 .signin__hub-status,
main.signin--v2 .signin__theme-btn {
  border-radius: 2px; background: rgba(122,31,255,.08); border: 1px solid var(--vi-line);
  color: var(--vi-sub); text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; font-weight: 600;
}
main.signin--v2 .signin__theme-btn:hover { background: rgba(122,31,255,.18); color: var(--vi-ink); }
main.signin--v2 .signin__hub-pulse { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2), 0 0 10px #22c55e; }

/* Brand */
main.signin--v2 .signin__card-icon-wrap {
  width: 56px; height: 56px; border-radius: 3px; background: rgba(122,31,255,.18);
  border: 1px solid var(--vi-line-2); box-shadow: 0 0 30px rgba(122,31,255,.45), inset 0 0 18px rgba(155,77,255,.25);
}
main.signin--v2 .signin__card-icon-wrap .brand__mark { background: none !important; box-shadow: none !important; }
main.signin--v2 .signin__card-icon-wrap .brand__mark svg { stroke: #c4a1ff; }
main.signin--v2 .signin__card-title { color: var(--vi-ink); font-weight: 500; font-size: 26px; letter-spacing: -.01em; }
main.signin--v2 .signin__card-desc { color: var(--vi-sub); }

/* Quick launch */
main.signin--v2 .signin__rep-picker { border: 1px solid var(--vi-line); border-style: solid; border-radius: 3px; background: rgba(122,31,255,.05); }
main.signin--v2 .signin__rep-label { color: var(--vi-faint); letter-spacing: .12em; }
main.signin--v2 .signin__rep-hint { color: var(--vi-accent-2); text-transform: uppercase; font-size: 9.5px; letter-spacing: .08em; }
main.signin--v2 .signin__rep-item { border-radius: 2px; background: #0a0424; border: 1px solid var(--vi-line); }
main.signin--v2 .signin__rep-item:hover { border-color: var(--vi-line-2); background: #0f0735; }
main.signin--v2 .signin__rep-item.is-selected {
  border-color: var(--vi-accent-2); background: rgba(122,31,255,.2); box-shadow: inset 2px 0 0 var(--vi-accent), 0 0 24px -6px rgba(122,31,255,.6);
}
main.signin--v2 .signin__rep-name { color: var(--vi-ink); }
main.signin--v2 .signin__rep-role { color: var(--vi-sub); }
main.signin--v2 .signin__rep-check { color: #c4a1ff; }

/* Fields */
main.signin--v2 .field__label-row { color: var(--vi-sub); text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-weight: 600; }
main.signin--v2 .signin__domain-chip { border-radius: 2px; background: rgba(122,31,255,.16); color: #c4a1ff; border: 1px solid var(--vi-line); letter-spacing: .04em; text-transform: none; }
main.signin--v2 .signin__domain-chip:hover { background: var(--vi-accent); color: #fff; }
main.signin--v2 .signin__input,
[data-theme="dark"] main.signin--v2 .signin__input {
  border-radius: 2px; height: 48px; background: #070220; color: var(--vi-ink);
  border: 1px solid var(--vi-line); box-shadow: none; -webkit-text-fill-color: var(--vi-ink);
}
main.signin--v2 .signin__input::placeholder { color: var(--vi-faint); -webkit-text-fill-color: var(--vi-faint); }
main.signin--v2 .signin__input:hover { border-color: var(--vi-line-2); }
main.signin--v2 .signin__input:focus {
  background: #0a0328; border-color: var(--vi-accent-2); box-shadow: 0 0 0 3px rgba(122,31,255,.28), 0 0 24px -4px rgba(122,31,255,.5);
}
main.signin--v2 .signin__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #070220 inset; -webkit-text-fill-color: var(--vi-ink); }
main.signin--v2 .signin__eye-btn { border-radius: 2px; }
main.signin--v2 .signin__eye-btn::before { background: var(--vi-sub); }
main.signin--v2 .signin__eye-btn:hover { background: rgba(122,31,255,.2); }
main.signin--v2 .signin__eye-btn:hover::before { background: #fff; }

/* Options */
main.signin--v2 .signin__checkbox-label { color: var(--vi-sub); }
main.signin--v2 .signin__checkbox { accent-color: var(--vi-accent); border-radius: 2px; }
main.signin--v2 .signin__forgot-btn { color: var(--vi-accent-2); }
main.signin--v2 .signin__forgot-btn:hover { color: #d2b4ff; }

/* Buttons */
main.signin--v2 .signin__submit-btn {
  border-radius: 2px; height: 50px; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; font-weight: 700;
  background: linear-gradient(180deg, #8b2fff, #6a12e6); border: 1px solid #a66bff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 10px 30px -8px rgba(122,31,255,.8), inset 0 1px 0 rgba(255,255,255,.25);
}
main.signin--v2 .signin__submit-btn:hover { background: linear-gradient(180deg, #9b4dff, #7a1fff); transform: none; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 14px 40px -8px rgba(155,77,255,.95), inset 0 1px 0 rgba(255,255,255,.3); }
main.signin--v2 .signin__submit-btn:active { transform: translateY(1px); }
main.signin--v2 .signin__guest-btn,
[data-theme="dark"] main.signin--v2 .signin__guest-btn {
  border-radius: 2px; height: 46px; background: transparent; color: var(--vi-ink);
  border: 1px solid var(--vi-line-2); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 600;
}
main.signin--v2 .signin__guest-btn:hover { background: rgba(122,31,255,.16); border-color: var(--vi-accent-2); color: #fff; }
main.signin--v2 .signin__submit-btn:focus-visible,
main.signin--v2 .signin__guest-btn:focus-visible { outline: 2px solid var(--vi-accent-2); outline-offset: 2px; }

/* Footer */
main.signin--v2 .signin__card-footer { color: var(--vi-faint); letter-spacing: .03em; }
main.signin--v2 .signin__sec-icon { background: #22c55e; }
main.signin--v2 .signin__hub-selector { border-top: 1px solid var(--vi-line); }
main.signin--v2 .signin__hub-label { color: var(--vi-faint); letter-spacing: .12em; }
main.signin--v2 .signin__hub-pill { border-radius: 2px; background: transparent; border: 1px solid var(--vi-line); color: var(--vi-sub); }
main.signin--v2 .signin__hub-pill:hover { color: var(--vi-ink); border-color: var(--vi-line-2); }
main.signin--v2 .signin__hub-pill.is-active { background: rgba(122,31,255,.22); color: #e3d3ff; border-color: var(--vi-accent-2); box-shadow: none; }
main.signin--v2 .signin__message, main.signin--v2 [class*="error"] { color: #ff7a90; }

@media (max-width: 480px) {
  main.signin--v2 .signin__centered-box { padding: 0 20px 22px; }
  main.signin--v2 .signin__centered-box::before { margin: 0 -20px; }
}

/* Tall card on short screens: scroll instead of clipping */
main.signin--v2 { overflow-y: auto !important; overflow-x: hidden !important; align-items: safe center !important; }
main.signin--v2 .signin__bg-layer, main.signin--v2 .signin__bg-overlay { position: fixed; }

/* ==========================================================================
   SYMMETRIC TABLE EDGES — first column's left inset == last column's right inset
   First column hugs the left edge, last column (usually Actions) hugs the right
   edge, both with the same --table-edge padding, on every table in the CRM.
   ========================================================================== */
:root { --table-edge: 20px; }

.table:not(.printable-invoice-sheet table) th:first-child,
.table:not(.printable-invoice-sheet table) td:first-child,
.cl-table th:first-child, .cl-table td:first-child,
.fi-table th:first-child, .fi-table td:first-child,
.dl-table th:first-child, .dl-table td:first-child,
.rp-table th:first-child, .rp-table td:first-child,
.admin-tax-table th:first-child, .admin-tax-table td:first-child,
th.col-sno, td.col-sno {
  width: calc(var(--table-edge) + 44px) !important;
  min-width: calc(var(--table-edge) + 44px) !important;
  max-width: calc(var(--table-edge) + 44px) !important;
  padding-left: var(--table-edge) !important;
  padding-right: 12px !important;
  text-align: left !important;
}

.table:not(.printable-invoice-sheet table) th:last-child,
.table:not(.printable-invoice-sheet table) td:last-child,
.cl-table th:last-child, .cl-table td:last-child,
.fi-table th:last-child, .fi-table td:last-child,
.dl-table th:last-child, .dl-table td:last-child,
.rp-table th:last-child, .rp-table td:last-child,
.admin-tax-table th:last-child, .admin-tax-table td:last-child {
  padding-right: var(--table-edge) !important;
  text-align: right !important;
}

.table:not(.printable-invoice-sheet table) td:last-child .acct-row-actions,
.table:not(.printable-invoice-sheet table) td:last-child .hr-row-actions,
.cl-table td:last-child .acct-row-actions, .cl-table td:last-child .hr-row-actions,
td.acct-actions-cell .acct-row-actions, td.hr-actions-cell .hr-row-actions,
.acct-row-actions, .hr-row-actions {
  justify-content: flex-end !important;
  margin: 0 0 0 auto !important;
}
.acct-actions-cell, .hr-actions-cell { text-align: right !important; }

/* ==========================================================================
   LOGIN v3 — split layout: glass sign-in card on the left, full-bleed
   coding-workspace artwork behind it (assets/login-coding-bg.svg).
   Colours come from the app theme tokens (--primary, --citron, --on-primary,
   --side …) so the page follows the theme instead of a fixed palette.
   ========================================================================== */
.lg-login {
  --lg-ink: var(--side, #141619);
  --lg-accent: var(--primary, #2c52cf);
  --lg-accent-soft: color-mix(in srgb, var(--primary, #2c52cf) 62%, #ffffff);
  --lg-on-accent: var(--on-primary, #ffffff);
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 clamp(20px, 7vw, 120px);
  background: #0b0e14;
  overflow: hidden;
  font-family: var(--font, "Urbanist", system-ui, sans-serif);
  color: #eef1f7;
}
.lg-login__bg {
  position: absolute;
  inset: 0;
  background: #0b0e14 url('/assets/login-coding-bg.svg') center / cover no-repeat;
}
.lg-login__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 10, 15, 0.86) 0%, rgba(8, 10, 15, 0.55) 38%, rgba(8, 10, 15, 0) 70%),
    radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--primary, #2c52cf) 16%, transparent), transparent 45%);
}
.lg-card {
  position: relative;
  z-index: 2;
  width: min(100%, 440px);
  padding: 34px 34px 24px;
  border-radius: 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--lg-ink) 78%, transparent), color-mix(in srgb, var(--lg-ink) 92%, #000 8%));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.lg-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.lg-brand__mark {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  background: var(--citron, #d8e45a); color: var(--on-citron, #262b05);
}
.lg-brand__mark svg { width: 20px; height: 20px; }
.lg-brand__name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.lg-title { margin: 0 0 6px; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: #fff; }
.lg-desc { margin: 0 0 22px; font-size: 14px; color: rgba(231, 236, 246, 0.74); }
.lg-form { display: flex; flex-direction: column; gap: 12px; }
.lg-field {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.lg-field:focus-within {
  border-color: var(--lg-accent-soft); background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2c52cf) 30%, transparent);
}
.lg-field.is-bad { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15); }
.lg-field__icon { display: grid; place-items: center; color: rgba(231, 236, 246, 0.6); }
.lg-field__icon svg, .lg-eye svg { width: 18px; height: 18px; }
.lg-input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  color: #fff; font: inherit; font-size: 14px;
}
.lg-input::placeholder { color: rgba(231, 236, 246, 0.48); }
.lg-input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s ease-in-out 0s; }
.lg-eye {
  display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: rgba(231, 236, 246, 0.65); cursor: pointer;
}
.lg-eye:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.lg-err { margin: -4px 2px 0; color: #fca5a5; font-size: 12px; }
.lg-forgot-row { display: flex; justify-content: flex-end; margin-top: 2px; }
.lg-forgot {
  border: 0; background: none; padding: 2px 0; cursor: pointer; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--lg-accent-soft);
}
.lg-forgot:hover { color: #fff; text-decoration: underline; }
.lg-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; margin-top: 6px;
  border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700;
  color: var(--lg-on-accent); background: var(--lg-accent);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--primary, #2c52cf) 80%, transparent);
  transition: transform .12s ease, filter .15s ease;
}
.lg-submit:hover { filter: brightness(1.1); }
.lg-submit:active { transform: translateY(1px); }
.lg-submit__arrow { width: 18px; height: 18px; }
.lg-foot {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin: 22px 0 0;
  font-size: 11.5px; color: rgba(231, 236, 246, 0.55);
}
.lg-foot__ico { width: 13px; height: 13px; }
.lg-foot__dot { opacity: 0.6; }

/* Quick-login list — rendered ONLY in dev mode (import.meta.env.DEV); never in production builds */
.lg-dev {
  margin: 0 0 16px; padding: 10px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(255, 255, 255, 0.22);
}
.lg-dev__head { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; }
.lg-dev__badge {
  padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  background: var(--citron, #d8e45a); color: var(--on-citron, #262b05);
}
.lg-dev__title { font-size: 11.5px; color: rgba(231, 236, 246, 0.7); }
.lg-dev__list { display: flex; flex-direction: column; gap: 6px; }
.lg-dev__item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; text-align: left; font: inherit;
}
.lg-dev__item:hover { background: rgba(255, 255, 255, 0.07); }
.lg-dev__item.is-selected { border-color: var(--lg-accent-soft); background: color-mix(in srgb, var(--primary, #2c52cf) 22%, transparent); }
.lg-dev__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lg-dev__who b { font-size: 13px; font-weight: 700; color: #fff; }
.lg-dev__who small { font-size: 11.5px; color: rgba(231, 236, 246, 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 720px) {
  .lg-login { justify-content: center; padding: 0 16px; overflow-y: auto; }
  .lg-login__shade { background: rgba(8, 10, 15, 0.62); }
  .lg-card { padding: 28px 22px 20px; }
}

/* guard against the global label/input rules */
.lg-login .lg-field { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; height: 48px !important; padding: 0 14px !important; }
.lg-login .lg-field > * { margin: 0 !important; }
.lg-login .lg-input { display: block !important; flex: 1 1 auto !important; width: auto !important; height: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; color: #fff !important; min-width: 0 !important; }
.lg-login .lg-eye { flex: 0 0 30px !important; }
.lg-login .lg-field__icon { flex: 0 0 18px !important; }

/* Read-only detail tables inside drawers: the first column is data, not an S.NO column */
.acct-view-table.acct-view-table .table th:first-child,
.acct-view-table.acct-view-table .table td:first-child {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  text-align: left !important;
}
.acct-view-table.acct-view-table .table td { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }

/* ==========================================================================
   Inward & Expenses — side-by-side registers + overall calculation
   ========================================================================== */
.inex-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--gap, 16px);
  align-items: start;
}
@media (max-width: 1180px) {
  .inex-split { grid-template-columns: minmax(0, 1fr); }
}
.inex-split .table-wrap { overflow-x: auto; }
.inex-split .table thead th, .inex-split .table tbody td { padding-left: 10px !important; padding-right: 10px !important; }
.inex-split .table th:first-child, .inex-split .table td:first-child { padding-left: var(--table-edge, 20px) !important; }
.inex-split .table th:last-child, .inex-split .table td:last-child { padding-right: var(--table-edge, 20px) !important; }
.inex-sum {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px) { .inex-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inex-sum__cell {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px;
  background: var(--card-2); border: 1px solid var(--line);
}
.inex-sum__cell[data-sum="spend"] { background: color-mix(in srgb, var(--primary) 10%, var(--card)); border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.inex-sum__label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.inex-sum__value { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.inex-sum__note { font-size: 12px; color: var(--muted); }
.inex-sum__cell.is-bad .inex-sum__value { color: var(--bad, #c0392b); }
.inex-sum__cell.is-good .inex-sum__value { color: var(--good, #1b7547); }
.inex-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.inex-head__title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.inex-head__sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.inex-head__total { font-size: 18px; font-weight: 700; color: var(--text); }
.inex-split td.inex-wrap { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; min-width: 150px; text-align: left !important; }
.inex-split td.inex-wrap .li__main { align-items: flex-start; text-align: left; }
.inex-split .li__main b, .inex-split .li__main small { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; }

/* ==========================================================================
   Header date filter chip + popover ("drp") — theme tokens only
   ========================================================================== */
.top__range {
  display: inline-flex; align-items: center; height: 40px; flex: none; position: relative;
  border-radius: var(--r-ctl, 12px); border: 1px solid var(--line); background: var(--card); color: var(--text);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.top__range:hover { border-color: var(--line-2); }
.top__range.is-set, .top__range.is-open {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.top__range button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; height: 100%; }
.top__range button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: inherit; }
.top__range-main { gap: 9px; padding: 0 6px 0 5px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.top__range-ico {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; flex: none;
  background: color-mix(in srgb, var(--primary) 12%, var(--card-2)); color: var(--primary);
}
.top__range-ico svg { width: 16px; height: 16px; }
.top__range-label { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.top__range-badge {
  padding: 2px 7px; border-radius: 7px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  background: color-mix(in srgb, var(--primary) 12%, var(--card-2)); color: var(--primary-ink, var(--primary));
}
.top__range-x { width: 22px; justify-content: center; color: var(--muted); }
.top__range-x:hover { color: var(--text); }
.top__range-x svg { width: 13px; height: 13px; }
.top__range-chev { width: 30px; justify-content: center; color: var(--muted); }
.top__range-chev svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .2s ease; }
.top__range.is-open .top__range-chev svg { transform: rotate(-90deg); }
.top { gap: 10px; }
@media (max-width: 860px) {
  .top__range-label, .top__range-badge { display: none; }
  .top__range-main { padding: 0 4px 0 5px; }
}

.drp {
  position: fixed; z-index: 130; width: 540px; max-width: calc(100vw - 20px); overflow: auto;
  background: var(--raised, var(--card)); color: var(--text); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-pop); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 12px;
  animation: drp-in .18s ease-out;
}
@keyframes drp-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
.drp button { font: inherit; cursor: pointer; }
.drp__head { display: flex; align-items: center; gap: 12px; }
.drp__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none; background: color-mix(in srgb, var(--primary) 12%, var(--card-2)); color: var(--primary); }
.drp__icon svg { width: 18px; height: 18px; }
.drp__heads { flex: 1; min-width: 0; }
.drp__title { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; }
.drp__sub { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--faint, var(--muted)); margin-top: 2px; }
.drp__close { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--muted); }
.drp__close:hover { background: var(--card-2); color: var(--text); }
.drp__close svg { width: 16px; height: 16px; }
.drp__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.drp__tab { height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.07em; transition: background .15s ease, color .15s ease; }
.drp__tab:hover { color: var(--text); }
.drp__tab.is-on { background: var(--primary); color: var(--on-primary, #fff); box-shadow: 0 6px 14px -8px var(--primary); }
.drp__fields { display: flex; align-items: flex-end; gap: 10px; }
.drp__field { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.drp__field > span { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: var(--muted); }
.drp__input {
  height: 38px; width: 100%; padding: 0 12px; text-align: center; font: inherit; font-size: 13px; font-weight: 700; color: var(--text);
  background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; outline: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
}
.drp__input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.drp__input.is-bad { border-color: var(--bad, #c0392b); }
.drp__input--ro { cursor: default; }
.drp__slash { padding-bottom: 10px; color: var(--muted); font-style: normal; }
.drp__body { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; }
.drp__body--all, .drp__body--year { grid-template-columns: minmax(0, 1fr); }
.drp__side { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); padding-right: 10px; }
.drp__cap { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: var(--muted); margin: 2px 0 6px 8px; }
.drp__chip { text-align: left; height: 34px; padding: 0 10px 0 22px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-size: 12.5px; font-weight: 600; position: relative; }
.drp__chip::before { content: ''; position: absolute; left: 10px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); translate: 0 -50%; }
.drp__chip:hover { background: var(--card-2); }
.drp__main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.drp__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drp__navt { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.drp__navt b { font-size: 14px; font-weight: 800; letter-spacing: 0.04em; }
.drp__navt small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; color: var(--muted); }
.drp__navt--btn { border: 0; background: transparent; color: inherit; border-radius: 10px; padding: 3px 10px; }
.drp__navt--btn:hover { background: var(--card-2); }
.drp__arrow { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--text); }
.drp__arrow:hover { background: var(--card-2); }
.drp__arrow svg { width: 16px; height: 16px; }
.drp__dow, .drp__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.drp__dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.drp__blank { height: 34px; }
.drp__day {
  height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-size: 12.5px; font-weight: 700;
  position: relative; transition: background .12s ease;
}
.drp__day:hover { background: var(--card-2); }
.drp__day.is-in { background: color-mix(in srgb, var(--primary) 14%, transparent); border-radius: 8px; }
.drp__day.is-today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 60%, transparent); }
.drp__day.is-edge { background: var(--primary); color: var(--on-primary, #fff); box-shadow: 0 6px 14px -8px var(--primary); }
.drp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.drp__cell {
  height: 44px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); color: var(--text); position: relative;
  display: grid; place-items: center; transition: background .12s ease, border-color .12s ease;
}
.drp__cell b { font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; }
.drp__cell sup { position: absolute; top: 6px; right: 9px; font-size: 8.5px; font-weight: 700; color: var(--muted); }
.drp__cell:hover { border-color: var(--line-2); background: var(--card-2); }
.drp__cell.is-in { background: color-mix(in srgb, var(--primary) 14%, var(--card)); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.drp__cell.is-today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 55%, transparent); }
.drp__cell.is-edge { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); box-shadow: 0 8px 16px -10px var(--primary); }
.drp__cell.is-edge sup { color: inherit; opacity: 0.8; }
.drp__cell--year { height: 46px; }
.drp__empty { display: flex; flex-direction: column; gap: 6px; padding: 22px 18px; border-radius: 14px; background: var(--card-2); border: 1px dashed var(--line-2); text-align: center; }
.drp__empty b { font-size: 14px; }
.drp__empty span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.drp__scope { padding: 10px 12px; text-align: center; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.drp__foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.drp__spacer { flex: 1; }
.drp__clear { border: 0; background: transparent; color: var(--primary-ink, var(--primary)); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; padding: 8px 6px; }
.drp__clear:hover { text-decoration: underline; }
.drp__quick { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 11px; font-weight: 800; letter-spacing: 0.07em; }
.drp__quick:hover { background: var(--card-2); border-color: var(--line-2); }
.drp__apply { height: 36px; padding: 0 20px; border: 0; border-radius: 11px; background: var(--primary); color: var(--on-primary, #fff); font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; box-shadow: 0 10px 20px -12px var(--primary); }
.drp__apply:hover { filter: brightness(1.08); }
.drp__apply:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; filter: none; }
.drp button:focus-visible, .drp .drp__input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
@media (max-width: 560px) {
  .drp { padding: 14px; }
  .drp__body { grid-template-columns: minmax(0, 1fr); }
  .drp__side { border-right: 0; padding-right: 0; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .drp__cap { width: 100%; }
}


/* EMI register has 14 columns — tighten the inner cell padding (edge padding is kept) */
.acct-emi.acct-emi .table.table thead th, .acct-emi.acct-emi .table.table tbody td { padding-left: 8px !important; padding-right: 8px !important; }
.acct-emi.acct-emi .table.table th:first-child, .acct-emi.acct-emi .table.table td:first-child { padding-left: var(--table-edge, 20px) !important; }
.acct-emi.acct-emi .table.table th:last-child, .acct-emi.acct-emi .table.table td:last-child { padding-right: var(--table-edge, 20px) !important; }

/* Page headers no longer carry a descriptive paragraph under the title (removed globally) */
.phead__sub { display: none !important; }

/* ==========================================================================
   Tighter page side gaps (global): the space between the sidebar and the content
   (left) and between the content and the window edge (right) is now the same
   small --gutter on both sides.
   ========================================================================== */
html:root { --gutter: clamp(10px, 1.1vw, 16px); }
@media (min-width: 761px) {
  html .main { padding-left: calc(var(--side-w) + var(--side-x) + var(--gutter)); }
  html.rail-on .main { padding-left: calc(var(--rail-w) + var(--side-x) + var(--gutter)); }
}

/* ==========================================================================
   Settings (admin hub) — container-wise, theme-based layout (theme tokens only)
   One section = one container. Web Appearance is split into three containers.
   ========================================================================== */
.admin-hub > .card { padding: 0; overflow: clip; }
.admin-hub > .card > .card__head {
  margin: 0; padding: 20px 26px 18px; align-items: center; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, var(--card)), var(--card));
}
.admin-hub > .card > .card__head .card__title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; }
.admin-hub > .card > .card__head .card__sub { margin-top: 3px; color: var(--muted); font-size: var(--fs-sm); }
.admin-hub > .card > form { padding: 24px 26px 22px; }
.admin-hub .form-grid { gap: 20px 26px; }
.admin-hub .field { gap: 8px; }
.admin-hub .field > span:first-child { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.admin-hub .input, .admin-hub .select {
  height: 44px; border-radius: 12px; background: var(--card); border-color: var(--line-2); font-size: var(--fs-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-hub .input:hover, .admin-hub .select:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--line-2)); }
.admin-hub .input:focus, .admin-hub .select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.admin-hub .input::placeholder { color: var(--faint, var(--muted)); opacity: 0.8; }
.admin-hub .admin-field-desc { font-size: 11.5px; color: var(--faint, var(--muted)); margin-top: 0; line-height: 1.45; }
.admin-hub .admin-toggle-row { padding: 16px 20px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.admin-hub .admin-toggle-info b { font-size: var(--fs-md); font-weight: 700; }
.admin-hub .st-actions { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }

/* Web Appearance: the outer card turns into a plain heading row; each group below is its own container */
.admin-hub > .card.admin-card--groups { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.admin-hub > .card.admin-card--groups > .card__head {
  background: transparent; border: 0; padding: 4px 4px 14px;
}
.admin-hub > .card.admin-card--groups > form { padding: 0; display: flex; flex-direction: column; gap: var(--gap, 16px); }
.admin-groups { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.admin-group { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: clip; }
.admin-group__head {
  display: flex; align-items: center; gap: 14px; padding: 18px 26px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, var(--card)), var(--card));
}
.admin-group__ico {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 12%, var(--card-2)); color: var(--primary);
}
.admin-group__ico svg { width: 20px; height: 20px; }
.admin-group__txt { min-width: 0; }
.admin-group__title { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.admin-group__desc { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.admin-group__body { padding: 24px 26px 26px; }
.admin-hub > .card.admin-card--groups .st-actions {
  margin: 0; padding: 14px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow);
}
@media (max-width: 760px) {
  .admin-hub > .card > form { padding: 18px 16px 18px; }
  .admin-group__head { padding: 16px; }
  .admin-group__body { padding: 18px 16px 20px; }
  .admin-hub .st-actions .btn { flex: 1; }
}

/* Settings: three fields per line (two on tablets, one on phones) */
.admin-hub .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-hub .form-grid > .field.span-2, .admin-hub .form-grid > .field.span-3 { grid-column: span 1; }
.admin-hub .form-grid > .admin-toggle-row, .admin-hub .form-grid > div.span-2:not(.field), .admin-hub .form-grid > div.span-3 { grid-column: 1 / -1; }
@media (max-width: 1100px) { .admin-hub .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .admin-hub .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* clean white group header */
.admin-group__head{background:#fff!important}

/* global field fill: distinct from white containers */
.input,.select,.textarea,input.input,select.select,textarea.textarea{background-color:#f3f5f9!important;border:1px solid #d3d9e3!important}
.input:focus,.select:focus,.textarea:focus{background-color:#fff!important;border-color:var(--primary)!important}
:root[data-theme=dark] .input,:root[data-theme=dark] .select,:root[data-theme=dark] .textarea{background-color:#1b212b!important;border-color:#2c3442!important}

/* dark mode fixes */
:root[data-theme=dark] .admin-group__head{background:var(--card)!important}
:root[data-theme=dark] .admin-group__ico{background:color-mix(in srgb, var(--primary) 18%, var(--card-2))!important}
:root[data-theme=dark] .input:focus,:root[data-theme=dark] .select:focus,:root[data-theme=dark] .textarea:focus{background-color:#222a36!important}

/* ==========================================================================
   GLOBAL: every table column header + value is center aligned
   ========================================================================== */
html body .table.table.table.table.table.table:not(.printable-invoice-sheet table) th,
html body .table.table.table.table.table.table:not(.printable-invoice-sheet table) td,
html body .cl-table.cl-table.cl-table.cl-table th, html body .cl-table.cl-table.cl-table.cl-table td,
html body .fi-table.fi-table.fi-table.fi-table th, html body .fi-table.fi-table.fi-table.fi-table td,
html body .dl-table.dl-table.dl-table.dl-table th, html body .dl-table.dl-table.dl-table.dl-table td,
html body .rp-table.rp-table.rp-table.rp-table th, html body .rp-table.rp-table.rp-table.rp-table td,
html body .admin-tax-table.admin-tax-table.admin-tax-table.admin-tax-table th,
html body .admin-tax-table.admin-tax-table.admin-tax-table.admin-tax-table td {
  text-align: center !important;
  vertical-align: middle !important;
}
html body .table.table.table.table.table.table td > div,
html body .table.table.table.table.table.table td > span.row,
html body .table.table.table.table.table.table td .row,
html body .table.table.table.table.table.table td .li__main {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
html body .table.table.table.table.table.table td .li__main { display: flex; flex-direction: column; align-items: center !important; }
html body .table.table.table.table.table.table td > div[style*="flex"] { justify-content: center !important; }

/* Cards with empty states: clean header divider + tidy empty panel (global) */
.card:not(:has(.table)):not(:has(.toolbar)) > .card__head{padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line);align-items:center}
.card .empty{padding:44px 24px 48px;margin-top:4px;gap:6px;border:1.5px dashed var(--line-2);border-radius:16px;background:var(--card-2);max-width:none}
.card .empty__icon{width:56px;height:56px;border-radius:16px;background:color-mix(in srgb,var(--primary) 10%,var(--card));color:var(--primary);margin-bottom:6px}
.card .empty b{font-size:15px;font-weight:700;color:var(--text)}
.card .empty p,.card .empty span:not(.empty__icon){font-size:13px;color:var(--muted);max-width:420px;line-height:1.5}

/* Table empty row: keep headers, show empty state spanning all columns */
html body .table.table.table.table.table.table td.cd-empty-td{width:auto!important;min-width:0!important;max-width:none!important;padding:28px 24px 32px!important;border-bottom:0!important;white-space:normal!important}
html body .table tbody tr.cd-empty-row:hover td{background:transparent!important}
.cd-empty-td .empty{border:0;background:transparent;margin:0;padding:24px 0}

/* Client tables: joined top bar (title + action button) fused with the table */
html body .card:has(.cd-table) > .card__head{display:flex!important;align-items:center;justify-content:space-between;gap:16px;margin:0!important;padding:16px 24px!important;border-bottom:1px solid var(--line);background:var(--card)}
html body .card:has(.cd-table) > .card__head .card__tools{display:flex;align-items:center;gap:8px;margin-left:auto}
html body .card:has(.cd-table) > .card__head .card__title{font-size:15px}
html body .card:has(.cd-table) > .card__head .card__sub{font-size:12.5px}
html body .card:has(.cd-table) .table-wrap{border-top:0}


/* Select chevron: vertically centred at any control height */
html body .select,html body select.select,html body .toolbar select,html body .toolbar .select{
  background-position:calc(100% - 17px) calc(50% + 0px),calc(100% - 12px) calc(50% + 0px)!important;
  background-size:5px 5px!important;background-repeat:no-repeat!important;padding-right:34px!important;
}

/* Select chevron (final): one explicit SVG chevron, centred, visible everywhere */
html body select,html body .select,html body .toolbar select,html body .toolbar .select,
html body .client-category-select,html body .table-filter-select,html body .acct-filter,html body .hr-filter{
  appearance:none!important;-webkit-appearance:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586174' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 12px center!important;
  background-size:14px 14px!important;
  padding-right:34px!important;
}
:root[data-theme=dark] select,:root[data-theme=dark] .select,:root[data-theme=dark] .toolbar select,:root[data-theme=dark] .toolbar .select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a2abbb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;
}

/* Themed dropdown panel: same width as its select; long labels truncate */
html body .theme-dropdown{box-sizing:border-box;min-width:0!important}
html body .theme-dropdown .theme-dropdown-item{min-width:0}
html body .theme-dropdown .theme-dropdown-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Invoice drawer: grey canvas + white paper sheet so the document clearly stands apart */
html body .drawer__body:has(.printable-invoice-sheet),
html body .drawer:has(.printable-invoice-sheet) .drawer__body{background:var(--card-2,#eef1f5)!important;padding:24px!important}
html body .drawer .printable-invoice-sheet{background:#fff!important;border:1px solid var(--line-2)!important;border-radius:14px!important;box-shadow:0 2px 4px #141c2d10,0 18px 40px -16px #141c2d47!important;overflow:hidden!important;max-width:880px;margin:0 auto}
html body .drawer:has(.printable-invoice-sheet) .drawer__head,
html body .drawer:has(.printable-invoice-sheet) .drawer__foot{background:var(--card)!important;border-color:var(--line)!important}
html body .drawer:has(.printable-invoice-sheet) .drawer__foot{box-shadow:0 -6px 16px -10px #141c2d30}
:root[data-theme=dark] .drawer .printable-invoice-sheet{border-color:#2c3442!important}

/* 1. Hide helper/description text under inputs, globally */
.admin-field-desc,.field__hint,.field__help{display:none!important}

/* 3. Logo / image upload row */
.tl-upload{display:flex;align-items:center;gap:10px;margin-top:8px}
.tl-upload__prev{width:40px;height:40px;object-fit:contain;border-radius:10px;border:1px solid var(--line-2);background:#fff;padding:3px}
.tl-upload__btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:9px;border:1px dashed var(--line-2);background:var(--card-2);color:var(--text);font:600 12.5px var(--font);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.tl-upload__btn:hover{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--card))}

/* 5. Templates: left library stays pinned with its own scroll; only the right preview moves with the page */
@media (min-width:1151px){
  html body .tmpl-grid{align-items:start}
  html body .tmpl-gallery{position:sticky;top:calc(var(--top-h,68px) + 14px);max-height:calc(100vh - var(--top-h,68px) - 40px);overflow-y:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-width:thin}
  html body .tmpl-preview{position:static!important}
}
#sec-invoice-sender>.card+.card,#sec-banking-wire>.card+.card{margin-top:20px}

/* Templates: library is one bounded container; only the list scrolls inside it */
@media (min-width:1151px){
  html body .tmpl-gallery{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-card,20px);
    box-shadow:var(--shadow);padding:0 14px 14px!important;
    height:calc(100vh - var(--top-h,68px) - 40px);max-height:none!important;
    overflow-y:auto;scrollbar-width:thin;align-content:start;
  }
  html body .tmpl-gallery__head{
    position:sticky;top:0;z-index:2;background:var(--card);
    margin:0 -14px 2px!important;padding:16px 14px 12px;border-bottom:1px solid var(--line);
  }
  html body .tmpl-gallery__head p{display:none}
}

/* Templates: wheel/trackpad scroll over the library scrolls ONLY the library */
@media (min-width:1151px){
  html body .tmpl-gallery{overflow-y:scroll!important;overscroll-behavior:contain!important;position:sticky;top:calc(var(--top-h,68px) + 14px);align-self:start;scrollbar-gutter:stable}
  html body .tmpl-gallery::-webkit-scrollbar{width:8px}
  html body .tmpl-gallery::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}
}

/* Finance settings pages (Invoice Sender / Banking / GST): restore card padding + header */
html body .finance-settings-hub .card:not(.card--flush){padding:22px 24px 24px!important;overflow:visible!important}
html body .finance-settings-hub .card > .card__head{display:flex!important;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px!important;padding:0 0 16px!important;border-bottom:1px solid var(--line)}
html body .finance-settings-hub .card.card--flush > .card__head{display:flex!important;padding:18px 24px!important;margin:0!important;border-bottom:1px solid var(--line)}
html body .finance-settings-hub .card > div:not(.card__head){min-width:0}
html body .finance-settings-hub .table-wrap{border-radius:12px;border:1px solid var(--line);overflow:auto}
html body .finance-settings-hub .table th:first-child,html body .finance-settings-hub .table td:first-child{min-width:90px!important;width:auto!important;max-width:none!important}
html body .finance-settings-hub .gst-add{padding:18px 20px!important;background:var(--card-2)!important;border:1px solid var(--line)!important;border-radius:14px!important}
html body .finance-settings-hub .gst-add h5{font-size:14px!important;font-weight:700!important;margin:0 0 14px!important}
html body .finance-settings-hub .gst-add__grid{display:grid!important;grid-template-columns:1fr 2fr 0.7fr 1fr 1fr auto!important;gap:14px!important;align-items:end!important}
html body .finance-settings-hub .gst-add__grid > button,html body .finance-settings-hub .gst-add__grid > .btn{height:32px;white-space:nowrap;padding:0 20px}
@media (max-width:1100px){html body .finance-settings-hub .gst-add__grid{grid-template-columns:1fr 1fr!important}}

/* Templates library: children keep natural height so the container actually scrolls */
@media (min-width:1151px){
  html body .tmpl-gallery{display:flex!important;flex-direction:column;gap:14px}
  html body .tmpl-gallery > *{flex:0 0 auto!important}
}
@media (min-width:1151px){html body .tmpl-gallery{height:auto!important;max-height:calc(100vh - var(--top-h,68px) - 40px)!important}}

/* Templates library: fits inside the first screen (below the header) and scrolls internally */
@media (min-width:1151px){
  html body .tmpl-gallery{height:max(420px, calc(100vh - 310px))!important;max-height:none!important;overflow-y:auto!important}
}
#sec-gst-slabs>.card+.card{margin-top:20px}

/* Upload button lives INSIDE the input, right side (theme based, global) */
label.field.has-upload,.field.has-upload{position:relative}
.has-upload__input{padding-right:118px!important}
.has-upload .tl-upload{position:absolute;right:5px;bottom:4px;height:24px;margin:0;display:flex;align-items:center;gap:6px;z-index:2}
.has-upload .tl-upload__prev{width:24px;height:24px;border-radius:6px;padding:1px;border:1px solid var(--line-2);background:var(--raised)}
.has-upload .tl-upload__btn{height:24px;padding:0 10px;font-size:12px;border-radius:7px;border:1px solid var(--line-2);border-style:solid;background:var(--raised);color:var(--text);gap:5px}
.has-upload .tl-upload__btn:hover{background:var(--primary);border-color:var(--primary);color:var(--on-primary,#fff)}
.has-upload .tl-upload__btn svg{width:13px;height:13px}

/* Save button sits at the bottom-right of the form itself */
.form-save-row{justify-content:flex-end;align-items:center;padding-top:18px;margin-top:6px;border-top:1px solid var(--line)}

/* Finance settings list cards follow the global theme: flush table, themed header */
html body .finance-settings-hub .card--flush .table-wrap{border:0!important;border-radius:0!important}
html body .finance-settings-hub .card--flush .table thead th{background:var(--card-2)!important;color:var(--muted)!important}
html body .finance-settings-hub .card--flush .table td{color:var(--text)!important;font-weight:500}
html body .finance-settings-hub .card--flush .table-wrap{padding:0}
html body .finance-settings-hub .gst-list-card{padding:0!important;overflow:hidden!important}

/* Themed dialogs (replace native confirm/alert) */
.tl-dialog-scrim{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px;background:rgba(14,20,33,.45);backdrop-filter:blur(3px);animation:tlFade .14s ease-out}
.tl-dialog-scrim.is-out{opacity:0;transition:opacity .14s}
.tl-dialog{width:min(420px,100%);display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:22px 22px 18px;border-radius:18px;background:var(--card,#fff);color:var(--text);border:1px solid var(--line-2);box-shadow:var(--shadow-pop);font-family:var(--font);animation:tlPop .18s cubic-bezier(.16,1,.3,1)}
.tl-dialog__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--primary) 12%,var(--card));color:var(--primary)}
.tl-dialog__ico.is-danger{background:color-mix(in srgb,var(--bad,#b3342b) 12%,var(--card));color:var(--bad,#b3342b)}
.tl-dialog__body b{display:block;font-size:16px;font-weight:700;margin-top:2px}
.tl-dialog__body p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.tl-dialog__actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.tl-dialog__btn{height:36px;padding:0 18px;border-radius:10px;border:1px solid var(--line-2);background:var(--card-2);color:var(--text);font:600 13px var(--font);cursor:pointer;transition:background .15s,border-color .15s}
.tl-dialog__btn:hover{border-color:var(--primary)}
.tl-dialog__btn--primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary,#fff)}
.tl-dialog__btn--primary:hover{background:var(--primary-ink,var(--primary));filter:brightness(1.05)}
.tl-dialog__btn--primary.is-danger{background:var(--bad,#b3342b);border-color:var(--bad,#b3342b)}
@keyframes tlFade{from{opacity:0}to{opacity:1}}
@keyframes tlPop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

/* ===== Global icon-only action buttons (round, colour-coded) ===== */
.tl-act-cell{white-space:nowrap}
html body .tl-act{--c:#4b4fe0;--bg:#eceefe;--bd:#b7bbf7;
  display:inline-grid!important;place-items:center;width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;margin:0 3px;
  border-radius:50%!important;border:1.5px solid var(--bd)!important;background:var(--bg)!important;color:var(--c)!important;
  font-size:0!important;line-height:0;cursor:pointer;position:relative;text-decoration:none;box-shadow:none!important;
  transition:transform .15s,box-shadow .15s,background .15s}
html body .tl-act:hover{transform:translateY(-1px);box-shadow:0 6px 14px -6px var(--c)!important}
html body .tl-act--edit{--c:#a86a12;--bg:#fff6dc;--bd:#f1d170}
html body .tl-act--delete{--c:#b3342b;--bg:#fdeaea;--bd:#f2a9ad}
html body .tl-act--download{--c:#14806f;--bg:#e3f6f1;--bd:#9ad9cb}
html body .tl-act--send{--c:#1f6fb2;--bg:#e4f1fb;--bd:#a5cdea}
html body .tl-act svg,html body .tl-act .ico{width:16px!important;height:16px!important;display:block;stroke:currentColor!important;color:inherit!important;fill:none!important}
html body .tl-act > *:not(svg):not(.ico){display:none!important}
/* text-only buttons: draw the icon with a mask */
html body .tl-act--text:not(:has(svg))::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
html body .tl-act--view{--ic: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 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
html body .tl-act--edit{--ic: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 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E")}
html body .tl-act--delete{--ic: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%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E")}
html body .tl-act--download{--ic: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-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E")}
html body .tl-act--send{--ic: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%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E")}
:root[data-theme=dark] html body .tl-act,:root[data-theme=dark] .tl-act{--bg:color-mix(in srgb,var(--c) 16%,var(--card))!important;--bd:color-mix(in srgb,var(--c) 45%,transparent)!important}
.tl-act-cell .acct-row-actions,.tl-act-cell .hr-row-actions{gap:2px}

/* Finance settings cards: identical header + body rhythm for every card */
html body .finance-settings-hub .card{padding:0!important;overflow:hidden!important}
html body .finance-settings-hub .card > .card__head{padding:20px 24px!important;margin:0 0 20px!important;border-bottom:1px solid var(--line)!important}
html body .finance-settings-hub .card.card--flush > .card__head{margin:0!important}
html body .finance-settings-hub .card:not(.card--flush) > :not(.card__head){margin-left:24px!important;margin-right:24px!important}
html body .finance-settings-hub .card:not(.card--flush) > :last-child{margin-bottom:24px!important}
html body .finance-settings-hub .gst-list-card > :not(.card__head){margin:0!important}

/* Field labels stay on one line so inputs in a row line up; upload button is positioned by JS */
html body label.field > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}
html body .has-upload .tl-upload{bottom:auto}

/* Generic themed form modal (CRUD create/edit) */
.tl-form-modal{width:min(560px,100%);padding:22px 24px 18px;border-radius:18px;background:var(--card,#fff);color:var(--text);border:1px solid var(--line-2);box-shadow:var(--shadow-pop);font-family:var(--font);animation:tlPop .18s cubic-bezier(.16,1,.3,1)}
.tl-form-modal h3{margin:0 0 16px;font-size:17px;font-weight:700}
.tl-form-modal__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tl-form-modal__grid .span-2{grid-column:1/-1}
.tl-form-modal .tl-dialog__actions{margin-top:20px}

/* Read-only detail rows (drawers) */
.cd-rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.cd-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:13px 16px;font-size:13.5px}
.cd-row+.cd-row{border-top:1px solid var(--line)}
.cd-row__k{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em;flex:none}
.cd-row__v{color:var(--text);font-weight:600;text-align:right;overflow-wrap:anywhere}

/* Inward & Expenses: collection count pill */
.inex-count{display:inline-flex;align-items:center;margin-left:4px;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,var(--card));color:var(--primary);font-size:11px;font-weight:700;vertical-align:middle}

/* Global right-side drawer: increase base width on desktop for better breathing room */
@media (min-width: 761px) {
  html body .drawer {
    width: min(580px, calc(100vw - 20px));
  }
}

/* Wide right-side drawers: Inward & Sales Invoices, Stock Inward, Credit Notes, Line items, and Table drawers */
html body .drawer:has(#acct-sales-form),
html body .drawer:has(.acct-lines),
html body .drawer:has(#acct-stock-inward-form),
html body .drawer:has(#acct-credit-note-form),
html body .drawer:has(#acct-expense-form),
html body .drawer:has(#acct-asset-form),
html body .drawer:has(#acct-dep-form),
html body .drawer:has(#acct-adjustment-entry-form),
html body .drawer:has(.table-wrap),
html body .drawer:has(.form-grid),
html body .drawer:has([data-view-drawer$="-group"]),
html body .drawer--wide,
html body .drawer:has([data-wide-drawer]) {
  width: min(800px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 20px) !important;
}

html body .drawer:has(#acct-sales-form) .drawer__body,
html body .drawer:has(.acct-lines) .drawer__body {
  padding: 20px 24px !important;
}

/* Line-item section in drawers */
.acct-lines {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 4px 0 !important;
}

.acct-lines__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 2px 8px !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.acct-lines__head b {
  white-space: nowrap !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
}

.acct-lines__head button,
.acct-lines__head .btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.acct-lines .table-wrap {
  overflow-x: auto !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: var(--card) !important;
}

.acct-lines .table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.acct-lines .table th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--muted) !important;
  padding: 10px 12px !important;
  background: var(--card-2) !important;
  border-bottom: 1px solid var(--line) !important;
  white-space: nowrap !important;
}

.acct-lines .table td {
  padding: 8px 10px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--line) !important;
}

.acct-lines .table th:first-child,
.acct-lines .table td:first-child {
  width: 44% !important;
}

.acct-lines .table th:nth-child(2),
.acct-lines .table td:nth-child(2) {
  width: 13% !important;
}

.acct-lines .table th:nth-child(3),
.acct-lines .table td:nth-child(3) {
  width: 16% !important;
}

.acct-lines .table th:nth-child(4),
.acct-lines .table td:nth-child(4) {
  width: 15% !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

.acct-lines .table th:last-child,
.acct-lines .table td:last-child {
  width: 12% !important;
  text-align: right !important;
}

.acct-lines .table td .input {
  width: 100% !important;
  min-width: 0 !important;
}

/* Inward & Expenses collection drawer: wider panel, global table UI (S NO, nowrap, centred) */
html body .drawer:has([data-view-drawer$="-group"]){width:min(760px,calc(100vw - 20px))}
html body .acct-group-table{border:1px solid var(--line);border-radius:14px;overflow:auto}
html body .acct-group-table .table td{white-space:nowrap!important}
html body .acct-group-table .table td:nth-child(3){white-space:normal!important;min-width:160px}

/* Invoice drawer: wide enough to show the A4 template (794px sheet) at full size */
html body .drawer:has(#printable-invoice-doc){width:min(880px,calc(100vw - 20px))}
html body .drawer:has(#printable-invoice-doc) .drawer__body{padding:16px 20px}
html body .drawer #printable-invoice-doc{overflow-x:auto}
html body .drawer #printable-invoice-doc .spec-sheet{margin:0 auto;flex:none}

/* Template line-item tables: proper grid lines on every template */
.spec-sheet table[data-spec-items]{border-collapse:collapse}
.spec-sheet[data-template="fintech"] table[data-spec-items] th{border:1px solid #334155}
.spec-sheet[data-template="fintech"] table[data-spec-items] td{border:1px solid #dbe3ec}

/* Full-page invoice editor: bill form + live default-template preview */
.inv-editor{display:flex;flex-direction:column;gap:16px}
.inv-editor__bar{display:flex;align-items:center;gap:16px;padding:14px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card,20px);box-shadow:var(--shadow)}
.inv-editor__title{flex:1;min-width:0}
.inv-editor__title h2{margin:0;font-size:18px;font-weight:700}
.inv-editor__title small{color:var(--muted);font-size:12.5px}
.inv-editor__actions{display:flex;gap:10px}
.inv-editor__grid{display:grid;grid-template-columns:minmax(380px,460px) minmax(0,1fr);gap:16px;align-items:start}
.inv-editor__form{display:flex;flex-direction:column;gap:14px}
.inv-editor__preview{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card,20px);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:calc(var(--top-h,68px) + 14px)}
.inv-editor__previewbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);font-size:13px}
.inv-editor__previewbar span{color:var(--muted)}
.inv-editor__sheet{padding:16px;background:var(--card-2);overflow:auto;max-height:calc(100vh - var(--top-h,68px) - 130px)}
.inv-editor__sheet .spec-sheet{margin:0 auto;flex:none}
@media (max-width:1250px){.inv-editor__grid{grid-template-columns:1fr}.inv-editor__preview{position:static}}

/* Inline editing on the template */
.tl-ed{font:inherit;color:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;width:100%;min-width:60px;box-sizing:border-box;padding:3px 6px;border:0;border-bottom:1.5px dashed #94a3b8;border-radius:4px;background:rgba(77,51,182,.07);outline:none}
.tl-ed::placeholder{color:#94a3b8;font-weight:400}
.tl-ed:hover{background:rgba(77,51,182,.12)}
.tl-ed:focus{background:#fff;border-bottom:1.5px solid #4d33b6;box-shadow:0 0 0 3px rgba(77,51,182,.18)}
.tl-ed--num{text-align:right;-moz-appearance:textfield}
.tl-ed--num::-webkit-outer-spin-button,.tl-ed--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tl-ed[type=date]{width:auto;min-width:132px}
.tl-ed__del{margin-left:6px;width:20px;height:20px;border-radius:50%;border:1px solid #fca5a5;background:#fee2e2;color:#b91c1c;font-size:14px;line-height:1;cursor:pointer;padding:0}
.tl-ed__del:hover{background:#ef4444;color:#fff}

/* Invoice editor page: toolbar + full-width template */
.inv-tb{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:14px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card,20px);box-shadow:var(--shadow)}
.inv-tb__f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted);min-width:150px}
.inv-tb__f--wide{flex:1;min-width:220px}
.inv-tb__add{margin-left:auto}
.inv-editor__canvas{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-card,20px);padding:20px;overflow:auto}
.inv-editor__canvas .inv-editor__sheet{padding:0;background:transparent;max-height:none;overflow:visible}
.inv-editor__canvas .spec-sheet{margin:0 auto;box-shadow:0 12px 34px rgba(15,23,42,.18)}

/* Default profile marker + set-as-default (star) action */
.tl-default-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:#e3f6f1;border:1px solid #9ad9cb;color:#14806f;font-size:11.5px;font-weight:700}
.tl-default-pill::before{content:"★";font-size:11px}
html body .tl-act--star{--c:#b7791f;--bg:#fff7db;--bg2:#fff;--bd:#f2d27a}
html body .tl-act--star{--ic: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%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E")}
tr.is-editing-row td{background:color-mix(in srgb,var(--primary) 6%,var(--card))!important}

/* Upload preview tile (logo / seal / QR) + thumbnails in lists */
.tl-upload__tile{display:flex;align-items:center;gap:12px;margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--card-2)}
.tl-upload__tile .tl-upload__prev{width:auto;height:64px;max-width:180px;object-fit:contain;border-radius:10px;border:1px solid var(--line-2);background:#fff;padding:4px}
.tl-upload__meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.tl-upload__meta b{font-size:12.5px;color:var(--text)}
.tl-upload__meta span{font-size:11.5px;color:var(--muted)}
.tl-upload__rm{border:1px solid var(--line-2);background:var(--card);color:var(--bad,#b3342b);border-radius:8px;padding:4px 10px;font:600 12px var(--font);cursor:pointer}
.tl-upload__rm:hover{background:var(--bad,#b3342b);color:#fff;border-color:var(--bad,#b3342b)}
.tl-thumb{height:36px;max-width:90px;object-fit:contain;border-radius:8px;border:1px solid var(--line-2);background:#fff;padding:2px;vertical-align:middle}

/* Row actions in saved-profile lists: fixed slots so icons line up in every row */
.tl-act-slots{display:flex;align-items:center;justify-content:center;gap:6px;width:100%}
.tl-act-slot{display:none!important}
html body .tl-act--star{--c:#6a54c9;--bg:#efeafc;--bd:#c7bbf0}

/* ===== Action buttons: fully THEME-driven (follow the theme tokens, light + dark) ===== */
html body .tl-act{
  --c:var(--primary);
  border:1.5px solid color-mix(in srgb,var(--c) 38%,var(--card))!important;
  background:color-mix(in srgb,var(--c) 11%,var(--card))!important;
  color:var(--c)!important;
}
html body .tl-act:hover{background:color-mix(in srgb,var(--c) 20%,var(--card))!important;box-shadow:0 6px 14px -6px color-mix(in srgb,var(--c) 70%,transparent)!important}
html body .tl-act--view{--c:var(--primary)}
html body .tl-act--edit{--c:var(--amber)}
html body .tl-act--delete{--c:var(--bad)}
html body .tl-act--download{--c:var(--teal)}
html body .tl-act--send{--c:var(--sky)}
html body .tl-act--star{--c:var(--cobalt)}
:root[data-theme=dark] html body .tl-act,:root[data-theme=dark] .tl-act{background:color-mix(in srgb,var(--c) 18%,var(--card))!important;border-color:color-mix(in srgb,var(--c) 50%,transparent)!important}

/* Action column: shrink to the icons, symmetric padding, icons dead-centre under the header (every table) */
html body th.tl-act-th,html body td.tl-act-cell{width:1%;white-space:nowrap!important;padding-left:14px!important;padding-right:14px!important;text-align:center!important}
html body td.tl-act-cell > *{display:flex!important;align-items:center;justify-content:center!important;gap:6px;margin:0 auto!important;width:100%}
html body td.tl-act-cell .tl-act-slots{justify-content:center}
html body table.table.table.table th.tl-act-th.tl-act-th,html body table.table.table.table td.tl-act-cell.tl-act-cell,html body table th.tl-act-th.tl-act-th,html body table td.tl-act-cell.tl-act-cell{padding-left:12px!important;padding-right:12px!important;width:1%!important;min-width:0!important;max-width:none!important;text-align:center!important}

/* Row-limited tables: header stays pinned while the rows scroll */
.table-wrap[data-row-limit]{scrollbar-width:thin}
.table-wrap[data-row-limit] thead th{position:sticky;top:0;z-index:3}

/* Inward & Expenses: each register shows 5 rows, then scrolls inside its own container */
html body .inex-split .table-wrap{max-height:408px;overflow-y:auto!important;overflow-x:auto;scrollbar-width:thin;overscroll-behavior:contain}
html body .inex-split .table-wrap thead th{position:sticky;top:0;z-index:2;background:var(--card-2)!important}
html body .inex-split .table-wrap::-webkit-scrollbar{width:8px;height:8px}
html body .inex-split .table-wrap::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}

/* Accounts preview boxes (collection summary etc.): full-width header band, even rows */
html body .acct-preview{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;gap:0}
html body .acct-preview__title{display:block;width:100%;box-sizing:border-box;padding:12px 18px;background:var(--card-2);border-bottom:1px solid var(--line)!important;color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
html body .acct-preview__body{display:flex;flex-direction:column;padding:0}
html body .acct-preview__row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 18px;font-size:13.5px;background:transparent}
html body .acct-preview__row + .acct-preview__row{border-top:1px solid var(--line)}
html body .acct-preview__row > span{color:var(--muted);font-weight:500}
html body .acct-preview__row > b{color:var(--text);font-weight:700;text-align:right}
html body .acct-preview__row.is-good > b{color:var(--good)}
html body .acct-preview__row.is-bad > b{color:var(--bad)}

/* ===== Invoice builder page ===== */
.ivb .ivb-stack{display:flex;flex-direction:column;gap:16px;max-width:1120px;width:100%;margin:0 auto}
.ivb .ivb-stack--tight{gap:12px;max-width:none}
.ivb-tabs{display:flex;gap:6px;max-width:1120px;width:100%;margin:0 auto;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;align-self:center}
.ivb-tabs button{flex:1;height:34px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:600 13px var(--font);cursor:pointer}
.ivb-tabs button.is-on{background:var(--primary);color:var(--on-primary,#fff)}
.ivb-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.ivb-card__head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--card)}
.ivb-card__ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--primary) 12%,var(--card));color:var(--primary);flex:none}
.ivb-card__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ivb-card__txt b{font-size:14px;font-weight:700}
.ivb-card__txt small{font-size:12px;color:var(--muted)}
.ivb-card__body{padding:16px 18px}
.ivb-grid{display:grid;gap:14px}
.ivb-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ivb-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ivb-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ivb-span-2{grid-column:span 2}.ivb-span-3{grid-column:span 3}.ivb-span-4{grid-column:span 4}
.ivb-opts{display:grid;gap:12px}.ivb-opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}.ivb-opts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ivb-opt{display:flex;flex-direction:column;gap:6px;text-align:left;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--card);cursor:pointer;font-family:var(--font);transition:border-color .15s,box-shadow .15s,background .15s}
.ivb-opt:hover{border-color:var(--primary)}
.ivb-opt.is-on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--card));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
.ivb-opt__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ivb-opt__top b{font-size:13.5px;color:var(--text)}
.ivb-opt small{font-size:12px;color:var(--muted);line-height:1.45}
.ivb-opt__radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);flex:none}
.ivb-opt.is-on .ivb-opt__radio{border-color:var(--primary);background:radial-gradient(circle,var(--primary) 45%,transparent 50%)}
.ivb-opt__tag{align-self:flex-start;font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px}
.ivb-opt__tag--good{background:#e3f6f1;color:#14806f}.ivb-opt__tag--warn{background:#fff3dc;color:#a86a12}
.ivb-hint{padding:12px 14px;border:1.5px dashed var(--line-2);border-radius:12px;color:var(--muted);font-size:12.5px;text-align:center;background:var(--card-2)}
.ivb-badge{padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,var(--card));color:var(--primary);font-size:11.5px;font-weight:700;white-space:nowrap}
.ivb-auto{position:relative}.ivb-auto i{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-style:normal;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--primary) 14%,var(--card));color:var(--primary)}
.ivb-auto .input{font-family:ui-monospace,Menlo,monospace;font-weight:700}
.ivb-table-wrap{overflow-x:auto}
.ivb-table{width:100%;border-collapse:collapse;font-size:13px}
.ivb-table th{padding:8px 10px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--card-2);border-bottom:1px solid var(--line)}
.ivb-table td{padding:10px;vertical-align:middle;text-align:center;border-bottom:1px solid var(--line)}
.ivb-desc{min-width:240px;resize:vertical;height:auto!important;min-height:56px}
.ivb-num{text-align:right;min-width:110px}.ivb-qty{min-width:70px;max-width:90px}.ivb-hsn{min-width:100px;max-width:120px}
.ivb-tax{display:inline-flex;flex-direction:column;align-items:center;padding:3px 8px;border-radius:8px;background:#e3f6f1;border:1px solid #9ad9cb;color:#14806f;font-size:11px;font-weight:700}
.ivb-tax small{font-size:11px;color:#14806f;font-weight:600}
.ivb-amt{text-align:right!important;font-weight:700;white-space:nowrap}
.ivb-del{width:26px;height:26px;border-radius:50%;border:1px solid color-mix(in srgb,var(--bad) 40%,var(--card));background:color-mix(in srgb,var(--bad) 10%,var(--card));color:var(--bad);font-size:16px;line-height:1;cursor:pointer}
.ivb-del:disabled{opacity:.35;cursor:not-allowed}
.ivb-totals{align-self:flex-end;width:min(420px,100%);padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);display:flex;flex-direction:column;gap:8px;margin-left:auto}
.ivb-totals>div{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.ivb-totals b{color:var(--text)}
.ivb-totals__grand{padding-top:8px;border-top:1px solid var(--line);font-size:15px!important}
.ivb-totals__grand b{color:var(--primary);font-size:18px}
.ivb-pick{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);font-weight:600}
.ivb-pick .select{min-width:200px}
.ivb-chipbox{display:flex;flex-direction:column;gap:8px}
.ivb-chips{display:flex;flex-wrap:wrap;gap:6px}
.ivb-chip{padding:3px 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--muted);font:600 11.5px var(--font);cursor:pointer}
.ivb-chip.is-on,.ivb-chip:hover{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--card))}
@media (max-width:900px){.ivb-grid--3,.ivb-grid--4,.ivb-opts--3{grid-template-columns:1fr 1fr}.ivb-span-3,.ivb-span-4{grid-column:span 2}}
@media (max-width:620px){.ivb-grid--2,.ivb-grid--3,.ivb-grid--4,.ivb-opts--2,.ivb-opts--3{grid-template-columns:1fr}.ivb-span-2,.ivb-span-3,.ivb-span-4{grid-column:auto}}

/* Sub-headings inside a merged settings group */
.admin-subhead{grid-column:1/-1;margin:4px 0 -2px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.admin-subhead:not(:first-child){margin-top:18px}

/* Shared Theme & Typography panel (shown above every Settings tab) */
.admin-groups--shared{margin-bottom:var(--gap,16px)}
.admin-theme-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:6px;border-top:1px solid var(--line)}
.admin-theme-collapsed{display:flex;justify-content:flex-end;margin-bottom:var(--gap,16px)}

/* ===== Invoice builder: align with the app's own theme (cards, labels, tabs, tokens) ===== */
.ivb .inv-editor__bar{padding:12px 18px;border-radius:var(--r-card)}
.ivb .inv-editor__title{display:flex;flex-direction:column;gap:2px}
.ivb .inv-editor__title b{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.005em}
.ivb .inv-editor__title small{font-size:var(--fs-sm);color:var(--muted)}
/* underline tabs exactly like the Settings / Client tab bars */
.ivb .tabs.ivb-tabs{display:flex;gap:4px;max-width:none;width:auto;margin:0;padding:0 4px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;align-self:stretch}
.ivb .ivb-tabs .tab{flex:none;height:42px;padding:0 14px;border:0;background:transparent;border-radius:0;font-family:var(--font);font-size:var(--fs-md);font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:7px;cursor:pointer;position:relative}
.ivb .ivb-tabs .tab:hover{color:var(--text)}
.ivb .ivb-tabs .tab.is-active{color:var(--primary)}
.ivb .ivb-tabs .tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:2px;background:var(--primary)}
/* full-width content, same card system as admin groups */
.ivb .ivb-stack{max-width:none}
.ivb .ivb-card{border-radius:var(--r-card);box-shadow:var(--shadow)}
.ivb .ivb-card__head{padding:18px 26px;gap:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 5%,var(--card)),var(--card))}
.ivb .ivb-card__ico{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--primary) 12%,var(--card-2))}
.ivb .ivb-card__txt b{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em}
.ivb .ivb-card__txt small{font-size:var(--fs-sm)}
.ivb .ivb-card__body{padding:24px 26px 26px}
/* field labels in the same small-caps style as every other form */
.ivb label.field > span,.ivb .ivb-pick > span{font-size:var(--fs-xs)!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ivb .ivb-grid{gap:16px 18px}
/* option cards = the Theme picker tiles */
.ivb .ivb-opt{border-radius:var(--r-tile);border:1px solid var(--line-2);padding:14px 16px;box-shadow:none}
.ivb .ivb-opt.is-on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--card));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}
.ivb .ivb-opt__top b{font-size:var(--fs-md)}
.ivb .ivb-opt__tag--good{background:color-mix(in srgb,var(--good) 14%,var(--card));color:var(--good)}
.ivb .ivb-opt__tag--warn{background:color-mix(in srgb,var(--amber) 16%,var(--card));color:var(--warn)}
.ivb .ivb-tax{background:color-mix(in srgb,var(--teal) 12%,var(--card));border-color:color-mix(in srgb,var(--teal) 38%,var(--card));color:var(--teal)}
.ivb .ivb-tax small{color:var(--teal)}
.ivb .ivb-hint{border-radius:var(--r-tile)}
/* table = global table look */
.ivb .ivb-table-wrap{border:1px solid var(--line);border-radius:var(--r-tile);overflow:auto}
.ivb .ivb-table th{background:var(--card-2);font-size:var(--fs-xs);letter-spacing:.05em;padding:12px 14px}
.ivb .ivb-table td{padding:12px 14px}
.ivb .ivb-table tbody tr:last-child td{border-bottom:0}
.ivb .ivb-totals{border-radius:var(--r-tile);background:var(--card-2)}
.ivb .ivb-totals__grand b{color:var(--primary)}

/* ===== Invoice builder: compact, professional, far less scrolling ===== */
/* the page header duplicates the toolbar: hide it on the builder */
.page:has(.ivb) > .phead,.page:has(.ivb) > header.phead{display:none}
.page:has(.ivb){padding-top:0}
/* sticky toolbar */
.ivb .inv-editor__bar{position:sticky;top:calc(var(--top-h,68px) + 6px);z-index:30;padding:10px 16px;margin-bottom:0}
.ivb .tabs.ivb-tabs{margin-top:-4px}
/* two-column top: client + invoice details side by side */
.ivb .ivb-row2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1280px){.ivb .ivb-row2{grid-template-columns:1fr}}
.ivb .ivb-stack{gap:14px}
.ivb .ivb-card__head{padding:12px 18px;gap:12px}
.ivb .ivb-card__ico{width:34px;height:34px;border-radius:10px}
.ivb .ivb-card__txt b{font-size:var(--fs-md)}
.ivb .ivb-card__txt small{font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ivb .ivb-card__body{padding:16px 18px 18px}
.ivb .ivb-grid{gap:12px 14px}
.ivb .ivb-opt{padding:10px 14px}
.ivb .ivb-opt small{font-size:11.5px}
.ivb .ivb-hint{padding:8px 12px;font-size:12px}
.ivb .ivb-stack--tight{gap:10px}
.ivb .ivb-table th{padding:9px 12px}.ivb .ivb-table td{padding:8px 12px}
.ivb .ivb-desc{min-height:44px}
.ivb .ivb-totals{padding:10px 16px;gap:6px}
/* collapsible sections (company / bank / signatory) */
.ivb .ivb-card.is-collapsible .ivb-card__head{cursor:pointer}
.ivb .ivb-card.is-collapsible:not(.is-open) .ivb-card__head{border-bottom:0}
.ivb .ivb-card.is-collapsible:not(.is-open) .ivb-card__head{background:var(--card)}
.ivb .ivb-chev{margin-left:auto;flex:none;height:28px;padding:0 12px;border-radius:8px;border:1px solid var(--line-2);background:var(--card-2);color:var(--text);font:600 12px var(--font);cursor:pointer}
.ivb .ivb-chev:hover{border-color:var(--primary);color:var(--primary)}
.ivb .ivb-card.is-collapsible .ivb-pick{margin-left:auto}
.ivb .ivb-card.is-collapsible .ivb-pick + .ivb-chev{margin-left:8px}

/* Team leaderboard: real column header aligned with the row grid */
.tm-head{display:grid;grid-template-columns:30px 40px minmax(0,1.4fr) minmax(130px,1fr) 80px 80px 70px;align-items:center;gap:14px;margin:0 10px;padding:10px 8px;background:var(--card-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tm-head > span:nth-child(1){text-align:center}
.tm-head__who{grid-column:2 / span 2;padding-left:0}
.tm-head > span:nth-child(n+4){text-align:right}
.tm-head > span:nth-child(3){text-align:left}
.tm-board .tm-row__fig small{display:none}
.tm-board .tm-row__fig{align-content:center}
@media (max-width:1100px){.tm-head{display:none}.tm-board .tm-row__fig small{display:block}}

/* ===== Invoice builder: single containers + clean alignment ===== */
/* totals live INSIDE the line-items card, right-aligned under the Total column */
.ivb .ivb-card .ivb-totals{width:min(380px,100%);margin:14px 0 0 auto;border:1px solid var(--line);border-radius:var(--r-tile);background:var(--card-2);align-self:auto}
/* company + bank + signatory = one container, rows split by dividers */
.ivb .ivb-card--group{overflow:hidden}
.ivb .ivb-sub{background:var(--card)}
.ivb .ivb-sub + .ivb-sub{border-top:1px solid var(--line)}
.ivb .ivb-sub .ivb-card__head{padding:12px 18px;border-bottom:0;background:transparent;display:flex;align-items:center;gap:12px;min-height:60px}
.ivb .ivb-sub.is-open .ivb-card__head{border-bottom:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 4%,var(--card)),var(--card))}
.ivb .ivb-sub .ivb-card__body{padding:16px 18px 20px;background:var(--card)}
/* header controls: label + select on one line, vertically centred, same height as the Edit button */
.ivb .ivb-card__head .ivb-pick{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;margin-left:auto;margin-bottom:0}
.ivb .ivb-card__head .ivb-pick > span{white-space:nowrap;line-height:1}
.ivb .ivb-card__head .ivb-pick .select{height:32px;min-width:220px;margin:0}
.ivb .ivb-card__head .ivb-chev{margin-left:8px;height:32px;display:inline-flex;align-items:center}
.ivb .ivb-card__head .ivb-card__txt{min-width:0}
/* line-items table: fixed columns, headers aligned with their cells */
.ivb .ivb-table{table-layout:fixed;width:100%}
.ivb .ivb-table th:nth-child(1),.ivb .ivb-table td:nth-child(1){width:64px;text-align:center}
.ivb .ivb-table th:nth-child(2),.ivb .ivb-table td:nth-child(2){width:auto;text-align:left}
.ivb .ivb-table th:nth-child(3),.ivb .ivb-table td:nth-child(3){width:150px;text-align:right}
.ivb .ivb-table th:nth-child(4),.ivb .ivb-table td:nth-child(4){width:92px;text-align:center}
.ivb .ivb-table th:nth-child(5),.ivb .ivb-table td:nth-child(5){width:120px;text-align:center}
.ivb .ivb-table th:nth-child(6),.ivb .ivb-table td:nth-child(6){width:112px;text-align:center}
.ivb .ivb-table th:nth-child(7),.ivb .ivb-table td:nth-child(7){width:130px;text-align:right}
.ivb .ivb-table th:nth-child(8),.ivb .ivb-table td:nth-child(8){width:52px;text-align:center}
.ivb .ivb-table .ivb-desc,.ivb .ivb-table .ivb-num,.ivb .ivb-table .ivb-hsn{min-width:0;width:100%}
.ivb .ivb-table .ivb-qty{max-width:none;text-align:center}
.ivb .ivb-table td{vertical-align:middle}
.ivb .ivb-table .ivb-amt{text-align:right}

/* Signatory block inside the company sub-card */
.ivb .ivb-subhead{display:flex;flex-direction:column;gap:2px;margin:20px 0 12px;padding-top:16px;border-top:1px dashed var(--line)}
.ivb .ivb-subhead b{font-size:14px;color:var(--ink)}
.ivb .ivb-subhead small{color:var(--muted);font-size:12px}

/* Themed day calendar (replaces the native date picker) */
html body .theme-calendar--days{padding:12px;z-index:99999}
.theme-calendar--days .theme-cal-year{font-weight:700;font-size:14px;color:var(--text)}
.theme-calendar--days .tc-week,.theme-calendar--days .tc-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.theme-calendar--days .tc-week{margin:8px 0 4px}
.theme-calendar--days .tc-week span{text-align:center;font-size:11px;font-weight:700;color:var(--muted);padding:4px 0}
.theme-calendar--days .tc-day{height:34px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.theme-calendar--days .tc-day:hover:not(:disabled){background:color-mix(in srgb,var(--primary) 12%,var(--card))}
.theme-calendar--days .tc-day.is-now{box-shadow:inset 0 0 0 1px var(--primary);color:var(--primary);font-weight:700}
.theme-calendar--days .tc-day.is-selected{background:var(--primary);color:#fff;font-weight:700}
.theme-calendar--days .tc-day:disabled{opacity:.35;cursor:not-allowed}
.theme-calendar--days .tc-foot{display:flex;justify-content:space-between;gap:8px;margin-top:8px}

/* Section toggle = icon only; opened sections scroll inside instead of growing the page */
.ivb .ivb-card__head .ivb-chev{width:32px;padding:0;justify-content:center;font-size:0}
.ivb .ivb-chev .ico{width:16px;height:16px;transition:transform .2s}
.ivb .ivb-sub.is-open .ivb-chev .ico{transform:rotate(180deg)}
.ivb .ivb-sub.is-open .ivb-card__body{max-height:min(420px,52vh);overflow-y:auto;overscroll-behavior:contain}
/* separate tax columns */
.ivb .ivb-pct,.ivb .ivb-taxamt{text-align:center;font-weight:600;white-space:nowrap}
.ivb .ivb-pct{color:var(--teal)}

/* Profile-backed sections are view only; manual entry is editable */
.ivb .ivb-fs{border:0;margin:0;padding:0;min-width:0}
.ivb .ivb-fs.is-view .input,.ivb .ivb-fs.is-view .select,.ivb .ivb-fs.is-view .textarea{background:var(--card-2);color:var(--text);opacity:1;-webkit-text-fill-color:var(--text);cursor:default}
.ivb .ivb-fs.is-view .ivb-chip,.ivb .ivb-fs.is-view button{opacity:.55;cursor:default}
.ivb .ivb-pick{display:inline-flex;align-items:center;min-width:240px}
.ivb .ivb-pick .select{width:100%}

/* Line-items table: theme header, everything centred, widths independent of column count */
.ivb .ivb-table{table-layout:auto;width:100%}
.ivb .ivb-table th,.ivb .ivb-table td{width:auto!important;text-align:center!important;vertical-align:middle;white-space:nowrap}
.ivb .ivb-table th{background:color-mix(in srgb,var(--primary) 12%,var(--card))!important;color:var(--primary)!important;border-bottom:1px solid color-mix(in srgb,var(--primary) 28%,var(--line));font-size:11px;letter-spacing:.06em;padding:12px 10px}
.ivb .ivb-table th:first-child,.ivb .ivb-table td:first-child{width:64px!important}
.ivb .ivb-table th:nth-child(2),.ivb .ivb-table td:nth-child(2){width:32%!important;min-width:240px;white-space:normal}
.ivb .ivb-table th:last-child,.ivb .ivb-table td:last-child{width:52px!important}
.ivb .ivb-table td{padding:10px}
.ivb .ivb-table .ivb-desc{text-align:left;min-width:220px}
.ivb .ivb-table .ivb-num,.ivb .ivb-table .ivb-qty,.ivb .ivb-table .ivb-hsn{text-align:center;width:100%;min-width:90px;max-width:140px;margin:0 auto;display:block}
.ivb .ivb-table .ivb-amt,.ivb .ivb-table .ivb-taxamt,.ivb .ivb-table .ivb-pct{text-align:center!important;font-weight:700}
.ivb .ivb-table .ivb-taxamt{color:var(--text)}

/* Discount controls in the totals box */
.ivb .ivb-disc{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0}
.ivb .ivb-disc__ctl{display:flex;gap:8px;align-items:center}
.ivb .ivb-disc__ctl .select{min-width:130px}
.ivb .ivb-disc__ctl .input{width:110px;text-align:center}
.ivb .ivb-totals__disc{display:flex;justify-content:space-between}
.ivb .ivb-totals__disc b{color:var(--good,#14806f)}

/* Saved-profile rows: the default row keeps an empty star slot so Edit / Delete line up in every row */
html body .tl-act-slots{gap:0}
html body .tl-act-slot{display:inline-block!important;width:35.33px;height:34px;flex:none;visibility:hidden}

/* Uploaded logo / seal / QR: preview centred in its tile and in table cells */
.tl-upload__tile{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;padding:12px}
.tl-upload__tile .tl-upload__prev{display:block;margin:0 auto}
.tl-upload__tile .tl-upload__meta{display:flex;flex-direction:column;align-items:center;text-align:center}
.tl-thumb{display:block;margin:0 auto}

/* ===== Action icons — rebuilt: glyph is absolutely centred in a fixed round button, regardless of text/padding ===== */
html body .tl-act{
  position:relative!important;display:inline-block!important;flex:none;
  width:34px!important;height:34px!important;min-width:34px!important;max-width:34px!important;
  padding:0!important;margin:0 3px!important;border-radius:50%!important;overflow:hidden;
  font-size:0!important;line-height:0!important;text-indent:-9999px;letter-spacing:0;
}
html body .tl-act::before{
  content:""!important;position:absolute!important;inset:0;margin:auto!important;
  width:16px!important;height:16px!important;display:block!important;text-indent:0;
  background:currentColor!important;
  -webkit-mask:var(--ic) center/16px 16px no-repeat!important;mask:var(--ic) center/16px 16px no-repeat!important;
}
html body .tl-act:has(svg)::before{display:none!important}
html body .tl-act svg,html body .tl-act .ico{position:absolute!important;inset:0;margin:auto!important;width:16px!important;height:16px!important;text-indent:0}
html body .tl-act-slot{width:40px}

/* Collapse / expand toggle on settings cards: icon only */
html body .btn.tl-chev{width:34px;min-width:34px;height:34px;padding:0;display:inline-grid;place-items:center;border-radius:10px;font-size:0}
html body .btn.tl-chev .ico{width:16px;height:16px;transition:transform .2s}
html body .btn.tl-chev.is-open .ico{transform:rotate(180deg)}

/* Form action row (Cancel / Save as new / Update): one tidy right-aligned group */
html body .form-save-row{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;padding-top:18px;margin-top:10px;border-top:1px solid var(--line)}
html body .form-save-row .btn{height:38px;padding:0 18px;border-radius:10px;font-weight:600;font-size:13px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px}
html body .form-save-row .btn:not(.btn--primary):not(.btn--ghost){background:var(--card);border:1px solid var(--line-2);color:var(--text)}
html body .form-save-row .btn:not(.btn--primary):not(.btn--ghost):hover{border-color:var(--primary);color:var(--primary)}
html body .form-save-row .btn--ghost{background:transparent;border:1px solid transparent;color:var(--muted)}
html body .form-save-row .btn--ghost:hover{background:var(--card-2);color:var(--text)}
html body .form-save-row .btn--primary{min-width:140px;box-shadow:0 6px 14px -8px var(--primary)}
html body .form-save-row .btn:disabled{opacity:.6;cursor:not-allowed}

/* Cancel = secondary twin of the primary submit button, everywhere */
html body button.tl-cancel{
  height:38px;min-width:96px;padding:0 18px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:600 13px var(--font);white-space:nowrap;cursor:pointer;
  background:var(--card)!important;color:var(--text)!important;border:1px solid var(--line-2)!important;box-shadow:none!important;
  transition:border-color .15s,color .15s,background .15s}
html body button.tl-cancel:hover:not(:disabled){border-color:var(--primary)!important;color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 6%,var(--card))!important}
html body button.tl-cancel:disabled{opacity:.6;cursor:not-allowed}

/* Page Visibility: three toggle cards per row */
.admin-toggle-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.admin-toggle-grid .admin-toggle-row{margin:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-tile,14px);background:var(--card-2);transition:border-color .15s,background .15s,box-shadow .15s}
.admin-toggle-grid .admin-toggle-row:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--line));background:color-mix(in srgb,var(--primary) 5%,var(--card))}
.admin-toggle-grid .admin-toggle-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.admin-toggle-grid .admin-toggle-info b{font-size:14px;color:var(--text)}
@media (max-width:1100px){.admin-toggle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.admin-toggle-grid{grid-template-columns:1fr}}

/* Select chevron: clear, uniform and vertically centred on every dropdown */
html body select,html body .select,html body select.select{
  appearance:none!important;-webkit-appearance:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:16px 16px!important;
  padding-right:36px!important}
html body select:hover,html body .select:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c52cf' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important}
:root[data-theme=dark] body select,:root[data-theme=dark] body .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important}

/* ===== Today: Activity + Going quiet — theme-driven tiles ===== */
html body .td-feed{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
html body .td-feed > li{display:flex;align-items:center;gap:14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-tile,14px);background:var(--card-2);transition:border-color .15s,background .15s,transform .15s}
html body .td-feed > li:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--line));background:color-mix(in srgb,var(--primary) 5%,var(--card))}
html body .td-feed .tico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;color:var(--tone,var(--primary));background:color-mix(in srgb,var(--tone,var(--primary)) 14%,var(--card));border:1px solid color-mix(in srgb,var(--tone,var(--primary)) 30%,var(--card))}
html body .td-feed .tico .ico{width:18px;height:18px}
html body .td-feed .li__main b{font-size:14px;color:var(--text);font-weight:600}
html body .td-feed .li__main small{display:block;margin-top:2px;color:var(--muted)}
html body .td-feed::before,html body .td-feed li::before,html body .td-feed li::after{display:none!important}

html body .card .list > .li[data-row]{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:8px;border:1px solid var(--line);border-radius:var(--r-tile,14px);background:var(--card-2);transition:border-color .15s,background .15s}
html body .card .list > .li[data-row]:last-child{margin-bottom:0}
html body .card .list > .li[data-row]:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--line));background:color-mix(in srgb,var(--primary) 5%,var(--card))}
html body .td-quiet__days{min-width:46px;text-align:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--muted) 14%,var(--card));color:var(--text)}
html body .td-quiet__days.is-late{background:color-mix(in srgb,var(--bad) 13%,var(--card));color:var(--bad)}
html body .card .list > .li[data-row] .btn--sm{border-radius:10px;height:34px;border:1px solid var(--line-2);background:var(--card);color:var(--text);font-weight:600}
html body .card .list > .li[data-row] .btn--sm:hover{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--card))}

/* ==========================================================================
   LOGIN — classic CRM look: soft themed page, centred white card, theme tokens (light + dark)
   ========================================================================== */
html body .lg-login{
  justify-content:center;align-items:center;padding:24px;overflow-y:auto;
  background:
    radial-gradient(900px 480px at 15% 0%,color-mix(in srgb,var(--primary) 9%,transparent),transparent 60%),
    radial-gradient(800px 460px at 100% 100%,color-mix(in srgb,var(--citron,var(--primary)) 14%,transparent),transparent 60%),
    var(--bg,#eef1f6);
  color:var(--text)}
html body .lg-login__bg,html body .lg-login__shade{display:none!important}
html body .lg-card{
  width:min(100%,432px);padding:36px 34px 26px;border-radius:20px;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 24px 60px -28px rgba(20,28,45,.28),0 2px 6px rgba(20,28,45,.05);
  backdrop-filter:none;-webkit-backdrop-filter:none}
html body .lg-brand{justify-content:center;margin-bottom:22px}
html body .lg-brand__name{color:var(--text)}
html body .lg-title{color:var(--text);text-align:center;font-size:28px}
html body .lg-desc{color:var(--muted);text-align:center;margin-bottom:22px}
html body .lg-field{background:var(--card-2)!important;border:1px solid var(--line-2)!important;height:46px!important}
html body .lg-field:focus-within{background:var(--card)!important;border-color:var(--primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)!important}
html body .lg-field__icon{color:var(--muted)}
html body .lg-input{color:var(--text)!important}
html body .lg-input::placeholder{color:var(--muted);opacity:.8}
html body .lg-input:-webkit-autofill{-webkit-text-fill-color:var(--text)}
html body .lg-eye{color:var(--muted)}
html body .lg-eye:hover{color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent)}
html body .lg-err{color:var(--bad)}
html body .lg-forgot{color:var(--primary)}
html body .lg-forgot:hover{color:var(--primary);filter:brightness(.9)}
html body .lg-submit{height:46px;border-radius:12px}
html body .lg-foot{justify-content:center;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:22px}
html body .lg-dev{background:var(--card-2);border:1px dashed var(--line-2)}
html body .lg-dev__title{color:var(--muted)}
html body .lg-dev__item:hover{background:color-mix(in srgb,var(--primary) 6%,var(--card))}
html body .lg-dev__item.is-selected{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,var(--card))}
html body .lg-dev__who b{color:var(--text)}
html body .lg-dev__who small{color:var(--muted)}

/* login: typed text was white-on-light (an older !important rule) — use the theme text colour */
html body .lg-login .lg-input,html body .lg-login input.lg-input{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important;caret-color:var(--primary)}
html body .lg-login .lg-input::placeholder{color:var(--muted)!important;-webkit-text-fill-color:var(--muted)!important}

/* ==========================================================================
   LOGIN — split "workspace" look: dark hero with big headline on the left,
   Welcome-back card on the right. Colours come from theme tokens
   (--side, --primary, --citron) so it follows the CRM theme.
   ========================================================================== */
html body main.lg-login{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;justify-content:initial;padding:0;overflow:auto;
  background:var(--side,#141619);color:#eef1f7;
  --lg-accent:var(--primary);--lg-on-accent:var(--on-primary,#fff)}
html body main.lg-login .lg-hero{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  padding:clamp(36px,6vw,92px) clamp(28px,5vw,72px) clamp(28px,4vw,56px);
  border-right:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(620px 420px at 10% 0%,color-mix(in srgb,var(--primary) 26%,transparent),transparent 65%),
    radial-gradient(520px 380px at 40% 70%,color-mix(in srgb,var(--citron,var(--primary)) 7%,transparent),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.25))}
html body main.lg-login .lg-hero__title{margin:clamp(20px,6vh,70px) 0 0;display:flex;flex-direction:column;font-size:clamp(34px,4.4vw,70px);line-height:1.04;font-weight:800;letter-spacing:-.035em}
html body main.lg-login .lg-hero__title span{display:block;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html body main.lg-login .lg-hero__a{background-image:linear-gradient(90deg,var(--citron,#d8e45a),color-mix(in srgb,var(--citron,#d8e45a) 55%,var(--primary)))}
html body main.lg-login .lg-hero__b{background-image:linear-gradient(180deg,#fff,#b9bfcc)}
html body main.lg-login .lg-hero__c{background-image:linear-gradient(180deg,#c9ced9,#6b7385)}
html body main.lg-login .lg-hero__sub{position:relative;z-index:1;max-width:520px;margin:0 0 clamp(60px,14vh,160px);font-size:clamp(16px,1.6vw,23px);line-height:1.35;color:rgba(231,236,246,.5);font-weight:500}
html body main.lg-login .lg-hero__ghost{position:absolute;left:-2%;bottom:-.14em;font-size:clamp(120px,17vw,260px);font-weight:900;line-height:.8;letter-spacing:-.04em;white-space:nowrap;color:rgba(255,255,255,.035);-webkit-text-stroke:1px rgba(255,255,255,.07);user-select:none;pointer-events:none}

html body main.lg-login .lg-card{
  align-self:center;justify-self:center;width:min(calc(100% - 32px),452px);margin:32px 0;padding:34px 32px 24px;border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px -30px rgba(0,0,0,.7);backdrop-filter:none}
html body main.lg-login .lg-brand{justify-content:center;margin-bottom:18px}
html body main.lg-login .lg-brand__name{color:#fff}
html body main.lg-login .lg-title{color:#fff;font-size:34px;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,#aeb5c4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html body main.lg-login .lg-desc{color:rgba(231,236,246,.6);margin-bottom:20px}
html body main.lg-login .lg-label{display:block;margin:4px 4px -2px;font-size:13.5px;font-weight:600;color:#e6e9f0}
html body main.lg-login .lg-field{height:52px!important;border-radius:999px!important;padding:0 18px!important;background:rgba(0,0,0,.32)!important;border:1px solid rgba(255,255,255,.14)!important}
html body main.lg-login .lg-field:focus-within{background:rgba(0,0,0,.42)!important;border-color:var(--primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent)!important}
html body main.lg-login .lg-field.is-bad{border-color:var(--bad,#f87171)!important}
html body main.lg-login .lg-field__icon{color:rgba(231,236,246,.7)}
html body main.lg-login .lg-input,html body main.lg-login input.lg-input{color:#fff!important;-webkit-text-fill-color:#fff!important}
html body main.lg-login .lg-input::placeholder{color:rgba(231,236,246,.45)!important;-webkit-text-fill-color:rgba(231,236,246,.45)!important}
html body main.lg-login .lg-input:-webkit-autofill{-webkit-text-fill-color:#fff!important}
html body main.lg-login .lg-eye{color:var(--citron,#d8e45a)}
html body main.lg-login .lg-eye:hover{background:rgba(255,255,255,.08);color:#fff}
html body main.lg-login .lg-err{color:#fca5a5}
html body main.lg-login .lg-forgot{color:var(--citron,#d8e45a);font-size:13px}
html body main.lg-login .lg-forgot:hover{color:#fff}
html body main.lg-login .lg-submit{height:52px;border-radius:999px;font-size:15px;font-weight:700;
  background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 62%,var(--citron,#d8e45a)));color:var(--lg-on-accent);
  box-shadow:0 14px 30px -14px color-mix(in srgb,var(--primary) 90%,transparent)}
html body main.lg-login .lg-foot{justify-content:center;border-top:0;padding-top:0;margin-top:20px;color:rgba(231,236,246,.45)}
html body main.lg-login .lg-dev{background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.2)}
html body main.lg-login .lg-dev__title{color:rgba(231,236,246,.65)}
html body main.lg-login .lg-dev__item:hover{background:rgba(255,255,255,.07)}
html body main.lg-login .lg-dev__item.is-selected{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 22%,transparent)}
html body main.lg-login .lg-dev__who b{color:#fff}
html body main.lg-login .lg-dev__who small{color:rgba(231,236,246,.6)}
@media (max-width:900px){
  html body main.lg-login{grid-template-columns:1fr}
  html body main.lg-login .lg-hero{display:none}
}

/* ---- login v5: heading outside a glass container (like the reference) + neutral top-left spotlight ---- */
html body main.lg-login .lg-hero{
  background:
    radial-gradient(ellipse 62% 46% at 6% -6%,rgba(255,255,255,.30),rgba(255,255,255,.08) 38%,transparent 68%),
    linear-gradient(128deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 20%,transparent 44%),
    radial-gradient(520px 380px at 40% 72%,color-mix(in srgb,var(--citron,var(--primary)) 6%,transparent),transparent 70%),
    color-mix(in srgb,var(--side,#141619) 82%,#000)}
html body main.lg-login .lg-right{display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(calc(100% - 40px),470px);justify-self:center;padding:32px 0}
html body main.lg-login .lg-brand{margin-bottom:14px}
html body main.lg-login .lg-title{font-size:clamp(34px,3.4vw,52px);margin:0 0 8px;text-align:center}
html body main.lg-login .lg-desc{font-size:15.5px;margin:0 0 26px;text-align:center;color:rgba(231,236,246,.55)}
html body main.lg-login .lg-card{
  width:100%;margin:0;padding:28px 28px 26px;border-radius:38px;
  background:linear-gradient(rgba(14,18,22,.55),rgba(14,18,22,.55)) padding-box,
    linear-gradient(140deg,rgba(255,255,255,.30),rgba(255,255,255,.05) 38%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.22)) border-box;
  border:1px solid transparent;box-shadow:none}
html body main.lg-login .lg-foot{margin:24px 0 0;font-size:13px;color:rgba(231,236,246,.45)}
html body main.lg-login .lg-form{gap:10px}
html body main.lg-login .lg-label{margin:6px 4px 0}
@media (max-width:900px){html body main.lg-login .lg-right{justify-self:center}}

/* ====================================================================
   DATE FILTER — classic, professional look (overrides the block above):
   sentence-case labels, flat surfaces, hairline borders, restrained accent.
   ==================================================================== */
.drp { width: 520px; border-radius: 10px; padding: 0; gap: 0; box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .06); animation: none; }
.drp__head { padding: 14px 16px; border-bottom: 1px solid var(--line); gap: 10px; }
.drp__icon { width: 28px; height: 28px; border-radius: 6px; background: var(--card-2); color: var(--muted); }
.drp__icon svg { width: 15px; height: 15px; }
.drp__title { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.drp__sub { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-top: 1px; }
.drp__close { width: 26px; height: 26px; border-radius: 6px; }
.drp__tabs { display: flex; gap: 0; padding: 0 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.drp__tab { flex: 0 0 auto; height: 38px; padding: 0 14px; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.drp__tab:hover { color: var(--text); background: transparent; }
.drp__tab.is-on { background: transparent; color: var(--primary-ink, var(--primary)); box-shadow: none; border-bottom-color: var(--primary); font-weight: 600; }
.drp__fields { padding: 14px 16px 0; gap: 8px; }
.drp__field > span { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.drp__input { height: 34px; border-radius: 6px; font-size: 13px; font-weight: 400; text-align: left; justify-content: flex-start; background: var(--card); border: 1px solid var(--line-2); }
.drp__input:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); }
.drp__slash { padding-bottom: 8px; }
.drp__body { padding: 12px 16px; gap: 14px; grid-template-columns: 138px minmax(0, 1fr); }
.drp__body--all, .drp__body--year { grid-template-columns: minmax(0, 1fr); }
.drp__side { padding-right: 12px; gap: 1px; }
.drp__cap { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--muted); margin: 0 0 6px 8px; }
.drp__chip { height: 30px; border-radius: 6px; font-size: 13px; font-weight: 400; padding-left: 10px; }
.drp__chip::before { display: none; }
.drp__chip:hover { background: var(--card-2); }
.drp__navt b { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.drp__navt small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.drp__arrow { border-radius: 6px; width: 28px; height: 28px; }
.drp__dow span { font-size: 12px; font-weight: 500; }
.drp__days, .drp__dow { gap: 2px; }
.drp__day { height: 32px; border-radius: 6px; font-size: 13px; font-weight: 400; }
.drp__day.is-in { background: color-mix(in srgb, var(--primary) 10%, transparent); border-radius: 0; }
.drp__day.is-today { box-shadow: inset 0 0 0 1px var(--primary); border-radius: 6px; }
.drp__day.is-edge { background: var(--primary); box-shadow: none; border-radius: 6px; font-weight: 600; }
.drp__cell { border-radius: 6px; height: 40px; }
.drp__cell b { font-size: 13px; font-weight: 500; letter-spacing: 0; }
.drp__cell.is-edge { box-shadow: none; }
.drp__scope { border-radius: 6px; font-size: 13px; font-weight: 500; background: var(--card-2); }
.drp__empty { border-radius: 6px; }
.drp__foot { padding: 12px 16px; background: var(--card-2); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.drp__clear { font-size: 13px; font-weight: 500; letter-spacing: 0; }
.drp__quick { height: 32px; border-radius: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.drp__apply { height: 32px; padding: 0 18px; border-radius: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; box-shadow: none; }
.drp__empty, .drp__scope { margin: 0; }
/* header trigger */
.top__range { border-radius: 8px; }
.top__range-main { font-size: 13px; font-weight: 500; }
.top__range-badge { font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ====================================================================
   PAGER — theme-based, server-side pagination footer (assets/pager.js)
   ==================================================================== */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 13px; border-radius: 0 0 var(--r-card, 14px) var(--r-card, 14px); }
.pager__info b { color: var(--text); font-weight: 600; }
.pager__nav { display: inline-flex; align-items: center; gap: 4px; }
.pager__btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.pager__btn--wide { padding: 0 12px; }
.pager__btn svg { width: 14px; height: 14px; }
.pager__btn:hover:not(:disabled):not(.is-current) { background: var(--card-2); border-color: var(--line-2); }
.pager__btn.is-current { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); font-weight: 600; cursor: default; }
.pager__btn:disabled { opacity: .45; cursor: not-allowed; }
.pager__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pager__gap { padding: 0 4px; color: var(--muted); }
.table-wrap + .pager, .tbl-wrap + .pager { margin-top: 0; }
@media (max-width: 640px) { .pager { justify-content: center; } .pager__info { width: 100%; text-align: center; } }

/* standalone pager under a card (client tabs / master pages) */
.pager-slot { margin-top: 12px; }
.pager-slot .pager { border: 1px solid var(--line); border-radius: var(--r-card, 14px); }

/* project stage picker + completion timeline */
.stage-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-picker__opt { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 13px; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.stage-picker__opt:hover { background: var(--card-2); }
.stage-picker__opt.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--card)); font-weight: 600; }
.stage-picker__opt input { accent-color: var(--primary); }
.tl-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.tl-stage { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding-bottom: 16px; position: relative; }
.tl-stage:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--line); }
.tl-stage--completed:not(:last-child)::before { background: var(--primary); }
.tl-stage__dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--card-2); color: var(--muted); border: 2px solid var(--line); z-index: 1; }
.tl-stage__dot svg { width: 14px; height: 14px; }
.tl-stage--inprogress .tl-stage__dot { border-color: var(--primary); color: var(--primary-ink, var(--primary)); background: var(--card); }
.tl-stage--completed .tl-stage__dot { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); }
.tl-stage__body { display: grid; gap: 8px; min-width: 0; }
.tl-stage__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tl-stage__fields { display: grid; grid-template-columns: 140px 1fr 1fr auto; gap: 8px; align-items: center; }
.tl-stage__fields .input, .tl-stage__fields .select { height: 34px; }
@media (max-width: 640px) { .tl-stage__fields { grid-template-columns: 1fr 1fr; } }
.drp, .drp * { text-transform: none; }

/* ---- three-column themed forms (client registration, employee page) ---- */
.cf { display: grid; gap: 20px; }
.form-grid--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
.form-grid--3 .span-2 { grid-column: span 2; }
.form-grid--3 .span-3 { grid-column: 1 / -1; }
.form-grid--3 .cf__calc { grid-column: 1 / -1; }
@media (max-width: 980px) { .form-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid--3 .span-3 { grid-column: 1 / -1; } }
@media (max-width: 640px) { .form-grid--3 { grid-template-columns: minmax(0, 1fr); } .form-grid--3 .span-2 { grid-column: auto; } }
.cf__card .card__head { padding-bottom: 12px; }
.cf-docs .input { height: 36px; }

/* ---- template colour picker + default marker ---- */
.tmpl-color { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tmpl-color__label { font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.tmpl-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; padding: 0; transition: transform .12s ease; }
.tmpl-swatch:hover { transform: scale(1.12); }
.tmpl-swatch.is-on { box-shadow: 0 0 0 2px var(--text); }
.tmpl-color__input { width: 28px; height: 24px; padding: 0; border: 1px solid var(--line-2); border-radius: 6px; background: var(--card); cursor: pointer; }
.tmpl-default-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--good, #16a34a) 14%, var(--card)); color: var(--good-ink, var(--good, #15803d)); border: 1px solid color-mix(in srgb, var(--good, #16a34a) 35%, transparent); }
.tmpl-default-pill svg { width: 12px; height: 12px; }
.tmpl-card {
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: transform .18s cubic-bezier(.2,0,0,1), box-shadow .18s cubic-bezier(.2,0,0,1), border-color .18s ease !important;
}
.tmpl-card:hover {
  transform: translateY(-2px) !important;
}
.tmpl-card.is-selected {
  border-radius: 18px !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent), var(--shadow-pop) !important;
}
.tmpl-card__swatch {
  border-radius: 17px 17px 0 0 !important;
  overflow: hidden !important;
}
.tmpl-card.is-default { box-shadow: inset 3px 0 0 var(--good, #16a34a); }

/* ====================================================================
   FORM WIZARD (assets/wizard.js) — step header, sectioned cards, live preview
   ==================================================================== */
.wz { display: grid; gap: 16px; }
.wz-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 20px; border-radius: var(--r-card, 16px); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card, none); }
.wz-top__l { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.wz-top__back { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.wz-top__back:hover { border-color: var(--line-2); }
.wz-top__back svg { width: 14px; height: 14px; }
.wz-top__icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary-ink, var(--primary)); }
.wz-top__icon svg { width: 19px; height: 19px; }
.wz-top__title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.wz-top__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.wz-modes { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 11px; background: var(--card-2); }
.wz-modes__btn { height: 30px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.wz-modes__btn.is-on { background: var(--primary); color: var(--on-primary, #fff); box-shadow: 0 6px 14px -8px var(--primary); }

.wz-progress { padding: 16px 20px 18px; border-radius: var(--r-card, 16px); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card, none); display: grid; gap: 12px; }
.wz-progress__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wz-progress__title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.wz-progress__title svg { width: 16px; height: 16px; color: var(--primary); }
.wz-progress__title em { font-style: normal; color: var(--primary-ink, var(--primary)); }
.wz-progress__pct { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 10%, var(--card)); color: var(--primary-ink, var(--primary)); font-variant-numeric: tabular-nums; }
.wz-progress__bar { height: 6px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.wz-progress__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #a855f7)); transition: width .35s ease; }
.wz-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.wz-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); text-align: left; font: inherit; cursor: pointer; min-width: 0; transition: border-color .15s ease, background .15s ease; }
.wz-step:hover { border-color: var(--line-2); }
.wz-step__n { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.wz-step__n svg { width: 15px; height: 15px; }
.wz-step__t { display: grid; min-width: 0; }
.wz-step__t small { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.wz-step__t b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-step.is-current { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #4338ca)); border-color: var(--primary); color: var(--on-primary, #fff); box-shadow: 0 10px 22px -14px var(--primary); }
.wz-step.is-current .wz-step__n { background: rgba(255,255,255,.2); border-color: transparent; color: inherit; }
.wz-step.is-current .wz-step__t small { color: rgba(255,255,255,.78); }
.wz-step.is-done { background: color-mix(in srgb, var(--good, #16a34a) 10%, var(--card)); border-color: color-mix(in srgb, var(--good, #16a34a) 35%, transparent); }
.wz-step.is-done .wz-step__n { background: var(--good, #16a34a); border-color: transparent; color: #fff; }
.wz-step.is-done .wz-step__t small { color: var(--good-ink, var(--good, #15803d)); }

.wz-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.wz[data-wz-mode="all"] .wz-body { grid-template-columns: minmax(0, 1fr) 340px; }
.wz-main { display: grid; gap: 16px; min-width: 0; }
.wz-sec { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--r-card, 16px); box-shadow: var(--shadow-card, none); padding: 18px 20px 20px; display: grid; gap: 14px; }
.wz-sec[hidden] { display: none; }
.wz-sec__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.wz-sec__title { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; color: var(--primary-ink, var(--primary)); }
.wz-sec__title svg { width: 16px; height: 16px; }
.wz-sec__desc { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.wz-sec__badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 10%, var(--card)); color: var(--primary-ink, var(--primary)); white-space: nowrap; }
.wz-sec__body { display: grid; gap: 14px; }
.wz-panel { display: grid; gap: 12px; padding: 14px 16px 16px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.wz-panel__label { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.wz-panel__label svg { width: 14px; height: 14px; color: var(--primary); }
.wz-panel .input, .wz-panel .select, .wz-panel .textarea { background: var(--card); }
.wz-panel .table-wrap { margin: 0 -16px -16px; }
.wz-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wz-foot__l { display: flex; align-items: center; gap: 8px; }
.wz-foot .btn svg { width: 14px; height: 14px; }

.wz-preview { position: sticky; top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card, 16px); box-shadow: var(--shadow-card, none); overflow: hidden; }
.wz-preview__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 13px; }
.wz-preview__icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary-ink, var(--primary)); }
.wz-preview__icon svg { width: 15px; height: 15px; }
.wz-preview__live { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px; color: var(--good-ink, #15803d); background: color-mix(in srgb, var(--good, #16a34a) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--good, #16a34a) 30%, transparent); }
.wz-preview__banner { display: flex; align-items: center; gap: 12px; padding: 16px; margin: 0 14px; border-radius: 12px; background: var(--ink, #0f172a); color: #fff; }
.wz-preview__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid rgba(255,255,255,.35); flex: none; }
.wz-preview__avatar--txt { display: grid; place-items: center; font-weight: 700; font-size: 16px; color: var(--primary); }
.wz-preview__who { display: grid; min-width: 0; }
.wz-preview__who b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-preview__who small { font-size: 12px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-preview__tabs { display: flex; gap: 4px; margin: 14px 14px 0; padding: 4px; border-radius: 10px; background: var(--card-2); }
.wz-preview__tab { flex: 1; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.wz-preview__tab.is-on { background: var(--card); color: var(--primary-ink, var(--primary)); box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.wz-preview__rows { margin: 12px 14px 16px; padding: 4px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); display: grid; }
.wz-preview__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.wz-preview__row:last-child { border-bottom: 0; }
.wz-preview__row dt { color: var(--muted); }
.wz-preview__row dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }
.wz-preview__row dd i { font-weight: 400; color: var(--muted); }
@media (max-width: 1180px) { .wz-body, .wz[data-wz-mode="all"] .wz-body { grid-template-columns: minmax(0, 1fr); } .wz-preview { position: static; } .wz-steps { grid-auto-flow: row; } }

/* ---- wizard forms: roomier inner panels + inputs (matches the reference tone) ---- */
.wz-sec { border-radius: 20px; padding: 22px 24px 24px; gap: 18px; }
.wz-sec__head { padding-bottom: 14px; }
.wz-sec__title { font-size: 15.5px; letter-spacing: .05em; }
.wz-sec__title svg { width: 18px; height: 18px; }
.wz-sec__desc { font-size: 14px; margin-top: 6px; }
.wz-sec__badge { font-size: 12.5px; padding: 5px 14px; border-radius: 999px; font-weight: 700; }
.wz-sec__body { gap: 18px; }
.wz-panel { gap: 16px; padding: 22px 24px 26px; border-radius: 18px; background: color-mix(in srgb, var(--card-2) 55%, var(--card)); border: 1px solid var(--line); box-shadow: none; }
.wz-panel__label { font-size: 12.5px; letter-spacing: .09em; color: var(--muted); font-weight: 800; }
.wz-panel__label svg { width: 16px; height: 16px; }
.wz .form-grid--3 { gap: 20px 20px; }
.wz .field { gap: 8px; }
.wz .field > span, .wz .field__label { font-size: 14.5px; font-weight: 600; color: var(--text); }
.wz .req { color: #e11d48; margin-left: 2px; }
.wz .input, .wz .select, .wz .textarea { height: 52px; padding: 0 18px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-2, var(--line)); font-size: 15px; font-weight: 500; color: var(--text); box-shadow: 0 1px 0 rgba(15, 23, 42, .02); }
.wz .input::placeholder, .wz .textarea::placeholder { color: color-mix(in srgb, var(--muted) 65%, transparent); font-weight: 400; }
.wz .select { padding-right: 40px; }
.wz .input:focus, .wz .select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); outline: none; }
.wz .input[type="date"] { color: var(--text); }
.wz .cd-table .input { height: 44px; }
.wz .agcalc, .wz .ag-calc { background: var(--card); }
.wz-preview { border-radius: 20px; }
.wz-preview__banner { border-radius: 16px; padding: 18px; }
.wz-preview__who b { font-size: 17px; }
.wz-preview__tabs { border-radius: 12px; }
.wz-preview__tab { height: 36px; font-size: 14px; }
.wz-preview__rows { border-radius: 16px; }
.wz-preview__row { font-size: 14px; padding: 11px 0; }
.wz .field .input, .wz .field .select, .wz .field .textarea, .wz .wz-panel .input, .wz .wz-panel .select { height: 42px !important; padding: 0 14px !important; border-radius: 12px !important; background-color: var(--card) !important; border: 1px solid var(--line-2, var(--line)) !important; font-size: 15px !important; font-weight: 500 !important; color: var(--text) !important; }
.wz .field .select, .wz .wz-panel .select { padding-right: 36px !important; }
.wz .field .input:focus, .wz .field .select:focus { border-color: var(--primary) !important; }
.wz .cd-table .input { height: 44px !important; }
.wz .field .input, .wz .field .select, .wz .field .textarea, .wz .wz-panel .input, .wz .wz-panel .select { height: 42px !important; font-size: 14px !important; }
.wz .form-grid--3 { gap: 16px 18px; }
.wz .field { gap: 6px; }
.wz .field > span, .wz .field__label { font-size: 13.5px; }
.wz-panel { padding: 18px 20px 20px; gap: 14px; }
.wz .cd-table .input { height: 38px !important; }
.wz-sec > .wz-foot { padding-top: 18px; border-top: 1px solid var(--line); }

/* ---- spec: colour-coded section accents, title badge, demo button, error summary ---- */
.wz-sec[data-accent="emerald"] { border-left-color: var(--good, #10b981); }
.wz-sec[data-accent="emerald"] .wz-sec__title, .wz-sec[data-accent="emerald"] .wz-panel__label svg { color: var(--good-ink, #047857); }
.wz-sec[data-accent="rose"] { border-left-color: #f43f5e; }
.wz-sec[data-accent="rose"] .wz-sec__title, .wz-sec[data-accent="rose"] .wz-panel__label svg { color: #e11d48; }
.wz-sec[data-accent="emerald"] .wz-sec__badge { background: color-mix(in srgb, var(--good, #10b981) 12%, var(--card)); color: var(--good-ink, #047857); }
.wz-sec[data-accent="rose"] .wz-sec__badge { background: color-mix(in srgb, #f43f5e 10%, var(--card)); color: #e11d48; }
.wz-top__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wz-top__badge { font-size: 11.5px; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, var(--card)); color: var(--primary-ink, var(--primary)); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); letter-spacing: 0; }
.wz-top__r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wz-demo { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border: 0; border-radius: 11px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 8px 18px -10px #d97706; }
.wz-demo:hover { filter: brightness(1.06); }
.wz-demo svg { width: 15px; height: 15px; }
.wz-alert { padding: 14px 18px; border-radius: 14px; background: color-mix(in srgb, #ef4444 8%, var(--card)); border: 1px solid color-mix(in srgb, #ef4444 40%, transparent); border-left: 4px solid #ef4444; color: var(--text); }
.wz-alert b { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #b91c1c; }
.wz-alert b svg { width: 16px; height: 16px; }
.wz-alert ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.wz-alert__jump { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.wz-alert__jump:hover { color: #b91c1c; }
.wz .field.is-bad .input, .wz .field.is-bad .select { border-color: #ef4444 !important; box-shadow: 0 0 0 1px #ef4444; }
.wz-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wz-verify { display: inline-flex; align-items: center; gap: 5px; }

/* ---- wizard progress animation (step bar, chips, section transitions) ---- */
.wz-progress__bar { position: relative; height: 8px; overflow: hidden; }
.wz-progress__bar i { position: relative; transition: width .7s cubic-bezier(.22, 1, .36, 1); background: linear-gradient(90deg, var(--primary), #a855f7 85%, #ec4899); border-radius: inherit; overflow: hidden; }
.wz-progress__bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%); transform: translateX(-100%); animation: wz-shimmer 2.2s ease-in-out infinite; }
@keyframes wz-shimmer { to { transform: translateX(100%); } }
.wz-progress__pct { animation: wz-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.wz-progress__title svg { animation: wz-twinkle 2.4s ease-in-out infinite; }
@keyframes wz-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.2) rotate(12deg); } }
@keyframes wz-pop { from { transform: scale(.8); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.wz-step { transition: transform .25s cubic-bezier(.22, 1, .36, 1), background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease; }
.wz-step:hover { transform: translateY(-2px); }
.wz-step.is-current { animation: wz-glow 2.6s ease-in-out infinite, wz-chip-in .45s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes wz-glow { 0%, 100% { box-shadow: 0 10px 22px -14px var(--primary), 0 0 0 0 color-mix(in srgb, var(--primary) 35%, transparent); } 50% { box-shadow: 0 12px 26px -12px var(--primary), 0 0 0 5px color-mix(in srgb, var(--primary) 14%, transparent); } }
@keyframes wz-chip-in { from { transform: scale(.96); } to { transform: scale(1); } }
.wz-step.is-done { animation: wz-chip-in .4s ease; }
.wz-step.is-done .wz-step__n svg { animation: wz-check .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes wz-check { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.wz-step__n { transition: background .3s ease, color .3s ease, transform .3s ease; }
.wz-step.is-current .wz-step__n { animation: wz-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.wz-sec:not([hidden]) { animation: wz-sec-in .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes wz-sec-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wz-progress__bar i::after, .wz-step.is-current, .wz-progress__title svg, .wz-sec:not([hidden]) { animation: none !important; } .wz-progress__bar i { transition: none; } }

/* ====================================================================
   GLOBAL KPI CARDS — sleek executive cards, clean uniform borders,
   crisp typography, tinted icon badge, no awkward colliding sparklines.
   ==================================================================== */
.kpi, .kpi[data-tile], .kpi[data-tile][data-tone] {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  padding: 18px 20px 16px !important;
  position: relative;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 6px 18px -8px rgba(15, 23, 42, .08) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 124px;
  transition: transform .2s cubic-bezier(.2,0,0,1), box-shadow .2s cubic-bezier(.2,0,0,1);
}
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06), 0 14px 28px -12px rgba(15, 23, 42, .12) !important;
}
:root[data-theme=dark] .kpi, :root[data-theme=dark] .kpi[data-tile] {
  box-shadow: 0 1px 2px #0008, 0 10px 24px -14px #000a !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
:root[data-theme=dark] .kpi:hover {
  box-shadow: 0 4px 14px #000c, 0 14px 32px -12px #000e !important;
}
.kpi .kpi__label {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  color: var(--muted) !important;
  padding-right: 52px;
  line-height: 1.3;
}
.kpi .kpi__icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid !important;
  place-items: center;
  background: color-mix(in srgb, var(--tone, var(--primary)) 10%, var(--card)) !important;
  color: var(--tone, var(--primary)) !important;
  border: 1px solid color-mix(in srgb, var(--tone, var(--primary)) 16%, transparent);
}
.kpi .kpi__icon svg {
  width: 20px !important;
  height: 20px !important;
}
.kpi .kpi__value {
  display: block;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--text) !important;
  margin: 6px 0 4px !important;
}
.kpi .kpi__foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  margin-top: auto;
}
.kpi .kpi__foot svg {
  width: 14px;
  height: 14px;
}
/* Hide stray squiggly sparkline to maintain clean, consistent card design */
.kpi .kpi__spark {
  display: none !important;
}
/* Refined quota ring card layout */
.kpi.td-quota {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}
.kpi.td-quota > span {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.kpi.td-quota .kpi__label {
  padding-right: 0 !important;
}
.kpi.td-quota .td-quota__val {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
  color: var(--text) !important;
  margin: 2px 0 0 !important;
}
.kpi.td-quota .td-quota__val small {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  letter-spacing: 0 !important;
}

/* Projects page: tidy the vertical rhythm (KPIs → stage chips → timeline) */
.pj-filter { margin: 16px 0 !important; padding: 0 !important; }
.pj-filter .toolbar { padding: 12px 16px !important; margin: 0 !important; border: 0 !important; background: none !important; min-height: 0 !important; }

.pj-toolbar { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pj-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pj-view { margin-left: auto; flex: none; }

/* Agreement duration calculator (register page + client General tab) */
.ag-calc { display: grid; gap: 14px; background: none !important; padding: 0 !important; border: 0 !important; }
.ag-calc .ag-calc__grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.ag-calc .ag-calc__cell, .ag-calc__grid > div { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; padding: 12px 14px !important; box-shadow: none !important; display: grid; gap: 6px; align-content: start; min-width: 0; }
.ag-calc .cd-value { font-size: 17px; font-weight: 700; }
.ag-calc__bar { display: grid; gap: 8px; margin: 0 !important; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.ag-calc__bar-cap { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); }
.ag-calc__bar-cap b { color: var(--text); font-weight: 700; }
.ag-calc--empty { padding: 14px 16px !important; border: 1px dashed var(--line-2) !important; border-radius: 12px; }
@media (max-width: 980px) { .ag-calc .ag-calc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ---- theme palette picker ---- */
.palette { display: grid; gap: 14px; grid-column: 1 / -1; }
.palette__swatches { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.palette__sw { width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); transition: transform .15s ease, box-shadow .15s ease; }
.palette__sw:hover { transform: scale(1.1); }
.palette__sw.is-on { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px color-mix(in srgb, var(--text) 45%, transparent); transform: scale(1.08); }
.palette__sw:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.palette__hex { display: inline-flex; align-items: center; gap: 10px; width: fit-content; min-width: 190px; height: 44px; padding: 0 16px 0 6px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2, var(--line)); cursor: text; }
.palette__ico { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--text); cursor: pointer; flex: none; box-shadow: 0 1px 2px rgba(15,23,42,.1); }
.palette__wheel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.palette__input { border: 0 !important; background: transparent !important; outline: none; font: inherit; font-weight: 700; letter-spacing: .02em; color: var(--muted); width: 100px; padding: 0; height: auto !important; box-shadow: none !important; text-transform: uppercase; }
.palette__input:focus { color: var(--text); }
.field:has(> .palette), label:has(> .palette), .admin-field:has(.palette) { grid-column: 1 / -1 !important; }
.palette__hex { display: inline-flex !important; flex-direction: row !important; align-items: center !important; }
.palette__hex > .palette__input { display: block; flex: 1; min-width: 0; }

/* Secondary stat ribbon (Accounts overview) gets the same card language: coloured left edge, tinted icon tile */
.acct-telemetry-item { background: var(--card) !important; border: 1px solid var(--line) !important; border-left: 4px solid var(--tone, var(--primary)) !important; border-radius: 16px !important; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 22px -14px rgba(15,23,42,.2) !important; }
.acct-telemetry-item:nth-child(1) { --tone: #6366f1; }
.acct-telemetry-item:nth-child(2) { --tone: #10b981; }
.acct-telemetry-item:nth-child(3) { --tone: #f59e0b; }
.acct-telemetry-item:nth-child(4) { --tone: #0ea5e9; }
.acct-telemetry-item .acct-telemetry-icon { background: color-mix(in srgb, var(--tone) 13%, var(--card)) !important; color: var(--tone) !important; border-radius: 12px; }
.acct-telemetry-lbl { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }