/* Modern admin skin: design tokens, sidebar, navbar, cards, tables, forms + light/dark themes.
   Dark mode is switched by the `dark-style` class on <html> (see assets/js/theme.js). */

:root {
  --bm-bg: #f4f5fb;
  --bm-surface: #ffffff;
  --bm-surface-2: #f7f8fc;
  --bm-border: #e6e8f0;
  --bm-text: #32384b;
  --bm-heading: #1f2437;
  --bm-muted: #7b8499;
  --bm-primary: #696cff;
  --bm-primary-soft: rgba(105, 108, 255, .13);
  --bm-shadow: 0 2px 10px rgba(30, 36, 70, .06);
  --bm-radius: 14px;
}
html.dark-style {
  --bm-bg: #12141f;
  --bm-surface: #1c1f31;
  --bm-surface-2: #23273d;
  --bm-border: #2c3150;
  --bm-text: #cfd3e6;
  --bm-heading: #f1f3fb;
  --bm-muted: #8d94b3;
  --bm-primary-soft: rgba(124, 127, 255, .18);
  --bm-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

html, body, .layout-page, .content-wrapper { background: var(--bm-bg) !important; color: var(--bm-text); }
body { font-family: 'Public Sans', system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--bm-heading); }
a { color: var(--bm-primary); }
.text-muted, small.text-muted { color: var(--bm-muted) !important; }
hr { border-color: var(--bm-border); }

/* ---------- Sidebar ---------- */
#layout-menu.bg-menu-theme { background: var(--bm-surface) !important; border-right: 1px solid var(--bm-border); box-shadow: none; }
#layout-menu { display: flex; flex-direction: column; height: 100vh; color: var(--bm-text); }
#layout-menu .app-brand { height: 4.1rem; padding: 0 1.4rem; border-bottom: 1px solid var(--bm-border); flex: 0 0 auto; }
#layout-menu .app-brand-text { color: var(--bm-heading) !important; font-size: 1.25rem; letter-spacing: .2px; }
#layout-menu .menu-inner-shadow, .bg-menu-theme .menu-inner-shadow { display: none !important; background: none !important; }
#layout-menu .menu-inner { flex: 1 1 auto; min-height: 0; overflow-y: auto !important; overflow-x: hidden; margin: 0; padding: .6rem .8rem 2rem !important; }
#layout-menu .menu-inner::-webkit-scrollbar { width: 6px; }
#layout-menu .menu-inner::-webkit-scrollbar-thumb { background: var(--bm-border); border-radius: 6px; }
#layout-menu .menu-inner > .menu-item, #layout-menu .menu-inner > .menu-header { flex: 0 0 auto; }
#layout-menu .menu-header { margin: 1rem 0 .35rem; padding: 0 .6rem; }
#layout-menu .menu-header::before { display: none; }
#layout-menu .menu-header .menu-header-text { color: var(--bm-muted) !important; font-size: .68rem; font-weight: 700; letter-spacing: .09rem; }
#layout-menu .menu-item { margin: 2px 0; }
#layout-menu .menu-item .menu-link { border-radius: 10px; padding: .55rem .75rem; color: var(--bm-text) !important; font-weight: 500; transition: background .15s, color .15s; }
#layout-menu .menu-item .menu-link .menu-icon { color: var(--bm-muted); font-size: 1.25rem; margin-right: .7rem; transition: color .15s; }
#layout-menu .menu-item .menu-link:hover { background: var(--bm-primary-soft) !important; color: var(--bm-primary) !important; }
#layout-menu .menu-item .menu-link:hover .menu-icon { color: var(--bm-primary); }
#layout-menu .menu-item.active > .menu-link { background: linear-gradient(135deg, #696cff, #8b8eff) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(105, 108, 255, .4); }
#layout-menu .menu-item.active > .menu-link .menu-icon { color: #fff; }
#layout-menu .menu-item.active > .menu-link::before, #layout-menu .menu-item.active::before { display: none !important; }
#layout-menu .menu-search { padding: .8rem .8rem .2rem; flex: 0 0 auto; }
#layout-menu .menu-search input { border-radius: 10px; background: var(--bm-surface-2); border: 1px solid var(--bm-border); color: var(--bm-text); font-size: .85rem; }
#layout-menu .menu-search input::placeholder { color: var(--bm-muted); }
#layout-menu .menu-footer { flex: 0 0 auto; padding: .8rem 1rem; border-top: 1px solid var(--bm-border); font-size: .75rem; color: var(--bm-muted); }

/* ---------- Navbar ---------- */
.layout-navbar.bg-navbar-theme, .bg-navbar-theme { background: var(--bm-surface) !important; color: var(--bm-text); }
.layout-navbar { border: 1px solid var(--bm-border); border-radius: var(--bm-radius) !important; box-shadow: var(--bm-shadow) !important; }
.layout-navbar-fixed .layout-navbar.navbar-detached { background: var(--bm-surface) !important; backdrop-filter: none; }
.nb-title { color: var(--bm-heading) !important; }
.nb-icon-btn { color: var(--bm-muted) !important; }
.nb-user { background: var(--bm-surface-2) !important; }
.nb-user:hover { background: var(--bm-primary-soft) !important; }
.nb-user .nb-name { color: var(--bm-heading) !important; }
.nb-divider { background: var(--bm-border) !important; }

/* ---------- Surfaces ---------- */
.card { background: var(--bm-surface); border: 1px solid var(--bm-border); border-radius: var(--bm-radius); box-shadow: var(--bm-shadow); color: var(--bm-text); }
.card-header, .card-footer { background: transparent; border-color: var(--bm-border); }
.bg-white, .play-area { background: var(--bm-surface) !important; color: var(--bm-text); }
.dropdown-menu { background: var(--bm-surface); border: 1px solid var(--bm-border); box-shadow: var(--bm-shadow); color: var(--bm-text); }
.dropdown-item { color: var(--bm-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bm-primary-soft); color: var(--bm-primary); }
.dropdown-divider { border-color: var(--bm-border); }
.modal-content { background: var(--bm-surface); color: var(--bm-text); border: 1px solid var(--bm-border); border-radius: var(--bm-radius); }
.modal-header, .modal-footer { border-color: var(--bm-border); }
.btn-close { filter: none; }
html.dark-style .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.list-group-item { background: var(--bm-surface); border-color: var(--bm-border); color: var(--bm-text); }
.content-footer, .footer.bg-footer-theme { background: transparent !important; color: var(--bm-muted); }
.footer-link { color: var(--bm-primary); }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; color: var(--bm-text); border-color: var(--bm-border); }
.table > :not(caption) > * > * { border-color: var(--bm-border); background-color: transparent; color: var(--bm-text); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--bm-surface-2) !important; color: var(--bm-text); }
.table-hover > tbody > tr:hover > * { background-color: var(--bm-primary-soft) !important; }
.table-bordered > :not(caption) > * { border-color: var(--bm-border); }
.table thead th { font-size: .72rem; letter-spacing: .06rem; }
.table-dark, .table-dark > :not(caption) > * > *, thead.table-dark th { background-color: #2c3150 !important; color: #e8eaf6 !important; border-color: #3a4066 !important; }
html:not(.dark-style) .table-dark, html:not(.dark-style) thead.table-dark th { background-color: #f1f2fa !important; color: #566a7f !important; border-color: var(--bm-border) !important; }

/* ---------- Forms ---------- */
.form-control, .form-select, .input-group-text {
  background-color: var(--bm-surface); color: var(--bm-text); border-color: var(--bm-border); border-radius: 10px;
}
.form-control:focus, .form-select:focus { background-color: var(--bm-surface); color: var(--bm-text); border-color: var(--bm-primary); box-shadow: 0 0 0 .2rem var(--bm-primary-soft); }
.form-control::placeholder { color: var(--bm-muted); }
.form-control:disabled, .form-control[readonly] { background-color: var(--bm-surface-2); }
.form-label, label { color: var(--bm-text); }
.form-check-input { background-color: var(--bm-surface); border-color: var(--bm-border); }
.form-check-input:checked { background-color: var(--bm-primary); border-color: var(--bm-primary); }
html.dark-style .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238d94b3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
.btn { border-radius: 10px; }
.btn-primary { box-shadow: 0 3px 8px rgba(105, 108, 255, .35); }
.page-link { background: var(--bm-surface); border-color: var(--bm-border); color: var(--bm-text); }
.page-item.active .page-link { background: var(--bm-primary); border-color: var(--bm-primary); color: #fff; }
.page-item.disabled .page-link { background: var(--bm-surface-2); color: var(--bm-muted); }
.alert { border-radius: 12px; }
html.dark-style .alert-success { background: rgba(113, 221, 55, .12); border-color: rgba(113, 221, 55, .3); color: #a8e87d; }
html.dark-style .alert-danger { background: rgba(255, 62, 29, .12); border-color: rgba(255, 62, 29, .3); color: #ff8f7e; }
html.dark-style .alert-info { background: rgba(3, 195, 236, .12); border-color: rgba(3, 195, 236, .3); color: #6adcf5; }
html.dark-style .alert-warning { background: rgba(255, 171, 0, .12); border-color: rgba(255, 171, 0, .3); color: #ffc95c; }
html.dark-style .badge[class*="bg-label-"] { filter: brightness(1.15); }
html.dark-style .bg-label-secondary { background: rgba(133, 146, 163, .2) !important; color: #aab4c3 !important; }

/* 3rd-party */
html.dark-style .ck.ck-editor__main > .ck-editor__editable, html.dark-style .ck.ck-toolbar { background: var(--bm-surface); color: var(--bm-text); border-color: var(--bm-border); }
html.dark-style .dataTables_wrapper, html.dark-style .dataTables_wrapper label { color: var(--bm-text); }
html.dark-style pre { color: var(--bm-text); }
html.dark-style details summary { color: var(--bm-primary); }

/* ---------- Dashboard ---------- */
.dash-hero { border-radius: var(--bm-radius); padding: 1.6rem 1.8rem; color: #fff; background: linear-gradient(120deg, #5f62f5 0%, #8e6bff 60%, #b06bff 100%); box-shadow: 0 8px 24px rgba(105, 108, 255, .35); position: relative; overflow: hidden; }
.dash-hero::after { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.dash-hero h3 { color: #fff; margin-bottom: .25rem; }
.dash-hero p { margin: 0; opacity: .9; }
.stat-card .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.stat-card .stat-value { font-size: 1.7rem; font-weight: 700; color: var(--bm-heading); line-height: 1.1; }
.stat-card .stat-label { color: var(--bm-muted); font-size: .82rem; font-weight: 500; }
.stat-card .stat-sub { font-size: .75rem; color: var(--bm-muted); }
.tone-primary { background: rgba(105, 108, 255, .16); color: #696cff; }
.tone-success { background: rgba(113, 221, 55, .18); color: #4caf18; }
.tone-warning { background: rgba(255, 171, 0, .18); color: #e69500; }
.tone-info { background: rgba(3, 195, 236, .18); color: #03a9d0; }
.tone-danger { background: rgba(255, 62, 29, .16); color: #ff3e1d; }
.quick-link { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: 12px; background: var(--bm-surface-2); color: var(--bm-text); border: 1px solid transparent; transition: .15s; }
.quick-link:hover { border-color: var(--bm-primary); color: var(--bm-primary); transform: translateY(-1px); }
.activity-item { display: flex; gap: .75rem; padding: .6rem 0; border-bottom: 1px dashed var(--bm-border); }
.activity-item:last-child { border-bottom: 0; }
.activity-dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 34px; }

/* theme toggle */
.theme-toggle { border: 0; background: transparent; cursor: pointer; }
.theme-toggle .bx-sun { display: none; }
html.dark-style .theme-toggle .bx-sun { display: inline-block; }
html.dark-style .theme-toggle .bx-moon { display: none; }