/**
 * MMA Alliance Brand Design System
 *
 * This file establishes the MMA Alliance rebrand foundation for the SMARTIES Awards platform.
 * Based on the MMA Global 2025 rebrand guidelines.
 *
 * Key Brand Rules:
 * - Primary accent: Gold (#ffa400)
 * - Text/UI: Black (#000000) / Onyx (#1a1b1b)
 * - SMARTIES name: Retains purple (#b168aa) for brand recognition
 * - Typography: Soehne (headings), Tiempos Text (body)
 */

:root {
  /* ============================================================================
     MMA Alliance Core Brand Colors
     ========================================================================= */

  /* Primary brand colors */
  --mma-gold: #ffa400;
  --mma-onyx: #000000;
  --mma-black: #000000;
  --mma-white: #ffffff;

  /* Light variants */
  --mma-lt-gold: #ffb84d;
  --mma-lt-onyx: #bbbcbc;

  /* Gold gradient system (from dark to light) */
  --mma-gold-900: #ffa400;
  --mma-gold-800: #ffb84d;
  --mma-gold-700: #ffc666;
  --mma-gold-600: #ffd480;
  --mma-gold-500: #ffe299;
  --mma-gold-400: #ffebb3;
  --mma-gold-300: #fff0cc;
  --mma-gold-200: #fff5e6;
  --mma-gold-100: #fffbf2;

  /* Grayscale system (cool grays) */
  --mma-gray-900: #1a1b1b;
  --mma-gray-800: #353636;
  --mma-gray-700: #505151;
  --mma-gray-600: #6b6c6c;
  --mma-gray-500: #868787;
  --mma-gray-400: #a0a1a1;
  --mma-gray-300: #d6d7d7;
  --mma-gray-200: #e7e8e8;
  --mma-gray-100: #f7f8f8;

  /* Secondary brand colors */
  --mma-emerald: #00ab84;
  --mma-lt-emerald: #66cdb7;
  --mma-sapphire: #0047bb;
  --mma-lt-sapphire: #4079d6;
  --mma-topaz: #e25700;
  --mma-lt-topaz: #e98b4d;
  --mma-peridot: #b5c900;
  --mma-lt-peridot: #d6e466;

  /* SMARTIES brand purple - retained for SMARTIES name only */
  --smarties-purple: #b168aa;
  --smarties-purple-50: #faf3fa;
  --smarties-purple-100: #f6e9f5;
  --smarties-purple-200: #f1dff0;
  --smarties-purple-300: #e7d0e7;
  --smarties-purple-400: #dcc1dd;
  --smarties-purple-500: #d1b2d3;
  --smarties-purple-600: #c6a3c9;
  --smarties-purple-700: #c094bf;
  --smarties-purple-800: #bb85b4;
  --smarties-purple-900: #b168aa;

  /* ============================================================================
     Semantic Color Mappings
     ========================================================================= */

  /* Primary UI colors - now using gold instead of purple */
  --primary-color: var(--mma-gold);
  --primary-color-light: var(--mma-gold-400);
  --primary-color-dark: var(--mma-gold-900);
  --primary-color-hover: var(--mma-gold-800);

  /* Section/accent colors */
  --section-color: var(--mma-gold);
  --accent-color: var(--mma-gold);

  /* Text colors */
  --text-color: var(--mma-onyx);
  --text-color-muted: var(--mma-gray-600);
  --text-color-light: var(--mma-gray-400);

  /* Link colors */
  --link-color: var(--mma-onyx);
  --link-color-hover: var(--mma-gold);

  /* Heading colors */
  --heading-color: var(--mma-onyx);

  /* Background colors */
  --bg-light: var(--mma-gold-100);
  --bg-medium: var(--mma-gold-200);
  --bg-accent: var(--mma-gold);

  /* Status colors */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-info: #17a2b8;

  /* ============================================================================
     Form & Input Colors
     ========================================================================= */

  --input-border-color: var(--mma-gray-300);
  --input-border-color-focus: var(--mma-gray-500);
  --input-bg-color: var(--mma-white);
  --input-bg-color-disabled: var(--mma-gray-100);

  /* ============================================================================
     Button Colors
     ========================================================================= */

  --btn-primary-bg: var(--mma-gold);
  --btn-primary-color: var(--mma-onyx);
  --btn-primary-hover-bg: var(--mma-gold-800);
  --btn-primary-hover-color: var(--mma-onyx);

  /* ============================================================================
     Typography
     ========================================================================= */

  --font-soehne: 'Soehne', 'Inter Tight Bold', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-tiempos: 'Tiempos Text', 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-primary: var(--font-soehne);
  --font-heading: var(--font-soehne);
  --font-body: var(--font-soehne);

  /* Typography metrics */
  --tracking-headings: -0.03rem;
  --tracking-body: -0.02rem;
  --leading-headings: 1.1;
  --leading-body: 1.2;

  /* ============================================================================
     Spacing Scale
     ========================================================================= */

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* ============================================================================
     Shadows
     ========================================================================= */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* ============================================================================
     Border Radius
     ========================================================================= */

  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ============================================================================
     Transitions
     ========================================================================= */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

/* ============================================================================
   SMARTIES Name Styling
   Use this class to retain purple for the SMARTIES brand name
   ========================================================================= */

.smarties-name,
.smarties-brand {
  color: var(--smarties-purple) !important;
}

/* ============================================================================
   MMA Gold Diagonal Brand Element
   ========================================================================= */

.brand-diagonal {
  --diagonal-angle-internal: calc(var(--diagonal-angle, 23.13) * -1deg);
  --diagonal-width: var(--diagonal-thickness, 137px);
  --diagonal-height-val: var(--diagonal-height, 529px);
  --diagonal-scale: var(--diagonal-scale-val, 1);
  --diagonal-color: var(--diagonal-color-val, var(--mma-gold));

  width: calc(var(--diagonal-width) * var(--diagonal-scale));
  height: calc(var(--diagonal-height-val) * var(--diagonal-scale));
  background: var(--diagonal-color);
  transform: skewX(var(--diagonal-angle-internal));
  display: inline-block;
  flex-shrink: 0;
}

.brand-diagonal--gold {
  --diagonal-color-val: var(--mma-gold);
}

.brand-diagonal--black {
  --diagonal-color-val: var(--mma-black);
}

.brand-diagonal--white {
  --diagonal-color-val: var(--mma-white);
}

/* ============================================================================
   Utility Classes
   ========================================================================= */

/* Background colors */
.bg-gold { background-color: var(--mma-gold) !important; }
.bg-gold-light { background-color: var(--mma-gold-200) !important; }
.bg-gold-lighter { background-color: var(--mma-gold-100) !important; }
.bg-onyx { background-color: var(--mma-onyx) !important; }
.bg-white { background-color: var(--mma-white) !important; }

/* Text colors */
.text-gold { color: var(--mma-gold) !important; }
.text-onyx { color: var(--mma-onyx) !important; }
.text-white { color: var(--mma-white) !important; }
.text-smarties { color: var(--smarties-purple) !important; }

/* Border colors */
.border-gold { border-color: var(--mma-gold) !important; }
.border-onyx { border-color: var(--mma-onyx) !important; }

/* ============================================================================
   Font Face Definitions
   ========================================================================= */

@font-face {
  font-family: 'Soehne';
  src: url('../fonts/soehne/soehne-halbfett.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Soehne';
  src: url('../fonts/soehne/soehne-leicht.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tiempos Text';
  src: url('../fonts/tiempos/tiempos-text-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tiempos Text';
  src: url('../fonts/tiempos/tiempos-text-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   Base Typography
   ========================================================================= */

html, body {
  font-family: var(--font-soehne);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-soehne);
  font-weight: 600;
  color: var(--heading-color);
  margin-top: 0;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--link-color-hover);
}

/* ============================================================================
   SMARTIES Header Component
   ========================================================================= */

/* Admin Bar */
.smarties-admin-bar {
  background-color: var(--mma-gray-900);
  padding: 8px 0;
  font-size: 12px;
}

.smarties-admin-bar .admin-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.smarties-admin-bar .admin-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.smarties-admin-bar .admin-label {
  background-color: var(--mma-gold);
  color: var(--mma-black);
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
}

.smarties-admin-bar .admin-region {
  color: var(--mma-gray-400);
}

.smarties-admin-bar .admin-bar-right {
  display: flex;
  gap: 20px;
}

.smarties-admin-bar a {
  color: var(--mma-white);
  font-weight: 500;
}

.smarties-admin-bar a:hover {
  color: var(--mma-gold);
}

/* ============================================================================
   Main Content Layout
   ========================================================================= */

#main {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* Content containers need consistent spacing */
#main > .uk-container:first-child,
#main > .container:first-child,
#main > div:first-child {
  padding-top: 0;
}

/* Nav tabs spacing */
#main .nav-tabs {
  margin-bottom: 20px;
}

/* Page titles after nav */
#main h1:first-of-type,
#main h2:first-of-type {
  margin-top: 0;
}

/* Content cards/panels spacing */
.content,
.blue_bg_grad.content {
  margin-top: 16px;
}

/* Main Header */
.smarties-header {
  background-color: var(--mma-white);
  padding: 16px 0;
  border-bottom: 1px solid var(--mma-gray-200);
}

.smarties-header .header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

/* Logo */
.smarties-header .header-logo {
  flex-shrink: 0;
}

.smarties-header .header-logo img {
  height: 48px;
  width: auto;
}

/* Brand */
.smarties-header .header-brand {
  flex: 1;
}

.smarties-header .header-brand a {
  display: flex;
  align-items: baseline;
  gap: 4px;
  text-decoration: none;
}

.smarties-header .header-brand .smarties-name {
  font-size: 28px;
  font-weight: 700;
  color: var(--smarties-purple);
  letter-spacing: -0.02em;
}

.smarties-header .header-brand .smarties-x {
  font-size: 28px;
  font-weight: 700;
  color: var(--mma-gray-500);
  letter-spacing: -0.02em;
}

.smarties-header .header-brand .smarties-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--mma-gray-600);
  margin-left: 8px;
}

/* Header Actions */
.smarties-header .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.smarties-header .user-greeting {
  color: var(--mma-gray-600);
  font-size: 14px;
}

.btn-header {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--mma-gold);
  color: var(--mma-black);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.btn-header:hover {
  background-color: var(--mma-gold-800);
  color: var(--mma-black);
}

.btn-header-outline {
  display: inline-block;
  padding: 10px 20px;
  background-color: transparent;
  color: var(--mma-black);
  font-weight: 600;
  font-size: 14px;
  border: 2px solid var(--mma-gray-300);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-header-outline:hover {
  border-color: var(--mma-gold);
  color: var(--mma-gold);
}

/* Title Bar */
.smarties-title-bar {
  background-color: var(--mma-gray-900);
  padding: 12px 0;
}

.smarties-title-bar .breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.smarties-title-bar a {
  color: var(--mma-gray-400);
}

.smarties-title-bar a:hover {
  color: var(--mma-gold);
}

.smarties-title-bar .separator {
  color: var(--mma-gray-600);
}

.smarties-title-bar .current {
  color: var(--mma-white);
  font-weight: 500;
}

/* ============================================================================
   Footer Component
   ========================================================================= */

.smarties-footer {
  background-color: var(--mma-gray-900);
  color: var(--mma-gray-400);
  padding: 48px 0 24px;
  margin-top: 60px;
}

.smarties-footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  .smarties-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.smarties-footer h4 {
  color: var(--mma-gold);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.smarties-footer a {
  color: var(--mma-gray-300);
  transition: color var(--transition-fast);
}

.smarties-footer a:hover {
  color: var(--mma-gold);
}

.smarties-footer p {
  color: var(--mma-gray-400);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.smarties-footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.smarties-footer .footer-links li {
  margin-bottom: 8px;
}

.smarties-footer .footer-links a {
  font-size: 13px;
}

.smarties-footer .footer-partner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.smarties-footer .footer-partner span {
  font-size: 12px;
  color: var(--mma-gray-500);
}

.smarties-footer .footer-partner img {
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.smarties-footer .social-icons {
  display: flex;
  gap: 12px;
}

.smarties-footer .social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--mma-gray-800);
  border-radius: var(--radius-md);
  font-size: 16px;
  transition: all var(--transition-fast);
}

.smarties-footer .social-icons a:hover {
  background-color: var(--mma-gold);
  color: var(--mma-black);
}

.smarties-footer .footer-copyright {
  border-top: 1px solid var(--mma-gray-800);
  padding-top: 24px;
  text-align: center;
}

.smarties-footer .footer-copyright p {
  color: var(--mma-gray-500);
  font-size: 12px;
  margin: 0;
}

/* ============================================================================
   Form Controls
   ========================================================================= */

.form-control:focus {
  border-color: var(--mma-gold);
  box-shadow: 0 0 0 3px rgba(255, 164, 0, 0.15);
}

/* ============================================================================
   Buttons
   ========================================================================= */

/* Base button styling - 4px border radius per MMA brand guidelines */
.btn,
button,
input[type="button"],
input[type="submit"] {
  font-family: var(--font-soehne);
  border-radius: 4px !important;
}

.btn-primary,
.btn-gold {
  background-color: var(--mma-gold);
  border-color: var(--mma-gold);
  color: var(--mma-black);
  font-family: var(--font-soehne);
  font-weight: 600;
  border-radius: 4px;
}

/* Remove gray border from btn-default when used with gold background */
.btn-default,
.btn-default.bg-section-color,
.btn.bg-section-color {
  border: none !important;
  border-color: transparent !important;
}

/* Gold background buttons with proper styling */
.btn.bg-section-color,
.btn-default.bg-section-color {
  background-color: var(--mma-gold) !important;
  color: var(--mma-black) !important;
  border-radius: 4px !important;
}

.btn-primary:hover,
.btn-gold:hover,
.btn.bg-section-color:hover,
.btn-default.bg-section-color:hover {
  background-color: var(--mma-gold-800) !important;
  border-color: var(--mma-gold-800) !important;
  color: var(--mma-black) !important;
}

/* ============================================================================
   Page Content
   ========================================================================= */

.page-header {
  color: var(--heading-color);
  border-bottom: none;
  padding-bottom: 0;
  margin: 24px 0;
}

.page-header .smarties-name {
  color: var(--smarties-purple);
}

/* ============================================================================
   Secondary Navigation (Admin Tabs)
   ========================================================================= */

.nav-tabs {
  border-bottom: 2px solid var(--mma-gray-200);
  margin-bottom: 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nav-tabs > li {
  margin-bottom: -2px;
}

.nav-tabs > li > a {
  display: block;
  padding: 12px 16px;
  color: var(--mma-gray-600);
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  border-radius: 0;
  transition: all var(--transition-fast);
}

.nav-tabs > li > a:hover {
  color: var(--mma-black);
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--mma-gray-300);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--mma-black);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--mma-gold);
  font-weight: 600;
}

/* ============================================================================
   Cards and Panels
   ========================================================================= */

.panel {
  border: 1px solid var(--mma-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.panel-heading {
  background-color: var(--mma-gray-100);
  border-bottom: 1px solid var(--mma-gray-200);
  padding: 12px 16px;
}

.panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mma-black);
}

/* ============================================================================
   Tables
   ========================================================================= */

.table > thead > tr > th {
  background-color: var(--mma-gold);
  color: var(--mma-black);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: none;
  padding: 12px 16px;
}

.table > tbody > tr > td {
  padding: 12px 16px;
  vertical-align: middle;
  border-top: 1px solid var(--mma-gray-200);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--mma-gray-100);
}

.table-hover > tbody > tr:hover {
  background-color: var(--mma-gold-100);
}

/* ============================================================================
   Badges and Labels
   ========================================================================= */

.badge,
.label {
  font-weight: 600;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.badge-primary,
.label-primary {
  background-color: var(--mma-gold);
  color: var(--mma-black);
}

.badge-success,
.label-success {
  background-color: var(--mma-emerald);
  color: var(--mma-white);
}

.badge-warning,
.label-warning {
  background-color: var(--mma-topaz);
  color: var(--mma-white);
}

.badge-danger,
.label-danger {
  background-color: var(--color-danger);
  color: var(--mma-white);
}

/* ============================================================================
   Alerts
   ========================================================================= */

.alert {
  border-radius: var(--radius-md);
  border: none;
  padding: 16px 20px;
}

.alert-success {
  background-color: rgba(0, 171, 132, 0.1);
  color: var(--mma-emerald);
}

.alert-warning {
  background-color: var(--mma-gold-200);
  color: var(--mma-gray-900);
}

.alert-danger {
  background-color: rgba(220, 53, 69, 0.1);
  color: var(--color-danger);
}

.alert-info {
  background-color: rgba(0, 71, 187, 0.1);
  color: var(--mma-sapphire);
}

/* ============================================================================
   Legacy Utility Class Overrides
   These classes are used throughout templates and need to map to MMA Alliance brand
   ========================================================================= */

/* Background color utilities */
.bg-section-color {
  background-color: var(--mma-gold) !important;
}

.bg-blue,
.bg-darkblue,
.bg-blackblue {
  background-color: var(--mma-gray-900) !important;
}

/* Sidebar feature styling (deadline boxes) */
.sidebar-feature-orange {
  background: linear-gradient(to bottom, var(--mma-gold), var(--mma-gold-800));
  color: var(--mma-black);
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.sidebar-feature-orange h2,
.sidebar-feature-orange h3,
.sidebar-feature-orange .h2 {
  color: var(--mma-black);
  margin-top: 0;
}

.sidebar-feature-orange strong {
  color: var(--mma-black);
}

/* Link styling for "Join" and CTA buttons */
a.orange,
.orange {
  color: var(--mma-gold) !important;
}

/* ============================================================================
   Legacy Button Styling
   ========================================================================= */

/* White text utility for buttons */
.white {
  color: var(--mma-white) !important;
}

/* Make gold background buttons have black text for contrast */
.bg-section-color.white {
  color: var(--mma-black) !important;
}

/* ============================================================================
   Well/Panel Background Fix
   Use neutral gray instead of gold tints for better accessibility
   ========================================================================= */

.well {
  background-color: var(--mma-gray-100) !important;
}

.gray-panel {
  background-color: var(--mma-gray-100) !important;
}

/* Password retrieval box - neutral instead of gold */
#div_password_retrieval {
  background-color: var(--mma-gray-100) !important;
}

/* ============================================================================
   Form Helper/Hint Text
   Override UIKit's red #f0506e emphasis color with neutral gray
   ========================================================================= */

/* Helper text in forms - should be subtle, not error-like red */
em {
  color: var(--mma-gray-600) !important;
  font-style: italic;
}

/* Ensure em inside labels/form fields also gets the override */
label em,
.input em,
form em {
  color: var(--mma-gray-600) !important;
}

/* Delete links in forms - use muted color, not error red */
.fakeLink.delete,
a.delete {
  color: var(--mma-gray-500) !important;
}

.fakeLink.delete:hover,
a.delete:hover {
  color: var(--color-danger) !important;
}

/* Required field asterisks - keep red for visibility */
label .required,
.required-indicator,
span[style*="color: red"],
span[style*="color:#ff0000"] {
  color: var(--color-danger) !important;
}