/* ============================================================
   Trivoxa — Global Stylesheet
   Bootstrap 5 + custom layer
   ============================================================ */

/* ------------------------------------------------------------
   1. Google Fonts
   ------------------------------------------------------------ */
@import url('../vendor/fonts/inter/inter.css');

/* ------------------------------------------------------------
   2. CSS Custom Properties (Light theme)
   ------------------------------------------------------------ */
:root {
  --jit-primary:        #4361ee;
  --jit-primary-soft:   #eef0fd;
  --jit-secondary:      #7b8ab8;
  --jit-success:        #2ec4b6;
  --jit-warning:        #ff9f1c;
  --jit-danger:         #e71d36;
  --jit-info:           #3a86ff;

  --jit-sidebar-width:        260px;
  --jit-sidebar-collapsed-w:  72px;
  --jit-topbar-height:        60px;

  --jit-sidebar-bg:     #1a1f2e;
  --jit-sidebar-text:   #a8b0c8;
  --jit-sidebar-active: #ffffff;
  --jit-sidebar-hover:  rgba(255,255,255,.06);
  --jit-sidebar-accent: var(--jit-primary);

  --jit-body-bg:        #f0f2f8;
  --jit-card-bg:        #ffffff;
  --jit-card-border:    #e8ebf4;
  --jit-topbar-bg:      #ffffff;
  --jit-topbar-border:  #e8ebf4;
  --jit-text-main:      #1a1f2e;
  --jit-text-muted:     #7b8ab8;
  --jit-shadow-sm:      0 1px 4px rgba(26,31,46,.08);
  --jit-shadow:         0 4px 16px rgba(26,31,46,.10);

  --bs-primary:         var(--jit-primary);
  --bs-font-sans-serif: 'Inter', system-ui, sans-serif;
  --bs-body-font-size:  0.875rem;
}

/* ------------------------------------------------------------
   3. Dark theme overrides
   ------------------------------------------------------------ */
[data-bs-theme="dark"] {
  --jit-body-bg:        #111827;
  --jit-card-bg:        #1e2535;
  --jit-card-border:    #2a3347;
  --jit-topbar-bg:      #1e2535;
  --jit-topbar-border:  #2a3347;
  --jit-text-main:      #e2e8f4;
  --jit-text-muted:     #7b8ab8;
  --jit-primary-soft:   rgba(67,97,238,.18);
  --jit-shadow-sm:      0 1px 4px rgba(0,0,0,.3);
  --jit-shadow:         0 4px 16px rgba(0,0,0,.4);
}

/* ------------------------------------------------------------
   4. Base reset / body
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--bs-font-sans-serif);
  font-size:   var(--bs-body-font-size);
  background:  var(--jit-body-bg);
  color:       var(--jit-text-main);
  line-height: 1.6;
  overflow-x:  hidden;
  transition:  background .25s ease, color .25s ease;
}

a { color: var(--jit-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   5. Layout — Sidebar
   ------------------------------------------------------------ */
.sidebar {
  position:   fixed;
  top:        0;
  left:       0;
  height:     100vh;
  width:      var(--jit-sidebar-width);
  background: var(--jit-sidebar-bg);
  display:    flex;
  flex-direction: column;
  z-index:    1040;
  transition: width .25s ease;
  overflow:   hidden;
}

.sidebar.collapsed {
  width: var(--jit-sidebar-collapsed-w);
}

/* Brand */
.sidebar-brand {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  padding:     1.125rem 1.25rem;
  min-height:  var(--jit-topbar-height);
  border-bottom: 1px solid rgba(255,255,255,.06);
  white-space: nowrap;
  overflow:    hidden;
}

.sidebar-brand img {
  width:  36px;
  height: 36px;
  flex-shrink: 0;
}

.sidebar-brand-name {
  font-size:   1rem;
  font-weight: 700;
  color:       #fff;
  letter-spacing: .01em;
  transition:  opacity .2s ease;
}

.sidebar.collapsed .sidebar-brand-name { opacity: 0; pointer-events: none; }

/* Nav */
.sidebar-nav {
  flex:       1;
  overflow-y: auto;
  overflow-x: hidden;
  padding:    .75rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.sidebar-heading {
  font-size:      .65rem;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.35);
  padding:        1rem 1.25rem .35rem;
  white-space:    nowrap;
  overflow:       hidden;
  transition:     opacity .2s ease;
}

.sidebar.collapsed .sidebar-heading { opacity: 0; }

.sidebar-link {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  padding:     .625rem 1.25rem;
  color:       var(--jit-sidebar-text);
  border-radius: 0;
  white-space: nowrap;
  overflow:    hidden;
  transition:  background .15s ease, color .15s ease;
  position:    relative;
  cursor:      pointer;
  border:      none;
  background:  none;
  width:       100%;
  text-align:  left;
  font-size:   .875rem;
}

.sidebar-link:hover {
  background: var(--jit-sidebar-hover);
  color:      var(--jit-sidebar-active);
  text-decoration: none;
}

.sidebar-link.active {
  color:      var(--jit-sidebar-active);
  background: var(--jit-sidebar-hover);
}

.sidebar-link.active::before {
  content:  '';
  position: absolute;
  left:     0; top: 0; bottom: 0;
  width:    3px;
  background: var(--jit-sidebar-accent);
  border-radius: 0 3px 3px 0;
}

.sidebar-link .sidebar-icon {
  font-size:  1.1rem;
  flex-shrink: 0;
  width:      22px;
  text-align: center;
}

.sidebar-link .sidebar-label {
  transition: opacity .2s ease;
}

.sidebar-link .sidebar-badge {
  margin-left: auto;
  transition:  opacity .2s ease;
}

.sidebar-link .sidebar-arrow {
  margin-left: auto;
  font-size:   .7rem;
  transition:  transform .25s ease, opacity .2s ease;
}

.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-badge,
.sidebar.collapsed .sidebar-arrow { opacity: 0; pointer-events: none; }

/* Submenu */
.sidebar-submenu {
  padding-left: 0;
  list-style:   none;
  background:   rgba(0,0,0,.15);
  overflow:     hidden;
}

.sidebar-submenu .sidebar-link {
  padding-left: 3.5rem;
  font-size:    .8125rem;
}

.sidebar.collapsed .sidebar-submenu { display: none !important; }

/* Rotate arrow when open */
.sidebar-link[aria-expanded="true"] .sidebar-arrow {
  transform: rotate(90deg);
}

/* User widget at bottom */
.sidebar-user {
  padding:       .75rem 1.25rem;
  border-top:    1px solid rgba(255,255,255,.06);
  display:       flex;
  align-items:   center;
  gap:           .75rem;
  overflow:      hidden;
  white-space:   nowrap;
}

.sidebar-user img {
  width:        36px;
  height:       36px;
  border-radius: 50%;
  flex-shrink:  0;
}

.sidebar-user-info { transition: opacity .2s ease; }
.sidebar.collapsed .sidebar-user-info { opacity: 0; }

.sidebar-user-name  { font-size: .8125rem; font-weight: 600; color: #fff; }
.sidebar-user-role  { font-size: .7rem; color: var(--jit-sidebar-text); }

/* ------------------------------------------------------------
   6. Layout — Main wrapper
   ------------------------------------------------------------ */
.main-wrapper {
  margin-left:  var(--jit-sidebar-width);
  min-height:   100vh;
  display:      flex;
  flex-direction: column;
  transition:   margin-left .25s ease;
}

.sidebar.collapsed ~ .main-wrapper {
  margin-left: var(--jit-sidebar-collapsed-w);
}

/* ------------------------------------------------------------
   7. Layout — Topbar
   ------------------------------------------------------------ */
.topbar {
  position:   sticky;
  top:        0;
  z-index:    1030;
  height:     var(--jit-topbar-height);
  background: var(--jit-topbar-bg);
  border-bottom: 1px solid var(--jit-topbar-border);
  display:    flex;
  align-items: center;
  padding:    0 1.5rem;
  gap:        1rem;
  box-shadow: var(--jit-shadow-sm);
  transition: background .25s ease, border-color .25s ease;
}

.topbar-toggle {
  background: none;
  border:     none;
  color:      var(--jit-text-muted);
  font-size:  1.25rem;
  padding:    .25rem .5rem;
  cursor:     pointer;
  border-radius: .375rem;
  line-height: 1;
  transition: color .15s ease, background .15s ease;
}

.topbar-toggle:hover { background: var(--jit-primary-soft); color: var(--jit-primary); }

.topbar-search {
  flex: 1;
  max-width: 340px;
  position:  relative;
}

.topbar-search input {
  padding-left: 2.25rem;
  background:   var(--jit-body-bg);
  border-color: var(--jit-card-border);
  font-size:    .8125rem;
  color:        var(--jit-text-main);
  transition:   background .25s ease, border-color .15s ease;
}

.topbar-search input:focus { background: var(--jit-card-bg); }

.topbar-search .search-icon {
  position:  absolute;
  left:      .75rem;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--jit-text-muted);
  font-size: .875rem;
  pointer-events: none;
}

.topbar-actions {
  display:     flex;
  align-items: center;
  gap:         .25rem;
  margin-left: auto;
}

.topbar-btn {
  background:    none;
  border:        none;
  color:         var(--jit-text-muted);
  font-size:     1.1rem;
  width:         38px;
  height:        38px;
  border-radius: .5rem;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  position:      relative;
  transition:    background .15s ease, color .15s ease;
}

.topbar-btn:hover { background: var(--jit-primary-soft); color: var(--jit-primary); }

.topbar-badge {
  position:      absolute;
  top:           5px; right: 5px;
  width:         8px; height: 8px;
  background:    var(--jit-danger);
  border-radius: 50%;
  border:        2px solid var(--jit-topbar-bg);
}

/* ------------------------------------------------------------
   8. Content area
   ------------------------------------------------------------ */
.content-area {
  flex:    1;
  padding: 1.5rem;
}

.page-title {
  font-size:   1.25rem;
  font-weight: 600;
  color:       var(--jit-text-main);
  margin-bottom: .25rem;
}

/* ------------------------------------------------------------
   9. Cards
   ------------------------------------------------------------ */
.card {
  background:    var(--jit-card-bg);
  border:        1px solid var(--jit-card-border);
  border-radius: .75rem;
  box-shadow:    var(--jit-shadow-sm);
  transition:    background .25s ease, border-color .25s ease;
}

.card-header {
  background:    transparent;
  border-bottom: 1px solid var(--jit-card-border);
  padding:       1rem 1.25rem;
  font-weight:   600;
  font-size:     .9375rem;
}

.card-body { padding: 1.25rem; }

.card-footer {
  background:  transparent;
  border-top:  1px solid var(--jit-card-border);
  padding:     .875rem 1.25rem;
}

/* Stat / KPI card */
.stat-card {
  position:    relative;
  overflow:    hidden;
}

.stat-card .stat-icon {
  width:         48px;
  height:        48px;
  border-radius: .625rem;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.35rem;
}

.stat-card .stat-value {
  font-size:   1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.stat-card .stat-label {
  font-size: .8rem;
  color:     var(--jit-text-muted);
}

.stat-card .stat-trend {
  font-size:   .78rem;
  font-weight: 500;
}

/* ------------------------------------------------------------
   10. Bootstrap color overrides
   ------------------------------------------------------------ */
.btn-primary { background-color: var(--jit-primary); border-color: var(--jit-primary); }
.btn-primary:hover { background-color: #3451d1; border-color: #3451d1; }

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

.text-primary { color: var(--jit-primary) !important; }
.bg-primary   { background-color: var(--jit-primary) !important; }

.badge-soft-primary { background: var(--jit-primary-soft); color: var(--jit-primary); }
.badge-soft-success { background: rgba(46,196,182,.15);    color: var(--jit-success); }
.badge-soft-warning { background: rgba(255,159,28,.15);    color: var(--jit-warning); }
.badge-soft-danger  { background: rgba(231,29,54,.15);     color: var(--jit-danger); }
.badge-soft-info    { background: rgba(58,134,255,.15);    color: var(--jit-info); }

/* ------------------------------------------------------------
   11. Tables
   ------------------------------------------------------------ */
.table {
  color:        var(--jit-text-main);
  border-color: var(--jit-card-border);
  font-size:    .875rem;
}

.table th {
  font-weight:    600;
  font-size:      .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--jit-text-muted);
  border-bottom-width: 1px;
}

.table > :not(caption) > * > * {
  background-color: transparent;
  padding:          .75rem 1rem;
}

/* ------------------------------------------------------------
   12. Forms
   ------------------------------------------------------------ */
.form-control, .form-select {
  background-color: var(--jit-card-bg);
  border-color:     var(--jit-card-border);
  color:            var(--jit-text-main);
  font-size:        .875rem;
  transition:       border-color .15s ease, box-shadow .15s ease, background .25s ease;
}

.form-control:focus, .form-select:focus {
  border-color: var(--jit-primary);
  box-shadow:   0 0 0 .2rem rgba(67,97,238,.2);
  background:   var(--jit-card-bg);
  color:        var(--jit-text-main);
}

.form-label {
  font-size:   .8125rem;
  font-weight: 500;
  color:       var(--jit-text-main);
}

/* ------------------------------------------------------------
   13. Utility helpers
   ------------------------------------------------------------ */
.bg-primary-soft { background: var(--jit-primary-soft) !important; }

.avatar {
  border-radius: 50%;
  object-fit:    cover;
  flex-shrink:   0;
}

.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 40px; height: 40px; }
.avatar-lg { width: 56px; height: 56px; }
.avatar-xl { width: 80px; height: 80px; }

.avatar-initial {
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   50%;
  font-weight:     600;
  letter-spacing:  .02em;
  flex-shrink:     0;
}

.divider-text {
  display:    flex;
  align-items: center;
  gap:        .75rem;
  color:      var(--jit-text-muted);
  font-size:  .8125rem;
}

.divider-text::before,
.divider-text::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--jit-card-border);
}

/* ------------------------------------------------------------
   14. Scrollbar global
   ------------------------------------------------------------ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--jit-card-border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--jit-text-muted); }

/* ------------------------------------------------------------
   15. Responsive
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .sidebar {
    left:       calc(-1 * var(--jit-sidebar-width));
    transition: left .25s ease, width .25s ease;
    width:      var(--jit-sidebar-width) !important;
  }

  .sidebar.mobile-open { left: 0; }

  .main-wrapper {
    margin-left: 0 !important;
  }

  .sidebar-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.45);
    z-index:    1039;
  }

  .sidebar-overlay.active { display: block; }
}

@media (max-width: 575.98px) {
  .content-area { padding: 1rem; }
  .topbar { padding: 0 1rem; }
  .topbar-search { display: none; }
}

/* ------------------------------------------------------------
   16. Page transitions / loading bar
   ------------------------------------------------------------ */
.page-loader {
  position:   fixed;
  top:        0; left: 0;
  height:     3px;
  width:      0;
  background: var(--jit-primary);
  z-index:    9999;
  transition: width .3s ease;
}

/* ------------------------------------------------------------
   17. Auth pages
   ------------------------------------------------------------ */
.auth-wrapper {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--jit-body-bg);
  padding:         2rem 1rem;
}

.auth-card {
  width:      100%;
  max-width:  440px;
  background: var(--jit-card-bg);
  border:     1px solid var(--jit-card-border);
  border-radius: 1rem;
  box-shadow: var(--jit-shadow);
  padding:    2.5rem;
}

.auth-logo {
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   2rem;
  gap:             .625rem;
}

.auth-logo img { width: 40px; height: 40px; }

.auth-logo-text {
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--jit-text-main);
}

/* ------------------------------------------------------------
   18. Footer
   ------------------------------------------------------------ */
.app-footer {
  padding:     1rem 1.5rem;
  background:  var(--jit-card-bg);
  border-top:  1px solid var(--jit-card-border);
  font-size:   .8125rem;
  color:       var(--jit-text-muted);
  transition:  background .25s ease, border-color .25s ease;
}
.app-footer a {
  color: var(--jit-text-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.app-footer a:hover {
  color: var(--jit-primary);
}