/* ============================================
   Soft UI Design System
   A modern, translucent design with high-contrast text
   ============================================ */

:root {
  /* ========================================
     Primary Color System
     Navy: #012554 | Mint: #b3e0d7
     ======================================== */
  --soft-primary: #012554;
  --soft-primary-rgb: 1, 37, 84;
  --soft-primary-lt: #E8EEF5;
  --soft-primary-dk: #011233;

  /* Accent Color - Mint */
  --soft-accent: #b3e0d7;
  --soft-accent-rgb: 179, 224, 215;
  --soft-accent-lt: #E5F5F2;
  --soft-accent-dk: #8fcdc1;

  /* Secondary Text Color */
  --soft-secondary-text: #5a6a7a;

  /* Background Colors - Softer, easier on eyes */
  --soft-bg: #F0F4F7;
  --soft-bg-card: #FAFBFC;

  /* Border Colors */
  --soft-border: #D8E0E8;
  --soft-border-translucent: rgba(1, 37, 84, 0.08);

  /* ========================================
     Soft UI Status Colors
     Harmonized with Navy/Mint palette
     ======================================== */

  /* Scheduled - Navy tones */
  --soft-scheduled-bg: #E8EEF5;
  --soft-scheduled-text: #012554;
  --soft-scheduled-border: #C8D6E8;

  /* Time Off - Soft rose tones */
  --soft-timeoff-bg: #FCE8EA;
  --soft-timeoff-text: #9a2c3c;
  --soft-timeoff-border: #F5CDD2;

  /* Total/Target - Mint tones */
  --soft-total-bg: #E5F5F2;
  --soft-total-text: #1a6b5c;
  --soft-total-border: #b3e0d7;

  /* Unassigned - Warm amber tones */
  --soft-unassigned-bg: #FEF6E6;
  --soft-unassigned-text: #8a5a0a;
  --soft-unassigned-border: #F5DDB3;

  /* Pending - Warm amber tones */
  --soft-pending-bg: #FEF6E6;
  --soft-pending-text: #8a5a0a;
  --soft-pending-border: #F5DDB3;

  /* Approved - Mint/green tones */
  --soft-approved-bg: #E5F5F2;
  --soft-approved-text: #1a6b5c;
  --soft-approved-border: #b3e0d7;

  /* Denied - Soft red tones */
  --soft-denied-bg: #FCEAEA;
  --soft-denied-text: #8a2c2c;
  --soft-denied-border: #F5C8C8;

  /* ========================================
     Soft Shadows
     ======================================== */
  --soft-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --soft-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --soft-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --soft-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --soft-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* ========================================
   Soft UI Badge Classes
   ======================================== */

/* Base soft badge styles */
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.badge-soft:hover {
  transform: translateY(-1px);
}

/* Scheduled badge */
.badge-soft-scheduled {
  background: var(--soft-scheduled-bg);
  color: var(--soft-scheduled-text);
  border-color: var(--soft-scheduled-border);
}

/* Time off badge */
.badge-soft-timeoff {
  background: var(--soft-timeoff-bg);
  color: var(--soft-timeoff-text);
  border-color: var(--soft-timeoff-border);
}

/* Total badge */
.badge-soft-total {
  background: var(--soft-total-bg);
  color: var(--soft-total-text);
  border-color: var(--soft-total-border);
}

/* Unassigned badge */
.badge-soft-unassigned {
  background: var(--soft-unassigned-bg);
  color: var(--soft-unassigned-text);
  border-color: var(--soft-unassigned-border);
}

/* Pending badge */
.badge-soft-pending {
  background: var(--soft-pending-bg);
  color: var(--soft-pending-text);
  border-color: var(--soft-pending-border);
}

/* Approved badge */
.badge-soft-approved {
  background: var(--soft-approved-bg);
  color: var(--soft-approved-text);
  border-color: var(--soft-approved-border);
}

/* Denied badge */
.badge-soft-denied {
  background: var(--soft-denied-bg);
  color: var(--soft-denied-text);
  border-color: var(--soft-denied-border);
}

/* ========================================
   Soft UI Card Enhancements
   ======================================== */

.card-soft {
  background: var(--soft-bg-card);
  border: 1px solid var(--soft-border);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}

.card-soft-elevated {
  box-shadow: var(--soft-shadow-xl);
}

/* Accent bar styles for cards */
.card-soft[data-accent] {
  border-left-width: 4px;
  border-left-style: solid;
}

.card-soft[data-accent="scheduled"] {
  border-left-color: var(--soft-scheduled-text);
}

.card-soft[data-accent="timeoff"] {
  border-left-color: var(--soft-timeoff-text);
}

.card-soft[data-accent="pending"] {
  border-left-color: var(--soft-pending-text);
}

.card-soft[data-accent="approved"] {
  border-left-color: var(--soft-approved-text);
}

.card-soft[data-accent="denied"] {
  border-left-color: var(--soft-denied-text);
}

/* ========================================
   Soft UI Pill Navigation
   ======================================== */

.nav-soft-pill {
  background: transparent;
  padding: 8px 16px;
  border-radius: 12px;
  color: var(--soft-secondary-text);
  font-weight: 500;
  transition: all 0.2s ease;
}

.nav-soft-pill:hover {
  background: var(--soft-border);
  color: var(--soft-primary);
}

.nav-soft-pill.active {
  background: var(--soft-primary-lt);
  color: var(--soft-primary);
}

/* ========================================
   Soft UI Typography Enhancements
   ======================================== */

.text-soft-primary {
  color: var(--soft-primary);
}

.text-soft-secondary {
  color: var(--soft-secondary-text);
}

.heading-tight {
  letter-spacing: -0.02em;
}

/* ========================================
   Soft UI Table Enhancements
   ======================================== */

.table-soft tbody tr:nth-child(even) {
  background: rgba(248, 250, 252, 0.5);
}

.table-soft tbody tr:hover {
  background: var(--soft-primary-lt);
}

.table-soft td,
.table-soft th {
  border-color: var(--soft-border);
}

/* Remove internal cell borders for cleaner look */
.table-soft.table-borderless-cells td {
  border-left: none;
  border-right: none;
}

/* ========================================
   Soft UI Form Enhancements
   ======================================== */

.form-control-soft {
  border-color: var(--soft-border);
  background: var(--soft-bg-card);
  transition: all 0.2s ease;
}

.form-control-soft:focus {
  border-color: var(--soft-primary);
  box-shadow: 0 0 0 3px rgba(1, 37, 84, 0.15);
}

/* ========================================
   Soft UI Utility Classes
   ======================================== */

.bg-soft {
  background: var(--soft-bg) !important;
}

.bg-soft-card {
  background: var(--soft-bg-card) !important;
}

.border-soft {
  border-color: var(--soft-border) !important;
}

.shadow-soft-sm {
  box-shadow: var(--soft-shadow-sm) !important;
}

.shadow-soft {
  box-shadow: var(--soft-shadow) !important;
}

.shadow-soft-md {
  box-shadow: var(--soft-shadow-md) !important;
}

.shadow-soft-lg {
  box-shadow: var(--soft-shadow-lg) !important;
}

.shadow-soft-xl {
  box-shadow: var(--soft-shadow-xl) !important;
}