/* SolAgilis design system theme */

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

/* ── Component imports ──────────────────────────────────────────────── */
@import "components/header.css";
@import "components/title.css";
@import "components/footer.css";
@import "components/sidebar.css";
@import "elements/portlet.css";
@import "elements/card.css";
@import "elements/table.css";
@import "elements/dropdown.css";
@import "elements/section.css";
@import "elements/container.css";
@import "elements/modal.css";
@import "elements/select.css";
@import "elements/callout.css";
@import "utilities/fonts.css";
@import "utilities/animation.css";
@import "utilities/columns.css";

/* ── Design tokens ──────────────────────────────────────────────────── */
:root {
  --ev-ink-100:   #0E1B2B;
  --ev-ink-32:    rgba(14, 27, 43, 0.32);
  --ev-ink-08:    rgba(14, 27, 43, 0.08);

  --ev-amber-300: #F5BC52;
  --ev-amber-400: #F2A516;
  --ev-amber-500: #D9940E;
  --ev-amber-600: #B87B0C;
  --ev-amber-50:  #FEF9EC;

  --ev-bg-canvas: #FAF8F3;
  --ev-bg-sunken: #F0EDE6;

  --ev-fg-1: #0E1B2B;
  --ev-fg-2: #4A5568;
  --ev-fg-3: #9CA3AF;

  --ev-border:        #E5E1D8;
  --ev-border-strong: #C9C3B6;

  --ev-dur:  140ms;
  --ev-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Bootstrap overrides */
  --bs-primary:          #F2A516;
  --bs-primary-rgb:      242, 165, 22;
  --bs-link-color:       #D9940E;
  --bs-link-hover-color: #B87B0C;
  --bs-border-color:     #E5E1D8;
}

/* ── Base ───────────────────────────────────────────────────────────── */
html, body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Main content ───────────────────────────────────────────────────── */
.main {
  background-color: var(--ev-bg-canvas);
  --pulsate-color: var(--ev-amber-400);
}

/* ── Navbar ─────────────────────────────────────────────────────────── */
.navbar {
  background-color: #fff;
  border-bottom: 1px solid var(--ev-border);
}

.navbar .navbar-brand {
  color: var(--ev-fg-1) !important;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.navbar .nav-link,
.navbar-light a {
  color: var(--ev-fg-2) !important;
  font-weight: 500;
  font-size: 13px;
  transition: color var(--ev-dur) var(--ev-ease);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--ev-amber-500) !important;
}

.navbar-dark {
  background-color: var(--ev-ink-100);
  border-bottom: 0;
}

.navbar-dark .navbar-brand { color: #FAF8F3 !important; }

.navbar-dark .nav-link {
  color: rgba(250,248,243,0.65) !important;
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link.active {
  color: var(--ev-amber-300) !important;
}

/* ── Offcanvas / sidebar ────────────────────────────────────────────── */
.offcanvas-start {
  width: 240px !important;
  background-color: var(--ev-ink-100) !important;
  border-right: none !important;
}

.offcanvas.bg-light { background-color: var(--ev-ink-100) !important; }

.offcanvas .navbar { background-color: transparent !important; border-bottom: 1px solid var(--ev-ink-08); }
.offcanvas .navbar-brand { color: #FAF8F3 !important; }

.sidebar { background-color: transparent; border: 0; }

.sidebar-link,
.sidebar-btn-toggle {
  color: rgba(250,248,243,0.65) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: 8px;
  padding: 8px 10px !important;
  margin-top: 2px !important;
  transition: background var(--ev-dur) var(--ev-ease), color var(--ev-dur) var(--ev-ease) !important;
}

.sidebar-link:hover,
.sidebar-link:focus,
.sidebar-btn-toggle:hover,
.sidebar-btn-toggle:focus {
  background: rgba(250,248,243,0.06) !important;
  color: #FAF8F3 !important;
}

.sidebar-btn-toggle[aria-expanded="true"] {
  background: rgba(250,248,243,0.04) !important;
  color: #FAF8F3 !important;
}

.sidebar-btn-toggle-nav a {
  color: rgba(250,248,243,0.55) !important;
  font-size: 13px !important;
  border-radius: 8px;
  padding: 6px 10px 6px 28px !important;
  margin: 1px 0 !important;
  transition: background var(--ev-dur) var(--ev-ease), color var(--ev-dur) var(--ev-ease);
}

.sidebar-btn-toggle-nav a:hover,
.sidebar-btn-toggle-nav a:focus {
  background: rgba(250,248,243,0.06) !important;
  color: #FAF8F3 !important;
}

.link-dark       { color: rgba(250,248,243,0.55) !important; }
.link-dark:hover { color: #FAF8F3 !important; }

.sidebar .dropdown-header {
  color: rgba(250,248,243,0.35) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.offcanvas hr,
.sidebar hr,
.sidebar .dropdown-divider,
.offcanvas .dropdown-divider {
  border-color: rgba(250,248,243,0.08) !important;
  opacity: 1 !important;
}

.offcanvas .nav-link {
  color: rgba(250,248,243,0.65) !important;
  border-radius: 8px;
  transition: background var(--ev-dur) var(--ev-ease), color var(--ev-dur) var(--ev-ease);
}

.offcanvas .nav-link:hover {
  background: rgba(250,248,243,0.06);
  color: #FAF8F3 !important;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg:                  var(--ev-amber-400);
  --bs-btn-border-color:        var(--ev-amber-400);
  --bs-btn-hover-bg:            var(--ev-amber-500);
  --bs-btn-hover-border-color:  var(--ev-amber-500);
  --bs-btn-active-bg:           var(--ev-amber-500);
  --bs-btn-active-border-color: var(--ev-amber-500);
  --bs-btn-focus-shadow-rgb:    242, 165, 22;
  color: #fff;
}

.btn-outline-primary {
  --bs-btn-color:              var(--ev-amber-500);
  --bs-btn-border-color:       var(--ev-amber-400);
  --bs-btn-hover-bg:           var(--ev-amber-400);
  --bs-btn-hover-border-color: var(--ev-amber-400);
  --bs-btn-hover-color:        #fff;
  --bs-btn-active-bg:          var(--ev-amber-500);
}

/* ── Global color tokens ────────────────────────────────────────────── */
a { color: var(--ev-amber-500); }
a:hover { color: var(--ev-amber-600); }

.text-primary   { color: var(--ev-amber-400) !important; }
.bg-primary     { background-color: var(--ev-amber-400) !important; }
.border-primary { border-color: var(--ev-amber-400) !important; }

/* ── Nav pills ──────────────────────────────────────────────────────── */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--ev-amber-400);
  color: #fff;
}

/* ── Form focus ─────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--ev-amber-400);
  box-shadow: 0 0 0 0.25rem rgba(242,165,22,0.18);
}

/* ── Dropdowns ──────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--ev-border);
  box-shadow: 0 4px 16px rgba(14,27,43,0.10);
  border-radius: 10px;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--ev-bg-sunken);
  color: var(--ev-fg-1);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--ev-amber-400);
  color: #fff;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--ev-bg-sunken);
  color: var(--ev-fg-1);
}

/* ── Title ──────────────────────────────────────────────────────────── */
.title { background-color: var(--ev-bg-canvas); }
.main-dark .title { background-color: #0f1014; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--ev-border);
  font-size: 12px;
  color: var(--ev-fg-3);
}

.footer a { color: var(--ev-fg-3) !important; text-decoration: none; }
.footer a:hover { color: var(--ev-fg-2) !important; }

/* ── Dark mode ──────────────────────────────────────────────────────── */
.main-dark {
  background-color: #0f1014;
  color: #ffffff;
  --bs-btn-close-color: #FFF !important;
}

.main-dark .offcanvas { --bs-offcanvas-color: #FFF !important; }
.main-dark .text-muted { color: #999 !important; }

.main-dark .form-control,
.main-dark .form-select,
.main-dark .form-select-search {
  background-color: #0f1014;
  color: #fff;
  border-color: var(--bs-secondary);
  cursor: default;
}

.main-dark .modal-content  { background-color: var(--bs-dark); }
.main-dark .modal-header   { border-bottom: 1px solid #0f1014; }
.main-dark .btn-close      { filter: invert(1) grayscale(100%) brightness(200%); }
.main-dark .offcanvas      { background-color: var(--bs-dark); }

.main-dark .form-floating .form-label        { color: var(--bs-light) !important; }
.main-dark .form-floating .form-label::after { background-color: rgb(15,16,20); }

.main-dark .input-group-text {
  background-color: transparent;
  border-color: var(--bs-secondary) !important;
  color: var(--bs-secondary);
}

.main-dark .btn-light       { background-color: var(--bs-dark); border-color: var(--bs-dark); color: #FFF; }
.main-dark .btn-light:hover { background-color: #333; }

.main-dark .accordion-item {
  --bs-accordion-btn-bg:       transparent;
  --bs-accordion-bg:           transparent;
  --bs-accordion-color:        #FFF;
  --bs-accordion-btn-color:    #FFF;
  --bs-accordion-border-color: #FFFFFF15;
}