/* ==========================================================================
   1. FONTS 
   ========================================================================== */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Thin.ttf") format("truetype");
  font-weight: 100;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-ExtraLight.ttf") format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Light.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Medium.ttf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-SemiBold.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Bold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-ExtraBold.ttf") format("truetype");
  font-weight: 800;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Black.ttf") format("truetype");
  font-weight: 900;
}

/* ==========================================================================
   2. VARIABLES (Flayzr Theme mapped to Django Native Variables)
   ========================================================================== */
:root {
  /* -- Your Flayzr Palette -- */
  --primary-one: #ff623e;
  --primary-light: rgba(255, 97, 62, 0.6);
  --primary-bright: #ff8038;
  --primary-two: #8c52ff;
  --secondary-one: #f8f5f2;
  --secondary-two: #070a0d;
  --secondary-charcoal: #1e1e1e;
  --secondary-background: #121212;
  --soft-black: rgba(255,255,255, 0.15);
  --border-color: #333333;
  --border-color2: #2a2a2a;
  --muted-color: #9CA3AF;
  --line-color: rgba(248, 245, 242, 0.4);
  --correct-green: #00ffc2;
  --correct-green2: #00D26A;
  --close-yellow: #FFC107;
  --incorrect-gray: #3A3F47;
  --incorrect-red: #ff2968;

  /* -- Django Core Overrides -- */
  --primary: var(--primary-one);
  --secondary: var(--secondary-background);
  --accent: var(--primary-bright);
  --primary-fg: #ffffff;
  
  --body-bg: transparent; /* Lets the SVG show through */
  --body-fg: var(--secondary-one);
  --body-quiet-color: var(--muted-color);
  --body-loud-color: #ffffff;
  
  --header-bg: var(--secondary-two);
  --header-color: var(--primary-one);
  --header-branding-color: var(--primary-one);
  --header-link-color: var(--secondary-one);
  
  --breadcrumbs-bg: var(--secondary-background);
  --breadcrumbs-fg: var(--muted-color);
  --breadcrumbs-link-fg: var(--secondary-one);
  
  --link-fg: var(--primary-bright);
  --link-hover-color: var(--primary-two);
  --link-selected-fg: var(--primary-one);
  
  --hairline-color: var(--border-color);
  --border-color: var(--border-color2);
  
  --error-fg: var(--incorrect-red);
  --message-success-bg: var(--correct-green2);
  
  --darkened-bg: var(--secondary-charcoal);
  --selected-bg: rgba(255, 97, 62, 0.1); /* Subtle orange highlight for selected rows */
  --selected-row: rgba(255, 97, 62, 0.1);
  
  /* Buttons */
  --button-bg: var(--primary-one);
  --button-fg: #ffffff;
  --button-hover-bg: var(--primary-bright);
  --default-button-bg: var(--primary-two); /* Flayzr Purple for primary actions */
  --default-button-hover-bg: #7a40f0;
}

/* ==========================================================================
   3. BASE & TYPOGRAPHY
   ========================================================================== */
body, #container {
  font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--secondary-one);
  background-color: var(--secondary-two);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23222222' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
}

/* Force elements that default to system fonts to use Outfit */
input, button, textarea, select, .button {
  font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Header tweaks */
#header {
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
#branding h1 {
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary-one);
}

/* ==========================================================================
   4. DASHBOARD MODULES & TABLES
   ========================================================================== */
.module {
  background: var(--secondary-background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.module caption {
  background: var(--secondary-charcoal);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 16px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.module caption a {
  color: var(--secondary-one) !important;
}

/* Data Tables */
table {
  width: 100%;
  border-collapse: collapse;
}
thead th {
  background: var(--secondary-charcoal);
  color: var(--muted-color);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
  padding: 10px;
}
tbody tr {
  background: var(--secondary-background);
  border-bottom: 1px solid var(--border-color2);
  transition: background 0.2s ease;
}
tbody tr.row1 { background: var(--secondary-background); }
tbody tr.row2 { background: var(--secondary-charcoal); }

tbody tr:hover {
  background: var(--selected-row) !important;
}

/* ==========================================================================
   5. FORMS & INPUTS
   ========================================================================== */
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], textarea, select {
  background-color: var(--secondary-two);
  color: var(--secondary-one);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 12px;
  transition: border 0.3s ease;
}
input[type="text"]:focus, textarea:focus, select:focus {
  border-color: var(--primary-one);
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-light);
}

/* Help text styling */
.help, p.help {
  color: var(--muted-color);
  font-size: 13px;
  font-weight: 300;
}

/* Fieldset borders */
fieldset.module {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--secondary-background);
  margin-bottom: 20px;
}

/* ==========================================================================
   6. SIDEBAR
   ========================================================================== */
#nav-sidebar {
  background: var(--secondary-background);
  border-right: 1px solid var(--border-color);
}
.app-dict th a {
  color: var(--secondary-one);
  font-weight: 500;
}

/* ==========================================================================
   7. MEDIA QUERIES
   ========================================================================== */
@media (max-width: 768px) {
  /* Adjust dashboard layout for smaller screens */
  #content-main {
      width: 100%;
  }
  .module {
      margin-bottom: 15px;
  }
}