/* Sneat Core - Bootstrap 5 base */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');

/* ===== CSS VARIABLES (default: light + purple) ===== */
:root {
  --primary:          #696cff;
  --primary-rgb:      105, 108, 255;
  --primary-hover:    #5f61e6;
  --primary-light:    rgba(105,108,255,.12);
  --primary-lighter:  rgba(105,108,255,.08);

  --body-bg:          #f5f5f9;
  --body-color:       #566a7f;
  --card-bg:          #ffffff;
  --card-shadow:      0 2px 6px rgba(0,0,0,.06);
  --card-border:      rgba(0,0,0,.06);

  --sidebar-bg:       #ffffff;
  --sidebar-border:   #e7e7e8;
  --sidebar-text:     #566a7f;
  --sidebar-header:   #a5acb8;

  --navbar-bg:        rgba(245,245,249,.9);
  --navbar-border:    rgba(0,0,0,.07);

  --footer-bg:        #ffffff;
  --footer-border:    rgba(0,0,0,.07);

  --menu-active-bg:   rgba(105,108,255,.12);
  --menu-hover-bg:    rgba(105,108,255,.08);
  --menu-active-color:#696cff;

  --input-bg:         #ffffff;
  --input-border:     #d9dee3;
  --input-color:      #566a7f;

  --table-stripe-bg:  rgba(0,0,0,.015);
  --table-border:     rgba(0,0,0,.07);
  --table-hover-bg:   rgba(105,108,255,.04);

  --border-color:     rgba(0,0,0,.07);
  --text-muted:       #a1acb8;
  --scrollbar-thumb: #c0c8d5;

  --bs-primary:       #696cff;
  --bs-primary-rgb:   105, 108, 255;
  --bs-body-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-border-radius: 0.375rem;
}

/* ===== DARK MODE ===== */
.dark-style {
  --body-bg:          #25293c;
  --body-color:       #cfd3ec;
  --card-bg:          #2f3349;
  --card-shadow:      0 2px 10px rgba(0,0,0,.3);
  --card-border:      rgba(255,255,255,.06);

  --sidebar-bg:       #2b2c40;
  --sidebar-border:   rgba(255,255,255,.1);
  --sidebar-text:     #cfd3ec;
  --sidebar-header:   #7983bb;

  --navbar-bg:        rgba(37,41,60,.95);
  --navbar-border:    rgba(255,255,255,.08);

  --footer-bg:        #2b2c40;
  --footer-border:    rgba(255,255,255,.08);

  --menu-active-bg:   rgba(var(--primary-rgb),.16);
  --menu-hover-bg:    rgba(var(--primary-rgb),.1);

  --input-bg:         #2f3349;
  --input-border:     rgba(255,255,255,.15);
  --input-color:      #cfd3ec;

  --table-stripe-bg:  rgba(255,255,255,.02);
  --table-border:     rgba(255,255,255,.08);
  --table-hover-bg:   rgba(var(--primary-rgb),.06);

  --border-color:     rgba(255,255,255,.08);
  --text-muted:       #7983bb;
  --scrollbar-thumb: #4a5173;
}

/* ===== BASE STYLES ===== */
body {
  font-family: var(--bs-body-font-family);
  background-color: var(--body-bg);
  color: var(--body-color);
  font-size: 0.9375rem;
  transition: background-color .3s ease, color .3s ease;
}

a { color: var(--primary); }

/* ===== LAYOUT ===== */
.layout-wrapper  { min-height: 100vh; }
.layout-container{ display: flex; min-height: 100vh; }

.layout-menu {
  width: 260px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  z-index: 1000;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
  overflow: hidden;
}

.layout-page {
  flex: 1;
  margin-left: 260px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout-navbar {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--navbar-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--navbar-border);
  padding: .75rem 1.5rem;
  min-height: 64px;
  transition: background .3s ease;
}

.content-wrapper { flex: 1; display: flex; flex-direction: column; }
.container-p-y   { padding: 1.5rem; }

.content-footer {
  padding: .75rem 1.5rem;
  border-top: 1px solid var(--footer-border);
  background: var(--footer-bg);
  color: var(--body-color);
  transition: background .3s ease;
}

/* ===== APP BRAND ===== */
.app-brand {
  display: flex;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--sidebar-border);
}
.app-brand-link  { display: flex; align-items: center; text-decoration: none; }
.app-brand-text  { font-size: 1.2rem; font-weight: 700; color: var(--sidebar-text); letter-spacing: -.5px; }

/* ===== MENU ===== */
.menu-inner   { overflow-y: auto; flex: 1; padding: 0.5rem 0; }
.menu-item    { list-style: none; }
.menu-header  { padding: 0.5rem 1.5rem; margin-top: 0.75rem; }
.menu-header-text { font-size: 0.6875rem; font-weight: 600; letter-spacing: .4px; color: var(--sidebar-header); text-transform: uppercase; }

.menu-link {
  display: flex;
  align-items: center;
  padding: 0.625rem 1.5rem;
  color: var(--sidebar-text);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  font-size: .9375rem;
}
.menu-link:hover             { background: var(--menu-hover-bg); color: var(--primary); }
.menu-item.active > .menu-link { background: var(--menu-active-bg); color: var(--primary); font-weight: 600; }
.menu-icon { font-size: 1.25rem; margin-right: .75rem; color: inherit; width: 22px; text-align: center; }

/* Submenu */
.menu-sub { list-style: none; padding: 0; display: none; }
.menu-item.open > .menu-sub   { display: block; }
.menu-sub .menu-link          { padding-left: 3.5rem; font-size: .875rem; }
.menu-toggle::after           { content: ''; margin-left: auto; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid var(--sidebar-header); transition: transform .2s; }
.menu-item.open > .menu-toggle::after { transform: rotate(180deg); }

/* ===== CARDS ===== */
.card {
  border: none;
  box-shadow: var(--card-shadow);
  border-radius: 0.5rem;
  background-color: var(--card-bg);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.card-header { padding: 1rem 1.5rem; background: transparent; border-bottom: 1px solid var(--card-border); color: var(--body-color); }
.card-body   { padding: 1.5rem; }
.card-footer { padding: .75rem 1.5rem; background: transparent; border-top: 1px solid var(--card-border); }

/* ===== BUTTONS ===== */
.btn-primary             { background-color: var(--primary); border-color: var(--primary); }
.btn-primary:hover       { background-color: var(--primary-hover); border-color: var(--primary-hover); }
.btn-outline-primary     { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: #fff; }
.btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ===== BADGES ===== */
.bg-label-primary   { background: rgba(var(--primary-rgb),.16) !important; color: var(--primary) !important; }
.bg-label-success   { background: rgba(113,221,55,.16)  !important; color: #71aa27 !important; }
.bg-label-warning   { background: rgba(255,171,0,.16)   !important; color: #cc8800 !important; }
.bg-label-danger    { background: rgba(255,62,29,.16)   !important; color: #ff3e1d !important; }
.bg-label-info      { background: rgba(3,195,236,.16)   !important; color: #019ab5 !important; }
.bg-label-secondary { background: rgba(133,146,163,.16) !important; color: #8592a3 !important; }

/* ===== AVATAR ===== */
.avatar         { display: inline-flex; align-items: center; justify-content: center; }
.avatar-initial { display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .875rem; background-color: var(--primary); color: #fff; }
.avatar-online  { position: relative; }
.avatar-online::after { content: ''; position: absolute; bottom: 2px; right: 2px; width: 8px; height: 8px; background: #71dd37; border-radius: 50%; border: 2px solid var(--card-bg); }
.avatar-xl .avatar-initial { width: 80px; height: 80px; font-size: 2rem; }

/* ===== TABLES ===== */
.table > :not(caption) > * > * { padding: .75rem 1rem; color: var(--body-color); background-color: transparent; border-color: var(--table-border); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--table-stripe-bg); }
.table-hover   > tbody > tr:hover > *            { background-color: var(--table-hover-bg); }
.dark-style .table { --bs-table-bg: transparent; --bs-table-border-color: var(--table-border); }

/* ===== FORMS ===== */
.form-control, .form-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-color);
  transition: background-color .3s, border-color .3s, color .3s;
}
.form-control:focus, .form-select:focus {
  background-color: var(--input-bg);
  border-color: var(--primary);
  color: var(--input-color);
  box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb),.25);
}
.form-control::placeholder { color: var(--text-muted); }
.dark-style .form-control, .dark-style .form-select { color-scheme: dark; }
.input-group-text {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--body-color);
}

/* ===== DROPDOWN ===== */
.dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  box-shadow: var(--card-shadow);
}
.dropdown-item { color: var(--body-color); }
.dropdown-item:hover { background-color: var(--menu-hover-bg); color: var(--primary); }
.dropdown-divider { border-color: var(--border-color); }

/* ===== MODAL ===== */
.dark-style .modal-content { background-color: var(--card-bg); color: var(--body-color); border-color: var(--border-color); }
.dark-style .modal-header  { border-bottom-color: var(--border-color); }
.dark-style .modal-footer  { border-top-color:    var(--border-color); }
.dark-style .btn-close     { filter: invert(1); }

/* ===== PAGINATION ===== */
.page-link { color: var(--primary); background-color: var(--card-bg); border-color: var(--border-color); }
.page-link:hover { color: var(--primary-hover); background-color: var(--primary-lighter); }
.page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); }
.dark-style .page-link { color: var(--primary); }

/* ===== NAVBAR UTILS ===== */
.navbar-nav-right { width: 100%; }
.dropdown-user    { position: relative; }

/* ===== OVERLAY ===== */
.layout-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
  display: none;
}

/* ===== TEXT UTILS ===== */
.text-muted { color: var(--text-muted) !important; }
.dark-style h1, .dark-style h2, .dark-style h3,
.dark-style h4, .dark-style h5, .dark-style h6 { color: #e7e7ff; }
.dark-style .fw-semibold, .dark-style .fw-bold  { color: inherit; }
.dark-style small { color: var(--text-muted); }

/* ===== ALERT ===== */
.dark-style .alert { border-color: var(--border-color); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
  .layout-menu          { transform: translateX(-100%); }
  .layout-menu.show     { transform: translateX(0); }
  .layout-page          { margin-left: 0; }
  .layout-overlay.show  { display: block; }
}