/* FreightMaster Theme System - CSS Variables for White-label Customization */

:root {
  /* Primary Brand Colors */
  --fm-primary: #0d6efd;
  --fm-primary-hover: #0b5ed7;
  --fm-primary-active: #0a58ca;

  /* Secondary Colors */
  --fm-secondary: #6c757d;
  --fm-success: #198754;
  --fm-warning: #ffc107;
  --fm-danger: #dc3545;
  --fm-info: #0dcaf0;

  /* Neutral Colors */
  --fm-light: #f8f9fa;
  --fm-dark: #212529;
  --fm-white: #ffffff;
  --fm-black: #000000;

  /* Background Colors */
  --fm-bg-primary: var(--fm-white);
  --fm-bg-secondary: var(--fm-light);
  --fm-bg-dark: var(--fm-dark);

  /* Text Colors */
  --fm-text-primary: var(--fm-dark);
  --fm-text-secondary: var(--fm-secondary);
  --fm-text-muted: #6c757d;
  --fm-text-white: var(--fm-white);

  /* Border and Shadow */
  --fm-border-color: #dee2e6;
  --fm-border-radius: 0.375rem;
  --fm-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --fm-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

  /* Navigation */
  --fm-nav-bg: var(--fm-dark);
  --fm-nav-text: var(--fm-white);
  --fm-nav-link-hover: var(--fm-primary);

  /* Sidebar */
  --fm-sidebar-bg: var(--fm-dark);
  --fm-sidebar-text: var(--fm-white);
  --fm-sidebar-width: 250px;

  /* Header */
  --fm-header-bg: var(--fm-white);
  --fm-header-text: var(--fm-dark);
  --fm-header-height: 60px;

  /* Logo */
  --fm-logo-height: 40px;
  --fm-logo-width: auto;

  /* Spacing */
  --fm-spacing-xs: 0.25rem;
  --fm-spacing-sm: 0.5rem;
  --fm-spacing-md: 1rem;
  --fm-spacing-lg: 1.5rem;
  --fm-spacing-xl: 3rem;

  /* Typography */
  --fm-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fm-font-size-base: 1rem;
  --fm-font-size-sm: 0.875rem;
  --fm-font-size-lg: 1.125rem;
  --fm-line-height-base: 1.5;

  /* Transitions */
  --fm-transition: all 0.2s ease-in-out;
}

/* Dark theme variant */
[data-fm-theme="dark"] {
  --fm-bg-primary: #1a1a1a;
  --fm-bg-secondary: #2d2d2d;
  --fm-text-primary: var(--fm-white);
  --fm-text-secondary: #e9ecef;
  --fm-border-color: #495057;
  --fm-header-bg: #1a1a1a;
  --fm-header-text: var(--fm-white);
}

/* Brand-specific theme overrides will be injected here */
/* Example for a company with blue branding:
.tenant-acme {
  --fm-primary: #1e40af;
  --fm-primary-hover: #1d4ed8;
  --fm-primary-active: #1e3a8a;
  --fm-nav-bg: #1e40af;
}
*/

/* Component Styles Using CSS Variables */

/* Navigation */
.navbar-brand {
  color: var(--fm-nav-text) !important;
  font-weight: 600;
}

.navbar-dark {
  background-color: var(--fm-nav-bg) !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--fm-nav-text);
  transition: var(--fm-transition);
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--fm-nav-link-hover);
}

/* Sidebar */
.sidebar {
  background-color: var(--fm-sidebar-bg);
  color: var(--fm-sidebar-text);
  width: var(--fm-sidebar-width);
  transition: var(--fm-transition);
}

.sidebar .nav-link {
  color: var(--fm-sidebar-text);
  border-radius: var(--fm-border-radius);
  margin: var(--fm-spacing-xs) var(--fm-spacing-sm);
  transition: var(--fm-transition);
}

.sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--fm-primary);
}

.sidebar .nav-link.active {
  background-color: var(--fm-primary);
  color: var(--fm-white);
}

/* Main content */
.content {
  background-color: var(--fm-bg-secondary);
  min-height: 100vh;
  transition: var(--fm-transition);
}

/* Cards */
.card {
  border: 1px solid var(--fm-border-color);
  border-radius: var(--fm-border-radius);
  box-shadow: var(--fm-box-shadow);
  background-color: var(--fm-bg-primary);
  color: var(--fm-text-primary);
}

.card-header {
  background-color: var(--fm-bg-secondary);
  border-bottom: 1px solid var(--fm-border-color);
  color: var(--fm-text-primary);
}

/* Buttons */
.btn-primary {
  background-color: var(--fm-primary);
  border-color: var(--fm-primary);
  color: var(--fm-white);
}

.btn-primary:hover {
  background-color: var(--fm-primary-hover);
  border-color: var(--fm-primary-hover);
}

.btn-primary:active,
.btn-primary.active {
  background-color: var(--fm-primary-active);
  border-color: var(--fm-primary-active);
}

/* Forms */
.form-control {
  border: 1px solid var(--fm-border-color);
  border-radius: var(--fm-border-radius);
  background-color: var(--fm-bg-primary);
  color: var(--fm-text-primary);
  transition: var(--fm-transition);
}

.form-control:focus {
  border-color: var(--fm-primary);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Tables */
.table {
  color: var(--fm-text-primary);
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: rgba(0, 0, 0, 0.025);
}

/* Alerts */
.alert-primary {
  background-color: rgba(13, 110, 253, 0.1);
  border-color: var(--fm-primary);
  color: var(--fm-primary);
}

/* Logo styles */
.navbar-brand img,
.logo img {
  height: var(--fm-logo-height);
  width: var(--fm-logo-width);
  object-fit: contain;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  :root {
    --fm-sidebar-width: 100%;
    --fm-header-height: 50px;
    --fm-logo-height: 35px;
  }
}