/**
 * @file
 * Custom styles for Foursquare DXPR sub-theme
 *
 * This file contains general custom styles for the theme.
 * Button styles have been moved to buttons.css for better organization.
 */

/* =============================================================================
   Typography and General Styles
   ============================================================================= */

/* Add any custom typography or general styles here */

/* =============================================================================
   Layout and Structure
   ============================================================================= */

/* Add any custom layout styles here */

/* =============================================================================
   Component Overrides
   ============================================================================= */

/* Status message skin moved to status-messages-overrides.css via libraries-extend. */

/* Bootstrap Alert Overrides - Use DXPR theme colors */
.alert {
  border-radius: var(--dxt-setting-block-border-radius, 8px);
  border-width: 1px;
  border-style: solid;
}

.alert-info {
  background-color: var(--dxt-color-graylighter, #f0f7fc);
  border-color: var(--dxt-color-base, #3498db);
  color: var(--dxt-color-text, #333333);
}

.alert-info .alert-heading {
  color: var(--dxt-color-headings, #333333);
}

.alert-info a,
.alert-info .alert-link {
  color: var(--dxt-color-link, #3498db);
  font-weight: 600;
}

.alert-success {
  background-color: rgba(var(--dxt-color-accent1), 0.1);
  border-color: var(--dxt-color-accent1, #28a745);
  color: var(--dxt-color-text, #333333);
}

.alert-warning {
  background-color: rgba(255, 193, 7, 0.1);
  border-color: #ffc107;
  color: var(--dxt-color-text, #333333);
}

.alert-danger {
  background-color: rgba(220, 53, 69, 0.1);
  border-color: #dc3545;
  color: var(--dxt-color-text, #333333);
}

/* =============================================================================
   Sidebar Navigation Styles
   ============================================================================= */

/* Sidebar menu block styling */
#block-foursquare-dxpr-dashboard {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

#block-foursquare-dxpr-dashboard .block-hr {
  display: none; /* Hide the horizontal rule */
}

/* Sidebar navigation menu */
#block-foursquare-dxpr-dashboard .nav {
  flex-direction: column;
}

#block-foursquare-dxpr-dashboard .nav-item {
  margin-bottom: 0.5rem;
}

#block-foursquare-dxpr-dashboard .nav-link {
  color: #333;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-weight: 500;
}

#block-foursquare-dxpr-dashboard .nav-link:hover {
  background-color: #e9ecef;
  color: #007bff;
  text-decoration: none;
}

#block-foursquare-dxpr-dashboard .nav-link.active,
#block-foursquare-dxpr-dashboard .nav-link.is-active {
  background-color: #007bff;
  color: white;
}

/* Ensure proper spacing in main content area */
.main-container .row {
  margin-left: -15px;
  margin-right: -15px;
}

/* Login form specific styling */
.user-login-form .form-submit,
.fs-login-form .form-submit {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Active menu item state */
#block-foursquare-dxpr-dashboard .nav-link.is-active {
  background-color: #007bff;
  color: #ffffff;
  font-weight: 500;
}

/* =============================================================================
   Dashboard Layout (Fixed Sidebar)
   ============================================================================= */

/* Dashboard container that wraps sidebar and main content */
.dashboard-container {
  display: flex;
  min-height: calc(100vh - 70px); /* Subtract header height */
  position: relative;
}

/* Fixed sidebar */
.sidebar-fixed {
  width: 280px;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: fixed;
  height: calc(100vh - 70px); /* Subtract header height */
  overflow-y: auto;
  z-index: 100;
  left: 0;
  top: 70px; /* Start below header */
}

/* Main content wrapper - pushed to the right of sidebar */
.main-content-wrapper {
  flex: 1;
  margin-left: 280px;
  min-height: calc(100vh - 70px); /* Subtract header height */
  background-color: #f8f9fa;
}

/* Adjust the navbar when inside dashboard layout */
.dashboard-container .dxpr-theme-header {
  position: relative;
  width: 100%;
}

/* Ensure content regions have proper spacing */
.dashboard-container .main-container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Style the sidebar menu block when in fixed sidebar */
.sidebar-fixed #block-foursquare-dxpr-dashboard {
  background-color: transparent;
  border-radius: 0;
  padding: 20px 0;
  margin-bottom: 0;
}

/* Sidebar navigation styling */
.sidebar-fixed .nav {
  padding: 0 20px;
}

.sidebar-fixed .nav-link {
  padding: 12px 20px;
  color: #2c3e50;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: block;
}

.sidebar-fixed .nav-link:hover {
  background-color: #f8f9fa;
  color: #007bff;
  text-decoration: none;
}

.sidebar-fixed .nav-link.is-active {
  background-color: #007bff;
  color: #ffffff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sidebar-fixed {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .sidebar-fixed.open {
    transform: translateX(0);
  }
  
  .main-content-wrapper {
    margin-left: 0;
  }
}

/* Admin toolbar adjustments */
body.toolbar-fixed .sidebar-fixed {
  top: calc(39px + 70px); /* Admin toolbar + header */
  height: calc(100vh - 39px - 70px);
}

body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .sidebar-fixed {
  top: calc(79px + 70px); /* Admin toolbar expanded + header */
  height: calc(100vh - 79px - 70px);
}

/* Adjust dashboard container when admin toolbar is present */
body.toolbar-fixed .dashboard-container {
  min-height: calc(100vh - 39px - 70px);
}

body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .dashboard-container {
  min-height: calc(100vh - 79px - 70px);
}

/* Ensure footer spans full width in dashboard layout */
.dashboard-container + .dxpr-theme-footer {
  margin-left: 280px;
}

@media (max-width: 768px) {
  .dashboard-container + .dxpr-theme-footer {
    margin-left: 0;
  }
}

/* Sticky header adjustments */
.dxpr-theme-header--sticky.affix + .dashboard-container .sidebar-fixed {
  position: fixed;
}

/* When header is sticky and admin toolbar exists */
body.toolbar-fixed .dxpr-theme-header--sticky.affix + .dashboard-container .sidebar-fixed {
  top: calc(39px + 70px);
}

body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .dxpr-theme-header--sticky.affix + .dashboard-container .sidebar-fixed {
  top: calc(79px + 70px);
}

/* =============================================================================
   Help Pages Section
   ============================================================================= */

/* Center help page content similar to verification pages */
.path-help .main-container {
  background: var(--dxt-color-graylighter, #f8f9fa);
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.path-help .region-content {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  background: var(--dxt-color-card, #ffffff);
  border-radius: var(--dxt-setting-block-border-radius, 12px);
  box-shadow: var(--dxt-setting-block-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
  padding: 40px;
}

/* Mobile responsiveness for help pages */
@media (max-width: 768px) {
  .path-help .main-container {
    padding: 20px 15px;
    min-height: calc(100vh - 150px);
  }
}