/* Megastock / Slate & blue. Visual tokens only: responsive layout stays in
   responsive.css. Keep semantic success, warning and danger states distinct. */
:root {
  --ux-bg: #f3f6fb;
  --ux-panel: #fff;
  --ux-border: #dfe6ef;
  --ux-text: #192b46;
  --ux-muted: #596b83;
  --ux-primary: #2457d6;
  --ux-primary-dark: #1c43ab;
  --ux-primary-soft: #edf2ff;
  --ux-secondary: #192b46;
  --ux-secondary-soft: #344e72;
  --ux-accent: #b45115;
  --ux-accent-soft: #fff1e6;
  --ux-shadow-sm: 0 3px 12px rgb(22 40 70 / 4%);
  --ux-shadow-md: 0 16px 44px rgb(22 40 70 / 12%);
  --ux-radius-lg: 16px;
  --ux-font: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --plan-ink: var(--ux-text);
  --plan-ocean: var(--ux-secondary-soft);
  --plan-sand: var(--ux-bg);
  --plan-panel: #fff;
  --plan-line: var(--ux-border);
}
body { font-family: var(--ux-font); color: var(--ux-text); background: var(--ux-bg); }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--ux-font); letter-spacing: -.025em; }
::selection { background: #dce7ff; color: #192b46; }
a { color: var(--ux-primary-dark); }
a:hover { color: var(--ux-primary); }

/* Quiet navigation, with an accent rail rather than a bright gradient. */
#sidebar .sidebar-wrapper { background: #14243b; box-shadow: 4px 0 20px rgb(12 26 46 / 8%); scrollbar-color: #566a85 transparent; }
#sidebar .sidebar-header { border-bottom-color: #2b3b52; }
#sidebar .menu .sidebar-title { color: #a9b8cb; font-size: .67rem; letter-spacing: .13em; font-weight: 700; }
#sidebar .menu .sidebar-link { color: #d7e0ed; font-weight: 500; border-radius: 10px; }
#sidebar .menu .sidebar-link :is(i, svg) { color: #91a8c7; }
#sidebar .menu .sidebar-link:hover { background: #20344f; border-color: transparent; }
#sidebar .menu .sidebar-item.has-sub.is-open > .sidebar-link { background: #20344f; border-color: transparent; box-shadow: none; }
#sidebar .menu .sidebar-item.active > .sidebar-link,
#sidebar .menu .submenu .submenu-item > a.is-current {
  background: #243e60; color: #fff; border-color: transparent;
  box-shadow: inset 3px 0 #f39a54; font-weight: 700;
}
#sidebar .menu .sidebar-item.active > .sidebar-link :is(i, svg) { color: #ffba85; }
#sidebar .menu .submenu .submenu-item a { color: #c5d1e2; font-weight: 500; }
#sidebar .menu .submenu .submenu-item a:hover { background: #20344f; color: #fff; }
#sidebar .ux-sidebar-search { background: #14243b; }
#sidebar .ux-sidebar-search::before { color: #a9bbd2; }
#sidebar .ux-sidebar-search__field { border-color: #3d506b; background: #1d304b; border-radius: 9px; color: #fff; }
#sidebar .ux-sidebar-search__field:focus { border-color: #91b2ff; box-shadow: 0 0 0 3px rgb(145 178 255 / 18%); }
#sidebar .sidebar-collapse-btn { border-color: #3d506b; background: #20344f; }

/* Header and account: one calm surface, less ornament. */
#main .admin-topbar { background: #fff; border-color: var(--ux-border); box-shadow: var(--ux-shadow-sm); }
#main .admin-topbar__logo { background: #f4f7fb; border-color: var(--ux-border); box-shadow: none; }
#main .admin-topbar__eyebrow { color: var(--ux-accent); background: var(--ux-accent-soft); letter-spacing: .05em; font-weight: 700; }
#main .admin-topbar__brand strong { letter-spacing: .025em; font-weight: 800; }
#main .admin-topbar__chip { background: var(--ux-primary-soft); border-color: #dce5fa; color: var(--ux-primary-dark); font-weight: 600; }
#main .admin-topbar__user { background: #fff; border-color: var(--ux-border); box-shadow: none; }
#main .admin-topbar__user:hover, #main .admin-topbar__user-menu[open] .admin-topbar__user { border-color: #91a9ce; background: #f8faff; }
#main .admin-topbar__user-copy strong { font-weight: 700; }
#main .admin-topbar__user-copy span, #main .admin-topbar__date { color: var(--ux-muted); }
#main .admin-topbar__avatar { color: var(--ux-primary-dark); background: #e8efff; border: 1px solid #d7e3ff; box-shadow: none; font-weight: 700; }
#main .admin-topbar__dropdown { border-color: var(--ux-border); box-shadow: var(--ux-shadow-md); }
#main .admin-topbar__account-details { border-color: var(--ux-border); }
.mobile-app-header { background: #fff; border-bottom-color: var(--ux-border); }
.mobile-app-header .burger-btn { color: var(--ux-primary-dark); border-color: #d9e3f5; background: #edf2ff; }
#sidebar .sidebar-hide { color: #e2ebf9; border-color: #3d506b; background: #20344f; }

/* Panels and section hierarchy. Never flatten status-colored cards. */
#main .card:not([class*="bg-"]),
#main :is(.plan-panel, .settings-card, .users-admin__table, .user-form__panel) {
  background: #fff; border-color: var(--ux-border); border-radius: 16px; box-shadow: var(--ux-shadow-sm);
}
#main .card:hover, #main .plan-panel:hover { border-color: #cbd7e7; }
#main :is(.card-header, .settings-card__head) { background: transparent; border-bottom-color: var(--ux-border); }
#main .card-footer { background: #f8faff; border-top-color: var(--ux-border); }
#main :is(.plan-hero, .settings-hero) { background: linear-gradient(120deg, #fff 35%, #edf3ff); border-color: var(--ux-border); border-radius: 20px; box-shadow: var(--ux-shadow-sm); }
#main :is(.plan-panel__eyebrow, .settings-card__eyebrow) { color: var(--ux-primary-dark); }
#main :is(.plan-hero h1, .plan-panel h2, .settings-hero__title) { font-family: var(--ux-font); letter-spacing: -.025em; }
#main :is(.settings-chip, .settings-hero__aside) { background: #fff; border-color: var(--ux-border); }
.page-heading .breadcrumb-header { background: #fff; border-color: var(--ux-border); box-shadow: none; }
.page-heading .breadcrumb .breadcrumb-item:last-child,
.page-heading .breadcrumb .breadcrumb-item:last-child a { color: var(--ux-primary-dark); }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #7b8ca3; }

/* Actions: solid fills, consistent hover/focus, no jumping buttons. */
.btn { letter-spacing: 0; font-weight: 600; box-shadow: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.btn:hover { transform: none; box-shadow: none; }
.btn.btn-primary { background: var(--ux-primary); border-color: var(--ux-primary); color: #fff; }
.btn.btn-primary:hover, .btn.btn-primary:active { background: var(--ux-primary-dark); border-color: var(--ux-primary-dark); color: #fff; }
.btn.btn-secondary { background: #344e72; border-color: #344e72; color: #fff; }
.btn.btn-secondary:hover { background: #253c5e; border-color: #253c5e; }
.btn.btn-outline-primary { color: var(--ux-primary-dark); border-color: #9bb3e7; background: #fff; }
.btn.btn-outline-primary:hover { background: var(--ux-primary-soft); border-color: var(--ux-primary); color: var(--ux-primary-dark); }
.btn.btn-outline-secondary { color: #405472; border-color: #bccadd; background: #fff; }
.btn.btn-outline-secondary:hover { color: #192b46; background: #edf2f8; border-color: #8399b7; }
.btn.btn-light-primary { color: var(--ux-primary-dark); background: var(--ux-primary-soft); }
.bg-light-primary { background: var(--ux-primary-soft) !important; color: var(--ux-primary-dark) !important; }
.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid #628aeb; outline-offset: 3px; }
.nav-tabs { border-bottom-color: var(--ux-border); }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link.active { background: var(--ux-primary-soft); color: var(--ux-primary-dark); }
.nav-tabs .nav-link.active:after { box-shadow: none !important; }
.nav-pills .nav-link.active { box-shadow: none !important; }

/* Neutral fields. Validation borders remain meaningful. */
:is(.form-control, .form-select, .dataTable-input, .choices__inner) { border-color: #b7c6d9 !important; background-color: #fff; color: var(--ux-text); }
:is(.form-control, .form-select)::placeholder, .choices__placeholder { color: #67788f; }
:is(.form-control, .form-select, .dataTable-input):focus,
.choices.is-focused .choices__inner, .choices.is-open .choices__inner {
  border-color: var(--ux-primary) !important; box-shadow: 0 0 0 3px rgb(36 87 214 / 14%) !important;
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: #edf1f6; color: #596b83; }
.form-control.is-invalid, .form-select.is-invalid,
.was-validated .form-control:invalid, .was-validated .form-select:invalid { border-color: #c63349 !important; }
.form-control.is-valid, .form-select.is-valid,
.was-validated .form-control:valid, .was-validated .form-select:valid { border-color: #10885f !important; }
.form-check-input:checked { background-color: var(--ux-primary); border-color: var(--ux-primary); }
.input-group-text { background: #f0f4fa; border-color: #b7c6d9; color: #596b83; }
.choices__list--dropdown, .choices__list[aria-expanded] { border-color: #b7c6d9; }
.ux-form-actions-sticky { border-color: var(--ux-border); box-shadow: 0 -4px 16px rgb(22 40 70 / 6%); }

/* Tables: pale slate headers and blue navigation, with row status preserved. */
.table, .dataTable-table { color: var(--ux-text); --bs-table-hover-bg: #edf3ff; --bs-table-striped-bg: #f7f9fc; }
.table thead th, .dataTable-table thead th { background: #edf2f9; color: #3d506c; border-bottom-color: #d7e1ef !important; font-weight: 700; }
.table tbody td, .dataTable-table tbody td { border-color: #e5ebf3 !important; }
.table.table-striped > tbody > tr:nth-of-type(odd):not([class*="table-"]) > * { background-color: #f7f9fc; }
.table tbody tr:hover, .dataTable-table tbody tr:hover { background-color: #edf3ff; }
.dataTable-container, .table-responsive { border-color: var(--ux-border); }
.dataTable-top, .dataTable-bottom { background: #fff; border-color: var(--ux-border); }
.dataTable-selector { border: 1px solid #b7c6d9; border-radius: 8px; background: #fff; color: #405472; padding: .4rem .6rem; }
.dataTable-pagination a, .page-link { border-radius: 8px; color: var(--ux-primary-dark); box-shadow: none; }
.dataTable-pagination .active a, .dataTable-pagination .active a:hover,
.page-item.active .page-link { color: #fff; background: var(--ux-primary); border-color: var(--ux-primary); }
.dataTable-pagination a:hover { color: var(--ux-primary-dark); background: var(--ux-primary-soft); }
.responsive-table-hint { color: var(--ux-muted); }
.modal .modal-content, .modal .modal-header, .modal .modal-footer { border-color: var(--ux-border); }

/* Chat and floating assistant keep their existing interaction model. */
#main .chat-shell { border-color: var(--ux-border); border-radius: 16px; box-shadow: var(--ux-shadow-sm); }
#main :is(.chat-sidebar__head, .chat-main__head, .chat-compose) { background: #f8faff; border-color: var(--ux-border); }
#main .chat-thread { background: #edf2f8; }
#main .chat-user.is-active { background: var(--ux-primary-soft); }
#main .chat-message.is-own .chat-bubble { background: #e0eaff; }
.ai-chatbot { font-family: var(--ux-font); }
.ai-chatbot .ai-chatbot__launcher { background: #192b46; box-shadow: 0 6px 20px rgb(22 40 70 / 20%); }
.ai-chatbot .ai-chatbot__pulse { display: none; }
.ai-chatbot__panel { border-radius: 16px; }
.ai-chatbot__header { background: #192b46; }
#main .admin-footer { background: transparent; border-top-color: var(--ux-border); box-shadow: none; }
#main .admin-footer__status { color: #405472; background: #e7edf6; }
#main .admin-footer__copy, #main .admin-footer__meta { color: var(--ux-muted); font-weight: 500; }
.ux-back-to-top { background: #fff; border-color: var(--ux-border); color: var(--ux-primary-dark); box-shadow: var(--ux-shadow-sm); }

/* Access screen: the actual brand, a clear welcome, the same visual language. */
#auth { padding-inline: 1rem; background: radial-gradient(ellipse at 50% 0%, #dce8ff, transparent 65%), var(--ux-bg); }
#auth #auth-card { border: 1px solid var(--ux-border); border-top: 3px solid #ef8b41; border-radius: 20px; box-shadow: var(--ux-shadow-md); padding: 2rem; }
#auth .auth-logo { display: flex; align-items: center; justify-content: center; gap: .6rem; }
#auth .auth-logo img { width: 42px; height: 42px; object-fit: contain; }
#auth .auth-logo span { color: #192b46; font-size: 1rem; font-weight: 800; letter-spacing: .05em; }
#auth .auth-title { color: var(--ux-text); font-size: 1.75rem; font-weight: 800; margin: 1.5rem 0 .5rem; }
#auth .auth-subtitle { color: var(--ux-muted); font-size: .9rem; line-height: 1.6; }
#auth .auth-link { font-size: .85rem; color: var(--ux-primary-dark); }
@media (max-width: 767px) {
  #main .admin-topbar { background: transparent; box-shadow: none; }
  #main .admin-topbar__user { box-shadow: var(--ux-shadow-sm); }
  #main .card .card-body, #main .card .card-header { padding: 1rem; }
  #auth #auth-card { padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.ux-ready #main, #main .section, #main .page-content { animation: none; }
  .btn, .card, .plan-panel { transition: none; }
}
@media print { body { background: #fff; } }