/* Colombo ERP — application styles (Bootstrap 5.3 base) */

:root {
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --navy-950: #070d26;
  --navy-900: #0b1437;
  --navy-850: #0f1a45;
  --navy-800: #142158;
  --navy-700: #1c2c70;
  --indigo: #5b4cf0;
  --purple: #7c3aed;
  --blue: #2563eb;
  --cyan: #06b6d4;
  --teal: #0f9f8f;
  --green: #16a34a;
  --orange: #f97316;
  --amber: #f59e0b;
  --red: #dc2626;

  --app-bg: #eef2fa;
  --surface: #ffffff;
  --surface-2: #f6f8fd;
  --border: #e2e8f3;
  --text: #0f172a;
  --text-muted: #5b6478;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .06);
  --radius: 14px;
  --radius-lg: 20px;
  --focus: 0 0 0 3px rgba(37, 99, 235, .45);

  --sidebar-w: 248px;
  --sidebar-text: #c9d2f0;
  --sidebar-muted: #8b96bf;

  --bs-body-font-family: var(--font-ui);
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: #1d4ed8;
  --bs-link-color-rgb: 29, 78, 216;
  --bs-border-radius: .6rem;
}

:root:not([data-theme="light"]) { color-scheme: light; }

[data-bs-theme="dark"] {
  --app-bg: #0a1022;
  --surface: #111a33;
  --surface-2: #0e1630;
  --border: #22305a;
  --text: #e6eaf5;
  --text-muted: #9aa5c4;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --bs-body-bg: #0a1022;
  --bs-body-color: #e6eaf5;
  --bs-link-color: #7aa2ff;
  --bs-link-color-rgb: 122, 162, 255;
  color-scheme: dark;
}

html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  font-size: .9375rem;
  color: var(--text);
  background: var(--navy-900);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .font-head { font-family: var(--font-head); letter-spacing: -.01em; }
.font-accent { font-family: var(--font-accent); }
a { text-underline-offset: 2px; }
:focus-visible { outline: none; box-shadow: var(--focus) !important; border-radius: 6px; }
.text-pre { white-space: pre-wrap; word-break: break-word; }
.min-w-0 { min-width: 0; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-muted, .text-body-secondary { color: var(--text-muted) !important; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 2000; background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------- Shell */
.app { display: flex; min-height: 100vh; background: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 45%, #101c52 100%); }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 18px 12px 24px; color: var(--sidebar-text);
  scrollbar-width: thin; scrollbar-color: #26346b transparent;
}
.sidebar-brand { display: block; padding: 6px 10px 4px; }
.sidebar-brand img { width: 100%; max-width: 196px; height: auto; display: block; }
.sidebar-tagline { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sidebar-muted); padding: 2px 12px 16px; }
.nav-side { list-style: none; margin: 0; padding: 0; }
.nav-side > li { margin-bottom: 2px; }
.nav-side .nav-link {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; border-radius: 10px; color: var(--sidebar-text);
  font-size: .9rem; font-weight: 500; text-decoration: none; border: 0; background: none; text-align: left;
}
.nav-side .nav-link .ico { width: 20px; text-align: center; font-size: 1rem; opacity: .9; }
.nav-side .nav-link .chev { margin-left: auto; font-size: .7rem; transition: transform .2s; opacity: .7; }
.nav-side .nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-side .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-side .nav-link.active {
  background: linear-gradient(90deg, #2563eb, #3b6cf6); color: #fff;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .35);
}
.nav-side .nav-link.open-parent { color: #fff; }
.nav-sub { list-style: none; padding: 2px 0 6px 44px; margin: 0; }
.nav-sub a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--sidebar-muted); font-size: .85rem; text-decoration: none; }
.nav-sub a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.nav-sub a.active { color: #fff; background: rgba(59, 108, 246, .22); }

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

.topbar { display: flex; align-items: center; gap: 14px; padding: 14px 20px 12px 8px; color: #fff; }
.topbar .search { flex: 1 1 auto; max-width: 560px; position: relative; }
.topbar .search input {
  width: 100%; height: 42px; border-radius: 12px; padding: 0 14px 0 42px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #fff;
}
.topbar .search input::placeholder { color: #9aa6d1; }
.topbar .search input:focus { background: rgba(255, 255, 255, .1); border-color: #5b8cff; outline: none; box-shadow: var(--focus); }
.topbar .search .fa-magnifying-glass { position: absolute; left: 15px; top: 13px; color: #9aa6d1; }
.search-results { position: absolute; top: 48px; left: 0; right: 0; z-index: 1050; background: var(--surface); color: var(--text); border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--border); max-height: 420px; overflow: auto; }
.search-results a { display: flex; gap: 10px; padding: 9px 14px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--border); }
.search-results a:hover, .search-results a:focus { background: var(--surface-2); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: 12px; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #dbe3ff; background: transparent; font-size: 1.15rem; text-decoration: none;
}
.icon-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.icon-btn .count {
  position: absolute; top: 3px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: #ef4444; color: #fff; font-size: .68rem; font-weight: 700; line-height: 19px; text-align: center; border: 2px solid var(--navy-900);
}
.user-btn { display: flex; align-items: center; gap: 10px; color: #fff; background: none; border: 0; padding: 4px 8px; border-radius: 12px; }
.user-btn:hover { background: rgba(255, 255, 255, .08); }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; color: #fff; background: linear-gradient(135deg, #6366f1, #06b6d4); flex: 0 0 auto;
}
.avatar-sm { width: 30px; height: 30px; font-size: .7rem; }

.content-wrap { flex: 1 1 auto; padding: 0 16px 16px 0; min-width: 0; }
.content-panel { background: var(--app-bg); border-radius: var(--radius-lg); padding: 24px 26px 32px; min-height: calc(100vh - 84px); }

/* ---------------------------------------------------------- Page head */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.page-head h1 { font-size: 1.9rem; font-weight: 700; margin: 0; color: var(--text); }
.page-head .sub { color: var(--text-muted); margin: 2px 0 0; font-size: 1rem; }
.page-head .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb { font-size: .8rem; margin-bottom: 6px; }
.scope-select {
  display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 6px 8px 6px 6px; box-shadow: var(--shadow-sm);
}
.scope-select .ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #6d4cf5, #8b5cf6); }
.scope-select select { border: 0; background: transparent; font-weight: 600; color: var(--text); min-width: 170px; padding: 6px 28px 6px 4px; }
.scope-select select:focus { box-shadow: var(--focus); }

/* ----------------------------------------------------------- Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--border); padding: 14px 18px; display: flex; align-items: center; gap: 10px; }
.card-header h2, .card-header h3, .card-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.card-body { padding: 16px 18px; }
.card-dark { background: linear-gradient(160deg, #0d1840, #111f52); border-color: #1b2a63; color: #e5e9fb; }
.card-dark .card-header { border-color: rgba(255, 255, 255, .08); }
.card-dark .text-muted { color: #a3aed6 !important; }
.btn-view-all { font-size: .78rem; padding: 4px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); text-decoration: none; margin-left: auto; }
.btn-view-all:hover { background: #e6ecf8; }

.kpi-card {
  position: relative; overflow: hidden; border-radius: 16px; color: #fff; padding: 16px 14px 14px;
  display: flex; gap: 12px; align-items: flex-start; min-height: 116px; text-decoration: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}
.kpi-card:hover { color: #fff; transform: translateY(-1px); }
.kpi-card::after { content: ''; position: absolute; right: -40px; bottom: -60px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.kpi-card .kpi-ico { width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex: 0 0 auto; }
.kpi-card .kpi-value { font-family: var(--font-head); font-size: 2rem; font-weight: 700; line-height: 1; }
.kpi-card .kpi-label { font-size: 1rem; line-height: 1.2; font-weight: 600; margin-top: 4px; }
.kpi-card .kpi-meta { margin-top: 10px; font-size: .78rem; display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .16); padding: 3px 9px; border-radius: 8px; }
.kpi-purple { background: linear-gradient(135deg, #4c35d8, #7c4dff); }
.kpi-teal   { background: linear-gradient(135deg, #0b8b7d, #14b8a6); }
.kpi-blue   { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.kpi-orange { background: linear-gradient(135deg, #e0560b, #f59e0b); }
.kpi-mini { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); height: 100%; }
.kpi-mini .v { font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; }
.kpi-mini .l { color: var(--text-muted); font-size: .82rem; }

.chart-box { position: relative; height: 270px; }
.chart-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-muted); font-size: .9rem; }
.card-dark .chart-state { color: #a3aed6; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.status-legend li { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: .9rem; }
.status-legend .n { margin-left: auto; font-weight: 700; }

.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: 0; }
.date-chip { width: 50px; flex: 0 0 auto; text-align: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.date-chip .m { background: #dc2626; color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .04em; padding: 2px 0; }
.date-chip .d { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; padding: 2px 0 3px; }
.pill { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill-danger { background: #fde4e4; color: #b91c1c; }
.pill-warning { background: #fff1d6; color: #9a5b00; }
.pill-info { background: #e0ecff; color: #1d4ed8; }
.act-ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: .95rem; }
.ai-green { background: #dcfce7; color: #15803d; } .ai-blue { background: #dbeafe; color: #1d4ed8; }
.ai-orange { background: #ffedd5; color: #c2410c; } .ai-purple { background: #ede9fe; color: #6d28d9; }
[data-bs-theme="dark"] .ai-green { background: #123524; } [data-bs-theme="dark"] .ai-blue { background: #132a55; }
[data-bs-theme="dark"] .ai-orange { background: #3b2412; } [data-bs-theme="dark"] .ai-purple { background: #2a1f52; }

.company-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--surface); height: 100%; text-decoration: none; color: inherit; display: block; }
.company-card:hover { border-color: #b9c8ec; box-shadow: var(--shadow); color: inherit; }
.company-logo { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-family: var(--font-head); font-size: 1.15rem; flex: 0 0 auto; overflow: hidden; }
.company-logo img { width: 100%; height: 100%; object-fit: cover; }
.cstat { border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; text-align: center; flex: 1; }
.cstat .v { font-weight: 700; } .cstat .l { font-size: .68rem; color: var(--text-muted); }
.health-bar { height: 6px; border-radius: 6px; background: #e5e9f2; overflow: hidden; }
.health-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #10b981, #22c55e); }
.add-company { border: 2px dashed #c9d4ea; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 120px; color: var(--text-muted); text-decoration: none; }
.add-company:hover { border-color: var(--blue); color: var(--blue); }
.add-company .plus { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

/* Key Business Flows panel */
.flows { background: linear-gradient(170deg, #0c1640, #0f1c52); border-radius: 18px; padding: 18px 14px; color: #fff; border: 1px solid #1d2b66; }
.flows h2 { font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 12px; margin: 0 4px 14px; }
.flows h2 .fi { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #2563eb, #06b6d4); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.flow-step { border-radius: 14px; padding: 4px; margin-bottom: 4px; }
.flow-step .fh { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-weight: 600; color: #fff; text-decoration: none; }
.flow-step .fh .n { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; }
.flow-step .fh .live { margin-left: auto; font-size: .72rem; background: rgba(255, 255, 255, .22); padding: 2px 8px; border-radius: 999px; }
.flow-step ul { background: rgba(255, 255, 255, .94); color: #1e293b; border-radius: 10px; margin: 0; padding: 9px 12px 9px 26px; font-size: .82rem; }
.flow-step ul li { padding: 1px 0; }
.flow-step ul a { color: #1e3a8a; }
.flow-arrow { text-align: center; color: #c7d2fe; font-size: .9rem; line-height: 1; padding: 2px 0 4px; }
.flow-1 { background: linear-gradient(135deg, #4338ca, #6d5cf6); }
.flow-2 { background: linear-gradient(135deg, #0f8a4e, #16a34a); }
.flow-3 { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.flow-4 { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.flow-5 { background: linear-gradient(135deg, #6d28d9, #9333ea); }

/* ---------------------------------------------------- Tables & lists */
.table { --bs-table-bg: transparent; margin: 0; }
.table > :not(caption) > * > * { padding: .7rem .9rem; border-color: var(--border); vertical-align: middle; }
.table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; background: var(--surface-2); white-space: nowrap; }
.table thead th a { color: inherit; text-decoration: none; }
.table tbody tr:hover { background: var(--surface-2); }
.table td a.rec { font-weight: 600; text-decoration: none; }
.table td a.rec:hover { text-decoration: underline; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .form-control, .filters .form-select { width: auto; min-width: 140px; }
.filters .search-input { min-width: 240px; }
.view-tabs .nav-link { font-size: .85rem; padding: 6px 12px; border-radius: 9px; color: var(--text-muted); }
.view-tabs .nav-link.active { background: var(--blue); color: #fff; }
.empty-state { text-align: center; padding: 44px 16px; color: var(--text-muted); }
.empty-state .ei { width: 64px; height: 64px; border-radius: 18px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #7c8fbf; margin-bottom: 10px; }

.badge { font-weight: 600; font-size: .74rem; padding: .38em .65em; border-radius: 7px; }
.badge-soft-success { background: #dcfce7; color: #166534; }
.badge-soft-primary { background: #dbeafe; color: #1e40af; }
.badge-soft-info { background: #e0f2fe; color: #075985; }
.badge-soft-warning { background: #fef3c7; color: #92400e; }
.badge-soft-danger { background: #fee2e2; color: #991b1b; }
.badge-soft-secondary { background: #e9edf5; color: #475569; }
[data-bs-theme="dark"] .badge-soft-success { background: #12361f; color: #86efac; }
[data-bs-theme="dark"] .badge-soft-primary { background: #172b5c; color: #93c5fd; }
[data-bs-theme="dark"] .badge-soft-info { background: #0c2f45; color: #7dd3fc; }
[data-bs-theme="dark"] .badge-soft-warning { background: #3a2a0b; color: #fcd34d; }
[data-bs-theme="dark"] .badge-soft-danger { background: #3d1515; color: #fca5a5; }
[data-bs-theme="dark"] .badge-soft-secondary { background: #1e293b; color: #cbd5e1; }

/* ------------------------------------------------------------ Detail */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 22px; }
.detail-grid .full { grid-column: 1 / -1; }
.detail-grid dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; margin-bottom: 3px; }
.detail-grid dd { margin: 0; word-break: break-word; }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 14px 26px; font-size: .87rem; }
.timeline li::before { content: ''; position: absolute; left: 6px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px #dbe6ff; }
.timeline li::after { content: ''; position: absolute; left: 10px; top: 18px; bottom: 0; width: 1px; background: var(--border); }
.timeline li:last-child::after { display: none; }
.timeline .when { color: var(--text-muted); font-size: .76rem; }
.check-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.check-item.done label { text-decoration: line-through; color: var(--text-muted); }

/* ------------------------------------------------------------- Forms */
.form-label { font-weight: 600; font-size: .84rem; margin-bottom: .3rem; }
.form-control, .form-select { border-color: #d5dcea; border-radius: 10px; background-color: var(--surface); color: var(--text); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { border-color: #2b3a66; }
.form-control:focus, .form-select:focus { border-color: #3b82f6; box-shadow: var(--focus); }
.form-text { font-size: .78rem; }
.required::after { content: ' *'; color: #dc2626; }
.btn { border-radius: 10px; font-weight: 600; font-size: .875rem; }
.btn-primary { background: linear-gradient(90deg, #2563eb, #3b6cf6); border: 0; }
.btn-primary:hover { background: linear-gradient(90deg, #1d4ed8, #2563eb); }

/* Kanban board */
.board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.board-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 10px; min-height: 200px; }
.board-col h2 { font-size: .9rem; font-weight: 700; display: flex; justify-content: space-between; margin: 4px 4px 10px; }
.board-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.board-card .t { font-weight: 600; font-size: .88rem; text-decoration: none; color: var(--text); }
.board-card.overdue { border-left: 4px solid #dc2626; }

/* ------------------------------------------------------------ Login */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--navy-900); }
.auth-hero { padding: 56px; color: #e2e8ff; background: radial-gradient(1200px 600px at -10% -10%, #2b3fb8 0%, transparent 60%), radial-gradient(800px 500px at 110% 110%, #0e7490 0%, transparent 55%), linear-gradient(160deg, #070d26, #0f1c52); display: flex; flex-direction: column; justify-content: space-between; }
.auth-hero h1 { font-size: 2.6rem; font-weight: 700; color: #fff; max-width: 520px; }
.auth-hero .lead { color: #b8c3ea; max-width: 520px; }
.auth-card { background: var(--app-bg); display: flex; align-items: center; justify-content: center; padding: 32px 18px; }
.auth-card .box { width: 100%; max-width: 420px; }
.auth-logo { width: 260px; max-width: 100%; height: auto; }
.demo-table td, .demo-table th { font-size: .8rem; padding: .35rem .5rem; }

/* Print */
@media print {
  .sidebar, .topbar, .no-print, .page-head .actions { display: none !important; }
  .app, body { background: #fff !important; }
  .content-wrap { padding: 0; } .content-panel { padding: 0; background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* -------------------------------------------------------- Responsive */
@media (max-width: 1199.98px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 1045; transform: translateX(-100%); transition: transform .2s ease; background: var(--navy-900); box-shadow: 8px 0 30px rgba(0, 0, 0, .35); }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .content-wrap { padding: 0 12px 12px; }
  .topbar { padding-left: 12px; }
}
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(2, 6, 23, .55); z-index: 1040; }
@media (min-width: 1200px) { .menu-toggle { display: none !important; } }
@media (max-width: 991.98px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .board { grid-template-columns: repeat(4, 260px); }
}
@media (max-width: 767.98px) {
  .content-panel { padding: 16px; border-radius: 16px; }
  .page-head h1 { font-size: 1.5rem; }
  .page-head .actions { margin-left: 0; width: 100%; }
  .topbar .search { display: none; }
  .topbar .user-meta { display: none; }
  .kpi-card .kpi-value { font-size: 1.6rem; }
  .filters .form-control, .filters .form-select, .filters .search-input { min-width: 0; flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================================
   Vision 2 — theme tokens for components that previously used fixed colours (dark-mode fix)
   ===================================================================================== */
:root {
  --chip-bg: var(--surface-2); --chip-border: var(--border);
  --pill-danger-bg: #fde4e4; --pill-danger-fg: #b91c1c;
  --pill-warning-bg: #fff1d6; --pill-warning-fg: #8a5100;
  --pill-info-bg: #e0ecff; --pill-info-fg: #1d4ed8;
  --track-bg: #e5e9f2; --hover-bg: #eef3fc;
  --flow-body-bg: rgba(255, 255, 255, .95); --flow-body-fg: #1e293b; --flow-link: #1e3a8a;
  --placeholder: #7b8499; --focus-ring: rgba(37, 99, 235, .45);
}
[data-bs-theme="dark"] {
  --chip-bg: #16213f; --chip-border: #2a3a68;
  --pill-danger-bg: #4a1d1d; --pill-danger-fg: #fecaca;
  --pill-warning-bg: #3f2e0c; --pill-warning-fg: #fde68a;
  --pill-info-bg: #172b5c; --pill-info-fg: #bfdbfe;
  --track-bg: #24324f; --hover-bg: #17223f;
  --flow-body-bg: #101a36; --flow-body-fg: #dbe4ff; --flow-link: #93c5fd;
  --placeholder: #8d98b8; --focus-ring: rgba(122, 162, 255, .6);
  --bs-secondary-color: #a9b4d0; --bs-tertiary-bg: #0f1730; --bs-border-color: #2a3a68;
}
:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring) !important; }
.form-control::placeholder { color: var(--placeholder); opacity: 1; }
.btn-view-all { background: var(--chip-bg); border-color: var(--chip-border); }
.btn-view-all:hover { background: var(--hover-bg); color: var(--text); }
.date-chip { background: var(--chip-bg); border-color: var(--chip-border); }
.pill-danger { background: var(--pill-danger-bg); color: var(--pill-danger-fg); }
.pill-warning { background: var(--pill-warning-bg); color: var(--pill-warning-fg); }
.pill-info { background: var(--pill-info-bg); color: var(--pill-info-fg); }
.health-bar { background: var(--track-bg); }
.company-card:hover { border-color: var(--chip-border); }
.add-company { border-color: var(--chip-border); }
.add-company .plus { background: var(--chip-bg); }
.table tbody tr:hover { background: var(--hover-bg); }
.flow-step ul { background: var(--flow-body-bg); color: var(--flow-body-fg); }
.flow-step ul a { color: var(--flow-link); }
[data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .card-footer { border-color: var(--border); }
[data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .offcanvas { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-bs-theme="dark"] .dropdown-item { color: var(--text); }
[data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background: var(--hover-bg); color: #fff; }
[data-bs-theme="dark"] .table { --bs-table-color: var(--text); --bs-table-border-color: var(--border); }
[data-bs-theme="dark"] .alert-light { background: #121c38; color: var(--text); border-color: var(--border); }
[data-bs-theme="dark"] .alert-info { background: #0e2a44; color: #cfe6ff; border-color: #1e4a73; }
[data-bs-theme="dark"] .alert-warning { background: #3a2a0a; color: #ffe8a8; border-color: #6b4e12; }
[data-bs-theme="dark"] .text-muted, [data-bs-theme="dark"] .text-body-secondary { color: var(--text-muted) !important; }
[data-bs-theme="dark"] .btn-outline-secondary { color: #c9d2ea; border-color: #44547f; }
[data-bs-theme="dark"] .btn-outline-secondary:hover { background: #2a3a68; color: #fff; }
[data-bs-theme="dark"] .btn-link { color: var(--bs-link-color); }
[data-bs-theme="dark"] .bg-body-tertiary { background: var(--surface-2) !important; }
[data-bs-theme="dark"] .bg-white { background: #fff !important; } /* keep QR codes legible */
[data-bs-theme="dark"] input[type="date"], [data-bs-theme="dark"] input[type="datetime-local"], [data-bs-theme="dark"] input[type="time"] { color-scheme: dark; }
[data-bs-theme="dark"] .view-tabs .nav-link { color: var(--text-muted); }
[data-bs-theme="dark"] .board-card { background: #111b36; }
[data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom { border-color: var(--border) !important; }

/* Notifications */
.notif-item { color: var(--text); }
.notif-item.is-read { color: var(--text-muted); }
.notif-item.is-unread { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.notif-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--chip-bg); color: var(--blue); }
.notif-lead { color: #2563eb; } .notif-task { color: #0891b2; } .notif-project { color: #059669; } .notif-payment { color: #16a34a; }
.notif-renewal { color: #7c3aed; } .notif-service { color: #ea580c; } .notif-stock { color: #b45309; } .notif-hr { color: #db2777; } .notif-issue { color: #dc2626; } .notif-access { color: #475569; }
[data-bs-theme="dark"] .notif-lead { color: #93c5fd; } [data-bs-theme="dark"] .notif-task { color: #67e8f9; } [data-bs-theme="dark"] .notif-project { color: #6ee7b7; }
[data-bs-theme="dark"] .notif-payment { color: #86efac; } [data-bs-theme="dark"] .notif-renewal { color: #c4b5fd; } [data-bs-theme="dark"] .notif-service { color: #fdba74; }
[data-bs-theme="dark"] .notif-stock { color: #fcd34d; } [data-bs-theme="dark"] .notif-hr { color: #f9a8d4; } [data-bs-theme="dark"] .notif-issue { color: #fca5a5; } [data-bs-theme="dark"] .notif-access { color: #cbd5e1; }
.notif-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-right: 6px; vertical-align: middle; }

/* Sidebar categories */
.nav-cat { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--sidebar-muted); padding: 14px 12px 4px; font-weight: 700; display: flex; align-items: center; width: 100%; background: none; border: 0; text-align: left; }
.nav-cat:hover { color: #fff; }
.nav-cat .chev { margin-left: auto; transition: transform .2s; }
.nav-cat[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.nav-group { list-style: none; padding: 0; margin: 0; }
.nav-group .nav-link { padding: 7px 12px; font-size: .86rem; }
.nav-group .nav-link .ico { font-size: .92rem; }

/* Quick tools */
.quickdates { margin-top: 2px; font-size: .78rem; }
.quickdates .btn-link { font-size: .78rem; text-decoration: none; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }

/* Documents & lines */
.txn-lines td { min-width: 90px; }
.txn-lines label { display: block; margin: 0; }
.doc-print { background: #fff; color: #111; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: .9rem; }
.kv dt { color: var(--text-muted); font-weight: 600; }
.kv dd { margin: 0; }

/* Workflow progress */
.flow-track { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.flow-track li { flex: 1 1 110px; min-width: 110px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: .8rem; background: var(--surface); }
.flow-track li .n { font-weight: 800; font-family: var(--font-head); margin-right: 4px; }
.flow-track li.done { border-color: #22c55e; background: color-mix(in srgb, #22c55e 9%, var(--surface)); }
.flow-track li.current { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 30%, transparent); }
.flow-track li.skip { opacity: .55; }

/* Project folders */
.folder-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--text); background: var(--surface); height: 100%; }
.folder-card:hover { box-shadow: var(--shadow); color: var(--text); }
.folder-card .fi { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; flex: 0 0 auto; }
.folder-card.active { outline: 2px solid var(--blue); }

/* Calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.cal-grid .dow { font-size: .72rem; text-transform: uppercase; font-weight: 700; color: var(--text-muted); padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cal-cell { min-height: 112px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px; background: var(--surface); position: relative; }
.cal-cell.other { background: var(--surface-2); opacity: .7; }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--blue); }
.cal-cell.holiday { background: color-mix(in srgb, #f59e0b 8%, var(--surface)); }
.cal-cell.drop-target { background: color-mix(in srgb, var(--blue) 12%, var(--surface)); }
.cal-day { font-size: .78rem; font-weight: 700; }
.cal-ev { display: block; font-size: .72rem; padding: 2px 5px; border-radius: 6px; margin-top: 2px; color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; border: 0; width: 100%; text-align: left; }
.cal-ev[draggable="true"] { cursor: grab; }
.cal-ev.t-task { background: #2563eb; } .cal-ev.t-overdue { background: #dc2626; } .cal-ev.t-done { background: #64748b; text-decoration: line-through; }
.cal-ev.t-milestone { background: #059669; } .cal-ev.t-visit { background: #ea580c; } .cal-ev.t-followup { background: #7c3aed; } .cal-ev.t-renewal { background: #be185d; } .cal-ev.t-holiday { background: #b45309; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-week .col-day { border: 1px solid var(--border); border-radius: 10px; padding: 6px; min-height: 320px; background: var(--surface); }
.cal-list .day-h { font-weight: 700; padding: 8px 0 4px; border-bottom: 1px solid var(--border); margin-top: 8px; }
@media (max-width: 767.98px) { .cal-cell { min-height: 72px; } .cal-ev { font-size: .64rem; } .cal-week { grid-template-columns: 1fr; } }

/* Process designer */
.pd-wrap { position: relative; height: 72vh; min-height: 480px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background-color: var(--surface-2);
  background-image: radial-gradient(color-mix(in srgb, var(--text-muted) 35%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.pd-wrap svg { width: 100%; height: 100%; touch-action: none; }
.pd-node rect { stroke-width: 2; }
.pd-node text { font-family: var(--font-ui); font-size: 13px; pointer-events: none; }
.pd-node.sel rect { stroke: #f59e0b !important; stroke-width: 3; }
.pd-node:focus { outline: none; }
.pd-node:focus rect { stroke: var(--blue) !important; stroke-width: 3; }
.pd-edge { stroke: var(--text-muted); stroke-width: 2; fill: none; }
.pd-edge.sel { stroke: #f59e0b; stroke-width: 3; }
.pd-edge-label { font-size: 11px; fill: var(--text-muted); }
.pd-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pd-side { max-height: 72vh; overflow: auto; }

/* Reports */
.rep-cols { max-height: 260px; overflow: auto; }
.rep-table th, .rep-table td { white-space: nowrap; }
.rep-group td { background: var(--surface-2); font-weight: 700; }
@media print { .rep-controls { display: none !important; } .rep-table th, .rep-table td { white-space: normal; } }

/* Stat cards for v2 dashboards */
.stat-card { display: block; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; height: 100%; box-shadow: var(--shadow-sm); }
.stat-card:hover { color: var(--text); border-color: var(--blue); }
.stat-card .v { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; }
.stat-card .l { color: var(--text-muted); font-size: .82rem; }
.stat-card .i { float: right; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--chip-bg); color: var(--blue); }
.def-note { font-size: .78rem; color: var(--text-muted); }

/* ===================================================================== Vision 2: print documents, cheque preview */
.print-doc { position: relative; }
.print-doc .doc-title { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--bs-primary); letter-spacing: .02em; }
.print-logo { max-height: 64px; max-width: 140px; object-fit: contain; }
.print-stamp { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font: 700 2.4rem/1 var(--font-head); color: rgba(220, 38, 38, .22); border: 4px solid rgba(220, 38, 38, .22); padding: .4rem 1.2rem; border-radius: 8px; pointer-events: none; white-space: nowrap; z-index: 1; }
.print-lines thead th { background: var(--surface-2); }
.print-doc .total-row th, .print-doc .total-row td { border-top: 2px solid var(--text); }
.sig-line { border-top: 1px solid var(--text-muted); padding-top: .35rem; margin-top: 2.5rem; }
.tpl-modern .doc-title { color: var(--purple); }
.tpl-modern .print-lines thead th { background: var(--bs-primary); color: #fff; border: 0; }
.tpl-modern .card-body { border-top: 6px solid var(--bs-primary); }
.tpl-compact { font-size: .88rem; }
.tpl-compact .card-body { padding: 1.5rem !important; }
.tpl-compact .doc-title { font-size: 1.15rem; }
.cheque-preview { position: relative; width: 100%; max-width: 720px; background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 8px, var(--surface) 8px, var(--surface) 16px); border: 1px dashed var(--text-muted); border-radius: 6px; overflow: hidden; font-size: clamp(.55rem, 1.6vw, .85rem); }
.cheque-preview .cp-field { position: absolute; white-space: nowrap; color: var(--text); background: rgba(37, 99, 235, .08); outline: 1px dotted rgba(37, 99, 235, .5); padding: 0 2px; overflow: hidden; text-overflow: ellipsis; }
.cheque-preview .cp-cross { font-weight: 700; transform: rotate(-12deg); transform-origin: left top; }
@media print {
  .print-doc { box-shadow: none !important; border: 0 !important; }
  .print-doc .card-body { padding: 0 !important; }
  .print-stamp { color: rgba(220, 38, 38, .35); border-color: rgba(220, 38, 38, .35); }
  .tpl-modern .print-lines thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===================================================================== Vision 2: module dashboards */
.stat-card { display: flex; gap: 12px; align-items: center; }
.stat-card .st-ico { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #fff; background: var(--blue); }
.stat-card .st-v { font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card .st-l { color: var(--text-muted); font-size: .82rem; }
.stat-card .st-m { font-size: .75rem; color: var(--text-muted); }
.st-teal .st-ico { background: var(--teal); } .st-purple .st-ico { background: var(--purple); } .st-orange .st-ico { background: var(--orange); }
.st-green .st-ico { background: var(--green); } .st-red .st-ico { background: var(--red); } .st-indigo .st-ico { background: var(--indigo); }
.dash-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-tab { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-size: .86rem; }
.dash-tab:hover { border-color: var(--blue); color: var(--text); }
.dash-tab.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.target-bar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.target-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--blue)); }
.funnel-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.funnel-row:last-child { border-bottom: 0; }
.funnel-row .fb { height: 8px; border-radius: 999px; background: var(--chip-bg); overflow: hidden; margin-top: 4px; }
.funnel-row .fb > span { display: block; height: 100%; background: var(--blue); }

/* ===================================================================== Vision 2: designer shapes, folders, wizard, customer centre */
.pd-canvas-wrap { position: relative; height: 70vh; min-height: 460px; overflow: auto; background-color: var(--surface-2);
  background-image: radial-gradient(color-mix(in srgb, var(--text-muted) 35%, transparent) 1px, transparent 1px); background-size: 20px 20px; border-radius: 0 0 var(--radius) var(--radius); }
.pd-canvas { display: block; min-width: 100%; min-height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; }
.pd-dragging, .pd-dragging * { -webkit-user-select: none !important; user-select: none !important; cursor: grabbing; }
.pd-canvas:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.pd-node { cursor: grab; }
.pd-node .pd-shape { fill: var(--surface); stroke: var(--blue); stroke-width: 2; }
.pd-node.t-start .pd-shape { fill: color-mix(in srgb, #22c55e 18%, var(--surface)); stroke: #16a34a; }
.pd-node.t-end .pd-shape { fill: color-mix(in srgb, #64748b 18%, var(--surface)); stroke: #475569; }
.pd-node.t-decision .pd-shape { fill: color-mix(in srgb, #f59e0b 16%, var(--surface)); stroke: #d97706; }
.pd-node.t-idea .pd-shape { fill: color-mix(in srgb, #8b5cf6 16%, var(--surface)); stroke: #7c3aed; }
.pd-node.t-note .pd-shape { fill: color-mix(in srgb, #fde68a 55%, var(--surface)); stroke: #ca8a04; stroke-dasharray: 4 3; }
.pd-node.sel .pd-shape { stroke: #f59e0b; stroke-width: 3.5; }
.pd-node.from .pd-shape { stroke: #ef4444; stroke-width: 3.5; }
.pd-text { font: 600 12.5px var(--font-ui); fill: var(--text); pointer-events: none; }
.pd-badge { font: 600 10px var(--font-ui); fill: var(--text-muted); pointer-events: none; }
.pd-edge-line { stroke: var(--text-muted); stroke-width: 2; fill: none; pointer-events: none; }
.pd-edge-hit { stroke: transparent; stroke-width: 14; fill: none; cursor: pointer; }
.pd-edge.sel .pd-edge-line { stroke: #f59e0b; stroke-width: 3; }
.pd-arrowhead { fill: var(--text-muted); }
.pd-edge-label { font: 11px var(--font-ui); fill: var(--text-muted); }
.pd-list { max-height: 260px; overflow: auto; }
.folder-card { flex-direction: column; align-items: flex-start; border-top: 4px solid var(--folder, var(--blue)); }
.folder-card .fc-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; background: var(--folder, var(--blue)); }
.folder-card .fc-name { font-weight: 700; font-family: var(--font-head); }
.folder-card .fc-meta { font-size: .8rem; color: var(--text-muted); }
.wizard-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.wizard-steps li { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: .86rem; color: var(--text-muted); }
.wizard-steps li span { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); font-weight: 700; font-size: .75rem; }
.wizard-steps li.current { border-color: var(--blue); color: var(--text); font-weight: 600; }
.wizard-steps li.current span { background: var(--blue); color: #fff; }
.wizard-steps li.done span { background: #22c55e; color: #fff; }
.cc-scroll { max-height: 70vh; overflow: auto; }
.cc-list .list-group-item.active { background: var(--bs-primary); border-color: var(--bs-primary); }
.avatar-lg { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--blue), var(--purple)); color: #fff; font: 700 1.2rem var(--font-head); flex: 0 0 auto; }
@media (max-width: 991.98px) { .cc-scroll { max-height: 280px; } }

/* ---------------------------------------------------------- Release 1.1: header tools */
.top-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.tool-chip { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #dbe3ff; font-size: .88rem; font-weight: 500; white-space: nowrap; }
.tool-chip:hover, .tool-chip[aria-expanded="true"] { background: rgba(255, 255, 255, .12); color: #fff; }
.tool-chip:focus-visible { outline: none; box-shadow: var(--focus); }
.tool-create { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.tool-create:hover, .tool-create[aria-expanded="true"] { background: #1d4ed8; }
.hdr-clock-menu { width: 300px; max-width: 92vw; }
.calc-menu { width: 280px; max-width: 92vw; }
.calc-menu .calc-keys .btn { height: 44px; font-size: 1.05rem; font-weight: 600; }
@media (max-width: 1199.98px) { .tool-chip .tc-text[data-hdr-clock] { display: none; } }
@media (max-width: 575.98px) { .top-tools .tool-chip { padding: 0 10px; } .tool-create .tc-text { display: none; } }

/* ---------------------------------------------------------- Release 1.1: dashboard layout editing */
.dash-layout-tools { display: flex; gap: 6px; align-items: center; }
.dl-editing .dl-grid > [data-dl-widget] { position: relative; }
.dl-editing .dl-grid > [data-dl-widget] > :not(.dl-tools):not(.dl-ui) { outline: 2px dashed color-mix(in srgb, var(--bs-primary) 55%, transparent); outline-offset: 2px; border-radius: var(--radius); }
.dl-tools { position: absolute; top: 6px; right: calc(var(--bs-gutter-x) * .5 + 6px); z-index: 6; display: flex; gap: 3px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px; box-shadow: var(--shadow-sm); }
.dl-tools .btn { padding: 2px 7px; line-height: 1.2; }
.dl-grip { cursor: grab; padding: 0 6px; color: var(--text-muted); }
.dl-dragging { opacity: .45; }
.dl-tray { background: var(--surface); }
.stat-card.active { border-color: var(--bs-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary) 35%, transparent); }

/* ---------------------------------------------------------- Release 1.1: sign-in */
.auth-card-logo { max-width: 240px; max-height: 84px; width: auto; height: auto; object-fit: contain; }
.auth-group-name { font-family: var(--font-ui); font-weight: 700; font-size: 1.35rem; color: var(--text); }
.auth-foot { display: none; }
@media (max-width: 991.98px) { .auth-foot { display: block; } }

/* ---------------------------------------------------------- Release 1.2: lead page */
.lead-hero .avatar-lg { width: 64px; height: 64px; border-radius: 18px; font-size: 1.3rem; }
.stage-steps { display: flex; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin: 0; }
.stage-steps li { position: relative; flex: 1 1 0; min-width: 90px; text-align: center; font-size: .78rem; font-weight: 600; padding: 7px 10px; background: var(--surface-2); color: var(--text-muted); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); margin-right: -6px; }
.stage-steps li:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 8px 0 0 8px; }
.stage-steps li.done { background: color-mix(in srgb, #22c55e 22%, var(--surface)); color: #15803d; }
.stage-steps li.current { background: var(--bs-primary); color: #fff; }
.stage-steps li.lost { background: #fee2e2; color: #b91c1c; }
[data-bs-theme="dark"] .stage-steps li.done { color: #86efac; }
[data-bs-theme="dark"] .stage-steps li.lost { background: #4c1d1d; color: #fca5a5; }
.lh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.lh-tile { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); min-width: 0; }
.lh-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bs-primary) 12%, var(--surface)); color: var(--bs-primary); flex: 0 0 auto; }
.lh-l { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.lh-v { display: block; font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inq-group { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; height: 100%; background: var(--surface); }
.inq-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-primary); font-weight: 700; margin: 0 0 8px; }
.inq-list > div { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: .86rem; }
.inq-list > div:last-child { border-bottom: 0; }
.inq-list dt { font-weight: 500; color: var(--text-muted); }
.inq-list dd { margin: 0; font-weight: 600; }
.inq-list > div.empty dd { color: var(--text-muted); font-weight: 400; }
.info-toggle-btn { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.info-toggle-btn .chev { transition: transform .2s; }
.info-toggle-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.info-toggle-body { border-left: 3px solid var(--bs-primary); padding: 8px 12px; background: var(--surface-2); border-radius: 0 10px 10px 0; }
.quote-table tr.quote-accepted > td { background: color-mix(in srgb, #22c55e 12%, var(--surface)); }
.quote-table tr.quote-accepted > td:first-child { box-shadow: inset 4px 0 0 #22c55e; }
.quote-table tr.quote-closed > td { opacity: .6; }
.task-table tr.task-open > td:first-child { box-shadow: inset 4px 0 0 var(--bs-primary); }
.task-table tr.task-late > td:first-child { box-shadow: inset 4px 0 0 #ef4444; }
.task-table tr.task-open .task-title { font-weight: 600; }
.task-table tr.task-done > td, .task-table tr.task-skipped > td { opacity: .62; }
.task-table tr.task-done .task-title, .task-table tr.task-skipped .task-title { text-decoration: line-through; color: var(--text-muted); }
.task-table .task-tick { color: #16a34a; font-size: 1.1rem; }
.task-table tr.task-skipped .task-tick { color: var(--text-muted); }
.task-check { padding: 0 4px; font-size: 1.15rem; color: var(--text-muted); border: 0; }
.task-check:hover { color: #16a34a; }
.choice-card { display: block; height: 100%; padding: 18px; border: 2px solid var(--border); border-radius: 14px; text-decoration: none; color: var(--text); background: var(--surface); transition: border-color .15s, transform .15s; }
.choice-card:hover, .choice-card:focus { border-color: var(--bs-primary); color: var(--text); transform: translateY(-2px); }
.choice-card .cc-ico { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--bs-primary); color: #fff; font-size: 1.2rem; margin-bottom: 10px; }
/* Site-survey switch on the lead form */
.survey-box { border: 2px dashed var(--border); border-radius: 14px; padding: 12px 16px; background: var(--surface-2); transition: background .2s, border-color .2s; }
.survey-box.on { border: 2px solid #f59e0b; background: color-mix(in srgb, #f59e0b 12%, var(--surface)); }
.survey-switch .form-check-input { width: 3.2em; height: 1.6em; cursor: pointer; }
.survey-switch .form-check-input:checked { background-color: #f59e0b; border-color: #f59e0b; }
.survey-switch .form-check-label { font-size: 1rem; padding-left: .4em; padding-top: .15em; cursor: pointer; }
.survey-date { min-width: 200px; }
.inquiry-box { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--surface); }
/* Flow tracker: skipped / not-needed steps look disabled */
.flow-track li.skip { opacity: .42; filter: grayscale(1); border-style: dashed; }

/* ---------------------------------------------------------- Release 1.2: popup windows */
.erp-popup .modal-dialog { max-width: min(1240px, 96vw); }
.erp-popup .modal-body { position: relative; background: var(--app-bg); }
.erp-popup-frame { display: block; width: 100%; height: 82vh; border: 0; background: var(--app-bg); }
.erp-popup-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
@media (max-width: 991.98px) { .erp-popup-frame { height: calc(100vh - 60px); } }
body.embed { background: var(--app-bg); }
body.embed .content-wrap { padding: 0; }
body.embed .content-panel { border-radius: 0; min-height: 100vh; padding: 18px 20px 28px; }
body.embed .page-head h1 { font-size: 1.45rem; }
body.embed .scope-select { display: none; }

/* ---------------------------------------------------------- Release 1.2.1: side menu — icons only inside modules, opens while used */
/* Open menu = exactly the normal menu (logo, tagline, category names). The small logo and category icons belong to the icon strip only. */
.sidebar-brand .brand-mini { display: none; }
.nav-cat .cat-ico { display: none; }
.menu-pin { display: none; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--sidebar-muted); font-size: .72rem; }
.menu-pin:hover, .menu-pin.on { color: #fff; background: rgba(255,255,255,.08); }
.menu-pin.on i { transform: rotate(45deg); }
@media (min-width: 1200px) {
  .sidebar { position: sticky; }
  body.sidebar-mini .menu-pin, body.menu-pinned .menu-pin { display: inline-flex; }
  /* Icon strip */
  body.sidebar-mini .sidebar { width: 76px; flex: 0 0 76px; padding: 14px 10px 20px; overflow-x: hidden; z-index: 1035; transition: width .18s ease, box-shadow .18s ease, padding .18s ease; }
  body.sidebar-mini .sidebar:not(.peek) .brand-full, body.sidebar-mini .sidebar:not(.peek) .sidebar-tagline, body.sidebar-mini .sidebar:not(.peek) .nav-cat-label,
  body.sidebar-mini .sidebar:not(.peek) .nav-cat .chev, body.sidebar-mini .sidebar:not(.peek) .nav-link span, body.sidebar-mini .sidebar:not(.peek) .sidebar-foot { display: none; }
  body.sidebar-mini .sidebar:not(.peek) .sidebar-brand .brand-mini { display: block; width: 36px; height: 36px; margin: 0 auto 12px; }
  body.sidebar-mini .sidebar:not(.peek) .nav-cat { justify-content: center; padding: 10px 0; font-size: 1.05rem; border-radius: 10px; }
  body.sidebar-mini .sidebar:not(.peek) .nav-cat:hover { background: rgba(255,255,255,.06); }
  body.sidebar-mini .sidebar:not(.peek) .nav-cat .cat-ico { display: inline-block; margin: 0 !important; }
  body.sidebar-mini .sidebar:not(.peek) .nav-link { justify-content: center; padding: 9px 0; }
  body.sidebar-mini .sidebar:not(.peek) .nav-group:not(.show) { display: none; }
  /* Opened while in use (hover, tap, click or keyboard): the normal menu, drawn over the page so nothing moves */
  body.sidebar-mini .sidebar.peek { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); margin-right: calc(76px - var(--sidebar-w)); padding: 18px 12px 24px; box-shadow: 14px 0 40px rgba(2, 6, 23, .45); background: var(--navy-900); }
}

/* ---------------------------------------------------------- Release 1.2: clearer buttons */
.page-head .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.page-head .actions .btn { font-weight: 600; box-shadow: var(--shadow-sm); }
.page-head .actions .btn-outline-secondary { background: var(--surface); }
.card-header .btn-sm { font-weight: 600; }

/* ---------------------------------------------------------- Release 1.2: ready-made dashboard cards */
.wt-blue { --wt: #2563eb; --wt-soft: #e8efff; } .wt-teal { --wt: #0f9f8f; --wt-soft: #e2f6f3; } .wt-purple { --wt: #7c3aed; --wt-soft: #f0e9ff; }
.wt-orange { --wt: #ea580c; --wt-soft: #fff0e6; } .wt-green { --wt: #16a34a; --wt-soft: #e6f6ec; } .wt-red { --wt: #dc2626; --wt-soft: #fdeaea; }
[data-bs-theme="dark"] .wt-blue { --wt: #7aa2ff; --wt-soft: #16244d; } [data-bs-theme="dark"] .wt-teal { --wt: #2dd4bf; --wt-soft: #0f2f2c; } [data-bs-theme="dark"] .wt-purple { --wt: #b39dff; --wt-soft: #251c4a; }
[data-bs-theme="dark"] .wt-orange { --wt: #fb923c; --wt-soft: #3a2212; } [data-bs-theme="dark"] .wt-green { --wt: #4ade80; --wt-soft: #12321f; } [data-bs-theme="dark"] .wt-red { --wt: #f87171; --wt-soft: #3d1515; }
.wg { border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.wg:hover { box-shadow: 0 10px 30px rgba(15, 23, 42, .10); }
.wg-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; }
.wg-head h2 { font: 600 .95rem/1.25 var(--font-head); margin: 0; flex: 1; min-width: 0; }
.wg-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--wt-soft); color: var(--wt); }
.wg-more { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); text-decoration: none; }
.wg-more:hover, .wg-more:focus { background: var(--surface-2); color: var(--bs-primary); }
.wg-body { padding: 6px 16px 16px; }
.wg-big { font: 700 1.9rem/1.1 var(--font-head); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wg-sub { color: var(--text-muted); font-size: .78rem; }
.wg-empty { color: var(--text-muted); font-size: .85rem; margin: 6px 0 0; }
.wg-delta { font: 600 .75rem/1 var(--font-ui); padding: 5px 8px; border-radius: 99px; background: var(--surface-2); color: var(--text-muted); }
.wg-delta.good { background: #e6f6ec; color: #15803d; } .wg-delta.bad { background: #fdeaea; color: #b91c1c; }
[data-bs-theme="dark"] .wg-delta.good { background: #12321f; color: #86efac; } [data-bs-theme="dark"] .wg-delta.bad { background: #3d1515; color: #fca5a5; }
.wg-spark { display: block; width: 100%; height: 64px; margin-top: 10px; overflow: visible; }
.wg-spark .a { fill: var(--wt); opacity: .13; } .wg-spark .l { fill: none; stroke: var(--wt); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .wg-spark .d { fill: var(--wt); }
.wg-range { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-muted); margin-top: 2px; }
.wg-ring-wrap { display: flex; align-items: center; gap: 16px; }
.wg-ring { width: 128px; height: 128px; flex: 0 0 128px; }
.wg-ring .t { fill: none; stroke: var(--surface-2); stroke-width: 10; } .wg-ring .v { fill: none; stroke: var(--wt); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.wg-ring .rv { font: 700 20px var(--font-head); fill: var(--text); } .wg-ring .rl { font: 500 9px var(--font-ui); fill: var(--text-muted); }
[data-bs-theme="dark"] .wg-ring .t { stroke: #1d2a50; }
.wg-ring-facts { flex: 1; min-width: 0; }
.wg-fact { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.wg-fact:last-child { border-bottom: 0; }
.wg-leader { list-style: none; padding: 0; margin: 0; }
.wg-leader li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: .86rem; }
.wg-leader a { color: var(--text); text-decoration: none; } .wg-leader a:hover { color: var(--bs-primary); text-decoration: underline; }
.wg-rank { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; background: var(--surface-2); color: var(--text-muted); }
.wg-rank.r1 { background: #fde68a; color: #854d0e; } .wg-rank.r2 { background: #e2e8f0; color: #334155; } .wg-rank.r3 { background: #fed7aa; color: #9a3412; }
.wg-meter { display: block; height: 6px; border-radius: 99px; background: var(--surface-2); margin: 5px 0 2px; overflow: hidden; }
.wg-meter span { display: block; height: 100%; border-radius: 99px; background: var(--wt); }
.wg-stack { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--surface-2); margin: 4px 0 10px; }
.wg-stack.tall { height: 18px; }
.wg-stack span { background: var(--wt); min-width: 4px; }
.wg-legend { list-style: none; margin: 0; padding: 0; }
.wg-legend li { display: grid; grid-template-columns: 1fr auto 44px; gap: 8px; align-items: center; font-size: .86rem; padding: 4px 0; }
.wg-legend a, .wg-legend span:first-child { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.wg-legend a:hover { color: var(--bs-primary); }
.wg-legend .wg-sub { text-align: right; }
.wg-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--wt); display: inline-block; flex: 0 0 10px; }
.wg-buckets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wg-buckets > div { background: var(--surface-2); border-radius: 10px; padding: 7px 8px; font-size: .82rem; }
.wg-buckets .wg-dot { margin-bottom: 4px; }
.wg-list { list-style: none; margin: 0; padding: 0; }
.wg-list li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; font-size: .86rem; border-left: 3px solid transparent; }
.wg-list li:hover { background: var(--surface-2); }
.wg-list li.late { border-left-color: var(--red); }
.wg-list a { color: var(--text); text-decoration: none; } .wg-list a:hover { color: var(--bs-primary); text-decoration: underline; }
.wg-badge { flex: 0 0 auto; font-size: .72rem; font-weight: 600; padding: 4px 8px; border-radius: 99px; background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.wg-badge.bad { background: #fdeaea; color: #b91c1c; } [data-bs-theme="dark"] .wg-badge.bad { background: #3d1515; color: #fca5a5; }
@media (max-width: 575.98px) { .wg-buckets { grid-template-columns: repeat(3, 1fr); } .wg-ring { width: 104px; height: 104px; flex-basis: 104px; } }
.gallery-item { height: 100%; display: flex; flex-direction: column; border: 2px dashed var(--border); border-radius: calc(var(--radius-lg) + 4px); padding: 8px; background: var(--surface-2); }
.gallery-item.is-added { border-style: solid; border-color: color-mix(in srgb, var(--green) 55%, var(--border)); }
.gallery-meta { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px 10px; }
.gallery-preview { flex: 1; pointer-events: none; }
.dl-tray .btn-outline-success .badge { font-weight: 500; }

/* ---------------------------------------------------------- Release 1.2: template designers */
.designer-tabs .nav-link { font-weight: 600; border-radius: 99px; padding: .4rem .9rem; color: var(--text-muted); }
.designer-tabs .nav-link.active { background: var(--bs-primary); color: #fff; }
.designer-tabs .nav-link .badge { font-weight: 600; }
.rep-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rep-list-tight { gap: 4px; margin-bottom: 4px; }
.rep-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); transition: border-color .12s ease, box-shadow .12s ease; }
.rep-card:hover, .rep-card:focus-within { border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--border)); box-shadow: 0 4px 16px rgba(37, 99, 235, .08); }
.rep-card-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
.rep-card-head .form-control { width: auto; flex: 1 1 220px; min-width: 160px; }
.rep-card-head .q-type { width: auto; max-width: 170px; }
.rep-card-body { padding: 4px 12px 12px 44px; border-top: 1px dashed var(--border); margin: 0; }
.rep-card.collapsed > .rep-card-body { display: none; }
.rep-card.collapsed [data-rep-toggle] { color: var(--bs-primary); }
.rep-handle { cursor: grab; color: var(--text-muted); padding: 4px 4px; border-radius: 6px; flex: 0 0 auto; }
.rep-handle:hover { background: var(--surface-2); color: var(--text); }
.rep-handle:active { cursor: grabbing; }
.rep-num { min-width: 24px; height: 24px; border-radius: 50%; background: var(--bs-primary); color: #fff; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rep-tools { display: flex; gap: 2px; margin-left: auto; }
.rep-tools .btn { padding: .2rem .45rem; }
.rep-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.rep-row .form-control { min-width: 0; }
.rep-card.rep-row { padding: 6px 8px; }
.rep-dragging { opacity: .55; outline: 2px dashed var(--bs-primary); outline-offset: 2px; }
.sec-card { background: color-mix(in srgb, var(--bs-primary) 7%, var(--surface)); border-left: 4px solid var(--bs-primary); }
.fixed-card { padding: 10px 12px; border-style: dashed; background: var(--surface-2); }
.designer-preview { position: sticky; top: 84px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.designer-preview .form-control, .designer-preview .form-select { background-color: var(--surface); }
.qt-sec .rep-card-body { padding-left: 12px; }
.qt-head { display: grid; grid-template-columns: 26px 120px 1fr 70px 110px 74px 30px; gap: 6px; padding: 0 8px 4px; font-weight: 600; }
.qt-head > span:first-child { grid-column: 2; }
.qt-line .qt-sku { flex: 0 0 120px; width: 120px; } .qt-line .qt-qty { flex: 0 0 70px; width: 70px; } .qt-line .qt-price { flex: 0 0 110px; width: 110px; }
@media (max-width: 767.98px) {
  .qt-head { display: none; }
  .qt-line { flex-wrap: wrap; } .qt-line [data-k="description"] { flex: 1 1 100%; order: 3; }
  .rep-card-body { padding-left: 12px; }
  .designer-preview { position: static; }
}
[data-chip] { cursor: pointer; }

/* ---------------------------------------------------------- Release 1.2: payment vouchers */
.voucher { --v-accent: #1d4ed8; position: relative; background: #fff; color: #0f172a; margin: 0 auto; padding: 14mm 14mm 10mm; font: 10.5pt/1.45 var(--font-ui); box-shadow: var(--shadow); border-radius: 6px; }
.voucher.v-a4 { width: 210mm; max-width: 100%; min-height: 200mm; }
.voucher.v-a5 { width: 148mm; max-width: 100%; padding: 9mm 9mm 7mm; font-size: 9pt; }
.voucher .v-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid var(--v-accent); }
.voucher .v-co { display: flex; gap: 10px; align-items: flex-start; }
.voucher .v-logo { max-height: 52px; max-width: 120px; }
.voucher .v-logo-mark { width: 44px; height: 44px; border-radius: 10px; background: var(--v-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 1.3rem var(--font-head); }
.voucher .v-co-name { font: 700 1.15em/1.2 var(--font-head); }
.voucher .v-co-addr { font-size: .82em; color: #475569; }
.voucher .v-title-box { text-align: right; }
.voucher .v-title { font: 800 1.35em/1.1 var(--font-head); color: var(--v-accent); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.voucher .v-meta { margin-left: auto; font-size: .9em; } .voucher .v-meta th { color: #64748b; font-weight: 500; padding: 1px 8px 1px 0; text-align: right; } .voucher .v-meta td { font-weight: 700; }
.voucher .v-note { font-size: .88em; color: #334155; background: #f8fafc; border-radius: 6px; padding: 6px 9px; margin-bottom: 10px; white-space: pre-line; }
.voucher .v-payee { display: flex; gap: 12px; align-items: stretch; margin-bottom: 8px; }
.voucher .v-field { display: flex; flex-direction: column; border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 9px; }
.voucher .v-grow { flex: 1; }
.voucher .v-l { font-size: .74em; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 600; }
.voucher .v-v { font-size: 1em; }
.voucher .v-sub { font-size: .82em; color: #64748b; }
.voucher .v-amount { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; min-width: 42%; border: 2px solid var(--v-accent); border-radius: 6px; padding: 6px 12px; }
.voucher .v-amt { font: 800 1.55em/1.2 var(--font-head); }
.voucher .v-words { border-bottom: 1px dotted #94a3b8; padding: 4px 0 6px; margin-bottom: 10px; font-weight: 600; }
.voucher .v-pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 10px; }
.voucher .v-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: .92em; }
.voucher .v-table th, .voucher .v-table td { border: 1px solid #cbd5e1; padding: 4px 7px; }
.voucher .v-table thead th { background: color-mix(in srgb, var(--v-accent) 10%, #fff); text-align: left; }
.voucher .v-table tfoot th { background: #f8fafc; }
.voucher .v-signs { display: grid; gap: 14px; margin-top: 30px; }
.voucher .v-sign { text-align: center; font-size: .86em; }
.voucher .v-sign-line { border-top: 1px solid #334155; margin-top: 30px; margin-bottom: 4px; }
.voucher .v-sign-l { font-weight: 600; } .voucher .v-sign-n { color: #64748b; font-size: .9em; }
.voucher .v-foot { margin-top: 14px; padding-top: 6px; border-top: 1px solid #e2e8f0; font-size: .78em; color: #64748b; text-align: center; white-space: pre-line; }
.voucher.v-modern .v-head { border-bottom: 0; background: var(--v-accent); color: #fff; margin: -14mm -14mm 12px; padding: 12mm 14mm 10px; border-radius: 6px 6px 0 0; }
.voucher.v-a5.v-modern .v-head { margin: -9mm -9mm 10px; padding: 8mm 9mm 8px; }
.voucher.v-modern .v-co-addr, .voucher.v-modern .v-meta th { color: rgba(255, 255, 255, .8); } .voucher.v-modern .v-title { color: #fff; }
.voucher.v-modern .v-logo-mark { background: #fff; color: var(--v-accent); }
.voucher.v-modern .v-field { border: 0; background: #f1f5f9; }
.voucher.v-boxed { border: 2px solid #0f172a; box-shadow: none; }
.voucher.v-boxed .v-head { border-bottom-width: 3px; }
.voucher.v-boxed .v-field, .voucher.v-boxed .v-amount { border-radius: 0; border-color: #0f172a; }
.voucher.v-boxed .v-table th, .voucher.v-boxed .v-table td { border-color: #0f172a; }
.voucher .print-stamp { z-index: 2; }
.voucher-preview-wrap { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--app-bg) 10px, var(--app-bg) 20px); border-radius: 14px; padding: 16px; overflow-x: auto; }
.voucher-preview-wrap .voucher { transform-origin: top center; }
.voucher-thumb { --v-accent: #1d4ed8; display: block; width: 100%; aspect-ratio: 1 / 1.25; max-height: 190px; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px; position: relative; overflow: hidden; }
.voucher-thumb .vt-band { display: block; height: 14px; background: var(--v-accent); border-radius: 3px; margin-bottom: 8px; }
.voucher-thumb .vt-line { display: block; height: 6px; background: #e2e8f0; border-radius: 3px; margin-bottom: 6px; }
.voucher-thumb .vt-box { display: block; height: 26px; border: 2px solid var(--v-accent); border-radius: 4px; margin: 8px 0; }
.voucher-thumb .vt-signs { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.voucher-thumb .vt-signs i { flex: 1; border-top: 1px solid #475569; }
@media print {
  .voucher { box-shadow: none; border-radius: 0; margin: 0; width: auto !important; min-height: 0; padding: 0; }
  .voucher.v-modern .v-head { margin: 0 0 12px; padding: 8mm 10mm 8px; }
  .voucher, .voucher * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------------------------------------------------------- Release 1.2: repair ticket + shared documents */
.repair-steps { display: flex; list-style: none; padding: 0; margin: 0; gap: 4px; counter-reset: rs; }
.repair-steps li { flex: 1; text-align: center; font-size: .72rem; font-weight: 600; color: var(--text-muted); position: relative; padding-top: 22px; }
.repair-steps li::before { counter-increment: rs; content: counter(rs); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border); font-size: .68rem; line-height: 16px; }
.repair-steps li.done { color: var(--green); } .repair-steps li.done::before { content: '\2713'; background: var(--green); border-color: var(--green); color: #fff; }
.repair-steps li.current { color: var(--bs-primary); } .repair-steps li.current::before { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.share-page .print-doc { max-width: 100% !important; }
@media print { .repair-steps li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Small KPI tiles keep their own height when a bigger card shares their row (e.g. after a swap). */
.dl-grid > [data-dl-widget]:has(> .stat-card), .dl-grid > [data-dl-widget]:has(> .kpi-card), .dl-grid > [data-dl-widget]:has(> .dl-tools + .stat-card), .dl-grid > [data-dl-widget]:has(> .dl-tools + .kpi-card) { align-self: flex-start; }

/* Phones: the top bar and card headers fit 360-400px screens without sideways scrolling. */
@media (max-width: 575.98px) {
  .topbar { gap: 6px; padding-right: 8px; }
  .top-actions { gap: 2px; min-width: 0; }
  .top-actions .icon-btn, .top-actions .btn { padding-left: .45rem; padding-right: .45rem; }
  .top-actions .icon-btn { width: 34px; min-width: 34px; height: 34px; }
  .card-header { flex-wrap: wrap; row-gap: 6px; }
  .lh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lh-grid .lh-ico { display: none; }
  .lh-grid .lh-v { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .lh-grid .lh-l { word-break: normal; overflow-wrap: normal; }
}

/* ---------------------------------------------------------- Release 1.2.1: page identity + record header */
.page-kind { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px; padding: 4px 12px 4px 4px; border-radius: 99px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--pk-soft); color: var(--pk); border: 1px solid color-mix(in srgb, var(--pk) 25%, transparent); }
.page-kind .pk-ico { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pk); color: #fff; font-size: .7rem; }
.page-kind .pk-area { opacity: .75; font-weight: 600; }
.page-kind .pk-sep { opacity: .5; }
.pk-navy { --pk: #1e3a8a; --pk-soft: #e7ecfb; } .pk-blue { --pk: #1d4ed8; --pk-soft: #e8efff; } .pk-teal { --pk: #0f766e; --pk-soft: #e2f6f3; } .pk-green { --pk: #15803d; --pk-soft: #e6f6ec; }
.pk-orange { --pk: #c2410c; --pk-soft: #fff0e6; } .pk-pink { --pk: #be185d; --pk-soft: #fce7f3; } .pk-purple { --pk: #6d28d9; --pk-soft: #f0e9ff; } .pk-slate { --pk: #334155; --pk-soft: #eef1f6; }
[data-bs-theme="dark"] .page-kind { --pk-soft: color-mix(in srgb, var(--pk) 22%, #0b1437); color: #e6eaf5; }
.avatar-ico { background: linear-gradient(135deg, var(--teal), var(--blue)); font-size: 1.4rem; }
.stage-steps li.hold { background: #fef3c7; color: #92400e; }
[data-bs-theme="dark"] .stage-steps li.hold { background: #3a2a0b; color: #fcd34d; }
.hero-meter { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.hero-meter span { display: block; height: 100%; border-radius: 99px; background: var(--wt, var(--bs-primary)); transition: width .4s ease; }
.hero-side .card-header h2 { display: flex; align-items: center; }
.hero-side .wg-ico { width: 28px; height: 28px; flex-basis: 28px; font-size: .8rem; }
.record-hero .lh-v a { font-weight: 600; }
.rh-ref { font: 700 1.15rem/1.2 var(--font-head); color: var(--text); margin-right: 2px; }
.rh-sub { color: var(--text-muted); font-size: .92rem; margin-top: 2px; }
.ft-step { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); opacity: .7; }
.ft-step.on { background: var(--surface); opacity: 1; border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--border)); }

/* ---------------------------------------------------------- Release 1.2.1: chart cards (server-drawn SVG) */
.wt-navy { --wt: #1e3a8a; --wt-soft: #e7ecfb; } [data-bs-theme="dark"] .wt-navy { --wt: #93b4ff; --wt-soft: #16244d; }
.wg-chart { display: block; width: 100%; height: auto; margin-top: 6px; }
.wg-chart .g { stroke: var(--border); stroke-width: 1; }
.wg-chart .ya, .wg-chart .xa { font: 500 11px var(--font-ui); fill: var(--text-muted); }
.wg-chart .b { fill: var(--wt); opacity: .9; } .wg-chart .b:hover { opacity: 1; }
.wg-chart .l { fill: none; stroke: var(--wt); stroke-width: 2.5; stroke-linejoin: round; } .wg-chart .d { fill: var(--surface); stroke: var(--wt); stroke-width: 2; }
.wg-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .78rem; color: var(--text-muted); margin-top: 4px; }
.wg-chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.wg-dot.line { height: 3px; border-radius: 2px; width: 14px; }
.wg-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.wg-fig { background: var(--wt-soft); border-radius: 12px; padding: 8px 10px; }
.wg-fig strong { display: block; font: 700 1.15rem/1.2 var(--font-head); color: var(--wt); }
.wg-donut-wrap { display: flex; align-items: center; gap: 16px; }
.wg-donut { width: 140px; height: 140px; flex: 0 0 140px; }
.wg-donut .t { fill: none; stroke: var(--surface-2); stroke-width: 14; } .wg-donut .s { fill: none; stroke: var(--wt); stroke-width: 14; }
.wg-donut .rv { font: 700 20px var(--font-head); fill: var(--text); } .wg-donut .rl { font: 500 8px var(--font-ui); fill: var(--text-muted); }
.wg-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wg-timeline a { color: var(--text); text-decoration: none; } .wg-timeline a:hover { color: var(--bs-primary); text-decoration: underline; }
.wg-timeline .hero-meter { margin-top: 4px; height: 6px; }
@media (max-width: 575.98px) { .wg-donut-wrap { flex-direction: column; align-items: stretch; } .wg-donut { margin: 0 auto; } }

.guide-frame { display: block; width: 100%; height: calc(100vh - 210px); min-height: 520px; border: 0; border-radius: var(--radius); background: #eef1f6; }

/* ---------------------------------------------------------- Release 1.2.2: designer zoom, colours, selection box */
.pd-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.pd-zoom-val { min-width: 58px; font-variant-numeric: tabular-nums; }
.pd-canvas-wrap .pd-canvas { min-width: 0; min-height: 0; max-width: none; }
.pd-marquee { fill: color-mix(in srgb, var(--blue) 12%, transparent); stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
.pd-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-swatch { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--border); background: var(--sw, var(--surface)); padding: 0; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; }
.pd-swatch:hover { border-color: var(--text-muted); }
.pd-swatch.on { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 35%, transparent); }
.pd-swatch-default { background: linear-gradient(135deg, var(--surface) 45%, #ef4444 46%, #ef4444 54%, var(--surface) 55%); }
.pd-swatch-custom { color: var(--text-muted); font-size: .7rem; overflow: hidden; }
.pd-swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.bc-preview svg { display: block; width: 100%; max-width: 180px; height: 30px; }

/* ===================================================================== Release 1.3.0 */
/* Task board: department cards, task-type chips, quick filters, category tags, quick-change controls */
.tcat-board { --tc: #2563eb; }
.tcat-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; align-items: stretch; }
.tcat-sep { flex: 0 0 auto; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 700; padding: 4px 0; border-left: 2px solid var(--border); margin: 0 2px; }
.tcat-card { flex: 0 0 auto; min-width: 168px; max-width: 220px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text); scroll-snap-align: start; position: relative; transition: transform .12s ease, box-shadow .12s ease; }
.tcat-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tc); }
.tcat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); color: var(--text); }
.tcat-card.active { border-color: var(--tc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 35%, transparent); }
.tcat-ico { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--tc); font-size: 1rem; }
.tcat-body { display: flex; flex-direction: column; min-width: 0; }
.tcat-name { font-weight: 700; font-size: .86rem; line-height: 1.2; }
.tcat-meta { font-size: .74rem; color: var(--text-muted); }
.tcat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tcat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tc) 40%, var(--border)); background: color-mix(in srgb, var(--tc) 7%, var(--surface)); color: var(--text); font-size: .8rem; text-decoration: none; }
.tcat-chip i { color: var(--tc); }
.tcat-chip .badge { background: color-mix(in srgb, var(--tc) 18%, var(--surface)); color: var(--text); font-weight: 600; }
.tcat-chip.active { background: var(--tc); color: #fff; border-color: var(--tc); }
.tcat-chip.active i, .tcat-chip.active .badge { color: #fff; }
.tcat-chip.active .badge { background: rgba(255,255,255,.22); }
.task-quick { gap: 4px; flex-wrap: wrap; }
.task-quick .nav-link { font-size: .84rem; padding: 6px 11px; border-radius: 9px; color: var(--text-muted); }
.task-quick .nav-link .badge { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); font-weight: 600; }
.task-quick .nav-link.active { background: var(--blue); color: #fff; }
.task-quick .nav-link.active .badge { background: rgba(255,255,255,.2); color: #fff; border-color: transparent; }
.task-quick .nav-link.is-late:not(.active) { color: #dc2626; }
.tcat-tag { display: inline-flex; align-items: center; max-width: 210px; padding: 3px 9px; border-radius: 999px; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--tc) 12%, var(--surface)); color: color-mix(in srgb, var(--tc) 70%, var(--text)); border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent); }
.task-list-v13 .task-title-cell { min-width: 220px; }
.task-list-v13 .tq-select { min-width: 132px; max-width: 190px; font-size: .8rem; padding-top: 3px; padding-bottom: 3px; }
.task-list-v13 .tq-date { width: 140px; font-size: .8rem; padding-top: 3px; padding-bottom: 3px; }
.task-list-v13 .tq-date.is-late { border-color: #ef4444; color: #dc2626; }
.task-list-v13 .tq-status { font-weight: 600; }
.task-list-v13 .tq-status.s-in-progress { border-color: #3b82f6; }
.task-list-v13 .tq-status.s-blocked { border-color: #f59e0b; }
.task-list-v13 .tq-status.s-done { border-color: #16a34a; color: #15803d; }
.task-list-v13 .tq-status.s-cancelled { color: var(--text-muted); }
.task-list-v13 tr.task-done > td, .task-list-v13 tr.task-skipped > td { opacity: .7; }
.task-list-v13 tr.task-done .tq-select, .task-list-v13 tr.task-skipped .tq-select { opacity: 1; }
.task-list-v13 tr.task-done { background: color-mix(in srgb, #16a34a 5%, transparent); }
.task-cols-menu { min-width: 290px; }
[data-bs-theme="dark"] .tcat-chip .badge { color: var(--text); }
@media (min-width: 992px) { .tcat-strip { flex-wrap: wrap; overflow: visible; } .tcat-card { flex: 1 1 170px; max-width: 240px; } }
/* Permission matrix (release 1.3) */
.perm-matrix .perm-first { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 320px; }
.perm-matrix thead .perm-first { z-index: 3; background: var(--surface-2); }
.perm-matrix tr.perm-sec > * { background: var(--surface-2); border-top: 2px solid var(--border); }
.perm-matrix tr.perm-sec .perm-first { font-size: .9rem; }
.perm-matrix tbody tr[data-perm-row]:hover > * { background: color-mix(in srgb, var(--blue) 5%, var(--surface)); }
/* Language switch + Sinhala typography (release 1.3) */
.lang-switch { display: inline-flex; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 2px; margin-right: 6px; }
.lang-switch button { border: 0; background: transparent; color: inherit; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; line-height: 1.3; opacity: .8; }
.lang-switch button.on { background: #fff; color: #1e3a8a; opacity: 1; }
.lang-switch button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
html[lang="si"] body, html[lang="si"] .btn, html[lang="si"] .form-control, html[lang="si"] .form-select, html[lang="si"] .table { font-family: "Noto Sans Sinhala", "Iskoola Pota", "Nirmala UI", Inter, "Segoe UI", sans-serif; }
html[lang="si"] h1, html[lang="si"] h2, html[lang="si"] h3, html[lang="si"] .font-head { font-family: "Noto Sans Sinhala", Outfit, "Iskoola Pota", "Nirmala UI", sans-serif; }
html[lang="si"] .table thead th { text-transform: none; letter-spacing: 0; }
/* Release 1.3 forms: sections, inquiry cards, troubleshooting areas, customer summary side panel */
.form-sec { margin-top: .4rem; }
.form-sec:first-child { margin-top: 0; }
.form-sec-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--blue); border-bottom: 1px solid var(--border); padding-bottom: 6px; margin: 0; }
@media (min-width: 1200px) { .form-side-inner { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; padding-right: 2px; } }
.inq-v13 { --ic: #2563eb; }
.inq-groups { display: grid; gap: 12px; }
.inq-group-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.inq-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.inq-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px 12px 10px 52px; min-height: 62px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: border-color .12s, box-shadow .12s, background .12s; }
.inq-card .inq-ico { position: absolute; left: 10px; top: 10px; }
.inq-card:hover { border-color: var(--ic); box-shadow: var(--shadow-sm); }
.inq-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--ic) 45%, transparent); outline-offset: 1px; }
.inq-card.on { border-color: var(--ic); background: color-mix(in srgb, var(--ic) 9%, var(--surface)); box-shadow: 0 0 0 1px var(--ic) inset; }
.inq-name { font-weight: 600; font-size: .84rem; line-height: 1.25; }
.inq-sub { font-size: .72rem; color: var(--text-muted); line-height: 1.2; }
.inq-tick { position: absolute; right: 8px; top: 8px; color: var(--ic); opacity: 0; transition: opacity .12s; }
.inq-card.on .inq-tick { opacity: 1; }
.inq-ico { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--ic, #2563eb); flex: 0 0 auto; font-size: .9rem; }
.inq-selected { display: grid; gap: 12px; margin-top: 12px; }
.inq-panel { border: 1px solid color-mix(in srgb, var(--ic) 35%, var(--border)); border-left: 4px solid var(--ic); border-radius: 12px; padding: 12px 14px; background: var(--surface); transition: box-shadow .3s; }
.inq-panel.flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ic) 35%, transparent); }
.inq-panel-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.inq-main-badge { background: color-mix(in srgb, var(--ic, #2563eb) 15%, var(--surface)); color: color-mix(in srgb, var(--ic, #2563eb) 75%, var(--text)); border: 1px solid color-mix(in srgb, var(--ic, #2563eb) 35%, transparent); font-weight: 600; }
.inq-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; border: 0; padding: 0; }
.inq-opts legend { width: 100%; float: none; }
.inq-opt { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ic, #2563eb) 40%, var(--border)); font-size: .8rem; cursor: pointer; background: var(--surface); color: var(--text); user-select: none; }
.btn-check:checked + .inq-opt, .inq-opt.on { background: var(--ic, #2563eb); color: #fff; border-color: var(--ic, #2563eb); }
.btn-check:focus-visible + .inq-opt { outline: 3px solid color-mix(in srgb, var(--ic, #2563eb) 45%, transparent); }
.inq-view { --ic: #2563eb; }
.scl-box { border: 1px dashed var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); }
.scl-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(150px, 1.1fr) minmax(120px, .8fr) minmax(180px, 2fr) auto; gap: 8px; align-items: end; padding: 8px 0; border-bottom: 1px solid var(--border); }
.scl-row:last-child { border-bottom: 0; }
.scl-act { display: flex; gap: 6px; align-items: center; padding-bottom: 2px; }
@media (max-width: 767.98px) { .scl-row { grid-template-columns: 1fr 1fr; } .scl-note { grid-column: 1 / -1; } }
.cs-empty { text-align: center; padding: 14px 6px; }
.cs-empty > i { font-size: 1.6rem; color: var(--blue); margin-bottom: 6px; }
.cs-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.cs-head .avatar { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; font-weight: 700; flex: 0 0 auto; }
.cs-contact { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.cs-tile { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; column-gap: 6px; padding: 7px 9px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); text-decoration: none; color: var(--text); }
.cs-tile > i { grid-row: 1 / span 2; align-self: center; color: var(--text-muted); }
.cs-v { font-weight: 700; font-size: .9rem; line-height: 1.2; }
.cs-v small { font-weight: 500; color: var(--text-muted); }
.cs-l { font-size: .7rem; color: var(--text-muted); line-height: 1.2; }
.cs-bad { border-color: #fecaca; background: color-mix(in srgb, #ef4444 8%, var(--surface)); } .cs-bad > i, .cs-bad .cs-v { color: #dc2626; }
.cs-warn { border-color: #fde68a; background: color-mix(in srgb, #f59e0b 9%, var(--surface)); } .cs-warn > i { color: #d97706; }
.cs-ok > i { color: #16a34a; }
.cs-list { border-top: 1px solid var(--border); padding: 6px 0; font-size: .82rem; }
.cs-list summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
.cs-list li { padding: 4px 0 4px 18px; border-bottom: 1px dotted var(--border); }
.cs-list li:last-child { border-bottom: 0; }
.cs-cov { white-space: pre-line; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.pf-results .pf-item { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .84rem; position: relative; padding-right: 92px; }
.pf-results .pf-price { position: absolute; right: 0; top: 7px; font-weight: 700; }
/* Issued items & returns (release 1.3) */
.mi-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 10px; }
.mi-steps li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.mi-steps li.done { background: color-mix(in srgb, #16a34a 12%, var(--surface)); color: #15803d; border-color: color-mix(in srgb, #16a34a 35%, transparent); }
.mi-steps li.current { background: var(--blue); color: #fff; border-color: var(--blue); }
.mi-steps li.bad { background: #dc2626; color: #fff; border-color: #dc2626; }
.mi-table tr.mi-missing > td { background: color-mix(in srgb, #ef4444 7%, var(--surface)); }
.mi-step .table input.form-control { min-width: 80px; }
/* Settings hub + business flow blueprint (release 1.3) */
.cfg-hub { columns: 2 420px; column-gap: 16px; }
.cfg-hub .cfg-group { break-inside: avoid; margin-bottom: 16px; display: inline-block; width: 100%; }
.bp-chain { display: grid; gap: 10px; counter-reset: bp; }
.bp-step { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; position: relative; }
.bp-step + .bp-step::before { content: ""; position: absolute; left: 36px; top: -11px; height: 10px; border-left: 2px dashed var(--border); }
.bp-step.auto { border-left: 4px solid var(--blue); }
.bp-no { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--blue); color: var(--blue); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 14px; margin-top: 6px; }
.bp-l { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; }
.bp-types { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 8px; }
.bp-types .bp-l { margin-right: 6px; }
.bp-type { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--ic); color: #fff; font-size: .72rem; }
.bp-type.off { background: var(--surface-2); color: var(--text-muted); border: 1px dashed var(--border); }
.bp-matrix th, .bp-matrix td { white-space: nowrap; }
/* Release 1.3.1: modern document forms (invoice, quotation, receipt…), customer at a glance cards & popups, receive payment */
.txn-sec .card-header h2 { display: flex; align-items: center; gap: 8px; }
.txn-no { width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; font-size: .78rem; font-weight: 700; flex: 0 0 auto; }
.txn-grand strong { color: var(--blue); }
.txn-side .card-footer .btn-lg { font-size: 1rem; }
.txn-mbar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 8px; margin: 12px -4px 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 -6px 18px rgba(15, 23, 42, .12); }
.txn-mbar strong { font-size: 1.05rem; }
@media (max-width: 767.98px) {
  .txn-modern .txn-lines-wrap { overflow: visible; }
  .txn-modern .txn-lines thead { display: none; }
  .txn-modern .txn-lines, .txn-modern .txn-lines tbody { display: block; width: 100%; }
  .txn-modern .txn-lines tr[data-line] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; position: relative; padding: 12px 12px 10px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
  .txn-modern .txn-lines td { display: block; border: 0; padding: 0; min-width: 0; background: transparent; }
  .txn-modern .txn-lines td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .04em; }
  .txn-modern .txn-lines td.txn-wide { grid-column: 1 / -1; padding-right: 26px; }
  .txn-modern .txn-lines td.txn-wide ~ td.txn-wide { padding-right: 0; }
  .txn-modern .txn-lines td.txn-total-cell { text-align: right; align-self: end; font-size: 1rem; }
  .txn-modern .txn-lines td.txn-rm { position: absolute; top: 8px; right: 10px; }
  .txn-modern .txn-lines .form-control, .txn-modern .txn-lines .form-select { font-size: .95rem; min-height: 38px; }
}
button.cs-tile { text-align: left; width: 100%; cursor: pointer; font: inherit; transition: border-color .12s, box-shadow .12s, transform .06s; }
button.cs-tile:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
button.cs-tile:active { transform: translateY(1px); }
button.cs-tile:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: 1px; }
.cs-sub { font-size: .66rem; opacity: .85; }
.cs-tx { border-top: 1px solid var(--border); padding: 6px 0; font-size: .82rem; }
.cs-tx-h { font-weight: 600; padding: 2px 0 4px; }
.cs-tx li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dotted var(--border); }
.cs-tx li:last-child { border-bottom: 0; }
.cs-tx-k { color: var(--text-muted); font-size: .74rem; }
.cs-tx-r { text-align: right; white-space: nowrap; }
.cs-cz li { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.cs-cz li:last-child { border-bottom: 0; }
.cs-report td { font-size: .86rem; }
/* Receive payment */
.rp-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.rp-amount-box { margin-left: auto; text-align: right; }
.rp-amount-box .rp-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-weight: 700; }
.rp-amount-box .rp-big { font-size: 2.2rem; font-weight: 800; line-height: 1.1; color: var(--text); font-family: Outfit, Inter, sans-serif; }
.rp-amount-box .rp-bal { font-size: 1.05rem; font-weight: 700; }
.rp-table td, .rp-table th { vertical-align: middle; }
.rp-table tbody tr.rp-on { background: color-mix(in srgb, var(--blue) 6%, var(--surface)); }
.rp-table .rp-pay { max-width: 150px; margin-left: auto; text-align: right; }
.rp-totals { display: grid; grid-template-columns: auto auto; gap: 4px 24px; justify-content: end; text-align: right; }
.rp-totals dt { font-weight: 600; color: var(--text-muted); }
.rp-totals dd { margin: 0; font-weight: 700; min-width: 120px; }
.rp-drop { border: 2px dashed var(--border); border-radius: 12px; padding: 14px; text-align: center; color: var(--text-muted); cursor: pointer; }
.rp-drop.drag { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, var(--surface)); }
.rp-files li { display: flex; justify-content: space-between; gap: 8px; font-size: .84rem; padding: 3px 0; }
@media (max-width: 767.98px) {
  .rp-amount-box { margin-left: 0; text-align: left; width: 100%; }
  .rp-table thead { display: none; }
  .rp-table, .rp-table tbody { display: block; }
  .rp-table tr { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 4px 8px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; }
  .rp-table td { border: 0; padding: 0; }
  .rp-table td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
  .rp-table td.rp-desc { grid-column: 2 / -1; }
  .rp-table td.rp-paycell { grid-column: 1 / -1; }
  .rp-table .rp-pay { max-width: none; }
}
/* ===================== Release 1.3.2: working company, My work, card forms, item form, serial tags, document toolbar */
.co-badge { --co: var(--blue); width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--co); color: #fff; font-weight: 800; font-size: .62rem; letter-spacing: .02em; flex: 0 0 auto; overflow: hidden; vertical-align: middle; }
.co-badge.sm { width: 22px; height: 22px; border-radius: 7px; font-size: .55rem; }
.co-badge.md { width: 40px; height: 40px; border-radius: 12px; font-size: .75rem; }
.co-badge.lg { width: 56px; height: 56px; border-radius: 16px; font-size: .95rem; }
.co-badge.has-logo { background: #fff; border: 1px solid var(--border); }
.co-badge.has-logo img { width: 100%; height: 100%; object-fit: contain; }
.tool-chip.co-chip { gap: 8px; padding-left: 6px; text-decoration: none; }
.co-chip .tc-text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.co-chip-k { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
@media (max-width: 767.98px) { .co-chip .tc-text { display: none; } }
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.co-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.co-card:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--border)); }
.co-card.is-active { border-color: #16a34a; box-shadow: 0 0 0 1px #16a34a inset, var(--shadow-sm); }
.co-card-h { display: flex; align-items: center; gap: 12px; }
.co-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.co-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.co-stats > div { background: var(--surface-2); border-radius: 10px; padding: 8px; text-align: center; }
.co-stats > div.bad { background: color-mix(in srgb, #ef4444 10%, var(--surface)); color: #dc2626; }
.co-sv { display: block; font-weight: 800; font-size: 1.15rem; line-height: 1.1; }
.co-sl { display: block; font-size: .66rem; color: var(--text-muted); }
.co-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.co-rules { list-style: none; padding: 0; display: grid; gap: 10px; }
.co-rules li { display: flex; gap: 10px; }
.co-rules i { width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--blue) 12%, var(--surface)); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.oc-card { max-width: 620px; margin-top: 8vh; }
.co-switch-to { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.dash-cofilter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 14px; }
.dcf-l { font-size: .75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }
.dcf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: .8rem; cursor: pointer; user-select: none; }
.dcf-chip input { accent-color: var(--blue); }
.dcf-chip.on { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--surface)); color: var(--blue); font-weight: 600; }
.dcf-note { font-size: .72rem; color: var(--text-muted); margin-left: auto; }
/* My work */
.mw-hero { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 20px 22px; border-radius: var(--radius-lg); margin-bottom: 16px; color: #fff; background: linear-gradient(120deg, #1e3a8a 0%, #2563eb 55%, #0ea5e9 100%); box-shadow: 0 12px 30px rgba(37, 99, 235, .25); }
.mw-hero-l { flex: 1 1 260px; }
.mw-hero-t { font-family: Outfit, Inter, sans-serif; font-size: 1.55rem; font-weight: 800; line-height: 1.2; margin: 4px 0; }
.mw-tiles { display: grid; grid-template-columns: repeat(6, minmax(92px, 1fr)); gap: 8px; flex: 3 1 560px; }
@media (max-width: 991.98px) { .mw-tiles { grid-template-columns: repeat(3, 1fr); } }
.mw-tile { border: 0; border-radius: 14px; padding: 10px 10px 8px; text-align: left; color: #fff; background: rgba(255, 255, 255, .14); backdrop-filter: blur(4px); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; cursor: pointer; transition: transform .1s, background .15s; }
.mw-tile:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
.mw-ico { grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; }
.mw-n { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.mw-l { font-size: .68rem; opacity: .9; }
.mw-red .mw-ico { background: #ef4444; } .mw-amber .mw-ico { background: #f59e0b; } .mw-green .mw-ico { background: #16a34a; } .mw-purple .mw-ico { background: #8b5cf6; } .mw-teal .mw-ico { background: #14b8a6; }
.mw-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.mw-tab { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 3px 12px; font-size: .78rem; color: var(--text); }
.mw-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.mw-tab-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: rgba(0, 0, 0, .08); font-size: .68rem; font-weight: 700; text-align: center; }
.mw-tab.active .mw-tab-n { background: rgba(255, 255, 255, .25); }
.mw-table td { padding-top: 10px; padding-bottom: 10px; }
.mw-task { display: flex; gap: 10px; align-items: flex-start; min-width: 240px; }
.mw-dot { --dot: #2563eb; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); flex: 0 0 auto; margin-top: 6px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 20%, transparent); }
.mw-dot.sm { width: 7px; height: 7px; margin: 0 6px 0 0; display: inline-block; box-shadow: none; }
.mw-other td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.mw-just-done td { opacity: .45; text-decoration: line-through; transition: opacity .4s; }
.mw-cos { padding: 6px 14px 10px; }
.mw-cos li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.mw-cos li:last-child { border-bottom: 0; }
.mw-week { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.mw-day { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 6px 10px; background: var(--surface); min-width: 0; }
.mw-day-b { min-width: 0; }
.mw-day.is-today { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.mw-day-h { display: flex; flex-direction: column; align-items: center; font-size: .66rem; color: var(--text-muted); text-transform: uppercase; line-height: 1.1; }
.mw-day-h strong { font-size: 1rem; color: var(--text); }
.mw-day-t { font-size: .78rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-flow { display: block; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; color: var(--text); text-decoration: none; transition: border-color .15s; }
.mw-flow:hover { border-color: var(--blue); }
.mw-steps { display: flex; gap: 3px; margin: 6px 0; }
.mw-step { flex: 1; height: 6px; border-radius: 3px; background: var(--border); }
.mw-step.s-done, .mw-step.s-bypassed { background: #16a34a; } .mw-step.s-current { background: var(--blue); } .mw-step.s-skip { background: repeating-linear-gradient(45deg, var(--border), var(--border) 3px, transparent 3px, transparent 6px); }
.mw-notes li { display: flex; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: .84rem; }
.mw-notes li.unread { background: color-mix(in srgb, var(--blue) 5%, var(--surface)); font-weight: 600; }
/* Company access */
.uca-table th[scope="row"] { white-space: nowrap; }
.uca-on th { color: var(--blue); }
.uca-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; margin: 2px 4px 2px 0; border-radius: 999px; background: color-mix(in srgb, var(--blue) 10%, var(--surface)); color: var(--blue); font-size: .78rem; font-weight: 600; }
/* Card-section forms (task popup, items) */
.fcards-body { display: grid; gap: 14px; }
.fcard .card-header { gap: 10px; flex-wrap: wrap; }
.fcard .card-header h2 { display: flex; align-items: center; gap: 10px; }
.fcard-ico { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--blue) 12%, var(--surface)); color: var(--blue); font-size: .85rem; }
.fcard-d { font-size: .75rem; color: var(--text-muted); }
.fcards-foot { position: sticky; bottom: 0; z-index: 5; margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(15, 23, 42, .08); }
.fl-ico { color: var(--text-muted); margin-right: 6px; width: 14px; text-align: center; }
.seg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.seg-cards.seg-compact { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.seg-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; margin: 0; }
.seg-card > i { color: var(--blue); font-size: 1rem; margin-bottom: 2px; }
.seg-t { font-weight: 600; font-size: .86rem; }
.seg-h { font-size: .7rem; color: var(--text-muted); }
.btn-check:checked + .seg-card { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, var(--surface)); box-shadow: 0 0 0 1px var(--blue) inset; }
.btn-check:focus-visible + .seg-card { outline: 3px solid color-mix(in srgb, var(--blue) 45%, transparent); }
.embed .page-head .page-kind, .embed .page-head .breadcrumb { display: none; }
.embed .page-head { margin-bottom: 10px; }
.embed .page-head h1 { font-size: 1.15rem; }
.fcards-embed .fcards-foot { margin-left: -4px; margin-right: -4px; }
/* Item form */
.cat-new { border: 1px dashed var(--blue); border-radius: 12px; padding: 10px; background: color-mix(in srgb, var(--blue) 5%, var(--surface)); }
.cat-new-in { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cat-new-in input { max-width: 320px; }
.price-note { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: .84rem; color: var(--text-muted); }
.price-note.ok { background: color-mix(in srgb, #16a34a 9%, var(--surface)); color: var(--text); }
.price-note.warn { background: color-mix(in srgb, #f59e0b 12%, var(--surface)); color: var(--text); }
.price-note.bad { background: color-mix(in srgb, #ef4444 10%, var(--surface)); color: var(--text); }
.img-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border: 2px dashed var(--border); border-radius: 14px; text-align: center; cursor: pointer; color: var(--text); }
.img-drop > i { font-size: 1.6rem; color: var(--blue); }
.img-drop.drag { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, var(--surface)); }
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.img-tile { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 2px solid var(--border); cursor: pointer; margin: 0; background: var(--surface-2); }
.img-tile img { width: 100%; height: 100%; object-fit: cover; }
.img-main { position: absolute; left: 6px; bottom: 6px; font-size: .62rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(15, 23, 42, .65); color: #fff; opacity: 0; }
.img-tile:has(input:checked) { border-color: #f59e0b; }
.img-tile:has(input:checked) .img-main, .img-tile.is-new .img-main { opacity: 1; }
/* Serial number tags */
.sn-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 38px; height: auto; padding: 4px 6px; cursor: text; }
.sn-tags.form-control-sm { min-height: 31px; padding: 2px 4px; }
.sn-list { display: contents; }
.sn-tag { display: inline-flex; align-items: center; gap: 2px; padding: 1px 2px 1px 8px; border-radius: 6px; background: color-mix(in srgb, var(--blue) 12%, var(--surface)); color: var(--blue); font-family: ui-monospace, Consolas, monospace; font-size: .78rem; font-weight: 600; }
.sn-tag button { border: 0; background: none; color: inherit; padding: 0 4px; line-height: 1; font-size: 1rem; }
.sn-input { flex: 1 1 110px; min-width: 90px; border: 0; outline: 0; background: transparent; font-size: .85rem; color: var(--text); padding: 2px; }
.sn-count { font-size: .7rem; font-weight: 700; color: var(--text-muted); margin-left: auto; }
.sn-count.ok { color: #16a34a; } .sn-count.warn { color: #d97706; }
.sn-tags.sn-dup { animation: snshake .35s; border-color: #f59e0b; }
@keyframes snshake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
/* Invoice & quotation: slimmer side column, toolbar, long descriptions, preview */
@media (min-width: 1200px) { .doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(290px, 23vw, 340px); gap: 16px; } }
@media (max-width: 1199.98px) { .doc-grid { display: grid; gap: 16px; } }
.doc-main { min-width: 0; }
.doc-toolbar { position: sticky; top: 8px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; margin-bottom: 14px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); }
.dt-no { display: flex; align-items: center; gap: 8px; padding-right: 10px; border-right: 1px solid var(--border); }
.dt-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.dt-no-t { display: flex; flex-direction: column; line-height: 1.1; }
.dt-k { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; }
.dt-v { font-family: Outfit, Inter, sans-serif; font-weight: 800; font-size: 1.05rem; }
.dt-hint { font-size: .66rem; color: var(--text-muted); }
.dt-input { width: 160px; }
.dt-field { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.dt-field > i { color: var(--text-muted); }
.dt-field .form-select { width: auto; max-width: 220px; }
.dt-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.dt-err { flex-basis: 100%; }
@media (max-width: 767.98px) { .doc-toolbar { position: static; } .dt-no { border-right: 0; } .dt-actions { margin-left: 0; } }
@media (min-width: 1200px) { .doc-toolbar ~ .doc-grid .form-side-inner { top: calc(var(--dt-h, 60px) + 18px); max-height: calc(100vh - var(--dt-h, 60px) - 30px); } }
.doc-v132 .txn-sec .card-header h2 .txn-no { width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--blue) 12%, var(--surface)); color: var(--blue); font-size: .85rem; }
.doc-v132 .txn-sec { border-radius: 16px; }
.doc-v132 .txn-lines thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); background: var(--surface-2); border-bottom: 0; }
.doc-v132 .txn-lines tbody tr[data-line] td { border-color: var(--border); }
textarea.line-desc { resize: vertical; min-height: 31px; overflow: hidden; line-height: 1.35; }
.line-flash td { animation: lineflash 1s; }
@keyframes lineflash { from { background: color-mix(in srgb, #16a34a 18%, var(--surface)); } to { background: transparent; } }
/* Invoice & quotation lines: one card per line: the item and amounts, a full-width description, then stock details */
@media (min-width: 768px) {
  .doc-cards { overflow: visible; }
  .doc-cards .txn-lines { margin-bottom: 6px; }
  .doc-cards .txn-lines thead { display: none; }
  .doc-cards .txn-lines, .doc-cards .txn-lines tbody { display: block; width: 100%; }
  .doc-cards .txn-lines tr[data-line] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px 10px; position: relative; padding: 12px 40px 12px 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
  .doc-cards .txn-lines tr[data-line]:focus-within { border-color: color-mix(in srgb, var(--blue) 55%, var(--border)); }
  .doc-cards .txn-lines td { display: block; border: 0; padding: 0; min-width: 0; background: transparent; grid-row: 3; grid-column: span 3; }
  .doc-cards .txn-lines td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  .doc-cards .txn-lines td.ln-item_id { grid-row: 1; grid-column: span 6; }
  .doc-cards .txn-lines td.ln-quantity, .doc-cards .txn-lines td.ln-discount_pct { grid-row: 1; grid-column: span 1; }
  .doc-cards .txn-lines td.ln-unit_price, .doc-cards .txn-lines td.ln-unit_cost { grid-row: 1; grid-column: span 2; }
  .doc-cards .txn-lines td.ln-sale_price, .doc-cards .txn-lines td.ln-lot_no { grid-column: span 3; }
  .doc-cards .txn-lines td.ln-total { grid-row: 1; grid-column: span 2; align-self: end; padding-bottom: 5px; font-size: 1rem; }
  .doc-cards .txn-lines td.ln-total[data-label]::before { text-align: right; }
  .doc-cards .txn-lines td.ln-description { grid-row: 2; grid-column: 1 / -1; }
  .doc-cards .txn-lines td.ln-warranty_months { grid-column: span 2; }
  .doc-cards .txn-lines td.ln-serials { grid-column: span 4; }
  .doc-cards .txn-lines td.txn-rm { position: absolute; top: 10px; right: 12px; grid-area: auto; }
  .doc-cards textarea.line-desc { min-height: 54px; }
  .doc-cards .line-flash { animation: lineflash 1s; }
  .doc-cards .line-flash td { animation: none; }
}
.da-list { max-height: 55vh; overflow: auto; }
.docpv { background: #fff; color: #0f172a; border-radius: 14px; padding: 28px; border: 1px solid #e2e8f0; }
.docpv-h { display: flex; justify-content: space-between; gap: 16px; border-bottom: 3px solid #2563eb; padding-bottom: 12px; margin-bottom: 16px; }
.docpv-co { font-family: Outfit, Inter, sans-serif; font-size: 1.3rem; font-weight: 800; }
.docpv-kind { font-size: 1.4rem; font-weight: 800; color: #2563eb; letter-spacing: .08em; }
.docpv-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.docpv-meta > div, .docpv-note { background: #f1f5f9; border-radius: 10px; padding: 8px 10px; }
.docpv-meta span, .docpv-note > span { display: block; font-size: .65rem; text-transform: uppercase; color: #64748b; font-weight: 700; letter-spacing: .05em; }
.docpv-t th { font-size: .7rem; text-transform: uppercase; color: #64748b; }
.docpv-desc { white-space: pre-line; }
.docpv-sum { margin-left: auto; max-width: 320px; display: grid; gap: 4px; }
.docpv-sum > div { display: flex; justify-content: space-between; }
.docpv-total { border-top: 2px solid #0f172a; padding-top: 6px; font-size: 1.15rem; }
.docpv-note { margin-top: 12px; white-space: pre-line; font-size: .85rem; }
/* Company access guide */
.cg-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cg-node { flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.cg-node > i { color: var(--blue); font-size: 1.2rem; }
.cg-node span { font-size: .75rem; color: var(--text-muted); }
.cg-node.cg-hi { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--surface)); }
.cg-arrow { color: var(--text-muted); }
@media (max-width: 767.98px) { .cg-arrow { transform: rotate(90deg); margin: 0 auto; } }
.cg-side { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.cg-side > i { color: var(--blue); margin-top: 3px; }
.cg-rules li { margin-bottom: 8px; }
.cg-steps .list-group-item { padding-top: 12px; padding-bottom: 12px; }
@media print { .doc-toolbar, .mw-tiles, .dash-cofilter { display: none !important; } }

.mw-sheet .table-responsive { position: relative; }
.mw-table .mw-task > div { max-width: 420px; }
.mw-table .mw-task .text-truncate { white-space: normal; }

/* Release 1.3.3 — opening stock in batches, serial scan panel */
.op-intro { display: flex; gap: 10px; padding: 10px 12px; margin-bottom: 14px; border-radius: 12px; background: color-mix(in srgb, var(--blue) 7%, var(--surface)); font-size: .85rem; }
.op-intro > i { color: var(--blue); margin-top: 3px; }
.op-sn-switch { padding: 10px 12px 10px 3.1em; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); margin: 0; }
.op-batch { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 14px; margin-bottom: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
.op-bh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.op-bn { font-weight: 700; white-space: nowrap; color: var(--text); }
.op-bn i { color: var(--blue); }
.op-lot { max-width: 240px; }
.op-rm { margin-left: auto; }
.op-lock { margin-top: 5px; font-size: .8rem; color: var(--blue); }
input.op-locked { background: var(--surface-2); font-weight: 700; cursor: not-allowed; }
.op-scan { margin-top: 14px; padding: 12px 14px 10px; border: 2px dashed color-mix(in srgb, var(--blue) 55%, var(--border)); border-radius: 12px; background: var(--surface-2); }
.op-scan-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.op-scan-h i { color: var(--blue); }
.op-scan-in { display: flex; gap: 8px; }
.op-scan-in .btn { white-space: nowrap; }
.op-scan-input { min-height: 48px; font-family: ui-monospace, Consolas, monospace; font-size: 1rem; }
.op-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 60px; margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); align-items: center; }
.op-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 8px; background: #0f172a; color: #38bdf8; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; font-weight: 700; letter-spacing: .02em; }
.op-chip button { border: 0; background: none; color: #f87171; font-size: 1.05rem; line-height: 1; padding: 0 3px; }
.op-chip button:hover { color: #fecaca; }
.op-chip.bad { background: #7f1d1d; color: #fecaca; }
.op-empty { color: var(--text-muted); font-size: .85rem; }
.op-shake { animation: snshake .35s; border-color: #f59e0b; }
.op-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.op-total { font-size: .85rem; color: var(--text-muted); }
.op-total strong { color: var(--text); }
/* invoice / quotation lines: the same item in stock at several prices */
.lot-hint { margin-top: 4px; font-size: .72rem; line-height: 1.3; color: #b45309; }
/* Batches & prices */
.bt-tile { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.bt-tile > i { color: var(--blue); font-size: 1.1rem; }
.bt-tile span { font-size: .78rem; color: var(--text-muted); }
.bt-tile strong { font-family: var(--font-head); font-size: 1.4rem; line-height: 1.1; }
.batch-table .batch-item td { background: var(--surface-2); border-top: 2px solid var(--border); }
/* Inventory guide */
.ig-four { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ig-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.ig-card > i { font-size: 1.3rem; }
.ig-card > strong { font-size: 1.05rem; }
.ig-card .ig-what { font-size: .8rem; color: var(--text-muted); }
.ig-card code { align-self: flex-start; padding: 3px 8px; border-radius: 6px; background: #0f172a; color: #38bdf8; font-size: .78rem; }
.ig-card ul { margin: 6px 0 0; padding-left: 1.1rem; font-size: .8rem; }
.ig-sku > i { color: #7c3aed; } .ig-bc > i { color: #0284c7; } .ig-sn > i { color: #db2777; } .ig-lot > i { color: #ea580c; }
.ig-example { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--blue) 7%, var(--surface)); }
.ig-example code { font-size: .78rem; }
.ig-table th[scope="row"] { white-space: nowrap; color: var(--text-muted); font-weight: 600; }
.ig-how h3 { font-size: .9rem; font-weight: 700; margin: 12px 0 6px; }
.ig-how h3:first-child { margin-top: 0; }
.ig-how ol { padding-left: 1.2rem; margin-bottom: 4px; }
.ig-flow .list-group-item { display: flex; gap: 10px; }
.ig-flow .list-group-item > i { width: 22px; color: var(--blue); margin-top: 3px; text-align: center; }
.ig-jl td { padding: 3px 6px; }
@media print { .op-foot button { display: none !important; } }

/* =====================================================================================
   Release 1.4 — Print & share centre, print & send templates (gallery + builder), message templates
   ===================================================================================== */
/* Print & share centre */
.pc { display: flex; flex-direction: column; gap: 14px; }
.pc-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: linear-gradient(120deg, #0f172a, #1e3a8a 70%, #2563eb); color: #fff; }
.pc-doc-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); font-size: 1.3rem; flex: 0 0 auto; }
.pc-doc { flex: 1 1 260px; min-width: 0; }
.pc-kicker { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; font-weight: 700; }
.pc-title { font-family: var(--font-head); font-size: 1.35rem; font-weight: 800; margin: 0; }
.pc-sub { font-size: .85rem; opacity: .9; }
.pc-head .badge { background: rgba(255, 255, 255, .18) !important; color: #fff !important; }
.pc-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pc-head .btn-outline-primary, .pc-head .btn-outline-secondary { color: #fff; border-color: rgba(255, 255, 255, .45); }
.pc-head .btn-outline-primary:hover, .pc-head .btn-outline-secondary:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.pc-head .pc-saved, .pc-head .pc-saved .text-success { color: #bbf7d0 !important; }
.pc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 380px); gap: 14px; align-items: start; }
.pc-col { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-sm); min-width: 0; }
.pc-col-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pc-col-head h2 { font-size: 1rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 8px; }
.pc-col-head h2 small { font-weight: 500; color: var(--text-muted); font-size: .76rem; }
.pc-step { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; color: #fff; font-size: .88rem; }
.pc-step-print { background: #2563eb; } .pc-step-send { background: #7c3aed; } .pc-step-share { background: #0f766e; }
.pc-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pc-controls .form-select { width: auto; max-width: 260px; }
.pc-preview { position: relative; background: #e2e8f0; border-radius: 12px; max-height: 72vh; min-height: 240px; overflow: auto; }
[data-bs-theme="dark"] .pc-preview { background: #0b1226; }
.pc-stage { position: relative; margin: 0 auto; overflow: hidden; }
.pc-stage iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: transparent; }
.pc-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; background: rgba(226, 232, 240, .75); font-size: .85rem; color: #334155; border-radius: 12px; }
.pc-loading[hidden] { display: none; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.pc-note { font-size: .76rem; color: var(--text-muted); margin: 8px 2px 0; }
.pc-share { display: flex; flex-direction: column; gap: 10px; }
.pc-to { padding: 10px; border-radius: 12px; background: var(--surface-2); }
.pc-svc { border-radius: 14px; padding: 10px 12px; border: 1px solid var(--border); background: var(--surface); }
.pc-svc-h { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.pc-svc-h strong { display: block; font-size: .9rem; }
.pc-svc-h span { display: block; font-size: .74rem; color: var(--text-muted); }
.pc-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; font-size: 1rem; }
.pc-svc-link .pc-ic { background: #0f172a; } .pc-svc-wa .pc-ic { background: #25d366; } .pc-svc-mail .pc-ic { background: #2563eb; } .pc-svc-sms .pc-ic { background: #7c3aed; } .pc-svc-done .pc-ic { background: #16a34a; }
.pc-svc-wa { border-color: #bbf7d0; background: linear-gradient(180deg, #f0fdf4, var(--surface) 55%); }
.pc-svc-mail { border-color: #bfdbfe; background: linear-gradient(180deg, #eff6ff, var(--surface) 55%); }
.pc-svc-sms { border-color: #ddd6fe; background: linear-gradient(180deg, #f5f3ff, var(--surface) 55%); }
.pc-svc-done { border-color: #bbf7d0; }
[data-bs-theme="dark"] .pc-svc-wa, [data-bs-theme="dark"] .pc-svc-mail, [data-bs-theme="dark"] .pc-svc-sms { background: var(--surface); }
.pc-svc-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.btn-wa { background: #25d366; border-color: #25d366; color: #052e16; font-weight: 700; } .btn-wa:hover, .btn-wa:focus { background: #1ebe5b; border-color: #1ebe5b; color: #052e16; }
.btn-mail { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 700; } .btn-mail:hover, .btn-mail:focus { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.btn-sms { background: #7c3aed; border-color: #7c3aed; color: #fff; font-weight: 700; } .btn-sms:hover, .btn-sms:focus { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.pc-link-make { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pc-link-meta { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.pc-qr { background: #fff; padding: 6px; border-radius: 8px; border: 1px solid var(--border); flex: 0 0 auto; }
.pc-qr img, .pc-qr canvas { width: 112px !important; height: 112px !important; display: block; }
.pc-center-btn { box-shadow: 0 4px 12px rgba(37, 99, 235, .3); }
.rec-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.rec-actions > form, .rec-actions > .dropdown { margin: 0; }
.rec-actions .btn { font-weight: 600; }
.pt-quick { padding: 2px 8px; }
@media (max-width: 1399.98px) {
  .pc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pc-share { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .pc-share > .pc-col-head, .pc-share > .pc-to, .pc-share > .pc-note { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) { .pc-grid { grid-template-columns: minmax(0, 1fr); } .pc-preview { max-height: 60vh; } }
.erp-popup.pc-full .modal-dialog { max-width: none; margin: 0; width: 100%; height: 100%; }
.erp-popup.pc-full .modal-content { height: 100%; border-radius: 0; }
.erp-popup.pc-full .modal-body { height: 100%; }
.erp-popup.pc-full .erp-popup-frame { height: calc(100vh - 56px); }

/* Template gallery */
.ptg { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.ptg-nav { position: sticky; top: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 8px; }
.ptg-navh { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px 4px; }
.ptg-navi { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: .88rem; white-space: nowrap; }
.ptg-navi i { width: 18px; text-align: center; color: var(--text-muted); }
.ptg-navi em { margin-left: auto; font-style: normal; font-size: .72rem; background: var(--chip-bg); border-radius: 999px; padding: 1px 8px; color: var(--text-muted); }
.ptg-navi:hover { background: var(--hover-bg); color: var(--text); }
.ptg-navi.on { background: var(--blue); color: #fff; } .ptg-navi.on i, .ptg-navi.on em { color: #fff; } .ptg-navi.on em { background: rgba(255, 255, 255, .22); }
.ptg-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.ptg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ptg-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; }
.ptg-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .14); }
.ptg-card.used { border-color: var(--blue); }
.ptg-thumb { position: relative; display: block; aspect-ratio: 210 / 297; background: #e2e8f0; overflow: hidden; }
.ptg-thumb iframe { position: absolute; left: 0; top: 0; width: 794px; height: 1123px; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.ptg-edit { position: absolute; left: 10px; right: 10px; bottom: 10px; text-align: center; background: rgba(15, 23, 42, .86); color: #fff; border-radius: 10px; padding: 6px; font-size: .8rem; font-weight: 600; opacity: 0; transition: opacity .15s; }
.ptg-thumb:hover .ptg-edit, .ptg-thumb:focus-visible .ptg-edit { opacity: 1; }
.ptg-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ptg-name { font-weight: 800; font-family: var(--font-head); }
.ptg-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.ptg-desc { font-size: .78rem; color: var(--text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ptg-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.ptg-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; }
.ptg-tips > div { display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.ptg-tips i { grid-row: span 2; color: var(--blue); font-size: 1.1rem; margin-top: 3px; }
.ptg-tips span { font-size: .8rem; color: var(--text-muted); }
.ptg-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.ptg-design { text-align: left; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px; background: var(--surface); color: var(--text); }
.ptg-design strong { display: block; } .ptg-design span { display: block; font-size: .76rem; color: var(--text-muted); }
.ptg-design.on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--focus-ring); }
@media (max-width: 991.98px) { .ptg { grid-template-columns: minmax(0, 1fr); } .ptg-nav { position: static; display: flex; overflow-x: auto; gap: 4px; } .ptg-navh { display: none; } }

/* Template builder */
body.ptd-page .content-panel { padding: 0; overflow: hidden; }
.ptd { display: flex; flex-direction: column; height: calc(100vh - 84px); min-height: 560px; }
body.embed .ptd { height: 100vh; }
.ptd-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.ptd-name { display: flex; flex-direction: column; min-width: 180px; flex: 1 1 220px; }
.ptd-name .form-control { font-weight: 700; border-color: transparent; background: transparent; padding-left: 4px; }
.ptd-name .form-control:hover, .ptd-name .form-control:focus { border-color: var(--border); background: var(--surface); }
.ptd-type { font-size: .72rem; color: var(--text-muted); padding-left: 5px; }
.ptd-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ptd-record { max-width: 230px; }
.ptd-unsaved { box-shadow: 0 0 0 3px rgba(245, 158, 11, .45); }
.ptd-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 272px minmax(0, 1fr) 320px; }
.ptd-left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--surface); }
.ptd-tabs .nav-link { font-size: .8rem; padding: 8px 4px; }
.ptd-scroll { overflow-y: auto; min-height: 0; }
.ptd-left .tab-content { flex: 1; padding: 10px 12px 18px; }
.ptd-right { border-left: 1px solid var(--border); background: var(--surface); padding: 12px 14px 24px; }
.ptd-canvas { position: relative; overflow: auto; background: #cbd5e1; padding: 12px; }
[data-bs-theme="dark"] .ptd-canvas { background: #0b1226; }
.ptd-stage { position: relative; margin: 0 auto; }
.ptd-stage iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; visibility: hidden; pointer-events: none; z-index: 0; background: transparent; }
.ptd-stage iframe.on { visibility: visible; pointer-events: auto; z-index: 1; }
.ptd-status { position: sticky; top: 0; z-index: 3; margin: -4px auto 6px; width: max-content; max-width: 100%; font-size: .75rem; background: rgba(15, 23, 42, .85); color: #fff; padding: 3px 10px; border-radius: 999px; }
.ptd-status.bad { background: #b91c1c; }
.ptd-status[hidden] { display: none; }
.ptd-help { font-size: .76rem; color: var(--text-muted); margin-bottom: 8px; }
.ptd-gh { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 12px 0 6px; }
.ptd-pal { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ptd-palb { display: flex; gap: 6px; align-items: center; text-align: left; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 10px; padding: 7px 8px; font-size: .76rem; line-height: 1.2; }
.ptd-palb i { color: var(--blue); width: 16px; text-align: center; }
.ptd-palb:hover { border-color: var(--blue); background: var(--hover-bg); }
.ptd-palf i { color: #7c3aed; }
.ptd-pagelist { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 4px; }
.ptd-pagelist li { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.ptd-pagelist li.on { border-color: var(--blue); box-shadow: 0 0 0 2px var(--focus-ring); }
.ptd-pg { flex: 1; text-align: left; border: 0; background: transparent; color: var(--text); padding: 6px 8px; min-width: 0; }
.ptd-pg strong { display: block; font-size: .82rem; } .ptd-pg span { display: block; font-size: .7rem; color: var(--text-muted); }
.ptd-mini { display: flex; } .ptd-mini .btn { padding: 2px 4px; font-size: .75rem; }
.ptd-outline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.ptd-outline li { display: flex; align-items: center; gap: 2px; border: 1px solid transparent; border-radius: 8px; }
.ptd-outline li.on { border-color: var(--blue); background: var(--hover-bg); }
.ptd-outline li.over { border-top: 2px solid var(--blue); }
.ptd-outline li.drag { opacity: .4; }
.ptd-outline .ptd-empty { font-size: .78rem; color: var(--text-muted); padding: 6px; }
.ptd-grip { cursor: grab; color: var(--text-muted); padding: 0 4px; font-size: .75rem; }
.ptd-ol { flex: 1; display: flex; gap: 6px; align-items: center; border: 0; background: transparent; color: var(--text); padding: 5px 6px; font-size: .8rem; text-align: left; min-width: 0; }
.ptd-ol i { color: var(--blue); width: 16px; text-align: center; }
.ptd-ol span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptd-ol em { font-style: normal; font-size: .68rem; background: var(--chip-bg); border-radius: 6px; padding: 0 5px; color: var(--text-muted); }
.ptd-ol em.pad { background: #fef3c7; color: #92400e; }
.ptd-none { text-align: center; color: var(--text-muted); padding: 30px 6px; }
.ptd-none > i { font-size: 1.8rem; color: var(--blue); margin-bottom: 8px; }
.ptd-ph1 { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ptd-ph1 i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--blue); color: #fff; }
.ptd-ph1 strong { font-size: .95rem; } .ptd-ph1 span { font-size: .72rem; color: var(--text-muted); margin-left: auto; }
.ptd-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ptd-acts select { width: auto; flex: 1; min-width: 120px; }
.ptd-sh { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.ptd-f { margin-bottom: 8px; }
.ptd-l { display: block; font-size: .76rem; font-weight: 600; margin-bottom: 3px; }
.ptd-hint { font-size: .72rem; color: var(--text-muted); margin-top: 3px; }
.ptd-sw { font-size: .8rem; margin-bottom: 6px; }
.ptd-xy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.ptd-spans { display: flex; flex-wrap: wrap; gap: 3px; }
.ptd-spans .btn { padding: 1px 6px; font-size: .72rem; }
.ptd-colors { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ptd-swc, .ptd-sw0 { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border); padding: 0; }
.ptd-sw0 { background: var(--surface); color: var(--text-muted); font-size: .7rem; }
.ptd-swc.on, .ptd-sw0.on, .ptd-cc.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--blue); }
.ptd-cc { width: 30px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: none; }
.ptd-ph summary { font-size: .72rem; color: var(--blue); cursor: pointer; margin-top: 3px; }
.ptd-chips, .mt-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ptd-chip { border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--text); border-radius: 6px; padding: 1px 6px; font-size: .7rem; font-family: ui-monospace, Consolas, monospace; }
.ptd-chip:hover { border-color: var(--blue); }
.ptd-list { display: flex; flex-direction: column; gap: 3px; }
.ptd-li { display: flex; gap: 4px; align-items: center; }
.ptd-li .form-check-input { margin: 0; flex: 0 0 auto; }
.ptd-li.off .form-control { opacity: .5; }
.ptd-li .ptd-w { width: 64px; flex: 0 0 auto; }
.ptd-li .btn { padding: 0 4px; }
.ptd-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.ptd-preset { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); }
.ptd-cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ptd-cl { display: flex; gap: 6px; align-items: center; font-size: .74rem; }
.ptd-cl input { width: 30px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; }
.ptd-assetctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ptd-assetctl img { height: 44px; max-width: 120px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.ptd-noimg { font-size: .75rem; color: var(--text-muted); }
.ptd-assetsctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ptd-thumb { position: relative; } .ptd-thumb img { height: 48px; width: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.ptd-thumb .btn-close { position: absolute; top: -6px; right: -6px; background-color: #fff; border-radius: 50%; padding: 4px; font-size: .5rem; }
.ptd-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.ptd-asset { border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: var(--surface); text-align: center; color: var(--text); }
.ptd-asset img { width: 100%; height: 90px; object-fit: contain; background: #f8fafc; border-radius: 6px; }
.ptd-asset span { display: block; font-size: .72rem; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptd-asset:hover { border-color: var(--blue); }
@media (max-width: 1199.98px) { .ptd-body { grid-template-columns: 240px minmax(0, 1fr); } .ptd-right { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); max-height: 45vh; } }
@media (max-width: 767.98px) { .ptd { height: auto; } .ptd-body { grid-template-columns: minmax(0, 1fr); } .ptd-left, .ptd-right { max-height: none; } .ptd-canvas { min-height: 70vh; } }

/* Document forms: customer first and highlighted, aligned dates, working company badge */
.f14-party { position: relative; padding: 14px 16px 12px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--blue) 35%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, var(--surface)), var(--surface) 70%); }
.f14-party > .form-label { font-size: .95rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.f14-party > .form-label::before { content: "\f007"; font-family: "Font Awesome 6 Free"; font-weight: 900; width: 28px; height: 28px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--blue); color: #fff; font-size: .8rem; }
.f14-party .form-select:not(.cpk-native), .f14-party .cpk-input { font-size: 1.05rem; padding-top: .6rem; padding-bottom: .6rem; }
.f14-lead { margin-top: 8px; }
.f14-lead summary { font-size: .8rem; color: var(--text-muted); cursor: pointer; }
.f14-dates { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.f14-date .form-label { font-size: .8rem; font-weight: 700; }
.f14-date .form-text { display: none; }
@media (max-width: 575.98px) { .f14-dates { grid-template-columns: minmax(0, 1fr); } }
.f14-co-line { margin-bottom: -6px; }
.f14-co-line .f14-co { margin-left: 0; display: inline-block; }
.f14-co { margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--text-muted); background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
/* Customer picker (prefix cpk- — “cc-” belongs to the customer centre) */
.cpk { position: relative; }
.cpk-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; left: 0; bottom: 0; }
.cpk-input { padding-left: 2.3rem; padding-right: 2.3rem; }
.cpk-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.cpk-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--text-muted); padding: 4px 8px; border-radius: 6px; }
.cpk-clear:hover { background: var(--hover-bg); color: var(--text); }
.cpk-clear[hidden] { display: none; }
.cpk-list { position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, .18); padding: 4px; }
.cpk-list[hidden] { display: none; }
.cpk-opt { padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.cpk-opt strong { display: block; font-size: .92rem; }
.cpk-opt span { display: block; font-size: .76rem; color: var(--text-muted); }
.cpk-opt.on, .cpk-opt:hover { background: var(--hover-bg); }
.cpk-add { color: var(--blue); font-weight: 700; border-top: 1px dashed var(--border); margin-top: 2px; }
.cpk-empty { padding: 8px 10px; font-size: .82rem; color: var(--text-muted); }
.cpk-info { font-size: .78rem; color: var(--text-muted); margin-top: 4px; min-height: 1em; }

/* Message templates */
.mt { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.mt-nav { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 6px; position: sticky; top: 8px; }
.mt-navi { display: block; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--text); }
.mt-navi strong { display: block; font-size: .86rem; } .mt-navi span { display: block; font-size: .72rem; color: var(--text-muted); }
.mt-navi:hover { background: var(--hover-bg); color: var(--text); }
.mt-navi.on { background: var(--blue); color: #fff; } .mt-navi.on span { color: rgba(255, 255, 255, .8); }
.mt-card { border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; background: var(--surface); margin-bottom: 12px; }
.mt-card-h { display: flex; gap: 8px; align-items: center; font-weight: 700; margin-bottom: 6px; }
.mt-card-h i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.mt-wa .mt-card-h i { background: #25d366; } .mt-mail .mt-card-h i { background: #2563eb; } .mt-sms .mt-card-h i { background: #7c3aed; }
.mt-side { position: sticky; top: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.mt-sh { font-size: .74rem; font-weight: 700; }
.mt-bubble { background: #dcf8c6; color: #111b21; border-radius: 12px 12px 12px 2px; padding: 10px 12px; white-space: pre-wrap; font-size: .86rem; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); margin-top: 6px; min-height: 40px; }
.mt-mailprev { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 6px; font-size: .84rem; }
.mt-pre { white-space: pre-wrap; margin-top: 6px; }
@media (max-width: 991.98px) { .mt { grid-template-columns: minmax(0, 1fr); } .mt-nav, .mt-side { position: static; } }

/* ---------------------------------------------------------- Release 1.4.1: attach the PDF */
.pc-attach { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--border); color: var(--text-muted); background: transparent; border-radius: 999px; font-weight: 600; padding: 3px 11px; }
.pc-attach:hover { color: var(--text); border-color: var(--text-muted); }
.pc-attach.on { border-style: solid; border-color: color-mix(in srgb, var(--green) 55%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent); color: color-mix(in srgb, var(--green) 75%, var(--text)); }
.pc-attach.on i { transform: rotate(-20deg); }
.pc-attach i { transition: transform .2s ease; }
.pc-attach-note { font-size: .72rem; color: var(--text-muted); margin-top: 5px; min-height: 0; }
.pc-attach-note:empty { display: none; }
.mt-card-h .mt-attach { font-weight: 500; font-size: .82rem; }
.mt-card-h .mt-attach i { width: auto; height: auto; display: inline; background: none !important; color: var(--text-muted); }
.mt-card-h .mt-attach .form-check-input:checked + .form-check-label i { color: var(--green); }

/* ---------------------------------------------------------- Release 1.4.1: customer centre */
/* Stat cards in the narrow right column: two per row up to 1400px, values wrap instead of “LK…”. */
.cc-stats .stat-card .st-v { white-space: normal; overflow-wrap: anywhere; font-size: clamp(1.02rem, 1.25vw, 1.32rem); }
@media (min-width: 992px) and (max-width: 1399.98px) { .cc-stats > .col-lg-3 { flex: 0 0 auto; width: 50%; } }
.cc-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--surface-2); }
.cc-quick-l { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; }
.cc-quick-l i { color: var(--orange); }
.cc-rep-menu { width: min(460px, calc(100vw - 32px)); padding: 8px; border-radius: 14px; max-height: min(78vh, 640px); overflow: auto; }
.cc-rep-title { font-weight: 700; font-size: .86rem; padding: 4px 8px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.cc-rep-title span { display: block; font-weight: 400; font-size: .74rem; color: var(--text-muted); }
.cc-rep-item { padding: 6px; border-radius: 10px; }
.cc-rep-item:hover { background: var(--hover-bg); }
.cc-rep-h { display: flex; gap: 10px; align-items: flex-start; color: var(--text); text-decoration: none; }
a.cc-rep-h:hover { color: var(--text); }
.cc-rep-h strong { display: block; font-size: .86rem; }
.cc-rep-h small { display: block; color: var(--text-muted); font-size: .74rem; line-height: 1.3; }
.cc-rep-ic { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.cc-rep-periods { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0 40px; }
.cc-chip { font-size: .74rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); text-decoration: none; background: var(--surface); transition: background .15s, border-color .15s, color .15s; }
.cc-chip:hover, .cc-chip:focus-visible { background: var(--blue); border-color: var(--blue); color: #fff; }
.cc-rep-custom { border-top: 1px solid var(--border); margin-top: 6px; padding: 8px 6px 2px; }
.cc-rep-custom .form-select, .cc-rep-custom .form-control { width: auto; flex: 1 1 120px; }
.cc-send .modal-header { gap: 10px; }
.cc-send-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #25d366, #128c7e); flex: 0 0 38px; }
.cc-out-sum { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.cc-out-sum [data-cc-outtotal] { font-size: 1.15rem; }
.cc-inv-head { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; }
.cc-inv-list { border: 1px solid var(--border); border-radius: 12px; max-height: 240px; overflow: auto; }
.cc-inv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "c n b" "c d b"; column-gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--border); cursor: pointer; margin: 0; }
.cc-inv:last-child { border-bottom: 0; }
.cc-inv:hover { background: var(--hover-bg); }
.cc-inv input { grid-area: c; align-self: center; margin: 0; }
.cc-inv-no { grid-area: n; font-weight: 600; font-size: .86rem; }
.cc-inv-no small { color: var(--text-muted); font-weight: 400; }
.cc-inv-d { grid-area: d; font-size: .74rem; color: var(--text-muted); }
.cc-inv-b { grid-area: b; align-self: center; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-inv.od .cc-inv-d strong, .cc-inv.od .cc-inv-b { color: var(--red); }
.cc-how { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cc-how-opt { margin: 0; cursor: pointer; }
.cc-how-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cc-how-opt span { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i t" "i s"; column-gap: 10px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 12px; transition: border-color .15s, background .15s, box-shadow .15s; }
.cc-how-opt i { grid-area: i; font-size: 1.2rem; color: var(--text-muted); align-self: center; }
.cc-how-opt strong { grid-area: t; font-size: .86rem; }
.cc-how-opt small { grid-area: s; color: var(--text-muted); font-size: .74rem; }
.cc-how-opt input:checked + span { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.cc-how-opt input:checked + span i { color: var(--blue); }
.cc-how-opt input:focus-visible + span { box-shadow: var(--focus); }
.cc-opts { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; }
.cc-status { font-size: .8rem; color: var(--text-muted); margin-top: 8px; min-height: 1.2em; }
.cc-status-ok { color: var(--green); }
.cc-status-err { color: var(--red); }
@media (max-width: 575.98px) { .cc-how { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- Release 1.4.1: report centre */
.rc-blue { --tone: var(--blue); } .rc-green { --tone: var(--green); } .rc-orange { --tone: var(--orange); } .rc-purple { --tone: var(--purple); }
.rc-teal { --tone: var(--teal); } .rc-indigo { --tone: var(--indigo); } .rc-slate { --tone: #475569; } .rc-pink { --tone: #db2777; }
[data-bs-theme="dark"] .rc-slate { --tone: #94a3b8; } [data-bs-theme="dark"] .rc-pink { --tone: #f472b6; }
.rc-top { position: sticky; top: 0; z-index: 5; display: grid; gap: 10px; padding: 12px; margin-bottom: 14px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.rc-search { position: relative; }
.rc-search > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.rc-search input { width: 100%; height: 48px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); padding: 0 52px 0 44px; font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
.rc-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
.rc-search kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); font-size: .75rem; box-shadow: none; }
.rc-pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.rc-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: .84rem; font-weight: 600; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.rc-pill i { color: var(--tone, var(--blue)); }
.rc-pill span { font-size: .72rem; font-weight: 700; color: var(--text-muted); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; }
.rc-pill:hover { border-color: var(--tone, var(--blue)); transform: translateY(-1px); }
.rc-pill.on { background: var(--tone, var(--blue)); border-color: var(--tone, var(--blue)); color: #fff; }
.rc-pill.on i, .rc-pill.on span { color: #fff; } .rc-pill.on span { background: rgba(255, 255, 255, .22); }
.rc-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; }
.rc-qbox { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.rc-qh { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: .82rem; font-weight: 500; }
.rc-chip i { color: var(--blue); } .rc-chip small { color: var(--text-muted); }
.rc-chip:hover { border-color: var(--blue); color: var(--text); background: color-mix(in srgb, var(--blue) 8%, var(--surface)); }
.rc-tip { font-size: .84rem; color: var(--text-muted); margin: 0 0 16px 4px; display: flex; gap: 8px; align-items: center; }
.rc-cat { margin-bottom: 22px; }
.rc-cat-h { display: flex; gap: 12px; align-items: center; margin: 0 2px 10px; }
.rc-cat-h h2 { font-size: 1.08rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.rc-cat-h p { margin: 0; font-size: .82rem; color: var(--text-muted); }
.rc-cat-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--tone), color-mix(in srgb, var(--tone) 65%, #000)); box-shadow: 0 6px 16px color-mix(in srgb, var(--tone) 30%, transparent); }
.rc-count { font-size: .72rem; font-weight: 700; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); border-radius: 999px; padding: 2px 8px; }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rc-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; overflow: hidden; }
.rc-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tone); opacity: .85; }
.rc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--tone) 45%, var(--border)); }
.rc-card-main { display: flex; gap: 12px; padding: 14px 14px 8px; color: var(--text); text-decoration: none; flex: 1 1 auto; }
.rc-card-main:hover { color: var(--text); }
.rc-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.02rem; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); transition: transform .2s ease; }
.rc-card:hover .rc-ic { transform: scale(1.08) rotate(-4deg); }
.rc-card-t strong { display: block; font-size: .92rem; line-height: 1.3; }
.rc-card-t small { display: block; color: var(--text-muted); font-size: .78rem; margin-top: 3px; line-height: 1.35; }
.rc-card-f { display: flex; align-items: center; gap: 6px; padding: 0 10px 10px 14px; }
.rc-tags { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; min-width: 0; }
.rc-tag { font-size: .68rem; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; display: inline-flex; align-items: center; gap: 4px; }
.rc-act, .rc-star { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-muted); text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.rc-act:hover { background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone); }
.rc-star:hover { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.rc-star.on { color: var(--amber); }
.rc-star.on i { animation: rc-pop .35s ease; }
@keyframes rc-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.rc-star-btn.on { background: color-mix(in srgb, var(--amber) 14%, transparent); }
.rp-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rp-presets-l { font-size: .76rem; font-weight: 700; color: var(--text-muted); margin-right: 4px; }
.rp-chip { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 4px 11px; font-size: .8rem; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.rp-chip:hover { border-color: var(--blue); color: var(--text); }
.rp-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.rp-clear { color: var(--text-muted); }
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.rp-kpi { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow-sm); min-width: 0; }
.rp-kpi strong { display: block; font-family: var(--font-head); font-size: 1.12rem; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rp-kpi span:not(.rp-kpi-ic) { display: block; font-size: .74rem; color: var(--text-muted); }
.rp-kpi-ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
.rp-kpi-money { background: color-mix(in srgb, var(--green) 13%, transparent); color: var(--green); }
.rp-table-wrap { max-height: 68vh; }
.rp-table-wrap .report-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--border); }
.rp-table-wrap .report-table tfoot td { position: sticky; bottom: 0; background: var(--surface-2); box-shadow: inset 0 1px 0 var(--border); }
@media (prefers-reduced-motion: reduce) { .rc-card, .rc-ic, .rc-pill { transition: none; } .rc-card:hover { transform: none; } .rc-star.on i { animation: none; } }
.rc-top > * { min-width: 0; }

/* ---------------------------------------------------------- Release 1.4.1: polish */
/* Medium screens (768–1100px): the user's name gives way to the avatar so the top bar never runs past the screen edge. */
@media (max-width: 1099.98px) { .topbar .user-meta { display: none; } .topbar .search { flex: 1 1 44px; } .topbar .search input::placeholder { color: transparent; } }
.top-actions { min-width: 0; }
.topbar .search { min-width: 0; }
/* Hover text in day and night mode: page-header outline buttons kept their white surface on hover while Bootstrap
   turned the text white (it vanished in day mode) — they now get the hover surface with readable text. */
.page-head .actions .btn-outline-secondary:hover, .page-head .actions .btn-outline-secondary:focus-visible, .page-head .actions .btn-outline-secondary:active, .page-head .actions .btn-outline-secondary.show { background: var(--hover-bg); color: var(--text); border-color: color-mix(in srgb, var(--text-muted) 55%, var(--border)); }
/* Lists and menus hover in the app's own colours (night mode had Bootstrap's grey). */
.list-group { --bs-list-group-action-hover-bg: var(--hover-bg); --bs-list-group-action-hover-color: var(--text); --bs-list-group-action-active-bg: var(--hover-bg); --bs-list-group-action-active-color: var(--text); }
[data-bs-theme="dark"] .list-group { --bs-list-group-bg: var(--surface); --bs-list-group-color: var(--text); --bs-list-group-border-color: var(--border); }
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-border-color: var(--border); --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: var(--hover-bg); --bs-dropdown-link-hover-color: #fff; --bs-dropdown-header-color: var(--text-muted); --bs-dropdown-divider-bg: var(--border); }
.company-card:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); }
/* Sticky table headers (Bootstrap layer 1020) sat above drop-down menus (1000) and cut through them. */
.table > thead.sticky-top { z-index: 3; }
/* Widget links turned dark blue on hover — hard to read on the night background. */
[data-bs-theme="dark"] .wg-leader a:hover, [data-bs-theme="dark"] .wg-list a:hover, [data-bs-theme="dark"] .wg-legend a:hover, [data-bs-theme="dark"] .wg-timeline a:hover, [data-bs-theme="dark"] .wg-more:hover, [data-bs-theme="dark"] .wg-more:focus { color: #93c5fd; }

/* Smooth navigation: progress bar while the next page loads, the page eases in, anchors scroll smoothly. */
.nav-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 3000; pointer-events: none; opacity: 0; background: linear-gradient(90deg, #38bdf8, #6366f1, #a855f7); box-shadow: 0 0 10px rgba(99, 102, 241, .6); border-radius: 0 3px 3px 0; }
.nav-progress.run { opacity: 1; animation: nav-run 8s cubic-bezier(.1, .7, .2, 1) forwards; }
.nav-progress.done { opacity: 0; width: 100%; transition: opacity .3s ease .1s; }
@keyframes nav-run { 0% { width: 0; } 20% { width: 45%; } 60% { width: 78%; } 100% { width: 94%; } }
/* A fade only (no transform, nothing kept after it ends) so pop-up windows inside the page still sit on the screen. */
.v141 .content-panel { animation: page-in .28s ease-out; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
html:has(body.v141) { scroll-behavior: smooth; }

/* CEO key figures — the same card family as the dashboard cards */
.kpx { display: flex; flex-direction: column; padding: 14px 16px 12px; text-decoration: none; color: var(--text); border: 1px solid var(--border); position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.kpx::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--wt), color-mix(in srgb, var(--wt) 35%, transparent)); }
.kpx:hover { color: var(--text); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15, 23, 42, .12); border-color: color-mix(in srgb, var(--wt) 40%, var(--border)); }
.kpx-top { display: flex; align-items: center; gap: 10px; }
.kpx-label { font: 600 .9rem/1.2 var(--font-head); flex: 1 1 auto; min-width: 0; }
.kpx-chip { font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--wt-soft); color: var(--wt); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.kpx-chip.good { background: #e6f6ec; color: #15803d; } .kpx-chip.warn { background: #fef3c7; color: #92400e; } .kpx-chip.bad { background: #fdeaea; color: #b91c1c; }
[data-bs-theme="dark"] .kpx-chip.good { background: #12321f; color: #86efac; } [data-bs-theme="dark"] .kpx-chip.warn { background: #3a2a0b; color: #fcd34d; } [data-bs-theme="dark"] .kpx-chip.bad { background: #3d1515; color: #fca5a5; }
.kpx-value { font: 700 2.2rem/1 var(--font-head); margin: 12px 0 2px; font-variant-numeric: tabular-nums; color: var(--wt); }
.kpx .wg-spark { height: 40px; margin-top: 4px; }
.kpx .wg-sub { margin-top: 2px; }
.kpx-meter { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 14px 0 8px; }
.kpx-meter span { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, var(--wt), color-mix(in srgb, var(--wt) 60%, #fff)); }
/* 1.4.2: key-figure cards in one row are the same height; the chart / meter and the note sit at the bottom */
.kpx > .kpx-value { margin-bottom: auto; }
/* 1.4.2: phones show two figure tiles per row — the icon goes above the figure so amounts are not cut to "LKR …" */
@media (max-width: 575.98px) {
  .stat-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .stat-card .st-ico { width: 34px; height: 34px; flex: 0 0 34px; font-size: .9rem; border-radius: 10px; }
  .stat-card .st-v { font-size: 1.12rem; white-space: normal; overflow-wrap: anywhere; }
}
/* 1.4.2: in a narrow card the status chip moves under the title (the title was squeezed to a letter per line) */
.kpx-top { flex-wrap: wrap; row-gap: 6px; }
.kpx-label { flex: 1 1 6rem; overflow-wrap: normal; word-break: normal; }

/* Cards draw themselves when they come into view (ui-v141.js adds .in-view). */
.v141 .wg .wg-spark .l, .v141 .kpx .wg-spark .l { stroke-dasharray: 3000; stroke-dashoffset: 0; }
.v141 .wg:not(.in-view) .wg-spark .l, .v141 .kpx:not(.in-view) .wg-spark .l { stroke-dashoffset: 3000; }
.v141 .wg .wg-spark .l, .v141 .kpx .wg-spark .l { transition: stroke-dashoffset 1.1s ease-out; }
.v141 .kpx:not(.in-view) .kpx-meter span, .v141 .wg:not(.in-view) .wg-meter span { width: 0 !important; }
.v141 .kpx-meter span, .v141 .wg-meter span { transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.wg-gauge-wrap { display: flex; align-items: center; gap: 14px; }
.wg-gauge { width: 150px; flex: 0 0 150px; height: auto; overflow: visible; }
.wg-gauge .t { fill: none; stroke: var(--surface-2); stroke-width: 11; stroke-linecap: round; }
[data-bs-theme="dark"] .wg-gauge .t { stroke: #1d2a50; }
.wg-gauge .v { fill: none; stroke: var(--wt); stroke-width: 11; stroke-linecap: round; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--wt) 35%, transparent)); }
.v141 .wg:not(.in-view) .wg-gauge .v { stroke-dasharray: 0 400px !important; }
.v141 .wg-gauge .v { transition: stroke-dasharray 1.2s cubic-bezier(.2, .8, .2, 1); }
.wg-gauge .gv { font: 700 19px var(--font-head); fill: var(--text); } .wg-gauge .gl { font: 500 8.5px var(--font-ui); fill: var(--text-muted); }
.wg-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wg-goal-h { display: flex; justify-content: space-between; font-size: .86rem; font-weight: 600; }
.wg-goal-h strong { color: var(--wt); }
.wg-goal-bar { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 5px 0 3px; }
.wg-goal-bar span { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--wt) 70%, #fff), var(--wt)); position: relative; overflow: hidden; }
.wg-goal-bar span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-100%); animation: wg-shine 2.6s ease-in-out 1.2s infinite; }
@keyframes wg-shine { to { transform: translateX(100%); } }
.v141 .wg:not(.in-view) .wg-goal-bar span { width: 0 !important; }
.v141 .wg-goal-bar span { transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.wg-live { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); border-radius: 999px; padding: 2px 9px; margin-bottom: 8px; }
.wg-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 60%, transparent); animation: wg-ping 1.6s ease-out infinite; }
@keyframes wg-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.wg-refreshed { animation: wg-flash 1s ease; }
@keyframes wg-flash { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 35%, transparent); } 100% { box-shadow: none; } }
.wg-pulse { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.wg-pulse-i { background: var(--wt-soft); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; position: relative; overflow: hidden; }
.wg-pulse-i .wg-ico { width: 30px; height: 30px; flex-basis: 30px; background: var(--surface); margin-bottom: 4px; }
.wg-pulse-i strong { font: 700 1.6rem/1 var(--font-head); color: var(--wt); font-variant-numeric: tabular-nums; }
.wg-pulse-i span:not(.wg-ico) { font-size: .8rem; font-weight: 600; }
.wg-pulse-i small { font-size: .72rem; color: var(--text-muted); }
.v141 .wg:not(.in-view) .wg-pulse-i { opacity: 0; transform: translateY(8px); }
.v141 .wg-pulse-i { transition: opacity .45s ease, transform .45s ease; }
.v141 .wg-pulse-i:nth-child(2) { transition-delay: .07s; } .v141 .wg-pulse-i:nth-child(3) { transition-delay: .14s; } .v141 .wg-pulse-i:nth-child(4) { transition-delay: .21s; } .v141 .wg-pulse-i:nth-child(5) { transition-delay: .28s; }
.wg-ticker { height: 236px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.wg-tick { list-style: none; margin: 0; padding: 0; animation: wg-scroll 40s linear infinite; }
.wg-ticker:hover .wg-tick, .wg-ticker:focus-within .wg-tick { animation-play-state: paused; }
.wg-tick li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: .84rem; }
.wg-tick a { color: var(--text); text-decoration: none; } .wg-tick a:hover { text-decoration: underline; }
.wg-tick-t { flex: 0 0 auto; font-weight: 700; font-size: .74rem; color: var(--wt); background: var(--wt-soft); border-radius: 8px; padding: 2px 6px; height: fit-content; font-variant-numeric: tabular-nums; }
@keyframes wg-scroll { from { transform: translateY(0); } to { transform: translateY(-100%); } }
.wg-heat { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.wg-heat .hm, .wg-heat-legend .hm { aspect-ratio: 1; border-radius: 3px; background: var(--surface-2); }
.wg-heat .hm.l1, .wg-heat-legend .l1 { background: color-mix(in srgb, var(--wt) 25%, var(--surface-2)); }
.wg-heat .hm.l2, .wg-heat-legend .l2 { background: color-mix(in srgb, var(--wt) 50%, var(--surface-2)); }
.wg-heat .hm.l3, .wg-heat-legend .l3 { background: color-mix(in srgb, var(--wt) 75%, var(--surface-2)); }
.wg-heat .hm.l4, .wg-heat-legend .l4 { background: var(--wt); }
.wg-heat .hm.lx { background: transparent; border: 1px dashed var(--border); }
.v141 .wg:not(.in-view) .wg-heat .hm { transform: scale(.2); opacity: 0; }
.v141 .wg-heat .hm { transition: transform .35s ease, opacity .35s ease; transition-delay: calc(var(--i) * 6ms); }
.wg-heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: .68rem; color: var(--text-muted); margin-top: 6px; }
.wg-heat-legend .hm { width: 10px; display: inline-block; }
.v141 .wg-anim .wg-donut .s { transition: stroke-dashoffset 1s ease, opacity .6s ease; }
.v141 .wg:not(.in-view) .wg-anim .wg-donut .s { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .wg-tick { animation: none; } .wg-ticker { height: auto; max-height: 260px; overflow: auto; } .wg-tick[aria-hidden="true"] { display: none; } .nav-progress { display: none; } }

/* Date & time panel (top bar clock) */
.hc { width: 330px; max-width: 94vw; overflow: hidden; border-radius: 16px; border: 1px solid var(--border); }
/* 1.4.2: one solid colour — the system's navy (top bar, dark cards, Key Business Flows) */
.hc-head { padding: 16px 16px 12px; color: #fff; background: #0f1c52; }
.hc-time { font-family: var(--font-head); font-size: 2.3rem; font-weight: 700; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hc-date { font-size: .92rem; font-weight: 600; margin-top: 6px; }
.hc-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; }
.hc-meta span { font-size: .7rem; background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 2px 8px; display: inline-flex; gap: 5px; align-items: center; }
.hc-cal { padding: 10px 14px 6px; }
.hc-cal-h { font-size: .78rem; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.hc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.hc-wd { font-size: .66rem; font-weight: 700; color: var(--text-muted); padding-bottom: 2px; }
.hc-wd.we { color: color-mix(in srgb, var(--red) 70%, var(--text-muted)); }
.hc-d { position: relative; font-size: .78rem; line-height: 28px; height: 28px; border-radius: 8px; color: var(--text); font-variant-numeric: tabular-nums; }
.hc-d.past { color: var(--text-muted); opacity: .7; }
.hc-d.we { color: color-mix(in srgb, var(--red) 75%, var(--text)); }
.hc-d.hol { background: color-mix(in srgb, var(--amber) 18%, transparent); font-weight: 700; cursor: help; }
.hc-d.hol::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--amber); }
.hc-d.today { background: var(--blue); color: #fff; font-weight: 800; opacity: 1; box-shadow: 0 4px 12px color-mix(in srgb, var(--blue) 40%, transparent); }
.hc-hol { padding: 6px 14px 8px; border-top: 1px solid var(--border); }
.hc-sub { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 4px 0 6px; }
.hc-hi { display: flex; gap: 10px; align-items: center; padding: 5px 0; }
.hc-tile { width: 40px; flex: 0 0 40px; text-align: center; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.hc-tile strong { display: block; font-size: .95rem; line-height: 1.5; }
.hc-tile small { display: block; font-size: .6rem; font-weight: 700; text-transform: uppercase; color: #fff; background: var(--red); line-height: 1.6; }
.hc-hn { flex: 1 1 auto; min-width: 0; font-size: .84rem; }
.hc-hn span { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-hn small { display: block; color: var(--text-muted); font-size: .72rem; }
.hc-links { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); }
.hc-links a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; font-size: .74rem; font-weight: 600; color: var(--text); text-decoration: none; }
.hc-links a + a { border-left: 1px solid var(--border); }
.hc-links a i { color: var(--blue); font-size: 1rem; }
.hc-links a:hover { background: var(--hover-bg); color: var(--text); }

/* Calculator */
.calc2 { width: 300px; max-width: 94vw; padding: 12px !important; border-radius: 16px; border: 1px solid var(--border); }
.calc2-screen { border-radius: 12px; padding: 10px 12px 8px; background: #0f1c52; color: #fff; margin-bottom: 10px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .3); }
.calc2-out.calc-pending, .calc-menu [data-calc-out].calc-pending { opacity: .55; }
.calc2-input { width: 100%; border: 0; background: transparent; color: #cbd5e1; text-align: right; font: 500 1rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; outline: none; padding: 0; }
.calc2-input::placeholder { color: #64748b; }
.calc2-out { text-align: right; font-family: var(--font-head); font-size: 1.8rem; font-weight: 700; line-height: 1.2; min-height: 2.2rem; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc2-out.text-danger { color: #fca5a5 !important; font-size: 1.1rem; }
.calc2-keys { gap: 6px; }
.calc2-k { height: 46px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 1.1rem; font-weight: 600; transition: transform .08s ease, background .15s ease, box-shadow .15s ease; }
.calc2-k:hover { background: var(--hover-bg); }
.calc2-k:active { transform: scale(.94); }
.calc2-k.k-num { background: var(--surface); }
.calc2-k.k-op { background: color-mix(in srgb, var(--blue) 12%, var(--surface)); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 25%, var(--border)); font-size: 1.25rem; }
.calc2-k.k-fn { color: var(--text-muted); }
.calc2-k[data-calc-key="C"] { color: var(--red); }
.calc2-k.k-eq { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(22, 163, 74, .35); font-size: 1.3rem; }
.calc2-hist { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.calc2-h { display: flex; justify-content: space-between; gap: 8px; border: 0; background: transparent; padding: 3px 6px; border-radius: 8px; font-size: .78rem; color: var(--text-muted); text-align: left; }
.calc2-h strong { color: var(--text); font-variant-numeric: tabular-nums; }
.calc2-h:hover { background: var(--hover-bg); }
.calc2-hint { font-size: .7rem; color: var(--text-muted); margin-top: 8px; text-align: center; }

/* ===================================================================== Release 1.4.2 */

/* Dashboard bar — one calm line: tabs in three groups (scrolls sideways when there is no room), filter and layout on the right */
.dbar { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); position: relative; z-index: 5; }
.dbar-nav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; }
.dbar-scroll { position: relative; flex: 0 1 auto; min-width: 0; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; --fl: 0px; --fr: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.dbar-scroll::-webkit-scrollbar { display: none; }
.dbar-scroll.fade-l { --fl: 32px; }
.dbar-scroll.fade-r { --fr: 32px; }
.dbar-group { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.dbar-sep { flex: 0 0 1px; height: 22px; margin: 0 7px; background: var(--border); }
.dbar-more { flex: 0 0 auto; }
.dbar-more-btn { border: 0; background: transparent; }
.dbar-more-btn[aria-expanded="true"] { background: var(--hover-bg); color: var(--text); }
.dbar-more-menu { min-width: 220px; padding: 6px; border-radius: 12px; }
.dbar-more-item { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 7px 10px; font-size: .86rem; }
.dbar-more-item i { width: 18px; text-align: center; color: var(--text-muted); }
.dbar-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; color: var(--text-muted); font-size: .85rem; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.dbar-tab i { font-size: .85em; opacity: .65; }
.dbar-tab:hover { background: var(--hover-bg); color: var(--text); }
.dbar-tab.active { background: color-mix(in srgb, var(--bs-primary) 11%, var(--surface)); color: var(--bs-primary); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-primary) 24%, transparent); }
.dbar-tab.active i { opacity: 1; }
.dbar-tab:focus-visible, .dbar-btn:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.dbar-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding-left: 8px; border-left: 1px solid var(--border); }
.dbar-layout { display: flex; align-items: center; gap: 6px; }
.dbar-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .82rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.dbar-btn:hover, .dbar-btn[aria-expanded="true"] { border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--border)); color: var(--bs-primary); background: var(--surface); }
.dbar-btn > i:first-child { opacity: .75; }
.dbar-btn.dbar-ico { width: 34px; padding: 0; justify-content: center; }
.dbar-btn.is-on { border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--border)); color: var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 7%, var(--surface)); }
.dbar-caret { font-size: .62rem; opacity: .6; }
.dbar-co-l { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.dash-cofilter.dcf-menu { display: none; margin: 0; min-width: 290px; padding: 8px; border-radius: 14px; }
.dash-cofilter.dcf-menu.show { display: block; }
.dcf-head { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 4px 8px 6px; }
.dcf-opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; cursor: pointer; font-size: .86rem; margin: 0; }
.dcf-opt:hover { background: var(--hover-bg); }
.dcf-opt input { accent-color: var(--bs-primary); width: 16px; height: 16px; flex: 0 0 auto; }
.dcf-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); margin-top: 6px; padding: 8px 6px 2px; }
.dcf-foot .dcf-note { margin: 0; flex: 1 1 auto; }
.dl-editing .dbar { border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 12%, transparent); }
@media (max-width: 767.98px) {
  .dbar { flex-wrap: wrap; }
  .dbar-nav { flex-basis: 100%; }
  .dbar-tools { width: 100%; border-left: 0; padding: 4px 0 0; border-top: 1px solid var(--border); justify-content: flex-end; flex-wrap: wrap; }
  .dbar-tab { padding: 7px 10px; }
}
@media print { .dbar { display: none !important; } }

/* Card size menu, drag-to-resize handle and heights (Edit layout) */
.dl-tools:has(.show) { z-index: 40; }
.dl-size-menu { width: 310px; padding: 10px 12px 12px; border-radius: 14px; }
.dl-sz-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px; }
.dl-sz-now { text-transform: none; letter-spacing: 0; font-size: .78rem; color: var(--bs-primary); }
.dl-sz-cols { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.dl-sz-cols button { position: relative; height: 32px; padding: 0 0 5px; border: 1px solid var(--border); background: var(--surface); border-radius: 7px; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.dl-sz-cols button::after { content: ""; position: absolute; left: 3px; bottom: 3px; height: 3px; border-radius: 2px; width: calc((100% - 6px) * var(--f, 1)); background: color-mix(in srgb, var(--bs-primary) 45%, transparent); }
.dl-sz-cols button:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.dl-sz-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dl-sz-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 4px 10px; font-size: .78rem; color: var(--text); }
.dl-sz-chip:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.dl-sz-cols button.on, .dl-sz-chip.on { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.dl-sz-cols button.on::after { background: rgba(255, 255, 255, .75); }
.dl-sz-note { font-size: .72rem; color: var(--text-muted); margin: 8px 0 0; line-height: 1.35; }
.dl-tools .dl-size > .btn { padding: 2px 7px; line-height: 1.2; }
.dl-tools-v142 { top: -15px; padding: 2px; gap: 2px; border-radius: 9px; }
.dl-tools-v142 .btn, .dl-tools-v142 .dl-size > .btn { padding: 1px 6px; font-size: .8rem; }
.dl-tools-v142 .dl-grip { padding: 0 4px; }
.dl-resize, .dl-size-tip { display: none; }
@media (min-width: 1200px) {
  .dl-editing .dl-grid > [data-dl-widget] > .dl-resize { display: block; position: absolute; top: 50%; right: calc(var(--bs-gutter-x) * .5 - 8px); transform: translateY(-50%); width: 16px; height: 60px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); cursor: ew-resize; z-index: 7; touch-action: none; }
  .dl-resize::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 4px; right: 4px; border-left: 2px solid var(--text-muted); border-right: 2px solid var(--text-muted); opacity: .55; }
  .dl-resize:hover, [data-dl-resizing] > .dl-resize { border-color: var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 10%, var(--surface)); }
}
[data-dl-resizing] > .dl-size-tip { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 8; background: var(--bs-primary); color: #fff; font-weight: 700; font-size: .95rem; padding: 6px 14px; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .25); pointer-events: none; white-space: nowrap; }
.dl-editing .dl-grid > [data-dl-resizing] > :not(.dl-ui) { outline-style: solid; outline-color: var(--bs-primary); }
[data-dl-resizing] { user-select: none; }
.dl-grid > .dl-fill { flex-grow: 1; }
.dl-grid > [data-dl-h] { align-self: flex-start; }
.dl-grid > [data-dl-h="sm"] { --dl-h: 280px; }
.dl-grid > [data-dl-h="md"] { --dl-h: 400px; }
.dl-grid > [data-dl-h="lg"] { --dl-h: 560px; }
.dl-grid > [data-dl-h] > :not(.dl-ui) { max-height: var(--dl-h); overflow-y: auto; scrollbar-width: thin; }
.dl-grid > [data-dl-h] > .card:not(.dl-ui):has(> .card-body, > .wg-body) { overflow: hidden; }
.dl-grid > [data-dl-h] > .card > .card-body, .dl-grid > [data-dl-h] > .card > .wg-body { overflow-y: auto; min-height: 0; scrollbar-width: thin; }

/* Key Business Flows — customise, compact view, among the cards */
.flows-head { display: flex; align-items: center; gap: 8px; margin: 0 4px 14px; }
.flows-head h2 { margin: 0; flex: 1 1 auto; min-width: 0; }
.flows-gear { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #c7d2fe; display: inline-flex; align-items: center; justify-content: center; opacity: .8; transition: opacity .15s ease, background-color .15s ease; }
.flows-gear:hover, .flows-gear:focus-visible { opacity: 1; background: rgba(255, 255, 255, .16); color: #fff; }
.flows-edit { display: none; }
.dl-editing .flows-edit { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 4px 12px; }
.flows-edit .btn { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: .76rem; padding: 3px 9px; }
.flows-edit .btn:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.dl-editing aside.flows-v142:not(.flows-in-grid) { outline: 2px dashed color-mix(in srgb, var(--bs-primary) 60%, transparent); outline-offset: 2px; }
.flow-step .fh .ft { min-width: 0; }
.flows-v142 .flow-step .fh { flex-wrap: wrap; row-gap: 4px; }
.flows-v142 .flow-step .fh .ft { flex: 1 1 7rem; }
.flows-compact .flow-arrow { display: none; }
.flows-compact .flow-step { margin-bottom: 6px; }
.flows-compact .flow-step .fh { padding: 6px 8px; font-size: .9rem; }
.flows-cfg { color: #c7d2fe; }
.flows-cfg:hover { color: #fff; }
.flows-in-grid { container-type: inline-size; height: 100%; }
@container (min-width: 640px) {
  .flows-in-grid .flows-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; align-items: stretch; }
  .flows-in-grid .flow-arrow { display: none; }
  .flows-in-grid .flow-step { margin: 0; }
}
.fl-legend { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px; }
.fl-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fl-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; margin: 0; }
.fl-choice:has(input:checked) { border-color: var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 7%, var(--surface)); }
.fl-choice input { margin-top: 3px; flex: 0 0 auto; }
.fl-steps { display: grid; gap: 4px; }
.fl-step { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; margin: 0; }
.fl-step:hover { background: var(--hover-bg); }
.fl-step-ico { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bs-primary) 12%, var(--surface)); color: var(--bs-primary); flex: 0 0 auto; font-size: .8rem; }
@media (max-width: 575.98px) { .fl-choices { grid-template-columns: 1fr; } }

/* The guide: setup guide, feature list, what's new, test-run checklist */
.gd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; position: sticky; top: 8px; z-index: 4; }
.gd-tabs { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 auto; min-width: 0; }
.gd-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); font-size: .88rem; font-weight: 500; white-space: nowrap; }
.gd-tab i { opacity: .7; }
.gd-tab:hover { background: var(--hover-bg); color: var(--text); }
.gd-tab.active { background: color-mix(in srgb, var(--bs-primary) 11%, var(--surface)); color: var(--bs-primary); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-primary) 24%, transparent); }
.gd-tab.active i { opacity: 1; }
.gd-cnt { font-size: .7rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.gd-hits { font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--bs-primary); color: #fff; }
.gd-tab.gd-nohit { opacity: .5; }
.gd-tab.gd-nohit .gd-hits { background: var(--text-muted); }
.gd-find { display: flex; align-items: center; gap: 8px; flex: 0 1 300px; min-width: 200px; margin: 0; padding: 0 12px; height: 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-muted); }
.gd-find:focus-within { border-color: var(--bs-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 15%, transparent); }
.gd-find input { border: 0; outline: 0; background: transparent; color: var(--text); flex: 1 1 auto; min-width: 0; font-size: .88rem; }
.gd-toc { position: sticky; top: 76px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 8px; max-height: calc(100vh - 170px); overflow-y: auto; }
.gd-toc-h { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 2px 8px 6px; }
.gd-toc ol { list-style: none; margin: 0; padding: 0; }
.gd-toc a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; color: var(--text); text-decoration: none; font-size: .84rem; line-height: 1.25; }
.gd-toc a:hover { background: var(--hover-bg); }
.gd-no { flex: 0 0 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; background: var(--surface-2); color: var(--text-muted); }
.gd-lead { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; margin-bottom: 14px; border-radius: 14px; background: color-mix(in srgb, var(--bs-primary) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bs-primary) 20%, var(--border)); font-size: .9rem; }
.gd-lead-ico { flex: 0 0 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--bs-primary); color: #fff; }
.gd-step { padding: 16px 18px; margin-bottom: 14px; scroll-margin-top: 80px; }
.gd-step-h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.gd-step-h h2 { font-size: 1.08rem; margin: 0; }
.gd-step-no { flex: 0 0 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; background: var(--bs-primary); color: #fff; }
.gd-step-ico { flex: 0 0 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bs-primary) 12%, var(--surface)); color: var(--bs-primary); }
.gd-who { font-size: .78rem; color: var(--text-muted); }
.gd-live { font-size: .76rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.gd-live.is-ok { background: #e6f6ec; color: #15803d; }
.gd-live.is-todo { background: #fef3c7; color: #92400e; }
[data-bs-theme="dark"] .gd-live.is-ok { background: #12321f; color: #86efac; }
[data-bs-theme="dark"] .gd-live.is-todo { background: #3a2a0b; color: #fcd34d; }
.gd-intro { color: var(--text-muted); margin: 0 0 8px; }
.gd-actions { margin: 0 0 10px; padding-left: 1.2rem; }
.gd-actions li { margin: 4px 0; line-height: 1.45; }
.gd-links { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-sub { color: var(--text-muted); margin-bottom: 12px; }
.gd-areas { columns: 2 440px; column-gap: 14px; }
.gd-area { break-inside: avoid; margin-bottom: 14px; padding: 14px 16px; display: inline-block; width: 100%; }
.gd-area-h { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.gd-area-h h2 { font-size: 1.05rem; margin: 2px 0 2px; }
.gd-area-h p { font-size: .82rem; color: var(--text-muted); margin: 0; }
.gd-feats { list-style: none; margin: 0; padding: 0; }
.gd-feats li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--border); font-size: .86rem; line-height: 1.4; }
.gd-feats strong { display: block; font-weight: 600; }
.gd-feats span { color: var(--text-muted); }
.gd-open { margin-left: auto; flex: 0 0 auto; font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap; padding-top: 1px; }
.gd-time { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.gd-time::before { content: ""; position: absolute; left: 34px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.gd-rel { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; position: relative; }
.gd-ver { flex: 0 0 62px; text-align: center; font-weight: 700; font-size: .82rem; padding: 5px 0; border-radius: 999px; background: var(--surface); border: 2px solid var(--border); position: relative; z-index: 1; }
.gd-rel.is-new .gd-ver { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.gd-rel-b { flex: 1 1 auto; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; }
.gd-rel.is-new .gd-rel-b { border-color: color-mix(in srgb, var(--bs-primary) 40%, var(--border)); box-shadow: 0 6px 20px color-mix(in srgb, var(--bs-primary) 10%, transparent); }
.gd-rel-b h2 { font-size: 1rem; margin: 0 0 6px; }
.gd-rel-b ul { margin: 0; padding-left: 1.1rem; font-size: .87rem; }
.gd-rel-b li { margin: 3px 0; }
.gd-tr-top { padding: 14px 16px; margin-bottom: 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; }
.gd-tr-prog { grid-column: 1 / -1; }
.gd-tr-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--surface-2); margin-bottom: 8px; }
.gd-tr-bar .ok { background: var(--green); transition: width .3s ease; }
.gd-tr-bar .bad { background: var(--red); transition: width .3s ease; }
.gd-tr-nums { font-size: .9rem; }
.gd-tr-how { margin: 0; font-size: .84rem; color: var(--text-muted); }
.gd-tr-sec { padding: 12px 16px 6px; margin-bottom: 14px; }
.gd-tr-h { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.gd-tr-h h2 { font-size: 1.02rem; margin: 0; flex: 1 1 auto; }
.gd-tr-count { font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.gd-tr-count.is-done { background: #e6f6ec; color: #15803d; }
[data-bs-theme="dark"] .gd-tr-count.is-done { background: #12321f; color: #86efac; }
.gd-tr-list { margin: 0; padding: 0; list-style: none; counter-reset: tr; }
.gd-tr-item { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-top: 1px solid var(--border); font-size: .88rem; line-height: 1.4; border-radius: 6px; }
.gd-tr-item::before { counter-increment: tr; content: counter(tr); flex: 0 0 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; background: var(--surface-2); color: var(--text-muted); }
.gd-tr-item.is-ok::before { content: "\2713"; background: var(--green); color: #fff; }
.gd-tr-item.is-bad::before { content: "!"; background: var(--red); color: #fff; }
.gd-tr-text { flex: 1 1 auto; min-width: 0; }
.gd-tr-item.is-ok > .gd-tr-text { color: var(--text-muted); }
.gd-tr-item.is-bad { background: color-mix(in srgb, var(--red) 6%, transparent); }
.gd-tr-btns { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.gd-tr-b { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: .78rem; font-weight: 600; }
.gd-tr-b:hover { color: var(--text); border-color: color-mix(in srgb, var(--text-muted) 50%, var(--border)); }
.gd-tr-b.b-ok[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.gd-tr-b.b-bad[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.gd-none { color: var(--text-muted); text-align: center; padding: 24px 0; }
@media (max-width: 767.98px) {
  .gd-bar { position: static; }
  .gd-find { flex: 1 1 100%; }
  .gd-tr-top { grid-template-columns: 1fr; }
  .gd-tr-item { flex-wrap: wrap; }
  .gd-tr-text { flex-basis: calc(100% - 40px); }
  .gd-tr-btns { margin-left: 34px; }
}
@media print {
  .gd-bar, .gd-toc, .gd-tr-acts, .gd-links, .gd-open, .page-head .btn { display: none !important; }
  .gd .card, .gd-area, .gd-rel-b { box-shadow: none !important; break-inside: avoid; }
  .gd-areas { columns: 2; }
  .gd-tr-b[aria-pressed="false"] { display: none; }
  .gd-tr-b { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gd-tr-bar span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gd .col-lg-9 { width: 100%; }
}


/* =====================================================================================
   Release 1.5 (body.v15 — after update 020)
   ===================================================================================== */
/* ---- Black dark mode: shell, menu and surfaces are black / near-black instead of navy */
[data-bs-theme="dark"] body.v15 {
  --navy-950: #000; --navy-900: #000; --navy-850: #070707; --navy-800: #0d0d0d; --navy-700: #171717;
  --app-bg: #0a0a0a; --surface: #121212; --surface-2: #0e0e0e; --border: #262626; --text: #f2f2f2; --text-muted: #a3a3a3;
  --chip-bg: #181818; --chip-border: #2e2e2e; --track-bg: #262626; --hover-bg: #1c1c1c;
  --flow-body-bg: #111; --flow-body-fg: #e5e5e5; --flow-link: #93c5fd;
  --sidebar-text: #d4d4d4; --sidebar-muted: #8a8a8a;
  --bs-body-bg: #000; --bs-body-color: #f2f2f2; --bs-tertiary-bg: #0e0e0e; --bs-border-color: #2e2e2e; --bs-secondary-color: #b3b3b3;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
  background: #000;
}
[data-bs-theme="dark"] body.v15 .sidebar { background: #000; }
[data-bs-theme="dark"] body.v15 .content-panel { border: 1px solid #161616; }
[data-bs-theme="dark"] body.v15 .card-dark { background: #111; border-color: #262626; }
[data-bs-theme="dark"] body.v15 .flows { background: #0d0d0d; border-color: #262626; }
[data-bs-theme="dark"] body.v15 .hc-head { background: #111; border-bottom: 1px solid #262626; }
[data-bs-theme="dark"] body.v15 .board-card { background: #141414; }
[data-bs-theme="dark"] body.v15 .alert-light { background: #141414; }
[data-bs-theme="dark"] body.v15 .pc-preview, [data-bs-theme="dark"] body.v15 .ptd-canvas { background: #050505; }
[data-bs-theme="dark"] body.v15 .badge-soft-secondary { background: #1f1f1f; color: #d4d4d4; }
[data-bs-theme="dark"] body.v15 .wg-ring .t, [data-bs-theme="dark"] body.v15 .wg-gauge .t { stroke: #262626; }
[data-bs-theme="dark"] body.v15 .page-kind { --pk-soft: color-mix(in srgb, var(--pk) 22%, #000); }
[data-bs-theme="dark"] body.v15 .form-control, [data-bs-theme="dark"] body.v15 .form-select { background-color: #0d0d0d; border-color: #333; }
[data-bs-theme="dark"] body.v15 .btn-outline-secondary { color: #d4d4d4; border-color: #404040; }
[data-bs-theme="dark"] body.v15 .btn-outline-secondary:hover { background: #262626; color: #fff; }
[data-bs-theme="dark"] body.v15 .erp-popup .modal-content, [data-bs-theme="dark"] body.v15 .modal-content { background: #121212; }

/* ---- My work: the hero card is one solid colour of the system theme */
body.v15 .mw-hero { background: #0f1c52; box-shadow: 0 10px 26px rgba(15, 28, 82, .28); }
[data-bs-theme="dark"] body.v15 .mw-hero { background: #111; border: 1px solid #262626; box-shadow: none; }

/* ---- Task names: no underline, black (light) / white (dark), a small glowing green dot */
body.v15 .task-name, body.v15 a.task-title, body.v15 .mw-task a.task-name { color: #000; text-decoration: none; }
[data-bs-theme="dark"] body.v15 .task-name, [data-bs-theme="dark"] body.v15 a.task-title, [data-bs-theme="dark"] body.v15 .mw-task a.task-name { color: #fff; }
body.v15 a.task-name:hover, body.v15 a.task-name:focus-visible, body.v15 a.task-title:hover { color: var(--bs-primary); text-decoration: none; }
[data-bs-theme="dark"] body.v15 a.task-name:hover, [data-bs-theme="dark"] body.v15 a.task-title:hover { color: #93c5fd; }
body.v15 .task-table tr.task-done a.task-title, body.v15 .task-table tr.task-skipped a.task-title { color: var(--text-muted); }
@keyframes v15glow { 0%, 100% { box-shadow: 0 0 3px 1px rgba(34, 197, 94, .5); } 50% { box-shadow: 0 0 10px 3px rgba(34, 197, 94, .9); } }
body.v15 .task-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: 8px; vertical-align: .08em; flex: 0 0 auto; animation: v15glow 2.2s ease-in-out infinite; }
body.v15 .task-dot.is-done { background: #94a3b8; animation: none; box-shadow: none; }
body.v15 .mw-task .mw-dot { background: #22c55e; animation: v15glow 2.2s ease-in-out infinite; }
body.v15 tr[data-open="0"] .mw-dot { background: #94a3b8; animation: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { body.v15 .task-dot, body.v15 .mw-task .mw-dot { animation: none; box-shadow: 0 0 6px 1px rgba(34, 197, 94, .7); } }
.task-parent-link { display: block; font-size: .72rem; color: var(--text-muted); text-decoration: none; margin-bottom: 1px; }
.task-parent-link:hover { color: var(--bs-primary); }
.task-kids { font-weight: 600; }
.task-parent-note { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--purple) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--purple) 25%, var(--border)); font-size: .86rem; }
.subtask-bar { height: 6px; background: var(--track-bg); }
.subtask-bar span { display: block; height: 100%; background: #16a34a; transition: width .4s ease; }
.subtasks .subtask-done .task-name { color: var(--text-muted) !important; }

/* ---- Quick dates and times are small buttons */
body.v15 .quickdates { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
body.v15 .quickdates .btn-link, .sca-quick button { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600; line-height: 1.3; padding: 2px 9px !important; margin: 0 !important; border: 1px solid var(--chip-border); border-radius: 999px; background: var(--chip-bg); color: var(--text); text-decoration: none; }
body.v15 .quickdates .btn-link:hover, body.v15 .quickdates .btn-link:focus-visible, .sca-quick button:hover, .sca-quick button:focus-visible { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.sca-quick { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cpk-new { margin-top: 6px; }

/* ---- Service call form: troubleshooting areas as tabs */
.sca { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: var(--surface-2); }
.sca-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 10px; }
.sca-err { display: block; color: var(--red); font-size: .84rem; font-weight: 600; }
.sca-err:empty { display: none; }
.sca-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sca-tab { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: .8rem; font-weight: 600; text-align: left; max-width: 260px; }
.sca-tab-a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sca-tab-t { font-size: .7rem; font-weight: 500; color: var(--text-muted); }
.sca-tab.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.sca-tab.active .sca-tab-t { color: rgba(255, 255, 255, .85); }
.sca-tab.is-empty:not(.active) { border-style: dashed; border-color: color-mix(in srgb, var(--orange) 60%, var(--border)); }
.sca-tab.sca-add { flex-direction: row; align-items: center; border-style: dashed; background: transparent; color: var(--bs-primary); }
.sca-tab.sca-add:hover { background: color-mix(in srgb, var(--bs-primary) 8%, transparent); }
.sca-pane { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.sca-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* ---- Service call page: the service-call flow */
.sc15-steps { list-style: none; margin: 0; padding: 14px 16px 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.sc15-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px 6px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: .76rem; }
.sc15-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--track-bg); color: var(--text-muted); font-size: .8rem; }
.sc15-t { font-weight: 700; line-height: 1.25; }
.sc15-n { color: var(--text-muted); font-weight: 600; }
.sc15-note { color: var(--text-muted); font-size: .7rem; line-height: 1.25; }
.sc15-step.is-done .sc15-dot { background: #16a34a; color: #fff; }
.sc15-step.is-active { border-color: var(--bs-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary) 25%, transparent); }
.sc15-step.is-active .sc15-dot { background: var(--bs-primary); color: #fff; }
.sc15-step.is-skipped { opacity: .55; }
.sc15-main { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface); }
.sc15-main.is-done { opacity: .8; }
.sc15-main-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sc15-areas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.sc15-areas li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.sc15-areas li.is-done { opacity: .7; }

/* ---- Top solutions card: two ranked lists */
.wg-split { display: grid; gap: 10px; }
.wg-split-h { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 2px 0 4px; }

/* ---- Finance desk, pay bills, petty cash book */
.fin-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fin-act { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-size: .86rem; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.fin-act:hover, .fin-act:focus-visible { transform: translateY(-1px); border-color: var(--bs-primary); color: var(--text); box-shadow: var(--shadow); }
.fin-act-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.fin-act-main { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.fin-act-main .fin-act-ic { background: rgba(255, 255, 255, .18); color: #fff; }
.fin-act-main:hover, .fin-act-main:focus-visible { color: #fff; }
.fin-wait { margin: 6px 0 10px; }
.fin-wait-h { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 4px; }
.fin-wait-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .84rem; }
.fin-wait-r:hover { background: var(--hover-bg); color: var(--text); }
.fin-meter { height: 6px; border-radius: 99px; background: var(--track-bg); overflow: hidden; }
.fin-meter span { display: block; height: 100%; border-radius: 99px; background: var(--teal); }
.fin-meter.is-low span { background: var(--orange); }
.fin-done { border-color: #16a34a; }
.fin-done-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #dcfce7; color: #16a34a; font-size: 1.3rem; flex: 0 0 44px; }
[data-bs-theme="dark"] .fin-done-ic { background: #12321f; color: #86efac; }
.fin-bills tbody tr:has([data-pb-check]:checked) { background: color-mix(in srgb, var(--green) 9%, transparent); }
.pc-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pc-box.is-on { border-color: var(--bs-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary) 25%, transparent); }
.pc-where + .pc-where { margin-top: 10px; }
.pc-where .fin-meter { margin: 3px 0 1px; }
@media print {
  .fin-acts, .pc-boxes, .pc-where, .no-print { display: none !important; }
  .pc-book { border: 0 !important; box-shadow: none !important; }
}

/* ---------------------------------------------------------------- Release 1.6: sign-in security */
.ai-red { background: #fee2e2; color: #b91c1c; }
[data-bs-theme="dark"] .ai-red { background: #3b1414; color: #fca5a5; }
.sec-rule { border-left: 4px solid var(--border); }
.sec-rule.sec-rule-on { border-left-color: #16a34a; }
.sec-rule.sec-rule-warn { border-left-color: #f59e0b; }
.sec-rule-text { flex: 1 1 300px; min-width: 0; }
.sec-wait-col { flex: 1 1 200px; min-width: 0; }
.sec-dev { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.sec-dev:last-child { border-bottom: 0; }
.sec-dev-blocked { background: color-mix(in srgb, #dc2626 6%, transparent); }
.sec-dev-name { max-width: 280px; border-color: transparent; background: transparent; padding-left: 4px; }
.sec-dev-name:hover, .sec-dev-name:focus { border-color: var(--border); background: var(--surface); }
.sec-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 600; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.sec-chip.sc-success { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.sec-chip.sc-info { background: #e0ecff; border-color: #c7dbff; color: #1d4ed8; }
.sec-chip.sc-danger { background: #fde4e4; border-color: #fecaca; color: #b91c1c; }
[data-bs-theme="dark"] .sec-chip.sc-success { background: #12321f; border-color: #1f5133; color: #86efac; }
[data-bs-theme="dark"] .sec-chip.sc-info { background: #132a55; border-color: #1f3d73; color: #93c5fd; }
[data-bs-theme="dark"] .sec-chip.sc-danger { background: #3b1414; border-color: #5c1f1f; color: #fca5a5; }
.sec-chip-btn { border: 0; background: transparent; color: inherit; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .7rem; opacity: .75; }
.sec-chip-btn:hover, .sec-chip-btn:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); }