/*
  MODERN FALCON THEME OVERRIDE (INSPIRED BY GOOGLE MATERIAL DESIGN)
  - Adds modern color, typography, shape, and elevation.
  - Fixes icon visibility issues.
  - Redesigns the top navbar, vertical navbar, and main content area.
*/

/* -------------------------------------------------------------------------- */
/* FONTS                                   */
/* -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* -------------------------------------------------------------------------- */
/* ICON FONT FIX                                */
/* -------------------------------------------------------------------------- */
/* This ensures that Font Awesome icons use their correct font and are not overridden. */
.fas, .far, .fal, .fab, [data-fa-pseudo-element] {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important; /* For solid icons */
}

/* -------------------------------------------------------------------------- */
/* 1. CORE SYSTEM FOUNDATION                          */
/* -------------------------------------------------------------------------- */

/* a. Modern Color System */
:root,
[data-bs-theme=light] {
  /* Primary Colors */
  --falcon-primary: #4285F4; /* Google Blue */
  --falcon-primary-rgb: 66, 133, 244;
  --falcon-primary-bg-subtle: #EAF1FF;
  --falcon-primary-border-subtle: #C4D7FB;
  --falcon-primary-text-emphasis: #0B4AB2;

  /* Secondary & Tertiary (Surfaces & Containers) */
  --falcon-secondary: #5F6368;
  --falcon-secondary-rgb: 95, 99, 104;
  --falcon-secondary-bg-subtle: #F1F3F4;

  /* Body & Backgrounds */
  --falcon-body-bg: #F8F9FA;
  --falcon-body-color: #3C4043;
  --falcon-emphasis-bg: #FFFFFF;
  --falcon-heading-color: #202124;
  
  /* Borders */
  --falcon-border-color: #DADCE0;

  /* Semantic Colors */
  --falcon-success: #34A853;
  --falcon-danger: #EA4335;
  --falcon-warning: #FBBC04;

  /* Links */
  --falcon-link-color: var(--falcon-primary);
  --falcon-link-hover-color: var(--falcon-primary-text-emphasis);
}

[data-bs-theme=dark] {
  /* Primary Colors */
  --falcon-primary: #8AB4F8;
  --falcon-primary-rgb: 138, 180, 248;
  --falcon-primary-bg-subtle: #28354C;
  --falcon-primary-border-subtle: #3C4F70;
  --falcon-primary-text-emphasis: #B8D3FB;

  /* Secondary & Tertiary (Surfaces & Containers) */
  --falcon-secondary: #BDC1C6;
  --falcon-secondary-rgb: 189, 193, 198;
  --falcon-secondary-bg-subtle: #2A2B2E;

  /* Body & Backgrounds */
  --falcon-body-bg: #1A1B1E;
  --falcon-body-color: #E8EAED;
  --falcon-emphasis-bg: #202124;
  --falcon-heading-color: #F8F9FA;
  
  /* Borders */
  --falcon-border-color: #3C4043;
  
  /* Links */
  --falcon-link-color: var(--falcon-primary);
  --falcon-link-hover-color: #C4DAFB;
}

/* b. Modern Typography */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --falcon-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --falcon-body-font-family: var(--falcon-font-sans-serif);
  --falcon-body-font-weight: 400;
  --falcon-body-font-size: 1rem;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* c. Modern Shape & Borders */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --falcon-border-width: 1px;
  --falcon-border-radius: 0.75rem;       /* 12px */
  --falcon-border-radius-sm: 0.5rem;      /* 8px */
  --falcon-border-radius-lg: 1rem;        /* 16px */
  --falcon-border-radius-xl: 1.5rem;      /* 24px */
}

/* d. Modern Elevation System */
:root,
[data-bs-theme=light] {
  --falcon-box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.06);
  --falcon-box-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --falcon-box-shadow-lg: 0 4px 12px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.1);
}

[data-bs-theme=dark] {
  --falcon-box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2);
  --falcon-box-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --falcon-box-shadow-lg: 0 4px 12px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.3);
}


/* -------------------------------------------------------------------------- */
/* 2. COMPONENT REDESIGN                            */
/* -------------------------------------------------------------------------- */

/* a. Top Navbar */
.navbar-top {
  background-color: var(--falcon-emphasis-bg);
  -webkit-box-shadow: none;
          box-shadow: none;
  border-bottom: 1px solid var(--falcon-border-color);
}

.search-box .search-input {
  background-color: var(--falcon-body-bg);
  border-color: var(--falcon-border-color);
}

/* b. Vertical Navbar (Side Nav) */
.navbar-vertical {
  border-right: 1px solid var(--falcon-border-color);
  background-color: var(--falcon-emphasis-bg);
}

/* Remove card styles for a cleaner, integrated look */
.navbar-vertical.navbar-card {
  padding: 0;
}
.navbar-vertical.navbar-card .navbar-collapse {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  background-color: transparent;
}
[data-bs-theme=light] .navbar-vertical.navbar-card .navbar-vertical-content {
  padding: 0.5rem 0.75rem 0 0.75rem !important;
}
[data-bs-theme=dark] .navbar-vertical {
  background-color: var(--falcon-body-bg);
}

/* Nav Link Styling */
.navbar-vertical .nav-link {
  border-radius: var(--falcon-border-radius-sm);
  color: var(--falcon-gray-700);
}

.navbar-vertical .nav-link-icon {
  color: var(--falcon-gray-600);
  -webkit-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
}

.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:focus {
  color: var(--falcon-heading-color);
  background-color: var(--falcon-secondary-bg-subtle);
}

.navbar-vertical .nav-link:hover .nav-link-icon,
.navbar-vertical .nav-link:focus .nav-link-icon {
  color: var(--falcon-heading-color);
}

/* Active Nav Link (Pill Shape) */
.navbar-vertical .nav-link.active {
  background-color: var(--falcon-primary-bg-subtle);
  color: var(--falcon-primary-text-emphasis);
  font-weight: 600;
}

.navbar-vertical .nav-link.active .nav-link-icon {
  color: var(--falcon-primary);
}

/* Sub-menu styling */
.navbar-vertical .navbar-nav .nav {
  padding-left: 0.5rem;
}
.navbar-vertical .navbar-nav .nav .nav-item .nav-link {
    padding-left: calc(1.5rem + 0.2rem);
}

/* c. Main Content Area */
.content {
  padding: 1.5rem;
}

@media (min-width: 576px) {
  .content {
      padding: 2rem;
  }
}

/* d. Buttons */
.btn, .falcon-data-table .paging_full_numbers .page-link,
.falcon-data-table .paging_first_last_numbers .page-link,
.falcon-data-table .paging_full .page-link,
.falcon-data-table .paging_numbers .page-link,
.falcon-data-table .paging_simple_numbers .page-link,
[data-list] .page, .table-list .page, .tox .tox-menu__footer .tox-button:last-child,
.tox .tox-dialog__footer .tox-button:last-child, .tox .tox-menu__footer .tox-button--secondary,
.tox .tox-dialog__footer .tox-button--secondary {
  --falcon-btn-font-weight: 600;
  --falcon-btn-box-shadow: none;
  --falcon-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--falcon-primary-rgb), 0.25);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-radius: var(--falcon-border-radius-pill);
  padding: 0.5rem 1.25rem;
}

.btn-primary, .tox .tox-menu__footer .tox-button:last-child,
.tox .tox-dialog__footer .tox-button:last-child {
  --falcon-btn-active-shadow: none;
  --falcon-btn-hover-bg: #2173E3;
}

.btn-outline-secondary {
   --falcon-btn-hover-bg: var(--falcon-secondary-bg-subtle);
   --falcon-btn-active-bg: #E8EAED;
}


/* e. Cards */
.card {
  --falcon-card-border-width: 1px;
  --falcon-card-border-color: var(--falcon-border-color);
  --falcon-card-box-shadow: none;
  --falcon-card-bg: var(--falcon-emphasis-bg);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.card:hover {
  -webkit-box-shadow: var(--falcon-box-shadow);
  box-shadow: var(--falcon-box-shadow);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--falcon-border-color);
  padding: 1rem 1.25rem;
}

.card-footer {
  background-color: transparent;
  border-top: 1px solid var(--falcon-border-color);
}