/* Global Theme Variables for BINAS
   Default values; can be overridden by area-specific theme injectors (e.g., PublicAlt Theme)
*/
:root {
    /* Brand colors (define both keys for compatibility) */
    --color-primary: #232D4F; /* Gobierno Argentino - primario */
    --primary-color: #232D4F;
    --color-secondary: #A23B72;
    --secondary-color: #A23B72;
    --color-accent: #F18F01;
    --accent-color: #F18F01;
    --color-success: #28a745;
    --success-color: #28a745;
    --color-info: #17a2b8;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    
    /* Derived primary shades and gradients (centralized) */
    --primary-color-lighter: #738ace;
    --primary-color-light: #3c4a72; /* lighten(#232D4F) */
    --primary-color-dark: #151a2e; /* darken(#232D4F) */
    /* Backward-compatible aliases */
    --primary-light: var(--primary-color-light);
    --primary-dark: var(--primary-color-dark);
    
    /* Primary gradient used across site (hero headers, card headers, buttons) */
    --primary-gradient: linear-gradient(135deg, var(--primary-color-light) 0%, var(--primary-color) 55%, var(--primary-color-dark) 100%);
    
    /* Optional secondary gradient (kept for components that use it) */
    --secondary-gradient: linear-gradient(135deg, #e6e6e6 0%, #7f7f7f 100%);
    /* Neutrals (map to PublicAlt naming too) */
    --color-bg: #f8fafc;
    --body-bg: #f8fafc;
    --light-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-text: #2C3E50;
    --dark-text: #2C3E50;
    --color-muted: #6c757d;
    --color-border: #e5e7eb;
    /* Typography (map to PublicAlt naming too) */
    --font-family-base: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --font-family: var(--font-family-base);
    --font-size-base: 1rem;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* Compatibility font aliases used by legacy styles */
    --arg-font-primary: var(--font-family-base);
    --arg-font-heading: var(--font-family-base);
    --arg-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* Radii */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --card-border-radius: var(--radius-md);
    --button-border-radius: 25px;
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.12);
    --card-shadow: var(--shadow);
    --card-hover-shadow: var(--shadow-lg);
    /* Transitions */
    --transition-fast: .15s ease;
    --transition: .25s ease;
    --transition-slow: .35s ease;
    --transition-duration: .25s;
    --hover-transform: none; /* Disable movement on hover */
    /* Legacy arg variables mapping to shared tokens for backward compatibility */
    --arg-color-primary: var(--color-primary);
    --arg-color-primary-rgb: 35, 45, 79;
    --arg-color-secondary: var(--color-surface);
    --arg-color-secondary-rgb: 255, 255, 255;
    --arg-yellow: var(--color-warning);
    /* Action buttons colors (Admin tables) */
    --action-edit-color: var(--color-primary);
    --action-delete-color: var(--color-danger);
    --action-view-color: var(--color-info);
    --action-details-color: var(--color-accent);
    --action-up-color: var(--color-success);
    --action-down-color: var(--color-success);
    /* Bootstrap CSS variables override to align with Argentina palette */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 35, 45, 79;
    /* Secondary: neutral slate */
    --bs-secondary: #50535C;
    --bs-secondary-rgb: 80, 83, 92;
    /* Success: accessible green */
    --bs-success: #2E7D32;
    --bs-success-rgb: 46, 125, 50;
    /* Info: celeste argentino */
    --bs-info: #37BBED;
    --bs-info-rgb: 55, 187, 237;
    /* Warning: amarillo */
    --bs-warning: #FFD100;
    --bs-warning-rgb: 255, 209, 0;
    /* Danger: magenta identity accent */
    --bs-danger: #EE3D8F;
    --bs-danger-rgb: 238, 61, 143;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
}

/* Dark mode variables override */
html.dark-mode {
    --color-bg: #0f1115;
    --body-bg: #0f1115;
    --light-bg: #121622;
    --color-surface: #161a22;
    --color-text: #e6e6e6;
    --dark-text: #e6e6e6;
    --color-muted: #9aa4b2;
    --color-border: #2a2f3a;
    --bs-primary: #5b77ff;
    --bs-primary-rgb: 91, 119, 255;
}

/* Base application scaffolding */
html, body {
  background: var(--color-bg, var(--body-bg));
  color: var(--color-text, var(--dark-text));
  font-family: var(--font-family-base, var(--font-family));
  font-size: var(--font-size-base);
}

/* Cards */
.card {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--card-border-radius, var(--radius-md)) !important;
  box-shadow: var(--card-shadow, var(--shadow)) !important;
  transition: box-shadow var(--transition-duration, .25s) ease;
}
.card:hover {
  /* Highlight with shadow only, no movement */
  box-shadow: var(--card-hover-shadow, var(--shadow-lg)) !important;
}

/* Buttons - unify primary style across the site */
.btn-primary {
  background-image: var(--primary-gradient);
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(35, 45, 79, .25);
}
.btn-primary:hover, .btn-primary:focus {
  filter: brightness(1.02);
}
.btn-outline-primary {
  color: var(--color-primary, var(--primary-color)) !important;
  border-color: var(--color-primary, var(--primary-color)) !important;
}
.btn-outline-primary:hover {
  background: var(--color-primary, var(--primary-color)) !important;
  color: #fff !important;
}

/* Badges and pills */
.badge, .tag-pill {
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-semibold);
  padding: .35rem .6rem;
}

/* Tables - consistent header and row hover */
.table thead th {
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0));
  color: var(--color-text, var(--dark-text));
  border-bottom: 1px solid var(--color-border) !important;
}
.table tbody tr:hover {
  background: color-mix(in srgb, var(--color-primary, var(--primary-color)) 8%, transparent);
}

/* Filter panel used across Admin pages */
.filter-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .5rem;
  box-shadow: var(--shadow-sm);
}
.filter-toggle {
  background: var(--primary-gradient);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  padding: .45rem .9rem;
}
.filter-badges { margin-left: .5rem; }
.filter-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: color-mix(in srgb, var(--color-primary, var(--primary-color)) 12%, #fff);
  color: var(--color-primary, var(--primary-color));
  border: 1px solid color-mix(in srgb, var(--color-primary, var(--primary-color)) 25%, transparent);
  border-radius: var(--radius-pill);
  padding: .25rem .6rem;
  margin: .25rem .25rem 0 0;
  font-size: .9rem;
}

/* Organization tag pills used in Admin/Organization */
.organization-tag {
  display: inline-block;
  color: #fff;
  border-radius: var(--radius-pill);
  padding: .2rem .55rem;
  margin: .15rem .15rem 0 0;
  font-size: .8rem;
  line-height: 1.1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* Utilities */
.text-gradient-primary {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.border-primary-soft { border-color: color-mix(in srgb, var(--color-primary, var(--primary-color)) 35%, transparent) !important; }
.bg-surface { background: var(--color-surface) !important; }

/* DevExtreme widgets fine-tuning to match theme */
.dx-dropdowneditor-input-wrapper .dx-texteditor-input, .dx-texteditor-input {
  font-family: var(--font-family-base, var(--font-family));
}
.dx-tag.dx-tag-selected, .dx-checkbox-checked .dx-checkbox-icon {
  background: var(--color-primary, var(--primary-color));
  border-color: var(--color-primary, var(--primary-color));
}

/* Dark-mode surfaces alignment for common components */
html.dark-mode .card, html.dark-mode .modal-content, html.dark-mode .dropdown-menu {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
html.dark-mode .list-group-item, html.dark-mode .table { border-color: var(--color-border); }
html.dark-mode .navbar, html.dark-mode .dropdown-menu { background-color: var(--color-surface); }
html.dark-mode #vector-map-wrapper { background-color: #0e1525; }
html.dark-mode .form-control { background-color: #121622; color: var(--color-text); border-color: var(--color-border); }
html.dark-mode a { color: #83a0ff; }