/* Ultra-Compact Diplomatic Directory Dashboard Theme - Inspired by um.fi/diplomatic */
:root {
  --primary: #1a2238;
  --primary-dark: #0d1331;
  --danger: #e63946;
  --warning: #f4a259;
  --success: #43aa8b;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-500: #64748b;
  --gray-900: #1e293b;
  --radius: 18px;
  --shadow-sm: 0 2px 8px rgba(30,41,59,0.04);
  --shadow-md: 0 8px 32px rgba(30,41,59,0.10);

  /* Region Colors */
  --region-europe: #2563eb;
  --region-asia: #e11d48;
  --region-americas: #059669;
  --region-africa: #f59e42;
  --region-oceania: #a21caf;
  --region-middle-east: #fbbf24;
  --region-world: #4338ca; /* Add World region color */

  /* Group color variables */
  --group-european-union: #045e0e;
  --group-western-balkans: #f59e42;
}

body, .dashboard-container {
  background: var(--gray-50);
  color: var(--gray-900);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 1.12rem;
  line-height: 1.7;
}

.dashboard-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  background: var(--gray-50);
  min-height: 100vh;
}

.dashboard-header {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 2.5rem 3rem 1.5rem 3rem;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.dashboard-header .header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.dashboard-header .title-section h1 {
  font-size: 2.3rem;
  font-weight: 900;
  margin: 0 0 0.5rem 0;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--primary);
}

.stats-inline {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.stat-badge {
  background: var(--gray-100);
  color: var(--primary);
  font-size: 1.02rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.4em 1.3em;
  box-shadow: 0 1px 6px rgba(46,196,182,0.08);
  border: none;
}
.stat-badge.active { background: var(--success); color: #fff; }
.stat-badge.closed { background: var(--danger); color: #fff; }
.stat-badge.limited { background: var(--warning); color: #fff; }

.filter-bar {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.2rem 2rem;
  margin-bottom: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
}

.filter-tabs {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.filter-tab {
  position: relative;
  background: var(--gray-100);
  border: none;
  padding: 0.5rem 1.4rem;
  padding-right: 2.5rem; /* Extra space for the swatch */
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary);
  transition: all 0.18s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.filter-tab.active, .filter-tab:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px) scale(1.04);
}

.region-swatch {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-tab.active .region-swatch {
  border-color: white;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.region-icon {
  display: inline-block;
  margin-right: 0.4em;
  font-size: 1.1em;
}

.filter-tab.active .region-swatch {
  border-color: white;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.region-legend {
  display: flex;
  gap: 1.5rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}
.region-legend-item {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--primary);
  background: #fff;
  border-radius: 8px;
  padding: 0.2em 1em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
}
.region-legend-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  margin-right: 0.5em;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.region-legend-europe { background: var(--region-europe); }
.region-legend-asia { background: var(--region-asia); }
.region-legend-americas { background: var(--region-americas); }
.region-legend-africa { background: var(--region-africa); }
.region-legend-oceania { background: var(--region-oceania); }
.region-legend-middleeast { background: var(--region-middle-east); }

.representation-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0.8rem !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
}

.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.05);  /* Subtle border for all cards */
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 250px !important;
  padding: 1rem 0.8rem 0.8rem 0.8rem !important;
  font-size: 0.85rem !important;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(0, 0, 0, 0.12);  /* Darker border on hover */
}
.card .badge {
  font-size: 0.98rem;
  font-weight: 700;
  background: var(--gray-100);
  color: var(--primary);
  border-radius: 8px;
  margin-bottom: 0.7em;
}
.card-status-active { border-left: 6px solid var(--success); }
.card-status-limited { border-left: 6px solid var(--warning); }
.card-status-closed { border-left: 6px solid var(--danger); }

/* Alternative: Gradient background effect for cards */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Region-specific card styling with both border and bg color */
.card-region-europe { 
  border-left: 6px solid var(--region-europe) !important;
  background-color: rgba(37, 99, 235, 0.04);
}
.card-region-asia { 
  border-left: 6px solid var(--region-asia) !important;
  background-color: rgba(225, 29, 72, 0.04);
}
.card-region-americas { 
  border-left: 6px solid var(--region-americas) !important;
  background-color: rgba(5, 150, 105, 0.04);
}
.card-region-africa { 
  border-left: 6px solid var(--region-africa) !important;
  background-color: rgba(245, 158, 66, 0.04);
}
.card-region-oceania { 
  border-left: 6px solid var(--region-oceania) !important;
  background-color: rgba(162, 28, 175, 0.04);
}
.card-region-middle-east { 
  border-left: 6px solid var(--region-middle-east) !important;
  background-color: rgba(251, 191, 36, 0.04);
}
.card-region-world { 
  border-left: 6px solid var(--region-world) !important;
  background-color: rgba(67, 56, 202, 0.04);
}

.badge[style*="--region-"] {
  color: #fff !important;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  border-radius: 6px;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Group stripes and legend: unchanged, but with more spacing */
.group-stripes {
  position: relative;
  overflow: hidden;
}
.group-stripes[data-group-1]::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 8px;
  background: var(--group-stripe-1, #530232);
  border-radius: 0 0.5rem 0.5rem 0;
  z-index: 3;
}
.group-stripes[data-group-2]::before {
  content: "";
  position: absolute;
  top: 0; right: 10px; bottom: 0;
  width: 8px;
  background: var(--group-stripe-2, #0a995b);
  border-radius: 0 0.5rem 0.5rem 0;
  z-index: 2;
}
.group-stripes[data-group-3] .group-stripe-3 {
  position: absolute;
  top: 0; right: 20px; bottom: 0;
  width: 8px;
  background: var(--group-stripe-3, #f59e42);
  border-radius: 0 0.5rem 0.5rem 0;
  z-index: 1;
  content: "";
  display: block;
}
.group-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 1.02em;
  margin-bottom: 0.7rem;
  gap: 1.2em;
}
.group-legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.2em;
}
.group-legend-swatch {
  display: inline-block;
  width: 16px;
  height: 8px;
  border-radius: 2px;
  margin-right: 0.4em;
  vertical-align: middle;
}
.group-stripe-european-union .group-legend-swatch { background: #045e0e; }
.group-stripe-western-balkans .group-legend-swatch { background: #f59e42; }

/* Responsive tweaks */
@media (max-width: 1400px) {
  .representation-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 1100px) {
  .representation-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .representation-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .dashboard-header, .filter-bar, .card {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .dashboard-header {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
  }
  .representation-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-header .title-section h1 {
    font-size: 1.2rem;
  }
}

/* National Day badge styling */
.national-day-badge {
  font-size: 0.75rem;
  color: #6c757d;
  background-color: rgba(108, 117, 125, 0.1);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.national-day-badge i {
  color: #e01414; /* Albanian red color */
}

/* Add hover effect to show the flag is interactive */
.national-day-badge:hover {
  background-color: rgba(108, 117, 125, 0.2);
  cursor: help;
}

/* Region-specific card styling */
.card-region-europe { border-left: 6px solid var(--region-europe) !important; }
.card-region-asia { border-left: 6px solid var(--region-asia) !important; }
.card-region-americas { border-left: 6px solid var(--region-americas) !important; }
.card-region-africa { border-left: 6px solid var(--region-africa) !important; }
.card-region-oceania { border-left: 6px solid var(--region-oceania) !important; }
.card-region-middle-east { border-left: 6px solid var(--region-middle-east) !important; }
.card-region-world { border-left: 6px solid var(--region-world) !important; }

/* Region badges styling */
.badge.card-region-europe { background-color: var(--region-europe); color: white; }
.badge.card-region-asia { background-color: var(--region-asia); color: white; }
.badge.card-region-americas { background-color: var(--region-americas); color: white; }
.badge.card-region-africa { background-color: var(--region-africa); color: white; }
.badge.card-region-oceania { background-color: var(--region-oceania); color: white; }
.badge.card-region-middle-east { background-color: var(--region-middle-east); color: white; }
.badge.card-region-world { background-color: var(--region-world); color: white; }

/* Add to your existing CSS in the template or in dashboard.css */
.type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    font-size: 1.1em;
    margin-right: 0.2em;
    color: var(--accent2);
}

.filter-tab.active .type-icon {
    color: white;
}

/* Mission type badge styles */
.mission-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    background-color: var(--light);
    margin-left: 0.3rem;
}

/* Add hover effect for type icons */
.filter-tab:hover .type-icon {
    transform: scale(1.2);
    transition: transform 0.2s ease;
}

/* Enhanced card styling with diplomatic border treatment */
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.05);  /* Subtle border for all cards */
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 250px !important;
  padding: 1rem 0.8rem 0.8rem 0.8rem !important;
  font-size: 0.85rem !important;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(0, 0, 0, 0.12);  /* Darker border on hover */
}

/* Status borders - keep these as they provide important visual cues */
.card-status-active { border-left: 6px solid var(--success); }
.card-status-limited { border-left: 6px solid var(--warning); }
.card-status-closed { border-left: 6px solid var(--danger); }

/* Add subtle bottom border to complement the left status border */
.card-status-active { border-bottom: 2px solid rgba(67, 170, 139, 0.2); }
.card-status-limited { border-bottom: 2px solid rgba(244, 162, 89, 0.2); }
.card-status-closed { border-bottom: 2px solid rgba(230, 57, 70, 0.2); }

/* Add subtle diplomatic paper-like texture */
.card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}