/* ═══════════════════════════════════════════════════════════════
   Janaki Komerc — Declarations v2
   Color palette:
     Primary red:  #e74c3c / #c0392b
     Background:   linear-gradient(135deg,#f5f7fa,#c3cfe2)
     Navbar:       rgba(255,255,255,0.92)
     Success:      #0f9d58 / #27ae60
     Admin dark:   #1a2535
═══════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: #333;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ── Loading Overlay ────────────────────────────────────────────────────── */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(12, 18, 35, 0.94);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
.loading-overlay.active { opacity: 1; pointer-events: all; }
.loading-overlay.fade-out { opacity: 0; pointer-events: none; }

.loading-content { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.loading-letters { display: flex; gap: 2px; }
.ll {
  font-size: 3.6rem; font-weight: 900;
  color: #fff;
  display: inline-block;
  animation: jumpLetter 1.4s ease-in-out infinite;
  text-shadow: 0 0 30px rgba(231,76,60,0.6);
  letter-spacing: 2px;
}
.ll-1,.ll-5 { color: #e74c3c; }
.ll-1 { animation-delay: 0.00s; }
.ll-2 { animation-delay: 0.10s; }
.ll-3 { animation-delay: 0.20s; }
.ll-4 { animation-delay: 0.30s; }
.ll-5 { animation-delay: 0.40s; }
.ll-6 { animation-delay: 0.50s; }
@keyframes jumpLetter {
  0%,60%,100% { transform: translateY(0) scale(1); opacity:.7; }
  30%          { transform: translateY(-24px) scale(1.15); opacity:1; }
}
.loading-sub {
  font-size: 1.1rem; font-weight: 300; color: rgba(255,255,255,.55);
  letter-spacing: .25em; text-transform: uppercase;
}
.loading-bar {
  width: 180px; height: 3px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden;
}
.loading-bar-fill {
  height: 100%; width: 0; background: #e74c3c;
  animation: barFill 2s ease-in-out infinite;
}
@keyframes barFill { 0%{width:0;opacity:1} 60%{width:100%;opacity:1} 100%{width:100%;opacity:0} }

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 10px 24px;
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 500;
  gap: 16px;
  height: 64px;
}
.nav-left  { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-center{ flex:1; display:flex; justify-content:center; }
.nav-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.nav-back-btn {
  display: none;
  width: 36px; height: 36px;
  background: rgba(231,76,60,.08); border: 1px solid rgba(231,76,60,.2);
  border-radius: 8px; color: #e74c3c;
  align-items: center; justify-content: center;
  transition: all .2s ease;
}
.nav-back-btn.visible { display:flex; }
.nav-back-btn:hover { background: #e74c3c; color: #fff; }
.nav-back-btn ion-icon { font-size: 1.2em; }

.nav-logo-link { display:inline-flex; align-items:center; }
.nav-logo { height: 38px; width: auto; object-fit: contain; }
.nav-title { font-size: 1.3em; font-weight: 700; color: #333; white-space: nowrap; }
.center-logo { max-height: 38px; max-width: 140px; object-fit: contain; transition: transform .3s; }
.center-logo:hover { transform: scale(1.04); }

.btn-edit-mode {
  display: flex; align-items: center; gap: 6px;
  background: #3498db; color: #fff; border: none;
  padding: 9px 18px; border-radius: 8px; font-size:.9em; font-weight:600;
  transition: all .2s ease;
}
.btn-edit-mode:hover { background: #2980b9; transform:translateY(-1px); }
.btn-edit-mode.active { background: #e74c3c; }
.btn-edit-mode.active:hover { background: #c0392b; }

.btn-add-nav {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg,#e74c3c,#c0392b); color:#fff; border:none;
  padding: 9px 18px; border-radius: 8px; font-size:.9em; font-weight:600;
  transition: all .2s ease; box-shadow: 0 3px 10px rgba(231,76,60,.3);
}
.btn-add-nav:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(231,76,60,.4); }

.btn-admin-nav {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg,#1e3a5f,#2980b9); color:#fff; border:none;
  padding: 9px 18px; border-radius: 8px; font-size:.9em; font-weight:600;
  transition: all .2s ease;
}
.btn-admin-nav:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(41,128,185,.4); }

.nav-profile-btn {
  width: 40px; height: 40px;
  background: rgba(231,76,60,.08); border: 1px solid rgba(231,76,60,.2);
  border-radius: 50%; color: #e74c3c;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.nav-profile-btn ion-icon { font-size: 1.6em; }
.nav-profile-btn:hover { background:#e74c3c; color:#fff; transform:scale(1.05); }

/* ── Notification Bell ───────────────────────────────────────────────────── */
.notif-bell-wrap {
  position: relative;
}
.notif-bell-btn {
  position: relative;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background .15s;
  padding: 0;
}
.notif-bell-btn:hover { background: rgba(249,115,22,.1); }

/* Bell SVG — default small size in navbar */
.notif-bell-btn .notification-icon {
  width: 30px; height: 30px;
}
.notif-bell-btn .notification-icon svg {
  width: 100%; height: 100%; overflow: visible;
}

/* Only animate the ring/bell/waves when there are unread notifications */
.notif-bell-btn .bell-ring {
  fill: none;
  stroke: url(#bellGradient);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  transform-origin: center;
  animation: none;
}
.notif-bell-btn .bell-body {
  transform-origin: 32px 18px;
  animation: none;
}
.notif-bell-btn .wave-left,
.notif-bell-btn .wave-right {
  fill: none;
  stroke: #f97316;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
  animation: none;
}
/* Active (has unread) — trigger animations */
.notif-bell-btn.has-unread .bell-ring {
  animation:
    drawBellRing 1s ease forwards,
    rotateBellRing 1.2s ease,
    bellRingRepeat 4s 1.2s ease-in-out infinite;
}
.notif-bell-btn.has-unread .bell-body {
  animation: bellSwing 1.2s ease-in-out infinite;
  animation-delay: 1s;
}
.notif-bell-btn.has-unread .wave-left,
.notif-bell-btn.has-unread .wave-right {
  animation: wavePulse 1.2s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes drawBellRing {
  from { stroke-dashoffset: 176; }
  to   { stroke-dashoffset: 0; }
}
@keyframes rotateBellRing {
  0%   { transform: rotate(-90deg); opacity: .4; }
  100% { transform: rotate(270deg); opacity: 1; }
}
@keyframes bellRingRepeat {
  0%,90%,100% { stroke-dashoffset: 0; }
  45% { stroke-dashoffset: 44; }
}
@keyframes bellSwing {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(15deg); }
  30%  { transform: rotate(-12deg); }
  45%  { transform: rotate(10deg); }
  60%  { transform: rotate(-8deg); }
  75%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes wavePulse {
  0%,100% { opacity: 0; transform: scale(.8); }
  50%     { opacity: 1; transform: scale(1.05); }
}

/* Unread count badge */
.notif-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  background: #e74c3c; color: #fff;
  border-radius: 8px; font-size: .65em; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
  border: 2px solid #fff;
  pointer-events: none;
}

/* Dropdown panel */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 10px); right: -8px;
  width: 320px;
  background: #fff;
  border: 1.5px solid #eaecf0;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  z-index: 3000;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: fadeIn .15s ease;
}
.notif-dropdown.open { display: flex; }

.notif-dropdown-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px 10px;
  border-bottom: 1.5px solid #f0f2f5;
  flex-shrink: 0;
}
.notif-dropdown-title {
  font-size: .85em; font-weight: 800; color: #1a2535; letter-spacing: .3px;
}
.notif-mark-all-btn {
  font-size: .72em; font-weight: 700; color: #2980b9;
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  border-radius: 5px; transition: background .12s;
}
.notif-mark-all-btn:hover { background: #f0f6fc; }

.notif-list {
  max-height: 360px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #ddd #f8f9fb;
}
.notif-empty {
  padding: 28px 16px; text-align: center;
  font-size: .82em; color: #bbb; font-style: italic;
}

/* Individual notification item */
.notif-item {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 16px; border-bottom: 1px solid #f5f6fa;
  cursor: pointer; transition: background .12s;
  position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #f8f9fb; }
.notif-item.unread { background: #fff8f0; }
.notif-item.unread:hover { background: #fff3e5; }

.notif-item-icon {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1em;
}
.notif-icon-new      { background: rgba(41,128,185,.12); color: #2980b9; }
.notif-icon-paid     { background: rgba(39,174,96,.12);  color: #27ae60; }
.notif-icon-due      { background: rgba(230,126,34,.12); color: #e67e22; }
.notif-icon-overdue  { background: rgba(231,76,60,.12);  color: #e74c3c; }
.notif-icon-blocked  { background: rgba(139,0,0,.1);     color: #8b0000; }

.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
  font-size: .8em; font-weight: 700; color: #1a2535; margin-bottom: 2px;
}
.notif-item-msg {
  font-size: .74em; color: #888; line-height: 1.4;
}
.notif-item-time {
  font-size: .68em; color: #ccc; margin-top: 3px;
}
.notif-item-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #f97316; flex-shrink: 0; margin-top: 5px;
}
.notif-item:not(.unread) .notif-item-dot { opacity: 0; }

/* Eye (quick-view) button inside notification items */
.notif-item-actions {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.notif-eye-btn {
  background: none; border: none; cursor: pointer;
  color: #aab; font-size: .9em; padding: 2px 3px; border-radius: 5px;
  display: flex; align-items: center; line-height: 1;
  transition: color .12s, background .12s;
}
.notif-eye-btn:hover { color: #2980b9; background: rgba(41,128,185,.1); }

/* ── Custom invoice # form field ─────────────────────────────────────────── */
.inv-custom-id-hint { font-size:.75em; color:#aaa; font-weight:400; }
.inv-custom-id-wrap {
  display: flex; align-items: center; gap: 0;
}
.inv-custom-id-prefix {
  background: #f5f6fa; border: 1.5px solid #dde; border-right: none;
  border-radius: 8px 0 0 8px; padding: 0 10px; height: 38px;
  display: flex; align-items: center; font-size: .9em; color: #999;
  flex-shrink: 0;
}
.inv-custom-id-wrap .form-input {
  border-radius: 0 8px 8px 0;
}

/* ── User invoice quick-preview modal ────────────────────────────────────── */
.uinv-preview-box {
  width: min(420px, 92vw);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.uinv-preview-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1.5px solid #eaecf0;
}
.uinv-preview-title {
  font-size: 1em; font-weight: 800; color: #1a2535;
}
.uinv-preview-body {
  padding: 16px 20px;
  overflow-y: auto;
  max-height: 55vh;
}
.uinv-detail-table {
  width: 100%; border-collapse: collapse;
}
.uinv-detail-table tr + tr td { border-top: 1px solid #f5f6fa; }
.uinv-dl {
  padding: 8px 12px 8px 0; font-size: .78em; color: #999;
  font-weight: 600; white-space: nowrap; vertical-align: middle;
  width: 110px;
}
.uinv-dv {
  padding: 8px 0; font-size: .84em; color: #1a2535;
  font-weight: 600; vertical-align: middle;
}
.uinv-preview-footer {
  padding: 12px 20px; border-top: 1.5px solid #eaecf0;
  display: flex; justify-content: flex-end;
}
.uinv-print-btn {
  display: flex; align-items: center; gap: 6px;
  background: #2980b9; color: #fff; border: none;
  border-radius: 8px; padding: 8px 18px; font-size: .82em; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.uinv-print-btn:hover { background: #1c6ea4; }

/* Dark mode for preview modal */
body.dark .uinv-preview-box { background: #192338; }
body.dark .uinv-preview-hdr,
body.dark .uinv-preview-footer { border-color: #243052; }
body.dark .uinv-preview-title { color: #d4e0f5; }
body.dark .uinv-detail-table tr + tr td { border-color: #1e2e4a; }
body.dark .uinv-dl { color: #5e7aa0; }
body.dark .uinv-dv { color: #c8d8f0; }
body.dark .inv-custom-id-prefix { background: #1e2a3a; border-color: #2a3a5a; color: #5e7a9a; }



.panel { min-height: calc(100vh - 64px); }
.panel.hidden { display: none; }

@keyframes slideInRight {
  from { opacity:0; transform:translateX(50px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes slideInLeft {
  from { opacity:0; transform:translateX(-50px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.panel-anim-right { animation: slideInRight .35s cubic-bezier(.4,0,.2,1) both; }
.panel-anim-left  { animation: slideInLeft  .35s cubic-bezier(.4,0,.2,1) both; }
.panel-anim-fade  { animation: fadeIn .3s ease both; }

/* ── Container ──────────────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 36px auto; padding: 0 20px; }

/* ── Login Panel ────────────────────────────────────────────────────────── */
.login-outer {
  min-height: calc(100vh - 64px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.login-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08);
  width: 100%; max-width: 420px;
  overflow: hidden;
  animation: loginCardIn .5s cubic-bezier(.4,0,.2,1) both;
}
@keyframes loginCardIn {
  from { opacity:0; transform: translateY(30px) scale(.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.login-logo-area {
  background: linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);
  padding: 36px 32px 28px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.login-logo-circle {
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.login-logo-circle img { width: 52px; height: 52px; object-fit: contain; }
.login-title { color:#fff; font-size:1.6em; font-weight:800; }
.login-subtitle { color:rgba(255,255,255,.8); font-size:.9em; }
.login-form-area { padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.login-error {
  background: rgba(231,76,60,.08); border: 1px solid rgba(231,76,60,.3);
  color: #c0392b; padding: 10px 14px; border-radius: 8px;
  font-size: .9em; display: none;
}
.login-error.visible { display: block; animation: fadeIn .2s ease; }
.btn-login {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg,#e74c3c,#c0392b); color:#fff; border:none;
  padding: 14px 24px; border-radius: 10px; font-size:1em; font-weight:700;
  transition: all .2s ease; box-shadow: 0 4px 16px rgba(231,76,60,.35);
}
.btn-login:hover { transform:translateY(-2px); box-shadow: 0 8px 24px rgba(231,76,60,.45); }
.btn-login:active { transform:translateY(0); }

/* Remember-me row */
.remember-me-row {
  display: flex; align-items: center; gap: 9px;
  cursor: pointer; user-select: none;
}
.remember-me-row input[type="checkbox"] { display: none; }
.remember-me-check {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid #ddd; border-radius: 5px;
  background: #fff; transition: all .18s;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.remember-me-row input[type="checkbox"]:checked + .remember-me-check {
  background: #e74c3c; border-color: #e74c3c;
}
.remember-me-row input[type="checkbox"]:checked + .remember-me-check::after {
  content: ''; position: absolute;
  width: 10px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.remember-me-label { font-size: .83em; color: #888; font-weight: 500; }

/* ── Form elements ──────────────────────────────────────────────────────── */
.form-label { font-size:.85em; font-weight:600; color:#555; letter-spacing:.02em; display:block; margin-bottom:6px; }
.form-group { display:flex; flex-direction:column; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.req { color: #e74c3c; }

.input-wrap { position:relative; display:flex; align-items:center; }
.inp-icon { position:absolute; left:13px; font-size:1.1em; color:#aaa; pointer-events:none; z-index:1; }
.toggle-pw {
  position:absolute; right:12px;
  background:none; border:none; color:#aaa; font-size:1.1em;
  display:flex; align-items:center; transition:color .2s;
}
.toggle-pw:hover { color:#e74c3c; }

.form-input {
  width:100%; padding:11px 14px;
  border: 2px solid #e8e8e8; border-radius:10px;
  font-size:.95em; background:#fff; color:#333;
  transition: border-color .25s, box-shadow .25s;
  outline: none;
}
.input-wrap .form-input { padding-left: 40px; }
/* If toggle-pw is present but no inp-icon, don't add left padding */
.input-wrap:not(:has(.inp-icon)) .form-input { padding-left: 14px; }
.input-wrap .toggle-pw ~ .form-input,
.input-wrap .form-input:has(~ .toggle-pw) { padding-right: 40px; }
.form-input:hover { border-color: #ccc; }
.form-input:focus { border-color:#e74c3c; box-shadow:0 0 0 4px rgba(231,76,60,.12); }
.text-area { min-height:120px; resize:vertical; line-height:1.5; }
.text-area[readonly] { background:#f9f9f9; color:#666; cursor:default; }

select.form-input { cursor:pointer; appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23e74c3c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}

/* ── Controls Section ───────────────────────────────────────────────────── */
.controls-section {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: linear-gradient(135deg,#fff,#f8f9fa);
  padding: 20px 24px; border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  border: 1px solid rgba(231,76,60,.08);
  margin-bottom: 28px;
}
.search-container {
  flex:1; min-width:200px; position:relative; display:flex; align-items:center;
}
.search-input {
  width:100%; padding:12px 44px 12px 16px;
  border:2px solid #e8e8e8; border-radius:10px;
  font-size:.95em; background:#fff; color:#333;
  transition: all .25s; outline:none;
}
.search-input:focus { border-color:#e74c3c; box-shadow:0 0 0 4px rgba(231,76,60,.12); }
.search-container ion-icon {
  position:absolute; right:14px; font-size:1.3em; color:#bbb; pointer-events:none;
}
.search-input:focus ~ ion-icon { color:#e74c3c; }
.sort-container { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.sort-container label { font-weight:700; color:#555; font-size:.9em; }
.sort-select {
  padding:11px 36px 11px 14px; border:2px solid #e8e8e8; border-radius:10px;
  font-size:.9em; font-weight:600; cursor:pointer; background:#fff; outline:none;
  appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23e74c3c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 12px center;
  transition:all .2s;
}
.sort-select:focus { border-color:#e74c3c; box-shadow:0 0 0 4px rgba(231,76,60,.12); }

/* ── Cards Grid ─────────────────────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.groups-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.card {
  background: #fff; border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.07);
  overflow: hidden; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  animation: cardIn .4s cubic-bezier(.4,0,.2,1) both;
}
@keyframes cardIn {
  from { opacity:0; transform:translateY(20px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
.card-img-wrap {
  background: linear-gradient(135deg,#f8f9fa,#eef0f2);
  height: 140px; display:flex; align-items:center; justify-content:center;
  overflow: hidden;
  position: relative;
}
.card-img-wrap img {
  max-width:100%; max-height:100%; width:100%; height:100%;
  object-fit:contain; padding:12px;
  transition: transform .3s ease;
}
.card:hover .card-img-wrap img { transform:scale(1.05); }
.card-initial {
  font-size:2.5em; font-weight:900; color:#e74c3c;
  text-shadow: 0 2px 8px rgba(231,76,60,.2);
}
.card-info { padding:14px 16px; }
.card-name { font-weight:700; font-size:.95em; color:#222; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-sub  { font-size:.8em; color:#888; }

/* Edit mode overlay on card */
.card.edit-mode { cursor:default; }
.card-delete-btn {
  position:absolute; top:8px; right:8px;
  width:28px; height:28px; border-radius:50%;
  background:#e74c3c; color:#fff; border:none;
  display:none; align-items:center; justify-content:center;
  font-size:1em; font-weight:bold;
  box-shadow: 0 2px 8px rgba(231,76,60,.4);
  transition: transform .2s;
  z-index:2;
}
.card-delete-btn:hover { transform:scale(1.15); }
.card.edit-mode .card-delete-btn { display:flex; animation: popIn .2s ease; }
@keyframes popIn { from{transform:scale(0)} to{transform:scale(1)} }

/* ── Brand Hero (groups panel header) ───────────────────────────────────── */
.brand-hero {
  background:#fff; border-radius:16px; padding:20px 28px;
  box-shadow:0 4px 20px rgba(0,0,0,.07);
  display:flex; align-items:center; gap:20px;
  margin-bottom:24px;
  animation: fadeIn .3s ease;
}
.brand-hero-logo {
  width:64px; height:64px; border-radius:12px;
  background:linear-gradient(135deg,#f5f5f5,#eee);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
}
.brand-hero-logo img { width:100%; height:100%; object-fit:contain; padding:6px; }
.brand-hero-initial { font-size:1.8em; font-weight:900; color:#e74c3c; }
.brand-hero-info h2 { font-size:1.5em; font-weight:800; color:#222; }
.brand-hero-info p  { color:#888; font-size:.9em; margin-top:2px; }

/* ── Group Hero (articles panel header) ─────────────────────────────────── */
.group-hero {
  background:#fff; border-radius:16px; padding:24px 28px;
  box-shadow:0 4px 20px rgba(0,0,0,.07);
  display:flex; align-items:center; gap:24px;
  margin-bottom:24px;
  animation: fadeIn .3s ease;
}
#groupHeroImg { width:120px; height:120px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.group-hero-info { flex:1; }
.group-hero-info h2 { font-size:1.6em; font-weight:800; color:#2c3e50; }
.group-hero-info p  { color:#888; margin-top:4px; }
.group-hero-search { min-width:260px; }

/* ── Declarations Section ───────────────────────────────────────────────── */
.declarations-section {
  background:#fff; border-radius:16px; padding:28px;
  box-shadow:0 4px 20px rgba(0,0,0,.07);
}
.declarations-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
}
.decl-card {
  background:#fff; border:1.5px solid #eee;
  border-radius:12px; padding:16px;
  transition: all .25s ease;
  animation: cardIn .35s ease both;
  position:relative; overflow:hidden;
  cursor:pointer;
}
.decl-card:hover {
  border-color:rgba(231,76,60,.3);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  transform:translateY(-3px);
}
.decl-card-name { font-weight:700; font-size:.9em; color:#222; margin-bottom:6px; }
.decl-card-template {
  font-size:.8em; color:#e74c3c; font-weight:600;
  background:rgba(231,76,60,.08); padding:3px 8px; border-radius:20px;
  display:inline-block; margin-bottom:6px;
}
.decl-card-lang { font-size:.78em; color:#888; }
.decl-card-shortcut { font-size:.78em; color:#aaa; font-style:italic; }

.decl-card-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center; gap:8px;
  border-radius:12px;
  animation: fadeIn .15s ease;
}
.decl-card:hover .decl-card-overlay { display:flex; }
.decl-card.edit-mode:hover .decl-card-overlay { display:flex; }

.btn-decl-action {
  padding:8px 14px; border-radius:8px; border:none;
  font-size:.8em; font-weight:700; color:#fff;
  display:flex; align-items:center; gap:4px;
  transition: transform .15s;
}
.btn-decl-action:hover { transform:scale(1.05); }
.btn-decl-edit   { background:#3498db; }
.btn-decl-delete { background:#e74c3c; }
.btn-decl-print  { background:#27ae60; }

.empty-state {
  grid-column:1/-1; text-align:center; padding:60px 20px;
  color:#aaa; font-size:1em;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.empty-state ion-icon { font-size:3em; color:#ddd; animation: floatIcon 3s ease-in-out infinite; }

/* ── Profile Panel ──────────────────────────────────────────────────────── */
.profile-wrap { display:flex; justify-content:center; padding-bottom:40px; }
.profile-card {
  background:#fff; border-radius:20px; padding:36px;
  box-shadow:0 8px 32px rgba(0,0,0,.08);
  width:100%; max-width:600px;
  animation: slideInRight .35s ease both;
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.profile-avatar-wrap { margin-bottom:12px; }
.profile-avatar {
  width:80px; height:80px; border-radius:50%;
  background:linear-gradient(135deg,#e74c3c,#c0392b);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.profile-avatar ion-icon { font-size:2.4em; }
.profile-email { font-size:1.15em; font-weight:700; color:#333; margin-bottom:8px; }
.role-badge {
  padding:4px 12px; border-radius:20px; font-size:.78em; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
}
.role-badge.admin { background:linear-gradient(135deg,#1e3a5f,#2980b9); color:#fff; }
.role-badge.user  { background:rgba(231,76,60,.1); color:#e74c3c; }

.profile-section {
  width:100%; margin-top:28px; padding-top:24px;
  border-top:1px solid #f0f0f0;
  display:flex; flex-direction:column; gap:14px;
}
.section-title {
  display:flex; align-items:center; gap:8px;
  font-size:1em; font-weight:700; color:#333; margin-bottom:4px;
}
.section-title ion-icon { color:#e74c3c; font-size:1.1em; }

.btn-save-green {
  display:flex; align-items:center; gap:7px; justify-content:center;
  background:linear-gradient(135deg,#0f9d58,#0b7a43); color:#fff; border:none;
  padding:12px 24px; border-radius:10px; font-size:.95em; font-weight:700;
  transition:all .2s; box-shadow:0 3px 12px rgba(15,157,88,.3);
  align-self: flex-end;
}
.btn-save-green:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(15,157,88,.4); }
.btn-save-blue {
  display:flex; align-items:center; gap:7px; justify-content:center;
  background:linear-gradient(135deg,#1e3a5f,#2980b9); color:#fff; border:none;
  padding:12px 24px; border-radius:10px; font-size:.95em; font-weight:700;
  transition:all .2s;
  align-self: flex-end;
}
.btn-save-blue:hover { transform:translateY(-2px); }
.btn-logout {
  display:flex; align-items:center; gap:7px; justify-content:center;
  background:#f5f5f5; color:#e74c3c; border:1.5px solid rgba(231,76,60,.25);
  padding:12px 24px; border-radius:10px; font-size:.95em; font-weight:700;
  width:100%; margin-top:8px; transition:all .2s;
}
.btn-logout:hover { background:#e74c3c; color:#fff; border-color:#e74c3c; }

/* ── Admin Panel ────────────────────────────────────────────────────────── */
.admin-layout { display:flex; min-height:calc(100vh - 64px); }

.admin-sidebar {
  width:240px; flex-shrink:0;
  background:linear-gradient(180deg,#1a2535 0%,#22304a 100%);
  padding:20px 0;
  display:flex; flex-direction:column;
}
.admin-sidebar-brand {
  padding:16px 20px 24px;
  display:flex; align-items:center; gap:10px;
  color:#fff; font-weight:800; font-size:1em;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:10px;
}
.admin-sidebar-brand ion-icon { font-size:1.4em; color:#3498db; }

.admin-nav { display:flex; flex-direction:column; gap:2px; padding:0 10px; }
.admin-nav-btn {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:10px; border:none;
  background:transparent; color:rgba(255,255,255,.65);
  font-size:.9em; font-weight:600; text-align:left;
  transition:all .2s ease;
}
.admin-nav-btn ion-icon { font-size:1.15em; }
.admin-nav-btn:hover { background:rgba(255,255,255,.08); color:#fff; }
.admin-nav-btn.active { background:rgba(231,76,60,.18); color:#e74c3c; }
.admin-nav-btn.active ion-icon { color:#e74c3c; }

.admin-content { flex:1; padding:32px; overflow-x:hidden; }

/* Admin section header */
.admin-section-hdr {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:28px;
}
.admin-section-hdr h2 { font-size:1.6em; font-weight:800; color:#222; }

/* Stats cards */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; margin-bottom:32px; }
.stat-card {
  background:#fff; border-radius:14px; padding:20px 24px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  display:flex; align-items:center; gap:16px;
  animation:cardIn .35s ease both;
}
.stat-icon {
  width:50px; height:50px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
.stat-icon ion-icon { font-size:1.5em; color:#fff; }
.stat-icon.red    { background:linear-gradient(135deg,#e74c3c,#c0392b); }
.stat-icon.blue   { background:linear-gradient(135deg,#3498db,#2980b9); }
.stat-icon.green  { background:linear-gradient(135deg,#0f9d58,#0b7a43); }
.stat-icon.purple { background:linear-gradient(135deg,#8e44ad,#6c3483); }
.stat-icon.orange { background:linear-gradient(135deg,#e67e22,#ca6f1e); }
.stat-info .stat-num { font-size:1.8em; font-weight:900; color:#222; line-height:1; }
.stat-info .stat-lbl { font-size:.8em; color:#888; margin-top:3px; }

/* Users table */
.users-table-wrap { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.06); }
.users-table-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid #f0f0f0;
}
.users-table-hdr h3 { font-weight:700; color:#333; }
.users-table { width:100%; border-collapse:collapse; border-radius:10px; overflow:hidden; }
.users-table thead tr {
  background: linear-gradient(135deg, #1a2535 0%, #2c3e55 100%);
}
.users-table th {
  padding: 12px 16px; text-align: left;
  font-size: .76em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #fff; border: none;
}
.users-table td {
  padding: 13px 16px; border-bottom: 1px solid #f0f2f5;
  font-size: .87em; color: #333; vertical-align: middle;
}
.users-table tbody tr:last-child td { border-bottom: none; }
.users-table tbody tr { transition: background .1s; }
.users-table tbody tr:hover td { background: #f8f9fc; }

.badge-admin { background:linear-gradient(135deg,#1e3a5f,#2980b9); color:#fff; padding:3px 8px; border-radius:20px; font-size:.7em; font-weight:700; text-transform:uppercase; }
.badge-user  { background:rgba(231,76,60,.1); color:#e74c3c; padding:3px 8px; border-radius:20px; font-size:.7em; font-weight:700; text-transform:uppercase; }
.badge-active   { background:rgba(15,157,88,.1); color:#0f9d58; padding:3px 8px; border-radius:20px; font-size:.7em; font-weight:700; }
.badge-inactive { background:rgba(127,140,141,.12); color:#999; padding:3px 8px; border-radius:20px; font-size:.7em; font-weight:700; }
.badge-locked   { background:rgba(231,76,60,.12); color:#e74c3c; padding:3px 8px; border-radius:20px; font-size:.7em; font-weight:700; }

/* Locked row highlight */
tr.row-locked td { background:rgba(231,76,60,.04); }
tr.row-locked:hover td { background:rgba(231,76,60,.08); }

/* Admin nav badge (locked count) */
.admin-nav-badge {
  margin-left:auto; background:#e74c3c; color:#fff;
  font-size:.68em; font-weight:800; min-width:18px; height:18px;
  border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 5px; line-height:1;
}

/* Clickable stat card (locked alert) */
.stat-card-alert { cursor:pointer; border:2px solid rgba(231,76,60,.3) !important; }
.stat-card-alert:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(231,76,60,.2); }

/* Events table */
.events-table {
  width: 100%; border-collapse: collapse; font-size: .85em;
  border-radius: 10px; overflow: hidden;
}
.events-table thead tr {
  background: linear-gradient(135deg, #1a2535 0%, #2c3e55 100%);
}
.events-table th {
  color: #fff; font-weight: 700; padding: 12px 16px;
  text-align: left; letter-spacing: .04em; font-size: .82em; text-transform: uppercase;
  border: none;
}
.events-table td {
  padding: 10px 16px; border-bottom: 1px solid #f0f2f5;
  color: #333; vertical-align: middle;
}
.events-table td code {
  background: #f5f6fa; border-radius: 5px; padding: 2px 7px;
  font-size: .88em; color: #555; border: 1px solid #e8e8e8;
}
.events-table tbody tr:last-child td { border-bottom: none; }
.events-table tbody tr { transition: background .1s; }
.events-table tbody tr:hover td { background: #f8f9fc; }
.ev-lock td { background: rgba(231,76,60,.03); }
.ev-fail td { background: rgba(243,156,18,.03); }
.badge-ev-login  { background: rgba(39,174,96,.12);  color: #1e8449; padding: 3px 10px; border-radius: 20px; font-size: .74em; font-weight: 800; letter-spacing: .03em; }
.badge-ev-fail   { background: rgba(243,156,18,.15); color: #b7770d; padding: 3px 10px; border-radius: 20px; font-size: .74em; font-weight: 800; }
.badge-ev-lock   { background: rgba(231,76,60,.15);  color: #c0392b; padding: 3px 10px; border-radius: 20px; font-size: .74em; font-weight: 800; }

/* "days ago" tag next to last login */
.last-login-ago {
  font-size: .74em; color: #aaa; font-weight: 600;
  background: #f5f6fa; padding: 1px 6px; border-radius: 8px; margin-left: 3px;
}

/* Locked users alert box inside events panel */
.events-alert-box {
  background:rgba(231,76,60,.07); border:1.5px solid rgba(231,76,60,.3);
  border-radius:10px; padding:14px 18px; margin-bottom:20px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:.9em; color:#c0392b;
}
.events-alert-box ion-icon { font-size:1.3em; flex-shrink:0; }
.locked-user-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid rgba(231,76,60,.25); border-radius:20px;
  padding:3px 10px; font-size:.85em;
}
.btn-unlock-inline {
  background:#27ae60; color:#fff; border:none; border-radius:12px;
  padding:2px 8px; font-size:.8em; font-weight:700; cursor:pointer;
}
.btn-unlock-inline:hover { background:#219a52; }

.tbl-actions { display:flex; gap:6px; }
.btn-tbl {
  width:28px; height:28px; border-radius:6px; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:.85em; transition:all .15s;
}
.btn-tbl-edit   { background:rgba(52,152,219,.1); color:#2980b9; }
.btn-tbl-edit:hover { background:#3498db; color:#fff; }
.btn-tbl-delete { background:rgba(231,76,60,.1); color:#e74c3c; }
.btn-tbl-delete:hover { background:#e74c3c; color:#fff; }
.btn-tbl-toggle { background:rgba(127,140,141,.1); color:#7f8c8d; }
.btn-tbl-toggle:hover { background:#7f8c8d; color:#fff; }

/* Admin add button */
.btn-add-admin {
  display:flex; align-items:center; gap:7px;
  background:linear-gradient(135deg,#1e3a5f,#2980b9); color:#fff; border:none;
  padding:10px 20px; border-radius:8px; font-size:.9em; font-weight:600;
  transition:all .2s;
}
.btn-add-admin:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(41,128,185,.3); }

/* Company section */
.company-form-card { background:#fff; border-radius:14px; padding:28px; box-shadow:0 4px 16px rgba(0,0,0,.06); max-width:500px; }
.company-form-card h3 { margin-bottom:20px; font-size:1.1em; color:#333; }

/* ── Modals ─────────────────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
  padding:16px;
}
.modal-overlay.open { display:flex; animation:fadeIn .2s ease; }

.modal-box {
  background:#fff; border-radius:18px;
  width:100%; max-width:800px; max-height:min(92vh,520px);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow:0 24px 80px rgba(0,0,0,.25);
  animation:modalSlideIn .3s cubic-bezier(.4,0,.2,1) both;
}
@keyframes modalSlideIn {
  from { opacity:0; transform:translateY(24px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.modal-box-sm { max-width:380px; }

.modal-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 26px; border-radius:18px 18px 0 0;
}
.modal-hdr h2 { font-size:1.15em; font-weight:700; color:#fff; }
.red-grad { background:linear-gradient(135deg,#e74c3c,#c0392b); }
.modal-x {
  width:30px; height:30px; border-radius:6px; border:none;
  background:rgba(255,255,255,.2); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2em; font-weight:700; transition:all .15s;
}
.modal-x:hover { background:rgba(255,255,255,.35); }

.modal-body { padding:24px 26px 0; display:flex; flex-direction:column; gap:16px; flex:1; min-height:0; overflow-y:auto; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; padding:14px 26px 20px; border-top:1px solid #f0f0f0; background:#fff; flex-shrink:0; border-radius:0 0 18px 18px; }
.btn-cancel-modal {
  padding:10px 20px; border-radius:8px; border:1.5px solid #e0e0e0;
  background:#fff; color:#666; font-weight:600; font-size:.9em; transition:all .15s;
}
.btn-cancel-modal:hover { background:#f5f5f5; border-color:#ccc; }
.btn-save-modal {
  display:flex; align-items:center; gap:6px;
  padding:10px 22px; border-radius:8px; border:none;
  font-weight:700; font-size:.9em; color:#fff; transition:all .2s;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
}
.btn-save-modal:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(0,0,0,.2); }
.btn-save-modal.red  { background:linear-gradient(135deg,#e74c3c,#c0392b); }
.btn-save-modal.blue { background:linear-gradient(135deg,#1e3a5f,#2980b9); }
.btn-save-modal.green { background:linear-gradient(135deg,#1a6b3c,#27ae60); }
.btn-delete-modal {
  padding:10px 20px; border-radius:8px; border:none;
  background:linear-gradient(135deg,#e74c3c,#c0392b); color:#fff;
  font-weight:700; font-size:.9em; transition:all .2s;
}
.btn-delete-modal:hover { transform:translateY(-1px); }

/* Confirm modal */
.confirm-body { text-align:center; padding:32px 24px; }
.confirm-icon-wrap ion-icon { font-size:3em; color:#e74c3c; }
.confirm-body h3 { margin:12px 0 6px; font-size:1.1em; color:#333; }
.confirm-desc { font-size:.88em; color:#888; margin-bottom:20px; }
.confirm-btns { display:flex; gap:10px; justify-content:center; }

/* Upload zone */
.upload-zone {
  border:2px dashed #ddd; border-radius:10px; padding:20px;
  text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#aaa; font-size:.9em;
  transition:all .2s; position:relative;
}
.upload-zone ion-icon.zone-icon { font-size:1.6em; color:#ccc; }
.upload-zone:hover { border-color:#e74c3c; color:#e74c3c; background:rgba(231,76,60,.03); }
.upload-zone:hover ion-icon.zone-icon { color:#e74c3c; }
.hidden-file { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
/* preview image lives inside the zone */
.upload-zone .zone-preview-img {
  display:none; position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  border-radius:8px; background:#f5f5f5;
}
.upload-zone .remove-upload {
  display:none; position:absolute; top:6px; right:6px; z-index:2;
  width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,.5); border:none; color:#fff; font-size:1em;
  align-items:center; justify-content:center; cursor:pointer;
}
.upload-zone .remove-upload:hover { background:rgba(231,76,60,.8); }
/* has-image state: hide upload hint, show image */
.upload-zone.has-image {
  border-style:solid; border-color:#ddd;
  padding:0; min-height:150px; overflow:hidden; cursor:default;
}
.upload-zone.has-image:hover { border-color:#ddd; background:transparent; color:#aaa; }
.upload-zone.has-image:hover ion-icon.zone-icon { color:#ccc; }
.upload-zone.has-image .zone-icon,
.upload-zone.has-image .zone-text { display:none; }
.upload-zone.has-image .hidden-file { display:none; pointer-events:none; }
.upload-zone.has-image .zone-preview-img { display:block; }
.upload-zone.has-image .remove-upload { display:flex; }

/* Group picker */
.group-picker { display:flex; border:2px solid #eee; border-radius:12px; overflow:hidden; height:280px; }
.group-picker-list { flex:1; overflow-y:auto; padding:8px; display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; }
.group-picker-preview { width:180px; flex-shrink:0; background:#f8f9fa; border-left:2px solid #eee; display:flex; align-items:center; justify-content:center; }
.group-picker-preview img { max-width:150px; max-height:150px; object-fit:contain; display:none; border-radius:8px; }
.gp-placeholder { display:flex; flex-direction:column; align-items:center; gap:8px; color:#ccc; font-size:.85em; text-align:center; padding:20px; }
.gp-placeholder ion-icon { font-size:2.5em; }

.gp-item {
  padding:6px 10px; border-radius:8px; border:1.5px solid #eee;
  font-size:.78em; font-weight:600; cursor:pointer;
  transition:all .15s; color:#555; white-space:nowrap;
}
.gp-item:hover { border-color:#e74c3c; color:#e74c3c; background:rgba(231,76,60,.05); }
.gp-item.selected { background:#e74c3c; color:#fff; border-color:#e74c3c; }
.gp-section-hdr { width:100%; font-size:.7em; font-weight:700; text-transform:uppercase; color:#aaa; letter-spacing:.05em; padding:6px 4px 2px; pointer-events:none; }

/* ── Import Group Button ─────────────────────────────────────────────────── */
.btn-import-group {
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  background:linear-gradient(135deg,#2c3e50,#34495e);
  color:#fff; border:none; border-radius:10px;
  padding:11px 18px; font-size:.88em; font-weight:700; letter-spacing:.02em;
  cursor:pointer; transition:all .22s; box-shadow:0 3px 12px rgba(44,62,80,.22);
}
.btn-import-group ion-icon { font-size:1.15em; }
.btn-import-group:hover { background:linear-gradient(135deg,#34495e,#2c3e50); box-shadow:0 5px 18px rgba(44,62,80,.35); transform:translateY(-1px); }
.btn-import-group:active { transform:translateY(0); }

/* ── Import Group Modal ──────────────────────────────────────────────────── */
.import-modal-box { max-width:620px; }
.import-modal-hdr-inner { display:flex; flex-direction:column; gap:4px; }
.import-breadcrumb { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.ibc-step { font-size:.72em; font-weight:700; letter-spacing:.07em; text-transform:uppercase; opacity:.5; transition:opacity .2s; }
.ibc-step.active { opacity:1; }
.ibc-sep { font-size:.8em; opacity:.4; }
.import-step-hint { font-size:.9em; color:#666; margin:16px 0 12px; font-weight:500; }
.import-step2-header { display:flex; align-items:center; gap:12px; padding:14px 0 4px; border-bottom:1px solid #f0f0f0; margin-bottom:4px; }
.btn-back-import {
  display:flex; align-items:center; gap:5px; background:none; border:1.5px solid #ddd;
  color:#555; border-radius:8px; padding:6px 14px; font-size:.85em; font-weight:600; cursor:pointer; transition:all .2s;
}
.btn-back-import:hover { border-color:#e74c3c; color:#e74c3c; }
.import-from-label { font-size:.9em; font-weight:700; color:#333; }

/* Brand cards grid */
.import-brands-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; max-height:320px; overflow-y:auto; padding:2px 2px 4px; }
.import-brand-card {
  display:flex; align-items:center; gap:12px;
  background:#fff; border:2px solid #eee; border-radius:14px;
  padding:14px 12px; cursor:pointer; transition:all .2s; text-align:left;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.import-brand-card:hover { border-color:#e74c3c; box-shadow:0 4px 16px rgba(231,76,60,.14); transform:translateY(-2px); }
.import-brand-logo { width:40px; height:40px; border-radius:10px; overflow:hidden; flex-shrink:0; background:#f5f5f5; display:flex; align-items:center; justify-content:center; }
.import-brand-logo img { width:100%; height:100%; object-fit:cover; }
.ibc-initial { font-weight:800; font-size:1.1em; color:#e74c3c; }
.import-brand-meta { flex:1; min-width:0; }
.import-brand-name { display:block; font-weight:700; font-size:.88em; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.import-brand-origin { display:block; font-size:.75em; color:#999; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.import-brand-arrow { font-size:1.1em; color:#ccc; flex-shrink:0; }

/* Groups list */
.import-groups-list { display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto; padding:2px; margin-bottom:2px; }
.import-group-item {
  display:flex; align-items:center; gap:12px;
  background:#fff; border:2px solid #eee; border-radius:12px;
  padding:10px 14px; cursor:pointer; transition:all .18s; text-align:left;
}
.import-group-item:hover { border-color:#e74c3c; background:rgba(231,76,60,.03); }
.import-group-item.selected { border-color:#e74c3c; background:rgba(231,76,60,.06); box-shadow:0 2px 10px rgba(231,76,60,.12); }
.import-group-thumb { width:36px; height:36px; border-radius:8px; background:#f5f5f5; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.import-group-thumb img { width:100%; height:100%; object-fit:cover; }
.igi-letter { font-weight:800; font-size:1em; color:#e74c3c; }
.import-group-name { flex:1; font-weight:600; font-size:.9em; color:#333; }
.import-group-check { font-size:1.3em; color:#e74c3c; opacity:0; transition:opacity .18s; flex-shrink:0; }
.import-group-item.selected .import-group-check { opacity:1; }

/* Options bar */
.import-options-bar { display:flex; align-items:center; gap:12px; padding:14px 0 4px; border-top:1px solid #f0f0f0; margin-top:10px; }
.import-toggle { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.import-toggle input { display:none; }
.import-toggle-track {
  width:42px; height:24px; background:#ddd; border-radius:12px;
  position:relative; transition:background .2s; flex-shrink:0;
}
.import-toggle-thumb {
  position:absolute; top:3px; left:3px; width:18px; height:18px;
  background:#fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.2);
  transition:transform .2s;
}
.import-toggle input:checked + .import-toggle-track { background:#e74c3c; }
.import-toggle input:checked + .import-toggle-track .import-toggle-thumb { transform:translateX(18px); }
.import-toggle-text { font-size:.88em; font-weight:600; color:#444; }

/* Empty/loading states inside import modal */
.import-empty { display:flex; flex-direction:column; align-items:center; gap:8px; color:#bbb; padding:28px 16px; text-align:center; font-size:.9em; }
.import-empty ion-icon { font-size:2.2em; }
.import-loading { display:flex; align-items:center; gap:8px; color:#aaa; padding:20px 16px; font-size:.9em; }
@keyframes spin { to { transform:rotate(360deg); } }
.spin { animation:spin .8s linear infinite; display:inline-block; }

/* Dark mode */
body.dark .btn-import-group { background:linear-gradient(135deg,#1a1a2e,#16213e); box-shadow:0 3px 12px rgba(0,0,0,.4); }
body.dark .import-brand-card { background:#1e1e1e; border-color:#333; }
body.dark .import-brand-card:hover { border-color:#e74c3c; }
body.dark .import-brand-name { color:#eee; }
body.dark .import-group-item { background:#1e1e1e; border-color:#333; }
body.dark .import-group-item:hover, body.dark .import-group-item.selected { border-color:#e74c3c; background:rgba(231,76,60,.08); }
body.dark .import-group-name { color:#ddd; }
body.dark .import-toggle-text { color:#bbb; }
body.dark .import-step-hint { color:#999; }
body.dark .import-step2-header { border-color:#333; }
body.dark .import-options-bar { border-color:#333; }
body.dark .import-from-label { color:#eee; }
body.dark .btn-back-import { border-color:#444; color:#bbb; }
body.dark .btn-back-import:hover { border-color:#e74c3c; color:#e74c3c; }

.divider-or { text-align:center; color:#bbb; font-size:.85em; padding:4px 0; }
.custom-group-toggle { display:flex; justify-content:center; }
.btn-add-custom {
  display:flex; align-items:center; gap:7px;
  background:rgba(46,204,113,.1); color:#27ae60; border:1.5px solid rgba(46,204,113,.3);
  padding:10px 20px; border-radius:8px; font-size:.9em; font-weight:700;
  transition:all .2s;
}
.btn-add-custom:hover { background:#2ecc71; color:#fff; }
.custom-group-form {
  display:none;
  border:1.5px solid #e8e8e8; border-radius:14px; padding:18px 20px;
  background:#f8f9fa;
  box-shadow:0 2px 12px rgba(0,0,0,.04), inset 0 1px 2px rgba(0,0,0,.03);
}
.custom-group-form.visible { display:flex; flex-direction:column; gap:14px; animation:fadeIn .2s ease; }

/* Article modal */
.article-box { max-width:860px; }
.article-cols { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.article-col-left,.article-col-right { display:flex; flex-direction:column; gap:14px; }

/* Print modal */
.print-modal-overlay { align-items:flex-start; padding:0; }
.print-modal-box { border-radius:0; max-height:100vh; width:100%; max-width:100%; }
.print-body { padding:20px; display:flex; justify-content:center; align-items:flex-start; background:#888; min-height:calc(100vh - 60px); gap:18px; }
.print-preview-wrap { flex-shrink:0; }

/* ── Print Config Panel ───────────────────────────────────────────────────── */
.print-config-panel {
  width:250px; flex-shrink:0;
  background:#fff; border-radius:14px;
  box-shadow:0 4px 24px rgba(0,0,0,.18);
  position:sticky; top:20px;
  max-height:calc(100vh - 100px); overflow-y:auto;
  display:flex; flex-direction:column;
}
.pcp-section {
  padding:13px 15px;
  border-bottom:1px solid #f0f0f0;
}
.pcp-section:last-child { border-bottom:none; }
.pcp-section-title {
  font-size:.68em; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:#aaa; margin-bottom:9px;
}
.pcp-templates-row { display:flex; flex-wrap:wrap; gap:5px; }
.pcp-tpl-card {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 9px; border-radius:8px;
  border:1.5px solid #e0e0e0; background:#fafafa;
  font-size:.76em; font-weight:600; color:#666;
  cursor:pointer; transition:all .15s; position:relative;
  line-height:1;
}
.pcp-tpl-card:hover { border-color:#bbb; background:#f3f3f3; color:#333; }
.pcp-tpl-card.active { border-color:#e74c3c; background:#fff5f5; color:#e74c3c; }
.pcp-tpl-card ion-icon { font-size:.95em; }
.pcp-tpl-del {
  width:14px; height:14px; border-radius:50%;
  background:#e5e5e5; border:none; color:#999;
  font-size:8px; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:1px; transition:all .15s; flex-shrink:0;
}
.pcp-tpl-del:hover { background:#e74c3c; color:#fff; }
.pcp-tpl-add {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  border:1.5px dashed #4caf50; background:#f1fdf3;
  color:#4caf50; font-size:1.1em; cursor:pointer;
  transition:all .15s;
}
.pcp-tpl-add:hover { background:#e0f7e3; border-color:#388e3c; color:#388e3c; }
.pcp-control { margin-bottom:7px; }
.pcp-control:last-child { margin-bottom:0; }
.pcp-control > label { display:block; font-size:.76em; color:#777; margin-bottom:5px; }
.pcp-slider-row { display:flex; align-items:center; gap:8px; }
.pcp-slider-row input[type=range] { flex:1; accent-color:#e74c3c; cursor:pointer; }
.pcp-slider-row span { font-size:.74em; font-weight:700; color:#333; min-width:30px; text-align:right; }
.pcp-toggle-row {
  display:flex; align-items:center; gap:9px;
  padding:5px 0; cursor:pointer; font-size:.8em; color:#444;
  border-bottom:1px solid #f8f8f8;
}
.pcp-toggle-row:last-child { border-bottom:none; }
.pcp-toggle-row input[type=checkbox] { width:14px; height:14px; accent-color:#e74c3c; cursor:pointer; }
.pcp-save-btn {
  width:100%; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:10px; border-radius:10px;
  background:linear-gradient(135deg,#e74c3c,#c0392b);
  color:#fff; font-weight:700; font-size:.83em; border:none; cursor:pointer;
  transition:opacity .15s;
}
.pcp-save-btn:hover:not(:disabled) { opacity:.88; }
.pcp-save-btn:disabled { opacity:.38; cursor:not-allowed; }
.pcp-save-label { font-size:.7em; color:#bbb; text-align:center; margin-top:6px; line-height:1.4; }

/* ── Label Quota Modal ────────────────────────────────────────────────────── */
.label-quota-box { max-width:420px; }
.label-quota-body { padding:28px 24px; text-align:center; }
.label-quota-icon { font-size:2.8em; margin-bottom:10px; line-height:1; }
.label-quota-title { font-size:1.05em; font-weight:800; color:#222; margin-bottom:4px; }
.label-quota-stats { display:flex; gap:8px; justify-content:center; margin:16px 0; }
.label-quota-stat {
  flex:1; max-width:110px;
  background:#f9f9f9; border:1px solid #eee; border-radius:10px;
  padding:12px 8px; text-align:center;
}
.label-quota-stat .lqs-num { font-size:1.7em; font-weight:900; color:#333; display:block; line-height:1.1; }
.label-quota-stat .lqs-lbl { font-size:.7em; color:#999; line-height:1.3; display:block; margin-top:3px; }
.label-quota-contact {
  background:#f7f9fc; border:1px solid #dde8f0; border-radius:10px;
  padding:14px 15px; text-align:left; font-size:.82em;
  line-height:1.6; margin-top:14px;
}
.label-quota-contact p { margin:0 0 5px; color:#555; }
.label-quota-contact p:last-child { margin-bottom:0; }
.label-quota-contact a { color:#2980b9; text-decoration:none; font-weight:600; }
.label-quota-contact a:hover { text-decoration:underline; }
.label-quota-close-btn {
  margin-top:18px; padding:10px 32px;
  background:linear-gradient(135deg,#e74c3c,#c0392b);
  color:#fff; border:none; border-radius:10px;
  font-weight:700; cursor:pointer; font-size:.88em;
  transition:opacity .15s;
}
.label-quota-close-btn:hover { opacity:.88; }

/* ── Admin Labels Tab ─────────────────────────────────────────────────────── */
.au-labels-quota-row {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 0; border-bottom:1px solid #f0f0f0; margin-bottom:12px;
}
.au-labels-quota-row > span:first-child { font-size:.84em; color:#444; flex:1; min-width:120px; }
.au-labels-quota-ctrl {
  display:flex; align-items:stretch;
  border:1.5px solid #ddd; border-radius:8px; overflow:hidden;
}
.au-labels-quota-ctrl button {
  width:30px; background:#f5f5f5; border:none;
  font-size:1.05em; font-weight:700; color:#666; cursor:pointer;
  transition:background .12s; line-height:1;
}
.au-labels-quota-ctrl button:hover { background:#e5e5e5; }
.au-labels-quota-ctrl > span {
  min-width:32px; text-align:center; font-size:.95em; font-weight:800;
  color:#222; background:#fff; padding:4px 6px; line-height:1.6;
}
.au-label-templates-list { display:flex; flex-direction:column; gap:7px; }
.au-lbl-tpl-row {
  display:flex; align-items:center; gap:9px;
  padding:9px 11px; background:#fafafa; border:1px solid #eee;
  border-radius:10px;
}
.au-lbl-tpl-icon { font-size:1.1em; color:#bbb; flex-shrink:0; }
.au-lbl-tpl-name { font-size:.83em; font-weight:600; color:#333; }
.au-lbl-tpl-badge { font-size:.7em; padding:2px 7px; border-radius:5px; font-weight:700; flex-shrink:0; }
.au-lbl-tpl-badge.standard { background:#e8f5e9; color:#388e3c; }
.au-lbl-tpl-badge.custom   { background:#fff3e0; color:#f57c00; }

/* Hide config panel on print */
@media print { .print-config-panel { display:none!important; } }

.a4-page {
  background:#fff; width:210mm;
  box-shadow:0 0 24px rgba(0,0,0,.3);
  flex-shrink:0;
}
.print-grid {
  display:grid;
  --gc:5; --gr:13; --cw:38mm; --rh:21.154mm;
  grid-template-columns: repeat(var(--gc), var(--cw));
  grid-template-rows:    repeat(var(--gr), var(--rh));
  border-left:0.3mm solid #000; border-top:0.3mm solid #000;
  margin:1.1cm 1cm;
}
.grid-cell {
  border-right:0.3mm solid #000; border-bottom:0.3mm solid #000;
  font-size:6pt; line-height:1.3; padding:1.5mm;
  overflow:hidden; word-break:break-word;
}
.grid-cell .label-line { display:block; }
.grid-cell .part-23-gap { display:block; height:2mm; }
/* MK oval header on each label */
.label-header {
  display:flex; align-items:center; gap:3pt;
  padding-bottom:1.5pt; margin-bottom:1.5pt;
  border-bottom:0.4pt solid #aaa;
}
.mk-oval {
  display:inline-flex; align-items:center; justify-content:center;
  border:1.2pt solid #000; border-radius:50%;
  padding:0 2pt; min-width:14pt; height:9pt;
  font-size:6pt; font-weight:900; letter-spacing:0.5pt;
  flex-shrink:0; line-height:1; background:#fff;
}
.label-brand-info {
  font-size:6.5pt; font-weight:700; line-height:1.2;
}
/* locked form fields */
.input-locked { background:#f7f7f7 !important; color:#555; cursor:not-allowed; pointer-events:none; }
.lock-icon { font-size:.72em; color:#bbb; vertical-align:middle; margin-left:3px; }
.perms-checks { display:flex; gap:16px; flex-wrap:wrap; padding:4px 0; }
.perm-check { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:.9em; color:#333; user-select:none; }
.perm-check input[type=checkbox] { width:16px; height:16px; accent-color:#e74c3c; cursor:pointer; }
.btn-print-now {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.2); color:#fff; border:1.5px solid rgba(255,255,255,.4);
  padding:7px 16px; border-radius:8px; font-size:.85em; font-weight:600;
  transition:all .15s;
}
.btn-print-now:hover { background:rgba(255,255,255,.35); }
.print-grid.no-borders { border-color:white; }
.print-grid.no-borders .grid-cell { border-color:white; }

/* ── Notifications ───────────────────────────────────────────────────────── */
.notif-stack {
  position:fixed; top:80px; right:20px;
  display:flex; flex-direction:column; gap:10px;
  z-index:5000; pointer-events:none;
}
.notif {
  pointer-events:auto;
  min-width:280px; max-width:360px;
  padding:14px 16px; border-radius:12px;
  color:#fff; font-size:.9em; font-weight:600;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  animation:notifIn .3s cubic-bezier(.4,0,.2,1) both;
}
@keyframes notifIn { from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:translateX(0)} }
@keyframes notifOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(60px)} }
.notif.out { animation:notifOut .25s ease forwards; }
.notif.success { background:linear-gradient(135deg,#0f9d58,#0b7a43); }
.notif.error   { background:linear-gradient(135deg,#e74c3c,#c0392b); }
.notif.info    { background:linear-gradient(135deg,#2980b9,#1e6fa5); }
.notif ion-icon { font-size:1.2em; flex-shrink:0; }

/* success animated SVG icon */
.notif-svg-icon {
  width:26px; height:26px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.notif-svg-icon svg { width:100%; height:100%; overflow:visible; }
.notif-circle-ring {
  fill:none;
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:151;
  stroke-dashoffset:151;
  transform-box:fill-box;
  transform-origin:center;
  animation: notifDrawCircle 1s ease forwards, notifRotateGlow 1.4s ease;
}
.notif-check-mark {
  fill:none;
  stroke:#d9f99d;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:40;
  stroke-dashoffset:40;
  animation: notifDrawCheck .45s ease forwards;
  animation-delay:.85s;
}
@keyframes notifDrawCircle {
  from { stroke-dashoffset:151; }
  to   { stroke-dashoffset:0; }
}
@keyframes notifRotateGlow {
  0%  { transform:rotate(-90deg) scale(.8); opacity:.4; }
  60% { opacity:1; }
  100%{ transform:rotate(270deg) scale(1); }
}
@keyframes notifDrawCheck {
  from { stroke-dashoffset:40; }
  to   { stroke-dashoffset:0; }
}

/* error animated SVG icon */
.notif-error-ring {
  fill:none;
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:151;
  stroke-dashoffset:151;
  transform-box:fill-box;
  transform-origin:center;
  animation: notifDrawErrorCircle 1s ease forwards, notifRotateError 1.4s ease;
}
.notif-error-line1,
.notif-error-line2 {
  fill:none;
  stroke:#fca5a5;
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:24;
  stroke-dashoffset:24;
}
.notif-error-line1 {
  animation: notifDrawLine .25s ease forwards, notifErrorShake .4s ease;
  animation-delay:.85s;
}
.notif-error-line2 {
  animation: notifDrawLine .25s ease forwards, notifErrorShake .4s ease;
  animation-delay:1s;
}
@keyframes notifDrawErrorCircle {
  from { stroke-dashoffset:151; }
  to   { stroke-dashoffset:0; }
}
@keyframes notifRotateError {
  0%  { transform:rotate(-90deg) scale(.8); opacity:.4; }
  100%{ transform:rotate(270deg) scale(1); opacity:1; }
}
@keyframes notifDrawLine {
  from { stroke-dashoffset:24; }
  to   { stroke-dashoffset:0; }
}
@keyframes notifErrorShake {
  0%  { transform:translateX(0); }
  20% { transform:translateX(-2px); }
  40% { transform:translateX(2px); }
  60% { transform:translateX(-2px); }
  80% { transform:translateX(2px); }
  100%{ transform:translateX(0); }
}

.notif-close {
  margin-left:auto; background:none; border:none; color:rgba(255,255,255,.7);
  font-size:1.1em; line-height:1; cursor:pointer; padding:0 2px;
}
.notif-close:hover { color:#fff; }

/* ── Print @media ────────────────────────────────────────────────────────── */
@media print {
  .loading-overlay, .navbar, .notif-stack { display:none!important; }
  .modal-overlay { position:static!important; background:none!important; padding:0!important; }
  .print-modal-box { box-shadow:none!important; }
  .modal-hdr.no-print { display:none!important; }
  .print-body { background:#fff!important; padding:0!important; }
  .a4-page { box-shadow:none!important; }
  body { background:white!important; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:768px) {
  .cards-grid { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:14px; }
  .controls-section { padding:16px; gap:12px; }
  .btn-edit-mode span, .btn-add-nav span, .btn-admin-nav span { display:none; }
  .btn-edit-mode, .btn-add-nav, .btn-admin-nav { padding:9px 12px; }
  .article-cols { grid-template-columns:1fr; }
  .group-hero { flex-direction:column; align-items:flex-start; }
  #groupHeroImg { width:80px; height:80px; }
  .admin-sidebar { width:56px; }
  .admin-sidebar-brand span { display:none; }
  .admin-nav-btn span { display:none; }
  .admin-nav-btn { padding:12px; justify-content:center; }
  .form-row { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .users-table { font-size:.78em; }
  .a4-page { width:100%; }
  .modal-overlay { padding:10px; }
  .modal-box { border-radius:16px; }
  .contract-parties { grid-template-columns:1fr; gap:12px; }
  .signatures-row { grid-template-columns:1fr; gap:30px; }
}
@media (max-width:480px) {
  /* Navbar */
  .navbar { padding:8px 12px; gap:8px; height:56px; }
  .nav-title { font-size:1em; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-logo  { height:28px; }
  .btn-edit-mode, .btn-add-nav, .btn-admin-nav { padding:8px 10px; min-width:36px; }
  /* Layout */
  .container { margin:18px auto; padding:0 12px; }
  .panel { min-height:calc(100vh - 56px); }
  .app-shell { min-height:calc(100vh - 56px); }
  /* Cards */
  .cards-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .card-img-wrap { height:110px; }
  .card-info { padding:10px 12px; }
  .card-name { font-size:.88em; }
  /* Controls */
  .controls-section { flex-direction:column; align-items:stretch; padding:14px; }
  .search-container { min-width:unset; }
  .sort-container { justify-content:space-between; }
  /* Login */
  .login-card { border-radius:18px; margin:8px; }
  .login-logo-area { padding:26px 22px 20px; }
  .login-form-area { padding:22px 18px 24px; gap:14px; }
  .login-title { font-size:1.35em; }
  /* Heroes */
  .brand-hero { padding:14px 16px; gap:12px; border-radius:14px; }
  .brand-hero-logo { width:50px; height:50px; }
  .brand-hero-info h2 { font-size:1.2em; }
  .group-hero { padding:16px; border-radius:14px; }
  #groupHeroImg { width:70px; height:70px; }
  .group-hero-info h2 { font-size:1.25em; }
  /* Declarations */
  .declarations-section { padding:18px 14px; border-radius:14px; }
  .declarations-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .decl-card { padding:12px; }
  /* Modals — bottom sheet */
  .modal-overlay { padding:0; align-items:flex-end; }
  .modal-box { border-radius:20px 20px 0 0; max-height:min(94vh,620px); animation:modalSlideUp .3s cubic-bezier(.4,0,.2,1) both; }
  .modal-box-sm { border-radius:20px 20px 0 0; max-width:100%; }
  .modal-hdr { border-radius:20px 20px 0 0; padding:16px 20px; }
  .modal-body { padding:18px 20px 24px; }
  .au-modal-box { border-radius:20px 20px 0 0 !important; max-height:min(94vh,640px) !important; }
  .au-header { border-radius:20px 20px 0 0; }
  .au-sidenav { display:none; }
  .au-body { flex-direction:column; }
  .au-content { padding:16px; }
  .inv-modal-box { border-radius:20px 20px 0 0 !important; max-height:min(94vh,720px) !important; }
  .inv-header { border-radius:20px 20px 0 0; }
  /* Profile */
  .profile-card { padding:24px 16px; border-radius:18px; }
  .prf-wrap { padding:14px 12px 32px; }
  .prf-section { padding:16px; border-radius:12px; }
  /* Admin */
  .admin-sidebar { display:none; }
  .admin-content { padding:16px 12px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .stat-card { padding:14px 16px; gap:12px; }
  .stat-icon { width:42px; height:42px; flex-shrink:0; }
  /* Payment banner */
  .payment-banner-inner { padding:10px 14px; gap:10px; }
  .pay-banner-icon { display:none; }
  /* Contracts */
  .contract-doc { padding:28px 20px; }
  .contract-meta { flex-direction:column; gap:4px; }
  .contract-list-card { flex-wrap:wrap; gap:12px; }
}
@keyframes modalSlideUp {
  from { opacity:0; transform:translateY(40px); }
  to   { opacity:1; transform:translateY(0); }
}
@media (max-width:360px) {
  .navbar { padding:6px 10px; }
  .nav-title { max-width:100px; }
  .cards-grid { gap:8px; }
  .login-form-area { padding:16px 12px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Payment & Subscription System
═══════════════════════════════════════════════════════════════════════════ */

/* Payment banner */
.payment-banner {
  position: sticky;
  top: 0;
  z-index: 1400;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  animation: slideDown .35s ease;
}
@keyframes slideDown { from { transform:translateY(-100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
.banner-overdue { background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%); }
.banner-warning { background: linear-gradient(135deg, #d35400 0%, #e67e22 100%); }
.payment-banner-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.pay-banner-icon { font-size: 1.6em; color: #fff; flex-shrink: 0; animation: pulse 2s infinite; }
.pay-banner-body { flex: 1; min-width: 180px; color: #fff; }
.pay-banner-body strong { display: block; font-size: .95em; font-weight: 800; margin-bottom: 2px; }
.pay-banner-body span { font-size: .82em; opacity: .9; }
.pay-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.btn-req-ext {
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: .82em;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .2s;
  white-space: nowrap;
}
.btn-req-ext:hover:not(:disabled) { background: rgba(255,255,255,.32); }
.btn-req-ext:disabled { opacity: .55; cursor: default; }
.pay-banner-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,.75);
  font-size: 1.25em;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  line-height: 1;
  transition: color .15s;
}
.pay-banner-dismiss:hover { color: #fff; }

/* Subscription status badges (users table) */
.badge-sub-active  { background:rgba(39,174,96,.13);  color:#27ae60; padding:2px 8px; border-radius:12px; font-size:.72em; font-weight:700; white-space:nowrap; }
.badge-sub-warning { background:rgba(230,126,34,.13); color:#e67e22; padding:2px 8px; border-radius:12px; font-size:.72em; font-weight:700; white-space:nowrap; }
.badge-sub-overdue { background:rgba(231,76,60,.13);  color:#e74c3c; padding:2px 8px; border-radius:12px; font-size:.72em; font-weight:700; white-space:nowrap; }
.badge-sub-free    { background:rgba(52,152,219,.13); color:#2980b9; padding:2px 8px; border-radius:12px; font-size:.72em; font-weight:700; white-space:nowrap; }
.badge-sub-none    { color:#ccc; font-size:.72em; }

/* Form section divider */
.form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: #aaa;
  font-size: .75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.form-divider::before, .form-divider::after { content:''; flex:1; height:1px; background:#eee; }

/* Subscription fields grid in admin modal */
.sub-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width:520px) { .sub-fields-grid { grid-template-columns: 1fr; } }

.form-hint { font-size: .75em; color: #aaa; margin-top: 4px; display: block; }

/* Free account toggle */
.free-account-toggle { display: block; cursor: pointer; }
.free-account-toggle input[type=checkbox] { display: none; }
.free-toggle-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid #e8e8e8;
  border-radius: 10px;
  transition: all .2s;
  background: #fff;
  font-size: .88em;
  color: #555;
}
.free-account-toggle input:checked + .free-toggle-inner {
  border-color: #2980b9;
  background: rgba(41,128,185,.06);
  color: #2980b9;
}
.free-tag {
  margin-left: auto;
  background: #2980b9;
  color: #fff;
  font-size: .65em;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity .2s;
}
.free-account-toggle input:checked + .free-toggle-inner .free-tag { opacity: 1; }

/* Extension request modal */
.ext-info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(41,128,185,.07);
  border: 1px solid rgba(41,128,185,.22);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: .87em;
  color: #2980b9;
  margin-bottom: 18px;
  line-height: 1.5;
}
.ext-info-box ion-icon { font-size: 1.25em; flex-shrink: 0; margin-top: 1px; }
.ext-pending-note {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(243,156,18,.08);
  border: 1px solid rgba(243,156,18,.25);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .85em;
  color: #e67e22;
  margin-top: 12px;
}

/* Subscription request cards */
.sub-request-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.sub-request-card {
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: border-color .2s;
}
.sub-request-card.card-pending  { border-left: 4px solid #e74c3c; }
.sub-request-card.card-approved { border-left: 4px solid #27ae60; opacity: .8; }
.sub-request-card.card-denied   { border-left: 4px solid #bbb;    opacity: .75; }
.src-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #1a2535, #2c3e50);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1em; flex-shrink: 0;
}
.src-body { flex: 1; min-width: 0; }
.src-email { font-weight: 700; color: #222; font-size: .9em; margin-bottom: 2px; }
.src-meta { font-size: .78em; color: #aaa; margin-bottom: 6px; }
.src-message { font-size: .84em; color: #555; font-style: italic; background: #f8f9fa; padding: 7px 12px; border-radius: 8px; margin-top: 6px; }
.src-status-badge {
  display: inline-block;
  font-size: .74em; font-weight: 700;
  padding: 2px 8px; border-radius: 10px; margin-top: 6px;
}
.src-status-badge.approved { background: rgba(39,174,96,.12); color: #27ae60; }
.src-status-badge.denied   { background: rgba(150,150,150,.12); color: #999; }
.src-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.ext-days-row { display: flex; align-items: center; gap: 6px; }
.ext-days-input {
  width: 68px; padding: 5px 8px; border: 1.5px solid #ddd;
  border-radius: 8px; font-size: .83em; text-align: center;
}
.btn-approve {
  background: #27ae60; color: #fff; border: none;
  padding: 7px 14px; border-radius: 8px;
  font-size: .8em; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: background .15s;
}
.btn-approve:hover { background: #219a52; }
.btn-deny {
  background: none; color: #e74c3c;
  border: 1.5px solid rgba(231,76,60,.3);
  padding: 5px 12px; border-radius: 8px;
  font-size: .8em; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.btn-deny:hover { background: rgba(231,76,60,.07); }

/* ── Modal header + close (used by extension modal & new admin modal) ─── */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  background: linear-gradient(135deg, #1e3a5f, #2980b9);
  border-radius: 18px 18px 0 0;
  color: #fff;
  flex-shrink: 0;
}
.modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1em;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.btn-modal-close {
  width: 30px; height: 30px; border-radius: 7px; border: none;
  background: rgba(255,255,255,.18); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15em; cursor: pointer; transition: background .15s;
  flex-shrink: 0;
}
.btn-modal-close:hover { background: rgba(255,255,255,.32); }

/* ═══════════════════════════════════════════════════════════════════════════
   Admin User Modal — Redesigned (tabbed panel layout)
═══════════════════════════════════════════════════════════════════════════ */
.au-modal-box {
  max-width: 800px !important;
  width: 96vw;
  max-height: min(92vh, 580px) !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}
/* Header */
.au-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: linear-gradient(135deg, #1a2535 0%, #1e3a5f 60%, #2980b9 100%);
  flex-shrink: 0;
  border-radius: 18px 18px 0 0;
}
.au-header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.au-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25em; color: #fff; flex-shrink: 0;
}
.au-header-info { min-width: 0; }
.au-header-info h2 { font-size: 1em; font-weight: 700; color: #fff; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-email-display { font-size: .78em; color: rgba(255,255,255,.7); display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-header .btn-modal-close { background: rgba(255,255,255,.14); }
/* Body: sidebar + content */
.au-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.au-sidenav {
  width: 178px;
  flex-shrink: 0;
  background: #f5f6fa;
  border-right: 1px solid #e8e8e8;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.au-sidenav-label {
  font-size: .68em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #bbb;
  padding: 6px 12px 4px;
  margin-top: 6px;
}
.au-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  background: none;
  border-radius: 8px;
  color: #777;
  font-size: .84em;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
  width: 100%;
}
.au-tab:hover { background: #eef0f8; color: #333; }
.au-tab.active {
  background: rgba(41,128,185,.12);
  color: #2980b9;
}
.au-tab ion-icon { font-size: 1.1em; flex-shrink: 0; }
.au-tab-badge {
  margin-left: auto;
  background: #e74c3c;
  color: #fff;
  font-size: .65em;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 8px;
}
/* Content area */
.au-content {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px;
  min-width: 0;
}
.au-pane { display: none; }
.au-pane.active { display: block; }
.au-pane-title {
  font-size: .8em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #bbb;
  margin: 0 0 14px;
}
.au-pane-desc { font-size: .84em; color: #999; margin: -6px 0 16px; line-height: 1.5; }
/* Template options */
.au-tpl-list { display: flex; flex-direction: column; gap: 9px; }
.au-tpl-option { display: block; cursor: pointer; }
.au-tpl-option input[type=checkbox] { display: none; }
.au-tpl-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 2px solid #eee;
  border-radius: 11px;
  background: #fff;
  transition: all .15s;
}
.au-tpl-option:hover .au-tpl-card { border-color: #c0d6e8; background: #f7faff; }
.au-tpl-option input:checked + .au-tpl-card {
  border-color: #2980b9;
  background: rgba(41,128,185,.05);
}
.au-tpl-icon {
  width: 38px; height: 38px; border-radius: 9px;
  background: #f0f2f5;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3em; color: #aaa; flex-shrink: 0;
  transition: all .15s;
}
.au-tpl-option input:checked + .au-tpl-card .au-tpl-icon {
  background: rgba(41,128,185,.12);
  color: #2980b9;
}
.au-tpl-info strong { display: block; font-size: .88em; color: #333; font-weight: 700; }
.au-tpl-info span { font-size: .77em; color: #aaa; }
.au-tpl-check {
  margin-left: auto;
  width: 20px; height: 20px; border-radius: 50%;
  background: #eee;
  display: flex; align-items: center; justify-content: center;
  font-size: .75em; color: transparent;
  transition: all .15s;
}
.au-tpl-option input:checked + .au-tpl-card .au-tpl-check {
  background: #2980b9; color: #fff;
}
/* Footer */
.au-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 13px 22px;
  border-top: 1px solid #eee;
  background: #fafbfc;
  flex-shrink: 0;
  border-radius: 0 0 18px 18px;
}

/* ── Subscription: duration quick-select ──────────────────────────────── */
.au-dur-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.au-dur-btn {
  padding: 10px 0;
  border: 2px solid #dde1ea;
  border-radius: 10px;
  background: #fff;
  color: #666;
  font-size: .85em;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.au-dur-btn:hover { border-color: #2980b9; color: #2980b9; background: #f0f6fc; }
.au-dur-btn.selected { border-color: #2980b9; background: #2980b9; color: #fff; }
.au-sub-date-inp { margin-top: 0; font-size: .88em; }
.au-sub-due-label {
  font-size: .83em;
  color: #27ae60;
  margin-top: 5px;
  font-weight: 700;
  min-height: 18px;
}
.au-sub-due-label.overdue { color: #e74c3c; }

/* ── Payment history ──────────────────────────────────────────────────── */
.au-pay-history-section { margin-top: 18px; }
.au-section-sep {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #aaa;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.au-section-sep ion-icon { font-size: 1.15em; }
.au-pay-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
}
.au-pay-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #f8f9fb;
  border-radius: 9px;
  border-left: 3px solid #27ae60;
  font-size: .82em;
}
.au-pay-days {
  font-weight: 800;
  color: #27ae60;
  width: 54px;
  flex-shrink: 0;
  white-space: nowrap;
}
.au-pay-until { font-weight: 600; color: #333; flex: 1; }
.au-pay-meta { color: #b0b0b0; font-size: .88em; white-space: nowrap; }
.au-pay-empty { font-size: .83em; color: #c0c0c0; padding: 14px 0; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   Invoice Modal
═══════════════════════════════════════════════════════════════════════════ */
.inv-overlay { z-index: 2100; }
.inv-modal-box {
  max-width: 800px !important;
  width: 96vw;
  max-height: min(92vh, 700px) !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}
/* Header */
.inv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: linear-gradient(135deg, #1a3a2a 0%, #1a6b3c 60%, #27ae60 100%);
  border-radius: 18px 18px 0 0;
  flex-shrink: 0;
}
.inv-header-left { display: flex; align-items: center; gap: 14px; }
.inv-header-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2em; color: #fff; flex-shrink: 0;
}
.inv-title { font-size: 1em; font-weight: 700; color: #fff; margin: 0; }
.inv-subtitle { font-size: .78em; color: rgba(255,255,255,.7); display: block; margin-top: 2px; }
.inv-header .btn-modal-close { background: rgba(255,255,255,.14); }
/* Toolbar */
.inv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #eee;
  background: #fff;
  flex-shrink: 0;
}
.inv-stats-row { display: flex; gap: 22px; }
.inv-stat { text-align: center; }
.inv-stat-num { display: block; font-size: 1.3em; font-weight: 800; color: #333; line-height: 1.1; }
.inv-stat-lbl { font-size: .68em; color: #aaa; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.inv-stat.inv-stat-paid  .inv-stat-num { color: #27ae60; }
.inv-stat.inv-stat-pending .inv-stat-num { color: #e67e22; }
.inv-stat.inv-stat-overdue .inv-stat-num { color: #e74c3c; }
.btn-new-inv {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 9px; border: none;
  background: #27ae60; color: #fff;
  font-size: .84em; font-weight: 700; cursor: pointer; transition: all .15s;
}
.btn-new-inv:hover { background: #219a52; transform: translateY(-1px); }
/* New invoice form */
.inv-new-form {
  border-bottom: 1px solid #d8f0e2;
  background: linear-gradient(180deg, #f4fff8, #fff);
  flex-shrink: 0;
}
.inv-new-form.hidden { display: none; }
.inv-form-title {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px 0;
  font-size: .82em; font-weight: 800; color: #27ae60;
  text-transform: uppercase; letter-spacing: .05em;
}
.inv-form-body { padding: 12px 20px 8px; }
.inv-form-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 16px; margin-bottom: 10px;
}
.inv-period-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 5px;
}
.inv-period-btn {
  padding: 8px 0; border: 2px solid #dde1ea; border-radius: 8px;
  background: #fff; color: #666;
  font-size: .8em; font-weight: 700; cursor: pointer; transition: all .15s;
}
.inv-period-btn:hover { border-color: #27ae60; color: #27ae60; background: #f0fff5; }
.inv-period-btn.selected { border-color: #27ae60; background: #27ae60; color: #fff; }
.inv-amount-wrap { display: flex; gap: 6px; }
.inv-amount-wrap .form-input:first-child { flex: 1; }
.inv-currency-sel { width: 82px; flex-shrink: 0; }
.inv-next-info {
  display: flex; align-items: center; gap: 6px;
  font-size: .8em; color: #219a52; font-weight: 600;
  padding: 7px 12px; background: rgba(39,174,96,.09);
  border-radius: 8px; margin-top: 6px;
}
.inv-next-info.hidden { display: none; }
.inv-form-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 8px 20px 14px;
}
/* Invoice list body */
/* ── Invoice split layout ────────────────────────────────────────────────── */
.inv-split-wrap {
  display: flex; flex: 1; overflow: hidden; min-height: 0;
}
.inv-body {
  flex: 1; overflow-y: auto; min-width: 0;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: #f8f9fb;
  scrollbar-width: thin; scrollbar-color: #c9d0dc #f0f2f5;
}
.inv-body::-webkit-scrollbar { width: 6px; }
.inv-body::-webkit-scrollbar-track { background: #f0f2f5; }
.inv-body::-webkit-scrollbar-thumb { background: #c9d0dc; border-radius: 4px; }

/* ── Invoice compact row ─────────────────────────────────────────────────── */
.inv-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 8px 14px;
  border-radius: 10px; border: 1.5px solid #eaecf0;
  background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .12s;
  min-height: 46px;
}
.inv-row:hover   { border-color: #b8c5d6; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.inv-row.selected{ border-color: #2980b9; background: #f0f6fc; }

.inv-row-latefee { background: #fff9f5; border-color: #f5c5a0; }
.inv-row-latefee.selected { background: #fff3eb; border-color: #e67e22; }

.inv-row-left  { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.inv-row-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

.inv-row-num { font-size: .75em; font-weight: 800; color: #bbb; white-space: nowrap; }
.inv-row-latefee-tag {
  font-size: .63em; font-weight: 800; color: #e67e22;
  background: rgba(230,126,34,.12); padding: 2px 6px; border-radius: 6px; letter-spacing: .5px;
}
.inv-row-period {
  font-size: .72em; font-weight: 700; color: #bbb;
  background: #f0f2f5; padding: 2px 7px; border-radius: 8px;
}
.inv-row-amt { font-size: .88em; font-weight: 800; color: #222; white-space: nowrap; }

.inv-row-expand-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 7px; border: 1.5px solid #e0e0e0; background: none; color: #999;
  cursor: pointer; transition: all .15s; flex-shrink: 0; font-size: 1.05em;
}
.inv-row-expand-btn:hover { border-color: #2980b9; color: #2980b9; background: #f0f6fc; }
.inv-row.selected .inv-row-expand-btn { border-color: #2980b9; color: #2980b9; }

/* ── Days-left chip ──────────────────────────────────────────────────────── */
.inv-dl-chip {
  font-size: .7em; font-weight: 800; padding: 2px 8px; border-radius: 10px;
  white-space: nowrap; letter-spacing: .3px;
}
.inv-dl-ok    { background: rgba(39,174,96,.12);  color: #27ae60; }
.inv-dl-warn  { background: rgba(230,126,34,.14); color: #e67e22; }
.inv-dl-due   { background: rgba(231,76,60,.14);  color: #e74c3c; animation: pulse-due .8s infinite; }
.inv-dl-late  { background: rgba(231,76,60,.12);  color: #c0392b; }
.inv-dl-block { background: #2c1a1a; color: #ff9999; }
@keyframes pulse-due { 0%,100%{opacity:1} 50%{opacity:.55} }

/* ── Status badges ───────────────────────────────────────────────────────── */
.badge-inv-pending, .badge-inv-paid, .badge-inv-overdue, .badge-inv-cancelled, .badge-inv-late_fee {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 20px; font-size: .72em; font-weight: 700; white-space: nowrap;
}
.badge-inv-pending  { background: rgba(230,126,34,.12); color: #e67e22; }
.badge-inv-paid     { background: rgba(39,174,96,.12);  color: #27ae60; }
.badge-inv-overdue  { background: rgba(231,76,60,.12);  color: #e74c3c; }
.badge-inv-cancelled{ background: rgba(0,0,0,.06);      color: #aaa; }
.badge-inv-late_fee { background: rgba(230,126,34,.18); color: #c0392b; }

/* ── Invoice drawer ──────────────────────────────────────────────────────── */
.inv-drawer {
  width: 0; overflow: hidden; flex-shrink: 0;
  transition: width .22s ease; background: #fff;
  border-left: 0 solid #eaecf0; display: flex; flex-direction: column;
}
.inv-drawer.open {
  width: 310px; border-left-width: 1.5px; overflow: visible;
}
.inv-drawer-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px 11px 10px;
  border-bottom: 1.5px solid #eaecf0; flex-shrink: 0; background: #fff;
}
.inv-drawer-close-btn {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #e0e0e0; border-radius: 8px; background: none; color: #777;
  cursor: pointer; font-size: 1em; transition: all .15s; flex-shrink: 0;
}
.inv-drawer-close-btn:hover { border-color: #e74c3c; color: #e74c3c; }
.inv-drawer-heading {
  font-size: .82em; font-weight: 800; color: #1a2535; letter-spacing: .3px; white-space: nowrap;
}
.inv-drawer-content {
  flex: 1; overflow-y: auto; padding: 14px;
  scrollbar-width: thin; scrollbar-color: #c9d0dc #f0f2f5;
}
.inv-drawer-content::-webkit-scrollbar { width: 4px; }
.inv-drawer-content::-webkit-scrollbar-thumb { background: #c9d0dc; border-radius: 3px; }

/* ── Invoice Drawer – detail rows ───────────────────────────────────────── */
.idr-section {
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid #f0f2f5;
}
.idr-section:last-child { border-bottom: none; margin-bottom: 0; }
.idr-status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.idr-status-badge { font-size: .76em !important; padding: 3px 11px !important; }
.idr-latefee-label {
  font-size: .71em; font-weight: 700; color: #e67e22; font-style: italic;
}
.idr-days {
  font-size: .75em; font-weight: 600; padding: 5px 10px;
  border-radius: 7px; margin-top: 4px;
}
.idr-days-ok    { background: rgba(39,174,96,.09);  color: #27ae60; }
.idr-days-due   { background: rgba(231,76,60,.09);  color: #e74c3c; }
.idr-days-late  { background: rgba(231,76,60,.08);  color: #c0392b; }
.idr-days-block { background: #fff0f0; color: #8b0000; font-weight: 800; }

.idr-details { display: flex; flex-direction: column; gap: 0; }
.idr-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 5px 0; font-size: .78em; border-bottom: 1px dotted #f0f2f5;
}
.idr-row:last-child { border-bottom: none; }
.idr-row-notes { flex-direction: column; gap: 3px; align-items: flex-start; }
.idr-lbl { color: #aaa; font-weight: 600; flex-shrink: 0; min-width: 70px; }
.idr-val { color: #333; font-weight: 700; text-align: right; word-break: break-word; }
.idr-val-amt     { color: #1a2535; font-size: 1.1em; }
.idr-val-overdue { color: #e74c3c; }
.idr-val-paid    { color: #27ae60; }
.idr-val-note    { color: #888; font-style: italic; font-weight: 400; text-align: left; }
.idr-val-meta    { color: #bbb; font-size: .9em; font-weight: 400; }

/* ── Invoice drawer action buttons ──────────────────────────────────────── */
.idr-actions { display: flex; flex-direction: column; gap: 7px; }
.idr-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 8px; font-size: .78em; font-weight: 700;
  cursor: pointer; transition: all .15s; border: 1.5px solid transparent; width: 100%;
}
.idr-btn ion-icon { font-size: 1.15em; flex-shrink: 0; }
.idr-btn-primary { border-color: #27ae60; color: #27ae60; background: rgba(39,174,96,.07); }
.idr-btn-primary:hover { background: #27ae60; color: #fff; }
.idr-btn-blue    { border-color: #2980b9; color: #2980b9; background: rgba(41,128,185,.07); }
.idr-btn-blue:hover { background: #2980b9; color: #fff; }
.idr-btn-print   { border-color: #1a2535; color: #1a2535; background: rgba(26,37,53,.05); }
.idr-btn-print:hover { background: #1a2535; color: #fff; }
.idr-btn-email   { border-color: #8e44ad; color: #8e44ad; background: rgba(142,68,173,.07); }
.idr-btn-email:hover { background: #8e44ad; color: #fff; }
.idr-btn-latefee { border-color: #e67e22; color: #e67e22; background: rgba(230,126,34,.07); }
.idr-btn-latefee:hover { background: #e67e22; color: #fff; }
.idr-btn-disabled, .idr-btn:disabled {
  border-color: #e0e0e0 !important; color: #ccc !important; background: none !important;
  cursor: not-allowed !important; pointer-events: none;
}
.idr-btn-cancel  { border-color: #ddd; color: #999; background: none; }
.idr-btn-cancel:hover { background: #f5f5f5; color: #555; }
.idr-btn-delete  { border-color: #fad7d7; color: #c0392b; background: rgba(231,76,60,.06); }
.idr-btn-delete:hover { background: #c0392b; color: #fff; border-color: #c0392b; }

/* ── Blocked overlay ─────────────────────────────────────────────────────── */
.blocked-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10,16,26,.88); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.blocked-box {
  background: #fff; border-radius: 20px; padding: 40px 32px;
  max-width: 400px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.blocked-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg,#e74c3c,#c0392b);
  display: flex; align-items: center; justify-content: center;
  font-size: 2em; color: #fff; margin: 0 auto 18px;
}
.blocked-title { font-size: 1.25em; font-weight: 900; color: #1a2535; margin-bottom: 10px; }
.blocked-msg { font-size: .86em; color: #888; line-height: 1.6; margin-bottom: 24px; }
.blocked-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.blocked-profile-btn, .blocked-logout-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 9px; font-size: .8em; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.blocked-profile-btn { background: linear-gradient(135deg,#1e3a5f,#2980b9); color: #fff; border: none; }
.blocked-profile-btn:hover { opacity: .88; }
.blocked-logout-btn  { border: 1.5px solid #e0e0e0; background: #fff; color: #888; }
.blocked-logout-btn:hover { border-color: #aaa; color: #333; }

/* ── Company mail config section ─────────────────────────────────────────── */
.co-mail-section { border-top: 1.5px solid #f0f2f5; padding-top: 16px; margin-top: 4px; }
.co-mail-heading {
  display: flex; align-items: center; gap: 6px;
  font-size: .82em; font-weight: 800; color: #555; letter-spacing: .3px;
  margin-bottom: 12px !important; text-transform: uppercase;
}
.co-mail-grid {
  display: grid; grid-template-columns: 1fr 100px;
  gap: 10px;
}
@media (max-width: 480px) {
  .co-mail-grid { grid-template-columns: 1fr; }
  .inv-drawer.open { width: 100%; position: absolute; inset: 0; z-index: 10; border-left: none; }
}

/* ── Subscription status card (admin user modal) ──────────────────────── */
.au-sub-status-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: #f8f9fb;
  border-radius: 12px; border: 1.5px solid #eef0f5;
  margin-bottom: 12px;
}
.au-sub-status-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#1e3a5f,#2980b9);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1em; color: #fff; flex-shrink: 0;
}
.au-sub-status-body { flex: 1; min-width: 0; }
.au-sub-status-detail { font-size: .78em; color: #999; margin-top: 2px; }
/* Invoice summary card */
.au-inv-card {
  border-radius: 12px; border: 1.5px solid #eee; overflow: hidden; margin-bottom: 14px;
}
.au-inv-card-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid #f5f5f5; background: #fff;
}
.au-inv-card-label {
  display: flex; align-items: center; gap: 6px;
  font-size: .79em; color: #999; font-weight: 600;
}
.au-inv-card-val { font-size: .82em; color: #333; font-weight: 700; }
.au-inv-open-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 13px 14px;
  background: #fff; border: none; cursor: pointer;
  font-size: .86em; font-weight: 700; color: #2980b9; transition: background .15s;
}
.au-inv-open-btn:hover { background: #f0f6fc; }
.au-inv-open-btn > span { display: flex; align-items: center; gap: 7px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Profile Panel — tabbed redesign
═══════════════════════════════════════════════════════════════════════════ */
.prf-wrap { max-width: 560px; margin: 0 auto; padding: 24px 16px 40px; }
.prf-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(135deg,#1a2535 0%,#1e3a5f 55%,#2980b9 100%);
  border-radius: 16px 16px 0 0; color: #fff;
}
.prf-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5em; color: #fff; flex-shrink: 0;
}
.prf-hero-info { flex: 1; min-width: 0; }
.prf-email { font-size: .93em; font-weight: 700; color: #fff; word-break: break-all; }
.prf-hero .role-badge { margin-top: 5px; display: inline-block; font-size: .74em; opacity: .88; }
.btn-prf-logout {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  border: 1.5px solid rgba(231,76,60,.55);
  background: rgba(231,76,60,.12); color: #e74c3c;
  font-size: .8em; font-weight: 700; cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.btn-prf-logout:hover { background: #e74c3c; color: #fff; border-color: #e74c3c; }
.prf-tabs {
  display: flex; background: #f5f6fa;
  border: 1.5px solid #eee; border-top: none; margin-bottom: 20px;
}
.prf-tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px; border: none; background: none;
  font-size: .85em; font-weight: 700; color: #999; cursor: pointer; transition: all .15s;
}
.prf-tab:hover { background: #eef0f8; color: #444; }
.prf-tab.active { background: #fff; color: #2980b9; box-shadow: inset 0 -2px 0 #2980b9; }
.prf-pane { display: none; }
.prf-pane.active { display: block; }
.prf-section {
  background: #fff; border-radius: 14px; padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  border: 1.5px solid #f0f0f0; margin-bottom: 16px;
  display: flex; flex-direction: column;
}
.prf-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .75em; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: #bbb; margin-bottom: 16px;
}
/* Profile subscription status */
.prf-sub-status-wrap { margin-bottom: 4px; }
.prf-sub-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 12px; margin-bottom: 4px;
}
.prf-sub-active  { background: rgba(39,174,96,.07);  border: 1.5px solid rgba(39,174,96,.2); }
.prf-sub-warning { background: rgba(230,126,34,.07); border: 1.5px solid rgba(230,126,34,.2); }
.prf-sub-overdue { background: rgba(231,76,60,.07);  border: 1.5px solid rgba(231,76,60,.2); }
.prf-sub-free    { background: rgba(41,128,185,.07); border: 1.5px solid rgba(41,128,185,.2); }
.prf-sub-none    { background: #f8f9fb; border: 1.5px solid #eee; }
.prf-sub-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15em; flex-shrink: 0;
}
.prf-sub-active .prf-sub-icon  { background: rgba(39,174,96,.15);  color: #27ae60; }
.prf-sub-warning .prf-sub-icon { background: rgba(230,126,34,.15); color: #e67e22; }
.prf-sub-overdue .prf-sub-icon { background: rgba(231,76,60,.15);  color: #e74c3c; }
.prf-sub-free .prf-sub-icon    { background: rgba(41,128,185,.15); color: #2980b9; }
.prf-sub-none .prf-sub-icon    { background: #ececec; color: #bbb; }
.prf-sub-title { font-size: .88em; font-weight: 700; color: #333; }
.prf-sub-desc  { font-size: .78em; color: #999; margin-top: 2px; }
/* Profile invoice list */
.prf-invoice-list { display: flex; flex-direction: column; gap: 9px; }
.prf-inv-entry {
  border-radius: 10px; border: 1.5px solid #eee;
  padding: 11px 14px; background: #fff;
}
.prf-inv-actions { margin-top: 8px; }
.prf-inv-print-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 7px; cursor: pointer;
  font-size: .76em; font-weight: 700;
  border: 1.5px solid #1a2535; background: none; color: #1a2535;
  transition: background .18s, color .18s;
}
.prf-inv-print-btn:hover { background: #1a2535; color: #fff; }
.prf-inv-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.prf-inv-left { display: flex; align-items: center; gap: 8px; }
.prf-inv-num    { font-size: .77em; font-weight: 800; color: #bbb; }
.prf-inv-period { font-size: .74em; color: #ccc; background: #f0f2f5; padding: 1px 7px; border-radius: 10px; }
.prf-inv-amt    { font-size: .88em; font-weight: 800; color: #333; }
.prf-inv-dates  { display: flex; flex-wrap: wrap; gap: 8px; font-size: .74em; color: #bbb; }
.prf-inv-paid   { color: #27ae60 !important; }
.prf-inv-note   { font-size: .74em; color: #ccc; font-style: italic; margin-top: 5px; }

/* ══════════════════════════════════════════════════════════════════════════
   Company Signature Upload
══════════════════════════════════════════════════════════════════════════ */
.co-sig-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.co-sig-preview { max-height: 54px; max-width: 180px; object-fit: contain; border: 1px solid #e0e0e0; border-radius: 6px; background: repeating-conic-gradient(#e8e8e8 0% 25%, #fff 0% 50%) 0 0 / 12px 12px; padding: 3px; }
.co-sig-upload-btn {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 6px 14px; border-radius: 8px; font-size: .83em; font-weight: 700;
  border: 1.5px solid #2c6fad; color: #2c6fad; background: none;
  transition: background .18s, color .18s;
}
.co-sig-upload-btn:hover { background: #2c6fad; color: #fff; }
.co-sig-clear-btn {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  padding: 6px 12px; border-radius: 8px; font-size: .82em; font-weight: 600;
  border: 1.5px solid #e53e3e; color: #e53e3e; background: none;
  transition: background .18s, color .18s;
}
.co-sig-clear-btn:hover { background: #e53e3e; color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   Theme Toggle
══════════════════════════════════════════════════════════════════════════ */
.theme-toggle-btn {
  background: none; border: none; padding: 3px;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center;
  border-radius: 20px;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.theme-track {
  display: block; width: 50px; height: 26px;
  border-radius: 13px;
  background: linear-gradient(135deg, #6dd5fa, #2980b9);
  position: relative;
  transition: background .45s ease;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.1);
}
body.dark .theme-track { background: linear-gradient(135deg, #1a2535, #2c3e6b); }
.theme-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  display: flex; align-items: center; justify-content: center;
}
body.dark .theme-thumb { transform: translateX(24px); background: #c8d8f0; }
.theme-icon { position: absolute; font-size: .75em; transition: opacity .3s ease, transform .35s ease; }
.theme-icon-sun  { color: #f5a623; opacity: 1;  transform: rotate(0deg) scale(1); }
.theme-icon-moon { color: #2c3e50; opacity: 0;  transform: rotate(-70deg) scale(.3); }
body.dark .theme-icon-sun  { opacity: 0;  transform: rotate(70deg) scale(.3); }
body.dark .theme-icon-moon { opacity: 1;  transform: rotate(0deg) scale(1); }

/* ══════════════════════════════════════════════════════════════════════════
   Dark Mode
══════════════════════════════════════════════════════════════════════════ */
body.dark {
  background: #0a0a0a;
  color: #e8e8e8;
}
body.dark .navbar {
  background: rgba(10,10,10,.97);
  border-bottom-color: #1f1f1f;
  box-shadow: 0 2px 20px rgba(0,0,0,.6);
}
body.dark .nav-title { color: #f0f0f0; }
body.dark .nav-profile-btn { background: rgba(231,76,60,.12); border-color: rgba(231,76,60,.3); }
body.dark .nav-profile-btn:hover { background: #e74c3c; }
/* Dark mode — notification bell */
body.dark .notif-bell-btn:hover { background: rgba(231,76,60,.15); }
body.dark .notif-dropdown {
  background: #111111; border-color: #2a2a2a;
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
}
body.dark .notif-dropdown-hdr { border-color: #222; }
body.dark .notif-dropdown-title { color: #f0f0f0; }
body.dark .notif-mark-all-btn { color: #e74c3c; }
body.dark .notif-mark-all-btn:hover { background: rgba(231,76,60,.1); }
body.dark .notif-item { border-color: #1e1e1e; }
body.dark .notif-item:hover { background: #181818; }
body.dark .notif-item.unread { background: #1a0f0f; }
body.dark .notif-item.unread:hover { background: #220e0e; }
body.dark .notif-item-title { color: #f0f0f0; }
body.dark .notif-item-msg { color: #888; }
body.dark .notif-badge { border-color: #0a0a0a; }
body.dark .notif-empty { color: #555; }

body.dark .nav-back-btn { color: #aaa; }
body.dark .nav-back-btn:hover { color: #f0f0f0; }
body.dark .dropdown-menu {
  background: #111111; border-color: #2a2a2a;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
body.dark .dropdown-item { color: #e0e0e0; }
body.dark .dropdown-item:hover { background: #1f1f1f; }
body.dark .form-input,
body.dark .search-input,
body.dark .sort-select,
body.dark .form-textarea,
body.dark .form-select {
  background: #141414; border-color: #2a2a2a; color: #e0e0e0;
}
body.dark .form-input::placeholder,
body.dark .search-input::placeholder { color: #555; }
body.dark .form-label { color: #aaa; }
body.dark .controls-section { background: #111; border-color: #222; }
body.dark .card { background: #111; border-color: #222; }
body.dark .card-name  { color: #eee; }
body.dark .card-count { color: #666; }
body.dark .card-img-wrap { background: #0a0a0a; }
body.dark .card-img-wrap.no-img { background: #111; }
body.dark .brand-hero  { background: #111; border-color: #222; }
body.dark .group-hero  { background: #111; border-color: #222; }
body.dark .brand-hero-name  { color: #eee; }
body.dark .brand-hero-count { color: #666; }
body.dark .declarations-section { background: #111; border-color: #222; }
body.dark .decl-section-title   { color: #999; border-bottom-color: #222; }
body.dark .decl-card { background: #0d0d0d; border-color: #222; }
body.dark .decl-card:hover { background: #161616; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
body.dark .decl-card-name { color: #eee; }
body.dark .decl-card-meta { color: #666; }
body.dark .login-card { background: #111; border-color: #222; box-shadow: 0 8px 40px rgba(0,0,0,.7); }
body.dark .login-title    { color: #f0f0f0; }
body.dark .login-subtitle { color: #666; }
body.dark .login-divider  { border-color: #222; }
body.dark .profile-card   { background: #111; border-color: #222; }
body.dark .prf-name  { color: #f0f0f0; }
body.dark .prf-email { color: #666; }
body.dark .prf-tabs  { border-bottom-color: #222; }
body.dark .prf-tab   { color: #666; }
body.dark .prf-tab.active { color: #e74c3c; border-bottom-color: #e74c3c; }
body.dark .prf-section { background: #0d0d0d; border-color: #222; }
body.dark .prf-section h3  { color: #aaa; }
body.dark .prf-inv-entry   { background: #111; border-color: #222; }
body.dark .prf-inv-amt     { color: #eee; }
body.dark .modal-box  { background: #111; border-color: #222; }
body.dark .modal-hdr  { background: linear-gradient(135deg, #0d0d0d, #1a1a1a); border-bottom-color: #222; }
body.dark .modal-title{ color: #f0f0f0; }
body.dark .modal-body label { color: #aaa; }
body.dark .modal-actions { background: #111; border-top-color: #2a2a2a; }
body.dark .custom-group-form { background: #1a1a1a; border-color: #2a2a2a; box-shadow:0 2px 12px rgba(0,0,0,.3); }
body.dark .group-picker { border-color: #2a2a2a; }
body.dark .group-picker-list { background: #0d0d0d; }
body.dark .group-picker-preview { background: #161616; border-left-color: #2a2a2a; }
body.dark .gp-placeholder { color: #444; }
body.dark .gp-item { border-color: #333; color: #aaa; background: #111; }
body.dark .gp-item:hover { border-color: #e74c3c; color: #e74c3c; background: rgba(231,76,60,.08); }
body.dark .gp-section-hdr { color: #444; }
body.dark .divider-or { color: #333; }
body.dark .btn-add-custom { background: rgba(46,204,113,.08); border-color: rgba(46,204,113,.2); color: #2ecc71; }
body.dark .admin-shell   { background: #080808; }
body.dark .admin-sidebar { background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%); border-right: 1px solid #1f1f1f; }
body.dark .admin-content { background: #0d0d0d; }
body.dark .admin-section-hdr h2 { color: #f0f0f0; }
body.dark .stat-card { background: #111; border-color: #222; }
body.dark .stat-label { color: #666; }
body.dark .stat-value { color: #f0f0f0; }
body.dark .users-table-wrap { background: #111; border-color: #222; }
body.dark .users-table thead tr { background: linear-gradient(135deg, #1a1a1a 0%, #111 100%); }
body.dark .users-table th  { color: #e74c3c; }
body.dark .users-table td  { border-color: #1c1c1c; color: #e0e0e0; }
body.dark .users-table tbody tr:hover td { background: #161616; }
body.dark .company-form-card  { background: #111; border-color: #222; }
body.dark .company-form-card .prf-section { background: #0d0d0d; border-color: #222; }
body.dark .au-modal-box { background: #111 !important; }
body.dark .au-header    { background: linear-gradient(135deg, #0d0d0d, #1a1a1a) !important; }
body.dark .au-sidenav   { background: #0d0d0d; border-right-color: #1f1f1f; }
body.dark .au-nav-btn   { color: #777; }
body.dark .au-nav-btn:hover  { background: rgba(255,255,255,.04); }
body.dark .au-nav-btn.active { background: rgba(231,76,60,.12); color: #e74c3c; }
body.dark .au-content   { background: #111; }
body.dark .au-footer     { background: #0d0d0d; border-top-color: #1f1f1f; }
body.dark .au-tpl-card  { background: #0d0d0d; border-color: #222; }
body.dark .au-tpl-card:hover { background: #161616; }
body.dark .au-tpl-name  { color: #eee; }
body.dark .inv-modal-box { background: #111 !important; }
body.dark .inv-header   { background: linear-gradient(135deg, #0d0d0d, #1a1a1a); border-bottom-color: #222; }
body.dark .inv-toolbar  { background: #0d0d0d; border-bottom-color: #1f1f1f; }
body.dark .inv-entry    { background: #0d0d0d; border-color: #222; }
body.dark .inv-entry:hover { background: #161616; }
body.dark .inv-entry-ref { color: #666; }
body.dark .inv-entry-amt { color: #eee; }
body.dark .inv-new-form { background: #0d0d0d; border-color: #222; }
body.dark .inv-stat      { background: #111; border-color: #222; }
body.dark .payment-banner { background: linear-gradient(135deg, #1a0a0a, #220a0a); border-color: #3d1111; }
body.dark .pay-banner-title { color: #ff6b6b; }
body.dark .pay-banner-sub   { color: #a04040; }
body.dark .upload-zone { background: #0d0d0d; border-color: #222; }
body.dark .upload-zone:hover { background: #131313; border-color: #e74c3c; }
body.dark .contract-list-card { background: #111; border-color: #222; }
body.dark .contract-list-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.5); }
body.dark .contract-list-email { color: #eee; }
body.dark .contract-list-meta  { color: #666; }

/* Dark mode — activity log table */
body.dark .events-table thead tr { background: linear-gradient(135deg, #111 0%, #1a1a1a 100%); }
body.dark .events-table th { color: #e74c3c; }
body.dark .events-table td { border-color: #1c1c1c; color: #e0e0e0; }
body.dark .events-table td code { background: #0d0d0d; border-color: #222; color: #aaa; }
body.dark .events-table tbody tr:hover td { background: #161616; }
body.dark .ev-lock td { background: rgba(231,76,60,.05); }
body.dark .ev-fail td { background: rgba(243,156,18,.04); }

/* Dark mode — last-login-ago tag */
body.dark .last-login-ago { background: #1a1a1a; color: #666; }

/* Dark mode — logout btn already red, just tweak dark hover */
body.dark .btn-prf-logout { border-color: rgba(231,76,60,.5); background: rgba(231,76,60,.1); color: #e74c3c; }
body.dark .btn-prf-logout:hover { background: #e74c3c; color: #fff; }

/* Dark mode — theme track */
body.dark .theme-track { background: linear-gradient(135deg, #1a1a1a, #2a1a1a); }

/* Dark mode — inv-drawer */
body.dark .inv-drawer { background: #0d0d0d; border-left-color: #1f1f1f; }
body.dark .inv-drawer-topbar { background: #0a0a0a; border-bottom-color: #1f1f1f; }
body.dark .inv-row { background: #111; border-color: #1f1f1f; }
body.dark .inv-row:hover { background: #161616; }
body.dark .inv-row.selected { border-left-color: #e74c3c; background: #1a0a0a; }
body.dark .inv-row-num { color: #666; }
body.dark .inv-row-amt { color: #eee; }
body.dark .inv-body { background: #111; }

/* Dark mode — blocked overlay */
body.dark .blocked-box { background: #111; border-color: #2a1a1a; }
body.dark .blocked-title { color: #ff6b6b; }
body.dark .blocked-msg { color: #888; }

/* Dark mode — uinv preview */
body.dark .uinv-preview-box { background: #111; }
body.dark .uinv-preview-hdr,
body.dark .uinv-preview-footer { border-color: #222; }
body.dark .uinv-preview-title { color: #f0f0f0; }
body.dark .uinv-detail-table tr + tr td { border-color: #1c1c1c; }
body.dark .uinv-dl { color: #666; }
body.dark .uinv-dv { color: #eee; }
body.dark .inv-custom-id-prefix { background: #0d0d0d; border-color: #2a2a2a; color: #555; }

/* Admin sidebar active item — red accent */
body.dark .admin-sidebar .adm-nav-btn.active,
body.dark .admin-sidebar .adm-nav-item.active { color: #e74c3c; border-left-color: #e74c3c; }



/* ══════════════════════════════════════════════════════════════════════════
   Contracts Section
══════════════════════════════════════════════════════════════════════════ */
/* Reset app color bleed inside the contract preview */
#contractPreviewArea {
  color: #1a1a1a;
  font-family: 'Times New Roman', Georgia, serif;
}
#contractPreviewArea * { color: inherit; }
#contractPreviewArea .contract-title,
#contractPreviewArea .party-name,
#contractPreviewArea .clause-title,
#contractPreviewArea .payment-amount,
#contractPreviewArea .sig-name       { color: #1a2535; }
#contractPreviewArea .clause-body,
#contractPreviewArea .party-detail,
#contractPreviewArea .payment-detail { color: #222; }
#contractPreviewArea .contract-preamble { color: #333; }
#contractPreviewArea .contract-subtitle,
#contractPreviewArea .contract-meta,
#contractPreviewArea .sig-role,
#contractPreviewArea .sig-line,
#contractPreviewArea .contract-closing { color: #555; }
#contractPreviewArea .party-role     { color: #999; }
#contractPreviewArea .payment-box.free .payment-label { color: #2980b9 !important; }
#contractPreviewArea .payment-box.paid .payment-label { color: #27ae60 !important; }
#contractPreviewArea .payment-box.pkg  .payment-label { color: #6366f1 !important; }
#contractPreviewArea .payment-box.pkg  { border-color: #6366f1 !important; background: rgba(99,102,241,.04) !important; }
.contracts-list { display: flex; flex-direction: column; gap: 12px; }
.contract-list-card {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-radius: 12px; padding: 16px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  border: 1.5px solid #f0f0f0;
  transition: box-shadow .15s;
}
.contract-list-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.09); }
.contract-list-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #1a2535, #2980b9);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2em; font-weight: 800; color: #fff; letter-spacing: -1px;
}
.contract-list-info { flex: 1; min-width: 0; }
.contract-list-email { font-size: .93em; font-weight: 700; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contract-list-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: .8em; color: #888; }
.ctag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 20px; font-size: .75em; font-weight: 700;
}
.ctag ion-icon { font-size: .9em; }
.ctag-free { background: rgba(41,128,185,.1);  color: #2980b9; }
.ctag-paid { background: rgba(39,174,96,.1);   color: #27ae60; }
.ctag-none { background: rgba(0,0,0,.05);       color: #aaa; }
.btn-gen-contract {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #1a2535, #2980b9);
  color: #fff; border: none; border-radius: 8px;
  font-size: .82em; font-weight: 700; cursor: pointer;
  transition: opacity .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn-gen-contract:hover { opacity: .88; box-shadow: 0 4px 14px rgba(41,128,185,.35); }
.contract-doc {
  background: #fff; width: 780px; max-width: 100%;
  box-shadow: 0 4px 32px rgba(0,0,0,.22);
  padding: 54px 62px;
  font-family: 'Times New Roman', Georgia, serif;
  color: #1a1a1a; font-size: 14px; line-height: 1.65;
  position: relative; overflow: hidden; isolation: isolate;
}
.contract-seal-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 32px; }
.contract-seal {
  width: 76px; height: 76px; border-radius: 50%;
  border: 3px solid #1a2535;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35em; font-weight: 900; color: #1a2535;
  letter-spacing: 1px; flex-shrink: 0; font-family: sans-serif;
}
.contract-title-block { text-align: center; }
.contract-title { font-size: 1.3em; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #1a2535; }
.contract-subtitle { font-size: .88em; color: #555; margin-top: 5px; font-style: italic; }
.contract-meta {
  display: flex; gap: 36px; justify-content: flex-end;
  font-size: .83em; color: #555;
  margin-bottom: 26px;
  border-top: 2.5px solid #1a2535; border-bottom: 1px solid #ddd;
  padding: 9px 0;
}
.contract-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 26px; }
.party-box { border: 1px solid #bbb; border-radius: 6px; padding: 14px 16px; }
.party-role { font-size: .7em; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #999; margin-bottom: 5px; font-family: sans-serif; }
.party-name { font-size: .92em; font-weight: 700; color: #1a2535; margin-bottom: 4px; }
.party-detail { font-size: .8em; color: #555; line-height: 1.65; }
.contract-preamble {
  font-size: .86em; color: #444; margin-bottom: 22px; font-style: italic;
  padding: 11px 14px; background: #f8f9fa;
  border-left: 3px solid #1a2535; border-radius: 0 5px 5px 0;
}
.contract-clause { margin-bottom: 18px; }
.clause-title {
  font-size: .79em; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: #1a2535;
  margin-bottom: 7px; padding-bottom: 5px;
  border-bottom: 1px solid #e8e8e8; font-family: sans-serif;
}
.clause-body { font-size: .87em; color: #333; line-height: 1.75; }
.clause-body ul { padding-left: 18px; margin-top: 6px; }
.clause-body li { margin-bottom: 4px; }
.payment-box { border: 2px solid #ccc; border-radius: 8px; padding: 15px 18px; margin: 8px 0; position: relative; overflow: hidden; }
.payment-box.free { border-color: #2980b9; background: rgba(41,128,185,.04); }
.payment-box.paid { border-color: #27ae60; background: rgba(39,174,96,.04); }
.payment-box.pkg  { border-color: #6366f1; background: linear-gradient(135deg,rgba(99,102,241,.06) 0%,rgba(139,92,246,.04) 100%); }
.payment-box.pkg::before { content:''; position:absolute; top:-28px; right:-28px; width:90px; height:90px; border-radius:50%; background:rgba(99,102,241,.08); pointer-events:none; }
.payment-box-badge { position:absolute; top:8px; right:10px; font-size:.62em; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:#6366f1; color:#fff; padding:2px 7px; border-radius:20px; }
.payment-label { font-size: .7em; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; font-family: sans-serif; }
.payment-box.free .payment-label { color: #2980b9; }
.payment-box.paid .payment-label { color: #27ae60; }
.payment-box.pkg  .payment-label { color: #6366f1; font-size:.82em; font-weight:900; text-transform:none; letter-spacing:.01em; }
.payment-amount { font-size: 1.35em; font-weight: 900; color: #1a2535; margin-bottom: 3px; }
.payment-box.pkg .payment-amount { color:#4f46e5; }
.payment-period { font-size:.6em; font-weight:600; color:#9ca3af; vertical-align:middle; }
.payment-detail { font-size: .8em; color: #666; }
.payment-box.pkg .payment-detail { color:#555; line-height:1.7; }
.contract-closing {
  font-size: .86em; color: #555; font-style: italic;
  text-align: center; margin: 28px 0 36px;
  padding-top: 18px; border-top: 1px solid #eee;
}
.signatures-row { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; }
.signature-col .sig-role { font-size: .7em; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #999; font-family: sans-serif; }
.signature-col .sig-name { font-size: .88em; font-weight: 700; color: #1a2535; margin-top: 4px; }
.signature-col .sig-extra { font-size: .78em; color: #777; margin-top: 2px; }
.signature-col .sig-line { margin-top: 34px; border-top: 1px solid #333; font-size: .76em; color: #888; padding-top: 4px; }
/* Signature image size in contract preview modal */
.cdoc-page .sig-img { max-height: 72px; max-width: 160px; object-fit: contain; display: block; margin: 6px 0 4px; }
@media print {
  /* Hide everything except the contract document */
  body > *:not(#contractModal) { display: none !important; }
  #contractModal { display: block !important; position: static !important; z-index: auto !important; background: none !important; overflow: visible !important; }
  #contractModal > div { height: auto !important; background: none !important; }
  #contractModal > div > div:first-child { display: none !important; } /* hide header bar */
  #contractPreviewArea { overflow: visible !important; padding: 0 !important; background: none !important; }
  .contract-doc {
    box-shadow: none !important;
    width: 100% !important;
    padding: 0 !important;
    font-size: 10pt !important;
    line-height: 1.42 !important;
  }
  @page { size: A4 portrait; margin: 13mm 19mm; }
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ── Document Catalogue Viewer ──────────────────────────────────────────── */
.cdoc-viewer { display:flex; flex-direction:column; height:100%; }

.cdoc-topbar {
  display:flex; align-items:center; justify-content:center; gap:20px;
  padding:10px 20px; background:#374151; flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.cdoc-arrow-btn {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.13); border:1.5px solid rgba(255,255,255,.2);
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.18em; flex-shrink:0;
  transition:background .15s, transform .12s, box-shadow .15s;
}
.cdoc-arrow-btn:hover:not(:disabled) {
  background:rgba(255,255,255,.26); transform:scale(1.09);
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.cdoc-arrow-btn:active:not(:disabled) { transform:scale(.97); }
.cdoc-arrow-btn:disabled { opacity:.22; cursor:not-allowed; }

.cdoc-pager {
  display:flex; flex-direction:column; align-items:center; min-width:90px;
  font-family:sans-serif; user-select:none;
}
.cdoc-pager-label { font-size:.65em; color:#9ca3af; text-transform:uppercase; letter-spacing:.08em; line-height:1; }
.cdoc-pager-num   { font-size:.9em;  color:#e5e7eb; font-weight:700; margin-top:2px; }

.cdoc-stage {
  flex:1; overflow:auto; background:#6b7280;
  display:flex; justify-content:center;
  padding:32px 24px 48px; position:relative;
}

.cdoc-page {
  display:none;
  width:100%; max-width:680px; min-height:960px;
  background:#fff; color:#1a1a1a;
  box-shadow:0 8px 44px rgba(0,0,0,.38);
  padding:48px 56px 52px;
  align-self:flex-start;
  position:relative; overflow:hidden;
  animation-duration:.28s; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
}
.cdoc-page.active { display:block; }
.cdoc-page.anim-from-right { animation-name:cdocFromRight; }
.cdoc-page.anim-from-left  { animation-name:cdocFromLeft; }

/* contract doc resets inside viewer pages */
.cdoc-page .contract-doc {
  box-shadow:none; padding:0; width:100%;
  font-size:13.5px; line-height:1.52;
  color:#1a1a1a;
}
.cdoc-page .contract-doc * { color:inherit; }
.cdoc-page .contract-title  { color:#1a2535; }
.cdoc-page .clause-title    { color:#1a2535; }
.cdoc-page .clause-body     { color:#222; }
.cdoc-page .party-role      { color:#2980b9; }
.cdoc-page .party-name      { color:#1a2535; }
.cdoc-page .party-detail    { color:#444; }
.cdoc-page .contract-preamble { color:#444; }
.cdoc-page .contract-closing  { color:#555; }
.cdoc-page .sig-role        { color:#1a2535; }
.cdoc-page .sig-name        { color:#222; }
.cdoc-page .sig-extra       { color:#777; }
.cdoc-page .sig-line        { color:#888; }
.cdoc-page .payment-label   { color:#2980b9; }
.cdoc-page .payment-amount  { color:#1a2535; }
.cdoc-page .payment-detail  { color:#555; }

.cdoc-foot {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:36px; padding-top:10px;
  border-top:.5px solid #ddd;
  font-family:sans-serif; font-size:.7em; color:#bbb;
  letter-spacing:.02em;
}

@keyframes cdocFromRight {
  from { opacity:0; transform:translateX(54px); }
  to   { opacity:1; transform:none; }
}
@keyframes cdocFromLeft {
  from { opacity:0; transform:translateX(-54px); }
  to   { opacity:1; transform:none; }
}

/* dark mode for chrome only — keep pages white */
body.dark .cdoc-topbar { background:#111b2b; border-bottom-color:rgba(255,255,255,.06); }
body.dark .cdoc-stage  { background:#0d1117; }

@media (max-width:640px) {
  .cdoc-page { padding:28px 18px 32px; min-height:auto; }
  .cdoc-stage { padding:16px 10px 32px; }
  .cdoc-topbar { gap:12px; }
  .cdoc-arrow-btn { width:36px; height:36px; font-size:1.05em; }
}

/* ── Duration selector in cdoc-topbar ───────────────────────────────────── */
.cdoc-topbar-sep {
  width:1px; height:28px; background:rgba(255,255,255,.15); flex-shrink:0; margin:0 4px;
}
.cdoc-dur-wrap {
  display:flex; align-items:center; gap:7px; flex-shrink:0;
}
.cdoc-dur-label {
  font-family:sans-serif; font-size:.72em; color:#9ca3af;
  white-space:nowrap; letter-spacing:.04em;
}
.cdoc-dur-sel {
  background:#1e293b; color:#e2e8f0;
  border:1.5px solid rgba(255,255,255,.18); border-radius:6px;
  padding:5px 28px 5px 10px; font-size:.8em; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
  transition:border-color .15s, background-color .15s;
}
.cdoc-dur-sel:hover  { border-color:rgba(255,255,255,.35); background-color:#263548; }
.cdoc-dur-sel:focus  { outline:none; border-color:#3b82f6; }
.cdoc-dur-sel option { background:#1e293b; color:#e2e8f0; }

body.dark .cdoc-dur-sel { background-color:#0f172a; border-color:rgba(255,255,255,.15); }

@media (max-width:640px) {
  .cdoc-topbar-sep { display:none; }
  .cdoc-topbar { flex-wrap:wrap; gap:8px; padding:8px 12px; }
  .cdoc-dur-wrap { width:100%; justify-content:center; }
  .cdoc-dur-sel  { flex:1; max-width:200px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Performance, Polish & Animation Enhancements  (v8)
══════════════════════════════════════════════════════════════════════════ */

/* ── Custom scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(231,76,60,.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(231,76,60,.55); }
body.dark ::-webkit-scrollbar-thumb { background: rgba(231,76,60,.22); }
body.dark ::-webkit-scrollbar-thumb:hover { background: rgba(231,76,60,.48); }

/* ── GPU hints ─────────────────────────────────────────────────────────── */
.card, .decl-card, .stat-card, .modal-box, .inv-entry, .prf-inv-entry { will-change: transform; }

/* ── Empty state floating icon ─────────────────────────────────────────── */
@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ── Skeleton loading shimmer ──────────────────────────────────────────── */
@keyframes shimmer {
  to { background-position: 200% center; }
}
.skel-card {
  background: #fff; border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06); overflow: hidden;
}
.skel-img {
  height: 140px;
  background: linear-gradient(90deg, #f3f3f3 0%, #e6e6e6 20%, #f3f3f3 40%);
  background-size: 200%;
  animation: shimmer 1.5s linear infinite;
}
.skel-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.skel-line {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #f3f3f3 0%, #e6e6e6 20%, #f3f3f3 40%);
  background-size: 200%;
  animation: shimmer 1.5s linear infinite;
}
.skel-line-w70 { width: 70%; }
.skel-line-w50 { width: 50%; }
.skel-line-w40 { width: 40%; height: 9px; }
.skel-decl .skel-body { padding: 16px; gap: 10px; }
body.dark .skel-card { background: #111; }
body.dark .skel-img,
body.dark .skel-line {
  background: linear-gradient(90deg, #1e1e1e 0%, #282828 20%, #1e1e1e 40%);
  background-size: 200%;
}

/* ── Table row slide-in animation ──────────────────────────────────────── */
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Stat card entrance animation ─────────────────────────────────────── */
@keyframes statIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.stat-card { animation: statIn .45s cubic-bezier(.4,0,.2,1) both; }

/* ── Nav title smooth transition ───────────────────────────────────────── */
.nav-title { transition: opacity .18s ease; }

/* ── Smooth scroll in containers ───────────────────────────────────────── */
.admin-content, .modal-body { scroll-behavior: smooth; }

/* ── Button active press feedback ─────────────────────────────────────── */
.btn-login:active        { transform: scale(.97) !important; }
.btn-add-admin:active    { transform: scale(.97) !important; transition-duration: .06s !important; }
.idr-btn:active          { transform: scale(.97) !important; transition-duration: .06s !important; }
.btn-gen-contract:active { transform: scale(.97) !important; }
.btn-approve:active,
.btn-deny:active         { transform: scale(.97) !important; }
.card:active             { transform: translateY(-2px) scale(.98) !important; }
.decl-card:active        { transform: translateY(-1px) scale(.99) !important; }

/* ── Form label accent on focus-within ─────────────────────────────────── */
.form-group:focus-within > .form-label,
.form-group:focus-within > span.form-label { color: #e74c3c; transition: color .2s; }

/* ── Stat card alert number colour ─────────────────────────────────────── */
.stat-card-alert .stat-info .stat-num { color: #e74c3c; }
body.dark .stat-info .stat-num { color: #f0f0f0; }
body.dark .stat-card-alert .stat-info .stat-num { color: #e74c3c; }

/* ── Admin sidebar active indicator ───────────────────────────────────── */
.admin-nav-btn { position: relative; }
.admin-nav-btn::after {
  content: '';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0;
  background: #e74c3c; border-radius: 0 2px 2px 0;
  transition: height .2s ease;
}
.admin-nav-btn.active::after,
.admin-nav-btn:hover::after { height: 55%; }


/* ══════════════════════════════════════════════════════════════════════════
   Profile Panel Redesign — Left sidebar layout  (v8)
══════════════════════════════════════════════════════════════════════════ */
.prf-layout {
  display: flex;
  min-height: 100%;
  animation: slideInRight .35s ease both;
}

/* ── Left Sidebar ──────────────────────────────────────────────────────── */
.prf-sidebar {
  width: 240px;
  min-width: 240px;
  background: #f7f7f7;
  border-right: 1.5px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  padding: 32px 0 24px;
  gap: 0;
  min-height: 100%;
}
body.dark .prf-sidebar {
  background: #111;
  border-right-color: rgba(255,255,255,.07);
}
.prf-sidebar-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 20px 24px;
  border-bottom: 1.5px solid #e8e8e8;
  margin-bottom: 12px;
}
body.dark .prf-sidebar-top { border-bottom-color: rgba(255,255,255,.07); }
.prf-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8em; color: #fff;
}
.prf-email {
  font-size: .82em;
  color: #888;
  text-align: center;
  word-break: break-all;
}
body.dark .prf-email { color: #666; }

/* ── Sidebar Nav ───────────────────────────────────────────────────────── */
.prf-sidenav {
  display: flex;
  flex-direction: column;
  padding: 0 12px;
  gap: 2px;
  flex: 1;
}
.prf-sidenav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #555;
  font-size: .88em;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
  width: 100%;
  position: relative;
}
body.dark .prf-sidenav-btn { color: rgba(255,255,255,.55); }
.prf-sidenav-btn ion-icon { font-size: 1.1em; flex-shrink: 0; }
.prf-sidenav-btn:hover { background: rgba(231,76,60,.08); color: #e74c3c; }
.prf-sidenav-btn.active { background: rgba(231,76,60,.12); color: #e74c3c; }
.prf-sidenav-btn::after {
  content: '';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0;
  background: #e74c3c; border-radius: 0 2px 2px 0;
  transition: height .2s;
}
.prf-sidenav-btn.active::after { height: 55%; }
.prf-sidenav-danger { color: #e74c3c !important; margin-top: 8px; }
.prf-sidenav-danger:hover { background: rgba(231,76,60,.15) !important; }
.btn-prf-logout {
  margin: 16px 12px 0;
  align-self: stretch;
}

/* ── Right Content ─────────────────────────────────────────────────────── */
.prf-content {
  flex: 1;
  padding: 36px 40px;
  overflow-y: auto;
  min-width: 0;
}
@media (max-width: 768px) {
  .prf-layout { flex-direction: column; }
  .prf-sidebar { width: 100%; min-width: unset; border-right: none; border-bottom: 1.5px solid #e8e8e8; padding: 20px 16px 12px; min-height: unset; }
  body.dark .prf-sidebar { border-bottom-color: rgba(255,255,255,.07); }
  .prf-sidenav { flex-direction: row; flex-wrap: wrap; padding: 0; }
  .prf-sidenav-btn { flex: 1 1 auto; min-width: 120px; justify-content: center; font-size: .78em; }
  .prf-sidenav-btn span { display: none; }
  .prf-sidenav-btn::after { display: none; }
  .prf-content { padding: 20px 16px; }
}

/* ── Pane sections ─────────────────────────────────────────────────────── */
.prf-sec { display: none; }
.prf-sec.active { display: block; animation: slideInRight .3s ease both; }
.prf-sec-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid #e8e8e8;
}
body.dark .prf-sec-hdr { border-bottom-color: rgba(255,255,255,.07); }
.prf-sec-hdr ion-icon { font-size: 1.4em; color: #e74c3c; }
.prf-sec-hdr h2 { font-size: 1.2em; font-weight: 700; color: #222; margin: 0; }
body.dark .prf-sec-hdr h2 { color: #e8e8e8; }

/* ── Inner cards ───────────────────────────────────────────────────────── */
.prf-inner-card {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #e8e8e8;
  padding: 20px 24px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.dark .prf-inner-card { background: #111; border-color: rgba(255,255,255,.08); }
.prf-inner-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85em;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
body.dark .prf-inner-card-title { color: #555; border-bottom-color: rgba(255,255,255,.05); }
.prf-inner-card-title ion-icon { color: #e74c3c; }

/* ── Danger card ───────────────────────────────────────────────────────── */
.prf-danger-card {
  border-color: rgba(231,76,60,.3) !important;
  background: rgba(231,76,60,.04) !important;
  align-items: flex-start !important;
  max-width: 520px;
}
body.dark .prf-danger-card { background: rgba(231,76,60,.06) !important; }
.prf-danger-icon { font-size: 2.4em; color: #e74c3c; margin-bottom: 4px; }
.prf-danger-title { font-size: 1em; font-weight: 700; color: #e74c3c; }
.prf-danger-msg { font-size: .85em; color: #888; line-height: 1.55; margin: 6px 0 16px; }

/* ── End agreement button ──────────────────────────────────────────────── */
.btn-end-agreement {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 10px;
  background: rgba(231,76,60,.1); color: #e74c3c;
  border: 1.5px solid rgba(231,76,60,.4);
  font-size: .88em; font-weight: 700; cursor: pointer;
  transition: all .15s;
}
.btn-end-agreement:hover { background: #e74c3c; color: #fff; border-color: #e74c3c; }
.btn-end-agreement-confirm {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 9px;
  background: #e74c3c; color: #fff;
  border: none; font-size: .88em; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.btn-end-agreement-confirm:hover { background: #c0392b; }

/* ══════════════════════════════════════════════════════════════════════════
   Admin Company Panel — inner panels grid  (v8)
══════════════════════════════════════════════════════════════════════════ */
.co-panels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.co-inner-panel {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #e8e8e8;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.dark .co-inner-panel { background: #111; border-color: rgba(255,255,255,.08); }
.co-inner-panel-full {
  grid-column: 1 / -1;
}
.co-inner-panel-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .84em;
  font-weight: 800;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}
body.dark .co-inner-panel-hdr { color: #555; border-bottom-color: rgba(255,255,255,.05); }
.co-inner-panel-hdr ion-icon { color: #e74c3c; font-size: 1.1em; }
@media (max-width: 900px) {
  .co-panels-grid { grid-template-columns: 1fr; }
  .co-inner-panel-full { grid-column: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Tutorial Overlay  (v8)
══════════════════════════════════════════════════════════════════════════ */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: auto;
}
.tutorial-spotlight {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.72);
  border-radius: 10px;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 99999;
}
.tutorial-tooltip {
  position: absolute;
  z-index: 100000;
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  width: 300px;
  max-width: calc(100vw - 32px);
  pointer-events: auto;
  animation: fadeIn .25s ease;
}
body.dark .tutorial-tooltip { background: #1a1a1a; }
.tutorial-tooltip-step {
  font-size: .7em;
  font-weight: 700;
  color: #e74c3c;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 6px;
}
.tutorial-tooltip-title {
  font-size: 1em;
  font-weight: 800;
  color: #111;
  margin-bottom: 7px;
}
body.dark .tutorial-tooltip-title { color: #e8e8e8; }
.tutorial-tooltip-msg {
  font-size: .85em;
  color: #555;
  line-height: 1.55;
  margin-bottom: 14px;
}
body.dark .tutorial-tooltip-msg { color: #aaa; }
.tutorial-tooltip-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tut-btn-skip {
  font-size: .78em; color: #aaa; background: none; border: none;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
  transition: color .15s;
}
.tut-btn-skip:hover { color: #e74c3c; }
.tut-btn-next {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 16px; border-radius: 8px;
  background: #e74c3c; color: #fff;
  border: none; font-size: .82em; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.tut-btn-next:hover { background: #c0392b; }

/* ── Tutorial Ask Modal ────────────────────────────────────────────────── */
.tutorial-ask-overlay {
  position: fixed; inset: 0; z-index: 99997;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
}
.tutorial-ask-box {
  background: #fff; border-radius: 18px; padding: 36px 32px;
  max-width: 380px; width: 90%;
  box-shadow: 0 12px 48px rgba(0,0,0,.3);
  text-align: center;
  animation: scaleIn .3s ease;
}
body.dark .tutorial-ask-box { background: #1a1a1a; }
.tutorial-ask-icon { font-size: 3em; margin-bottom: 12px; }
.tutorial-ask-title { font-size: 1.2em; font-weight: 800; color: #111; margin-bottom: 8px; }
body.dark .tutorial-ask-title { color: #e8e8e8; }
.tutorial-ask-msg { font-size: .88em; color: #666; line-height: 1.55; margin-bottom: 22px; }
body.dark .tutorial-ask-msg { color: #aaa; }
.tutorial-ask-actions { display: flex; gap: 12px; justify-content: center; }
.tut-ask-btn-no {
  padding: 9px 20px; border-radius: 9px; border: 1.5px solid #e8e8e8;
  background: none; color: #888; font-size: .88em; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.tut-ask-btn-no:hover { border-color: #ccc; color: #555; }
.tut-ask-btn-yes {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 22px; border-radius: 9px;
  background: #e74c3c; color: #fff;
  border: none; font-size: .88em; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.tut-ask-btn-yes:hover { background: #c0392b; }

/* ── Contract sig mp-line ──────────────────────────────────────────────── */
.mp-line { font-weight: 700; color: #333; font-style: italic; }

/* ── fadeIn / scaleIn ──────────────────────────────────────────────────── */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════════════════
   v10 additions
   ════════════════════════════════════════════════════════════════════════ */

/* ── Profile sidebar full screen height ─────────────────────────────────── */
.prf-layout { min-height: 100vh; }
.prf-sidebar { min-height: 100vh; position: sticky; top: 0; align-self: flex-start; }

/* ── Contract topbar / buttons — visible in both themes ─────────────────── */
.cdoc-topbar {
  background: #2d3748;
  border-bottom-color: rgba(255,255,255,.1);
}
.cdoc-arrow-btn {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.cdoc-arrow-btn:hover:not(:disabled) {
  background: rgba(255,255,255,.32);
}
body:not(.dark) .cdoc-topbar {
  background: #334155;
}
body:not(.dark) .cdoc-arrow-btn {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.45);
  color: #fff;
}
body:not(.dark) .cdoc-dur-sel {
  background: #1e293b;
  color: #e2e8f0;
  border-color: rgba(255,255,255,.28);
}

/* ── cdoc duration manual input ─────────────────────────────────────────── */
.cdoc-dur-manual {
  width: 80px;
  background: #1e293b;
  color: #e2e8f0;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: .8em;
  outline: none;
}
.cdoc-dur-manual:focus { border-color: #3b82f6; }

/* ── Free Trial prf-sub-card ─────────────────────────────────────────────── */
.prf-sub-trial {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  border-left: 4px solid #f59e0b;
  border-radius: 12px;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
}
body.dark .prf-sub-trial {
  background: linear-gradient(135deg, #1a1500 0%, #1e1a00 100%);
  border-left-color: #d97706;
}
.prf-sub-trial .prf-sub-icon { color: #f59e0b; font-size: 1.5em; }

/* ── badge-sub-trial ─────────────────────────────────────────────────────── */
.badge-sub-trial {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 20px;
  background: rgba(245,158,11,.18); color: #d97706;
  font-weight: 700; font-size: .78em; letter-spacing: .03em;
}

/* ── au-trial preset buttons ─────────────────────────────────────────────── */
.au-trial-preset-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px;
}
.au-trial-preset-btn {
  padding: 5px 11px; border-radius: 6px;
  background: #f1f5f9; border: 1.5px solid #cbd5e1;
  color: #475569; font-size: .78em; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.au-trial-preset-btn:hover { background: #e2e8f0; border-color: #94a3b8; }
.au-trial-preset-btn.selected {
  background: rgba(245,158,11,.18); border-color: #f59e0b; color: #b45309;
}
body.dark .au-trial-preset-btn { background: #1e2535; border-color: #334155; color: #94a3b8; }
body.dark .au-trial-preset-btn.selected { background: rgba(245,158,11,.2); border-color: #d97706; color: #fbbf24; }

/* ── highlight-pulse on trial date input ─────────────────────────────────── */
@keyframes highlightPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.6); }
  70%  { box-shadow: 0 0 0 7px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
.highlight-pulse { animation: highlightPulse .7s ease; }

/* ── notif-item green ────────────────────────────────────────────────────── */
.notif-item-icon.green { background: rgba(16,185,129,.15); color: #059669; }


/* =============================================================================
   v11 - Invoices/Financial panel + Packages + Discount + Intro
   ============================================================================= */

/* Financial summary cards */
.fin-cards-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.fin-card { background:#fff; border-radius:14px; padding:16px 18px; flex:1; min-width:130px; box-shadow:0 2px 10px rgba(0,0,0,.06); border-top:3px solid #e0e0e0; }
.fin-card.green  { border-top-color:#27ae60; }
.fin-card.orange { border-top-color:#f39c12; }
.fin-card.red    { border-top-color:#e74c3c; }
.fin-card.purple { border-top-color:#8e44ad; }
.fin-card.blue   { border-top-color:#3498db; }
.fin-card-num    { font-size:1.9em; font-weight:800; color:#111; line-height:1; }
.fin-card-lbl    { font-size:.72em; color:#999; text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }
.fin-card-amount { font-size:.82em; color:#555; font-weight:600; margin-top:4px; }
body.dark .fin-card { background:#161616; }
body.dark .fin-card-num { color:#f0f0f0; }
body.dark .fin-card-amount { color:#aaa; }

/* Admin invoice tabs */
.adm-inv-tabs { display:flex; gap:0; border-bottom:2px solid #e8e8e8; margin-bottom:20px; }
.adm-inv-tab  { display:flex; align-items:center; gap:6px; padding:10px 22px; background:none; border:none; cursor:pointer; font-size:.87em; font-weight:600; color:#888; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .15s; }
.adm-inv-tab.active { color:#e74c3c; border-bottom-color:#e74c3c; }
body.dark .adm-inv-tabs { border-bottom-color:rgba(255,255,255,.1); }
body.dark .adm-inv-tab.active { color:#ff6b6b; border-bottom-color:#ff6b6b; }

/* All invoices panel */
.all-inv-toolbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px; justify-content:space-between; }
.all-inv-filters { display:flex; gap:6px; flex-wrap:wrap; }
.all-inv-filter { padding:5px 12px; background:#f0f0f0; border:1.5px solid transparent; border-radius:20px; font-size:.78em; font-weight:600; cursor:pointer; color:#555; transition:all .15s; }
.all-inv-filter.active { background:#e74c3c; color:#fff; border-color:#e74c3c; }
.all-inv-filter.green.active  { background:#27ae60; border-color:#27ae60; }
.all-inv-filter.orange.active { background:#f39c12; border-color:#f39c12; }
.all-inv-filter.red.active    { background:#e74c3c; border-color:#e74c3c; }
.all-inv-filter.purple.active { background:#8e44ad; border-color:#8e44ad; }
.all-inv-search { max-width:240px; flex:1; font-size:.83em; padding:6px 12px; height:34px; }
.all-inv-list   { display:flex; flex-direction:column; gap:6px; }
.all-inv-row    { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; background:#fff; border-left:3px solid #ddd; transition:background .12s; flex-wrap:wrap; }
.all-inv-row:hover { background:#f7f8fb; }
.all-inv-row.paid     { border-left-color:#27ae60; }
.all-inv-row.pending  { border-left-color:#f39c12; }
.all-inv-row.overdue  { border-left-color:#e74c3c; }
.all-inv-row.late_fee { border-left-color:#8e44ad; }
.all-inv-row.cancelled { opacity:.55; border-left-color:#aaa; }
.all-inv-user    { flex:1; min-width:120px; }
.all-inv-company { font-weight:700; font-size:.88em; color:#111; }
.all-inv-email   { font-size:.75em; color:#888; }
.all-inv-meta    { display:flex; gap:8px; align-items:center; font-size:.78em; color:#888; }
.all-inv-id      { font-weight:600; color:#555; }
.all-inv-dates   { color:#aaa; }
.all-inv-amount  { font-size:.9em; font-weight:700; color:#222; min-width:100px; text-align:right; }
.all-inv-badge   { padding:3px 10px; border-radius:12px; font-size:.72em; font-weight:700; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.all-inv-badge.paid     { background:rgba(39,174,96,.15); color:#27ae60; }
.all-inv-badge.pending  { background:rgba(243,156,18,.15); color:#f39c12; }
.all-inv-badge.overdue  { background:rgba(231,76,60,.15); color:#e74c3c; }
.all-inv-badge.late_fee { background:rgba(142,68,173,.15); color:#8e44ad; }
body.dark .all-inv-row { background:#161616; }
body.dark .all-inv-company { color:#e8e8e8; }
body.dark .all-inv-amount  { color:#eee; }

/* Package panel */
.pkg-panel-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.btn-add-pkg { display:flex; align-items:center; gap:6px; padding:8px 16px; background:#27ae60; color:#fff; border:none; border-radius:8px; font-size:.84em; font-weight:700; cursor:pointer; transition:background .15s; }
.btn-add-pkg:hover { background:#219a52; }
.pkg-list { display:flex; flex-direction:column; gap:8px; }
.pkg-card { background:#fff; border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:14px; border:1.5px solid #e8e8e8; transition:box-shadow .15s; }
.pkg-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.08); }
.pkg-card-info   { flex:1; }
.pkg-card-name   { font-weight:700; font-size:.92em; color:#111; }
.pkg-card-price  { font-size:.83em; color:#e74c3c; font-weight:600; margin-top:3px; }
.pkg-card-period { font-size:.78em; color:#888; }
.pkg-card-meta   { font-size:.75em; color:#888; margin-top:2px; }
.pkg-card-actions { display:flex; gap:6px; }
body.dark .pkg-card { background:#161616; border-color:rgba(255,255,255,.1); }
body.dark .pkg-card-name { color:#e8e8e8; }

/* Package modal */
.pkg-modal-body { padding:18px 22px; }
.pkg-price-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pkg-price-wrap { display:flex; align-items:center; gap:8px; }
.pkg-currency   { font-size:.8em; color:#888; font-weight:700; white-space:nowrap; }
.pkg-period-row { display:flex; gap:6px; flex-wrap:wrap; }
.pkg-period-preset { padding:5px 12px; background:#f0f0f0; border:1.5px solid transparent; border-radius:16px; font-size:.8em; font-weight:600; cursor:pointer; color:#555; transition:all .14s; }
.pkg-period-preset.selected { background:#e74c3c; color:#fff; border-color:#e74c3c; }

/* Discount field in admin user modal */
.au-discount-wrap   { display:flex; align-items:center; gap:8px; }
.au-discount-input  { max-width:100px; text-align:center; }
.au-discount-suffix { font-size:.9em; color:#888; font-weight:600; }
.au-group-dimmed    { opacity:.35; pointer-events:none; user-select:none; transition:opacity .2s; }

/* Package selector in invoice form */
.inv-pkg-pick-group { margin-bottom:10px; }
.inv-pkg-pick-wrap  { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.inv-pkg-sel        { flex:1; font-size:.85em; }
.inv-pkg-discount-badge { display:inline-flex; align-items:center; padding:4px 10px; background:rgba(39,174,96,.12); border-radius:14px; font-size:.78em; color:#27ae60; font-weight:700; white-space:nowrap; }

/* Profile intro card */
.prf-intro-card  { display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; padding:32px 24px; }
.prf-intro-icon  { font-size:3.2em; color:#e74c3c; display:flex; align-items:center; }
.prf-intro-title { font-size:1.1em; font-weight:700; color:#111; margin-bottom:6px; }
.prf-intro-desc  { font-size:.85em; color:#888; max-width:320px; line-height:1.5; }
.btn-intro-start { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background:#e74c3c; color:#fff; border:none; border-radius:10px; font-size:.9em; font-weight:700; cursor:pointer; transition:background .15s; }
.btn-intro-start:hover { background:#c0392b; }
body.dark .prf-intro-title { color:#e8e8e8; }

/* ── Package action buttons (v13) ─────────────────────────────────── */
.pkg-action-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:none; border-radius:8px; font-size:.78em; font-weight:700; cursor:pointer; transition:background .13s,transform .1s; white-space:nowrap; }
.pkg-action-btn:active { transform:scale(.96); }
.pkg-action-btn.edit { background:#e8f0ff; color:#1a6fe3; }
.pkg-action-btn.edit:hover { background:#d0e4ff; }
.pkg-action-btn.del  { background:#fff0f0; color:#e74c3c; }
.pkg-action-btn.del:hover  { background:#ffdada; }
.pkg-action-btn ion-icon { font-size:1em; flex-shrink:0; }
.pkg-card-inactive { opacity:.55; }
body.dark .pkg-action-btn.edit { background:rgba(26,111,227,.18); color:#82b4f5; }
body.dark .pkg-action-btn.edit:hover { background:rgba(26,111,227,.3); }
body.dark .pkg-action-btn.del  { background:rgba(231,76,60,.18); color:#f59191; }
body.dark .pkg-action-btn.del:hover  { background:rgba(231,76,60,.3); }

/* ── Invoice row view button (v13) ────────────────────────────────── */
.all-inv-row { position:relative; }
.all-inv-view-btn { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; background:#f0f0f0; border:none; border-radius:7px; color:#555; cursor:pointer; font-size:1em; transition:background .13s,color .13s; }
.all-inv-view-btn:hover { background:#e74c3c; color:#fff; }
body.dark .all-inv-view-btn { background:rgba(255,255,255,.1); color:#ccc; }
body.dark .all-inv-view-btn:hover { background:#c0392b; color:#fff; }

/* ── Invoice Detail Modal body (v13) ──────────────────────────────── */
.inv-det-body { padding:18px 22px; }
.inv-det-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.inv-det-amount { font-size:1.25em; font-weight:800; color:#111; }
.inv-det-grid { display:flex; flex-direction:column; gap:0; border:1.5px solid #ebebeb; border-radius:10px; overflow:hidden; }
.inv-det-row { display:flex; align-items:flex-start; gap:12px; padding:10px 14px; border-bottom:1px solid #f3f3f3; }
.inv-det-row:last-child { border-bottom:none; }
.inv-det-lbl { display:inline-flex; align-items:center; gap:5px; width:180px; flex-shrink:0; font-size:.8em; color:#888; font-weight:600; }
.inv-det-lbl ion-icon { font-size:1em; flex-shrink:0; }
.inv-det-val { font-size:.85em; color:#222; font-weight:500; word-break:break-all; }
.inv-det-overdue { color:#e74c3c; font-weight:700; }
body.dark .inv-det-amount { color:#f0f0f0; }
body.dark .inv-det-grid { border-color:rgba(255,255,255,.1); }
body.dark .inv-det-row { border-color:rgba(255,255,255,.06); }
body.dark .inv-det-val { color:#ddd; }

/* ── Admin Notifications panel (v13) ─────────────────────────────── */
.adm-notif-body { display:flex; flex-direction:column; gap:14px; padding:20px 24px; }
.adm-notif-card { display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:14px; border:1.5px solid transparent; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.adm-notif-card.red    { border-color:#f8d7da; background:linear-gradient(135deg,#fff5f5,#fff); }
.adm-notif-card.orange { border-color:#fde8cc; background:linear-gradient(135deg,#fffaf5,#fff); }
.adm-notif-card.blue   { border-color:#d0e8ff; background:linear-gradient(135deg,#f5f9ff,#fff); }
.adm-notif-card.purple { border-color:#e8d0ff; background:linear-gradient(135deg,#faf5ff,#fff); }
.adm-notif-icon { font-size:1.8em; flex-shrink:0; display:flex; align-items:center; }
.adm-notif-card.red    .adm-notif-icon { color:#e74c3c; }
.adm-notif-card.orange .adm-notif-icon { color:#e67e22; }
.adm-notif-card.blue   .adm-notif-icon { color:#1a6fe3; }
.adm-notif-card.purple .adm-notif-icon { color:#8e44ad; }
.adm-notif-info  { flex:1; }
.adm-notif-title { font-size:.92em; font-weight:700; color:#111; margin-bottom:3px; }
.adm-notif-desc  { font-size:.8em; color:#888; }
.adm-notif-btn   { flex-shrink:0; padding:8px 16px; border:none; border-radius:9px; font-size:.78em; font-weight:700; cursor:pointer; background:#111; color:#fff; transition:background .13s; white-space:nowrap; }
.adm-notif-btn:hover { background:#333; }
.adm-notif-empty { display:flex; flex-direction:column; align-items:center; gap:12px; padding:48px 24px; color:#27ae60; font-size:1em; font-weight:700; }
.adm-notif-empty ion-icon { font-size:3em; }
body.dark .adm-notif-card { background:#1e1e1e; border-color:rgba(255,255,255,.12); }
body.dark .adm-notif-card.red    { background:rgba(231,76,60,.08); }
body.dark .adm-notif-card.orange { background:rgba(230,126,34,.08); }
body.dark .adm-notif-card.blue   { background:rgba(26,111,227,.08); }
body.dark .adm-notif-card.purple { background:rgba(142,68,173,.08); }
body.dark .adm-notif-title { color:#e8e8e8; }
body.dark .adm-notif-btn { background:#fff; color:#111; }
body.dark .adm-notif-btn:hover { background:#ccc; }

/* ── Agreement pane in admin user modal (v13) ────────────────────── */
.au-agreement-notes { resize:vertical; min-height:70px; }

/* ── Generic modal footer ─────────────────────────────────────────── */
.modal-ftr { display:flex; justify-content:flex-end; gap:10px; padding:14px 22px; border-top:1.5px solid #ebebeb; }
body.dark .modal-ftr { border-color:rgba(255,255,255,.1); }

/* ── Invoice overdue days badge in row ────────────────────────────── */
.all-inv-overdue-days { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; background:#fdecea; border-radius:10px; font-size:.72em; color:#e74c3c; font-weight:700; white-space:nowrap; }
.all-inv-overdue-days ion-icon { font-size:.9em; }
body.dark .all-inv-overdue-days { background:rgba(231,76,60,.18); }

/* ── Invoice detail late fee banner ──────────────────────────────── */
.inv-det-late-banner { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#fff5f0; border:1.5px solid #f5c4b8; border-radius:10px; margin:14px 22px 0; }
.inv-det-late-info   { display:flex; align-items:flex-start; gap:8px; flex:1; font-size:.83em; color:#c0392b; }
.inv-det-late-info ion-icon { font-size:1.3em; flex-shrink:0; margin-top:1px; }
.inv-det-late-btn    { flex-shrink:0; padding:8px 14px; background:#e74c3c; color:#fff; border:none; border-radius:8px; font-size:.8em; font-weight:700; cursor:pointer; white-space:nowrap; transition:background .13s; }
.inv-det-late-btn:hover { background:#c0392b; }
.inv-det-late-btn:disabled { opacity:.6; cursor:default; }
body.dark .inv-det-late-banner { background:rgba(231,76,60,.1); border-color:rgba(231,76,60,.3); }
body.dark .inv-det-late-info { color:#f59191; }

/* ── Invoice detail actions (mark paid) ──────────────────────────── */
.inv-det-actions { display:flex; justify-content:flex-end; padding:12px 22px 0; }
.inv-det-pay-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; background:#27ae60; color:#fff; border:none; border-radius:9px; font-size:.85em; font-weight:700; cursor:pointer; transition:background .13s; }
.inv-det-pay-btn:hover { background:#1e8449; }
.inv-det-pay-btn:disabled { opacity:.6; cursor:default; }

/* ── Create invoice modal ─────────────────────────────────────────── */
.inv-create-body { padding:20px 22px; display:flex; flex-direction:column; gap:2px; max-height:72vh; overflow-y:auto; }
.ci-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.ci-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:520px) { .ci-row-3 { grid-template-columns:1fr 1fr; } .ci-row-2 { grid-template-columns:1fr; } }

/* ── Create invoice button in toolbar ────────────────────────────── */
.all-inv-toolbar-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.btn-create-inv { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:#1a6fe3; color:#fff; border:none; border-radius:9px; font-size:.82em; font-weight:700; cursor:pointer; white-space:nowrap; transition:background .13s; flex-shrink:0; }
.btn-create-inv:hover { background:#1558b8; }
.btn-create-inv:disabled { opacity:.6; cursor:default; }
body.dark .btn-create-inv { background:#1558b8; }
body.dark .btn-create-inv:hover { background:#1246a0; }

/* ── No Subscription Overlay (v17) ───────────────────────────────── */
.no-sub-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: linear-gradient(135deg, rgba(15,10,40,.82) 0%, rgba(30,27,75,.88) 100%);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 20px;
}
.no-sub-box {
  background: #fff; border-radius: 20px;
  padding: 44px 40px 36px;
  max-width: 440px; width: 100%;
  text-align: center;
  box-shadow: 0 24px 80px rgba(99,102,241,.25), 0 4px 20px rgba(0,0,0,.18);
  position: relative; overflow: hidden;
}
.no-sub-box::before {
  content:''; position:absolute; top:-60px; right:-60px;
  width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%);
  pointer-events:none;
}
.no-sub-icon {
  width: 72px; height: 72px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
}
.no-sub-icon svg { width:100%; height:100%; }
.no-sub-title {
  font-size: 1.28em; font-weight: 800; color: #1a1a2e;
  margin: 0 0 10px; letter-spacing: -.01em;
}
body.dark .no-sub-title { color: #e8e8f0; }
.no-sub-msg {
  font-size: .88em; color: #555; line-height: 1.65;
  margin: 0 0 18px;
}
body.dark .no-sub-msg { color: #aaa; }
.no-sub-info {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(99,102,241,.07); border: 1px solid rgba(99,102,241,.2);
  border-radius: 10px; padding: 11px 14px;
  font-size: .82em; color: #6366f1; font-weight: 500;
  text-align: left; margin-bottom: 24px;
}
.no-sub-info ion-icon { font-size: 1.2em; flex-shrink: 0; margin-top: 1px; }
.no-sub-actions { display: flex; gap: 10px; justify-content: center; }
.no-sub-profile-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; background: #6366f1; color: #fff;
  border: none; border-radius: 10px; font-size: .85em; font-weight: 700;
  cursor: pointer; transition: background .14s;
}
.no-sub-profile-btn:hover { background: #4f46e5; }
.no-sub-logout-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; background: transparent;
  color: #888; border: 1.5px solid #ddd;
  border-radius: 10px; font-size: .85em; font-weight: 600;
  cursor: pointer; transition: all .14s;
}
.no-sub-logout-btn:hover { background: #f5f5f5; color: #555; }
body.dark .no-sub-box { background: #1e1e2e; }
body.dark .no-sub-info { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.3); }
body.dark .no-sub-logout-btn { border-color: rgba(255,255,255,.15); color:#aaa; }
body.dark .no-sub-logout-btn:hover { background:rgba(255,255,255,.07); color:#ccc; }

/* ── Agreement pane enhancements (v17) ───────────────────────────── */
.ag-dates-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media(max-width:480px) { .ag-dates-row { grid-template-columns: 1fr; } }
.ag-end-preview { color: #6366f1 !important; font-weight: 600; }
.ag-pkg-preview-card {
  margin-top: 8px; padding: 10px 14px;
  background: rgba(99,102,241,.07); border: 1.5px solid rgba(99,102,241,.2);
  border-radius: 10px;
}
.ag-pkg-preview-name { font-size: .86em; font-weight: 700; color: #4f46e5; }
.ag-pkg-preview-price { font-size: .82em; color: #555; margin-top: 2px; }
.ag-pkg-preview-desc { font-size: .78em; color: #888; margin-top: 2px; }
body.dark .ag-pkg-preview-card { background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.3); }
body.dark .ag-pkg-preview-name { color:#a5b4fc; }
body.dark .ag-pkg-preview-price { color:#bbb; }

/* ── Agreement status badges in admin user modal (v17) ───────────── */
.ag-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px;
  font-size: .78em; font-weight: 700;
}
.ag-badge ion-icon { font-size: 1.1em; }
.ag-badge-ok      { background: rgba(39,174,96,.1);  color: #1e8449; border: 1px solid rgba(39,174,96,.25); }
.ag-badge-warn    { background: rgba(243,156,18,.1); color: #b7770d; border: 1px solid rgba(243,156,18,.25); }
.ag-badge-expired { background: rgba(231,76,60,.1);  color: #c0392b; border: 1px solid rgba(231,76,60,.25); }
.ag-badge-none    { background: rgba(150,150,150,.1); color: #888;   border: 1px solid rgba(150,150,150,.2); }
body.dark .ag-badge-ok      { background:rgba(39,174,96,.15);  color:#6fcf97; }
body.dark .ag-badge-warn    { background:rgba(243,156,18,.15); color:#f6c95d; }
body.dark .ag-badge-expired { background:rgba(231,76,60,.15);  color:#f08080; }
body.dark .ag-badge-none    { background:rgba(150,150,150,.1); color:#888; }


/* ═══════════════════════════════════════════════════════════════════════════
   ── v18: Login footer + Request license button ──────────────────────────
   ═══════════════════════════════════════════════════════════════════════════ */
.login-footer {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 14px 0 4px;
  border-top: 1px solid rgba(100,100,120,.12);
  margin-top: 16px;
}
.login-footer-item {
  display: flex; align-items: center; gap: 6px;
  font-size: .78em; color: #7a7a9a;
}
.login-footer-item ion-icon { font-size: 1em; color: #9a9ab8; }
.login-footer-item a { color: #7a7a9a; text-decoration: none; transition: color .2s; }
.login-footer-item a:hover { color: #4f46e5; }
.login-footer-sep { width: 1px; height: 14px; background: rgba(100,100,120,.2); }
body.dark .login-footer { border-top-color: rgba(255,255,255,.08); }
body.dark .login-footer-item, body.dark .login-footer-item ion-icon { color: #888; }
body.dark .login-footer-item a:hover { color: #a5b4fc; }

.btn-req-license {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 20px; margin-top: 10px;
  background: transparent; border: 1.5px solid rgba(99,102,241,.35);
  border-radius: 10px; cursor: pointer; font-size: .88em; font-weight: 600;
  color: #5a5aad; transition: all .2s;
}
.btn-req-license:hover { background: rgba(99,102,241,.08); border-color: #6366f1; color: #4f46e5; }
body.dark .btn-req-license { color: #a5b4fc; border-color: rgba(165,180,252,.3); }
body.dark .btn-req-license:hover { background: rgba(165,180,252,.1); border-color: #a5b4fc; }

/* ── License Request Modal ────────────────────────────────────────────── */
.license-req-modal-box { max-width: 520px; }
.license-req-intro {
  font-size: .88em; color: #888; margin-bottom: 18px;
  padding: 10px 14px; background: rgba(99,102,241,.06);
  border-radius: 8px; border-left: 3px solid #6366f1;
}
body.dark .license-req-intro { background: rgba(99,102,241,.1); color: #aaa; }
.req-star { color: #e74c3c; font-weight: 700; }
.license-req-error { color: #e74c3c; font-size: .82em; margin-top: 8px; min-height: 18px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ── v18: Profile Regulations Pane ───────────────────────────────────────
   ═══════════════════════════════════════════════════════════════════════════ */
.prf-regs-intro {
  font-size: .88em; color: #666; line-height: 1.6;
  padding: 12px 16px; border-radius: 10px;
  background: rgba(99,102,241,.05); border-left: 3px solid #6366f1;
  margin-bottom: 20px;
}
body.dark .prf-regs-intro { background: rgba(99,102,241,.08); color: #aaa; }

.prf-regs-card {
  background: #fff; border: 1px solid #e8e8f0;
  border-radius: 12px; margin-bottom: 18px; overflow: hidden;
}
body.dark .prf-regs-card { background: #1e1e2e; border-color: #333; }
.prf-regs-card-blue { border-top: 3px solid #3b82f6; }
.prf-regs-card-green { border-top: 3px solid #10b981; }
.prf-regs-card { border-top: 3px solid #6366f1; }

.prf-regs-card-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; font-weight: 700; font-size: .88em;
  background: rgba(99,102,241,.05); color: #4f46e5;
  border-bottom: 1px solid rgba(99,102,241,.1);
}
.prf-regs-card-blue .prf-regs-card-hdr { background: rgba(59,130,246,.05); color: #2563eb; border-color: rgba(59,130,246,.1); }
.prf-regs-card-green .prf-regs-card-hdr { background: rgba(16,185,129,.05); color: #059669; border-color: rgba(16,185,129,.1); }
body.dark .prf-regs-card-hdr { background: rgba(99,102,241,.08); color: #a5b4fc; }
body.dark .prf-regs-card-blue .prf-regs-card-hdr { background: rgba(59,130,246,.08); color: #93c5fd; }
body.dark .prf-regs-card-green .prf-regs-card-hdr { background: rgba(16,185,129,.08); color: #6ee7b7; }

.prf-regs-items { padding: 4px 0; }
.prf-regs-item {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 6px 14px; padding: 10px 18px;
  border-bottom: 1px solid rgba(0,0,0,.04);
  font-size: .84em; align-items: start;
}
.prf-regs-item:last-child { border-bottom: none; }
.prf-regs-item-name { font-weight: 700; color: #333; }
.prf-regs-item-desc { color: #666; line-height: 1.5; }
body.dark .prf-regs-item { border-bottom-color: rgba(255,255,255,.04); }
body.dark .prf-regs-item-name { color: #ddd; }
body.dark .prf-regs-item-desc { color: #aaa; }
@media(max-width:600px) { .prf-regs-item { grid-template-columns: 1fr; gap: 2px; } }

.prf-regs-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 16px; margin-top: 4px;
  background: rgba(243,156,18,.06); border: 1px solid rgba(243,156,18,.2);
  border-radius: 10px; font-size: .82em; color: #b7770d; line-height: 1.5;
}
.prf-regs-note ion-icon { font-size: 1.3em; flex-shrink: 0; margin-top: 1px; }
body.dark .prf-regs-note { background: rgba(243,156,18,.08); color: #f6c95d; }

/* ═══════════════════════════════════════════════════════════════════════════
   ── v18: Tutorial – Next button locked state ─────────────────────────────
   ═══════════════════════════════════════════════════════════════════════════ */
.tut-btn-next.tut-btn-locked {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ── v18: Admin – License Request cards ───────────────────────────────────
   ═══════════════════════════════════════════════════════════════════════════ */
.adm-notif-card.teal { border-left-color: #14b8a6; }
.adm-notif-card.teal .adm-notif-icon { background: rgba(20,184,166,.1); color: #0f766e; }
body.dark .adm-notif-card.teal { border-left-color: #2dd4bf; }
body.dark .adm-notif-card.teal .adm-notif-icon { background: rgba(45,212,191,.1); color: #2dd4bf; }

.lic-reqs-section {
  margin-top: 24px;
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: 20px;
}
body.dark .lic-reqs-section { border-top-color: rgba(255,255,255,.06); }
.lic-reqs-hdr {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .9em; color: #4f46e5;
  margin-bottom: 14px;
}
body.dark .lic-reqs-hdr { color: #a5b4fc; }

.lic-req-card {
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: 12px; padding: 14px 18px; margin-bottom: 12px;
}
body.dark .lic-req-card { background: #1e1e2e; border-color: #333; }
.lic-req-dismissed { opacity: .55; }

.lic-req-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lic-req-name { font-weight: 700; font-size: .92em; color: #222; }
body.dark .lic-req-name { color: #eee; }

.lr-status {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: .75em; font-weight: 700;
}
.lr-status-pending  { background: rgba(16,185,129,.1);  color: #059669; }
.lr-status-viewed   { background: rgba(99,102,241,.1);  color: #4f46e5; }
.lr-status-dismissed{ background: rgba(150,150,150,.1); color: #888; }
body.dark .lr-status-pending  { background:rgba(16,185,129,.15); color:#6ee7b7; }
body.dark .lr-status-viewed   { background:rgba(99,102,241,.15); color:#a5b4fc; }
body.dark .lr-status-dismissed{ background:rgba(150,150,150,.1); color:#aaa; }

.lic-req-contact {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: .82em; color: #555; margin-bottom: 6px;
}
.lic-req-contact span { display: flex; align-items: center; gap: 5px; }
body.dark .lic-req-contact { color: #aaa; }
.lic-req-msg {
  font-size: .83em; color: #666; padding: 8px 12px;
  background: rgba(0,0,0,.03); border-radius: 7px; margin-bottom: 8px;
}
body.dark .lic-req-msg { background: rgba(255,255,255,.04); color: #bbb; }
.lic-req-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: .78em; color: #888; margin-bottom: 10px;
}
.lic-req-meta span { display: flex; align-items: center; gap: 4px; }
.lic-req-meta code { font-family: monospace; color: #666; background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; }
body.dark .lic-req-meta code { background: rgba(255,255,255,.07); color: #bbb; }
.lic-req-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.adm-notif-btn-gray { background: #6b7280 !important; }
.adm-notif-btn-gray:hover { background: #4b5563 !important; }
.adm-notif-btn-mail {
  text-decoration: none; display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 8px; font-size: .78em; font-weight: 600;
  background: #0ea5e9; color: #fff; transition: background .2s;
}
.adm-notif-btn-mail:hover { background: #0284c7; }