/* =====================================================
   Transcanada Logistics — Design System
   Corporate Modern | Terminal Dark Mode
   ===================================================== */

/* Google Fonts are loaded via HTML <link> tags in each page for parallel download */

/* =====================================================
   CSS Custom Properties (Design Tokens)
   ===================================================== */
:root {
  /* Dark Surface Layers */
  --color-background:           #0b0f1a;
  --color-surface:              #0c1322;
  --color-surface-dim:          #0c1322;
  --color-surface-bright:       #323949;
  --color-surface-container-lowest: #070e1d;
  --color-surface-container-low:    #141b2b;
  --color-surface-container:        #191f2f;
  --color-surface-container-high:   #232a3a;
  --color-surface-container-highest: #2e3545;
  --color-surface-variant:      #2e3545;

  /* Primary — Action Blue */
  --color-primary:              #b4c5ff;
  --color-on-primary:           #002a78;
  --color-primary-container:    #2563eb;
  --color-on-primary-container: #eeefff;
  --color-primary-fixed:        #dbe1ff;
  --color-primary-fixed-dim:    #b4c5ff;
  --color-inverse-primary:      #0053db;

  /* Secondary */
  --color-secondary:            #bec6e0;
  --color-on-secondary:         #283044;
  --color-secondary-container:  #3f465c;
  --color-on-secondary-container: #adb4ce;

  /* Tertiary — Cyan Blue */
  --color-tertiary:             #7bd0ff;
  --color-on-tertiary:          #00354a;
  --color-tertiary-container:   #00759f;
  --color-on-tertiary-container: #e1f2ff;

  /* Error */
  --color-error:                #ffb4ab;
  --color-on-error:             #690005;
  --color-error-container:      #93000a;
  --color-on-error-container:   #ffdad6;

  /* Text */
  --color-on-surface:           #dce2f7;
  --color-on-surface-variant:   #c3c6d7;
  --color-on-background:        #dce2f7;
  --color-inverse-surface:      #dce2f7;
  --color-inverse-on-surface:   #293040;

  /* Borders */
  --color-outline:              #8d90a0;
  --color-outline-variant:      #45464f;

  /* Extras */
  --radius-sm:                  4px;
  --radius-md:                  8px;
  --radius-lg:                  16px;
  --radius-full:                9999px;

  /* Shadows */
  --shadow-sm:                  0 2px 4px rgba(0,0,0,0.4);
  --shadow-md:                  0 8px 16px rgba(0,0,0,0.5);
  --shadow-lg:                  0 16px 32px rgba(0,0,0,0.6);

  --space-gutter:               24px;
}

/* =====================================================
   Light Theme Tokens
   ===================================================== */
[data-theme="light"] {
  /* Light Surface Layers */
  --color-background:           #faf8ff;
  --color-surface:              #faf8ff;
  --color-surface-dim:          #d2d9f4;
  --color-surface-bright:       #faf8ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low:    #f2f3ff;
  --color-surface-container:        #eaedff;
  --color-surface-container-high:   #e2e7ff;
  --color-surface-container-highest: #dae2fd;
  --color-surface-variant:      #dae2fd;

  /* Primary */
  --color-primary:              #004ac6;
  --color-on-primary:           #ffffff;
  --color-primary-container:    #2563eb;
  --color-on-primary-container: #eeefff;
  --color-primary-fixed:        #dbe1ff;
  --color-primary-fixed-dim:    #b4c5ff;
  --color-inverse-primary:      #b4c5ff;

  /* Secondary */
  --color-secondary:            #505f76;
  --color-on-secondary:         #ffffff;
  --color-secondary-container:  #d0e1fb;
  --color-on-secondary-container: #54647a;

  /* Tertiary */
  --color-tertiary:             #943700;
  --color-on-tertiary:          #ffffff;
  --color-tertiary-container:   #bc4800;
  --color-on-tertiary-container: #ffede6;

  /* Error */
  --color-error:                #ba1a1a;
  --color-on-error:             #ffffff;
  --color-error-container:      #ffdad6;
  --color-on-error-container:   #93000a;

  /* Text */
  --color-on-surface:           #131b2e;
  --color-on-surface-variant:   #434655;
  --color-on-background:        #131b2e;
  --color-inverse-surface:      #283044;
  --color-inverse-on-surface:   #eef0ff;

  /* Borders */
  --color-outline:              #737686;
  --color-outline-variant:      #c3c6d7;
  
  /* Shadows */
  --shadow-sm:                  0 2px 4px rgba(0,0,0,0.05);
  --shadow-md:                  0 8px 16px rgba(0,0,0,0.1);
  --shadow-lg:                  0 16px 32px rgba(0,0,0,0.15);
}

/* Typography Scale */
:root {
  --font-headline:   'Hanken Grotesk', sans-serif;
  --font-body:       'Inter', sans-serif;
  --font-mono:       'JetBrains Mono', monospace;
  --font-display:    'Anton', sans-serif;

  /* Font sizes */
  --text-display-lg:  36px;
  --text-headline-md: 24px;
  --text-headline-sm: 20px;
  --text-body-lg:     16px;
  --text-body-md:     14px;
  --text-body-sm:     13px;
  --text-label-caps:  11px;
  --text-data-mono:   13px;

  /* Spacing */
  --space-unit:    4px;
  --space-gutter:  16px;
  --space-margin:  32px;
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;

  /* Border Radius */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-full: 9999px;

  /* Shadows & Glows */
  --glow-primary: 0 0 15px rgba(180, 197, 255, 0.15);
  --glow-error:   0 0 15px rgba(255, 180, 171, 0.15);
}

/* =====================================================
   Base Reset & Typography
   ===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-on-surface);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  color: var(--color-on-surface);
  line-height: 1.2;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 0.2s;
}

a:hover { opacity: 0.85; }

img { max-width: 100%; display: block; }

/* =====================================================
   Scrollbar
   ===================================================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-surface-container); }
::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: var(--radius-md);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-outline); }

/* =====================================================
   Material Symbols
   ===================================================== */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}
.ms-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* =====================================================
   Utility Classes
   ===================================================== */

/* Glassmorphism */
.glass {
  background: rgba(35, 42, 58, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-outline-variant);
}
[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--color-outline-variant);
}

/* Status Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-label-caps);
  font-weight: 500;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}
.badge-active   { background: rgba(123, 208, 255, 0.12); color: var(--color-tertiary);  border-color: rgba(123,208,255,0.25); }
.badge-draft    { background: rgba(67,  70,  85,  0.5);  color: var(--color-on-surface-variant); border-color: var(--color-outline-variant); }
.badge-archived { background: rgba(255,180,171,0.1);      color: var(--color-error);     border-color: rgba(255,180,171,0.25); }
.badge-pending  { background: rgba(180,197,255,0.1);      color: var(--color-primary);   border-color: rgba(180,197,255,0.25); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  position: relative;
  transform: translateY(0);
}
.btn:active {
  transform: translateY(2px);
}
.btn-primary {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 0 #002a78, 0 6px 10px rgba(0,0,0,0.4);
}
.btn-primary:hover { 
  filter: brightness(1.1); 
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 5px 0 #002a78, 0 8px 15px rgba(0,0,0,0.5);
}
.btn-primary:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 #002a78, 0 2px 4px rgba(0,0,0,0.4);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 3px 0 rgba(0,0,0,0.2);
}
.btn-outline:hover { 
  background: rgba(180,197,255,0.1); 
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(0,0,0,0.3);
}
.btn-outline:active {
  box-shadow: 0 0 0 rgba(0,0,0,0.1);
}

.btn-ghost {
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface);
  border-color: var(--color-outline-variant);
  box-shadow: 0 3px 0 rgba(0,0,0,0.3);
}
.btn-ghost:hover { 
  border-color: var(--color-primary); 
  color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(0,0,0,0.4);
}
.btn-ghost:active {
  box-shadow: 0 0 0 rgba(0,0,0,0.2);
}

.btn-danger {
  background: rgba(255,180,171,0.1);
  color: var(--color-error);
  border-color: rgba(255,180,171,0.3);
  box-shadow: 0 3px 0 rgba(255,180,171,0.2);
}
.btn-danger:hover { 
  background: rgba(255,180,171,0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(255,180,171,0.3);
}
.btn-danger:active {
  box-shadow: 0 0 0 rgba(255,180,171,0.1);
}

/* Form Controls */
.form-input {
  width: 100%;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-on-surface);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.form-input::placeholder { color: var(--color-outline); }
.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--glow-primary);
}

.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
  margin-bottom: 4px;
}

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

/* Card */
.card {
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 24px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.4);
  transform: translateY(0) translateZ(0);
}
.card:hover { 
  border-color: rgba(180,197,255,0.4); 
  transform: translateY(-4px) translateZ(0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 16px 32px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.5);
}

/* Table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}
.data-table thead {
  background: var(--color-surface-container-high);
  border-bottom: 1px solid var(--color-outline-variant);
}
.data-table th {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: var(--text-label-caps);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  text-align: left;
}
.data-table tbody tr {
  border-bottom: 1px solid rgba(67, 70, 85, 0.5);
  transition: background 0.15s;
}
.data-table tbody tr:hover { background: rgba(46, 53, 69, 0.5); }
.data-table td { padding: 12px 16px; }

/* Divider */
.divider {
  height: 1px;
  background: var(--color-outline-variant);
  margin: 16px 0;
}

/* Loading Spinner */
.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid var(--color-outline-variant);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Alert / Toast */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-success { background: rgba(123,208,255,0.1); color: var(--color-tertiary);  border-color: rgba(123,208,255,0.3); }
.alert-error   { background: rgba(255,180,171,0.1); color: var(--color-error);     border-color: rgba(255,180,171,0.3); }
.alert-info    { background: rgba(180,197,255,0.1); color: var(--color-primary);   border-color: rgba(180,197,255,0.3); }

/* =====================================================
   Landing Page — Public Side
   ===================================================== */

/* Navbar */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s ease;
}
.site-nav.scrolled {
  background: rgba(12, 19, 34, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-outline-variant);
  box-shadow: var(--shadow-sm);
}

/* Light mode nav — transparent at top, glass-white when scrolled */
[data-theme="light"] .site-nav {
  border-bottom: 1px solid rgba(0, 74, 198, 0.08);
}
[data-theme="light"] .site-nav.scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-outline-variant);
  box-shadow: 0 2px 16px rgba(0, 74, 198, 0.07);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-gutter);
  height: 72px;
}
.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}
/* Dark mode: brand text white on hero, dark when scrolled */
.site-nav__brand span:not(.material-symbols-outlined) {
  color: #ffffff;
  transition: color 0.3s;
}
.site-nav.scrolled .site-nav__brand span:not(.material-symbols-outlined) {
  color: var(--color-on-surface);
}
/* Light mode: brand text always dark */
[data-theme="light"] .site-nav__brand span:not(.material-symbols-outlined) {
  color: var(--color-on-surface);
}
[data-theme="light"] .site-nav.scrolled .site-nav__brand span:not(.material-symbols-outlined) {
  color: var(--color-on-surface);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.site-nav__links a {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Hide icons on desktop */
.site-nav__links a .nav-link__icon,
.site-nav__links a .nav-link__arrow {
  display: none;
}
.site-nav.scrolled .site-nav__links a {
  color: var(--color-on-surface-variant);
}
/* Light mode nav links — always dark/muted */
[data-theme="light"] .site-nav__links a {
  color: var(--color-on-surface-variant);
}
[data-theme="light"] .site-nav.scrolled .site-nav__links a {
  color: var(--color-on-surface-variant);
}
.site-nav__links a:hover { color: var(--color-primary) !important; }

.theme-toggle-btn, .nav-icon-btn {
  color: rgba(255,255,255,0.85) !important;
  transition: color 0.3s;
}
.site-nav.scrolled .theme-toggle-btn, .site-nav.scrolled .nav-icon-btn {
  color: var(--color-on-surface-variant) !important;
}
[data-theme="light"] .theme-toggle-btn, [data-theme="light"] .nav-icon-btn {
  color: var(--color-on-surface-variant) !important;
}
.theme-toggle-btn:hover, .nav-icon-btn:hover { color: var(--color-primary) !important; }

/* Hamburger (mobile) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  color: #fff;
  cursor: pointer;
  padding: 8px;
  transition: background 0.2s, border-color 0.2s;
  width: 40px;
  height: 40px;
}
.nav-toggle:hover {
  background: rgba(255,255,255,0.18);
}
.site-nav.scrolled .nav-toggle {
  background: var(--color-surface-container-high);
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface);
}
[data-theme="light"] .nav-toggle {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.12);
  color: var(--color-on-surface);
}

/* Mobile Slide-Down Menu */
@keyframes menuSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav__links {
    display: none;
    position: absolute;
    top: 72px;
    left: 12px;
    right: 12px;
    flex-direction: column;
    background: rgba(12, 19, 34, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(180,197,255,0.15);
    border-radius: var(--radius-lg);
    padding: 8px;
    gap: 4px;
    z-index: 100;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
  }

  [data-theme="light"] .site-nav__links {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(0, 74, 198, 0.15);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,74,198,0.08);
  }

  .site-nav__links.open {
    display: flex !important;
    animation: menuSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* Style individual mobile nav items */
  .site-nav__links > li {
    width: 100%;
  }

  .site-nav__links > li > a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    color: rgba(255,255,255,0.85) !important;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    text-transform: uppercase;
  }

  /* Show icons & arrow on mobile */
  .site-nav__links > li > a .nav-link__icon {
    display: inline-flex;
    font-size: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
  }

  .site-nav__links > li > a .nav-link__label {
    flex: 1;
  }

  .site-nav__links > li > a .nav-link__arrow {
    display: inline-flex;
    font-size: 18px;
    color: rgba(255,255,255,0.2);
    flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
  }

  .site-nav__links > li > a:hover {
    background: rgba(180,197,255,0.1);
    color: #fff !important;
  }

  .site-nav__links > li > a:hover .nav-link__arrow {
    transform: translateX(3px);
    color: var(--color-primary);
  }

  /* Active link */
  .site-nav__links > li > a.nav-link--active {
    background: rgba(37,99,235,0.15);
    color: var(--color-primary) !important;
    border-left: 3px solid var(--color-primary);
    padding-left: 13px;
  }

  .site-nav__links > li > a.nav-link--active .nav-link__icon {
    color: var(--color-primary);
  }

  .site-nav__links > li > a.nav-link--active .nav-link__arrow {
    color: var(--color-primary);
  }

  /* Light mode overrides */
  [data-theme="light"] .site-nav__links > li > a {
    color: var(--color-on-surface-variant) !important;
  }

  [data-theme="light"] .site-nav__links > li > a:hover {
    background: rgba(0,74,198,0.07);
    color: var(--color-primary) !important;
  }

  [data-theme="light"] .site-nav__links > li > a .nav-link__arrow {
    color: rgba(0,0,0,0.18);
  }

  [data-theme="light"] .site-nav__links > li > a.nav-link--active {
    background: rgba(0,74,198,0.1);
    border-left-color: var(--color-primary);
  }

  /* Divider between nav items */
  .site-nav__links > li + li > a {
    border-top: 1px solid rgba(255,255,255,0.05);
    border-radius: 0;
  }

  .site-nav__links > li:last-child > a,
  .site-nav__links > li:last-child > span,
  .site-nav__links > li:last-child > button {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }

  .site-nav__links > li:first-child > a {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  [data-theme="light"] .site-nav__links > li + li > a {
    border-top-color: rgba(0,0,0,0.05);
  }

  /* Language switcher in mobile menu */
  .site-nav__links li[style*="margin-left"] {
    padding: 10px 16px;
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid rgba(255,255,255,0.06);
    width: 100%;
  }

  /* Theme toggle in mobile menu */
  .site-nav__links li:has(.theme-toggle-btn) {
    padding: 4px 8px 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  .site-nav__links li:has(.theme-toggle-btn) .theme-toggle-btn {
    color: rgba(255,255,255,0.6) !important;
    width: 100%;
    justify-content: flex-start;
    padding: 10px 8px;
    gap: 10px;
    border-radius: var(--radius-md);
    font-size: 13px;
  }

  .site-nav__links li:has(.theme-toggle-btn) .theme-toggle-btn:hover {
    background: rgba(255,255,255,0.06);
    color: #fff !important;
  }

  [data-theme="light"] .site-nav__links li[style*="margin-left"] {
    border-top-color: rgba(0,0,0,0.05);
  }

  [data-theme="light"] .site-nav__links li:has(.theme-toggle-btn) {
    border-top-color: rgba(0,0,0,0.05);
  }

  [data-theme="light"] .site-nav__links li:has(.theme-toggle-btn) .theme-toggle-btn {
    color: var(--color-on-surface-variant) !important;
  }
}

/* Section wrapper */
.section {
  padding: 96px var(--space-gutter);
  max-width: 1280px;
  margin: 0 auto;
}

.section-title {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  font-weight: 700;
  color: var(--color-on-surface);
  margin-bottom: 8px;
}
.section-subtitle {
  font-size: var(--text-body-lg);
  color: var(--color-on-surface-variant);
  margin-bottom: 48px;
}

/* Contact info bar */
.contact-bar {
  background: var(--color-primary-container);
  border-radius: var(--radius-full);
  padding: 14px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--color-on-primary-container);
  font-weight: 600;
}
.contact-bar a {
  color: var(--color-on-primary-container);
  font-weight: 700;
  word-break: break-word;
}
.contact-bar__item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-bar__icon {
  background: rgba(255, 255, 255, 0.25);
  color: var(--color-on-primary-container);
  border-radius: 50%;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Light mode: pill stays Action Blue, icons use white circle */
[data-theme="light"] .contact-bar {
  background: var(--color-primary-container);
  color: #ffffff;
}
[data-theme="light"] .contact-bar a {
  color: #ffffff;
}
[data-theme="light"] .contact-bar__icon {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .contact-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 16px;
    border-radius: var(--radius-xl); /* Change from pill to rounded rectangle to prevent distortion */
  }
}

/* Price Table (public) */
.price-table-wrapper {
  overflow-x: auto;
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface-container);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
}
.price-table th {
  background: var(--color-surface-container-high);
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: var(--text-label-caps);
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}
.price-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-outline-variant);
  font-size: var(--text-body-sm);
}
.price-table tr:last-child td { border-bottom: none; }
.price-table tr:hover td { background: var(--color-surface-container-low); }

/* =====================================================
   Admin Panel Sidebar
   ===================================================== */
.admin-sidebar {
  position: fixed;
  left: 0; top: 0;
  width: var(--sidebar-width);
  height: 100%;
  background: var(--color-surface-container);
  border-right: 1px solid var(--color-outline-variant);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  z-index: 50;
  transition: width 0.2s;
}
.admin-sidebar__brand {
  padding: 0 20px 24px;
  border-bottom: 1px solid rgba(67,70,85,0.5);
  margin-bottom: 8px;
}
.admin-sidebar__nav { flex: 1; padding: 8px 12px; overflow-y: auto; }
.admin-sidebar__footer { padding: 8px 12px; border-top: 1px solid rgba(67,70,85,0.5); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-md);
  font-weight: 500;
  transition: all 0.15s;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.nav-item:hover {
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface);
}
.nav-item.active {
  background: rgba(180,197,255,0.1);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 700;
}

/* Admin main content */
.admin-main {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  flex: 1;
  min-width: 0;
}

/* Admin topbar */
.admin-topbar {
  height: 64px;
  background: var(--color-surface-container-high);
  border-bottom: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-margin);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Admin content area */
.admin-content {
  flex: 1;
  padding: var(--space-margin);
}

/* Metric card */
.metric-card {
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.4);
  transform: translateY(0);
}
.metric-card:hover { 
  border-color: rgba(180,197,255,0.4); 
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 12px 24px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.5);
}
.metric-card__bg {
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: rgba(180,197,255,0.05);
  border-radius: 0 0 0 100%;
}
.metric-card__label {
  font-family: var(--font-mono);
  font-size: var(--text-label-caps);
  color: var(--color-on-surface-variant);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.metric-card__value {
  font-family: var(--font-headline);
  font-size: var(--text-display-lg);
  font-weight: 700;
  color: var(--color-on-surface);
  line-height: 1.1;
  margin: 8px 0;
}
.metric-card__trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-body-sm);
}

/* Drawer / Side Panel */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  justify-content: center;
  align-items: center;
  padding: 24px;
}
.drawer-overlay.open { display: flex; }
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,15,26,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.drawer-panel {
  position: relative;
  width: 100%;
  max-width: 700px;
  background: var(--color-surface-container);
  max-height: 100%;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.drawer-overlay.open .drawer-panel { 
  transform: translateY(0) scale(1);
  opacity: 1;
}
.drawer-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-high);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-body { flex: 1; overflow-y: auto; padding: 24px; }
.drawer-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-high);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Toggle Switch */
.toggle-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle-input { display: none; }
.toggle-track {
  width: 40px; height: 22px;
  background: var(--color-surface-container-highest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 11px;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.toggle-input:checked ~ .toggle-track {
  background: var(--color-primary-container);
  border-color: var(--color-primary-container);
}
.toggle-thumb {
  position: absolute;
  left: 2px; top: 2px;
  width: 16px; height: 16px;
  background: var(--color-outline);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle-input:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(18px);
  background: var(--color-on-primary-container);
}

/* Ping animation */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.ping { animation: ping 1.2s cubic-bezier(0,0,0.2,1) infinite; }

/* Fade in animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.5s ease forwards; }

/* =====================================================
   Pagination Controls
   ===================================================== */
.pagination-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-low);
  color: var(--color-on-surface-variant);
}
.pagination-inner {
  display: flex;
  align-items: center;
  gap: 32px;
}
.pagination-rpp {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-body-sm);
}
.pagination-select {
  background: transparent;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  cursor: pointer;
  outline: none;
}
.pagination-select option {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
}
.pagination-info {
  font-size: var(--text-body-sm);
  font-family: var(--font-body);
}
.pagination-buttons {
  display: flex;
  gap: 4px;
}
.pagination-btn.icon-btn {
  background: transparent;
  border: none;
  color: var(--color-on-surface-variant);
  padding: 6px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.pagination-btn.icon-btn:hover:not(:disabled) {
  background: var(--color-surface-variant);
  color: var(--color-on-surface);
}
.pagination-btn.icon-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.pagination-btn.icon-btn .material-symbols-outlined {
  font-size: 20px;
}

/* =====================================================
   Language Tab Components (Admin Pages)
   ===================================================== */
.lang-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-outline-variant);
  margin-bottom: 16px;
}
.lang-tab {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--color-on-surface-variant);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lang-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.lang-tab:hover:not(.active) { color: var(--color-on-surface); }
.lang-flag { font-size: 18px; line-height: 1; }

/* Language panel visibility — shared across all admin pages */
.lang-panel,
.drawer-lang-panel,
.about-lang-panel { display: none; }

.lang-panel.active,
.drawer-lang-panel.active,
.about-lang-panel.active { display: block; }

/* Bilingual content markers (Settings page) */
.bilingual-section {
  background: rgba(180, 197, 255, 0.05);
  border: 1px dashed var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}
.bilingual-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  margin-bottom: 12px;
}

/* =====================================================
   Messages — Conversation & Toast Components
   ===================================================== */
.msg-unread-row    { background: rgba(180, 197, 255, 0.03); }
.msg-selected-row  { background: rgba(180, 197, 255, 0.08) !important; }

.toast-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}
.reply-bubble-admin {
  background: rgba(180, 197, 255, 0.08);
  border: 1px solid rgba(180, 197, 255, 0.2);
  border-radius: 12px 12px 0 12px;
  align-self: flex-end;
  max-width: 85%;
  padding: 12px;
  margin-left: auto;
}
.message-user-bubble {
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: 12px 12px 12px 0;
  align-self: flex-start;
  max-width: 85%;
  padding: 12px;
}

/* Responsive helpers */
@media (max-width: 768px) {
  .admin-sidebar { display: none; }
  .admin-main { margin-left: 0; }
  .section { padding: 64px var(--space-gutter); }
  .contact-bar { padding: 14px 20px; flex-direction: column; align-items: flex-start; }
}

/* =====================================================
   Luminous Professional — Light Mode Design Overrides
   (DESIGN.md: surface:#faf8ff, primary:#004ac6, Action Blue:#2563eb)
   ===================================================== */

/* ── Hero Section ──
   Replace dark overlay with a soft white-to-transparent gradient (DESIGN.md) */
[data-theme="light"] #home > div:first-child {
  background: linear-gradient(to bottom,
    rgba(250, 248, 255, 0.72) 0%,
    rgba(250, 248, 255, 0.90) 100%
  ) !important;
}

/* Hero heading text — deep charcoal on light background */
[data-theme="light"] #home h1 > span:first-child {
  color: var(--color-on-background) !important;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.12) !important;
}
[data-theme="light"] #home h1 span span {
  color: var(--color-primary-container) !important;
}
[data-theme="light"] #home p {
  color: var(--color-on-surface-variant) !important;
}

/* ── Welcome / About Section ──
   Surface background with right-to-transparent gradient instead of dark overlay */
[data-theme="light"] #about {
  background-image: linear-gradient(
    to right,
    rgba(250, 248, 255, 0.97) 0%,
    rgba(250, 248, 255, 0.90) 55%,
    rgba(250, 248, 255, 0.75) 100%
  ), url('') !important;
  background-color: var(--color-surface) !important;
}
[data-theme="light"] #about h2 {
  color: var(--color-primary) !important;
}
[data-theme="light"] #about div[style*="rgba(220,226,247"] {
  color: var(--color-on-surface-variant) !important;
}
[data-theme="light"] #about p[style*="color:#fff"] {
  color: var(--color-on-surface) !important;
}

/* ── Why Choose Us Section ──
   Replace the dark rgba(11,15,26,0.87) overlay with a light surface overlay */
[data-theme="light"] #services {
  background: var(--color-surface-container-low) !important;
  background-image: none !important;
}
[data-theme="light"] #services > div:first-child {
  background: transparent !important;
}
/* Why Choose Us section heading text */
[data-theme="light"] #services h2 span:first-child {
  color: var(--color-on-surface) !important;
}
[data-theme="light"] #services h2 span:last-child {
  color: var(--color-primary-container) !important;
}

/* Section backgrounds — use light surface tiers */
[data-theme="light"] body {
  background-color: var(--color-background);
}

/* Cards in light mode — 1px stroke, no heavy shadow (DESIGN.md Level 1) */
[data-theme="light"] .card {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="light"] .card:hover {
  border-color: rgba(0, 74, 198, 0.3);
  box-shadow: 0 2px 8px rgba(0, 74, 198, 0.08);
}

/* Table rows — light mode subtle hover */
[data-theme="light"] .data-table tbody tr:hover {
  background: var(--color-surface-container-low);
}
[data-theme="light"] .data-table tbody tr {
  border-bottom: 1px solid var(--color-outline-variant);
}

/* Footer — lighter surface in light mode */
[data-theme="light"] footer {
  background: var(--color-surface-container-low) !important;
}

/* Scrollbar — lighter in light mode */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--color-surface-container-low);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
}

/* Section title accents in light mode */
[data-theme="light"] .section-title {
  color: var(--color-on-surface);
}
[data-theme="light"] .section-subtitle {
  color: var(--color-on-surface-variant);
}

/* Buttons — pill shape for light mode primary (DESIGN.md: full radius) */
[data-theme="light"] .btn-primary {
  background: var(--color-primary-container);
  color: #ffffff;
  border-radius: var(--radius-full);
}
[data-theme="light"] .btn-primary:hover {
  background: var(--color-primary);
  filter: none;
  box-shadow: 0 4px 14px rgba(0, 74, 198, 0.25);
}
[data-theme="light"] .btn-outline {
  border-radius: var(--radius-full);
}

/* ── Contact Section ──
   Replace the dark 135deg overlay with clean light surfaces */
[data-theme="light"] #contact {
  background: linear-gradient(135deg,
    rgba(250, 248, 255, 0.97) 0%,
    rgba(242, 243, 255, 0.95) 60%,
    rgba(250, 248, 255, 0.97) 100%
  ), url('') !important;
  background-color: var(--color-surface-container-low) !important;
}
[data-theme="light"] #contact h2 {
  color: var(--color-on-surface) !important;
}
[data-theme="light"] #contact h3[style*="color:var(--color-primary-container)"] {
  color: var(--color-primary-container) !important;
}
/* Contact link text — white becomes dark in light mode */
[data-theme="light"] #contact a[style*="color:#fff"] {
  color: var(--color-on-surface) !important;
}
[data-theme="light"] #contact p[style*="color:#fff"] {
  color: var(--color-on-surface) !important;
}
/* Contact form card */
[data-theme="light"] #contact > div > div > div:last-child > div {
  background: var(--color-surface-container-lowest) !important;
  border: 1px solid var(--color-outline-variant) !important;
}
/* Form inputs in light mode */
[data-theme="light"] .form-input {
  background: var(--color-surface-container-lowest);
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface);
}
[data-theme="light"] .form-input:focus {
  border-color: var(--color-primary-container);
  box-shadow: 0 0 0 3px rgba(0, 74, 198, 0.12);
}

/* ── Map Section ──
   Light map background for Leaflet in light mode */
[data-theme="light"] #map {
  background: var(--color-surface) !important;
  border-top: 1px solid var(--color-outline-variant);
}
[data-theme="light"] #leafletMap {
  background: var(--color-surface-container-high) !important;
}
/* Map container border lightened */
[data-theme="light"] #map div[style*="box-shadow:0 10px 40px"] {
  box-shadow: 0 4px 24px rgba(0, 74, 198, 0.10) !important;
}

/* =====================================================
   Scroll Animations
   ===================================================== */
[data-fade] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-in-up {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

[data-fade="1"] { transition-delay: 0.1s; }
[data-fade="2"] { transition-delay: 0.2s; }
[data-fade="3"] { transition-delay: 0.3s; }
[data-fade="4"] { transition-delay: 0.4s; }
[data-fade="5"] { transition-delay: 0.5s; }