// =====================================================================
// Sufee Admin Dashboard — entry stylesheet
// =====================================================================
// 1. Theme tokens (SCSS vars + custom CSS properties) live in variables.scss
// 2. Bootstrap is compiled from source so theme overrides actually apply.
//    Do NOT also import bootstrap/dist/css/bootstrap.min.css from JS — its
//    compiled defaults would override the customised values here.
// 3. Component styling lives in styles/components/*.scss.

// ---------- Local fonts ----------
@import 'fonts/open-sans';

// ---------- Theme tokens (must precede Bootstrap) ----------
@import 'variables';

// ---------- Bootstrap 5 source ----------
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/variables-dark';
@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/utilities';

@import 'bootstrap/scss/root';
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/type';
@import 'bootstrap/scss/images';
@import 'bootstrap/scss/containers';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/tables';
@import 'bootstrap/scss/forms';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/transitions';
@import 'bootstrap/scss/dropdown';
@import 'bootstrap/scss/button-group';
@import 'bootstrap/scss/nav';
@import 'bootstrap/scss/navbar';
@import 'bootstrap/scss/card';
@import 'bootstrap/scss/accordion';
@import 'bootstrap/scss/breadcrumb';
@import 'bootstrap/scss/pagination';
@import 'bootstrap/scss/badge';
@import 'bootstrap/scss/alert';
@import 'bootstrap/scss/progress';
@import 'bootstrap/scss/list-group';
@import 'bootstrap/scss/close';
@import 'bootstrap/scss/toasts';
@import 'bootstrap/scss/modal';
@import 'bootstrap/scss/tooltip';
@import 'bootstrap/scss/popover';
@import 'bootstrap/scss/carousel';
@import 'bootstrap/scss/spinners';
@import 'bootstrap/scss/offcanvas';
@import 'bootstrap/scss/placeholders';
@import 'bootstrap/scss/helpers';
@import 'bootstrap/scss/utilities/api';

// ---------- Dark mode (must come AFTER Bootstrap so we override its defaults)
@import 'dark-theme';

// ---------- Layout shell ----------
body {
  font-family: 'Open Sans', sans-serif;
  background-color: var(--content-bg);
}

.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  background-color: var(--content-bg);
  transition: margin-left 0.3s ease;
  flex: 1;
  overflow-y: auto;
}

.content-area {
  background-color: var(--content-bg);
  min-height: calc(100vh - 120px);
}

// Charts shouldn't blow out their container
canvas {
  max-width: 100%;
  height: auto;
}

// Sidebar scrollbar
.sidebar-nav {
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }
}

// ---------- Component partials ----------
@import 'components/sidebar';
@import 'components/header';
@import 'components/buttons';
@import 'components/cards';
@import 'components/forms';
@import 'components/tables';
@import 'components/charts';
@import 'components/widgets';
@import 'components/auth';
@import 'components/error-page';
@import 'components/leaflet-overrides';