/* 
 * STC Admin Layout & Theme
 * This file handles both layout structure and Switzerland Travel Centre styling
 */

:root {
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 0px;
  --header-height: 60px;
  --transition-speed: 0.3s;
}

/* ===== Global Font Settings ===== */
body,
button:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
input,
select,
textarea,
.e-control:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.e-control *:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class*="fa-"]),
.e-grid,
.e-chart,
.e-toast,
.e-dialog {
  font-family: var(--font-family-sans) !important;
}

/* Exception for Font Awesome icons - preserve their font-family */
body .fa,
body .fas,
body .far,
body .fal,
body .fab,
body [class*="fa-"],
.fa,
.fas,
.far,
.fal,
.fab,
[class*="fa-"] {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
}

/* More specific override for Font Awesome icons that might be deeply nested */
div .fa,
div .fas,
div .far,
div .fal, 
div .fab,
div [class*="fa-"] {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
}

/* Specific override for Font Awesome solid icons */
.fas,
i.fas,
.fas:before,
i.fas:before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}

/* Specific override for Font Awesome regular icons */
.far,
i.far,
.far:before,
i.far:before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
}

/* Specific override for Font Awesome brand icons */
.fab,
i.fab,
.fab:before,
i.fab:before {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: normal !important;
}

/* Syncfusion EJ2 components font override */
.e-grid .e-headercell,
.e-grid .e-rowcell,
.e-chart-title,
.e-chart-legend,
.e-chart-legend-text,
.e-chart-axis-label {
  font-family: var(--font-family-sans) !important;
}

/* Ensure proper font weight on Syncfusion components */
.e-grid .e-headercell {
  font-weight: 600 !important;
}

.e-grid .e-rowcell {
  font-weight: 400 !important;
}

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

/* Basic Sidebar Layout */
.sidebar-container {
  width: var(--sidebar-width);
  transition: width var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  z-index: 100;
}

.sidebar-container aside {
  border-right: 1px solid var(--color-grey-20);
  width: var(--sidebar-width);
}

/* Sidebar Collapsed State */
body.sidebar-collapse .sidebar-container {
  width: var(--sidebar-collapsed-width);
}

body.sidebar-collapse .sidebar-margin-left {
  margin-left: 0;
}

/* Main Content Margin */
.sidebar-margin-left {
  margin-left: var(--sidebar-width);
  transition: margin-left var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
}

/* Sidebar Responsiveness */
@media (max-width: 768px) {
  .sidebar-container {
    width: 0;
  }
  
  .sidebar-container.open {
    width: var(--sidebar-width);
  }
  
  .sidebar-margin-left {
    margin-left: 0;
  }
  
  body.sidebar-mobile-open .sidebar-container {
    width: var(--sidebar-width);
  }
}

/* ===== Component Styling ===== */

/* Grid styling for compatibility with Tailwind */
.e-grid {
  font-family: var(--font-family-sans);
  border-radius: var(--border-radius-m);
  overflow: hidden;
}

.e-grid .e-gridheader {
  background-color: var(--color-grey-20);
  color: var(--color-grey-90);
}

.e-grid .e-row {
  border-bottom: 1px solid var(--color-grey-20);
}

.e-grid .e-altrow {
  background-color: var(--color-grey-10);
}

.e-grid .e-headercell {
  background-color: var(--color-grey-20);
  color: var(--color-grey-90);
  font-weight: 600;
  padding: 10px;
}

.e-grid .e-rowcell {
  padding: 10px;
}

/* Toast styling */
.e-toast-container {
  z-index: 9999;
}

.e-toast-container .e-toast {
  border-radius: var(--border-radius-m);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Card and button styles */
.card {
  background-color: var(--color-white-100);
  border-radius: var(--border-radius-m);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.btn-primary {
  background-color: var(--color-primary-50);
  color: var(--color-white-100);
  border-radius: var(--border-radius-s);
  padding: 0.5rem 1rem;
  transition: background-color 0.2s ease;
}

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

/* Modal styles */
.modal-content {
  border-radius: var(--border-radius-m);
  overflow: hidden;
}

/* ===== Switzerland Travel Centre Theme ===== */

/* Custom scroll styling for sidebar */
.sidebar-container .overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

.sidebar-container .overflow-y-auto::-webkit-scrollbar {
  width: 5px;
}

.sidebar-container .overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-container .overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}

/* Sidebar Toggle Button Styling */
[data-widget="pushmenu"] {
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

[data-widget="pushmenu"]:hover {
  background-color: var(--color-grey-10);
}

/* Sidebar menu items */
.sidebar-container nav ul li a {
  position: relative;
  font-weight: 400;
  border-radius: 6px;
  text-decoration: none;
}

/* Hover state for sidebar links - optional underline */
.sidebar-container nav ul li a:hover {
  text-decoration: none;
}

/* Active menu item styling */
.sidebar-container nav ul li a.active,
.sidebar-container nav ul li a.bg-grey-10 {
  position: relative;
  font-weight: 500;
}

/* Sidebar menu item icons */
.sidebar-container nav ul li a i {
  font-size: 1.1rem;
}

/* Dropdown menu support */
.sidebar-container .submenu {
  transition: max-height 0.3s ease;
}

.sidebar-container .menu-open .dropdown-toggle .fa-chevron-down {
  transform: rotate(180deg);
}

/* Enhanced focus styles */
.sidebar-container nav ul li a:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-grey-20);
}

/* Active indicator */
.sidebar-container nav ul li a.active,
.sidebar-container nav ul li a.text-primary-50 {
  border-left: 3px solid var(--color-secondary-50);
}

/* Dashboard cards */
.dashboard-stat-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-m);
  background-color: var(--color-white-100);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.dashboard-stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: var(--color-secondary-50);
}

/* Icon colors */
.sidebar-container .fa-tachometer-alt,
.sidebar-container .fa-chart-line {
  color: var(--color-info-60);
}

.sidebar-container .fa-shopping-bag,
.sidebar-container .fa-box {
  color: var(--color-secondary-60);
}

.sidebar-container .fa-puzzle-piece {
  color: var(--color-tertiary-60);
}

.sidebar-container .fa-users {
  color: var(--color-success-60);
}

.sidebar-container .fa-globe,
.sidebar-container .fa-paper-plane {
  color: var(--color-primary-50);
}

.sidebar-container .fa-question-circle {
  color: var(--color-info-50);
}

.sidebar-container .fa-cogs {
  color: var(--color-grey-70);
}

.sidebar-container .fa-folder-open {
  color: var(--color-grey-60);
}

/* Ensure sidebar links never have underlines by default */
body .sidebar-container nav ul li a,
html .sidebar-container nav ul li a {
  text-decoration: none !important;
}

/* Loading overlay - migrated from site.css */
.loading-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

/* ===== Dynamic Price Table Grid Overrides ===== */
.dynamic-grid-container .e-grid .e-headercell,
.dynamic-grid-container .e-grid .e-rowcell {
  /* Reduce horizontal padding to fit more columns */
  padding-left: 6px !important;
  padding-right: 6px !important;
  white-space: nowrap; /* Prevent text wrapping */
}

/* Enable horizontal scrolling when the table has many columns */
.dynamic-grid-container .e-grid .e-content {
  overflow-x: auto !important;
}

/* Constrain wide price tables on narrow screens */
.dynamic-grid-container {
  overflow-x: auto; /* Allow the whole grid to scroll instead of the page */
}

/* Sync header scroll bar with body when needed */
.dynamic-grid-container .e-gridheader .e-headercontent {
  overflow-x: auto !important; /* Make header horizontally scrollable together with body */
}

/* Hide header scroll bar visually but keep functionality */
.dynamic-grid-container .e-gridheader .e-headercontent::-webkit-scrollbar {
  height: 0; /* Chrome/Safari */
}
.dynamic-grid-container .e-gridheader .e-headercontent {
  scrollbar-width: none; /* Firefox */
}

/* Prevent page-level horizontal scroll; grid sections handle their own scrolling */
html, body {
  overflow-x: hidden !important; /* Force-hide any sideway scroll on the entire page */
}

/* Ensure dynamic grid never exceeds viewport width */
.dynamic-grid-container, .dynamic-grid-container .e-grid {
  max-width: 100%;
}

/* Compact padding for inline-edit inputs inside price table cells */
.dynamic-grid-container .e-rowcell input.e-input {
  padding-inline-start: 4px !important;
  padding-inline-end: 4px !important;
}

/* Ensure compact, fully visible numbers inside editable cells */
.dynamic-grid-container .e-rowcell input.e-input.e-defaultcell {
  height: 32px !important;
  padding: 2px 4px !important;
  font-size: 0.75rem !important; /* 12px */
  line-height: 1 !important;
  text-overflow: clip !important;
  overflow: visible !important;
  border-width: 1px !important; /* thinner border for more space */
}

/* Reduce padding in cells while editing to maximise usable width */
.dynamic-grid-container .e-inline-edit .e-rowcell {
  padding: 2px !important;
}

/* Center the numeric text inside inputs for better visibility */
.dynamic-grid-container .e-rowcell input.e-input {
  text-align: center !important;
}

/* Remove default 40px right padding applied by generic input-group rule inside grids */
.dynamic-grid-container .e-input-group input.e-input {
  padding-right: 4px !important;
}