/* Planto Agro Solutions - Premium HRMS & CRM Stylesheet
   Design language: "Refined Agritech" — deep emerald grounding (plantation/growth)
   paired with a warm harvest terracotta accent. Three-font system: editorial serif
   (Fraunces) for headlines/brand moments, a clean geometric sans (Outfit) for UI
   chrome and body copy, and a monospace (JetBrains Mono) for financial figures —
   tabular-figure precision for the numbers this app exists to get right. Layered
   "ambient + contact" shadows and real backdrop-blur glass surfaces throughout. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&family=Fraunces:ital,opsz,wght@1,9..144,500&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Brand Palette - emerald grounding + warm harvest accent for contrast */
  --color-primary: #0f766e;        /* Dark Emerald */
  --color-primary-hover: #0d9488;  /* Teal */
  --color-primary-light: #ecfdf5;  /* Light Mint Background */
  --color-secondary: #115e59;      /* Forest Green */
  --color-accent: #10b981;         /* Vibrant Green */
  --color-accent-dim: rgba(16, 185, 129, 0.1);

  /* Warm accent — harvest terracotta, used for decorative/brand moments distinct
     from the --color-warning status color (soil, sun-dried clay, ripened grain) */
  --color-warm: #c2662d;
  --color-warm-hover: #a8541f;
  --color-warm-light: #fdf1e7;
  --color-warm-dim: rgba(194, 102, 45, 0.12);

  /* Neutral Palette - clean modern SaaS, light canvas throughout */
  --color-bg-main: #f5f6f4;        /* App canvas — faint warm-grey, not sterile blue-grey */
  --color-bg-sidebar: #ffffff;     /* Sidebar is light, not a solid dark block */
  --color-card-bg: #ffffff;
  --color-text-main: #14201c;      /* Deep forest-black — warmer than pure slate */
  --color-text-muted: #64706b;     /* Muted sage-grey */
  --color-text-on-dark: #0f172a;
  --color-border: #e5e7e1;         /* Soft warm-neutral border */

  /* Status Palette */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  /* Fonts */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing & Borders */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --transition-default: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shadows — layered "ambient + contact" pairs (a soft far-reaching wash plus a tighter
     close shadow), tinted with the brand ink instead of flat black, for real depth rather
     than a single flat blur. */
  --shadow-sm: 0 1px 2px rgba(20, 32, 28, 0.06), 0 1px 1px rgba(20, 32, 28, 0.04);
  --shadow-md: 0 1px 2px rgba(20, 32, 28, 0.06), 0 12px 24px -8px rgba(20, 32, 28, 0.12), 0 4px 8px -4px rgba(20, 32, 28, 0.06);
  --shadow-lg: 0 2px 4px rgba(20, 32, 28, 0.05), 0 24px 48px -12px rgba(20, 32, 28, 0.22), 0 8px 16px -6px rgba(20, 32, 28, 0.1);
  --shadow-glow-primary: 0 1px 2px rgba(15, 118, 110, 0.15), 0 12px 28px -8px rgba(15, 118, 110, 0.4);
  --shadow-glow-warm: 0 1px 2px rgba(194, 102, 45, 0.15), 0 12px 28px -8px rgba(194, 102, 45, 0.35);

  /* Glass surface tokens — reused everywhere a floating/translucent layer sits above content */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: blur(20px) saturate(1.6);

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

/* Global Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Denser type scale: every rem-based size in this file (headings, labels, inputs, tables)
   is relative to this root size, so scaling it down here tightens the whole app in one
   place instead of hunting down each component. */
html {
  font-size: 87.5%; /* 16px browser default -> 14px baseline */
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-main);
  background-image:
    radial-gradient(ellipse 1000px 800px at 0% -5%, rgba(16, 185, 129, 0.2), transparent 68%),
    radial-gradient(ellipse 800px 600px at 105% 0%, rgba(194, 102, 45, 0.16), transparent 62%),
    radial-gradient(ellipse 900px 900px at -5% 105%, rgba(15, 118, 110, 0.18), transparent 68%);
  background-attachment: fixed;
  color: var(--color-text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Layout Framework */
.app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* Sidebar Styling - light, slim, modern SaaS (not a solid dark block).
   Fixed to the viewport so it never scrolls with the page; .main-content owns its own scroll. */
.sidebar {
  width: 264px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--color-text-main);
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  flex-shrink: 0;
  transition: var(--transition-default);
  z-index: 100;
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0.25rem 1.25rem 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-logo img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background-color: white;
  padding: 2px;
}

.sidebar-logo i.fa-seedling {
  width: 40px;
  height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--color-primary-light), #d4f4e8);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
}

.sidebar-logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.2px;
  color: var(--color-text-main);
}

.sidebar-logo-sub {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex-grow: 1;
}

.sidebar-section-header {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-text-muted);
  padding: 1rem 0.85rem 0.35rem;
  opacity: 0.75;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  transition: var(--transition-default);
  cursor: pointer;
  position: relative;
  border-left: 3px solid transparent;
}

.nav-item i {
  font-size: 0.95rem;
  opacity: 0.8;
  width: 18px;
  text-align: center;
}

.nav-item:hover {
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
}

.nav-item.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
  border-left-color: var(--color-primary);
}

.nav-item.active i {
  opacity: 1;
}

.nav-item svg {
  width: 20px;
  height: 20px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--color-primary-light), #d4f4e8);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
}

.user-info {
  flex-grow: 1;
  min-width: 0;
}

.user-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.logout-btn {
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-default);
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.logout-btn:hover {
  color: var(--color-danger);
  background-color: #fef2f2;
}

/* Main Dashboard Panel */
.main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: 264px;
  min-width: 0;
}

/* Top Header */
.top-header {
  height: 70px;
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  flex-shrink: 0;
}

.page-title-section h1 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--color-text-main);
  letter-spacing: -0.01em;
}

.page-title-section p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}

.top-header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.notification-bell {
  position: relative;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: var(--transition-default);
}

.notification-bell:hover {
  background-color: var(--color-bg-main);
  transform: rotate(8deg);
}

.notification-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-danger);
  border: 1px solid white;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
  animation: notifPulse 2.2s infinite ease-in-out;
}

@keyframes notifPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }
  50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.1); }
}

[x-cloak] { display: none !important; }

/* Global notification bell — fixed top-right, present on every page via the shared layout.
   Given a light glass treatment (blur + translucency) since it's a floating control, not
   a text-bearing content surface — keeps the "liquid glass" cue without hurting readability. */
.notif-fixed-wrap {
  position: fixed;
  top: 1.1rem;
  right: 1.5rem;
  z-index: 60;
}

.notif-fixed-wrap .notification-bell {
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.notification-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem 0;
  animation: panelDrop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top right;
}

@keyframes panelDrop {
  from { opacity: 0; transform: scale(0.94) translateY(-6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.notification-panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-main);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.25rem;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  color: var(--color-text-main);
  transition: var(--transition-default);
  border-left: 3px solid transparent;
}

.notification-item:hover {
  background-color: var(--color-bg-main);
  border-left-color: var(--color-primary);
}

.notification-item i {
  margin-top: 2px;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.notification-item strong {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 2px;
}

.notification-item div div {
  color: var(--color-text-muted);
  line-height: 1.4;
}

.notification-empty {
  padding: 1.25rem 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  /* Sit below the sticky .mobile-nav-bar (60px, z-index:110) instead of fighting it for space. */
  .notif-fixed-wrap { top: 70px; right: 0.75rem; z-index: 100; }
  .notification-panel { width: 260px; }
}

/* Mobile Header / Burger Navigation */
.mobile-nav-bar {
  display: none;
  height: 60px;
  background-color: var(--color-bg-sidebar);
  color: var(--color-text-main);
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 110;
  border-bottom: 1px solid var(--color-border);
}

.burger-menu-btn {
  background: none;
  border: none;
  color: var(--color-text-main);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
}

/* Page Containers */
.page-container {
  padding: 2rem;
  flex-grow: 1;
}

/* Dashboard Statistics Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: var(--transition-spring);
  animation: cardRiseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.stats-grid .stat-card:nth-child(1) { animation-delay: 0.02s; }
.stats-grid .stat-card:nth-child(2) { animation-delay: 0.08s; }
.stats-grid .stat-card:nth-child(3) { animation-delay: 0.14s; }
.stats-grid .stat-card:nth-child(4) { animation-delay: 0.2s; }
.stats-grid .stat-card:nth-child(5) { animation-delay: 0.26s; }

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

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(15, 118, 110, 0.3);
}

.stat-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon-wrapper.primary { background: linear-gradient(145deg, rgba(15, 118, 110, 0.16), rgba(15, 118, 110, 0.06)); color: var(--color-primary); }
.stat-icon-wrapper.success { background: linear-gradient(145deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.06)); color: var(--color-success); }
.stat-icon-wrapper.warning { background: linear-gradient(145deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.06)); color: var(--color-warning); }
.stat-icon-wrapper.danger { background: linear-gradient(145deg, rgba(239, 68, 68, 0.16), rgba(239, 68, 68, 0.06)); color: var(--color-danger); }

.stat-details {
  display: flex;
  flex-direction: column;
}

.stat-title {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-text-main);
  margin-top: 0.15rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Dashboard Secondary Section layout */
.dashboard-sections {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .dashboard-sections {
    grid-template-columns: 1fr;
  }
}

.dashboard-card {
  background-color: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.dashboard-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  letter-spacing: -0.005em;
}

.dashboard-card-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Alert Feeds */
.alert-feed {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.alert-item {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  border-left: 4px solid transparent;
  transition: var(--transition-default);
}

.alert-item.danger {
  background-color: rgba(239, 68, 68, 0.05);
  color: #7f1d1d;
  border-left-color: var(--color-danger);
}

.alert-item.warning {
  background-color: rgba(245, 158, 11, 0.05);
  color: #78350f;
  border-left-color: var(--color-warning);
}

.alert-item.success {
  background-color: rgba(16, 185, 129, 0.05);
  color: #064e3b;
  border-left-color: var(--color-success);
}

/* Action Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-spring);
  min-height: 38px;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
  box-shadow: 0 2px 8px -2px rgba(15, 118, 110, 0.4);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-primary);
}

.btn-secondary {
  background-color: white;
  border-color: var(--color-border);
  color: var(--color-text-main);
}

.btn-secondary:hover {
  background-color: var(--color-bg-main);
  border-color: #d5d9d1;
  transform: translateY(-1px);
}

.btn-danger {
  background-color: var(--color-danger);
  color: white;
  box-shadow: 0 2px 8px -2px rgba(239, 68, 68, 0.4);
}

.btn-danger:hover {
  background-color: #dc2626;
  transform: translateY(-1px);
}

.btn-icon-only {
  width: 44px;
  height: 44px;
  padding: 0;
}

/* Compact icon-only action row for table cells — replaces stacks of labeled
   buttons that were pushing row height way past the surrounding table rhythm. */
.table-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.row-action-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background-color: white;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition-spring);
}

.row-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.row-action-btn:active {
  transform: scale(0.94);
}

.row-action-btn.tone-danger {
  color: var(--color-danger);
}

.row-action-btn.tone-danger:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background-color: #fef2f2;
}

.row-action-btn.tone-success {
  color: var(--color-success);
}

.row-action-btn.tone-success:hover {
  color: var(--color-success);
  border-color: var(--color-success);
  background-color: var(--color-primary-light);
}

.row-action-btn.solid-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: white;
}

.row-action-btn.solid-danger:hover {
  background-color: #dc2626;
  color: white;
}

/* Lists and Tables */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background-color: var(--color-card-bg);
}

.custom-table th {
  background-color: #f7f8f5;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.custom-table td {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.88rem;
}

.custom-table tr:last-child td {
  border-bottom: none;
}

.custom-table tbody tr {
  transition: background-color 0.15s ease;
}

.custom-table tbody tr:hover {
  background-color: var(--color-primary-light);
}

/* Badge/Status pills */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.badge-success { background-color: rgba(16, 185, 129, 0.14); color: #065f46; }
.badge-warning { background-color: rgba(245, 158, 11, 0.16); color: #7c2d12; }
.badge-danger { background-color: rgba(239, 68, 68, 0.14); color: #7f1d1d; }
.badge-info { background-color: rgba(59, 130, 246, 0.14); color: #1e3a8a; }
.badge-accent { background-color: rgba(15, 118, 110, 0.14); color: var(--color-secondary); }
.badge-neutral { background-color: #f1f2ee; color: #3a4139; }

/* Dynamic tabs system */
.tab-nav {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
  padding-bottom: 0.25rem;
  overflow-x: auto;
}

.tab-btn {
  padding: 0.7rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  transition: var(--transition-default);
  white-space: nowrap;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tab-btn:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.tab-btn.active {
  color: var(--color-primary);
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0.4rem;
  right: 0.4rem;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 3px;
}

/* Premium Modal Dialogs */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(20, 32, 28, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-content {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  animation: modalSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text-main);
}

.modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: var(--transition-default);
}

.modal-close-btn:hover {
  color: var(--color-danger);
  transform: rotate(90deg);
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

/* Premium Form Inputs styling */
.form-group {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-main);
}

.form-input {
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-family: var(--font-body);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: white;
  color: var(--color-text-main);
  transition: var(--transition-default);
  outline: none;
}

.form-input:hover {
  border-color: #cdd2c8;
}

.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.13);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Facial Recognition Scanner Mock */
.facial-scanner-box {
  width: 100%;
  max-width: 380px;
  height: 280px;
  background-color: #0c1310;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  margin: 0 auto 1.5rem auto;
  border: 4px solid var(--color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.facial-scanner-feed {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.facial-scanner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent;
  pointer-events: none;
  z-index: 5;
}

.facial-scanner-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, transparent, var(--color-accent), transparent);
  box-shadow: 0 0 15px var(--color-accent);
  animation: scanLineMove 2s infinite ease-in-out;
  z-index: 6;
}

@keyframes scanLineMove {
  0% { top: 0%; }
  50% { top: 100%; }
  100% { top: 0%; }
}

.facial-scanner-face-guide {
  width: 160px;
  height: 160px;
  border: 2px dashed rgba(16, 185, 129, 0.5);
  border-radius: 50%;
  position: relative;
  z-index: 4;
}

.scanner-status {
  position: absolute;
  bottom: 12px;
  background-color: rgba(12, 19, 16, 0.85);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
}

.scanner-pulsing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent);
  animation: dotPulse 1.5s infinite ease-in-out;
}

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

/* Glassmorphism & Split Layout Logins */
.split-login-body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100vw;
  background-color: #ffffff;
  font-family: var(--font-body);
  overflow-x: hidden;
}

.split-login-container {
  display: flex;
  min-height: 100vh;
  width: 100vw;
}

/* LEFT SIDE: HERO BANNER */
.login-hero-side {
  flex: 1.1;
  position: relative;
  background: url('../images/login_bg.jpg') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem 4rem;
  color: #ffffff;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(6, 30, 25, 0.9), rgba(15, 118, 110, 0.82) 55%, rgba(194, 102, 45, 0.55));
  z-index: 1;
}

.hero-center-content,
.hero-stats-row {
  position: relative;
  z-index: 2;
}

.hero-center-content {
  margin: auto 0;
  text-align: center;
  max-width: 520px;
  align-self: center;
}

.hero-badge-logo {
  width: 88px;
  height: 88px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem auto;
  font-size: 2.5rem;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  animation: badgeFloat 5s ease-in-out infinite;
}

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

.hero-title {
  font-family: var(--font-display);
  font-size: 2.7rem;
  font-weight: 600;
  font-style: italic;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}

.hero-subtitle {
  font-size: 0.85rem;
  letter-spacing: 3px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 1.25rem;
}

.hero-divider {
  width: 60px;
  height: 3px;
  background-color: var(--color-warm);
  margin: 0 auto 1.5rem auto;
  border-radius: 2px;
}

.hero-desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

/* HERO BOTTOM STATS CARDS */
.hero-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
}

.hero-stat-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: var(--transition-spring);
}

.hero-stat-card:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
}

.hero-stat-card .stat-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
}

.hero-stat-card .stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0.2rem;
  font-weight: 500;
}

/* RIGHT SIDE: FORM SIDE */
.login-form-side {
  flex: 0.9;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 3rem 4rem;
  justify-content: space-between;
}

.form-header-brand {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--color-text-main);
  text-transform: uppercase;
}

.form-body-wrapper {
  max-width: 420px;
  width: 100%;
  margin: auto 0;
}

.welcome-heading {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  color: #14201c;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.welcome-subtext {
  font-size: 0.95rem;
  color: #64706b;
  margin-bottom: 1.5rem;
}

/* ROLE BADGES & TOGGLE */
.role-badge-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
}

.role-access-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.tag-admin {
  background-color: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.tag-manager {
  background-color: var(--color-warm-light);
  color: var(--color-warm-hover);
  border: 1px solid #f3d5b8;
}

.role-toggle-group {
  display: flex;
  background: #f1f2ee;
  padding: 3px;
  border-radius: 8px;
}

.role-toggle-btn {
  padding: 0.3rem 0.75rem;
  border: none;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64706b;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.role-toggle-btn.active {
  background: #ffffff;
  color: #14201c;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* FORM INPUT FIELDS */
.custom-input-group {
  margin-bottom: 1.25rem;
}

.custom-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.input-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 1rem;
  color: #94a3b8;
  font-size: 1rem;
}

.split-input {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.75rem;
  border: 1.5px solid #e5e7e1;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  color: #14201c;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.split-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

.eye-toggle-btn {
  position: absolute;
  right: 1rem;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 1rem;
}

.eye-toggle-btn:hover {
  color: #64748b;
}

.form-options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
}

.remember-me-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #475569;
  font-weight: 500;
  cursor: pointer;
}

.custom-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  border-radius: 4px;
}

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

.forgot-pass-link:hover {
  text-decoration: underline;
}

.submit-btn-primary {
  width: 100%;
  padding: 0.95rem;
  background-color: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.3);
}

.submit-btn-primary:hover {
  background-color: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.35);
}

.submit-btn-primary:active {
  transform: scale(0.99);
}

.login-alert-danger {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.quick-demo-box {
  margin-top: 2rem;
  padding: 1rem;
  background-color: var(--color-primary-light);
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
}

.quick-demo-header {
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.quick-demo-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.demo-btn {
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.2rem 0;
  color: #14201c;
  cursor: pointer;
  font-size: 0.8rem;
}

.demo-btn:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* RESPONSIVE LAYOUT FOR MOBILE */
@media (max-width: 900px) {
  .split-login-container {
    flex-direction: column;
  }
  .login-hero-side {
    padding: 2.5rem 1.5rem;
    min-height: 320px;
  }
  .login-form-side {
    padding: 2rem 1.5rem;
  }
  .hero-stats-row {
    display: none;
  }
}

/* Focus-Visible Outlines (keyboard accessibility) */
a:focus-visible,
button:focus-visible,
.nav-item:focus-visible,
.btn:focus-visible,
.tab-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Sidebar bottom Access Control row (admin permission shortcut) */
.sidebar-bottom-admin {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-default);
}

.sidebar-bottom-admin:hover {
  background-color: #d1fae5;
}

/* Chainage SVG road-strip diagram */
.chainage-strip {
  padding: 1rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: #f7f8f5;
  overflow-x: auto;
}

.chainage-strip-empty {
  padding: 1rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.chainage-strip-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.chainage-strip-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.chainage-strip-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

/* Budget meter (BOQ part spend progress) */
.budget-meter {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.budget-meter-track {
  width: 100%;
  height: 9px;
  background-color: var(--color-border);
  border-radius: 20px;
  overflow: hidden;
}

.budget-meter-fill {
  height: 100%;
  border-radius: 20px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: var(--color-success);
  background-image: linear-gradient(90deg, rgba(255,255,255,0.15), transparent);
}

.budget-meter-fill.warning { background-color: var(--color-warning); }
.budget-meter-fill.danger { background-color: var(--color-danger); }

.budget-meter-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

/* Printable payslip sheet */
.payslip-sheet {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  max-width: 640px;
}

.payslip-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.payslip-row {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.95rem;
}

.payslip-total-row {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* Global "View As" switcher bar (injected via app.js on every protected page) */
.view-as-bar {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background-color: #14201c;
  color: #ffffff;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  font-size: 0.8rem;
}

.view-as-bar.view-as-active {
  background-color: var(--color-primary);
}

.view-as-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  white-space: nowrap;
}

.view-as-select {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  font-family: var(--font-body);
  max-width: 220px;
}

.view-as-select option {
  color: #14201c;
}

.view-as-exit-btn {
  background-color: #ffffff;
  color: var(--color-primary);
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.view-as-exit-btn:hover {
  background-color: #f1f5f9;
}

@media (max-width: 768px) {
  .view-as-bar {
    left: 1rem;
    right: 1rem;
    bottom: 0.75rem;
    flex-wrap: wrap;
    border-radius: var(--radius-md);
  }
  .view-as-select {
    max-width: none;
    flex: 1;
  }
}

@media print {
  .view-as-bar {
    display: none !important;
  }
  .sidebar, .mobile-nav-bar, .top-header, .btn, .no-print, .notif-fixed-wrap {
    display: none !important;
  }
  .main-content, .page-container {
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* Tablet breakpoint - narrower sidebar instead of a hard binary collapse */
@media (max-width: 1024px) and (min-width: 769px) {
  .sidebar {
    width: 220px;
    padding: 1rem;
  }
  .main-content {
    margin-left: 220px;
  }
  .nav-item {
    padding: 0.75rem 0.75rem;
    font-size: 0.9rem;
  }
  .page-container {
    padding: 1.5rem;
  }
}

/* Mobile-Friendly Adjustments */
@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .sidebar {
    display: none; /* Controlled by mobile side drawer */
  }

  .sidebar.mobile-open {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }

  .mobile-nav-bar {
    display: flex;
  }

  .top-header {
    display: none;
  }

  .main-content {
    margin-left: 0;
    height: auto;
    overflow-y: visible;
  }

  .page-container {
    padding: 1rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Visually Hidden Utility Class */
.visually-hidden {
  position: absolute;
  clip-path: inset(50%);
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}