@import url(https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap);
/* ============================================================
   CloudSafe Design Tokens
   Single source of truth for all colours, spacing, typography,
   shadows and border-radii used across the platform.
   Import this file in index.css — all components use var(--cs-*)
   ============================================================ */

:root {
  /* ── Brand colours ──────────────────────────────────────── */
  --cs-blue:          #1A80E5;
  --cs-blue-light:    #EBF4FF;
  --cs-blue-dark:     #1565C0;
  --cs-blue-hover:    #1570CC;

  /* ── Status colours ─────────────────────────────────────── */
  --cs-green:         #22c55e;
  --cs-green-light:   #f0fdf4;
  --cs-green-dark:    #16a34a;
  --cs-green-border:  #bbf7d0;

  --cs-amber:         #f59e0b;
  --cs-amber-light:   #fffbeb;
  --cs-amber-dark:    #d97706;
  --cs-amber-border:  #fde68a;

  --cs-red:           #ef4444;
  --cs-red-light:     #fef2f2;
  --cs-red-dark:      #dc2626;
  --cs-red-border:    #fecaca;

  --cs-purple:        #8b5cf6;
  --cs-purple-light:  #f5f3ff;
  --cs-purple-dark:   #7c3aed;

  --cs-teal:          #14b8a6;
  --cs-teal-light:    #f0fdfa;
  --cs-teal-dark:     #0f766e;

  /* ── Neutral surface ────────────────────────────────────── */
  --cs-white:         #ffffff;
  --cs-bg:            #f3f4f6;
  --cs-bg-alt:        #f9fafb;
  --cs-border:        #e5e7eb;
  --cs-border-dark:   #d1d5db;

  /* ── Typography ─────────────────────────────────────────── */
  --cs-text-primary:   #111827;
  --cs-text-secondary: #374151;
  --cs-text-muted:     #6b7280;
  --cs-text-faint:     #9ca3af;

  --cs-text-xs:   0.7rem;    /* 11.2px */
  --cs-text-sm:   0.8125rem; /* 13px   */
  --cs-text-base: 0.875rem;  /* 14px   */
  --cs-text-md:   0.9375rem; /* 15px   */
  --cs-text-lg:   1rem;      /* 16px   */
  --cs-text-xl:   1.125rem;  /* 18px   */
  --cs-text-2xl:  1.25rem;   /* 20px   */
  --cs-text-3xl:  1.5rem;    /* 24px   */

  /* ── Spacing ─────────────────────────────────────────────── */
  --cs-space-1:  0.25rem;   /* 4px  */
  --cs-space-2:  0.5rem;    /* 8px  */
  --cs-space-3:  0.75rem;   /* 12px */
  --cs-space-4:  1rem;      /* 16px */
  --cs-space-5:  1.25rem;   /* 20px */
  --cs-space-6:  1.5rem;    /* 24px */
  --cs-space-8:  2rem;      /* 32px */
  --cs-space-10: 2.5rem;    /* 40px */
  --cs-space-12: 3rem;      /* 48px */

  /* ── Border radius ──────────────────────────────────────── */
  --cs-radius-sm:   4px;
  --cs-radius:      8px;
  --cs-radius-md:   10px;
  --cs-radius-lg:   12px;
  --cs-radius-xl:   16px;
  --cs-radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --cs-shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --cs-shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --cs-shadow:     0 2px 8px rgba(0,0,0,0.08);
  --cs-shadow-md:  0 4px 12px rgba(0,0,0,0.1);
  --cs-shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
  --cs-shadow-xl:  0 16px 40px rgba(0,0,0,0.14);

  /* ── Layout ─────────────────────────────────────────────── */
  --cs-header-height:     64px;
  --cs-mobile-nav-height: 44px;
  --cs-sidebar-width:     240px;
  --cs-content-offset:    calc(var(--cs-header-height) + var(--cs-mobile-nav-height));

  /* ── Transitions ────────────────────────────────────────── */
  --cs-transition-fast:   0.12s ease;
  --cs-transition:        0.2s ease;
  --cs-transition-slow:   0.35s ease;

  /* ── Z-index scale ──────────────────────────────────────── */
  --cs-z-base:     1;
  --cs-z-dropdown: 100;
  --cs-z-sticky:   200;
  --cs-z-fixed:    300;
  --cs-z-modal:    400;
  --cs-z-toast:    500;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f8fafc;
  overflow-x: hidden;
  max-width: 100vw;
}

/* iOS Safari auto-zoom prevention: inputs with font-size < 16px trigger page zoom on focus */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* Global table behavior: ensure rows start at the top without changing container sizing */
table tbody {
  display: table-row-group !important;
  vertical-align: top !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Ensure first row hugs the top in all tables without changing container layout */
table { border-collapse: collapse !important; }
table, thead, tbody, tr { margin-top: 0 !important; }
table tbody tr:first-child { margin-top: 0 !important; }
table tbody, table tbody tr, table tbody td, table tbody th { vertical-align: top !important; }
/* Remove any spacer pseudo-element some libs insert */
table tbody::before { content: none !important; display: none !important; }
table tbody tr {
  height: auto !important;
  min-height: 0 !important;
}

:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: 9999;
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, 9999);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: 320px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
}
.Toastify__toast-container--bottom-left {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: auto;
    left: initial;
  }
}
.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  min-height: 64px;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: 6px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  max-height: 800px;
  max-height: var(--toastify-toast-max-height);
  font-family: sans-serif;
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  /* webkit only issue #791 */
  z-index: 0;
  overflow: hidden;
}
.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}
.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}
.Toastify__toast--stacked[data-collapsed=false] {
  overflow: visible;
}
.Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > * {
  opacity: 0;
}
.Toastify__toast--stacked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}
.Toastify__toast--stacked[data-pos=top] {
  top: 0;
}
.Toastify__toast--stacked[data-pos=bot] {
  bottom: 0;
}
.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
  transform-origin: top;
}
.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
  transform-origin: bottom;
}
.Toastify__toast--stacked:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--close-on-click {
  cursor: pointer;
}
.Toastify__toast-body {
  margin: auto 0;
  flex: 1 1 auto;
  padding: 6px;
  display: flex;
  align-items: center;
}
.Toastify__toast-body > div:last-child {
  word-break: break-word;
  flex: 1 1;
}
.Toastify__toast-icon {
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  width: 20px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: #121212;
  background: var(--toastify-color-dark);
  color: #fff;
  color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
  color: #fff;
  color: var(--toastify-text-color-info);
  background: #3498db;
  background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  color: #fff;
  color: var(--toastify-text-color-success);
  background: #07bc0c;
  background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: #fff;
  color: var(--toastify-text-color-warning);
  background: #f1c40f;
  background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  color: #fff;
  color: var(--toastify-text-color-error);
  background: #e74c3c;
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
  background: #bb86fc;
  background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
  background: #3498db;
  background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
  background: #07bc0c;
  background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
  background: #f1c40f;
  background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
  background: #e74c3c;
  background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: rgba(255, 255, 255, 0.7);
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  align-self: flex-start;
  z-index: 1;
}
.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left;
  border-bottom-left-radius: 6px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: auto;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: 0;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: 6px;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: 6px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp[data-hidden=true] {
  opacity: 0;
}
.Toastify__progress-bar--bg {
  opacity: 0.2;
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: #e0e0e0;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: #616161;
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.cs-pdf-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.cs-pdf-modal {
  background: #fff; width: 100%; max-width: 1100px; max-height: 92vh;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  display: flex; flex-direction: column;
}
.cs-pdf-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #e5e7eb;
  background: #f9fafb; gap: 12px;
}
.cs-pdf-title {
  font-size: 0.95rem; font-weight: 600; color: #111827;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 50%;
}
.cs-pdf-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-pdf-btn {
  background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
  padding: 6px 10px; cursor: pointer; font-size: 0.85rem;
  color: #374151; line-height: 1; transition: background 0.15s, border-color 0.15s;
  text-decoration: none; display: inline-flex; align-items: center; min-height: 30px;
}
.cs-pdf-btn:hover:not(:disabled) { background: #EBF4FF; border-color: #1A80E5; color: #1565C0; }
.cs-pdf-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cs-pdf-close { font-weight: 600; }
.cs-pdf-download { font-size: 0.78rem; padding: 6px 12px; }
.cs-pdf-pages, .cs-pdf-zoom { font-size: 0.8rem; color: #6b7280; min-width: 56px; text-align: center; }
.cs-pdf-divider { width: 1px; height: 18px; background: #e5e7eb; margin: 0 4px; }
.cs-pdf-body {
  flex: 1 1; overflow: auto; padding: 24px;
  background: #f3f4f6; display: flex; justify-content: center; align-items: flex-start;
}
.cs-pdf-canvas {
  background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  max-width: 100%; height: auto;
}
.cs-pdf-state { color: #6b7280; font-size: 0.9rem; padding: 40px; text-align: center; }
.cs-pdf-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cs-pdf-loading-text { font-size: 0.85rem; color: #374151; font-weight: 500; }
.cs-pdf-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid #e5e7eb; border-top-color: #1A80E5;
  animation: cs-pdf-spin 0.8s linear infinite;
}
@keyframes cs-pdf-spin { to { transform: rotate(360deg); } }
.cs-pdf-progress-bar {
  width: 240px; height: 6px; background: #e5e7eb;
  border-radius: 9999px; overflow: hidden;
}
.cs-pdf-progress-fill {
  height: 100%; background: #1A80E5;
  transition: width 0.2s ease; border-radius: 9999px;
}
.cs-pdf-error a { color: #1A80E5; text-decoration: underline; display: inline-block; margin-top: 8px; }

@media (max-width: 640px) {
  .cs-pdf-overlay { padding: 0; }
  .cs-pdf-modal { max-height: 100vh; border-radius: 0; }
  .cs-pdf-title { max-width: 100%; }
  .cs-pdf-header { flex-direction: column; align-items: stretch; }
  .cs-pdf-controls { justify-content: center; }
  .cs-pdf-body { padding: 12px; }
}

/* Banner is pinned to the viewport. Body padding (set by the
   .cs-has-offline-banner class below) keeps the rest of the page below it,
   and drawers/headers/menus shift their top to leave the banner uncovered. */
.cs-offline-banner {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 0 16px;
  height: 40px;
  height: var(--cs-offline-banner-h, 40px);
  font-size: 0.82rem; font-weight: 500;
  z-index: 10000;
  animation: cs-offline-slide 0.3s ease-out;
  white-space: nowrap;
}
.cs-offline-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.cs-offline-banner.mode-offline {
  background: #fef2f2; color: #991b1b; border-bottom: 1px solid #fecaca;
}
.cs-offline-banner.mode-pending {
  background: #fffbeb; color: #92400e; border-bottom: 1px solid #fde68a;
}
.cs-offline-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; flex-shrink: 0;
  animation: cs-offline-pulse 1.4s ease-in-out infinite;
}
.cs-offline-text { line-height: 1.4; }
.cs-offline-sync {
  background: white; border: 1px solid currentColor; color: inherit;
  border-radius: 6px; padding: 4px 12px; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.cs-offline-sync:hover:not(:disabled) { background: rgba(255, 255, 255, 0.5); }
.cs-offline-sync:disabled { opacity: 0.5; cursor: not-allowed; }

@keyframes cs-offline-slide {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@keyframes cs-offline-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* When the banner is visible, push everything else (headers, drawers, the
   document itself) down so nothing sits underneath it. */
:root { --cs-offline-banner-h: 40px; }

body.cs-has-offline-banner { padding-top: 40px; padding-top: var(--cs-offline-banner-h); }

/* All known sticky/fixed dashboard headers must move down too — otherwise
   they'd render at top:0 and overlap the banner. */
body.cs-has-offline-banner .dashboard-header,
body.cs-has-offline-banner .contractor-header,
body.cs-has-offline-banner .concierge-header,
body.cs-has-offline-banner .profile-header,
body.cs-has-offline-banner .cs-header,
body.cs-has-offline-banner header.profile-header,
body.cs-has-offline-banner .pd-header { top: 40px; top: var(--cs-offline-banner-h); }

/* Side drawers (mobile menus, sidebars that slide in) need to start below
   the banner so their items aren't covered. */
body.cs-has-offline-banner .mobile-nav-drawer,
body.cs-has-offline-banner .pd-sidebar,
body.cs-has-offline-banner .contractor-sidebar,
body.cs-has-offline-banner aside,
body.cs-has-offline-banner .cs-sidebar {
  top: 40px;
  top: var(--cs-offline-banner-h);
  height: calc(100vh - 40px);
  height: calc(100vh - var(--cs-offline-banner-h));
}

.App {
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Login Page — uses CloudSafe design tokens (tokens.css)
   ============================================================ */

/* ── Page layout ─────────────────────────────────────────── */
.login-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--cs-bg-alt);
}

/* ── Header ──────────────────────────────────────────────── */
.login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cs-space-5) var(--cs-space-6);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.login-header-logo {
  height: 36px;
  flex-shrink: 0;
}

.login-header-right {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
}

.login-header-text {
  color: var(--cs-text-muted);
  font-size: var(--cs-text-base);
}

.login-header-link {
  color: var(--cs-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--cs-text-base);
  transition: color var(--cs-transition-fast);
}

.login-header-link:hover {
  color: var(--cs-blue-dark);
}

/* ── Card area ───────────────────────────────────────────── */
.login-body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1;
  padding: var(--cs-space-6) var(--cs-space-5);
}

.login-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius-xl);
  padding: var(--cs-space-10) var(--cs-space-10);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--cs-shadow-md);
  box-sizing: border-box;
  text-align: left;
}

.login-title {
  font-size: var(--cs-text-3xl);
  font-weight: 700;
  color: var(--cs-text-primary);
  margin: 0 0 var(--cs-space-2) 0;
}

.login-subtitle {
  font-size: var(--cs-text-md);
  color: var(--cs-text-muted);
  margin: 0 0 var(--cs-space-8) 0;
}

/* ── Server error alert ──────────────────────────────────── */
.login-error-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--cs-space-3);
  background: var(--cs-red-light);
  border: 1px solid var(--cs-red-border);
  border-radius: var(--cs-radius);
  padding: var(--cs-space-3) var(--cs-space-4);
  margin-bottom: var(--cs-space-5);
  font-size: var(--cs-text-sm);
  color: var(--cs-red-dark);
  line-height: 1.5;
}

.login-error-alert-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Form ────────────────────────────────────────────────── */
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-5);
}

/* ── Field group ─────────────────────────────────────────── */
.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2);
}

.login-label {
  font-size: var(--cs-text-base);
  font-weight: 500;
  color: var(--cs-text-secondary);
}

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

.login-input-icon {
  position: absolute;
  left: 14px;
  color: var(--cs-text-faint);
  font-size: 15px;
  pointer-events: none;
  z-index: 1;
}

.login-input {
  width: 100%;
  height: 48px;
  padding: 0 48px 0 42px;
  border: 1.5px solid var(--cs-border-dark);
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-lg);
  background: var(--cs-bg-alt);
  color: var(--cs-text-primary);
  box-sizing: border-box;
  transition: border-color var(--cs-transition-fast), box-shadow var(--cs-transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.login-input::placeholder {
  color: var(--cs-text-faint);
}

.login-input:focus {
  outline: none;
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.15);
  background: var(--cs-white);
}

.login-input.has-error {
  border-color: var(--cs-red);
}

.login-input.has-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.login-field-error {
  font-size: var(--cs-text-sm);
  color: var(--cs-red);
  margin: 0;
  min-height: 0;
}

/* ── Password toggle ─────────────────────────────────────── */
.login-pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--cs-text-faint);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-sm);
  transition: color var(--cs-transition-fast);
  z-index: 1;
  width: 32px;
  height: 32px;
}

.login-pw-toggle:hover {
  color: var(--cs-text-muted);
}

.login-pw-toggle:focus-visible {
  outline: 2px solid var(--cs-blue);
  outline-offset: 2px;
}

/* ── Remember / Forgot row ───────────────────────────────── */
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  font-size: var(--cs-text-base);
  color: var(--cs-text-secondary);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.login-remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cs-blue);
  cursor: pointer;
  margin: 0;
}

.login-forgot {
  color: var(--cs-blue);
  text-decoration: none;
  font-size: var(--cs-text-base);
  font-weight: 500;
  transition: color var(--cs-transition-fast);
}

.login-forgot:hover {
  color: var(--cs-blue-dark);
}

/* ── reCAPTCHA ───────────────────────────────────────────── */
.login-captcha {
  display: flex;
  justify-content: center;
  margin-bottom: var(--cs-space-2);
}

.login-captcha-missing {
  margin: 0;
  padding: var(--cs-space-3);
  font-size: var(--cs-text-sm);
  color: var(--cs-text-secondary);
  text-align: center;
  line-height: 1.5;
  max-width: 320px;
}

.login-captcha-missing code {
  font-size: 0.85em;
  word-break: break-all;
}

/* ── Submit button ───────────────────────────────────────── */
.login-submit {
  width: 100%;
  height: 48px;
  background: var(--cs-blue);
  color: var(--cs-white);
  border: none;
  border-radius: var(--cs-radius-lg);
  font-size: var(--cs-text-lg);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--cs-transition-fast), box-shadow var(--cs-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-space-2);
}

.login-submit:hover:not(:disabled) {
  background: var(--cs-blue-hover);
  box-shadow: var(--cs-shadow-sm);
}

.login-submit:active:not(:disabled) {
  background: var(--cs-blue-dark);
}

.login-submit:focus-visible {
  outline: 2px solid var(--cs-blue-dark);
  outline-offset: 2px;
}

.login-submit:disabled {
  background: #a0c4f1;
  cursor: not-allowed;
}

.login-secondary {
  width: 100%;
  height: 46px;
  background: var(--cs-bg-alt);
  color: var(--cs-text-secondary);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  font-size: var(--cs-text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--cs-transition-fast), color var(--cs-transition-fast);
}

.login-secondary:hover:not(:disabled) {
  background: var(--cs-border-light);
  color: var(--cs-text-primary);
}

.login-secondary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Spinner inside button */
.login-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: login-spin 0.6s linear infinite;
}

@keyframes login-spin {
  to { transform: rotate(360deg); }
}

/* ── Terms footer ────────────────────────────────────────── */
.login-terms {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-faint);
  text-align: center;
  margin: var(--cs-space-5) 0 0 0;
  line-height: 1.5;
}

.login-terms a {
  color: var(--cs-blue);
  text-decoration: none;
}

.login-terms a:hover {
  text-decoration: underline;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  .login-header {
    padding: var(--cs-space-4) var(--cs-space-5);
  }

  .login-body {
    padding: var(--cs-space-4) var(--cs-space-4);
    align-items: flex-start;
    padding-top: var(--cs-space-4);
  }

  .login-card {
    padding: var(--cs-space-8) var(--cs-space-6);
    border-radius: var(--cs-radius-xl);
    box-shadow: var(--cs-shadow-sm);
  }
}

@media (max-width: 480px) {
  .login-header {
    padding: var(--cs-space-3) var(--cs-space-4);
  }

  .login-header-logo {
    height: 30px;
  }

  .login-header-text {
    display: none;
  }

  .login-body {
    padding: 0;
    align-items: stretch;
  }

  .login-card {
    border-radius: 0;
    padding: var(--cs-space-8) var(--cs-space-5) var(--cs-space-10);
    box-shadow: none;
    min-height: calc(100vh - 56px);
    min-height: calc(100dvh - 56px);
  }

  .login-title {
    font-size: var(--cs-text-2xl);
  }

  .login-subtitle {
    font-size: var(--cs-text-base);
    margin-bottom: var(--cs-space-6);
  }
}

@media (max-width: 360px) {
  .login-card {
    padding: var(--cs-space-6) var(--cs-space-4) var(--cs-space-8);
  }

  .login-options {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cs-space-3);
  }
}

/* ============================================================
   Register Page — uses CloudSafe design tokens (tokens.css)
   Matches Login page patterns for consistency.
   ============================================================ */

/* ── Page layout ─────────────────────────────────────────── */
.reg-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--cs-bg-alt);
}

/* ── Header ──────────────────────────────────────────────── */
.reg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cs-space-5) var(--cs-space-6);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.reg-logo {
  height: 36px;
  flex-shrink: 0;
}

.reg-header-right {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
}

.reg-have-account {
  color: var(--cs-text-muted);
  font-size: var(--cs-text-base);
}

.reg-sign-in-link {
  color: var(--cs-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--cs-text-base);
  transition: color var(--cs-transition-fast);
}

.reg-sign-in-link:hover {
  color: var(--cs-blue-dark);
}

/* ── Card area ───────────────────────────────────────────── */
.reg-content {
  display: flex;
  justify-content: center;
  flex: 1 1;
  padding: var(--cs-space-6) var(--cs-space-5) var(--cs-space-12);
}

.reg-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius-xl);
  padding: var(--cs-space-10);
  width: 100%;
  max-width: 560px;
  box-shadow: var(--cs-shadow-md);
  box-sizing: border-box;
  text-align: left;
}

/* ── Step animation ──────────────────────────────────────── */
.reg-step {
  animation: regFadeIn 0.25s ease;
}

@keyframes regFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Titles ──────────────────────────────────────────────── */
.reg-title {
  font-size: var(--cs-text-3xl);
  font-weight: 700;
  color: var(--cs-text-primary);
  margin: 0 0 var(--cs-space-2) 0;
}

.reg-subtitle {
  font-size: var(--cs-text-md);
  color: var(--cs-text-muted);
  margin: 0 0 var(--cs-space-8) 0;
}

/* ── Top row (back + role badge) ──────────────────────────── */
.reg-top-row {
  display: flex;
  align-items: center;
  gap: var(--cs-space-4);
  margin-bottom: var(--cs-space-5);
}

.reg-top-row .reg-back {
  margin-bottom: 0;
}

.reg-top-row .reg-chosen-role {
  margin-bottom: 0;
}

/* ── Back button ─────────────────────────────────────────── */
.reg-back {
  display: inline-flex;
  align-items: center;
  gap: var(--cs-space-2);
  background: none;
  border: none;
  font-size: var(--cs-text-base);
  font-weight: 500;
  color: var(--cs-text-muted);
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--cs-space-5);
  transition: color var(--cs-transition-fast);
}

.reg-back:hover {
  color: var(--cs-text-primary);
}

.reg-back:focus-visible {
  outline: 2px solid var(--cs-blue);
  outline-offset: 2px;
  border-radius: var(--cs-radius-sm);
}

/* ── Role selection grid ─────────────────────────────────── */
.reg-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--cs-space-4);
  gap: var(--cs-space-4);
}

.reg-role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--cs-white);
  border: 2px solid var(--cs-border);
  border-radius: var(--cs-radius-xl);
  padding: var(--cs-space-6) var(--cs-space-4);
  cursor: pointer;
  transition: border-color var(--cs-transition-fast), box-shadow var(--cs-transition-fast), transform var(--cs-transition-fast);
}

.reg-role-card:hover {
  border-color: var(--cs-blue);
  box-shadow: var(--cs-shadow);
  transform: translateY(-2px);
}

.reg-role-card:focus-visible {
  outline: 2px solid var(--cs-blue);
  outline-offset: 2px;
}

.reg-role-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--cs-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cs-blue-light);
  margin-bottom: var(--cs-space-3);
}

.reg-role-icon {
  font-size: 22px;
  color: var(--cs-blue);
}

.reg-role-title {
  font-size: var(--cs-text-md);
  font-weight: 600;
  color: var(--cs-text-primary);
  margin: 0 0 var(--cs-space-1) 0;
}

.reg-role-desc {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-muted);
  margin: 0;
  line-height: 1.45;
}

/* ── Sub-role cards ──────────────────────────────────────── */
.reg-sub-grid {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-3);
}

.reg-sub-card {
  display: flex;
  align-items: center;
  gap: var(--cs-space-4);
  background: var(--cs-white);
  border: 2px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-space-5) var(--cs-space-6);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--cs-transition-fast), box-shadow var(--cs-transition-fast);
}

.reg-sub-card:hover {
  border-color: var(--cs-blue);
  box-shadow: var(--cs-shadow-sm);
}

.reg-sub-card:focus-visible {
  outline: 2px solid var(--cs-blue);
  outline-offset: 2px;
}

.reg-sub-icon {
  font-size: 20px;
  color: var(--cs-blue);
  flex-shrink: 0;
}

.reg-sub-title {
  font-size: var(--cs-text-base);
  font-weight: 600;
  color: var(--cs-text-primary);
  margin: 0 0 2px 0;
}

.reg-sub-desc {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-muted);
  margin: 0;
}

/* ── Chosen role badge ───────────────────────────────────── */
.reg-chosen-role {
  display: inline-flex;
  align-items: center;
  gap: var(--cs-space-2);
  background: var(--cs-blue-light);
  border-radius: var(--cs-radius);
  padding: var(--cs-space-2) var(--cs-space-3);
  font-size: var(--cs-text-sm);
  font-weight: 500;
  color: var(--cs-blue-dark);
  margin-bottom: var(--cs-space-5);
}

.reg-chosen-check {
  font-size: 11px;
}

/* ── Server error alert ──────────────────────────────────── */
.reg-error-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--cs-space-3);
  background: var(--cs-red-light);
  border: 1px solid var(--cs-red-border);
  border-radius: var(--cs-radius);
  padding: var(--cs-space-3) var(--cs-space-4);
  margin-bottom: var(--cs-space-5);
  font-size: var(--cs-text-sm);
  color: var(--cs-red-dark);
  line-height: 1.5;
}

.reg-error-alert-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Form ────────────────────────────────────────────────── */
.reg-form {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-5);
}

.reg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--cs-space-4);
  gap: var(--cs-space-4);
}

/* ── Field group ─────────────────────────────────────────── */
.reg-field {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2);
}

.reg-label {
  font-size: var(--cs-text-base);
  font-weight: 500;
  color: var(--cs-text-secondary);
}

.reg-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--cs-space-4);
  border: 1.5px solid var(--cs-border-dark);
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-lg);
  background: var(--cs-bg-alt);
  color: var(--cs-text-primary);
  box-sizing: border-box;
  transition: border-color var(--cs-transition-fast), box-shadow var(--cs-transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.reg-input::placeholder {
  color: var(--cs-text-faint);
}

.reg-input:focus {
  outline: none;
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.15);
  background: var(--cs-white);
}

.reg-input.has-error {
  border-color: var(--cs-red);
}

.reg-input.has-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* ── Password input with toggle ──────────────────────────── */
.reg-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.reg-input-wrap .reg-input {
  padding-right: 48px;
}

.reg-pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--cs-text-faint);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-sm);
  transition: color var(--cs-transition-fast);
  z-index: 1;
  width: 32px;
  height: 32px;
}

.reg-pw-toggle:hover {
  color: var(--cs-text-muted);
}

.reg-pw-toggle:focus-visible {
  outline: 2px solid var(--cs-blue);
  outline-offset: 2px;
}

/* ── Password helper text ────────────────────────────────── */
.reg-password-hint {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-faint);
  margin: 0;
  line-height: 1.45;
}

/* ── Field error ─────────────────────────────────────────── */
.reg-field-error {
  font-size: var(--cs-text-sm);
  color: var(--cs-red);
  margin: 0;
  min-height: 0;
}

/* ── Submit button ───────────────────────────────────────── */
.reg-submit {
  width: 100%;
  height: 48px;
  background: var(--cs-blue);
  color: var(--cs-white);
  border: none;
  border-radius: var(--cs-radius-lg);
  font-size: var(--cs-text-lg);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--cs-transition-fast), box-shadow var(--cs-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-space-2);
  margin-top: var(--cs-space-1);
}

.reg-submit:hover:not(:disabled) {
  background: var(--cs-blue-hover);
  box-shadow: var(--cs-shadow-sm);
}

.reg-submit:active:not(:disabled) {
  background: var(--cs-blue-dark);
}

.reg-submit:focus-visible {
  outline: 2px solid var(--cs-blue-dark);
  outline-offset: 2px;
}

.reg-submit:disabled {
  background: #a0c4f1;
  cursor: not-allowed;
}

/* Spinner inside button */
.reg-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: reg-spin 0.6s linear infinite;
}

@keyframes reg-spin {
  to { transform: rotate(360deg); }
}

/* ── Terms footer ────────────────────────────────────────── */
.reg-terms {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-faint);
  text-align: center;
  margin: var(--cs-space-5) 0 0 0;
  line-height: 1.5;
}

.reg-terms a {
  color: var(--cs-blue);
  text-decoration: none;
}

.reg-terms a:hover {
  text-decoration: underline;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  .reg-header {
    padding: var(--cs-space-4) var(--cs-space-5);
  }

  .reg-content {
    padding: var(--cs-space-4);
  }

  .reg-card {
    padding: var(--cs-space-8) var(--cs-space-6);
    border-radius: var(--cs-radius-xl);
    box-shadow: var(--cs-shadow-sm);
  }

  .reg-role-card {
    padding: var(--cs-space-5) var(--cs-space-3);
  }

  .reg-sub-card {
    padding: var(--cs-space-4) var(--cs-space-5);
  }
}

@media (max-width: 480px) {
  .reg-header {
    padding: var(--cs-space-3) var(--cs-space-4);
  }

  .reg-logo {
    height: 30px;
  }

  .reg-have-account {
    display: none;
  }

  .reg-content {
    padding: 0;
  }

  .reg-card {
    border-radius: 0;
    padding: var(--cs-space-8) var(--cs-space-5) var(--cs-space-10);
    box-shadow: none;
  }

  .reg-title {
    font-size: var(--cs-text-2xl);
  }

  .reg-subtitle {
    font-size: var(--cs-text-base);
    margin-bottom: var(--cs-space-6);
  }

  .reg-role-grid {
    grid-template-columns: 1fr;
    gap: var(--cs-space-3);
  }

  .reg-role-card {
    flex-direction: row;
    text-align: left;
    gap: var(--cs-space-4);
    padding: var(--cs-space-4) var(--cs-space-5);
  }

  .reg-role-icon-wrap {
    margin-bottom: 0;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .reg-role-icon {
    font-size: 18px;
  }

  .reg-row {
    grid-template-columns: 1fr;
    gap: var(--cs-space-5);
  }
}

@media (max-width: 360px) {
  .reg-card {
    padding: var(--cs-space-6) var(--cs-space-4) var(--cs-space-8);
  }

  .reg-role-card {
    padding: var(--cs-space-3) var(--cs-space-4);
  }

  .reg-sub-card {
    padding: var(--cs-space-3) var(--cs-space-4);
    gap: var(--cs-space-3);
  }
}

/* ============================================================
   Dashboard — CloudSafe Control Panel
   Uses design tokens from tokens.css (var(--cs-*))
   ============================================================ */

/* ─── Page Shell ───────────────────────────────────────────── */
.dash-page {
  width: 100%;
  min-height: 100vh;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  overflow-x: hidden;
}

/* ─── Main Content Area ────────────────────────────────────── */
.dash-content {
  padding: var(--cs-space-6) var(--cs-space-10);
  margin-top: 96px;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.dash-content > * {
  width: 100%;
}

/* ─── Primary Action Button ────────────────────────────────── */
.dash-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  border: none;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 10px 20px;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  font-family: Inter, sans-serif;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  transition: background var(--cs-transition, 0.2s ease), transform var(--cs-transition, 0.2s ease);
  box-shadow: var(--cs-shadow-sm);
  white-space: nowrap;
  min-height: 44px;
}

.dash-btn-primary:hover {
  background: #1565C0;
  background: var(--cs-blue-dark, #1565C0);
  transform: translateY(-1px);
}

.dash-btn-primary:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 2px;
}

.dash-btn-primary svg {
  font-size: 0.9em;
  flex-shrink: 0;
}

/* ─── Stats Row ────────────────────────────────────────────── */
.dash-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  grid-gap: 16px;
  grid-gap: var(--cs-space-4, 16px);
  gap: var(--cs-space-4, 16px);
  margin-bottom: 24px;
  margin-bottom: var(--cs-space-6, 24px);
}

/* Override StatCard inside dash-stats-row for consistent sizing */
.dash-stats-row .stat-card {
  min-height: 0;
}

/* Skeleton stat card */
.dash-stat-skeleton {
  height: 80px;
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
}

/* ─── Search Bar ───────────────────────────────────────────── */
.dash-search {
  margin-bottom: 24px;
  margin-bottom: var(--cs-space-6, 24px);
}

.dash-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  gap: var(--cs-space-3, 12px);
  background: #fff;
  background: var(--cs-white, #fff);
  border: 2px solid #e5e7eb;
  border: 2px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 12px 16px;
  padding: var(--cs-space-3, 12px) var(--cs-space-4, 16px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  transition: border-color var(--cs-transition, 0.2s ease), box-shadow var(--cs-transition, 0.2s ease);
  width: 100%;
  box-sizing: border-box;
}

.dash-search-bar:hover,
.dash-search-bar:focus-within {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.1);
}

.dash-search-icon {
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 1rem;
  flex-shrink: 0;
}

.dash-search-input {
  flex: 1 1;
  border: none;
  outline: none;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: transparent;
  padding: 0;
  min-width: 0;
  font-family: Inter, sans-serif;
}

.dash-search-input::placeholder {
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

.dash-search-clear {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  transition: color 0.12s ease, background 0.12s ease;
  transition: color var(--cs-transition-fast, 0.12s ease), background var(--cs-transition-fast, 0.12s ease);
}

.dash-search-clear:hover {
  color: #ef4444;
  color: var(--cs-red, #ef4444);
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
}

.dash-search-clear:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 2px;
}

/* ─── Filter chip bar ─────────────────────────────────────── */
.dash-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  margin-bottom: var(--cs-space-5, 20px);
  align-items: center;
}

.dash-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  background: #fff;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dash-filter-chip:hover {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

.dash-filter-chip-active {
  font-weight: 600;
}
.dash-filter-chip-good     { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.dash-filter-chip-info     { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.dash-filter-chip-warning  { background: #fff7ed; border-color: #fcd34d; color: #b45309; }
.dash-filter-chip-critical { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.dash-filter-chip-unknown  { background: #f3f4f6; border-color: #d1d5db; color: #4b5563; }

.dash-filter-clear {
  background: none;
  border: none;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  padding: 7px 8px;
  font-family: inherit;
  text-decoration: underline;
}
.dash-filter-clear:hover { color: #1A80E5; color: var(--cs-blue, #1A80E5); }

/* ─── Properties Section ───────────────────────────────────── */
.dash-properties-section {
  margin-top: 8px;
  margin-top: var(--cs-space-2, 8px);
}

.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  margin-bottom: var(--cs-space-4, 16px);
  flex-wrap: wrap;
  gap: 8px;
}

.dash-section-title {
  font-size: 1.125rem;
  font-size: var(--cs-text-xl, 1.125rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  gap: var(--cs-space-3, 12px);
}

.dash-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 9999px;
  border-radius: var(--cs-radius-full, 9999px);
  min-width: 28px;
  height: 24px;
}

/* ─── Property Cards Grid ──────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  grid-gap: 20px;
  grid-gap: var(--cs-space-5, 20px);
  gap: var(--cs-space-5, 20px);
  width: 100%;
}

.dash-grid .property-card {
  margin: 0;
  box-sizing: border-box;
}

/* Consistent image ratio in grid */
.dash-grid .pc-thumb {
  aspect-ratio: 16 / 9;
}

/* ─── Recently Viewed Section ──────────────────────────────── */
.dash-recent-section {
  margin-bottom: 24px;
  margin-bottom: var(--cs-space-6, 24px);
}

.dash-recent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  grid-gap: 16px;
  grid-gap: var(--cs-space-4, 16px);
  gap: var(--cs-space-4, 16px);
}

.dash-recent-card {
  display: flex;
  align-items: center;
  padding: 16px;
  padding: var(--cs-space-4, 16px);
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  transition: background var(--cs-transition, 0.2s ease), transform var(--cs-transition, 0.2s ease);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  min-width: 0;
  overflow: hidden;
}

.dash-recent-card:hover {
  background: #fff;
  background: var(--cs-white, #fff);
  transform: translateY(-2px);
  box-shadow: var(--cs-shadow-md);
}

.dash-recent-card:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 2px;
}

.dash-recent-img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  object-fit: cover;
  margin-right: 12px;
  margin-right: var(--cs-space-3, 12px);
  flex-shrink: 0;
}

.dash-recent-info {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
}

.dash-recent-name {
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-recent-addr {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Skeleton Loading ─────────────────────────────────────── */
.dash-skeleton-header {
  margin-bottom: 24px;
  margin-bottom: var(--cs-space-6, 24px);
}

/* ─── Placeholder Image ────────────────────────────────────── */
img[src*="placeholder.png"] {
  object-fit: cover;
  background-color: #f3f4f6;
  background-color: var(--cs-bg, #f3f4f6);
}

/* ============================================================
   RESPONSIVE — Tablet (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .dash-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-grid {
    gap: 16px;
    gap: var(--cs-space-4, 16px);
  }

  .dash-recent-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   RESPONSIVE — Mobile landscape / small tablet (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  .dash-content {
    padding: 20px;
    padding: var(--cs-space-5, 20px);
    margin-top: 80px;
  }

  .dash-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    gap: var(--cs-space-3, 12px);
  }

  .dash-recent-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   RESPONSIVE — Mobile (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  .dash-content {
    padding: 16px;
    padding: var(--cs-space-4, 16px);
    margin-top: 72px;
  }

  .dash-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    gap: var(--cs-space-3, 12px);
  }

  .dash-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    gap: var(--cs-space-3, 12px);
  }

  .dash-section-title {
    font-size: 1rem;
    font-size: var(--cs-text-lg, 1rem);
  }

  .dash-btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   RESPONSIVE — Small mobile (≤360px)
   ============================================================ */
@media (max-width: 360px) {
  .dash-content {
    padding: 16px 12px;
    padding: var(--cs-space-4, 16px) var(--cs-space-3, 12px);
  }

  .dash-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    gap: var(--cs-space-2, 8px);
  }

  .dash-search-bar {
    padding: 12px;
    padding: var(--cs-space-3, 12px);
  }
}

/* ============================================================
   AddPropertyForm — Modal overlay + form card
   Uses design tokens from tokens.css (var(--cs-*))
   ============================================================ */

/* ─── Overlay ──────────────────────────────────── */
.add-property-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  padding: 20px;
  padding: var(--cs-space-5, 20px);
}

/* ─── Form Card ────────────────────────────────── */
.add-property-form {
  background: #fff;
  background: var(--cs-white, #fff);
  padding: 32px 24px 24px;
  padding: var(--cs-space-8, 32px) var(--cs-space-6, 24px) var(--cs-space-6, 24px);
  border-radius: 16px;
  border-radius: var(--cs-radius-xl, 16px);
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: var(--cs-shadow-xl);
  animation: apf-slideUp 0.2s ease-out;
  text-align: left;
}

@keyframes apf-slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Close Button ─────────────────────────────── */
.close-button {
  position: absolute;
  top: 16px;
  top: var(--cs-space-4, 16px);
  right: 16px;
  right: var(--cs-space-4, 16px);
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  padding: 6px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
  transition: all var(--cs-transition-fast, 0.12s ease);
}
.close-button:hover {
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
}

/* ─── Title ────────────────────────────────────── */
.add-property-form h2 {
  font-family: Inter, -apple-system, sans-serif;
  font-size: 1.25rem;
  font-size: var(--cs-text-2xl, 1.25rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 2px;
  font-weight: 700;
}

.form-subtitle {
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  margin: 0 0 20px;
  margin: 0 0 var(--cs-space-5, 20px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
}

/* ─── Form Groups ──────────────────────────────── */
.form-group {
  margin-bottom: 16px;
  margin-bottom: var(--cs-space-4, 16px);
}

.form-group-upload {
  position: relative;
  z-index: 1;
}

.add-property-form .form-group label,
.add-property-form .form-group .field-label {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  font-weight: 600;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-family: Inter, -apple-system, sans-serif;
  text-align: left;
}

.optional-tag {
  font-weight: 400;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  margin-left: 4px;
}

/* ─── Inputs ───────────────────────────────────── */
.add-property-form .form-group input[type="text"] {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 1.5px solid #d1d5db;
  border: 1.5px solid var(--cs-border-dark, #d1d5db);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-family: Inter, -apple-system, sans-serif;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: #fff;
  background: var(--cs-white, #fff);
  transition: border-color var(--cs-transition-fast), box-shadow var(--cs-transition-fast);
  box-sizing: border-box;
}

.add-property-form .form-group input[type="text"]::placeholder {
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

.add-property-form .form-group input[type="text"]:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.12);
}

/* ─── Address Field ────────────────────────────── */
.address-input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.address-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 13px;
  pointer-events: none;
  z-index: 1;
}

.address-input-container input {
  padding-left: 36px !important;
}

.add-property-form .address-input-container .pac-target-input,
.add-property-form .address-input-container input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 10px 14px 10px 36px !important;
  border: 1.5px solid #d1d5db;
  border: 1.5px solid var(--cs-border-dark, #d1d5db);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-family: Inter, -apple-system, sans-serif;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: #fff;
  background: var(--cs-white, #fff);
  transition: border-color var(--cs-transition-fast), box-shadow var(--cs-transition-fast);
  box-sizing: border-box;
}

.address-input-container input:focus {
  outline: none;
  border-color: #1A80E5 !important;
  border-color: var(--cs-blue, #1A80E5) !important;
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.12);
}

.valid-address {
  border-color: #22c55e !important;
  border-color: var(--cs-green, #22c55e) !important;
}
.valid-address:focus {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12) !important;
}

.validation-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #22c55e;
  color: var(--cs-green, #22c55e);
  font-weight: 500;
}

/* Google Places dropdown */
.pac-container {
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  margin-top: 4px;
  box-shadow: var(--cs-shadow-md);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  font-family: Inter, -apple-system, sans-serif;
  z-index: 1200 !important;
}
.pac-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  border-top: 1px solid #f3f4f6;
  border-top: 1px solid var(--cs-bg, #f3f4f6);
}
.pac-item:first-child { border-top: none; }
.pac-item:hover { background-color: #EBF4FF; background-color: var(--cs-blue-light, #EBF4FF); }

/* ─── Image Upload ─────────────────────────────── */
.upload-placeholder {
  cursor: pointer;
  border: 2px dashed #d1d5db;
  border: 2px dashed var(--cs-border-dark, #d1d5db);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  padding: 16px 14px;
  text-align: center;
  transition: all var(--cs-transition-fast);
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.upload-placeholder:hover {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
}

.upload-icon {
  font-size: 24px;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  margin-bottom: 4px;
}

.upload-main-text {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 500;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
}

.upload-hint {
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  margin-top: 2px;
}

.preview-wrapper {
  position: relative;
  width: 100%;
  height: 140px;
}

.image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
}

.remove-preview {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  transition: background var(--cs-transition-fast);
}
.remove-preview:hover {
  background: rgba(220, 38, 38, 0.85);
}

.file-input {
  display: none;
}

/* ─── Actions ──────────────────────────────────── */
.form-actions {
  display: flex;
  gap: 12px;
  gap: var(--cs-space-3, 12px);
  margin-top: 20px;
  margin-top: var(--cs-space-5, 20px);
  position: relative;
  z-index: 3;
}

.form-actions button {
  flex: 1 1;
  padding: 11px 18px;
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  font-family: Inter, -apple-system, sans-serif;
  cursor: pointer;
  transition: all var(--cs-transition-fast);
}

.add-property-form .cancel-button {
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1.5px solid #d1d5db;
  border: 1.5px solid var(--cs-border-dark, #d1d5db);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
}
.add-property-form .cancel-button:hover {
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  border-color: #9ca3af;
  border-color: var(--cs-text-faint, #9ca3af);
}
.add-property-form .cancel-button:active {
  background: #e5e7eb;
  background: var(--cs-border, #e5e7eb);
  transform: scale(0.98);
}

.add-property-form .submit-button {
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  border: none;
  color: #fff;
  box-shadow: 0 2px 6px rgba(26, 128, 229, 0.3);
}
.add-property-form .submit-button:hover:not(:disabled) {
  background: #1565C0;
  background: var(--cs-blue-dark, #1565C0);
  box-shadow: 0 3px 10px rgba(26, 128, 229, 0.4);
  transform: translateY(-1px);
}
.add-property-form .submit-button:active:not(:disabled) {
  background: #1565C0;
  background: var(--cs-blue-dark, #1565C0);
  box-shadow: 0 1px 3px rgba(26, 128, 229, 0.25);
  transform: translateY(0);
}
.add-property-form .submit-button:disabled {
  background: #e5e7eb;
  background: var(--cs-border, #e5e7eb);
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  cursor: not-allowed;
  box-shadow: none;
}
.add-property-form .cancel-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   RESPONSIVE — Mobile (≤520px) → Bottom sheet
   ============================================================ */
@media (max-width: 520px) {
  .add-property-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .add-property-form {
    padding: 20px 16px 16px;
    padding: var(--cs-space-5, 20px) var(--cs-space-4, 16px) var(--cs-space-4, 16px);
    border-radius: 16px 16px 0 0;
    border-radius: var(--cs-radius-xl, 16px) var(--cs-radius-xl, 16px) 0 0;
    max-height: 92vh;
    max-width: 100%;
    animation: apf-slideSheet 0.25s ease-out;
  }

  @keyframes apf-slideSheet {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .close-button {
    top: 12px;
    top: var(--cs-space-3, 12px);
    right: 12px;
    right: var(--cs-space-3, 12px);
  }

  .add-property-form h2 {
    font-size: 1.125rem;
    font-size: var(--cs-text-xl, 1.125rem);
    margin-bottom: 2px;
  }

  .form-subtitle {
    margin-bottom: 16px;
    margin-bottom: var(--cs-space-4, 16px);
    font-size: 0.7rem;
    font-size: var(--cs-text-xs, 0.7rem);
  }

  .form-group {
    margin-bottom: 12px;
    margin-bottom: var(--cs-space-3, 12px);
  }

  .form-group input[type="text"],
  .address-input-container .pac-target-input,
  .address-input-container input[type="text"] {
    padding: 9px 12px !important;
    font-size: 0.8125rem;
    font-size: var(--cs-text-sm, 0.8125rem);
  }

  .address-input-container input {
    padding-left: 34px !important;
  }

  .address-input-container .pac-target-input,
  .address-input-container input[type="text"] {
    padding-left: 34px !important;
  }

  .upload-placeholder {
    min-height: 70px;
    padding: 12px 10px;
  }

  .upload-icon {
    font-size: 20px;
    margin-bottom: 2px;
  }

  .upload-main-text {
    font-size: 0.7rem;
    font-size: var(--cs-text-xs, 0.7rem);
  }

  .upload-hint {
    font-size: 10px;
  }

  .preview-wrapper {
    height: 110px;
  }

  .form-actions {
    flex-direction: column;
    margin-top: 16px;
    margin-top: var(--cs-space-4, 16px);
    gap: 8px;
    gap: var(--cs-space-2, 8px);
  }

  .form-actions button {
    padding: 12px 16px;
  }
}

/* ================================================================
   PropertyCard — Compact, dense, premium card
   ================================================================ */
.property-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  width: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  outline: none;
}


.property-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  border-color: #d1d5db;
}

.property-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.25);
  border-color: #1A80E5;
}

/* ── Thumbnail ─────────────────────────────── */
.pc-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f3f4f6;
  position: relative;
  flex-shrink: 0;
}

.pc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.property-card:hover .pc-thumb img {
  transform: scale(1.05);
}

/* ── Status Pill (overlaid on thumb) ───────── */
.pc-status-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pc-status-pill.status-compliant {
  background: rgba(22, 163, 74, 0.18);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.3);
}

.pc-status-pill.status-due-soon {
  background: rgba(217, 119, 6, 0.18);
  color: #92400e;
  border: 1px solid rgba(217, 119, 6, 0.3);
}

.pc-status-pill.status-overdue {
  background: rgba(220, 38, 38, 0.18);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.pc-status-pill.status-unknown {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
  border: 1px solid rgba(107, 114, 128, 0.2);
}

/* New status pills (compliance-state driven) */
.pc-pill-good {
  background: rgba(34, 197, 94, 0.18);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.3);
}
.pc-pill-info {
  background: rgba(26, 128, 229, 0.18);
  color: #1d4ed8;
  border: 1px solid rgba(26, 128, 229, 0.3);
}
.pc-pill-warning {
  background: rgba(245, 158, 11, 0.2);
  color: #92400e;
  border: 1px solid rgba(217, 119, 6, 0.3);
}
.pc-pill-critical {
  background: rgba(239, 68, 68, 0.18);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.3);
}
.pc-pill-unknown {
  background: rgba(107, 114, 128, 0.15);
  color: #4b5563;
  border: 1px solid rgba(107, 114, 128, 0.2);
}

/* ── Body ──────────────────────────────────── */
.pc-body {
  padding: 10px 12px 10px;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-width: 0;
}

.pc-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 2px 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-address {
  font-size: 0.6875rem;
  color: #6b7280;
  margin: 0 0 6px 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pc-pin-icon {
  color: #9ca3af;
  flex-shrink: 0;
  font-size: 0.55rem;
}

/* ── Compliance section ───────────────────── */
.pc-comp {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.pc-comp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.7rem;
  color: #6b7280;
}
.pc-comp-row strong {
  color: #111827;
  font-weight: 700;
  font-size: 0.8125rem;
}
.pc-comp-bar {
  height: 5px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.pc-comp-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
  background: #d1d5db;
}
.pc-state-good     .pc-comp-bar-fill { background: #22c55e; }
.pc-state-info     .pc-comp-bar-fill { background: #1A80E5; }
.pc-state-warning  .pc-comp-bar-fill { background: #f59e0b; }
.pc-state-critical .pc-comp-bar-fill { background: #ef4444; }

.pc-comp-empty {
  font-size: 0.7rem;
  color: #9ca3af;
  font-style: italic;
}

/* Asset chips */
.pc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.pc-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 500;
  background: #f3f4f6;
  color: #374151;
  line-height: 1.2;
}
.pc-chip strong { font-weight: 700; color: #111827; }
.pc-chip-failed   { background: #fef2f2; color: #b91c1c; }
.pc-chip-failed   strong { color: #b91c1c; }
.pc-chip-due      { background: #fff7ed; color: #b45309; }
.pc-chip-due      strong { color: #b45309; }
.pc-chip-untested { background: #f9fafb; color: #6b7280; }
.pc-chip-untested strong { color: #6b7280; }

/* ── Footer (counts + arrow) ───────────────── */
.pc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid #f3f4f6;
}

.pc-footer-meta {
  font-size: 0.7rem;
  color: #6b7280;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pc-footer-report {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.pc-footer-report:hover {
  background: #1A80E5;
  color: #fff;
  border-color: #1A80E5;
}
.pc-footer-report svg { font-size: 0.75rem; }

.pc-counts {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.pc-count {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.3;
}

.pc-count-red {
  background: #fef2f2;
  color: #dc2626;
}

.pc-count-amber {
  background: #fffbeb;
  color: #b45309;
}

.pc-count-green {
  background: #f0fdf4;
  color: #16a34a;
}

.pc-count-gray {
  background: transparent;
  color: #d1d5db;
  font-size: 0.75rem;
}

.pc-arrow {
  color: #d1d5db;
  font-size: 0.6rem;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}

.property-card:hover .pc-arrow {
  color: #1A80E5;
  transform: translateX(2px);
}

/* ── Hover Actions (edit/delete) ───────────── */
.property-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  gap: 4px;
}

.property-card:hover .property-actions {
  display: flex;
}

.action-button {
  width: 28px;
  height: 28px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  transition: all 0.15s ease;
}

.action-button.edit {
  background: rgba(26, 128, 229, 0.9);
  color: #fff;
}
.action-button.edit:hover { background: #1A80E5; }

.action-button.delete {
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
}
.action-button.delete:hover { background: #ef4444; }

/* ── Confirmation Modal ────────────────────── */
.confirmation-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.confirmation-content {
  background: white;
  padding: 24px;
  border-radius: 12px;
  width: 90%;
  max-width: 380px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.confirmation-content h3 {
  margin: 0 0 10px 0;
  font-size: 1rem;
  color: #111827;
  font-weight: 700;
}

.confirmation-content p {
  margin: 0 0 20px 0;
  color: #6b7280;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.confirmation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.confirmation-actions button {
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.8125rem;
  transition: all 0.15s;
  font-family: inherit;
}

.confirmation-actions .cancel-button {
  background: #f3f4f6;
  color: #374151;
}
.confirmation-actions .cancel-button:hover { background: #e5e7eb; }

.confirmation-actions .delete-button {
  background: #ef4444;
  color: white;
}
.confirmation-actions .delete-button:hover { background: #dc2626; }

/* ── Responsive ────────────────────────────── */
@media (max-width: 768px) {
  .pc-thumb {
    aspect-ratio: 16 / 9;
  }
  .pc-body {
    padding: 8px 10px 8px;
  }
  .pc-name { font-size: 0.78rem; }
  .pc-address { font-size: 0.65rem; }
}

@media (max-width: 480px) {
  .pc-body {
    padding: 8px 10px 8px;
  }
}

/* Loading state */
.pc-thumb.loading {
  background: #f3f4f6;
  animation: propPulse 1.5s infinite;
}

@keyframes propPulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Skeleton Loader Styles */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    display: block;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Skeleton Container */
.skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Skeleton Text Variations */
.skeleton-text {
    height: 1rem;
    margin-bottom: 6px;
}

.skeleton-text:last-child {
    margin-bottom: 0;
}

/* Skeleton Paragraph */
.skeleton-paragraph {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Skeleton Card */
.skeleton-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.skeleton-card-content {
    padding: 16px;
}

/* Skeleton Property Card */
.skeleton-property-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 100%;
}

.skeleton-property-content {
    padding: 16px;
}

/* Skeleton Counter */
.skeleton-counter {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.skeleton-counter-content {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Skeleton List Item */
.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.skeleton-list-content {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Skeleton Table */
.skeleton-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.skeleton-table-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 16px;
    gap: 16px;
    padding: 16px;
    background: #f7f8fa;
    border-bottom: 1px solid #e1e5e9;
}

.skeleton-table-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 16px;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #f1f3f4;
}

.skeleton-table-row:last-child {
    border-bottom: none;
}

/* Skeleton Grid */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

/* Skeleton Dashboard */
.skeleton-dashboard {
    padding: 24px;
}

.skeleton-dashboard-header {
    margin-bottom: 32px;
}

.skeleton-dashboard-header .skeleton:first-child {
    margin-bottom: 8px;
}

.skeleton-counters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 20px;
    gap: 20px;
    margin-bottom: 40px;
}

.skeleton-properties-section .skeleton:first-child {
    margin-bottom: 24px;
}

/* Dark Theme Support */
@media (prefers-color-scheme: dark) {
    .skeleton {
        background: linear-gradient(90deg, #2d3748 25%, #1a202c 50%, #2d3748 75%);
        background-size: 200% 100%;
    }
    
    .skeleton-card,
    .skeleton-property-card,
    .skeleton-counter,
    .skeleton-table {
        background: #2d3748;
    }
    
    .skeleton-table-header {
        background: #1a202c;
        border-bottom-color: #4a5568;
    }
    
    .skeleton-table-row {
        border-bottom-color: #4a5568;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: #f0f0f0;
    }
    
    @media (prefers-color-scheme: dark) {
        .skeleton {
            background: #2d3748;
        }
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .skeleton {
        background: #e0e0e0;
        border: 1px solid #999;
    }
    
    @media (prefers-color-scheme: dark) {
        .skeleton {
            background: #4a5568;
            border-color: #718096;
        }
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .skeleton-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .skeleton-counters-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .skeleton-table-header,
    .skeleton-table-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .skeleton-counter {
        padding: 16px;
        gap: 12px;
    }
    
    .skeleton-card-content,
    .skeleton-property-content {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .skeleton-dashboard {
        padding: 16px;
    }
    
    .skeleton-counter {
        flex-direction: column;
        text-align: center;
    }
    
    .skeleton-list-item {
        padding: 8px 0;
        gap: 8px;
    }
}

/* Specific Skeleton Sizes */
.skeleton-xs { height: 0.75rem; }
.skeleton-sm { height: 1rem; }
.skeleton-md { height: 1.25rem; }
.skeleton-lg { height: 1.5rem; }
.skeleton-xl { height: 2rem; }

/* Skeleton Widths */
.skeleton-w-quarter { width: 25%; }
.skeleton-w-third { width: 33.333333%; }
.skeleton-w-half { width: 50%; }
.skeleton-w-two-thirds { width: 66.666667%; }
.skeleton-w-three-quarters { width: 75%; }
.skeleton-w-full { width: 100%; }

/* Skeleton Rounded Variations */
.skeleton-rounded-sm { border-radius: 2px; }
.skeleton-rounded { border-radius: 4px; }
.skeleton-rounded-md { border-radius: 6px; }
.skeleton-rounded-lg { border-radius: 8px; }
.skeleton-rounded-xl { border-radius: 12px; }
.skeleton-rounded-full { border-radius: 9999px; }



/* Empty State Styles */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Size Variations */
.empty-state-small {
    padding: 32px 16px;
}

.empty-state-medium {
    padding: 48px 24px;
}

.empty-state-large {
    padding: 64px 32px;
}

/* Icon */
.empty-state-icon {
    margin-bottom: 24px;
    font-size: 4rem;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.empty-state-small .empty-state-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.empty-state-large .empty-state-icon {
    font-size: 5rem;
    margin-bottom: 32px;
}

/* Illustration */
.empty-state-illustration {
    margin-bottom: 24px;
    max-width: 300px;
    opacity: 0.8;
}

.empty-state-small .empty-state-illustration {
    max-width: 200px;
    margin-bottom: 16px;
}

.empty-state-large .empty-state-illustration {
    max-width: 400px;
    margin-bottom: 32px;
}

/* Content */
.empty-state-content {
    max-width: 500px;
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 12px 0;
}

.empty-state-small .empty-state-title {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.empty-state-large .empty-state-title {
    font-size: 1.75rem;
    margin-bottom: 16px;
}

.empty-state-description {
    font-size: 1rem;
    color: #718096;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.empty-state-small .empty-state-description {
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.empty-state-large .empty-state-description {
    font-size: 1.1rem;
    margin-bottom: 32px;
}

/* Action Button */
.empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #3182ce;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.empty-state-action:hover {
    background: #2c5282;
    transform: translateY(-1px);
}

.empty-state-action:active {
    transform: translateY(0);
}

/* Multiple Actions */
.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.empty-state-action.secondary {
    background: white;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}

.empty-state-action.secondary:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
}

/* Color Variants */
.empty-state-blue .empty-state-icon { color: #3182ce; }
.empty-state-green .empty-state-icon { color: #38a169; }
.empty-state-red .empty-state-icon { color: #e53e3e; }
.empty-state-orange .empty-state-icon { color: #dd6b20; }
.empty-state-yellow .empty-state-icon { color: #d69e2e; }
.empty-state-purple .empty-state-icon { color: #805ad5; }
.empty-state-indigo .empty-state-icon { color: #5a67d8; }
.empty-state-gray .empty-state-icon { color: #718096; }

/* Loading State */
.empty-state.loading .empty-state-icon {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.loading-icon {
    position: relative;
}

.loading-spinner {
    width: 64px;
    height: 64px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #3182ce;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Interactive Hover Effects */
.empty-state:hover .empty-state-icon {
    transform: scale(1.05);
    opacity: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .empty-state {
        padding: 32px 16px;
    }
    
    .empty-state-large {
        padding: 48px 20px;
    }
    
    .empty-state-icon {
        font-size: 3rem;
    }
    
    .empty-state-large .empty-state-icon {
        font-size: 4rem;
    }
    
    .empty-state-title {
        font-size: 1.25rem;
    }
    
    .empty-state-large .empty-state-title {
        font-size: 1.5rem;
    }
    
    .empty-state-description {
        font-size: 0.9rem;
    }
    
    .empty-state-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .empty-state-action {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .empty-state {
        padding: 24px 12px;
    }
    
    .empty-state-icon {
        font-size: 2.5rem;
        margin-bottom: 16px;
    }
    
    .empty-state-title {
        font-size: 1.1rem;
    }
    
    .empty-state-description {
        font-size: 0.85rem;
        margin-bottom: 20px;
    }
    
    .empty-state-illustration {
        max-width: 150px;
    }
}

/* Dark Theme Support */
@media (prefers-color-scheme: dark) {
    .empty-state {
        background: #2d3748;
        color: #e2e8f0;
    }
    
    .empty-state-title {
        color: #f7fafc;
    }
    
    .empty-state-description {
        color: #a0aec0;
    }
    
    .empty-state-action.secondary {
        background: #4a5568;
        color: #e2e8f0;
        border-color: #718096;
    }
    
    .empty-state-action.secondary:hover {
        background: #68d391;
        border-color: #9ae6b4;
    }
    
    .loading-spinner {
        border-color: #4a5568;
        border-top-color: #63b3ed;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .empty-state {
        border: 2px solid #1a202c;
    }
    
    .empty-state-title {
        color: #000;
        font-weight: 700;
    }
    
    .empty-state-description {
        color: #2d3748;
    }
    
    .empty-state-action {
        border: 2px solid #1a202c;
        font-weight: 600;
    }
    
    @media (prefers-color-scheme: dark) {
        .empty-state {
            border-color: #f7fafc;
        }
        
        .empty-state-title {
            color: #fff;
        }
        
        .empty-state-description {
            color: #e2e8f0;
        }
        
        .empty-state-action {
            border-color: #f7fafc;
        }
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .empty-state-icon,
    .empty-state-action,
    .loading-spinner {
        animation: none;
        transition: none;
    }
    
    .empty-state:hover .empty-state-icon {
        transform: none;
    }
}

/* Focus Styles for Accessibility */
.empty-state-action:focus {
    outline: 2px solid #3182ce;
    outline-offset: 2px;
}

/* Special Layout Variants */
.empty-state.horizontal {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 24px;
}

.empty-state.horizontal .empty-state-icon {
    margin-bottom: 0;
    font-size: 3rem;
    flex-shrink: 0;
}

.empty-state.horizontal .empty-state-content {
    max-width: none;
    flex: 1 1;
}

@media (max-width: 768px) {
    .empty-state.horizontal {
        flex-direction: column;
        text-align: center;
    }
    
    .empty-state.horizontal .empty-state-icon {
        margin-bottom: 16px;
    }
}



.coming-soon-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.coming-soon-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  max-width: 400px;
  width: 90%;
  position: relative;
  animation: slideUp 0.3s ease-out;
  padding: 32px;
  box-sizing: border-box;
}

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

.coming-soon-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #64748b;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
  width: 32px;
  height: 32px;
}

.coming-soon-modal-close:hover {
  background-color: #f1f5f9;
  color: #0c437c;
}

.coming-soon-modal-content {
  text-align: center;
}

.coming-soon-modal-title {
  font-size: 24px;
  font-weight: 700;
  color: #0c437c;
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.coming-soon-modal-message {
  font-size: 15px;
  color: #475569;
  margin: 0 0 24px 0;
  line-height: 1.55;
  font-weight: 400;
}
.coming-soon-modal-message strong {
  color: #0c437c;
  font-weight: 600;
}

.coming-soon-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(99, 102, 241, 0.12));
  color: #0c437c;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.coming-soon-modal-badge svg { font-size: 11px; }

.coming-soon-modal-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0c437c 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 20px -6px rgba(14, 165, 233, 0.55);
}
.coming-soon-modal-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -6px rgba(14, 165, 233, 0.7);
}
.coming-soon-modal-cta:active { transform: translateY(0); }
.coming-soon-modal-cta svg { transition: transform 0.2s ease; }
.coming-soon-modal-cta:hover svg { transform: translateX(3px); }

.coming-soon-modal-secondary {
  display: block;
  margin: 10px auto 0;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.15s ease;
}
.coming-soon-modal-secondary:hover { color: #475569; }

@media (max-width: 768px) {
  .coming-soon-modal {
    padding: 24px;
    max-width: 90%;
  }

  .coming-soon-modal-title {
    font-size: 20px;
  }

  .coming-soon-modal-message {
    font-size: 14px;
  }
}


/* ─── Status Badges ─────────────────────────── */
.cs-status-badge {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
.cs-status-sm { padding: 0.15rem 0.5rem; font-size: 0.7rem; }
.status-draft { background: #f3f4f6; color: #6b7280; }
.status-invited { background: #e0e7ff; color: #4338ca; }
.status-quoted { background: #fef3c7; color: #92400e; }
.status-approved { background: #d1fae5; color: #065f46; }
.status-active { background: #dbeafe; color: #1e40af; }
.status-completed { background: #e0e7ff; color: #312e81; }
.status-cancelled { background: #fee2e2; color: #991b1b; }

/* ─── Job Card ──────────────────────────────── */
.cs-job-card {
  background: white;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
  border-left: 4px solid #e5e7eb;
  margin-bottom: 0.75rem;
}
.cs-job-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-1px); }
.cs-job-card.compact { padding: 0.75rem 1rem; }
.cs-job-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.cs-job-title { font-weight: 600; font-size: 0.95rem; margin: 0; }
.cs-job-area { font-size: 0.78rem; color: #6b7280; }
.cs-job-desc { font-size: 0.85rem; color: #6b7280; margin: 0.5rem 0 0; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  text-align: left; }
.cs-job-card-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid #f3f4f6; }
.cs-job-card-actions .cs-btn-icon { background: none; border: none; padding: 0.35rem 0.5rem; border-radius: 6px; cursor: pointer; color: #6b7280; font-size: 0.9rem; transition: background 0.15s, color 0.15s; }
.cs-job-card-actions .cs-btn-icon:hover:not(:disabled) { background: #f3f4f6; color: #374151; }
.cs-job-card-actions .cs-btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }
.cs-job-card-actions .cs-btn-edit:hover:not(:disabled) { color: #2563eb; }
.cs-job-card-actions .cs-btn-delete:hover:not(:disabled) { color: #dc2626; }
.cs-job-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; font-size: 0.78rem; color: #6b7280; }
.cs-job-meta span { display: flex; align-items: center; gap: 0.3rem; }

/* ─── Notification Bell ─────────────────────── */
.cs-notif-wrapper { position: relative; }
.cs-notif-bell {
  background: rgba(255,255,255,0.1); border: none; color: inherit;
  padding: 0.5rem; border-radius: 8px; cursor: pointer;
  font-size: 1.1rem; display: flex; align-items: center;
  position: relative; transition: background 0.2s;
}
.cs-notif-bell:hover { background: rgba(255,255,255,0.2); }
.cs-notif-count {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: white; font-size: 0.6rem;
  padding: 0.1rem 0.35rem; border-radius: 10px;
  font-weight: 700; min-width: 16px; text-align: center; line-height: 1.3;
}
.cs-notif-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 360px; max-height: 480px; background: white;
  border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  z-index: 1000; overflow: hidden;
}
.cs-notif-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.875rem 1rem; border-bottom: 1px solid #e5e7eb;
  font-weight: 600; font-size: 0.95rem; color: #111827;
}
.cs-notif-mark-all {
  background: none; border: none; color: #2563eb;
  font-size: 0.78rem; cursor: pointer; font-weight: 500;
}
.cs-notif-list { max-height: 400px; overflow-y: auto; }
.cs-notif-empty { text-align: center; padding: 2rem; color: #9ca3af; }
.cs-notif-item {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.75rem 1rem; cursor: pointer;
  transition: background 0.15s; border-bottom: 1px solid #f3f4f6;
  position: relative;
}
.cs-notif-item:hover { background: #f9fafb; }
.cs-notif-item.unread { background: #eff6ff; }
.cs-notif-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e0e7ff; color: #4338ca;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 0.8rem;
}
.cs-notif-body { flex: 1 1; min-width: 0; }
.cs-notif-title { display: block; font-weight: 600; font-size: 0.82rem; color: #111827; }
.cs-notif-msg {
  display: block; font-size: 0.78rem; color: #6b7280; margin-top: 0.15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-notif-time { display: block; font-size: 0.7rem; color: #9ca3af; margin-top: 0.25rem; }
.cs-notif-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2563eb; flex-shrink: 0; margin-top: 6px;
}

/* ─── Calendar ──────────────────────────────── */
.cs-calendar { background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; }
.cs-cal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb;
}
.cs-cal-header h3 { margin: 0; font-size: 1rem; }
.cs-cal-nav {
  background: none; border: 1px solid #e5e7eb; border-radius: 6px;
  padding: 0.4rem 0.6rem; cursor: pointer; color: #374151;
  transition: background 0.15s;
}
.cs-cal-nav:hover { background: #f3f4f6; }

/* ─── User role badge (in every header) ──────── */
.cs-role-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem; border-radius: 9999px;
  background: #EBF4FF; color: #1565C0;
  border: 1px solid #BFDBFE;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap; line-height: 1; -webkit-user-select: none; user-select: none;
}
.cs-role-badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #1A80E5;
  flex-shrink: 0;
}
.cs-role-badge-text { line-height: 1; }
.cs-role-badge-short { display: none; }
@media (max-width: 640px) {
  .cs-role-badge { padding: 0.25rem 0.55rem; font-size: 0.65rem; gap: 0.3rem; }
  .cs-role-badge-dot { width: 5px; height: 5px; }
  .cs-role-badge-full { display: none; }
  .cs-role-badge-short { display: inline; }
}
.cs-cal-header-left { display: flex; align-items: center; gap: 0.4rem; }
.cs-cal-today {
  background: white; border: 1px solid #d1d5db; border-radius: 6px;
  padding: 0.4rem 0.75rem; cursor: pointer; color: #1A80E5;
  font-size: 0.78rem; font-weight: 600; transition: background 0.15s;
}
.cs-cal-today:hover { background: #EBF4FF; border-color: #1A80E5; }
.cs-cal-view-toggle {
  display: inline-flex; background: #f3f4f6; border-radius: 8px; padding: 2px;
}
.cs-cal-view-btn {
  background: transparent; border: none; padding: 0.35rem 0.85rem;
  font-size: 0.78rem; font-weight: 500; color: #6b7280; cursor: pointer;
  border-radius: 6px; transition: background 0.15s, color 0.15s;
}
.cs-cal-view-btn.active { background: white; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.cs-cal-view-btn:hover:not(.active) { color: #374151; }
.cs-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cs-cal-grid.view-week .cs-cal-cell { min-height: 280px; }
.cs-cal-day-label {
  padding: 0.5rem; text-align: center; font-size: 0.72rem;
  font-weight: 600; color: #6b7280; text-transform: uppercase;
  border-bottom: 1px solid #e5e7eb;
}
.cs-cal-cell {
  min-height: 80px; padding: 0.25rem; border-right: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6; position: relative;
}
.cs-cal-cell.other-month { background: #fafafa; }
.cs-cal-cell.other-month .cs-cal-day-num { color: #d1d5db; }
.cs-cal-cell.today { background: #eff6ff; }
.cs-cal-day-num { font-size: 0.75rem; font-weight: 500; color: #374151; padding: 0.15rem 0.3rem; }
.cs-cal-events { margin-top: 0.15rem; }
.cs-cal-event {
  padding: 0.1rem 0.3rem; margin-bottom: 0.1rem; border-radius: 3px;
  font-size: 0.65rem; cursor: pointer; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  transition: opacity 0.15s;
}
.cs-cal-event:hover { opacity: 0.8; }
.cs-cal-event.tentative { opacity: 0.6; border-style: dashed; border-width: 1px; }
.cs-cal-event.status-invited { background: #e0e7ff; color: #4338ca; }
.cs-cal-event.status-quoted { background: #fef3c7; color: #92400e; }
.cs-cal-event.status-approved { background: #d1fae5; color: #065f46; }
.cs-cal-event.status-active { background: #dbeafe; color: #1e40af; }
.cs-cal-event.status-completed { background: #e0e7ff; color: #312e81; }
.cs-cal-event.status-draft { background: #f3f4f6; color: #6b7280; }
.cs-cal-event-text { display: block; overflow: hidden; text-overflow: ellipsis; }
.cs-cal-more { font-size: 0.65rem; color: #6b7280; padding-left: 0.3rem; }

/* ─── Shared Form Styles ────────────────────── */
.cs-form-group { margin-bottom: 1rem; }
.cs-form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: #374151; margin-bottom: 0.35rem; }
.cs-input, .cs-select, .cs-textarea {
  width: 100%; padding: 0.6rem 0.85rem; border: 1px solid #d1d5db;
  border-radius: 8px; font-size: 0.88rem; outline: none;
  transition: border-color 0.2s; background: white;
  box-sizing: border-box;
}
.cs-input:focus, .cs-select:focus, .cs-textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.cs-textarea { min-height: 80px; resize: vertical; }
.cs-btn {
  padding: 0.6rem 1.25rem; border-radius: 8px; font-size: 0.88rem;
  font-weight: 600; cursor: pointer; border: none;
  transition: background 0.2s, transform 0.1s; display: inline-flex;
  align-items: center; gap: 0.4rem;
}
.cs-btn:active { transform: scale(0.97); }
.cs-btn-primary { background: #2563eb; color: white; }
.cs-btn-primary:hover { background: #1d4ed8; }
.cs-btn-success { background: #059669; color: white; }
.cs-btn-success:hover { background: #047857; }
.cs-btn-danger { background: #dc2626; color: white; }
.cs-btn-danger:hover { background: #b91c1c; }
.cs-btn-outline { background: white; color: #374151; border: 1px solid #d1d5db; }
.cs-btn-outline:hover { background: #f3f4f6; }
.cs-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; }

/* ─── Modal ─────────────────────────────────── */
.cs-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000; padding: 1rem;
}
.cs-modal {
  background: white; border-radius: 14px; width: 100%;
  max-width: 540px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.cs-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb;
}
.cs-modal-header h3 { margin: 0; font-size: 1.1rem; }
.cs-modal-close {
  background: none; border: none; font-size: 1.25rem;
  color: #6b7280; cursor: pointer; padding: 0.25rem;
}
.cs-modal-body { padding: 1.25rem; }
.cs-modal-footer {
  display: flex; justify-content: flex-end; gap: 0.75rem;
  padding: 1rem 1.25rem; border-top: 1px solid #e5e7eb;
}

/* ─── Mobile Bottom Nav ─────────────────────── */
.cs-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: white; border-top: 1px solid #e5e7eb;
  padding: 0.5rem 0 0.75rem;
  z-index: 1000; box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.cs-bottom-nav-items { display: flex; justify-content: space-around; }
.cs-bottom-nav-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.15rem; padding: 0.25rem 0.5rem;
  font-size: 0.65rem; color: #6b7280;
  cursor: pointer; border: none; background: none;
  transition: color 0.15s; position: relative;
}
.cs-bottom-nav-item.active { color: #2563eb; }
.cs-bottom-nav-item svg { font-size: 1.15rem; }
.cs-bottom-nav-badge {
  position: absolute; top: -2px; right: 0;
  background: #ef4444; color: white; font-size: 0.55rem;
  padding: 0 0.3rem; border-radius: 8px; font-weight: 700;
}

@media (max-width: 768px) {
  .cs-bottom-nav { display: block; }
  .cs-notif-dropdown { width: calc(100vw - 2rem); right: -1rem; }
  .cs-cal-cell { min-height: 60px; }
  .cs-cal-event { font-size: 0.6rem; }
  .cs-modal { max-width: 100%; margin: 0.5rem; }
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: #FFFFFF;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 80px;
}

.logo {
  height: 40px;
  margin-right: 40px;
}

.header-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.nav-links {
  display: flex;
  gap: 32px;
}

.nav-link {
  color: #637587;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

/* Super-admin only — draws the eye without shouting */
.mh-showcase-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.1) 0%, rgba(12, 67, 124, 0.1) 100%);
  color: #0c437c;
  font-weight: 600;
}
.mh-showcase-link::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0d9488;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.22);
}
.mh-showcase-link:hover { color: #0d9488; }

.nav-link:hover,
.nav-link.active {
  color: #1A80E5;
}

.nav-link.disabled {
  color: #ccc;
  cursor: not-allowed;
  pointer-events: none;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 20px;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #eff2f4;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}

.icon:hover {
  background-color: #1980e5;
}

.icon i {
  color: #000000;
  transition: color 0.3s ease;
}

.icon:hover i {
  color: #ffffff;
}

/* ── Notification wrapper ── */
.mh-notif-wrap {
  position: relative;
}

/* ── Notification dropdown ── */
.mh-notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: -40px;
  width: 380px;
  max-height: 520px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mh-nd-enter 0.18s ease-out;
}

@keyframes mh-nd-enter {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Dropdown header ── */
.mh-nd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.mh-nd-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}

.mh-nd-mark-all {
  background: none;
  border: none;
  color: #1A80E5;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.12s;
  font-family: inherit;
}
.mh-nd-mark-all:hover {
  background: #eff6ff;
}

/* ── Notification list ── */
.mh-nd-list {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: 380px;
}
.mh-nd-list::-webkit-scrollbar { width: 4px; }
.mh-nd-list::-webkit-scrollbar-track { background: transparent; }
.mh-nd-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* ── Notification item ── */
.mh-nd-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  position: relative;
  transition: background 0.12s;
}
.mh-nd-item:last-child { border-bottom: none; }
.mh-nd-item:hover { background: #f9fafb; }

/* Unread state */
.mh-nd-unread { background: #f0f7ff; }
.mh-nd-unread:hover { background: #e3effc; }

.mh-nd-unread-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #1A80E5;
  border-radius: 0 2px 2px 0;
}

/* ── Notification icon ── */
.mh-nd-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.8rem;
}
.mh-ni-blue  { background: #eff6ff; color: #1d4ed8; }
.mh-ni-green { background: #f0fdf4; color: #16a34a; }
.mh-ni-amber { background: #fffbeb; color: #d97706; }
.mh-ni-red   { background: #fef2f2; color: #dc2626; }
.mh-ni-gray  { background: #f3f4f6; color: #6b7280; }

/* ── Notification body ── */
.mh-nd-body {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mh-nd-msg {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mh-nd-unread .mh-nd-msg { font-weight: 700; }

.mh-nd-sub {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mh-nd-time {
  font-size: 0.675rem;
  color: #9ca3af;
  margin-top: 2px;
}

/* ── Unread dot ── */
.mh-nd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1A80E5;
  flex-shrink: 0;
  margin-top: 4px;
}

/* ── Footer ── */
.mh-nd-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
  color: #1A80E5;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-top: 1px solid #f0f0f0;
  width: 100%;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.mh-nd-footer:hover {
  background: #eff6ff;
  color: #1565C0;
}

/* ── Empty state ── */
.mh-nd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  color: #9ca3af;
}
.mh-nd-empty i { font-size: 1.5rem; }
.mh-nd-empty span { font-size: 0.8125rem; }

/* ── Skeleton loading ── */
.mh-nd-loading { padding: 4px 0; }

.mh-nd-skel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
}

.mh-nd-skel-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #e5e7eb;
  flex-shrink: 0;
  animation: mh-nd-shimmer 1.4s infinite;
}

.mh-nd-skel-body {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}

.mh-nd-skel-line {
  height: 10px;
  border-radius: 4px;
  background: #e5e7eb;
  animation: mh-nd-shimmer 1.4s infinite;
}
.mh-nd-skel-w60 { width: 60%; }
.mh-nd-skel-w80 { width: 80%; }

@keyframes mh-nd-shimmer {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

/* ── Notification bell badge ── */
.mh-bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.user-avatar-container {
  position: relative;
  cursor: pointer;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: #1A80E5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 1000;
  min-width: 150px;
}

.user-menu a,
.user-menu button {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border: none;
  background: none;
  text-align: left;
  font-size: 14px;
  color: #334151;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.user-menu a:hover,
.user-menu button:hover {
  background-color: #1A80E5;
  color: white;
}

/* ─── Mobile Hamburger Button ─────────────────── */
.mobile-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s;
  margin-left: 4px;
}

.mobile-hamburger:hover {
  background: #eff2f4;
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.hamburger-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background: #334151;
  border-radius: 2px;
  transition: all 0.28s ease;
  transform-origin: center;
}

.hamburger-icon.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger-icon.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger-icon.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── Mobile Nav Drawer ───────────────────────── */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: #ffffff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
  z-index: 999;
  border-top: 1px solid #e8edf2;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.22s ease;
}

.mobile-nav-drawer.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  padding: 8px 0 12px;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: #334151;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.mobile-nav-link i {
  width: 20px;
  color: #637587;
  font-size: 15px;
  text-align: center;
  flex-shrink: 0;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
  background: #f0f7ff;
  color: #1A80E5;
}

.mobile-nav-link:hover i {
  color: #1A80E5;
}

.mobile-nav-divider {
  height: 1px;
  background: #e8edf2;
  margin: 6px 16px;
}

.mobile-nav-logout {
  color: #dc2626;
}

.mobile-nav-logout i {
  color: #dc2626;
}

.mobile-nav-logout:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* ─── Mobile Overlay ─────────────────────────── */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: 998;
  animation: fadeInOverlay 0.22s ease;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Mobile Header ─────────────────────────── */
@media (max-width: 900px) {
  .dashboard-header {
    flex-direction: row;
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    padding: 0 1.25rem;
    align-items: center;
  }

  .header-right {
    flex-direction: row;
    align-items: center;
    margin-top: 0;
    gap: 0.5rem;
  }

  .nav-links {
    display: none;
  }

  .logo {
    height: 32px;
    margin-right: 0;
  }

  .mobile-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-nav-drawer {
    display: block;
  }

  .mobile-nav-overlay {
    display: block;
  }
}

@media (max-width: 480px) {
  .dashboard-header {
    padding: 0 0.75rem;
  }

  .header-icons {
    gap: 8px;
  }

  .icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .user-avatar {
    width: 36px;
    height: 36px;
  }

  .mh-notif-dropdown {
    position: fixed;
    top: 64px;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100vh - 80px);
    border-radius: 14px;
  }
}
.page-header {
  margin-bottom: 1.25rem;
}

/* Breadcrumb */
.ph-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.ph-bc-home {
  color: #9ca3af;
  font-size: 0.75rem;
}

.ph-bc-sep {
  color: #d1d5db;
  font-size: 0.6rem;
}

.ph-bc-link {
  font-size: 0.78rem;
  color: #6b7280;
  text-decoration: none;
  transition: color 0.15s;
}
.ph-bc-link:hover { color: #1A80E5; }

.ph-bc-current {
  font-size: 0.78rem;
  color: #374151;
  font-weight: 500;
}

/* Title row */
.ph-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.ph-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ph-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #eff6ff;
  color: #1A80E5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.ph-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.ph-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  color: #6b7280;
}

.ph-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .ph-row { flex-direction: column; align-items: flex-start; }
  .ph-actions { width: 100%; }
}

.section-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s;
  overflow: hidden;
}

.section-card.clickable:hover,
button.section-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Header */
.sc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
  gap: 0.75rem;
}

.sc-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.sc-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eff6ff;
  color: #1A80E5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.sc-title-group { min-width: 0; }

.sc-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-subtitle {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  color: #9ca3af;
}

.sc-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Badge */
.sc-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.4;
}
.sc-badge-blue   { background: #eff6ff; color: #1d4ed8; }
.sc-badge-red    { background: #fef2f2; color: #dc2626; }
.sc-badge-amber  { background: #fffbeb; color: #d97706; }
.sc-badge-green  { background: #f0fdf4; color: #16a34a; }
.sc-badge-gray   { background: #f9fafb; color: #6b7280; }

.sc-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Body */
.sc-body {
  padding: 1.25rem;
}

/* ─── StatCard ─────────────────────────────────────── */
.stat-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.stat-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.stat-card-blue  .stat-card-icon { background: #eff6ff; color: #1d4ed8; }
.stat-card-green .stat-card-icon { background: #f0fdf4; color: #16a34a; }
.stat-card-amber .stat-card-icon { background: #fffbeb; color: #d97706; }
.stat-card-red   .stat-card-icon { background: #fef2f2; color: #dc2626; }
.stat-card-gray  .stat-card-icon { background: #f9fafb; color: #6b7280; }

.stat-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

.stat-card-label {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 0.2rem;
}

.stat-card-trend {
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.2rem;
}
.trend-up   { color: #16a34a; }
.trend-down { color: #dc2626; }

/* ── View Toggle (Grid / Map) ──────────────── */
.view-toggle {
  display: inline-flex;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.vt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.vt-btn:hover {
  color: #374151;
  background: rgba(255,255,255,0.5);
}

.vt-btn.vt-active {
  background: #fff;
  color: #1A80E5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.vt-btn:focus-visible {
  outline: 2px solid #1A80E5;
  outline-offset: 1px;
}

@media (max-width: 480px) {
  .vt-btn {
    padding: 6px 10px;
    font-size: 0.72rem;
  }
  .vt-btn span {
    display: none;
  }
}

/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;
	transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

/* ── PropertyMap Wrapper ────────────────────── */
.property-map-wrapper {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  position: relative;
}

.property-map-container {
  width: 100%;
  height: 520px;
  z-index: 1;
}

/* ── Notice bar (unmappable properties) ────── */
.pm-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  font-size: 0.75rem;
  color: #92400e;
  font-weight: 500;
}

.pm-notice svg {
  flex-shrink: 0;
  font-size: 0.7rem;
}

.pm-geocode-btn {
  margin-left: auto;
  background: #f59e0b;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  white-space: nowrap;
}

.pm-geocode-btn:hover { background: #d97706; }
.pm-geocode-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Custom pin styling ────────────────────── */
.cs-map-pin {
  background: transparent !important;
  border: none !important;
}

/* ── Popup ──────────────────────────────────── */
.cs-popup .leaflet-popup-content-wrapper {
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  padding: 0;
  overflow: hidden;
}

.cs-popup .leaflet-popup-content {
  margin: 0;
  width: auto !important;
}

.cs-popup .leaflet-popup-tip {
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.pm-popup {
  width: 240px;
}

.pm-popup-thumb {
  width: 100%;
  height: 100px;
  overflow: hidden;
  background: #f3f4f6;
}

.pm-popup-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pm-popup-body {
  padding: 10px 12px 12px;
}

.pm-popup-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 2px 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-popup-address {
  font-size: 0.68rem;
  color: #6b7280;
  margin: 0 0 8px 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-popup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.pm-popup-status {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.popup-status-green {
  background: #f0fdf4;
  color: #16a34a;
}

.popup-status-amber {
  background: #fffbeb;
  color: #b45309;
}

.popup-status-red {
  background: #fef2f2;
  color: #dc2626;
}

.popup-status-gray {
  background: #f3f4f6;
  color: #9ca3af;
}

.pm-popup-badge {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.pm-badge-red {
  background: #fef2f2;
  color: #dc2626;
}

.pm-badge-amber {
  background: #fffbeb;
  color: #b45309;
}

/* CTA button */
.pm-popup-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px 0;
  border: none;
  border-radius: 6px;
  background: #1A80E5;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.pm-popup-cta:hover {
  background: #1565C0;
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 768px) {
  .property-map-container {
    height: 400px;
  }
}

@media (max-width: 480px) {
  .property-map-container {
    height: 340px;
  }

  .pm-popup {
    width: 200px;
  }

  .pm-popup-thumb {
    height: 80px;
  }
}

/* ================================================================
   PropertyDashboard — pd- prefixed, CloudSafe design tokens
   ================================================================ */

/* ── Page shell ───────────────────────────────────────────────── */
.pd-page {
  display: block;
  height: 100vh;
  overflow: hidden;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  padding-top: 80px;
  position: relative;
  box-sizing: border-box;
}

/* ── Mobile drawer toggle (hidden on desktop) ─────────────────── */
.pd-drawer-toggle {
  display: none;
}

/* ── Sidebar (desktop: fixed left column) ─────────────────────── */
.pd-sidebar {
  position: fixed;
  left: 0;
  top: 80px;
  bottom: 0;
  width: 260px;
  background: #fff;
  background: var(--cs-white, #fff);
  border-right: 1px solid #e5e7eb;
  border-right: 1px solid var(--cs-border, #e5e7eb);
  display: flex;
  flex-direction: column;
  z-index: 200;
  z-index: var(--cs-z-sticky, 200);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

.pd-sidebar::-webkit-scrollbar { width: 4px; }
.pd-sidebar::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 2px; }

/* Sidebar header (close button — mobile only) */
.pd-sidebar-header {
  display: none;
}

/* Sidebar nav */
.pd-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px 8px;
  flex: 1 1;
  min-height: 0;
}

.pd-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font: inherit;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 500;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  position: relative;
  min-height: 40px;
}

.pd-sidebar-item:hover {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.pd-sidebar-item.pd-sidebar-active {
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  font-weight: 600;
}

.pd-sidebar-icon {
  width: 18px;
  flex-shrink: 0;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-sidebar-label {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-sidebar-indicator {
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
}

/* Sidebar bottom */
.pd-sidebar-bottom {
  margin-top: auto;
  padding: 12px 12px 16px;
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
  flex-shrink: 0;
}

.pd-sidebar-image {
  width: 100%;
  height: 180px;
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  overflow: hidden;
  margin-bottom: 12px;
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-sidebar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Backdrop (mobile drawer) ─────────────────────────────────── */
.pd-drawer-backdrop {
  display: none;
}

/* ── Main content ─────────────────────────────────────────────── */
.pd-main {
  margin-left: 260px;
  padding: 16px 24px 12px;
  height: calc(100vh - 80px);
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Reset padding from Emergency Preparedness shell (pd-main already positions content) */
.pd-main .emergency-preparedness-content {
  padding-top: 0;
  padding: 0;
  gap: 0;
}
.pd-main .emergency-preparedness-container {
  height: 100%;
}

/* ── Document expiry banner ───────────────────────────────────── */
.pd-expiry-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fffbeb;
  background: var(--cs-amber-light, #fffbeb);
  border: 1px solid #fde68a;
  border: 1px solid var(--cs-amber-border, #fde68a);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.pd-expiry-icon {
  color: #d97706;
  color: var(--cs-amber-dark, #d97706);
  font-size: 1rem;
  flex-shrink: 0;
}

.pd-expiry-text {
  flex: 1 1;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #92400e;
  line-height: 1.4;
  min-width: 200px;
}
.pd-expiry-text strong { color: #78350f; }

.pd-expiry-action {
  background: #d97706;
  background: var(--cs-amber-dark, #d97706);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease;
  transition: background var(--cs-transition-fast, 0.12s ease);
}
.pd-expiry-action:hover { background: #b45309; }

.pd-expiry-dismiss {
  background: none;
  border: none;
  color: #d97706;
  color: var(--cs-amber-dark, #d97706);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: background 0.12s ease;
  transition: background var(--cs-transition-fast, 0.12s ease);
}
.pd-expiry-dismiss:hover { background: #fef3c7; }

/* ── Content header ───────────────────────────────────────────── */
.pd-content-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
}

.pd-header-info {
  min-width: 0;
}

.pd-property-name {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pd-property-address {
  margin: 6px 0 0;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pd-address-icon {
  font-size: 0.75rem;
  flex-shrink: 0;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

/* ── Primary / Secondary buttons ──────────────────────────────── */
.pd-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  border: none;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  box-shadow: var(--cs-shadow-sm);
  min-height: 42px;
}
.pd-btn-primary:hover {
  background: #1570CC;
  background: var(--cs-blue-hover, #1570CC);
  box-shadow: var(--cs-shadow-md);
  transform: translateY(-1px);
}
.pd-btn-primary:active { transform: translateY(0); }

.pd-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  min-height: 42px;
}
.pd-btn-secondary:hover { background: #e5e7eb; background: var(--cs-border, #e5e7eb); }

/* ── Section titles ───────────────────────────────────────────── */
.pd-section-title {
  font-size: 1.125rem;
  font-size: var(--cs-text-xl, 1.125rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

/* ── Safety modules grid ──────────────────────────────────────── */
.pd-modules-section {
  margin-bottom: 32px;
}

.pd-safety-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.pd-safety-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  cursor: pointer;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  text-align: left;
  font: inherit;
  width: 100%;
  box-shadow: var(--cs-shadow-xs);
}

.pd-safety-card:hover {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: var(--cs-shadow-md);
  transform: translateY(-1px);
}

.pd-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Icon colour variants */
.pd-card-icon-blue   { background: #EBF4FF; background: var(--cs-blue-light, #EBF4FF);   color: #1A80E5;   color: var(--cs-blue, #1A80E5); }
.pd-card-icon-red    { background: #fef2f2; background: var(--cs-red-light, #fef2f2);    color: #ef4444;    color: var(--cs-red, #ef4444); }
.pd-card-icon-amber  { background: #fffbeb; background: var(--cs-amber-light, #fffbeb);  color: #d97706;  color: var(--cs-amber-dark, #d97706); }
.pd-card-icon-green  { background: #f0fdf4; background: var(--cs-green-light, #f0fdf4);  color: #16a34a;  color: var(--cs-green-dark, #16a34a); }
.pd-card-icon-purple { background: #f5f3ff; background: var(--cs-purple-light, #f5f3ff); color: #8b5cf6; color: var(--cs-purple, #8b5cf6); }
.pd-card-icon-teal   { background: #eff6ff; background: var(--cs-teal-light, #eff6ff);   color: #1A80E5;   color: var(--cs-teal, #1A80E5); }
.pd-card-icon-gray   { background: #f9fafb; background: var(--cs-bg-alt, #f9fafb);       color: #6b7280;       color: var(--cs-text-muted, #6b7280); }

.pd-card-body {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pd-card-name {
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-card-count {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.pd-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 9999px;
  border-radius: var(--cs-radius-full, 9999px);
  background: #ef4444;
  background: var(--cs-red, #ef4444);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.pd-card-arrow {
  font-size: 0.7rem;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  flex-shrink: 0;
  transition: transform 0.2s ease;
  transition: transform var(--cs-transition, 0.2s ease);
}
.pd-safety-card:hover .pd-card-arrow {
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  transform: translateX(2px);
}

/* ── Dashboard counters section ───────────────────────────────── */
.pd-counters-section {
  margin-bottom: 32px;
}

/* ── Recent Inspections ───────────────────────────────────────── */
.pd-recent-section {
  margin-bottom: 32px;
}

.pd-inspection-list {
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  overflow: hidden;
  box-shadow: var(--cs-shadow-xs);
}

.pd-inspection-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #f3f4f6;
  border-bottom: 1px solid var(--cs-bg, #f3f4f6);
  transition: background 0.12s ease;
  transition: background var(--cs-transition-fast, 0.12s ease);
}
.pd-inspection-item:last-child { border-bottom: none; }
.pd-inspection-item:hover { background: #f9fafb; background: var(--cs-bg-alt, #f9fafb); }

.pd-insp-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.pd-insp-info {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pd-insp-title {
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.pd-insp-type {
  font-weight: 400;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.pd-insp-meta {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.pd-insp-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 9999px;
  border-radius: var(--cs-radius-full, 9999px);
  flex-shrink: 0;
  white-space: nowrap;
}
.pd-status-green { background: #f0fdf4; background: var(--cs-green-light, #f0fdf4); color: #16a34a; color: var(--cs-green-dark, #16a34a); }
.pd-status-red   { background: #fef2f2; background: var(--cs-red-light, #fef2f2);   color: #dc2626;   color: var(--cs-red-dark, #dc2626); }
.pd-status-amber { background: #fffbeb; background: var(--cs-amber-light, #fffbeb); color: #d97706; color: var(--cs-amber-dark, #d97706); }
.pd-status-gray  { background: #f9fafb; background: var(--cs-bg-alt, #f9fafb);      color: #6b7280;      color: var(--cs-text-muted, #6b7280); }

/* ── Empty state ──────────────────────────────────────────────── */
.pd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}
.pd-empty-icon { font-size: 1.5rem; }
.pd-empty p { margin: 0; font-size: 0.875rem; font-size: var(--cs-text-base, 0.875rem); }

/* ── Modal ────────────────────────────────────────────────────── */
.pd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  z-index: var(--cs-z-modal, 400);
  padding: 20px;
}

.pd-modal {
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 16px;
  border-radius: var(--cs-radius-xl, 16px);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--cs-shadow-xl);
}

.pd-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
}
.pd-modal-header h2 {
  margin: 0;
  font-size: 1.125rem;
  font-size: var(--cs-text-xl, 1.125rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.pd-modal-close {
  background: none;
  border: none;
  font-size: 1rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
}
.pd-modal-close:hover { background: #f3f4f6; background: var(--cs-bg, #f3f4f6); color: #111827; color: var(--cs-text-primary, #111827); }

.pd-modal-body {
  padding: 24px;
}

.pd-form-group {
  margin-bottom: 18px;
}
.pd-form-group label {
  display: block;
  font-weight: 500;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
}
.pd-form-group select,
.pd-form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-family: inherit;
  background: #fff;
  background: var(--cs-white, #fff);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  transition: border-color var(--cs-transition, 0.2s ease), box-shadow var(--cs-transition, 0.2s ease);
}
.pd-form-group select:focus,
.pd-form-group textarea:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.15);
}
.pd-form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.pd-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pd-sidebar { width: 220px; }
  .pd-main {
    margin-left: 220px;
    padding: 24px 28px 40px;
  }
  .pd-safety-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile (≤768px) ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .pd-page {
    padding-top: 64px;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  /* Show drawer toggle */
  .pd-drawer-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: calc(200 - 1);
    z-index: calc(var(--cs-z-sticky, 200) - 1);
    background: #fff;
    background: var(--cs-white, #fff);
    border-bottom: 1px solid #e5e7eb;
    border-bottom: 1px solid var(--cs-border, #e5e7eb);
    padding: 10px 16px;
    font-size: 0.875rem;
    font-size: var(--cs-text-base, 0.875rem);
    font-weight: 600;
    color: #374151;
    color: var(--cs-text-secondary, #374151);
    cursor: pointer;
    border: none;
    width: 100%;
    box-shadow: var(--cs-shadow-xs);
    font-family: inherit;
  }
  .pd-drawer-toggle svg { font-size: 1rem; color: #6b7280; color: var(--cs-text-muted, #6b7280); }

  /* Sidebar → slide-in drawer (z-index must beat MainHeader's 1000) */
  .pd-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.35s ease;
    transition: transform var(--cs-transition-slow, 0.35s ease);
    box-shadow: none;
    padding-top: 0;
  }
  .pd-sidebar.pd-sidebar-open {
    transform: translateX(0);
    box-shadow: var(--cs-shadow-xl);
  }

  /* Show sidebar header with close button */
  .pd-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #e5e7eb;
    border-bottom: 1px solid var(--cs-border, #e5e7eb);
  }
  .pd-sidebar-heading {
    font-size: 1rem;
    font-size: var(--cs-text-lg, 1rem);
    font-weight: 700;
    color: #111827;
    color: var(--cs-text-primary, #111827);
  }
  .pd-sidebar-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: #6b7280;
    color: var(--cs-text-muted, #6b7280);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pd-sidebar-close:hover { background: #f3f4f6; background: var(--cs-bg, #f3f4f6); }

  /* Backdrop (must sit between MainHeader z:1000 and sidebar z:1001) */
  .pd-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
  }

  /* Main content */
  .pd-main {
    margin-left: 0;
    /* 64px header + ~46px drawer toggle */
    margin-top: 46px;
    padding: 8px 12px 16px;
    height: auto;
    min-height: calc(100vh - 64px - 46px);
    overflow: visible;
  }

  .pd-content-header {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
    text-align: center;
  }

  .pd-header-info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pd-property-name { font-size: 1.375rem; }

  .pd-property-address {
    justify-content: center;
  }

  .pd-btn-primary {
    width: 100%;
    justify-content: center;
  }

  /* ── Universal mobile fixes for ALL safety dashboards ── */
  /* Force bottom panels to stack vertically (overrides cascade from unscoped rules) */
  .pd-main .dashboard-bottom-panels {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  /* Cards: 2 columns on mobile */
  .pd-main .dashboard-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  /* Panels need to be visible and auto-height on mobile */
  .pd-main .dashboard-panel {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* Let all dashboard wrappers flow naturally on mobile */
  .pd-main .roof-dashboard-wrapper,
  .pd-main .rd-wrapper,
  .pd-main .fire-dashboard-wrapper,
  .pd-main .staff-dashboard-wrapper,
  .pd-main .compliance-dashboard-wrapper,
  .pd-main .electrical-dashboard-wrapper,
  .pd-main .building-maintenance-dashboard-wrapper,
  .pd-main .emergency-dashboard-wrapper {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  /* Let roof safety shell containers flow on mobile */
  .pd-main .roof-safety-container,
  .pd-main .roof-safety-content,
  .pd-main .roof-safety-main,
  .pd-main .emergency-preparedness-main {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }
  /* Connect pills to white card on mobile */
  .pd-main .roof-safety-main {
    border-radius: 0 0 12px 12px !important;
  }
  /* Reset double-padding from Emergency Preparedness shell */
  .pd-main .emergency-preparedness-content {
    padding-top: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .pd-main .emergency-preparedness-container {
    height: auto !important;
  }

  /* DashboardCounters: 2-column grid on mobile */
  .pd-main .counters-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .pd-main .counter-card {
    padding: 14px;
    text-align: center;
    flex-direction: column;
    gap: 8px;
  }

  .pd-main .counters-header {
    text-align: center;
    align-items: center;
  }

  .pd-section-title {
    text-align: center;
  }

  .pd-safety-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .pd-safety-card {
    padding: 12px 14px;
    gap: 10px;
  }
  .pd-card-icon { width: 34px; height: 34px; font-size: 0.85rem; }

  /* Modal */
  .pd-modal { max-width: none; }
  .pd-modal-actions { flex-direction: column; }
  .pd-modal-actions .pd-btn-primary,
  .pd-modal-actions .pd-btn-secondary { width: 100%; justify-content: center; }
}

/* ── Small mobile (≤480px) ────────────────────────────────────── */
@media (max-width: 480px) {
  .pd-safety-grid {
    grid-template-columns: 1fr;
  }

  .pd-main {
    padding: 12px;
  }

  .pd-property-name { font-size: 1.25rem; }

  .pd-main .counters-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .pd-main .counter-card {
    padding: 12px;
  }

  /* Single-column cards on small mobile */
  .pd-main .dashboard-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   PropertyDashboardOverview — pdo- prefix (Premium Redesign)
   ================================================================ */

/* ── Alert Banner ────────────────────────────────────────────── */
.pdo-alert-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  animation: pdoSlideIn 0.3s ease;
}
.pdo-alert-icon { color: #d97706; font-size: 1rem; flex-shrink: 0; }
.pdo-alert-text { flex: 1 1; font-size: 0.8125rem; color: #92400e; line-height: 1.4; min-width: 200px; }
.pdo-alert-text strong { color: #78350f; }
.pdo-alert-action {
  background: #d97706; color: #fff; border: none; border-radius: 6px;
  padding: 5px 12px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: background 0.15s;
}
.pdo-alert-action:hover { background: #b45309; }
.pdo-alert-dismiss {
  background: none; border: none; color: #d97706; font-size: 0.85rem;
  cursor: pointer; padding: 4px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; transition: background 0.15s;
}
.pdo-alert-dismiss:hover { background: #fef3c7; }

/* ═══════════════════════════════════════════════════════════════
   COMPACT PROPERTY HEADER BAR (replaces hero)
   ═══════════════════════════════════════════════════════════════ */
.pdo-header-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.pdo-header-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: #eff6ff;
  color: #1A80E5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  border: 2px solid #e5e7eb;
}

.pdo-header-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.pdo-header-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: left;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

.pdo-header-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pdo-header-code {
  font-size: 0.85rem;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.pdo-header-addr {
  margin: 3px 0 0;
  font-size: 0.8rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-start;
}
.pdo-header-addr svg { font-size: 0.65rem; color: #1A80E5; }

.pdo-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.pdo-hdr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  border: none;
  font-family: inherit;
  background: #2563eb;
  color: #fff;
}
.pdo-hdr-btn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
.pdo-hdr-btn-outline {
  background: #fff;
  color: #374151;
  border: 1px solid #e5e7eb;
}
.pdo-hdr-btn-outline:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  box-shadow: none;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   INLINE STAT BAR (replaces KPI cards)
   ═══════════════════════════════════════════════════════════════ */
.pdo-stat-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 8px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.pdo-stat {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 12px;
  min-width: 0;
}

.pdo-stat-ico {
  font-size: 0.85rem;
  flex-shrink: 0;
}
.pdo-stat-pass .pdo-stat-ico { color: #1A80E5; }
.pdo-stat-pass .pdo-stat-val { color: #1A80E5; }
.pdo-stat-fail .pdo-stat-ico { color: #ef4444; }
.pdo-stat-fail .pdo-stat-val { color: #ef4444; }
.pdo-stat-overdue .pdo-stat-ico { color: #d97706; }
.pdo-stat-overdue .pdo-stat-val { color: #d97706; }
.pdo-stat-onsite .pdo-stat-ico { color: #1A80E5; }
.pdo-stat-onsite .pdo-stat-val { color: #1A80E5; }

.pdo-stat-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
  line-height: 1;
}

.pdo-stat-lbl {
  font-size: 0.65rem;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pdo-stat-divider {
  width: 1px;
  height: 28px;
  background: #e5e7eb;
  flex-shrink: 0;
}

/* Compliance bar inline in stat bar */
.pdo-stat-compliance {
  flex: 1.4 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 16px;
  border-left: 1px solid #e5e7eb;
  margin-left: 4px;
}

.pdo-stat-compliance-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pdo-stat-compliance-pct {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.pdo-stat-compliance-txt {
  font-size: 0.65rem;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pdo-stat-compliance-track {
  height: 5px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}

.pdo-stat-compliance-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.8s ease;
}

/* ═══════════════════════════════════════════════════════════════
   TWO-COLUMN ASYMMETRIC LAYOUT (replaces 3-col grid)
   ═══════════════════════════════════════════════════════════════ */
.pdo-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 0;
}

/* Shared Card Style */
.pdo-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.pdo-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #f3f4f6;
}

.pdo-card-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -0.01em;
}

.pdo-card-title-ico {
  font-size: 0.85rem;
  color: #1A80E5;
}
.pdo-ico-teal { color: #1A80E5; }

.pdo-card-count {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 10px;
  border-radius: 20px;
}

.pdo-card-link {
  background: none;
  border: none;
  color: #1A80E5;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
  font-family: inherit;
}
.pdo-card-link:hover { background: #eff6ff; }
.pdo-card-link svg { font-size: 0.6rem; }

/* ── Safety Modules Grid (tile style, not list) ──────────────── */
.pdo-modules-card {
  margin-bottom: 12px;
}

.pdo-modules-grid {
  display: flex;
  flex-direction: column;
}

.pdo-mod-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid #f9fafb;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.pdo-mod-tile:last-child { border-bottom: none; }
.pdo-mod-tile:hover { background: #eff6ff; }

.pdo-mod-ico {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.pdo-mi-blue   { background: #EBF4FF; color: #1A80E5; }
.pdo-mi-red    { background: #fef2f2; color: #ef4444; }
.pdo-mi-amber  { background: #fffbeb; color: #d97706; }
.pdo-mi-green  { background: #f0fdf4; color: #16a34a; }
.pdo-mi-purple { background: #f5f3ff; color: #8b5cf6; }
.pdo-mi-teal   { background: #eff6ff; color: #1A80E5; }
.pdo-mi-gray   { background: #f9fafb; color: #6b7280; }

.pdo-mod-body {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pdo-mod-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111827;
}

.pdo-mod-count {
  font-size: 0.7rem;
  color: #6b7280;
}

.pdo-mod-issues {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.pdo-mod-untested {
  color: #d97706;
  font-weight: 600;
}

/* Pulsing tiles — orange for untested, red for issues/major backlog */
.pdo-mod-pulse-orange {
  animation: pdo-pulse-orange 1.8s ease-in-out infinite;
  background: rgba(245, 158, 11, 0.06);
}
.pdo-mod-pulse-red {
  animation: pdo-pulse-red 1.4s ease-in-out infinite;
  background: rgba(239, 68, 68, 0.06);
}
.pdo-mod-pulse-orange:hover { background: rgba(245, 158, 11, 0.12); }
.pdo-mod-pulse-red:hover    { background: rgba(239, 68, 68, 0.12); }

@keyframes pdo-pulse-orange {
  0%, 100% { box-shadow: inset 3px 0 0 #f59e0b, 0 0 0 0 rgba(245, 158, 11, 0.35); }
  50%      { box-shadow: inset 3px 0 0 #f59e0b, 0 0 0 6px rgba(245, 158, 11, 0); }
}
@keyframes pdo-pulse-red {
  0%, 100% { box-shadow: inset 3px 0 0 #ef4444, 0 0 0 0 rgba(239, 68, 68, 0.45); }
  50%      { box-shadow: inset 3px 0 0 #ef4444, 0 0 0 8px rgba(239, 68, 68, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .pdo-mod-pulse-orange, .pdo-mod-pulse-red { animation: none; }
}

.pdo-mod-arrow {
  font-size: 0.6rem;
  color: #d1d5db;
  flex-shrink: 0;
  transition: all 0.2s;
}
.pdo-mod-tile:hover .pdo-mod-arrow {
  color: #1A80E5;
  transform: translateX(2px);
}

/* ── Test Status Breakdown ───────────────────────────────────── */
.pdo-breakdown-card {
  margin-bottom: 0;
}

.pdo-breakdown-bars {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdo-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pdo-bar-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  width: 60px;
  flex-shrink: 0;
}

.pdo-bar-track {
  flex: 1 1;
  height: 8px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}

.pdo-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.8s ease;
  min-width: 2px;
}

.pdo-bar-val {
  font-size: 0.8rem;
  font-weight: 700;
  color: #111827;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Right Column: On Site ───────────────────────────────────── */
.pdo-side-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pdo-onsite-card {
  flex: 1 1;
}

.pdo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px;
  color: #9ca3af;
}
.pdo-empty-ico { font-size: 1.5rem; opacity: 0.5; }
.pdo-empty p { margin: 0; font-size: 0.8125rem; }

.pdo-people {
  display: flex;
  flex-direction: column;
}

.pdo-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid #f3f4f6;
}
.pdo-person:last-child { border-bottom: none; }

.pdo-person-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1A80E5, #1A80E5);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pdo-person-detail {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pdo-person-nm {
  font-size: 0.8rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdo-person-co {
  font-size: 0.68rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pdo-sm-ico {
  font-size: 0.55rem;
  opacity: 0.7;
}

.pdo-person-dur {
  font-size: 0.68rem;
  color: #1A80E5;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  white-space: nowrap;
}

.pdo-more {
  text-align: center;
  padding: 10px;
  font-size: 0.75rem;
  color: #1A80E5;
  font-weight: 600;
}

/* ── Property Info Card ──────────────────────────────────────── */
.pdo-info-card {
  background: #fff;
}

.pdo-info-rows {
  padding: 4px 0;
}

.pdo-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 18px;
  border-bottom: 1px solid #f9fafb;
}
.pdo-info-row:last-child { border-bottom: none; }

.pdo-info-key {
  font-size: 0.78rem;
  color: #6b7280;
  font-weight: 500;
}

.pdo-info-val {
  font-size: 0.8rem;
  font-weight: 600;
  color: #111827;
}

.pdo-info-val-warn {
  color: #ef4444;
}

/* ── Counters Section ────────────────────────────────────────── */
.pdo-counters-section {
  margin-bottom: 24px;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes pdoSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — PDO
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .pdo-layout {
    grid-template-columns: 1fr 280px;
  }
  .pdo-stat-bar {
    flex-wrap: wrap;
    gap: 4px;
  }
  .pdo-stat-compliance {
    flex-basis: 100%;
    border-left: none;
    border-top: 1px solid #e5e7eb;
    margin-left: 0;
    margin-top: 4px;
    padding: 8px 12px 4px;
  }
}

@media (max-width: 768px) {
  .pdo-header-bar {
    flex-wrap: wrap;
    gap: 12px;
  }
  .pdo-header-actions {
    width: 100%;
  }
  .pdo-hdr-btn { flex: 1 1; justify-content: center; }
  .pdo-hdr-btn-hide-mobile { display: none; }

  .pdo-stat-bar {
    flex-wrap: wrap;
    padding: 8px;
  }
  .pdo-stat {
    flex: 0 0 auto;
    padding: 6px 10px;
  }
  .pdo-stat-divider { display: none; }
  .pdo-stat-val { font-size: 1.05rem; }

  .pdo-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .pdo-header-bar { padding: 12px 14px; }
  .pdo-header-thumb { width: 44px; height: 44px; }
  .pdo-header-name { font-size: 1.05rem; }
  .pdo-stat-bar { gap: 0; }
  .pdo-stat { padding: 6px 8px; gap: 5px; }
  .pdo-stat-val { font-size: 0.95rem; }
  .pdo-stat-lbl { font-size: 0.6rem; }
}

/* Modern Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  box-sizing: border-box;
}

/* Modern Modal Container */
.modern-modal {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: Inter, sans-serif;
}

.image-positioner-modal {
  max-width: 1200px;
  max-height: 95vh;
}

/* Modal Header */
.modal-header {
  padding: 24px 32px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  flex-shrink: 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 12px;
}

.close-btn {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

/* Modern Form */
.modern-form {
  padding: 32px;
  overflow-y: auto;
  flex: 1 1;
}

.form-section {
  margin-bottom: 32px;
}

.form-section:last-child {
  margin-bottom: 0;
}

.form-group {
  margin-bottom: 24px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  color: #1f2937;
  background: #ffffff;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

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

.form-group input::placeholder {
  color: #9ca3af;
}

/* Modern Dropzone */
.modern-dropzone {
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f9fafb;
  margin-top: 12px;
}

.modern-dropzone:hover,
.modern-dropzone.dragover {
  border-color: #3b82f6;
  background: #eff6ff;
}

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

.dropzone-icon {
  font-size: 48px;
  color: #9ca3af;
  margin-bottom: 8px;
}

.modern-dropzone:hover .dropzone-icon,
.modern-dropzone.dragover .dropzone-icon {
  color: #3b82f6;
}

.dropzone-content h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.dropzone-content p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

.dropzone-hint {
  font-size: 12px;
  color: #9ca3af;
}

/* Current Image Section */
.current-image-section {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.current-image-preview {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.current-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-actions {
  flex: 1 1;
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-cancel {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  text-decoration: none;
  min-height: 44px;
  box-sizing: border-box;
}

.btn-primary {
  background: #3b82f6;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.btn-primary:hover:not(:disabled) {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.btn-primary:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: #f8fafc;
  color: #374151;
  border: 1px solid #e2e8f0;
}

.btn-secondary:hover {
  background: #f1f5f9;
  border-color: #d1d5db;
}

.btn-cancel {
  background: #f8fafc;
  color: #6b7280;
  border: 1px solid #e2e8f0;
}

.btn-cancel:hover:not(:disabled) {
  background: #f1f5f9;
  color: #374151;
}

.btn-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Modal Actions */
.modal-actions {
  padding: 24px 32px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #ffffff;
  flex-shrink: 0;
}

/* Facebook-style Image Positioner */
.facebook-style-positioner {
  max-width: 1000px;
  max-height: 90vh;
}

.facebook-positioner-content {
  display: flex;
  gap: 24px;
  padding: 24px;
  overflow-y: auto;
  flex: 1 1;
  background: #f5f5f5;
}

.facebook-instructions {
  flex: 2 1;
  min-width: 0;
}

.instruction-box {
  background: #4267b2;
  color: white;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.instruction-box p {
  margin: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.4;
}

.instruction-box p:last-child {
  margin-bottom: 0;
}

.facebook-image-container {
  position: relative;
  width: 800px;
  height: 500px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.facebook-image-container:active {
  cursor: grabbing;
}

.facebook-draggable-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  max-width: none;
  max-height: none;
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}

/* Gray overlay areas - Facebook style */
.facebook-overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 2;
}

.facebook-overlay-top {
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
}

.facebook-overlay-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
}

.facebook-overlay-left {
  top: 100px;
  bottom: 100px;
  left: 0;
  width: 100px;
}

.facebook-overlay-right {
  top: 100px;
  bottom: 100px;
  right: 0;
  width: 100px;
}

/* Crop frame indicators */
.facebook-crop-frame {
  position: absolute;
  border: 2px dashed rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 3;
}

.sidebar-frame {
  top: 100px;
  left: 100px;
  width: 248px;
  height: 220px;
}

.property-card-frame {
  top: 100px;
  right: 100px;
  width: 220px;
  height: 220px;
}

.facebook-frame-label {
  position: absolute;
  top: -25px;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Right side preview section */
.facebook-preview-section {
  flex: 1 1;
  min-width: 280px;
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.facebook-preview-section h3 {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1c1e21;
  text-align: center;
}

.facebook-preview-box {
  margin-bottom: 24px;
  text-align: center;
}

.facebook-preview-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #65676b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.facebook-preview-image {
  border: 1px solid #dadde1;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f2f5;
  margin: 0 auto;
  position: relative;
}

.sidebar-preview-size {
  width: 124px;
  height: 110px;
}

.property-card-preview-size {
  width: 110px;
  height: 110px;
}

.facebook-preview-content {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
}

/* Zoom controls */
.facebook-zoom-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.facebook-zoom-btn {
  padding: 8px 12px;
  background: #e4e6ea;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1c1e21;
  cursor: pointer;
  transition: all 0.2s ease;
}

.facebook-zoom-btn:hover {
  background: #d8dadf;
}

.facebook-zoom-btn:active {
  background: #bcc0c4;
}

/* Actions */
.facebook-positioner-actions {
  padding: 16px 24px;
  border-top: 1px solid #dadde1;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #ffffff;
  flex-shrink: 0;
}

.facebook-save-btn {
  background: #1877f2;
  border: none;
  padding: 8px 16px;
  font-weight: 600;
}

.facebook-save-btn:hover:not(:disabled) {
  background: #166fe5;
}

/* Additional positioning styles */

/* Responsive Design */
@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }
  
  .modern-modal {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
  }
  
  .facebook-style-positioner {
    max-width: 95vw;
    max-height: 95vh;
  }
  
  .modal-header {
    padding: 18px 20px;
  }

  .modal-header h2 {
    min-width: 0;
    font-size: 18px;
    line-height: 1.25;
  }

  .close-btn {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }
  
  .modern-form {
    padding: 20px;
  }

  .form-section {
    margin-bottom: 24px;
  }

  .form-group {
    margin-bottom: 18px;
  }

  .form-group label,
  .form-section > label {
    text-align: left;
  }

  .form-group input {
    min-height: 48px;
    font-size: 16px;
  }
  
  .modal-actions,
  .facebook-positioner-actions {
    padding: 16px 20px;
    flex-direction: column;
  }
  
  .facebook-positioner-content {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
  }
  
  .facebook-image-container {
    width: 100%;
    height: 300px;
  }
  
  .facebook-overlay-top,
  .facebook-overlay-bottom {
    height: 60px;
  }
  
  .facebook-overlay-left,
  .facebook-overlay-right {
    width: 60px;
    top: 60px;
    bottom: 60px;
  }
  
  .sidebar-frame {
    top: 60px;
    left: 60px;
    width: 180px;
    height: 160px;
  }
  
  .property-card-frame {
    top: 60px;
    right: 60px;
    width: 160px;
    height: 160px;
  }
  
  .facebook-preview-section {
    min-width: 0;
    padding: 16px;
  }
  
  .facebook-zoom-controls {
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .facebook-zoom-btn {
    flex: 1 1;
    min-width: 80px;
  }
  
  .current-image-section {
    flex-direction: column;
    text-align: center;
    gap: 14px;
    padding: 16px;
  }

  .current-image-preview {
    width: min(160px, 52vw);
    height: min(140px, 45vw);
  }

  .image-actions {
    width: 100%;
  }
  
  .btn-primary,
  .btn-secondary,
  .btn-cancel {
    width: 100%;
    justify-content: center;
  }
}

/* ── Mobile scoping: force consistent look regardless of global CSS ───────── */
@media (max-width: 768px) {
  .property-profile-modal .modern-form { padding: 20px 18px 24px; }

  /* Section labels: always left-aligned, stronger weight */
  .property-profile-modal .form-section > label,
  .property-profile-modal .form-group > label {
    display: block;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 8px;
  }

  /* Current-image section becomes a clean vertical stack */
  .property-profile-modal .current-image-section {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 14px;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
  }
  .property-profile-modal .current-image-preview {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: 220px;
    align-self: stretch;
    border-radius: 10px;
  }
  .property-profile-modal .current-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .property-profile-modal .image-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }

  /* Override any global .btn-secondary dark styling that leaks in */
  .property-profile-modal .btn-secondary {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    padding: 11px 16px;
    border-radius: 10px;
    font-weight: 600;
    width: 100%;
    justify-content: center;
  }
  .property-profile-modal .btn-secondary:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
  }

  /* Hint text under Change Image */
  .property-profile-modal .image-actions > div[style] {
    text-align: left !important;
    font-size: 11.5px !important;
    color: #64748b !important;
    line-height: 1.45;
  }

  /* Remove weird gap above form section label */
  .property-profile-modal .form-section { margin-bottom: 20px; }
}

@media (max-width: 480px) {
  .property-profile-modal {
    max-height: 94dvh;
  }

  .modern-form {
    padding: 18px 16px;
  }

  .modal-actions {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  }
  
  .dropzone-content h3 {
    font-size: 16px;
  }
  
  .modern-dropzone {
    padding: 28px 16px;
  }
}

/* ================================================================
   PropertySearch — ps- prefix (Spotlight / Command Palette)
   ================================================================ */

/* ── Overlay ─────────────────────────────────────────────────── */
.ps-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(18vh, 140px);
  animation: psOverlayIn 0.15s ease-out;
}

@keyframes psOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal ───────────────────────────────────────────────────── */
.ps-modal {
  width: 100%;
  max-width: 620px;
  background: #fff;
  border-radius: 16px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.18),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(70vh, 540px);
  animation: psModalIn 0.2s ease-out;
}

@keyframes psModalIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Input area ──────────────────────────────────────────────── */
.ps-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  position: relative;
}

.ps-input-icon {
  color: #9ca3af;
  font-size: 1rem;
  flex-shrink: 0;
}

.ps-input {
  flex: 1 1;
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: inherit;
  color: #111827;
  background: transparent;
  min-width: 0;
}

.ps-input::placeholder {
  color: #9ca3af;
}

.ps-input-clear {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  transition: all 0.12s;
}
.ps-input-clear:hover {
  background: #f3f4f6;
  color: #374151;
}

.ps-kbd {
  font-size: 0.65rem;
  font-weight: 600;
  color: #9ca3af;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1.4;
  font-family: inherit;
  flex-shrink: 0;
}

/* ── Results area ────────────────────────────────────────────── */
.ps-results {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 0;
}

.ps-results::-webkit-scrollbar { width: 4px; }
.ps-results::-webkit-scrollbar-track { background: transparent; }
.ps-results::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* ── Group ───────────────────────────────────────────────────── */
.ps-group {
  padding: 0;
}

.ps-group + .ps-group {
  border-top: 1px solid #f3f4f6;
  margin-top: 4px;
  padding-top: 4px;
}

.ps-group-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 20px 4px;
}

/* ── Result item ─────────────────────────────────────────────── */
.ps-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.1s;
  position: relative;
}

.ps-item:hover,
.ps-item-active {
  background: #f0fdfa;
}

.ps-item-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #0d9488;
}

/* Icon */
.ps-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.ps-item-active .ps-item-icon {
  transform: scale(1.05);
}

/* Body */
.ps-item-body {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ps-item-name {
  font-size: 0.8625rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ps-item-id {
  font-size: 0.6rem;
  font-weight: 700;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.ps-item-sub {
  font-size: 0.7rem;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-item-loc-ico {
  font-size: 0.55rem;
  margin-left: 4px;
  color: #d1d5db;
}

/* Status badge */
.ps-item-status {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Arrow */
.ps-item-arrow {
  font-size: 0.55rem;
  color: #d1d5db;
  flex-shrink: 0;
  transition: all 0.15s;
}

.ps-item-active .ps-item-arrow {
  color: #0d9488;
  transform: translateX(2px);
}

/* ── Loading state ───────────────────────────────────────────── */
.ps-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 20px;
  color: #9ca3af;
  font-size: 0.8125rem;
}

.ps-loading-dots {
  display: flex;
  gap: 4px;
}

.ps-loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0d9488;
  animation: psDotPulse 1.2s ease-in-out infinite;
}

.ps-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.ps-loading-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes psDotPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%           { opacity: 1; transform: scale(1); }
}

/* ── Empty state ─────────────────────────────────────────────── */
.ps-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 20px;
  color: #9ca3af;
  font-size: 0.8125rem;
}

.ps-empty-icon {
  font-size: 1.25rem;
  opacity: 0.4;
  margin-bottom: 4px;
}

.ps-empty-hint {
  font-size: 0.7rem;
  color: #d1d5db;
}

/* ── Footer ──────────────────────────────────────────────────── */
.ps-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid #f3f4f6;
  background: #fafafa;
}

.ps-footer-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  color: #9ca3af;
}

.ps-footer-ico {
  font-size: 0.7rem;
  opacity: 0.5;
}

.ps-kbd-sm {
  font-size: 0.58rem;
  font-weight: 600;
  color: #9ca3af;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1.4;
  font-family: inherit;
}

.ps-footer-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #0d9488;
  opacity: 0.6;
}

.ps-footer-badge svg {
  font-size: 0.6rem;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .ps-overlay {
    padding-top: 10vh;
    padding-left: 16px;
    padding-right: 16px;
    align-items: flex-start;
  }

  .ps-modal {
    max-width: 100%;
    border-radius: 14px;
    max-height: 65vh;
    height: auto;
  }

  .ps-input-wrap {
    padding: 14px 16px;
  }

  .ps-input {
    font-size: 1rem;
  }

  .ps-item {
    padding: 10px 16px;
  }

  .ps-group-label {
    padding: 8px 16px 4px;
  }

  .ps-footer {
    padding: 10px 16px;
  }

  .ps-footer-hint {
    display: none;
  }
}

@media (max-width: 480px) {
  .ps-overlay {
    padding-top: 8vh;
    padding-left: 12px;
    padding-right: 12px;
  }

  .ps-modal {
    border-radius: 12px;
    max-height: 60vh;
  }

  .ps-input-wrap {
    gap: 10px;
    padding: 12px 14px;
  }

  .ps-kbd {
    display: none;
  }

  .ps-item-icon {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }

  .ps-item {
    gap: 10px;
    padding: 9px 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   StandardModal — Size variants only.
   Base modal styles (rs-modal-overlay, rs-modal, rs-modal-header,
   rs-modal-body, rs-modal-footer) come from roof-safety-shared.css.
   ═══════════════════════════════════════════════════════════════════ */

.rs-std-modal--small  { max-width: 400px; }
.rs-std-modal--medium { max-width: 560px; }
.rs-std-modal--large  { max-width: 800px; }
.rs-std-modal--xl     { max-width: 1000px; }

.cs-asset-docs { font-size: 0.875rem; color: #111827; }
.cs-asset-docs-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 12px; gap: 12px; flex-wrap: wrap;
}
.cs-asset-docs-title { margin: 0; font-size: 1rem; font-weight: 600; }
.cs-asset-docs-sub { font-size: 0.78rem; color: #6b7280; margin-left: 4px; }

.cs-asset-docs-upload {
  background: #1A80E5; color: white; border: none; border-radius: 8px;
  padding: 8px 14px; font-size: 0.82rem; font-weight: 500; cursor: pointer;
  transition: background 0.15s;
}
.cs-asset-docs-upload:hover { background: #1570CC; }

.cs-asset-docs-form {
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 16px; margin-bottom: 16px;
}
.cs-asset-docs-row {
  display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px; margin-bottom: 10px;
}
.cs-asset-docs-row label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; }
.cs-asset-docs-row label > span { font-weight: 600; color: #374151; }
.cs-asset-docs-row input[type="text"],
.cs-asset-docs-row input[type="date"],
.cs-asset-docs-row input[type="file"],
.cs-asset-docs-row select {
  width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 0.85rem; background: white; box-sizing: border-box;
}
.cs-asset-docs-form-actions { display: flex; align-items: flex-end; }
.cs-asset-docs-form-actions button {
  background: #22c55e; color: white; border: none; border-radius: 8px;
  padding: 9px 16px; font-size: 0.85rem; font-weight: 500; cursor: pointer;
  transition: background 0.15s;
}
.cs-asset-docs-form-actions button:hover:not(:disabled) { background: #16a34a; }
.cs-asset-docs-form-actions button:disabled { opacity: 0.55; cursor: not-allowed; }

.cs-asset-docs-filters {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.cs-asset-docs-chip {
  background: white; color: #6b7280; border: 1px solid #e5e7eb; border-radius: 9999px;
  padding: 5px 12px; font-size: 0.72rem; font-weight: 500; cursor: pointer;
  transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px;
}
.cs-asset-docs-chip:hover { background: #EBF4FF; border-color: #1A80E5; color: #1565C0; }
.cs-asset-docs-chip.active { background: #1A80E5; color: white; border-color: #1A80E5; }
.cs-asset-docs-count {
  background: rgba(0,0,0,0.08); color: inherit; border-radius: 9999px;
  padding: 0 6px; font-size: 0.65rem; min-width: 16px; text-align: center;
}
.cs-asset-docs-chip.active .cs-asset-docs-count { background: rgba(255,255,255,0.25); }

.cs-asset-docs-list { list-style: none; padding: 0; margin: 0; }
.cs-asset-docs-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px;
  margin-bottom: 8px; background: white; gap: 12px;
}
.cs-asset-docs-item:hover { border-color: #1A80E5; background: #fafbff; }
.cs-asset-docs-item-main { display: flex; align-items: center; gap: 12px; flex: 1 1; min-width: 0; }
.cs-asset-docs-item-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1; }
.cs-asset-docs-item-text strong { font-weight: 600; color: #111827; }
.cs-asset-docs-meta { font-size: 0.72rem; color: #6b7280; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cs-asset-docs-tag {
  font-size: 0.65rem; font-weight: 600; padding: 4px 8px;
  border-radius: 6px; white-space: nowrap; flex-shrink: 0;
}
.tag-user_guide         { background: #EBF4FF; color: #1565C0; }
.tag-testing_spec       { background: #f0fdf4; color: #16a34a; }
.tag-examination_scheme { background: #fffbeb; color: #d97706; }
.tag-method_statement   { background: #f5f3ff; color: #7c3aed; }
.tag-other              { background: #f3f4f6; color: #6b7280; }

.cs-asset-docs-item-actions button {
  background: white; color: #1A80E5; border: 1px solid #1A80E5; border-radius: 6px;
  padding: 6px 12px; font-size: 0.78rem; font-weight: 500; cursor: pointer;
}
.cs-asset-docs-item-actions button:hover { background: #EBF4FF; }

.cs-asset-docs-state {
  text-align: center; padding: 28px 16px; color: #6b7280;
  background: #f9fafb; border-radius: 12px;
}
.cs-asset-docs-state.cs-asset-docs-empty p { margin: 0 0 12px; }

@media (max-width: 640px) {
  .cs-asset-docs-row { grid-template-columns: 1fr; }
  .cs-asset-docs-meta { white-space: normal; }
}

.cs-wag-banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 16px;
  animation: cs-wag-pulse 1.6s ease-in-out 1;
}
.cs-wag-icon {
  width: 26px; height: 26px; border-radius: 50%;
  background: #f59e0b; color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem; flex-shrink: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.cs-wag-body {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 0.85rem; color: #78350f; line-height: 1.45;
}
.cs-wag-title { font-weight: 700; font-size: 0.92rem; color: #92400e; }
.cs-wag-text { color: #78350f; }
@keyframes cs-wag-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  60%  { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.cs-ptc {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 20px;
  margin: 16px 0;
}
.cs-ptc-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px; gap: 12px;
}
.cs-ptc-title { margin: 0; font-size: 1rem; font-weight: 600; color: #111827; }
.cs-ptc-sub { display: block; font-size: 0.78rem; color: #6b7280; margin-top: 2px; line-height: 1.45; }
.cs-ptc-progress {
  flex-shrink: 0; font-size: 0.78rem; font-weight: 600;
  background: #EBF4FF; color: #1565C0;
  padding: 4px 10px; border-radius: 9999px;
}
.cs-ptc-list { list-style: none; padding: 0; margin: 0 0 16px; }
.cs-ptc-row {
  border: 1px solid #e5e7eb; border-radius: 8px;
  margin-bottom: 6px; transition: background 0.15s, border-color 0.15s;
  background: white;
}
.cs-ptc-row:hover { border-color: #d1d5db; }
.cs-ptc-row.ticked { background: #f0fdf4; border-color: #bbf7d0; }
.cs-ptc-row label {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer;
  font-size: 0.9rem; color: #111827; line-height: 1.4;
}
.cs-ptc-row input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0;
  accent-color: #22c55e; cursor: pointer;
}
.cs-ptc-text { flex: 1 1; }
.cs-ptc-row.ticked .cs-ptc-text { text-decoration: line-through; color: #6b7280; }
.cs-ptc-required {
  font-size: 0.65rem; font-weight: 600; color: #92400e;
  background: #fffbeb; border: 1px solid #fde68a;
  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}

.cs-ptc-launch {
  width: 100%; padding: 14px;
  background: #ef4444; color: white;
  border: none; border-radius: 10px;
  font-size: 0.95rem; font-weight: 700;
  cursor: pointer; transition: background 0.15s, transform 0.05s;
  letter-spacing: 0.02em;
}
.cs-ptc-launch:hover:not(:disabled) { background: #dc2626; }
.cs-ptc-launch:active:not(:disabled) { transform: translateY(1px); }
.cs-ptc-launch:disabled {
  background: #e5e7eb; color: #9ca3af; cursor: not-allowed;
  font-weight: 500;
}

.cs-ptc-state {
  padding: 16px 18px; color: #374151; font-size: 0.85rem;
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
  display: flex; flex-direction: column; gap: 4px; line-height: 1.5;
}
.cs-ptc-state strong { color: #111827; font-weight: 600; }
.cs-ptc-state span { color: #6b7280; font-size: 0.78rem; }
.cs-ptc-error { background: #fef2f2; border-color: #fecaca; }
.cs-ptc-error strong { color: #991b1b; }
.cs-ptc-empty { background: #fffbeb; border-color: #fde68a; }
.cs-ptc-empty strong { color: #92400e; }

/* ═══════════════════════════════════════════════════════════════════
   AssetDetailModal — Test History & Asset Detail Overlay
   Professional, audit-friendly, mobile-first.
   ═══════════════════════════════════════════════════════════════════ */

.adm-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ─── Header ─────────────────────────────────────────────────────── */
.adm-header {
  padding: 0 0 20px;
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
  margin-bottom: 20px;
}

.adm-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.adm-header-left { flex: 1 1; min-width: 0; }

.adm-equipment-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  background: #eef4ff;
  background: var(--cs-blue-light, #eef4ff);
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.adm-asset-name {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 4px;
  line-height: 1.25;
  word-break: break-word;
}

.adm-location {
  font-size: 13px;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.adm-header-right {
  flex-shrink: 0;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Download report button — branded PDF export */
.adm-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #0d9488 0%, #0c437c 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 16px -6px rgba(12, 67, 124, 0.5);
  font-family: inherit;
  white-space: nowrap;
}
.adm-report-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(12, 67, 124, 0.6);
}
.adm-report-btn svg { font-size: 11px; }

/* Start test button (P0-4) — primary CTA in red so it's the obvious "I'm here to test" action */
.adm-start-test-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ef4444; color: white;
  border: none; border-radius: 8px;
  padding: 10px 14px; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer;
  box-shadow: 0 6px 14px -4px rgba(239, 68, 68, 0.5);
  transition: background 0.15s, transform 0.05s;
}
.adm-start-test-btn:hover { background: #dc2626; }
.adm-start-test-btn:active { transform: translateY(1px); }
.adm-checklist-wrap { margin-top: 16px; }

/* Compliance chip */
.adm-compliance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.adm-compliance-pass    { background: #f0fdf4; color: #16a34a; }
.adm-compliance-fail    { background: #fef2f2; color: #dc2626; }
.adm-compliance-overdue { background: #fff7ed; color: #ea580c; }
.adm-compliance-due-soon { background: #fffbeb; color: #d97706; }
.adm-compliance-pending { background: #fffbeb; color: #d97706; }
.adm-compliance-none    { background: #f3f4f6; color: #6b7280; }
.adm-compliance-unknown { background: #f3f4f6; color: #6b7280; }

/* Meta strip */
.adm-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
}

.adm-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 100px;
}

.adm-meta-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

.adm-meta-value {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

/* ─── Sections ───────────────────────────────────────────────────── */
.adm-section {
  margin-bottom: 24px;
}

.adm-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}

.adm-section-title svg {
  font-size: 14px;
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

.adm-history-count {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 500;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  background: #f5f7fa;
  background: var(--cs-bg, #f5f7fa);
  padding: 2px 10px;
  border-radius: 10px;
}

/* ─── Latest Test Summary Grid ───────────────────────────────────── */
.adm-latest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  background: #f5f7fa;
  background: var(--cs-bg, #f5f7fa);
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
}

.adm-latest-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.adm-latest-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

.adm-latest-value {
  font-size: 13.5px;
  font-weight: 500;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

/* ─── Result Badges ──────────────────────────────────────────────── */
.adm-result-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.adm-result-pass    { background: #f0fdf4; color: #16a34a; }
.adm-result-fail    { background: #fef2f2; color: #dc2626; }
.adm-result-pending { background: #fffbeb; color: #d97706; }
.adm-result-unknown { background: #f3f4f6; color: #6b7280; }

/* ─── Empty / Loading / Error Inline ─────────────────────────────── */
.adm-empty-history {
  text-align: center;
  padding: 32px 16px;
  background: #f5f7fa;
  background: var(--cs-bg, #f5f7fa);
  border-radius: 10px;
  border: 1px dashed #e5e7eb;
  border: 1px dashed var(--cs-border, #e5e7eb);
}

.adm-empty-icon {
  font-size: 28px;
  color: #d1d5db;
  color: var(--cs-text-faint, #d1d5db);
  margin-bottom: 10px;
}

.adm-empty-text {
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
  color: var(--cs-text-secondary, #4b5563);
  margin: 0 0 4px;
}

.adm-empty-sub {
  font-size: 12.5px;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.adm-loading-inline {
  text-align: center;
  padding: 24px;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.adm-error-inline {
  text-align: center;
  padding: 16px;
  background: #fef2f2;
  border-radius: 8px;
  color: #dc2626;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.adm-retry-btn {
  background: #dc2626;
  color: #fff;
  border: none;
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-height: 32px;
}

.adm-retry-btn:hover { background: #b91c1c; }

/* ─── Timeline ───────────────────────────────────────────────────── */
.adm-timeline {
  display: flex;
  flex-direction: column;
}

.adm-timeline-entry {
  display: flex;
  gap: 16px;
  position: relative;
  padding-bottom: 20px;
}

.adm-timeline-entry:last-child { padding-bottom: 0; }

/* Line + Dot */
.adm-timeline-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
  position: relative;
}

.adm-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2.5px solid #d1d5db;
  background: #fff;
  z-index: 1;
  flex-shrink: 0;
  margin-top: 4px;
}

.adm-timeline-dot.dot-pass    { border-color: #16a34a; background: #f0fdf4; }
.adm-timeline-dot.dot-fail    { border-color: #dc2626; background: #fef2f2; }
.adm-timeline-dot.dot-pending { border-color: #d97706; background: #fffbeb; }

.adm-timeline-entry:not(:last-child) .adm-timeline-line::after {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: #e5e7eb;
  background: var(--cs-border, #e5e7eb);
}

.adm-timeline-latest .adm-timeline-dot {
  width: 14px;
  height: 14px;
  margin-top: 3px;
}

/* Content */
.adm-timeline-content {
  flex: 1 1;
  min-width: 0;
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  transition: box-shadow 0.15s;
}

.adm-timeline-latest .adm-timeline-content {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 1px rgba(26, 128, 229, 0.08);
}

.adm-timeline-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.adm-timeline-date {
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.adm-test-type-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 4px;
  background: #f5f7fa;
  background: var(--cs-bg, #f5f7fa);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
}

/* Details rows */
.adm-timeline-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adm-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #4b5563;
  color: var(--cs-text-secondary, #4b5563);
}

.adm-detail-icon {
  font-size: 11px;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

/* Findings */
.adm-timeline-findings {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adm-finding-row p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: #4b5563;
  color: var(--cs-text-secondary, #4b5563);
  line-height: 1.5;
  word-break: break-word;
}

.adm-finding-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

.adm-finding-defect .adm-finding-label { color: #dc2626; }

/* Document links */
.adm-timeline-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
}

.adm-doc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 6px;
  background: #fff;
  background: var(--cs-white, #fff);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 32px;
}

.adm-doc-btn:hover {
  background: #eef4ff;
  background: var(--cs-blue-light, #eef4ff);
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
}

.adm-evidence-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  padding: 5px 10px;
  background: #f5f7fa;
  background: var(--cs-bg, #f5f7fa);
  border-radius: 6px;
}

/* Audit trail */
.adm-timeline-audit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.adm-source-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  background: #f3f4f6;
  color: #6b7280;
}

.adm-audit-timestamp {
  font-size: 11px;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

/* ─── Asset Documents (bottom section) ───────────────────────────── */
.adm-asset-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.adm-doc-btn-lg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  background: var(--cs-white, #fff);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 44px;
}

.adm-doc-btn-lg:hover {
  background: #eef4ff;
  background: var(--cs-blue-light, #eef4ff);
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

.adm-doc-btn-lg svg:first-child { font-size: 16px; color: #dc2626; }
.adm-doc-external { font-size: 10px; color: #9ca3af; color: var(--cs-text-faint, #9ca3af); margin-left: auto; }

/* ─── Notes ──────────────────────────────────────────────────────── */
.adm-notes-text {
  font-size: 13px;
  line-height: 1.6;
  color: #4b5563;
  color: var(--cs-text-secondary, #4b5563);
  margin: 0;
  background: #f5f7fa;
  background: var(--cs-bg, #f5f7fa);
  padding: 12px 16px;
  border-radius: 8px;
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — 768px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .adm-header-top { flex-direction: column; gap: 10px; }
  .adm-header-right { align-self: flex-start; }
  .adm-asset-name { font-size: 18px; }

  .adm-meta-strip { gap: 12px; }
  .adm-meta-item { min-width: 80px; }

  .adm-latest-grid {
    grid-template-columns: 1fr 1fr;
    padding: 14px;
    gap: 10px;
  }

  .adm-timeline-entry { gap: 12px; }
  .adm-timeline-content { padding: 12px; }

  .adm-timeline-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SMALL PHONE — 480px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .adm-asset-name { font-size: 16px; }

  .adm-latest-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .adm-timeline-line { width: 16px; }
  .adm-timeline-entry { gap: 10px; }
  .adm-timeline-content { padding: 10px; }

  .adm-doc-btn, .adm-doc-btn-lg { width: 100%; justify-content: center; }
  .adm-asset-docs { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════
   Roof Safety Module — Shared Foundation
   Single source for tables, badges, buttons, forms, modals,
   empty states, and mobile card layout across all equipment pages.
   Uses CloudSafe design tokens from tokens.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Equipment Page Section ───────────────────────────────────── */
.rs-equipment-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
}

.rs-equipment-section h1 {
  font-size: 1.25rem;
  font-size: var(--cs-text-2xl, 1.25rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 1.25rem 0;
  margin: 0 0 var(--cs-space-5, 1.25rem) 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ─── Search + Filter Bar ──────────────────────────────────────── */
.rs-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  margin-bottom: 1.25rem;
  margin-bottom: var(--cs-space-5, 1.25rem);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.rs-search-bar {
  position: relative;
  flex: 1 1;
  min-width: 180px;
  max-width: 360px;
}

.rs-search-bar input {
  width: 100%;
  height: 42px;
  padding: 0 1rem 0 2.25rem;
  padding: 0 var(--cs-space-4, 1rem) 0 2.25rem;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: #fff;
  background: var(--cs-white, #fff);
  transition: border-color 0.2s ease,
              box-shadow 0.2s ease;
  transition: border-color var(--cs-transition, 0.2s ease),
              box-shadow var(--cs-transition, 0.2s ease);
  box-sizing: border-box;
}

.rs-search-bar input::placeholder {
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

.rs-search-bar input:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.12);
}

.rs-search-bar .rs-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  font-size: 0.875rem;
  pointer-events: none;
}

.rs-toolbar-actions {
  display: flex;
  gap: 0.5rem;
  gap: var(--cs-space-2, 0.5rem);
  align-items: center;
  margin-left: auto;
  position: relative;
}

/* ─── Buttons ──────────────────────────────────────────────────── */
.rs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--cs-space-2, 0.5rem);
  height: 42px;
  padding: 0 1rem;
  padding: 0 var(--cs-space-4, 1rem);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  white-space: nowrap;
  min-width: 0;
  box-sizing: border-box;
}

.rs-btn:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 2px;
}

.rs-btn-primary {
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  color: var(--cs-white, #fff);
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
}

.rs-btn-primary:hover {
  background: #1565C0;
  background: var(--cs-blue-dark, #1565C0);
  border-color: #1565C0;
  border-color: var(--cs-blue-dark, #1565C0);
  box-shadow: var(--cs-shadow-sm);
}

.rs-btn-secondary {
  background: #fff;
  background: var(--cs-white, #fff);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  border-color: #e5e7eb;
  border-color: var(--cs-border, #e5e7eb);
}

.rs-btn-secondary:hover {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border-color: #d1d5db;
  border-color: var(--cs-border-dark, #d1d5db);
}

.rs-btn-danger {
  background: #fff;
  background: var(--cs-white, #fff);
  color: #ef4444;
  color: var(--cs-red, #ef4444);
  border-color: #ef4444;
  border-color: var(--cs-red, #ef4444);
}

.rs-btn-danger:hover {
  background: #ef4444;
  background: var(--cs-red, #ef4444);
  color: #fff;
  color: var(--cs-white, #fff);
}

.rs-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Filter Dropdown ──────────────────────────────────────────── */
.rs-filter-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 280px;
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  box-shadow: var(--cs-shadow-md);
  z-index: 100;
  z-index: var(--cs-z-dropdown, 100);
  padding: 1rem;
  padding: var(--cs-space-4, 1rem);
  animation: rsFadeIn 0.15s ease-out;
}

.rs-filter-dropdown label {
  display: block;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  margin-bottom: 0.25rem;
  margin-bottom: var(--cs-space-1, 0.25rem);
}

.rs-filter-dropdown select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 4px;
  border-radius: var(--cs-radius-sm, 4px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  margin-bottom: 0.75rem;
  margin-bottom: var(--cs-space-3, 0.75rem);
}

.rs-filter-dropdown select:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.1);
}

@keyframes rsFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Table Container ──────────────────────────────────────────── */
.rs-table-card {
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  box-shadow: var(--cs-shadow-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.rs-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  flex: 1 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* ─── Table ────────────────────────────────────────────────────── */
.rs-table {
  width: 100%;
  min-width: 700px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

.rs-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 5;
}

.rs-table th {
  padding: 0.75rem 0.75rem;
  padding: var(--cs-space-3, 0.75rem) var(--cs-space-3, 0.75rem);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  text-align: left;
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.rs-table td {
  padding: 0.75rem 0.75rem;
  padding: var(--cs-space-3, 0.75rem) var(--cs-space-3, 0.75rem);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
  vertical-align: middle;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-table tbody tr {
  transition: background 0.12s ease;
  transition: background var(--cs-transition-fast, 0.12s ease);
}

.rs-table tbody tr:hover {
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
}

.rs-table tbody tr:last-child td {
  border-bottom: none;
}

/* ─── Status Badges ────────────────────────────────────────────── */
.rs-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  border-radius: var(--cs-radius-full, 9999px);
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.6;
}

/* Dot indicator — always visible, paired with text label */
.rs-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rs-badge-pass,
.rs-badge-passed {
  background: #f0fdf4;
  background: var(--cs-green-light, #f0fdf4);
  color: #16a34a;
  color: var(--cs-green-dark, #16a34a);
}
.rs-badge-pass::before,
.rs-badge-passed::before {
  background: #22c55e;
  background: var(--cs-green, #22c55e);
}

.rs-badge-fail,
.rs-badge-failed {
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
}
.rs-badge-fail::before,
.rs-badge-failed::before {
  background: #ef4444;
  background: var(--cs-red, #ef4444);
}

.rs-badge-pending {
  background: #fffbeb;
  background: var(--cs-amber-light, #fffbeb);
  color: #d97706;
  color: var(--cs-amber-dark, #d97706);
}
.rs-badge-pending::before {
  background: #f59e0b;
  background: var(--cs-amber, #f59e0b);
}

.rs-badge-unknown {
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}
.rs-badge-unknown::before {
  background: #9ca3af;
  background: var(--cs-text-faint, #9ca3af);
}

.rs-badge-overdue {
  background: #fef2f2;
  color: #b91c1c;
}
.rs-badge-overdue::before {
  background: #ef4444;
  animation: rsPulse 2s ease-in-out infinite;
}

@keyframes rsPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─── Action Buttons (table row) ───────────────────────────────── */
.rs-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.rs-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  border-radius: var(--cs-radius-sm, 4px);
  border: none;
  background: transparent;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: pointer;
  transition: all 0.12s ease;
  transition: all var(--cs-transition-fast, 0.12s ease);
  font-size: 0.875rem;
  padding: 0;
}

.rs-action-btn:hover {
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

.rs-action-btn:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 1px;
}

.rs-action-btn.rs-action-delete:hover {
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
  color: #ef4444;
  color: var(--cs-red, #ef4444);
}

/* ─── Empty State ──────────────────────────────────────────────── */
.rs-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  padding: var(--cs-space-12, 3rem) var(--cs-space-6, 1.5rem);
  text-align: center;
}

.rs-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  margin-bottom: var(--cs-space-4, 1rem);
}

.rs-empty-title {
  font-size: 1rem;
  font-size: var(--cs-text-lg, 1rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 0.5rem 0;
  margin: 0 0 var(--cs-space-2, 0.5rem) 0;
}

.rs-empty-desc {
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  margin: 0 0 1.25rem 0;
  margin: 0 0 var(--cs-space-5, 1.25rem) 0;
  max-width: 320px;
  line-height: 1.5;
}

/* ─── Loading Skeleton ─────────────────────────────────────────── */
.rs-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  padding: 1.25rem;
  padding: var(--cs-space-5, 1.25rem);
}

.rs-skeleton-row {
  height: 14px;
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: rsShimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.rs-skeleton-row:nth-child(odd) { width: 100%; }
.rs-skeleton-row:nth-child(even) { width: 75%; }

@keyframes rsShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Error Alert ──────────────────────────────────────────────── */
.rs-error-alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  padding: 0.75rem 1rem;
  padding: var(--cs-space-3, 0.75rem) var(--cs-space-4, 1rem);
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
  border: 1px solid #fecaca;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  margin-bottom: 1rem;
  margin-bottom: var(--cs-space-4, 1rem);
}

.rs-error-alert button {
  margin-left: auto;
  background: none;
  border: 1px solid #ef4444;
  border: 1px solid var(--cs-red, #ef4444);
  color: #ef4444;
  color: var(--cs-red, #ef4444);
  padding: 4px 12px;
  border-radius: 4px;
  border-radius: var(--cs-radius-sm, 4px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  cursor: pointer;
  transition: all 0.12s ease;
  transition: all var(--cs-transition-fast, 0.12s ease);
}

.rs-error-alert button:hover {
  background: #ef4444;
  background: var(--cs-red, #ef4444);
  color: #fff;
  color: var(--cs-white, #fff);
}

/* ─── Modal Overlay ────────────────────────────────────────────── */
.rs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 1.25rem;
  padding: var(--cs-space-5, 1.25rem);
  animation: rsFadeIn 0.2s ease-out;
}

.rs-modal {
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 16px;
  border-radius: var(--cs-radius-xl, 16px);
  box-shadow: var(--cs-shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  position: relative;
  animation: rsSlideUp 0.25s ease-out;
}

@keyframes rsSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rs-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  padding: var(--cs-space-5, 1.25rem) var(--cs-space-6, 1.5rem);
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
}

.rs-modal-header h2,
.rs-modal-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-size: var(--cs-text-xl, 1.125rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.rs-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  border: none;
  background: transparent;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: pointer;
  transition: all 0.12s ease;
  transition: all var(--cs-transition-fast, 0.12s ease);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.rs-modal-close:hover {
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.rs-modal-body {
  padding: 1.25rem 1.5rem;
  padding: var(--cs-space-5, 1.25rem) var(--cs-space-6, 1.5rem);
}

/* ─── Form Grid ────────────────────────────────────────────────── */
.rs-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  grid-gap: 1rem;
  grid-gap: var(--cs-space-4, 1rem);
  gap: var(--cs-space-4, 1rem);
}

.rs-form-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.rs-form-group.rs-full-width {
  grid-column: 1 / -1;
}

.rs-form-group label {
  display: block;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 500;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  margin-bottom: 0.25rem;
  margin-bottom: var(--cs-space-1, 0.25rem);
  text-align: left;
}

.rs-form-group input,
.rs-form-group select,
.rs-form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: #fff;
  background: var(--cs-white, #fff);
  transition: border-color 0.2s ease,
              box-shadow 0.2s ease;
  transition: border-color var(--cs-transition, 0.2s ease),
              box-shadow var(--cs-transition, 0.2s ease);
  box-sizing: border-box;
}

.rs-form-group input:focus,
.rs-form-group select:focus,
.rs-form-group textarea:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.12);
}

.rs-form-group textarea {
  resize: vertical;
  min-height: 72px;
}

.rs-form-group input[readonly] {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: not-allowed;
}

/* ─── Modal Footer ─────────────────────────────────────────────── */
.rs-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  padding: 1rem 1.5rem;
  padding: var(--cs-space-4, 1rem) var(--cs-space-6, 1.5rem);
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
}

/* ─── Mobile Card Layout (replaces table on small screens) ────── */
.rs-mobile-cards {
  display: none;
}

.rs-mobile-card {
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  padding: 1rem;
  padding: var(--cs-space-4, 1rem);
  margin-bottom: 0.75rem;
  margin-bottom: var(--cs-space-3, 0.75rem);
  transition: box-shadow 0.2s ease;
  transition: box-shadow var(--cs-transition, 0.2s ease);
}

.rs-mobile-card:active {
  box-shadow: var(--cs-shadow-sm);
}

.rs-mobile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  margin-bottom: var(--cs-space-3, 0.75rem);
}

.rs-mobile-card-title {
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  margin-right: 0.5rem;
  margin-right: var(--cs-space-2, 0.5rem);
}

.rs-mobile-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  grid-gap: 0.5rem 1rem;
  grid-gap: var(--cs-space-2, 0.5rem) var(--cs-space-4, 1rem);
  gap: var(--cs-space-2, 0.5rem) var(--cs-space-4, 1rem);
}

.rs-mobile-card-field {
  display: flex;
  flex-direction: column;
}

.rs-mobile-card-label {
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 500;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.rs-mobile-card-value {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-mobile-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 0.75rem;
  margin-top: var(--cs-space-3, 0.75rem);
  padding-top: 0.75rem;
  padding-top: var(--cs-space-3, 0.75rem);
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
}

.rs-mobile-card-actions .rs-btn {
  height: 38px;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ── Break equipment sections out of fixed height ── */
  .rs-equipment-section {
    overflow: visible;
    max-height: none;
    min-height: 0;
  }

  .rs-equipment-section h1 {
    text-align: left;
  }

  .rs-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    gap: var(--cs-space-3, 0.75rem);
    max-width: 100%;
    box-sizing: border-box;
  }

  .rs-search-bar {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
  }

  .rs-search-bar input {
    width: 100%;
    box-sizing: border-box;
  }

  .rs-toolbar-actions {
    margin-left: 0;
    justify-content: stretch;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }

  .rs-toolbar-actions .rs-btn {
    flex: 1 1;
    min-width: 0;
    justify-content: center;
    min-height: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rs-form-grid {
    grid-template-columns: 1fr;
  }

  .rs-modal {
    max-width: none;
    margin: 0.75rem;
    margin: var(--cs-space-3, 0.75rem);
    max-height: calc(100vh - 1.5rem);
  }

  .rs-modal-footer {
    flex-direction: column;
  }

  .rs-modal-footer .rs-btn {
    width: 100%;
  }

  /* Show mobile cards, hide desktop table */
  .rs-table-card {
    overflow: hidden;
    max-width: 100%;
  }

  .rs-table-card .rs-table-scroll {
    display: none;
  }

  .rs-mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    gap: var(--cs-space-3, 0.75rem);
    overflow: hidden;
    padding: 0;
    max-width: 100%;
  }

  /* ── Mobile card styling — left-aligned, modern ── */
  .rs-mobile-card {
    border-radius: 12px;
    border-radius: var(--cs-radius-lg, 12px);
    padding: 1rem;
    padding: var(--cs-space-4, 1rem);
    border: 1px solid #e5e7eb;
    border: 1px solid var(--cs-border, #e5e7eb);
    background: #fff;
    background: var(--cs-white, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }

  .rs-mobile-card-header {
    text-align: left;
  }

  .rs-mobile-card-title {
    font-size: 0.95rem;
    font-weight: 600;
  }

  .rs-mobile-card-meta {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    text-align: left;
    overflow: hidden;
  }

  .rs-mobile-card-field {
    min-width: 0;
    overflow: hidden;
  }

  .rs-mobile-card-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    color: var(--cs-text-muted, #64748b);
    font-weight: 600;
    text-align: left;
  }

  .rs-mobile-card-value {
    font-size: 0.85rem;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rs-mobile-card-actions {
    gap: 8px;
  }

  .rs-mobile-card-actions .rs-btn {
    flex: 1 1;
    min-width: 0;
    min-height: 40px;
    font-size: 0.8rem;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 480px) {
  .rs-equipment-section h1 {
    font-size: 1.125rem;
    font-size: var(--cs-text-xl, 1.125rem);
  }

  .rs-modal {
    border-radius: 16px 16px 0 0;
    border-radius: var(--cs-radius-xl, 16px) var(--cs-radius-xl, 16px) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    max-height: 90vh;
    animation: rsSlideUpSheet 0.3s ease-out;
  }

  @keyframes rsSlideUpSheet {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .rs-mobile-card-meta {
    grid-template-columns: 1fr;
  }
}

/* ─── Focus & Accessibility ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rs-modal,
  .rs-filter-dropdown,
  .rs-table tbody tr,
  .rs-action-btn,
  .rs-btn {
    animation: none !important;
    transition: none !important;
  }
}

/* Ensure clickable table rows are keyboard accessible */
.rs-table tbody tr[tabindex="0"]:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: -2px;
}

/* ═══════════════════════════════════════════════════════════════════
   Shared module pill sub-navigation styles
   Used by all safety modules (Roof, Fire, Staff, Equipment, etc.)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Sub-nav pill wrappers ──────────────────────────────────── */
.rs-subnav-desktop-wrap { display: block; }
.rs-subnav-mobile-wrap  { display: none;  }

/* ─── Sub-nav pills ──────────────────────────────────────────── */
.rs-subnav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
  border-bottom: 1px solid #e2e8f0;
  border-bottom: 1px solid var(--cs-border-light, #e2e8f0);
  margin-bottom: 10px;
}

.rs-subnav::-webkit-scrollbar { display: none; }

.rs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  flex-shrink: 0;
  min-height: 36px;
  background: #f8fafc;
  background: var(--cs-bg-alt, #f8fafc);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--cs-border-light, #e2e8f0);
  color: #64748b;
  color: var(--cs-text-muted, #64748b);
  cursor: pointer;
  transition: all 0.2s ease;
}

.rs-pill svg {
  width: 13px;
  height: 13px;
}

.rs-pill:hover {
  background: #fff;
  background: var(--cs-white, #fff);
  border-color: #3b82f6;
  border-color: var(--cs-blue, #3b82f6);
  color: #3b82f6;
  color: var(--cs-blue, #3b82f6);
}

.rs-pill-active {
  background: #3b82f6;
  background: var(--cs-blue, #3b82f6);
  color: #fff;
  border-color: #3b82f6;
  border-color: var(--cs-blue, #3b82f6);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.rs-pill-active:hover {
  background: #2563eb;
  background: var(--cs-blue-hover, #2563eb);
  color: #fff;
  border-color: #2563eb;
  border-color: var(--cs-blue-hover, #2563eb);
}

/* ─── Mobile responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .rs-subnav-desktop-wrap { display: none;  }
  .rs-subnav-mobile-wrap  { display: block; }

  .rs-subnav-mobile-wrap .rs-subnav {
    padding: 8px 12px;
    margin-bottom: 0;
    border-bottom: 1px solid #e2e8f0;
    border-bottom: 1px solid var(--cs-border-light, #e2e8f0);
    background: #fff;
    background: var(--cs-white, #fff);
  }

  .rs-pill {
    padding: 6px 12px;
    font-size: 0.75rem;
    min-height: 32px;
    gap: 5px;
  }

  .rs-pill svg {
    width: 12px;
    height: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Roof Safety — Shell & Dashboard Styles
   Layout container, sidebar, dashboard cards, bottom panels.
   Table / modal / badge / form primitives live in roof-safety-shared.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Shell Container ─────────────────────────────────────────── */
.roof-safety-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #f5f6fa;
  background: var(--cs-bg, #f5f6fa);
  overflow: hidden;
  box-sizing: border-box;
  text-align: left;
}

/* ─── Content Area ────────────────────────────────────────────── */
.roof-safety-content {
  display: flex;
  flex: 1 1;
  padding: 0;
  gap: 0;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0;
}

.roof-safety-main {
  flex: 1 1;
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  border: 1px solid var(--cs-border-light, #f1f5f9);
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
}

/* ─── Dashboard Wrapper ──────────────────────────────────────── */
.rd-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* ─── Header ─────────────────────────────────────────────────── */
.rd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.rd-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.01em;
}

.rd-header-actions {
  display: flex;
  gap: 8px;
}

.rd-header-actions .rs-btn {
  height: 34px;
  font-size: 0.78rem;
  padding: 0 14px;
  gap: 6px;
}

/* ─── Summary Stats Row ──────────────────────────────────────── */
.rd-summary-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

.rd-summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
  background: #fff;
  transition: box-shadow 0.2s, transform 0.2s;
}

.rd-summary-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.rd-summary-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.rd-summary-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.rd-summary-card.summary-blue  { background: #eff6ff; border-color: #dbeafe; }
.rd-summary-card.summary-blue .rd-summary-value  { color: #1d4ed8; }
.rd-summary-card.summary-blue .rd-summary-label  { color: #3b82f6; }

.rd-summary-card.summary-green { background: #f0fdf4; border-color: #dcfce7; }
.rd-summary-card.summary-green .rd-summary-value { color: #15803d; }
.rd-summary-card.summary-green .rd-summary-label { color: #22c55e; }

.rd-summary-card.summary-red   { background: #fef2f2; border-color: #fee2e2; }
.rd-summary-card.summary-red .rd-summary-value   { color: #b91c1c; }
.rd-summary-card.summary-red .rd-summary-label   { color: #ef4444; }

.rd-summary-card.summary-amber { background: #fffbeb; border-color: #fef3c7; }
.rd-summary-card.summary-amber .rd-summary-value { color: #92400e; }
.rd-summary-card.summary-amber .rd-summary-label { color: #d97706; }

/* ─── 2-Column Grid (Equipment + Right Stack) ───────────────── */
.rd-grid-2col {
  display: grid;
  grid-template-columns: 1fr 380px;
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}

.rd-right-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─── Section Headers ────────────────────────────────────────── */
.rd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rd-section-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.005em;
}

/* ─── Equipment Grid ─────────────────────────────────────────── */
.rd-equipment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

.rd-equip-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: inherit;
  position: relative;
}

.rd-equip-card:hover {
  border-color: #bfdbfe;
  background: #f8faff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.rd-equip-card:hover .rd-equip-arrow {
  color: #3b82f6;
  transform: translateX(2px);
}

.rd-equip-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.rd-equip-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rd-equip-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rd-equip-count {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.rd-equip-badge {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.rd-badge-red   { background: #fef2f2; color: #dc2626; }
.rd-badge-amber { background: #fffbeb; color: #b45309; }
.rd-badge-green { background: #f0fdf4; color: #16a34a; }

.rd-equip-arrow {
  color: #cbd5e1;
  font-size: 0.65rem;
  flex-shrink: 0;
  transition: all 0.2s;
}

/* ─── Panels (Shared) ────────────────────────────────────────── */
.rd-panel {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rd-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}

.rd-panel-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rd-panel-icon { font-size: 0.78rem; }
.rd-icon-amber { color: #d97706; }
.rd-icon-blue  { color: #3b82f6; }
.rd-icon-gray  { color: #94a3b8; }

.rd-panel-body {
  padding: 14px 16px;
  flex: 1 1;
  min-height: 0;
}

/* ─── Attention Panel ────────────────────────────────────────── */
.rd-attention-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rd-attention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f8fafc;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}

.rd-attention-item:last-child { border-bottom: none; }
.rd-attention-item:hover { background: #fef2f2; margin: 0 -16px; padding: 10px 16px; width: calc(100% + 32px); }

.rd-attention-icon {
  color: #ef4444;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.rd-attention-label {
  flex: 1 1;
  font-size: 0.82rem;
  font-weight: 500;
  color: #1e293b;
}

.rd-attention-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: #dc2626;
  background: #fef2f2;
  padding: 2px 8px;
  border-radius: 6px;
}

.rd-attention-arrow {
  color: #cbd5e1;
  font-size: 0.6rem;
}

/* All Clear */
.rd-all-clear {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  gap: 4px;
}

.rd-all-clear-icon {
  font-size: 1.5rem;
  color: #22c55e;
  margin-bottom: 4px;
}

.rd-all-clear span:first-of-type {
  font-size: 0.82rem;
  font-weight: 600;
  color: #15803d;
}

.rd-all-clear-sub {
  font-size: 0.7rem;
  color: #6b7280;
}

/* ─── Compliance / Donut Panel ───────────────────────────────── */
.rd-risk-pill {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.rd-risk-low    { background: #f0fdf4; color: #16a34a; }
.rd-risk-medium { background: #fffbeb; color: #b45309; }
.rd-risk-high   { background: #fef2f2; color: #dc2626; }

.rd-compliance-body {
  display: flex;
  align-items: center;
  gap: 20px;
}

.rd-donut-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  flex-shrink: 0;
}

.rd-donut {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.rd-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rd-donut-pct {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
}

.rd-compliance-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1;
}

.rd-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rd-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rd-dot-green { background: #22c55e; }
.rd-dot-amber { background: #f59e0b; }
.rd-dot-red   { background: #ef4444; }

.rd-legend-label {
  flex: 1 1;
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
}

.rd-legend-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
}

/* ─── Activity Panel ─────────────────────────────────────────── */
.rd-activity-panel {
  /* full width at bottom */
}

.rd-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rd-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f8fafc;
}

.rd-activity-item:last-child { border-bottom: none; }

.rd-activity-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.rd-act-red   { background: #fef2f2; color: #dc2626; }
.rd-act-green { background: #f0fdf4; color: #16a34a; }
.rd-act-blue  { background: #eff6ff; color: #3b82f6; }
.rd-act-gray  { background: #f3f4f6; color: #9ca3af; }

.rd-activity-body {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rd-activity-msg {
  font-size: 0.78rem;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.35;
}

.rd-activity-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: #94a3b8;
}

.rd-activity-user {
  font-weight: 600;
  color: #64748b;
}

.rd-activity-time {
  color: #94a3b8;
}

/* Loading skeleton */
.rd-activity-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}

.rd-skel-row {
  height: 12px;
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: rdShimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.rd-skel-row:nth-child(odd) { width: 80%; }
.rd-skel-row:nth-child(even) { width: 55%; }

@keyframes rdShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty activity */
.rd-empty-activity {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
  gap: 6px;
  color: #94a3b8;
}

.rd-empty-activity .rd-empty-icon {
  font-size: 1.2rem;
  color: #cbd5e1;
  margin-bottom: 2px;
}

.rd-empty-activity span {
  font-size: 0.78rem;
  font-weight: 500;
}

/* ─── Loading / Error (shell-level) ──────────────────────────── */
.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  font-size: 1.1em;
  color: #666;
  color: var(--cs-text-muted, #666);
}

.error-message {
  color: #dc3545;
  color: var(--cs-red, #dc3545);
  text-align: center;
  padding: 20px;
  font-size: 1.1em;
}

/* ═══════════════════════════════════════════════════════════════════
   Responsive Breakpoints
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .rd-grid-2col {
    grid-template-columns: 1fr 340px;
  }
}

@media (max-width: 1024px) {
  .rd-grid-2col {
    grid-template-columns: 1fr;
  }

  .rd-summary-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  /* ── Force natural document flow so page scrolls ── */
  .roof-safety-container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .roof-safety-content {
    padding: 0;
    gap: 0;
    overflow: visible !important;
    min-height: 0;
    height: auto !important;
  }

  /* ── Pills tab: white, rounded top, connected to card below ── */
  .rs-subnav-mobile-wrap {
    margin: 0 8px;
  }

  .rs-subnav-mobile-wrap .rs-subnav {
    border-radius: 12px 12px 0 0;
    border: 1px solid #f1f5f9;
    border: 1px solid var(--cs-border-light, #f1f5f9);
    border-bottom: none;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
  }

  /* ── Main card: connected to pills above, rounded bottom only ── */
  .roof-safety-main {
    padding: 16px;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: visible !important;
    max-height: none !important;
    min-height: 0;
    height: auto !important;
    margin: 0 8px;
  }

  .rd-wrapper {
    gap: 16px;
  }

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

  .rd-header-actions {
    width: 100%;
  }

  .rd-header-actions .rs-btn {
    flex: 1 1;
    justify-content: center;
  }

  .rd-summary-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .rd-summary-card {
    padding: 10px 6px;
  }

  .rd-summary-value {
    font-size: 1.2rem;
  }

  .rd-summary-label {
    font-size: 0.62rem;
  }

  .rd-equipment-grid {
    grid-template-columns: 1fr;
  }

  .rd-compliance-body {
    flex-direction: column;
    align-items: center;
  }

  .rd-donut-wrap {
    width: 100px;
    height: 100px;
  }

  .rd-compliance-legend {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .rs-subnav-mobile-wrap {
    margin: 0 6px;
  }

  .roof-safety-main {
    padding: 12px;
    margin: 0 6px;
    border-radius: 0 0 12px 12px !important;
  }

  .rd-summary-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .rd-summary-row .rd-summary-card:last-child {
    grid-column: 1 / -1;
  }

  .rd-title {
    font-size: 1.15rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Alerts Panel — Slideout
   ═══════════════════════════════════════════════════════════════════ */

/* Overlay */
.rd-alerts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1100;
  animation: rdAlertsFadeIn 0.2s ease;
}

@keyframes rdAlertsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Panel */
.rd-alerts-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: #fff;
  z-index: 1101;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.rd-alerts-panel.rd-alerts-open {
  transform: translateX(0);
}

/* Header */
.rd-alerts-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.rd-alerts-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rd-alerts-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}

.rd-alerts-title-icon {
  color: #f59e0b;
  font-size: 0.95rem;
}

.rd-alerts-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background 0.12s, color 0.12s;
}
.rd-alerts-close:hover {
  background: #e5e7eb;
  color: #111827;
}

.rd-alerts-summary {
  display: flex;
  gap: 8px;
}

.rd-alerts-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.rd-alerts-pill-red {
  background: #fef2f2;
  color: #dc2626;
}
.rd-alerts-pill-amber {
  background: #fffbeb;
  color: #d97706;
}

/* Body */
.rd-alerts-body {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Alert list */
.rd-alerts-list {
  display: flex;
  flex-direction: column;
}

.rd-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 24px;
  border: none;
  border-bottom: 1px solid #f5f5f5;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.12s;
}
.rd-alert-item:last-child { border-bottom: none; }
.rd-alert-item:hover { background: #fafbfc; }

.rd-alert-critical { border-left: 3px solid #ef4444; }
.rd-alert-warning  { border-left: 3px solid #f59e0b; }

.rd-alert-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.78rem;
}
.rd-alert-icon-red  { background: #fef2f2; color: #dc2626; }
.rd-alert-icon-amber { background: #fffbeb; color: #d97706; }

.rd-alert-body {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rd-alert-name {
  font-size: 0.8125rem;
  font-weight: 650;
  color: #111827;
  line-height: 1.3;
}

.rd-alert-msg {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.4;
}

.rd-alert-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.rd-alert-category {
  font-size: 0.65rem;
  font-weight: 600;
  color: #1A80E5;
  background: #eff6ff;
  padding: 1px 7px;
  border-radius: 4px;
}

.rd-alert-loc,
.rd-alert-date {
  font-size: 0.65rem;
  color: #9ca3af;
}

.rd-alert-loc::before {
  content: '·';
  margin-right: 6px;
}

.rd-alert-date::before {
  content: '·';
  margin-right: 6px;
}

.rd-alert-arrow {
  color: #d1d5db;
  font-size: 0.65rem;
  flex-shrink: 0;
  margin-top: 4px;
  transition: color 0.12s;
}
.rd-alert-item:hover .rd-alert-arrow {
  color: #9ca3af;
}

/* Button badge */
.rd-alerts-btn-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  margin-left: 4px;
}

/* Pulsing Alerts button — draws the eye when work is queued */
.rd-alerts-btn { position: relative; }

.rd-alerts-pulse-orange {
  border-color: #f59e0b !important;
  color: #92400e !important;
  animation: rd-pulse-orange 1.8s ease-in-out infinite;
}
.rd-alerts-pulse-orange .rd-alerts-btn-badge { background: #f59e0b; }

.rd-alerts-pulse-red {
  border-color: #ef4444 !important;
  color: #991b1b !important;
  animation: rd-pulse-red 1.4s ease-in-out infinite;
}
.rd-alerts-pulse-red .rd-alerts-btn-badge { background: #ef4444; }

@keyframes rd-pulse-orange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}
@keyframes rd-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.65); }
  50%      { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

/* Respect users with reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .rd-alerts-pulse-orange, .rd-alerts-pulse-red { animation: none; }
}

/* Empty state */
.rd-alerts-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 32px;
  text-align: center;
  gap: 8px;
}

.rd-alerts-empty-icon {
  font-size: 2.2rem;
  color: #22c55e;
  margin-bottom: 8px;
}

.rd-alerts-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
}

.rd-alerts-empty-desc {
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.5;
  max-width: 260px;
}

/* Skeleton loading */
.rd-alerts-loading {
  padding: 8px 0;
}

.rd-alerts-skel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 24px;
}

.rd-alerts-skel-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #e5e7eb;
  flex-shrink: 0;
  animation: rdShimmer 1.5s ease-in-out infinite;
}

.rd-alerts-skel-lines {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}

.rd-alerts-skel-line {
  height: 10px;
  border-radius: 4px;
  background: #e5e7eb;
  animation: rdShimmer 1.5s ease-in-out infinite;
}

.rd-skel-w60 { width: 60%; }
.rd-skel-w80 { width: 80%; }

/* Mobile */
@media (max-width: 480px) {
  .rd-alerts-panel {
    width: 100vw;
  }

  .rd-alerts-header {
    padding: 16px 16px 12px;
  }

  .rd-alert-item {
    padding: 14px 16px;
  }
}

/* ─── Accessibility ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rd-summary-card,
  .rd-equip-card,
  .rd-panel {
    transition: none;
  }

  .rd-summary-card:hover,
  .rd-equip-card:hover {
    transform: none;
  }

  .rd-skel-row {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Cradles — Component-specific overrides
   Base styles come from ../roof-safety-shared.css (imported by RoofSafety.css).
   ═══════════════════════════════════════════════════════════════════ */

.cradles-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
}

.cradles-section h1 {
  font-size: 1.25rem;
  font-size: var(--cs-text-2xl, 1.25rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 1.25rem 0;
  margin: 0 0 var(--cs-space-5, 1.25rem) 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .cradles-section {
    overflow: visible;
    max-height: none;
  }
}

@media (max-width: 480px) {
  .cradles-section h1 {
    font-size: 1.125rem;
    font-size: var(--cs-text-xl, 1.125rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Ladders — Component-specific overrides
   Base styles come from ../roof-safety-shared.css (imported by RoofSafety.css).
   Only UNIQUE Ladders styling goes here.
   ═══════════════════════════════════════════════════════════════════ */

/* Ladders wrapping section */
.ladders-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
}

.ladders-section h1 {
  font-size: 1.25rem;
  font-size: var(--cs-text-2xl, 1.25rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 1.25rem 0;
  margin: 0 0 var(--cs-space-5, 1.25rem) 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ladders-section {
    padding: 0;
    overflow: visible;
    max-height: none;
  }
}

@media (max-width: 480px) {
  .ladders-section h1 {
    font-size: 1.125rem;
    font-size: var(--cs-text-xl, 1.125rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Walkways — Component-specific overrides
   Base styles come from ../roof-safety-shared.css (imported by RoofSafety.css).
   Only UNIQUE Walkways styling goes here.
   ═══════════════════════════════════════════════════════════════════ */

.walkways-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
}

.walkways-section h1 {
  font-size: 1.25rem;
  font-size: var(--cs-text-2xl, 1.25rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 1.25rem 0;
  margin: 0 0 var(--cs-space-5, 1.25rem) 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .walkways-section {
    overflow: visible;
    max-height: none;
  }
}

@media (max-width: 480px) {
  .walkways-section h1 {
    font-size: 1.125rem;
    font-size: var(--cs-text-xl, 1.125rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Handrails — Component-specific overrides
   Base styles come from ../roof-safety-shared.css (imported by RoofSafety.css).
   Only UNIQUE Handrails styling goes here.
   ═══════════════════════════════════════════════════════════════════ */

.handrails-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
}

.handrails-section h1 {
  font-size: 1.25rem;
  font-size: var(--cs-text-2xl, 1.25rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 1.25rem 0;
  margin: 0 0 var(--cs-space-5, 1.25rem) 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .handrails-section {
    padding: 0;
    overflow: visible;
    max-height: none;
  }
}

@media (max-width: 480px) {
  .handrails-section h1 {
    font-size: 1.125rem;
    font-size: var(--cs-text-xl, 1.125rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Static Lines — Component-specific overrides
   Base styles come from ../roof-safety-shared.css (imported by RoofSafety.css).
   Only UNIQUE StaticLines styling goes here.
   ═══════════════════════════════════════════════════════════════════ */

.staticlines-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
}

.staticlines-section h1 {
  font-size: 1.25rem;
  font-size: var(--cs-text-2xl, 1.25rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 1.25rem 0;
  margin: 0 0 var(--cs-space-5, 1.25rem) 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .staticlines-section {
    overflow: visible;
    max-height: none;
  }
}

@media (max-width: 480px) {
  .staticlines-section h1 {
    font-size: 1.125rem;
    font-size: var(--cs-text-xl, 1.125rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Anchor Points — Component-specific overrides
   Base styles come from ../roof-safety-shared.css (imported by RoofSafety.css).
   Only UNIQUE AnchorPoints styling goes here.
   ═══════════════════════════════════════════════════════════════════ */

/* Anchor Points wrapping section */
.anchor-points-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
}

.anchor-points-section h1 {
  font-size: 1.25rem;
  font-size: var(--cs-text-2xl, 1.25rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 1.25rem 0;
  margin: 0 0 var(--cs-space-5, 1.25rem) 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .anchor-points-section {
    padding: 0;
    overflow: hidden;
    overflow-y: visible;
    max-height: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .anchor-points-section h1 {
    font-size: 1.125rem;
    font-size: var(--cs-text-xl, 1.125rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Abseil Systems — Component-specific overrides
   Base styles come from ../roof-safety-shared.css (imported by RoofSafety.css).
   Only UNIQUE AbseilSystems styling goes here.
   ═══════════════════════════════════════════════════════════════════ */

.abseil-systems-section {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
}

.abseil-systems-section h1 {
  font-size: 1.25rem;
  font-size: var(--cs-text-2xl, 1.25rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 1.25rem 0;
  margin: 0 0 var(--cs-space-5, 1.25rem) 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .abseil-systems-section {
    overflow: visible;
    max-height: none;
  }
}

@media (max-width: 480px) {
  .abseil-systems-section h1 {
    font-size: 1.125rem;
    font-size: var(--cs-text-xl, 1.125rem);
  }
}

.fire-safety-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.fire-safety-content {
  display: flex;
  flex: 1 1;
  padding: 0;
  gap: 0;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0;
}

.fire-safety-main {
  flex: 1 1;
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  border: 1px solid var(--cs-border-light, #f1f5f9);
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
}

/* Responsive Design */
@media (max-width: 768px) {
  .fire-safety-container {
    height: auto;
    overflow: visible;
  }

  .fire-safety-content {
    padding: 0;
    overflow: visible;
  }

  .fire-safety-main {
    padding: 16px;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    max-height: none;
  }
}

@media (max-width: 480px) {
  .fire-safety-content {
    padding: 12px;
    min-height: calc(100vh - 108px);
  }
}

.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  font-size: 1.2em;
  color: #666;
}

.error-message {
  color: #dc3545;
  text-align: center;
  padding: 20px;
  font-size: 1.2em;
}

/* Fire Safety Dashboard Styles - Matching Roof Safety Design */
.fire-dashboard-wrapper {
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Ensure the whole dashboard fits without scrolling */
  overflow: hidden;
  box-sizing: border-box;
}

.dashboard-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.dashboard-title {
  color: #0c437c !important;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.dashboard-actions {
  display: flex;
  gap: 16px;
}

.btn,
.btn-primary,
.btn-small {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.85em;
  transition: background 0.2s, color 0.2s;
}

.btn-primary,
.btn-small {
  background: #1574F6 !important;
  color: #fff !important;
  border: none !important;
}

.btn-primary:hover,
.btn-small:hover {
  background: #1264D9 !important;
  color: #fff !important;
}

.dashboard-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.dashboard-card {
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.dashboard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.dashboard-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  border-color: #e0e7ff;
}

.dashboard-card:hover::before {
  opacity: 1;
}

.dashboard-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  flex-shrink: 0;
}

.dashboard-card-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.dashboard-card-label {
  color: hsl(217, 91%, 60%) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  margin: 0 !important;
  width: 100% !important;
  line-height: 1.1 !important;
}

.dashboard-card-numbers {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  align-items: flex-start !important;
}

.dashboard-card-total {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
  text-align: left !important;
  align-self: flex-start !important;
}

.dashboard-card-failed {
  display: none;
}

/* Ensure no left border colors on dashboard cards */
.dashboard-card.good,
.dashboard-card.warning,
.dashboard-card.alert,
.dashboard-card {
  border-left: none !important;
}

.dashboard-bottom-panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 0;
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.dashboard-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.1);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  min-width: 0;
}

.dashboard-panel:hover {
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.2);
}

.panel-title {
  font-size: 0.95em;
  color: #0c437c !important;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title svg,
.panel-title .fa-icon {
  color: #0c437c !important;
}

.attention-list {
  list-style: none;
  padding: 0 0 12px 0;
  margin: 0;
}

.attention-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 1em;
  color: #d32f2f;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.attention-list li:last-child {
  border-bottom: none;
}

.attention-icon {
  color: #d32f2f;
  font-size: 1.2em;
}

.attention-label {
  color: #1F2937;
  font-weight: 500;
}

.attention-failed {
  color: #1F2937;
  font-weight: 600;
}

.no-issues {
  color: #10B981;
  font-weight: 500;
  text-align: left;
  font-size: 1em;
}

.next-inspection-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.next-inspection-date {
  color: #1F2937;
  font-size: 1em;
  margin-bottom: 8px;
}

/* Responsive styles */
@media (max-width: 1200px) {
  .dashboard-bottom-panels {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .dashboard-panel.activity-panel {
    grid-column: 1 / -1;
  }

  .dashboard-panel.activity-panel > div > div {
    background-color: #fff !important;
  }

  .dashboard-panel.activity-panel > div > div > div {
    background-color: #fff !important;
  }

  .dashboard-panel.activity-panel div {
    background-color: #fff !important;
  }
}

@media (max-width: 900px) {
  .fire-dashboard-wrapper .dashboard-bottom-panels {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .fire-dashboard-wrapper .dashboard-panel {
    min-width: 0;
    padding: 16px;
  }
  .fire-dashboard-wrapper .dashboard-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .fire-dashboard-wrapper .dashboard-header-row {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
  }
  .fire-dashboard-wrapper .dashboard-title {
    font-size: 1.5rem !important;
  }
  .fire-dashboard-wrapper .dashboard-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .fire-dashboard-wrapper .btn,
  .fire-dashboard-wrapper .btn-primary,
  .fire-dashboard-wrapper .btn-small {
    padding: 10px 16px;
    font-size: 0.875em;
  }
}

@media (max-width: 480px) {
  .fire-dashboard-wrapper .dashboard-cards-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .fire-dashboard-wrapper .dashboard-bottom-panels {
    grid-template-columns: 1fr;
  }
  .fire-dashboard-wrapper .dashboard-title {
    font-size: 1.3rem !important;
  }
}

@media (max-width: 600px) {
  .fire-dashboard-wrapper {
    padding: 8px;
  }
  .dashboard-panel {
    padding: 12px 8px;
  }
  .dashboard-card {
    padding: 12px 8px;
    min-width: 0;
  }
}

.dashboard-actions .btn,
.dashboard-actions .btn-primary,
.dashboard-actions .btn-small,
.next-inspection-panel .btn,
.next-inspection-panel .btn-primary,
.next-inspection-panel .btn-small {
  background: #1574F6 !important;
  color: #fff !important;
  border: none !important;
}

.dashboard-actions .btn:hover,
.dashboard-actions .btn-primary:hover,
.dashboard-actions .btn-small:hover,
.next-inspection-panel .btn:hover,
.next-inspection-panel .btn-primary:hover,
.next-inspection-panel .btn-small:hover {
  background: #1264D9 !important;
  color: #fff !important;
}

/* Make sure the old styles don't interfere */
.dashboard-section {
  width: 100%;
}

.status-card {
  display: none; /* Hide old cards */
}

.upcoming-tests {
  display: none; /* Hide old upcoming tests section */
}

/* Alerts Modal Styles */
.alerts-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(31, 41, 55, 0.35);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alerts-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(21,116,246,0.15);
  padding: 32px 28px 24px 28px;
  min-width: 340px;
  max-width: 95vw;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.alerts-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.7em;
  color: #1F2937;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
  transition: color 0.2s;
}
.close-btn:hover {
  color: #d32f2f;
}

.alerts-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.alert-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 1em;
  color: #d32f2f;
  font-weight: 500;
  transition: background 0.15s;
}

.alert-item:last-child {
  border-bottom: none;
}

.alert-item:hover {
  background: #fce8e6;
}

.alert-icon {
  color: #d32f2f;
  font-size: 1.2em;
}

.alert-label {
  color: #1F2937;
  font-weight: 500;
}

.alert-failed {
  color: #d32f2f;
  font-weight: 600;
}

.no-alerts {
  color: #10B981;
  font-weight: 500;
  text-align: left;
  font-size: 1em;
  padding: 12px 0;
}

/* Fire Alarms Component Styles */
.fire-alarms-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.header-content h1 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.header-content p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* Search and Filter Container */
.search-filter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.search-bar {
  position: relative;
  flex: 1 1;
  min-width: 250px;
}

.search-bar input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.search-bar input:focus {
  outline: none;
  border-color: #4a90e2;
}

.search-bar svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 14px;
}

.filter-actions {
  display: flex;
  gap: 8px;
}

.view-mode-btn {
  padding: 8px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.view-mode-btn.active {
  background: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover {
  background: #e9e9e9;
}

/* Filters Panel */
.filters-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #eee;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

.filter-group label {
  font-size: 12px;
  font-weight: 500;
  color: #666;
}

.filter-group select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  cursor: pointer;
}

/* Table View */
.table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow-x: auto;
  margin-bottom: 20px;
}

.alarms-table {
  width: 100%;
  border-collapse: collapse;
}

.alarms-table th {
  background: #f5f5f5;
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  border-bottom: 1px solid #eee;
}

.alarms-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #eee;
}

.alarms-table tr:last-child td {
  border-bottom: none;
}

.alarms-table tr:hover {
  background: #f9f9f9;
}

.actions-cell {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: #f5f5f5;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn:hover {
  background: #e9e9e9;
}

.action-btn.view:hover {
  color: #4a90e2;
}

.action-btn.edit:hover {
  color: #f5a623;
}

.action-btn.inspect:hover {
  color: #7ed321;
}

.action-btn.download:hover {
  color: #9013fe;
}

/* Card View */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

.alarm-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.status-icon {
  font-size: 16px;
}

.status-icon.active {
  color: #7ed321;
}

.status-icon.maintenance {
  color: #f5a623;
}

.status-icon.faulty {
  color: #d0021b;
}

.status-icon.unknown {
  color: #999;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.card-body {
  padding: 16px;
  flex: 1 1;
}

.card-info {
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  margin-bottom: 8px;
}

.info-label {
  font-weight: 500;
  color: #666;
  width: 100px;
  flex-shrink: 0;
}

.info-value {
  color: #333;
}

.card-dates {
  margin-bottom: 16px;
}

.date-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #666;
}

.card-status {
  margin-bottom: 16px;
}

.card-notes {
  background: #f9f9f9;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.card-notes p {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.card-footer {
  padding: 16px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background: rgba(126, 211, 33, 0.1);
  color: #7ed321;
}

.status-badge.maintenance {
  background: rgba(245, 166, 35, 0.1);
  color: #f5a623;
}

.status-badge.faulty {
  background: rgba(208, 2, 27, 0.1);
  color: #d0021b;
}

.status-badge.unknown {
  background: rgba(153, 153, 153, 0.1);
  color: #999;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-container {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  padding: 20px;
}

.inspection-info {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.inspection-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
}

.inspection-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4a90e2;
}

.input-with-icon {
  position: relative;
}

.input-with-icon svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 14px;
}

.input-with-icon input,
.input-with-icon select {
  padding-left: 36px;
}

.file-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-hint {
  font-size: 12px;
  color: #999;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* Buttons */
.btn {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-primary {
  background: #4a90e2;
  color: white;
  border: none;
}

.btn-primary:hover {
  background: #3a7bc8;
}

.btn-secondary {
  background: #f5f5f5;
  color: #555;
  border: 1px solid #ddd;
}

.btn-secondary:hover {
  background: #e9e9e9;
}

/* Loading and Error States */
.loading,
.error,
.no-results {
  padding: 40px;
  text-align: center;
  color: #666;
  font-size: 16px;
}

.error {
  color: #d0021b;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .header-actions {
    width: 100%;
  }
  
  .header-actions button {
    flex: 1 1;
  }
  
  .search-filter-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-bar {
    width: 100%;
  }
  
  .filter-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .filters-panel {
    flex-direction: column;
  }
  
  .filter-group {
    width: 100%;
  }
  
  .alarms-table {
    display: block;
    overflow-x: auto;
  }
  
  .card-container {
    grid-template-columns: 1fr;
  }
  
  .modal-container {
    width: 95%;
  }
}

@media (max-width: 480px) {
  .fire-alarms-container {
    padding: 12px;
  }

  .card-container {
    gap: 12px;
  }

  .modal-container {
    width: 100%;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    max-height: 85vh;
  }
}
/* Sprinklers Component Styles */
.sprinklers-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.header-content h1 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.header-content p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* Search and Filter Container */
.search-filter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.search-bar {
  position: relative;
  flex: 1 1;
  min-width: 250px;
}

.search-bar input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.search-bar input:focus {
  outline: none;
  border-color: #4a90e2;
}

.search-bar svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 14px;
}

.filter-actions {
  display: flex;
  gap: 8px;
}

.view-mode-btn {
  padding: 8px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.view-mode-btn.active {
  background: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover {
  background: #e9e9e9;
}

/* Filters Panel */
.filters-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #eee;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

.filter-group label {
  font-size: 12px;
  font-weight: 500;
  color: #666;
}

.filter-group select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  cursor: pointer;
}

/* Table View */
.table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 20px;
}

.sprinklers-table {
  width: 100%;
  border-collapse: collapse;
}

.sprinklers-table th {
  background: #f5f5f5;
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  border-bottom: 1px solid #eee;
}

.sprinklers-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #eee;
}

.sprinklers-table tr:last-child td {
  border-bottom: none;
}

.sprinklers-table tr:hover {
  background: #f9f9f9;
}

.type-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.type-icon {
  font-size: 16px;
}

.type-icon.wet {
  color: #4a90e2;
}

.type-icon.dry {
  color: #50e3c2;
}

.type-icon.pre-action {
  color: #9013fe;
}

.type-icon.deluge {
  color: #f5a623;
}

.type-icon.unknown {
  color: #999;
}

.actions-cell {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: #f5f5f5;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn:hover {
  background: #e9e9e9;
}

.action-btn.view:hover {
  color: #4a90e2;
}

.action-btn.edit:hover {
  color: #f5a623;
}

.action-btn.inspect:hover {
  color: #7ed321;
}

.action-btn.download:hover {
  color: #9013fe;
}

/* Card View */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

.sprinkler-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.status-icon {
  font-size: 16px;
}

.status-icon.operational {
  color: #7ed321;
}

.status-icon.maintenance {
  color: #f5a623;
}

.status-icon.offline {
  color: #d0021b;
}

.status-icon.unknown {
  color: #999;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.card-body {
  padding: 16px;
  flex: 1 1;
}

.card-info {
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  margin-bottom: 8px;
}

.info-label {
  font-weight: 500;
  color: #666;
  width: 100px;
  flex-shrink: 0;
}

.info-value {
  color: #333;
}

.card-dates {
  margin-bottom: 16px;
}

.date-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #666;
}

.card-status {
  margin-bottom: 16px;
}

.card-notes {
  background: #f9f9f9;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.card-notes p {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.card-footer {
  padding: 16px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.operational {
  background: rgba(126, 211, 33, 0.1);
  color: #7ed321;
}

.status-badge.maintenance {
  background: rgba(245, 166, 35, 0.1);
  color: #f5a623;
}

.status-badge.offline {
  background: rgba(208, 2, 27, 0.1);
  color: #d0021b;
}

.status-badge.unknown {
  background: rgba(153, 153, 153, 0.1);
  color: #999;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-container {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  padding: 20px;
}

.inspection-info {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.inspection-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
}

.inspection-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4a90e2;
}

.input-with-icon {
  position: relative;
}

.input-with-icon svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 14px;
}

.input-with-icon input,
.input-with-icon select {
  padding-left: 36px;
}

.file-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-hint {
  font-size: 12px;
  color: #999;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* Buttons */
.btn {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-primary {
  background: #4a90e2;
  color: white;
  border: none;
}

.btn-primary:hover {
  background: #3a7bc8;
}

.btn-secondary {
  background: #f5f5f5;
  color: #555;
  border: 1px solid #ddd;
}

.btn-secondary:hover {
  background: #e9e9e9;
}

/* Loading and Error States */
.loading,
.error,
.no-results {
  padding: 40px;
  text-align: center;
  color: #666;
  font-size: 16px;
}

.error {
  color: #d0021b;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .header-actions {
    width: 100%;
  }
  
  .header-actions button {
    flex: 1 1;
  }
  
  .search-filter-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-bar {
    width: 100%;
  }
  
  .filter-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .filters-panel {
    flex-direction: column;
  }
  
  .filter-group {
    width: 100%;
  }
  
  .sprinklers-table {
    display: block;
    overflow-x: auto;
  }
  
  .card-container {
    grid-template-columns: 1fr;
  }
  
  .modal-container {
    width: 95%;
  }
}

@media (max-width: 480px) {
  .sprinklers-container {
    padding: 12px;
  }

  .card-container {
    gap: 12px;
  }

  .modal-container {
    width: 100%;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    max-height: 85vh;
  }
}
/* Emergency Lights Component Styles */
.emergency-lights-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.header-content h1 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.header-content p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* Search and Filter Container */
.search-filter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.search-bar {
  position: relative;
  flex: 1 1;
  min-width: 250px;
}

.search-bar input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.search-bar input:focus {
  outline: none;
  border-color: #4a90e2;
}

.search-bar svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 14px;
}

.filter-actions {
  display: flex;
  gap: 8px;
}

.view-mode-btn {
  padding: 8px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.view-mode-btn.active {
  background: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover {
  background: #e9e9e9;
}

/* Filters Panel */
.filters-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #eee;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

.filter-group label {
  font-size: 12px;
  font-weight: 500;
  color: #666;
}

.filter-group select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  cursor: pointer;
}

/* Table View */
.table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 20px;
}

.fixtures-table {
  width: 100%;
  border-collapse: collapse;
}

.fixtures-table th {
  background: #f5f5f5;
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  border-bottom: 1px solid #eee;
}

.fixtures-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #eee;
}

.fixtures-table tr:last-child td {
  border-bottom: none;
}

.fixtures-table tr:hover {
  background: #f9f9f9;
}

.fixtures-table tr.overdue {
  border-left: 3px solid #d0021b;
}

.type-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.type-icon {
  font-size: 16px;
}

.type-icon.exit-sign {
  color: #4a90e2;
}

.type-icon.bulkhead {
  color: #50e3c2;
}

.type-icon.downlight {
  color: #9013fe;
}

.type-icon.twinspot {
  color: #f5a623;
}

.type-icon.unknown {
  color: #999;
}

.date-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.overdue-badge {
  display: inline-block;
  background: rgba(208, 2, 27, 0.1);
  color: #d0021b;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.actions-cell {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: #f5f5f5;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn:hover {
  background: #e9e9e9;
}

.action-btn.view:hover {
  color: #4a90e2;
}

.action-btn.edit:hover {
  color: #f5a623;
}

.action-btn.test:hover {
  color: #7ed321;
}

.action-btn.download:hover {
  color: #9013fe;
}

/* Card View */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

.fixture-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-left: 3px solid transparent;
}

.fixture-card.overdue {
  border-left: 3px solid #d0021b;
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.status-icon {
  font-size: 16px;
}

.status-icon.working {
  color: #7ed321;
}

.status-icon.needs-testing {
  color: #f5a623;
}

.status-icon.failed {
  color: #d0021b;
}

.status-icon.unknown {
  color: #999;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.card-body {
  padding: 16px;
  flex: 1 1;
}

.card-info {
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  margin-bottom: 8px;
}

.info-label {
  font-weight: 500;
  color: #666;
  width: 100px;
  flex-shrink: 0;
}

.info-value {
  color: #333;
}

.card-dates {
  margin-bottom: 16px;
}

.date-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #666;
}

.card-status {
  margin-bottom: 16px;
}

.card-notes {
  background: #f9f9f9;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.card-notes p {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.card-footer {
  padding: 16px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.working {
  background: rgba(126, 211, 33, 0.1);
  color: #7ed321;
}

.status-badge.needs-testing {
  background: rgba(245, 166, 35, 0.1);
  color: #f5a623;
}

.status-badge.failed {
  background: rgba(208, 2, 27, 0.1);
  color: #d0021b;
}

.status-badge.unknown {
  background: rgba(153, 153, 153, 0.1);
  color: #999;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-container {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  padding: 20px;
}

.test-info {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.test-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
}

.test-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4a90e2;
}

.input-with-icon {
  position: relative;
}

.input-with-icon svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 14px;
}

.input-with-icon input,
.input-with-icon select {
  padding-left: 36px;
}

.file-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-hint {
  font-size: 12px;
  color: #999;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* Buttons */
.btn {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-primary {
  background: #4a90e2;
  color: white;
  border: none;
}

.btn-primary:hover {
  background: #3a7bc8;
}

.btn-secondary {
  background: #f5f5f5;
  color: #555;
  border: 1px solid #ddd;
}

.btn-secondary:hover {
  background: #e9e9e9;
}

/* Loading and Error States */
.loading,
.error,
.no-results {
  padding: 40px;
  text-align: center;
  color: #666;
  font-size: 16px;
}

.error {
  color: #d0021b;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .header-actions {
    width: 100%;
  }
  
  .header-actions button {
    flex: 1 1;
  }
  
  .search-filter-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-bar {
    width: 100%;
  }
  
  .filter-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .filters-panel {
    flex-direction: column;
  }
  
  .filter-group {
    width: 100%;
  }
  
  .fixtures-table {
    display: block;
    overflow-x: auto;
  }
  
  .card-container {
    grid-template-columns: 1fr;
  }
  
  .modal-container {
    width: 95%;
  }
}

@media (max-width: 480px) {
  .emergency-lights-container {
    padding: 12px;
  }

  .card-container {
    gap: 12px;
  }

  .modal-container {
    width: 100%;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    max-height: 85vh;
  }
}
/* Fire Doors Page Styles */
.fire-doors-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 20px;
  background-color: #f8f9fa;
}

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-content h1 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.header-content p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* Search and Filter Container */
.search-filter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 8px 12px;
  width: 300px;
}

.search-bar svg {
  color: #999;
  margin-right: 8px;
}

.search-bar input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
}

.filter-actions {
  display: flex;
  gap: 8px;
}

.view-mode-btn {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-mode-btn.active {
  background-color: #e6f2ff;
  border-color: #1890ff;
  color: #1890ff;
}

.filter-btn {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Filters Panel */
.filters-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  background-color: white;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-group label {
  font-size: 12px;
  color: #666;
}

.filter-group select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-width: 150px;
}

/* Table View */
.table-container {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: auto;
  margin-bottom: 20px;
}

.doors-table {
  width: 100%;
  border-collapse: collapse;
}

.doors-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

.doors-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #eee;
}

.doors-table tr:hover {
  background-color: #f8f9fa;
}

.doors-table tr.overdue {
  background-color: #fff2f0;
}

.type-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.type-icon {
  font-size: 16px;
}

.type-icon.single {
  color: #1890ff;
}

.type-icon.double {
  color: #722ed1;
}

.type-icon.glazed {
  color: #13c2c2;
}

.type-icon.steel {
  color: #fa8c16;
}

.type-icon.timber {
  color: #52c41a;
}

.date-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.overdue-badge {
  font-size: 12px;
  color: #f5222d;
  font-weight: 500;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.compliant {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-badge.needs-repair {
  background-color: #fffbe6;
  color: #faad14;
  border: 1px solid #ffe58f;
}

.status-badge.failed {
  background-color: #fff2f0;
  color: #f5222d;
  border: 1px solid #ffccc7;
}

.status-badge.unknown {
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #d9d9d9;
}

.actions-cell {
  display: flex;
  gap: 8px;
}

.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: all 0.2s;
}

.action-btn:hover {
  background-color: #f0f0f0;
  color: #1890ff;
}

.action-btn.view:hover {
  color: #1890ff;
}

.action-btn.edit:hover {
  color: #52c41a;
}

.action-btn.inspect:hover {
  color: #722ed1;
}

.action-btn.download:hover {
  color: #fa8c16;
}

.no-results {
  text-align: center;
  padding: 24px;
  color: #999;
  font-size: 14px;
}

/* Card View */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

.door-card {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s;
}

.door-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.door-card.overdue {
  border-left: 4px solid #f5222d;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.status-icon {
  font-size: 16px;
}

.status-icon.compliant {
  color: #52c41a;
}

.status-icon.needs-repair {
  color: #faad14;
}

.status-icon.failed {
  color: #f5222d;
}

.status-icon.unknown {
  color: #999;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.card-body {
  padding: 16px;
}

.card-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 12px;
  color: #666;
}

.info-value {
  font-size: 14px;
  color: #333;
}

.card-dates {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.date-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

.card-status {
  margin-bottom: 16px;
}

.card-notes {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
}

.card-sticker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

.card-footer {
  padding: 16px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  border-radius: 4px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #999;
}

.modal-body {
  padding: 16px;
}

.inspection-info {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.inspection-info h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.inspection-info p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon svg {
  position: absolute;
  left: 12px;
  color: #999;
}

.input-with-icon input,
.input-with-icon select {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-group input {
  margin: 0;
}

.checkbox-group label {
  margin: 0;
}

.file-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-hint {
  font-size: 12px;
  color: #999;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* Buttons */
.btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-primary {
  background-color: #1890ff;
  color: white;
  border: none;
}

.btn-primary:hover {
  background-color: #40a9ff;
}

.btn-secondary {
  background-color: white;
  color: #333;
  border: 1px solid #ddd;
}

.btn-secondary:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
}

/* Loading and Error States */
.loading, .error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-size: 16px;
  color: #666;
}

.error {
  color: #f5222d;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .search-filter-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-bar {
    width: 100%;
  }
  
  .filter-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .card-container {
    grid-template-columns: 1fr;
  }
  
  .card-info {
    grid-template-columns: 1fr;
  }
  
  .modal-container {
    width: 95%;
  }
}

@media (max-width: 480px) {
  .fire-doors-container {
    padding: 12px;
  }

  .card-container {
    gap: 12px;
  }

  .modal-container {
    width: 100%;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    max-height: 85vh;
  }
}
/* Fire Extinguishers Page Styles */
.fire-extinguishers-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 20px;
  background-color: #f8f9fa;
}

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-content h1 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.header-content p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* Search and Filter Container */
.search-filter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 8px 12px;
  width: 300px;
}

.search-bar svg {
  color: #999;
  margin-right: 8px;
}

.search-bar input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
}

.filter-actions {
  display: flex;
  gap: 8px;
}

.view-mode-btn {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-mode-btn.active {
  background-color: #e6f2ff;
  border-color: #1890ff;
  color: #1890ff;
}

.filter-btn {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Filters Panel */
.filters-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  background-color: white;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-group label {
  font-size: 12px;
  color: #666;
}

.filter-group select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-width: 150px;
}

/* Table View */
.table-container {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: auto;
  margin-bottom: 20px;
}

.extinguishers-table {
  width: 100%;
  border-collapse: collapse;
}

.extinguishers-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

.extinguishers-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #eee;
}

.extinguishers-table tr:hover {
  background-color: #f8f9fa;
}

.extinguishers-table tr.overdue {
  background-color: #fff2f0;
}

.type-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.type-icon {
  font-size: 16px;
}

.type-icon.water {
  color: #1890ff;
}

.type-icon.co2 {
  color: #722ed1;
}

.type-icon.foam {
  color: #13c2c2;
}

.type-icon.powder {
  color: #fa8c16;
}

.type-icon.wet-chemical {
  color: #52c41a;
}

.date-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.overdue-badge {
  font-size: 12px;
  color: #f5222d;
  font-weight: 500;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.in-date {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-badge.needs-service {
  background-color: #fffbe6;
  color: #faad14;
  border: 1px solid #ffe58f;
}

.status-badge.expired {
  background-color: #fff2f0;
  color: #f5222d;
  border: 1px solid #ffccc7;
}

.status-badge.unknown {
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #d9d9d9;
}

.actions-cell {
  display: flex;
  gap: 8px;
}

.action-btn {
  background-color: transparent;
  border: none;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.action-btn:hover {
  background-color: #f5f5f5;
}

.action-btn.view:hover {
  color: #1890ff;
}

.action-btn.edit:hover {
  color: #722ed1;
}

.action-btn.inspect:hover {
  color: #13c2c2;
}

.action-btn.download:hover {
  color: #52c41a;
}

.no-results {
  text-align: center;
  padding: 24px;
  color: #999;
  font-size: 14px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Card View */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

.extinguisher-card {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.2s;
}

.extinguisher-card:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.extinguisher-card.overdue {
  border-left: 3px solid #f5222d;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.status-icon {
  font-size: 16px;
}

.status-icon.in-date {
  color: #52c41a;
}

.status-icon.needs-service {
  color: #faad14;
}

.status-icon.expired {
  color: #f5222d;
}

.status-icon.unknown {
  color: #999;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.card-body {
  padding: 16px;
}

.card-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 12px;
  color: #666;
}

.info-value {
  font-size: 14px;
  color: #333;
}

.card-dates {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.date-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
}

.card-status {
  margin-bottom: 16px;
}

.card-notes {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

.card-certificate {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  margin-bottom: 16px;
}

.card-footer {
  padding: 16px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  border-radius: 4px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.close-btn {
  background-color: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
}

.modal-body {
  padding: 16px;
}

.service-info {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.service-info h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.service-info p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
}

.input-with-icon {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.input-with-icon svg {
  padding: 8px 12px;
  color: #999;
  background-color: #f8f9fa;
  border-right: 1px solid #ddd;
}

.input-with-icon input,
.input-with-icon select {
  flex: 1 1;
  border: none;
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
}

.form-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-group input {
  margin: 0;
}

.checkbox-group label {
  margin: 0;
}

.file-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-hint {
  font-size: 12px;
  color: #999;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background-color: #1890ff;
  color: white;
  border: none;
}

.btn-primary:hover {
  background-color: #40a9ff;
}

.btn-secondary {
  background-color: white;
  color: #333;
  border: 1px solid #ddd;
}

.btn-secondary:hover {
  background-color: #f5f5f5;
}

/* Loading and Error States */
.loading, .error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-size: 16px;
  color: #666;
}

.error {
  color: #f5222d;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .search-filter-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-bar {
    width: 100%;
  }
  
  .filter-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .card-container {
    grid-template-columns: 1fr;
  }
  
  .card-info {
    grid-template-columns: 1fr;
  }

  .modal-container {
    width: 95%;
  }
}

@media (max-width: 480px) {
  .fire-extinguishers-container {
    padding: 12px;
  }

  .modal-container {
    width: 100%;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    max-height: 85vh;
  }
}
/* Smoke Detectors Page Styles */
.smoke-detectors-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 20px;
  background-color: #f8f9fa;
}

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-content h1 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.header-content p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* Search and Filter Container */
.search-filter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 8px 12px;
  width: 300px;
}

.search-bar svg {
  color: #999;
  margin-right: 8px;
}

.search-bar input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
}

.filter-actions {
  display: flex;
  gap: 8px;
}

.view-mode-btn {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-mode-btn.active {
  background-color: #e6f2ff;
  border-color: #1890ff;
  color: #1890ff;
}

.filter-btn {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Filters Panel */
.filters-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  background-color: white;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-group label {
  font-size: 12px;
  color: #666;
}

.filter-group select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-width: 150px;
}

/* Table View */
.table-container {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: auto;
  margin-bottom: 20px;
}

.detectors-table {
  width: 100%;
  border-collapse: collapse;
}

.detectors-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

.detectors-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #eee;
}

.detectors-table tr:hover {
  background-color: #f8f9fa;
}

.detectors-table tr.overdue {
  background-color: #fff2f0;
}

.type-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.type-icon {
  font-size: 16px;
}

.type-icon.ionisation {
  color: #1890ff;
}

.type-icon.optical {
  color: #722ed1;
}

.type-icon.heat {
  color: #fa8c16;
}

.type-icon.co {
  color: #13c2c2;
}

.type-icon.combined {
  color: #52c41a;
}

.date-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.overdue-badge {
  font-size: 12px;
  color: #f5222d;
  font-weight: 500;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.operational {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-badge.needs-testing {
  background-color: #fffbe6;
  color: #faad14;
  border: 1px solid #ffe58f;
}

.status-badge.faulty {
  background-color: #fff2f0;
  color: #f5222d;
  border: 1px solid #ffccc7;
}

.status-badge.unknown {
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #d9d9d9;
}

.actions-cell {
  display: flex;
  gap: 8px;
}

.action-btn {
  background-color: transparent;
  border: none;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.action-btn:hover {
  background-color: #f5f5f5;
}

.action-btn.view:hover {
  color: #1890ff;
}

.action-btn.edit:hover {
  color: #722ed1;
}

.action-btn.inspect:hover {
  color: #13c2c2;
}

.action-btn.repair:hover {
  color: #fa8c16;
}

.no-results {
  text-align: center;
  padding: 24px;
  color: #999;
  font-size: 14px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Card View */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

.detector-card {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.2s;
}

.detector-card:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.detector-card.overdue {
  border-left: 3px solid #f5222d;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.status-icon {
  font-size: 16px;
}

.status-icon.operational {
  color: #52c41a;
}

.status-icon.needs-testing {
  color: #faad14;
}

.status-icon.faulty {
  color: #f5222d;
}

.status-icon.unknown {
  color: #999;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.card-body {
  padding: 16px;
}

.card-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 12px;
  color: #666;
}

.info-value {
  font-size: 14px;
  color: #333;
}

.card-dates {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.date-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
}

.card-status {
  margin-bottom: 16px;
}

.card-notes {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

.card-certificate {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  margin-bottom: 16px;
}

.card-footer {
  padding: 16px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  border-radius: 4px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.close-btn {
  background-color: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
}

.modal-body {
  padding: 16px;
}

.test-info {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.test-info h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.test-info p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
}

.input-with-icon {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.input-with-icon svg {
  padding: 8px 12px;
  color: #999;
  background-color: #f8f9fa;
  border-right: 1px solid #ddd;
}

.input-with-icon input,
.input-with-icon select {
  flex: 1 1;
  border: none;
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
}

.form-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
}

.file-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-hint {
  font-size: 12px;
  color: #999;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background-color: #1890ff;
  color: white;
  border: none;
}

.btn-primary:hover {
  background-color: #40a9ff;
}

.btn-secondary {
  background-color: white;
  color: #333;
  border: 1px solid #ddd;
}

.btn-secondary:hover {
  background-color: #f5f5f5;
}

/* Loading and Error States */
.loading, .error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-size: 16px;
  color: #666;
}

.error {
  color: #f5222d;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .search-filter-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-bar {
    width: 100%;
  }
  
  .filter-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .card-container {
    grid-template-columns: 1fr;
  }
  
  .card-info {
    grid-template-columns: 1fr;
  }

  .modal-container {
    width: 95%;
  }
}

@media (max-width: 480px) {
  .smoke-detectors-container {
    padding: 12px;
  }

  .modal-container {
    width: 100%;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    max-height: 85vh;
  }
}
.heat-detectors-container {
  padding: 2rem;
  background-color: #f8f9fa;
  min-height: 100vh;
}

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.header-content h1 {
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.header-content p {
  color: #6c757d;
  font-size: 1rem;
  max-width: 600px;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

/* Search and Filter Container */
.search-filter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: white;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  flex: 1 1;
  max-width: 500px;
}

.search-bar input {
  border: none;
  outline: none;
  margin-left: 0.5rem;
  width: 100%;
  font-size: 1rem;
}

.filter-actions {
  display: flex;
  gap: 0.5rem;
}

.view-mode-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #dee2e6;
  background-color: white;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.view-mode-btn.active {
  background-color: #20c997;
  color: white;
  border-color: #20c997;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid #dee2e6;
  background-color: white;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover {
  background-color: #f8f9fa;
}

/* Filters Panel */
.filters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  background-color: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-group label {
  font-size: 0.875rem;
  color: #6c757d;
}

.filter-group select {
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background-color: white;
  font-size: 0.875rem;
}

/* Table View */
.table-container {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow-x: auto;
}

.detectors-table {
  width: 100%;
  border-collapse: collapse;
}

.detectors-table th {
  background-color: #f8f9fa;
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: #495057;
  border-bottom: 2px solid #dee2e6;
}

.detectors-table td {
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  color: #495057;
}

.detectors-table tr:hover {
  background-color: #f8f9fa;
}

.detectors-table tr.overdue {
  background-color: #fff3cd;
}

.type-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.type-icon {
  font-size: 1.25rem;
}

.type-icon.fixed-temp {
  color: #20c997;
}

.type-icon.rate-rise {
  color: #fd7e14;
}

.type-icon.combined {
  color: #6f42c1;
}

.type-icon.unknown {
  color: #6c757d;
}

.date-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.overdue-badge {
  font-size: 0.75rem;
  color: #dc3545;
  font-weight: 500;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-badge.operational {
  background-color: #d4edda;
  color: #155724;
}

.status-badge.needs-testing {
  background-color: #fff3cd;
  color: #856404;
}

.status-badge.faulty {
  background-color: #f8d7da;
  color: #721c24;
}

.status-badge.unknown {
  background-color: #e2e3e5;
  color: #383d41;
}

.actions-cell {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  padding: 0.5rem;
  border: none;
  background: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s;
  color: #6c757d;
}

.action-btn:hover {
  background-color: #f8f9fa;
  color: #20c997;
}

.action-btn.view:hover {
  color: #0dcaf0;
}

.action-btn.edit:hover {
  color: #ffc107;
}

.action-btn.inspect:hover {
  color: #20c997;
}

.action-btn.repair:hover {
  color: #dc3545;
}

/* Card View */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  padding: 0.5rem;
}

.detector-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.2s;
}

.detector-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.detector-card.overdue {
  border-left: 4px solid #dc3545;
}

.card-header {
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-title h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #2c3e50;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
}

.card-body {
  padding: 1rem;
}

.card-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.info-label {
  font-size: 0.875rem;
  color: #6c757d;
}

.info-value {
  font-weight: 500;
  color: #2c3e50;
}

.card-dates {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: #f8f9fa;
  border-radius: 0.375rem;
}

.date-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #495057;
}

.card-status {
  margin-bottom: 1rem;
}

.card-notes {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: #f8f9fa;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: #495057;
}

.card-certificate {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #6c757d;
}

.card-footer {
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  display: flex;
  justify-content: flex-end;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  border-radius: 0.5rem;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #2c3e50;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #6c757d;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.2s;
}

.close-btn:hover {
  background-color: #f8f9fa;
  color: #dc3545;
}

.modal-body {
  padding: 1.5rem;
}

.test-info {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dee2e6;
}

.test-info h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  color: #2c3e50;
}

.test-info p {
  margin: 0;
  color: #6c757d;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #495057;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon input,
.input-with-icon select {
  width: 100%;
  padding: 0.5rem 0.5rem 0.5rem 2rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.input-with-icon svg {
  position: absolute;
  left: 0.75rem;
  color: #6c757d;
}

textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  resize: vertical;
}

.file-upload {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.file-hint {
  font-size: 0.875rem;
  color: #6c757d;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background-color: #20c997;
  color: white;
  border: none;
}

.btn-primary:hover {
  background-color: #1ba97f;
}

.btn-secondary {
  background-color: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
}

.btn-secondary:hover {
  background-color: #e9ecef;
}

/* Loading and Error States */
.loading,
.error {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  font-size: 1.125rem;
  color: #6c757d;
}

.error {
  color: #dc3545;
}

/* Responsive Design */
@media (max-width: 768px) {
  .heat-detectors-container {
    padding: 1rem;
  }

  .page-header {
    flex-direction: column;
    gap: 1rem;
  }

  .header-actions {
    width: 100%;
  }

  .header-actions button {
    width: 100%;
  }

  .search-filter-container {
    flex-direction: column;
  }

  .search-bar {
    max-width: none;
  }

  .filter-actions {
    width: 100%;
    justify-content: space-between;
  }

  .filters-panel {
    grid-template-columns: 1fr;
  }

  .card-info {
    grid-template-columns: 1fr;
  }

  .detectors-table {
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .heat-detectors-container {
    padding: 12px;
  }

  .card-container {
    gap: 12px;
  }

  .card-info {
    grid-template-columns: 1fr;
  }

  .modal-container {
    width: 100%;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    max-height: 85vh;
  }
}
/* Staff Safety Dashboard Styles - mirror Roof Safety dashboard visuals */
.staff-dashboard-wrapper {
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.dashboard-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* Increase specificity to ensure overrides match Equipment Safety layout */
.staff-dashboard-wrapper .dashboard-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.dashboard-title {
  color: #0c437c !important;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.dashboard-actions {
  display: flex;
  gap: 10px;
}

.btn,
.btn-primary,
.btn-small {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.85em;
  transition: background 0.2s, color 0.2s;
}

.btn-primary,
.btn-small {
  background: #1574F6 !important;
  color: #fff !important;
  border: none !important;
}

.btn-primary:hover,
.btn-small:hover {
  background: #1264D9 !important;
  color: #fff !important;
}

.dashboard-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.staff-dashboard-wrapper .dashboard-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.dashboard-card {
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.staff-dashboard-wrapper .dashboard-card {
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.dashboard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.dashboard-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  border-color: #e0e7ff;
}

.dashboard-card:hover::before {
  opacity: 1;
}

.dashboard-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  flex-shrink: 0;
}

.dashboard-card-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.dashboard-card-label {
  color: hsl(217, 91%, 60%) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  margin: 0 !important;
  width: 100% !important;
  line-height: 1.1 !important;
}

.dashboard-card-numbers {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  align-items: flex-start !important;
}

.dashboard-card-total {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
  text-align: left !important;
  align-self: flex-start !important;
}

.dashboard-card-failed { display: none; }

.dashboard-bottom-panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 0;
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

.staff-dashboard-wrapper .dashboard-bottom-panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 0;
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

.dashboard-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.1);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  min-width: 0;
  box-sizing: border-box;
}

.staff-dashboard-wrapper .dashboard-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.1);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  min-width: 0;
  box-sizing: border-box;
}

.dashboard-panel:hover {
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.2);
}

.panel-title {
  font-size: 0.95em;
  color: #0c437c !important;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title svg,
.panel-title .fa-icon { color: #0c437c !important; }

.attention-list {
  list-style: none;
  padding: 0 0 12px 0;
  margin: 0;
}

.attention-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 1em;
  color: #d32f2f;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.attention-list li:last-child { border-bottom: none; }

.attention-icon { color: #d32f2f; font-size: 1.2em; }
.attention-label { color: #1F2937; font-weight: 500; }
.attention-failed { color: #1F2937; font-weight: 600; }

.no-issues {
  color: #10B981;
  font-weight: 500;
  text-align: left;
  font-size: 1em;
}

.next-inspection-details { display: flex; flex-direction: column; gap: 12px; }
.next-inspection-date { color: #1F2937; font-size: 1em; margin-bottom: 8px; }

/* Responsive styles */
@media (max-width: 1200px) {
  .dashboard-bottom-panels { grid-template-columns: 1fr 1fr; gap: 16px; }
  .dashboard-panel.activity-panel { grid-column: 1 / -1; }
  .dashboard-panel.activity-panel > div > div,
  .dashboard-panel.activity-panel > div > div > div,
  .dashboard-panel.activity-panel div { background-color: #fff !important; }
}

@media (max-width: 900px) {
  .staff-dashboard-wrapper .dashboard-bottom-panels { grid-template-columns: 1fr 1fr; gap: 16px; }
  .staff-dashboard-wrapper .dashboard-panel { min-width: 0; padding: 16px; }
  .staff-dashboard-wrapper .dashboard-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .staff-dashboard-wrapper .dashboard-header-row { flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
  .staff-dashboard-wrapper .dashboard-title { font-size: 1.5rem !important; }
  .staff-dashboard-wrapper .dashboard-actions { flex-wrap: wrap; gap: 8px; }
  .staff-dashboard-wrapper .btn,
  .staff-dashboard-wrapper .btn-primary,
  .staff-dashboard-wrapper .btn-small { padding: 10px 16px; font-size: 0.875em; }
}

@media (max-width: 600px) {
  .staff-dashboard-wrapper { padding: 8px; }
  .staff-dashboard-wrapper .dashboard-panel { padding: 12px; }
  .staff-dashboard-wrapper .dashboard-card { padding: 12px; min-width: 0; }
}

@media (max-width: 480px) {
  .staff-dashboard-wrapper .dashboard-cards-grid { grid-template-columns: 1fr; gap: 10px; }
  .staff-dashboard-wrapper .dashboard-bottom-panels { grid-template-columns: 1fr; }
  .staff-dashboard-wrapper .dashboard-title { font-size: 1.3rem !important; }
}

.dashboard-actions .btn,
.dashboard-actions .btn-primary,
.dashboard-actions .btn-small,
.next-inspection-panel .btn,
.next-inspection-panel .btn-primary,
.next-inspection-panel .btn-small {
  background: #1574F6 !important;
  color: #fff !important;
  border: none !important;
}

.dashboard-actions .btn:hover,
.dashboard-actions .btn-primary:hover,
.dashboard-actions .btn-small:hover,
.next-inspection-panel .btn:hover,
.next-inspection-panel .btn-primary:hover,
.next-inspection-panel .btn-small:hover {
  background: #1264D9 !important;
  color: #fff !important;
}

/* Loading and Error States */
.loading { display: flex; justify-content: center; align-items: center; min-height: 200px; color: #495057; font-size: 1.1em; }
.error { display: flex; justify-content: center; align-items: center; min-height: 200px; color: #e03131; font-size: 1.1em; text-align: center; padding: 20px; }
.training-records {
    padding: 20px;
}

.training-records-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.training-records-header h2 {
    margin: 0;
    color: #212529;
    font-size: 1.8em;
    font-weight: 600;
}

.add-button {
    background-color: #228be6;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.9em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.add-button:hover {
    background-color: #1c7ed6;
}

.training-records-filters {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.search-container {
    position: relative;
    flex: 1 1;
    max-width: 500px;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #868e96;
}

.search-input {
    width: 100%;
    padding: 10px 10px 10px 35px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9em;
}

.filter-button {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.9em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    transition: background-color 0.2s ease;
}

.filter-button:hover {
    background-color: #e9ecef;
}

.filters-panel {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-size: 0.8em;
    color: #495057;
    font-weight: 500;
}

.filter-group select {
    padding: 8px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9em;
    min-width: 150px;
}

.training-records-table-container {
    overflow-x: auto;
}

.training-records-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.training-records-table th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
    text-align: left;
    padding: 12px 15px;
    border-bottom: 2px solid #dee2e6;
}

.training-records-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #dee2e6;
    color: #212529;
}

.training-records-table tr:hover {
    background-color: #f8f9fa;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 500;
}

.status-badge.completed {
    background-color: #d3f9d8;
    color: #2b8a3e;
}

.status-badge.in-progress {
    background-color: #fff3bf;
    color: #e67700;
}

.status-badge.expired {
    background-color: #ffe3e3;
    color: #c92a2a;
}

.actions {
    display: flex;
    gap: 8px;
}

.action-button {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.action-button.edit {
    background-color: #e7f5ff;
    color: #228be6;
}

.action-button.edit:hover {
    background-color: #d0ebff;
}

.action-button.delete {
    background-color: #ffe3e3;
    color: #e03131;
}

.action-button.delete:hover {
    background-color: #ffc9c9;
}

.action-button.download {
    background-color: #f8f9fa;
    color: #495057;
}

.action-button.download:hover {
    background-color: #e9ecef;
}

.no-records {
    text-align: center;
    color: #868e96;
    padding: 30px !important;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal {
    background-color: white;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #dee2e6;
}

.modal-header h3 {
    margin: 0;
    color: #212529;
    font-size: 1.3em;
}

.close-button {
    background: none;
    border: none;
    font-size: 1.5em;
    color: #868e96;
    cursor: pointer;
}

.modal form {
    padding: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.form-row .form-group {
    flex: 1 1;
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #495057;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9em;
}

.form-group textarea {
    resize: vertical;
}

.current-file {
    margin-top: 5px;
    font-size: 0.8em;
    color: #868e96;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.cancel-button {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 15px;
    font-size: 0.9em;
    cursor: pointer;
}

.submit-button {
    background-color: #228be6;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    font-size: 0.9em;
    cursor: pointer;
}

.submit-button:hover {
    background-color: #1c7ed6;
}

/* Loading and Error States */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    color: #495057;
    font-size: 1.1em;
}

.error {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    color: #e03131;
    font-size: 1.1em;
    text-align: center;
    padding: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .training-records-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .training-records-filters {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-container {
        max-width: 100%;
    }
    
    .filter-button {
        margin-left: 0;
    }
    
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .training-records {
        padding: 12px;
    }

    .training-records-header h2 {
        font-size: 1.4em;
    }

    .add-button {
        width: 100%;
        justify-content: center;
    }

    .training-records-table {
        font-size: 0.75em;
        min-width: 520px;
    }

    .modal {
        width: 100%;
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        max-height: 85vh;
    }
}
.inductions {
    padding: 20px;
    background-color: #f8f9fa;
    min-height: 100vh;
}

.inductions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.inductions-header h2 {
    margin: 0;
    color: #2c3e50;
    font-size: 24px;
}

.add-button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: background-color 0.2s;
}

.add-button:hover {
    background-color: #2980b9;
}

.inductions-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.search-container {
    position: relative;
    flex: 1 1;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #95a5a6;
}

.search-input {
    width: 100%;
    padding: 10px 35px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

.search-input:focus {
    outline: none;
    border-color: #3498db;
}

.filter-button {
    background-color: white;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #2c3e50;
    transition: all 0.2s;
}

.filter-button:hover {
    background-color: #f8f9fa;
    border-color: #3498db;
}

.filters-panel {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group label {
    font-size: 14px;
    color: #2c3e50;
    font-weight: 500;
}

.filter-group select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #2c3e50;
}

.filter-group select:focus {
    outline: none;
    border-color: #3498db;
}

.inductions-table-container {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

.inductions-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.inductions-table th {
    background-color: #f8f9fa;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 2px solid #ddd;
}

.inductions-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
    color: #2c3e50;
}

.inductions-table tr:hover {
    background-color: #f8f9fa;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.completed {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.status-badge.in-progress {
    background-color: #fff3e0;
    color: #ef6c00;
}

.status-badge.expired {
    background-color: #ffebee;
    color: #c62828;
}

.actions {
    display: flex;
    gap: 8px;
}

.action-button {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.action-button:hover {
    background-color: #f8f9fa;
}

.action-button.edit {
    color: #3498db;
}

.action-button.delete {
    color: #e74c3c;
}

.action-button.download {
    color: #2ecc71;
}

.no-records {
    text-align: center;
    color: #95a5a6;
    padding: 20px;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal {
    background-color: white;
    border-radius: 5px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #ddd;
}

.modal-header h3 {
    margin: 0;
    color: #2c3e50;
}

.close-button {
    background: none;
    border: none;
    font-size: 24px;
    color: #95a5a6;
    cursor: pointer;
    padding: 0;
}

.close-button:hover {
    color: #2c3e50;
}

.modal form {
    padding: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    gap: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #2c3e50;
    font-weight: 500;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #2c3e50;
}

.form-group input[type="file"] {
    width: 100%;
    padding: 8px 0;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3498db;
}

.current-file {
    margin-top: 8px;
    font-size: 14px;
    color: #7f8c8d;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.cancel-button {
    background-color: #95a5a6;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.cancel-button:hover {
    background-color: #7f8c8d;
}

.submit-button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.submit-button:hover {
    background-color: #2980b9;
}

/* Loading and Error States */
.loading {
    text-align: center;
    padding: 40px;
    color: #7f8c8d;
}

.error {
    text-align: center;
    padding: 40px;
    color: #e74c3c;
}

/* Responsive Design */
@media (max-width: 768px) {
    .inductions-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .inductions-filters {
        flex-direction: column;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .modal {
        width: 95%;
        margin: 10px;
    }
}

@media (max-width: 480px) {
    .inductions {
        padding: 12px;
    }

    .inductions-header h2 {
        font-size: 1.2em;
    }

    .add-button {
        width: 100%;
        justify-content: center;
    }

    .inductions-table {
        min-width: 600px;
    }

    .modal {
        width: 100%;
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        margin: 0;
        max-height: 85vh;
    }
}
.incident-reports {
    padding: 20px;
}

.incident-reports-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.incident-reports-header h2 {
    margin: 0;
    color: #212529;
    font-size: 1.8em;
    font-weight: 600;
}

.add-button {
    background-color: #228be6;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.9em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.add-button:hover {
    background-color: #1c7ed6;
}

.incident-reports-filters {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.search-container {
    position: relative;
    flex: 1 1;
    max-width: 500px;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #868e96;
}

.search-input {
    width: 100%;
    padding: 10px 10px 10px 35px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9em;
}

.filter-button {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.9em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    transition: background-color 0.2s ease;
}

.filter-button:hover {
    background-color: #e9ecef;
}

.filters-panel {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-size: 0.8em;
    color: #495057;
    font-weight: 500;
}

.filter-group select {
    padding: 8px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9em;
    min-width: 150px;
}

.incident-reports-table-container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

.incident-reports-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.incident-reports-table th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
    text-align: left;
    padding: 12px 15px;
    border-bottom: 2px solid #dee2e6;
}

.incident-reports-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #dee2e6;
    color: #212529;
}

.incident-reports-table tr:hover {
    background-color: #f8f9fa;
}

.severity-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 500;
}

.severity-badge.low {
    background-color: #d3f9d8;
    color: #2b8a3e;
}

.severity-badge.medium {
    background-color: #fff3bf;
    color: #e67700;
}

.severity-badge.high {
    background-color: #ffe3e3;
    color: #c92a2a;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 500;
}

.status-badge.resolved {
    background-color: #d3f9d8;
    color: #2b8a3e;
}

.status-badge.under-investigation {
    background-color: #fff3bf;
    color: #e67700;
}

.status-badge.open {
    background-color: #ffe3e3;
    color: #c92a2a;
}

.actions {
    display: flex;
    gap: 8px;
}

.action-button {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.action-button.edit {
    background-color: #e7f5ff;
    color: #228be6;
}

.action-button.edit:hover {
    background-color: #d0ebff;
}

.action-button.delete {
    background-color: #ffe3e3;
    color: #e03131;
}

.action-button.delete:hover {
    background-color: #ffc9c9;
}

.action-button.download {
    background-color: #f8f9fa;
    color: #495057;
}

.action-button.download:hover {
    background-color: #e9ecef;
}

/* Loading and Error States */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    color: #495057;
    font-size: 1.1em;
}

.error {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    color: #e03131;
    font-size: 1.1em;
    text-align: center;
    padding: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .incident-reports-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .incident-reports-filters {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-container {
        max-width: 100%;
    }
    
    .filter-button {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .incident-reports {
        padding: 12px;
    }

    .incident-reports-header h2 {
        font-size: 1.4em;
    }

    .add-button {
        width: 100%;
        justify-content: center;
    }

    .incident-reports-table {
        font-size: 0.75em;
        min-width: 520px;
    }

    .incident-reports-table th,
    .incident-reports-table td {
        padding: 6px 8px;
    }
}
.assigned-tasks {
    padding: 20px;
}

.assigned-tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.assigned-tasks-header h2 {
    margin: 0;
    color: #212529;
    font-size: 1.8em;
    font-weight: 600;
}

.add-button {
    background-color: #228be6;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.9em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.add-button:hover {
    background-color: #1c7ed6;
}

.assigned-tasks-filters {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.search-container {
    position: relative;
    flex: 1 1;
    max-width: 500px;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #868e96;
}

.search-input {
    width: 100%;
    padding: 10px 10px 10px 35px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9em;
}

.filter-button {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.9em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    transition: background-color 0.2s ease;
}

.filter-button:hover {
    background-color: #e9ecef;
}

.filters-panel {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-size: 0.8em;
    color: #495057;
    font-weight: 500;
}

.filter-group select {
    padding: 8px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9em;
    min-width: 150px;
}

.tasks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

.task-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.task-card-header h3 {
    margin: 0;
    font-size: 1.1em;
    color: #212529;
    font-weight: 600;
}

.task-description {
    margin: 0;
    color: #495057;
    font-size: 0.9em;
    line-height: 1.5;
}

.task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.task-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #868e96;
    font-size: 0.9em;
}

.task-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 500;
}

.priority-badge.low {
    background-color: #d3f9d8;
    color: #2b8a3e;
}

.priority-badge.medium {
    background-color: #fff3bf;
    color: #e67700;
}

.priority-badge.high {
    background-color: #ffe3e3;
    color: #c92a2a;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 500;
}

.status-badge.completed {
    background-color: #d3f9d8;
    color: #2b8a3e;
}

.status-badge.in-progress {
    background-color: #fff3bf;
    color: #e67700;
}

.status-badge.pending {
    background-color: #e9ecef;
    color: #495057;
}

.task-actions {
    display: flex;
    gap: 8px;
}

.action-button {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.action-button.edit {
    background-color: #e7f5ff;
    color: #228be6;
}

.action-button.edit:hover {
    background-color: #d0ebff;
}

.action-button.delete {
    background-color: #ffe3e3;
    color: #e03131;
}

.action-button.delete:hover {
    background-color: #ffc9c9;
}

/* Loading and Error States */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    color: #495057;
    font-size: 1.1em;
}

.error {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    color: #e03131;
    font-size: 1.1em;
    text-align: center;
    padding: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .assigned-tasks-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .assigned-tasks-filters {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-container {
        max-width: 100%;
    }
    
    .filter-button {
        margin-left: 0;
    }
    
    .tasks-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .assigned-tasks {
        padding: 12px;
    }

    .assigned-tasks-header h2 {
        font-size: 1.4em;
    }

    .add-button {
        width: 100%;
        justify-content: center;
    }

    .task-card {
        padding: 14px;
    }
}
.certifications {
    padding: 20px;
}

.certifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.certifications-header h2 {
    margin: 0;
    color: #212529;
    font-size: 1.8em;
    font-weight: 600;
}

.add-button {
    background-color: #228be6;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.9em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.add-button:hover {
    background-color: #1c7ed6;
}

.certifications-filters {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.search-container {
    position: relative;
    flex: 1 1;
    max-width: 500px;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #868e96;
}

.search-input {
    width: 100%;
    padding: 10px 10px 10px 35px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9em;
}

.filter-button {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.9em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    transition: background-color 0.2s ease;
}

.filter-button:hover {
    background-color: #e9ecef;
}

.filters-panel {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-size: 0.8em;
    color: #495057;
    font-weight: 500;
}

.filter-group select {
    padding: 8px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9em;
    min-width: 150px;
}

.certifications-table-container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

.certifications-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.certifications-table th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
    text-align: left;
    padding: 12px 15px;
    border-bottom: 2px solid #dee2e6;
}

.certifications-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #dee2e6;
    color: #212529;
}

.certifications-table tr:hover {
    background-color: #f8f9fa;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 500;
}

.status-badge.valid {
    background-color: #d3f9d8;
    color: #2b8a3e;
}

.status-badge.expiring {
    background-color: #fff3bf;
    color: #e67700;
}

.status-badge.expired {
    background-color: #ffe3e3;
    color: #c92a2a;
}

.actions {
    display: flex;
    gap: 8px;
}

.action-button {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.action-button.edit {
    background-color: #e7f5ff;
    color: #228be6;
}

.action-button.edit:hover {
    background-color: #d0ebff;
}

.action-button.delete {
    background-color: #ffe3e3;
    color: #e03131;
}

.action-button.delete:hover {
    background-color: #ffc9c9;
}

.action-button.download {
    background-color: #f8f9fa;
    color: #495057;
}

.action-button.download:hover {
    background-color: #e9ecef;
}

/* Loading and Error States */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    color: #495057;
    font-size: 1.1em;
}

.error {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    color: #e03131;
    font-size: 1.1em;
    text-align: center;
    padding: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .certifications-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .certifications-filters {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-container {
        max-width: 100%;
    }
    
    .filter-button {
        margin-left: 0;
    }
    
    .certifications-table {
        font-size: 0.8em;
    }
    
    .certifications-table th,
    .certifications-table td {
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .certifications {
        padding: 12px;
    }

    .certifications-header h2 {
        font-size: 1.4em;
    }

    .add-button {
        width: 100%;
        justify-content: center;
    }

    .certifications-table {
        font-size: 0.75em;
        min-width: 500px;
    }
}
.ppe-issuance {
    padding: 20px;
}

.ppe-issuance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ppe-issuance-header h2 {
    margin: 0;
    color: #212529;
    font-size: 1.8em;
    font-weight: 600;
}

.add-button {
    background-color: #228be6;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.9em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.add-button:hover {
    background-color: #1c7ed6;
}

.ppe-issuance-filters {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.search-container {
    position: relative;
    flex: 1 1;
    max-width: 500px;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #868e96;
}

.search-input {
    width: 100%;
    padding: 10px 10px 10px 35px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9em;
}

.filter-button {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.9em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    transition: background-color 0.2s ease;
}

.filter-button:hover {
    background-color: #e9ecef;
}

.filters-panel {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-size: 0.8em;
    color: #495057;
    font-weight: 500;
}

.filter-group select {
    padding: 8px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9em;
    min-width: 150px;
}

.ppe-issuance-table-container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

.ppe-issuance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.ppe-issuance-table th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
    text-align: left;
    padding: 12px 15px;
    border-bottom: 2px solid #dee2e6;
}

.ppe-issuance-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #dee2e6;
    color: #212529;
}

.ppe-issuance-table tr:hover {
    background-color: #f8f9fa;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 500;
}

.status-badge.active {
    background-color: #d3f9d8;
    color: #2b8a3e;
}

.status-badge.due-replacement {
    background-color: #fff3bf;
    color: #e67700;
}

.status-badge.replaced {
    background-color: #e9ecef;
    color: #495057;
}

.actions {
    display: flex;
    gap: 8px;
}

.action-button {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.action-button.edit {
    background-color: #e7f5ff;
    color: #228be6;
}

.action-button.edit:hover {
    background-color: #d0ebff;
}

.action-button.delete {
    background-color: #ffe3e3;
    color: #e03131;
}

.action-button.delete:hover {
    background-color: #ffc9c9;
}

.action-button.download {
    background-color: #f8f9fa;
    color: #495057;
}

.action-button.download:hover {
    background-color: #e9ecef;
}

/* Loading and Error States */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    color: #495057;
    font-size: 1.1em;
}

.error {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    color: #e03131;
    font-size: 1.1em;
    text-align: center;
    padding: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .ppe-issuance-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .ppe-issuance-filters {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-container {
        max-width: 100%;
    }
    
    .filter-button {
        margin-left: 0;
    }
    
    .ppe-issuance-table {
        font-size: 0.8em;
    }
    
    .ppe-issuance-table th,
    .ppe-issuance-table td {
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .ppe-issuance {
        padding: 12px;
    }

    .ppe-issuance-header h2 {
        font-size: 1.4em;
    }

    .add-button {
        width: 100%;
        justify-content: center;
    }

    .ppe-issuance-table {
        font-size: 0.75em;
        min-width: 520px;
    }
}
.staff-safety-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.staff-safety-content {
  display: flex;
  flex: 1 1;
  padding: 0;
  gap: 0;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0;
}

.staff-safety-main {
  flex: 1 1;
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  border: 1px solid var(--cs-border-light, #f1f5f9);
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
}

.safety-body {
  background: white;
  border-radius: 8px;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 18px;
  color: #666;
}

.error {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 18px;
  color: #d32f2f;
  padding: 20px;
  text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
  .staff-safety-container {
    height: auto;
    overflow: visible;
  }

  .staff-safety-content {
    padding: 0;
    overflow: visible;
  }

  .staff-safety-main {
    padding: 16px;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    max-height: none;
  }
}

@media (max-width: 480px) {
  .staff-safety-content {
    padding: 0;
  }
}

/* Compliance Dashboard Styles - Matching Roof Safety Design */
.compliance-dashboard-wrapper {
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}


.dashboard-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.dashboard-title {
  color: #0c437c !important;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.dashboard-actions {
  display: flex;
  gap: 10px;
}

.btn,
.btn-primary,
.btn-small {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.85em;
  transition: background 0.2s, color 0.2s;
}

.btn-primary,
.btn-small {
  background: #1574F6 !important;
  color: #fff !important;
  border: none !important;
}

.btn-primary:hover,
.btn-small:hover {
  background: #1264D9 !important;
  color: #fff !important;
}

.dashboard-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.dashboard-card {
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.dashboard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.dashboard-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  border-color: #e0e7ff;
}

.dashboard-card:hover::before {
  opacity: 1;
}

.dashboard-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  flex-shrink: 0;
}

.dashboard-card-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.dashboard-card-label {
  color: hsl(217, 91%, 60%) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  margin: 0 !important;
  width: 100% !important;
  line-height: 1.1 !important;
}

.dashboard-card-numbers {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  align-items: flex-start !important;
}

.dashboard-card-total {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
  text-align: left !important;
  align-self: flex-start !important;
}

.dashboard-card-failed {
  display: none;
}

.dashboard-bottom-panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 0;
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

.dashboard-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.1);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  min-width: 0;
  box-sizing: border-box;
}

.dashboard-panel:hover {
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.2);
}

.panel-title {
  font-size: 0.95em;
  color: #0c437c !important;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title svg,
.panel-title .fa-icon {
  color: #0c437c !important;
}

.attention-list {
  list-style: none;
  padding: 0 0 12px 0;
  margin: 0;
}

.attention-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 1em;
  color: #d32f2f;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.attention-list li:last-child {
  border-bottom: none;
}


.attention-icon {
  color: #d32f2f;
  font-size: 1.2em;
}

.attention-label {
  color: #1F2937;
  font-weight: 500;
}

.attention-failed {
  color: #1F2937;
  font-weight: 600;
}

.no-issues {
  color: #10B981;
  font-weight: 500;
  text-align: left;
  font-size: 1em;
}

.next-inspection-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.next-inspection-date {
  color: #1F2937;
  font-size: 1em;
  margin-bottom: 8px;
}

/* Responsive styles */
@media (max-width: 1200px) {
  .dashboard-bottom-panels {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
.dashboard-panel.activity-panel {
  grid-column: 1 / -1;
}

.dashboard-panel.activity-panel > div > div {
  background-color: #fff !important;
}

.dashboard-panel.activity-panel > div > div > div {
  background-color: #fff !important;
}

.dashboard-panel.activity-panel div {
  background-color: #fff !important;
}
}

@media (max-width: 900px) {
  .dashboard-bottom-panels {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .dashboard-panel {
    min-width: 0;
    padding: 16px;
  }
  .dashboard-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .compliance-dashboard-wrapper .dashboard-header-row {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
  }
  .compliance-dashboard-wrapper .dashboard-title {
    font-size: 1.5rem !important;
  }
  .compliance-dashboard-wrapper .dashboard-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .btn,
  .btn-primary,
  .btn-small {
    padding: 10px 16px;
    font-size: 0.875em;
  }
  .dashboard-card-label {
    font-size: 16px !important;
  }
}

@media (max-width: 600px) {
  .compliance-dashboard-wrapper {
    padding: 8px;
  }
  .dashboard-panel {
    padding: 12px;
  }
  .dashboard-card {
    padding: 12px;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .dashboard-cards-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .compliance-dashboard-wrapper .dashboard-title {
    font-size: 1.3rem !important;
  }
}

.dashboard-actions .btn,
.dashboard-actions .btn-primary,
.dashboard-actions .btn-small,
.next-inspection-panel .btn,
.next-inspection-panel .btn-primary,
.next-inspection-panel .btn-small {
  background: #1574F6 !important;
  color: #fff !important;
  border: none !important;
}

.dashboard-actions .btn:hover,
.dashboard-actions .btn-primary:hover,
.dashboard-actions .btn-small:hover,
.next-inspection-panel .btn:hover,
.next-inspection-panel .btn-primary:hover,
.next-inspection-panel .btn-small:hover {
  background: #1264D9 !important;
  color: #fff !important;
}

/* Make sure the old styles don't interfere */
.dashboard-section {
  width: 100%;
}

.status-card {
  display: none; /* Hide old cards */
}

.upcoming-tests {
  display: none; /* Hide old upcoming tests section */
}

.inventory-container {
    padding: 24px;
}

.inventory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.inventory-header h1 {
    font-size: 24px;
    color: #1a1f36;
}

.add-equipment-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #1A80E5;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.add-equipment-btn:hover {
    background: #1565c0;
}

.search-filter-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.search-bar {
    flex: 1 1;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 8px;
    padding: 0 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-bar input {
    flex: 1 1;
    border: none;
    padding: 12px;
    font-size: 14px;
    outline: none;
}

.search-bar svg {
    color: #637587;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: white;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background: #f8f9fa;
    border-color: #1A80E5;
}

.equipment-table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: #f8f9fa;
    padding: 16px;
    text-align: left;
    font-size: 14px;
    color: #1a1f36;
    font-weight: 500;
}

td {
    padding: 16px;
    border-top: 1px solid #e1e4e8;
    font-size: 14px;
    color: #637587;
}

.status-icon {
    font-size: 12px;
}

.status-icon.active {
    color: #4caf50;
}

.status-icon.inactive {
    color: #637587;
}

.status-icon.maintenance {
    color: #ff9800;
}

@media (max-width: 1024px) {
    .equipment-table {
        overflow-x: auto;
    }
    
    table {
        min-width: 900px;
    }
}

@media (max-width: 768px) {
    .inventory-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .search-filter-bar {
        flex-direction: column;
    }

    .add-equipment-btn {
        width: 100%;
        justify-content: center;
    }
} 
@media (max-width: 480px) {
  .inventory-container {
    padding: 12px;
  }
}

.inspection-logs-container {
    padding: 24px;
}

.inspection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.inspection-header h1 {
    font-size: 24px;
    color: #1a1f36;
}

.add-inspection-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #1A80E5;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.add-inspection-btn:hover {
    background: #1565c0;
}

.search-filter-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.search-bar {
    flex: 1 1;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 8px;
    padding: 0 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-bar input {
    flex: 1 1;
    border: none;
    padding: 12px;
    font-size: 14px;
    outline: none;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: white;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background: #f8f9fa;
    border-color: #1A80E5;
}

.inspection-table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.status-icon {
    font-size: 16px;
}

.status-icon.passed {
    color: #4caf50;
}

.status-icon.failed {
    color: #f44336;
}

.status-icon.pending {
    color: #ff9800;
}

.attachment-count {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #637587;
}

.view-btn {
    padding: 6px 12px;
    background: #f8f9fa;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    color: #1A80E5;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-btn:hover {
    background: #1A80E5;
    color: white;
    border-color: #1A80E5;
}

@media (max-width: 1024px) {
    .inspection-table {
        overflow-x: auto;
    }
    
    table {
        min-width: 900px;
    }
}

@media (max-width: 768px) {
    .inspection-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .search-filter-bar {
        flex-direction: column;
    }

    .add-inspection-btn {
        width: 100%;
        justify-content: center;
    }
} 
@media (max-width: 480px) {
  .inspection-logs-container {
    padding: 12px;
  }
}

.maintenance-records {
    min-height: 100vh;
    background: #f5f6fa;
}

.records-content {
    padding: 32px;
    max-width: 1440px;
    margin: 0 auto;
}

.records-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.header-content h1 {
    font-size: 24px;
    color: #1a1f36;
    margin-bottom: 8px;
}

.header-content p {
    color: #637587;
    font-size: 14px;
}

.add-record-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #1A80E5;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.add-record-btn:hover {
    background: #1565c0;
}

/* Search and filter styles */
.search-filter-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.search-bar {
    flex: 1 1;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 8px;
    padding: 0 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-bar input {
    flex: 1 1;
    border: none;
    padding: 12px;
    font-size: 14px;
    outline: none;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: white;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background: #f8f9fa;
    border-color: #1A80E5;
}

@media (max-width: 768px) {
    .records-content {
        padding: 16px;
    }

    .records-header {
        flex-direction: column;
        gap: 16px;
    }

    .add-record-btn {
        width: 100%;
        justify-content: center;
    }

    .search-filter-bar {
        flex-direction: column;
    }
}

.maintenance-records-container {
    padding: 24px;
}

.maintenance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.header-content h1 {
    font-size: 24px;
    color: #1a1f36;
    margin-bottom: 8px;
}

.header-content p {
    color: #637587;
    font-size: 14px;
}

.add-maintenance-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #1A80E5;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.add-maintenance-btn:hover {
    background: #1565c0;
}

.maintenance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 24px;
    gap: 24px;
    margin-top: 24px;
}

.maintenance-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.card-header {
    padding: 16px;
    background: #f8f9fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.equipment-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.equipment-info h3 {
    font-size: 16px;
    color: #1a1f36;
    margin: 0;
}

.card-content {
    padding: 16px;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #637587;
    font-size: 14px;
}

.label {
    color: #1a1f36;
    font-weight: 500;
}

.description {
    margin: 16px 0;
    color: #637587;
    font-size: 14px;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.cost {
    font-size: 18px;
    font-weight: 600;
    color: #1a1f36;
}

.details-btn {
    padding: 6px 12px;
    background: #f8f9fa;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    color: #1A80E5;
    cursor: pointer;
    transition: all 0.2s ease;
}

.details-btn:hover {
    background: #1A80E5;
    color: white;
    border-color: #1A80E5;
}

.next-service {
    padding: 12px 16px;
    background: #f8f9fa;
    border-top: 1px solid #e1e4e8;
    color: #637587;
    font-size: 14px;
}

.status-icon {
    font-size: 16px;
}

.status-icon.completed {
    color: #4caf50;
}

.status-icon.in-progress {
    color: #ff9800;
}

@media (max-width: 768px) {
    .maintenance-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .search-filter-bar {
        flex-direction: column;
    }

    .add-maintenance-btn {
        width: 100%;
        justify-content: center;
    }

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

.header-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.notifications-btn {
    position: relative;
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #1A80E5;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4444;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
}

.notifications-panel {
    position: absolute;
    top: 80px;
    right: 32px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 320px;
    z-index: 1000;
    padding: 16px;
}

.notification-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #e1e4e8;
}

.notification-item.overdue {
    background: #fff3f3;
}

.notification-item.upcoming {
    background: #f0f7ff;
}

.notification-date {
    font-size: 12px;
    color: #637587;
}

.reports-section {
    margin: 16px 0;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.report-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.upload-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    border: 1px dashed #1A80E5;
    border-radius: 4px;
    color: #1A80E5;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-btn:hover {
    background: #f0f7ff;
}

.priority-tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.priority-tag.high {
    background: #fff3f3;
    color: #ff4444;
}

.priority-tag.medium {
    background: #fff8e6;
    color: #ff9800;
}

.priority-tag.low {
    background: #e8f5e9;
    color: #4caf50;
}

.button-group {
    display: flex;
    gap: 8px;
}

.assign-btn {
    padding: 6px 12px;
    background: #f0f7ff;
    border: 1px solid #1A80E5;
    border-radius: 4px;
    color: #1A80E5;
    cursor: pointer;
    transition: all 0.2s ease;
}

.assign-btn:hover {
    background: #1A80E5;
    color: white;
}

.overdue {
    color: #ff4444;
}

.overdue-icon {
    color: #ff4444;
    margin-right: 8px;
}

.status-container {
    display: flex;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .notifications-panel {
        right: 16px;
        width: calc(100% - 32px);
    }

    .header-actions {
        width: 100%;
    }

    .button-group {
        flex-direction: column;
        width: 100%;
    }

    .assign-btn,
    .details-btn {
        width: 100%;
    }
} 
@media (max-width: 480px) {
  .records-content {
    padding: 12px;
  }

  .maintenance-records-container {
    padding: 12px;
  }
}

.defect-reporting-container {
    padding: 24px;
}

.defect-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.header-content h1 {
    font-size: 24px;
    color: #1a1f36;
    margin-bottom: 8px;
}

.header-content p {
    color: #637587;
    font-size: 14px;
}

.report-defect-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #1A80E5;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.report-defect-btn:hover {
    background: #1565c0;
}

.defect-reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 24px;
    gap: 24px;
    margin-top: 24px;
}

.defect-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.priority-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.priority-high {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
}

.priority-medium {
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
}

.priority-low {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
}

.assignment-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0;
    padding: 8px 0;
    border-top: 1px solid #e1e4e8;
    border-bottom: 1px solid #e1e4e8;
}

.photos-btn, .update-btn {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.photos-btn {
    background: #f8f9fa;
    border: 1px solid #e1e4e8;
    color: #637587;
}

.update-btn {
    background: #1A80E5;
    border: none;
    color: white;
}

.photos-btn:hover {
    background: #e9ecef;
}

.update-btn:hover {
    background: #1565c0;
}

@media (max-width: 768px) {
    .defect-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .report-defect-btn {
        width: 100%;
        justify-content: center;
    }

    .defect-reports-grid {
        grid-template-columns: 1fr;
    }
} 
@media (max-width: 480px) {
  .defect-reporting-container {
    padding: 12px;
  }

  .defect-reports-grid {
    gap: 16px;
  }
}

.documentation-container {
    padding: 24px;
}

.documentation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.header-content h1 {
    font-size: 24px;
    color: #1a1f36;
    margin-bottom: 8px;
}

.header-content p {
    color: #637587;
    font-size: 14px;
}

.upload-doc-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #1A80E5;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.upload-doc-btn:hover {
    background: #1565c0;
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 24px;
    gap: 24px;
    margin-top: 24px;
}

.document-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.doc-icon {
    font-size: 32px;
    color: #1A80E5;
}

.doc-icon .file-icon.pdf {
    color: #f44336;
}

.doc-icon .file-icon.image {
    color: #4caf50;
}

.doc-content {
    flex: 1 1;
}

.doc-content h3 {
    font-size: 16px;
    color: #1a1f36;
    margin-bottom: 8px;
}

.doc-info {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.doc-info span {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #f8f9fa;
}

.doc-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    color: #637587;
    font-size: 12px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.doc-actions {
    display: flex;
    gap: 8px;
}

.view-btn, .download-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-btn {
    background: #f8f9fa;
    border: 1px solid #e1e4e8;
    color: #637587;
}

.download-btn {
    background: #1A80E5;
    border: none;
    color: white;
}

.view-btn:hover {
    background: #e9ecef;
}

.download-btn:hover {
    background: #1565c0;
}

@media (max-width: 768px) {
    .documentation-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .upload-doc-btn {
        width: 100%;
        justify-content: center;
    }

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

    .search-filter-bar {
        flex-direction: column;
    }
} 
@media (max-width: 480px) {
  .documentation-container {
    padding: 12px;
  }

  .documents-grid {
    gap: 16px;
  }

  .document-card {
    flex-direction: column;
    gap: 12px;
  }
}

.fixed-equipment-section {
  padding: 20px;
  overflow-x: hidden;
}

.search-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-bar {
  position: relative;
  width: 300px;
}

.search-bar input {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-bar i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

.table-buttons {
  display: flex;
  gap: 10px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #545b62;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
}

.filter-btn:hover {
  background-color: #f8f9fa;
}

.table-section, .table-container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  border: none;
  padding: 0 !important;
  box-sizing: border-box;
}

.table-container {
  width: 100%;
  overflow-x: auto;
  margin: 0;
  border: none;
  padding: 0;
  box-sizing: border-box;
}

table {
  width: 100%;
  height: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  background: #fff;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  box-shadow: none;
  border-radius: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
}

thead, tbody, tr, th, td {
  margin: 0 !important;
  padding: 16px 16px !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  border: none;
  vertical-align: middle;
}

th {
  padding: 24px 16px !important;
  letter-spacing: 0.5px;
  vertical-align: middle;
  background-color: #f8f9fa;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #dee2e6;
}

td {
  padding: 16px 16px !important;
  vertical-align: middle;
  border-bottom: 1px solid #f1f3f4;
}

.status-select {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 12px;
  font-weight: 500;
}

.status-select.pass {
  background-color: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}

.status-select.fail {
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}

.status-select.pending {
  background-color: #fff3cd;
  color: #856404;
  border-color: #ffeaa7;
}

.status-select.unknown {
  background-color: #e2e3e5;
  color: #383d41;
  border-color: #d6d8db;
}

/* Modal Styles */
.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
}

.modal {
  position: relative !important;
  background: #fff !important;
  border-radius: 12px !important;
  padding: 32px 32px 16px 32px !important;
  max-width: 600px !important;
  width: 100% !important;
  min-width: 320px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  z-index: 100000 !important;
  display: block !important;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1a1f36;
}

.close-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #637587;
  padding: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background-color: #e3f0fd;
  color: #1574F6;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 6px;
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  font-size: 15px;
  color: #1a1f36;
  background: white;
  transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1A80E5;
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e9ecef;
}

.btn-primary {
  background-color: #1A80E5;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.btn-primary:hover {
  background-color: #1574F6;
}

.btn-secondary {
  background-color: white;
  color: #1A80E5;
  border: 1px solid #E1E4E8;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background-color: #F0F0F5;
  border-color: #1A80E5;
}

.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  font-size: 16px;
  color: #666;
}

.error-message {
  color: #dc3545;
  text-align: center;
  padding: 20px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  margin: 20px 0;
}

/* Action buttons */
.edit-btn, .delete-btn, .view-test-data-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.edit-btn {
  background: #ffc107;
  color: #000;
}

.edit-btn:hover {
  background: #e0a800;
}

.delete-btn {
  background: #dc3545;
  color: white;
}

.delete-btn:hover {
  background: #c82333;
}

.view-test-data-btn {
  background: #1A80E5;
  color: white;
}

.view-test-data-btn:hover {
  background: #1574F6;
}

.system-blue {
  background: #1A80E5 !important;
  color: #fff !important;
  border: none !important;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(26,128,229,0.04);
  transition: background 0.2s, color 0.2s;
}

.system-blue:hover {
  background: #1574F6 !important;
  color: #fff !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .modal {
    padding: 20px;
    margin: 10px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .search-controls {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .search-bar {
    width: 100%;
  }
  
  .table-container {
    overflow-x: auto;
  }
} 
@media (max-width: 480px) {
  .fixed-equipment-section {
    padding: 12px;
  }

  .modal {
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    max-height: 85vh !important;
    padding: 20px 16px 32px !important;
  }

  .modal-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .modal-actions .btn-primary,
  .modal-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

.equipment-safety-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.equipment-safety-content {
  display: flex;
  flex: 1 1;
  padding: 0;
  gap: 0;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0;
}

.equipment-safety-main {
  flex: 1 1;
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  border: 1px solid var(--cs-border-light, #f1f5f9);
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
}

/* Responsive Design */
@media (max-width: 768px) {
  .equipment-safety-container {
    height: auto;
    overflow: visible;
  }

  .equipment-safety-content {
    padding: 0;
    overflow: visible;
  }

  .equipment-safety-main {
    padding: 16px;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    max-height: none;
  }
}

@media (max-width: 480px) {
  .equipment-safety-content {
    padding: 0;
  }
}

.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  font-size: 1.2em;
  color: #666;
}

.error-message {
  color: #dc3545;
  text-align: center;
  padding: 20px;
  font-size: 1.2em;
}

/* Electrical Safety Dashboard Styles - Exact Copy from Roof Safety Design */
.electrical-dashboard-wrapper {
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Ensure the whole dashboard fits without scrolling */
  overflow: hidden;
  box-sizing: border-box;
}


.electrical-dashboard-wrapper .dashboard-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.electrical-dashboard-wrapper .dashboard-title {
  color: #0c437c !important;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.electrical-dashboard-wrapper .dashboard-actions {
  display: flex;
  gap: 10px;
}

.electrical-dashboard-wrapper .btn,
.electrical-dashboard-wrapper .btn-primary,
.electrical-dashboard-wrapper .btn-small {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.85em;
  transition: background 0.2s, color 0.2s;
}

.electrical-dashboard-wrapper .btn-primary,
.electrical-dashboard-wrapper .btn-small {
  background: #1574F6 !important;
  color: #fff !important;
  border: none !important;
}

.electrical-dashboard-wrapper .btn-primary:hover,
.electrical-dashboard-wrapper .btn-small:hover {
  background: #1264D9 !important;
  color: #fff !important;
}

.electrical-dashboard-wrapper .dashboard-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 8px;
}

.electrical-dashboard-wrapper .dashboard-card {
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.electrical-dashboard-wrapper .dashboard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.electrical-dashboard-wrapper .dashboard-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  border-color: #e0e7ff;
}

.electrical-dashboard-wrapper .dashboard-card:hover::before {
  opacity: 1;
}

.electrical-dashboard-wrapper .dashboard-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  flex-shrink: 0;
}

.electrical-dashboard-wrapper .dashboard-card-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.electrical-dashboard-wrapper .dashboard-card-label {
  color: hsl(217, 91%, 60%) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  margin: 0 !important;
  width: 100% !important;
  line-height: 1.1 !important;
}

.electrical-dashboard-wrapper .dashboard-card-numbers {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  align-items: flex-start !important;
}

.electrical-dashboard-wrapper .dashboard-card-total {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
  text-align: left !important;
  align-self: flex-start !important;
}

.electrical-dashboard-wrapper .dashboard-card-failed {
  display: none;
}

.electrical-dashboard-wrapper .dashboard-bottom-panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 0;
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

.electrical-dashboard-wrapper .dashboard-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.1);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  min-width: 0;
}

.electrical-dashboard-wrapper .dashboard-panel:hover {
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.2);
}

.electrical-dashboard-wrapper .panel-title {
  font-size: 0.95em;
  color: #0c437c !important;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.electrical-dashboard-wrapper .panel-title svg,
.electrical-dashboard-wrapper .panel-title .fa-icon {
  color: #0c437c !important;
}

.electrical-dashboard-wrapper .attention-list {
  list-style: none;
  padding: 0 0 12px 0;
  margin: 0;
}

.electrical-dashboard-wrapper .attention-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 1em;
  color: #d32f2f;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.electrical-dashboard-wrapper .attention-list li:last-child {
  border-bottom: none;
}


.electrical-dashboard-wrapper .attention-icon {
  color: #d32f2f;
  font-size: 1.2em;
}

.electrical-dashboard-wrapper .attention-label {
  color: #1F2937;
  font-weight: 500;
}

.electrical-dashboard-wrapper .attention-failed {
  color: #1F2937;
  font-weight: 600;
}

.electrical-dashboard-wrapper .no-issues {
  color: #10B981;
  font-weight: 500;
  text-align: left;
  font-size: 1em;
}

.electrical-dashboard-wrapper .next-inspection-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.electrical-dashboard-wrapper .next-inspection-date {
  color: #1F2937;
  font-size: 1em;
  margin-bottom: 8px;
}

/* Responsive styles */
@media (max-width: 1200px) {
  .electrical-dashboard-wrapper .dashboard-bottom-panels {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
.electrical-dashboard-wrapper .dashboard-panel.activity-panel {
  grid-column: 1 / -1;
}

.electrical-dashboard-wrapper .dashboard-panel.activity-panel > div > div {
  background-color: #fff !important;
}

.electrical-dashboard-wrapper .dashboard-panel.activity-panel > div > div > div {
  background-color: #fff !important;
}

.electrical-dashboard-wrapper .dashboard-panel.activity-panel div {
  background-color: #fff !important;
}
}

@media (max-width: 900px) {
  .electrical-dashboard-wrapper .dashboard-bottom-panels {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .electrical-dashboard-wrapper .dashboard-panel {
    min-width: 0;
    padding: 16px;
  }
  .electrical-dashboard-wrapper .dashboard-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .electrical-dashboard-wrapper .dashboard-header-row {
    flex-wrap: wrap;
    gap: 12px;
  }
  .electrical-dashboard-wrapper .dashboard-title {
    font-size: 1.5rem !important;
  }
  .electrical-dashboard-wrapper .dashboard-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .electrical-dashboard-wrapper .btn,
  .electrical-dashboard-wrapper .btn-primary,
  .electrical-dashboard-wrapper .btn-small {
    padding: 10px 16px;
    font-size: 0.875em;
  }
  .electrical-dashboard-wrapper .dashboard-card-label {
    font-size: 16px !important;
  }
}

@media (max-width: 600px) {
  .electrical-dashboard-wrapper {
    padding: 8px;
  }
  .electrical-dashboard-wrapper .dashboard-panel {
    padding: 12px;
  }
  .electrical-dashboard-wrapper .dashboard-card {
    padding: 12px;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .electrical-dashboard-wrapper .dashboard-cards-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .electrical-dashboard-wrapper .dashboard-title {
    font-size: 1.3rem !important;
  }
}

.electrical-dashboard-wrapper .dashboard-actions .btn,
.electrical-dashboard-wrapper .dashboard-actions .btn-primary,
.electrical-dashboard-wrapper .dashboard-actions .btn-small,
.electrical-dashboard-wrapper .next-inspection-panel .btn,
.electrical-dashboard-wrapper .next-inspection-panel .btn-primary,
.electrical-dashboard-wrapper .next-inspection-panel .btn-small {
  background: #1574F6 !important;
  color: #fff !important;
  border: none !important;
}

.electrical-dashboard-wrapper .dashboard-actions .btn:hover,
.electrical-dashboard-wrapper .dashboard-actions .btn-primary:hover,
.electrical-dashboard-wrapper .dashboard-actions .btn-small:hover,
.electrical-dashboard-wrapper .next-inspection-panel .btn:hover,
.electrical-dashboard-wrapper .next-inspection-panel .btn-primary:hover,
.electrical-dashboard-wrapper .next-inspection-panel .btn-small:hover {
  background: #1264D9 !important;
  color: #fff !important;
}

/* Make sure the old styles don't interfere */
.electrical-dashboard-wrapper .dashboard-section {
  width: 100%;
}

.electrical-dashboard-wrapper .status-card {
  display: none; /* Hide old cards */
}

.electrical-dashboard-wrapper .upcoming-tests {
  display: none; /* Hide old upcoming tests section */
}

/* Circuit Breaker Checks - Modern Design */
.circuit-breaker-checks {
  width: 100%;
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.header-content h1 {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.header-content p {
  color: #6B7280;
  font-size: 1rem;
  margin: 0;
}

.add-check-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.add-check-btn:hover {
  background: #1264D9;
}

.overview-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.overview-card:hover {
  box-shadow: 0 4px 16px rgba(21,116,246,0.10);
  transform: translateY(-2px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e7f5ff;
  color: #1574F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.card-icon.success {
  background: #e6f4ea;
  color: #10B981;
}

.card-icon.warning {
  background: #fef3c7;
  color: #F59E0B;
}

.card-icon.primary {
  background: #e3f2fd;
  color: #1976d2;
}

.card-content h3 {
  color: #6B7280;
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 8px 0;
}

.card-value {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.checks-table-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  overflow-x: auto;
}

.checks-table {
  width: 100%;
  border-collapse: collapse;
}

.checks-table th {
  background: #f8fafc;
  color: #374151;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
}

.checks-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  font-size: 0.875rem;
}

.checks-table tr:hover {
  background: #f9fafb;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.pass {
  background: #e6f4ea;
  color: #10B981;
}

.status-badge.fail {
  background: #fce8e6;
  color: #d32f2f;
}

.view-btn {
  background: #1574F6;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.view-btn:hover {
  background: #1264D9;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.add-check-modal {
  background: white;
  border-radius: 12px;
  padding: 32px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.add-check-modal h2 {
  color: #1F2937;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 24px 0;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #374151;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #374151;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1574F6;
  box-shadow: 0 0 0 3px rgba(21, 116, 246, 0.1);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.cancel-btn {
  padding: 10px 20px;
  background: white;
  color: #6B7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.cancel-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.submit-btn {
  padding: 10px 20px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.submit-btn:hover {
  background: #1264D9;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .overview-section {
    grid-template-columns: 1fr;
  }
  
  .checks-table-container {
    overflow-x: auto;
  }
  
  .add-check-modal {
    width: 95%;
    padding: 24px;
  }
}
/* Electrical Equipment Logs - Modern Design */
.equipment-logs {
  width: 100%;
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.header-content h1 {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.header-content p {
  color: #6B7280;
  font-size: 1rem;
  margin: 0;
}

.add-log-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.add-log-btn:hover {
  background: #1264D9;
}

.overview-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.overview-card:hover {
  box-shadow: 0 4px 16px rgba(21,116,246,0.10);
  transform: translateY(-2px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e7f5ff;
  color: #1574F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.card-icon.success {
  background: #e6f4ea;
  color: #10B981;
}

.card-icon.warning {
  background: #fef3c7;
  color: #F59E0B;
}

.card-icon.primary {
  background: #e3f2fd;
  color: #1976d2;
}

.card-content h3 {
  color: #6B7280;
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 8px 0;
}

.card-value {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.logs-table-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  overflow-x: auto;
}

.logs-table {
  width: 100%;
  border-collapse: collapse;
}

.logs-table th {
  background: #f8fafc;
  color: #374151;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
}

.logs-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  font-size: 0.875rem;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logs-table tr:hover {
  background: #f9fafb;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.good {
  background: #e6f4ea;
  color: #10B981;
}

.status-badge.fair {
  background: #fef3c7;
  color: #F59E0B;
}

.status-badge.poor {
  background: #fce8e6;
  color: #d32f2f;
}

.view-btn {
  background: #1574F6;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.view-btn:hover {
  background: #1264D9;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.add-log-modal {
  background: white;
  border-radius: 12px;
  padding: 32px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.add-log-modal h2 {
  color: #1F2937;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 24px 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.full-width {
  grid-column: 1 / -1;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #374151;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #374151;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1574F6;
  box-shadow: 0 0 0 3px rgba(21, 116, 246, 0.1);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.cancel-btn {
  padding: 10px 20px;
  background: white;
  color: #6B7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.cancel-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.submit-btn {
  padding: 10px 20px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.submit-btn:hover {
  background: #1264D9;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .overview-section {
    grid-template-columns: 1fr;
  }
  
  .logs-table-container {
    overflow-x: auto;
  }
  
  .add-log-modal {
    width: 95%;
    padding: 24px;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .add-log-modal {
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 20px 16px 32px !important;
    max-height: 85vh !important;
  }
}

/* Emergency Power Systems - Modern Design */
.emergency-power {
  width: 100%;
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.header-content h1 {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.header-content p {
  color: #6B7280;
  font-size: 1rem;
  margin: 0;
}

.add-system-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.add-system-btn:hover {
  background: #1264D9;
}

.overview-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.overview-card:hover {
  box-shadow: 0 4px 16px rgba(21,116,246,0.10);
  transform: translateY(-2px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e7f5ff;
  color: #1574F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.card-icon.success {
  background: #e6f4ea;
  color: #10B981;
}

.card-icon.warning {
  background: #fef3c7;
  color: #F59E0B;
}

.card-icon.primary {
  background: #e3f2fd;
  color: #1976d2;
}

.card-content h3 {
  color: #6B7280;
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 8px 0;
}

.card-value {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

/* Status indicators section */
.status-indicators {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.status-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
}

.status-icon {
  font-size: 24px;
  color: #1574F6;
  margin-bottom: 16px;
}

.fuel-levels, .battery-status {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fuel-indicator, .battery-indicator {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fuel-bar {
  flex: 1 1;
  height: 12px;
  background: #f0f2f5;
  border-radius: 6px;
  overflow: hidden;
}

.fuel-level {
  height: 100%;
  background: #10B981;
  transition: width 0.3s ease;
}

.health-badge {
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.health-badge.good {
  background: #e6f4ea;
  color: #10B981;
}

.health-badge.fair {
  background: #fef3c7;
  color: #F59E0B;
}

.health-badge.poor {
  background: #fce8e6;
  color: #d32f2f;
}

.systems-table-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  overflow-x: auto;
}

.systems-table {
  width: 100%;
  border-collapse: collapse;
}

.systems-table th {
  background: #f8fafc;
  color: #374151;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
}

.systems-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  font-size: 0.875rem;
}

.systems-table tr:hover {
  background: #f9fafb;
}

.view-btn {
  background: #1574F6;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.view-btn:hover {
  background: #1264D9;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.add-system-modal {
  background: white;
  border-radius: 12px;
  padding: 32px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.add-system-modal h2 {
  color: #1F2937;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 24px 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.full-width {
  grid-column: 1 / -1;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #374151;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #374151;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1574F6;
  box-shadow: 0 0 0 3px rgba(21, 116, 246, 0.1);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.cancel-btn {
  padding: 10px 20px;
  background: white;
  color: #6B7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.cancel-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.submit-btn {
  padding: 10px 20px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.submit-btn:hover {
  background: #1264D9;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .overview-section {
    grid-template-columns: 1fr;
  }
  
  .status-indicators {
    grid-template-columns: 1fr;
  }
  
  .systems-table-container {
    overflow-x: auto;
  }
  
  .add-system-modal {
    width: 95%;
    padding: 24px;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .add-system-modal {
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 20px 16px 32px !important;
    max-height: 85vh !important;
  }
}

/* Fuse Board Inspections - Modern Design */
.fuse-board-inspections {
  width: 100%;
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.header-content h1 {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.header-content p {
  color: #6B7280;
  font-size: 1rem;
  margin: 0;
}

.add-inspection-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.add-inspection-btn:hover {
  background: #1264D9;
}

.overview-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.overview-card:hover {
  box-shadow: 0 4px 16px rgba(21,116,246,0.10);
  transform: translateY(-2px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e7f5ff;
  color: #1574F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.card-icon.success {
  background: #e6f4ea;
  color: #10B981;
}

.card-icon.warning {
  background: #fef3c7;
  color: #F59E0B;
}

.card-icon.primary {
  background: #e3f2fd;
  color: #1976d2;
}

.card-content h3 {
  color: #6B7280;
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 8px 0;
}

.card-value {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.inspections-table-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  overflow-x: auto;
}

.inspections-table {
  width: 100%;
  border-collapse: collapse;
}

.inspections-table th {
  background: #f8fafc;
  color: #374151;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
}

.inspections-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  font-size: 0.875rem;
}

.inspections-table tr:hover {
  background: #f9fafb;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.pass {
  background: #e6f4ea;
  color: #10B981;
}

.status-badge.fail {
  background: #fce8e6;
  color: #d32f2f;
}

.view-btn {
  background: #1574F6;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.view-btn:hover {
  background: #1264D9;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.add-inspection-modal {
  background: white;
  border-radius: 12px;
  padding: 32px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.add-inspection-modal h2 {
  color: #1F2937;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 24px 0;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #374151;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #374151;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1574F6;
  box-shadow: 0 0 0 3px rgba(21, 116, 246, 0.1);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.cancel-btn {
  padding: 10px 20px;
  background: white;
  color: #6B7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.cancel-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.submit-btn {
  padding: 10px 20px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.submit-btn:hover {
  background: #1264D9;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .overview-section {
    grid-template-columns: 1fr;
  }
  
  .inspections-table-container {
    overflow-x: auto;
  }
  
  .add-inspection-modal {
    width: 95%;
    padding: 24px;
  }
}
@media (max-width: 480px) {
  .add-inspection-modal {
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 20px 16px 32px !important;
    max-height: 85vh !important;
  }
}

/* Grounding and Bonding - Modern Design */
.grounding-bonding {
  width: 100%;
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.header-content h1 {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.header-content p {
  color: #6B7280;
  font-size: 1rem;
  margin: 0;
}

.add-test-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.add-test-btn:hover {
  background: #1264D9;
}

.overview-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.overview-card:hover {
  box-shadow: 0 4px 16px rgba(21,116,246,0.10);
  transform: translateY(-2px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e7f5ff;
  color: #1574F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.card-icon.success {
  background: #e6f4ea;
  color: #10B981;
}

.card-icon.warning {
  background: #fef3c7;
  color: #F59E0B;
}

.card-icon.primary {
  background: #e3f2fd;
  color: #1976d2;
}

.card-content h3 {
  color: #6B7280;
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 8px 0;
}

.card-value {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.tests-table-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  overflow-x: auto;
}

.tests-table {
  width: 100%;
  border-collapse: collapse;
}

.tests-table th {
  background: #f8fafc;
  color: #374151;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
}

.tests-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  font-size: 0.875rem;
}

.tests-table tr:hover {
  background: #f9fafb;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.pass {
  background: #e6f4ea;
  color: #10B981;
}

.status-badge.fail {
  background: #fce8e6;
  color: #d32f2f;
}

.view-btn {
  background: #1574F6;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.view-btn:hover {
  background: #1264D9;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.add-test-modal {
  background: white;
  border-radius: 12px;
  padding: 32px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.add-test-modal h2 {
  color: #1F2937;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 24px 0;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #374151;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #374151;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1574F6;
  box-shadow: 0 0 0 3px rgba(21, 116, 246, 0.1);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.cancel-btn {
  padding: 10px 20px;
  background: white;
  color: #6B7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.cancel-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.submit-btn {
  padding: 10px 20px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.submit-btn:hover {
  background: #1264D9;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .overview-section {
    grid-template-columns: 1fr;
  }
  
  .tests-table-container {
    overflow-x: auto;
  }
  
  .add-test-modal {
    width: 95%;
    padding: 24px;
  }
}
@media (max-width: 480px) {
  .add-test-modal {
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 20px 16px 32px !important;
    max-height: 85vh !important;
  }
}

/* Load Testing - Modern Design */
.load-testing {
  width: 100%;
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.header-content h1 {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.header-content p {
  color: #6B7280;
  font-size: 1rem;
  margin: 0;
}

.add-test-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.add-test-btn:hover {
  background: #1264D9;
}

.overview-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.overview-card:hover {
  box-shadow: 0 4px 16px rgba(21,116,246,0.10);
  transform: translateY(-2px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e7f5ff;
  color: #1574F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.card-icon.success {
  background: #e6f4ea;
  color: #10B981;
}

.card-icon.warning {
  background: #fef3c7;
  color: #F59E0B;
}

.card-icon.primary {
  background: #e3f2fd;
  color: #1976d2;
}

.card-icon.danger {
  background: #fce8e6;
  color: #d32f2f;
}

.card-content h3 {
  color: #6B7280;
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 8px 0;
}

.card-value {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.tests-table-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  overflow-x: auto;
}

.tests-table {
  width: 100%;
  border-collapse: collapse;
}

.tests-table th {
  background: #f8fafc;
  color: #374151;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
}

.tests-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  font-size: 0.875rem;
}

.tests-table tr:hover {
  background: #f9fafb;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.pass {
  background: #e6f4ea;
  color: #10B981;
}

.status-badge.fail {
  background: #fce8e6;
  color: #d32f2f;
}

.load-percentage {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
}

.progress-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  position: relative;
  flex: 1 1;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #10B981;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-bar.danger::after {
  background: #d32f2f;
}

.view-btn {
  background: #1574F6;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.view-btn:hover {
  background: #1264D9;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.add-test-modal {
  background: white;
  border-radius: 12px;
  padding: 32px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.add-test-modal h2 {
  color: #1F2937;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 24px 0;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #374151;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #374151;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1574F6;
  box-shadow: 0 0 0 3px rgba(21, 116, 246, 0.1);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.cancel-btn {
  padding: 10px 20px;
  background: white;
  color: #6B7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.cancel-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.submit-btn {
  padding: 10px 20px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.submit-btn:hover {
  background: #1264D9;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .overview-section {
    grid-template-columns: 1fr;
  }
  
  .tests-table-container {
    overflow-x: auto;
  }
  
  .add-test-modal {
    width: 95%;
    padding: 24px;
  }
}
@media (max-width: 480px) {
  .add-test-modal {
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 20px 16px 32px !important;
    max-height: 85vh !important;
  }
}

/* PAT Testing Logs - Modern Design */
.pat-testing {
  width: 100%;
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.header-content h1 {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.header-content p {
  color: #6B7280;
  font-size: 1rem;
  margin: 0;
}

.add-test-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.add-test-btn:hover {
  background: #1264D9;
}

.overview-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.overview-card:hover {
  box-shadow: 0 4px 16px rgba(21,116,246,0.10);
  transform: translateY(-2px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e7f5ff;
  color: #1574F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.card-icon.success {
  background: #e6f4ea;
  color: #10B981;
}

.card-icon.warning {
  background: #fef3c7;
  color: #F59E0B;
}

.card-icon.primary {
  background: #e3f2fd;
  color: #1976d2;
}

.card-content h3 {
  color: #6B7280;
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 8px 0;
}

.card-value {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.tests-table-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  overflow-x: auto;
}

.tests-table {
  width: 100%;
  border-collapse: collapse;
}

.tests-table th {
  background: #f8fafc;
  color: #374151;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
}

.tests-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  font-size: 0.875rem;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tests-table tr:hover {
  background: #f9fafb;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.pass {
  background: #e6f4ea;
  color: #10B981;
}

.status-badge.fail {
  background: #fce8e6;
  color: #d32f2f;
}

.view-btn {
  background: #1574F6;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.view-btn:hover {
  background: #1264D9;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.add-test-modal {
  background: white;
  border-radius: 12px;
  padding: 32px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.add-test-modal h2 {
  color: #1F2937;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 24px 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.full-width {
  grid-column: 1 / -1;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #374151;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #374151;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1574F6;
  box-shadow: 0 0 0 3px rgba(21, 116, 246, 0.1);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.cancel-btn {
  padding: 10px 20px;
  background: white;
  color: #6B7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.cancel-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.submit-btn {
  padding: 10px 20px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.submit-btn:hover {
  background: #1264D9;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .overview-section {
    grid-template-columns: 1fr;
  }
  
  .tests-table-container {
    overflow-x: auto;
  }
  
  .add-test-modal {
    width: 95%;
    padding: 24px;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .add-test-modal {
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 20px 16px 32px !important;
    max-height: 85vh !important;
  }
}

/* RCD Testing - Modern Design */
.rcd-testing {
  width: 100%;
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.header-content h1 {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.header-content p {
  color: #6B7280;
  font-size: 1rem;
  margin: 0;
}

.add-test-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.add-test-btn:hover {
  background: #1264D9;
}

.overview-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.overview-card:hover {
  box-shadow: 0 4px 16px rgba(21,116,246,0.10);
  transform: translateY(-2px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e7f5ff;
  color: #1574F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.card-icon.success {
  background: #e6f4ea;
  color: #10B981;
}

.card-icon.warning {
  background: #fef3c7;
  color: #F59E0B;
}

.card-icon.primary {
  background: #e3f2fd;
  color: #1976d2;
}

.card-content h3 {
  color: #6B7280;
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 8px 0;
}

.card-value {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.tests-table-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  overflow-x: auto;
}

.tests-table {
  width: 100%;
  border-collapse: collapse;
}

.tests-table th {
  background: #f8fafc;
  color: #374151;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
}

.tests-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  font-size: 0.875rem;
}

.tests-table tr:hover {
  background: #f9fafb;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.pass {
  background: #e6f4ea;
  color: #10B981;
}

.status-badge.fail {
  background: #fce8e6;
  color: #d32f2f;
}

.view-btn {
  background: #1574F6;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.view-btn:hover {
  background: #1264D9;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.add-test-modal {
  background: white;
  border-radius: 12px;
  padding: 32px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.add-test-modal h2 {
  color: #1F2937;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 24px 0;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #374151;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 0.875rem;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #374151;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #1574F6;
  box-shadow: 0 0 0 3px rgba(21, 116, 246, 0.1);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.cancel-btn {
  padding: 10px 20px;
  background: white;
  color: #6B7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.cancel-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.submit-btn {
  padding: 10px 20px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.submit-btn:hover {
  background: #1264D9;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .overview-section {
    grid-template-columns: 1fr;
  }
  
  .tests-table-container {
    overflow-x: auto;
  }
  
  .add-test-modal {
    width: 95%;
    padding: 24px;
  }
}
@media (max-width: 480px) {
  .add-test-modal {
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 20px 16px 32px !important;
    max-height: 85vh !important;
  }
}

/* Switchgear Inspections - Modern Design */
.switchgear-inspections {
  width: 100%;
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.header-content h1 {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.header-content p {
  color: #6B7280;
  font-size: 1rem;
  margin: 0;
}

.add-inspection-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.add-inspection-btn:hover {
  background: #1264D9;
}

.overview-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.overview-card:hover {
  box-shadow: 0 4px 16px rgba(21,116,246,0.10);
  transform: translateY(-2px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e7f5ff;
  color: #1574F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.card-icon.success {
  background: #e6f4ea;
  color: #10B981;
}

.card-icon.warning {
  background: #fef3c7;
  color: #F59E0B;
}

.card-icon.primary {
  background: #e3f2fd;
  color: #1976d2;
}

.card-content h3 {
  color: #6B7280;
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 8px 0;
}

.card-value {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.inspections-table-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  overflow-x: auto;
}

.inspections-table {
  width: 100%;
  border-collapse: collapse;
}

.inspections-table th {
  background: #f8fafc;
  color: #374151;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
}

.inspections-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  font-size: 0.875rem;
}

.inspections-table tr:hover {
  background: #f9fafb;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.pass {
  background: #e6f4ea;
  color: #10B981;
}

.status-badge.fail {
  background: #fce8e6;
  color: #d32f2f;
}

.view-btn {
  background: #1574F6;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.view-btn:hover {
  background: #1264D9;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.add-inspection-modal {
  background: white;
  border-radius: 12px;
  padding: 32px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.add-inspection-modal h2 {
  color: #1F2937;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 24px 0;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #374151;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #374151;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1574F6;
  box-shadow: 0 0 0 3px rgba(21, 116, 246, 0.1);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.cancel-btn {
  padding: 10px 20px;
  background: white;
  color: #6B7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.cancel-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.submit-btn {
  padding: 10px 20px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.submit-btn:hover {
  background: #1264D9;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .overview-section {
    grid-template-columns: 1fr;
  }
  
  .inspections-table-container {
    overflow-x: auto;
  }
  
  .add-inspection-modal {
    width: 95%;
    padding: 24px;
  }
}
@media (max-width: 480px) {
  .add-inspection-modal {
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 20px 16px 32px !important;
    max-height: 85vh !important;
  }
}

/* Thermal Imaging Reports - Modern Design */
.thermal-imaging {
  width: 100%;
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.header-content h1 {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.header-content p {
  color: #6B7280;
  font-size: 1rem;
  margin: 0;
}

.add-report-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.add-report-btn:hover {
  background: #1264D9;
}

.overview-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.overview-card:hover {
  box-shadow: 0 4px 16px rgba(21,116,246,0.10);
  transform: translateY(-2px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e7f5ff;
  color: #1574F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.card-icon.success {
  background: #e6f4ea;
  color: #10B981;
}

.card-icon.warning {
  background: #fef3c7;
  color: #F59E0B;
}

.card-icon.primary {
  background: #e3f2fd;
  color: #1976d2;
}

.card-content h3 {
  color: #6B7280;
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 8px 0;
}

.card-value {
  color: #1F2937;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.reports-table-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  overflow-x: auto;
}

.reports-table {
  width: 100%;
  border-collapse: collapse;
}

.reports-table th {
  background: #f8fafc;
  color: #374151;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
}

.reports-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  font-size: 0.875rem;
}

.reports-table tr:hover {
  background: #f9fafb;
}

.severity-badge {
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.severity-badge.low {
  background: #e6f4ea;
  color: #10B981;
}

.severity-badge.medium {
  background: #fef3c7;
  color: #F59E0B;
}

.severity-badge.high {
  background: #fce8e6;
  color: #d32f2f;
}

.temperature-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.temperature-icon {
  color: #d32f2f;
}

.view-btn {
  background: #1574F6;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.view-btn:hover {
  background: #1264D9;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.add-report-modal {
  background: white;
  border-radius: 12px;
  padding: 32px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.add-report-modal h2 {
  color: #1F2937;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 24px 0;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #374151;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #374151;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1574F6;
  box-shadow: 0 0 0 3px rgba(21, 116, 246, 0.1);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.image-upload {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease;
  background: #f9fafb;
}

.image-upload:hover {
  border-color: #1574F6;
  background: #f0f9ff;
}

.image-preview {
  max-width: 100%;
  height: auto;
  margin-top: 16px;
  border-radius: 8px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.cancel-btn {
  padding: 10px 20px;
  background: white;
  color: #6B7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.cancel-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.submit-btn {
  padding: 10px 20px;
  background: #1574F6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.submit-btn:hover {
  background: #1264D9;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .overview-section {
    grid-template-columns: 1fr;
  }
  
  .reports-table-container {
    overflow-x: auto;
  }
  
  .add-report-modal {
    width: 95%;
    padding: 24px;
  }
}
@media (max-width: 480px) {
  .add-report-modal {
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 20px 16px 32px !important;
    max-height: 85vh !important;
  }
}

.electrical-safety-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.electrical-safety-content {
  display: flex;
  flex: 1 1;
  padding: 0;
  gap: 0;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0;
}

.electrical-safety-main {
  flex: 1 1;
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  border: 1px solid var(--cs-border-light, #f1f5f9);
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
}

/* Responsive Design */
@media (max-width: 768px) {
  .electrical-safety-container {
    height: auto;
    overflow: visible;
  }

  .electrical-safety-content {
    padding: 0;
    overflow: visible;
  }

  .electrical-safety-main {
    padding: 16px;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    max-height: none;
  }
}

@media (max-width: 480px) {
  .electrical-safety-content {
    padding: 0;
  }
}

.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  font-size: 1.2em;
  color: #666;
}

.error-message {
  color: #dc3545;
  text-align: center;
  padding: 20px;
  font-size: 1.2em;
}

/* Building Maintenance Dashboard Styles - Matching Fire Safety Design */
.building-maintenance-dashboard-wrapper {
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.dashboard-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.dashboard-title {
  color: #1F2937;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.dashboard-actions {
  display: flex;
  gap: 10px;
}

.btn,
.btn-primary,
.btn-small {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.85em;
  transition: background 0.2s, color 0.2s;
}

.btn-primary,
.btn-small {
  background: #1574F6 !important;
  color: #fff !important;
  border: none !important;
}

.btn-primary:hover,
.btn-small:hover {
  background: #1264D9 !important;
  color: #fff !important;
}

.dashboard-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.dashboard-card {
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition: box-shadow 0.2s, transform 0.2s;
}

.dashboard-card:hover {
  box-shadow: 0 4px 16px rgba(21,116,246,0.10);
  transform: translateY(-2px);
}

.dashboard-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #e7f5ff;
  color: #1574F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
}

.dashboard-card-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-card-label {
  color: #1F2937;
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}

.dashboard-card-numbers {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-card-total {
  font-size: 1.5em;
  font-weight: 700;
  color: #1F2937;
}

.dashboard-card-failed {
  font-size: 1em;
  color: #d32f2f;
  font-weight: 600;
  background: #fce8e6;
  border-radius: 6px;
  padding: 2px 10px;
  margin-left: 4px;
}

.dashboard-card.good {
  border-left: 4px solid #10B981;
}
.dashboard-card.warning {
  border-left: 4px solid #F59E0B;
}
.dashboard-card.alert {
  border-left: 4px solid #d32f2f;
}

.dashboard-bottom-panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.dashboard-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  padding: 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.panel-title {
  font-size: 0.95em;
  color: #1F2937;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.attention-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.attention-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 1em;
  color: #d32f2f;
  font-weight: 500;
}

.attention-list li:last-child {
  border-bottom: none;
}

.attention-icon {
  color: #d32f2f;
  font-size: 1.2em;
}

.attention-label {
  color: #1F2937;
  font-weight: 500;
}

.attention-failed {
  color: #d32f2f;
  font-weight: 600;
}

.no-issues {
  color: #10B981;
  font-weight: 500;
  text-align: left;
  font-size: 1em;
}

.next-inspection-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.next-inspection-date {
  color: #1F2937;
  font-size: 1em;
  margin-bottom: 8px;
}

/* Responsive styles */
@media (max-width: 900px) {
  .building-maintenance-dashboard-wrapper .dashboard-bottom-panels {
    flex-direction: column;
    gap: 16px;
  }
  .building-maintenance-dashboard-wrapper .dashboard-panel {
    min-width: 0;
    padding: 16px;
  }
  .building-maintenance-dashboard-wrapper .dashboard-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .building-maintenance-dashboard-wrapper .dashboard-header-row {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
  }
  .building-maintenance-dashboard-wrapper .dashboard-title {
    font-size: 1.5rem;
  }
  .building-maintenance-dashboard-wrapper .dashboard-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .building-maintenance-dashboard-wrapper .btn,
  .building-maintenance-dashboard-wrapper .btn-primary,
  .building-maintenance-dashboard-wrapper .btn-small {
    padding: 10px 16px;
    font-size: 0.875em;
  }
}

@media (max-width: 600px) {
  .building-maintenance-dashboard-wrapper {
    padding: 8px;
  }
  .building-maintenance-dashboard-wrapper .dashboard-panel {
    padding: 12px;
  }
  .building-maintenance-dashboard-wrapper .dashboard-card {
    padding: 12px;
    min-width: 0;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .building-maintenance-dashboard-wrapper .dashboard-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .building-maintenance-dashboard-wrapper .dashboard-title {
    font-size: 1.25rem;
  }
}

.dashboard-actions .btn,
.dashboard-actions .btn-primary,
.dashboard-actions .btn-small,
.next-inspection-panel .btn,
.next-inspection-panel .btn-primary,
.next-inspection-panel .btn-small {
  background: #1574F6 !important;
  color: #fff !important;
  border: none !important;
}

.dashboard-actions .btn:hover,
.dashboard-actions .btn-primary:hover,
.dashboard-actions .btn-small:hover,
.next-inspection-panel .btn:hover,
.next-inspection-panel .btn-primary:hover,
.next-inspection-panel .btn-small:hover {
  background: #1264D9 !important;
  color: #fff !important;
}
/* Common styles for all maintenance pages */
.maintenance-page {
  padding: 2rem;
  background-color: var(--color-background);
  min-height: calc(100vh - 64px); /* Adjust for header height */
}

.maintenance-content {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 1440px;
  margin: 0 auto;
}

.maintenance-content h1 {
  color: var(--color-text-primary);
  font-size: 1.8rem;
  margin-bottom: 2rem;
  font-weight: 600;
}

/* Status Cards Grid */
.maintenance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.status-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.status-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.status-card h3 {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.status-card p {
  color: var(--color-text-primary);
  font-size: 1.5rem;
  font-weight: 600;
}

/* Status Colors */
.status-ok {
  color: var(--color-success) !important;
}

.status-warning {
  color: var(--color-warning) !important;
}

.status-critical {
  color: var(--color-danger) !important;
}

/* Action Buttons */
.action-button {
  background: var(--color-primary);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.action-button:hover {
  background: var(--color-primary-dark);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .maintenance-page {
    padding: 1rem;
  }
  
  .maintenance-content {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .maintenance-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .status-card {
    margin-bottom: 0;
    padding: 1rem;
  }

  .maintenance-content h1 {
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 480px) {
  .maintenance-grid {
    grid-template-columns: 1fr;
  }

  .maintenance-page {
    padding: 0.75rem;
  }

  .maintenance-content {
    padding: 1rem;
  }
} 
.maintenance-page {
  padding: 2rem;
  background-color: var(--color-background);
  min-height: calc(100vh - 64px);
}

.maintenance-content {
  max-width: 1440px;
  margin: 0 auto;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.action-button:hover {
  background-color: var(--color-primary-dark);
}

/* Status Grid */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 2rem;
}

.status-card {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 500;
}

.status-badge.good { color: var(--color-success); }
.status-badge.warning { color: var(--color-warning); }
.status-badge.critical { color: var(--color-danger); }

/* Table Styles */
.inspection-section,
.documents-section {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.inspection-table {
  width: 100%;
  border-collapse: collapse;
}

.inspection-table th,
.inspection-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.status-pill {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-pill.good {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-pill.completed {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Upload Area */
.upload-box {
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.upload-box:hover {
  border-color: var(--color-primary);
}

.upload-box svg {
  font-size: 2rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .status-grid {
    grid-template-columns: 1fr;
  }
  
  .content-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
} 
@media (max-width: 480px) {
  .maintenance-page {
    padding: 0.75rem;
  }

  .content-header {
    gap: 0.75rem;
  }
}

/* Extend shared maintenance styles */
.service-section,
.issues-section {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Table Styles */
.service-table,
.issues-table {
  width: 100%;
  border-collapse: collapse;
}

.service-table th,
.service-table td,
.issues-table th,
.issues-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

/* Priority Pills */
.priority-pill {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.priority-pill.high {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.priority-pill.medium {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.priority-pill.low {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* Status Indicators */
.status-pill.investigating {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-pill.completed {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .table-container {
    overflow-x: auto;
  }
  
  .service-table,
  .issues-table {
    min-width: 800px;
  }
} 
@media (max-width: 768px) {
  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .maintenance-section,
  .service-section,
  .treatment-section,
  .inspection-section,
  .issues-section,
  .repairs-section,
  .scheduled-section,
  .certificates-section,
  .damage-grid,
  .issues-grid,
  .scheduled-grid,
  .certificates-grid {
    padding: 0.75rem;
  }
}

/* Extend shared maintenance styles */
.maintenance-section,
.certificates-section {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Table Styles */
.maintenance-table {
  width: 100%;
  border-collapse: collapse;
}

.maintenance-table th,
.maintenance-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

/* Certificate Cards */
.certificates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.certificate-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-background);
}

.certificate-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--color-success-light);
  color: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.certificate-details {
  flex: 1 1;
}

.certificate-details h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.certificate-details p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* Status Indicators */
.status-pill.passed {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-pill.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .table-container {
    overflow-x: auto;
  }
  
  .maintenance-table {
    min-width: 800px;
  }
  
  .certificates-grid {
    grid-template-columns: 1fr;
  }
} 
@media (max-width: 768px) {
  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .maintenance-section,
  .service-section,
  .treatment-section,
  .inspection-section,
  .issues-section,
  .repairs-section,
  .scheduled-section,
  .certificates-section,
  .damage-grid,
  .issues-grid,
  .scheduled-grid,
  .certificates-grid {
    padding: 0.75rem;
  }
}

.inspection-history {
  margin-top: 2rem;
}

.inspection-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.inspection-table th,
.inspection-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

/* Extend shared maintenance styles */
.inspection-section,
.damage-section {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Damage Reports Grid */
.damage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.damage-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
}

.damage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.damage-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.damage-details p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* Status Indicators */
.status-pill.monitoring {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-pill.passed {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-pill.completed {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .table-container {
    overflow-x: auto;
  }
  
  .inspection-table {
    min-width: 800px;
  }
  
  .damage-grid {
    grid-template-columns: 1fr;
  }
} 
@media (max-width: 768px) {
  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .maintenance-section,
  .service-section,
  .treatment-section,
  .inspection-section,
  .issues-section,
  .repairs-section,
  .scheduled-section,
  .certificates-section,
  .damage-grid,
  .issues-grid,
  .scheduled-grid,
  .certificates-grid {
    padding: 0.75rem;
  }
}

/* Extend shared maintenance styles */
.inspection-section,
.issues-section {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Issues Grid */
.issues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.issue-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
}

.issue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.issue-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.issue-details p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* Severity Pills */
.severity-pill {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.severity-pill.high {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.severity-pill.medium {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.severity-pill.low {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* Status Indicators */
.status-pill.monitoring {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-pill.passed {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .table-container {
    overflow-x: auto;
  }
  
  .inspection-table {
    min-width: 800px;
  }
  
  .issues-grid {
    grid-template-columns: 1fr;
  }
} 
@media (max-width: 768px) {
  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .maintenance-section,
  .service-section,
  .treatment-section,
  .inspection-section,
  .issues-section,
  .repairs-section,
  .scheduled-section,
  .certificates-section,
  .damage-grid,
  .issues-grid,
  .scheduled-grid,
  .certificates-grid {
    padding: 0.75rem;
  }
}

/* Extend shared maintenance styles */
.maintenance-section,
.repairs-section {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Repairs Grid */
.repairs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.repair-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
}

.repair-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.repair-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.repair-type svg {
  color: var(--color-primary);
  font-size: 1.2rem;
}

.repair-type h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.repair-details p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* Status Indicators */
.status-pill.scheduled {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-pill.completed {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* Priority Pills */
.priority-pill.high {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.priority-pill.medium {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.priority-pill.low {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .table-container {
    overflow-x: auto;
  }
  
  .maintenance-table {
    min-width: 800px;
  }
  
  .repairs-grid {
    grid-template-columns: 1fr;
  }
} 
@media (max-width: 768px) {
  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .maintenance-section,
  .service-section,
  .treatment-section,
  .inspection-section,
  .issues-section,
  .repairs-section,
  .scheduled-section,
  .certificates-section,
  .damage-grid,
  .issues-grid,
  .scheduled-grid,
  .certificates-grid {
    padding: 0.75rem;
  }
}

/* Extend shared maintenance styles */
.maintenance-section,
.issues-section {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Issues Grid */
.issues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.issue-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
}

.issue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.issue-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.issue-type svg {
  color: var(--color-primary);
  font-size: 1.2rem;
}

.issue-type h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.issue-details p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* Status Indicators */
.status-pill.in-progress {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-pill.passed {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-pill.completed {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Priority Pills */
.priority-pill.high {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.priority-pill.medium {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.priority-pill.low {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .table-container {
    overflow-x: auto;
  }
  
  .maintenance-table {
    min-width: 800px;
  }
  
  .issues-grid {
    grid-template-columns: 1fr;
  }
} 
@media (max-width: 768px) {
  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .maintenance-section,
  .service-section,
  .treatment-section,
  .inspection-section,
  .issues-section,
  .repairs-section,
  .scheduled-section,
  .certificates-section,
  .damage-grid,
  .issues-grid,
  .scheduled-grid,
  .certificates-grid {
    padding: 0.75rem;
  }
}

/* Extend shared maintenance styles */
.treatment-section,
.issues-section {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Treatment Table */
.treatment-table {
  width: 100%;
  border-collapse: collapse;
}

.treatment-table th,
.treatment-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

/* Issues Grid */
.issues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.issue-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
}

.issue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.issue-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.issue-details p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* Status Indicators */
.status-pill.scheduled {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-pill.completed {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* Severity Pills */
.severity-pill {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.severity-pill.high {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.severity-pill.medium {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.severity-pill.low {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .table-container {
    overflow-x: auto;
  }
  
  .treatment-table {
    min-width: 800px;
  }
  
  .issues-grid {
    grid-template-columns: 1fr;
  }
} 
@media (max-width: 768px) {
  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .maintenance-section,
  .service-section,
  .treatment-section,
  .inspection-section,
  .issues-section,
  .repairs-section,
  .scheduled-section,
  .certificates-section,
  .damage-grid,
  .issues-grid,
  .scheduled-grid,
  .certificates-grid {
    padding: 0.75rem;
  }
}

/* Extend shared maintenance styles */
.maintenance-section,
.scheduled-section {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Scheduled Work Grid */
.scheduled-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.scheduled-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
}

.scheduled-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.work-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.work-type svg {
  color: var(--color-primary);
  font-size: 1.2rem;
}

.work-type h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.scheduled-details p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* Status Indicators */
.status-pill.scheduled {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-pill.completed {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .table-container {
    overflow-x: auto;
  }
  
  .maintenance-table {
    min-width: 800px;
  }
  
  .scheduled-grid {
    grid-template-columns: 1fr;
  }
} 
@media (max-width: 768px) {
  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .maintenance-section,
  .service-section,
  .treatment-section,
  .inspection-section,
  .issues-section,
  .repairs-section,
  .scheduled-section,
  .certificates-section,
  .damage-grid,
  .issues-grid,
  .scheduled-grid,
  .certificates-grid {
    padding: 0.75rem;
  }
}

.defects-form {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--color-background);
  border-radius: 8px;
}

.defects-list {
  margin-top: 2rem;
}

.defect-item {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Form Styles */
.report-section,
.defects-section {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.defect-form {
  max-width: 800px;
  margin: 1rem 0;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--color-text-primary);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.file-input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.image-preview {
  margin-top: 1rem;
}

.preview-item {
  padding: 0.5rem;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.submit-button {
  background-color: var(--color-primary);
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.submit-button:hover {
  background-color: var(--color-primary-dark);
}

/* Defects Grid */
.defects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.defect-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
}

.defect-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.defect-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.defect-title svg {
  color: var(--color-primary);
  font-size: 1.2rem;
}

.defect-title h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.defect-details p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* Status Indicators */
.status-pill.investigating {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-pill.scheduled {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Priority Pills */
.priority-pill.high {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.priority-pill.medium {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.priority-pill.low {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .defect-form {
    max-width: 100%;
  }
  
  .defects-grid {
    grid-template-columns: 1fr;
  }
} 
.building-maintenance-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.building-maintenance-content {
  display: flex;
  flex: 1 1;
  padding: 0;
  gap: 0;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0;
}

.building-maintenance-main {
  flex: 1 1;
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  border: 1px solid var(--cs-border-light, #f1f5f9);
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
}

/* Responsive Design */
@media (max-width: 768px) {
  .building-maintenance-container {
    height: auto;
    overflow: visible;
  }
  .building-maintenance-content {
    flex-direction: column;
    padding: 0;
    overflow: visible;
  }
  .building-maintenance-main {
    padding: 16px;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    max-height: none;
  }
}

@media (max-width: 480px) {
  .building-maintenance-content {
    padding: 0;
  }
}

.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  font-size: 1.2em;
  color: #666;
}

.error-message {
  color: #dc3545;
  text-align: center;
  padding: 20px;
  font-size: 1.2em;
}

/* Header Styles */
.general-maintenance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.add-task-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.add-task-btn:hover {
  background-color: var(--color-primary-dark);
}

/* Form Styles */
.task-form-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.task-form {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.task-form h2 {
  margin-bottom: 1.5rem;
  color: var(--color-text-primary);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.submit-btn,
.cancel-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.submit-btn {
  background-color: var(--color-primary);
  color: white;
}

.submit-btn:hover {
  background-color: var(--color-primary-dark);
}

.cancel-btn {
  background-color: var(--color-background);
  color: var(--color-text-secondary);
}

.cancel-btn:hover {
  background-color: var(--color-background-hover);
}

/* Task Cards */
.tasks-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-top: 2rem;
}

.task-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-left: 4px solid var(--color-primary);
}

.task-card.priority-high { border-left-color: var(--color-danger); }
.task-card.priority-medium { border-left-color: var(--color-warning); }
.task-card.priority-low { border-left-color: var(--color-success); }

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.task-header h3 {
  color: var(--color-text-primary);
  font-size: 1.1rem;
  margin: 0;
}

.task-actions {
  display: flex;
  gap: 0.5rem;
}

.task-actions button {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s ease;
}

.task-actions button:hover {
  color: var(--color-primary);
}

.task-description {
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.task-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.status-badge,
.priority-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-weight: 500;
}

.status-badge.status-pending { background-color: var(--color-warning-light); color: var(--color-warning); }
.status-badge.status-in-progress { background-color: var(--color-primary-light); color: var(--color-primary); }
.status-badge.status-completed { background-color: var(--color-success-light); color: var(--color-success); }

.priority-badge.priority-high { background-color: var(--color-danger-light); color: var(--color-danger); }
.priority-badge.priority-medium { background-color: var(--color-warning-light); color: var(--color-warning); }
.priority-badge.priority-low { background-color: var(--color-success-light); color: var(--color-success); }

.due-date,
.assigned-to {
  color: var(--color-text-secondary);
}

/* Responsive Design */
@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .tasks-container {
    grid-template-columns: 1fr;
  }

  .task-details {
    flex-direction: column;
    gap: 0.5rem;
  }
} 
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  padding: 20px;
}

.error-header {
  padding: 20px 40px;
  border-bottom: 1px solid var(--border-color);
}

.error-content {
  flex: 1 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.error-container {
  max-width: 600px;
  text-align: center;
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.error-title {
  font-size: 32px;
  color: var(--text-color);
  margin-bottom: 20px;
}

.error-code {
  font-size: 72px;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 20px;
}

.error-message {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 30px;
}

.error-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 30px;
}

.back-button,
.home-button {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
}

.back-button {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.home-button {
  background-color: var(--primary-color);
  border: none;
  color: white;
}

.back-button:hover,
.home-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.error-details {
  color: #666;
  margin: 20px 0;
}

.error-stack {
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  margin-top: 10px;
  padding: 10px;
  background-color: #eee;
  border-radius: 4px;
}

.back-link {
  color: #1A80E5;
  text-decoration: none;
  font-weight: 500;
}

.back-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .error-container {
    margin: 20px;
    padding: 20px;
  }

  .error-code {
    font-size: 48px;
  }

  .error-actions {
    flex-direction: column;
  }
} 
/* ============================================================
   Coming Soon — uses CloudSafe design tokens (tokens.css)
   Matches Login / Register / ForgotPassword page patterns.
   Prefix: csoon- (avoids collision with cs- in CloudStaff)
   ============================================================ */

/* ── Page layout ─────────────────────────────────────────── */
.csoon-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--cs-bg-alt);
}

/* ── Header ──────────────────────────────────────────────── */
.csoon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cs-space-5) var(--cs-space-6);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.csoon-logo {
  height: 36px;
  flex-shrink: 0;
}

.csoon-header-right {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
}

.csoon-header-link {
  color: var(--cs-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--cs-text-base);
  transition: color var(--cs-transition-fast);
}

.csoon-header-link:hover {
  color: var(--cs-blue-dark);
}

/* ── Card area ───────────────────────────────────────────── */
.csoon-body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1;
  padding: var(--cs-space-6) var(--cs-space-5);
}

.csoon-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius-xl);
  padding: var(--cs-space-10);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--cs-shadow-md);
  box-sizing: border-box;
  text-align: center;
}

/* ── Icon ────────────────────────────────────────────────── */
.csoon-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cs-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--cs-space-6);
}

.csoon-icon {
  color: var(--cs-blue);
  font-size: 22px;
}

/* ── Titles ──────────────────────────────────────────────── */
.csoon-title {
  font-size: var(--cs-text-3xl);
  font-weight: 700;
  color: var(--cs-text-primary);
  margin: 0 0 var(--cs-space-3) 0;
}

.csoon-subtitle {
  font-size: var(--cs-text-md);
  color: var(--cs-text-muted);
  margin: 0 0 var(--cs-space-8) 0;
  line-height: 1.6;
}

/* ── Primary button ──────────────────────────────────────── */
.csoon-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: var(--cs-blue);
  color: var(--cs-white);
  border: none;
  border-radius: var(--cs-radius-lg);
  font-size: var(--cs-text-lg);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--cs-transition-fast), box-shadow var(--cs-transition-fast);
}

.csoon-submit:hover {
  background: var(--cs-blue-hover);
  box-shadow: var(--cs-shadow-sm);
}

.csoon-submit:active {
  background: var(--cs-blue-dark);
}

.csoon-submit:focus-visible {
  outline: 2px solid var(--cs-blue-dark);
  outline-offset: 2px;
}

/* ── Back link (works as <a> or <button>) ────────────────── */
.csoon-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--cs-space-2);
  color: var(--cs-text-muted);
  font-size: var(--cs-text-base);
  font-weight: 500;
  text-decoration: none;
  margin-top: var(--cs-space-5);
  transition: color var(--cs-transition-fast);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.csoon-back-link:hover {
  color: var(--cs-text-primary);
}

.csoon-back-link:focus-visible {
  outline: 2px solid var(--cs-blue);
  outline-offset: 2px;
  border-radius: var(--cs-radius-sm);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  .csoon-header {
    padding: var(--cs-space-4) var(--cs-space-5);
  }

  .csoon-body {
    padding: var(--cs-space-4);
    align-items: flex-start;
  }

  .csoon-card {
    padding: var(--cs-space-8) var(--cs-space-6);
    box-shadow: var(--cs-shadow-sm);
  }
}

@media (max-width: 480px) {
  .csoon-header {
    padding: var(--cs-space-3) var(--cs-space-4);
  }

  .csoon-logo {
    height: 30px;
  }

  .csoon-body {
    padding: 0;
    align-items: stretch;
  }

  .csoon-card {
    border-radius: 0;
    padding: var(--cs-space-8) var(--cs-space-5) var(--cs-space-10);
    box-shadow: none;
  }

  .csoon-title {
    font-size: var(--cs-text-2xl);
  }

  .csoon-subtitle {
    font-size: var(--cs-text-base);
    margin-bottom: var(--cs-space-6);
  }
}

@media (max-width: 360px) {
  .csoon-card {
    padding: var(--cs-space-6) var(--cs-space-4) var(--cs-space-8);
  }
}

.cs-prep-page {
  min-height: 100vh; padding: 32px 16px;
  background: #f3f4f6; display: flex; align-items: center; justify-content: center;
}
.cs-prep-card {
  width: 100%; max-width: 540px;
  background: white; border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: 32px;
}
.cs-prep-header {
  display: flex; gap: 16px; align-items: flex-start;
  margin-bottom: 24px;
}
.cs-prep-icon { font-size: 2rem; line-height: 1; }
.cs-prep-header h1 { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0; }
.cs-prep-sub { color: #6b7280; font-size: 0.92rem; margin: 4px 0 0; line-height: 1.5; }

.cs-prep-state, .cs-prep-empty {
  padding: 24px; text-align: center; color: #6b7280; background: #f9fafb;
  border-radius: 10px; font-size: 0.9rem;
}

.cs-prep-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; padding: 0 4px;
}
.cs-prep-count { font-size: 0.82rem; color: #6b7280; font-weight: 500; }
.cs-prep-toolbar-actions { display: flex; gap: 12px; }
.cs-prep-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 0.82rem; color: #1A80E5; font-weight: 500;
}
.cs-prep-link:hover { text-decoration: underline; }

.cs-prep-list {
  border: 1px solid #e5e7eb; border-radius: 10px;
  margin-bottom: 20px; overflow: hidden;
  max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column;
}
.cs-prep-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; font-size: 0.9rem;
  border: none; background: white;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer; text-align: left; width: 100%;
  transition: background 0.12s;
}
.cs-prep-item:last-child { border-bottom: 0; }
.cs-prep-item:hover:not(:disabled) { background: #f9fafb; }
.cs-prep-item.selected { background: #EBF4FF; }
.cs-prep-item.selected:hover { background: #dbeafe; }
.cs-prep-item:disabled { opacity: 0.55; cursor: not-allowed; }
.cs-prep-check {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1.5px solid #d1d5db; border-radius: 6px;
  background: white; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; color: white;
  transition: all 0.12s;
}
.cs-prep-check.on {
  background: #1A80E5; border-color: #1A80E5;
}
.cs-prep-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-prep-item-name { color: #111827; font-weight: 500; }
.cs-prep-item-meta {
  font-size: 0.72rem; color: #6b7280;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

.cs-prep-progress { margin-bottom: 20px; }
.cs-prep-progress-bar {
  height: 8px; background: #e5e7eb; border-radius: 9999px; overflow: hidden;
}
.cs-prep-progress-fill {
  height: 100%; background: linear-gradient(90deg, #1A80E5, #14B8A6);
  border-radius: 9999px; transition: width 0.3s ease;
}
.cs-prep-step { font-size: 0.78rem; color: #6b7280; margin-top: 8px; }
.cs-prep-stats { color: #1565C0; font-weight: 500; }

.cs-prep-error {
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
  padding: 10px 12px; border-radius: 8px; font-size: 0.85rem; margin-bottom: 16px;
}

.cs-prep-actions { display: flex; gap: 10px; margin-bottom: 16px; }
.cs-prep-primary, .cs-prep-secondary {
  flex: 1 1; border: none; border-radius: 10px;
  padding: 12px; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.cs-prep-primary { background: #1A80E5; color: white; }
.cs-prep-primary:hover:not(:disabled) { background: #1570CC; }
.cs-prep-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.cs-prep-secondary { background: white; color: #374151; border: 1px solid #d1d5db; }
.cs-prep-secondary:hover { background: #f9fafb; }

.cs-prep-footnote {
  font-size: 0.75rem; color: #9ca3af; line-height: 1.5; text-align: center; margin: 0;
}

/* ============================================
   Property Logs — Audit-style Event Timeline
   Renders inside PropertyDashboard <Outlet>.
   All colours via var(--cs-*) tokens.
   ============================================ */

/* ── Page wrapper (inside Outlet) ──────────── */
.plogs-page {
  padding: 1.5rem;
  padding: var(--cs-space-6, 1.5rem);
  max-width: 900px;
  margin: 0 auto;
}

/* ── Header ────────────────────────────────── */
.plogs-header {
  margin-bottom: 1.25rem;
  margin-bottom: var(--cs-space-5, 1.25rem);
}

.plogs-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
}

.plogs-title-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.plogs-header h1 {
  font-size: 1.5rem;
  font-size: var(--cs-text-3xl, 1.5rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.plogs-subtitle {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  margin: 0.125rem 0 0;
  line-height: 1.4;
}

/* ── Error banner ──────────────────────────── */
.plogs-error {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  padding: 1rem 1.25rem;
  padding: var(--cs-space-4, 1rem) var(--cs-space-5, 1.25rem);
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
  border: 1px solid #fecaca;
  border: 1px solid var(--cs-red-border, #fecaca);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  margin-bottom: 1.25rem;
  margin-bottom: var(--cs-space-5, 1.25rem);
}

.plogs-error svg {
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.plogs-error span {
  flex: 1 1;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
  font-weight: 500;
}

.plogs-retry-btn {
  background: #fff;
  background: var(--cs-white, #fff);
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
  border: 1px solid #fecaca;
  border: 1px solid var(--cs-red-border, #fecaca);
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  min-height: 36px;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
}

.plogs-retry-btn:hover {
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
}

/* ── Toolbar ───────────────────────────────── */
.plogs-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  margin-bottom: var(--cs-space-5, 1.25rem);
  padding: 0.75rem 1rem;
  padding: var(--cs-space-3, 0.75rem) var(--cs-space-4, 1rem);
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
}

.plogs-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--cs-space-2, 0.5rem);
}

.plogs-filter-icon {
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  font-size: 0.8rem;
}

.plogs-type-select {
  padding: 0.4rem 0.65rem;
  border: 1px solid #d1d5db;
  border: 1px solid var(--cs-border-dark, #d1d5db);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: #fff;
  background: var(--cs-white, #fff);
  cursor: pointer;
  font-family: inherit;
  min-height: 36px;
  transition: border-color 0.2s ease;
  transition: border-color var(--cs-transition, 0.2s ease);
}

.plogs-type-select:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.12);
}

.plogs-search-wrap {
  position: relative;
  flex: 1 1;
  min-width: 140px;
}

.plogs-search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  font-size: 0.8rem;
  pointer-events: none;
}

.plogs-search-input {
  width: 100%;
  padding: 0.4rem 0.65rem 0.4rem 2rem;
  border: 1px solid #d1d5db;
  border: 1px solid var(--cs-border-dark, #d1d5db);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: #fff;
  background: var(--cs-white, #fff);
  font-family: inherit;
  min-height: 36px;
  transition: border-color 0.2s ease;
  transition: border-color var(--cs-transition, 0.2s ease);
  box-sizing: border-box;
}

.plogs-search-input:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.12);
}

.plogs-search-input::placeholder {
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

.plogs-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  margin-left: auto;
}

.plogs-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid #d1d5db;
  border: 1px solid var(--cs-border-dark, #d1d5db);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: #fff;
  background: var(--cs-white, #fff);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  min-height: 36px;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
}

.plogs-refresh-btn:hover:not(:disabled) {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

.plogs-refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.plogs-count {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  white-space: nowrap;
}

/* ── Timeline container ────────────────────── */
.plogs-timeline {
  position: relative;
}

.plogs-timeline::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
  background: var(--cs-border, #e5e7eb);
  border-radius: 1px;
}

/* ── Log list ──────────────────────────────── */
.plogs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Log item ──────────────────────────────── */
.plogs-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  padding: 0.75rem 1rem 0.75rem 0;
  padding: var(--cs-space-3, 0.75rem) var(--cs-space-4, 1rem) var(--cs-space-3, 0.75rem) 0;
  position: relative;
  margin-bottom: 0.25rem;
  margin-bottom: var(--cs-space-1, 0.25rem);
}

/* Timeline dot */
.plogs-item-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.75rem;
  position: relative;
  z-index: 1;
  border: 2px solid #fff;
  border: 2px solid var(--cs-white, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  box-shadow: var(--cs-shadow-xs, 0 1px 2px rgba(0,0,0,0.05));
}

/* Dot type colors */
.plogs-item.log-type-info .plogs-item-dot {
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

.plogs-item.log-type-success .plogs-item-dot {
  background: #f0fdf4;
  background: var(--cs-green-light, #f0fdf4);
  color: #16a34a;
  color: var(--cs-green-dark, #16a34a);
}

.plogs-item.log-type-warn .plogs-item-dot {
  background: #fffbeb;
  background: var(--cs-amber-light, #fffbeb);
  color: #d97706;
  color: var(--cs-amber-dark, #d97706);
}

.plogs-item.log-type-danger .plogs-item-dot {
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
}

.plogs-item.log-type-neutral .plogs-item-dot {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

/* Content card */
.plogs-item-content {
  flex: 1 1;
  min-width: 0;
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  padding: 0.75rem 1rem;
  padding: var(--cs-space-3, 0.75rem) var(--cs-space-4, 1rem);
  transition: border-color 0.2s ease,
              box-shadow 0.2s ease;
  transition: border-color var(--cs-transition, 0.2s ease),
              box-shadow var(--cs-transition, 0.2s ease);
}

.plogs-item-content:hover {
  border-color: #d1d5db;
  border-color: var(--cs-border-dark, #d1d5db);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  box-shadow: var(--cs-shadow-xs, 0 1px 2px rgba(0,0,0,0.05));
}

.plogs-item-desc {
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 500;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  line-height: 1.45;
  margin: 0 0 0.35rem;
}

.plogs-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  line-height: 1.4;
}

.plogs-meta-user,
.plogs-meta-time {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.plogs-meta-user svg,
.plogs-meta-time svg {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* ── Type badge ────────────────────────────── */
.plogs-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  border-radius: var(--cs-radius-full, 9999px);
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 600;
  white-space: nowrap;
}

.plogs-type-badge.log-type-info {
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

.plogs-type-badge.log-type-success {
  background: #f0fdf4;
  background: var(--cs-green-light, #f0fdf4);
  color: #16a34a;
  color: var(--cs-green-dark, #16a34a);
}

.plogs-type-badge.log-type-warn {
  background: #fffbeb;
  background: var(--cs-amber-light, #fffbeb);
  color: #d97706;
  color: var(--cs-amber-dark, #d97706);
}

.plogs-type-badge.log-type-danger {
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
}

.plogs-type-badge.log-type-neutral {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

/* ── Skeleton loader ───────────────────────── */
.plogs-skeleton-list {
  position: relative;
  padding-left: 0;
}

.plogs-skeleton-list::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
  background: var(--cs-border, #e5e7eb);
  border-radius: 1px;
}

.plogs-skeleton-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  padding: 0.75rem 1rem 0.75rem 0;
  padding: var(--cs-space-3, 0.75rem) var(--cs-space-4, 1rem) var(--cs-space-3, 0.75rem) 0;
}

.plogs-skeleton-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.plogs-skeleton-body {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  padding: 0.75rem 1rem;
  padding: var(--cs-space-3, 0.75rem) var(--cs-space-4, 1rem);
}

.plogs-skeleton-line {
  height: 12px;
  border-radius: 4px;
  border-radius: var(--cs-radius-sm, 4px);
}

.plogs-skeleton-long  { width: 80%; }
.plogs-skeleton-med   { width: 55%; }
.plogs-skeleton-short { width: 35%; }

.plogs-pulse {
  background: linear-gradient(
    90deg,
    #f3f4f6 25%,
    #f9fafb 50%,
    #f3f4f6 75%
  );
  background: linear-gradient(
    90deg,
    var(--cs-bg, #f3f4f6) 25%,
    var(--cs-bg-alt, #f9fafb) 50%,
    var(--cs-bg, #f3f4f6) 75%
  );
  background-size: 200% 100%;
  animation: plogs-shimmer 1.5s ease infinite;
}

@keyframes plogs-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Empty state ───────────────────────────── */
.plogs-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  padding: var(--cs-space-12, 3rem) var(--cs-space-6, 1.5rem);
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
}

.plogs-empty-icon {
  font-size: 2.5rem;
  color: #d1d5db;
  color: var(--cs-border-dark, #d1d5db);
  margin-bottom: 1rem;
  margin-bottom: var(--cs-space-4, 1rem);
}

.plogs-empty h3 {
  font-size: 1rem;
  font-size: var(--cs-text-lg, 1rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 0.5rem;
}

.plogs-empty p {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  margin: 0;
  line-height: 1.5;
  max-width: 380px;
  margin: 0 auto;
}

/* ── Focus-visible ─────────────────────────── */
.plogs-type-select:focus-visible,
.plogs-search-input:focus-visible,
.plogs-refresh-btn:focus-visible,
.plogs-retry-btn:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 2px;
}

/* ── Responsive: Tablet ────────────────────── */
@media (max-width: 768px) {
  .plogs-page {
    padding: 1rem;
    padding: var(--cs-space-4, 1rem);
  }

  .plogs-header h1 {
    font-size: 1.25rem;
    font-size: var(--cs-text-2xl, 1.25rem);
  }

  .plogs-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    gap: var(--cs-space-2, 0.5rem);
  }

  .plogs-toolbar-left {
    width: 100%;
  }

  .plogs-type-select {
    flex: 1 1;
  }

  .plogs-search-wrap {
    min-width: auto;
  }

  .plogs-toolbar-right {
    margin-left: 0;
    justify-content: space-between;
  }

  .plogs-refresh-label {
    display: none;
  }

  .plogs-timeline::before {
    left: 16px;
  }
}

/* ── Responsive: Small mobile ──────────────── */
@media (max-width: 480px) {
  .plogs-page {
    padding: 0.75rem;
    padding: var(--cs-space-3, 0.75rem);
  }

  .plogs-header h1 {
    font-size: 1.125rem;
    font-size: var(--cs-text-xl, 1.125rem);
  }

  .plogs-title-icon {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }

  .plogs-item {
    gap: 0.5rem;
    gap: var(--cs-space-2, 0.5rem);
  }

  .plogs-item-dot {
    width: 28px;
    height: 28px;
    font-size: 0.65rem;
  }

  .plogs-timeline::before {
    left: 13px;
  }

  .plogs-skeleton-list::before {
    left: 13px;
  }

  .plogs-skeleton-dot {
    width: 28px;
    height: 28px;
  }

  .plogs-item-content {
    padding: 0.5rem 0.75rem;
    padding: var(--cs-space-2, 0.5rem) var(--cs-space-3, 0.75rem);
  }

  .plogs-item-desc {
    font-size: 0.8125rem;
    font-size: var(--cs-text-sm, 0.8125rem);
  }

  .plogs-item-meta {
    font-size: 0.7rem;
    font-size: var(--cs-text-xs, 0.7rem);
    gap: 0.5rem;
    gap: var(--cs-space-2, 0.5rem);
  }

  .plogs-type-badge {
    font-size: 0.6rem;
  }
}

/* ============================================
   Activity Page — CloudSafe Design System
   Renders inside PropertyDashboard <Outlet>.
   All colours via var(--cs-*) tokens.
   ============================================ */

/* ── Page wrapper ───────────────────────────── */
.activity-page {
  padding: 1.5rem;
  padding: var(--cs-space-6, 1.5rem);
  max-width: 860px;
  margin: 0 auto;
}

/* ── Page header ────────────────────────────── */
.activity-page-header {
  margin-bottom: 1.5rem;
  margin-bottom: var(--cs-space-6, 1.5rem);
}

.activity-page-header h1 {
  font-size: 1.5rem;
  font-size: var(--cs-text-3xl, 1.5rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 0.25rem;
  letter-spacing: -0.02em;
}

.activity-page-subtitle {
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  margin: 0;
  line-height: 1.5;
}

/* ── Filter bar ─────────────────────────────── */
.activity-filter-bar {
  display: flex;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  margin-bottom: var(--cs-space-5, 1.25rem);
}

.activity-filter-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border: 1px solid var(--cs-border-dark, #d1d5db);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: #fff;
  background: var(--cs-white, #fff);
  cursor: pointer;
  font-family: inherit;
  min-height: 40px;
  transition: border-color 0.2s ease;
  transition: border-color var(--cs-transition, 0.2s ease);
}

.activity-filter-select:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.12);
}

.activity-search-wrap {
  position: relative;
  flex: 1 1;
  min-width: 180px;
}

.activity-search-wrap .search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  font-size: 0.85rem;
  pointer-events: none;
}

.activity-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid #d1d5db;
  border: 1px solid var(--cs-border-dark, #d1d5db);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: #fff;
  background: var(--cs-white, #fff);
  font-family: inherit;
  min-height: 40px;
  transition: border-color 0.2s ease;
  transition: border-color var(--cs-transition, 0.2s ease);
  box-sizing: border-box;
}

.activity-search-input:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.12);
}

.activity-search-input::placeholder {
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

.activity-entry-count {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  white-space: nowrap;
  margin-left: auto;
}

/* ── Date group ─────────────────────────────── */
.activity-date-group {
  margin-bottom: 1.25rem;
  margin-bottom: var(--cs-space-5, 1.25rem);
}

.activity-date-label {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 0.5rem;
  padding-bottom: var(--cs-space-2, 0.5rem);
  margin-bottom: 0.75rem;
  margin-bottom: var(--cs-space-3, 0.75rem);
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
}

/* ── Activity feed list ─────────────────────── */
.activity-feed {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Activity item ──────────────────────────── */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  padding: 1rem;
  padding: var(--cs-space-4, 1rem);
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  margin-bottom: 0.5rem;
  margin-bottom: var(--cs-space-2, 0.5rem);
  transition: box-shadow 0.2s ease,
              border-color 0.2s ease;
  transition: box-shadow var(--cs-transition, 0.2s ease),
              border-color var(--cs-transition, 0.2s ease);
}

.activity-item:hover {
  border-color: #d1d5db;
  border-color: var(--cs-border-dark, #d1d5db);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  box-shadow: var(--cs-shadow-xs, 0 1px 2px rgba(0,0,0,0.05));
}

.activity-item:focus-within {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.12);
}

/* Icon dot */
.activity-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.activity-item-icon.icon-failed   { background: #fef2f2; background: var(--cs-red-light, #fef2f2);   color: #dc2626;   color: var(--cs-red-dark, #dc2626); }
.activity-item-icon.icon-passed   { background: #f0fdf4; background: var(--cs-green-light, #f0fdf4); color: #16a34a; color: var(--cs-green-dark, #16a34a); }
.activity-item-icon.icon-added    { background: #EBF4FF; background: var(--cs-blue-light, #EBF4FF);  color: #1A80E5;  color: var(--cs-blue, #1A80E5); }
.activity-item-icon.icon-scheduled { background: #fffbeb; background: var(--cs-amber-light, #fffbeb); color: #d97706; color: var(--cs-amber-dark, #d97706); }
.activity-item-icon.icon-default  { background: #f9fafb; background: var(--cs-bg-alt, #f9fafb);      color: #6b7280;      color: var(--cs-text-muted, #6b7280); }

/* Content */
.activity-item-body {
  flex: 1 1;
  min-width: 0;
}

.activity-item-message {
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 500;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  line-height: 1.45;
  margin: 0 0 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  line-height: 1.4;
}

.activity-item-meta .meta-sep {
  color: #d1d5db;
  color: var(--cs-border-dark, #d1d5db);
}

/* Status pill */
.activity-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  border-radius: var(--cs-radius-full, 9999px);
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 600;
  white-space: nowrap;
  text-transform: capitalize;
}

.activity-status-pill.pill-failed    { background: #fef2f2; background: var(--cs-red-light, #fef2f2);   color: #dc2626;   color: var(--cs-red-dark, #dc2626); }
.activity-status-pill.pill-passed    { background: #f0fdf4; background: var(--cs-green-light, #f0fdf4); color: #16a34a; color: var(--cs-green-dark, #16a34a); }
.activity-status-pill.pill-added     { background: #EBF4FF; background: var(--cs-blue-light, #EBF4FF);  color: #1A80E5;  color: var(--cs-blue, #1A80E5); }
.activity-status-pill.pill-scheduled { background: #fffbeb; background: var(--cs-amber-light, #fffbeb); color: #d97706; color: var(--cs-amber-dark, #d97706); }
.activity-status-pill.pill-default   { background: #f9fafb; background: var(--cs-bg-alt, #f9fafb);      color: #6b7280;      color: var(--cs-text-muted, #6b7280); }

/* Asset type tag */
.activity-asset-tag {
  display: inline-block;
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  border-radius: var(--cs-radius-full, 9999px);
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.125rem;
}

/* ── Loading skeleton ───────────────────────── */
.activity-skeleton-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  padding: 1rem;
  padding: var(--cs-space-4, 1rem);
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  margin-bottom: 0.5rem;
  margin-bottom: var(--cs-space-2, 0.5rem);
}

.skeleton-pulse {
  background: linear-gradient(90deg, #f3f4f6 25%, #f9fafb 50%, #f3f4f6 75%);
  background: linear-gradient(90deg, var(--cs-bg, #f3f4f6) 25%, var(--cs-bg-alt, #f9fafb) 50%, var(--cs-bg, #f3f4f6) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease infinite;
  border-radius: 4px;
  border-radius: var(--cs-radius-sm, 4px);
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  flex-shrink: 0;
}

.skeleton-body {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-line {
  height: 14px;
}

.skeleton-line-short {
  width: 60%;
}

.skeleton-line-long {
  width: 85%;
}

.skeleton-line-xs {
  width: 40%;
  height: 12px;
}

/* ── Empty state ────────────────────────────── */
.activity-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  padding: var(--cs-space-12, 3rem) var(--cs-space-6, 1.5rem);
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
}

.activity-empty-icon {
  font-size: 2.5rem;
  color: #d1d5db;
  color: var(--cs-border-dark, #d1d5db);
  margin-bottom: 1rem;
  margin-bottom: var(--cs-space-4, 1rem);
}

.activity-empty h3 {
  font-size: 1rem;
  font-size: var(--cs-text-lg, 1rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin: 0 0 0.5rem;
}

.activity-empty p {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  margin: 0;
  line-height: 1.5;
}

/* ── Error state ────────────────────────────── */
.activity-error {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  padding: 1rem 1.25rem;
  padding: var(--cs-space-4, 1rem) var(--cs-space-5, 1.25rem);
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
  border: 1px solid #fecaca;
  border: 1px solid var(--cs-red-border, #fecaca);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  margin-bottom: 1.25rem;
  margin-bottom: var(--cs-space-5, 1.25rem);
}

.activity-error svg {
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.activity-error span {
  flex: 1 1;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
  font-weight: 500;
}

.activity-error-retry {
  background: #fff;
  background: var(--cs-white, #fff);
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
  border: 1px solid #fecaca;
  border: 1px solid var(--cs-red-border, #fecaca);
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  min-height: 36px;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
}

.activity-error-retry:hover {
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
}

/* ── Focus-visible ──────────────────────────── */
.activity-filter-select:focus-visible,
.activity-search-input:focus-visible,
.activity-error-retry:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 2px;
}

/* ── Responsive: Tablet ─────────────────────── */
@media (max-width: 768px) {
  .activity-page {
    padding: 1rem;
    padding: var(--cs-space-4, 1rem);
  }

  .activity-page-header h1 {
    font-size: 1.25rem;
    font-size: var(--cs-text-2xl, 1.25rem);
  }

  .activity-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .activity-filter-select {
    width: 100%;
  }

  .activity-search-wrap {
    min-width: auto;
  }

  .activity-entry-count {
    margin-left: 0;
    text-align: right;
  }
}

/* ── Responsive: Small mobile ───────────────── */
@media (max-width: 480px) {
  .activity-page {
    padding: 0.75rem;
    padding: var(--cs-space-3, 0.75rem);
  }

  .activity-page-header h1 {
    font-size: 1.125rem;
    font-size: var(--cs-text-xl, 1.125rem);
  }

  .activity-item {
    padding: 0.75rem;
    padding: var(--cs-space-3, 0.75rem);
    gap: 0.5rem;
    gap: var(--cs-space-2, 0.5rem);
  }

  .activity-item-icon {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .activity-item-message {
    font-size: 0.8125rem;
    font-size: var(--cs-text-sm, 0.8125rem);
  }

  .activity-item-meta {
    font-size: 0.7rem;
    font-size: var(--cs-text-xs, 0.7rem);
    gap: 0.5rem;
    gap: var(--cs-space-2, 0.5rem);
  }

  .activity-asset-tag {
    font-size: 0.65rem;
  }
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-radius: 9999px;
  border-radius: var(--cs-radius-full, 9999px);
  line-height: 1;
}

/* sizes */
.status-badge-xs { font-size: 0.65rem; padding: 2px 7px; }
.status-badge-sm { font-size: 0.72rem; padding: 3px 9px; }
.status-badge-md { font-size: 0.8rem;  padding: 4px 11px; }
.status-badge-lg { font-size: 0.875rem;padding: 5px 13px; }

/* dot */
.sb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* colour variants */
.sb-green  { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.sb-amber  { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.sb-red    { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.sb-gray   { background: #f9fafb; color: #6b7280; border: 1px solid #e5e7eb; }
.sb-blue   { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.sb-purple { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }

/* Compliance protection states */
.sb-hold   { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.sb-frozen { background: #e0f2fe; color: #0c4a6e; border: 1px solid #7dd3fc; }
.sb-locked { background: #f5f3ff; color: #7c3aed; border: 1px solid #c4b5fd; }
.sb-teal   { background: #f0fdfa; color: #0f766e; border: 1px solid #99f6e4; }

/* ============================================================
   Inspections Page
   Prefix: insp-   (avoids collision with other components)
   Tokens: --cs-*  (from tokens.css)
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.insp-page {
  width: 100%;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  display: flex;
  flex-direction: column;
}

.insp-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 0 48px;
  box-sizing: border-box;
}

/* ── Page header ───────────────────────────────────────────── */
.insp-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.insp-header-left {
  min-width: 0;
  flex: 1 1;
  text-align: left;
}

.insp-page-title {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 800;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.insp-page-title-icon {
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  font-size: 1.1rem;
}

.insp-property-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  margin-top: 4px;
}

.insp-property-address {
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  margin-top: 2px;
}

.insp-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  flex-wrap: wrap;
}

.insp-last-updated {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.insp-overdue-flag {
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
  font-weight: 600;
}

.insp-duesoon-flag {
  color: #d97706;
  color: var(--cs-amber-dark, #d97706);
  font-weight: 600;
}

/* ── Primary CTA ───────────────────────────────────────────── */
.insp-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  border: none;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 10px 20px;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  min-height: 42px;
  transition: background 0.12s ease;
  transition: background var(--cs-transition-fast, 0.12s ease);
}
.insp-new-btn:hover { background: #1565C0; background: var(--cs-blue-dark, #1565C0); }
.insp-new-btn:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 2px;
}

/* ── Stats row ─────────────────────────────────────────────── */
.insp-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

.insp-stat-card {
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}

.insp-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  border-radius: 12px 12px 0 0;
}

.insp-stat-card.insp-stat-alert::before {
  background: #ef4444;
  background: var(--cs-red, #ef4444);
}

.insp-stat-card.insp-stat-warn::before {
  background: #f59e0b;
  background: var(--cs-amber, #f59e0b);
}

.insp-stat-card.insp-stat-green::before {
  background: #22c55e;
  background: var(--cs-green, #22c55e);
}

.insp-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.insp-stat-card.insp-stat-alert .insp-stat-value {
  color: #ef4444;
  color: var(--cs-red, #ef4444);
}

.insp-stat-card.insp-stat-warn .insp-stat-value {
  color: #f59e0b;
  color: var(--cs-amber, #f59e0b);
}

.insp-stat-label {
  font-size: 0.75rem;
  font-size: var(--cs-text-xs, 0.75rem);
  font-weight: 600;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* ── Filters ───────────────────────────────────────────────── */
.insp-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  padding: 12px 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.insp-filter-select {
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-family: inherit;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  min-height: 38px;
  min-width: 150px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}
.insp-filter-select:focus {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 2px rgba(26, 128, 229, 0.12);
}

.insp-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 180px;
}

.insp-search-icon {
  position: absolute;
  left: 10px;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  font-size: 0.8rem;
  pointer-events: none;
}

.insp-search-input {
  width: 100%;
  padding: 8px 32px 8px 34px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-family: inherit;
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  outline: none;
  min-height: 38px;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}
.insp-search-input:focus {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 2px rgba(26, 128, 229, 0.12);
}
.insp-search-input::placeholder { color: #9ca3af; color: var(--cs-text-faint, #9ca3af); }

.insp-search-clear {
  position: absolute;
  right: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  cursor: pointer;
  padding: 0;
}
.insp-search-clear:hover {
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
}

.insp-refresh-btn {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  padding: 8px;
  min-width: 38px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.insp-refresh-btn:hover {
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
}

.insp-view-toggle {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.insp-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: #fff;
  background: var(--cs-white, #fff);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background var(--cs-transition-fast), color var(--cs-transition-fast);
  padding: 0;
}
.insp-view-btn.active,
.insp-view-btn:hover {
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
}
.insp-view-btn:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 2px;
}

/* ── Table card ────────────────────────────────────────────── */
.insp-table-card {
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  box-shadow: var(--cs-shadow-xs);
  overflow: hidden;
}

.insp-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.insp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  min-width: 700px;
}

.insp-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 600;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
  white-space: nowrap;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.insp-table td {
  padding: 12px 14px;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.insp-table tbody tr {
  transition: background var(--cs-transition-fast);
}
.insp-table tbody tr:hover {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
}
.insp-table tbody tr:last-child td {
  border-bottom: none;
}

/* Name cell */
.insp-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.insp-name-icon {
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.insp-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

/* Type badge */
.insp-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  border-radius: var(--cs-radius-full, 9999px);
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 500;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  white-space: nowrap;
}

/* Date cell */
.insp-date-cell {
  white-space: nowrap;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

/* Action buttons */
.insp-actions-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}

.insp-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: transparent;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  transition: background var(--cs-transition-fast), color var(--cs-transition-fast);
}
.insp-action-btn:hover {
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}
.insp-action-btn:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 1px;
}

.insp-action-delete:hover {
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
}

/* ── Grid view ─────────────────────────────────────────────── */
.insp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.insp-grid-card {
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  padding: 16px;
  box-shadow: var(--cs-shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--cs-transition-fast);
}
.insp-grid-card:hover {
  box-shadow: var(--cs-shadow-sm);
}

.insp-grid-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.insp-grid-file-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.insp-grid-card-info {
  min-width: 0;
  flex: 1 1;
}

.insp-grid-card-name {
  margin: 0;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.insp-grid-card-type {
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  margin-top: 2px;
}

.insp-grid-card-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.insp-grid-card-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  min-width: 0;
}

.insp-grid-card-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

/* ── Mobile card list ──────────────────────────────────────── */
.insp-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insp-mobile-card {
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  padding: 14px;
  box-shadow: var(--cs-shadow-xs);
}

.insp-mobile-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.insp-mobile-file-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.insp-mobile-card-info {
  min-width: 0;
  flex: 1 1;
}

.insp-mobile-card-name {
  margin: 0;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.insp-mobile-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.insp-mobile-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
}

.insp-mobile-meta-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  min-width: 0;
}

.insp-mobile-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.insp-mobile-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: transparent;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  transition: background var(--cs-transition-fast), color var(--cs-transition-fast);
}
.insp-mobile-action-btn:hover {
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

/* ── Empty state ───────────────────────────────────────────── */
.insp-empty-wrap {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}

.insp-empty-card {
  text-align: center;
  padding: 48px 32px;
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.insp-empty-icon {
  font-size: 3rem;
  color: #d1d5db;
  margin-bottom: 16px;
}

.insp-empty-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.insp-empty-desc {
  margin: 0 0 24px;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  line-height: 1.6;
}

/* ── Loading state ─────────────────────────────────────────── */
.insp-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  gap: 12px;
}

.insp-loading-icon {
  font-size: 2rem;
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

/* ── Error state ───────────────────────────────────────────── */
.insp-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  gap: 12px;
  text-align: center;
}

.insp-error-icon {
  font-size: 2rem;
  color: #ef4444;
  color: var(--cs-red, #ef4444);
}

.insp-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  background: var(--cs-white, #fff);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  min-height: 38px;
  transition: background var(--cs-transition-fast);
}
.insp-retry-btn:hover {
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
}

/* ── Footer ────────────────────────────────────────────────── */
.insp-footer {
  padding: 14px 0 0;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

/* ── Modal ─────────────────────────────────────────────────── */
.insp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 16px;
}

.insp-modal {
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  box-shadow: var(--cs-shadow-xl);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.insp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
}

.insp-modal-title {
  margin: 0;
  font-size: 1.125rem;
  font-size: var(--cs-text-xl, 1.125rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  display: flex;
  align-items: center;
  gap: 8px;
}

.insp-modal-title-icon {
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

.insp-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: transparent;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  transition: background var(--cs-transition-fast);
}
.insp-modal-close:hover {
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

/* ── Form ──────────────────────────────────────────────────── */
.insp-form {
  padding: 20px 24px;
  text-align: left;
}

.insp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 14px;
  gap: 14px;
  margin-bottom: 14px;
}

.insp-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.insp-form-label {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 500;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  text-align: left;
}

.insp-required {
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
}

.insp-form-input,
.insp-form-select {
  width: 100%;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 9px 12px;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-family: inherit;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  background: #fff;
  background: var(--cs-white, #fff);
  min-height: 40px;
  box-sizing: border-box;
  transition: border-color var(--cs-transition-fast);
}
.insp-form-input:focus,
.insp-form-select:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 2px rgba(26, 128, 229, 0.15);
}
.insp-form-input::placeholder { color: #9ca3af; color: var(--cs-text-faint, #9ca3af); }

.insp-form-textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 9px 12px;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-family: inherit;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  background: #fff;
  background: var(--cs-white, #fff);
  min-height: 80px;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color var(--cs-transition-fast);
}
.insp-form-textarea:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 2px rgba(26, 128, 229, 0.15);
}
.insp-form-textarea::placeholder { color: #9ca3af; color: var(--cs-text-faint, #9ca3af); }

.insp-form-hint {
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

/* ── Modal actions ─────────────────────────────────────────── */
.insp-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
}

.insp-btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: #fff;
  background: var(--cs-white, #fff);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  min-height: 40px;
  transition: background var(--cs-transition-fast);
}
.insp-btn-cancel:hover { background: #f3f4f6; background: var(--cs-bg, #f3f4f6); }

.insp-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 40px;
  transition: background var(--cs-transition-fast);
}
.insp-btn-submit:hover:not(:disabled) { background: #1565C0; background: var(--cs-blue-dark, #1565C0); }
.insp-btn-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Skeleton loading ──────────────────────────────────────── */
.insp-skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.insp-skel-circle {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: #e5e7eb;
  flex-shrink: 0;
  animation: insp-shimmer 1.5s infinite;
}

.insp-skel-line {
  border-radius: 4px;
  background: #e5e7eb;
  animation: insp-shimmer 1.5s infinite;
}

.insp-skel-title { width: 55%; height: 14px; margin-bottom: 8px; }
.insp-skel-msg   { width: 80%; height: 12px; }

@keyframes insp-shimmer {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

/* ── Screen reader only ────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
  .insp-content {
    padding: 8px 0;
  }

  .insp-page-title {
    font-size: 1.25rem;
    font-size: var(--cs-text-2xl, 1.25rem);
  }

  .insp-page-header {
    flex-direction: column;
    gap: 12px;
  }

  .insp-new-btn {
    width: 100%;
    justify-content: center;
  }

  .insp-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .insp-filters {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .insp-filter-select {
    width: 100%;
    min-width: 0;
  }

  .insp-search-wrap {
    flex: 1 1 100%;
    min-width: 0;
  }

  .insp-form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .insp-modal-actions {
    flex-direction: column-reverse;
  }

  .insp-btn-cancel,
  .insp-btn-submit {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .insp-content {
    padding: 8px 0;
  }

  .insp-page-title {
    font-size: 1.125rem;
    font-size: var(--cs-text-xl, 1.125rem);
    gap: 8px;
  }

  .insp-page-title-icon { font-size: 0.95rem; }

  .insp-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .insp-mobile-card {
    border-radius: 8px;
    border-radius: var(--cs-radius, 8px);
  }

  .insp-empty-card { padding: 40px 20px; }
  .insp-empty-icon { font-size: 2.5rem; }
  .insp-empty-title { font-size: 1.1rem; }
  .insp-empty-desc { font-size: 0.8125rem; font-size: var(--cs-text-sm, 0.8125rem); }

  .insp-modal {
    margin: 0;
    border-radius: 12px 12px 0 0;
    border-radius: var(--cs-radius-lg, 12px) var(--cs-radius-lg, 12px) 0 0;
    max-height: 95vh;
  }

  .insp-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
}

@media (max-width: 360px) {
  .insp-content {
    padding: 8px 0;
  }

  .insp-stats-row {
    gap: 4px;
  }

  .insp-mobile-card {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .insp-skel-circle,
  .insp-skel-line { animation: none; }
}

/* ============================================================
   Documents — Compliance Document Management
   Prefix: docs-  (avoids collision with other components)
   Uses CloudSafe design tokens (--cs-*)
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.docs-page {
  width: 100%;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  display: flex;
  flex-direction: column;
}

.docs-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 0 48px;
  box-sizing: border-box;
}

/* ── Page header ───────────────────────────────────────────── */
.docs-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.docs-header-left {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.docs-page-title {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 800;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.docs-page-title-icon {
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  font-size: 1.3rem;
  flex-shrink: 0;
}

.docs-property-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  margin-top: 4px;
}

.docs-property-address {
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  margin-top: 2px;
}

/* ── Upload button ─────────────────────────────────────────── */
.docs-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  border: none;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 10px 20px;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  transition: background 0.2s ease, transform 0.1s ease;
  flex-shrink: 0;
}

.docs-upload-btn:hover {
  background: #1565C0;
  background: var(--cs-blue-dark, #1565C0);
  transform: translateY(-1px);
}

.docs-upload-btn:active {
  transform: translateY(0);
}

/* ── Stat cards ────────────────────────────────────────────── */
.docs-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

.docs-stat-card {
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}

.docs-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  border-radius: 12px 12px 0 0;
}

.docs-stat-card.docs-stat-alert::before {
  background: #ef4444;
  background: var(--cs-red, #ef4444);
}

.docs-stat-card.docs-stat-warn::before {
  background: #f59e0b;
  background: var(--cs-amber, #f59e0b);
}

.docs-stat-card.docs-stat-compliance::before {
  background: #22c55e;
  background: var(--cs-green, #22c55e);
}

.docs-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.docs-stat-card.docs-stat-alert .docs-stat-value {
  color: #ef4444;
  color: var(--cs-red, #ef4444);
}

.docs-stat-card.docs-stat-warn .docs-stat-value {
  color: #f59e0b;
  color: var(--cs-amber, #f59e0b);
}

.docs-stat-label {
  font-size: 0.75rem;
  font-size: var(--cs-text-xs, 0.75rem);
  font-weight: 600;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.docs-stat-bar {
  height: 4px;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
}

.docs-stat-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* ── Filters bar ───────────────────────────────────────────── */
.docs-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  padding: 12px 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.docs-filter-select {
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-family: inherit;
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  min-width: 150px;
  outline: none;
  min-height: 38px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.docs-filter-select:focus {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 2px rgba(26, 128, 229, 0.12);
}

.docs-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 180px;
}

.docs-search-icon {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  font-size: 0.82rem;
  pointer-events: none;
}

.docs-search-input {
  width: 100%;
  padding: 8px 32px 8px 34px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-family: inherit;
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  outline: none;
  min-height: 38px;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.docs-search-input:focus {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 2px rgba(26, 128, 229, 0.12);
}

.docs-search-clear {
  position: absolute;
  right: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  cursor: pointer;
  padding: 0;
  font-size: 0.75rem;
}

.docs-search-clear:hover {
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
}

.docs-refresh-btn {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  padding: 8px;
  min-width: 38px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.docs-refresh-btn:hover {
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
}

/* ── Category sections (collapsible) ───────────────────────── */
.docs-category-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.docs-category-section {
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.docs-category-section:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.docs-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s ease;
  gap: 12px;
}

.docs-category-header:hover {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
}

.docs-category-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.docs-category-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.docs-category-chevron {
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  font-size: 0.7rem;
  flex-shrink: 0;
  width: 14px;
  transition: transform 0.2s ease;
}

.docs-category-name {
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  letter-spacing: -0.01em;
}

.docs-category-count {
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 700;
  color: #fff;
  color: var(--cs-white, #fff);
  background: #1A80E5;
  background: var(--cat-color, var(--cs-blue, #1A80E5));
  padding: 2px 8px;
  border-radius: 9999px;
  border-radius: var(--cs-radius-full, 9999px);
  min-width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.docs-category-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.docs-category-alert {
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 600;
  color: #ef4444;
  color: var(--cs-red, #ef4444);
  display: flex;
  align-items: center;
  gap: 4px;
}

.docs-category-warn {
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 600;
  color: #f59e0b;
  color: var(--cs-amber, #f59e0b);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Category body (document rows) ─────────────────────────── */
.docs-category-body {
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
}

.docs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 12px;
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
  transition: background 0.12s ease;
}

.docs-row:last-child {
  border-bottom: none;
}

.docs-row:hover {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
}

.docs-row-expired {
  background: rgba(239, 68, 68, 0.03);
}

.docs-row-expired:hover {
  background: rgba(239, 68, 68, 0.06);
}

.docs-row-expiring {
  background: rgba(245, 158, 11, 0.03);
}

.docs-row-expiring:hover {
  background: rgba(245, 158, 11, 0.06);
}

.docs-row-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1;
  min-width: 0;
}

.docs-row-icon {
  width: 34px;
  height: 34px;
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.docs-row-info {
  flex: 1 1;
  min-width: 0;
}

.docs-row-name {
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  line-height: 1.3;
  word-break: break-word;
}

.docs-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.docs-row-uploader {
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.docs-row-date {
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

.docs-row-summary {
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  margin-top: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Status badge ──────────────────────────────────────────── */
.docs-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  border-radius: var(--cs-radius-full, 9999px);
  font-size: 0.65rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.docs-status-badge.status-active {
  background: #f0fdf4;
  background: var(--cs-green-light, #f0fdf4);
  color: #16a34a;
  color: var(--cs-green-dark, #16a34a);
}

.docs-status-badge.status-expired {
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
}

.docs-status-badge.status-expiring {
  background: #fffbeb;
  background: var(--cs-amber-light, #fffbeb);
  color: #d97706;
  color: var(--cs-amber-dark, #d97706);
}

.docs-status-badge.status-missing {
  background: #f3f4f6;
  color: #6b7280;
}

/* ── Expiry tag ────────────────────────────────────────────── */
.docs-expiry-tag {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.docs-expiry-tag.expired {
  color: #ef4444;
  color: var(--cs-red, #ef4444);
  background: rgba(239, 68, 68, 0.08);
}

.docs-expiry-tag.expiring {
  color: #d97706;
  color: var(--cs-amber-dark, #d97706);
  background: rgba(245, 158, 11, 0.08);
}

.docs-expiry-tag.valid {
  color: #16a34a;
  color: var(--cs-green-dark, #16a34a);
  background: rgba(34, 197, 94, 0.06);
}

/* ── Action buttons ────────────────────────────────────────── */
.docs-actions-cell {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.docs-action-btn {
  background: none;
  border: none;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  padding: 6px;
  border-radius: 6px;
  border-radius: var(--cs-radius-sm, 6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  transition: all 0.12s ease;
}

.docs-action-btn:hover {
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

.docs-action-btn.docs-action-delete:hover {
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
  color: #ef4444;
  color: var(--cs-red, #ef4444);
}

/* ── Empty, loading, error states ──────────────────────────── */
.docs-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
}

.docs-empty-icon {
  font-size: 2.5rem;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  margin-bottom: 16px;
}

.docs-empty-title {
  font-size: 1rem;
  font-size: var(--cs-text-lg, 1rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  margin-bottom: 6px;
}

.docs-empty-desc {
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  margin-bottom: 20px;
}

.docs-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  gap: 12px;
}

.docs-loading-icon {
  font-size: 2rem;
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

.docs-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  gap: 12px;
  text-align: center;
}

.docs-error-icon {
  font-size: 2rem;
  color: #ef4444;
  color: var(--cs-red, #ef4444);
}

.docs-retry-btn {
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  border: none;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 8px 20px;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  min-height: 40px;
}

.docs-retry-btn:hover {
  background: #1565C0;
  background: var(--cs-blue-dark, #1565C0);
}

/* ── Footer ────────────────────────────────────────────────── */
.docs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 0;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

/* ── Modal ─────────────────────────────────────────────────── */
.docs-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 20px;
  animation: docs-fade-in 0.15s ease;
}

@keyframes docs-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.docs-modal {
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 16px;
  border-radius: var(--cs-radius-xl, 16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  animation: docs-slide-up 0.2s ease;
}

.docs-modal.docs-modal-wide {
  max-width: 720px;
}

@keyframes docs-slide-up {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.docs-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
  flex-shrink: 0;
}

.docs-modal-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  display: flex;
  align-items: center;
  gap: 8px;
}

.docs-modal-title-icon {
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

.docs-modal-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  transition: all 0.12s ease;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.docs-modal-close:hover {
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

/* ── Form ──────────────────────────────────────────────────── */
.docs-form {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1;
  overflow-y: auto;
}

.docs-form-error {
  padding: 10px 14px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.docs-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.docs-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.docs-form-label {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
}

.docs-form-label .docs-required {
  color: #ef4444;
  color: var(--cs-red, #ef4444);
  margin-left: 2px;
}

.docs-form-input,
.docs-form-select,
.docs-form-textarea {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-family: inherit;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: #fff;
  background: var(--cs-white, #fff);
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  min-height: 40px;
}

.docs-form-input:focus,
.docs-form-select:focus,
.docs-form-textarea:focus {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 2px rgba(26, 128, 229, 0.12);
}

.docs-form-textarea {
  resize: vertical;
  min-height: 64px;
  max-height: 120px;
}

.docs-form-hint {
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.docs-file-input-wrap input[type="file"] {
  width: 100%;
  padding: 9px 14px;
  border: 1px dashed #d1d5db;
  border: 1px dashed var(--cs-border-dark, #d1d5db);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-family: inherit;
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  cursor: pointer;
  min-height: 40px;
  box-sizing: border-box;
}

.docs-file-input-wrap input[type="file"]:focus {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  outline: none;
}

/* ── Category selector grid (in upload/edit modal) ─────────── */
.docs-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  position: relative;
}

.docs-category-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 2px solid #e5e7eb;
  border: 2px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: #fff;
  background: var(--cs-white, #fff);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 500;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  transition: all 0.15s ease;
  text-align: left;
  min-height: 38px;
}

.docs-category-option:hover {
  border-color: #1A80E5;
  border-color: var(--cat-color, var(--cs-blue, #1A80E5));
  background: rgba(26, 128, 229, 0.03);
}

.docs-category-option.selected {
  border-color: #1A80E5;
  border-color: var(--cat-color, var(--cs-blue, #1A80E5));
  background: color-mix(in srgb, #1A80E5 8%, white);
  background: color-mix(in srgb, var(--cat-color, var(--cs-blue, #1A80E5)) 8%, white);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-weight: 700;
  box-shadow: 0 0 0 1px #1A80E5;
  box-shadow: 0 0 0 1px var(--cat-color, var(--cs-blue, #1A80E5));
}

.docs-category-option-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.docs-category-option-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Modal actions ─────────────────────────────────────────── */
.docs-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
  flex-shrink: 0;
}

.docs-btn-cancel {
  padding: 10px 20px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  min-height: 44px;
  transition: all 0.12s ease;
}

.docs-btn-cancel:hover {
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
}

.docs-btn-submit {
  padding: 10px 24px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  border: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
}

.docs-btn-submit:hover:not(:disabled) {
  background: #1565C0;
  background: var(--cs-blue-dark, #1565C0);
}

.docs-btn-submit:disabled {
  background: #6b7280;
  background: var(--cs-text-muted, #6b7280);
  cursor: not-allowed;
}

/* ── Responsive: tablet ────────────────────────────────────── */
@media (max-width: 900px) {
  .docs-content {
    padding: 8px 0;
  }

  .docs-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .docs-category-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* ── Responsive: mobile ────────────────────────────────────── */

/* Pinpoint action button */
.pinpoint-action-btn {
  color: #8B5CF6 !important;
}
.pinpoint-action-btn:hover {
  color: #7C3AED !important;
}

.pinpoint-preview-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #EDE9FE, #F0F9FF);
  border: 1px solid #C4B5FD;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #6D28D9;
  font-size: 13px;
  font-weight: 500;
}

.pinpoint-preview-banner svg {
  font-size: 18px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .docs-content {
    padding: 8px 0;
  }

  .docs-page-header {
    flex-direction: column;
    gap: 12px;
  }

  .docs-page-title {
    font-size: 1.25rem;
  }

  .docs-upload-btn {
    width: 100%;
    justify-content: center;
  }

  .docs-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .docs-stat-card {
    padding: 14px 16px;
  }

  .docs-stat-value {
    font-size: 1.4rem;
  }

  .docs-filters {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .docs-filter-select {
    width: 100%;
    min-width: 0;
  }

  .docs-search-wrap {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Category sections mobile */
  .docs-category-header {
    padding: 12px 14px;
    flex-wrap: wrap;
  }

  .docs-category-header-right {
    margin-left: 52px;
    margin-top: -4px;
  }

  .docs-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px;
    gap: 8px;
  }

  .docs-actions-cell {
    width: 100%;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid #e5e7eb;
    border-top: 1px solid var(--cs-border, #e5e7eb);
  }

  .docs-action-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
  }

  /* Modal mobile */
  .docs-modal-overlay {
    padding: 8px;
    align-items: flex-end;
  }

  .docs-modal {
    max-height: 95vh;
    border-radius: 16px 16px 0 0;
    border-radius: var(--cs-radius-xl, 16px) var(--cs-radius-xl, 16px) 0 0;
  }

  .docs-form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .docs-modal-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .docs-btn-cancel,
  .docs-btn-submit {
    width: 100%;
    justify-content: center;
  }

  .docs-category-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
  }

  .docs-category-option {
    padding: 6px 8px;
    font-size: 0.65rem;
  }

  .docs-footer {
    font-size: 0.7rem;
    font-size: var(--cs-text-xs, 0.7rem);
  }
}

/* ── Responsive: small mobile ──────────────────────────────── */
@media (max-width: 480px) {
  .docs-content {
    padding: 8px 0;
  }

  .docs-page-title {
    font-size: 1.1rem;
  }

  .docs-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .docs-stat-value {
    font-size: 1.2rem;
  }

  .docs-stat-label {
    font-size: 0.6rem;
  }

  .docs-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Accessibility ─────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Pinpoint action button ──────────────────────────────── */
.docs-action-pinpoint { color: #8B5CF6 !important; }
.docs-action-pinpoint:hover { color: #7C3AED !important; }

.docs-pinpoint-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #EDE9FE, #F0F9FF);
  border: 1px solid #C4B5FD;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #6D28D9;
  font-size: 13px;
  font-weight: 500;
}
.docs-pinpoint-banner svg { font-size: 18px; flex-shrink: 0; }

/* ── Pinpoint toggle in upload form ──────────────────────── */
.docs-pinpoint-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-top: 4px;
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  border-radius: 8px;
}

.docs-pinpoint-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.docs-pinpoint-toggle input[type="checkbox"] {
  display: none;
}

.docs-pinpoint-toggle-slider {
  position: relative;
  width: 38px;
  height: 20px;
  background: #d1d5db;
  border-radius: 20px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.docs-pinpoint-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.docs-pinpoint-toggle input:checked + .docs-pinpoint-toggle-slider {
  background: #8B5CF6;
}

.docs-pinpoint-toggle input:checked + .docs-pinpoint-toggle-slider::after {
  transform: translateX(18px);
}

.docs-pinpoint-toggle-text {
  font-size: 13px;
  font-weight: 500;
  color: #4c1d95;
  display: flex;
  align-items: center;
  gap: 6px;
}

.docs-pinpoint-icon {
  color: #8B5CF6;
  font-size: 14px;
}

.docs-pinpoint-category-select {
  max-width: 180px;
  font-size: 12px !important;
  padding: 6px 10px !important;
}

/* ── Pinpoint convert button in edit modal ───────────────── */
.docs-pinpoint-convert-row {
  padding: 0 20px 12px;
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
  margin-top: 4px;
}

.docs-btn-pinpoint-convert {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #EDE9FE, #F5F3FF);
  border: 1px solid #C4B5FD;
  border-radius: 8px;
  color: #6D28D9;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.docs-btn-pinpoint-convert:hover {
  background: linear-gradient(135deg, #DDD6FE, #EDE9FE);
  border-color: #A78BFA;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
}

/* ================================================================
   Board Layout — Monday.com-style groups → levels → content types
   ================================================================ */

.docs-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Group (category) ─────────────────────────────────────────── */
.docs-group {
  background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.docs-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 18px;
  background: none;
  border: none;
  border-left: 4px solid #1A80E5;
  border-left: 4px solid var(--cat-color, #1A80E5);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s;
  gap: 12px;
}

.docs-group-header:hover {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
}

.docs-group-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1;
  min-width: 0;
}

.docs-group-chevron {
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: transform 0.15s;
  width: 12px;
}

.docs-group-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.docs-group-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  letter-spacing: -0.01em;
}

.docs-group-count {
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  flex-shrink: 0;
}

.docs-group-alerts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.docs-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 99px;
}

.docs-alert-expired {
  background: #fef2f2;
  color: #dc2626;
}

.docs-alert-expiring {
  background: #fffbeb;
  color: #d97706;
}

/* ── Group body ───────────────────────────────────────────────── */
.docs-group-body {
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
}

/* ── Level item ───────────────────────────────────────────────── */
.docs-level-item {
  border-bottom: 1px solid #f3f4f6;
}

.docs-level-item:last-child {
  border-bottom: none;
}

.docs-level-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 18px 10px 36px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s;
  min-height: 44px;
}

.docs-level-row:hover {
  background: #fafafa;
}

.docs-level-row-building {
  background: #fafbff;
}

.docs-level-row-building:hover {
  background: #f0f5ff;
}

.docs-level-chevron {
  color: #9ca3af;
  color: var(--cs-text-muted, #9ca3af);
  font-size: 0.7rem;
  flex-shrink: 0;
  width: 10px;
}

.docs-level-icon {
  color: #9ca3af;
  color: var(--cs-text-muted, #9ca3af);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.docs-level-name {
  font-size: 0.8375rem;
  font-weight: 600;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  flex-shrink: 0;
  min-width: 100px;
}

/* ── Content type pills ───────────────────────────────────────── */
.docs-level-pills {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1 1;
  min-width: 0;
}

.docs-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

.docs-pill-file {
  background: #f0f4ff;
  color: #3b5bdb;
}

.docs-pill-drawing {
  background: #EBF4FF;
  color: #1A80E5;
}

.docs-pill-tour {
  background: #f0fdf4;
  color: #15803d;
}

/* ── Health roll-up ───────────────────────────────────────────── */
.docs-level-health {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin-left: auto;
}

.docs-health-dot {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}

.docs-health-active {
  background: #f0fdf4;
  color: #15803d;
}

.docs-health-expiring {
  background: #fffbeb;
  color: #d97706;
}

.docs-health-expired {
  background: #fef2f2;
  color: #dc2626;
}

/* ── Level accordion content ──────────────────────────────────── */
.docs-level-content {
  border-top: 1px solid #f3f4f6;
  background: #fafafa;
}

/* ── Content type section (Files / Interactive Drawings / 3D Tours) */
.docs-content-section {
  border-bottom: 1px solid #f0f0f0;
}

.docs-content-section:last-child {
  border-bottom: none;
}

.docs-content-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px 8px 52px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  background: #f5f5f5;
  border-bottom: 1px solid #eeeeee;
}

.docs-content-section-label-drawing {
  color: #1A80E5;
  background: #f0f7ff;
  border-bottom-color: #dbeafe;
}

.docs-content-section-label-tour {
  color: #15803d;
  background: #f0fdf4;
  border-bottom-color: #dcfce7;
}

.docs-section-icon {
  font-size: 0.75rem;
}

.docs-section-icon-file { color: #3b5bdb; }
.docs-section-icon-drawing { color: #1A80E5; }

.docs-content-section-rows .docs-row {
  padding-left: 52px;
  background: #fff;
}

.docs-content-section-rows .docs-row:last-child {
  border-bottom: none;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .docs-group-header {
    padding: 11px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .docs-level-row {
    padding: 10px 14px 10px 28px;
    flex-wrap: wrap;
    gap: 6px;
  }

  .docs-level-name {
    min-width: 80px;
  }

  .docs-level-health {
    margin-left: 0;
    flex-wrap: wrap;
  }

  .docs-level-pills {
    flex: none;
    width: 100%;
  }

  .docs-content-section-label {
    padding-left: 28px;
  }

  .docs-content-section-rows .docs-row {
    padding-left: 28px;
  }

  .docs-group-alerts {
    flex-wrap: wrap;
  }
}

/* ============================================================
   PinpointViewer — CloudSafe Light Theme
   Matches the platform design tokens & visual language
   ============================================================ */

.ppv-page {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 64px;
}

/* ── Toolbar ─────────────────────────────────────── */
.ppv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  min-height: 56px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
  gap: 20px;
  z-index: 20;
  flex-wrap: wrap;
}

.ppv-toolbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1; }
.ppv-toolbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.ppv-back-btn {
  display: flex; align-items: center; gap: 6px;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  padding: 8px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.ppv-back-btn:hover { background: #e5e7eb; background: var(--cs-border, #e5e7eb); color: #111827; color: var(--cs-text-primary, #111827); }

.ppv-title-block { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ppv-title { font-size: 16px; font-weight: 600; color: #111827; color: var(--cs-text-primary, #111827); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppv-title-icon { color: #1A80E5; color: var(--cs-blue, #1A80E5); margin-right: 4px; font-size: 14px; }

.ppv-category-badge {
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF); color: #1A80E5; color: var(--cs-blue, #1A80E5);
  padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
}
.ppv-pin-count { color: #6b7280; color: var(--cs-text-muted, #6b7280); font-size: 12px; white-space: nowrap; }

/* ── Zoom ────────────────────────────────────────── */
.ppv-zoom-controls {
  display: flex; align-items: center;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6); border: 1px solid #e5e7eb; border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 6px; overflow: hidden;
}
.ppv-zoom-controls button {
  background: none; border: none; color: #374151; color: var(--cs-text-secondary, #374151);
  padding: 8px 12px; cursor: pointer; font-size: 14px; transition: all 0.12s;
}
.ppv-zoom-controls button:hover { background: #e5e7eb; background: var(--cs-border, #e5e7eb); }
.ppv-zoom-label { color: #6b7280; color: var(--cs-text-muted, #6b7280); font-size: 11px; font-weight: 600; padding: 0 6px; min-width: 36px; text-align: center; }

/* ── Mode toggle ─────────────────────────────────── */
.ppv-mode-toggle {
  display: flex; background: #f3f4f6; background: var(--cs-bg, #f3f4f6);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb); border-radius: 6px; overflow: hidden;
}
.ppv-mode-btn {
  background: none; border: none; color: #6b7280; color: var(--cs-text-muted, #6b7280);
  padding: 8px 18px; cursor: pointer; font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 6px; transition: all 0.15s; white-space: nowrap;
}
.ppv-mode-btn:hover { color: #111827; color: var(--cs-text-primary, #111827); background: #e5e7eb; background: var(--cs-border, #e5e7eb); }
.ppv-mode-btn.active { background: #EBF4FF; background: var(--cs-blue-light, #EBF4FF); color: #1A80E5; color: var(--cs-blue, #1A80E5); }
.ppv-mode-place.active { background: #fef2f2; color: #dc2626; }

.ppv-sidebar-toggle {
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6); border: 1px solid #e5e7eb; border: 1px solid var(--cs-border, #e5e7eb);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280); width: 38px; height: 38px; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.15s;
}
.ppv-sidebar-toggle:hover { background: #e5e7eb; background: var(--cs-border, #e5e7eb); }
.ppv-sidebar-toggle.active { background: #EBF4FF; background: var(--cs-blue-light, #EBF4FF); color: #1A80E5; color: var(--cs-blue, #1A80E5); }

/* ── Content ─────────────────────────────────────── */
.ppv-content { flex: 1 1; display: flex; position: relative; overflow: hidden; }

/* ── Canvas ──────────────────────────────────────── */
.ppv-canvas-area {
  flex: 1 1; position: relative; overflow: hidden; cursor: grab;
  background: #e9ecef;
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.ppv-canvas-area:active { cursor: grabbing; }
.ppv-canvas-area.placing { cursor: crosshair; }
.ppv-canvas-area.placing:active { cursor: crosshair; }

.ppv-place-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: #dc2626; color: white; padding: 8px 20px; border-radius: 20px;
  font-size: 13px; font-weight: 500; z-index: 15;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.25);
  animation: ppv-pulse 2s infinite; pointer-events: none;
}
@keyframes ppv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

.ppv-image-wrapper {
  position: absolute; top: 50%; left: 50%;
  transform-origin: center center;
  margin-left: -40%; margin-top: -35%;
  width: 80%; height: auto;
}

.ppv-drawing-image {
  width: 100%; height: auto; display: block; border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12); -webkit-user-select: none; user-select: none; pointer-events: auto;
}

/* ── PDF embed ───────────────────────────────────── */
.ppv-pdf-container { position: relative; width: 100%; }
.ppv-pdf-embed { width: 100%; height: 80vh; border: none; border-radius: 4px; box-shadow: 0 4px 24px rgba(0,0,0,0.12); display: block; }
.ppv-pdf-click-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; cursor: crosshair; }
.ppv-unsupported { position: relative; width: 100%; }
.ppv-generic-embed { width: 100%; height: 80vh; border: none; border-radius: 4px; box-shadow: 0 4px 24px rgba(0,0,0,0.12); }
.ppv-no-doc { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--cs-text-muted); font-size: 14px; padding: 60px; }
.ppv-no-doc svg { font-size: 32px; color: var(--cs-amber); }

/* ── Pins ────────────────────────────────────────── */
.ppv-pin { position: absolute; transform: translate(-50%, -100%); z-index: 10; cursor: pointer; }
.ppv-pin.selected, .ppv-pin.hovered { z-index: 15; }
.ppv-pin-marker {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  color: #EF4444;
  color: var(--pin-color, #EF4444); font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); transition: transform 0.15s;
}
.ppv-pin:hover .ppv-pin-marker, .ppv-pin.selected .ppv-pin-marker { transform: scale(1.25); }
.ppv-pin-marker.pulse { animation: ppv-pin-pulse 1.2s infinite; }
@keyframes ppv-pin-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ── Pin tooltip ─────────────────────────────────── */
.ppv-pin-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid #e5e7eb; border: 1px solid var(--cs-border, #e5e7eb); border-radius: 8px;
  padding: 10px 14px; min-width: 160px; max-width: 240px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1); pointer-events: none;
  animation: ppv-tt-in 0.12s ease-out; z-index: 100;
}
@keyframes ppv-tt-in { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.ppv-pin-tooltip::after {
  content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: #fff; border-right: 1px solid var(--cs-border); border-bottom: 1px solid var(--cs-border);
}
.ppv-pin-tooltip-label { color: #111827; color: var(--cs-text-primary, #111827); font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.ppv-pin-tooltip-asset { color: var(--cs-text-muted); font-size: 11px; display: flex; align-items: center; gap: 4px; }
.ppv-pin-tooltip-asset svg { color: var(--cs-blue); font-size: 10px; }
.ppv-pin-tooltip-status { font-size: 11px; font-weight: 600; margin-top: 2px; }

/* ── Side panel (detail, form, list) ─────────────── */
.ppv-side-panel {
  width: 340px; min-width: 340px; background: #fff;
  border-left: 1px solid #e5e7eb;
  border-left: 1px solid var(--cs-border, #e5e7eb);
  display: flex; flex-direction: column; overflow-y: auto; z-index: 20;
  animation: ppv-slide-in 0.2s ease-out;
}
@keyframes ppv-slide-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

.ppv-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid var(--cs-border, #e5e7eb);
}
.ppv-panel-header h3 { color: var(--cs-text-primary); font-size: 14px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.ppv-panel-header h3 svg { color: var(--cs-blue); }
.ppv-panel-close { background: none; border: none; color: var(--cs-text-muted); cursor: pointer; padding: 4px; font-size: 14px; transition: color 0.15s; border-radius: 4px; }
.ppv-panel-close:hover { color: var(--cs-text-primary); background: var(--cs-bg); }

.ppv-detail-color { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.ppv-panel-body { padding: 16px 20px; flex: 1 1; overflow-y: auto; }
.ppv-panel-footer { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--cs-border); }

/* ── Fields in detail panel ──────────────────────── */
.ppv-field { margin-bottom: 14px; }
.ppv-field-label { display: block; color: var(--cs-text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.ppv-field-value { color: var(--cs-text-primary); font-size: 13px; font-weight: 500; }
.ppv-field-desc { color: var(--cs-text-secondary); font-size: 13px; line-height: 1.5; margin: 4px 0 0; }

.ppv-linked-assets-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ppv-linked-asset-chip {
  display: flex; align-items: center; gap: 6px;
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF); border: 1px solid #bfdbfe; border-radius: 6px;
  padding: 6px 10px; font-size: 12px; color: var(--cs-text-primary);
}
.ppv-linked-asset-chip svg { color: var(--cs-blue); font-size: 10px; }
.ppv-chip-id { color: var(--cs-text-muted); font-size: 11px; margin-left: auto; }

/* ── Buttons ─────────────────────────────────────── */
.ppv-btn {
  flex: 1 1; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s; border: 1px solid transparent;
}
.ppv-btn-edit { background: var(--cs-blue-light); color: var(--cs-blue); border-color: #bfdbfe; }
.ppv-btn-edit:hover { background: #dbeafe; }
.ppv-btn-delete { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.ppv-btn-delete:hover { background: #fee2e2; }
.ppv-btn-cancel { background: var(--cs-bg); color: var(--cs-text-secondary); border-color: var(--cs-border); }
.ppv-btn-cancel:hover { background: var(--cs-border); }
.ppv-btn-primary { background: #1A80E5; background: var(--cs-blue, #1A80E5); color: #fff; }
.ppv-btn-primary:hover:not(:disabled) { background: #1565C0; background: var(--cs-blue-dark, #1565C0); }
.ppv-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Form ────────────────────────────────────────── */
.ppv-form { display: flex; flex-direction: column; }
.ppv-form-group { margin-bottom: 14px; }
.ppv-form-row { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; gap: 10px; }
.ppv-form-group label { display: block; color: var(--cs-text-secondary); font-size: 12px; font-weight: 500; margin-bottom: 5px; }
.ppv-form-group label svg { color: var(--cs-blue); margin-right: 4px; }
.ppv-form-group input, .ppv-form-group select, .ppv-form-group textarea {
  width: 100%; padding: 8px 12px; background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb); border-radius: 6px;
  color: var(--cs-text-primary); font-size: 13px; transition: border-color 0.15s; box-sizing: border-box;
}
.ppv-form-group input:focus, .ppv-form-group select:focus, .ppv-form-group textarea:focus {
  outline: none; border-color: var(--cs-blue); box-shadow: 0 0 0 2px rgba(26, 128, 229, 0.15);
}
.ppv-form-group input::placeholder, .ppv-form-group textarea::placeholder { color: #9ca3af; color: var(--cs-text-faint, #9ca3af); }
.ppv-form-group textarea { resize: vertical; min-height: 60px; }

.ppv-color-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.ppv-color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all 0.12s; padding: 0; }
.ppv-color-swatch:hover { transform: scale(1.15); }
.ppv-color-swatch.selected { border-color: var(--cs-blue); box-shadow: 0 0 0 2px rgba(26, 128, 229, 0.3); transform: scale(1.15); }

.ppv-form-actions { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--cs-border); margin-top: 4px; }

/* ── Asset tags & picker ─────────────────────────── */
.ppv-asset-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ppv-asset-tag {
  display: flex; align-items: center; gap: 4px;
  background: var(--cs-blue-light); border: 1px solid #bfdbfe; border-radius: 16px;
  padding: 4px 6px 4px 10px; font-size: 11px; color: var(--cs-text-primary);
}
.ppv-asset-tag-type { color: var(--cs-blue); font-weight: 600; font-size: 10px; text-transform: uppercase; }
.ppv-asset-tag-x {
  background: none; border: none; color: var(--cs-text-muted); width: 18px; height: 18px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 9px; padding: 0; transition: all 0.12s;
}
.ppv-asset-tag-x:hover { background: #fee2e2; color: #dc2626; }

.ppv-asset-picker-list {
  display: flex; flex-direction: column; gap: 2px; max-height: 160px; overflow-y: auto;
  background: var(--cs-bg); border: 1px solid var(--cs-border); border-radius: 6px; padding: 4px; margin-top: 6px;
}
.ppv-asset-pick {
  display: flex; align-items: center; gap: 8px; background: none; border: none;
  color: var(--cs-text-primary); padding: 8px 10px; border-radius: 4px; cursor: pointer;
  font-size: 12px; text-align: left; transition: background 0.12s; width: 100%;
}
.ppv-asset-pick:hover { background: #fff; }
.ppv-asset-pick.linked { background: var(--cs-blue-light); cursor: default; opacity: 0.7; }
.ppv-asset-pick-name { font-weight: 500; flex: 1 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppv-asset-pick-meta { color: var(--cs-text-muted); font-size: 11px; white-space: nowrap; }
.ppv-pick-check { color: #22c55e; color: var(--cs-green, #22c55e); font-size: 12px; flex-shrink: 0; }
.ppv-inline-msg { color: var(--cs-text-muted); font-size: 12px; padding: 8px; }
.ppv-inline-msg svg { margin-right: 6px; }

/* ── Pin list (sidebar) ──────────────────────────── */
.ppv-pin-list { padding: 8px; }
.ppv-empty { padding: 30px 16px; text-align: center; color: var(--cs-text-muted); font-size: 13px; }
.ppv-empty svg { font-size: 24px; margin-bottom: 10px; color: var(--cs-border-dark); }
.ppv-empty p { margin: 4px 0; line-height: 1.5; }

.ppv-pin-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 6px; cursor: pointer; transition: background 0.12s; margin-bottom: 2px;
}
.ppv-pin-row:hover { background: var(--cs-bg); }
.ppv-pin-row.active { background: var(--cs-blue-light); }
.ppv-pin-row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ppv-pin-row-info { flex: 1 1; min-width: 0; }
.ppv-pin-row-label { color: var(--cs-text-primary); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppv-pin-row-meta { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--cs-text-muted); margin-top: 2px; }
.ppv-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--cs-border-dark); }

.ppv-pin-row-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.ppv-pin-row:hover .ppv-pin-row-actions { opacity: 1; }
.ppv-pin-row-actions button {
  background: none; border: none; color: var(--cs-text-muted); padding: 4px 6px;
  cursor: pointer; font-size: 12px; border-radius: 4px; transition: all 0.12s;
}
.ppv-pin-row-actions button:hover { background: var(--cs-border); color: var(--cs-text-primary); }

/* ── Loading ─────────────────────────────────────── */
.ppv-loading { flex: 1 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--cs-text-muted); font-size: 14px; }
.ppv-loading-icon { font-size: 32px; color: var(--cs-blue); }
.ppv-error-icon { font-size: 32px; color: var(--cs-red); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
  .ppv-side-panel { position: absolute; right: 0; top: 0; bottom: 0; box-shadow: -4px 0 16px rgba(0,0,0,0.08); }
  .ppv-toolbar { padding: 0 12px; gap: 8px; }
  .ppv-title-block { display: none; }
  .ppv-zoom-controls { display: none; }
}
@media (max-width: 600px) {
  .ppv-side-panel { width: 100%; min-width: 100%; }
}

/* ── Scrollbar ───────────────────────────────────── */
.ppv-side-panel::-webkit-scrollbar { width: 6px; }
.ppv-side-panel::-webkit-scrollbar-track { background: transparent; }
.ppv-side-panel::-webkit-scrollbar-thumb { background: var(--cs-border); border-radius: 3px; }
.ppv-side-panel::-webkit-scrollbar-thumb:hover { background: var(--cs-border-dark); }

/* Onboarding Wizard — strong editorial layout, calm but confident.
   Shared aesthetic with AssetIDConfiguration. */

.ow-page {
  --ow-ink: #0F172A;
  --ow-ink-2: #334155;
  --ow-ink-3: #64748B;
  --ow-line: #E2E8F0;
  --ow-bg: #F8FAFC;
  --ow-surface: #FFFFFF;
  --ow-primary: #1A80E5;
  --ow-primary-ink: #1259B0;
  --ow-primary-tint: #EBF4FF;
  --ow-amber: #B45309;
  --ow-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  background: var(--ow-bg);
  min-height: calc(100vh - 64px);
  padding: 28px 40px 60px;
  color: var(--ow-ink);
}

.ow-loading {
  padding: 80px;
  text-align: center;
  color: var(--ow-ink-3);
  font-size: 14px;
}

/* ——— Header ——— */
.ow-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 20px;
  gap: 20px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto 24px;
}

.ow-back {
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: 1px solid var(--ow-line);
  color: var(--ow-ink-2);
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ow-back:hover { background: var(--ow-surface); color: var(--ow-ink); }

.ow-title-block { min-width: 0; }
.ow-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ow-primary-ink);
}
.ow-title {
  margin: 4px 0 4px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ow-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 12.5px;
  color: var(--ow-ink-3);
}
.ow-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ow-status-draft { background: #FEF3C7; color: #92400E; }
.ow-status-confirmed { background: var(--ow-primary-tint); color: var(--ow-primary-ink); }
.ow-save-state { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.ow-header-actions { display: flex; gap: 8px; }

/* ——— Steps rail ——— */
.ow-steps {
  max-width: 1280px;
  margin: 0 auto 28px;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 0;
  gap: 0;
  background: var(--ow-surface);
  border: 1px solid var(--ow-line);
  border-radius: 16px;
  padding: 12px 4px;
  position: relative;
}

.ow-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ow-step-btn {
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ow-ink-3);
  font-family: inherit;
  cursor: pointer;
  border-radius: 10px;
  transition: background .18s, color .18s;
  width: 100%;
  justify-content: flex-start;
}
.ow-step-btn:hover:not(:disabled) { background: var(--ow-bg); color: var(--ow-ink); }
.ow-step-btn:disabled { cursor: default; }
.ow-step.is-locked .ow-step-btn { opacity: .4; }
.ow-step.is-done .ow-step-num { background: var(--ow-primary); color: #fff; border-color: var(--ow-primary); }
.ow-step.is-active .ow-step-num {
  background: var(--ow-primary-tint);
  color: var(--ow-primary-ink);
  border-color: var(--ow-primary);
  box-shadow: 0 0 0 3px rgba(26,128,229,.12);
}
.ow-step.is-active .ow-step-label strong { color: var(--ow-ink); }

.ow-step-num {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--ow-bg);
  color: var(--ow-ink-3);
  border: 1px solid var(--ow-line);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: all .15s ease;
}
.ow-step-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
  min-width: 0;
}
.ow-step-label em {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ow-ink-3);
}
.ow-step-label strong {
  font-weight: 600;
  font-size: 13.5px;
  color: inherit;
}
.ow-step-rail {
  position: absolute;
  right: -2px;
  top: 50%;
  width: 2px;
  height: 26px;
  background: var(--ow-line);
  transform: translateY(-50%);
  border-radius: 2px;
  pointer-events: none;
}
.ow-step.is-done + .ow-step .ow-step-rail,
.ow-step.is-active .ow-step-rail { background: var(--ow-primary); opacity: .6; }

/* ——— Main card area ——— */
.ow-main {
  max-width: 1280px;
  margin: 0 auto;
}

.ow-step-body { display: grid; grid-gap: 20px; gap: 20px; }

.ow-card {
  background: var(--ow-surface);
  border: 1px solid var(--ow-line);
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.2);
}

.ow-card-head { margin-bottom: 22px; }
.ow-card-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ow-primary-ink);
}
.ow-card-title {
  margin: 6px 0 6px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ow-card-sub { margin: 0; color: var(--ow-ink-3); font-size: 14px; line-height: 1.55; }

.ow-card-foot {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ow-line);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ——— Dropzone ——— */
.ow-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 24px;
  border: 2px dashed #CBD5E1;
  border-radius: 16px;
  background: var(--ow-bg);
  color: var(--ow-ink-3);
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
  text-align: center;
}
.ow-dropzone:hover { border-color: var(--ow-primary); background: #F0F7FF; }
.ow-dropzone.is-dragging { border-color: var(--ow-primary); background: var(--ow-primary-tint); transform: scale(1.005); }
.ow-dropzone.has-file { border-style: solid; border-color: var(--ow-primary); background: #F0F7FF; }

.ow-dropzone-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ow-dropzone-empty strong { font-size: 16px; color: var(--ow-ink); font-weight: 600; }
.ow-dropzone-empty span { font-size: 13px; }
.ow-dropzone-icon { width: 28px; height: 28px; color: var(--ow-primary); margin-bottom: 6px; }

.ow-dropzone-file {
  display: flex;
  gap: 14px;
  align-items: center;
}
.ow-dropzone-file svg { width: 28px; height: 28px; color: #DC2626; }
.ow-dropzone-file strong { display: block; font-size: 15px; color: var(--ow-ink); }
.ow-dropzone-file span { display: block; font-size: 12.5px; color: var(--ow-ink-3); margin-top: 2px; }

/* ——— Form ——— */
.ow-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px 18px;
  gap: 16px 18px;
  margin-top: 20px;
}
.ow-form-wide { grid-column: 1 / -1; }

.ow-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ow-ink-2);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.ow-input {
  -webkit-appearance: none;
          appearance: none;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 13px;
  border: 1px solid var(--ow-line);
  border-radius: 10px;
  background: var(--ow-surface);
  color: var(--ow-ink);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.ow-input:focus {
  outline: none;
  border-color: var(--ow-primary);
  box-shadow: 0 0 0 3px rgba(26,128,229,.15);
}

/* ——— Uploaded state ——— */
.ow-uploaded {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 20px;
  gap: 20px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--ow-primary);
  background: var(--ow-primary-tint);
  border-radius: 14px;
}
.ow-uploaded-icon { width: 36px; height: 36px; color: #DC2626; }
.ow-uploaded-copy strong { display: block; font-size: 16px; color: var(--ow-ink); }
.ow-uploaded-copy span { display: block; color: var(--ow-ink-3); font-size: 13px; margin-top: 4px; }
.ow-uploaded-actions { display: flex; gap: 10px; }

/* ——— Buttons ——— */
.ow-btn {
  -webkit-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s, border-color .15s;
  white-space: nowrap;
}
.ow-btn svg { width: 12px; height: 12px; }
.ow-btn:active { transform: translateY(1px); }

.ow-btn-lg { padding: 13px 22px; font-size: 14.5px; border-radius: 12px; }

.ow-btn-primary { background: var(--ow-primary); color: #fff; }
.ow-btn-primary:hover { background: #1570CC; }
.ow-btn-primary:disabled { opacity: .55; cursor: not-allowed; }

.ow-btn-ghost { background: transparent; color: var(--ow-ink-2); border-color: var(--ow-line); }
.ow-btn-ghost:hover { color: var(--ow-ink); border-color: #CBD5E1; background: var(--ow-bg); }

.ow-btn-muted { background: transparent; color: var(--ow-ink-3); border-color: var(--ow-line); }
.ow-btn-muted:hover { color: var(--ow-amber); border-color: #FEC89A; background: #FFF7ED; }

/* ——— Step 2 plan viewport ——— */
.ow-step-wide .ow-card { padding: 20px 22px 16px; }
.ow-card-tight { padding: 18px 20px; }

.ow-plan-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 20px;
  gap: 20px;
  align-items: flex-start;
}
.ow-plan-hint {
  font-size: 12.5px;
  color: var(--ow-ink-3);
  line-height: 1.7;
}
.ow-plan-hint strong { color: var(--ow-ink-2); font-weight: 600; margin: 0 2px; }

.ow-plan-counters { display: flex; gap: 10px; }
.ow-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid var(--ow-line);
  border-radius: 10px;
  background: var(--ow-bg);
  min-width: 72px;
}
.ow-counter strong { font-family: var(--ow-mono); font-size: 20px; line-height: 1; color: var(--ow-ink); }
.ow-counter em { font-style: normal; font-size: 10.5px; color: var(--ow-ink-3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.ow-counter-alt strong { color: var(--ow-primary-ink); }

/* Toolbar */
.ow-plan-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--ow-bg);
  border: 1px solid var(--ow-line);
  border-radius: 10px;
  margin: 16px 0 10px;
}
.ow-plan-tools { display: flex; align-items: center; gap: 6px; }
.ow-tool {
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: 1px solid transparent;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--ow-ink-2);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, border-color .15s, color .15s;
}
.ow-tool:hover:not(:disabled) { background: var(--ow-surface); border-color: var(--ow-line); color: var(--ow-ink); }
.ow-tool:disabled { opacity: .4; cursor: not-allowed; }
.ow-tool svg { width: 12px; height: 12px; }
.ow-zoom-readout {
  font-family: var(--ow-mono);
  font-size: 12px;
  color: var(--ow-ink-2);
  min-width: 46px;
  text-align: center;
}
.ow-tool-sep { width: 1px; height: 20px; background: var(--ow-line); margin: 0 6px; }

/* Viewport */
.ow-plan-wrap { position: relative; }
.ow-plan-viewport {
  width: 100%;
  height: 70vh;
  min-height: 480px;
  background:
    radial-gradient(60% 60% at 50% 40%, #F8FAFC 0%, #E9EEF3 100%);
  border: 1px solid var(--ow-line);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  cursor: crosshair;
  -webkit-user-select: none;
          user-select: none;
}
.ow-plan-viewport:active { cursor: crosshair; }
.ow-plan-viewport.is-zoom-active {
  outline: 2px solid var(--ow-primary);
  outline-offset: -2px;
  cursor: grab;
}
.ow-plan-viewport.is-zoom-active:active { cursor: grabbing; }
.ow-plan-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Must be 0 0 so zoom-to-cursor math is correct:
     translate(X,Y) scale(S) pivots from top-left, not centre */
  transform-origin: 0 0;
  transition: transform .08s linear;
}
.ow-plan-frame {
  position: relative;
  display: block;
  line-height: 0;
  box-shadow: 0 24px 50px -30px rgba(15, 23, 42, 0.35);
  background: #fff;
}
.ow-plan-image {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
.ow-plan-loading, .ow-plan-error {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ow-ink-3);
  font-size: 14px;
}
.ow-plan-error { color: var(--ow-amber); }

/* Pin — anchor exactly at click point (centre of circle + small crosshair dot).
   Using translate(-50%, -50%) so the geometric centre sits on (x%, y%). */
.ow-pin {
  -webkit-appearance: none;
          appearance: none;
  position: absolute;
  /* Inverse-scale with the stage so pins stay readable (and shrink slightly)
     as the plan is zoomed in. --pin-counter-scale is set on .ow-plan-frame. */
  transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(var(--pin-counter-scale, 1));
  transform-origin: center center;
  transition: transform .08s linear;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  z-index: 5;
  width: 22px; height: 22px;
}
.ow-pin:active { cursor: grabbing; }
.ow-pin-body {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: #1A80E5;
  color: #fff;
  font-family: var(--ow-mono);
  font-size: 10.5px;
  font-weight: 700;
  box-shadow: 0 3px 8px -2px rgba(15,23,42,.4), inset 0 0 0 2px rgba(255,255,255,.25);
  transition: transform .12s ease, background .15s;
  position: relative;
}
/* Tiny anchor dot marks the exact click coordinate */
.ow-pin-body::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 50%;
  opacity: .85;
}
.ow-pin:hover .ow-pin-body { transform: scale(1.12); }
.ow-pin.is-selected .ow-pin-body {
  background: #1259B0;
  box-shadow: 0 0 0 3px rgba(26,128,229,.35), 0 3px 8px -2px rgba(15,23,42,.4);
}

/* Marquee */
.ow-marquee {
  position: absolute;
  border: 1.5px dashed var(--ow-primary);
  background: rgba(26, 128, 229, 0.10);
  pointer-events: none;
  z-index: 10;
  border-radius: 2px;
}

.ow-foot-note {
  font-size: 12px;
  color: var(--ow-ink-3);
  flex: 1 1 auto;
}
.ow-card-foot { justify-content: space-between; }

.ow-counter-warn strong { color: #B45309; }

/* ——— Step 3: Categorise ——— */
.ow-cat-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-gap: 16px;
  gap: 16px;
}

.ow-cat-plan { min-width: 0; display: flex; flex-direction: column; }
.ow-cat-plan .ow-plan-viewport { height: 60vh; min-height: 420px; }

.ow-assign-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ow-ink-3);
  padding-left: 10px;
}
.ow-assign-chip {
  -webkit-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--ow-line);
  border-radius: 999px;
  background: var(--ow-surface);
  font-size: 12px;
  color: var(--ow-ink-2);
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.ow-assign-chip:hover { background: var(--ow-bg); }
.ow-assign-chip:active { transform: translateY(1px); }
.ow-assign-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.ow-assign-clear { color: var(--ow-ink-3); }

/* Pin colouring override */
.ow-pin.is-uncat .ow-pin-body { background: #EF4444; }
.ow-pin.is-uncat .ow-pin-body::before { border-top-color: #EF4444; }
.ow-pin-body[style*="--pin-color"]::before {
  border-top-color: #1A80E5 !important;
  border-top-color: var(--pin-color, #1A80E5) !important;
}

/* Sidebar */
.ow-cat-side {
  border: 1px solid var(--ow-line);
  border-radius: 14px;
  background: var(--ow-bg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 420px;
  overflow: hidden;
}

/* ── Filter tabs ── */
.ow-cat-filter-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: -14px -14px 0;
  border-bottom: 1px solid var(--ow-line);
}
.ow-cat-filter-tab {
  -webkit-appearance: none;
          appearance: none;
  background: var(--ow-surface);
  border: none;
  padding: 11px 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ow-ink-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s, color .15s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ow-cat-filter-tab:first-child { border-radius: 14px 0 0 0; }
.ow-cat-filter-tab:last-child  { border-radius: 0 14px 0 0; border-left: 1px solid var(--ow-line); }
.ow-cat-filter-tab:hover { background: var(--ow-bg); color: var(--ow-ink); }
.ow-cat-filter-tab.is-active { color: var(--ow-ink); background: var(--ow-bg); border-bottom-color: var(--ow-ink); }

.ow-cat-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--ow-mono);
}
.ow-cat-filter-badge.is-red   { background: #FEE2E2; color: #DC2626; }
.ow-cat-filter-badge.is-green { background: #DCFCE7; color: #16A34A; }
.ow-cat-filter-badge.is-muted { background: var(--ow-line); color: var(--ow-ink-3); }

/* ── Uncategorised toolbar (select-all + bulk actions) ── */
.ow-uncat-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ow-btn.is-active {
  background: var(--ow-primary-tint);
  border-color: var(--ow-primary);
  color: var(--ow-primary-ink);
}
.ow-bulk-chevron {
  font-size: 10px;
  transition: transform .2s ease;
  margin-left: 2px;
}
.ow-bulk-chevron.open { transform: rotate(180deg); }

/* ── Bulk actions panel ── */
.ow-bulk-panel {
  background: var(--ow-surface);
  border: 1px solid var(--ow-line);
  border-radius: 12px;
  overflow: hidden;
}
.ow-bulk-panel-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ow-ink-2);
  background: var(--ow-bg);
  border-bottom: 1px solid var(--ow-line);
}
.ow-bulk-panel .ow-classify-fields { padding: 12px; }

.ow-bulk-panel-foot {
  padding: 10px 12px;
  border-top: 1px solid var(--ow-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ow-bulk-hint {
  font-size: 11.5px;
  color: var(--ow-ink-3);
  margin: 0;
  line-height: 1.4;
  flex: 1 1;
}

/* ── Uncategorised pin list ── */
.ow-uncat-pin-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  overflow-y: auto;
}
.ow-uncat-pin-item {
  display: flex;
  flex-direction: column;
  background: var(--ow-surface);
  border: 1px solid var(--ow-line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s;
}
.ow-uncat-pin-item:hover { border-color: #FCA5A5; }
.ow-uncat-pin-item.is-selected { border-color: #EF4444; }
.ow-uncat-pin-item.is-expanded { border-color: #EF4444; }

.ow-uncat-pin-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.ow-uncat-pin-item.is-selected .ow-uncat-pin-header { background: #FEE2E2; }
.ow-uncat-pin-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #EF4444;
  flex-shrink: 0;
}
.ow-uncat-pin-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ow-ink);
  font-family: var(--ow-mono);
}
.ow-uncat-pin-prefilled {
  flex: 1 1;
  font-size: 11.5px;
  color: var(--ow-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ow-uncat-pin-chevron {
  font-size: 10px;
  color: var(--ow-ink-3);
  margin-left: auto;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.ow-uncat-pin-chevron.open { transform: rotate(180deg); }

/* ── Per-pin checkbox ── */
.ow-uncat-pin-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #D1D5DB;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, background .15s, color .15s;
  padding: 0;
}
.ow-uncat-pin-check:hover { border-color: #EF4444; }
.ow-uncat-pin-check.is-checked {
  border-color: #EF4444;
  background: #EF4444;
  color: #fff;
}

/* ── Classify accordion form ── */
.ow-classify-form {
  padding: 12px;
  border-top: 1px solid #FEE2E2;
  background: #FFF8F8;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ow-classify-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}
.ow-classify-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ow-classify-field-wide { grid-column: 1 / -1; }
.ow-classify-field-seq { grid-column: span 1; }
.ow-classify-field label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ow-ink-3);
}
.ow-classify-field select,
.ow-classify-field input {
  -webkit-appearance: none;
          appearance: none;
  background: var(--ow-surface);
  border: 1px solid var(--ow-line);
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  color: var(--ow-ink);
  width: 100%;
  transition: border-color .15s;
}
.ow-classify-field select:focus,
.ow-classify-field input:focus {
  outline: none;
  border-color: var(--ow-primary);
  box-shadow: 0 0 0 2px var(--ow-primary-tint);
}
.ow-classify-footer {
  display: flex;
  justify-content: flex-end;
}

/* ── Add category button row (inside categorised view) ── */
.ow-cat-side-add {
  display: flex;
  justify-content: flex-end;
}
.ow-cat-side-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ow-line);
}
.ow-cat-side-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ow-ink-3);
}

.ow-cat-empty {
  padding: 18px 12px;
  font-size: 13px;
  color: var(--ow-ink-3);
  text-align: center;
  line-height: 1.5;
}

.ow-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  overflow-y: auto;
}
.ow-cat-item {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: var(--ow-surface);
  border: 1px solid var(--ow-line);
  border-radius: 10px;
}
.ow-cat-item.is-editing {
  grid-template-columns: 1fr;
  gap: 8px;
}
.ow-cat-swatch {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 4px;
  border: 2px solid var(--ow-surface);
  box-shadow: 0 0 0 1px var(--ow-line);
  flex: 0 0 auto;
}
.ow-cat-swatch-muted { background: #CBD5E1; }
.ow-cat-copy { min-width: 0; }
.ow-cat-copy strong { display: block; font-size: 13px; color: var(--ow-ink); font-weight: 600; }
.ow-cat-copy em { display: block; font-style: normal; font-size: 11.5px; color: var(--ow-ink-3); margin-top: 2px; }
.ow-cat-count {
  font-family: var(--ow-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ow-ink-2);
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--ow-bg);
  border: 1px solid var(--ow-line);
}
.ow-cat-actions { display: flex; gap: 4px; }

.ow-icon-btn {
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: 1px solid transparent;
  width: 26px; height: 26px;
  border-radius: 6px;
  color: var(--ow-ink-3);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.ow-icon-btn:hover { background: var(--ow-bg); color: var(--ow-ink); border-color: var(--ow-line); }
.ow-icon-btn svg { width: 11px; height: 11px; }
.ow-icon-btn-primary {
  background: var(--ow-primary);
  color: #fff;
}
.ow-icon-btn-primary:hover { background: #1570CC; color: #fff; }

.ow-cat-colour-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-bottom: 2px;
}
.ow-cat-swatch-btn {
  -webkit-appearance: none;
          appearance: none;
  border: 2px solid var(--ow-line);
  width: 22px; height: 22px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.ow-cat-swatch-btn.is-active { border-color: var(--ow-ink); transform: scale(1.08); }

.ow-cat-edit-fields { display: flex; flex-direction: column; gap: 6px; }
.ow-cat-edit-fields select.ow-input { padding: 8px 10px; }
.ow-cat-edit-actions { display: flex; gap: 6px; justify-content: flex-end; }

.ow-cat-uncat {
  margin-top: auto;
  display: grid;
  grid-template-columns: 14px 1fr auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: var(--ow-surface);
  border: 1px dashed var(--ow-line);
  border-radius: 10px;
}

.ow-btn-sm { padding: 7px 11px; font-size: 12px; }

/* ——— Step 4: Review IDs ——— */
.ow-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: 12px;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.5;
}
.ow-banner-warn { background: #FFF7ED; border: 1px solid #FED7AA; color: #7C2D12; }
.ow-banner-info { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A5F; }
.ow-banner-info svg { color: #2563EB; }
.ow-banner-inline { flex-wrap: wrap; row-gap: 10px; align-items: center; }
.ow-banner-copy { flex: 1 1 300px; min-width: 0; }
.ow-banner-inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; flex: 0 0 auto; }
.ow-banner-inline-form .ow-input { min-width: 160px; font-family: var(--ow-mono); letter-spacing: 0.06em; font-size: 15px; padding: 10px 14px; }
.ow-input-mono { font-family: var(--ow-mono); letter-spacing: 0.06em; }
.ow-banner svg { flex: 0 0 auto; margin-top: 3px; color: #B45309; }
.ow-banner strong { display: inline; }
.ow-banner code {
  font-family: var(--ow-mono);
  background: rgba(255,255,255,0.5);
  padding: 1px 5px;
  border-radius: 4px;
}

.ow-review-wrap {
  margin-top: 12px;
  border: 1px solid var(--ow-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ow-surface);
}
.ow-review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.ow-review-table thead {
  background: var(--ow-bg);
}
.ow-review-table th {
  padding: 11px 14px;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ow-ink-3);
  font-weight: 700;
  border-bottom: 1px solid var(--ow-line);
}
.ow-review-table td {
  padding: 10px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--ow-line);
}
.ow-review-table tbody tr:last-child td { border-bottom: 0; }
.ow-review-table tr.has-issue td { background: #FFFBF0; }

.ow-review-pin-num {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ow-bg);
  border: 1px solid var(--ow-line);
  font-family: var(--ow-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ow-ink-2);
}
.ow-review-cat { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.ow-review-id {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 7px;
  background: #0F172A;
  color: #93C5FD;
  font-family: var(--ow-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ow-review-issue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #B45309;
  font-size: 12.5px;
}
.ow-review-issue svg { width: 11px; height: 11px; }
.ow-muted { color: var(--ow-ink-3); font-style: italic; }

/* ——— Step 5: Confirm ——— */
.ow-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 14px;
  gap: 14px;
  margin-top: 10px;
}
.ow-summary-item {
  background: var(--ow-surface);
  border: 1px solid var(--ow-line);
  border-radius: 12px;
  padding: 14px 16px;
}
.ow-summary-item header {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--ow-line);
}
.ow-summary-item header strong { display: block; font-size: 14px; color: var(--ow-ink); font-weight: 600; }
.ow-summary-item header em { display: block; font-style: normal; font-size: 11.5px; color: var(--ow-ink-3); text-transform: capitalize; margin-top: 2px; }

.ow-summary-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}
.ow-summary-ids code {
  font-family: var(--ow-mono);
  font-size: 11.5px;
  padding: 2px 8px;
  background: var(--ow-bg);
  border: 1px solid var(--ow-line);
  border-radius: 6px;
  color: var(--ow-ink-2);
}
.ow-summary-more { font-size: 11.5px; color: var(--ow-ink-3); align-self: center; font-style: italic; }

/* Success state */
.ow-success {
  text-align: center;
  padding: 52px 30px;
}
.ow-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--ow-primary-tint);
  color: var(--ow-primary);
  font-size: 36px;
  animation: ow-success-pop .6s cubic-bezier(.2,.7,.2,1.3);
}
@keyframes ow-success-pop {
  0% { transform: scale(.5); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.ow-success .ow-card-title { margin-top: 6px; }
.ow-success .ow-card-sub { margin-top: 8px; max-width: 520px; margin-left: auto; margin-right: auto; }
.ow-success-stats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  margin: 28px auto 30px;
  padding: 18px 24px;
  border: 1px solid var(--ow-line);
  border-radius: 14px;
  background: var(--ow-bg);
}
.ow-success-stat { display: inline-flex; align-items: center; gap: 8px; }
.ow-success-stat strong { font-family: var(--ow-mono); font-size: 20px; color: var(--ow-ink); font-weight: 700; }
.ow-success-stat em { font-style: normal; color: var(--ow-ink-3); font-size: 12.5px; }
.ow-success-actions { display: inline-flex; gap: 10px; margin-top: 6px; }

/* ——— Responsive tweaks for Step 3 ——— */
@media (max-width: 1100px) {
  .ow-cat-layout { grid-template-columns: 1fr; }
  .ow-cat-side { min-height: auto; }
}

@media (max-width: 900px) {
  .ow-header { grid-template-columns: 1fr; gap: 12px; }
  .ow-steps { grid-template-columns: repeat(5, 1fr); padding: 8px 4px; }
  .ow-step-label em { display: none; }
  .ow-step-label strong { font-size: 12px; }
  .ow-form-grid { grid-template-columns: 1fr; }
  .ow-uploaded { grid-template-columns: 1fr; text-align: left; }
}

/* ── Categorised pin sub-lists ── */
.ow-cat-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ow-cat-group .ow-cat-item {
  border-radius: 10px 10px 0 0;
  border-bottom: none;
}
.ow-cat-group:has(.ow-cat-pin-sublist) .ow-cat-item {
  border-radius: 10px 10px 0 0;
}
.ow-cat-group + .ow-cat-group { margin-top: 8px; }

.ow-cat-pin-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ow-line);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}

.ow-cat-pin-item {
  border-bottom: 1px solid var(--ow-line);
}
.ow-cat-pin-item:last-child { border-bottom: none; }

.ow-cat-pin-item .ow-uncat-pin-header {
  padding: 8px 12px;
  background: #f8fafc;
  background: var(--ow-surface, #f8fafc);
}
.ow-cat-pin-item .ow-uncat-pin-header:hover {
  background: #f1f5f9;
  background: var(--ow-hover, #f1f5f9);
}
.ow-cat-pin-item.is-expanded .ow-uncat-pin-header {
  background: #f1f5f9;
  background: var(--ow-hover, #f1f5f9);
}

.ow-cat-seq {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: #64748b;
  background: rgba(100,116,139,0.1);
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 2px;
}

.emergency-lighting-page {
  padding: 1rem;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.status-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.status-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.status-card .status-icon {
  width: 48px;
  height: 48px;
  background: var(--color-background);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
}

.status-details h3 {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.status-details p {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-badge.working {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.inspections-table {
  width: 100%;
  border-collapse: collapse;
}

.inspections-table th,
.inspections-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.inspections-table th {
  font-weight: 600;
  color: var(--color-text-secondary);
  background-color: var(--color-background);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-pill.working {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-pill.needs_repair {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.certificates-section {
  margin-top: 2rem;
}

.certificates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.certificate-card {
  background: white;
  padding: 1.25rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.certificate-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.certificate-header h3 {
  margin: 0;
  font-size: 1rem;
}

.certificate-details p {
  margin: 0.5rem 0;
  color: var(--color-text-secondary);
}

.documents-section {
  margin-top: 2rem;
}

.upload-area {
  margin-top: 1rem;
}

.upload-box {
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-box:hover {
  border-color: var(--color-primary);
}

.upload-box p {
  margin: 1rem 0 0.5rem;
  font-weight: 500;
}

.upload-box span {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .certificates-grid {
    grid-template-columns: 1fr;
  }
} 
@media (max-width: 480px) {
  .emergency-lighting-page {
    padding: 0.75rem;
  }

  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .status-overview {
    gap: 1rem;
  }

  .inspections-table {
    display: block;
    overflow-x: auto;
  }
}

.escape-routes-page {
  padding: 1rem;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.status-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.status-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.status-card .status-icon {
  width: 48px;
  height: 48px;
  background: var(--color-background);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
}

.status-details h3 {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.status-details p {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-badge.warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.routes-table {
  width: 100%;
  border-collapse: collapse;
}

.routes-table th,
.routes-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.routes-table th {
  font-weight: 600;
  color: var(--color-text-secondary);
  background-color: var(--color-background);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-pill.clear {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-pill.blocked {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.status-pill.maintenance {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.plans-section {
  margin-top: 2rem;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.plan-card {
  background: white;
  padding: 1.25rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.plan-icon {
  width: 40px;
  height: 40px;
  background: var(--color-background);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-primary);
}

.plan-details h3 {
  margin: 0;
  font-size: 1rem;
}

.plan-details p {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.documents-section {
  margin-top: 2rem;
}

.upload-area {
  margin-top: 1rem;
}

.upload-box {
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-box:hover {
  border-color: var(--color-primary);
}

.upload-box p {
  margin: 1rem 0 0.5rem;
  font-weight: 500;
}

.upload-box span {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .plans-grid {
    grid-template-columns: 1fr;
  }
} 
@media (max-width: 480px) {
  .escape-routes-page {
    padding: 0.75rem;
  }

  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .status-overview {
    gap: 1rem;
  }

  .routes-table {
    display: block;
    overflow-x: auto;
  }
}

.assembly-points-page {
  padding: 1rem;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.status-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.status-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.status-card .status-icon {
  width: 48px;
  height: 48px;
  background: var(--color-background);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
}

.status-details h3 {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.status-details p {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-badge.warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.points-table {
  width: 100%;
  border-collapse: collapse;
}

.points-table th,
.points-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.points-table th {
  font-weight: 600;
  color: var(--color-text-secondary);
  background-color: var(--color-background);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-pill.clear {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-pill.maintenance {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-pill.blocked {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.map-section {
  margin-top: 2rem;
}

.map-container {
  margin-top: 1rem;
}

.map-placeholder {
  background: var(--color-background);
  border-radius: 8px;
  padding: 3rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.map-placeholder:hover {
  background-color: var(--color-background-dark);
}

.map-placeholder svg {
  font-size: 3rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.map-placeholder p {
  margin: 0;
  color: var(--color-text-secondary);
}

.documents-section {
  margin-top: 2rem;
}

.upload-area {
  margin-top: 1rem;
}

.upload-box {
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-box:hover {
  border-color: var(--color-primary);
}

.upload-box p {
  margin: 1rem 0 0.5rem;
  font-weight: 500;
}

.upload-box span {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .points-table {
    display: block;
    overflow-x: auto;
  }
} 
@media (max-width: 768px) {
  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .assembly-points-page {
    padding: 0.75rem;
  }

  .content-header {
    gap: 0.75rem;
  }

  .status-overview {
    gap: 1rem;
  }
}

.emergency-plans-page {
  padding: 1rem;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.status-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.status-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.status-card .status-icon {
  width: 48px;
  height: 48px;
  background: var(--color-background);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
}

.status-details h3 {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.status-details p {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-badge.warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.plans-table {
  width: 100%;
  border-collapse: collapse;
}

.plans-table th,
.plans-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.plans-table th {
  font-weight: 600;
  color: var(--color-text-secondary);
  background-color: var(--color-background);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-pill.current {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-pill.needs_update {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-pill.in_review {
  background-color: var(--color-info-light);
  color: var(--color-info);
}

.history-section {
  margin-top: 2rem;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.history-card {
  background: white;
  padding: 1.25rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 1rem;
}

.history-icon {
  width: 40px;
  height: 40px;
  background: var(--color-background);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-primary);
}

.history-details h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.history-date {
  margin: 0.25rem 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.history-author {
  margin: 0.25rem 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.history-changes {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

.documents-section {
  margin-top: 2rem;
}

.upload-area {
  margin-top: 1rem;
}

.upload-box {
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-box:hover {
  border-color: var(--color-primary);
}

.upload-box p {
  margin: 1rem 0 0.5rem;
  font-weight: 500;
}

.upload-box span {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .plans-table {
    display: block;
    overflow-x: auto;
  }
  
  .history-grid {
    grid-template-columns: 1fr;
  }
} 
@media (max-width: 480px) {
  .emergency-plans-page {
    padding: 0.75rem;
  }

  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .status-overview {
    gap: 1rem;
  }
}

.defibrillators-page {
  padding: 1rem;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.status-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.status-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.status-card .status-icon {
  width: 48px;
  height: 48px;
  background: var(--color-background);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
}

.status-details h3 {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.status-details p {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-badge.warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.devices-table {
  width: 100%;
  border-collapse: collapse;
}

.devices-table th,
.devices-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.devices-table th {
  font-weight: 600;
  color: var(--color-text-secondary);
  background-color: var(--color-background);
}

.battery-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.battery-icon {
  font-size: 1rem;
}

.battery-icon.full {
  color: var(--color-success);
}

.battery-icon.medium {
  color: var(--color-warning);
}

.battery-icon.low {
  color: var(--color-danger);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-pill.operational {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-pill.needs_service {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-pill.in_service {
  background-color: var(--color-info-light);
  color: var(--color-info);
}

.status-pill.valid {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-pill.expires_soon {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.maintenance-section {
  margin-top: 2rem;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.schedule-card {
  background: white;
  padding: 1.25rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.schedule-header h3 {
  margin: 0;
  font-size: 1rem;
}

.schedule-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.schedule-items li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.schedule-items li:last-child {
  border-bottom: none;
}

.documents-section {
  margin-top: 2rem;
}

.upload-area {
  margin-top: 1rem;
}

.upload-box {
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-box:hover {
  border-color: var(--color-primary);
}

.upload-box p {
  margin: 1rem 0 0.5rem;
  font-weight: 500;
}

.upload-box span {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .devices-table {
    display: block;
    overflow-x: auto;
  }
  
  .schedule-grid {
    grid-template-columns: 1fr;
  }
} 
@media (max-width: 480px) {
  .defibrillators-page {
    padding: 0.75rem;
  }

  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .status-overview {
    gap: 1rem;
  }
}

.incident-reporting-page {
  padding: 1rem;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.action-button.primary {
  background-color: var(--color-danger);
  color: white;
}

.status-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.status-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.status-card .status-icon {
  width: 48px;
  height: 48px;
  background: var(--color-background);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
}

.status-details h3 {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.status-details p {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-badge.warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.incidents-table {
  width: 100%;
  border-collapse: collapse;
}

.incidents-table th,
.incidents-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.incidents-table th {
  font-weight: 600;
  color: var(--color-text-secondary);
  background-color: var(--color-background);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-pill.open {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.status-pill.under_review {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-pill.closed {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.report-section {
  margin-top: 2rem;
}

.report-form {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.form-group select,
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.875rem;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.documents-section {
  margin-top: 2rem;
}

.upload-area {
  margin-top: 1rem;
}

.upload-box {
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-box:hover {
  border-color: var(--color-primary);
}

.upload-box p {
  margin: 1rem 0 0.5rem;
  font-weight: 500;
}

.upload-box span {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .incidents-table {
    display: block;
    overflow-x: auto;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
} 
@media (max-width: 480px) {
  .incident-reporting-page {
    padding: 0.75rem;
  }

  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .status-overview {
    gap: 1rem;
  }
}

.emergency-dashboard-wrapper {
  width: 100%;
  padding: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.dashboard-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.dashboard-title {
  color: #1F2937;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.dashboard-actions {
  display: flex;
  gap: 10px;
}

.btn,
.btn-primary,
.btn-small {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.85em;
  transition: background 0.2s, color 0.2s;
}

.btn-primary,
.btn-small {
  background: #1574F6 !important;
  color: #fff !important;
  border: none !important;
}

.btn-primary:hover,
.btn-small:hover {
  background: #1264D9 !important;
  color: #fff !important;
}

.dashboard-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.dashboard-card {
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition: box-shadow 0.2s, transform 0.2s;
}

.dashboard-card:hover {
  box-shadow: 0 4px 16px rgba(21,116,246,0.10);
  transform: translateY(-2px);
}

.dashboard-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #e7f5ff;
  color: #1574F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
}

.dashboard-card-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-card-label {
  color: #1F2937;
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.dashboard-card-numbers {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-card-total {
  font-size: 1.5em;
  font-weight: 700;
  color: #1F2937;
}

.dashboard-card-failed {
  font-size: 1em;
  color: #d32f2f;
  font-weight: 600;
  background: #fce8e6;
  border-radius: 6px;
  padding: 2px 10px;
}

.dashboard-card.good {
  border-left: 4px solid #10B981;
}

.dashboard-card.warning {
  border-left: 4px solid #F59E0B;
}

.dashboard-bottom-panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.dashboard-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(21,116,246,0.06);
  padding: 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.panel-title {
  font-size: 0.95em;
  color: #1F2937;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.attention-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.attention-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 1em;
}

.attention-icon {
  color: #d32f2f;
  font-size: 1.2em;
}

.attention-label {
  color: #1F2937;
  font-weight: 500;
}

.attention-failed {
  color: #d32f2f;
  font-weight: 600;
  margin-left: auto;
}

.no-issues {
  color: #10B981;
  font-weight: 500;
  text-align: center;
  padding: 24px 0;
}

.next-inspection-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.next-inspection-date {
  color: #1F2937;
  font-size: 1.1em;
}

@media (max-width: 1200px) {
  .dashboard-bottom-panels {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  .dashboard-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }
}

@media (max-width: 768px) {
  .emergency-dashboard-wrapper {
    padding: 0 4px;
  }

  .dashboard-header-row {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
  }

  .dashboard-title {
    font-size: 1.5rem;
  }

  .dashboard-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .btn,
  .btn-primary,
  .btn-small {
    padding: 10px 16px;
    font-size: 0.875em;
  }

  .dashboard-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }

  .dashboard-card {
    padding: 16px;
    min-width: 0;
    gap: 14px;
  }

  .dashboard-bottom-panels {
    flex-direction: column;
    gap: 16px;
  }

  .dashboard-panel {
    min-width: 0;
    padding: 16px 20px;
  }
}

@media (max-width: 480px) {
  .dashboard-title {
    font-size: 1.3rem;
  }

  .dashboard-cards-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dashboard-card {
    padding: 14px;
  }

  .dashboard-panel {
    padding: 14px 16px;
  }
}

.emergency-preparedness-main {
  overflow: hidden;
  position: relative;
} 
.fire-drills-page {
  padding: 1rem;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.status-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.status-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.status-card h3 {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.status-card p {
  margin: 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-badge.scheduled {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.drills-table {
  width: 100%;
  border-collapse: collapse;
}

.drills-table th,
.drills-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.drills-table th {
  font-weight: 600;
  color: var(--color-text-secondary);
  background-color: var(--color-background);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-pill.completed {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-pill.scheduled {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-pill.overdue {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.documents-section {
  margin-top: 2rem;
}

.upload-area {
  margin-top: 1rem;
}

.upload-box {
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-box:hover {
  border-color: var(--color-primary);
}

.upload-box p {
  margin: 1rem 0 0.5rem;
  font-weight: 500;
}

.upload-box span {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.fire-drills-container {
  padding: 20px;
} 
@media (max-width: 768px) {
  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .drills-table {
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .fire-drills-page {
    padding: 0.75rem;
  }

  .content-header {
    gap: 0.75rem;
  }

  .status-overview {
    gap: 1rem;
  }
}

.first-aid-kits-page {
  padding: 1rem;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.status-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.status-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.status-card .status-icon {
  width: 48px;
  height: 48px;
  background: var(--color-background);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
}

.status-details h3 {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.status-details p {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-badge.ok {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.kits-table {
  width: 100%;
  border-collapse: collapse;
}

.kits-table th,
.kits-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.kits-table th {
  font-weight: 600;
  color: var(--color-text-secondary);
  background-color: var(--color-background);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-pill.ok {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.status-pill.low_stock {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.status-pill.empty {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.checklist-section {
  margin-top: 2rem;
}

.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-top: 1rem;
}

.checklist-card {
  background: white;
  padding: 1.25rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.checklist-header h3 {
  margin: 0;
  font-size: 1rem;
}

.checklist-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.checklist-items li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.checklist-items li:last-child {
  border-bottom: none;
}

.documents-section {
  margin-top: 2rem;
}

.upload-area {
  margin-top: 1rem;
}

.upload-box {
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-box:hover {
  border-color: var(--color-primary);
}

.upload-box p {
  margin: 1rem 0 0.5rem;
  font-weight: 500;
}

.upload-box span {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .checklist-grid {
    grid-template-columns: 1fr;
  }
}

.first-aid-kits-container {
  padding: 20px;
} 
@media (max-width: 480px) {
  .first-aid-kits-page {
    padding: 0.75rem;
  }

  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .status-overview {
    gap: 1rem;
  }

  .kits-table {
    display: block;
    overflow-x: auto;
  }
}

.emergency-preparedness-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f6fa;
}

.emergency-preparedness-content {
  display: flex;
  flex: 1 1;
  padding: 20px;
  padding-top: 80px;
  gap: 20px;
}

.emergency-preparedness-sidebar {
  width: 280px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

.emergency-preparedness-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.emergency-preparedness-menu-item {
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.emergency-preparedness-menu-item:hover {
  background-color: #f0f2f5;
}

.emergency-preparedness-menu-item.active {
  background-color: #e3f2fd;
  color: #1976d2;
}

.emergency-preparedness-menu-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.emergency-preparedness-menu-icon {
  width: 20px;
}

.emergency-preparedness-menu-arrow {
  margin-left: auto;
  font-size: 12px;
}

.emergency-preparedness-main {
  flex: 1 1;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 24px;
  overflow-y: auto;
}

.sidebar-back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: #1F2937;
  font-size: 1em;
  font-weight: 500;
  padding: 8px 0 16px 0;
  margin-bottom: 8px;
  cursor: pointer;
  transition: color 0.2s;
}

.sidebar-back-btn:hover {
  color: #1574F6;
}

@media (max-width: 768px) {
  .emergency-preparedness-content {
    padding-top: 108px; /* 64px mobile header + 44px tab nav */
  }

  .emergency-preparedness-sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    height: 44px;
    flex-direction: row;
    border-radius: 0;
    box-shadow: 0 1px 0 #e2e8f0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    z-index: 91;
    display: flex;
    align-items: stretch;
  }

  .emergency-preparedness-sidebar::-webkit-scrollbar {
    display: none;
  }

  .emergency-preparedness-menu {
    flex-direction: row;
    gap: 0;
    align-items: stretch;
    flex: none;
  }

  .emergency-preparedness-menu-item {
    white-space: nowrap;
    padding: 0 16px;
    height: 44px;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .emergency-preparedness-menu-item.active {
    border-bottom-color: #1976d2;
    background: transparent;
    color: #1976d2;
  }

  .emergency-preparedness-menu-arrow {
    display: none;
  }

  .emergency-preparedness-menu-icon {
    display: none;
  }

  .sidebar-back-btn {
    display: none;
  }

  .emergency-preparedness-main {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .emergency-preparedness-content {
    padding: 12px;
    padding-top: 108px;
    gap: 12px;
    overflow-x: hidden;
  }
} 
/* ============================================================
   Settings Sidebar & Mobile Nav
   Clean left-accent nav inside pd-main.
   Tokens: var(--cs-*)
   ============================================================ */

.settings-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 4px;
  height: -webkit-fit-content;
  height: fit-content;
  box-sizing: border-box;
  padding: var(--cs-space-2) 0;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Back button */
.sidebar-back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--cs-text-muted);
  font-family: Inter, -apple-system, sans-serif;
  font-size: var(--cs-text-sm);
  font-weight: 500;
  padding: 8px 12px;
  margin-bottom: var(--cs-space-3);
  cursor: pointer;
  border-radius: var(--cs-radius);
  transition: all 0.15s;
  width: 100%;
  text-align: left;
  min-height: 36px;
  box-sizing: border-box;
}

.sidebar-back-btn:hover {
  color: var(--cs-blue);
  background: var(--cs-blue-light);
}

/* Nav items */
.settings-nav-item {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  text-decoration: none;
  color: var(--cs-text-secondary);
  border-radius: var(--cs-radius);
  font-size: 13.5px;
  font-weight: 500;
  font-family: Inter, -apple-system, sans-serif;
  transition: all 0.15s;
  white-space: nowrap;
  min-height: 38px;
  box-sizing: border-box;
  border-left: 3px solid transparent;
}

.settings-nav-item:hover {
  background: var(--cs-bg-alt);
  color: var(--cs-blue);
}

.settings-nav-item.active {
  background: var(--cs-blue-light);
  color: var(--cs-blue);
  font-weight: 600;
  border-left-color: var(--cs-blue);
}

/* Nav icon */
.settings-nav-icon {
  margin-right: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  width: 18px;
  justify-content: center;
  opacity: 0.7;
}

.settings-nav-item.active .settings-nav-icon {
  opacity: 1;
}

/* Group label */
.settings-nav-group-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cs-text-faint);
  padding: 16px 12px 6px;
  margin: 0;
}

/* Divider */
.settings-nav-divider {
  height: 1px;
  background: var(--cs-border);
  margin: var(--cs-space-2) var(--cs-space-3);
}

/* Mobile elements — hidden on desktop */
.settings-mobile-bar { display: none; }
.settings-overlay { display: none; }
.settings-mobile-drawer { display: none; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .settings-sidebar { display: none; }

  .settings-mobile-bar {
    display: flex;
    align-items: center;
    gap: var(--cs-space-2);
    padding: 10px 16px;
    background: #fff;
    background: var(--cs-white, #fff);
    border-bottom: 1px solid #e5e7eb;
    border-bottom: 1px solid var(--cs-border, #e5e7eb);
    min-height: 44px;
    border-radius: 10px;
    margin: 0 12px 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }

  .settings-mobile-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #4b5563;
    color: var(--cs-text-secondary, #4b5563);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 0;
    flex-shrink: 0;
    min-height: 32px;
  }

  .settings-mobile-title {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    color: var(--cs-text-secondary, #4b5563);
    flex: 1 1;
    text-align: right;
  }

  .settings-mobile-toggle {
    background: #eef4ff;
    background: var(--cs-blue-light, #eef4ff);
    border: 1px solid #3b82f6;
    border: 1px solid var(--cs-blue, #3b82f6);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #3b82f6;
    color: var(--cs-blue, #3b82f6);
    font-size: 14px;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-left: auto;
  }

  .settings-mobile-toggle:hover { background: #3b82f6; background: var(--cs-blue, #3b82f6); color: #fff; }

  .settings-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 200;
    animation: settingsFadeIn 0.2s ease;
  }

  .settings-mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background: var(--cs-white);
    z-index: 201;
    box-shadow: var(--cs-shadow-lg);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
  }

  .settings-mobile-drawer.open { transform: translateX(0); }

  .settings-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cs-space-5) var(--cs-space-4) var(--cs-space-4);
    font-size: var(--cs-text-md);
    font-weight: 700;
    color: var(--cs-text-primary);
    border-bottom: 1px solid var(--cs-border);
    flex-shrink: 0;
  }

  .settings-drawer-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--cs-text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.2s;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .settings-drawer-close:hover { background: var(--cs-bg); }

  .settings-drawer-nav {
    display: flex;
    flex-direction: column;
    padding: var(--cs-space-2) var(--cs-space-2) var(--cs-space-4);
    gap: 2px;
  }
}

@keyframes settingsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================================
   Settings Layout — Sidebar + Content Shell
   Renders inside pd-main (already offset by 80px header).
   Tokens: var(--cs-*)
   ============================================================ */

/* Standalone page wrapper (when not inside PropertyDashboard) */
.settings-page {
  min-height: 100vh;
  padding-top: 80px;
  background: #f5f7fa;
  background: var(--cs-bg, #f5f7fa);
}

.settings-standalone {
  padding: 24px 32px;
  max-width: 1320px;
  margin: 0 auto;
}

.settings-layout {
  min-height: 100%;
  font-family: Inter, -apple-system, sans-serif;
  box-sizing: border-box;
}

.settings-container {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  grid-gap: var(--cs-space-5);
  gap: var(--cs-space-5);
  padding: 0 0 var(--cs-space-8);
  max-width: 1320px;
  width: 100%;
  box-sizing: border-box;
}

/* Main content area */
.settings-content {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

/* ── Tablet ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .settings-standalone {
    padding: 16px;
  }

  .settings-container {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
  }

  .settings-content {
    margin-top: 0;
    padding: 16px;
  }
}

/* ── Small phone ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .settings-standalone {
    padding: 12px;
  }

  .settings-content {
    padding: 12px;
  }
}

/* ============================================================
   CloudSafe Settings — Shared Form & Section Styles
   Single import for all settings sub-pages.
   Prefix: .stg-
   Tokens: var(--cs-*)
   ============================================================ */

/* ── Page header ─────────────────────────────────────────── */
.stg-page-header {
  margin-bottom: 20px;
  text-align: left;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cs-border);
}

.stg-page-header-row {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  margin-bottom: 20px;
  text-align: left;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cs-border);
}

.stg-page-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--cs-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.stg-page-icon-blue   { background: var(--cs-blue-light); color: var(--cs-blue); }
.stg-page-icon-green  { background: var(--cs-green-light); color: var(--cs-green-dark); }
.stg-page-icon-amber  { background: var(--cs-amber-light); color: var(--cs-amber-dark); }
.stg-page-icon-red    { background: var(--cs-red-light);   color: var(--cs-red-dark); }
.stg-page-icon-purple { background: var(--cs-purple-light); color: var(--cs-purple-dark); }

.stg-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--cs-text-primary);
  margin: 0 0 3px;
  line-height: 1.3;
  text-align: left;
  letter-spacing: -0.01em;
}

.stg-page-subtitle {
  font-size: 13px;
  color: var(--cs-text-muted);
  margin: 0;
  line-height: 1.5;
  text-align: left;
}

/* ── Section card ────────────────────────────────────────── */
.stg-section {
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 16px;
  text-align: left;
}

.stg-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cs-text-primary);
  margin: 0 0 4px;
  text-align: left;
}

.stg-section-desc {
  font-size: 12.5px;
  color: var(--cs-text-muted);
  margin: 0 0 var(--cs-space-4);
  line-height: 1.5;
  text-align: left;
}

.stg-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-4);
  margin-bottom: var(--cs-space-4);
}

/* ── Form group ──────────────────────────────────────────── */
.stg-form-group {
  margin-bottom: var(--cs-space-4);
}

.stg-form-group:last-child {
  margin-bottom: 0;
}

.stg-form-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 13px;
  color: var(--cs-text-secondary);
  text-align: left;
}

.stg-required {
  color: var(--cs-red);
  margin-left: 2px;
}

.stg-help-text {
  margin-top: 5px;
  font-size: 12px;
  color: var(--cs-text-muted);
  line-height: 1.45;
}

.stg-error-text {
  margin-top: 5px;
  font-size: 12px;
  color: var(--cs-red);
  line-height: 1.45;
}

/* ── Form row (two column on desktop, stacked on mobile) ── */
.stg-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--cs-space-4);
  gap: var(--cs-space-4);
}

/* ── Input + Select + Textarea ───────────────────────────── */
.stg-input,
.stg-select,
.stg-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  font-size: 13.5px;
  font-family: Inter, -apple-system, sans-serif;
  color: var(--cs-text-primary);
  background: var(--cs-white);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  min-height: 40px;
}

.stg-input:hover,
.stg-select:hover,
.stg-textarea:hover {
  border-color: var(--cs-border-dark);
}

.stg-input:focus,
.stg-select:focus,
.stg-textarea:focus {
  outline: none;
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.10);
}

.stg-input:disabled,
.stg-select:disabled,
.stg-textarea:disabled {
  background: var(--cs-bg);
  color: var(--cs-text-faint);
  cursor: not-allowed;
}

.stg-textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.5;
}

.stg-select {
  -webkit-appearance: auto;
          appearance: auto;
}

/* File input */
.stg-input-file {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--cs-text-muted);
  cursor: pointer;
}

.stg-input-file::-webkit-file-upload-button {
  padding: 6px 12px;
  margin-right: 10px;
  background: var(--cs-bg);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  font-size: 12px;
  font-weight: 500;
  color: var(--cs-text-secondary);
  font-family: Inter, -apple-system, sans-serif;
  cursor: pointer;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
}

.stg-input-file::file-selector-button {
  padding: 6px 12px;
  margin-right: 10px;
  background: var(--cs-bg);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  font-size: 12px;
  font-weight: 500;
  color: var(--cs-text-secondary);
  font-family: Inter, -apple-system, sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}

.stg-input-file::-webkit-file-upload-button:hover {
  background: var(--cs-border);
}

.stg-input-file::file-selector-button:hover {
  background: var(--cs-border);
}

/* ── Toggle row (checkbox with label + helper) ───────────── */
.stg-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: var(--cs-space-3);
  padding: 14px 16px;
  background: var(--cs-bg-alt);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  cursor: pointer;
  transition: border-color 0.15s;
}

.stg-toggle-row:hover {
  border-color: var(--cs-blue);
}

.stg-toggle-checkbox {
  margin-top: 2px;
  accent-color: var(--cs-blue);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.stg-toggle-body {
  flex: 1 1;
  min-width: 0;
}

.stg-toggle-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cs-text-primary);
  display: block;
  cursor: pointer;
}

.stg-toggle-help {
  font-size: 12px;
  color: var(--cs-text-muted);
  margin-top: 2px;
  line-height: 1.45;
}

/* ── Buttons ─────────────────────────────────────────────── */
.stg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--cs-radius-md);
  font-size: 13.5px;
  font-weight: 600;
  font-family: Inter, -apple-system, sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 40px;
  border: none;
  box-sizing: border-box;
}

.stg-btn-primary {
  background: var(--cs-blue);
  color: var(--cs-white);
}

.stg-btn-primary:hover {
  background: var(--cs-blue-hover);
}

.stg-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.stg-btn-outline {
  background: var(--cs-white);
  color: var(--cs-text-secondary);
  border: 1px solid var(--cs-border-dark);
}

.stg-btn-outline:hover {
  background: var(--cs-bg-alt);
}

.stg-btn-danger {
  background: var(--cs-red);
  color: var(--cs-white);
}

.stg-btn-danger:hover {
  background: var(--cs-red-dark);
}

.stg-btn-sm {
  padding: 7px 14px;
  font-size: 12.5px;
  min-height: 34px;
}

/* Button row — right-aligned, with gap */
.stg-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cs-space-3);
  margin-top: var(--cs-space-5);
}

/* ── Notice / info banner ────────────────────────────────── */
.stg-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--cs-space-3);
  background: var(--cs-blue-light);
  border: 1px solid #bfdbfe;
  border-radius: var(--cs-radius-md);
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: #1d4ed8;
}

.stg-notice svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.stg-notice strong {
  display: block;
  font-weight: 600;
  margin-bottom: 3px;
}

.stg-notice p {
  margin: 0;
  color: #3b82f6;
  line-height: 1.5;
}

/* ── Code banner (e.g. CloudSafe ID) ─────────────────────── */
.stg-code-banner {
  background: var(--cs-blue-light);
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
  text-align: left;
}

.stg-code-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--cs-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.stg-code-value {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
}

.stg-code-value span {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cs-text-primary);
  letter-spacing: 0.12em;
}

.stg-code-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--cs-white);
  border: 1px solid #bfdbfe;
  border-radius: var(--cs-radius);
  color: var(--cs-blue);
  cursor: pointer;
  transition: all 0.15s;
}

.stg-code-copy:hover {
  background: var(--cs-blue);
  color: var(--cs-white);
}

.stg-code-hint {
  font-size: 12px;
  color: var(--cs-text-muted);
  margin: 8px 0 0;
  line-height: 1.4;
}

/* ── Empty state ─────────────────────────────────────────── */
.stg-empty {
  text-align: center;
  padding: var(--cs-space-10) var(--cs-space-6);
  background: var(--cs-bg-alt);
  border: 1px dashed var(--cs-border-dark);
  border-radius: var(--cs-radius-lg);
}

.stg-empty-icon {
  font-size: 1.75rem;
  color: var(--cs-border-dark);
  margin-bottom: var(--cs-space-3);
}

.stg-empty p {
  color: var(--cs-text-muted);
  font-size: 13.5px;
  margin: 0 0 var(--cs-space-4);
}

/* ── Entity cards (management co, building managers) ─────── */
.stg-entity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stg-entity-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  transition: border-color 0.15s;
}

.stg-entity-card:hover {
  border-color: var(--cs-border-dark);
}

.stg-entity-info {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  min-width: 0;
}

.stg-entity-avatar {
  width: 38px;
  height: 38px;
  background: #e0edff;
  color: var(--cs-blue);
  border-radius: var(--cs-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.stg-entity-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cs-text-primary);
  margin: 0 0 1px;
}

.stg-entity-detail {
  font-size: 12px;
  color: var(--cs-text-muted);
  margin: 0;
  line-height: 1.4;
}

.stg-entity-code {
  font-size: 11px;
  color: var(--cs-text-faint);
  margin: 3px 0 0;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.stg-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--cs-radius);
  color: var(--cs-text-faint);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.stg-remove-btn:hover {
  background: var(--cs-red-light);
  border-color: var(--cs-red-border);
  color: var(--cs-red);
}

/* ── Count badge ─────────────────────────────────────────── */
.stg-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e0edff;
  color: var(--cs-blue);
  font-size: 11px;
  font-weight: 600;
  width: 20px;
  height: 20px;
  border-radius: var(--cs-radius-full);
}

/* ── Planned / Coming Soon cards ─────────────────────────── */
.stg-planned-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

.stg-planned-card {
  display: flex;
  align-items: flex-start;
  gap: var(--cs-space-3);
  padding: 14px 16px;
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
}

.stg-planned-blue { border-left: 3px solid var(--cs-blue); }
.stg-planned-gray { border-left: 3px solid var(--cs-border); }

.stg-planned-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--cs-radius);
  background: var(--cs-blue-light);
  color: var(--cs-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.stg-planned-body {
  flex: 1 1;
  min-width: 0;
}

.stg-planned-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-2);
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.stg-planned-header strong {
  font-size: 13px;
  color: var(--cs-text-primary);
}

.stg-planned-body p {
  font-size: 12px;
  color: var(--cs-text-muted);
  margin: 0;
  line-height: 1.5;
}

.stg-pill {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--cs-radius-full);
  white-space: nowrap;
}

.stg-pill-blue { background: var(--cs-blue-light); color: #1d4ed8; border: 1px solid #bfdbfe; }
.stg-pill-gray { background: var(--cs-bg-alt); color: var(--cs-text-faint); border: 1px solid var(--cs-border); }

/* ── Status summary card ─────────────────────────────────── */
.stg-status-card {
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  overflow: hidden;
  margin-top: 14px;
}

.stg-status-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cs-text-secondary);
  background: var(--cs-bg-alt);
  border-bottom: 1px solid var(--cs-bg);
}

.stg-status-list {
  padding: var(--cs-space-2) 18px;
}

.stg-status-row {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--cs-bg-alt);
  font-size: 13px;
}

.stg-status-row:last-child { border-bottom: none; }

.stg-status-icon { font-size: 14px; flex-shrink: 0; }
.stg-status-ok   { color: var(--cs-green-dark); }
.stg-status-warn { color: var(--cs-amber-dark); }
.stg-status-label  { flex: 1 1; color: var(--cs-text-secondary); font-weight: 500; }
.stg-status-detail { color: var(--cs-text-faint); font-size: 11.5px; }

/* ── Color picker ────────────────────────────────────────── */
.stg-color-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--cs-space-4);
  gap: var(--cs-space-4);
}

.stg-color-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
}

.stg-color-swatch {
  width: 40px;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--cs-border-dark);
  border-radius: var(--cs-radius);
  cursor: pointer;
  flex-shrink: 0;
}

.stg-color-text {
  flex: 1 1;
  padding: 9px 12px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  font-size: 13px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  text-transform: uppercase;
  color: var(--cs-text-primary);
  box-sizing: border-box;
  min-height: 40px;
}

.stg-color-text:focus {
  outline: none;
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.10);
}

/* Quick swatches */
.stg-swatches {
  display: flex;
  gap: var(--cs-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--cs-space-2);
}

.stg-swatch-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.65rem;
  transition: transform 0.12s;
}

.stg-swatch-btn:hover { transform: scale(1.15); }
.stg-swatch-btn.selected { border-color: var(--cs-text-primary); transform: scale(1.1); }

/* Logo upload */
.stg-upload-row {
  display: flex;
  align-items: flex-start;
  gap: var(--cs-space-4);
}

.stg-logo-preview {
  width: 88px;
  height: 44px;
  border: 1px dashed var(--cs-border-dark);
  border-radius: var(--cs-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cs-bg-alt);
  overflow: hidden;
  flex-shrink: 0;
}

.stg-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.stg-logo-placeholder {
  color: var(--cs-border-dark);
  font-size: 1.15rem;
}

/* Preview bar */
.stg-preview {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  overflow: hidden;
  margin-top: var(--cs-space-4);
}

.stg-preview-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--cs-text-muted);
  padding: 5px 12px;
  background: var(--cs-bg-alt);
  border-bottom: 1px solid var(--cs-bg);
}

.stg-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: var(--cs-space-4);
}

.stg-preview-logo { font-size: 13.5px; font-weight: 700; color: #fff; }

.stg-preview-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: default;
}

.stg-preview-cta-row {
  display: flex;
  gap: var(--cs-space-3);
  padding: 10px 16px;
  background: var(--cs-bg-alt);
}

.stg-preview-cta {
  padding: 6px 14px;
  border-radius: 7px;
  border: 1.5px solid transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: default;
}

.stg-preview-cta-sec {
  background: transparent !important;
}

/* ── Modal (for Management / Building Managers) ──────────── */
.stg-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: var(--cs-space-5);
}

.stg-modal {
  background: var(--cs-white);
  border-radius: var(--cs-radius-xl);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--cs-shadow-xl);
  overflow: hidden;
}

.stg-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 0;
}

.stg-modal-header h3 {
  font-size: var(--cs-text-lg);
  font-weight: 600;
  color: var(--cs-text-primary);
  margin: 0;
}

.stg-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--cs-text-faint);
  cursor: pointer;
  border-radius: var(--cs-radius);
  transition: all 0.15s;
}

.stg-modal-close:hover {
  background: var(--cs-bg);
  color: var(--cs-text-secondary);
}

.stg-modal-body {
  padding: 14px 22px 0;
}

.stg-modal-hint {
  color: var(--cs-text-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 var(--cs-space-4);
}

.stg-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--cs-space-3);
  padding: 14px 22px 18px;
}

.stg-readonly-field {
  padding: 9px 12px;
  background: var(--cs-bg-alt);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  font-size: 13.5px;
  color: var(--cs-text-muted);
}

.stg-verify-box {
  background: var(--cs-blue-light);
  border: 1px solid #bfdbfe;
  border-radius: var(--cs-radius-md);
  padding: 14px 16px;
  margin: var(--cs-space-2) 0 var(--cs-space-4);
}

.stg-verify-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--cs-text-muted);
  margin: 0 0 3px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.stg-verify-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--cs-text-primary);
  margin: 0 0 var(--cs-space-3);
}

.stg-verify-value:last-child { margin-bottom: 0; }

.stg-verify-code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: var(--cs-text-md);
  letter-spacing: 0.05em;
}

/* ── Loading ─────────────────────────────────────────────── */
.stg-loading {
  text-align: center;
  padding: var(--cs-space-6);
  color: var(--cs-text-muted);
  font-size: 13px;
}

/* ── Property info bar ───────────────────────────────────── */
.stg-property-info {
  margin-bottom: var(--cs-space-5);
  padding: 10px 14px;
  background: var(--cs-bg-alt);
  border-radius: var(--cs-radius-md);
  font-size: 13.5px;
  color: var(--cs-text-secondary);
}

/* ── Max-width utilities ─────────────────────────────────── */
.stg-max-form { max-width: 600px; }
.stg-max-wide { max-width: 680px; }

/* ── Sub-options (indented checkboxes under a toggle) ────── */
.stg-sub-options {
  margin-top: var(--cs-space-3);
  margin-left: var(--cs-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2);
}

.stg-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--cs-text-primary);
  min-height: 32px;
}

.stg-checkbox-label input[type="checkbox"] {
  accent-color: var(--cs-blue);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .stg-page-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  .stg-page-header-row {
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  .stg-page-title {
    font-size: 18px;
  }

  .stg-page-icon {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .stg-section {
    padding: 16px;
    margin-bottom: 12px;
  }

  .stg-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .stg-planned-grid {
    grid-template-columns: 1fr;
  }

  .stg-color-row {
    grid-template-columns: 1fr;
  }

  .stg-upload-row {
    flex-direction: column;
  }

  .stg-actions {
    flex-direction: column;
  }

  .stg-actions .stg-btn {
    width: 100%;
  }

  .stg-code-banner {
    padding: 14px 16px;
    margin-bottom: 12px;
  }

  .stg-code-value span {
    font-size: 1.1rem;
  }

  .stg-max-form,
  .stg-max-wide {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .stg-page-title {
    font-size: 16px;
  }

  .stg-section {
    padding: 14px;
    border-radius: 8px;
  }

  .stg-input,
  .stg-select,
  .stg-textarea {
    font-size: 14px;
    padding: 10px 12px;
    min-height: 42px;
  }

  .stg-modal {
    border-radius: var(--cs-radius-xl) var(--cs-radius-xl) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    overflow-y: auto;
    max-width: none;
  }

  .stg-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
}

/* Settings Dashboard — list layout */

.stg-dash {
  text-align: left;
}

.stg-dash-header {
  margin-bottom: 20px;
}

.stg-dash-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--cs-text-primary);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.stg-dash-header p {
  font-size: 13px;
  color: var(--cs-text-muted);
  margin: 0;
}

/* List container */
.stg-dash-list {
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: 12px;
  overflow: hidden;
}

/* Each row */
.stg-dash-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  text-decoration: none;
  transition: background 0.12s;
  border-bottom: 1px solid var(--cs-border);
  cursor: pointer;
}

.stg-dash-row:last-child {
  border-bottom: none;
}

.stg-dash-row:hover {
  background: #f8fafc;
}

/* Icon */
.stg-dash-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

/* Text */
.stg-dash-row-text {
  flex: 1 1;
  min-width: 0;
}

.stg-dash-row-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--cs-text-primary);
  margin-bottom: 1px;
}

.stg-dash-row-desc {
  display: block;
  font-size: 12.5px;
  color: var(--cs-text-muted);
  line-height: 1.4;
}

/* Arrow */
.stg-dash-row-arrow {
  color: #c4cdd5;
  font-size: 11px;
  flex-shrink: 0;
  transition: transform 0.15s, color 0.15s;
}

.stg-dash-row:hover .stg-dash-row-arrow {
  color: var(--cs-blue);
  transform: translateX(2px);
}

/* ============================================================
   Forgot Password — uses CloudSafe design tokens (tokens.css)
   Matches Login / Register page patterns.
   ============================================================ */

/* ── Page layout ─────────────────────────────────────────── */
.fp-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--cs-bg-alt);
}

/* ── Header ──────────────────────────────────────────────── */
.fp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cs-space-5) var(--cs-space-6);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.fp-logo {
  height: 36px;
  flex-shrink: 0;
}

.fp-header-right {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
}

.fp-header-text {
  color: var(--cs-text-muted);
  font-size: var(--cs-text-base);
}

.fp-header-link {
  color: var(--cs-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--cs-text-base);
  transition: color var(--cs-transition-fast);
}

.fp-header-link:hover {
  color: var(--cs-blue-dark);
}

/* ── Card area ───────────────────────────────────────────── */
.fp-body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1;
  padding: var(--cs-space-6) var(--cs-space-5);
}

.fp-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius-xl);
  padding: var(--cs-space-10);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--cs-shadow-md);
  box-sizing: border-box;
  text-align: left;
}

/* ── Titles ──────────────────────────────────────────────── */
.fp-title {
  font-size: var(--cs-text-3xl);
  font-weight: 700;
  color: var(--cs-text-primary);
  margin: 0 0 var(--cs-space-2) 0;
}

.fp-subtitle {
  font-size: var(--cs-text-md);
  color: var(--cs-text-muted);
  margin: 0 0 var(--cs-space-8) 0;
  line-height: 1.5;
}

/* ── Server error alert ──────────────────────────────────── */
.fp-error-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--cs-space-3);
  background: var(--cs-red-light);
  border: 1px solid var(--cs-red-border);
  border-radius: var(--cs-radius);
  padding: var(--cs-space-3) var(--cs-space-4);
  margin-bottom: var(--cs-space-5);
  font-size: var(--cs-text-sm);
  color: var(--cs-red-dark);
  line-height: 1.5;
}

.fp-error-alert-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Form ────────────────────────────────────────────────── */
.fp-form {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-5);
}

/* ── Field group ─────────────────────────────────────────── */
.fp-field {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2);
}

.fp-label {
  font-size: var(--cs-text-base);
  font-weight: 500;
  color: var(--cs-text-secondary);
}

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

.fp-input-icon {
  position: absolute;
  left: 14px;
  color: var(--cs-text-faint);
  font-size: 15px;
  pointer-events: none;
  z-index: 1;
}

.fp-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--cs-space-4) 0 42px;
  border: 1.5px solid var(--cs-border-dark);
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-lg);
  background: var(--cs-bg-alt);
  color: var(--cs-text-primary);
  box-sizing: border-box;
  transition: border-color var(--cs-transition-fast), box-shadow var(--cs-transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.fp-input::placeholder {
  color: var(--cs-text-faint);
}

.fp-input:focus {
  outline: none;
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.15);
  background: var(--cs-white);
}

.fp-input.has-error {
  border-color: var(--cs-red);
}

.fp-input.has-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.fp-field-error {
  font-size: var(--cs-text-sm);
  color: var(--cs-red);
  margin: 0;
}

/* ── Submit button ───────────────────────────────────────── */
.fp-submit {
  width: 100%;
  height: 48px;
  background: var(--cs-blue);
  color: var(--cs-white);
  border: none;
  border-radius: var(--cs-radius-lg);
  font-size: var(--cs-text-lg);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--cs-transition-fast), box-shadow var(--cs-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-space-2);
}

.fp-submit:hover:not(:disabled) {
  background: var(--cs-blue-hover);
  box-shadow: var(--cs-shadow-sm);
}

.fp-submit:active:not(:disabled) {
  background: var(--cs-blue-dark);
}

.fp-submit:focus-visible {
  outline: 2px solid var(--cs-blue-dark);
  outline-offset: 2px;
}

.fp-submit:disabled {
  background: #a0c4f1;
  cursor: not-allowed;
}

/* Spinner */
.fp-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fp-spin 0.6s linear infinite;
}

@keyframes fp-spin {
  to { transform: rotate(360deg); }
}

/* ── Back to login link ──────────────────────────────────── */
.fp-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--cs-space-2);
  color: var(--cs-text-muted);
  font-size: var(--cs-text-base);
  font-weight: 500;
  text-decoration: none;
  margin-top: var(--cs-space-4);
  transition: color var(--cs-transition-fast);
}

.fp-back-link:hover {
  color: var(--cs-text-primary);
}

/* ── Success state ───────────────────────────────────────── */
.fp-success {
  text-align: center;
}

.fp-success-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cs-green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--cs-space-6);
}

.fp-success-icon {
  color: var(--cs-green);
  font-size: 24px;
}

.fp-success-title {
  font-size: var(--cs-text-xl);
  font-weight: 700;
  color: var(--cs-text-primary);
  margin: 0 0 var(--cs-space-3) 0;
}

.fp-success-text {
  font-size: var(--cs-text-md);
  color: var(--cs-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--cs-space-8) 0;
}

.fp-success-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--cs-space-8);
  background: var(--cs-blue);
  color: var(--cs-white);
  text-decoration: none;
  border-radius: var(--cs-radius-lg);
  font-size: var(--cs-text-lg);
  font-weight: 600;
  transition: background-color var(--cs-transition-fast), box-shadow var(--cs-transition-fast);
}

.fp-success-btn:hover {
  background: var(--cs-blue-hover);
  box-shadow: var(--cs-shadow-sm);
}

.fp-success-btn:focus-visible {
  outline: 2px solid var(--cs-blue-dark);
  outline-offset: 2px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  .fp-header {
    padding: var(--cs-space-4) var(--cs-space-5);
  }

  .fp-body {
    padding: var(--cs-space-4);
    align-items: flex-start;
  }

  .fp-card {
    padding: var(--cs-space-8) var(--cs-space-6);
    box-shadow: var(--cs-shadow-sm);
  }
}

@media (max-width: 480px) {
  .fp-header {
    padding: var(--cs-space-3) var(--cs-space-4);
  }

  .fp-logo {
    height: 30px;
  }

  .fp-header-text {
    display: none;
  }

  .fp-body {
    padding: 0;
    align-items: stretch;
  }

  .fp-card {
    border-radius: 0;
    padding: var(--cs-space-8) var(--cs-space-5) var(--cs-space-10);
    box-shadow: none;
  }

  .fp-title {
    font-size: var(--cs-text-2xl);
  }

  .fp-subtitle {
    font-size: var(--cs-text-base);
    margin-bottom: var(--cs-space-6);
  }
}

@media (max-width: 360px) {
  .fp-card {
    padding: var(--cs-space-6) var(--cs-space-4) var(--cs-space-8);
  }
}

.reset-password-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 0 20px;
}

.reset-password-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-color);
  text-align: left;
}

.reset-password-subtitle {
  font-size: 16px;
  margin-bottom: 30px;
  color: #637587;
  text-align: left;
}

.password-requirements {
  margin: 20px 0;
  padding: 16px;
  background-color: var(--input-background);
  border-radius: 8px;
}

.password-requirements p {
  margin: 0 0 8px 0;
  font-weight: 500;
  color: var(--text-color);
}

.password-requirements ul {
  margin: 0;
  padding-left: 20px;
  color: #637587;
}

.password-requirements li {
  margin: 4px 0;
  font-size: 14px;
}

.input-group {
  margin-bottom: 20px;
}

.input-with-icon {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #637587;
  cursor: pointer;
  padding: 4px;
}

.toggle-password:hover {
  color: var(--primary-color);
}

@media (max-width: 768px) {
  .depth-frame {
    padding: 24px;
    width: 100%;
    max-width: 400px;
  }

  .reset-password-title {
    font-size: 24px;
  }
} 
.edit-property-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.edit-property-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.edit-property-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.back-button {
  padding: 8px 16px;
  background: #f5f5f5;
  border: none;
  border-radius: 8px;
  color: #333;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.back-button:hover {
  background: #e5e5e5;
}

.edit-property-form {
  background: white;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s ease;
}

.form-group input:focus {
  outline: none;
  border-color: #1A80E5;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 32px;
}

.cancel-button,
.save-button {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-button {
  background: #f5f5f5;
  border: none;
  color: #666;
}

.cancel-button:hover {
  background: #e5e5e5;
}

.save-button {
  background: #1A80E5;
  border: none;
  color: white;
}

.save-button:hover {
  background: #1666b8;
}

.save-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  font-size: 18px;
  color: #666;
}

.error {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  font-size: 18px;
  color: #ff3b30;
}

@media (max-width: 768px) {
  .edit-property-container {
    margin: 20px auto;
  }

  .edit-property-form {
    padding: 20px;
  }

  .form-actions {
    flex-direction: column;
  }

  .cancel-button,
  .save-button {
    width: 100%;
  }
} 
/* ============================================
   CloudSafe Contractor Dashboard
   Uses global --cs-* tokens from tokens.css
   ============================================ */

/* Base */
.contractor-dashboard {
  min-height: 100vh;
  background: var(--cs-bg);
  color: var(--cs-text-primary);
  -webkit-font-smoothing: antialiased;
}
.contractor-dashboard *,
.contractor-dashboard *::before,
.contractor-dashboard *::after { box-sizing: border-box; }

/* ─── Header ─────────────────────────────────── */
.contractor-header {
  background: #0f172a;
  color: #fff;
  height: 60px;
  padding: 0 var(--cs-space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-left {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  min-width: 0;
  flex: 1 1;
  height: 100%;
}
.header-logo { height: 28px; flex-shrink: 0; }
.header-title {
  font-size: var(--cs-text-base);
  margin: 0;
  color: white;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1;
  min-width: 0;
}
.header-right {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  color: white;
  flex-shrink: 0;
  height: 100%;
}
.header-company-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  background: rgba(255,255,255,0.1);
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-sm);
  color: rgba(255,255,255,0.92);
}
.header-company-name { font-weight: 500; }
.header-company-code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.header-user {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: var(--cs-radius);
  transition: background 0.2s;
}
.header-user:hover { background: rgba(255,255,255,0.1); }
.header-user-icon { font-size: 1.2rem; opacity: 0.8; }
.header-user-name { font-size: var(--cs-text-sm); }
.header-logout {
  background: rgba(255,255,255,0.08);
  border: none;
  color: white;
  padding: 0.4rem 0.55rem;
  border-radius: var(--cs-radius);
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
}
.header-logout:hover { background: rgba(255,255,255,0.18); }
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 0.4rem;
  flex-shrink: 0;
}

/* ─── Layout ─────────────────────────────────── */
.contractor-layout {
  display: flex;
  min-height: calc(100vh - 60px);
}

/* ─── Sidebar ────────────────────────────────── */
.contractor-sidebar {
  width: 240px;
  background: var(--cs-white);
  border-right: 1px solid var(--cs-border);
  padding: var(--cs-space-4) 0;
  flex-shrink: 0;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--cs-space-2);
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-base);
  font-weight: 500;
  color: var(--cs-text-muted);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
  transition: all 0.2s;
}
.sidebar-item:hover {
  background: var(--cs-bg-alt);
  color: var(--cs-text-primary);
}
.sidebar-item.active {
  background: var(--cs-blue-light);
  color: var(--cs-blue);
  font-weight: 600;
}
.sidebar-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-badge {
  margin-left: auto;
  background: var(--cs-red);
  color: white;
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--cs-radius-full);
  font-weight: 700;
}

/* ─── Main Content ───────────────────────────── */
.contractor-main {
  flex: 1 1;
  padding: var(--cs-space-6);
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 5rem;
}

/* ─── Section Titles ─────────────────────────── */
.section-title {
  font-size: var(--cs-text-2xl);
  margin: 0 0 var(--cs-space-2);
  font-weight: 700;
  color: var(--cs-text-primary);
}
.con-section-subtitle {
  font-size: var(--cs-text-base);
  color: var(--cs-text-muted);
  margin: 0 0 var(--cs-space-5);
}

/* ─── Stats Grid ─────────────────────────────── */
.con-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--cs-space-4);
  gap: var(--cs-space-4);
  margin-bottom: var(--cs-space-6);
}
.con-stat-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-space-4) var(--cs-space-5);
  display: flex;
  align-items: center;
  gap: var(--cs-space-4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid var(--cs-border);
  cursor: pointer;
  transition: all 0.2s;
}
.con-stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: var(--cs-blue);
  transform: translateY(-1px);
}
.con-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--cs-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.con-stat-icon.invite  { background: var(--cs-red-light);   color: var(--cs-red); }
.con-stat-icon.quoted  { background: var(--cs-amber-light); color: var(--cs-amber-dark); }
.con-stat-icon.active  { background: var(--cs-blue-light);  color: var(--cs-blue); }
.con-stat-icon.done    { background: var(--cs-green-light); color: var(--cs-green-dark); }
.con-stat-content { display: flex; flex-direction: column; min-width: 0; }
.con-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cs-text-primary);
}
.con-stat-label {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-muted);
  margin-top: 0.15rem;
}

/* ─── Section Cards ──────────────────────────── */
.con-section-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  border: 1px solid var(--cs-border);
  overflow: hidden;
  margin-bottom: var(--cs-space-5);
}
.con-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cs-space-4);
  border-bottom: 1px solid var(--cs-border);
}
.con-section-header h3 {
  margin: 0;
  font-size: var(--cs-text-md);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  color: var(--cs-text-primary);
}
.con-section-body { padding: var(--cs-space-3); }
.view-all-btn {
  background: none;
  border: none;
  color: var(--cs-blue);
  font-size: var(--cs-text-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--cs-radius);
  transition: background 0.15s;
}
.view-all-btn:hover { background: var(--cs-blue-light); }

/* ─── Empty State ────────────────────────────── */
.con-empty-state {
  text-align: center;
  padding: var(--cs-space-12) var(--cs-space-6);
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  border: 1px solid var(--cs-border);
}
.con-empty-state .empty-icon {
  font-size: 2.5rem;
  color: var(--cs-border-dark);
  margin-bottom: var(--cs-space-3);
}
.con-empty-state h3 {
  margin: 0 0 var(--cs-space-2);
  color: var(--cs-text-primary);
  font-size: var(--cs-text-xl);
  font-weight: 600;
}
.con-empty-state p {
  color: var(--cs-text-muted);
  margin: 0 0 var(--cs-space-4);
  font-size: var(--cs-text-base);
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ─── Properties Chips ───────────────────────── */
.con-properties-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-space-2);
  padding: var(--cs-space-3);
}
.con-property-chip {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  background: var(--cs-bg-alt);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  padding: var(--cs-space-2) var(--cs-space-3);
  transition: all 0.2s;
  cursor: default;
}
.con-property-chip:hover {
  background: var(--cs-blue-light);
  border-color: var(--cs-blue);
}
.con-property-name {
  font-size: var(--cs-text-sm);
  font-weight: 600;
  color: var(--cs-text-primary);
}
.con-property-jobs {
  font-size: var(--cs-text-xs);
  font-weight: 500;
  color: var(--cs-text-muted);
  background: var(--cs-bg);
  padding: 0.1rem 0.45rem;
  border-radius: var(--cs-radius-full);
  white-space: nowrap;
}

/* ─── Jobs List ──────────────────────────────── */
.con-jobs-list {
  display: flex;
  flex-direction: column;
}

/* ─── Toolbar ────────────────────────────────── */
.con-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--cs-space-4);
  flex-wrap: wrap;
  gap: var(--cs-space-3);
}

/* ─── Calendar Legend ────────────────────────── */
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* ─── Staff ──────────────────────────────────── */
.con-staff-table-wrap {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  border: 1px solid var(--cs-border);
  overflow: hidden;
}
.con-staff-table {
  width: 100%;
  border-collapse: collapse;
}
.con-staff-table thead tr {
  background: var(--cs-bg-alt);
  border-bottom: 1px solid var(--cs-border);
}
.con-staff-table th {
  padding: 0.6rem 1rem;
  text-align: left;
  font-size: var(--cs-text-sm);
  font-weight: 600;
  color: var(--cs-text-muted);
}
.con-staff-table td {
  padding: 0.6rem 1rem;
}
.con-staff-table tbody tr {
  border-bottom: 1px solid var(--cs-bg);
}
.con-staff-row-hover:hover { background: var(--cs-bg-alt); }
.con-staff-action-btn {
  background: none;
  border: none;
  padding: 0.35rem;
  cursor: pointer;
  color: var(--cs-text-muted);
  font-size: var(--cs-text-base);
  border-radius: var(--cs-radius-sm);
  transition: color 0.2s, background 0.2s;
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.con-staff-action-btn:hover {
  color: var(--cs-blue);
  background: var(--cs-blue-light);
}
.con-staff-action-remove:hover {
  color: var(--cs-red) !important;
  background: var(--cs-red-light) !important;
}
.con-staff-tag {
  font-size: var(--cs-text-xs);
  background: #e0e7ff;
  color: #4338ca;
  padding: 0.1rem 0.4rem;
  border-radius: var(--cs-radius-sm);
  margin-right: 0.25rem;
  display: inline-block;
}

/* Staff mobile cards (shown <768px, table hidden) */
.con-staff-cards { display: none; }
.con-staff-card {
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-space-4);
  margin-bottom: var(--cs-space-3);
}
.con-staff-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--cs-space-2);
}
.con-staff-card-name {
  font-weight: 600;
  font-size: var(--cs-text-base);
  color: var(--cs-text-primary);
}
.con-staff-card-email {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-muted);
  margin-top: 2px;
}
.con-staff-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-space-2);
  align-items: center;
  margin-top: var(--cs-space-2);
}
.con-staff-card-id {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
  background: var(--cs-bg);
  padding: 0.15rem 0.4rem;
  border-radius: var(--cs-radius-sm);
}
.con-staff-card-actions {
  display: flex;
  gap: var(--cs-space-2);
  margin-top: var(--cs-space-3);
  padding-top: var(--cs-space-3);
  border-top: 1px solid var(--cs-border);
}
.con-staff-card-actions .con-staff-action-btn {
  min-width: 36px;
  min-height: 36px;
}
.con-staff-suspended {
  font-size: var(--cs-text-xs);
  color: var(--cs-red);
  font-weight: 600;
  background: var(--cs-red-light);
  padding: 0.1rem 0.4rem;
  border-radius: var(--cs-radius-sm);
}

/* ─── Loading skeleton ───────────────────────── */
.con-skeleton {
  background: linear-gradient(90deg, var(--cs-bg) 25%, var(--cs-bg-alt) 50%, var(--cs-bg) 75%);
  background-size: 200% 100%;
  animation: con-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--cs-radius);
}
@keyframes con-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.con-skeleton-stat {
  height: 80px;
  border-radius: var(--cs-radius-lg);
}
.con-skeleton-card {
  height: 72px;
  border-radius: var(--cs-radius-lg);
  margin-bottom: var(--cs-space-3);
}

/* ─── Error State ────────────────────────────── */
.con-error-state {
  background: var(--cs-red-light);
  border: 1px solid var(--cs-red-border);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-space-4) var(--cs-space-5);
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  margin-bottom: var(--cs-space-5);
}
.con-error-state p {
  flex: 1 1;
  margin: 0;
  font-size: var(--cs-text-base);
  color: var(--cs-red-dark);
}

/* ─── Bottom Nav Bar (Mobile) ────────────────── */
.cs-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cs-white);
  border-top: 1px solid var(--cs-border);
  z-index: 95;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
  padding-bottom: env(safe-area-inset-bottom);
}
.cs-bottom-nav-items {
  display: flex;
  align-items: stretch;
}
.cs-bottom-nav-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cs-text-muted);
  font-size: 0.65rem;
  font-weight: 500;
  position: relative;
  transition: color 0.15s;
  min-height: 56px;
}
.cs-bottom-nav-item svg { font-size: 1.2rem; }
.cs-bottom-nav-item.active { color: var(--cs-blue); }
.cs-bottom-nav-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  background: var(--cs-red);
  color: white;
  font-size: 0.6rem;
  padding: 0.1rem 0.35rem;
  border-radius: var(--cs-radius-full);
  font-weight: 700;
}

/* ─── Sidebar overlay on mobile ──────────────── */
.contractor-sidebar-overlay { display: none; }

/* cs-btn-sm active (tag toggles) */
.cs-btn-sm.active {
  background: var(--cs-blue);
  color: white;
  border-color: var(--cs-blue);
}

/* ============================================
   Sub-pages: Tasks, Inspections, Reports
   Shared layout styles for contractor sub-pages
   ============================================ */

/* Header toggle (sub-pages use mobile-menu-toggle) */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 0.4rem;
  flex-shrink: 0;
}

/* Logo in sub-page headers (uses .header-logo class) */

/* Desktop nav links */
.contractor-header .nav-links {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
}
.contractor-header .nav-link {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: var(--cs-text-sm);
  font-weight: 500;
  padding: 0.35rem 0.6rem;
  border-radius: var(--cs-radius);
  transition: all 0.2s;
  white-space: nowrap;
}
.contractor-header .nav-link:hover { color: white; background: rgba(255,255,255,0.08); }
.contractor-header .nav-link.active { color: white; background: rgba(255,255,255,0.15); }

/* Header icons */
.contractor-header .header-icons {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.contractor-header .header-icons .icon {
  /* Reset globals from MainHeader.css */
  background: transparent;
  width: auto;
  height: auto;
  /* Actual styles */
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--cs-radius);
  transition: color 0.2s, background 0.2s, transform 0.15s;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contractor-header .header-icons .icon svg {
  color: inherit;
  fill: currentColor;
}
.contractor-header .header-icons .icon:hover {
  color: white;
  background: rgba(255,255,255,0.1);
}
.contractor-header .header-icons .icon:active {
  transform: scale(0.92);
  background: rgba(255,255,255,0.18);
}
.contractor-header .user-avatar-container {
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  font-size: 1.35rem;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.3rem;
  border-radius: var(--cs-radius);
  transition: color 0.2s, background 0.2s, transform 0.15s;
}
.contractor-header .user-avatar-container:hover {
  color: white;
  background: rgba(255,255,255,0.1);
}
.contractor-header .user-avatar-container:active {
  transform: scale(0.92);
  background: rgba(255,255,255,0.18);
}
.contractor-header .user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow-md);
  min-width: 140px;
  z-index: 200;
  overflow: hidden;
}
.contractor-header .user-menu a,
.contractor-header .user-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 1rem;
  border: none;
  background: none;
  color: var(--cs-text-primary);
  font-size: var(--cs-text-sm);
  cursor: pointer;
  text-decoration: none;
}
.contractor-header .user-menu a:hover,
.contractor-header .user-menu button:hover { background: var(--cs-bg-alt); }

/* Sidebar sections */
.sidebar-section {
  padding: var(--cs-space-4) var(--cs-space-3);
}
.sidebar-section h3 {
  font-size: var(--cs-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cs-text-faint);
  margin: 0 0 var(--cs-space-2) var(--cs-space-2);
}
.sidebar-section + .sidebar-section {
  border-top: 1px solid var(--cs-border);
}
.sidebar-section .nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-base);
  font-weight: 500;
  color: var(--cs-text-muted);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
  transition: all 0.15s;
}
.sidebar-section .nav-item:hover {
  background: var(--cs-bg-alt);
  color: var(--cs-text-primary);
}
.sidebar-section .nav-item.active {
  background: var(--cs-blue-light);
  color: var(--cs-blue);
  font-weight: 600;
}

/* Sidebar overlay for sub-pages */
.sidebar-overlay {
  display: none;
}
.sidebar-overlay.visible {
  display: block;
  position: fixed;
  inset: 54px 0 0 0;
  background: rgba(0,0,0,0.3);
  z-index: 90;
}

/* Content area */
.contractor-content {
  flex: 1 1;
  padding: var(--cs-space-6);
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* Page header row */
.con-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--cs-space-5);
  gap: var(--cs-space-3);
}
.con-page-header h1 {
  font-size: var(--cs-text-2xl);
  font-weight: 700;
  margin: 0;
  color: var(--cs-text-primary);
}
.con-page-subtitle {
  font-size: var(--cs-text-base);
  color: var(--cs-text-muted);
  margin: var(--cs-space-1) 0 0;
}
.header-actions {
  display: flex;
  gap: var(--cs-space-2);
  flex-shrink: 0;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--cs-radius);
  border: none;
  background: var(--cs-blue);
  color: white;
  font-size: var(--cs-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.btn-primary:hover { background: var(--cs-blue-dark); }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--cs-radius);
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
  color: var(--cs-text-secondary);
  font-size: var(--cs-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-secondary:hover { border-color: var(--cs-blue); color: var(--cs-blue); }

/* Stats grid (sub-pages) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--cs-space-4);
  gap: var(--cs-space-4);
  margin-bottom: var(--cs-space-5);
}
.stat-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-space-4);
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  border: 1px solid var(--cs-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.stat-card .stat-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--cs-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.stat-card.pending .stat-icon   { background: var(--cs-amber-light); color: var(--cs-amber-dark); }
.stat-card.completed .stat-icon { background: var(--cs-blue-light);  color: var(--cs-blue); }
.stat-card.clients .stat-icon   { background: var(--cs-green-light); color: var(--cs-green-dark); }
.stat-card.overdue .stat-icon   { background: var(--cs-red-light);   color: var(--cs-red); }
.stat-card .stat-content h3 {
  margin: 0;
  font-size: var(--cs-text-sm);
  font-weight: 500;
  color: var(--cs-text-muted);
}
.stat-card .stat-number {
  margin: 0.15rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cs-text-primary);
  line-height: 1;
}

/* Task/filter controls */
.task-controls {
  display: flex;
  gap: var(--cs-space-3);
  margin-bottom: var(--cs-space-4);
  flex-wrap: wrap;
  align-items: center;
}
.filter-controls,
.sort-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.filter-controls label,
.sort-controls label {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-muted);
  font-weight: 500;
}
.filter-controls select,
.sort-controls select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-sm);
  background: var(--cs-white);
  color: var(--cs-text-primary);
}

/* Task cards */
.task-card,
.inspection-card {
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-space-4);
  margin-bottom: var(--cs-space-3);
  transition: box-shadow 0.2s;
}
.task-card:hover,
.inspection-card:hover { box-shadow: var(--cs-shadow-sm); }
.task-header,
.inspection-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--cs-space-3);
  margin-bottom: var(--cs-space-2);
}
.task-header h3,
.task-info h3 {
  margin: 0;
  font-size: var(--cs-text-md);
  font-weight: 600;
  color: var(--cs-text-primary);
}
.task-meta {
  display: flex;
  gap: var(--cs-space-3);
  font-size: var(--cs-text-sm);
  color: var(--cs-text-muted);
  margin-top: var(--cs-space-1);
  flex-wrap: wrap;
}
.task-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.task-status-info {
  display: flex;
  gap: var(--cs-space-2);
  flex-shrink: 0;
  align-items: center;
}
.task-status-info .priority,
.task-status-info .status {
  font-size: var(--cs-text-xs);
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: var(--cs-radius-full);
  white-space: nowrap;
}
.task-status-info .priority.high   { background: var(--cs-red-light); color: var(--cs-red-dark); }
.task-status-info .priority.medium { background: var(--cs-amber-light); color: var(--cs-amber-dark); }
.task-status-info .priority.low    { background: var(--cs-green-light); color: var(--cs-green-dark); }
.task-status-info .status.pending      { background: var(--cs-amber-light); color: var(--cs-amber-dark); }
.task-status-info .status.in-progress  { background: var(--cs-blue-light); color: var(--cs-blue); }
.task-status-info .status.completed    { background: var(--cs-green-light); color: var(--cs-green-dark); }
.task-status-info .status.overdue      { background: var(--cs-red-light); color: var(--cs-red-dark); }
.task-description {
  margin-bottom: var(--cs-space-3);
}
.task-description p {
  margin: 0;
  font-size: var(--cs-text-sm);
  color: var(--cs-text-muted);
  line-height: 1.5;
}
.task-details .detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--cs-space-2);
  gap: var(--cs-space-2);
  margin-bottom: var(--cs-space-3);
}
.task-details .detail-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--cs-text-sm);
  color: var(--cs-text-muted);
}
.task-details .detail-item .icon { font-size: 0.8rem; color: var(--cs-text-faint); }
.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-space-2);
  padding-top: var(--cs-space-3);
  border-top: 1px solid var(--cs-border);
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-white);
  color: var(--cs-text-secondary);
  font-size: var(--cs-text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.action-btn:hover { border-color: var(--cs-blue); color: var(--cs-blue); }
.action-btn.start { border-color: var(--cs-blue); color: var(--cs-blue); background: var(--cs-blue-light); }
.action-btn.complete { border-color: var(--cs-green); color: var(--cs-green-dark); background: var(--cs-green-light); }

/* Progress bar */
.task-progress {
  margin-bottom: var(--cs-space-3);
}
.progress-bar {
  height: 6px;
  background: var(--cs-bg);
  border-radius: var(--cs-radius-full);
  overflow: hidden;
  margin-top: var(--cs-space-1);
}
.progress-fill {
  height: 100%;
  background: var(--cs-blue);
  border-radius: var(--cs-radius-full);
  transition: width 0.3s;
}
.progress-info {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
}

/* ─── Responsive: Tablet ─────────────────────── */
@media (max-width: 1024px) {
  .con-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Responsive: Mobile ─────────────────────── */
@media (max-width: 768px) {
  .contractor-header {
    height: 54px;
    padding: 0 var(--cs-space-3);
  }
  .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
  .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; }
  .header-user-name,
  .header-company-badge { display: none; }
  .header-left { gap: 0.5rem; flex: none; flex-direction: row !important; }
  .header-right { gap: 0.5rem; }
  .header-title { display: none; }
  .header-logo { display: none; }
  /* Hide logout on mobile — available in sidebar via More */
  .header-logout { display: none; }

  /* Sub-page header: hide nav links, logo on mobile */
  .contractor-header .nav-links { display: none; }
  .contractor-header .logo { display: none; }

  /* Sub-page content */
  .contractor-content {
    padding: var(--cs-space-4);
    padding-bottom: 2rem;
  }

  /* Sub-page header row */
  .con-page-header {
    flex-direction: column;
    gap: var(--cs-space-2);
  }
  .header-actions {
    width: 100%;
  }
  .header-actions .btn-primary,
  .header-actions .btn-secondary {
    flex: 1 1;
    justify-content: center;
  }

  /* Sub-page stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cs-space-3);
  }
  .stat-card { padding: var(--cs-space-3); }
  .stat-card .stat-number { font-size: 1.25rem; }

  /* Sub-page task controls */
  .task-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-controls,
  .sort-controls {
    justify-content: space-between;
  }
  .filter-controls select,
  .sort-controls select {
    flex: 1 1;
  }

  /* Task card mobile */
  .task-header { flex-direction: column; gap: var(--cs-space-2); }
  .task-status-info { align-self: flex-start; }
  .task-details .detail-grid { grid-template-columns: 1fr; }
  .task-actions { flex-wrap: wrap; }

  .contractor-sidebar {
    position: fixed;
    top: 54px;
    left: 0;
    bottom: 0;
    z-index: 91;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
  }
  .contractor-sidebar.open { transform: translateX(0); }

  .contractor-layout { min-height: calc(100vh - 54px); }

  .contractor-main {
    padding: var(--cs-space-4);
    padding-bottom: 6rem;
  }

  .con-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cs-space-3);
  }
  .con-stat-card { padding: var(--cs-space-3); }
  .con-stat-value { font-size: 1.25rem; }
  .con-stat-label { font-size: var(--cs-text-xs); }
  .section-title { font-size: var(--cs-text-xl); }

  .cs-bottom-nav { display: block; }

  /* Staff: show cards, hide table */
  .con-staff-table-wrap { display: none !important; }
  .con-staff-cards { display: block; }

  /* Job toolbar stacking */
  .con-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .con-toolbar .cs-btn { width: 100%; justify-content: center; }

  /* Sidebar overlay */
  .contractor-sidebar-overlay.show {
    display: block;
    position: fixed;
    inset: 54px 0 0 0;
    background: rgba(0,0,0,0.3);
    z-index: 90;
  }
}

@media (max-width: 480px) {
  .contractor-header { padding: 0 var(--cs-space-3); }
  .header-left { gap: 0.4rem; }
  .header-right { gap: 0.4rem; }

  .con-stats-grid { gap: var(--cs-space-2); }
  .con-stat-card {
    padding: var(--cs-space-3);
    gap: var(--cs-space-3);
  }
  .con-stat-icon { width: 38px; height: 38px; font-size: 0.95rem; }
  .con-stat-value { font-size: 1.15rem; }

  .contractor-main {
    padding: var(--cs-space-3);
    padding-bottom: 6rem;
  }

  /* Sub-page stats at very small */
  .stats-grid { gap: var(--cs-space-2); }
  .stat-card .stat-icon { width: 36px; height: 36px; font-size: 0.9rem; }
  .stat-card .stat-number { font-size: 1.1rem; }

  .contractor-content { padding: var(--cs-space-3); }
  .con-page-header h1 { font-size: var(--cs-text-xl); }
}

/* ============================================
   Equipment & Fleet Section
   ============================================ */

/* Page header */
.equip-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--cs-space-4);
  gap: var(--cs-space-3);
}

/* Tab navigation */
.equip-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--cs-space-5);
  background: var(--cs-bg-alt);
  border-radius: var(--cs-radius-lg);
  padding: 3px;
  overflow-x: auto;
}
.equip-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  border: none;
  background: none;
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-sm);
  font-weight: 500;
  color: var(--cs-text-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.equip-tab:hover { color: var(--cs-text-primary); background: var(--cs-white); }
.equip-tab.active {
  background: var(--cs-white);
  color: var(--cs-blue);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.equip-tab svg { font-size: 0.8rem; }

/* Stats grid - 5 columns */
.equip-stats-grid-5 { grid-template-columns: repeat(5, 1fr); }

/* Overview 3-column grid */
.equip-overview-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: var(--cs-space-4);
  gap: var(--cs-space-4);
  margin-bottom: var(--cs-space-4);
}

/* Attention card */
.equip-attention-card { margin-bottom: var(--cs-space-4); }
.equip-attention-row {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  padding: 0.65rem var(--cs-space-4);
  border-bottom: 1px solid var(--cs-bg);
  cursor: pointer;
  transition: background 0.12s;
}
.equip-attention-row:last-child { border-bottom: none; }
.equip-attention-row:hover { background: var(--cs-bg-alt); }
.equip-attention-info { flex: 1 1; min-width: 0; }
.equip-attention-name {
  font-size: var(--cs-text-sm);
  font-weight: 600;
  color: var(--cs-text-primary);
  display: block;
}
.equip-attention-meta {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
}
.equip-attention-right {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  flex-shrink: 0;
}

/* By-type rows */
.equip-type-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.equip-type-row {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  padding: 7px 8px;
  border-radius: var(--cs-radius);
  cursor: pointer;
  transition: background 0.12s;
}
.equip-type-row:hover { background: var(--cs-bg-alt); }
.equip-type-name {
  flex: 1 1;
  font-size: var(--cs-text-sm);
  color: var(--cs-text-secondary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Category badge (replaces bar chart) */
.equip-cat-badge {
  font-size: var(--cs-text-xs);
  font-weight: 600;
  color: var(--cs-blue);
  background: var(--cs-blue-light);
  padding: 0.15rem 0.5rem;
  border-radius: var(--cs-radius-full);
  flex-shrink: 0;
}

/* Type chips for "by type" section */
.equip-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-space-2);
}
.equip-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.35rem 0.7rem;
  background: var(--cs-bg-alt);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-full);
  cursor: pointer;
  transition: all 0.12s;
}
.equip-type-chip:hover { border-color: var(--cs-blue); background: var(--cs-blue-light); }
.equip-type-chip-name {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-secondary);
}
.equip-type-chip-count {
  font-size: var(--cs-text-xs);
  font-weight: 700;
  color: var(--cs-blue);
}

/* Vehicle rows in overview */
.equip-vehicle-row {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  padding: 7px 8px;
  border-radius: var(--cs-radius);
  cursor: pointer;
  transition: background 0.12s;
}
.equip-vehicle-row:hover { background: var(--cs-bg-alt); }
.equip-vehicle-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--cs-radius);
  background: var(--cs-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--cs-text-muted);
  flex-shrink: 0;
}
.equip-vehicle-info { flex: 1 1; min-width: 0; }
.equip-vehicle-reg {
  font-size: var(--cs-text-sm);
  font-weight: 600;
  color: var(--cs-text-primary);
  display: block;
}
.equip-vehicle-desc {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
}

/* By-tech rows */
.equip-tech-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.equip-tech-row {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  padding: 6px 8px;
  border-radius: var(--cs-radius);
  cursor: pointer;
  transition: background 0.12s;
}
.equip-tech-row:hover { background: var(--cs-bg-alt); }
.equip-tech-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cs-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--cs-blue);
  flex-shrink: 0;
}
.equip-avatar-lg { width: 36px; height: 36px; font-size: 0.7rem; }
.equip-tech-info { flex: 1 1; min-width: 0; }
.equip-tech-name {
  font-size: var(--cs-text-sm);
  font-weight: 500;
  color: var(--cs-text-primary);
  display: block;
}
.equip-tech-sub {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
}
.equip-inline-warn { color: var(--cs-red); font-weight: 600; }

/* Scrap banner */
.equip-scrap-banner {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  padding: var(--cs-space-3) var(--cs-space-4);
  background: var(--cs-bg-alt);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  font-size: var(--cs-text-sm);
  color: var(--cs-text-muted);
  cursor: pointer;
  transition: background 0.12s;
}
.equip-scrap-banner:hover { background: var(--cs-bg); }

/* Empty hint */
.equip-empty-hint {
  text-align: center;
  padding: var(--cs-space-5);
  color: var(--cs-text-muted);
  font-size: var(--cs-text-sm);
}
.equip-empty-hint p { margin: 0 0 var(--cs-space-3); }

/* Back button */
.equip-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--cs-blue);
  font-size: var(--cs-text-sm);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--cs-space-2);
}
.equip-back-btn:hover { text-decoration: underline; }

/* Small button variant */
.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: var(--cs-text-xs);
}

/* Toolbar */
.equip-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--cs-space-4);
}

/* ─── Filters ─────────────────────────── */
.equip-filters {
  display: flex;
  gap: var(--cs-space-2);
  margin-bottom: var(--cs-space-3);
  flex-wrap: wrap;
  align-items: center;
}
.equip-search-wrap {
  flex: 1 1;
  min-width: 200px;
  position: relative;
}
.equip-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cs-text-faint);
  font-size: 0.8rem;
}
.equip-search-input {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 2rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-sm);
  background: var(--cs-white);
  color: var(--cs-text-primary);
  box-sizing: border-box;
}
.equip-search-input:focus { outline: none; border-color: var(--cs-blue); }
.equip-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--cs-text-muted);
  cursor: pointer;
  padding: 2px;
  font-size: 0.75rem;
}
.equip-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-sm);
  background: var(--cs-white);
  color: var(--cs-text-primary);
}
.equip-clear-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-white);
  color: var(--cs-text-muted);
  font-size: var(--cs-text-xs);
  cursor: pointer;
  transition: all 0.12s;
}
.equip-clear-filters:hover { color: var(--cs-red); border-color: var(--cs-red); }
.equip-results-count {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
  margin-bottom: var(--cs-space-2);
}

/* ─── Equipment Table ─────────────────── */
.equip-table-wrap { overflow-x: auto; }
.equip-table td {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-secondary);
  white-space: nowrap;
  cursor: pointer;
}
.equip-id-code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: var(--cs-text-xs);
  background: var(--cs-bg);
  padding: 0.1rem 0.35rem;
  border-radius: var(--cs-radius-sm);
  color: var(--cs-text-muted);
}
.equip-unassigned { color: var(--cs-text-faint); font-style: italic; }
.equip-date-overdue { color: var(--cs-red); font-weight: 600; }
.equip-date-soon { color: var(--cs-amber-dark); }
.equip-overdue-tag {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  background: var(--cs-red-light);
  color: var(--cs-red);
  padding: 0.1rem 0.35rem;
  border-radius: var(--cs-radius-sm);
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
.equip-soon-tag {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  background: var(--cs-amber-light);
  color: var(--cs-amber-dark);
  padding: 0.1rem 0.35rem;
  border-radius: var(--cs-radius-sm);
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* ─── Status Badges ───────────────────── */
.equip-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.2rem 0.55rem;
  border-radius: var(--cs-radius-full);
  font-size: var(--cs-text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.equip-status-pass  { background: var(--cs-green-light); color: var(--cs-green-dark); }
.equip-status-fail  { background: var(--cs-red-light);   color: var(--cs-red-dark); }
.equip-status-warn  { background: var(--cs-amber-light); color: var(--cs-amber-dark); }
.equip-status-na    { background: var(--cs-bg-alt);      color: var(--cs-text-muted); }
.equip-status-scrap { background: var(--cs-bg-alt);      color: var(--cs-text-faint); }

/* ─── Mobile Cards ────────────────────── */
.equip-mobile-cards { display: none; }
.equip-mobile-card {
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-space-3);
  margin-bottom: var(--cs-space-2);
  cursor: pointer;
  transition: box-shadow 0.12s;
}
.equip-mobile-card:hover { box-shadow: var(--cs-shadow-sm); }
.equip-mobile-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--cs-space-2);
}
.equip-mobile-card-name { font-weight: 600; font-size: var(--cs-text-base); color: var(--cs-text-primary); }
.equip-mobile-card-type { font-size: var(--cs-text-sm); color: var(--cs-text-muted); margin-top: 2px; }
.equip-mobile-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-space-2);
  margin-top: var(--cs-space-2);
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
}

/* ─── Vehicle Cards Grid ──────────────── */
.equip-vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: var(--cs-space-3);
  gap: var(--cs-space-3);
}
.equip-vehicle-card {
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-space-4);
  cursor: pointer;
  transition: all 0.12s;
}
.equip-vehicle-card:hover { box-shadow: var(--cs-shadow-sm); border-color: var(--cs-blue); }
.equip-vehicle-card-header {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  margin-bottom: var(--cs-space-3);
}
.equip-vehicle-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--cs-radius-md);
  background: var(--cs-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--cs-blue);
  flex-shrink: 0;
}
.equip-vehicle-card-reg { font-weight: 700; font-size: var(--cs-text-base); color: var(--cs-text-primary); }
.equip-vehicle-card-name { font-size: var(--cs-text-sm); color: var(--cs-text-muted); }
.equip-vehicle-card-actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
}
.equip-vehicle-card-body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-space-2);
}
.equip-vehicle-tag {
  font-size: var(--cs-text-xs);
  padding: 0.15rem 0.45rem;
  background: var(--cs-bg-alt);
  border-radius: var(--cs-radius-full);
  color: var(--cs-text-muted);
}
.equip-vehicle-tag-count {
  background: var(--cs-blue-light);
  color: var(--cs-blue);
  font-weight: 600;
}

/* ─── Personnel Cards Grid ────────────── */
.equip-person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: var(--cs-space-3);
  gap: var(--cs-space-3);
}
.equip-person-card {
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-space-4);
  cursor: pointer;
  transition: all 0.12s;
}
.equip-person-card:hover { box-shadow: var(--cs-shadow-sm); border-color: var(--cs-blue); }
.equip-person-card-header {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
}
.equip-person-card-name { font-weight: 600; font-size: var(--cs-text-base); color: var(--cs-text-primary); }
.equip-person-card-count { font-size: var(--cs-text-sm); color: var(--cs-text-muted); }
.equip-person-card-alerts {
  display: flex;
  gap: var(--cs-space-2);
  margin-top: var(--cs-space-3);
  padding-top: var(--cs-space-2);
  border-top: 1px solid var(--cs-bg);
}
.equip-person-alert-bad {
  font-size: var(--cs-text-xs);
  font-weight: 600;
  color: var(--cs-red);
  background: var(--cs-red-light);
  padding: 0.15rem 0.45rem;
  border-radius: var(--cs-radius-full);
}
.equip-person-alert-warn {
  font-size: var(--cs-text-xs);
  font-weight: 600;
  color: var(--cs-amber-dark);
  background: var(--cs-amber-light);
  padding: 0.15rem 0.45rem;
  border-radius: var(--cs-radius-full);
}

/* ─── Detail View ─────────────────────── */
.equip-detail { max-width: 800px; }
.equip-detail-subtitle {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-muted);
  margin-bottom: var(--cs-space-4);
}
.equip-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--cs-space-3) var(--cs-space-6);
  gap: var(--cs-space-3) var(--cs-space-6);
}
.equip-detail-label {
  font-size: var(--cs-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cs-text-faint);
  margin-bottom: 2px;
}
.equip-detail-value { font-size: var(--cs-text-base); color: var(--cs-text-primary); }
.equip-detail-actions { display: flex; gap: var(--cs-space-2); align-items: center; }
.equip-scrap-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--cs-amber-dark);
  border-radius: var(--cs-radius);
  background: var(--cs-amber-light);
  color: var(--cs-amber-dark);
  font-size: var(--cs-text-xs);
  font-weight: 600;
  cursor: pointer;
}
.equip-scrap-btn:hover { opacity: 0.85; }
.equip-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-white);
  color: var(--cs-text-muted);
  cursor: pointer;
  font-size: var(--cs-text-sm);
  transition: all 0.12s;
}
.equip-delete-btn:hover { color: var(--cs-red); border-color: var(--cs-red); background: var(--cs-red-light); }

/* ─── Modal ───────────────────────────── */
.equip-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: var(--cs-space-4);
}
.equip-modal {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  width: 100%;
  max-width: 540px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.equip-modal-lg { max-width: 640px; }
.equip-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cs-space-4) var(--cs-space-5);
  border-bottom: 1px solid var(--cs-border);
}
.equip-modal-header h2 {
  margin: 0;
  font-size: var(--cs-text-lg);
  font-weight: 700;
  color: var(--cs-text-primary);
}
.equip-modal-close {
  background: none;
  border: none;
  color: var(--cs-text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--cs-radius-sm);
}
.equip-modal-close:hover { color: var(--cs-text-primary); background: var(--cs-bg-alt); }
.equip-modal-body {
  padding: var(--cs-space-4) var(--cs-space-5);
  overflow-y: auto;
  flex: 1 1;
}
.equip-modal-footer {
  display: flex;
  gap: var(--cs-space-2);
  padding: var(--cs-space-3) var(--cs-space-5);
  border-top: 1px solid var(--cs-border);
}

/* ─── Stepped Form ────────────────────── */
.equip-form-steps {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--cs-border);
  padding: 0 var(--cs-space-5);
}
.equip-form-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.7rem 1rem;
  border: none;
  background: none;
  font-size: var(--cs-text-sm);
  font-weight: 500;
  color: var(--cs-text-muted);
  cursor: pointer;
  position: relative;
  transition: color 0.12s;
}
.equip-form-step:hover { color: var(--cs-text-primary); }
.equip-form-step.active {
  color: var(--cs-blue);
  font-weight: 600;
}
.equip-form-step.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cs-blue);
  border-radius: 2px 2px 0 0;
}
.equip-form-step.done { color: var(--cs-green-dark); }
.equip-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cs-bg-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}
.equip-form-step.active .equip-step-num { background: var(--cs-blue-light); color: var(--cs-blue); }
.equip-form-step.done .equip-step-num { background: var(--cs-green-light); color: var(--cs-green-dark); }
.equip-step-label { white-space: nowrap; }

/* Form sections */
.equip-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-3);
}
.equip-form-hint {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-muted);
  margin: 0 0 var(--cs-space-2);
  line-height: 1.4;
}
.equip-form-row {
  display: flex;
  gap: var(--cs-space-3);
}
.equip-form-field {
  flex: 1 1;
  min-width: 0;
}
.equip-form-field-lg { flex: 2 1; }
.equip-form-field label {
  display: block;
  font-size: var(--cs-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cs-text-muted);
  margin-bottom: 4px;
}
.equip-req { color: var(--cs-red); }
.equip-form-field input,
.equip-form-field select,
.equip-form-field textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-sm);
  background: var(--cs-white);
  color: var(--cs-text-primary);
  box-sizing: border-box;
  transition: border-color 0.12s;
}
.equip-form-field input:focus,
.equip-form-field select:focus,
.equip-form-field textarea:focus {
  outline: none;
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}
.equip-form-field textarea { resize: vertical; }

/* Delete confirm modal */
.equip-confirm-modal {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-space-5);
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.equip-confirm-modal h3 { margin: 0 0 var(--cs-space-2); font-size: var(--cs-text-lg); font-weight: 700; color: var(--cs-text-primary); }
.equip-confirm-modal p { margin: 0 0 var(--cs-space-4); font-size: var(--cs-text-sm); color: var(--cs-text-muted); line-height: 1.5; }
.equip-confirm-actions { display: flex; justify-content: flex-end; gap: var(--cs-space-2); }
.equip-delete-btn-confirm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--cs-radius);
  background: var(--cs-red);
  color: white;
  font-size: var(--cs-text-sm);
  font-weight: 600;
  cursor: pointer;
}
.equip-delete-btn-confirm:hover { opacity: 0.9; }

/* ─── Bulk edit bar ───────────────────── */
.equip-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--cs-space-2);
  min-height: 32px;
}
.equip-bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  padding: 0.3rem 0.6rem;
  background: var(--cs-blue-light);
  border: 1px solid var(--cs-blue);
  border-radius: var(--cs-radius);
}
.equip-bulk-count {
  font-size: var(--cs-text-sm);
  font-weight: 600;
  color: var(--cs-blue);
}
.equip-row-selected { background: var(--cs-blue-light) !important; }
.equip-row-selected td { background: transparent !important; }
.equip-mobile-card.equip-row-selected { border-color: var(--cs-blue); }
.equip-table th input[type="checkbox"],
.equip-table td input[type="checkbox"],
.equip-mobile-card input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--cs-blue);
}

/* ─── Equipment Responsive ────────────── */
@media (max-width: 1024px) {
  .equip-overview-3col { grid-template-columns: 1fr 1fr; }
  .equip-stats-grid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .equip-page-header { flex-direction: column; }
  .equip-overview-3col { grid-template-columns: 1fr; }
  .equip-stats-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .equip-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .equip-filters { flex-direction: column; }
  .equip-filters .equip-select { width: 100%; }

  .equip-table-wrap { display: none !important; }
  .equip-mobile-cards { display: block; }

  .equip-detail-grid { grid-template-columns: 1fr; }
  .equip-detail-actions { flex-wrap: wrap; }
  .equip-detail .con-section-header { flex-direction: column; gap: var(--cs-space-2); align-items: flex-start; }

  .equip-form-row { flex-direction: column; gap: var(--cs-space-3); }
  .equip-modal { max-width: 100%; margin: var(--cs-space-3); }
  .equip-form-steps { overflow-x: auto; }
  .equip-step-label { display: none; }

  .equip-vehicle-grid { grid-template-columns: 1fr; }
  .equip-person-grid { grid-template-columns: 1fr; }
  .equip-results-bar { flex-direction: column; align-items: flex-start; gap: var(--cs-space-2); }
  .equip-bulk-bar { width: 100%; justify-content: space-between; }
}

@media (max-width: 480px) {
  .equip-stats-grid-5 { grid-template-columns: repeat(2, 1fr); gap: var(--cs-space-2); }
  .equip-tabs { padding: 2px; }
  .equip-tab { padding: 0.4rem 0.65rem; font-size: var(--cs-text-xs); }
}

/* ============================================
   Contractor Profile — CloudSafe Design System
   ============================================ */

.contractor-profile {
  min-height: 100vh;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  gap: 1rem;
}

.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e5e7eb;
  border: 3px solid var(--cs-border, #e5e7eb);
  border-left-color: #1A80E5;
  border-left-color: var(--cs-blue, #1A80E5);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Header ─────────────────────────────────── */
.profile-header {
  background: #0f172a;
  height: 60px;
  padding: 0 1.5rem;
  padding: 0 var(--cs-space-6, 1.5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 200;
  z-index: var(--cs-z-sticky, 200);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  gap: var(--cs-space-5, 1.25rem);
}

.back-button {
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.75rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 500;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
}

.back-button:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}

.logo {
  height: 32px;
  width: auto;
}

.profile-header h1 {
  margin: 0;
  font-size: 1.125rem;
  font-size: var(--cs-text-xl, 1.125rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

.logout-btn {
  background: rgba(255,255,255,0.06);
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.4375rem 0.875rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  cursor: pointer;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 500;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  font-family: inherit;
}

.logout-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* ── Profile Container ──────────────────────── */
.profile-container {
  max-width: 680px;
  margin: 2rem auto;
  margin: var(--cs-space-8, 2rem) auto;
  padding: 0 1rem;
  padding: 0 var(--cs-space-4, 1rem);
}

.profile-card {
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 16px;
  border-radius: var(--cs-radius-xl, 16px);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  box-shadow: var(--cs-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
  overflow: hidden;
}

.profile-card > .card-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  padding: 2rem 1.5rem;
  padding: var(--cs-space-8, 2rem) var(--cs-space-6, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  background: rgba(26,128,229,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: #EBF4FF;
  color: var(--cs-blue-light, #EBF4FF);
  border: 2px solid rgba(26,128,229,0.3);
}

.profile-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.profile-card > .card-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-size: var(--cs-text-3xl, 1.5rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.02em;
}

.role-badge {
  background: rgba(26,128,229,0.2);
  padding: 0.3125rem 0.875rem;
  border-radius: 9999px;
  border-radius: var(--cs-radius-full, 9999px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 500;
  border: 1px solid rgba(26,128,229,0.3);
  color: #EBF4FF;
  color: var(--cs-blue-light, #EBF4FF);
}

.card-content {
  padding: 1.5rem;
  padding: var(--cs-space-6, 1.5rem);
}

/* ── Sections ───────────────────────────────── */
.section {
  margin-bottom: 1.5rem;
  margin-bottom: var(--cs-space-6, 1.5rem);
  padding-bottom: 1.5rem;
  padding-bottom: var(--cs-space-6, 1.5rem);
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
}

.section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-size: 1rem;
  font-size: var(--cs-text-lg, 1rem);
  font-weight: 600;
  margin: 0 0 0.875rem;
}

.section h3 svg {
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  font-size: 0.95em;
}

.contractor-profile .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  margin-bottom: var(--cs-space-5, 1.25rem);
  border-bottom: none;
  padding-bottom: 0;
}

/* ── CloudSafe ID Section ───────────────────── */
.cloudsafe-id-section {
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  padding: 1.25rem;
  padding: var(--cs-space-5, 1.25rem);
  border: 1px solid rgba(26,128,229,0.15);
}

.id-display {
  margin-bottom: 0.75rem;
}

.id-label {
  display: block;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.id-value {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.id-value code {
  background: #0f172a;
  color: #fff;
  padding: 0.625rem 0.875rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  font-size: 0.9375rem;
  font-size: var(--cs-text-md, 0.9375rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  flex: 1 1;
  min-width: 180px;
}

.id-actions {
  display: flex;
  gap: 0.5rem;
}

.copy-btn {
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  border: none;
  padding: 0.5rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  cursor: pointer;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
}

.copy-btn:hover {
  background: #1570CC;
  background: var(--cs-blue-hover, #1570CC);
}

.show-badge-btn {
  background: #1565C0;
  background: var(--cs-blue-dark, #1565C0);
  color: #fff;
  border: none;
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  cursor: pointer;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  font-family: inherit;
  height: 36px;
}

.show-badge-btn:hover {
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
}

.id-description {
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  margin: 0;
  line-height: 1.5;
}

/* ── Profile Information ────────────────────── */
.profile-display {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-left: 3px solid #1A80E5;
  border-left: 3px solid var(--cs-blue, #1A80E5);
}

.info-item .icon {
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  font-size: 0.95rem;
  margin-top: 0.1875rem;
  flex-shrink: 0;
}

.info-item div {
  flex: 1 1;
  min-width: 0;
}

.info-item label {
  display: block;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-weight: 600;
  margin-bottom: 0.125rem;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
}

.info-item span {
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  display: block;
}

.info-item small {
  display: block;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  font-size: 0.75rem;
  margin-top: 0.25rem;
  font-style: italic;
}

/* ── Forms ──────────────────────────────────── */
.edit-form, .password-form {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  padding: 1.25rem;
  padding: var(--cs-space-5, 1.25rem);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.form-group {
  margin-bottom: 0.875rem;
}

.form-group label {
  display: block;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-weight: 600;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
}

.form-group input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid #d1d5db;
  border: 1px solid var(--cs-border-dark, #d1d5db);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  box-sizing: border-box;
  font-family: inherit;
  background: #fff;
  background: var(--cs-white, #fff);
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.form-group input:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26,128,229,0.12);
}

.form-actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 1rem;
}

/* ── Buttons ────────────────────────────────── */
.edit-btn, .change-password-btn {
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  font-family: inherit;
}

.edit-btn:hover, .change-password-btn:hover {
  background: #1565C0;
  background: var(--cs-blue-dark, #1565C0);
  box-shadow: 0 2px 6px rgba(26,128,229,0.25);
}

.save-btn {
  background: #16a34a;
  background: var(--cs-green-dark, #16a34a);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  font-family: inherit;
}

.save-btn:hover {
  background: #22c55e;
  background: var(--cs-green, #22c55e);
}

.cancel-btn {
  background: #6b7280;
  background: var(--cs-text-muted, #6b7280);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  font-family: inherit;
}

.cancel-btn:hover {
  background: #9ca3af;
  background: var(--cs-text-faint, #9ca3af);
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
  .profile-header {
    padding: 0 0.75rem;
    height: 54px;
    gap: 0.5rem;
  }

  .header-left {
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1;
  }

  .back-button {
    padding: 0.375rem 0.5rem;
    font-size: 0.72rem;
    flex-shrink: 0;
  }

  .profile-header h1 {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .logo {
    height: 24px;
    flex-shrink: 0;
  }

  .logout-btn {
    flex-shrink: 0;
    padding: 0.375rem 0.65rem;
    font-size: 0.72rem;
  }

  .profile-container {
    margin: 1rem auto;
    margin: var(--cs-space-4, 1rem) auto;
    padding: 0 0.75rem;
  }

  .profile-card > .card-header {
    padding: 1.5rem 1rem;
    padding: var(--cs-space-6, 1.5rem) var(--cs-space-4, 1rem);
  }

  .profile-avatar {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  .profile-card > .card-header h2 {
    font-size: 1.25rem;
    font-size: var(--cs-text-2xl, 1.25rem);
  }

  .card-content {
    padding: 1rem;
    padding: var(--cs-space-4, 1rem);
  }

  .contractor-profile .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }

  .id-value {
    flex-direction: column;
    align-items: stretch;
  }

  .id-value code {
    font-size: 0.8125rem;
    font-size: var(--cs-text-sm, 0.8125rem);
  }

  .id-actions {
    justify-content: flex-start;
  }
}

/* Sub-mobile: drop the page title entirely so back + logo + logout fit. */
@media (max-width: 480px) {
  .profile-header h1 { display: none; }
  .back-button { padding: 0.35rem 0.45rem; font-size: 0.7rem; }
  .logout-btn { padding: 0.35rem 0.55rem; font-size: 0.7rem; }
}

/* ============================================
   Contractor ID Badge — CloudSafe Design System
   ============================================ */

.contractor-id-badge-page {
  min-height: 100vh;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* ── Header ─────────────────────────────────── */
.contractor-id-badge-page .badge-header {
  background: #0f172a;
  padding: 0 1.5rem;
  padding: 0 var(--cs-space-6, 1.5rem);
  height: 60px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 200;
  z-index: var(--cs-z-sticky, 200);
}

.contractor-id-badge-page .header-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  gap: var(--cs-space-5, 1.25rem);
}

.contractor-id-badge-page .back-button {
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.75rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 500;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
}

.contractor-id-badge-page .back-button:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}

.contractor-id-badge-page .badge-header h1 {
  margin: 0;
  font-size: 1.125rem;
  font-size: var(--cs-text-xl, 1.125rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

/* ── Spinning animation ─────────────────────── */
.spinning {
  animation: cs-spin 1s linear infinite;
}

@keyframes cs-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Badge Container ────────────────────────── */
.badge-container {
  max-width: 1200px;
  margin: 2rem auto;
  margin: var(--cs-space-8, 2rem) auto;
  padding: 0 1rem;
  padding: 0 var(--cs-space-4, 1rem);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ── The ID Badge Card ──────────────────────── */
.id-badge {
  width: 100%;
  max-width: 420px;
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 16px;
  border-radius: var(--cs-radius-xl, 16px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  box-shadow: var(--cs-shadow-lg, 0 8px 24px rgba(0,0,0,0.12));
  overflow: hidden;
  position: relative;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  display: flex;
  flex-direction: column;
}

/* Badge Header Section */
.badge-header-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  padding: 1.25rem 1.5rem;
  padding: var(--cs-space-5, 1.25rem) var(--cs-space-6, 1.5rem);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 1rem;
  gap: var(--cs-space-4, 1rem);
}

.company-logo {
  height: 44px;
  width: auto;
  filter: brightness(0) invert(1);
}

.company-info h2 {
  margin: 0;
  font-size: 1.25rem;
  font-size: var(--cs-text-2xl, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.company-info p {
  margin: 0.125rem 0 0;
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Badge Body */
.badge-body {
  padding: 1.5rem;
  padding: var(--cs-space-6, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  gap: var(--cs-space-6, 1.5rem);
  flex: 1 1;
}

/* Photo Section */
.photo-section {
  display: flex;
  justify-content: center;
}

.profile-photo {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  overflow: hidden;
  border: 3px solid #1A80E5;
  border: 3px solid var(--cs-blue, #1A80E5);
  position: relative;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  box-shadow: 0 4px 12px rgba(26,128,229,0.2);
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

/* Info Section */
.info-section {
  flex: 1 1;
}

.name-section {
  text-align: center;
  margin-bottom: 1.25rem;
  margin-bottom: var(--cs-space-5, 1.25rem);
}

.name-section h3 {
  margin: 0;
  font-size: 1.5rem;
  font-size: var(--cs-text-3xl, 1.5rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.role-title {
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  border-radius: var(--cs-radius-full, 9999px);
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.5rem;
  display: inline-block;
}

/* Details Grid */
.details-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  padding: 0.75rem 1rem;
  padding: var(--cs-space-3, 0.75rem) var(--cs-space-4, 1rem);
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  border-left: 3px solid #1A80E5;
  border-left: 3px solid var(--cs-blue, #1A80E5);
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
  border-right: 1px solid #e5e7eb;
  border-right: 1px solid var(--cs-border, #e5e7eb);
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
}

.detail-icon {
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  font-size: 1rem;
  flex-shrink: 0;
}

.detail-item div {
  flex: 1 1;
  min-width: 0;
}

.detail-label {
  display: block;
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.detail-value {
  display: block;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-weight: 600;
  margin-top: 0.125rem;
}

/* ── QR Code Section ────────────────────────── */
.qr-section {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  margin: var(--cs-space-4, 1rem) 0;
}

.qr-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.qr-code-image {
  width: 110px;
  height: 110px;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  border: 2px solid #1A80E5;
  border: 2px solid var(--cs-blue, #1A80E5);
  background: white;
  padding: 0.375rem;
  box-shadow: 0 2px 8px rgba(26,128,229,0.15);
}

.qr-code-placeholder {
  width: 110px;
  height: 110px;
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  border: 2px solid #1A80E5;
  border: 2px solid var(--cs-blue, #1A80E5);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  box-shadow: 0 2px 8px rgba(26,128,229,0.15);
}

.qr-code-placeholder svg {
  font-size: 1.75rem;
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

.qr-code-placeholder span {
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-weight: 600;
}

.qr-info {
  text-align: center;
}

.qr-label {
  display: block;
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  font-weight: 700;
  margin-bottom: 0.125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.qr-description {
  font-size: 0.6875rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-weight: 500;
  line-height: 1.3;
}

/* QR Action Buttons */
.qr-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  justify-content: center;
}

.qr-action-btn {
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  border: none;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 0.375rem 0.75rem;
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: inherit;
}

.qr-action-btn:hover:not(:disabled) {
  background: #1565C0;
  background: var(--cs-blue-dark, #1565C0);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(26,128,229,0.3);
}

.qr-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.regenerate-qr-btn:hover:not(:disabled) {
  background: #d97706;
  background: var(--cs-amber-dark, #d97706);
}

.download-qr-btn:hover:not(:disabled) {
  background: #16a34a;
  background: var(--cs-green-dark, #16a34a);
}

/* ── Badge Footer ───────────────────────────── */
.badge-footer {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  padding: 0.75rem 1.5rem;
  padding: var(--cs-space-3, 0.75rem) var(--cs-space-6, 1.5rem);
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
  margin-top: auto;
}

.security-features {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.security-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.security-label {
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.security-value {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-weight: 600;
}

.verification-code {
  text-align: center;
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  letter-spacing: 0.03em;
}

/* ── Instructions Section ───────────────────── */
.badge-instructions {
  max-width: 680px;
  margin: 2rem auto;
  margin: var(--cs-space-8, 2rem) auto;
  padding: 2rem;
  padding: var(--cs-space-8, 2rem);
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 16px;
  border-radius: var(--cs-radius-xl, 16px);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  box-shadow: var(--cs-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}

.badge-instructions h3 {
  margin: 0 0 1.5rem;
  margin: 0 0 var(--cs-space-6, 1.5rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-size: 1.25rem;
  font-size: var(--cs-text-2xl, 1.25rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.02em;
}

/* Security Notice */
.security-notice {
  background: #fffbeb;
  background: var(--cs-amber-light, #fffbeb);
  border: 1px solid #fde68a;
  border: 1px solid var(--cs-amber-border, #fde68a);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  padding: 1.25rem;
  padding: var(--cs-space-5, 1.25rem);
  margin-bottom: 1.5rem;
  margin-bottom: var(--cs-space-6, 1.5rem);
  display: flex;
  gap: 1rem;
  gap: var(--cs-space-4, 1rem);
  align-items: flex-start;
}

.notice-icon {
  color: #f59e0b;
  color: var(--cs-amber, #f59e0b);
  font-size: 1.25rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.notice-content h4 {
  margin: 0 0 0.375rem;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
}

.notice-content p {
  margin: 0;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  line-height: 1.6;
}

/* Instructions Grid */
.instructions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  grid-gap: 1rem;
  grid-gap: var(--cs-space-4, 1rem);
  gap: var(--cs-space-4, 1rem);
  margin-bottom: 1.5rem;
  margin-bottom: var(--cs-space-6, 1.5rem);
}

.instruction-item {
  text-align: center;
  padding: 1.25rem 1rem;
  padding: var(--cs-space-5, 1.25rem) var(--cs-space-4, 1rem);
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
}

.instruction-icon {
  width: 48px;
  height: 48px;
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  margin: 0 auto var(--cs-space-3, 0.75rem);
  font-size: 1.25rem;
}

.instruction-item h4 {
  margin: 0 0 0.375rem;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
}

.instruction-item p {
  margin: 0;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  line-height: 1.5;
}

/* ── QR Code Information ────────────────────── */
.qr-code-info {
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  border: 1px solid rgba(26,128,229,0.2);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  padding: 1.25rem;
  padding: var(--cs-space-5, 1.25rem);
  margin-bottom: 1.5rem;
  margin-bottom: var(--cs-space-6, 1.5rem);
}

.qr-code-info h4 {
  margin: 0 0 0.75rem;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qr-code-info h4::before {
  content: none;
}

.qr-code-info > p {
  margin: 0 0 0.75rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  line-height: 1.5;
}

.qr-details {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.qr-details p {
  margin: 0;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  line-height: 1.5;
}

.qr-details strong {
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-weight: 600;
}

/* ── Authorization Terms ────────────────────── */
.authorization-terms {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  padding: 1.5rem;
  padding: var(--cs-space-6, 1.5rem);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
}

.authorization-terms h4 {
  margin: 0 0 1.25rem;
  margin: 0 0 var(--cs-space-5, 1.25rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-size: 1rem;
  font-size: var(--cs-text-lg, 1rem);
  font-weight: 700;
  text-align: center;
}

.terms-section,
.contact-section {
  margin-bottom: 1.25rem;
  margin-bottom: var(--cs-space-5, 1.25rem);
}

.terms-section:last-child {
  margin-bottom: 0;
}

.authorization-terms h5 {
  margin: 0 0 0.625rem;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
}

.authorization-terms ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: none;
}

.authorization-terms li {
  margin: 0.5rem 0;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  line-height: 1.5;
  position: relative;
}

.authorization-terms li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  border-radius: 50%;
  position: absolute;
  left: -1rem;
  top: 0.5em;
}

.contact-info p {
  margin: 0.375rem 0;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
}

.contact-info strong {
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

/* ── Print Styles ───────────────────────────── */
@media print {
  .contractor-id-badge-page .badge-header,
  .badge-instructions {
    display: none !important;
  }

  .contractor-id-badge-page {
    background: white !important;
  }

  .badge-container {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .id-badge {
    width: 3.375in !important;
    height: 5.625in !important;
    margin: 0.25in auto !important;
    box-shadow: none !important;
    border: 1px solid #000 !important;
  }
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
  .contractor-id-badge-page .badge-header {
    padding: 0 1rem;
    padding: 0 var(--cs-space-4, 1rem);
    height: 54px;
  }

  .contractor-id-badge-page .header-left {
    gap: 0.75rem;
  }

  .contractor-id-badge-page .badge-header h1 {
    font-size: 1rem;
    font-size: var(--cs-text-lg, 1rem);
  }

  .badge-container {
    margin: 1rem auto;
    margin: var(--cs-space-4, 1rem) auto;
    padding: 0 0.75rem;
    padding: 0 var(--cs-space-3, 0.75rem);
  }

  .id-badge {
    max-width: 100%;
  }

  .badge-body {
    padding: 1.25rem;
    padding: var(--cs-space-5, 1.25rem);
    gap: 1.25rem;
    gap: var(--cs-space-5, 1.25rem);
  }

  .profile-photo {
    width: 100px;
    height: 100px;
  }

  .name-section h3 {
    font-size: 1.25rem;
    font-size: var(--cs-text-2xl, 1.25rem);
  }

  .instructions-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    gap: var(--cs-space-3, 0.75rem);
  }

  .badge-instructions {
    margin: 1rem 0.75rem;
    margin: var(--cs-space-4, 1rem) var(--cs-space-3, 0.75rem);
    padding: 1.25rem;
    padding: var(--cs-space-5, 1.25rem);
  }

  .security-notice {
    flex-direction: row;
    align-items: flex-start;
  }

  .authorization-terms {
    padding: 1.25rem;
    padding: var(--cs-space-5, 1.25rem);
  }
}

@media (max-width: 480px) {
  .contractor-id-badge-page .back-button {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
  }

  .badge-body {
    padding: 1rem;
    padding: var(--cs-space-4, 1rem);
    gap: 1rem;
    gap: var(--cs-space-4, 1rem);
  }

  .profile-photo {
    width: 88px;
    height: 88px;
  }

  .name-section h3 {
    font-size: 1.125rem;
    font-size: var(--cs-text-xl, 1.125rem);
  }

  .detail-item {
    padding: 0.625rem 0.75rem;
  }

  .qr-code-image, .qr-code-placeholder {
    width: 90px;
    height: 90px;
  }

  .qr-action-btn {
    padding: 0.3125rem 0.625rem;
    font-size: 0.65rem;
  }

  .badge-instructions {
    padding: 1rem;
    padding: var(--cs-space-4, 1rem);
    margin: 0.75rem;
    margin: var(--cs-space-3, 0.75rem);
  }

  .qr-code-info,
  .security-notice,
  .authorization-terms {
    padding: 1rem;
    padding: var(--cs-space-4, 1rem);
  }
}

/* ══════════════════════════════════════════════════════
   Digital Badge — Premium ID Badge & Apple Wallet Pass
   Mobile-first, CloudSafe branded
   ══════════════════════════════════════════════════════ */

/* ── Page shell ────────────────────────────────────── */
.db-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 50%, #f0f4f8 100%);
  padding-bottom: 80px;
}

/* ── Header ────────────────────────────────────────── */
.db-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  background: #0f172a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.db-header-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.db-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 6px 0;
  white-space: nowrap;
  transition: color 0.15s;
}
.db-back-btn:hover { color: #fff; }

.db-header-title {
  flex: 1 1;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.db-header-actions {
  display: flex;
  gap: 4px;
}

.db-action-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: #94a3b8;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s;
}
.db-action-icon:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.db-action-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Content ───────────────────────────────────────── */
.db-content {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* ── Badge Card ────────────────────────────────────── */
.db-card {
  background: #0f172a;
  background: var(--badge-bg, #0f172a);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.25),
    0 4px 16px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
}

.db-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #60a5fa;
  background: var(--badge-accent, #60a5fa);
}

/* Card header */
.db-card-header {
  padding: 20px 24px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.db-card-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.db-card-header-text {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.db-card-org {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

.db-card-subtitle {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.db-card-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.db-status-active {
  background: rgba(34,197,94,0.15);
  color: #4ade80;
}
.db-status-suspended {
  background: rgba(234,179,8,0.15);
  color: #fbbf24;
}
.db-status-revoked {
  background: rgba(239,68,68,0.15);
  color: #f87171;
}
.db-status-expired {
  background: rgba(107,114,128,0.15);
  color: #9ca3af;
}

/* Card body */
.db-card-body {
  padding: 0 24px 20px;
}

/* Identity section */
.db-card-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.db-card-avatar {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: rgba(255,255,255,0.1);
  border: 2px solid #60a5fa;
  border: 2px solid var(--badge-accent, #60a5fa);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.db-card-avatar svg {
  font-size: 1.6rem;
  color: rgba(255,255,255,0.5);
}

.db-card-name-block {
  flex: 1 1;
  min-width: 0;
}

.db-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.2;
  word-wrap: break-word;
}

.db-card-role {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Details grid */
.db-card-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 20px;
}

.db-detail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.db-detail-icon {
  color: #60a5fa;
  color: var(--badge-accent, #60a5fa);
  font-size: 0.8rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.db-detail-label {
  display: block;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 1px;
}

.db-detail-value {
  display: block;
  font-size: 0.82rem;
  color: #fff;
  font-weight: 600;
  font-feature-settings: "tnum";
}

/* QR Section */
.db-card-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: #fff;
  border-radius: 14px;
  margin: 0 auto;
  max-width: 200px;
}

.db-qr-image {
  width: 140px;
  height: 140px;
  display: block;
}

.db-qr-placeholder {
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  gap: 6px;
}
.db-qr-placeholder svg { font-size: 2rem; }
.db-qr-placeholder span { font-size: 0.75rem; }

.db-qr-hint {
  margin-top: 8px;
  font-size: 0.65rem;
  color: #64748b;
  text-align: center;
  font-weight: 500;
}

/* Card footer */
.db-card-footer {
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.db-card-serial {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.25);
  font-family: 'SF Mono', 'Fira Code', monospace;
  letter-spacing: 0.02em;
}

.db-card-version {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.25);
  font-weight: 600;
}

/* ── Actions ───────────────────────────────────────── */
.db-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.db-wallet-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.15s, opacity 0.15s;
}
.db-wallet-btn:hover { transform: scale(1.03); }
.db-wallet-btn:active { transform: scale(0.98); }
.db-wallet-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.db-wallet-note {
  font-size: 0.75rem;
  color: #64748b;
  text-align: center;
  max-width: 300px;
  line-height: 1.5;
}

/* ── Security ──────────────────────────────────────── */
.db-security {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  padding: 18px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}

.db-security-icon {
  color: #1A80E5;
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.db-security h3 {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 6px;
}

.db-security p {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 6px;
}
.db-security p:last-child { margin: 0; }

/* ── Buttons ───────────────────────────────────────── */
.db-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  min-height: 44px;
}
.db-btn-outline {
  background: #fff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
}
.db-btn-outline:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* ── Loading / Error states ────────────────────────── */
.db-loading, .db-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  color: #64748b;
  padding: 24px;
  text-align: center;
}

.db-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e2e8f0;
  border-top-color: #1A80E5;
  border-radius: 50%;
  animation: db-spin 0.7s linear infinite;
}

.db-error svg {
  font-size: 2.5rem;
  color: #f59e0b;
}
.db-error p {
  font-size: 0.9rem;
  max-width: 300px;
}

/* ── Animations ────────────────────────────────────── */
@keyframes db-spin {
  to { transform: rotate(360deg); }
}
.db-spin { animation: db-spin 0.8s linear infinite; }

/* ── Print styles ──────────────────────────────────── */
@media print {
  .db-page { background: #fff; padding: 0; }
  .db-header, .db-actions, .db-security, .db-back-btn,
  .db-header-actions, .db-wallet-btn { display: none !important; }
  .db-content { padding: 0; max-width: 100%; }
  .db-card {
    box-shadow: none;
    border: 2px solid #0f172a;
    page-break-inside: avoid;
    max-width: 350px;
    margin: 20px auto;
  }
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 480px) {
  .db-content { padding: 16px 12px; }

  .db-card-header { padding: 16px 18px 12px; }
  .db-card-body { padding: 0 18px 16px; }
  .db-card-footer { padding: 8px 18px; }

  .db-card-name { font-size: 1.1rem; }
  .db-card-identity { gap: 12px; }
  .db-card-avatar { width: 60px; height: 60px; border-radius: 14px; }
  .db-card-avatar svg { font-size: 1.3rem; }

  .db-card-details { gap: 10px; }
  .db-detail-value { font-size: 0.78rem; }

  .db-qr-image { width: 120px; height: 120px; }
  .db-card-qr { max-width: 170px; padding: 12px; }

  .db-header-inner { padding: 12px 14px; }
  .db-header-title { font-size: 0.95rem; }
}

/* ══════════════════════════════════════════════════════
   Badge Verification Page — public, no auth required
   Shown when someone scans the QR code
   ══════════════════════════════════════════════════════ */

.bv-page {
  min-height: 100vh;
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 40%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.bv-container {
  width: 100%;
  max-width: 400px;
}

/* Brand */
.bv-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}
.bv-logo {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}
.bv-brand span {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

/* Result card */
.bv-result {
  text-align: center;
  padding: 32px 24px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.bv-result-icon {
  font-size: 3.2rem;
  margin-bottom: 12px;
}

.bv-result h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.bv-result p {
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.8;
}

/* Status colours */
.bv-valid {
  background: linear-gradient(135deg, rgba(34,197,94,0.12) 0%, rgba(34,197,94,0.06) 100%);
  border: 1px solid rgba(34,197,94,0.2);
}
.bv-valid .bv-result-icon { color: #4ade80; }
.bv-valid h2 { color: #4ade80; }
.bv-valid p { color: #86efac; }

.bv-revoked {
  background: linear-gradient(135deg, rgba(239,68,68,0.12) 0%, rgba(239,68,68,0.06) 100%);
  border: 1px solid rgba(239,68,68,0.2);
}
.bv-revoked .bv-result-icon { color: #f87171; }
.bv-revoked h2 { color: #f87171; }
.bv-revoked p { color: #fca5a5; }

.bv-expired {
  background: linear-gradient(135deg, rgba(107,114,128,0.12) 0%, rgba(107,114,128,0.06) 100%);
  border: 1px solid rgba(107,114,128,0.2);
}
.bv-expired .bv-result-icon { color: #9ca3af; }
.bv-expired h2 { color: #9ca3af; }
.bv-expired p { color: #d1d5db; }

.bv-suspended {
  background: linear-gradient(135deg, rgba(234,179,8,0.12) 0%, rgba(234,179,8,0.06) 100%);
  border: 1px solid rgba(234,179,8,0.2);
}
.bv-suspended .bv-result-icon { color: #fbbf24; }
.bv-suspended h2 { color: #fbbf24; }
.bv-suspended p { color: #fde68a; }

.bv-error {
  background: linear-gradient(135deg, rgba(239,68,68,0.1) 0%, rgba(239,68,68,0.04) 100%);
  border: 1px solid rgba(239,68,68,0.15);
}
.bv-error .bv-result-icon { color: #f87171; }
.bv-error h2 { color: #f87171; }
.bv-error p { color: #fca5a5; font-size: 0.8rem; }

/* Details */
.bv-details {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bv-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.bv-detail-icon {
  color: #60a5fa;
  font-size: 0.85rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.bv-detail-label {
  display: block;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 1px;
}

.bv-detail-value {
  display: block;
  font-size: 0.9rem;
  color: #fff;
  font-weight: 600;
}

/* Footer */
.bv-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
}
.bv-footer svg { font-size: 0.75rem; }

/* Loading */
.bv-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px 0;
}
.bv-loading p {
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
}
.bv-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: bv-spin 0.7s linear infinite;
}
@keyframes bv-spin {
  to { transform: rotate(360deg); }
}

/* Staff Dashboard — additions to ContractorDashboard.css base layout
   NOTE: Do NOT redefine .contractor-header, .contractor-layout, or
   .contractor-sidebar here. Those are provided by ContractorDashboard.css
   and redefining them causes layout conflicts across the entire app. */

/* Sidebar section headings (Staff-only) */
.sidebar-section {
  margin-bottom: 2rem;
}

.sidebar-section h3 {
  color: #94a3b8;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem 0.85rem;
  font-weight: 700;
}

/* Staff sidebar uses .nav-item inside .sidebar-nav (vs .sidebar-item in Contractor) */
.sidebar-nav .nav-item {
  background: none;
  border: none;
  color: #475569;
  color: var(--cs-gray-600, #475569);
  padding: 0.65rem 0.85rem;
  text-align: left;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
}

.sidebar-nav .nav-item:hover {
  background: #f1f5f9;
  background: var(--cs-gray-100, #f1f5f9);
  color: #0f172a;
  color: var(--cs-dark, #0f172a);
}

.sidebar-nav .nav-item.active {
  background: #dbeafe;
  background: var(--cs-primary-light, #dbeafe);
  color: #2563eb;
  color: var(--cs-primary, #2563eb);
  font-weight: 600;
}

.sidebar-nav .nav-item svg {
  font-size: 1rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.sidebar-nav .nav-item span {
  flex: 1 1;
  text-align: left;
}

/* Staff-specific content overrides */
.contractor-main .dashboard-header {
  position: relative;
  background: transparent;
  box-shadow: none;
  border-bottom: none;
  padding: 0 0 1rem 0;
  height: auto;
}

.contractor-main .dashboard-subtitle {
  color: #64748b;
  color: var(--cs-gray-500, #64748b);
  font-size: 0.88rem;
  margin: 0.25rem 0 0 0;
}

.building-checkin {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.checkin-header {
    text-align: center;
    margin-bottom: 30px;
}

.checkin-header h2 {
    color: #2c3e50;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
}

.checkin-header p {
    color: #7f8c8d;
    font-size: 16px;
    margin: 0;
}

/* Tabs */
.checkin-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #ecf0f1;
}

.tab {
    background: none;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 500;
    color: #7f8c8d;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab:hover {
    color: #3498db;
}

.tab.active {
    color: #3498db;
    border-bottom-color: #3498db;
}

/* Content */
.checkin-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* QR Scanner */
.qr-scanner-section {
    display: flex;
    justify-content: center;
}

.scanner-container {
    width: 100%;
    max-width: 500px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.scanner-placeholder {
    padding: 60px 40px;
    text-align: center;
    color: #7f8c8d;
}

.scanner-placeholder svg {
    color: #bdc3c7;
    margin-bottom: 20px;
}

.scanner-placeholder h3 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 20px;
}

.scanner-placeholder p {
    margin-bottom: 30px;
    font-size: 14px;
}

.start-scan-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
}

.start-scan-btn:hover {
    background: #2980b9;
}

.scanner-active {
    position: relative;
    height: 400px;
}

.scanner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scanner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

.scanner-frame {
    width: 200px;
    height: 200px;
    border: 3px solid #3498db;
    border-radius: 12px;
    position: relative;
    margin-bottom: 20px;
}

.scanner-frame::before,
.scanner-frame::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid #e74c3c;
}

.scanner-frame::before {
    top: -3px;
    left: -3px;
    border-right: none;
    border-bottom: none;
}

.scanner-frame::after {
    bottom: -3px;
    right: -3px;
    border-left: none;
    border-top: none;
}

.scanner-overlay p {
    color: white;
    font-size: 16px;
    margin-bottom: 20px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.scanner-debug {
    color: #3498db;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 15px;
    text-shadow: none;
    font-family: monospace;
    max-width: 250px;
    word-wrap: break-word;
}

.stop-scan-btn {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.stop-scan-btn:hover {
    background: #c0392b;
}

/* ID Search */
.id-search-section {
    display: flex;
    justify-content: center;
}

.search-container {
    width: 100%;
    max-width: 600px;
}

.search-input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 4px;
    margin-bottom: 15px;
}

.search-icon {
    position: absolute;
    left: 20px;
    color: #bdc3c7;
    z-index: 1;
}

.search-input-group input {
    flex: 1 1;
    border: none;
    padding: 16px 20px 16px 50px;
    font-size: 16px;
    border-radius: 8px;
    outline: none;
    background: transparent;
}

.search-input-group input::placeholder {
    color: #bdc3c7;
}

.search-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 16px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-left: 8px;
}

.search-btn:hover:not(:disabled) {
    background: #2980b9;
}

.search-btn:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
}

.clear-btn {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-left: 8px;
}

.clear-btn:hover:not(:disabled) {
    background: #c0392b;
}

.clear-btn:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
}

.search-help {
    text-align: center;
    color: #7f8c8d;
    font-size: 14px;
}

/* Person Details */
.person-details {
    display: flex;
    justify-content: center;
}

.person-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 100%;
    max-width: 600px;
}

.person-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ecf0f1;
}

.person-photo {
    width: 80px;
    height: 80px;
    background: #ecf0f1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bdc3c7;
}

.person-info h3 {
    color: #2c3e50;
    font-size: 24px;
    margin-bottom: 5px;
}

.person-id {
    color: #7f8c8d;
    font-size: 14px;
    margin-bottom: 5px;
}

.person-role {
    color: #3498db;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 5px;
}

.person-dept, .person-company {
    color: #7f8c8d;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

/* Induction Status */
.induction-status {
    margin-bottom: 25px;
}

.status-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.status-text {
    font-size: 18px;
    font-weight: 600;
}

.status-dates {
    margin-bottom: 20px;
}

.status-dates p {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7f8c8d;
    font-size: 14px;
    margin-bottom: 5px;
}

.certifications h4 {
    color: #2c3e50;
    font-size: 16px;
    margin-bottom: 10px;
}

.cert-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cert-tag {
    background: #e8f6f3;
    color: #16a085;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

/* Check-in Actions */
.checkin-actions {
    text-align: center;
}

.checkin-btn {
    background: #27ae60;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
}

.checkin-btn:hover {
    background: #229954;
}

.checkin-warning {
    background: #ffeaa7;
    color: #d63031;
    padding: 15px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

/* Check-in History */
.checkin-history {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 25px;
}

.checkin-history h3 {
    color: #2c3e50;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.history-item:hover {
    background: #ecf0f1;
}

.history-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-name {
    font-weight: 500;
    color: #2c3e50;
}

.history-id {
    color: #7f8c8d;
    font-size: 14px;
}

.history-time {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #7f8c8d;
    font-size: 14px;
}

.history-status {
    font-weight: 500;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .building-checkin {
        padding: 15px;
    }
    
    .checkin-tabs {
        flex-direction: column;
        align-items: center;
    }
    
    .tab {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .person-header {
        flex-direction: column;
        text-align: center;
    }
    
    .search-input-group {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-btn {
        margin-left: 0;
        width: 100%;
    }
    
    .clear-btn {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }
    
    .history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .scanner-container {
        margin: 0 15px;
    }
} 
.onboarding-container { padding: 24px 40px; max-width: 1200px; margin: 80px auto 32px auto; background: transparent; min-height: calc(100vh - 140px); display: flex; flex-direction: column; justify-content: center; }

.onboarding-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; row-gap: 8px; }

.onboarding-title { font-size: 24px; font-weight: 700; }

.onboarding-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.onboarding-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 12px;
}

.onboarding-tab { padding: 8px 12px; cursor: pointer; border-radius: 8px; border: 1px solid #1A80E5; background: #f0f7ff; color: #1A80E5; }

.onboarding-tab:hover { background: #e8f2ff; }

.onboarding-tab.active {
  background: #1A80E5;
  color: #ffffff;
  border-color: #1A80E5;
}

.onboarding-content { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

.onboarding-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.onboarding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.onboarding-card { border: 1px solid #eef2f7; border-radius: 12px; padding: 14px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }

.onboarding-section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.onboarding-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}
.onboarding-vertical { display: grid; grid-gap: 12px; gap: 12px; }
.onboarding-field { display: flex; flex-direction: column; gap: 8px; }
.onboarding-label { font-size: 13px; font-weight: 600; color: #374151; }

@media (max-width: 900px) {
  .onboarding-form-row { grid-template-columns: 1fr; }
}

.onboarding-form-row + .onboarding-form-row { margin-top: 12px; }

.onboarding-input,
.onboarding-select {
  width: 100%;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

/* Compact input helpers */
.input-property-search { max-width: 320px; }
.input-date-compact { max-width: 220px; }

/* Checkbox lists for easy multi-select */
.onboarding-list { border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; max-height: 180px; overflow: auto; padding: 6px; }
.onboarding-list-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.onboarding-list-item:hover { background: #f3f4f6; }
.onboarding-list-item.checked { background: #e8f2ff; border: 1px solid #bcd7ff; }
.onboarding-list-item input[type="checkbox"] { cursor: pointer; }

/* Chips for selected items */
.onboarding-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.onboarding-chip { 
  background: #e8f2ff; 
  color: #1A80E5; 
  border: 1px solid #bcd7ff; 
  border-radius: 999px; 
  padding: 3px 8px; 
  font-size: 12px; 
  flex: 0 1 auto;
  max-width: calc(25% - 6px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
}
.onboarding-chip button { 
  margin-left: 6px; 
  background: transparent; 
  border: none; 
  color: #1A80E5; 
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.onboarding-chip button:hover { color: #0d6efd; }

.onboarding-table { width: 100%; border-collapse: collapse; }
.onboarding-table th, .onboarding-table td { padding: 8px; border-bottom: 1px solid #f0f0f0; text-align: left; }
.onboarding-table th { background: #f9fafb; font-weight: 600; }

.btn-primary { background: #1A80E5; color: #fff; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(26,128,229,0.08); }
.btn-secondary { background: #f8fbff; color: #111827; border: 1px solid #e5e7eb; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.btn-danger { background: #dc2626; color: #fff; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; }

/* Status badges */
.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.success {
  background-color: #d4edda;
  color: #155724;
}

.status-badge.error {
  background-color: #f8d7da;
  color: #721c24;
}

.status-badge.warning {
  background-color: #fff3cd;
  color: #856404;
}

.status-badge.info {
  background-color: #d1ecf1;
  color: #0c5460;
}

/* Modal styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
  margin: 0;
  color: #2c3e50;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6c757d;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: #495057;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}



@media (max-width: 480px) {
  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .modal-footer button {
    width: 100%;
  }
}

/* ============================================================
   Account Settings Page
   Prefix: acct-  (avoids collision with other components)
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.acct-page {
  width: 100%;
  min-height: 100vh;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  display: flex;
  flex-direction: column;
}

.acct-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 14px 28px 24px;
  padding-top: 94px;
  box-sizing: border-box;
}

/* ── Hero / Profile Header ─────────────────────────────────── */
.acct-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.acct-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1A80E5 0%, #3b82f6 100%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-user-select: none;
          user-select: none;
}

.acct-hero-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.acct-hero-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: left;
}

.acct-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.acct-hero-email {
  font-size: 0.8rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acct-hero-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.acct-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.acct-role-icon { font-size: 0.55rem; }

.acct-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  background: #fefce8;
  color: #a16207;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #fde68a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.acct-type-icon { font-size: 0.5rem; }

.acct-member-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  white-space: nowrap;
}

.acct-member-icon { font-size: 0.5rem; }

.acct-logout-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 9px;
  background: #fff;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.acct-logout-btn:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}
.acct-logout-btn:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 1px;
}

/* ── Two-column grid ──────────────────────────────────────── */
.acct-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}

.acct-col {
  display: flex;
  flex-direction: column;
}

/* ── Section card ──────────────────────────────────────────── */
.acct-section {
  margin-bottom: 16px;
}

.acct-section-card {
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  text-align: left;
}

.acct-section-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.acct-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #f3f4f6;
}

.acct-section-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.acct-icon-blue   { background: #eff6ff; color: #1d4ed8; }
.acct-icon-purple { background: #f5f3ff; color: #7c3aed; }
.acct-icon-amber  { background: #fffbeb; color: #d97706; }
.acct-icon-red    { background: #fef2f2; color: #dc2626; }

.acct-section-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  line-height: 1.3;
}

.acct-section-desc {
  margin: 1px 0 0;
  font-size: 0.7rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  line-height: 1.4;
}

/* ── Form ──────────────────────────────────────────────────── */
.acct-form {
  padding: 14px 18px 16px;
}

.acct-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.acct-form-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acct-section-card > .acct-form-stack {
  padding: 14px 18px 16px;
}

.acct-2fa-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: -webkit-fit-content;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
}

.acct-2fa-on {
  background: #ecfdf5;
  color: #047857;
}

.acct-2fa-off {
  background: #f8fafc;
  color: #64748b;
}

.acct-2fa-qr-wrap {
  display: flex;
  justify-content: center;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 10px;
}

.acct-2fa-qr {
  width: 180px;
  height: 180px;
  image-rendering: crisp-edges;
}

.acct-backup-codes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
}

.acct-backup-code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.acct-backup-code-grid code {
  display: block;
  padding: 8px;
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 8px;
  color: #92400e;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.acct-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.acct-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.acct-label-icon {
  font-size: 0.6rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.acct-input {
  width: 100%;
  padding: 7px 11px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 7px;
  font-size: 0.8125rem;
  font-family: inherit;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: #fff;
  background: var(--cs-white, #fff);
  min-height: 36px;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
          appearance: none;
}

.acct-input:hover:not(:read-only) {
  border-color: #d1d5db;
}

.acct-input:focus {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.1);
}

.acct-input:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 1px;
  box-shadow: none;
}

.acct-input::placeholder {
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  font-size: 0.775rem;
}

/* Read-only inputs */
.acct-input-readonly {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: default;
  border-color: #f0f0f0;
}
.acct-input-readonly:hover { border-color: #f0f0f0; }
.acct-input-readonly:focus { box-shadow: none; border-color: #f0f0f0; outline: none; }

/* Error input */
.acct-input-error {
  border-color: #ef4444;
  border-color: var(--cs-red, #ef4444);
}
.acct-input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  border-color: var(--cs-red, #ef4444);
}

/* Field hint / error text */
.acct-field-hint {
  font-size: 0.65rem;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  line-height: 1.3;
}

.acct-field-error {
  font-size: 0.65rem;
  color: #ef4444;
  color: var(--cs-red, #ef4444);
  font-weight: 500;
  line-height: 1.3;
}

/* ── Password input with toggle ───────────────────────────── */
.acct-pw-wrap {
  position: relative;
}

.acct-pw-wrap .acct-input {
  padding-right: 36px;
}

.acct-pw-toggle {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: color 0.15s, background 0.15s;
}
.acct-pw-toggle:hover {
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
}

.acct-pw-divider {
  height: 1px;
  background: #f3f4f6;
  margin: 2px 0;
}

/* ── Read-only rows (company, IDs) ─────────────────────────── */
.acct-company-grid {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acct-readonly-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acct-readonly-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.acct-readonly-value {
  font-size: 0.8125rem;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  padding: 7px 11px;
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border: 1px solid #f0f0f0;
  border-radius: 7px;
  min-height: 36px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.acct-code-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  padding: 6px 11px;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
}

.acct-code-chip code {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.825rem;
  font-weight: 600;
  color: #1e40af;
  letter-spacing: 0.06em;
}

.acct-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 5px;
  background: rgba(26, 128, 229, 0.1);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  cursor: pointer;
  font-size: 0.65rem;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.acct-copy-btn:hover { background: rgba(26, 128, 229, 0.2); }
.acct-copy-btn-done {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}
.acct-copy-btn:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 1px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.acct-form-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}

.acct-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 18px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 36px;
  white-space: nowrap;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
}
.acct-btn-primary:hover { background: #1565C0; background: var(--cs-blue-dark, #1565C0); transform: translateY(-0.5px); }
.acct-btn-primary:active { transform: translateY(0); }
.acct-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.acct-btn-primary:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 2px;
}

/* ── Inline alert ──────────────────────────────────────────── */
.acct-alert {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 7px;
  font-size: 0.725rem;
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.4;
}

.acct-alert-success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.acct-alert-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.acct-alert-icon {
  flex-shrink: 0;
  font-size: 0.7rem;
}

.acct-alert-text {
  flex: 1 1;
  min-width: 0;
}

.acct-alert-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 0.95rem;
  padding: 0 2px;
  opacity: 0.6;
  line-height: 1;
  flex-shrink: 0;
}
.acct-alert-dismiss:hover { opacity: 1; }

/* ── Error state ───────────────────────────────────────────── */
.acct-error-card {
  text-align: center;
  padding: 48px 32px;
  max-width: 400px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.acct-error-icon {
  font-size: 2.5rem;
  color: #ef4444;
  color: var(--cs-red, #ef4444);
  margin-bottom: 16px;
}

.acct-error-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.acct-error-desc {
  margin: 0 0 24px;
  font-size: 0.875rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  line-height: 1.6;
}

/* ── Skeleton loading ──────────────────────────────────────── */
.acct-skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.acct-skel-block {
  background: #fff;
  background: var(--cs-white, #fff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acct-skel-hero {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.acct-skel-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e5e7eb;
  flex-shrink: 0;
  animation: acct-shimmer 1.5s infinite;
}

.acct-skel-hero-text {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acct-skel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.acct-skel-line {
  height: 12px;
  border-radius: 4px;
  background: #e5e7eb;
  animation: acct-shimmer 1.5s infinite;
}

.acct-skel-w40 { width: 40%; }
.acct-skel-w60 { width: 60%; }
.acct-skel-w100 { width: 100%; }

@keyframes acct-shimmer {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

/* ============================================================
   Danger Zone
   ============================================================ */
.acct-danger-section {
  margin-top: 0;
}

.acct-danger-card {
  border-color: #fecaca;
  background: #fffbfb;
}

.acct-danger-header {
  border-bottom-color: #fef2f2;
}

.acct-danger-body {
  padding: 14px 18px 16px;
}

.acct-danger-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
}

.acct-danger-item + .acct-danger-item {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #fecaca;
}

.acct-danger-portal-link {
  text-decoration: none;
}

.acct-danger-info {
  flex: 1 1;
  min-width: 0;
  text-align: left;
}

.acct-danger-item-title {
  margin: 0 0 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  text-align: left;
}

.acct-danger-item-desc {
  margin: 0;
  font-size: 0.7rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  line-height: 1.45;
  text-align: left;
}

/* Danger button */
.acct-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.775rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 34px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
}
.acct-btn-danger:hover { background: #b91c1c; transform: translateY(-0.5px); }
.acct-btn-danger:active { transform: translateY(0); }
.acct-btn-danger:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.acct-btn-danger:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

.acct-btn-icon {
  font-size: 0.65rem;
}

/* Secondary (cancel) button */
.acct-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  background: var(--cs-white, #fff);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 36px;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.acct-btn-secondary:hover { background: #f9fafb; background: var(--cs-bg-alt, #f9fafb); border-color: #d1d5db; }
.acct-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.acct-btn-secondary:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 2px;
}

/* ============================================================
   Delete Confirmation Modal
   ============================================================ */
.acct-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 16px;
  animation: acct-fade-in 0.18s ease;
}

@keyframes acct-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.acct-modal {
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  animation: acct-modal-slide 0.22s ease;
}

@keyframes acct-modal-slide {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.acct-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #f3f4f6;
}

.acct-modal-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fef2f2;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.acct-modal-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  flex: 1 1;
  line-height: 1.3;
}

.acct-modal-close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: background 0.12s;
}
.acct-modal-close:hover { background: #f3f4f6; background: var(--cs-bg, #f3f4f6); }
.acct-modal-close:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 1px;
}

.acct-modal-body {
  padding: 16px 20px;
}

.acct-modal-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.8125rem;
}

.acct-spinner {
  animation: acct-spin 0.8s linear infinite;
  font-size: 0.8rem;
}

@keyframes acct-spin {
  to { transform: rotate(360deg); }
}

.acct-modal-blocked-hint {
  margin: 10px 0 0;
  font-size: 0.725rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  line-height: 1.5;
}

.acct-modal-warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
}

.acct-modal-warning p {
  margin: 0 0 6px;
  font-size: 0.775rem;
  color: #92400e;
}

.acct-modal-consequences {
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 0.725rem;
  color: #78350f;
  line-height: 1.65;
}

.acct-modal-consequences li {
  margin-bottom: 1px;
}

.acct-modal-confirm-field {
  margin-top: 4px;
}

.acct-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid #f3f4f6;
}

.acct-btn-danger-confirm {
  padding: 7px 14px;
}

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet — stack to single column */
@media (max-width: 820px) {
  .acct-content {
    padding: 12px 16px 24px;
    padding-top: 90px;
  }

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

  .acct-skel-grid {
    grid-template-columns: 1fr;
  }

  .acct-hero { padding: 14px 16px; gap: 12px; }
  .acct-avatar { width: 42px; height: 42px; font-size: 0.95rem; }
  .acct-hero-name { font-size: 1.1rem; }
  .acct-hero-badges { justify-content: flex-start; }

  .acct-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .acct-content {
    padding: 10px 12px 20px;
    padding-top: 86px;
  }

  .acct-hero {
    flex-wrap: wrap;
    padding: 12px 14px;
    gap: 10px;
  }

  .acct-hero-info { flex-grow: 1; flex-shrink: 1; flex-basis: calc(100% - 62px); }
  .acct-hero-badges {
    flex-basis: 100%;
    justify-content: flex-start;
    gap: 5px;
  }

  .acct-avatar { width: 40px; height: 40px; font-size: 0.9rem; border-radius: 10px; }
  .acct-hero-name { font-size: 1rem; }
  .acct-hero-email { font-size: 0.75rem; }

  .acct-logout-btn {
    width: 32px;
    height: 32px;
    font-size: 0.7rem;
  }

  .acct-section { margin-bottom: 12px; }
  .acct-section-card { border-radius: 10px; }

  .acct-section-header { padding: 12px 14px; gap: 8px; }
  .acct-section-icon { width: 28px; height: 28px; font-size: 0.7rem; border-radius: 7px; }
  .acct-section-title { font-size: 0.8125rem; }
  .acct-section-desc { font-size: 0.65rem; }

  .acct-form { padding: 12px 14px; }
  .acct-company-grid { padding: 12px 14px; }

  .acct-form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .acct-form-stack { gap: 10px; }
  .acct-input { padding: 7px 10px; font-size: 0.8rem; min-height: 34px; }

  .acct-btn-primary {
    width: 100%;
    justify-content: center;
  }

  .acct-btn-danger {
    width: 100%;
    justify-content: center;
  }

  .acct-danger-item {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .acct-danger-body { padding: 12px 14px; }
  .acct-form-actions { margin-top: 12px; }
}

/* Small mobile */
@media (max-width: 360px) {
  .acct-content {
    padding: 8px 8px 16px;
    padding-top: 82px;
  }

  .acct-hero { padding: 10px 12px; border-radius: 10px; }
  .acct-avatar { width: 36px; height: 36px; font-size: 0.8rem; border-radius: 9px; }
  .acct-hero-name { font-size: 0.95rem; }

  .acct-section { margin-bottom: 10px; }
  .acct-section-header { padding: 10px 12px; }
  .acct-form { padding: 10px 12px; }
  .acct-company-grid { padding: 10px 12px; }

  .acct-code-chip { padding: 5px 8px; }
  .acct-code-chip code { font-size: 0.775rem; }
}

/* ── Modal responsive ─────────────────────────────────────── */
@media (max-width: 600px) {
  .acct-modal {
    max-width: 100%;
    border-radius: 12px;
  }

  .acct-modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .acct-modal-footer .acct-btn-secondary,
  .acct-modal-footer .acct-btn-danger {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .acct-modal-header { padding: 14px 16px 12px; }
  .acct-modal-body { padding: 14px 16px; }
  .acct-modal-footer { padding: 12px 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .acct-skel-line,
  .acct-skel-avatar { animation: none; }
  .acct-modal-overlay { animation: none; }
  .acct-modal { animation: none; }
  .acct-spinner { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CloudSafe — Roadmap Page
   Brand palette: navy #0c437c, teal #0d9488
   ═══════════════════════════════════════════════════════════════ */

.rmp {
  --navy:       #0c437c;
  --navy-deep:  #082e55;
  --teal:       #0d9488;
  --teal-deep:  #0b7a70;
  --ink:        #0f172a;
  --ink-2:      #334155;
  --muted:      #64748b;
  --hairline:   #e4e8ee;
  --surface:    #ffffff;
  --surface-2:  #f7f9fc;
  --bg:         #fbfcfe;

  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

.rmp-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 32px 96px;
}

/* ─── Top bar ──────────────────────────────────────────────── */
.rmp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 56px;
}
.rmp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}
.rmp-back:hover {
  background: var(--surface);
  color: var(--navy);
  border-color: #cfd6e0;
  transform: translateX(-1px);
}
.rmp-back svg { font-size: 11px; }

.rmp-wordmark {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ─── Hero ─────────────────────────────────────────────────── */
.rmp-hero {
  max-width: 820px;
  margin: 0 auto 72px;
  text-align: center;
}

.rmp-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(13, 148, 136, 0.08);
  color: var(--teal-deep);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.rmp-hero-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.22);
  animation: rmp-dot 2.2s ease-in-out infinite;
}
@keyframes rmp-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.22); }
  50%      { box-shadow: 0 0 0 7px rgba(13, 148, 136, 0); }
}

.rmp-hero-title {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  color: var(--ink);
}
.rmp-hero-title-accent {
  background: linear-gradient(90deg, var(--teal) 0%, var(--navy) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.rmp-hero-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 auto 40px;
  max-width: 640px;
}

/* Stats strip — editorial, not badgey */
.rmp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.rmp-stat {
  padding: 18px 20px;
  border-right: 1px solid var(--hairline);
  margin: 0;
  text-align: center;
}
.rmp-stat:last-child { border-right: none; }
.rmp-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.rmp-stat-value {
  display: block;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ─── Filters ──────────────────────────────────────────────── */
.rmp-filters-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.rmp-filters-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.rmp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rmp-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.16s ease;
  font-family: inherit;
}
.rmp-filter:hover {
  background: var(--surface);
  border-color: var(--hairline);
  color: var(--ink);
}
.rmp-filter.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.rmp-filter svg { font-size: 11px; opacity: 0.85; }

/* ─── Timeline ─────────────────────────────────────────────── */
.rmp-timeline {
  position: relative;
}

.rmp-phase {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-gap: 24px;
  gap: 24px;
  padding-bottom: 56px;
}
.rmp-phase:last-child { padding-bottom: 0; }

/* Rail column — vertical spine with node */
.rmp-phase-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rmp-phase-node {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--phase-color);
  color: var(--phase-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 2;
  box-shadow: 0 0 0 6px var(--bg);
}
.rmp-phase-line {
  width: 2px;
  flex: 1 1;
  background: linear-gradient(180deg, var(--phase-color) 0%, var(--hairline) 100%);
  opacity: 0.4;
  margin-top: 8px;
  z-index: 1;
}

/* Content column */
.rmp-phase-content {
  padding-top: 4px;
  min-width: 0;
}

.rmp-phase-head {
  margin-bottom: 20px;
}
.rmp-phase-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 4px;
}
.rmp-phase-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  font-weight: 500;
}

.rmp-phase-empty {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px dashed var(--hairline);
  border-radius: 12px;
  color: var(--muted);
  font-size: 13.5px;
}

/* ─── Cards ────────────────────────────────────────────────── */
.rmp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.rmp-card {
  display: flex;
  gap: 14px;
  padding: 20px 20px 22px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
  animation: rmp-card-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.rmp-card:hover {
  border-color: color-mix(in srgb, var(--phase-color) 38%, var(--hairline));
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(12, 67, 124, 0.2);
}
@keyframes rmp-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rmp-card-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--phase-color) 10%, transparent);
  color: var(--phase-color);
  font-size: 15px;
}

.rmp-card-body {
  flex: 1 1;
  min-width: 0;
}

.rmp-card-cat {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 2px 0 8px;
}

.rmp-card-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.rmp-card-copy {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* ─── Footer CTA ───────────────────────────────────────────── */
.rmp-cta {
  margin-top: 80px;
  padding: 36px 40px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.rmp-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 100% 0%, rgba(13, 148, 136, 0.35), transparent 60%);
  pointer-events: none;
}
.rmp-cta-text { position: relative; flex: 1 1; min-width: 240px; }
.rmp-cta-text h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: #fff;
}
.rmp-cta-text p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  line-height: 1.5;
}
.rmp-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--teal);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 8px 20px -8px rgba(13, 148, 136, 0.6);
}
.rmp-cta-btn:hover {
  background: var(--teal-deep);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(13, 148, 136, 0.7);
}
.rmp-cta-btn svg { font-size: 13px; }

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 820px) {
  .rmp-shell { padding: 20px 20px 72px; }
  .rmp-topbar { margin-bottom: 36px; padding-bottom: 24px; }
  .rmp-hero { margin-bottom: 48px; }
  .rmp-stats { grid-template-columns: repeat(2, 1fr); }
  .rmp-stat {
    padding: 16px;
    border-right: 1px solid var(--hairline);
  }
  .rmp-stat:nth-child(2) { border-right: none; }
  .rmp-stat:nth-child(1), .rmp-stat:nth-child(2) { border-bottom: 1px solid var(--hairline); }
  .rmp-filters-wrap { gap: 12px; margin-bottom: 40px; }
  .rmp-phase {
    grid-template-columns: 40px 1fr;
    gap: 16px;
    padding-bottom: 40px;
  }
  .rmp-phase-node { width: 36px; height: 36px; font-size: 13px; box-shadow: 0 0 0 4px var(--bg); }
  .rmp-phase-title { font-size: 20px; }
  .rmp-cta {
    padding: 28px 24px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .rmp-cta-text { text-align: center; width: 100%; }
  .rmp-cta-btn {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .rmp-hero-title { font-size: 32px; }
  .rmp-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rmp-card { animation: none; }
  .rmp-hero-tag-dot { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CloudSafe — Showcase acts (shared shell)
   ═══════════════════════════════════════════════════════════════ */

.act {
  position: relative;
  min-height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  grid-gap: 48px;
  gap: 48px;
  align-items: center;
  padding: 48px 56px;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ─── Left: narrative ──────────────────────────────────────── */
.act-copy { max-width: 440px; }

.act-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: rgba(26, 128, 229, 0.1);
  color: var(--teal-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.act-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
}

.act-title {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
  color: var(--ink);
}
.act-title-accent {
  background: linear-gradient(90deg, var(--teal) 0%, var(--navy) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.act-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 28px;
}

/* Bullet "proof points" */
.act-proofs {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.act-proof {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.act-proof-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: var(--teal-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  margin-top: 1px;
}
.act-proof strong { color: var(--ink); font-weight: 600; }

/* Stat strip */
.act-stats {
  display: flex;
  gap: 20px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.act-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.act-stat-val {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.act-stat-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── Right: stage ─────────────────────────────────────────── */
.act-stage {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* A "device frame" panel used by several acts */
.act-device {
  position: relative;
  width: 100%;
  max-width: 780px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow:
    0 2px 4px rgba(12, 67, 124, 0.04),
    0 30px 60px -20px rgba(12, 67, 124, 0.18);
  overflow: hidden;
}
.act-device-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, #fafbfd 0%, #f3f5fa 100%);
}
.act-device-dots { display: flex; gap: 6px; }
.act-device-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: #dce1ea;
}
.act-device-dots span:nth-child(1) { background: #f87171; }
.act-device-dots span:nth-child(2) { background: #fbbf24; }
.act-device-dots span:nth-child(3) { background: #34d399; }
.act-device-addr {
  margin-left: 8px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .act { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px; align-content: start; align-items: start; }
  .act-stage { min-height: 0; width: 100%; }
}

@media (max-width: 600px) {
  .act { padding: 18px 14px 28px; gap: 20px; }
  .act-copy { max-width: 100%; }
  .act-eyebrow { margin-bottom: 14px; font-size: 10px; }
  .act-title { font-size: 26px; line-height: 1.1; margin-bottom: 12px; }
  .act-lede { font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }
  .act-proofs { gap: 8px; margin-bottom: 20px; }
  .act-proof { font-size: 13px; }
  .act-stats { gap: 12px; padding-top: 12px; flex-wrap: wrap; }
  .act-stat-val { font-size: 19px; }
  .act-stat-lbl { font-size: 10px; }
}

/* Act 1 — Onboarding */

/* Centre the stat strip on all viewports */
.act-1 .act-stats { justify-content: center; }

.a1-device {
  display: grid;
  grid-template-columns: 1fr 260px;
}

.a1-canvas {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #fafbfd;
  overflow: hidden;
}
.a1-plan {
  display: block;
  width: 100%;
  height: 100%;
}

/* Pin drop animation */
.a1-pin {
  opacity: 0;
  transform-origin: center;
}
.a1-pin.is-in {
  animation: a1-pin-drop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes a1-pin-drop {
  0%   { opacity: 0; transform: translate(0, -40px) scale(0.2); transform: translate(var(--tx, 0), var(--ty, -40px)) scale(0.2); }
  60%  { opacity: 1; transform: translate(0, 0) scale(1.15); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
.a1-pin.is-in { /* use the existing transform from the SVG via CSS var fallback */ }
.a1-pin-ring {
  transform-origin: center;
  animation: a1-ring-pulse 2.2s ease-in-out infinite;
}
@keyframes a1-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.5); opacity: 0; }
}

/* Upload chip */
.a1-upload {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 12px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: 0 10px 28px -10px rgba(12, 67, 124, 0.22);
  animation: a1-upload-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 2;
}
.a1-upload.is-gone {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
.a1-upload-ico {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.a1-upload-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.a1-upload-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.a1-upload-ok {
  color: var(--teal);
  font-size: 14px;
}

@keyframes a1-upload-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sidebar */
.a1-sidebar {
  border-left: 1px solid var(--hairline);
  background: #fdfefe;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.a1-sidebar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.a1-sidebar-head svg { color: var(--navy); font-size: 11px; }
.a1-sidebar-count {
  margin-left: auto;
  padding: 3px 10px;
  background: rgba(12, 67, 124, 0.08);
  color: var(--navy);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.a1-id-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  flex: 1 1;
}
.a1-id {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  padding: 8px 16px;
  opacity: 0;
  transform: translateX(10px);
  border-bottom: 1px solid #f1f4f8;
}
.a1-id:last-child { border-bottom: none; }
.a1-id.is-in { animation: a1-id-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes a1-id-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.a1-id-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.a1-id-code {
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.a1-id-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--teal-deep);
  background: rgba(13, 148, 136, 0.1);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.a1-done {
  margin: 14px 16px 16px;
  padding: 10px 12px;
  background: rgba(13, 148, 136, 0.08);
  color: var(--teal-deep);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: a1-id-in 0.4s ease both;
}

/* Responsive */
@media (max-width: 1100px) {
  /* Centre the Act 1 copy and stats on tablet/mobile */
  .act-1 { text-align: center; justify-items: center; }
  .act-1 .act-copy { max-width: 560px; margin: 0 auto; }
  .act-1 .act-eyebrow { margin-left: auto; margin-right: auto; }
  .act-1 .act-proofs {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .act-1 .act-stats { justify-content: center; }

  .a1-device { grid-template-columns: 1fr; }
  .a1-sidebar {
    border-left: none;
    border-top: 1px solid var(--hairline);
    max-height: 240px;
    overflow-y: auto;
  }
}
@media (max-width: 600px) {
  .a1-canvas { aspect-ratio: 4 / 3; }
  .a1-upload {
    top: 10px;
    left: 10px;
    right: 10px;
    padding: 8px 10px;
  }
  .a1-upload-name { font-size: 11.5px; }
  .a1-upload-meta { font-size: 10px; }
  .a1-sidebar-head { padding: 10px 12px; font-size: 11px; }
  .a1-id { padding: 7px 12px; grid-template-columns: 22px 1fr auto; }
  .a1-id-code { font-size: 11px; }
  .a1-id-tag { font-size: 9px; padding: 2px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .a1-pin.is-in { animation: none; opacity: 1; }
  .a1-pin-ring { animation: none; opacity: 0.25; }
  .a1-id.is-in { animation: none; opacity: 1; transform: none; }
  .a1-upload { animation: none; }
}

/* Act 2 — Live tests */

.act-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 8px 20px -8px rgba(12, 67, 124, 0.55);
}
.act-cta:hover {
  background: var(--navy-deep);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(12, 67, 124, 0.7);
}
.act-cta svg { font-size: 11px; }

/* ─── Scene ─────────────────────────────────────── */
.a2-scene {
  position: relative;
  display: grid;
  grid-template-columns: 260px 80px 1fr;
  grid-gap: 0;
  gap: 0;
  align-items: center;
  max-width: 820px;
  width: 100%;
}

/* Tester panel */
.a2-tester {
  background: linear-gradient(165deg, #0c437c 0%, #082e55 100%);
  color: #fff;
  border-radius: 18px;
  padding: 20px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(12, 67, 124, 0.65);
}
.a2-tester::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(300px 200px at 0% 0%, rgba(26, 128, 229, 0.32), transparent 60%);
  pointer-events: none;
}
.a2-tester-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 14px;
  position: relative;
}
.a2-tester-head svg { color: var(--teal); font-size: 11px; }
.a2-tester-signal {
  margin-left: auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: #1A80E5;
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.22);
  animation: sc-dot-pulse 1.8s ease-in-out infinite;
}

.a2-tester-body {
  position: relative;
  padding: 14px 0 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.a2-tester-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.a2-tester-load {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.a2-tester-load-val {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.a2-tester-load-unit {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}
.a2-tester-status {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #1A80E5;
}

.a2-tester-send {
  position: relative;
  margin-top: 14px;
  width: 100%;
  padding: 11px 14px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease;
}
.a2-tester-send:hover { background: var(--teal-deep); }
.a2-tester-send.is-sending {
  background: rgba(26, 128, 229, 0.55);
  cursor: default;
}

/* Wire between tester and asset card */
.a2-wire {
  height: 200px;
  width: 100%;
}
.a2-wire-dot {
  opacity: 0;
}
.a2-wire.is-live .a2-wire-dot {
  opacity: 1;
  animation: a2-wire-fade 1.4s ease-out forwards;
}
@keyframes a2-wire-fade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

/* Asset card */
.a2-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 18px 40px -20px rgba(12, 67, 124, 0.18);
  position: relative;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.a2-card.is-updating {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(26, 128, 229, 0.12), 0 18px 40px -20px rgba(12, 67, 124, 0.18);
}
.a2-card.is-done {
  border-color: color-mix(in srgb, var(--teal) 30%, var(--hairline));
  box-shadow: 0 18px 40px -20px rgba(12, 67, 124, 0.18);
}

.a2-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.a2-card-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(12, 67, 124, 0.08);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.a2-card-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.a2-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.a2-card-head-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.a2-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: all 0.4s ease;
}
.a2-card-badge.is-pending {
  background: #f3f5fa;
  color: var(--muted);
}
.a2-card-badge.is-pass {
  background: rgba(26, 128, 229, 0.12);
  color: var(--teal-deep);
}

.a2-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px 24px;
  gap: 8px 24px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.a2-card-meta-row { display: flex; flex-direction: column; gap: 3px; }
.a2-card-meta-key {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.a2-card-meta-val {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  transition: background 0.5s ease;
}
.a2-card-meta-val.is-highlighted {
  animation: a2-meta-highlight 1.2s ease;
}
@keyframes a2-meta-highlight {
  0%   { background: rgba(26, 128, 229, 0); }
  20%  { background: rgba(26, 128, 229, 0.18); }
  100% { background: rgba(26, 128, 229, 0); }
}

.a2-card-cert {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px dashed var(--hairline);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--muted);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.a2-card-cert.is-in {
  opacity: 1;
  transform: translateY(0);
  color: var(--ink);
  background: rgba(26, 128, 229, 0.06);
  border: 1px solid rgba(26, 128, 229, 0.25);
  border-style: solid;
}
.a2-card-cert svg { color: var(--navy); }
.a2-card-cert-size {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}

.a2-card-toast {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  background: rgba(26, 128, 229, 0.12);
  color: var(--teal-deep);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.a2-card-toast.is-in { opacity: 1; transform: translateY(0); }
.a2-card-toast svg { font-size: 9px; }

/* History ribbon */
.a2-history {
  grid-column: 1 / -1;
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.a2-history.is-in { opacity: 1; transform: translateY(0); }
.a2-history-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.a2-history-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}
.a2-history-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.a2-history-item.is-new {
  background: rgba(26, 128, 229, 0.06);
  border-color: rgba(26, 128, 229, 0.25);
}
.a2-history-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #cbd5e1;
}
.a2-history-dot.is-new {
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.22);
}
.a2-history-date {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
}
.a2-history-result {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.a2-history-result.is-pass { color: var(--teal-deep); }
.a2-history-new {
  padding: 2px 8px;
  background: var(--teal);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  grid-column: 3;
}

/* Responsive */
@media (max-width: 1100px) {
  .a2-scene { grid-template-columns: 1fr; gap: 14px; max-width: 100%; }
  .a2-wire { display: none; }
  .a2-history-items { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 600px) {
  .a2-tester { padding: 16px 14px; border-radius: 14px; }
  .a2-tester-head { font-size: 10px; }
  .a2-tester-load-val { font-size: 34px; }
  .a2-card { padding: 14px 14px 16px; border-radius: 14px; }
  .a2-card-name { font-size: 14px; }
  .a2-card-meta { grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 10px 0; }
  .a2-card-meta-val { font-size: 12px; }
  .a2-card-badge { font-size: 10.5px; padding: 4px 9px; }
  .a2-card-toast { top: 10px; right: 10px; font-size: 9.5px; padding: 4px 8px; }
  .a2-history { margin-top: 14px; padding: 12px 14px; }
  .a2-history-item { grid-template-columns: 8px 1fr auto; padding: 8px 10px; }
  .a2-history-date, .a2-history-result { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .a2-wire.is-live .a2-wire-dot { animation: none; opacity: 0; }
  .a2-card-meta-val.is-highlighted { animation: none; }
  .a2-card-cert, .a2-card-toast, .a2-history { transition: none; }
}

/* Act 3 — Portfolio */

.a3-device {
  width: 100%;
}
.a3-body {
  padding: 20px 24px 24px;
}

/* ─── Summary strip ─────────────────────────────── */
.a3-summary {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1px 1fr;
  align-items: center;
  grid-gap: 24px;
  gap: 24px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(12, 67, 124, 0.04) 0%, rgba(26, 128, 229, 0.05) 100%);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  margin-bottom: 18px;
}

.a3-summary-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.a3-summary-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.a3-summary-pct {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.a3-summary-pct-val {
  font-size: 38px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
.a3-summary-pct-unit {
  font-size: 18px;
  font-weight: 600;
  color: var(--muted);
}
.a3-summary-bar {
  height: 6px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}
.a3-summary-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal) 0%, var(--navy) 100%);
  border-radius: 999px;
  animation: a3-bar-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes a3-bar-in {
  from { width: 0 !important; }
}

.a3-summary-divider {
  width: 1px;
  height: 52px;
  background: var(--hairline);
}

.a3-summary-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
}
.a3-summary-stat {
  display: flex;
  align-items: center;
  gap: 10px;
}
.a3-summary-ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.a3-c-navy  { background: rgba(12, 67, 124, 0.1); color: var(--navy); }
.a3-c-teal  { background: rgba(26, 128, 229, 0.1); color: var(--teal-deep); }
.a3-c-red   { background: rgba(220, 38, 38, 0.1); color: var(--red); }
.a3-c-amber { background: rgba(217, 119, 6, 0.1); color: var(--amber); }

.a3-summary-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.a3-summary-stat-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ─── Property grid ─────────────────────────────── */
.a3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.a3-card {
  padding: 16px 16px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.a3-card.is-in {
  animation: a3-card-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes a3-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.a3-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(12, 67, 124, 0.22);
}

.a3-card.a3-risk-high {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.025) 0%, transparent 50%);
}
.a3-card.a3-risk-medium {
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.025) 0%, transparent 50%);
}

.a3-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.a3-card-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(12, 67, 124, 0.08);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.a3-card-head-text { flex: 1 1; min-width: 0; }
.a3-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.a3-card-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}
.a3-card-loc svg { font-size: 9px; }
.a3-card-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #94a3b8;
  font-size: 10.5px;
  margin-left: 4px;
}

.a3-card-risk {
  padding: 3px 8px;
  background: color-mix(in srgb, var(--risk-color) 12%, transparent);
  color: var(--risk-color);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.a3-card-meter { margin-bottom: 10px; }
.a3-card-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.a3-card-meter-val {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.a3-card-meter-track {
  height: 5px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}
.a3-card-meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.a3-card-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.a3-card-count {
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}
.a3-card-count strong {
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ─── Trend footer ──────────────────────────────── */
.a3-trend {
  margin-top: 14px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(26, 128, 229, 0.06);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink-2);
}
.a3-trend svg { color: var(--teal); }
.a3-trend strong { color: var(--teal-deep); font-weight: 700; }

/* Responsive */
@media (max-width: 1100px) {
  .a3-summary { grid-template-columns: 1fr; gap: 14px; padding: 14px 16px; }
  .a3-summary-divider { display: none; }
  .a3-summary-stats { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .a3-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .a3-body { padding: 14px; }
  .a3-summary { padding: 12px 14px; margin-bottom: 14px; }
  .a3-summary-pct-val { font-size: 30px; }
  .a3-summary-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .a3-summary-ico { width: 28px; height: 28px; font-size: 12px; }
  .a3-summary-stat-val { font-size: 16px; }
  .a3-summary-stat-lbl { font-size: 10px; }
  .a3-grid { grid-template-columns: 1fr; gap: 10px; }
  .a3-card { padding: 14px 14px 16px; }
  .a3-card-name { font-size: 13.5px; }
  .a3-card-loc { font-size: 11px; }
  .a3-card-risk { font-size: 9.5px; padding: 3px 7px; }
  .a3-card-count { font-size: 10.5px; padding: 3px 8px; }
  .a3-trend { font-size: 11.5px; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .a3-card { opacity: 1; transform: none; }
  .a3-card.is-in { animation: none; }
  .a3-summary-bar-fill { animation: none; }
  .a3-card-meter-fill { transition: none; }
}

/* Act 4 — Reports */

.a4-stack {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 5 / 7;
  perspective: 1800px;
}

.a4-page {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 30px 60px -24px rgba(12, 67, 124, 0.25);
  overflow: hidden;
}

/* Fanned pages behind */
.a4-page-back {
  background: #fafbfd;
  border: 1px solid var(--hairline);
}
.a4-page-back-1 {
  transform: rotate(2.5deg) translate(12px, 12px);
  opacity: 0.9;
  box-shadow: 0 14px 28px -16px rgba(12, 67, 124, 0.15);
}
.a4-page-back-2 {
  transform: rotate(5deg) translate(22px, 22px);
  opacity: 0.7;
  box-shadow: 0 10px 22px -14px rgba(12, 67, 124, 0.12);
}

.a4-page-front {
  animation: a4-page-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--hairline);
}
@keyframes a4-page-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Cover band ────────────────────────────────── */
.a4-cover {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 22px 28px 26px;
  position: relative;
  overflow: hidden;
}
.a4-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 240px at 100% 0%, rgba(26, 128, 229, 0.35), transparent 60%);
  pointer-events: none;
}

.a4-cover-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
  margin-bottom: 22px;
}
.a4-cover-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
}
.a4-cover-brand-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.a4-cover-brand-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

.a4-cover-title {
  position: relative;
  z-index: 1;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.a4-cover-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.a4-cover-meta:last-child { border-bottom: none; padding-bottom: 0; }
.a4-cover-meta-val {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}
.a4-cover-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: rgba(167, 243, 208, 0.95);
}

/* ─── Body ──────────────────────────────────────── */
.a4-body {
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

.a4-section {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.a4-section.is-in { opacity: 1; transform: translateY(0); }

.a4-section-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

/* Summary cells */
.a4-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 12px;
}
.a4-summary-cell {
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-2);
}
.a4-summary-cell-teal  { border-color: rgba(26, 128, 229, 0.3); background: rgba(26, 128, 229, 0.05); }
.a4-summary-cell-amber { border-color: rgba(217, 119, 6, 0.3); background: rgba(217, 119, 6, 0.05); }
.a4-summary-cell-red   { border-color: rgba(220, 38, 38, 0.3); background: rgba(220, 38, 38, 0.05); }
.a4-summary-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.a4-summary-lbl {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.a4-summary-cell-teal  .a4-summary-val { color: var(--teal-deep); }
.a4-summary-cell-amber .a4-summary-val { color: var(--amber); }
.a4-summary-cell-red   .a4-summary-val { color: var(--red); }

.a4-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--hairline);
  margin-bottom: 8px;
}
.a4-bar-seg { height: 100%; }
.a4-bar-teal  { background: var(--teal); }
.a4-bar-amber { background: var(--amber); }
.a4-bar-red   { background: var(--red); }

.a4-bar-legend {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.a4-legend-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.a4-legend-teal  { background: var(--teal); }
.a4-legend-amber { background: var(--amber); }
.a4-legend-red   { background: var(--red); }

/* Table */
.a4-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.a4-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 8px;
  border-bottom: 1px solid var(--hairline);
}
.a4-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #f1f4f8;
  color: var(--ink-2);
}
.a4-table tr:last-child td { border-bottom: none; }
.a4-table code {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
  font-weight: 600;
}
.a4-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}
.a4-pill-teal { background: rgba(26, 128, 229, 0.12); color: var(--teal-deep); }

/* Footer */
.a4-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.a4-footer.is-in { opacity: 1; transform: translateY(0); }
.a4-footer-sign {
  display: flex;
  align-items: center;
  gap: 10px;
}
.a4-footer-sign svg {
  color: var(--teal);
  font-size: 16px;
}
.a4-footer-sign-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.a4-footer-sign-val {
  font-size: 11.5px;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
}
.a4-footer-page {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

/* Corner tag */
.a4-type {
  position: absolute;
  top: 18px;
  right: -18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 24px 5px 12px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  border-radius: 4px;
  transform: rotate(18deg);
  box-shadow: 0 6px 14px -6px rgba(220, 38, 38, 0.55);
}
.a4-type svg { font-size: 10px; }

@media (max-width: 1100px) {
  /* Centre the whole Act 4 copy + stage on tablet/mobile */
  .act-4 { text-align: center; justify-items: center; }
  .act-4 .act-copy { max-width: 560px; margin: 0 auto; }
  .act-4 .act-eyebrow { margin-left: auto; margin-right: auto; }
  .act-4 .act-proofs {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .act-4 .act-proof { justify-content: flex-start; }
  .act-4 .act-cta { margin: 0 auto; }

  .a4-stack { max-width: 520px; margin: 0 auto; aspect-ratio: auto; }
  .a4-page { position: relative; inset: auto; }
  .a4-page-back { display: none; }
  .a4-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .a4-body { padding: 14px 16px 18px; gap: 14px; }
  .a4-cover { padding: 16px 18px 18px; }
  .a4-cover-brand { margin-bottom: 16px; }
  .a4-cover-brand-name { font-size: 14px; }
  .a4-cover-meta-val { font-size: 13.5px; }
  .a4-cover-id { font-size: 11px; }
  .a4-summary { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .a4-summary-cell { padding: 8px 10px; }
  .a4-summary-val { font-size: 19px; }
  .a4-section-title { font-size: 10.5px; }
  .a4-table { font-size: 10.5px; }
  .a4-table th, .a4-table td { padding: 5px 6px; }
  .a4-type { top: 14px; right: -14px; padding: 4px 20px 4px 10px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .a4-page-front { animation: none; }
  .a4-section, .a4-footer { transition: none; opacity: 1; transform: none; }
}

/* Act 5 — Roadmap */

.a5-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
  gap: 12px;
  width: 100%;
  max-width: 680px;
}

.a5-card {
  position: relative;
  padding: 18px 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  opacity: 0;
  transform: translateY(10px);
  animation: a5-card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.a5-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -18px rgba(12, 67, 124, 0.22);
  border-color: color-mix(in srgb, var(--phase-color) 35%, var(--hairline));
}
.a5-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--phase-color);
  border-radius: 14px 14px 0 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.a5-card:hover::before { opacity: 1; }

@keyframes a5-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Make the first two cards span full width for visual variety */
.a5-card:nth-child(1),
.a5-card:nth-child(2) {
  grid-column: auto;
}
/* And the last one (5th) span both columns */
.a5-card:nth-child(5) {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.04) 0%, transparent 60%);
}

.a5-card-phase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--phase-color) 10%, transparent);
  color: var(--phase-color);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.a5-card-phase-ico { font-size: 9px; }

.a5-card-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--phase-color) 12%, transparent);
  color: var(--phase-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 12px;
}

.a5-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.a5-card-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* Thanks footer */
.a5-thanks {
  margin-top: 18px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  max-width: 680px;
  width: 100%;
  box-sizing: border-box;
}
.a5-thanks-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.22);
}
.a5-thanks-link {
  margin-left: auto;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}
.a5-thanks-link:hover { color: var(--teal-deep); }

@media (max-width: 1100px) {
  .a5-cards { margin: 0 auto; }
}
@media (max-width: 700px) {
  /* Fit cards as an even 2-column grid with consistent rows. */
  .a5-cards {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
  }
  .a5-card {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .a5-card-phase { margin-bottom: 10px; font-size: 9px; padding: 2px 8px 2px 6px; }
  .a5-card-ico { width: 32px; height: 32px; margin-bottom: 10px; font-size: 13px; }
  .a5-card-title { font-size: 13.5px; line-height: 1.25; margin-bottom: 5px; }
  .a5-card-body { font-size: 11.5px; line-height: 1.5; }
  /* The 5th item no longer spans both columns — even rows instead. */
  .a5-card:nth-child(5) {
    grid-column: auto;
    background: var(--surface);
  }
  /* Hide the "Thanks for walking through" card on mobile to save space. */
  .a5-thanks { display: none; }
}

@media (max-width: 400px) {
  .a5-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .a5-card { animation: none; opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CloudSafe — Interactive Showcase
   Palette: navy #0c437c · teal #0d9488 · ink #0f172a
   ═══════════════════════════════════════════════════════════════ */

.sc-root {
  --navy:       #0c437c;
  --navy-deep:  #072a52;
  --teal:       #1A80E5;
  --teal-deep:  #1166c0;
  --ink:        #0f172a;
  --ink-2:      #334155;
  --muted:      #64748b;
  --hairline:   #e4e8ee;
  --surface:    #ffffff;
  --surface-2:  #f7f9fc;
  --bg:         #f4f6fa;
  --red:        #dc2626;
  --amber:      #d97706;
  --green:      #1A80E5;

  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  overflow: hidden;
  display: grid;
  grid-template-rows: 64px 1fr 84px;
}

/* ─── Ambient background ───────────────────────────────────── */
.sc-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.sc-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(12, 67, 124, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 67, 124, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
}
.sc-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.32;
}
.sc-bg-glow-teal { width: 560px; height: 560px; top: -160px; right: -160px;
  background: radial-gradient(circle, var(--teal) 0%, transparent 70%); }
.sc-bg-glow-navy { width: 620px; height: 620px; bottom: -200px; left: -200px;
  background: radial-gradient(circle, var(--navy) 0%, transparent 70%); opacity: 0.22; }

/* ─── Top bar ──────────────────────────────────────────────── */
.sc-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.sc-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sc-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.sc-wordmark-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.22);
  animation: sc-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes sc-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.22); }
  50%      { box-shadow: 0 0 0 7px rgba(13, 148, 136, 0); }
}
.sc-topbar-sep {
  color: #cbd5e1;
  font-size: 14px;
}
.sc-topbar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sc-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sc-auto-btn, .sc-exit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}
.sc-auto-btn:hover, .sc-exit:hover {
  background: #fff;
  color: var(--navy);
  border-color: #cfd6e0;
}
.sc-auto-btn.is-on {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.sc-auto-btn svg, .sc-exit svg { font-size: 11px; }

/* ─── Stage ────────────────────────────────────────────────── */
.sc-stage {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}
.sc-stage-inner {
  position: relative;
  min-height: 100%;
  width: 100%;
}

/* Slide transitions */
@keyframes sc-slide-fwd {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sc-slide-back {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sc-slide-fwd  { animation: sc-slide-fwd  0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.sc-slide-back { animation: sc-slide-back 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ─── Footer ───────────────────────────────────────────────── */
.sc-footer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 20px;
  gap: 20px;
  padding: 16px 28px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
}

.sc-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}
.sc-nav-btn:hover:not(:disabled) {
  color: var(--navy);
  border-color: #cfd6e0;
  transform: translateY(-1px);
}
.sc-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.sc-nav-btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: 0 6px 18px -6px rgba(12, 67, 124, 0.55);
}
.sc-nav-btn-primary:hover:not(:disabled) {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #fff;
}
.sc-nav-btn svg { font-size: 10px; }

/* Dots / act selector */
.sc-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.sc-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 9px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}
.sc-dot:hover { background: rgba(15, 23, 42, 0.04); color: var(--ink); }
.sc-dot-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--hairline);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  transition: all 0.2s ease;
}
.sc-dot-label { letter-spacing: 0.01em; }
.sc-dot.is-done .sc-dot-num { background: var(--teal); color: #fff; }
.sc-dot.is-active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.sc-dot.is-active .sc-dot-num { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* ─── Progress bar ─────────────────────────────────────────── */
.sc-progress {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(12, 67, 124, 0.06);
  z-index: 3;
}
.sc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal) 0%, var(--navy) 100%);
  transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .sc-root {
    grid-template-rows: 52px 1fr 60px;
    /* Use dynamic viewport unit where supported so mobile browser chrome
       doesn't cause a vertical overflow and hide the footer */
    height: 100vh;
    height: 100dvh;
  }
  .sc-topbar { padding: 0 14px; }
  .sc-topbar-label { display: none; }
  .sc-wordmark { font-size: 13px; gap: 8px; }
  .sc-auto-btn span, .sc-exit span { display: none; }
  .sc-auto-btn, .sc-exit { padding: 7px 9px; }
  .sc-footer {
    grid-template-columns: auto 1fr auto;
    gap: 6px;
    padding: 10px 12px;
  }
  .sc-nav-btn { padding: 8px 11px; }
  .sc-nav-btn span { display: none; }
  .sc-dots { gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
  .sc-dots::-webkit-scrollbar { display: none; }
  .sc-dot-label { display: none; }
  .sc-dot { padding: 5px; }
  .sc-dot-num { width: 22px; height: 22px; font-size: 11px; }
  .sc-progress { top: 52px; }
}

@media (max-width: 480px) {
  .sc-nav-btn-primary { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-slide-fwd, .sc-slide-back { animation: none; }
  .sc-wordmark-dot { animation: none; }
  .sc-progress-fill { transition: none; }
}

/* ============================================================
   CloudSafe Staff Dashboard — Neural Interface
   Ultra-futuristic dark theme
   Fonts: Syne (UI) + DM Mono (data)
   ============================================================ */

/* ─── Design Tokens ──────────────────────────────────────── */

.cs-dashboard {
  --bg:            #020408;
  --surface:       #070b12;
  --surface-2:     #0b1120;
  --surface-3:     #0f1929;
  --border:        rgba(56, 189, 248, 0.1);
  --border-hover:  rgba(56, 189, 248, 0.35);
  --border-dim:    rgba(255, 255, 255, 0.06);
  --primary:       #38bdf8;
  --primary-dim:   rgba(56, 189, 248, 0.12);
  --primary-glow:  rgba(56, 189, 248, 0.25);
  --accent:        #818cf8;
  --accent-dim:    rgba(129, 140, 248, 0.12);
  --success:       #34d399;
  --success-dim:   rgba(52, 211, 153, 0.12);
  --warning:       #fbbf24;
  --warning-dim:   rgba(251, 191, 36, 0.12);
  --danger:        #f87171;
  --danger-dim:    rgba(248, 113, 113, 0.12);
  --text:          #94a3b8;
  --text-2:        #4b5a6e;
  --text-bright:   #e2e8f0;
  --text-header:   #f0f6ff;
  --mono:          'DM Mono', 'SF Mono', 'Fira Code', monospace;
  --ui:            'Syne', system-ui, sans-serif;

  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(56, 189, 248, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #020408 0%, #030609 100%);
}

/* ─── Header ─────────────────────────────────────────────── */

.cs-header {
  background: rgba(7, 11, 18, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 0 rgba(56, 189, 248, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);
}

.cs-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cs-logo {
  height: 30px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.cs-header-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--primary-dim);
  color: var(--primary);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--mono);
}

.cs-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cs-back-to-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: transparent;
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cs-back-to-account-btn:hover {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 0 12px var(--primary-glow);
}

.cs-back-to-account-btn svg {
  font-size: 0.8rem;
}

@media (max-width: 640px) {
  .cs-back-to-account-btn span { display: none; }
  .cs-back-to-account-btn {
    padding: 0.5rem 0.65rem;
  }
}

.cs-header-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cs-icon-btn {
  background: transparent;
  border: 1px solid var(--border-dim);
  color: var(--text-2);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}

.cs-icon-btn:hover {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 0 12px var(--primary-glow);
}

/* ─── User Menu ──────────────────────────────────────────── */

.cs-user-avatar {
  position: relative;
  cursor: pointer;
  color: var(--text-2);
  font-size: 1.4rem;
  transition: color 0.2s;
}

.cs-user-avatar:hover {
  color: var(--primary);
}

.cs-user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 260px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(56, 189, 248, 0.05);
  z-index: 1001;
  overflow: hidden;
  animation: cs-menu-in 0.15s ease;
}

@keyframes cs-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cs-user-menu-header {
  padding: 1rem 1rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(56, 189, 248, 0.04);
  border-bottom: 1px solid var(--border);
}

.cs-menu-avatar {
  font-size: 1.85rem;
  color: var(--primary);
  filter: drop-shadow(0 0 8px var(--primary-glow));
}

.cs-menu-name {
  font-weight: 700;
  font-size: 0.88rem;
  margin: 0;
  color: var(--text-bright);
  font-family: var(--ui);
}

.cs-menu-role {
  font-size: 0.7rem;
  color: var(--primary);
  margin: 0.15rem 0 0;
  font-family: var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cs-user-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

.cs-menu-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 500;
  transition: all 0.15s;
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.01em;
}

.cs-menu-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-bright);
  padding-left: 1.25rem;
}

.cs-menu-logout {
  color: var(--danger);
}

.cs-menu-logout:hover {
  background: var(--danger-dim);
  color: var(--danger);
}

/* ─── Layout ─────────────────────────────────────────────── */

.cs-layout {
  display: flex;
  min-height: calc(100vh - 58px);
}

/* ─── Sidebar ────────────────────────────────────────────── */

.cs-sidebar {
  width: 232px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: -webkit-sticky;
  position: sticky;
  top: 58px;
  height: calc(100vh - 58px);
  overflow-y: auto;
  flex-shrink: 0;
}

.cs-sidebar::-webkit-scrollbar {
  width: 3px;
}

.cs-sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.cs-nav {
  padding: 1rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cs-nav-group-label {
  padding: 0.85rem 0.75rem 0.3rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
  font-family: var(--mono);
}

.cs-nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 0.15s;
  border: none;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  position: relative;
}

.cs-nav-item:hover {
  background: rgba(56, 189, 248, 0.06);
  color: var(--text-bright);
}

.cs-nav-item.active {
  background: var(--primary-dim);
  color: var(--primary);
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.cs-nav-item.active::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 20%;
  height: 60%;
  width: 2px;
  background: var(--primary);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--primary);
}

.cs-nav-item svg {
  font-size: 0.9rem;
  flex-shrink: 0;
  opacity: 0.7;
}

.cs-nav-item.active svg {
  opacity: 1;
}

.cs-sidebar-footer {
  padding: 1rem;
  border-top: 1px solid var(--border);
}

.cs-version {
  font-size: 0.65rem;
  color: var(--text-2);
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* ─── Content ────────────────────────────────────────────── */

.cs-content {
  flex: 1 1;
  padding: 2rem 2.25rem;
  overflow-y: auto;
  max-width: 1280px;
}

/* ─── Loading ────────────────────────────────────────────── */

.cs-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  gap: 1rem;
  color: var(--text-2);
}

.cs-spinner {
  width: 36px;
  height: 36px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: cs-spin 0.75s linear infinite;
  box-shadow: 0 0 12px var(--primary-glow);
}

@keyframes cs-spin {
  to { transform: rotate(360deg); }
}

/* ─── Welcome Bar ────────────────────────────────────────── */

.cs-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.cs-welcome h1 {
  font-size: 1.55rem;
  font-weight: 800;
  margin: 0 0 0.2rem 0;
  color: var(--text-header);
  letter-spacing: -0.02em;
  font-family: var(--ui);
}

.cs-welcome p {
  margin: 0;
  color: var(--text);
  font-size: 0.85rem;
}

.cs-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--primary);
  color: #020408;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  font-family: var(--ui);
  letter-spacing: 0.02em;
}

.cs-primary-btn:hover {
  background: #7dd3fc;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--primary-glow);
}

.cs-primary-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ─── Stats Grid ─────────────────────────────────────────── */

.cs-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 2rem;
}

.cs-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.cs-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.03) 0%, transparent 60%);
  pointer-events: none;
}

.cs-stat-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(56, 189, 248, 0.1);
}

.cs-stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.cs-stat-icon.buildings {
  background: rgba(56, 189, 248, 0.12);
  color: var(--primary);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.15);
}

.cs-stat-icon.today {
  background: var(--success-dim);
  color: var(--success);
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.15);
}

.cs-stat-icon.total {
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: 0 0 16px rgba(129, 140, 248, 0.15);
}

.cs-stat-icon.properties {
  background: var(--warning-dim);
  color: var(--warning);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.15);
}

.cs-stat-info {
  display: flex;
  flex-direction: column;
}

.cs-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-header);
  line-height: 1;
  font-family: var(--mono);
  letter-spacing: -0.02em;
}

.cs-stat-label {
  font-size: 0.72rem;
  color: var(--text);
  margin-top: 0.3rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-family: var(--mono);
}

/* ─── Sections ───────────────────────────────────────────── */

.cs-section {
  margin-bottom: 2.25rem;
}

.cs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cs-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 1rem 0;
  letter-spacing: 0.01em;
  font-family: var(--ui);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cs-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--primary);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--primary);
}

.cs-section-header .cs-section-title {
  margin-bottom: 0;
}

.cs-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--primary);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s;
  font-family: var(--mono);
  letter-spacing: 0.03em;
}

.cs-view-all:hover {
  color: #7dd3fc;
  text-shadow: 0 0 8px var(--primary-glow);
}

/* ─── Actions Grid ───────────────────────────────────────── */

.cs-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
}

.cs-actions-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.cs-action-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.4rem;
  text-decoration: none;
  transition: all 0.25s ease;
  display: block;
  position: relative;
  overflow: hidden;
}

.cs-action-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.cs-action-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(56, 189, 248, 0.1);
}

.cs-action-card:hover::after {
  opacity: 1;
}

.cs-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.cs-action-icon.code {
  background: var(--primary-dim);
  color: var(--primary);
}

.cs-action-icon.history {
  background: var(--accent-dim);
  color: var(--accent);
}

.cs-action-icon.health {
  background: var(--danger-dim);
  color: var(--danger);
}

.cs-action-icon.metrics {
  background: var(--warning-dim);
  color: var(--warning);
}

.cs-action-card h3 {
  margin: 0 0 0.4rem 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-bright);
  font-family: var(--ui);
}

.cs-action-card p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text);
  line-height: 1.55;
}

/* ─── Activity Table ─────────────────────────────────────── */

.cs-activity-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.cs-activity-table table {
  width: 100%;
  border-collapse: collapse;
}

.cs-activity-table th {
  background: rgba(56, 189, 248, 0.04);
  padding: 0.7rem 1rem;
  text-align: left;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
}

.cs-activity-table td {
  padding: 0.6rem 1rem;
  font-size: 0.78rem;
  color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.15s;
}

.cs-activity-table tr:last-child td {
  border-bottom: none;
}

.cs-activity-table tr:hover td {
  background: rgba(56, 189, 248, 0.03);
}

.cs-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

.cs-badge.module {
  background: var(--primary-dim);
  color: var(--primary);
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.cs-old-value {
  color: var(--danger);
  font-family: var(--mono);
  font-size: 0.73rem;
}

.cs-new-value {
  color: var(--success);
  font-family: var(--mono);
  font-size: 0.73rem;
}

/* ─── Empty State ────────────────────────────────────────── */

.cs-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  gap: 1rem;
}

.cs-empty-state svg {
  font-size: 2.2rem;
  color: var(--text-2);
  opacity: 0.5;
}

.cs-empty-state p {
  color: var(--text);
  font-size: 0.85rem;
  max-width: 380px;
  margin: 0;
  line-height: 1.6;
}

/* ─── Data Integrity ─────────────────────────────────────── */

.cs-integrity-summary {
  display: flex;
  gap: 0.65rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.cs-integrity-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

.cs-integrity-badge.critical {
  background: var(--danger-dim);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.25);
}

.cs-integrity-badge.warning {
  background: var(--warning-dim);
  color: var(--warning);
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.cs-integrity-badge.ok {
  background: var(--success-dim);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.25);
}

.cs-integrity-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cs-integrity-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.78rem;
  transition: all 0.15s;
}

.cs-integrity-item:hover {
  border-color: var(--border-hover);
}

.cs-integrity-item.critical {
  border-color: rgba(248, 113, 113, 0.3);
  color: var(--danger);
  background: var(--danger-dim);
}

.cs-integrity-item.warning {
  border-color: rgba(251, 191, 36, 0.2);
  color: var(--warning);
}

/* ─── Form Elements ──────────────────────────────────────── */

.cs-form-group {
  margin-bottom: 0.75rem;
}

.cs-form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cs-input,
.cs-select {
  width: 100%;
  padding: 0.55rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-bright);
  font-size: 0.85rem;
  font-family: var(--ui);
  outline: none;
  transition: all 0.2s;
}

.cs-input:focus,
.cs-select:focus {
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 0 3px var(--primary-dim), 0 0 12px rgba(56, 189, 248, 0.1);
}

.cs-input::placeholder {
  color: var(--text-2);
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 1200px) {
  .cs-actions-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .cs-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Self-managed floating hamburger for sub-pages (no parent header control) */
.cs-floating-menu-btn {
  display: none;
  position: fixed;
  top: 70px;
  left: 12px;
  z-index: 90;
  background: #238636;
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(35,134,54,0.4);
  transition: background 0.2s;
}

.cs-floating-menu-btn:hover { background: #2ea043; }

/* Mobile hamburger button — hidden on desktop */
.cs-mobile-menu-btn {
  display: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid #30363d;
  color: #e1e4e8;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s;
  flex-shrink: 0;
}

.cs-mobile-menu-btn:hover {
  background: rgba(255,255,255,0.14);
}

/* Mobile sidebar drawer */
.cs-mobile-overlay {
  display: none;
}

.cs-mobile-sidebar {
  display: none;
}

.cs-mobile-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 14px;
  font-size: 15px;
  font-weight: 700;
  color: #f0f6fc;
  border-bottom: 1px solid #30363d;
  flex-shrink: 0;
}

.cs-mobile-sidebar-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid #30363d;
  color: #8b949e;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.cs-mobile-sidebar-close:hover {
  background: rgba(255,255,255,0.12);
  color: #e1e4e8;
}

@media (max-width: 768px) {
  .cs-mobile-menu-btn {
    display: flex;
  }

  .cs-floating-menu-btn {
    display: flex;
  }

  .cs-sidebar {
    display: none;
  }

  .cs-mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 500;
    animation: csFadeIn 0.2s ease;
  }

  .cs-mobile-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    background: #161b22;
    border-right: 1px solid #30363d;
    z-index: 501;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
  }

  .cs-mobile-sidebar.open {
    transform: translateX(0);
  }

  .cs-content {
    padding: 1.25rem;
  }

  .cs-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .cs-actions-grid,
  .cs-actions-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-welcome {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .cs-activity-table {
    overflow-x: auto;
  }

  .cs-header-badge span {
    display: none;
  }
}

@media (max-width: 480px) {
  .cs-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .cs-stat-card {
    padding: 0.875rem;
  }

  .cs-stat-value {
    font-size: 1.25rem;
  }

  .cs-actions-grid,
  .cs-actions-grid-4 {
    grid-template-columns: 1fr;
  }
}

@keyframes csFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 480px) {
  .cs-content {
    padding: 0.85rem;
  }

  .cs-header {
    padding: 0 0.85rem;
  }

  .cs-welcome {
    gap: 0.75rem;
  }

  .cs-stats-grid {
    grid-template-columns: 1fr;
  }

  .cs-stat-card {
    padding: 1rem;
  }
}

/* ============================================================
   Asset Code Tool — Neural Interface
   Inherits CloudStaff design tokens from .cs-dashboard
   ============================================================ */

/* ─── Page Root ──────────────────────────────────────────── */

.act-page {
  --bg:            #020408;
  --surface:       #070b12;
  --surface-2:     #0b1120;
  --surface-3:     #0f1929;
  --border:        rgba(56, 189, 248, 0.1);
  --border-hover:  rgba(56, 189, 248, 0.35);
  --border-dim:    rgba(255, 255, 255, 0.06);
  --primary:       #38bdf8;
  --primary-dim:   rgba(56, 189, 248, 0.12);
  --primary-glow:  rgba(56, 189, 248, 0.25);
  --accent:        #818cf8;
  --accent-dim:    rgba(129, 140, 248, 0.12);
  --success:       #34d399;
  --success-dim:   rgba(52, 211, 153, 0.12);
  --warning:       #fbbf24;
  --warning-dim:   rgba(251, 191, 36, 0.12);
  --danger:        #f87171;
  --danger-dim:    rgba(248, 113, 113, 0.12);
  --text:          #94a3b8;
  --text-2:        #4b5a6e;
  --text-bright:   #e2e8f0;
  --text-header:   #f0f6ff;
  --mono:          'DM Mono', 'SF Mono', 'Fira Code', monospace;
  --ui:            'Syne', system-ui, sans-serif;

  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(56, 189, 248, 0.05) 0%, transparent 60%);
}

/* ─── Content Area ───────────────────────────────────────── */

.act-content {
  flex: 1 1;
  padding: 2rem 2.25rem;
  overflow-y: auto;
  max-width: 1400px;
}

/* ─── Page Header ────────────────────────────────────────── */

.act-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.act-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.act-back-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border-dim);
  color: var(--text-2);
  text-decoration: none;
  transition: all 0.2s;
  flex-shrink: 0;
}

.act-back-btn:hover {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 0 12px var(--primary-glow);
}

.act-header h1 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-header);
  margin: 0 0 0.18rem 0;
  letter-spacing: -0.02em;
  font-family: var(--ui);
}

.act-header p {
  font-size: 0.8rem;
  color: var(--text);
  margin: 0;
}

/* ─── Selection Panel ────────────────────────────────────── */

.act-selection-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 2rem;
}

.act-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s;
}

.act-step:hover:not(.disabled) {
  border-color: var(--border-hover);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.act-step.disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.3);
}

.act-step-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(56, 189, 248, 0.03);
}

.act-step-number {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--mono);
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.act-step-info h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0;
  font-family: var(--ui);
}

.act-step-info h3 svg {
  color: var(--text-2);
  font-size: 0.75rem;
}

.act-step-selected {
  display: inline-block;
  font-size: 0.65rem;
  color: var(--success);
  font-weight: 600;
  margin-top: 0.1rem;
  font-family: var(--mono);
  letter-spacing: 0.03em;
}

.act-step-content {
  max-height: 280px;
  overflow-y: auto;
}

.act-step-content::-webkit-scrollbar {
  width: 3px;
}

.act-step-content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.act-step-loading {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-2);
  font-size: 0.78rem;
  font-family: var(--mono);
}

/* ─── Dropdown List ──────────────────────────────────────── */

.act-dropdown-list {
  padding: 0.35rem;
}

.act-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.15s;
  text-align: left;
  font-family: var(--ui);
}

.act-dropdown-item:hover {
  background: rgba(56, 189, 248, 0.06);
  color: var(--text-bright);
}

.act-dropdown-item.selected {
  background: var(--primary-dim);
  color: var(--primary);
  border: 1px solid rgba(56, 189, 248, 0.15);
}

.act-dropdown-item svg:first-child {
  color: var(--text-2);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.act-dropdown-item.selected svg:first-child {
  color: var(--primary);
}

.act-dropdown-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1;
}

.act-dropdown-item-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.act-dropdown-item-sub {
  font-size: 0.68rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--mono);
}

.act-dropdown-item-count {
  font-size: 0.68rem;
  color: var(--text-2);
  margin-left: auto;
  font-family: var(--mono);
  flex-shrink: 0;
}

.act-check {
  color: var(--success);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.act-no-items {
  padding: 1rem;
  text-align: center;
  color: var(--text-2);
  font-size: 0.75rem;
  font-family: var(--mono);
}

/* ─── Assets Section ─────────────────────────────────────── */

.act-assets-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.act-assets-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--border);
  background: rgba(56, 189, 248, 0.03);
  flex-wrap: wrap;
  gap: 0.65rem;
}

.act-toolbar-left h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0;
  font-family: var(--ui);
}

.act-toolbar-left h2 svg {
  color: var(--text-2);
  font-size: 0.85rem;
}

.act-count {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-2);
  margin-left: 0.4rem;
  font-family: var(--mono);
}

.act-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* ─── Search Box ─────────────────────────────────────────── */

.act-search-box {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 0.7rem;
  transition: all 0.2s;
}

.act-search-box:focus-within {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

.act-search-box svg {
  color: var(--text-2);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.act-search-box input {
  background: none;
  border: none;
  color: var(--text-bright);
  font-size: 0.78rem;
  padding: 0.5rem 0;
  outline: none;
  width: 180px;
  font-family: var(--ui);
}

.act-search-box input::placeholder {
  color: var(--text-2);
}

/* ─── Toolbar Buttons ────────────────────────────────────── */

.act-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: var(--primary-dim);
  color: var(--primary);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--ui);
}

.act-edit-btn:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.2);
  border-color: var(--primary);
  box-shadow: 0 0 16px var(--primary-glow);
}

.act-edit-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.act-toolbar-btns {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.act-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: var(--danger-dim);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--ui);
}

.act-delete-btn:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.2);
  border-color: var(--danger);
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.25);
}

.act-delete-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.act-edit-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* ─── Delete Confirm Modal ───────────────────────────────── */
.act-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 8, 0.75);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.act-modal {
  background: var(--surface);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  padding: 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}

.act-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.act-modal-warn-icon {
  color: var(--danger);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.act-modal-header h3 {
  margin: 0;
  flex: 1 1;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-header);
  font-family: var(--ui);
}

.act-modal-close {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px;
  transition: color 0.12s;
}
.act-modal-close:hover { color: var(--text); }

.act-modal-body {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 20px;
  font-family: var(--ui);
}

.act-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.act-confirm-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--danger-dim);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--ui);
  transition: all 0.12s;
}

.act-confirm-delete-btn:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.2);
  border-color: var(--danger);
}

.act-confirm-delete-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.act-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--ui);
}

.act-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-bright);
  border-color: var(--border-hover);
}

.act-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  background: var(--primary);
  color: #020408;
  border: none;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--ui);
}

.act-save-btn:hover:not(:disabled) {
  background: #7dd3fc;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--primary-glow);
}

.act-save-btn:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

/* ─── Bulk Apply Bar ─────────────────────────────────────── */

.act-bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.15rem;
  background: rgba(56, 189, 248, 0.05);
  border-bottom: 1px solid rgba(56, 189, 248, 0.15);
  flex-wrap: wrap;
}

.act-bulk-bar > svg {
  color: var(--primary);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.act-bulk-bar > span {
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 600;
  font-family: var(--mono);
}

.act-bulk-inputs {
  display: flex;
  gap: 1rem;
  flex: 1 1;
}

.act-bulk-field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1;
}

.act-bulk-field label {
  font-size: 0.7rem;
  color: var(--text-2);
  font-weight: 700;
  white-space: nowrap;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.act-bulk-input-group {
  display: flex;
  flex: 1 1;
  gap: 0;
}

.act-bulk-input-group input {
  flex: 1 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  color: var(--text-bright);
  font-size: 0.78rem;
  padding: 0.42rem 0.6rem;
  outline: none;
  font-family: var(--mono);
  transition: border-color 0.2s;
}

.act-bulk-input-group input:focus {
  border-color: rgba(56, 189, 248, 0.4);
}

.act-bulk-apply {
  background: var(--primary-dim);
  color: var(--primary);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 0 6px 6px 0;
  padding: 0.42rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  font-family: var(--ui);
}

.act-bulk-apply:hover {
  background: rgba(56, 189, 248, 0.22);
  border-color: var(--primary);
}

/* ─── Save Results ───────────────────────────────────────── */

.act-results {
  margin: 0;
  padding: 0.75rem 1.15rem;
  border-bottom: 1px solid var(--border);
}

.act-results.success {
  background: var(--success-dim);
  border-bottom-color: rgba(52, 211, 153, 0.2);
}

.act-results.has-errors {
  background: var(--danger-dim);
  border-bottom-color: rgba(248, 113, 113, 0.2);
}

.act-results-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--ui);
}

.act-results.success .act-results-header {
  color: var(--success);
}

.act-results.has-errors .act-results-header {
  color: var(--warning);
}

.act-results-errors {
  margin-top: 0.5rem;
  padding-left: 1.4rem;
}

.act-error-item {
  font-size: 0.72rem;
  color: var(--danger);
  padding: 0.12rem 0;
  font-family: var(--mono);
}

/* ─── Table ──────────────────────────────────────────────── */

.act-table-container {
  overflow-x: auto;
}

.act-table {
  width: 100%;
  border-collapse: collapse;
}

.act-table thead {
  background: rgba(56, 189, 248, 0.04);
}

.act-table th {
  padding: 0.6rem 1rem;
  text-align: left;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-family: var(--mono);
}

.act-table td {
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  vertical-align: middle;
  transition: background 0.1s;
}

.act-table tr:last-child td {
  border-bottom: none;
}

.act-table tbody tr {
  transition: background 0.12s;
}

.act-table tbody tr:hover {
  background: rgba(56, 189, 248, 0.03);
}

.act-table tbody tr.selected {
  background: rgba(56, 189, 248, 0.06);
}

.act-table tbody tr.editing {
  background: rgba(129, 140, 248, 0.06);
}

.act-th-check,
.act-td-check {
  width: 38px;
  text-align: center;
}

.act-select-all,
.act-check-btn {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.2rem;
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.act-select-all:hover,
.act-check-btn:hover {
  color: var(--primary);
}

.act-table tr.selected .act-check-btn {
  color: var(--primary);
}

.act-td-id {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-2);
  letter-spacing: 0.03em;
}

.act-td-name {
  font-weight: 600;
  color: var(--text-bright);
  font-family: var(--ui);
}

.act-type-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 5px;
  font-size: 0.65rem;
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

.act-status-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--mono);
}

.act-status-badge.pass {
  background: var(--success-dim);
  color: var(--success);
}

.act-status-badge.fail {
  background: var(--danger-dim);
  color: var(--danger);
}

.act-status-badge.pending {
  background: var(--warning-dim);
  color: var(--warning);
}

.act-status-badge.unknown {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text);
}

/* ─── Reference Fields ───────────────────────────────────── */

.act-td-ref {
  min-width: 220px;
}

.act-ref-value {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--success);
  letter-spacing: 0.03em;
}

.act-ref-value.empty {
  color: var(--text-2);
  font-style: italic;
}

.act-edit-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
  color: var(--text-bright);
  font-size: 0.78rem;
  padding: 0.38rem 0.6rem;
  font-family: var(--mono);
  outline: none;
  transition: all 0.2s;
}

.act-edit-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

/* ─── Loading & Empty ────────────────────────────────────── */

.act-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.act-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
  text-align: center;
}

.act-empty svg {
  font-size: 1.8rem;
  color: var(--text-2);
  opacity: 0.5;
}

.act-empty p {
  color: var(--text);
  font-size: 0.82rem;
  margin: 0;
}

/* ─── Selection Prompt ───────────────────────────────────── */

.act-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.act-prompt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(56, 189, 248, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.act-prompt-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: var(--primary-dim);
  border: 1px solid rgba(56, 189, 248, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 32px var(--primary-glow);
}

.act-prompt-icon svg {
  font-size: 1.8rem;
  color: var(--primary);
}

.act-prompt h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-header);
  margin: 0 0 0.5rem 0;
  font-family: var(--ui);
  letter-spacing: -0.01em;
}

.act-prompt p {
  color: var(--text);
  font-size: 0.82rem;
  max-width: 480px;
  margin: 0 0 2rem 0;
  line-height: 1.65;
}

.act-prompt-steps {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: center;
}

.act-prompt-step {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  color: var(--text);
  padding: 0.45rem 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--ui);
}

.act-prompt-step.done {
  color: var(--primary);
  background: var(--primary-dim);
  border-color: rgba(56, 189, 248, 0.25);
}

.act-prompt-step-num {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--border-dim);
  color: var(--text-bright);
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--mono);
}

.act-prompt-step.done .act-prompt-step-num {
  background: rgba(56, 189, 248, 0.2);
  color: var(--primary);
}

.act-prompt-arrow {
  color: var(--text-2);
  font-size: 0.55rem;
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 1024px) {
  .act-selection-panel {
    grid-template-columns: 1fr;
  }

  .act-step-content {
    max-height: 200px;
  }
}

@media (max-width: 768px) {
  .act-content {
    padding: 1.25rem;
  }

  .act-assets-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .act-toolbar-right {
    flex-direction: column;
  }

  .act-search-box input {
    width: 100%;
  }

  .act-bulk-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .act-bulk-inputs {
    flex-direction: column;
  }

  .act-prompt-steps {
    flex-direction: column;
  }

  .act-prompt-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 480px) {
  .act-content {
    padding: 0.85rem;
  }

  .act-header h1 {
    font-size: 1.1rem;
  }

  .act-prompt {
    padding: 2.5rem 1.25rem;
  }
}

/* Asset Code Dictionary — paginated, high-contrast, fills screen. */

.aic-root {
  --aic-ink: #0B1220;
  --aic-ink-2: #1F2937;
  --aic-ink-3: #475569;
  --aic-ink-4: #94A3B8;
  --aic-line: #E5E7EB;
  --aic-line-strong: #CBD5E1;
  --aic-surface: #FFFFFF;
  --aic-surface-2: #F8FAFC;
  --aic-bg: #F1F5F9;
  --aic-primary: #0B5ED7;
  --aic-primary-ink: #0A3F9C;
  --aic-primary-tint: #E8F0FE;
  --aic-danger: #B91C1C;
  --aic-danger-bg: #FEF2F2;
  --aic-amber: #92400E;
  --aic-amber-bg: #FFFBEB;
  --aic-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  color: var(--aic-ink);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 28px 48px;
  box-sizing: border-box;
}

.aic-root code {
  font-family: var(--aic-mono);
  font-size: 0.92em;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--aic-surface-2);
  border: 1px solid var(--aic-line);
  color: var(--aic-ink-2);
}

/* ——— Page header ——— */
.aic-page-header { margin-bottom: 20px; }
.aic-page-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--aic-ink);
}
.aic-page-subtitle {
  margin: 0;
  color: var(--aic-ink-3);
  font-size: 14px;
  line-height: 1.55;
  max-width: 860px;
}

/* ——— Live tester ——— */
.aic-tester {
  padding: 20px 22px;
  border: 1px solid var(--aic-line);
  border-radius: 12px;
  background: var(--aic-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.aic-tester-head { margin-bottom: 12px; }
.aic-tester-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--aic-primary-ink);
}
.aic-tester-kicker svg { width: 12px; height: 12px; }
.aic-tester-help {
  margin-top: 4px;
  color: var(--aic-ink-3);
  font-size: 13px;
  line-height: 1.5;
}

.aic-tester-input {
  -webkit-appearance: none;
          appearance: none;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--aic-line-strong);
  background: var(--aic-surface-2);
  color: var(--aic-ink);
  font-size: 15px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.aic-tester-input:focus {
  outline: none;
  background: var(--aic-surface);
  border-color: var(--aic-primary);
  box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.15);
}

.aic-tester-split {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  grid-gap: 18px;
  gap: 18px;
}

.aic-tester-parse-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aic-ink-4);
  margin-bottom: 6px;
}
.aic-tester-parse-segments {
  line-height: 1.9;
  font-size: 15px;
  color: var(--aic-ink-2);
  word-break: break-word;
}
.aic-parse-seg {
  padding: 2px 4px;
  border-radius: 4px;
}
.aic-parse-seg.is-match {
  background: var(--aic-primary-tint);
  color: var(--aic-primary-ink);
  font-weight: 600;
}
.aic-parse-seg-code {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-family: var(--aic-mono);
  font-size: 9px;
  font-weight: 700;
  background: var(--aic-primary);
  color: #fff;
  border-radius: 4px;
  vertical-align: top;
  top: -0.5em;
  position: relative;
}

.aic-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.aic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--aic-surface-2);
  border: 1px solid var(--aic-line);
  font-size: 12px;
  color: var(--aic-ink-2);
}
.aic-chip-arrow { color: var(--aic-ink-4); }
.aic-chip-code {
  font-family: var(--aic-mono);
  font-weight: 700;
  color: var(--aic-primary-ink);
  letter-spacing: 0.04em;
}

.aic-preview-frame {
  padding: 18px 20px;
  border-radius: 12px;
  background: linear-gradient(180deg, #0F172A 0%, #111827 100%);
  color: #F8FAFC;
  align-self: start;
}
.aic-preview-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #93C5FD;
  margin-bottom: 6px;
}
.aic-preview-id {
  font-family: var(--aic-mono);
  font-size: 22px;
  letter-spacing: 0.08em;
  font-weight: 700;
  word-break: break-all;
}
.aic-preview-hint {
  margin-top: 8px;
  font-size: 11.5px;
  color: #CBD5E1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.aic-preview-hint em {
  font-style: normal;
  color: #F1F5F9;
  font-family: var(--aic-mono);
  font-weight: 600;
}

.aic-tester-warn {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--aic-amber-bg);
  border: 1px solid #FDE68A;
  color: var(--aic-amber);
  font-size: 12.5px;
  line-height: 1.5;
}
.aic-tester-warn strong { color: #78350F; }

/* ——— Token dictionary ——— */
.aic-dict {
  margin-top: 22px;
  padding: 0;
  border: 1px solid var(--aic-line);
  border-radius: 12px;
  background: var(--aic-surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.aic-dict-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--aic-line);
  background: var(--aic-surface-2);
}
.aic-dict-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--aic-ink-4);
}
.aic-dict-title {
  margin: 4px 0 2px;
  font-size: 17px; font-weight: 700; letter-spacing: -0.005em;
  color: var(--aic-ink);
}
.aic-dict-meta { margin: 0; font-size: 12.5px; color: var(--aic-ink-3); }

/* Filter search box */
.aic-dict-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 280px;
}
.aic-dict-search-icon {
  position: absolute;
  left: 11px;
  color: var(--aic-ink-4);
  pointer-events: none;
  width: 12px; height: 12px;
}
.aic-dict-filter {
  -webkit-appearance: none;
          appearance: none;
  width: 100%;
  padding: 9px 32px 9px 30px;
  border: 1px solid var(--aic-line-strong);
  border-radius: 8px;
  background: var(--aic-surface);
  font-size: 13px;
  color: var(--aic-ink);
  transition: border-color .15s, box-shadow .15s;
}
.aic-dict-filter:focus {
  outline: none;
  border-color: var(--aic-primary);
  box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.15);
}
.aic-dict-search-clear {
  position: absolute;
  right: 6px;
  background: transparent;
  border: 0;
  color: var(--aic-ink-4);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
}
.aic-dict-search-clear:hover { color: var(--aic-ink-2); background: var(--aic-bg); }

/* Add-row */
.aic-add-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1.4fr) 120px minmax(0, 1.5fr) auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--aic-line);
  background: #FAFBFD;
}
.aic-add-row-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aic-ink-4);
}

/* Table */
.aic-dict-table { display: flex; flex-direction: column; }
.aic-dict-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 120px minmax(0, 1.5fr) 130px;
  grid-gap: 14px;
  gap: 14px;
  padding: 11px 22px;
  align-items: center;
  border-bottom: 1px solid var(--aic-line);
  transition: background .1s;
}
.aic-dict-row:last-child { border-bottom: 0; }
.aic-dict-row:not(.aic-dict-row-head):hover { background: var(--aic-surface-2); }
.aic-dict-row-head {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--aic-surface);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--aic-ink-4);
  font-weight: 700;
  padding: 10px 22px;
  border-bottom: 1px solid var(--aic-line-strong);
  z-index: 2;
}
.aic-dict-row.is-editing {
  background: var(--aic-primary-tint);
  border-bottom-color: var(--aic-primary);
}

.aic-sort-btn {
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  letter-spacing: inherit;
  text-transform: inherit;
}
.aic-sort-btn:hover { color: var(--aic-ink-2); }

.aic-dict-term { font-size: 14px; color: var(--aic-ink); font-weight: 500; }
.aic-dict-notes { font-size: 13px; color: var(--aic-ink-3); }
.aic-muted { font-style: normal; color: var(--aic-ink-4); }

.aic-code-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--aic-ink);
  color: #93C5FD;
  font-family: var(--aic-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.aic-dict-actions-col {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.aic-dict-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--aic-ink-4);
  font-size: 13.5px;
}

/* Pagination */
.aic-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  background: var(--aic-surface-2);
  border-top: 1px solid var(--aic-line);
  font-size: 13px;
  color: var(--aic-ink-3);
  flex-wrap: wrap;
}
.aic-pager-info strong { color: var(--aic-ink); font-weight: 600; }
.aic-pager-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.aic-pager-btn {
  -webkit-appearance: none;
          appearance: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--aic-line-strong);
  background: var(--aic-surface);
  color: var(--aic-ink-2);
  border-radius: 7px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.aic-pager-btn:hover:not(:disabled) {
  background: var(--aic-primary-tint);
  color: var(--aic-primary-ink);
  border-color: var(--aic-primary);
}
.aic-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.aic-pager-btn svg { width: 11px; height: 11px; }
.aic-pager-page {
  padding: 0 10px;
  color: var(--aic-ink-2);
  font-weight: 500;
}
.aic-pager-size {
  display: flex; align-items: center; gap: 8px;
}
.aic-pager-size label {
  font-size: 12.5px;
  color: var(--aic-ink-3);
}
.aic-pager-size select {
  -webkit-appearance: none;
          appearance: none;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--aic-line-strong);
  background: var(--aic-surface) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27%3E%3Cpath fill=%27%2364748B%27 d=%27M0 0l5 6 5-6z%27/%3E%3C/svg%3E") no-repeat right 10px center;
  border-radius: 7px;
  font-size: 13px;
  color: var(--aic-ink-2);
  cursor: pointer;
}
.aic-pager-size select:focus {
  outline: none;
  border-color: var(--aic-primary);
  box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.15);
}

/* ——— Buttons ——— */
.aic-btn {
  -webkit-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  font-family: inherit;
}
.aic-btn svg { width: 11px; height: 11px; }
.aic-btn-sm { padding: 6px 10px; font-size: 12px; }

.aic-btn-primary { background: var(--aic-primary); color: #fff; }
.aic-btn-primary:hover { background: var(--aic-primary-ink); }
.aic-btn-primary:disabled { opacity: .6; cursor: wait; }

.aic-btn-ghost { background: var(--aic-surface); color: var(--aic-ink-2); border-color: var(--aic-line-strong); }
.aic-btn-ghost:hover { color: var(--aic-ink); border-color: var(--aic-ink-4); background: var(--aic-surface-2); }

.aic-btn-muted { background: var(--aic-surface); color: var(--aic-ink-3); border-color: var(--aic-line-strong); }
.aic-btn-muted:hover { color: var(--aic-danger); border-color: #FCA5A5; background: var(--aic-danger-bg); }

/* Inputs */
.aic-input {
  -webkit-appearance: none;
          appearance: none;
  width: 100%; box-sizing: border-box;
  padding: 8px 11px;
  border: 1px solid var(--aic-line-strong);
  border-radius: 7px;
  font-size: 13px;
  background: var(--aic-surface);
  color: var(--aic-ink);
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.aic-input:focus {
  outline: none;
  border-color: var(--aic-primary);
  box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.15);
}
.aic-input-mono { font-family: var(--aic-mono); letter-spacing: 0.04em; text-align: center; }
.aic-input-code { max-width: 120px; }

/* Responsive */
@media (max-width: 1024px) {
  .aic-tester-split { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .aic-root { padding: 18px 16px 36px; }
  .aic-dict-head { flex-direction: column; align-items: stretch; }
  .aic-dict-search { min-width: 0; width: 100%; }
  .aic-add-row {
    grid-template-columns: 1fr 1fr;
    padding: 14px 16px;
  }
  .aic-add-row-label { grid-column: 1 / -1; }
  .aic-dict-row {
    grid-template-columns: 1fr 1fr;
    padding: 12px 16px;
  }
  .aic-dict-row-head { display: none; }
  .aic-dict-actions-col { grid-column: 1 / -1; justify-content: flex-start; }
  .aic-pager { padding: 10px 16px; justify-content: center; }
  .aic-pager-info, .aic-pager-size { flex: 1 1 100%; text-align: center; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   Asset Generation Tool — Hydrajaws Tag ID Generator
   Uses CloudStaff dashboard design tokens (cs-dashboard vars)
   ═══════════════════════════════════════════════════════════════ */

/* ── Page Header ─────────────────────────────────────────────── */
.agt-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.agt-page-header h1 {
  color: var(--text-header);
  font-family: var(--ui);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.agt-page-header p {
  color: var(--text);
  font-size: 0.85rem;
  margin: 4px 0 0;
}
.agt-building-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  color: var(--text-bright);
  font-size: 0.8rem;
  font-weight: 600;
}
.agt-building-badge code {
  background: var(--primary-dim);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.75rem;
}

/* ── Step Indicator Bar ──────────────────────────────────────── */
.agt-steps-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.agt-step-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-dim);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--ui);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.agt-step-pill:disabled { opacity: 0.4; cursor: not-allowed; }
.agt-step-pill.active { color: var(--text); border-color: var(--border); }
.agt-step-pill.current {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: var(--primary);
}
.agt-step-arrow { color: var(--text-2); font-size: 10px; flex-shrink: 0; }

/* ── Panel ───────────────────────────────────────────────────── */
.agt-panel {
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 16px;
  padding: 24px;
}
.agt-panel-title {
  color: var(--text-header);
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--ui);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.agt-panel-title svg { color: var(--primary); }
.agt-panel-sub {
  color: var(--text);
  font-size: 0.8rem;
  margin: -8px 0 20px;
  line-height: 1.5;
}
.agt-panel-sub code {
  background: var(--surface-3);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--primary);
}
.agt-loading {
  padding: 40px;
  text-align: center;
  color: var(--text-2);
}
.agt-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-2);
  font-size: 0.85rem;
}

/* ── Search Bar ──────────────────────────────────────────────── */
.agt-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 16px;
}
.agt-search-bar svg { color: var(--text-2); flex-shrink: 0; }
.agt-search-bar input {
  flex: 1 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-bright);
  font-size: 0.85rem;
  font-family: var(--ui);
}

/* ── Building Grid ───────────────────────────────────────────── */
.agt-building-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  max-height: 500px;
  overflow-y: auto;
}
.agt-building-card {
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  font-family: var(--ui);
}
.agt-building-card:hover {
  border-color: var(--primary);
  background: var(--surface-3);
}
.agt-building-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--text-2);
  font-size: 0.75rem;
}
.agt-building-card-top svg { color: var(--primary); font-size: 1rem; }
.agt-building-id { font-family: var(--mono); }
.agt-building-card h3 {
  color: var(--text-bright);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.3;
}
.agt-building-card p {
  color: var(--text-2);
  font-size: 0.75rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Section Grid ────────────────────────────────────────────── */
.agt-property-code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.agt-property-code-row label {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}
.agt-code-input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--primary);
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
  width: 120px;
  text-align: center;
  text-transform: uppercase;
}
.agt-code-input:focus { border-color: var(--primary); outline: none; }
.agt-code-hint {
  color: var(--text-2);
  font-size: 0.72rem;
}
.agt-code-hint code {
  background: var(--surface-3);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  color: var(--text);
}
.agt-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.agt-section-card {
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  font-family: var(--ui);
}
.agt-section-card:hover {
  border-color: var(--primary);
  background: var(--surface-3);
}
.agt-section-card svg { color: var(--primary); font-size: 1.2rem; margin-bottom: 8px; }
.agt-section-card h3 {
  color: var(--text-bright);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 4px;
}
.agt-section-card p {
  color: var(--text-2);
  font-size: 0.75rem;
  margin: 0;
}

/* ── Asset Config Rows ───────────────────────────────────────── */
.agt-configs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.agt-config-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  padding: 14px 16px;
  flex-wrap: wrap;
}
.agt-config-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.agt-config-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1;
  min-width: 140px;
}
.agt-config-field-sm { flex: 0.7 1; min-width: 110px; }
.agt-config-field-qty { flex: 0 1; min-width: 120px; }
.agt-config-field label {
  color: var(--text-2);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.agt-config-field select,
.agt-config-field input {
  background: var(--surface-3);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text-bright);
  font-size: 0.8rem;
  font-family: var(--ui);
}
.agt-config-field select:focus,
.agt-config-field input:focus {
  border-color: var(--primary);
  outline: none;
}
.agt-config-field select option {
  background: var(--surface-2);
  color: var(--text-bright);
}
.agt-qty-ctrl {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  overflow: hidden;
}
.agt-qty-ctrl button {
  background: var(--surface-3);
  border: none;
  color: var(--text);
  padding: 8px 10px;
  cursor: pointer;
  font-size: 10px;
}
.agt-qty-ctrl button:hover { background: var(--primary-dim); color: var(--primary); }
.agt-qty-ctrl input {
  width: 44px;
  text-align: center;
  background: var(--surface);
  border: none;
  border-left: 1px solid var(--border-dim);
  border-right: 1px solid var(--border-dim);
  border-radius: 0;
  padding: 8px 4px;
  color: var(--text-bright);
  font-size: 0.85rem;
  font-family: var(--mono);
  font-weight: 600;
}
.agt-qty-ctrl input:focus { outline: none; }
.agt-config-remove {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  padding: 8px;
  font-size: 14px;
  border-radius: 6px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.agt-config-remove:hover { background: var(--danger-dim); }

/* ── Config Actions ──────────────────────────────────────────── */
.agt-config-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.agt-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--surface-3);
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--ui);
  cursor: pointer;
  transition: all 0.2s;
}
.agt-add-btn:hover { border-color: var(--primary); color: var(--primary); }
.agt-config-summary {
  color: var(--text-2);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.agt-dot { color: var(--border); }
.agt-preview-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: var(--primary);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--ui);
  cursor: pointer;
  transition: all 0.2s;
}
.agt-preview-btn:hover { filter: brightness(1.1); }
.agt-preview-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Preview Table ───────────────────────────────────────────── */
.agt-format-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--primary-dim);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
  color: var(--text);
  font-size: 0.78rem;
}
.agt-format-info svg { color: var(--primary); flex-shrink: 0; }
.agt-format-info code {
  font-family: var(--mono);
  color: var(--primary);
  font-weight: 600;
}
.agt-collision-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--danger-dim);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 10px;
  margin-bottom: 12px;
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: 500;
}
.agt-collision-alert svg { flex-shrink: 0; }
.agt-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  margin-bottom: 16px;
  max-height: 500px;
  overflow-y: auto;
}
.agt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.agt-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}
.agt-table th {
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-dim);
  white-space: nowrap;
}
.agt-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: var(--text-bright);
  white-space: nowrap;
}
.agt-table tbody tr:hover { background: rgba(56,189,248,0.03); }
.agt-td-num {
  font-family: var(--mono);
  color: var(--text-2);
  font-size: 0.75rem;
}
.agt-td-tag code {
  background: var(--primary-dim);
  color: var(--primary);
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
}
.agt-badge {
  background: var(--accent-dim);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--mono);
}
.agt-row-collision { background: rgba(248,113,113,0.06) !important; }
.agt-row-collision .agt-td-tag code {
  background: var(--danger-dim);
  color: var(--danger);
}

/* ── Export Bar ───────────────────────────────────────────────── */
.agt-export-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.agt-export-actions {
  display: flex;
  gap: 10px;
}
.agt-back-btn {
  background: var(--surface-2);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  padding: 10px 18px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--ui);
  cursor: pointer;
  transition: all 0.2s;
}
.agt-back-btn:hover { border-color: var(--border-hover); }
.agt-csv-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--success-dim);
  border: 1px solid rgba(52,211,153,0.3);
  border-radius: 10px;
  color: var(--success);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--ui);
  cursor: pointer;
  transition: all 0.2s;
}
.agt-csv-btn:hover { background: var(--success); color: #fff; }
.agt-import-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--primary);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--ui);
  cursor: pointer;
  transition: all 0.2s;
}
.agt-import-btn:hover { filter: brightness(1.1); }
.agt-import-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .agt-page-header { flex-direction: column; }
  .agt-page-header h1 { font-size: 1.15rem; }
  .agt-building-grid { grid-template-columns: 1fr; }
  .agt-section-grid { grid-template-columns: 1fr; }
  .agt-config-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .agt-config-field { min-width: 0; min-width: initial; }
  .agt-config-field-sm { flex: 1 1; }
  .agt-config-field-qty { flex: 1 1; min-width: 0; min-width: initial; }
  .agt-config-num { align-self: flex-start; }
  .agt-config-remove { align-self: flex-end; margin-top: -32px; }
  .agt-config-actions { flex-direction: column; align-items: stretch; }
  .agt-preview-btn { margin-left: 0; justify-content: center; }
  .agt-export-bar { flex-direction: column; }
  .agt-export-actions { flex-direction: column; width: 100%; }
  .agt-csv-btn, .agt-import-btn, .agt-back-btn { justify-content: center; width: 100%; }
  .agt-property-code-row { flex-direction: column; align-items: flex-start; }
  .agt-steps-bar { gap: 4px; }
  .agt-step-pill span { display: none; }
  .agt-panel { padding: 16px; border-radius: 12px; }
  .agt-table-wrap { font-size: 0.72rem; }
  .agt-format-info { font-size: 0.7rem; flex-wrap: wrap; }
  .agt-collision-alert { font-size: 0.72rem; }
  .agt-building-badge { font-size: 0.72rem; padding: 6px 10px; }
}

/* ================================================================
   Asset Generation V2 — dark neural-interface theme
   CSS variables inherited from .cs-dashboard root
   ================================================================ */

.agv2-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
}

.agv2-header-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-dim);
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 0 16px var(--primary-glow);
}

.agv2-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-header);
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.02em;
  font-family: var(--ui);
}

.agv2-subtitle {
  font-size: 0.875rem;
  color: var(--text);
  margin: 0;
  max-width: 600px;
  font-family: var(--mono);
}

/* ── Search bar ───────────────────────────────────────────────── */
.agv2-search-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.agv2-search-bar:focus-within {
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

.agv2-search-icon {
  color: var(--text-2);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.agv2-search-input {
  flex: 1 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.9375rem;
  color: var(--text-bright);
  font-family: var(--ui);
}

.agv2-search-input::placeholder {
  color: var(--text-2);
}

/* ── Property grid ────────────────────────────────────────────── */
.agv2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.agv2-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.agv2-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56,189,248,0.03) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.agv2-card:hover {
  border-color: var(--border-hover);
  background: var(--surface-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px var(--border-hover);
}

.agv2-card:hover::before {
  opacity: 1;
}

.agv2-card-icon {
  width: 40px;
  height: 40px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1rem;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.agv2-card:hover .agv2-card-icon {
  background: var(--primary-dim);
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 0 12px var(--primary-glow);
}

.agv2-card-body {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.agv2-card-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--ui);
  transition: color 0.15s;
}

.agv2-card:hover .agv2-card-name {
  color: var(--text-header);
}

.agv2-card-code {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-dim);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  width: -webkit-fit-content;
  width: fit-content;
  font-family: var(--mono);
}

.agv2-card-address {
  font-size: 0.8rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--mono);
}

.agv2-card-arrow {
  color: var(--text-2);
  font-size: 0.875rem;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}

.agv2-card:hover .agv2-card-arrow {
  color: var(--primary);
  transform: translateX(4px);
}

/* ── States ───────────────────────────────────────────────────── */
.agv2-loading,
.agv2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 2rem;
  color: var(--text-2);
  font-family: var(--mono);
}

.agv2-empty-icon {
  font-size: 2.5rem;
  color: var(--border-hover);
  opacity: 0.5;
}

/* ================================================================
   Asset Generation — Property Sessions Page
   CSS variables inherited from .cs-dashboard root
   ================================================================ */

/* ── Top bar ──────────────────────────────────────────────────── */
.agpp-topbar {
  margin-bottom: 20px;
}

.agpp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: var(--ui);
  transition: all 0.15s;
  letter-spacing: 0.02em;
}

.agpp-back-btn:hover {
  border-color: var(--border-hover);
  color: var(--primary);
  background: var(--primary-dim);
}

/* ── Property header ──────────────────────────────────────────── */
.agpp-property-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.agpp-property-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--primary-dim);
  border: 1px solid var(--border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 0 16px var(--primary-glow);
}

.agpp-property-info {
  flex: 1 1;
  min-width: 0;
}

.agpp-property-name {
  margin: 0 0 3px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-header);
  letter-spacing: -0.02em;
  font-family: var(--ui);
}

.agpp-property-address {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-2);
  font-family: var(--mono);
}

/* ── New session button ───────────────────────────────────────── */
.agpp-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: #000;
  border: none;
  border-radius: 9px;
  padding: 10px 20px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--ui);
  letter-spacing: 0.02em;
  transition: all 0.15s;
  box-shadow: 0 0 16px var(--primary-glow);
  flex-shrink: 0;
}

.agpp-new-btn:hover {
  background: #7dd3fc;
  box-shadow: 0 0 24px var(--primary-glow);
  transform: translateY(-1px);
}

/* ── Stats strip ──────────────────────────────────────────────── */
.agpp-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.agpp-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 110px;
  position: relative;
  overflow: hidden;
}

.agpp-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56,189,248,0.03) 0%, transparent 60%);
  pointer-events: none;
}

.agpp-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-header);
  letter-spacing: -0.03em;
  line-height: 1;
  font-family: var(--ui);
}

.agpp-stat-value.agpp-stat-draft    { color: var(--warning); }
.agpp-stat-value.agpp-stat-confirmed { color: var(--success); }

.agpp-stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: var(--mono);
}

/* ── Session sections ─────────────────────────────────────────── */
.agpp-sessions {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.agpp-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--mono);
}

.agpp-section-icon { font-size: 0.75rem; }
.agpp-section-icon-draft     { color: var(--warning); }
.agpp-section-icon-confirmed { color: var(--success); }

.agpp-section-count {
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.62rem;
  padding: 1px 7px;
  border-radius: 99px;
  border: 1px solid var(--border-dim);
}

/* ── Session rows ─────────────────────────────────────────────── */
.agpp-session-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.agpp-session-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-dim);
  transition: background 0.1s;
}

.agpp-session-row:last-child { border-bottom: none; }
.agpp-session-row:hover { background: var(--primary-dim); }

.agpp-session-mod {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.agpp-session-info {
  flex: 1 1;
  min-width: 0;
}

.agpp-session-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-bright);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.agpp-session-level {
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-2);
  padding: 1px 8px;
  border-radius: 99px;
  border: 1px solid var(--border-dim);
  font-family: var(--mono);
}

.agpp-session-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.agpp-session-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  font-family: var(--mono);
  letter-spacing: 0.03em;
}

.agpp-session-status.draft {
  background: var(--warning-dim);
  color: var(--warning);
  border: 1px solid rgba(251,191,36,0.2);
}

.agpp-session-status.confirmed {
  background: var(--success-dim);
  color: var(--success);
  border: 1px solid rgba(52,211,153,0.2);
}

.agpp-session-pins,
.agpp-session-date,
.agpp-session-author {
  font-size: 0.72rem;
  color: var(--text-2);
  font-family: var(--mono);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Row actions ──────────────────────────────────────────────── */
.agpp-session-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.agpp-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ui);
  background: var(--surface-2);
  color: var(--text);
  transition: all 0.12s;
}

.agpp-action-btn span { font-size: 0.75rem; }

.agpp-action-edit:hover,
.agpp-action-view:hover {
  border-color: var(--border-hover);
  color: var(--primary);
  background: var(--primary-dim);
}

.agpp-action-delete {
  padding: 6px 10px;
  color: var(--text-2);
}

.agpp-action-delete:hover {
  border-color: rgba(248,113,113,0.4);
  color: var(--danger);
  background: var(--danger-dim);
}

/* ── Loading / empty ──────────────────────────────────────────── */
.agpp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 64px 24px;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.875rem;
}

.agpp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border-hover);
  border-radius: 14px;
}

.agpp-empty-icon {
  font-size: 2.4rem;
  color: var(--border-hover);
  opacity: 0.6;
}

.agpp-empty h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-bright);
  font-family: var(--ui);
}

.agpp-empty p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-2);
  max-width: 400px;
  line-height: 1.6;
  font-family: var(--mono);
}

/* ── Modals ───────────────────────────────────────────────────── */
.agpp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 8, 0.75);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.agpp-modal {
  background: var(--surface);
  border: 1px solid var(--border-hover);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px var(--border-hover);
}

.agpp-modal-sm { max-width: 400px; }

.agpp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.agpp-modal-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-header);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
}

.agpp-warn-icon { color: var(--danger); }

.agpp-modal-close {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 4px;
  transition: color 0.12s;
}
.agpp-modal-close:hover { color: var(--text); }

.agpp-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agpp-modal-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agpp-modal-field label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--mono);
}

.agpp-optional {
  font-weight: 400;
  color: var(--text-2);
  text-transform: none;
  letter-spacing: 0;
}

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

.agpp-module-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  transition: all 0.12s;
}

.agpp-module-option:hover {
  border-color: var(--border-hover);
  color: var(--text-bright);
}

.agpp-module-option.selected {
  color: var(--text-bright);
}

.agpp-module-option svg { font-size: 1.1rem; }

.agpp-modal-input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.875rem;
  color: var(--text-bright);
  font-family: var(--ui);
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.agpp-modal-input::placeholder { color: var(--text-2); }
.agpp-modal-input:focus { border-color: var(--border-hover); }

.agpp-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.agpp-btn-secondary {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ui);
  transition: all 0.12s;
}
.agpp-btn-secondary:hover { border-color: var(--border-hover); color: var(--text-bright); }

.agpp-btn-primary {
  background: var(--primary);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--ui);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.12s;
  box-shadow: 0 0 12px var(--primary-glow);
}
.agpp-btn-primary:hover { background: #7dd3fc; }
.agpp-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.agpp-btn-danger {
  background: var(--danger-dim);
  border: 1px solid rgba(248,113,113,0.3);
  color: var(--danger);
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--ui);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.12s;
}
.agpp-btn-danger:hover { background: rgba(248,113,113,0.2); }
.agpp-btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }

.agpp-delete-msg {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.6;
  font-family: var(--ui);
}

.agpp-delete-msg strong { color: var(--text-bright); }

/* ── Multi-select ── */
.agpp-select-cb {
  background: none;
  border: none;
  padding: 0 8px 0 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #334155;
  font-size: 1.05rem;
  transition: color 0.12s;
}
.agpp-select-cb:hover { color: #38bdf8; color: var(--primary, #38bdf8); }
.agpp-cb-checked { color: #38bdf8; color: var(--primary, #38bdf8); }
.agpp-cb-empty  { color: #334155; }

.agpp-session-row.agpp-selected {
  background: rgba(56,189,248,0.07);
  border-color: rgba(56,189,248,0.3);
}

.agpp-select-all-btn {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(56,189,248,0.25);
  border-radius: 6px;
  color: #38bdf8;
  color: var(--primary, #38bdf8);
  font-size: 0.72rem;
  padding: 3px 10px;
  cursor: pointer;
  font-family: var(--ui);
  transition: background 0.12s;
}
.agpp-select-all-btn:hover { background: rgba(56,189,248,0.08); }

/* Floating bulk bar */
.agpp-bulk-bar {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0f1923;
  border: 1px solid rgba(56,189,248,0.3);
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: agpp-bar-up 0.18s ease;
}
@keyframes agpp-bar-up {
  from { transform: translateX(-50%) translateY(16px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}
.agpp-bulk-count {
  font-size: 0.82rem;
  color: #94a3b8;
  font-family: var(--ui);
  white-space: nowrap;
}
.agpp-bulk-btn {
  border: none;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  transition: all 0.12s;
}
.agpp-bulk-delete {
  background: rgba(248,113,113,0.15);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.3);
}
.agpp-bulk-delete:hover { background: rgba(248,113,113,0.25); }
.agpp-bulk-cancel {
  background: rgba(148,163,184,0.08);
  color: #94a3b8;
  border: 1px solid rgba(148,163,184,0.15);
}
.agpp-bulk-cancel:hover { background: rgba(148,163,184,0.15); }

/* ================================================================
   User Activity Page — dark neural-interface theme
   Inherits CloudStaff design tokens via .uap-shell
   Fonts: Syne (UI) + DM Mono (data)
   ================================================================ */

.uap-shell {
  --bg:            #020408;
  --surface:       #070b12;
  --surface-2:     #0b1120;
  --surface-3:     #0f1929;
  --border:        rgba(56, 189, 248, 0.1);
  --border-hover:  rgba(56, 189, 248, 0.35);
  --border-dim:    rgba(255, 255, 255, 0.06);
  --primary:       #38bdf8;
  --primary-dim:   rgba(56, 189, 248, 0.12);
  --primary-glow:  rgba(56, 189, 248, 0.25);
  --accent:        #818cf8;
  --accent-dim:    rgba(129, 140, 248, 0.12);
  --success:       #34d399;
  --success-dim:   rgba(52, 211, 153, 0.12);
  --warning:       #fbbf24;
  --warning-dim:   rgba(251, 191, 36, 0.12);
  --danger:        #f87171;
  --danger-dim:    rgba(248, 113, 113, 0.12);
  --text:          #94a3b8;
  --text-2:        #4b5a6e;
  --text-bright:   #e2e8f0;
  --text-header:   #f0f6ff;
  --mono:          'DM Mono', 'SF Mono', 'Fira Code', monospace;
  --ui:            'Syne', system-ui, sans-serif;

  display: flex;
  min-height: 100vh;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(56, 189, 248, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, #020408 0%, #030609 100%);
  color: var(--text);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}

.uap-main {
  flex: 1 1;
  min-width: 0;
  padding: 28px 32px 48px;
  overflow-y: auto;
}

/* ── Header ───────────────────────────────────────────────────── */
.uap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.uap-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.uap-header-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-dim);
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 0 16px var(--primary-glow);
}

.uap-title {
  margin: 0 0 3px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-header);
  letter-spacing: -0.02em;
  font-family: var(--ui);
}

.uap-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text);
  font-family: var(--mono);
}

.uap-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.uap-last-refresh {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--text-2);
  font-family: var(--mono);
}

.uap-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: var(--ui);
  transition: all 0.15s;
  letter-spacing: 0.03em;
}

.uap-refresh-btn:hover {
  border-color: var(--border-hover);
  color: var(--primary);
  background: var(--primary-dim);
  box-shadow: 0 0 12px var(--primary-glow);
}

.uap-refresh-btn.spinning svg {
  animation: uapSpin 0.8s linear infinite;
}

@keyframes uapSpin {
  to { transform: rotate(360deg); }
}

/* ── Stat cards ───────────────────────────────────────────────── */
.uap-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 24px;
}

.uap-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.uap-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56,189,248,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.uap-stat-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px var(--border-hover);
}

.uap-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-dim);
}

.uap-stat-online .uap-stat-icon {
  background: var(--success-dim);
  color: var(--success);
  border-color: rgba(52, 211, 153, 0.25);
  animation: uapPulse 2s ease infinite;
}

@keyframes uapPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
}

.uap-stat-icon-blue   { background: var(--primary-dim);  color: var(--primary);  border-color: rgba(56,189,248,0.25); }
.uap-stat-icon-purple { background: var(--accent-dim);   color: var(--accent);   border-color: rgba(129,140,248,0.25); }
.uap-stat-icon-amber  { background: var(--warning-dim);  color: var(--warning);  border-color: rgba(251,191,36,0.25); }
.uap-stat-icon-teal   { background: var(--success-dim);  color: var(--success);  border-color: rgba(52,211,153,0.25); }

.uap-stat-value {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--text-header);
  letter-spacing: -0.03em;
  line-height: 1;
  font-family: var(--ui);
}

.uap-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-top: 5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.uap-stat-sub {
  font-size: 0.68rem;
  color: var(--text-2);
  margin-top: 2px;
  font-family: var(--mono);
}

/* ── Main content layout ──────────────────────────────────────── */
.uap-content {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}

/* ── Main panel ───────────────────────────────────────────────── */
.uap-panel-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.uap-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(7,11,18,0.6);
}

/* ── Tabs ─────────────────────────────────────────────────────── */
.uap-tabs {
  display: flex;
  gap: 4px;
}

.uap-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid transparent;
  background: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: var(--ui);
  transition: all 0.12s;
  letter-spacing: 0.02em;
}

.uap-tab:hover {
  background: var(--surface-2);
  color: var(--text-bright);
  border-color: var(--border);
}

.uap-tab.active {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: rgba(56, 189, 248, 0.3);
}

.uap-tab-count {
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  font-family: var(--mono);
}

.uap-tab.active .uap-tab-count {
  background: rgba(56, 189, 248, 0.2);
  color: var(--primary);
}

/* ── Search ───────────────────────────────────────────────────── */
.uap-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  transition: border-color 0.15s;
}

.uap-search:focus-within {
  border-color: var(--border-hover);
}

.uap-search-icon {
  color: var(--text-2);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.uap-search-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.8125rem;
  color: var(--text-bright);
  font-family: var(--ui);
  width: 180px;
}

.uap-search-input::placeholder { color: var(--text-2); }

.uap-search-clear {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 2px;
  display: flex;
  transition: color 0.12s;
}

.uap-search-clear:hover { color: var(--text); }

/* ── Table ────────────────────────────────────────────────────── */
.uap-table-wrap {
  overflow-x: auto;
}

.uap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.uap-table thead tr {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.uap-table th {
  padding: 10px 14px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: left;
  white-space: nowrap;
  font-family: var(--mono);
}

.uap-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-dim);
  color: var(--text);
  vertical-align: middle;
}

.uap-table tbody tr:last-child td { border-bottom: none; }

.uap-table tbody tr:hover td {
  background: var(--primary-dim);
  color: var(--text-bright);
}

.uap-row-online td {
  background: rgba(52, 211, 153, 0.04) !important;
}

.uap-row-online:hover td {
  background: rgba(52, 211, 153, 0.08) !important;
}

/* ── User cell ────────────────────────────────────────────────── */
.uap-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.uap-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  opacity: 0.9;
}

.uap-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  background: var(--success);
  border: 2px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--success);
}

.uap-user-name {
  font-weight: 600;
  color: var(--text-bright);
  font-size: 0.8125rem;
}

.uap-user-email {
  font-size: 0.7rem;
  color: var(--text-2);
  font-family: var(--mono);
}

.uap-role-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--mono);
}

.uap-cell-muted { color: var(--text-2); font-size: 0.78rem; font-family: var(--mono); }
.uap-cell-mono  { font-family: var(--mono); font-size: 0.75rem; }
.uap-cell-center { text-align: center; }

.uap-active-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-2);
  font-family: var(--mono);
}

.uap-active-tag.online {
  color: var(--success);
  font-weight: 600;
}

.uap-ip-cell {
  display: flex;
  align-items: center;
  gap: 5px;
}

.uap-device-icon {
  color: var(--text-2);
  font-size: 0.75rem;
}

.uap-location-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--text);
}

.uap-flag { font-size: 1rem; }

.uap-login-count {
  display: inline-block;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  font-family: var(--mono);
}

/* ── Activity feed ────────────────────────────────────────────── */
.uap-feed {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  max-height: 600px;
  overflow-y: auto;
}

.uap-feed::-webkit-scrollbar { width: 4px; }
.uap-feed::-webkit-scrollbar-track { background: transparent; }
.uap-feed::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.uap-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-dim);
  transition: background 0.1s;
}

.uap-feed-item:last-child { border-bottom: none; }
.uap-feed-item:hover { background: var(--primary-dim); }

.uap-feed-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.9;
}

.uap-feed-body { flex: 1 1; min-width: 0; }

.uap-feed-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.uap-feed-name {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-bright);
}

.uap-feed-email {
  font-size: 0.72rem;
  color: var(--text-2);
  font-family: var(--mono);
}

.uap-feed-event {
  font-size: 0.68rem;
  color: var(--success);
  font-weight: 700;
  background: var(--success-dim);
  padding: 1px 7px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--mono);
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.uap-feed-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 0.72rem;
  color: var(--text-2);
  flex-wrap: wrap;
  font-family: var(--mono);
}

.uap-feed-meta-icon { font-size: 0.65rem; }
.uap-feed-dot { color: var(--border-dim); }

/* ── Side panel ───────────────────────────────────────────────── */
.uap-panel-side {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.uap-side-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-2);
  font-family: var(--mono);
}

.uap-side-header-mt {
  border-top: 1px solid var(--border);
}

.uap-side-header-icon {
  color: var(--primary);
  font-size: 0.8rem;
}

/* ── Location breakdown ───────────────────────────────────────── */
.uap-locations {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

.uap-location-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  padding: 7px 16px;
  transition: background 0.1s;
}

.uap-location-row:hover { background: var(--primary-dim); }

.uap-location-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 120px;
}

.uap-location-flag { font-size: 1rem; }

.uap-location-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

.uap-location-bar-wrap {
  flex: 1 1;
  height: 4px;
  background: var(--surface-3);
  border-radius: 99px;
  overflow: hidden;
}

.uap-location-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), rgba(56, 189, 248, 0.5));
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  min-width: 4px;
  box-shadow: 0 0 6px var(--primary-glow);
}

.uap-location-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 60px;
}

.uap-location-users {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-header);
  font-family: var(--mono);
}

.uap-location-logins {
  font-size: 0.62rem;
  color: var(--text-2);
  font-family: var(--mono);
}

/* ── Recent IP list ───────────────────────────────────────────── */
.uap-ip-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0 8px;
}

.uap-ip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  transition: background 0.1s;
}

.uap-ip-row:hover { background: var(--primary-dim); }

.uap-ip-flag { font-size: 1rem; flex-shrink: 0; }

.uap-ip-info {
  flex: 1 1;
  min-width: 0;
}

.uap-ip-addr {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--primary);
  font-weight: 500;
}

.uap-ip-loc {
  display: block;
  font-size: 0.65rem;
  color: var(--text-2);
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uap-ip-time {
  font-size: 0.65rem;
  color: var(--text-2);
  flex-shrink: 0;
  font-family: var(--mono);
}

/* ── States ───────────────────────────────────────────────────── */
.uap-loading,
.uap-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-2);
  font-size: 0.875rem;
  font-family: var(--mono);
}

.uap-empty-sm {
  padding: 24px 16px;
  font-size: 0.8rem;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .uap-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .uap-content {
    grid-template-columns: 1fr;
  }
  .uap-panel-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .uap-main { padding: 16px; }
  .uap-stats { grid-template-columns: repeat(2, 1fr); }
  .uap-panel-side { grid-template-columns: 1fr; }
}

/* ============================================================
   Bulk Asset Editor — Neural Interface
   Filter panel + pagination component
   ============================================================ */

/* ─── Design Tokens ──────────────────────────────────────── */

.be-filter-panel,
.be-pagination {
  --bg:           #020408;
  --surface:      #070b12;
  --surface-2:    #0b1120;
  --border:       rgba(56, 189, 248, 0.1);
  --border-hover: rgba(56, 189, 248, 0.35);
  --border-dim:   rgba(255, 255, 255, 0.06);
  --primary:      #38bdf8;
  --primary-dim:  rgba(56, 189, 248, 0.12);
  --primary-glow: rgba(56, 189, 248, 0.25);
  --success:      #34d399;
  --success-dim:  rgba(52, 211, 153, 0.12);
  --text:         #94a3b8;
  --text-2:       #4b5a6e;
  --text-bright:  #e2e8f0;
  --mono:         'DM Mono', 'SF Mono', 'Fira Code', monospace;
  --ui:           'Syne', system-ui, sans-serif;
}

/* ─── Filter Panel ───────────────────────────────────────── */

.be-filter-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow: hidden;
}

.be-filter-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.025) 0%, transparent 50%);
  pointer-events: none;
}

.be-filter-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.be-filter-group {
  flex: 1 1;
  min-width: 155px;
}

.be-filter-group label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.38rem;
  font-family: var(--mono);
}

.be-filter-group select,
.be-filter-group input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-bright);
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  outline: none;
  transition: all 0.2s;
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}

.be-filter-group select:focus,
.be-filter-group input:focus {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

.be-filter-group select option {
  background: var(--surface-2);
  color: var(--text-bright);
}

.be-filter-group input::placeholder {
  color: var(--text-2);
}

/* ─── Search Input ───────────────────────────────────────── */

.be-search-input {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 0.75rem;
  transition: all 0.2s;
}

.be-search-input:focus-within {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

.be-search-input svg {
  color: var(--text-2);
  font-size: 0.78rem;
  flex-shrink: 0;
}

.be-search-input input {
  background: none;
  border: none;
  padding: 0.5rem 0;
  width: 100%;
  color: var(--text-bright);
  font-size: 0.8rem;
  outline: none;
  font-family: var(--ui);
}

.be-search-input input::placeholder {
  color: var(--text-2);
}

/* ─── Filter Actions ─────────────────────────────────────── */

.be-filter-actions {
  display: flex;
  justify-content: flex-end;
}

.be-load-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.5rem;
  background: var(--primary);
  color: #020408;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--ui);
  letter-spacing: 0.02em;
}

.be-load-btn:hover:not(:disabled) {
  background: #7dd3fc;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--primary-glow);
}

.be-load-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ─── Pagination ─────────────────────────────────────────── */

.be-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem 0;
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}

.be-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.48rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--ui);
}

.be-page-btn:hover:not(:disabled) {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 0 12px var(--primary-glow);
}

.be-page-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.be-page-info {
  font-size: 0.75rem;
  color: var(--text-2);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 768px) {
  .be-filter-row {
    flex-direction: column;
  }

  .be-filter-panel {
    padding: 1rem;
  }

  .be-filter-actions {
    flex-direction: column;
    width: 100%;
  }

  .be-load-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .be-filter-panel {
    padding: 0.75rem;
  }

  .be-search-input {
    width: 100%;
  }

  .be-pagination {
    gap: 0.65rem;
    flex-wrap: wrap;
  }
}

/* ============================================================
   SpreadsheetTable — Neural Interface
   Ultra-futuristic data grid component
   ============================================================ */

/* ─── Wrapper ────────────────────────────────────────────── */

.sst-wrapper {
  --bg:           #020408;
  --surface:      #070b12;
  --surface-2:    #0b1120;
  --border:       rgba(56, 189, 248, 0.1);
  --border-hover: rgba(56, 189, 248, 0.35);
  --border-dim:   rgba(255, 255, 255, 0.06);
  --primary:      #38bdf8;
  --primary-dim:  rgba(56, 189, 248, 0.12);
  --primary-glow: rgba(56, 189, 248, 0.25);
  --accent:       #818cf8;
  --accent-dim:   rgba(129, 140, 248, 0.12);
  --success:      #34d399;
  --success-dim:  rgba(52, 211, 153, 0.12);
  --warning:      #fbbf24;
  --warning-dim:  rgba(251, 191, 36, 0.12);
  --danger:       #f87171;
  --danger-dim:   rgba(248, 113, 113, 0.12);
  --text:         #94a3b8;
  --text-2:       #4b5a6e;
  --text-bright:  #e2e8f0;
  --mono:         'DM Mono', 'SF Mono', 'Fira Code', monospace;
  --ui:           'Syne', system-ui, sans-serif;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  outline: none;
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  transition: border-color 0.2s;
}

.sst-wrapper:focus {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

/* ─── Toolbar ────────────────────────────────────────────── */

.sst-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: rgba(56, 189, 248, 0.04);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sst-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sst-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.sst-modified-badge {
  background: var(--primary-dim);
  color: var(--primary);
  border: 1px solid rgba(56, 189, 248, 0.2);
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

.sst-error-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--danger-dim);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.2);
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--mono);
}

.sst-btn-undo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.7rem;
  background: transparent;
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--ui);
}

.sst-btn-undo:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-bright);
  border-color: var(--border-hover);
}

.sst-btn-undo:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.sst-btn-cancel {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.7rem;
  background: transparent;
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--ui);
}

.sst-btn-cancel:hover {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: rgba(248, 113, 113, 0.3);
}

.sst-btn-save {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.8rem;
  background: var(--primary);
  border: none;
  border-radius: 6px;
  color: #020408;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--ui);
}

.sst-btn-save:hover:not(:disabled) {
  background: #7dd3fc;
  transform: translateY(-1px);
  box-shadow: 0 3px 12px var(--primary-glow);
}

.sst-btn-save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ─── Table Scroll Container ─────────────────────────────── */

.sst-table-scroll {
  overflow-x: auto;
  max-height: 65vh;
  overflow-y: auto;
}

.sst-table-scroll::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.sst-table-scroll::-webkit-scrollbar-track {
  background: var(--surface-2);
}

.sst-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.2);
  border-radius: 3px;
}

.sst-table-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.35);
}

/* ─── Table ──────────────────────────────────────────────── */

.sst-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-family: var(--ui);
}

.sst-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.sst-table th {
  background: rgba(56, 189, 248, 0.04);
  padding: 0.5rem 0.7rem;
  text-align: left;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  font-family: var(--mono);
}

.sst-th-content {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.sst-editable-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  box-shadow: 0 0 4px var(--primary);
}

.sst-th-check,
.sst-td-check {
  width: 34px;
  text-align: center;
  padding: 0.35rem !important;
}

.sst-check-btn {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  font-size: 0.88rem;
  padding: 2px;
  transition: all 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sst-check-btn:hover {
  color: var(--primary);
}

.sst-row-selected .sst-check-btn {
  color: var(--primary);
}

/* ─── Cells ──────────────────────────────────────────────── */

.sst-table td {
  padding: 0;
  font-size: 0.78rem;
  color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(255, 255, 255, 0.025);
  position: relative;
  height: 34px;
  cursor: default;
  transition: background 0.1s;
}

.sst-table td:last-child {
  border-right: none;
}

.sst-table tr:last-child td {
  border-bottom: none;
}

.sst-cell-display {
  padding: 0.32rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
}

.sst-cell-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sst-cell-locked {
  color: var(--text-2);
  background: rgba(0, 0, 0, 0.08);
}

.sst-cell-editable {
  cursor: cell;
}

.sst-cell-editable:hover {
  background: rgba(56, 189, 248, 0.03);
}

.sst-cell-active {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  z-index: 1;
  background: rgba(56, 189, 248, 0.05) !important;
}

.sst-cell-modified {
  background: rgba(56, 189, 248, 0.07) !important;
}

.sst-cell-modified .sst-cell-text {
  color: var(--primary);
  font-weight: 600;
}

.sst-cell-error {
  background: var(--danger-dim) !important;
  outline: 1px solid rgba(248, 113, 113, 0.4);
}

.sst-cell-error-tip {
  color: var(--danger);
  font-size: 0.65rem;
  flex-shrink: 0;
  margin-left: 0.2rem;
}

/* ─── Editing Input ──────────────────────────────────────── */

.sst-cell-input {
  width: 100%;
  height: 100%;
  background: var(--surface-2);
  border: 2px solid var(--primary);
  color: var(--text-bright);
  font-size: 0.78rem;
  padding: 0.32rem 0.6rem;
  outline: none;
  font-family: var(--mono);
  box-sizing: border-box;
  box-shadow: 0 0 0 3px var(--primary-dim);
}

select.sst-cell-input {
  font-family: var(--ui);
}

/* ─── Row States ─────────────────────────────────────────── */

.sst-row-selected td {
  background: rgba(56, 189, 248, 0.04);
}

.sst-row-modified td {
  border-bottom-color: rgba(56, 189, 248, 0.12);
}

.sst-table tbody tr:hover td {
  background: rgba(56, 189, 248, 0.025);
}

/* ─── Loading / Empty ────────────────────────────────────── */

.sst-loading,
.sst-empty {
  text-align: center;
  padding: 3rem !important;
  color: var(--text-2);
  font-size: 0.82rem;
  font-family: var(--mono);
}

/* ─── Footer ─────────────────────────────────────────────── */

.sst-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.67rem;
  color: var(--text-2);
  font-family: var(--mono);
  background: rgba(56, 189, 248, 0.02);
  letter-spacing: 0.03em;
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 768px) {
  .sst-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .sst-toolbar-right {
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .sst-toolbar {
    gap: 8px;
    padding: 8px;
  }

  .sst-toolbar-right {
    justify-content: stretch;
    gap: 6px;
  }

  .sst-btn-undo,
  .sst-btn-cancel,
  .sst-btn-save {
    flex: 1 1;
    justify-content: center;
  }
}

/* ================================================================
   Email Studio — CloudSafe dark neural-interface
   Fonts: Syne (UI) · DM Mono (code/data)
   ================================================================ */

.etp-shell {
  --bg:           #020408;
  --surface:      #070b12;
  --surface-2:    #0b1120;
  --surface-3:    #0f1929;
  --border:       rgba(56,189,248,0.1);
  --border-hover: rgba(56,189,248,0.32);
  --border-dim:   rgba(255,255,255,0.05);
  --primary:      #38bdf8;
  --primary-dim:  rgba(56,189,248,0.12);
  --primary-glow: rgba(56,189,248,0.22);
  --success:      #34d399;
  --warning:      #fbbf24;
  --danger:       #f87171;
  --text:         #94a3b8;
  --text-2:       #4b5a6e;
  --text-bright:  #e2e8f0;
  --text-header:  #f0f6ff;
  --mono:         'DM Mono', 'SF Mono', monospace;
  --ui:           'Syne', system-ui, sans-serif;

  display: flex;
  min-height: 100vh;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(56,189,248,0.05) 0%, transparent 60%);
  color: var(--text);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}

/* ── Main ───────────────────────────────────────────────────────── */
.etp-main {
  flex: 1 1;
  min-width: 0;
  padding: 28px 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}

/* ── Top header ─────────────────────────────────────────────────── */
.etp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.etp-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.etp-header-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--primary-dim);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

.etp-title {
  margin: 0 0 3px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-header);
  letter-spacing: -0.4px;
}

.etp-subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--text-2);
  font-family: var(--mono);
}

.etp-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.etp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 8px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  border: 1px solid transparent;
  white-space: nowrap;
}

.etp-btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-dim);
}
.etp-btn-ghost:hover { background: rgba(255,255,255,0.04); color: var(--text-bright); border-color: var(--border); }

.etp-btn-primary { background: var(--primary); color: #020408; font-weight: 700; }
.etp-btn-primary:hover:not(:disabled) { background: #7dd3fc; box-shadow: 0 0 16px var(--primary-glow); }
.etp-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.etp-btn-primary.is-saved { background: var(--success); }
.etp-btn-primary.is-loading { opacity: 0.65; cursor: wait; }

/* ── Error banner ───────────────────────────────────────────────── */
.etp-error-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: 8px;
  font-size: 13px;
  color: #fca5a5;
  flex-shrink: 0;
}
.etp-error-banner button { background: none; border: none; color: #fca5a5; cursor: pointer; padding: 0 4px; }

/* ── Two-column layout ──────────────────────────────────────────── */
.etp-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-gap: 16px;
  gap: 16px;
  flex: 1 1;
  min-height: 0;
  align-items: start;
}

/* ══════════════════════════════════════════════════════════════════
   GALLERY PANEL (left)
══════════════════════════════════════════════════════════════════ */
.etp-gallery-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  max-height: calc(100vh - 120px);
  overflow: hidden;
}

/* Search */
.etp-search-wrap {
  position: relative;
  flex-shrink: 0;
}
.etp-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-2);
  pointer-events: none;
}
.etp-search {
  width: 100%;
  padding: 9px 12px 9px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-bright);
  font-family: var(--ui);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.etp-search:focus { border-color: var(--border-hover); }
.etp-search::placeholder { color: var(--text-2); }

/* Category chips */
.etp-cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex-shrink: 0;
}
.etp-cat-btn {
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-2);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
}
.etp-cat-btn:hover { border-color: var(--border); color: var(--text-bright); }
.etp-cat-btn.active { background: var(--primary-dim); border-color: var(--border-hover); color: var(--primary); }

/* Scrollable gallery list */
.etp-gallery-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,0.15) transparent;
}

.etp-gallery-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
}

/* Skeleton loaders */
.etp-gallery-loading { display: flex; flex-direction: column; gap: 8px; }
.etp-card-skeleton {
  height: 200px;
  border-radius: 10px;
  background: var(--surface);
  animation: etp-pulse 1.4s ease-in-out infinite;
}
@keyframes etp-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.9; }
}

/* ── Template card ──────────────────────────────────────────────── */
.etp-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  flex-shrink: 0;
}
.etp-card:hover {
  border-color: var(--border);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.etp-card.active {
  border-color: var(--primary);
  border-color: var(--card-accent, var(--primary));
  box-shadow: 0 0 0 1px var(--primary), 0 4px 24px rgba(0,0,0,0.4);
  box-shadow: 0 0 0 1px var(--card-accent, var(--primary)), 0 4px 24px rgba(0,0,0,0.4);
}

/* Mini iframe preview area */
.etp-card-preview {
  width: 100%;
  height: 175px;
  overflow: hidden;
  background: #e8ecf0;
  position: relative;
}

/* The iframe is rendered at full 600px email width then scaled down */
.etp-card-iframe {
  width: 600px;
  height: 900px;
  border: none;
  transform: scale(0.465);
  transform-origin: top left;
  pointer-events: none;
  /* scale(0.465) × 600px ≈ 279px — fits the 300px column with padding */
}

.etp-card-preview-loading {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d1d5db 25%, #e5e7eb 50%, #d1d5db 75%);
  background-size: 200% 200%;
  animation: etp-shimmer 1.6s linear infinite;
}
@keyframes etp-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Card footer */
.etp-card-footer {
  padding: 9px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
}

.etp-card-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: -webkit-fit-content;
  width: fit-content;
}

.etp-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1.3;
}
.etp-card.active .etp-card-name { color: var(--primary); color: var(--card-accent, var(--primary)); }

.etp-card-vars {
  font-size: 11px;
  color: var(--text-2);
  font-family: var(--mono);
}

/* ══════════════════════════════════════════════════════════════════
   DETAIL PANEL (right)
══════════════════════════════════════════════════════════════════ */
.etp-detail-panel {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Empty state */
.etp-empty-state {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 400px;
  background: var(--surface);
  color: var(--text-2);
}
.etp-empty-icon { font-size: 40px; opacity: 0.2; }
.etp-empty-state p { margin: 0; font-size: 14px; }

/* Detail header */
.etp-detail-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 18px 24px 0;
}

.etp-detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.etp-detail-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.etp-detail-title {
  margin: 0 0 3px;
  font-size: 19px;
  font-weight: 800;
  color: var(--text-header);
  letter-spacing: -0.3px;
}

.etp-detail-file {
  margin: 0;
  font-size: 11px;
  color: var(--text-2);
  font-family: var(--mono);
}

/* Tab group */
.etp-tab-group {
  display: flex;
  gap: 2px;
  align-self: flex-end;
  padding-bottom: 0;
}

.etp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.14s;
  position: relative;
}
.etp-tab:hover { color: var(--text-bright); }
.etp-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.etp-dirty-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warning);
  display: inline-block;
}

/* Preview */
.etp-preview-wrap {
  flex: 1 1;
  background: #dde3e9;
  padding: 28px 20px;
  display: flex;
  justify-content: center;
  min-height: 500px;
}

.etp-preview-frame {
  width: 100%;
  max-width: 640px;
  min-height: 500px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  background: #fff;
  display: block;
}

/* Editor */
.etp-editor-wrap {
  flex: 1 1;
  background: var(--surface-2);
  display: flex;
}

.etp-editor {
  flex: 1 1;
  min-height: 500px;
  padding: 20px 24px;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: #cdd6f4;
  tab-size: 2;
  width: 100%;
}

/* Variables panel */
.etp-vars-panel {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 14px 20px;
}

.etp-vars-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 10px;
}

.etp-vars-list { display: flex; flex-wrap: wrap; gap: 6px; }

.etp-var-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 5px;
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.15);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--primary);
  color: var(--chip-color, var(--primary));
  -webkit-user-select: all;
          user-select: all;
  cursor: text;
  transition: background 0.12s;
}
.etp-var-chip:hover { background: rgba(56,189,248,0.16); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .etp-layout { grid-template-columns: 1fr; }
  .etp-gallery-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .etp-gallery-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    overflow-y: visible;
    max-height: none;
  }
  .etp-card-iframe { transform: scale(0.38); }
  .etp-main { padding: 16px 12px 32px; }
}

/* ============================================================
   Company Generation — Neural Interface
   Matches CloudStaff ultra-futuristic dark theme
   ============================================================ */

/* ─── Design Tokens ──────────────────────────────────────── */

.cg-page {
  --surface:      #070b12;
  --surface-2:    #0b1120;
  --surface-3:    #0f1929;
  --border:       rgba(56, 189, 248, 0.1);
  --border-hover: rgba(56, 189, 248, 0.35);
  --border-dim:   rgba(255, 255, 255, 0.06);
  --primary:      #38bdf8;
  --primary-dim:  rgba(56, 189, 248, 0.12);
  --primary-glow: rgba(56, 189, 248, 0.25);
  --accent:       #818cf8;
  --success:      #34d399;
  --success-dim:  rgba(52, 211, 153, 0.12);
  --warning:      #fbbf24;
  --warning-dim:  rgba(251, 191, 36, 0.12);
  --danger:       #f87171;
  --danger-dim:   rgba(248, 113, 113, 0.12);
  --orange:       #fb923c;
  --orange-dim:   rgba(251, 146, 60, 0.12);
  --text:         #94a3b8;
  --text-2:       #4b5a6e;
  --text-bright:  #e2e8f0;
  --text-header:  #f0f6ff;
  --mono:         'DM Mono', 'SF Mono', 'Fira Code', monospace;
  --ui:           'Syne', system-ui, sans-serif;

  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}

/* ─── Page Top Bar ───────────────────────────────────────── */

.cg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
  flex-wrap: wrap;
}

.cg-topbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cg-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-header);
  margin: 0 0 0.2rem 0;
  letter-spacing: -0.02em;
  font-family: var(--ui);
}

.cg-title-icon {
  color: var(--primary);
}

.cg-subtitle {
  font-size: 0.78rem;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}

/* ─── Create Form Panel ──────────────────────────────────── */

.cg-form-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.cg-form-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.cg-form-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.cg-form-panel-title {
  margin: 0;
  color: var(--text-bright);
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--ui);
}

.cg-close-btn {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  font-size: 1.1rem;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.cg-close-btn:hover {
  background: var(--danger-dim);
  color: var(--danger);
}

.cg-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
}

.cg-form-grid .cg-full {
  grid-column: 1 / -1;
}

.cg-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
  font-family: var(--mono);
}

.cg-input,
.cg-select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-bright);
  font-size: 0.82rem;
  padding: 0.52rem 0.8rem;
  outline: none;
  transition: all 0.2s;
  font-family: var(--ui);
  box-sizing: border-box;
}

.cg-input:focus,
.cg-select:focus {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

.cg-input::placeholder {
  color: var(--text-2);
}

.cg-select option {
  background: var(--surface-2);
  color: var(--text-bright);
}

/* ─── Area Checkboxes ────────────────────────────────────── */

.cg-hint {
  font-size: 0.73rem;
  color: var(--text);
  margin: 0.2rem 0 0.65rem;
  line-height: 1.5;
}

.cg-checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
}

.cg-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--text-bright);
  font-size: 0.82rem;
  font-family: var(--ui);
  transition: color 0.15s;
}

.cg-checkbox-label:hover {
  color: var(--primary);
}

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

/* ─── User Lookup Row ────────────────────────────────────── */

.cg-lookup-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}

.cg-lookup-label {
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
  font-family: var(--ui);
}

.cg-lookup-input {
  width: 90px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-bright);
  font-size: 0.8rem;
  padding: 0.42rem 0.6rem;
  outline: none;
  font-family: var(--mono);
  transition: all 0.2s;
}

.cg-lookup-input:focus {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

.cg-lookup-btn {
  background: var(--primary-dim);
  color: var(--primary);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  padding: 0.42rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--ui);
  white-space: nowrap;
}

.cg-lookup-btn:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.22);
  border-color: var(--primary);
}

.cg-lookup-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cg-lookup-result {
  margin-top: 0.75rem;
  padding: 0.8rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--text-bright);
  font-family: var(--ui);
}

.cg-lookup-result strong {
  color: var(--primary);
}

.cg-lookup-warning {
  display: block;
  margin-top: 0.35rem;
  color: var(--orange);
  font-size: 0.75rem;
  font-family: var(--mono);
}

/* ─── Form Footer ────────────────────────────────────────── */

.cg-form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

/* ─── Section Headers ────────────────────────────────────── */

.cg-section-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cg-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0;
  font-family: var(--ui);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cg-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--primary);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--primary);
}

/* ─── Table Container ────────────────────────────────────── */

.cg-table-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  overflow-x: auto;
}

.cg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  font-family: var(--ui);
}

.cg-table thead tr {
  background: rgba(56, 189, 248, 0.04);
  border-bottom: 1px solid var(--border);
}

.cg-table th {
  text-align: left;
  padding: 0.7rem 1rem;
  color: var(--text-2);
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  font-family: var(--mono);
  background: rgba(56, 189, 248, 0.04);
}

.cg-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.12s;
}

.cg-table tbody tr:last-child {
  border-bottom: none;
}

.cg-table tbody tr:hover {
  background: rgba(56, 189, 248, 0.03);
}

.cg-table td {
  padding: 0.72rem 1rem;
  color: var(--text);
  background: var(--surface);
  vertical-align: middle;
}

/* ─── Table Cell Types ───────────────────────────────────── */

.cg-name-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  padding: 0;
  font-size: 0.82rem;
  font-family: var(--ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.cg-name-btn:hover {
  color: #7dd3fc;
}

.cg-contact-btn {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  padding: 0;
  font-size: 0.82rem;
  font-family: var(--ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.cg-contact-btn:hover {
  color: var(--text-bright);
}

.cg-code-badge {
  background: var(--surface-2);
  color: var(--primary);
  border: 1px solid var(--border);
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.cg-date {
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.cg-dash {
  color: var(--text-2);
}

.cg-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  background: var(--primary-dim);
  color: var(--primary);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--ui);
  white-space: nowrap;
}

.cg-edit-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: var(--primary);
  box-shadow: 0 0 12px var(--primary-glow);
}

/* ─── Empty State ────────────────────────────────────────── */

.cg-empty {
  color: var(--text);
  font-size: 0.85rem;
  padding: 0.5rem 0;
}

/* ─── Modal Overlay ──────────────────────────────────────── */

.cg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.cg-overlay-inner {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* ─── Modal Card ─────────────────────────────────────────── */

.cg-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(56, 189, 248, 0.05);
  position: relative;
  animation: cg-modal-in 0.18s ease;
}

.cg-modal-sm { max-width: 440px; }
.cg-modal-md { max-width: 480px; }

@keyframes cg-modal-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cg-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: rgba(56, 189, 248, 0.03);
}

.cg-modal-title {
  margin: 0;
  color: var(--text-bright);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--ui);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cg-modal-title-icon {
  color: var(--primary);
  font-size: 0.9rem;
}

.cg-modal-body {
  padding: 1.25rem;
}

/* ─── Detail List (dl) ───────────────────────────────────── */

.cg-detail-list {
  margin: 0;
  font-size: 0.85rem;
}

.cg-detail-list dt {
  margin-top: 1rem;
  color: var(--text-2);
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--mono);
}

.cg-detail-list dt:first-child {
  margin-top: 0;
}

.cg-detail-list dd {
  margin: 0.25rem 0 0;
  color: var(--text-bright);
  font-family: var(--ui);
}

.cg-detail-list dd.cg-dd-dim {
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.cg-detail-list dd.cg-dd-warn {
  color: var(--orange);
  font-family: var(--mono);
  font-size: 0.8rem;
}

/* ─── Edit Modal Fields ──────────────────────────────────── */

.cg-field {
  margin-bottom: 1rem;
}

.cg-field:last-child {
  margin-bottom: 0;
}

/* ─── Danger Zone ────────────────────────────────────────── */

.cg-danger-zone {
  border-top: 1px solid var(--border);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.cg-danger-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.65rem;
  font-family: var(--mono);
}

.cg-action-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cg-btn-suspend {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--orange-dim);
  color: var(--orange);
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 8px;
  padding: 0.48rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--ui);
}

.cg-btn-suspend:hover:not(:disabled) {
  background: rgba(251, 146, 60, 0.22);
  border-color: var(--orange);
}

.cg-btn-unsuspend {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--success-dim);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 8px;
  padding: 0.48rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--ui);
}

.cg-btn-unsuspend:hover:not(:disabled) {
  background: rgba(52, 211, 153, 0.22);
  border-color: var(--success);
}

.cg-btn-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--danger-dim);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 8px;
  padding: 0.48rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--ui);
}

.cg-btn-remove:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.22);
  border-color: var(--danger);
}

.cg-btn-suspend:disabled,
.cg-btn-unsuspend:disabled,
.cg-btn-remove:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cg-danger-hint {
  font-size: 0.68rem;
  color: var(--text-2);
  margin-top: 0.6rem;
  margin-bottom: 0;
  line-height: 1.5;
  font-family: var(--mono);
}

/* ─── Modal Footer ───────────────────────────────────────── */

.cg-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* ─── Generic Buttons ────────────────────────────────────── */

.cg-btn-cancel {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--ui);
}

.cg-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-bright);
  border-color: var(--border-hover);
}

.cg-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--primary);
  color: #020408;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--ui);
}

.cg-btn-primary:hover:not(:disabled) {
  background: #7dd3fc;
  box-shadow: 0 4px 16px var(--primary-glow);
}

.cg-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── Confirm Modal ──────────────────────────────────────── */

.cg-confirm-title {
  margin: 0 0 0.6rem 0;
  color: var(--text-bright);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--ui);
}

.cg-confirm-body {
  color: var(--text);
  font-size: 0.85rem;
  margin: 0 0 1.25rem 0;
  line-height: 1.65;
}

/* ─── Loading ────────────────────────────────────────────── */

.cg-loading-text {
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--mono);
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 768px) {
  .cg-form-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 480px) {
  .cg-form-panel {
    padding: 1rem;
  }

  .cg-modal-body {
    padding: 1rem;
  }

  .cg-modal-header {
    padding: 0.85rem 1rem;
  }

  .cg-modal-footer {
    flex-direction: column-reverse;
  }

  .cg-modal-footer .cg-btn-cancel,
  .cg-modal-footer .cg-btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   System Logs — Extends CloudStaff Dashboard theme
   ============================================================ */

/* ─── Stats Bar ─────────────────────────────────────────── */

.sl-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.sl-stat-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  transition: border-color 0.2s;
}

.sl-stat-card:hover {
  border-color: var(--border-hover);
}

.sl-stat-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
  font-family: var(--mono);
  margin: 0 0 0.4rem;
}

.sl-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-header);
  font-family: var(--ui);
  margin: 0;
  letter-spacing: -0.02em;
}

.sl-stat-value.errors { color: var(--danger); }
.sl-stat-value.logins { color: var(--success); }
.sl-stat-value.api { color: var(--primary); }

/* ─── Category Tabs ─────────────────────────────────────── */

.sl-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.sl-tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 20px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--ui);
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.01em;
}

.sl-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-hover);
  color: var(--text-bright);
}

.sl-tab.active {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: rgba(56, 189, 248, 0.3);
}

.sl-tab-count {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  font-size: 0.65rem;
  font-family: var(--mono);
  min-width: 20px;
  text-align: center;
}

.sl-tab.active .sl-tab-count {
  background: rgba(56, 189, 248, 0.2);
}

/* ─── Toolbar ───────────────────────────────────────────── */

.sl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.sl-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.sl-search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 0 0.75rem;
  transition: border-color 0.2s;
}

.sl-search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-dim);
}

.sl-search-box svg {
  color: var(--text-2);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.sl-search-input {
  background: none;
  border: none;
  color: var(--text-bright);
  font-size: 0.8rem;
  padding: 0.55rem 0;
  outline: none;
  width: 200px;
  font-family: var(--ui);
}

.sl-search-input::placeholder { color: var(--text-2); }

.sl-level-pills {
  display: flex;
  gap: 0.3rem;
}

.sl-level-pill {
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sl-level-pill:hover { background: rgba(255, 255, 255, 0.04); }
.sl-level-pill.active-info { background: var(--primary-dim); color: var(--primary); border-color: rgba(56, 189, 248, 0.3); }
.sl-level-pill.active-warn { background: var(--warning-dim); color: var(--warning); border-color: rgba(251, 191, 36, 0.3); }
.sl-level-pill.active-error { background: var(--danger-dim); color: var(--danger); border-color: rgba(248, 113, 113, 0.3); }
.sl-level-pill.active-critical { background: rgba(220, 38, 38, 0.15); color: #ef4444; border-color: rgba(220, 38, 38, 0.4); }

.sl-date-range {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sl-date-input {
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.72rem;
  padding: 0.4rem 0.5rem;
  font-family: var(--mono);
  outline: none;
  transition: border-color 0.2s;
}

.sl-date-input:focus {
  border-color: var(--primary);
}

.sl-date-separator {
  color: var(--text-2);
  font-size: 0.75rem;
}

.sl-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sl-refresh-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--ui);
}

.sl-refresh-btn:hover {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: rgba(56, 189, 248, 0.3);
}

.sl-refresh-btn.auto-active {
  background: var(--success-dim);
  color: var(--success);
  border-color: rgba(52, 211, 153, 0.3);
}

.sl-auto-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: sl-pulse 1.5s infinite;
}

@keyframes sl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.sl-total-label {
  font-size: 0.8rem;
  color: var(--text-2);
  font-family: var(--mono);
}

/* ─── Table ─────────────────────────────────────────────── */

.sl-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.sl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.sl-table thead th {
  background: var(--surface-2);
  padding: 0.7rem 0.85rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  font-family: var(--mono);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.sl-table tbody tr {
  border-bottom: 1px solid var(--border-dim);
  transition: background 0.15s;
  cursor: pointer;
}

.sl-table tbody tr:hover {
  background: rgba(56, 189, 248, 0.03);
}

.sl-table tbody tr:last-child {
  border-bottom: none;
}

.sl-table td {
  padding: 0.65rem 0.85rem;
  color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}

.sl-table td.sl-action-cell {
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--mono);
  font-size: 0.72rem;
}

.sl-table td.sl-message-cell {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Badges ────────────────────────────────────────────── */

.sl-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sl-badge.cat-test     { background: var(--accent-dim); color: var(--accent); }
.sl-badge.cat-api      { background: var(--primary-dim); color: var(--primary); }
.sl-badge.cat-error    { background: var(--danger-dim); color: var(--danger); }
.sl-badge.cat-sync     { background: var(--success-dim); color: var(--success); }
.sl-badge.cat-login    { background: var(--warning-dim); color: var(--warning); }

.sl-badge.lvl-info     { background: var(--primary-dim); color: var(--primary); }
.sl-badge.lvl-warn     { background: var(--warning-dim); color: var(--warning); }
.sl-badge.lvl-error    { background: var(--danger-dim); color: var(--danger); }
.sl-badge.lvl-critical { background: rgba(220, 38, 38, 0.15); color: #ef4444; border: 1px solid rgba(220, 38, 38, 0.3); }

.sl-status-code {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
}

.sl-status-code.s2xx { color: var(--success); }
.sl-status-code.s3xx { color: var(--primary); }
.sl-status-code.s4xx { color: var(--warning); }
.sl-status-code.s5xx { color: var(--danger); }

.sl-duration {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-2);
}

.sl-duration.slow { color: var(--warning); }
.sl-duration.very-slow { color: var(--danger); }

/* ─── Expanded Row ──────────────────────────────────────── */

.sl-expanded-row td {
  padding: 0 !important;
}

.sl-detail-panel {
  padding: 1rem 1.5rem 1.25rem;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  animation: sl-expand-in 0.2s ease;
}

@keyframes sl-expand-in {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 600px; }
}

.sl-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sl-detail-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
  font-family: var(--mono);
  margin: 0 0 0.25rem;
}

.sl-detail-value {
  font-size: 0.8rem;
  color: var(--text-bright);
  margin: 0;
  word-break: break-all;
}

.sl-detail-json {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  line-height: 1.5;
}

.sl-detail-json::-webkit-scrollbar {
  width: 4px;
}

.sl-detail-json::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

/* ─── Pagination ────────────────────────────────────────── */

.sl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 0;
}

.sl-page-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
  font-family: var(--ui);
  transition: all 0.2s;
}

.sl-page-btn:hover:not(:disabled) {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: rgba(56, 189, 248, 0.3);
}

.sl-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.sl-page-info {
  font-size: 0.8rem;
  color: var(--text-2);
  font-family: var(--mono);
}

/* ─── Responsive ────────────────────────────────────────── */

@media (max-width: 1024px) {
  .sl-stats-bar { grid-template-columns: repeat(2, 1fr); }
  .sl-toolbar { flex-direction: column; align-items: stretch; }
  .sl-toolbar-left { flex-direction: column; }
  .sl-search-input { width: 100%; }
}

@media (max-width: 768px) {
  .sl-stats-bar { grid-template-columns: 1fr; }
  .sl-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.5rem; }
  .sl-table-wrap { font-size: 0.72rem; }
  .sl-detail-grid { grid-template-columns: 1fr; }
  .sl-date-range { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   CompliancePanel — Admin compliance management interface
   Uses CloudSafe design tokens (--cs-*)
   ============================================================ */

.cp-container {
  max-width: 960px;
  margin: 0 auto;
}

/* ── Header ───────────────────────────────────────────────────── */

.cp-header {
  margin-bottom: 24px;
}

.cp-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.cp-title-icon {
  font-size: 1.25rem;
  color: var(--cs-blue);
}

.cp-title {
  font-size: var(--cs-text-2xl);
  font-weight: 700;
  color: var(--cs-text-primary);
  margin: 0;
}

.cp-subtitle {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-muted);
  margin: 0;
}

/* ── Summary cards ────────────────────────────────────────────── */

.cp-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 14px;
  gap: 14px;
  margin-bottom: 24px;
}

.cp-summary-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--cs-radius-lg);
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  box-shadow: var(--cs-shadow-xs);
}

.cp-card-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.cp-card-hold .cp-card-icon  { color: #d97706; }
.cp-card-freeze .cp-card-icon { color: #0284c7; }
.cp-card-lock .cp-card-icon   { color: var(--cs-purple-dark); }
.cp-card-amend .cp-card-icon  { color: var(--cs-teal-dark); }

.cp-card-body {
  display: flex;
  flex-direction: column;
}

.cp-card-count {
  font-size: var(--cs-text-2xl);
  font-weight: 700;
  color: var(--cs-text-primary);
  line-height: 1.1;
}

.cp-card-label {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Tabs ─────────────────────────────────────────────────────── */

.cp-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--cs-border);
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cp-tabs::-webkit-scrollbar { display: none; }

.cp-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  background: none;
  font-size: var(--cs-text-sm);
  font-weight: 600;
  color: var(--cs-text-muted);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--cs-transition-fast), border-color var(--cs-transition-fast);
}

.cp-tab:hover {
  color: var(--cs-text-primary);
}

.cp-tab-active {
  color: var(--cs-blue);
  border-bottom-color: var(--cs-blue);
}

.cp-tab-icon {
  font-size: 0.85rem;
}

.cp-tab:focus-visible {
  outline: 2px solid var(--cs-blue);
  outline-offset: -2px;
  border-radius: 4px 4px 0 0;
}

/* ── Panel ────────────────────────────────────────────────────── */

.cp-panel {
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: 20px;
  box-shadow: var(--cs-shadow-xs);
}

/* ── Empty state ──────────────────────────────────────────────── */

.cp-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--cs-text-muted);
}

.cp-empty-icon {
  font-size: 2rem;
  margin-bottom: 12px;
  opacity: 0.4;
}

.cp-empty p {
  margin: 0 0 16px;
  font-size: var(--cs-text-base);
}

/* ── Protection list ──────────────────────────────────────────── */

.cp-protection-list,
.cp-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cp-protection-item,
.cp-history-item {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  padding: 14px 16px;
  position: relative;
  border-left: 4px solid;
}

.cp-hold  { border-left-color: #f59e0b; }
.cp-freeze { border-left-color: #0ea5e9; }
.cp-lock  { border-left-color: var(--cs-purple); }

.cp-history-removed {
  opacity: 0.6;
  background: var(--cs-bg-alt);
}

.cp-prot-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.cp-prot-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--cs-radius-full);
  font-size: var(--cs-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: 1px solid;
}

.cp-prot-badge.cp-hold  { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.cp-prot-badge.cp-freeze { background: #e0f2fe; color: #0c4a6e; border-color: #7dd3fc; }
.cp-prot-badge.cp-lock  { background: #f5f3ff; color: #7c3aed; border-color: #c4b5fd; }

.cp-prot-entity {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-muted);
  font-weight: 500;
}

.cp-hist-removed-badge {
  font-size: var(--cs-text-xs);
  background: var(--cs-bg);
  color: var(--cs-text-muted);
  padding: 2px 8px;
  border-radius: var(--cs-radius-full);
  font-weight: 600;
}

.cp-prot-reason {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-primary);
  margin: 0 0 4px;
  line-height: 1.4;
}

.cp-prot-ref {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
  margin: 0 0 4px;
  font-style: italic;
}

.cp-prot-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--cs-text-xs);
  color: var(--cs-text-faint);
}

.cp-hist-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* ── Buttons ──────────────────────────────────────────────────── */

.cp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-sm);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--cs-transition-fast);
}

.cp-btn:focus-visible {
  outline: 2px solid var(--cs-blue);
  outline-offset: 2px;
}

.cp-btn-primary {
  background: var(--cs-blue);
  color: white;
}
.cp-btn-primary:hover {
  background: var(--cs-blue-dark);
}

.cp-btn-secondary {
  background: var(--cs-bg);
  color: var(--cs-text-secondary);
  border-color: var(--cs-border);
}
.cp-btn-secondary:hover {
  background: var(--cs-border);
}

.cp-btn-danger {
  background: var(--cs-red);
  color: white;
}
.cp-btn-danger:hover {
  background: var(--cs-red-dark);
}
.cp-btn-danger:disabled {
  background: var(--cs-border);
  color: var(--cs-text-faint);
  cursor: not-allowed;
}

.cp-btn-remove {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  font-size: var(--cs-text-xs);
  background: none;
  color: var(--cs-red);
  border-color: var(--cs-red-border);
}
.cp-btn-remove:hover {
  background: var(--cs-red-light);
}

/* ── Form ─────────────────────────────────────────────────────── */

.cp-apply-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 14px;
  gap: 14px;
}

.cp-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-form-label {
  font-size: var(--cs-text-sm);
  font-weight: 600;
  color: var(--cs-text-secondary);
}

.cp-required {
  color: var(--cs-red);
}

.cp-input, .cp-select, .cp-textarea {
  padding: 9px 12px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-sm);
  color: var(--cs-text-primary);
  background: var(--cs-white);
  transition: border-color var(--cs-transition-fast);
}

.cp-input:focus, .cp-select:focus, .cp-textarea:focus {
  border-color: var(--cs-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.12);
}

.cp-textarea {
  resize: vertical;
  min-height: 70px;
}

.cp-radio-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cp-radio-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid var(--cs-border);
  border-radius: var(--cs-radius);
  cursor: pointer;
  transition: all var(--cs-transition-fast);
  font-size: var(--cs-text-sm);
  font-weight: 600;
  color: var(--cs-text-secondary);
}

.cp-radio-card input[type="radio"] {
  display: none;
}

.cp-radio-card:hover {
  border-color: var(--cs-blue);
  background: var(--cs-blue-light);
}

.cp-radio-selected {
  border-color: var(--cs-blue);
  background: var(--cs-blue-light);
  color: var(--cs-blue-dark);
}

.cp-radio-icon {
  font-size: 1rem;
}

/* ── Result message ───────────────────────────────────────────── */

.cp-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-sm);
  font-weight: 500;
}

.cp-result-success {
  background: var(--cs-green-light);
  color: var(--cs-green-dark);
  border: 1px solid var(--cs-green-border);
}

.cp-result-error {
  background: var(--cs-red-light);
  color: var(--cs-red-dark);
  border: 1px solid var(--cs-red-border);
}

/* ── Retention policies ───────────────────────────────────────── */

.cp-retention-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cp-retention-item {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  padding: 12px 16px;
}

.cp-ret-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.cp-ret-entity {
  font-size: var(--cs-text-sm);
  font-weight: 700;
  color: var(--cs-text-primary);
  text-transform: capitalize;
}

.cp-ret-category {
  font-size: var(--cs-text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--cs-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cp-ret-compliance   { background: var(--cs-purple-light); color: var(--cs-purple-dark); }
.cp-ret-operational  { background: var(--cs-blue-light); color: var(--cs-blue-dark); }
.cp-ret-transient    { background: var(--cs-bg); color: var(--cs-text-muted); }

.cp-ret-body {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.cp-ret-years {
  font-size: var(--cs-text-base);
  font-weight: 600;
  color: var(--cs-text-primary);
}

.cp-ret-reg {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
  font-style: italic;
}

.cp-ret-desc {
  font-size: var(--cs-text-xs);
  color: var(--cs-text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ── Modal ────────────────────────────────────────────────────── */

.cp-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--cs-z-modal);
  padding: 20px;
}

.cp-modal {
  background: var(--cs-white);
  border-radius: var(--cs-radius-xl);
  padding: 24px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--cs-shadow-xl);
}

.cp-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cs-text-lg);
  font-weight: 700;
  color: var(--cs-text-primary);
  margin: 0 0 12px;
}

.cp-modal-warn {
  color: var(--cs-amber);
}

.cp-modal-desc {
  font-size: var(--cs-text-sm);
  color: var(--cs-text-secondary);
  margin: 0 0 8px;
  line-height: 1.5;
}

.cp-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* ── Loading / Error ──────────────────────────────────────────── */

.cp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  color: var(--cs-text-muted);
  font-size: var(--cs-text-sm);
}

.cp-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--cs-red-light);
  color: var(--cs-red-dark);
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-sm);
}

@keyframes cp-spin {
  to { transform: rotate(360deg); }
}
.cp-spinner {
  animation: cp-spin 0.8s linear infinite;
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 768px) {
  .cp-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cp-form-row {
    grid-template-columns: 1fr;
  }

  .cp-radio-group {
    flex-direction: column;
  }

  .cp-btn-remove {
    position: static;
    margin-top: 10px;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .cp-summary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .cp-summary-card {
    padding: 12px 14px;
    gap: 10px;
  }

  .cp-card-count {
    font-size: var(--cs-text-xl);
  }

  .cp-panel {
    padding: 14px;
  }

  .cp-tabs {
    gap: 0;
  }

  .cp-tab {
    padding: 8px 12px;
    font-size: var(--cs-text-xs);
  }

  .cp-modal {
    padding: 18px;
  }
}

@media (max-width: 360px) {
  .cp-header {
    margin-bottom: 16px;
  }

  .cp-title {
    font-size: var(--cs-text-lg);
  }

  .cp-summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-spinner {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SUPPORT TICKETS — CloudSafe Support System
   ═══════════════════════════════════════════════════════════════ */

/* ─── Page wrapper (with header) ────────────────────────────── */
.sup-page {
  width: 100%;
  min-height: 100vh;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  display: flex;
  flex-direction: column;
}

/* ─── Container ─────────────────────────────────────────────── */
.sup-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.5rem;
  padding: var(--cs-space-6, 1.5rem);
  padding-top: 104px;
}

.sup-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 1rem;
  color: #64748b;
}

.sup-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e2e8f0;
  border-top-color: #1A80E5;
  border-top-color: var(--cs-blue, #1A80E5);
  border-radius: 50%;
  animation: sup-spin 0.7s linear infinite;
}

@keyframes sup-spin {
  to { transform: rotate(360deg); }
}

/* ─── Header ────────────────────────────────────────────────── */
.sup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  margin-bottom: var(--cs-space-6, 1.5rem);
  gap: 1rem;
  flex-wrap: wrap;
}

.sup-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sup-header-icon {
  font-size: 1.75rem;
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

.sup-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.sup-subtitle {
  font-size: 0.8125rem;
  color: #64748b;
  margin: 0;
}

/* ─── Buttons ───────────────────────────────────────────────── */
.sup-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  white-space: nowrap;
  text-decoration: none;
}

.sup-btn-primary {
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
}
.sup-btn-primary:hover { background: #1565C0; background: var(--cs-blue-dark, #1565C0); }
.sup-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.sup-btn-success {
  background: #22c55e;
  background: var(--cs-green, #22c55e);
  color: #fff;
}
.sup-btn-success:hover { background: #16a34a; }

.sup-btn-ghost {
  background: transparent;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.sup-btn-ghost:hover { background: #f1f5f9; border-color: #cbd5e1; }
.sup-btn-ghost.active { background: #e0f2fe; border-color: #1A80E5; border-color: var(--cs-blue, #1A80E5); color: var(--cs-blue); }

.sup-btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.sup-btn-block { width: 100%; justify-content: center; }

/* ─── Stats Row ─────────────────────────────────────────────── */
.sup-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  margin-bottom: var(--cs-space-6, 1.5rem);
}

.sup-stat-card {
  background: #fff;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
}
.sup-stat-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  box-shadow: var(--cs-shadow, 0 2px 8px rgba(0,0,0,0.08));
}

.sup-stat-count {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.sup-stat-label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sup-stat-open .sup-stat-count { color: #1A80E5; color: var(--cs-blue, #1A80E5); }
.sup-stat-progress .sup-stat-count { color: #f59e0b; color: var(--cs-amber, #f59e0b); }
.sup-stat-waiting .sup-stat-count { color: #8b5cf6; color: var(--cs-purple, #8b5cf6); }
.sup-stat-resolved .sup-stat-count { color: #22c55e; color: var(--cs-green, #22c55e); }

/* ─── Toolbar ───────────────────────────────────────────────── */
.sup-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.sup-search-wrap {
  flex: 1 1;
  position: relative;
}

.sup-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.875rem;
}

.sup-search {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  color: #0f172a;
  background: #fff;
  transition: border-color 0.2s ease;
  transition: border-color var(--cs-transition, 0.2s ease);
}
.sup-search:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26,128,229,0.1);
}

.sup-result-count {
  font-size: 0.8125rem;
  color: #64748b;
  white-space: nowrap;
}

/* ─── Filters ───────────────────────────────────────────────── */
.sup-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.sup-filters select {
  padding: 0.4rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.8125rem;
  color: #334155;
  background: #fff;
  cursor: pointer;
}
.sup-filters select:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
}

/* ─── Badges ────────────────────────────────────────────────── */
.sup-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}

.sup-status-open { background: #dbeafe; color: #1e40af; }
.sup-status-in_progress { background: #fef3c7; color: #92400e; }
.sup-status-waiting_on_user { background: #f3e8ff; color: #7c3aed; }
.sup-status-resolved { background: #dcfce7; color: #166534; }
.sup-status-closed { background: #f1f5f9; color: #475569; }

.sup-priority-low { background: #f1f5f9; color: #475569; }
.sup-priority-medium { background: #dbeafe; color: #1e40af; }
.sup-priority-high { background: #fef3c7; color: #92400e; }
.sup-priority-urgent { background: #fee2e2; color: #991b1b; }

/* ─── Ticket List ───────────────────────────────────────────── */
.sup-ticket-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #e2e8f0;
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.sup-ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
  transition: background var(--cs-transition, 0.2s ease);
  gap: 1rem;
}
.sup-ticket-row:hover { background: #f8fafc; }

.sup-ticket-left { flex: 1 1; min-width: 0; }

.sup-ticket-ref-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}

.sup-ticket-ref {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  letter-spacing: 0.02em;
}

.sup-ticket-subject {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.25rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sup-ticket-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: #64748b;
}

.sup-ticket-category {
  padding: 0.1rem 0.4rem;
  background: #f1f5f9;
  border-radius: 4px;
  font-weight: 500;
}

.sup-ticket-property {
  padding: 0.1rem 0.4rem;
  background: #f0fdfa;
  border-radius: 4px;
  color: #0f766e;
  font-weight: 500;
}

.sup-ticket-time {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.sup-ticket-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.sup-unread-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0 5px;
}

.sup-msg-count {
  font-size: 0.75rem;
  color: #94a3b8;
}

.sup-chevron {
  color: #cbd5e1;
  font-size: 0.75rem;
}

/* ─── Empty State ───────────────────────────────────────────── */
.sup-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.sup-empty-icon {
  font-size: 3rem;
  color: #cbd5e1;
  margin-bottom: 1rem;
}

.sup-empty h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #334155;
  margin: 0 0 0.5rem;
}

.sup-empty p {
  color: #64748b;
  font-size: 0.875rem;
  margin: 0 0 1.5rem;
  max-width: 360px;
}

/* ─── Create Ticket Form ────────────────────────────────────── */
.sup-create-card {
  background: #fff;
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  border: 1px solid #e2e8f0;
  padding: 2rem;
  max-width: 720px;
}

.sup-create-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #f1f5f9;
}

.sup-create-icon {
  font-size: 1.5rem;
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.sup-create-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.sup-create-header p {
  font-size: 0.8125rem;
  color: #64748b;
  margin: 0.25rem 0 0;
}

.sup-form { display: flex; flex-direction: column; gap: 1.5rem; }

.sup-field { display: flex; flex-direction: column; gap: 0.375rem; }

.sup-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
}

.sup-required { color: #ef4444; color: var(--cs-red, #ef4444); }
.sup-optional { font-weight: 400; color: #94a3b8; }

.sup-input,
.sup-textarea {
  padding: 0.625rem 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  color: #0f172a;
  background: #fff;
  transition: border-color 0.2s ease;
  transition: border-color var(--cs-transition, 0.2s ease);
  font-family: inherit;
}
.sup-input:focus,
.sup-textarea:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26,128,229,0.1);
}

.sup-textarea { resize: vertical; min-height: 120px; }

/* Category Grid */
.sup-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.sup-category-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.75rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  text-align: left;
}
.sup-category-card:hover { border-color: #94a3b8; }
.sup-category-card.active {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  background: #eff6ff;
}

.sup-category-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0f172a;
}

.sup-category-desc {
  font-size: 0.6875rem;
  color: #64748b;
  margin-top: 0.125rem;
}

/* Priority Row */
.sup-priority-row {
  display: flex;
  gap: 0.5rem;
}

.sup-priority-card {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
}
.sup-priority-card:hover { border-color: #64748b; border-color: var(--priority-color, #64748b); }
.sup-priority-card.active {
  border-color: #1A80E5;
  border-color: var(--priority-color, #1A80E5);
  background: color-mix(in srgb, #1A80E5 8%, #fff);
  background: color-mix(in srgb, var(--priority-color, #1A80E5) 8%, #fff);
}

.sup-priority-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #64748b;
  background: var(--priority-color, #64748b);
  flex-shrink: 0;
}

.sup-priority-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
}

/* File Upload */
.sup-file-zone {
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 1rem;
  text-align: center;
  transition: border-color 0.2s ease;
  transition: border-color var(--cs-transition, 0.2s ease);
}
.sup-file-zone:hover { border-color: #1A80E5; border-color: var(--cs-blue, #1A80E5); }

.sup-file-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
}

.sup-file-input { display: none; }

.sup-file-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.sup-file-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background: #f8fafc;
  border-radius: 6px;
  font-size: 0.8125rem;
}

.sup-file-name {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334155;
}

.sup-file-size { color: #94a3b8; font-size: 0.75rem; }

.sup-file-remove {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 0.125rem;
  font-size: 0.75rem;
}
.sup-file-remove:hover { color: #ef4444; color: var(--cs-red, #ef4444); }

.sup-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

/* ─── Ticket Detail ─────────────────────────────────────────── */
.sup-detail-container {
  max-width: 1200px;
}

.sup-detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  margin-bottom: var(--cs-space-6, 1.5rem);
  flex-wrap: wrap;
}

.sup-detail-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sup-detail-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  align-items: start;
}

/* ─── Messages ──────────────────────────────────────────────── */
.sup-detail-main {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sup-message {
  background: #fff;
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  padding: 1.25rem;
  border: 1px solid #e2e8f0;
}

.sup-message-original {
  border-left: 3px solid #1A80E5;
  border-left: 3px solid var(--cs-blue, #1A80E5);
}

.sup-message-staff {
  border-left: 3px solid #22c55e;
  border-left: 3px solid var(--cs-green, #22c55e);
}

.sup-message-internal {
  background: #fffbeb;
  border-color: #fcd34d;
  border-left: 3px solid #f59e0b;
}

.sup-message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sup-message-author {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
}

.sup-avatar-icon {
  font-size: 1.125rem;
  color: #94a3b8;
}
.sup-avatar-staff { color: #22c55e; color: var(--cs-green, #22c55e); }

.sup-staff-badge {
  padding: 0.1rem 0.4rem;
  background: #dcfce7;
  color: #166534;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.sup-internal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.4rem;
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.sup-message-time {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #94a3b8;
}

.sup-message-subject {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0.5rem;
}

.sup-message-body {
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.sup-message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f1f5f9;
}

.sup-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  background: #f1f5f9;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #334155;
  text-decoration: none;
  transition: background 0.2s ease;
  transition: background var(--cs-transition, 0.2s ease);
}
.sup-attachment-chip:hover { background: #e2e8f0; }

.sup-att-size { color: #94a3b8; }

/* ─── Reply Box ─────────────────────────────────────────────── */
.sup-reply-box {
  background: #fff;
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.sup-reply-mode {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
}

.sup-mode-btn {
  flex: 1 1;
  padding: 0.5rem;
  border: none;
  background: #f8fafc;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
}
.sup-mode-btn:hover { background: #f1f5f9; }
.sup-mode-btn.active {
  background: #fff;
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  box-shadow: inset 0 -2px 0 #1A80E5;
  box-shadow: inset 0 -2px 0 var(--cs-blue, #1A80E5);
}
.sup-mode-internal.active {
  color: #92400e;
  box-shadow: inset 0 -2px 0 #f59e0b;
}

.sup-reply-input {
  width: 100%;
  padding: 1rem 1.25rem;
  border: none;
  font-size: 0.875rem;
  color: #0f172a;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  box-sizing: border-box;
}
.sup-reply-input:focus { outline: none; }
.sup-reply-internal { background: #fffbeb; }

.sup-reply-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
}

.sup-reply-actions .sup-btn-primary { margin-left: auto; }

.sup-file-count {
  font-size: 0.75rem;
  color: #64748b;
}

.sup-closed-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #f1f5f9;
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  color: #475569;
  font-size: 0.875rem;
  font-weight: 500;
}
.sup-closed-banner svg { color: #22c55e; color: var(--cs-green, #22c55e); font-size: 1.125rem; }

/* ─── Detail Sidebar ────────────────────────────────────────── */
.sup-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: -webkit-sticky;
  position: sticky;
  top: 1.5rem;
}

.sup-sidebar-section {
  background: #fff;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  border: 1px solid #e2e8f0;
  padding: 1rem;
}

.sup-sidebar-section h4 {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin: 0 0 0.75rem;
}

.sup-sidebar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
}
.sup-sidebar-row + .sup-sidebar-row {
  border-top: 1px solid #f8fafc;
}

.sup-sidebar-label {
  color: #64748b;
  font-weight: 500;
}

.sup-sidebar-email {
  font-size: 0.75rem;
  color: #64748b;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sup-sidebar-select {
  padding: 0.3rem 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.8125rem;
  color: #334155;
  background: #fff;
  cursor: pointer;
  max-width: 150px;
}
.sup-sidebar-select:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
}

.sup-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sup-unassigned { color: #cbd5e1; font-style: italic; }

/* ─── Admin Panel (CloudStaff) ──────────────────────────────── */
.sup-admin-panel {
  width: 100%;
}

.sup-admin-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  margin-bottom: var(--cs-space-6, 1.5rem);
}

.sup-admin-stat-card {
  background: #fff;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
}
.sup-admin-stat-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  box-shadow: var(--cs-shadow, 0 2px 8px rgba(0,0,0,0.08));
  transform: translateY(-1px);
}

.sup-admin-stat-icon { font-size: 1.25rem; flex-shrink: 0; }

.sup-stat-open .sup-admin-stat-icon { color: #1A80E5; color: var(--cs-blue, #1A80E5); }
.sup-stat-progress .sup-admin-stat-icon { color: #f59e0b; color: var(--cs-amber, #f59e0b); }
.sup-stat-waiting .sup-admin-stat-icon { color: #8b5cf6; color: var(--cs-purple, #8b5cf6); }
.sup-stat-urgent .sup-admin-stat-icon { color: #ef4444; color: var(--cs-red, #ef4444); }
.sup-stat-response .sup-admin-stat-icon { color: #22c55e; color: var(--cs-green, #22c55e); }

.sup-admin-stat-body {
  display: flex;
  flex-direction: column;
}

.sup-admin-stat-count {
  font-size: 1.375rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.sup-admin-stat-label {
  font-size: 0.6875rem;
  color: #64748b;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.125rem;
}

/* Admin Table */
.sup-admin-table-wrap {
  background: #fff;
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  border: 1px solid #e2e8f0;
  overflow-x: auto;
}

.sup-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.sup-admin-table thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
  background: #f8fafc;
}

.sup-admin-row {
  cursor: pointer;
  transition: background 0.2s ease;
  transition: background var(--cs-transition, 0.2s ease);
}
.sup-admin-row:hover { background: #f8fafc; }
.sup-admin-row td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.sup-admin-ref {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-weight: 700;
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  font-size: 0.75rem;
  white-space: nowrap;
}

.sup-admin-subject-text {
  font-weight: 600;
  color: #0f172a;
  display: block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sup-admin-property {
  font-size: 0.6875rem;
  color: #0f766e;
  background: #f0fdfa;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  display: inline-block;
  margin-top: 0.125rem;
}

.sup-admin-user { color: #475569; white-space: nowrap; }
.sup-admin-cat { color: #64748b; }
.sup-admin-assigned { color: #334155; white-space: nowrap; }
.sup-admin-time {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #94a3b8;
  white-space: nowrap;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sup-admin-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .sup-container { padding: 1rem; padding-top: 88px; }
  .sup-stats-row { grid-template-columns: repeat(2, 1fr); }
  .sup-admin-stats { grid-template-columns: repeat(2, 1fr); }
  .sup-detail-layout {
    grid-template-columns: 1fr;
  }
  .sup-detail-sidebar {
    position: static;
    order: -1;
  }
  .sup-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sup-priority-row {
    flex-wrap: wrap;
  }
  .sup-priority-card { flex-grow: 0; flex-shrink: 0; flex-basis: calc(50% - 0.25rem); }
  .sup-create-card { padding: 1.25rem; }
}

@media (max-width: 480px) {
  .sup-header { flex-direction: column; align-items: flex-start; }
  .sup-stats-row { grid-template-columns: 1fr 1fr; }
  .sup-admin-stats { grid-template-columns: 1fr 1fr; }
  .sup-category-grid { grid-template-columns: 1fr; }
  .sup-toolbar { flex-wrap: wrap; }
  .sup-filters { flex-direction: column; }
  .sup-admin-filters { flex-direction: row; flex-wrap: wrap; }
  .sup-form-actions { flex-direction: column; }
  .sup-form-actions .sup-btn { width: 100%; justify-content: center; }
}

@media (max-width: 360px) {
  .sup-container { padding: 0.75rem; padding-top: 84px; }
  .sup-stat-card { padding: 0.75rem; }
  .sup-stat-count { font-size: 1.25rem; }
  .sup-ticket-row { padding: 0.75rem; }
  .sup-create-card { padding: 1rem; }
  .sup-message { padding: 1rem; }
  .sup-reply-input { padding: 0.75rem; }
}

/* ============================================================
   CRM Funnel View — CloudSafe Staff Portal
   Inherits cs-dashboard tokens from CloudStaffDashboard.css
   ============================================================ */

/* ─── Page Header ───────────────────────────────────────── */

.cfv-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.cfv-title {
  font-family: var(--ui);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-header);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.cfv-title svg {
  color: var(--primary);
  font-size: 1.1rem;
}

.cfv-subtitle {
  color: var(--text-2);
  font-size: 0.82rem;
  margin: 0.25rem 0 0;
  font-family: var(--mono);
}

/* ─── Tabs ──────────────────────────────────────────────── */

.cfv-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cfv-tab {
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--ui);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cfv-tab:hover {
  color: var(--text-bright);
  background: var(--primary-dim);
}

.cfv-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.cfv-tab-badge {
  background: var(--warning);
  color: #000;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
  font-family: var(--mono);
}

/* ─── Stat Cards ────────────────────────────────────────── */

.cfv-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cfv-stat-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  text-align: center;
}

.cfv-stat-value {
  font-family: var(--mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.cfv-stat-card.cfv-stat-success .cfv-stat-value { color: var(--success); }
.cfv-stat-card.cfv-stat-warning .cfv-stat-value { color: var(--warning); }
.cfv-stat-card.cfv-stat-danger .cfv-stat-value { color: var(--danger); }

.cfv-stat-label {
  font-size: 0.78rem;
  color: var(--text-2);
  font-family: var(--ui);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── Section Titles ────────────────────────────────────── */

.cfv-section-title {
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-header);
  margin: 0 0 1rem;
}

/* ─── Pipeline Stage Cards ──────────────────────────────── */

.cfv-stages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.cfv-stage-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.cfv-stage-card:hover {
  border-color: var(--stage-color);
  background: var(--surface-3);
}

.cfv-stage-card.active {
  border-color: var(--stage-color);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.12);
}

.cfv-stage-count {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--stage-color);
  line-height: 1;
}

.cfv-stage-name {
  font-size: 0.82rem;
  color: var(--text-bright);
  font-weight: 500;
  margin-top: 0.35rem;
}

.cfv-stage-meta {
  font-size: 0.72rem;
  color: var(--text-2);
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cfv-stage-access {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--success);
}

.cfv-stage-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--stage-color);
  border-radius: 0 3px 0 0;
  transition: width 0.4s ease;
}

/* ─── Filters ───────────────────────────────────────────── */

.cfv-filters {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.cfv-search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 0.75rem;
  flex: 1 1;
  min-width: 200px;
}

.cfv-search-box svg {
  color: var(--text-2);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.cfv-search-box input {
  background: none;
  border: none;
  color: var(--text-bright);
  font-family: var(--ui);
  font-size: 0.85rem;
  padding: 0.6rem 0;
  width: 100%;
  outline: none;
}

.cfv-search-box input::placeholder {
  color: var(--text-2);
}

.cfv-select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-bright);
  font-family: var(--ui);
  font-size: 0.82rem;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  outline: none;
}

.cfv-select:focus {
  border-color: var(--primary);
}

.cfv-select-sm {
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
}

.cfv-results-count {
  font-size: 0.78rem;
  color: var(--text-2);
  font-family: var(--mono);
  margin-bottom: 0.75rem;
}

/* ─── Buttons ───────────────────────────────────────────── */

.cfv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cfv-btn-primary {
  background: var(--primary);
  color: #020408;
  border-color: var(--primary);
}

.cfv-btn-primary:hover {
  background: #5bcefa;
}

.cfv-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cfv-btn-secondary {
  background: var(--surface-2);
  color: var(--text-bright);
  border-color: var(--border);
}

.cfv-btn-secondary:hover {
  border-color: var(--primary);
  background: var(--surface-3);
}

/* ─── Contacts List ─────────────────────────────────────── */

.cfv-contacts-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cfv-contact-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: border-color 0.2s;
}

.cfv-contact-row:hover {
  border-color: var(--border-hover);
}

.cfv-contact-row.expanded {
  border-color: var(--primary);
}

.cfv-contact-header {
  width: 100%;
  background: var(--surface-2);
  border: none;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  color: var(--text);
  text-align: left;
}

.cfv-contact-main {
  flex: 1 1;
  min-width: 0;
}

.cfv-contact-name {
  font-weight: 600;
  color: var(--text-header);
  font-size: 0.88rem;
  display: block;
}

.cfv-contact-email {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-2);
}

.cfv-contact-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.cfv-contact-chevron {
  color: var(--text-2);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* ─── Badges ────────────────────────────────────────────── */

.cfv-stage-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--ui);
  background: color-mix(in srgb, var(--stage-color) 15%, transparent);
  color: var(--stage-color);
  border: 1px solid color-mix(in srgb, var(--stage-color) 30%, transparent);
}

.cfv-access-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--ui);
}

.cfv-access-active {
  background: var(--success-dim);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.cfv-access-none {
  background: var(--danger-dim);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

/* ─── Contact Detail Panel ──────────────────────────────── */

.cfv-contact-detail {
  padding: 1rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.cfv-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.25rem;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.cfv-detail-section h4 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-header);
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cfv-owner-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.5rem;
  border-radius: 99px;
  font-weight: 500;
  background: var(--primary-dim);
  color: var(--primary);
}

.cfv-owner-sql {
  background: var(--accent-dim);
  color: var(--accent);
}

.cfv-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-dim);
  font-size: 0.8rem;
}

.cfv-detail-row > span:first-child {
  color: var(--text-2);
  font-weight: 500;
}

.cfv-detail-row > span:last-child,
.cfv-detail-row > select {
  color: var(--text-bright);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.cfv-no-access {
  color: var(--text-2);
  font-size: 0.82rem;
  font-style: italic;
  padding: 0.5rem 0;
}

/* ─── Tags ──────────────────────────────────────────────── */

.cfv-tags-section h4 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-header);
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cfv-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cfv-tag {
  background: var(--surface-3);
  color: var(--text);
  font-size: 0.72rem;
  font-family: var(--mono);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  border: 1px solid var(--border-dim);
}

/* ─── Stage History ─────────────────────────────────────── */

.cfv-history-section h4 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-header);
  margin: 1rem 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cfv-history-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border-dim);
  flex-wrap: wrap;
}

.cfv-history-from { color: var(--text-2); }
.cfv-history-arrow { color: var(--primary); }
.cfv-history-to { color: var(--text-bright); font-weight: 500; }
.cfv-history-meta {
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  margin-left: auto;
}

/* ─── Reconcile Section ─────────────────────────────────── */

.cfv-reconcile-section {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
}

.cfv-reconcile-bar {
  width: 100%;
  height: 8px;
  background: var(--surface-3);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.cfv-reconcile-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--success));
  border-radius: 99px;
  transition: width 0.6s ease;
}

.cfv-reconcile-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-2);
  font-family: var(--mono);
}

.cfv-reconcile-text span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.cfv-reconcile-full {
  max-width: 800px;
}

.cfv-reconcile-header p {
  color: var(--text-2);
  font-size: 0.85rem;
  margin: 0.5rem 0 1.5rem;
}

.cfv-reconcile-header code {
  background: var(--surface-3);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--primary);
}

.cfv-reconcile-actions {
  display: flex;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.cfv-reconcile-results h4 {
  color: var(--text-header);
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}

.cfv-reconcile-summary {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  flex-wrap: wrap;
}

.cfv-reconcile-summary span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text);
}

.cfv-icon-success { color: var(--success); }
.cfv-icon-warning { color: var(--warning); }
.cfv-icon-danger { color: var(--danger); }

.cfv-reconcile-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cfv-reconcile-detail-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 0.78rem;
  border: 1px solid var(--border-dim);
}

.cfv-reconcile-email {
  font-family: var(--mono);
  color: var(--text-bright);
  min-width: 180px;
}

.cfv-reconcile-action {
  font-weight: 500;
  color: var(--text);
}

.cfv-reconcile-reason {
  color: var(--text-2);
  font-size: 0.72rem;
  margin-left: auto;
}

.cfv-reconcile-ok { border-left: 3px solid var(--success); }
.cfv-reconcile-skip { border-left: 3px solid var(--warning); }
.cfv-reconcile-error { border-left: 3px solid var(--danger); }

/* ─── Loading / Empty ───────────────────────────────────── */

.cfv-loading, .cfv-empty {
  text-align: center;
  padding: 3rem;
  color: var(--text-2);
  font-size: 0.9rem;
}

/* ─── Spin animation ────────────────────────────────────── */

@keyframes cfv-spin {
  to { transform: rotate(360deg); }
}

.cfv-spin {
  animation: cfv-spin 1s linear infinite;
}

/* ─── Responsive ────────────────────────────────────────── */

@media (max-width: 768px) {
  .cfv-detail-grid {
    grid-template-columns: 1fr;
  }

  .cfv-contact-badges {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
  }

  .cfv-history-meta {
    margin-left: 0;
    width: 100%;
  }

  .cfv-reconcile-text {
    flex-direction: column;
    gap: 0.3rem;
  }
}

@media (max-width: 480px) {
  .cfv-stages-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cfv-filters {
    flex-direction: column;
  }

  .cfv-search-box {
    min-width: 0;
    min-width: initial;
  }

  .cfv-contact-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .cfv-contact-badges {
    flex-direction: row;
  }

  .cfv-reconcile-detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .cfv-reconcile-email {
    min-width: 0;
    min-width: initial;
  }

  .cfv-reconcile-reason {
    margin-left: 0;
  }

  .cfv-reconcile-actions {
    flex-direction: column;
  }
}

/* ============================================
   Building Manager Dashboard — CloudSafe Design System
   Extends ContractorDashboard.css base layout.
   All colours via var(--cs-*) tokens from tokens.css
   ============================================ */

/* ── Header tweaks ───────────────────────────── */
.bm-dashboard .header-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.bm-dashboard .bm-header-user-icon,
.bm-dashboard .header-user-icon.bm-header-user-icon {
  color: #1A80E5 !important;
  color: var(--cs-blue, #1A80E5) !important;
  opacity: 1 !important;
}

.bm-dashboard .header-badge-label {
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  opacity: 0.85;
  margin-right: 0.25rem;
}

.bm-dashboard .header-contractor-id {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.bm-property-select {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 0.4rem 0.6rem;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  cursor: pointer;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  font-family: inherit;
}

.bm-property-select:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 2px rgba(26, 128, 229, 0.3);
}

.bm-property-name {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  opacity: 0.9;
}

/* ── User dropdown ───────────────────────────── */
.bm-user-menu-wrap {
  position: relative;
}

.bm-user-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: #fff;
  background: var(--cs-white, #fff);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  box-shadow: var(--cs-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  min-width: 140px;
  overflow: hidden;
  z-index: 100;
  z-index: var(--cs-z-dropdown, 100);
}

.bm-user-dropdown a,
.bm-user-dropdown button {
  display: block;
  width: 100%;
  padding: 0.6rem 1rem;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  text-decoration: none;
  font-family: inherit;
  transition: background 0.12s ease;
  transition: background var(--cs-transition-fast, 0.12s ease);
}

.bm-user-dropdown a:hover,
.bm-user-dropdown button:hover {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
}

/* ── Main content area ───────────────────────── */
.bm-main {
  padding-bottom: 2rem;
}

/* ── Stat cards (Today panel) ────────────────── */
.bm-stats-grid {
  margin-bottom: 1.25rem;
  margin-bottom: var(--cs-space-5, 1.25rem);
}

.bm-icon-onsite {
  background: #EBF4FF !important;
  background: var(--cs-blue-light, #EBF4FF) !important;
  color: #1A80E5 !important;
  color: var(--cs-blue, #1A80E5) !important;
}

.bm-icon-visits {
  background: #f0fdfa !important;
  background: var(--cs-teal-light, #f0fdfa) !important;
  color: #0f766e !important;
  color: var(--cs-teal-dark, #0f766e) !important;
}

.bm-icon-jobs {
  background: #fffbeb !important;
  background: var(--cs-amber-light, #fffbeb) !important;
  color: #d97706 !important;
  color: var(--cs-amber-dark, #d97706) !important;
}

.bm-icon-upcoming {
  background: #f5f3ff !important;
  background: var(--cs-purple-light, #f5f3ff) !important;
  color: #7c3aed !important;
  color: var(--cs-purple-dark, #7c3aed) !important;
}

/* ── Empty state (no buildings assigned) ─────── */
.bm-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  padding: var(--cs-space-12, 3rem) var(--cs-space-6, 1.5rem);
  max-width: 480px;
  margin: 2rem auto;
  margin: var(--cs-space-8, 2rem) auto;
}

.bm-empty-icon {
  font-size: 3rem;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  margin-bottom: 1rem;
  margin-bottom: var(--cs-space-4, 1rem);
}

.bm-empty-state h2 {
  font-size: 1.25rem;
  font-size: var(--cs-text-2xl, 1.25rem);
  margin: 0 0 0.5rem;
  margin: 0 0 var(--cs-space-2, 0.5rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-weight: 700;
}

.bm-empty-state p {
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  margin: 0 0 1rem;
  margin: 0 0 var(--cs-space-4, 1rem);
  line-height: 1.5;
}

.bm-empty-hint {
  font-size: 0.8125rem !important;
  font-size: var(--cs-text-sm, 0.8125rem) !important;
  color: #9ca3af !important;
  color: var(--cs-text-faint, #9ca3af) !important;
}

/* ── Buttons ─────────────────────────────────── */
.bm-btn {
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  margin: 0.25rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid transparent;
  font-family: inherit;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  min-height: 44px;
}

.bm-btn-primary {
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  color: var(--cs-white, #fff);
}

.bm-btn-primary:hover {
  background: #1565C0;
  background: var(--cs-blue-dark, #1565C0);
  box-shadow: 0 2px 6px rgba(26, 128, 229, 0.25);
}

.bm-btn-outline {
  background: transparent;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  border-color: #d1d5db;
  border-color: var(--cs-border-dark, #d1d5db);
}

.bm-btn-outline:hover {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

/* ── Scan tab ────────────────────────────────── */
.bm-scan {
  padding: 0;
}

.bm-scanner-panel {
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  box-shadow: var(--cs-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  overflow: hidden;
}

.bm-scanner-area {
  padding: 1.5rem;
  padding: var(--cs-space-6, 1.5rem);
}

.bm-start-scan {
  text-align: center;
  padding: 2rem;
  padding: var(--cs-space-8, 2rem);
}

.bm-scan-icon {
  font-size: 3rem;
  color: #d1d5db;
  color: var(--cs-border-dark, #d1d5db);
  margin-bottom: 1rem;
  margin-bottom: var(--cs-space-4, 1rem);
}

.bm-start-scan p {
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  margin-bottom: 1.25rem;
  margin-bottom: var(--cs-space-5, 1.25rem);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  line-height: 1.5;
}

.bm-start-scan-btn {
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  color: var(--cs-white, #fff);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  min-height: 44px;
}

.bm-start-scan-btn:hover {
  background: #1565C0;
  background: var(--cs-blue-dark, #1565C0);
  box-shadow: 0 2px 8px rgba(26, 128, 229, 0.25);
}

/* Video scanner */
.bm-video-wrap {
  position: relative;
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  overflow: hidden;
  background: #000;
  aspect-ratio: 4/3;
  max-height: 360px;
}

.bm-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bm-canvas {
  display: none;
}

.bm-scan-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bm-scan-frame {
  width: 180px;
  height: 180px;
  border: 3px solid rgba(26, 128, 229, 0.7);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
  animation: bm-pulse 2s ease-in-out infinite;
}

@keyframes bm-pulse {
  0%, 100% { border-color: rgba(26, 128, 229, 0.7); }
  50% { border-color: rgba(26, 128, 229, 1); }
}

.bm-stop-scan {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(220, 38, 38, 0.9);
  color: #fff;
  color: var(--cs-white, #fff);
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  min-height: 40px;
}

/* Search form */
.bm-search-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  padding: var(--cs-space-4, 1rem) var(--cs-space-6, 1.5rem);
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
}

.bm-search-icon {
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  font-size: 1rem;
  flex-shrink: 0;
}

.bm-search-input {
  flex: 1 1;
  border: none;
  background: none;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  padding: 0.5rem 0;
  outline: none;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  font-family: inherit;
}

.bm-search-btn {
  background: #1A80E5;
  background: var(--cs-blue, #1A80E5);
  color: #fff;
  color: var(--cs-white, #fff);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease;
  transition: background var(--cs-transition, 0.2s ease);
  min-height: 40px;
}

.bm-search-btn:hover {
  background: #1565C0;
  background: var(--cs-blue-dark, #1565C0);
}

.bm-search-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Scanned person card ─────────────────────── */
.bm-person-card {
  margin: 1rem 1.5rem 1.5rem;
  margin: var(--cs-space-4, 1rem) var(--cs-space-6, 1.5rem) var(--cs-space-6, 1.5rem);
  border: 2px solid #e5e7eb;
  border: 2px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  overflow: hidden;
}

.bm-validation-banner {
  padding: 0.6rem 1rem;
  padding: 0.6rem var(--cs-space-4, 1rem);
  color: #fff;
  color: var(--cs-white, #fff);
  font-weight: 600;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bm-person-details {
  display: flex;
  align-items: center;
  gap: 1rem;
  gap: var(--cs-space-4, 1rem);
  padding: 1rem 1.25rem;
  padding: var(--cs-space-4, 1rem) var(--cs-space-5, 1.25rem);
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
}

.bm-person-avatar {
  font-size: 2.5rem;
  color: #d1d5db;
  color: var(--cs-border-dark, #d1d5db);
  flex-shrink: 0;
}

.bm-person-details h2 {
  margin: 0;
  font-size: 1.125rem;
  font-size: var(--cs-text-xl, 1.125rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.bm-person-role {
  display: inline-block;
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1565C0;
  color: var(--cs-blue-dark, #1565C0);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border-radius: var(--cs-radius-sm, 4px);
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 600;
  margin-top: 0.25rem;
  text-transform: capitalize;
}

.bm-person-company {
  display: block;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  margin-top: 0.2rem;
}

.bm-person-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  padding: var(--cs-space-4, 1rem) var(--cs-space-5, 1.25rem);
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
}

.bm-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.bm-meta-item svg {
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.bm-meta-item label {
  display: block;
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-weight: 500;
}

.bm-meta-item span {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 500;
}

.bm-meta-item .valid {
  color: #16a34a;
  color: var(--cs-green-dark, #16a34a);
  font-weight: 600;
}

.bm-meta-item .invalid {
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
  font-weight: 600;
}

/* Active jobs on person */
.bm-person-jobs {
  padding: 0.75rem 1.25rem;
  padding: 0.75rem var(--cs-space-5, 1.25rem);
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
}

.bm-person-jobs h4 {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.bm-job-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  cursor: pointer;
  margin-bottom: 0.3rem;
  border: 2px solid transparent;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  transition: all 0.12s ease;
  transition: all var(--cs-transition-fast, 0.12s ease);
}

.bm-job-item:hover {
  background: rgba(255, 255, 255, 0.5);
}

.bm-job-item.selected {
  background: #fff;
  background: var(--cs-white, #fff);
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
}

/* Check-in form */
.bm-checkin-form {
  padding: 1rem 1.25rem;
  padding: var(--cs-space-4, 1rem) var(--cs-space-5, 1.25rem);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.bm-reason-input {
  flex: 1 1;
  min-width: 150px;
  border: 2px solid #e5e7eb;
  border: 2px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 0.6rem 1rem;
  padding: 0.6rem var(--cs-space-4, 1rem);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-family: inherit;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  transition: border-color 0.2s ease;
  transition: border-color var(--cs-transition, 0.2s ease);
}

.bm-reason-input:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.12);
}

.bm-checkin-btn {
  border: none;
  color: #fff;
  color: var(--cs-white, #fff);
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  min-height: 44px;
}

.bm-checkin-btn.valid {
  background: #16a34a;
  background: var(--cs-green-dark, #16a34a);
}

.bm-checkin-btn.valid:hover {
  background: #22c55e;
  background: var(--cs-green, #22c55e);
}

.bm-checkin-btn.warning {
  background: #d97706;
  background: var(--cs-amber-dark, #d97706);
}

.bm-checkin-btn.warning:hover {
  background: #f59e0b;
  background: var(--cs-amber, #f59e0b);
}

.bm-checkin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bm-clear-btn {
  width: 100%;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  border: none;
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
  padding: 0.6rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: pointer;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-family: inherit;
  transition: background 0.12s ease;
  transition: background var(--cs-transition-fast, 0.12s ease);
  min-height: 44px;
}

.bm-clear-btn:hover {
  background: #e5e7eb;
  background: var(--cs-border, #e5e7eb);
}

/* ── Section title ───────────────────────────── */
.bm-section-title {
  font-size: 1.125rem;
  font-size: var(--cs-text-xl, 1.125rem);
  margin: 0 0 1rem;
  margin: 0 0 var(--cs-space-4, 1rem);
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

/* ── Jobs tab ────────────────────────────────── */
.bm-jobs {
  padding: 0;
}

.bm-jobs-loading {
  text-align: center;
  padding: 2rem;
  padding: var(--cs-space-8, 2rem);
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

.bm-loading-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
}

.bm-jobs-subtitle {
  font-size: 0.9375rem;
  font-size: var(--cs-text-md, 0.9375rem);
  font-weight: 600;
  margin: 0 0 0.75rem;
  margin: 0 0 var(--cs-space-3, 0.75rem);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
}

.bm-job-card {
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  padding: 1rem;
  padding: var(--cs-space-4, 1rem);
  margin-bottom: 0.75rem;
  margin-bottom: var(--cs-space-3, 0.75rem);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--cs-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  cursor: pointer;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
}

.bm-job-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-shadow: var(--cs-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
}

.bm-job-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.bm-job-top h3 {
  margin: 0;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.bm-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  margin-top: 0.5rem;
  margin-top: var(--cs-space-2, 0.5rem);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.bm-job-meta span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.bm-jobs-empty {
  text-align: center;
  padding: 2rem 1rem;
  padding: var(--cs-space-8, 2rem) var(--cs-space-4, 1rem);
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

.bm-jobs-empty svg {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  margin-bottom: var(--cs-space-2, 0.5rem);
}

.bm-jobs-empty p {
  margin: 0;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
}

/* ── Calendar tab ────────────────────────────── */
.bm-calendar {
  padding: 0;
}

/* ── On-site tab ─────────────────────────────── */
.bm-onsite-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  padding: 1rem;
  padding: var(--cs-space-4, 1rem);
  margin-bottom: 0.75rem;
  margin-bottom: var(--cs-space-3, 0.75rem);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--cs-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
}

.bm-onsite-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  flex: 1 1;
  min-width: 0;
}

.bm-onsite-avatar {
  font-size: 1.75rem;
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  flex-shrink: 0;
}

.bm-onsite-name {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.bm-onsite-detail {
  display: block;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.bm-onsite-time {
  display: block;
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

.bm-signout-btn {
  background: #fef2f2;
  background: var(--cs-red-light, #fef2f2);
  color: #dc2626;
  color: var(--cs-red-dark, #dc2626);
  border: 1px solid #fecaca;
  border: 1px solid var(--cs-red-border, #fecaca);
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  transition: all 0.2s ease;
  transition: all var(--cs-transition, 0.2s ease);
  min-height: 40px;
  white-space: nowrap;
  flex-shrink: 0;
}

.bm-signout-btn:hover {
  background: #fecaca;
  background: var(--cs-red-border, #fecaca);
}

/* Today's history */
.bm-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  padding: var(--cs-space-3, 0.75rem) 0;
  border-bottom: 1px solid #f3f4f6;
  border-bottom: 1px solid var(--cs-bg, #f3f4f6);
}

.bm-hist-name {
  display: block;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 500;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.bm-hist-reason {
  display: block;
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.bm-hist-times {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Generic empty state ─────────────────────── */
.bm-empty {
  text-align: center;
  padding: 2rem 1rem;
  padding: var(--cs-space-8, 2rem) var(--cs-space-4, 1rem);
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

.bm-empty svg {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  margin-bottom: var(--cs-space-2, 0.5rem);
}

.bm-empty p {
  margin: 0;
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
}

/* ── Feedback & Complaints tab ───────────────── */
.bm-feedback-complaints {
  padding: 0;
}

.bm-fc-intro {
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  margin: 0 0 1.25rem;
  margin: 0 0 var(--cs-space-5, 1.25rem);
  line-height: 1.5;
}

.bm-fc-recent-jobs {
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  padding: 1rem 1.25rem;
  padding: var(--cs-space-4, 1rem) var(--cs-space-5, 1.25rem);
  margin-bottom: 1.25rem;
  margin-bottom: var(--cs-space-5, 1.25rem);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--cs-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
}

.bm-fc-subtitle {
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-weight: 600;
  margin: 0 0 0.75rem;
  margin: 0 0 var(--cs-space-3, 0.75rem);
  color: #374151;
  color: var(--cs-text-secondary, #374151);
}

.bm-fc-job-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  gap: var(--cs-space-2, 0.5rem);
}

.bm-fc-job-chip-wrap {
  display: inline-block;
}

.bm-fc-job-chip {
  display: block;
  text-align: left;
  padding: 0.5rem 0.75rem;
  padding: var(--cs-space-2, 0.5rem) var(--cs-space-3, 0.75rem);
  border: 2px solid #e5e7eb;
  border: 2px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  background: #fff;
  background: var(--cs-white, #fff);
  cursor: pointer;
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  font-family: inherit;
  transition: all 0.12s ease;
  transition: all var(--cs-transition-fast, 0.12s ease);
}

.bm-fc-job-chip:hover {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
}

.bm-fc-job-chip.selected {
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  background: rgba(26, 128, 229, 0.12);
}

.bm-fc-job-title {
  display: block;
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.bm-fc-job-meta {
  display: block;
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  margin-top: 0.15rem;
}

.bm-fc-no-jobs {
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
  margin: 0;
}

/* Forms box */
.bm-fc-forms-box {
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 12px;
  border-radius: var(--cs-radius-lg, 12px);
  padding: 1.25rem;
  padding: var(--cs-space-5, 1.25rem);
  margin-bottom: 1.25rem;
  margin-bottom: var(--cs-space-5, 1.25rem);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--cs-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
}

.bm-fc-form-section {
  padding-bottom: 1.25rem;
  padding-bottom: var(--cs-space-5, 1.25rem);
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
}

.bm-fc-form-section:last-of-type {
  padding-top: 1.25rem;
  padding-top: var(--cs-space-5, 1.25rem);
  padding-bottom: 0;
  border-bottom: none;
}

.bm-fc-form-title {
  font-size: 0.9375rem;
  font-size: var(--cs-text-md, 0.9375rem);
  font-weight: 600;
  margin: 0 0 0.75rem;
  margin: 0 0 var(--cs-space-3, 0.75rem);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.bm-fc-form-title svg {
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
}

.bm-fc-linked-job {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #1A80E5;
  color: var(--cs-blue, #1A80E5);
  margin: 0 0 0.5rem;
  margin: 0 0 var(--cs-space-2, 0.5rem);
  font-weight: 500;
}

.bm-fc-recent {
  margin-top: 1.25rem;
  margin-top: var(--cs-space-5, 1.25rem);
}

.bm-fc-job-tag {
  display: inline-block;
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1565C0;
  color: var(--cs-blue-dark, #1565C0);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border-radius: var(--cs-radius-sm, 4px);
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 600;
  margin-right: 0.5rem;
  margin-right: var(--cs-space-2, 0.5rem);
}

/* Feedback forms (inside forms box) */
.bm-feedback-form,
.bm-complaint-form {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
}

.bm-feedback-textarea,
.bm-complaint-textarea {
  width: 100%;
  border: 2px solid #e5e7eb;
  border: 2px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  border-radius: var(--cs-radius, 8px);
  padding: 0.75rem 1rem;
  padding: var(--cs-space-3, 0.75rem) var(--cs-space-4, 1rem);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  font-family: inherit;
  resize: vertical;
  margin-bottom: 0.75rem;
  margin-bottom: var(--cs-space-3, 0.75rem);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  transition: border-color 0.2s ease;
  transition: border-color var(--cs-transition, 0.2s ease);
  box-sizing: border-box;
}

.bm-feedback-textarea:focus,
.bm-complaint-textarea:focus {
  outline: none;
  border-color: #1A80E5;
  border-color: var(--cs-blue, #1A80E5);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.12);
}

.bm-feedback-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  margin-bottom: var(--cs-space-3, 0.75rem);
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.bm-star {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #d1d5db;
  color: var(--cs-border-dark, #d1d5db);
  cursor: pointer;
  padding: 0.15rem;
  transition: color 0.12s ease;
  transition: color var(--cs-transition-fast, 0.12s ease);
}

.bm-star.active {
  color: #f59e0b;
  color: var(--cs-amber, #f59e0b);
}

.bm-star:hover {
  color: #f59e0b;
  color: var(--cs-amber, #f59e0b);
}

/* Feedback/complaint items */
.bm-feedback-item,
.bm-complaint-item {
  background: #fff;
  background: var(--cs-white, #fff);
  border-radius: 10px;
  border-radius: var(--cs-radius-md, 10px);
  padding: 1rem;
  padding: var(--cs-space-4, 1rem);
  margin-bottom: 0.75rem;
  margin-bottom: var(--cs-space-3, 0.75rem);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--cs-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
}

.bm-feedback-item p,
.bm-complaint-item p {
  margin: 0 0 0.5rem;
  margin: 0 0 var(--cs-space-2, 0.5rem);
  font-size: 0.875rem;
  font-size: var(--cs-text-base, 0.875rem);
  line-height: 1.5;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.bm-feedback-meta,
.bm-complaint-meta {
  font-size: 0.8125rem;
  font-size: var(--cs-text-sm, 0.8125rem);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--cs-space-3, 0.75rem);
  flex-wrap: wrap;
}

/* Complaint status badges */
.bm-status-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border-radius: var(--cs-radius-sm, 4px);
  font-size: 0.7rem;
  font-size: var(--cs-text-xs, 0.7rem);
  font-weight: 600;
  text-transform: capitalize;
}

.bm-status-badge.open {
  background: #fffbeb;
  background: var(--cs-amber-light, #fffbeb);
  color: #d97706;
  color: var(--cs-amber-dark, #d97706);
}

.bm-status-badge.acknowledged {
  background: #EBF4FF;
  background: var(--cs-blue-light, #EBF4FF);
  color: #1565C0;
  color: var(--cs-blue-dark, #1565C0);
}

.bm-status-badge.resolved {
  background: #f0fdf4;
  background: var(--cs-green-light, #f0fdf4);
  color: #16a34a;
  color: var(--cs-green-dark, #16a34a);
}

/* ── Focus styles (a11y) ─────────────────────── */
.bm-dashboard button:focus-visible,
.bm-dashboard a:focus-visible,
.bm-dashboard input:focus-visible,
.bm-dashboard textarea:focus-visible,
.bm-dashboard select:focus-visible {
  outline: 2px solid #1A80E5;
  outline: 2px solid var(--cs-blue, #1A80E5);
  outline-offset: 2px;
}

/* ── Responsive: Tablet ──────────────────────── */
@media (max-width: 768px) {
  .bm-main {
    padding: 1rem;
    padding: var(--cs-space-4, 1rem);
    padding-bottom: 2rem;
  }

  .bm-stats-grid {
    margin-bottom: 1rem;
    margin-bottom: var(--cs-space-4, 1rem);
  }

  .bm-checkin-form {
    flex-direction: column;
  }

  .bm-checkin-btn {
    width: 100%;
    justify-content: center;
  }

  .bm-person-meta {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    gap: var(--cs-space-2, 0.5rem);
  }

  .bm-scanner-area {
    padding: 1rem;
    padding: var(--cs-space-4, 1rem);
  }

  .bm-start-scan {
    padding: 1.25rem 1rem;
    padding: var(--cs-space-5, 1.25rem) var(--cs-space-4, 1rem);
  }

  .bm-search-form {
    padding: 0.75rem 1rem;
    padding: var(--cs-space-3, 0.75rem) var(--cs-space-4, 1rem);
  }

  .bm-person-card {
    margin: 0.75rem;
    margin: var(--cs-space-3, 0.75rem);
  }

  .bm-fc-job-list {
    flex-direction: column;
  }

  .bm-fc-job-chip {
    width: 100%;
  }
}

/* ── Responsive: Small Mobile ────────────────── */
@media (max-width: 480px) {
  .bm-main {
    padding: 0.75rem;
    padding: var(--cs-space-3, 0.75rem);
    padding-bottom: 2rem;
  }

  .bm-job-top {
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
  }

  .bm-onsite-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    gap: var(--cs-space-3, 0.75rem);
  }

  .bm-signout-btn {
    width: 100%;
    justify-content: center;
  }

  .bm-history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .bm-feedback-item,
  .bm-complaint-item {
    padding: 0.75rem;
    padding: var(--cs-space-3, 0.75rem);
  }
}

/* FM uses main-container + dashboard-header from Dashboard.css for same look. */

/* Nav link as button (same style as Dashboard nav-link) */
.fm-nav-badge {
  margin-left: 4px;
  background: #1A80E5;
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
}

.fm-property-select-in-header {
  background: #eff2f4;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: #334151;
  cursor: pointer;
  min-width: 160px;
}

.fm-empty-state-text {
  color: #6b7280;
  font-size: 0.95rem;
  margin: 1rem 0;
}

/* Other tab: quick links + contractors */
.fm-other {
  max-width: 1000px;
}

.fm-other-section {
  margin-bottom: 2.5rem;
}

.fm-other-section:last-child {
  margin-bottom: 0;
}

.fm-other-title {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  color: #374151;
}

.fm-other-desc {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #6b7280;
}

.fm-other-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.fm-other-section-header .fm-other-title {
  margin: 0;
}

.fm-other-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.fm-other-link-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.875rem 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.fm-other-link-card:hover {
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.fm-other-link-icon {
  font-size: 1.25rem;
}

.fm-other-link-label {
  flex: 1 1;
}

.fm-other-link-arrow {
  font-size: 0.75rem;
  color: #9ca3af;
}

.fm-other-link-card:hover .fm-other-link-arrow {
  color: #2563eb;
}

.fm-other-select-hint {
  margin: 0;
  font-size: 0.9rem;
  color: #9ca3af;
}

.fm-other-empty {
  padding: 2rem;
}

.fm-other-empty .empty-icon {
  margin-bottom: 0.75rem;
}

.fm-company-code {
  background: #f3f4f6;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* Contractors table – Actions column */
.fm-actions-th {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-right: 1rem;
}

.fm-actions-cell {
  white-space: nowrap;
  text-align: right;
  padding-right: 1rem;
  vertical-align: middle;
}

.fm-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin-left: 4px;
}

.fm-btn-icon:first-child {
  margin-left: 0;
}

.fm-btn-edit {
  background: #eff6ff;
  color: #1d4ed8;
}

.fm-btn-edit:hover {
  background: #dbeafe;
  color: #1e40af;
}

.fm-btn-remove {
  background: #fef2f2;
  color: #dc2626;
}

.fm-btn-remove:hover {
  background: #fee2e2;
  color: #b91c1c;
}

.fm-edit-hint {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 12px 0 0;
  line-height: 1.4;
}

/* ─── Properties View ───────────────────────── */
.fm-dashboard .dashboard-content {
  padding: 1.5rem;
  padding-top: calc(80px + 1.5rem);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.fm-dashboard .dashboard-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.fm-dashboard .dashboard-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
}

.fm-dashboard .dashboard-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: #6b7280;
}

.fm-dashboard .add-property-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  background: #1A80E5;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.fm-dashboard .add-property-btn:hover {
  background: #1565c0;
}

.fm-dashboard .search-section {
  margin-bottom: 1.5rem;
}

.fm-dashboard .search-bar {
  position: relative;
  width: 100%;
  border: none;
  padding: 0;
  background: none;
  box-shadow: none;
}

.fm-dashboard .search-bar-full-width {
  width: 100%;
}

.fm-dashboard .search-input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.fm-dashboard .search-input {
  width: 100%;
  padding: 0.625rem 2.25rem 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #374151;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
  margin: 0;
}

.fm-dashboard .search-input:focus {
  border-color: #1A80E5;
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.1);
}

.fm-dashboard .search-input::placeholder {
  color: #9ca3af;
}

.fm-dashboard .clear-search {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  font-size: 0.85rem;
}

.fm-dashboard .clear-search:hover {
  color: #6b7280;
}

.fm-dashboard .properties-overview {
  margin-bottom: 1.5rem;
}

.fm-dashboard .section-title {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
  text-align: left;
}

.fm-dashboard .properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Constrain property card images in this grid */
.fm-dashboard .properties-grid .pc-thumb {
  aspect-ratio: 16 / 9;
}

/* Legacy placeholder (kept for any refs) */
.fm-other-placeholder {
  padding: 2rem;
  text-align: center;
  color: #9ca3af;
  font-size: 0.95rem;
}

.fm-add-contractor-hint {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 0 0 1rem;
  line-height: 1.45;
}

.fm-add-contractor-no-property {
  color: #b45309;
  font-size: 0.9rem;
  margin: 0;
}

.fm-add-contractor-error {
  color: #dc2626;
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}

/* Add Contractor – confirm step (same pattern as owner add FM) */
.fm-contractor-verify-box {
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 16px;
  margin: 8px 0 16px;
}

.fm-contractor-verify-label {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.fm-contractor-verify-value {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 12px;
}

.fm-contractor-verify-value:last-of-type {
  margin-bottom: 0;
}

.fm-contractor-verify-code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 16px;
  letter-spacing: 0.05em;
}

.cs-input.cs-readonly {
  background: #f3f4f6;
  cursor: default;
}

/* Legacy tab styles kept for any remaining references */
.fm-tab {
  background: none;
  border: none;
  padding: 0.875rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
  position: relative;
}

.fm-tab.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.fm-tab:hover { color: #374151; }

.tab-badge {
  background: #059669;
  color: white;
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

/* Content */
.fm-content {
  flex: 1 1;
  padding: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.fm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
}

.fm-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════
   FM Overview — Premium Redesign (fmo- prefix)
   ═══════════════════════════════════════════════════════ */

/* Hero Banner */
.fmo-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.fmo-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #1e3a5f;
}

.fmo-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 40, 75, 0.72) 0%, rgba(26, 128, 229, 0.45) 100%);
}

.fmo-hero-content {
  position: relative;
  z-index: 1;
  min-height: 180px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2rem 2rem 1.75rem;
  gap: 1rem;
}

.fmo-hero-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.fmo-hero-address {
  margin: 0.35rem 0 0;
  color: rgba(255,255,255,0.82);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.fmo-hero-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
  align-self: flex-end;
}

.fmo-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: #fff;
  color: #1A80E5;
  transition: transform 0.15s, box-shadow 0.15s;
}

.fmo-hero-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.fmo-hero-btn-outline {
  background: rgba(255,255,255,0.15);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.3);
}

.fmo-hero-btn-outline:hover {
  background: rgba(255,255,255,0.25);
}

/* KPI Strip */
.fmo-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.fmo-kpi {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 1rem 1.15rem;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  text-align: left;
}

.fmo-kpi:hover {
  border-color: #1A80E5;
  box-shadow: 0 4px 16px rgba(26, 128, 229, 0.1);
  transform: translateY(-2px);
}

.fmo-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.fmo-kpi-blue  { background: #eff6ff; color: #2563eb; }
.fmo-kpi-purple { background: #f3e8ff; color: #7c3aed; }
.fmo-kpi-amber  { background: #fffbeb; color: #d97706; }
.fmo-kpi-green  { background: #ecfdf5; color: #059669; }
.fmo-kpi-red    { background: #fef2f2; color: #dc2626; }

.fmo-kpi-data {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fmo-kpi-value {
  font-size: 1.55rem;
  font-weight: 800;
  color: #111827;
  line-height: 1;
  letter-spacing: -0.02em;
}

.fmo-kpi-label {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.2rem;
  font-weight: 500;
  white-space: nowrap;
}

.fmo-kpi-pulse {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  background: #059669;
  border-radius: 50%;
  animation: fmoPulse 2s ease-in-out infinite;
}

@keyframes fmoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5,150,105,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(5,150,105,0); }
}

.fmo-kpi-alert {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #dc2626;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

/* Main Grid */
.fmo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1.25rem;
  gap: 1.25rem;
}

/* Panel (shared card style) */
.fmo-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fmo-panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid #f0f0f0;
}

.fmo-panel-header h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1;
}

.fmo-panel-header h3 svg {
  color: #6b7280;
  font-size: 0.85rem;
}

.fmo-view-all {
  background: none;
  border: none;
  color: #1A80E5;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s;
  white-space: nowrap;
}

.fmo-view-all:hover {
  background: #eff6ff;
}

.fmo-panel-body {
  padding: 0.75rem 1.15rem;
  flex: 1 1;
}

/* Compliance Panel */
.fmo-compliance-panel {
  grid-column: 1;
}

.fmo-compliance-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.fmo-ring-wrap {
  position: relative;
  width: 130px;
  height: 130px;
}

.fmo-ring-svg {
  width: 100%;
  height: 100%;
}

.fmo-ring-progress {
  transition: stroke-dashoffset 1s ease;
}

.fmo-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fmo-ring-pct {
  font-size: 1.65rem;
  font-weight: 800;
  color: #111827;
  line-height: 1;
}

.fmo-ring-sub {
  font-size: 0.72rem;
  color: #6b7280;
  margin-top: 0.15rem;
  font-weight: 500;
}

.fmo-compliance-stats {
  width: 100%;
}

.fmo-cs-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
}

.fmo-cs-row + .fmo-cs-row {
  border-top: 1px solid #f3f4f6;
}

.fmo-cs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fmo-cs-green { background: #059669; }
.fmo-cs-red { background: #dc2626; }
.fmo-cs-gray { background: #9ca3af; }

.fmo-cs-text {
  flex: 1 1;
  font-size: 0.82rem;
  color: #6b7280;
}

.fmo-cs-val {
  font-size: 0.9rem;
  font-weight: 700;
  color: #111827;
}

/* Jobs Timeline Panel */
.fmo-jobs-panel {
  grid-column: 2;
}

.fmo-timeline-item {
  position: relative;
  padding-left: 22px;
  padding-bottom: 1rem;
}

.fmo-timeline-item:last-child {
  padding-bottom: 0;
}

.fmo-timeline-dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #e5e7eb;
  z-index: 1;
}

.fmo-timeline-today .fmo-timeline-dot {
  background: #1A80E5;
  box-shadow: 0 0 0 2px #bfdbfe;
}

.fmo-timeline-line {
  position: absolute;
  left: 4px;
  top: 17px;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
}

.fmo-timeline-content {
  min-width: 0;
}

.fmo-timeline-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.fmo-timeline-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fmo-timeline-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 10px;
  text-transform: capitalize;
  white-space: nowrap;
}

.fmo-badge-invited { background: #e0e7ff; color: #3730a3; }
.fmo-badge-quoted { background: #fef3c7; color: #92400e; }
.fmo-badge-approved { background: #d1fae5; color: #065f46; }
.fmo-badge-active { background: #dbeafe; color: #1e40af; }
.fmo-badge-completed { background: #f3f4f6; color: #374151; }

.fmo-timeline-meta {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.2rem;
}

.fmo-timeline-area {
  margin-left: 0.35rem;
  color: #9ca3af;
}

/* On Site Panel */
.fmo-onsite-panel {
  grid-column: 3;
}

.fmo-live-dot {
  width: 8px;
  height: 8px;
  background: #059669;
  border-radius: 50%;
  animation: fmoPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

.fmo-person-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0;
}

.fmo-person-row + .fmo-person-row {
  border-top: 1px solid #f3f4f6;
}

.fmo-person-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1A80E5, #3b82f6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.fmo-person-info {
  flex: 1 1;
  min-width: 0;
}

.fmo-person-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fmo-person-detail {
  display: block;
  font-size: 0.72rem;
  color: #6b7280;
}

.fmo-person-time {
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  flex-shrink: 0;
}

/* Recent Tests Panel */
.fmo-tests-panel {
  grid-column: 1;
}

.fmo-test-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
}

.fmo-test-row + .fmo-test-row {
  border-top: 1px solid #f3f4f6;
}

.fmo-test-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.fmo-test-pass { background: #d1fae5; color: #059669; }
.fmo-test-fail { background: #fee2e2; color: #dc2626; }

.fmo-test-info {
  flex: 1 1;
  min-width: 0;
}

.fmo-test-ref {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f2937;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.fmo-test-type {
  display: block;
  font-size: 0.72rem;
  color: #6b7280;
  text-transform: capitalize;
}

.fmo-test-date {
  font-size: 0.75rem;
  color: #9ca3af;
  flex-shrink: 0;
}

/* Documents Panel */
.fmo-docs-panel {
  grid-column: 2;
}

.fmo-docs-summary {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.fmo-doc-stat {
  flex: 1 1;
  text-align: center;
  padding: 0.65rem 0.5rem;
  background: #f9fafb;
  border-radius: 10px;
}

.fmo-doc-num {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: #111827;
  line-height: 1;
}

.fmo-doc-label {
  display: block;
  font-size: 0.7rem;
  color: #6b7280;
  margin-top: 0.2rem;
  font-weight: 500;
}

.fmo-doc-warn .fmo-doc-num { color: #d97706; }
.fmo-doc-warn { background: #fffbeb; }
.fmo-doc-danger .fmo-doc-num { color: #dc2626; }
.fmo-doc-danger { background: #fef2f2; }

.fmo-expiring-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #d97706;
  margin-bottom: 0.4rem;
}

.fmo-expiring-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  font-size: 0.8rem;
}

.fmo-expiring-row + .fmo-expiring-row {
  border-top: 1px solid #f3f4f6;
}

.fmo-expiring-name {
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1;
  margin-right: 0.75rem;
}

.fmo-expiring-date {
  color: #d97706;
  font-weight: 600;
  white-space: nowrap;
}

/* Quick Actions Panel */
.fmo-actions-panel {
  grid-column: 3;
}

.fmo-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.65rem;
  gap: 0.65rem;
}

.fmo-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
}

.fmo-action-card:hover {
  border-color: #1A80E5;
  background: #eff6ff;
  color: #1A80E5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 128, 229, 0.1);
}

.fmo-action-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.fmo-ai-blue { background: #dbeafe; color: #2563eb; }
.fmo-ai-green { background: #d1fae5; color: #059669; }
.fmo-ai-purple { background: #e9d5ff; color: #7c3aed; }
.fmo-ai-amber { background: #fef3c7; color: #d97706; }

/* Empty State in panels */
.fmo-empty-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
}

.fmo-empty-panel.fmo-empty-sm {
  padding: 1.25rem 0.75rem;
}

.fmo-empty-icon {
  font-size: 1.75rem;
  color: #d1d5db;
  margin-bottom: 0.5rem;
}

.fmo-empty-panel p {
  margin: 0;
  font-size: 0.85rem;
  color: #9ca3af;
}

.fmo-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding: 0.45rem 1rem;
  background: #1A80E5;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.fmo-empty-btn:hover {
  background: #1565c0;
}

/* Legacy overview classes kept for reference */
.fm-property-info {
  margin-bottom: 1.5rem;
}

.fm-property-info h2 {
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}

.fm-property-info p {
  color: #6b7280;
  margin: 0;
}

.fm-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

/* Cards */
.fm-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  overflow: hidden;
}

.fm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.fm-card-header h3 {
  margin: 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.view-all-btn {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 0.8rem;
  cursor: pointer;
  font-weight: 500;
}

.fm-card-body {
  padding: 0.5rem;
}

.fm-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  transition: background 0.15s;
}

.fm-list-item:hover { background: #f9fafb; }

.list-avatar {
  font-size: 1.5rem;
  color: #d1d5db;
  flex-shrink: 0;
}

.list-info {
  flex: 1 1;
  min-width: 0;
}

.list-name {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-sub {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
}

.list-side {
  text-align: right;
  flex-shrink: 0;
}

.list-time {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
}

.list-status {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.list-status.checked_in { color: #059669; }
.list-status.checked_out { color: #9ca3af; }

.test-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.test-badge.pass { background: #d1fae5; color: #059669; }
.test-badge.fail { background: #fee2e2; color: #dc2626; }

.pdf-link {
  font-size: 0.75rem;
  color: #2563eb;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.fm-empty {
  text-align: center;
  padding: 2rem;
  color: #9ca3af;
}

/* Toolbar */
.fm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 12px;
  flex-wrap: wrap;
}

/* Wrong-asset guard surface (P0-3 Phase 3) */
.fm-mismatch-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fffbeb; color: #92400e;
  border: 1px solid #fde68a; border-radius: 9999px;
  padding: 6px 12px; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.fm-mismatch-toggle:hover { background: #fef3c7; }
.fm-mismatch-toggle.active { background: #f59e0b; color: white; border-color: #f59e0b; }
.fm-row-mismatch { background: #fffbeb; }
.fm-row-mismatch:hover { background: #fef3c7; }
.fm-mismatch-flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #f59e0b; color: white; font-size: 0.7rem;
}
.fm-nav-badge.fm-nav-badge-warn { background: #f59e0b !important; color: white; }

.fm-toolbar h2 {
  margin: 0;
  font-size: 1.2rem;
}

.toolbar-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.date-picker {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  outline: none;
}

.date-picker:focus { border-color: #2563eb; }

.count-badge {
  background: #e0e7ff;
  color: #3730a3;
  padding: 0.3rem 0.75rem;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Tables */
.fm-table-container {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.fm-table {
  width: 100%;
  border-collapse: collapse;
}

.fm-table th {
  background: #f9fafb;
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e5e7eb;
}

.fm-table td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border-bottom: 1px solid #f3f4f6;
}

.fm-table tr:hover { background: #f9fafb; }

.fm-table tr.row-active {
  background: #f0fdf4;
}

.name-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.row-avatar {
  font-size: 1.25rem;
  color: #d1d5db;
}

.reason-cell {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-badge.checked_in {
  background: #d1fae5;
  color: #059669;
}

.status-badge.checked_out {
  background: #f3f4f6;
  color: #6b7280;
}

.ref-cell code {
  background: #f3f4f6;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.asset-type-cell {
  text-transform: capitalize;
}

.result-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.75rem;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
}

.result-badge.pass {
  background: #d1fae5;
  color: #059669;
}

.result-badge.fail {
  background: #fee2e2;
  color: #dc2626;
}

.report-link {
  color: #2563eb;
  text-decoration: none;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.report-link:hover { text-decoration: underline; }

.no-report { color: #d1d5db; }

.fm-empty-row {
  text-align: center;
  color: #9ca3af;
  padding: 2rem 1rem !important;
}

/* Compliance */
.compliance-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 2rem;
}

.compliance-card {
  background: white;
  border-radius: 10px;
  padding: 1.25rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border-top: 3px solid #e5e7eb;
}

.compliance-card h3 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comp-value {
  font-size: 2rem;
  font-weight: 700;
}

.compliance-card.pass { border-top-color: #059669; }
.compliance-card.pass .comp-value { color: #059669; }

.compliance-card.fail { border-top-color: #dc2626; }
.compliance-card.fail .comp-value { color: #dc2626; }

.compliance-card.pending { border-top-color: #d97706; }
.compliance-card.pending .comp-value { color: #d97706; }

.compliance-card.unknown { border-top-color: #6b7280; }
.compliance-card.unknown .comp-value { color: #6b7280; }

.compliance-meter {
  background: white;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-bottom: 1.5rem;
}

.compliance-meter h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.meter-bar {
  height: 12px;
  background: #fee2e2;
  border-radius: 6px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  background: #059669;
  border-radius: 6px;
  transition: width 0.5s ease;
}

.meter-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.meter-rate {
  font-weight: 700;
  color: #059669;
}

.compliance-alert {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #dc2626;
  font-weight: 500;
}

.compliance-alert svg { font-size: 1.25rem; flex-shrink: 0; }

/* Jobs */
.fm-jobs-list { display: flex; flex-direction: column; }
.fm-empty-state {
  text-align: center; padding: 3rem; background: white;
  border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.fm-empty-state .empty-icon { font-size: 2.5rem; color: #d1d5db; margin-bottom: 1rem; }
.fm-empty-state h3 { margin: 0 0 0.5rem; color: #374151; }
.fm-empty-state p { color: #6b7280; margin: 0 0 1.5rem; }

/* Job Detail */
.fm-job-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0.5rem; gap: 0.5rem;
  background: #f9fafb; border-radius: 8px; padding: 0.75rem 1rem;
}
.detail-item { font-size: 0.82rem; color: #374151; }
.detail-item strong { color: #6b7280; font-weight: 500; }

/* Quotes */
.fm-quote-card {
  background: #f9fafb; border-radius: 8px; padding: 0.875rem;
  margin-bottom: 0.5rem; border: 1px solid #e5e7eb;
}
.fm-quote-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; }
.fm-quote-price { font-size: 1.2rem; font-weight: 700; color: #059669; }
.fm-quote-from { font-size: 0.8rem; color: #6b7280; }
.fm-quote-msg, .fm-quote-notes { font-size: 0.82rem; color: #374151; margin: 0.35rem 0 0; }
.fm-quote-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

/* Quote document PDF / file */
.fm-quote-documents { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #e5e7eb; }
.fm-quote-docs-label { display: block; font-size: 0.8rem; color: #6b7280; margin-bottom: 0.5rem; }
.fm-quote-doc { margin-bottom: 0.75rem; }
.fm-quote-doc:last-child { margin-bottom: 0; }
.fm-quote-doc-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; color: #1d4ed8; text-decoration: none; }
.fm-quote-doc-link:hover { text-decoration: underline; }
.fm-quote-pdf-embed { width: 100%; height: 360px; border: 1px solid #e5e7eb; border-radius: 8px; margin-top: 0.5rem; background: #f9fafb; }

/* Staff in detail */
.fm-staff-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; }

/* Notes in detail */
.fm-note-item { padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6; }
.fm-note-author { font-size: 0.78rem; font-weight: 600; color: #374151; }
.fm-note-text { font-size: 0.82rem; color: #6b7280; margin: 0.15rem 0; }
.fm-note-time { font-size: 0.7rem; color: #9ca3af; }

/* Calendar legend */
.calendar-legend { display: flex; gap: 0.75rem; align-items: center; }
.legend-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: #6b7280; }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; }

/* ─── Mobile Tab Navigation ──────────────────── */
.fm-mobile-nav-bar { display: none; }

/* Responsive */
@media (max-width: 1024px) {
  .fmo-kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .fmo-grid { grid-template-columns: 1fr 1fr; }
  .fmo-compliance-panel { grid-column: 1; }
  .fmo-jobs-panel { grid-column: 2; }
  .fmo-onsite-panel { grid-column: 1; }
  .fmo-tests-panel { grid-column: 2; }
  .fmo-docs-panel { grid-column: 1; }
  .fmo-actions-panel { grid-column: 2; }
  .compliance-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .fm-mobile-nav-bar {
    display: flex;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    height: 44px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    z-index: 89;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .fm-mobile-nav-bar::-webkit-scrollbar { display: none; }

  .fm-mobile-nav-tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0 14px;
    height: 44px;
    border: none;
    background: none;
    color: #637587;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    position: relative;
  }

  .fm-mobile-nav-tab.active {
    color: #1A80E5;
    border-bottom-color: #1A80E5;
    font-weight: 600;
  }

  .fm-mobile-tab-badge {
    position: absolute;
    top: 6px;
    right: 4px;
    background: #1A80E5;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 8px;
    min-width: 14px;
    line-height: 14px;
    text-align: center;
  }

  /* Compact property selector in header */
  .fm-property-select-in-header {
    min-width: 0;
    max-width: 120px;
    font-size: 12px;
    padding: 6px 8px;
  }

  /* Offset main content for header (64px) + mobile tab bar (44px) = 108px + breathing room */
  .fm-dashboard .dashboard-content {
    margin-top: 108px !important;
    padding-top: 1.25rem !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .fm-dashboard .dashboard-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    text-align: left;
  }

  .fm-dashboard .dashboard-title {
    font-size: 1.25rem;
    text-align: left;
  }

  .fm-dashboard .dashboard-subtitle {
    text-align: left;
  }

  .fm-dashboard .search-section {
    margin-bottom: 1rem;
  }

  .fm-dashboard .properties-overview {
    margin-bottom: 1rem;
  }

  .fm-dashboard .section-title {
    margin-bottom: 0.75rem;
  }

  .fm-dashboard .properties-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
}

@media (max-width: 768px) {
  .fmo-hero { height: 160px; border-radius: 12px; }
  .fmo-hero-content { padding: 1rem 1.25rem; flex-direction: column; align-items: flex-start; }
  .fmo-hero-title { font-size: 1.3rem; }
  .fmo-hero-actions { width: 100%; }
  .fmo-kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .fmo-kpi { padding: 0.75rem 0.85rem; }
  .fmo-kpi-value { font-size: 1.3rem; }
  .fmo-kpi-icon { width: 36px; height: 36px; font-size: 1rem; }
  .fmo-grid { grid-template-columns: 1fr; }
  .fmo-compliance-panel,
  .fmo-jobs-panel,
  .fmo-onsite-panel,
  .fmo-tests-panel,
  .fmo-docs-panel,
  .fmo-actions-panel { grid-column: 1; }
  .fmo-compliance-body { flex-direction: row; padding: 1rem; }
  .fmo-ring-wrap { width: 100px; height: 100px; }
  .fmo-ring-pct { font-size: 1.3rem; }

  .fm-header {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }
  .fm-header-right {
    width: 100%;
    justify-content: space-between;
  }
  .fm-tabs {
    overflow-x: auto;
    padding: 0 0.75rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fm-tabs::-webkit-scrollbar { display: none; }
  .fm-tab { white-space: nowrap; padding: 0.75rem 1rem; font-size: 0.82rem; }
  .fm-content { padding: 1rem; }
  .compliance-stats { grid-template-columns: repeat(2, 1fr); }
  .fm-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fm-table { font-size: 0.8rem; min-width: 600px; }
  .fm-job-detail-grid { grid-template-columns: 1fr; }
  .calendar-legend { flex-wrap: wrap; }
  .fm-toolbar { flex-wrap: wrap; gap: 0.5rem; }
  .toolbar-controls { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .fmo-hero { height: 140px; margin-bottom: 1rem; }
  .fmo-hero-title { font-size: 1.1rem; }
  .fmo-hero-address { font-size: 0.78rem; }
  .fmo-hero-actions { display: none; }
  .fmo-kpi-strip { grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; }
  .fmo-kpi { border-radius: 10px; padding: 0.65rem 0.7rem; gap: 0.5rem; }
  .fmo-kpi-icon { width: 32px; height: 32px; border-radius: 8px; font-size: 0.85rem; }
  .fmo-kpi-value { font-size: 1.15rem; }
  .fmo-kpi-label { font-size: 0.68rem; }
  .fmo-grid { gap: 0.75rem; }
  .fmo-quick-actions { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .fmo-action-card { padding: 0.75rem 0.35rem; font-size: 0.75rem; }
  .fmo-docs-summary { gap: 0.5rem; }
  .fmo-compliance-body { flex-direction: column; }
  .fmo-ring-wrap { width: 110px; height: 110px; }

  .compliance-stats { grid-template-columns: 1fr 1fr; }
  .fm-content { padding: 0.75rem; }
  .fm-dashboard .dashboard-content { padding: 0.75rem; padding-top: calc(80px + 0.75rem); }
  .fm-dashboard .properties-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .fm-dashboard .dashboard-title { font-size: 1.1rem; }
}

/* ============================================================
   Compliance Report — document preview + print layout
   A4 (210mm × 297mm). White pages on light-grey canvas on screen,
   stripped of chrome for print.
   ============================================================ */

.rep-viewport {
  min-height: 100vh;
  background: #e5e7eb;
  padding: 32px 16px 64px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
  color: #111827;
}

/* Toolbar — screen only */
.rep-toolbar {
  position: -webkit-sticky;
  position: sticky;
  top: 16px;
  z-index: 5;
  max-width: 210mm;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.rep-toolbar-back {
  background: none;
  border: none;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.rep-toolbar-back:hover { background: #f3f4f6; }

.rep-toolbar-title {
  font-size: 0.875rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1;
  text-align: center;
}

.rep-toolbar-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1A80E5;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.rep-toolbar-print:hover { background: #1565C0; }

/* ─── A4 Page ────────────────────────────── */
.rep-page {
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  margin: 0 auto 20px;
  padding: 22mm 20mm;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  box-sizing: border-box;
  position: relative;
  color: #111827;
  display: flex;
  flex-direction: column;
}

/* Page footer (page number + property, repeats on every page) */
.rep-page-footer {
  margin-top: auto;
  padding-top: 10mm;
  border-top: 1px solid #d4d4d8;
  font-size: 9pt;
  color: #6b7280;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* ─── Cover Page ─────────────────────────── */
.rep-cover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16mm;
  margin-bottom: 24mm;
}
.rep-cover-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
}
.rep-cover-client-logo {
  height: 44px;
  max-width: 160px;
  object-fit: contain;
}
.rep-cover-client-fallback {
  font-size: 11pt;
  font-weight: 600;
  color: #374151;
  padding: 10px 14px;
  border: 1px solid #d4d4d8;
  max-width: 180px;
  text-align: right;
  line-height: 1.3;
}

.rep-cover-body {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32mm 0 20mm;
}
.rep-cover-eyebrow {
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 10mm;
}
.rep-cover-title {
  font-size: 32pt;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 4mm;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.rep-cover-subtitle {
  font-size: 14pt;
  font-weight: 500;
  color: #374151;
  margin: 0 0 18mm;
}
.rep-cover-period {
  font-size: 13pt;
  font-weight: 600;
  color: #111827;
  margin: 0 0 2mm;
}
.rep-cover-address {
  font-size: 11pt;
  color: #6b7280;
  margin: 0;
}

.rep-cover-meta {
  margin-top: 28mm;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10mm;
  gap: 10mm;
  padding-top: 8mm;
  border-top: 2px solid #0f172a;
}
.rep-cover-meta dt {
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 2mm;
}
.rep-cover-meta dd {
  font-size: 11pt;
  color: #111827;
  margin: 0 0 4mm;
}

/* ─── Section headings ───────────────────── */
.rep-h1 {
  font-size: 20pt;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
  margin: 0 0 2mm;
}
.rep-h1-sub {
  font-size: 10pt;
  color: #6b7280;
  margin: 0 0 8mm;
}
.rep-h2 {
  font-size: 14pt;
  font-weight: 700;
  color: #0f172a;
  margin: 8mm 0 3mm;
}
.rep-p {
  font-size: 10.5pt;
  line-height: 1.55;
  color: #1f2937;
  margin: 0 0 4mm;
}

.rep-divider {
  height: 1px;
  background: #d4d4d8;
  margin: 6mm 0 8mm;
  border: none;
}

/* ─── Executive summary ──────────────────── */
.rep-score-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-gap: 8mm;
  gap: 8mm;
  margin: 6mm 0 8mm;
}

.rep-score-card {
  border: 1.5pt solid #0f172a;
  padding: 8mm;
}
.rep-score-label {
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 3mm;
}
.rep-score-pct {
  font-size: 48pt;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.rep-score-of {
  font-size: 10.5pt;
  color: #6b7280;
  margin-top: 2mm;
}
.rep-score-bar {
  margin-top: 5mm;
  height: 6px;
  background: #e5e7eb;
  position: relative;
  overflow: hidden;
}
.rep-score-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: #15803d;
}

.rep-stat-stack {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 0;
  gap: 0;
  border: 1px solid #d4d4d8;
}
.rep-stat-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 4mm;
  gap: 4mm;
  padding: 4mm 5mm;
  border-bottom: 1px solid #e5e7eb;
}
.rep-stat-row:last-child { border-bottom: none; }
.rep-stat-dot {
  width: 10px; height: 10px; border-radius: 999px;
}
.rep-dot-good { background: #15803d; }
.rep-dot-due  { background: #b45309; }
.rep-dot-bad  { background: #b91c1c; }

.rep-stat-label { font-size: 10.5pt; color: #111827; font-weight: 500; }
.rep-stat-num   { font-size: 16pt;   color: #0f172a; font-weight: 800; }

/* ─── Tables ─────────────────────────────── */
.rep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
  margin-top: 3mm;
}
.rep-table thead th {
  text-align: left;
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #374151;
  padding: 3mm 2mm;
  border-bottom: 1.5pt solid #0f172a;
  background: #f9fafb;
}
.rep-table tbody td {
  padding: 3mm 2mm;
  border-bottom: 1px solid #e5e7eb;
  color: #1f2937;
  vertical-align: top;
}
.rep-table tbody tr:last-child td { border-bottom: none; }

/* Print-muted status pills (no soft shadow, no rounding) */
.rep-pill {
  display: inline-block;
  padding: 1.5mm 2.5mm;
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid;
}
.rep-pill-good { background: #ecfdf5; color: #15803d; border-color: #86efac; }
.rep-pill-due  { background: #fff7ed; color: #b45309; border-color: #fcd34d; }
.rep-pill-bad  { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
.rep-pill-pending { background: #eff6ff; color: #1d4ed8; border-color: #93c5fd; }

/* Module section header row */
.rep-module-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10mm;
  margin-top: 10mm;
}
.rep-module-stats {
  display: flex;
  gap: 6mm;
  font-size: 9.5pt;
  color: #374151;
}
.rep-module-stats strong { color: #0f172a; font-weight: 700; }

/* Priority pills */
.rep-prio-high   { color: #b91c1c; font-weight: 700; text-transform: uppercase; font-size: 8.5pt; letter-spacing: 0.05em; }
.rep-prio-medium { color: #b45309; font-weight: 700; text-transform: uppercase; font-size: 8.5pt; letter-spacing: 0.05em; }
.rep-prio-low    { color: #374151; font-weight: 600; text-transform: uppercase; font-size: 8.5pt; letter-spacing: 0.05em; }

.rep-link { color: #1d4ed8; text-decoration: underline; }
.rep-muted { color: #9ca3af; }

/* ─── Print ──────────────────────────────── */
@page {
  size: A4;
  margin: 0;
}

@media print {
  .rep-viewport {
    background: #fff;
    padding: 0;
  }
  .rep-toolbar { display: none !important; }
  .rep-page {
    margin: 0;
    box-shadow: none;
    width: 210mm;
    min-height: 297mm;
    page-break-after: always;
  }
  .rep-page:last-child { page-break-after: auto; }
  a.rep-link { color: #1d4ed8; text-decoration: underline; }
  /* Force pill/divider backgrounds in print */
  .rep-pill, .rep-table thead th, .rep-score-bar, .rep-score-bar-fill,
  .rep-stat-dot {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ─── Small-screen preview fallback ──────── */
@media (max-width: 820px) {
  .rep-page {
    width: 100%;
    min-width: 0;
    padding: 24px 20px;
  }
  .rep-cover-title { font-size: 26pt; }
  .rep-score-row { grid-template-columns: 1fr; }
}

/* ============================================
   Contractor Staff Dashboard
   Extends ContractorDashboard.css
   ============================================ */

.staff-dashboard {
  padding-bottom: 5rem;
  font-family: 'DM Sans', 'Inter', -apple-system, sans-serif;
}

.header-badge-label {
  font-size: 0.7rem;
  opacity: 0.85;
  margin-right: 0.25rem;
}
.header-contractor-id {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* ─── Section headers with count ───────────── */
.staff-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}
.staff-section-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cs-gray-400);
  background: var(--cs-gray-100);
  padding: 0.15rem 0.6rem;
  border-radius: 20px;
}

/* Section padding */
.staff-jobs-section,
.staff-calendar-section,
.staff-buildings-section { padding: 0 0.25rem; }

/* ─── Active Job Banner ─────────────────────── */
.staff-active-banner {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white; padding: 0.875rem 1rem;
  display: flex; align-items: center; gap: 0.75rem;
  cursor: pointer; position: relative;
  border-radius: 12px;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
  transition: box-shadow 0.2s;
}
.staff-active-banner:hover {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}
.active-pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
.active-info { flex: 1 1; }
.active-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; opacity: 0.8; display: block; }
.active-title { font-size: 1rem; font-weight: 600; display: block; margin-top: 0.1rem; }
.active-prop { font-size: 0.75rem; opacity: 0.8; display: flex; align-items: center; gap: 0.25rem; margin-top: 0.15rem; }
.active-arrow { opacity: 0.6; }

/* ─── Staff content ─────────────────────────── */
.staff-content { padding: 1rem; }
.staff-section-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; }
.staff-loading { text-align: center; padding: 2rem; color: #9ca3af; }

/* ─── Job Cards ─────────────────────────────── */
.staff-job-card {
  background: white; border-radius: 12px; padding: 1rem 1.125rem;
  margin-bottom: 0.6rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
  cursor: pointer; transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
.staff-job-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
  transform: translateY(-1px);
}
.staff-job-card:active { background: #f9fafb; transform: translateY(0); }
.staff-job-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.staff-job-top h3 { margin: 0; font-size: 0.92rem; font-weight: 600; }
.staff-job-meta {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.45rem;
  font-size: 0.75rem; color: #6b7280;
}
.staff-job-meta span { display: flex; align-items: center; gap: 0.2rem; }

/* ─── Empty ─────────────────────────────────── */
.staff-empty {
  text-align: center; padding: 3rem 1rem;
  color: #9ca3af;
}
.staff-empty svg { font-size: 2rem; margin-bottom: 0.5rem; }
.staff-empty p { margin: 0; }

/* ─── Job View ─────────────────────────────── */
.staff-job-view { animation: slideUp 0.25s ease; }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.staff-back-btn {
  background: none; border: none; color: #2563eb;
  font-size: 0.88rem; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; gap: 0.3rem;
  margin-bottom: 0.75rem; padding: 0.3rem 0;
}
.staff-job-view-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 1rem;
}
.staff-job-view-header h2 { margin: 0; font-size: 1.2rem; }
.staff-job-view-info {
  background: white; border-radius: 12px; padding: 0.875rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
}
.info-row {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; color: #374151; padding: 0.3rem 0;
}
.info-row svg { color: #6b7280; width: 14px; }
.staff-job-desc {
  font-size: 0.88rem; color: #6b7280; line-height: 1.5;
  margin: 0 0 1rem; background: white; border-radius: 12px;
  padding: 0.875rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
}

/* Actions */
.staff-actions { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.staff-action-btn {
  flex: 1 1; padding: 0.75rem; border-radius: 10px;
  border: 1px solid #e5e7eb; background: white;
  font-size: 0.85rem; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 0.4rem; color: #374151;
  -webkit-tap-highlight-color: transparent;
}
.staff-action-btn:active { background: #f3f4f6; }

/* Notes */
.staff-notes-section {
  background: white; border-radius: 12px; padding: 0.875rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
}
.staff-notes-section h3 { margin: 0 0 0.75rem; font-size: 0.92rem; display: flex; align-items: center; gap: 0.4rem; }
.staff-note-input { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; }
.staff-note-input input {
  flex: 1 1; padding: 0.6rem 0.75rem; border: 1px solid #e5e7eb;
  border-radius: 8px; font-size: 0.85rem; outline: none;
}
.staff-note-input input:focus { border-color: #2563eb; }
.staff-note-input button {
  padding: 0.6rem 1rem; background: #2563eb; color: white;
  border: none; border-radius: 8px; font-size: 0.85rem;
  font-weight: 600; cursor: pointer;
}
.staff-note-input button:disabled { opacity: 0.5; cursor: not-allowed; }

.staff-note-item { padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6; }
.staff-note-header { display: flex; align-items: center; gap: 0.35rem; }
.staff-note-header svg { color: #d1d5db; font-size: 1rem; }
.staff-note-author { font-size: 0.78rem; font-weight: 600; color: #374151; }
.staff-note-time { font-size: 0.7rem; color: #9ca3af; margin-left: auto; }
.staff-note-text { font-size: 0.82rem; color: #6b7280; margin: 0.2rem 0 0; padding-left: 1.35rem; }

/* Attachments */
.staff-attachments {
  background: white; border-radius: 12px; padding: 0.875rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
}
.staff-attachments h3 { margin: 0 0 0.5rem; font-size: 0.92rem; display: flex; align-items: center; gap: 0.4rem; }
.staff-attachment-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.5rem; gap: 0.5rem; }
.staff-attachment-link { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: opacity 0.15s; }
.staff-attachment-link:hover { opacity: 0.85; }
.staff-attachment-item img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; cursor: pointer; }
.attachment-file {
  padding: 0.5rem; background: #f3f4f6; border-radius: 8px;
  font-size: 0.72rem; display: flex; align-items: center; gap: 0.3rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Team */
.staff-team {
  background: white; border-radius: 12px; padding: 0.875rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
}
.staff-team h3 { margin: 0 0 0.5rem; font-size: 0.92rem; }
.staff-team-member { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid #f3f4f6; }
.staff-team-member svg { color: #d1d5db; font-size: 1.25rem; }
.member-name { font-size: 0.85rem; font-weight: 600; display: block; }
.member-status { font-size: 0.72rem; color: #6b7280; }

/* ═══════════════════════════════════════════════
   OVERVIEW SECTION
   ═══════════════════════════════════════════════ */

.staff-overview {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Hero Welcome Card ─────────────────────── */
.overview-hero {
  background: linear-gradient(140deg, #0f172a 0%, #1a2f52 55%, #1e40af 100%);
  border-radius: 16px;
  padding: 2rem 2.25rem;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

.overview-hero-bg-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.overview-hero-bg-circle-1 {
  width: 240px; height: 240px;
  top: -80px; right: -40px;
  background: transparent;
  border: 48px solid rgba(255,255,255,0.04);
}
.overview-hero-bg-circle-2 {
  width: 160px; height: 160px;
  bottom: -60px; right: 120px;
  background: transparent;
  border: 32px solid rgba(255,255,255,0.035);
}

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

.overview-greeting {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.overview-name {
  margin: 0.35rem 0 0.5rem;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.overview-company {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.55;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.overview-hero-right {
  text-align: right;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.overview-date {
  margin: 0 0 0.625rem;
  font-size: 0.8rem;
  opacity: 0.55;
  white-space: nowrap;
}

.overview-id-pill {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

/* ─── Stats Row ─────────────────────────────── */
.overview-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.875rem;
  gap: 0.875rem;
}

.ov-stat-card {
  background: white;
  border-radius: 13px;
  padding: 1.25rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ov-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.1);
}

.ov-stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.ov-stat-today .ov-stat-icon   { background: #dbeafe; color: #2563eb; }
.ov-stat-upcoming .ov-stat-icon { background: #fef3c7; color: #d97706; }
.ov-stat-done .ov-stat-icon    { background: #dcfce7; color: #16a34a; }
.ov-stat-buildings .ov-stat-icon { background: #ede9fe; color: #7c3aed; }

.ov-stat-body {
  display: flex;
  flex-direction: column;
}

.ov-stat-value {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.ov-stat-label {
  font-size: 0.71rem;
  color: #94a3b8;
  margin-top: 0.25rem;
  font-weight: 500;
}

/* ─── Two-Column Overview Grid ──────────────── */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.125rem;
  gap: 1.125rem;
}

/* ─── Overview Cards ────────────────────────── */
.ov-card {
  background: white;
  border-radius: 13px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
}

.ov-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
}

.ov-card-header h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ov-card-header h3 svg {
  color: #2563eb;
  font-size: 0.82rem;
}

.ov-card-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.73rem;
  color: #2563eb;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  transition: background 0.15s;
  font-family: inherit;
}
.ov-card-link:hover { background: #eff6ff; }

.ov-card-body { padding: 0.375rem 0; }

/* ─── Job Rows inside cards ─────────────────── */
.ov-job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.25rem;
  cursor: pointer;
  transition: background 0.13s;
  gap: 0.75rem;
  border-bottom: 1px solid #f8fafc;
}
.ov-job-row:last-child { border-bottom: none; }
.ov-job-row:hover { background: #f8fafc; }

.ov-job-row-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1;
}

.ov-job-title {
  font-size: 0.855rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ov-job-sub {
  font-size: 0.71rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.ov-job-sub svg { font-size: 0.62rem; }

.ov-job-date {
  font-size: 0.73rem;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
  background: #f1f5f9;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}

.ov-completed-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.ov-duration {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.71rem;
  color: #94a3b8;
}

/* ─── Empty state in cards ──────────────────── */
.ov-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #94a3b8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.ov-empty svg { font-size: 1.4rem; }
.ov-empty p { margin: 0; font-size: 0.8rem; }

/* ─── Buildings row ─────────────────────────── */
.ov-buildings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
}

.ov-building-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}
.ov-building-chip:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.ov-building-chip svg { font-size: 0.78rem; color: #94a3b8; }
.ov-building-chip:hover svg { color: #2563eb; }

/* ─── Overview Active Banner ────────────────── */
.overview-active-banner {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white; padding: 0.875rem 1.125rem;
  display: flex; align-items: center; gap: 0.75rem;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
  transition: box-shadow 0.2s, transform 0.2s;
}
.overview-active-banner:hover {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
}

/* ─── Responsive ────────────────────────────── */
@media (max-width: 1024px) {
  .overview-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .overview-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.375rem 1.25rem;
  }
  .overview-hero-right { text-align: left; }
  .overview-name { font-size: 1.5rem; }

  .overview-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  .ov-stat-value { font-size: 1.5rem; }
  .ov-stat-card { padding: 1rem 0.875rem; }

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

  .staff-content { max-width: 600px; margin: 0 auto; padding: 1.5rem; }
  .staff-job-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
  .staff-attachment-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 480px) {
  .overview-stats { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .ov-stat-icon { width: 38px; height: 38px; font-size: 0.95rem; }
  .ov-stat-value { font-size: 1.35rem; }
}

/* ============================================================
   Notifications Page — Premium, clean layout
   Prefix: notif-
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.notif-page {
  width: 100%;
  min-height: 100vh;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
}

.notif-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px;
  padding-top: 112px;
  box-sizing: border-box;
}

/* ── Page header ───────────────────────────────────────────── */
.notif-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.notif-page-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.notif-page-title-icon {
  color: #1A80E5;
  font-size: 1rem;
}

.notif-page-count {
  font-size: 0.7rem;
  font-weight: 700;
  background: #1A80E5;
  color: #fff;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.notif-mark-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1A80E5;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 1px 3px rgba(26, 128, 229, 0.18);
}

.notif-mark-all-btn:hover { background: #1565C0; }
.notif-mark-all-btn:active { transform: scale(0.98); }
.notif-mark-all-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.notif-mark-all-btn:focus-visible {
  outline: 2px solid #1A80E5;
  outline-offset: 2px;
}

/* ── Filter chips ──────────────────────────────────────────── */
.notif-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.notif-filters::-webkit-scrollbar { display: none; }

.notif-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  font-size: 0.8125rem;
  font-weight: 550;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 36px;
  transition: all 0.15s;
}
.notif-filter-chip:hover:not(.active) {
  background: #f0f7ff;
  border-color: #c7d8eb;
  color: #374151;
}
.notif-filter-chip.active {
  background: #1A80E5;
  color: #fff;
  border-color: #1A80E5;
  box-shadow: 0 2px 6px rgba(26, 128, 229, 0.2);
}
.notif-filter-chip:focus-visible {
  outline: 2px solid #1A80E5;
  outline-offset: 2px;
}

.notif-filter-count {
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.07);
  padding: 1px 7px;
  border-radius: 999px;
  line-height: 1.5;
}
.notif-filter-chip.active .notif-filter-count {
  background: rgba(255, 255, 255, 0.25);
}

/* ── Notification list ─────────────────────────────────────── */
.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

.notif-row-wrapper { list-style: none; }
.notif-row-wrapper + .notif-row-wrapper {
  border-top: 1px solid #f3f4f6;
}

/* ── Notification row ──────────────────────────────────────── */
.notif-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  position: relative;
  transition: background 0.12s;
  min-height: 72px;
}
.notif-row:hover { background: #fafbfc; }
.notif-row:focus-visible {
  outline: 2px solid #1A80E5;
  outline-offset: -2px;
  border-radius: 2px;
}

/* ── Unread treatment ──────────────────────────────────────── */
.notif-unread { background: #f0f7ff; }
.notif-unread:hover { background: #e3effc; }

.notif-unread-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #1A80E5;
  border-radius: 0 2px 2px 0;
}

.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1A80E5;
  flex-shrink: 0;
  margin-top: 6px;
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.12);
}

/* ── Icon ──────────────────────────────────────────────────── */
.notif-icon-wrap {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}
.notif-icon-blue  { background: #eff6ff; color: #1d4ed8; }
.notif-icon-green { background: #f0fdf4; color: #16a34a; }
.notif-icon-amber { background: #fffbeb; color: #d97706; }
.notif-icon-red   { background: #fef2f2; color: #dc2626; }
.notif-icon-gray  { background: #f3f4f6; color: #6b7280; }

/* ── Body ──────────────────────────────────────────────────── */
.notif-body { flex: 1 1; min-width: 0; }

.notif-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.notif-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-unread .notif-title { font-weight: 700; }

.notif-time {
  font-size: 0.7rem;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
}

.notif-msg {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Empty state ───────────────────────────────────────────── */
.notif-empty-wrap {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}

.notif-empty-card {
  text-align: center;
  padding: 56px 32px;
  max-width: 380px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8ecf1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.notif-empty-icon {
  font-size: 2.5rem;
  color: #d1d5db;
  margin-bottom: 18px;
}
.notif-empty-icon-red { color: #ef4444; }

.notif-empty-title {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}

.notif-empty-desc {
  margin: 0 0 24px;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
}

.notif-empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #1A80E5;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 28px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 1px 3px rgba(26, 128, 229, 0.18);
}
.notif-empty-btn:hover { background: #1565C0; }
.notif-empty-btn:active { transform: scale(0.98); }
.notif-empty-btn:focus-visible {
  outline: 2px solid #1A80E5;
  outline-offset: 2px;
}

/* ── Skeleton loading ──────────────────────────────────────── */
.notif-skeleton { pointer-events: none; cursor: default; }

.notif-skel-circle {
  background: #e5e7eb;
  animation: notif-shimmer 1.5s infinite;
}
.notif-skel-line {
  border-radius: 5px;
  background: #e5e7eb;
  animation: notif-shimmer 1.5s infinite;
}
.notif-skel-title { width: 55%; height: 14px; margin-bottom: 8px; }
.notif-skel-msg   { width: 80%; height: 12px; margin-bottom: 6px; }
.notif-skel-time  { width: 60px; height: 10px; }

@keyframes notif-shimmer {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  .notif-content {
    padding: 16px;
    padding-top: 88px;
  }

  .notif-page-title { font-size: 1.2rem; }

  .notif-list { border-radius: 12px; }

  .notif-row {
    padding: 15px 18px;
    gap: 12px;
    min-height: 64px;
  }

  .notif-icon-wrap { width: 34px; height: 34px; font-size: 0.8rem; }
}

@media (max-width: 480px) {
  .notif-content {
    padding: 12px;
    padding-top: 78px;
  }

  .notif-page-header { margin-bottom: 16px; }

  .notif-page-title { font-size: 1.1rem; gap: 8px; }
  .notif-page-title-icon { font-size: 0.9rem; }

  .notif-mark-all-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
  }

  .notif-filters { gap: 6px; margin-bottom: 14px; }
  .notif-filter-chip { padding: 7px 13px; font-size: 0.75rem; min-height: 34px; }

  .notif-list {
    border-radius: 12px;
  }

  .notif-row {
    padding: 14px 14px;
    gap: 10px;
    min-height: 58px;
  }

  .notif-title-row { flex-direction: column; gap: 2px; }
  .notif-time { font-size: 0.65rem; }
  .notif-msg { font-size: 0.78rem; }

  .notif-empty-card { padding: 44px 24px; border-radius: 14px; }
  .notif-empty-icon { font-size: 2.2rem; }
  .notif-empty-title { font-size: 1.05rem; }
  .notif-empty-desc { font-size: 0.8125rem; }
}

@media (max-width: 360px) {
  .notif-content {
    padding: 10px 8px;
    padding-top: 72px;
  }

  .notif-list { border-radius: 10px; }
  .notif-row { padding: 12px; gap: 10px; }
  .notif-icon-wrap { width: 30px; height: 30px; font-size: 0.75rem; border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .notif-skel-circle,
  .notif-skel-line { animation: none; }
}

/* ============================================================
   Reports Page — CloudSafe Compliance Reporting
   Uses design tokens from tokens.css (var(--cs-*))
   ============================================================ */

.rpt-page {
  min-height: 100vh;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  overflow-x: hidden;
}

.rpt-container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 32px 64px;
  margin-top: 72px;
}

/* ── Filter Bar ───────────────────────────────────────────── */

.rpt-filters {
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: var(--cs-shadow-xs);
  overflow: hidden;
}

.rpt-filters-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
}

.rpt-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Property dropdown — fixed width */
.rpt-filter-group:first-child {
  flex: 0 0 200px;
}

/* Status dropdown — fixed width */
.rpt-filter-group:nth-child(2) {
  flex: 0 0 155px;
}

/* Search — fills remaining space */
.rpt-filter-search {
  flex: 1 1 180px;
  min-width: 120px;
  max-width: 360px;
}

.rpt-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--cs-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

.rpt-select,
.rpt-input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-sm);
  color: var(--cs-text-primary);
  background: var(--cs-white);
  transition: border-color var(--cs-transition-fast);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}

.rpt-select:focus,
.rpt-input:focus {
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(26, 128, 229, 0.1);
}

.rpt-search-wrap {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.rpt-search-wrap .rpt-input {
  padding-right: 32px;
}

.rpt-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--cs-text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: 12px;
}

.rpt-search-clear:hover {
  color: var(--cs-text-primary);
}

/* Inline actions (Filters + Refresh) */
.rpt-filters-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Advanced Filters ─────────────────────────────────────── */

.rpt-filters-advanced {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cs-border);
}

.rpt-filters-advanced-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.rpt-filters-advanced-row .rpt-filter-group {
  flex: 0 0 200px;
}

.rpt-cat-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rpt-cat-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rpt-cat-actions {
  display: flex;
  gap: 12px;
}

.rpt-link {
  background: none;
  border: none;
  color: var(--cs-blue);
  font-size: var(--cs-text-xs);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rpt-link:hover {
  color: var(--cs-blue-dark);
}

.rpt-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rpt-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-full);
  background: var(--cs-white);
  font-size: var(--cs-text-xs);
  font-weight: 500;
  color: var(--cs-text-secondary);
  cursor: pointer;
  transition: all var(--cs-transition-fast);
  -webkit-user-select: none;
          user-select: none;
}

.rpt-cat-pill:hover {
  border-color: var(--cs-blue);
  color: var(--cs-blue);
}

.rpt-cat-pill.active {
  background: var(--cs-blue);
  border-color: var(--cs-blue);
  color: var(--cs-white);
}

/* ── Buttons ──────────────────────────────────────────────── */

.rpt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--cs-radius);
  font-size: var(--cs-text-sm);
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all var(--cs-transition-fast);
  white-space: nowrap;
  height: 38px;
}

.rpt-btn-primary {
  background: var(--cs-blue);
  color: var(--cs-white);
}

.rpt-btn-primary:hover {
  background: var(--cs-blue-hover);
}

.rpt-btn-ghost {
  background: transparent;
  color: var(--cs-text-secondary);
  border: 1px solid var(--cs-border);
}

.rpt-btn-ghost:hover,
.rpt-btn-ghost.active {
  background: var(--cs-bg-alt);
  border-color: var(--cs-blue);
  color: var(--cs-blue);
}

.rpt-btn-caret {
  font-size: 10px;
  margin-left: 2px;
}

.rpt-filter-badge {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cs-red);
  color: var(--cs-white);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}

/* ── Export Dropdown ───────────────────────────────────────── */

.rpt-export-dropdown {
  position: relative;
}

.rpt-export-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow-md);
  z-index: var(--cs-z-dropdown);
  overflow: hidden;
}

@media (max-width: 768px) {
  .rpt-export-menu {
    right: auto;
    left: 0;
  }
}

.rpt-export-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  font-size: var(--cs-text-sm);
  color: var(--cs-text-primary);
  cursor: pointer;
  text-align: left;
  transition: background var(--cs-transition-fast);
}

.rpt-export-menu button:hover {
  background: var(--cs-bg-alt);
}

.rpt-export-menu button svg {
  width: 16px;
  color: var(--cs-text-muted);
}

/* ── Stat Cards ───────────────────────────────────────────── */

.rpt-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

.rpt-stat-card {
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  box-shadow: var(--cs-shadow-xs);
  transition: box-shadow var(--cs-transition);
}

.rpt-stat-card:hover {
  box-shadow: var(--cs-shadow-sm);
}

.rpt-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--cs-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.rpt-stat-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rpt-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cs-text-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.rpt-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--cs-text-muted);
  margin-top: 2px;
}

/* Compliance ring */
.rpt-stat-compliance {
  gap: 6px;
}

.rpt-compliance-ring {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(
    var(--cs-green) calc(0 * 1%),
    var(--cs-border) 0
  );
  background: conic-gradient(
    var(--clr, var(--cs-green)) calc(var(--pct, 0) * 1%),
    var(--cs-border) 0
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.rpt-compliance-ring::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--cs-white);
}

.rpt-compliance-num {
  position: relative;
  z-index: 1;
  font-size: var(--cs-text-sm);
  font-weight: 700;
  color: var(--cs-text-primary);
}

/* ── Results Table ────────────────────────────────────────── */

.rpt-table-wrap {
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-xs);
  overflow: hidden;
}

.rpt-table-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--cs-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rpt-results-count {
  font-size: var(--cs-text-sm);
  font-weight: 600;
  color: var(--cs-text-secondary);
}

.rpt-table-scroll {
  overflow-x: auto;
}

.rpt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cs-text-sm);
}

.rpt-table thead th {
  background: var(--cs-bg-alt);
  padding: 10px 14px;
  text-align: left;
  font-size: var(--cs-text-xs);
  font-weight: 600;
  color: var(--cs-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--cs-border);
  white-space: nowrap;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.rpt-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--cs-border);
  color: var(--cs-text-secondary);
  vertical-align: middle;
}

.rpt-table tbody tr:last-child td {
  border-bottom: none;
}

.rpt-table tbody tr:hover {
  background: var(--cs-bg-alt);
}

.rpt-row-overdue {
  background: var(--cs-red-light) !important;
}

.rpt-row-overdue:hover {
  background: #fee2e2 !important;
}

.rpt-td-prop {
  max-width: 180px;
}

.rpt-prop-name {
  font-weight: 600;
  color: var(--cs-text-primary);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rpt-td-name {
  font-weight: 500;
  color: var(--cs-text-primary);
}

.rpt-cat-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--cs-radius-full);
  background: var(--cs-blue-light);
  color: var(--cs-blue-dark);
  font-size: var(--cs-text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.rpt-cell-overdue {
  color: var(--cs-red) !important;
  font-weight: 600;
}

.rpt-cell-due {
  color: var(--cs-amber-dark) !important;
  font-weight: 500;
}

/* ── Status Badges ────────────────────────────────────────── */

.rpt-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--cs-radius-full);
  font-size: var(--cs-text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.rpt-badge-pass {
  background: var(--cs-green-light);
  color: var(--cs-green-dark);
  border: 1px solid var(--cs-green-border);
}

.rpt-badge-fail {
  background: var(--cs-red-light);
  color: var(--cs-red-dark);
  border: 1px solid var(--cs-red-border);
}

.rpt-badge-pending {
  background: var(--cs-amber-light);
  color: var(--cs-amber-dark);
  border: 1px solid var(--cs-amber-border);
}

.rpt-badge-overdue {
  background: var(--cs-red);
  color: var(--cs-white);
  border: 1px solid var(--cs-red);
}

.rpt-badge-unknown {
  background: var(--cs-bg);
  color: var(--cs-text-muted);
  border: 1px solid var(--cs-border);
}

/* ── Loading / Empty ──────────────────────────────────────── */

.rpt-loading,
.rpt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  color: var(--cs-text-muted);
  text-align: center;
}

.rpt-loading svg,
.rpt-empty svg {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.45;
}

.rpt-loading p,
.rpt-empty p {
  font-size: var(--cs-text-sm);
  margin-top: 4px;
}

.rpt-empty h3 {
  font-size: var(--cs-text-lg);
  color: var(--cs-text-secondary);
  margin: 0;
}

/* ── Responsive: Tablet (≤1100px) ─────────────────────────── */

@media (max-width: 1100px) {
  .rpt-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Responsive: Small Tablet (≤900px) ────────────────────── */

@media (max-width: 900px) {
  .rpt-container {
    padding: 20px 20px 48px;
    margin-top: 68px;
  }

  .rpt-filters-row {
    flex-wrap: wrap;
  }

  .rpt-filter-group:first-child {
    flex: 1 1 45%;
    min-width: 140px;
  }

  .rpt-filter-group:nth-child(2) {
    flex: 1 1 35%;
    min-width: 120px;
  }

  .rpt-filter-search {
    flex: 1 1 100%;
    max-width: none;
    order: 3;
  }

  .rpt-filters-actions {
    order: 4;
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* ── Responsive: Mobile (≤768px) ──────────────────────────── */

@media (max-width: 768px) {
  .rpt-container {
    padding: 16px 16px 40px;
    margin-top: 64px;
  }

  .rpt-filters {
    padding: 14px 16px;
  }

  .rpt-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .rpt-filter-group:first-child,
  .rpt-filter-group:nth-child(2) {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(50% - 5px);
    min-width: 0;
  }

  .rpt-filter-search {
    flex: 1 1 100%;
    max-width: none;
    order: 3;
  }

  .rpt-filters-actions {
    order: 4;
    flex: 0 0 auto;
  }

  .rpt-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .rpt-stat-card {
    padding: 12px 14px;
    gap: 10px;
  }

  .rpt-stat-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .rpt-stat-value {
    font-size: 1.15rem;
  }

  .rpt-table thead th,
  .rpt-table tbody td {
    padding: 8px 10px;
  }

  /* Hide Location column on mobile */
  .rpt-table thead th:nth-child(4),
  .rpt-table tbody td:nth-child(4) {
    display: none;
  }
}

/* ── Responsive: Small Phone (≤480px) ─────────────────────── */

@media (max-width: 480px) {
  .rpt-container {
    padding: 12px 12px 32px;
  }

  .rpt-filters {
    padding: 12px;
  }

  .rpt-filter-group:first-child,
  .rpt-filter-group:nth-child(2) {
    flex: 1 1 100%;
  }

  .rpt-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .rpt-stat-card {
    padding: 10px 12px;
  }

  .rpt-stat-compliance .rpt-compliance-ring {
    width: 44px;
    height: 44px;
  }

  /* Hide Type and Last Inspected columns on small phones */
  .rpt-table thead th:nth-child(5),
  .rpt-table tbody td:nth-child(5),
  .rpt-table thead th:nth-child(7),
  .rpt-table tbody td:nth-child(7) {
    display: none;
  }

  .rpt-filters-advanced-row .rpt-filter-group {
    flex: 1 1 100%;
  }
}

/* ================================================================
   DrawingHotspots — dh- prefix, CloudSafe design tokens
   ================================================================ */

/* ── Shell ────────────────────────────────────────────────────── */
.dh-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  min-height: 0;
}

/* ── Top bar ──────────────────────────────────────────────────── */
.dh-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  flex-wrap: wrap;
}

.dh-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.dh-back-btn:hover {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border-color: #d1d5db;
  border-color: var(--cs-border-dark, #d1d5db);
}

.dh-topbar-title {
  flex: 1 1;
  min-width: 0;
}
.dh-topbar-title h1 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  letter-spacing: -0.02em;
}
.dh-topbar-title p {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.dh-topbar-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.dh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  border: none;
  font-family: inherit;
}

.dh-btn-primary {
  background: #1A80E5;
  color: #fff;
}
.dh-btn-primary:hover {
  background: #1570CC;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(26,128,229,0.25);
}

.dh-btn-danger {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.dh-btn-danger:hover {
  background: #fee2e2;
}

.dh-btn-outline {
  background: #fff;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
}
.dh-btn-outline:hover {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  border-color: #d1d5db;
  border-color: var(--cs-border-dark, #d1d5db);
}

.dh-btn-active {
  background: #1A80E5;
  color: #fff;
  border: 1px solid #1A80E5;
  box-shadow: 0 0 0 3px rgba(26,128,229,0.2);
}

.dh-btn-ghost {
  background: none;
  border: none;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  padding: 6px 10px;
}
.dh-btn-ghost:hover {
  color: #111827;
  color: var(--cs-text-primary, #111827);
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
}

/* ── Drawing selector tabs ────────────────────────────────────── */
.dh-drawing-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow-x: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.dh-drawing-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.15s;
}
.dh-drawing-tab:hover {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  color: #111827;
  color: var(--cs-text-primary, #111827);
}
.dh-drawing-tab.active {
  background: #EBF4FF;
  color: #1A80E5;
  border-color: #93C5FD;
}
.dh-drawing-tab svg {
  font-size: 0.85rem;
}

.dh-upload-tab {
  border: 1px dashed #d1d5db;
  border: 1px dashed var(--cs-border-dark, #d1d5db);
  color: #1A80E5;
}
.dh-upload-tab:hover {
  background: #EBF4FF;
  border-color: #93C5FD;
}
.dh-upload-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dh-tab-count {
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
}
.dh-drawing-tab.active .dh-tab-count {
  background: #DBEAFE;
  color: #1A80E5;
}

/* ── Canvas area ──────────────────────────────────────────────── */
.dh-canvas-wrap {
  flex: 1 1;
  min-height: 0;
  display: flex;
  gap: 12px;
}

.dh-canvas {
  flex: 1 1;
  min-width: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.dh-canvas-inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-conic-gradient(#f9fafb 0% 25%, #fff 0% 50%) 50% / 20px 20px;
  cursor: default;
}

.dh-canvas-inner.placing {
  cursor: crosshair;
}

.dh-canvas-img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  -webkit-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

/* ── Hotspot pin ──────────────────────────────────────────────── */
.dh-hotspot {
  position: absolute;
  transform: translate(-50%, -100%);
  cursor: pointer;
  z-index: 10;
  transition: transform 0.12s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.dh-hotspot:hover {
  transform: translate(-50%, -100%) scale(1.15);
  z-index: 20;
}

.dh-hotspot-pin {
  width: 28px;
  height: 36px;
  position: relative;
}

.dh-hotspot-pin svg {
  width: 28px;
  height: 36px;
}

.dh-hotspot-label {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  background: rgba(17, 24, 39, 0.9);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.dh-hotspot:hover .dh-hotspot-label {
  opacity: 1;
}

.dh-hotspot.selected {
  z-index: 30;
}
.dh-hotspot.selected .dh-hotspot-label {
  opacity: 1;
  background: #1A80E5;
}

/* Pending hotspot (being placed, not yet saved) */
.dh-hotspot-pending {
  animation: dhPulse 1.2s ease infinite;
}
@keyframes dhPulse {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(26,128,229,0.3)); }
  50% { filter: drop-shadow(0 2px 12px rgba(26,128,229,0.6)); }
}

/* Color coding by type */
.dh-pin-roof { color: #1A80E5; }
.dh-pin-fire { color: #ef4444; }
.dh-pin-equipment { color: #d97706; }
.dh-pin-default { color: #1A80E5; }

/* ── Empty state ──────────────────────────────────────────────── */
.dh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  text-align: center;
  height: 100%;
}
.dh-empty-ico {
  font-size: 2.5rem;
  color: #d1d5db;
}
.dh-empty h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}
.dh-empty p {
  margin: 0;
  font-size: 0.8125rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  max-width: 320px;
  line-height: 1.5;
}

/* ── Side panel ───────────────────────────────────────────────── */
.dh-side-panel {
  width: 320px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.dh-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
}
.dh-panel-header h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  display: flex;
  align-items: center;
  gap: 7px;
}
.dh-panel-header h3 svg {
  color: #1A80E5;
  font-size: 0.85rem;
}

.dh-panel-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 0;
}

/* ── Hotspot list ─────────────────────────────────────────────── */
.dh-hotspot-list {
  display: flex;
  flex-direction: column;
}

.dh-hotspot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #f9fafb;
  cursor: pointer;
  transition: background 0.12s;
  background: none;
  border-left: 3px solid transparent;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.dh-hotspot-item:hover {
  background: #f9fafb;
}
.dh-hotspot-item.active {
  background: #EBF4FF;
  border-left-color: #1A80E5;
}

.dh-item-ico {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  background: #EBF4FF;
  color: #1A80E5;
}
.dh-item-ico-roof { background: #EBF4FF; color: #1A80E5; }
.dh-item-ico-fire { background: #fef2f2; color: #ef4444; }
.dh-item-ico-equipment { background: #fffbeb; color: #d97706; }

.dh-item-info {
  flex: 1 1;
  min-width: 0;
}
.dh-item-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-item-type {
  font-size: 0.68rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.dh-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.dh-hotspot-item:hover .dh-item-actions {
  opacity: 1;
}

.dh-item-btn {
  background: none;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.75rem;
  transition: all 0.12s;
}
.dh-item-btn:hover {
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  color: #111827;
  color: var(--cs-text-primary, #111827);
}
.dh-item-btn-delete:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* ── Asset picker modal ───────────────────────────────────────── */
.dh-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px;
  animation: dhFadeIn 0.15s ease;
}

@keyframes dhFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dh-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  animation: dhSlideUp 0.2s ease;
}
@keyframes dhSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.dh-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
}
.dh-modal-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.dh-modal-close {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.9rem;
  transition: all 0.12s;
}
.dh-modal-close:hover {
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.dh-modal-search {
  padding: 12px 20px;
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
}
.dh-modal-search input {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  font-size: 0.8125rem;
  font-family: inherit;
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  color: #111827;
  color: var(--cs-text-primary, #111827);
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dh-modal-search input:focus {
  outline: none;
  border-color: #1A80E5;
  box-shadow: 0 0 0 3px rgba(26,128,229,0.12);
  background: #fff;
}

.dh-modal-filter {
  padding: 8px 20px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
}

.dh-filter-chip {
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  background: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.dh-filter-chip:hover {
  border-color: #93C5FD;
  color: #1A80E5;
}
.dh-filter-chip.active {
  background: #EBF4FF;
  border-color: #93C5FD;
  color: #1A80E5;
}

.dh-modal-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0;
}

.dh-asset-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border: none;
  border-bottom: 1px solid #f9fafb;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.dh-asset-option:hover {
  background: #EBF4FF;
}
.dh-asset-option:last-child {
  border-bottom: none;
}

.dh-asset-option-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  background: #EBF4FF;
  color: #1A80E5;
}

.dh-asset-option-info {
  flex: 1 1;
  min-width: 0;
}
.dh-asset-option-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}
.dh-asset-option-type {
  font-size: 0.7rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.dh-asset-option-check {
  color: #1A80E5;
  font-size: 0.9rem;
  flex-shrink: 0;
  opacity: 0;
}
.dh-asset-option:hover .dh-asset-option-check {
  opacity: 0.3;
}

/* ── Note input in modal ──────────────────────────────────────── */
.dh-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
  border-top: 1px solid var(--cs-border, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dh-note-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 8px;
  font-size: 0.8rem;
  font-family: inherit;
  resize: none;
  min-height: 60px;
  box-sizing: border-box;
}
.dh-note-input:focus {
  outline: none;
  border-color: #1A80E5;
  box-shadow: 0 0 0 3px rgba(26,128,229,0.12);
}

.dh-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Hotspot detail popover ───────────────────────────────────── */
.dh-popover-mobile {
  display: none;
}

.dh-popover {
  position: absolute;
  z-index: 40;
  background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  width: 260px;
  overflow: hidden;
  animation: dhSlideUp 0.15s ease;
}

.dh-popover-header {
  padding: 12px 14px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dh-popover-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #EBF4FF;
  color: #1A80E5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.dh-popover-info {
  flex: 1 1;
  min-width: 0;
}
.dh-popover-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-popover-type {
  font-size: 0.68rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

.dh-popover-body {
  padding: 10px 14px;
}
.dh-popover-note {
  font-size: 0.75rem;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  line-height: 1.4;
  margin: 0 0 8px;
}
.dh-popover-meta {
  font-size: 0.68rem;
  color: #9ca3af;
  color: var(--cs-text-faint, #9ca3af);
}

.dh-popover-actions {
  display: flex;
  gap: 0;
  border-top: 1px solid #f3f4f6;
}
.dh-popover-action {
  flex: 1 1;
  padding: 9px;
  border: none;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.dh-popover-action:first-child {
  border-right: 1px solid #f3f4f6;
}
.dh-popover-action-view {
  color: #1A80E5;
}
.dh-popover-action-view:hover {
  background: #EBF4FF;
}
.dh-popover-action-delete {
  color: #dc2626;
}
.dh-popover-action-delete:hover {
  background: #fef2f2;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .dh-side-panel {
    width: 260px;
  }
}

@media (max-width: 768px) {
  .dh-page {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  /* Top bar: stack vertically */
  .dh-topbar {
    padding: 10px 12px;
    gap: 8px;
    flex-direction: column;
    align-items: stretch;
    border-radius: 10px;
    margin-bottom: 8px;
  }
  .dh-topbar-title {
    text-align: center;
  }
  .dh-topbar-title h1 {
    font-size: 0.95rem;
  }
  .dh-topbar-title p {
    font-size: 0.7rem;
  }
  .dh-topbar-actions {
    justify-content: center;
  }
  .dh-back-btn {
    align-self: flex-start;
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  /* Drawing tabs: horizontal scroll, compact */
  .dh-drawing-tabs {
    padding: 6px 10px;
    gap: 4px;
    margin-bottom: 8px;
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
  }
  .dh-drawing-tab {
    padding: 6px 10px;
    font-size: 0.7rem;
  }

  /* Canvas + side panel: stack vertically */
  .dh-canvas-wrap {
    flex-direction: column;
    gap: 8px;
    overflow: visible;
  }

  .dh-canvas {
    border-radius: 10px;
    min-height: 300px;
  }

  .dh-canvas-inner {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Side panel: full width, compact */
  .dh-side-panel {
    width: 100%;
    max-height: 200px;
    border-radius: 10px;
  }
  .dh-panel-header {
    padding: 10px 14px;
  }
  .dh-panel-header h3 {
    font-size: 0.8rem;
  }
  .dh-hotspot-item {
    padding: 8px 12px;
  }
  .dh-item-ico {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
  }
  .dh-item-name {
    font-size: 0.75rem;
  }
  .dh-item-type {
    font-size: 0.62rem;
  }

  /* Modal: full-width bottom sheet */
  .dh-modal {
    max-width: none;
    margin: 0;
    border-radius: 16px 16px 0 0;
    max-height: 85vh;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .dh-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .dh-modal-header {
    padding: 14px 16px;
  }
  .dh-modal-header h2 {
    font-size: 0.9rem;
  }
  .dh-modal-search {
    padding: 10px 16px;
  }
  .dh-modal-filter {
    padding: 6px 16px;
  }
  .dh-asset-option {
    padding: 10px 16px;
  }

  /* Hide desktop inline popover on mobile */
  .dh-popover-desktop {
    display: none !important;
  }

  /* Show mobile bottom-sheet popover */
  .dh-popover-mobile {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 60vh;
    z-index: 500;
    background: #fff;
    border: 1px solid #e5e7eb;
    border: 1px solid var(--cs-border, #e5e7eb);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    animation: dhSlideUp 0.2s ease;
  }

  /* Empty state */
  .dh-empty {
    padding: 30px 16px;
  }
  .dh-empty-ico {
    font-size: 1.8rem;
  }
  .dh-empty h3 {
    font-size: 0.9rem;
  }
  .dh-empty p {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .dh-topbar-title h1 {
    font-size: 0.85rem;
  }
  .dh-btn {
    padding: 7px 12px;
    font-size: 0.72rem;
  }
  .dh-canvas {
    min-height: 250px;
  }
  .dh-side-panel {
    max-height: 180px;
  }
}

/* ================================================================
   Gallery View — Tours-style layout (floor sidebar + card grid)
   ================================================================ */

/* ── Gallery page shell ───────────────────────────────────────── */
.dh-gallery-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ── Gallery header ───────────────────────────────────────────── */
.dh-gallery-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.dh-gallery-header-icon {
  width: 38px;
  height: 38px;
  background: #EBF4FF;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A80E5;
  font-size: 1rem;
  flex-shrink: 0;
}

.dh-gallery-header-text {
  flex: 1 1;
  min-width: 0;
}

.dh-gallery-header-text h1 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  letter-spacing: -0.02em;
}

.dh-gallery-header-text p {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
}

/* ── Two-column layout ────────────────────────────────────────── */
.dh-gallery-layout {
  display: flex;
  gap: 12px;
  flex: 1 1;
  min-height: 0;
}

/* ── Floor sidebar ────────────────────────────────────────────── */
.dh-floor-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
}

.dh-floor-sidebar-title {
  padding: 12px 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--cs-border, #e5e7eb);
}

.dh-floor-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 6px 0;
}

.dh-floor-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.825rem;
  font-weight: 600;
  color: #374151;
  color: var(--cs-text-secondary, #374151);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  border-left: 3px solid transparent;
}

.dh-floor-btn:hover {
  background: #f9fafb;
  background: var(--cs-bg-alt, #f9fafb);
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.dh-floor-btn.active {
  background: #EBF4FF;
  color: #1A80E5;
  border-left-color: #1A80E5;
}

.dh-floor-btn-label {
  flex: 1 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dh-floor-count {
  flex-shrink: 0;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}

.dh-floor-btn.active .dh-floor-count {
  background: #DBEAFE;
  color: #1A80E5;
}

/* ── Gallery right panel ──────────────────────────────────────── */
.dh-gallery-content {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.dh-gallery-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.dh-gallery-content-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.dh-gallery-count {
  font-size: 0.75rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  padding: 3px 10px;
  border-radius: 99px;
  font-weight: 600;
}

/* ── Drawing card grid ────────────────────────────────────────── */
.dh-drawing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.dh-drawing-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.dh-drawing-card:hover {
  border-color: #1A80E5;
  box-shadow: 0 4px 16px rgba(26,128,229,0.12);
  transform: translateY(-2px);
}

/* ── Card thumbnail ───────────────────────────────────────────── */
.dh-drawing-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%) 50% / 16px 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dh-drawing-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dh-drawing-card-pdf-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 600;
  width: 100%;
  height: 100%;
}

.dh-drawing-card-pdf-placeholder svg {
  font-size: 2rem;
  color: #d1d5db;
}

/* Overlay on hover */
.dh-drawing-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,128,229,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.dh-drawing-card:hover .dh-drawing-card-overlay {
  opacity: 1;
}

.dh-drawing-card-overlay-icon {
  width: 44px;
  height: 44px;
  background: #1A80E5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(26,128,229,0.35);
}

/* ── Card body ────────────────────────────────────────────────── */
.dh-drawing-card-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dh-drawing-card-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dh-drawing-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dh-drawing-card-level {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #EBF4FF;
  color: #1A80E5;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
}

.dh-drawing-card-hotspots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f3f4f6;
  background: var(--cs-bg, #f3f4f6);
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}

.dh-drawing-card-arrow {
  margin-left: auto;
  color: #d1d5db;
  font-size: 0.8rem;
  transition: color 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.dh-drawing-card:hover .dh-drawing-card-arrow {
  color: #1A80E5;
  transform: translateX(3px);
}

/* ── Gallery empty state ──────────────────────────────────────── */
.dh-gallery-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  text-align: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.dh-gallery-empty-icon {
  font-size: 2.5rem;
  color: #d1d5db;
}

.dh-gallery-empty h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
}

.dh-gallery-empty p {
  margin: 0;
  font-size: 0.8125rem;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  max-width: 280px;
  line-height: 1.5;
}

/* ── Gallery loading ──────────────────────────────────────────── */
.dh-gallery-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 24px;
  color: #6b7280;
  color: var(--cs-text-muted, #6b7280);
  font-size: 0.875rem;
  font-weight: 600;
}

/* ── Viewer back bar ──────────────────────────────────────────── */
.dh-viewer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--cs-border, #e5e7eb);
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  flex-shrink: 0;
}

.dh-viewer-bar-title {
  flex: 1 1;
  font-size: 0.9rem;
  font-weight: 700;
  color: #111827;
  color: var(--cs-text-primary, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dh-viewer-bar-badge {
  background: #EBF4FF;
  color: #1A80E5;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  flex-shrink: 0;
}

/* PDF badge (appears in top-left of thumb once preview rendered) */
.dh-drawing-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(17, 24, 39, 0.82);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 2;
}

/* Delete button on card (top-right of thumb) */
.dh-drawing-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, transform 0.1s;
  z-index: 3;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  font-size: 0.8rem;
}
.dh-drawing-card:hover .dh-drawing-card-delete,
.dh-drawing-card-delete:focus-visible { opacity: 1; }
.dh-drawing-card-delete:hover { background: #DC2626; transform: scale(1.05); }
@media (max-width: 768px) {
  /* Always visible on touch devices */
  .dh-drawing-card-delete { opacity: 1; }
}

/* ── Responsive gallery ───────────────────────────────────────── */
@media (max-width: 768px) {
  .dh-gallery-header {
    padding: 10px 12px;
    gap: 10px;
    margin-bottom: 10px;
    text-align: left;
  }
  .dh-gallery-header-icon {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    border-radius: 8px;
  }
  .dh-gallery-title {
    font-size: 1rem !important;
    line-height: 1.15;
  }
  .dh-gallery-subtitle {
    font-size: 0.72rem !important;
    margin-top: 2px !important;
    line-height: 1.35;
  }

  .dh-gallery-layout {
    flex-direction: column;
    overflow: visible;
    gap: 10px;
  }

  .dh-floor-sidebar {
    width: 100%;
    flex-shrink: 0;
    padding: 4px;
  }
  .dh-floor-sidebar-label {
    display: none;
  }
  .dh-floor-sidebar > *:not(.dh-floor-btn) + .dh-floor-btn { margin-left: 0; }

  /* Turn the floor sidebar into a compact horizontal chip row */
  .dh-floor-sidebar {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
  }
  .dh-floor-sidebar::-webkit-scrollbar { display: none; }

  .dh-floor-btn {
    white-space: nowrap;
    border-left: none;
    padding: 7px 12px;
    border-radius: 999px;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.78rem;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid transparent;
  }
  .dh-floor-btn:hover { background: #e5e7eb; }
  .dh-floor-btn.active {
    border-left-color: transparent;
    background: #1A80E5;
    color: #fff;
  }
  .dh-floor-btn.active .dh-floor-count {
    background: rgba(255,255,255,0.22);
    color: #fff;
  }
  .dh-floor-chevron { display: none; }

  .dh-gallery-content-header {
    padding: 0 2px;
  }
  .dh-gallery-content-header h2 {
    font-size: 0.82rem;
  }

  .dh-drawing-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dh-drawing-card-thumb {
    aspect-ratio: 4 / 3;
    background:
      linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  }
  .dh-drawing-card-body {
    padding: 10px 12px;
    gap: 4px;
  }
  .dh-drawing-card-name {
    font-size: 0.82rem;
  }

  .dh-gallery-content {
    overflow: visible;
  }
}

@media (max-width: 480px) {
  .dh-gallery-header {
    padding: 9px 11px;
  }
  .dh-gallery-title {
    font-size: 0.95rem !important;
  }
  .dh-drawing-card-thumb {
    aspect-ratio: 3 / 2;
  }
}

/* ═══════════════════════════════════════════════════════════════
   3D TOURS PAGE — Immersive Dashboard
   ═══════════════════════════════════════════════════════════════ */

.tours-page {
  min-height: 100%;
  box-sizing: border-box;
  background: #f8fafc;
}

/* ── Full-page layout (sidebar + content) ── */
.tours-layout {
  display: grid;
  grid-template-columns: 224px 1fr;
  grid-gap: 0;
  gap: 0;
  min-height: 100%;
  align-items: start;
}

/* ════════════════════════════════════════════════════════════════
   FLOOR SIDEBAR
   ════════════════════════════════════════════════════════════════ */
.tours-floor-sidebar {
  background: #fff;
  border-right: 1px solid #e8edf2;
  min-height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.tours-floor-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 16px;
  font-size: 0.9rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.2px;
  border-bottom: 1px solid #f1f5f9;
}

.tours-sidebar-logo-icon {
  color: #2563eb;
  font-size: 1rem;
}

.tours-floor-sidebar-label {
  padding: 12px 16px 6px;
  font-size: 0.6rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.tours-floor-sidebar-label-mt {
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
}

/* Floor buttons */
.tours-floor-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px 9px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.1s;
  border-radius: 0;
  position: relative;
}

.tours-floor-btn:hover {
  background: #f8fafc;
}

.tours-floor-btn.active {
  background: #eff6ff;
}

.tours-floor-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: #2563eb;
  border-radius: 0 3px 3px 0;
}

.tours-floor-number {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: #64748b;
  flex-shrink: 0;
  transition: all 0.15s;
}

.tours-floor-btn.active .tours-floor-number {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.35);
}

.tours-floor-number-wide {
  font-size: 0.75rem;
}

.tours-floor-btn-all .tours-floor-number-wide {
  background: #1e40af;
  color: #fff;
}

.tours-floor-btn-all.active .tours-floor-number-wide {
  background: #2563eb;
  box-shadow: 0 2px 8px rgba(37,99,235,0.4);
}

.tours-floor-name {
  flex: 1 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.1s;
}

.tours-floor-btn.active .tours-floor-name {
  color: #1e40af;
  font-weight: 700;
}

.tours-floor-btn.empty .tours-floor-name {
  color: #94a3b8;
}

.tours-floor-count {
  font-size: 0.62rem;
  font-weight: 700;
  background: #e2e8f0;
  color: #64748b;
  padding: 2px 7px;
  border-radius: 99px;
  flex-shrink: 0;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.tours-floor-btn.active .tours-floor-count {
  background: rgba(37,99,235,0.12);
  color: #2563eb;
}

.tours-floor-count-empty {
  background: #f1f5f9 !important;
  color: #cbd5e1 !important;
}

/* ════════════════════════════════════════════════════════════════
   MAIN CONTENT AREA
   ════════════════════════════════════════════════════════════════ */
.tours-content {
  padding: 24px 28px 48px;
  min-width: 0;
}

/* ── Compact dashboard banner ── */
.tours-dashboard-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
}

.tours-dashboard-banner::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(37,99,235,0.2) 0%, transparent 65%);
  pointer-events: none;
}

.tours-dashboard-banner::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 300px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(14,165,233,0.1) 0%, transparent 65%);
  pointer-events: none;
}

.tours-dashboard-banner-left {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.tours-dashboard-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #93c5fd;
}

.tours-dashboard-banner-title {
  margin: 0 0 6px;
  font-size: 1.3rem;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.tours-dashboard-banner-sub {
  margin: 0;
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.5;
}

.tours-dashboard-stats {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.tours-stat-card {
  min-width: 96px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}

.tours-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1;
}

.tours-stat-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ── Floor section headers in overview ── */
.tours-overview-sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.tours-floor-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.tours-floor-section-title-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: opacity 0.15s;
}

.tours-floor-section-title-btn:hover {
  opacity: 0.75;
}

.tours-floor-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 7px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 800;
}

.tours-floor-section-name {
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.tours-floor-section-chevron {
  font-size: 0.6rem;
  color: #94a3b8;
  transition: transform 0.15s;
}

.tours-floor-section-title-btn:hover .tours-floor-section-chevron {
  transform: translateX(2px);
  color: #2563eb;
}

.tours-floor-section-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 3px 11px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
}

/* ── Individual floor header ── */
.tours-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.tours-content-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tours-content-floor-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 5px 10px;
  background: #1e40af;
  color: #fff;
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}

.tours-content-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.3px;
}

.tours-content-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  background: #e2e8f0;
  padding: 4px 12px;
  border-radius: 20px;
}

/* ══════════════════════════════════════════════════════════════
   TOUR CARD
   ══════════════════════════════════════════════════════════════ */
.tours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.tours-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8edf2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease, border-color 0.2s;
  cursor: pointer;
}

.tours-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 16px 40px rgba(37,99,235,0.14);
  border-color: rgba(37,99,235,0.2);
}

/* Thumbnail */
.tours-card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #060e1f;
}

.tours-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.tours-card:hover .tours-card-thumb-img {
  transform: scale(1.07);
}

/* Placeholder */
.tours-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 60%, #1e3a5f 0%, #0a1628 60%, #060e1f 100%);
  position: relative;
  overflow: hidden;
}

.tours-card-thumb-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(99,155,255,0.16) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: tours-grid-drift 14s linear infinite;
}

@keyframes tours-grid-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

.tours-card-thumb-placeholder::after {
  content: '';
  position: absolute;
  bottom: 32%;
  left: -10%;
  width: 120%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,155,255,0.4) 40%, rgba(99,155,255,0.6) 50%, rgba(99,155,255,0.4) 60%, transparent);
  filter: blur(1px);
}

.tours-card-thumb-placeholder svg {
  font-size: 2.2rem;
  color: #60a5fa;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 14px rgba(96,165,250,0.7));
  animation: tours-cube-float 4s ease-in-out infinite;
}

@keyframes tours-cube-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Hover overlay */
.tours-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6,14,31,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 3;
}

.tours-card-overlay-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: #2563eb;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 20px rgba(37,99,235,0.5);
}

.tours-card:hover .tours-card-overlay { opacity: 1; }

/* Floor pill (overview mode) */
.tours-card-floor-pill {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 20px);
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #f1f5f9;
  background: rgba(15,23,42,0.82);
  border: 1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.tours-card-floor-pill span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tours-card-floor-pill svg {
  flex-shrink: 0;
  font-size: 0.6rem;
  opacity: 0.8;
}

/* Card body */
.tours-card-body {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1;
}

.tours-card-body-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.tours-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tours-card-desc {
  font-size: 0.72rem;
  color: #94a3b8;
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tours-card-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.65rem;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, transform 0.2s;
}

.tours-card:hover .tours-card-arrow {
  background: #2563eb;
  color: #fff;
  transform: translateX(1px);
}

/* ══════════════════════════════════════════════════════════════
   STATES
   ══════════════════════════════════════════════════════════════ */
.tours-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 300px;
  color: #94a3b8;
  font-size: 0.9rem;
}

.tours-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: tours-spin 0.7s linear infinite;
}

@keyframes tours-spin { to { transform: rotate(360deg); } }

.tours-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px 28px 0;
  margin-bottom: 24px;
}

.tours-header-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(37,99,235,0.3);
}

.tours-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 3px;
  letter-spacing: -0.4px;
}

.tours-subtitle {
  font-size: 0.82rem;
  color: #94a3b8;
  margin: 0;
}

.tours-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  margin: 0 28px 28px;
  padding: 64px 24px;
  background: #fff;
  border-radius: 18px;
  border: 1.5px dashed #e2e8f0;
}

.tours-empty-icon { font-size: 2.5rem; color: #cbd5e1; }
.tours-empty h3 { font-size: 1rem; font-weight: 700; color: #334155; margin: 0; }
.tours-empty p { font-size: 0.84rem; color: #94a3b8; margin: 0; max-width: 340px; line-height: 1.6; }

.tours-floor-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 52px 24px;
  background: #fff;
  border-radius: 14px;
  border: 1.5px dashed #e2e8f0;
  text-align: center;
}

.tours-floor-empty-spaced { margin-top: 4px; }
.tours-floor-empty-icon { font-size: 1.8rem; color: #cbd5e1; }
.tours-floor-empty p { font-size: 0.84rem; color: #94a3b8; margin: 0; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tours-layout {
    grid-template-columns: 1fr;
  }

  .tours-floor-sidebar {
    min-height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid #e8edf2;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 12px;
    gap: 6px;
  }

  .tours-floor-sidebar::-webkit-scrollbar { display: none; }

  .tours-floor-sidebar-header,
  .tours-floor-sidebar-label { display: none; }

  .tours-floor-btn {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    border-radius: 10px;
    min-width: 72px;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
  }

  .tours-floor-btn.active::before { display: none; }
  .tours-floor-btn.active { background: #eff6ff; border-color: #93c5fd; }

  .tours-floor-name { font-size: 0.7rem; text-align: center; white-space: normal; }
  .tours-floor-count { margin: 0; }

  .tours-dashboard-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .tours-dashboard-stats {
    width: 100%;
    justify-content: stretch;
  }

  .tours-stat-card { flex: 1 1; min-width: 0; }
}

@media (max-width: 600px) {
  .tours-content { padding: 16px; }
  .tours-grid { grid-template-columns: 1fr 1fr; }
  .tours-dashboard-stats { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .tours-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   TOURS MANAGER — CloudStaff Admin Panel
   ═══════════════════════════════════════════════════════════════ */
.tm-wrap {
  padding: 24px;
  max-width: 860px;
}

/* ── Page Header ── */
.tm-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.tm-page-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}

.tm-page-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 2px;
}

.tm-page-sub {
  font-size: 0.82rem;
  color: #6b7280;
  margin: 0;
}

/* ── Sections ── */
.tm-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}

.tm-section-label,
.tm-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 12px;
}

/* ── Property Select ── */
.tm-select-wrap {
  position: relative;
}

.tm-select {
  width: 100%;
  padding: 10px 36px 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.88rem;
  color: #111827;
  background: #fff;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.tm-select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.tm-select-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 0.75rem;
  pointer-events: none;
}

/* ── Forms ── */
.tm-add-floor-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tm-add-floor-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tm-input {
  flex: 1 1;
  min-width: 160px;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.87rem;
  font-family: inherit;
  color: #111827;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tm-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.tm-input-narrow {
  max-width: 100px;
  min-width: 80px;
  flex: 0 0 auto;
}

.tm-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.tm-btn-primary:hover:not(:disabled) {
  background: #1d4ed8;
}

.tm-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Loading / Empty ── */
.tm-loading {
  font-size: 0.85rem;
  color: #9ca3af;
  padding: 8px 0;
}

.tm-empty {
  font-size: 0.85rem;
  color: #9ca3af;
  padding: 20px;
  text-align: center;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px dashed #e5e7eb;
}

/* ── Floors ── */
.tm-floors {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tm-floor-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.tm-floor-card.expanded {
  border-color: #bfdbfe;
}

.tm-floor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  background: #fff;
  transition: background 0.12s ease;
  -webkit-user-select: none;
          user-select: none;
}

.tm-floor-header:hover {
  background: #f9fafb;
}

.tm-floor-badge {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tm-floor-card.expanded .tm-floor-badge {
  background: #2563eb;
  color: #fff;
}

.tm-floor-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tm-floor-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #111827;
}

.tm-floor-count {
  font-size: 0.75rem;
  color: #9ca3af;
}

.tm-floor-actions {
  display: flex;
  gap: 6px;
}

.tm-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: all 0.12s ease;
  background: transparent;
}

.tm-icon-btn-danger {
  color: #ef4444;
}

.tm-icon-btn-danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.tm-floor-chevron {
  font-size: 0.75rem;
  color: #9ca3af;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.tm-floor-chevron.open {
  transform: rotate(180deg);
}

/* ── Floor Body ── */
.tm-floor-body {
  padding: 0 16px 16px;
  border-top: 1px solid #f3f4f6;
  background: #fafbfc;
}

/* ── Links List ── */
.tm-links-list {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.tm-link-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.tm-link-icon {
  color: #2563eb;
  font-size: 0.8rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.tm-link-info {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tm-link-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #111827;
}

.tm-link-desc {
  font-size: 0.78rem;
  color: #6b7280;
}

.tm-link-url {
  font-size: 0.75rem;
  color: #2563eb;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  word-break: break-all;
}

.tm-link-url:hover {
  text-decoration: underline;
}

.tm-link-url svg {
  font-size: 0.65rem;
  flex-shrink: 0;
}

/* ── Add Link Form ── */
.tm-add-link-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px dashed #e5e7eb;
  margin-top: 4px;
}

.tm-add-link-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tm-add-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tm-add-link-row .tm-input {
  flex: 1 1;
}

.tm-link-url-full {
  flex: 1 1;
  font-size: 0.8rem;
  color: #2563eb;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  word-break: break-all;
  min-width: 0;
}

.tm-link-url-full:hover {
  text-decoration: underline;
}

.tm-link-url-full svg {
  font-size: 0.65rem;
  flex-shrink: 0;
}

/* ── Area Permission Selector ── */
.tm-area-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #e5e7eb;
}

.tm-area-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.tm-area-hint {
  font-size: 0.73rem;
  font-weight: 400;
  color: #9ca3af;
  text-transform: none;
  letter-spacing: 0;
}

.tm-area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tm-area-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1.5px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.tm-area-chip:hover {
  border-color: #2563eb;
  color: #2563eb;
  background: #eff6ff;
}

.tm-area-chip.active {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.tm-area-chip-check {
  font-size: 0.65rem;
}

/* ── Floor meta (count + area badges) ── */
.tm-floor-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tm-floor-area-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tm-floor-area-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.68rem;
  font-weight: 600;
  border: 1px solid #bfdbfe;
}

.tm-floor-area-badge svg {
  font-size: 0.6rem;
}

/* ── Floor Area Editor (inside expanded floor body) ── */
.tm-floor-area-editor {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tm-area-editor-hint {
  font-size: 0.78rem;
  color: #9ca3af;
  margin: 0;
  line-height: 1.4;
}

.tm-area-save-btn {
  align-self: flex-start;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .tm-wrap { padding: 16px; }
  .tm-add-floor-form { flex-direction: column; }
  .tm-input-narrow { max-width: 100%; }
  .tm-area-chips { gap: 6px; }
}


/*# sourceMappingURL=main.75bf749d.css.map*/