/*
 * Shared AdminLTE sidebar behavior styles.
 * Used by service_center and MES to keep hierarchy and state transitions aligned.
 */

.site-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.main-header.navbar {
  position: sticky;
  top: 0;
  z-index: 1035;
}

.site-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: #fff;
  background: #2d3280;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
}

.main-sidebar .site-brand-mark {
  width: 28px;
  height: 28px;
  background: #0f766e;
}

.site-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  white-space: nowrap;
}

.site-brand-text strong {
  color: #111827;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.site-brand-text small {
  font-size: 0.74rem;
  color: #64748b;
}

.main-sidebar {
  background: #1f2937;
}

.brand-link {
  padding: 0.65rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-sidebar .site-brand-text strong {
  color: #f8fafc;
}

.main-sidebar .site-brand-text small {
  color: rgba(255, 255, 255, 0.72);
}

.nav-sidebar .nav-link.active {
  background: #0f766e !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link {
  color: #e5e7eb;
  font-weight: 600;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link .nav-icon {
  color: #94a3b8;
}

.main-sidebar .nav-treeview {
  margin: 2px 0 6px 0;
  background: rgba(15, 23, 42, 0.18);
}

.main-sidebar .nav-treeview .nav-link {
  padding-left: 2.45rem;
  color: #cbd5e1;
  font-size: 0.92rem;
  font-weight: 400;
}

.main-sidebar .nav-treeview .nav-link .nav-icon {
  width: 1.15rem;
  margin-left: -0.2rem;
  color: #64748b;
  font-size: 0.76rem;
}

.main-sidebar .nav-treeview .nav-link.active {
  color: #fff !important;
  background: #0f766e !important;
  box-shadow: inset 3px 0 0 #5eead4;
}

.main-sidebar .nav-treeview .nav-link.active .nav-icon {
  color: #ccfbf1;
}

.main-sidebar .nav-treeview .nav-treeview .nav-link {
  padding-left: 3.2rem;
}

html.sidebar-state-loading.sidebar-state-collapsed body:not(.sidebar-collapse) {
  visibility: hidden;
}

body.yf-embedded .main-sidebar {
  min-height: 100vh;
}

body.yf-embedded .main-footer {
  display: none;
}

.main-header.navbar .yf-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(0, 0, 0, 0.5);
  font: inherit;
  font-weight: 400;
  padding: 0.5rem 1rem;
}

.main-header.navbar .yf-theme-toggle:hover,
.main-header.navbar .yf-theme-toggle:focus {
  background: transparent;
  color: rgba(0, 0, 0, 0.7);
  outline: 0;
}

.yf-theme-toggle-label {
  font-size: 0.95rem;
}

html.yf-theme-dark {
  color-scheme: dark;
  --bg: #111827;
  --surface: #1f2937;
  --surface-strong: #273449;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #374151;
  --accent: #5eead4;
  --accent-strong: #99f6e4;
  --accent-soft: rgba(45, 212, 191, 0.14);
  --ink: #e5e7eb;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}

html.yf-theme-dark body {
  background: #111827;
  color: #e5e7eb;
}

html.yf-theme-dark .main-header.navbar {
  border-bottom-color: #374151;
  background: #111827 !important;
  color: #e5e7eb;
}

html.yf-theme-dark .navbar-light .navbar-nav .nav-link,
html.yf-theme-dark .main-header.navbar .yf-theme-toggle {
  color: #d1d5db;
}

html.yf-theme-dark .navbar-light .navbar-nav .nav-link:hover,
html.yf-theme-dark .navbar-light .navbar-nav .nav-link:focus,
html.yf-theme-dark .main-header.navbar .yf-theme-toggle:hover,
html.yf-theme-dark .main-header.navbar .yf-theme-toggle:focus {
  color: #ffffff;
}

html.yf-theme-dark .site-brand-text strong {
  color: #f9fafb;
}

html.yf-theme-dark .site-brand-text small {
  color: #9ca3af;
}

html.yf-theme-dark .content-wrapper,
html.yf-theme-dark .main-footer {
  border-color: #374151;
  background: #111827 !important;
  color: #e5e7eb;
}

html.yf-theme-dark .card,
html.yf-theme-dark .panel,
html.yf-theme-dark .metric-card,
html.yf-theme-dark .control-panel,
html.yf-theme-dark .page-header,
html.yf-theme-dark .topbar,
html.yf-theme-dark .dropdown-menu,
html.yf-theme-dark .modal-content {
  border-color: #374151;
  background: #1f2937;
  color: #e5e7eb;
}

html.yf-theme-dark .card-header,
html.yf-theme-dark .panel-header {
  border-color: #374151;
  background: #273449;
  color: #f9fafb;
}

html.yf-theme-dark .text-dark,
html.yf-theme-dark .text-body {
  color: #e5e7eb !important;
}

html.yf-theme-dark .text-secondary,
html.yf-theme-dark .text-black-50 {
  color: #cbd5e1 !important;
}

html.yf-theme-dark .bg-white,
html.yf-theme-dark .bg-light {
  background-color: #273449 !important;
  color: #e5e7eb !important;
}

html.yf-theme-dark .border,
html.yf-theme-dark .border-top,
html.yf-theme-dark .border-right,
html.yf-theme-dark .border-bottom,
html.yf-theme-dark .border-left {
  border-color: #374151 !important;
}

html.yf-theme-dark .btn-outline-secondary {
  border-color: #4b5563;
  color: #d1d5db;
}

html.yf-theme-dark .btn-outline-secondary:hover,
html.yf-theme-dark .btn-outline-secondary:focus {
  border-color: #6b7280;
  background: #374151;
  color: #ffffff;
}

html.yf-theme-dark .dropdown-item {
  color: #e5e7eb;
}

html.yf-theme-dark .dropdown-item:hover,
html.yf-theme-dark .dropdown-item:focus {
  background: #374151;
  color: #ffffff;
}

html.yf-theme-dark table,
html.yf-theme-dark th,
html.yf-theme-dark td {
  border-color: #374151;
}

html.yf-theme-dark th,
html.yf-theme-dark .text-muted,
html.yf-theme-dark .muted,
html.yf-theme-dark .eyebrow,
html.yf-theme-dark small {
  color: #9ca3af !important;
}

html.yf-theme-dark input,
html.yf-theme-dark select,
html.yf-theme-dark textarea,
html.yf-theme-dark .form-control,
html.yf-theme-dark .custom-select {
  border-color: #4b5563;
  background: #111827;
  color: #e5e7eb;
}

html.yf-theme-dark input::placeholder,
html.yf-theme-dark textarea::placeholder {
  color: #6b7280;
}

html.yf-theme-dark .table {
  color: #e5e7eb;
}

html.yf-theme-dark .table-hover tbody tr:hover {
  color: #ffffff;
  background: rgba(75, 85, 99, 0.28);
}