/**
 * ASGS Order of Merit - Theme CSS
 * Based on asgs.ch Design Styleguide
 *
 * Colors: Gold (#C9A262), Navy (#0C345A)
 * Fonts: Source Sans Pro, Source Serif Pro
 */

/* ==================== CSS VARIABLES ==================== */
:root {
  /* Primary Colors */
  --asgs-gold: #C9A262;
  --asgs-gold-hover: #D19A4A;
  --asgs-gold-light: rgba(201, 162, 98, 0.1);
  --asgs-gold-medium: rgba(201, 162, 98, 0.2);

  /* Navy Colors */
  --asgs-navy: #0C345A;
  --asgs-navy-dark: #001427;
  --asgs-navy-light: #072A57;

  /* Neutral Colors */
  --asgs-white: #FFFFFF;
  --asgs-beige: #EEECE1;
  --asgs-bg: #F9F9F9;
  --asgs-gray-50: #F9F9F9;
  --asgs-gray-100: #F5F5F5;
  --asgs-gray-200: #F2F2F2;
  --asgs-gray-300: #E6E6E6;
  --asgs-gray-400: #DADADA;
  --asgs-gray-500: #808080;
  --asgs-gray-600: #666666;
  --asgs-gray-700: #393939;
  --asgs-gray-800: #333333;
  --asgs-gray-900: #222222;

  /* Semantic Colors */
  --asgs-success: #008000;
  --asgs-error: #CC3366;
  --asgs-info: #569FF7;

  /* Typography */
  --font-sans: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, sans-serif;
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 50px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ==================== GLOBAL STYLES ==================== */
body {
  font-family: var(--font-sans);
  background-color: var(--asgs-bg);
  color: var(--asgs-gray-900);
}

/* ==================== TYPOGRAPHY ==================== */
.asgs-heading,
.asgs-title {
  font-family: var(--font-serif);
  color: var(--asgs-navy);
}

.asgs-heading-xl {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--asgs-navy);
  line-height: 1.2;
}

.asgs-heading-lg {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--asgs-navy);
}

.asgs-heading-md {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--asgs-navy);
}

.asgs-text {
  font-family: var(--font-sans);
  color: var(--asgs-gray-800);
}

.asgs-text-muted {
  color: var(--asgs-gray-600);
}

/* ==================== BUTTONS ==================== */
.asgs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  border: none;
}

.asgs-btn-primary {
  background-color: var(--asgs-gold);
  color: var(--asgs-white);
}

.asgs-btn-primary:hover {
  background-color: var(--asgs-gold-hover);
}

.asgs-btn-secondary {
  background-color: var(--asgs-gray-50);
  color: var(--asgs-gray-800);
  border: 1px solid var(--asgs-gray-300);
}

.asgs-btn-secondary:hover {
  background-color: var(--asgs-gray-100);
  border-color: var(--asgs-gray-400);
}

.asgs-btn-outline {
  background-color: transparent;
  color: var(--asgs-gold);
  border: 2px solid var(--asgs-gold);
}

.asgs-btn-outline:hover {
  background-color: var(--asgs-gold-light);
}

.asgs-btn-navy {
  background-color: var(--asgs-navy);
  color: var(--asgs-white);
}

.asgs-btn-navy:hover {
  background-color: var(--asgs-navy-dark);
}

.asgs-btn-danger {
  background-color: var(--asgs-error);
  color: var(--asgs-white);
}

.asgs-btn-danger:hover {
  background-color: #B82D59;
}

.asgs-btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.asgs-btn-lg {
  padding: 0.875rem 2rem;
  font-size: 1rem;
}

/* ==================== INPUTS ==================== */
.asgs-input {
  width: 100%;
  padding: 0.625rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  background-color: var(--asgs-white);
  border: 1px solid var(--asgs-gray-300);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.asgs-input:focus {
  outline: none;
  border-color: var(--asgs-gold);
  box-shadow: 0 0 0 3px var(--asgs-gold-light);
}

.asgs-input::placeholder {
  color: var(--asgs-gray-500);
}

.asgs-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

/* ==================== CARDS ==================== */
.asgs-card {
  background-color: var(--asgs-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}

.asgs-card-hover {
  transition: all var(--transition-base);
}

.asgs-card-hover:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--asgs-gold);
}

/* ==================== TABLES ==================== */
.asgs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.asgs-table thead {
  background-color: var(--asgs-navy);
}

.asgs-table th {
  padding: 0.875rem 0.75rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--asgs-white);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.asgs-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--asgs-gray-200);
}

.asgs-table tbody tr {
  transition: background-color var(--transition-fast);
}

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

.asgs-table-striped tbody tr:nth-child(even) {
  background-color: var(--asgs-gray-50);
}

/* ==================== NAVIGATION ==================== */
.asgs-nav-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: var(--asgs-gray-900);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}

.asgs-nav-link:hover {
  color: var(--asgs-gold);
}

.asgs-nav-link.active {
  color: var(--asgs-gold);
  border-bottom-color: var(--asgs-gold);
}

/* ==================== TABS ==================== */
.asgs-tabs {
  display: flex;
  border-bottom: 1px solid var(--asgs-gray-200);
  gap: 0;
}

.asgs-tab {
  padding: 1rem 1.5rem;
  color: var(--asgs-gray-600);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition-fast);
}

.asgs-tab:hover {
  color: var(--asgs-gray-900);
}

.asgs-tab.active {
  color: var(--asgs-navy);
  border-bottom-color: var(--asgs-gold);
}

/* ==================== BADGES ==================== */
.asgs-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
}

.asgs-badge-gold {
  background-color: var(--asgs-gold-light);
  color: var(--asgs-gold-hover);
}

.asgs-badge-navy {
  background-color: rgba(12, 52, 90, 0.1);
  color: var(--asgs-navy);
}

.asgs-badge-success {
  background-color: rgba(0, 128, 0, 0.1);
  color: var(--asgs-success);
}

.asgs-badge-error {
  background-color: rgba(204, 51, 102, 0.1);
  color: var(--asgs-error);
}

/* ==================== STAT CARDS ==================== */
.asgs-stat-card {
  background-color: var(--asgs-white);
  border: 1px solid var(--asgs-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: all var(--transition-base);
}

.asgs-stat-card:hover {
  border-color: var(--asgs-gold);
  box-shadow: 0 4px 12px rgba(201, 162, 98, 0.15);
}

.asgs-stat-number {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 400;
  color: var(--asgs-gold);
}

.asgs-stat-label {
  font-size: 0.875rem;
  color: var(--asgs-gray-600);
  margin-top: 0.25rem;
}

/* ==================== FILTERS ==================== */
.asgs-filter-group {
  display: flex;
  background-color: var(--asgs-beige);
  border-radius: var(--radius-pill);
  padding: 4px;
}

.asgs-filter-btn {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--asgs-gray-600);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.asgs-filter-btn:hover {
  color: var(--asgs-gray-900);
}

.asgs-filter-btn.active {
  background-color: var(--asgs-navy);
  color: var(--asgs-white);
}

.asgs-filter-btn.active-gold {
  background-color: var(--asgs-gold);
  color: var(--asgs-white);
}

/* ==================== MEDALS ==================== */
.asgs-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
}

.asgs-medal-gold {
  background: linear-gradient(135deg, #C9A262 0%, #E8D5A3 50%, #C9A262 100%);
  color: var(--asgs-navy);
}

.asgs-medal-silver {
  background: linear-gradient(135deg, #94A3B8 0%, #CBD5E1 50%, #94A3B8 100%);
  color: #1e293b;
}

.asgs-medal-bronze {
  background: linear-gradient(135deg, #B87333 0%, #D4A76A 50%, #B87333 100%);
  color: white;
}

/* ==================== EMPTY STATE ==================== */
.asgs-empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.asgs-empty-icon {
  width: 5rem;
  height: 5rem;
  margin: 0 auto var(--space-5);
  background: linear-gradient(135deg, var(--asgs-gold-light) 0%, rgba(12, 52, 90, 0.1) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.asgs-empty-icon svg {
  width: 2.5rem;
  height: 2.5rem;
  stroke: var(--asgs-gold);
  stroke-width: 2;
  fill: none;
}

.asgs-empty-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--asgs-gray-900);
  margin-bottom: 0.5rem;
}

.asgs-empty-text {
  color: var(--asgs-gray-600);
  font-size: 0.875rem;
}

/* ==================== FOOTER ==================== */
.asgs-footer {
  background-color: var(--asgs-white);
  border-top: 1px solid var(--asgs-gray-200);
  padding: var(--space-8);
  text-align: center;
  color: var(--asgs-gray-600);
  font-size: 0.875rem;
}

.asgs-footer-brand {
  color: var(--asgs-navy);
  font-weight: 500;
}

/* ==================== UTILITIES ==================== */
.asgs-bg-gold { background-color: var(--asgs-gold); }
.asgs-bg-gold-light { background-color: var(--asgs-gold-light); }
.asgs-bg-navy { background-color: var(--asgs-navy); }
.asgs-bg-navy-dark { background-color: var(--asgs-navy-dark); }
.asgs-bg-beige { background-color: var(--asgs-beige); }

.asgs-text-gold { color: var(--asgs-gold); }
.asgs-text-navy { color: var(--asgs-navy); }
.asgs-text-muted { color: var(--asgs-gray-600); }

.asgs-border-gold { border-color: var(--asgs-gold); }
.asgs-border-navy { border-color: var(--asgs-navy); }

/* ==================== SCORE CELLS (for matrix) ==================== */
.asgs-score-high { background-color: rgba(201, 162, 98, 0.4); }
.asgs-score-medium-high { background-color: rgba(201, 162, 98, 0.3); }
.asgs-score-medium { background-color: rgba(201, 162, 98, 0.2); }
.asgs-score-medium-low { background-color: rgba(12, 52, 90, 0.15); }
.asgs-score-low { background-color: rgba(12, 52, 90, 0.1); }

/* ==================== TAILWIND OVERRIDES ==================== */
/* These classes override default Tailwind colors with ASGS theme */

/* Primary button override */
.bg-asgs-primary { background-color: var(--asgs-gold) !important; }
.hover\:bg-asgs-primary-hover:hover { background-color: var(--asgs-gold-hover) !important; }
.text-asgs-primary { color: var(--asgs-gold) !important; }
.border-asgs-primary { border-color: var(--asgs-gold) !important; }
.ring-asgs-primary { --tw-ring-color: var(--asgs-gold) !important; }
.focus\:ring-asgs-primary:focus { --tw-ring-color: var(--asgs-gold) !important; }

/* Navy overrides */
.bg-asgs-navy { background-color: var(--asgs-navy) !important; }
.text-asgs-navy { color: var(--asgs-navy) !important; }
.border-asgs-navy { border-color: var(--asgs-navy) !important; }