/* ==========================================================================
   Sailing Athens admin - UI layer
   Loaded after the legacy theme (theme/layout/material/style/ui.css).
   It restyles the existing markup and plugin output; it does not rename
   any class the scripts rely on, so behaviour stays the same.
   ========================================================================== */

:root {
  --c-bg: #f3f5f7;
  --c-surface: #ffffff;
  --c-surface-muted: #f8f9fb;
  --c-surface-hover: #f4f7f9;
  --c-border: #e3e7ec;
  --c-border-strong: #cdd4db;
  --c-text: #17212b;
  --c-text-secondary: #4a5867;
  --c-text-muted: #7b8794;

  --c-primary: #0f6e8c;
  --c-primary-hover: #0b5a73;
  --c-primary-active: #094a5e;
  --c-primary-soft: #e7f2f6;
  --c-focus: rgba(15, 110, 140, 0.22);

  --c-dark: #1f2a37;
  --c-dark-hover: #111a24;

  --c-success: #16794c;
  --c-success-soft: #e7f4ec;
  --c-warning: #9a5b00;
  --c-warning-soft: #fdf4e3;
  --c-danger: #b42318;
  --c-danger-soft: #fdeceb;
  --c-info: #1d5fb8;
  --c-info-soft: #eaf1fb;

  --c-sidebar: #0f1f2c;
  --c-sidebar-deep: #0b1823;
  --c-sidebar-text: #a9b5c1;
  --c-sidebar-text-strong: #ffffff;
  --c-sidebar-hover: rgba(255, 255, 255, 0.06);
  --c-sidebar-active: rgba(255, 255, 255, 0.10);
  --c-sidebar-accent: #5bb8d1;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 4px 12px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-3: 0 16px 40px rgba(16, 24, 40, 0.16);

  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
  --gutter: 24px;
  --control-h: 36px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

html body,
html body p,
body p strong,
body div,
body .alert,
body input,
body select,
body textarea,
body button,
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6,
body a, body td, body th, body li, body label, body small, body em, body b, body strong,
body .btn, body .badge, body .label, body .tooltip, body .popover, body .dropdown-menu,
body span:not([class*="icon"]):not([class*="fa-"]):not(.fa):not(.glyphicon):not(.caret) {
  font-family: var(--font) !important;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The theme fades content in from opacity 0 with JS; never leave it hidden. */
body > section { opacity: 1 !important; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--c-text);
  font-weight: 600;
  letter-spacing: -0.005em;
}
h1, .h1 { font-size: 24px; }
h2, .h2 { font-size: 20px; }
h3, .h3 { font-size: 16px; }
h4, .h4 { font-size: 15px; }
h5, .h5 { font-size: 14px; }
strong, b { font-weight: 600; }
small, .small { font-size: 12.5px; }

a { color: var(--c-primary); }
a:hover, a:focus { color: var(--c-primary-hover); }

hr { border-top-color: var(--c-border); }

::selection { background: rgba(15, 110, 140, 0.18); }

:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

code, kbd, pre, samp { font-family: var(--font-mono); }

.text-muted { color: var(--c-text-muted) !important; }
.text-primary, .c-primary { color: var(--c-primary) !important; }
.text-success, .c-green { color: var(--c-success) !important; }
.text-danger, .c-red { color: var(--c-danger) !important; }
.text-warning, .c-orange { color: var(--c-warning) !important; }
.c-gray { color: var(--c-text-muted) !important; }

/* Full-page loading veil from the template: content renders immediately. */
.loader-overlay { display: none !important; }

/* --------------------------------------------------------------------------
   Shell: sidebar
   -------------------------------------------------------------------------- */
.sidebar,
.sidebar .sidebar-inner,
.sidebar .logopanel {
  background: var(--c-sidebar) !important;
}

.sidebar {
  width: var(--sidebar-w);
  top: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
}
body.fixed-sidebar .sidebar { position: fixed; height: 100%; }

.sidebar .logopanel {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: var(--topbar-h);
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}
.sidebar .logopanel h1 { margin: 0; line-height: 1; width: 100%; }
.sidebar .logopanel h1 a {
  display: block;
  height: 34px;
  margin: 0;
  background: url(../images/logo/logo-white.png) no-repeat left center;
  background-size: contain;
}

.sidebar .sidebar-inner {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 64px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
/* The template wraps the menu in mCustomScrollbar; admin-ui.js removes it so
   the native scrollbar above is used. These rules cover the moment before. */
.sidebar .sidebar-inner .mCustomScrollBox { overflow: visible !important; max-height: none !important; height: auto !important; }
.sidebar .sidebar-inner .mCSB_container { margin-right: 0 !important; }
.sidebar .sidebar-inner .mCSB_scrollTools { display: none !important; }
.sidebar .sidebar-inner::-webkit-scrollbar { width: 8px; }
.sidebar .sidebar-inner::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 8px; }

/* Signed-in profile block */
.sidebar .sidebar-inner .sidebar-top,
.sidebar .sidebar-top.small-img {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}
.sidebar .sidebar-top.small-img {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 8px !important;
}
.sidebar .sidebar-top .user-image {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}
.sidebar .sidebar-top .user-image img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin: 0 !important;
  max-width: none;
}
.sidebar .sidebar-top .user-details {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  text-align: left !important;
  width: auto !important;
}
.sidebar .sidebar-top .user-details h4 {
  color: var(--c-sidebar-text-strong) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .sidebar-inner .menu-title {
  color: rgba(169, 181, 193, 0.7) !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 22px 8px !important;
}

/* Navigation items */
.sidebar .sidebar-inner .nav-sidebar {
  margin: 0 0 16px !important;
  padding: 0 10px;
}
.sidebar .nav > li + li { margin: 0; }
.sidebar .sidebar-inner .nav-sidebar > li { margin: 0 0 2px !important; }

.sidebar .sidebar-inner .nav-sidebar > li > a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  height: auto !important;
  min-height: 38px;
  padding: 8px 12px !important;
  border-radius: 0;
  color: var(--c-sidebar-text) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar .sidebar-inner .nav-sidebar > li > a > span:not(.arrow):not(.badge) {
  flex: 1 1 auto;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar .sidebar-inner .nav-sidebar li > a > i,
.sidebar .sidebar-inner .nav-sidebar li i {
  float: none !important;
  width: 18px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-align: center !important;
  color: rgba(169, 181, 193, 0.85);
  flex: 0 0 18px;
  top: 0;
}
.sidebar .sidebar-inner .nav-sidebar > li > a:hover,
.sidebar .sidebar-inner .nav-sidebar > li > a:focus {
  background: var(--c-sidebar-hover) !important;
  color: var(--c-sidebar-text-strong) !important;
}
.sidebar .sidebar-inner .nav-sidebar > li > a:hover i { color: var(--c-sidebar-text-strong); }

.sidebar .sidebar-inner .nav-sidebar > li.active > a,
.sidebar .sidebar-inner .nav-sidebar > li.nav-active > a {
  background: var(--c-sidebar-active) !important;
  color: var(--c-sidebar-text-strong) !important;
  box-shadow: inset 3px 0 0 var(--c-sidebar-accent);
}
.sidebar .sidebar-inner .nav-sidebar > li.active > a i,
.sidebar .sidebar-inner .nav-sidebar > li.nav-active > a i { color: var(--c-sidebar-accent); }

/* The template draws its own indicators; ours is the inset bar above. */
.sidebar .sidebar-inner .nav-sidebar > li > a::before,
.sidebar .sidebar-inner .nav-sidebar > li > a::after,
.sidebar .sidebar-inner .nav-sidebar > li::before,
.sidebar .sidebar-inner .nav-sidebar > li::after,
.sidebar .sidebar-inner .nav-sidebar > li.active > a::before,
.sidebar .sidebar-inner .nav-sidebar > li.nav-active > a::before { display: none !important; }

/* Expandable groups */
.sidebar .sidebar-inner .nav-sidebar .nav-parent > a { padding-right: 32px !important; position: relative; }
.sidebar .sidebar-inner .nav-sidebar .nav-parent > a::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.55;
  transition: transform 0.15s ease;
  background: none !important;
}
.sidebar .sidebar-inner .nav-sidebar .nav-parent.active > a::after,
.sidebar .sidebar-inner .nav-sidebar .nav-parent.open > a::after { transform: rotate(45deg); margin-top: -6px; }
.sidebar .sidebar-inner .nav-sidebar .nav-parent > a .arrow,
.sidebar .sidebar-inner .nav-sidebar .nav-parent > a .fa.arrow { display: none !important; }

.sidebar .sidebar-inner .nav-sidebar .nav-parent .children {
  background: transparent !important;
  margin: 2px 0 6px !important;
  padding: 0 0 0 0 !important;
  overflow: visible !important;
}
.sidebar .sidebar-inner .nav-sidebar .nav-parent .children::after,
.sidebar .sidebar-inner .nav-sidebar .nav-parent .children::before { display: none !important; }
.sidebar .sidebar-inner .nav-sidebar .children > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: auto !important;
  min-height: 34px;
  padding: 7px 12px 7px 42px !important;
  border-radius: var(--radius);
  color: var(--c-sidebar-text) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  background: transparent !important;
  white-space: nowrap;
}
.sidebar .sidebar-inner .nav-sidebar .children > li > a i {
  font-size: 12px !important;
  width: 14px;
  flex-basis: 14px;
  opacity: 0.75;
}
.sidebar .sidebar-inner .nav-sidebar .children > li > a:hover,
.sidebar .sidebar-inner .nav-sidebar .children > li.active > a {
  background: var(--c-sidebar-hover) !important;
  color: var(--c-sidebar-text-strong) !important;
}

/* Bottom utility row */
.sidebar .sidebar-footer {
  position: fixed !important;
  bottom: 0;
  left: 0;
  width: var(--sidebar-w) !important;
  height: 52px;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center;
  gap: 4px;
  background: var(--c-sidebar-deep) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 3;
}
.sidebar .sidebar-footer a {
  float: none !important;
  flex: 1 1 0;
  height: 36px;
  width: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--c-sidebar-text) !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 15px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar .sidebar-footer a i { line-height: 1; }
.sidebar .sidebar-footer a:hover { background: var(--c-sidebar-hover) !important; color: #fff !important; }
.sidebar .sidebar-footer .pull-left::after, .sidebar .sidebar-footer a::after { display: none !important; }

/* Collapsed (icon-only) sidebar on wide screens */
@media (min-width: 1025px) {
  body.sidebar-collapsed .sidebar,
  body.sidebar-collapsed .sidebar .logopanel { width: var(--sidebar-w-collapsed) !important; }
  body.sidebar-collapsed .sidebar .logopanel { padding: 0 14px; }
  body.sidebar-collapsed .sidebar .logopanel h1 a { background-position: left center; background-size: auto 26px; width: 36px; overflow: hidden; }
  body.sidebar-collapsed .sidebar .sidebar-top.small-img { justify-content: center; padding: 14px 0 6px !important; }
  body.sidebar-collapsed .sidebar .sidebar-top .user-details,
  body.sidebar-collapsed .sidebar .sidebar-inner .menu-title { display: none !important; }
  body.sidebar-collapsed .sidebar .sidebar-inner { overflow: visible; }
  body.sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar { padding: 0 10px; }
  body.sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar > li { position: relative; }
  body.sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar > li > a { justify-content: center; padding: 8px 0 !important; }
  body.sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar > li > a > span,
  body.sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar .nav-parent > a::after { display: none !important; }
  body.sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar > li > .children { display: none !important; }
  body.sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar > li:hover > .children {
    display: block !important;
    position: absolute !important;
    left: calc(100% + 6px);
    top: 0;
    min-width: 220px;
    margin: 0 !important;
    padding: 6px !important;
    background: var(--c-sidebar) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    z-index: 1100;
  }
  body.sidebar-collapsed .sidebar .sidebar-inner .nav-sidebar > li:hover > .children > li > a { padding-left: 12px !important; }
  body.sidebar-collapsed .sidebar .sidebar-footer { width: var(--sidebar-w-collapsed) !important; flex-direction: column; height: auto; padding: 8px !important; }
  body.sidebar-collapsed .sidebar .sidebar-footer a { flex: 0 0 auto; width: 100% !important; }
  body.sidebar-collapsed .sidebar .sidebar-inner { padding-bottom: 140px !important; }
}

/* --------------------------------------------------------------------------
   Shell: top bar
   -------------------------------------------------------------------------- */
.topbar {
  height: var(--topbar-h) !important;
  background: var(--c-surface) !important;
  border-bottom: 1px solid var(--c-border);
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 8px;
}
.topbar::after { display: none; }
body.fixed-topbar .topbar {
  position: fixed !important;
  top: 0;
  right: 0;
  left: var(--sidebar-w) !important;
  z-index: 990;
}
body.fixed-topbar.sidebar-collapsed .topbar { left: var(--sidebar-w-collapsed) !important; }
body.sidebar-collapsed .topbar { margin-left: 0 !important; width: auto !important; }
@media (min-width: 1025px) {
  body.sidebar-collapsed .sidebar .logopanel { display: flex !important; }
}

.topbar .header-left,
.topbar .header-right { float: none !important; height: 100%; display: flex; align-items: center; }
.topbar .header-left .topnav { height: 100% !important; display: flex; align-items: center; float: none; }

/* Menu toggle, redrawn as a plain icon button */
.topbar .header-left .topnav .menutoggle {
  position: relative;
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius);
  background: transparent !important;
  color: var(--c-text-secondary) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none !important;
  transition: background-color 0.15s ease;
}
.topbar .header-left .topnav .menutoggle:hover { background: var(--c-surface-hover) !important; }
.topbar .header-left .topnav .menutoggle .menu__handle,
.sidebar-collapsed .topbar .header-left .topnav .menu__handle {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 18px !important;
  height: 12px !important;
  margin: 0 !important;
  background: transparent !important;
  display: block;
}
.topbar .header-left .topnav .menutoggle .menu__handle::before,
.topbar .header-left .topnav .menutoggle .menu__handle::after,
.topbar .header-left .topnav .menutoggle .menu__handle span {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 2px;
  background: currentColor !important;
  transform: none !important;
  opacity: 1 !important;
  font-size: 0 !important;
  overflow: hidden;
  transition: none !important;
  margin: 0 !important;
}
.topbar .header-left .topnav .menutoggle .menu__handle::before { top: 0 !important; }
.topbar .header-left .topnav .menutoggle .menu__handle span { top: 5px !important; color: transparent !important; text-indent: -999px; }
.topbar .header-left .topnav .menutoggle .menu__handle::after { top: 10px !important; }

/* Right-hand menu */
.topbar .header-right .header-menu {
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
  float: none !important;
  height: 100%;
}
.topbar .header-right .header-menu > li { float: none !important; position: relative; display: flex; align-items: center; height: 100%; }
.topbar .header-right .header-menu > li > a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 40px !important;
  padding: 0 10px !important;
  border-radius: var(--radius);
  color: var(--c-text-secondary) !important;
  background: transparent !important;
  line-height: 1 !important;
  transition: background-color 0.15s ease;
}
.topbar .header-right .header-menu > li > a:hover,
.topbar .header-right .header-menu > li.open > a { background: var(--c-surface-hover) !important; color: var(--c-text) !important; }
.topbar .header-right .header-menu > li > a > i { font-size: 17px !important; color: inherit !important; margin: 0 !important; padding: 0 !important; top: 0 !important; }
.topbar .header-right .header-menu #user-header > a img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover;
  margin: 0 !important;
  float: none !important;
  border: 1px solid var(--c-border);
}
.topbar .header-right .header-menu #user-header > a .username {
  color: var(--c-text) !important;
  font-size: 13.5px !important;
  font-weight: 500;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.topbar .header-right .header-menu .badge-header {
  position: absolute !important;
  top: 6px !important;
  right: 4px !important;
  left: auto !important;
  min-width: 17px;
  height: 17px;
  padding: 0 5px !important;
  border-radius: 9px !important;
  font-size: 10.5px !important;
  font-weight: 600;
  line-height: 17px !important;
  background: var(--c-danger) !important;
  color: #fff !important;
  border: 2px solid var(--c-surface);
  box-sizing: content-box;
}
.topbar .header-right .header-menu .dropdown-menu {
  top: calc(100% - 4px) !important;
  right: 0 !important;
  left: auto !important;
  margin: 0 !important;
  min-width: 220px;
  padding: 6px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-2) !important;
  background: var(--c-surface) !important;
}
.topbar .header-right .header-menu .dropdown-menu::before,
.topbar .header-right .header-menu .dropdown-menu::after { display: none !important; }
.topbar .header-right .header-menu .dropdown-menu > li > a,
.topbar .header-right .header-menu .dropdown-menu .dropdown-menu-list > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 10px !important;
  border-radius: var(--radius-sm);
  color: var(--c-text) !important;
  font-size: 13.5px !important;
  background: transparent !important;
  white-space: normal;
}
.topbar .header-right .header-menu .dropdown-menu > li > a:hover,
.topbar .header-right .header-menu .dropdown-menu .dropdown-menu-list > li > a:hover { background: var(--c-surface-hover) !important; }
.topbar .header-right .header-menu .dropdown-menu > li > a i { color: var(--c-text-muted) !important; font-size: 14px !important; width: 16px; padding: 0 !important; margin: 0 !important; }
.topbar .header-right .header-menu #notifications-header .dropdown-menu { width: 320px; max-width: calc(100vw - 24px); }
.topbar .header-right .header-menu .dropdown-menu .dropdown-header,
.topbar .header-right .header-menu .dropdown-menu .dropdown-footer {
  background: transparent !important;
  border: 0 !important;
  padding: 6px 10px !important;
  color: var(--c-text-muted) !important;
  font-size: 12px !important;
}
.topbar .header-right .header-menu .dropdown-menu .dropdown-footer a { color: var(--c-primary) !important; padding: 0 !important; background: none !important; }
.topbar .header-right .header-menu .dropdown-menu .dropdown-time { color: var(--c-text-muted); font-size: 11.5px; margin-left: auto; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Shell: content area
   -------------------------------------------------------------------------- */
.main-content {
  margin-left: var(--sidebar-w) !important;
  background: var(--c-bg) !important;
  min-height: 100vh;
}
body.sidebar-collapsed .main-content { margin-left: var(--sidebar-w-collapsed) !important; }

.main-content .page-content {
  margin-top: 0 !important;
  padding: calc(var(--topbar-h) + 20px) var(--gutter) 0 !important;
  background: transparent !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body:not(.fixed-topbar) .main-content .page-content { padding-top: 20px !important; }

.main-content .page-content > .header {
  padding: 0 !important;
  margin: 0 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  min-height: 0;
}
.main-content .page-content > .header .breadcrumb-wrapper {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  right: auto;
  top: auto;
}
.main-content .page-content .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  float: none !important;
}
.main-content .page-content .breadcrumb > li {
  display: inline-flex;
  align-items: center;
  color: var(--c-text-muted);
  font-weight: 400 !important;
  font-size: 13px !important;
  text-transform: none !important;
}
.main-content .page-content .breadcrumb > li + li::before {
  content: "/" !important;
  padding: 0 6px 0 0 !important;
  color: var(--c-border-strong) !important;
}
.main-content .page-content .breadcrumb > li a { color: var(--c-text-secondary) !important; font-weight: 400 !important; }
.main-content .page-content .breadcrumb > li a:hover { color: var(--c-primary) !important; }
.main-content .page-content .breadcrumb > li.active,
.main-content .page-content .breadcrumb > li:last-child { color: var(--c-text) !important; font-weight: 600 !important; }

/* Master content wrapper */
.main-content .page-content > .row.p-t-30 { padding-top: 0 !important; flex: 1 0 auto; }
.page-content .page-app { margin-bottom: 0; }

/* Footer */
.main-content .page-content > .footer,
.main-content .footer {
  position: static !important;
  margin: 24px 0 0 !important;
  padding: 16px 0 20px !important;
  border-top: 1px solid var(--c-border) !important;
  background: transparent !important;
  color: var(--c-text-muted) !important;
}
.main-content .page-content > .footer .copyright,
.main-content .footer .copyright { margin: 0 !important; padding: 0 !important; border: 0 !important; float: none !important; }
.main-content .page-content > .footer .copyright p,
.main-content .footer .copyright p { float: none !important; margin: 0 !important; font-size: 12.5px !important; color: var(--c-text-muted) !important; }
.main-content .footer .copyright span { font-size: 12.5px !important; color: var(--c-text-muted) !important; font-family: var(--font) !important; }

.scrollup {
  right: 20px !important;
  bottom: 20px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--c-surface) !important;
  color: var(--c-text-secondary) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-2) !important;
  line-height: 38px !important;
  text-align: center;
  opacity: 0.95;
}
.scrollup i { line-height: 38px !important; font-size: 18px !important; color: inherit !important; }

/* --------------------------------------------------------------------------
   Panels / cards
   -------------------------------------------------------------------------- */
.panel,
.main-content .page-content .panel {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1) !important;
  margin-bottom: 20px;
  color: var(--c-text);
}
/* Nested ".panel.panel-default > .panel" wrappers should not draw twice */
.panel > .panel,
.main-content .page-content .panel > .panel,
.panel-group .panel + .panel { margin-top: 0; }
.panel > .panel,
.main-content .page-content .panel > .panel {
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
}

.main-content .page-content .panel > .panel-header,
.panel > .panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--c-border);
  background: transparent !important;
  min-height: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.panel > .panel-header::before, .panel > .panel-header::after { display: none !important; }
.panel > .panel-header > * { float: none !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.panel > .panel-header > div:empty { display: none; }
.main-content .page-content .panel > .panel-header h2,
.main-content .page-content .panel > .panel-header h3,
.main-content .page-content .panel > .panel-header h4,
.panel > .panel-header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  float: none !important;
  line-height: 1.35;
}
.panel > .panel-header h3 strong,
.panel > .panel-header h3 b { font-weight: 600 !important; }
.panel > .panel-header h3 > i,
.panel > .panel-header h2 > i {
  color: var(--c-text-muted) !important;
  font-size: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
}
.panel > .panel-header .btn-group,
.panel > .panel-header .btn { float: none !important; margin: 0 !important; }
.panel > .panel-header .panel-controls { position: static !important; }

.main-content .page-content .panel .panel-content,
.panel .panel-content {
  padding: 20px !important;
  margin: 0 !important;
  color: var(--c-text) !important;
  background: transparent !important;
}
.panel .panel-content > p:first-child { color: var(--c-text-secondary); }
.panel-header + br, .panel-header + br + br { display: none; }
.panel .panel-content .panel-content { padding: 0 !important; }
.panel .panel-footer {
  background: var(--c-surface-muted) !important;
  border-top: 1px solid var(--c-border) !important;
  padding: 12px 20px !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Collapsible sections built as .panel-header > .panel-heading + .panel-collapse
   inside a card's content (offer manager rule editors) */
.panel-content .panel-header {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 0 12px !important;
  background: transparent !important;
  min-height: 0 !important;
}
.panel-content .panel-header > .panel-heading {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--c-surface-muted) !important;
  padding: 0 !important;
}
.panel-content .panel-header > .panel-heading h4 { margin: 0 !important; }
.panel-content .panel-header > .panel-heading a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  text-decoration: none !important;
}
.panel-content .panel-header > .panel-heading a::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 1.5px solid var(--c-text-muted);
  border-bottom: 1.5px solid var(--c-text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}
.panel-content .panel-header > .panel-heading a:not(.collapsed)::after { transform: rotate(-135deg); margin-top: 4px; }
.panel-content .panel-header > .panel-collapse > .panel-body { margin: 8px 0 0 !important; }

/* Bootstrap-style panels (accordions, collapsibles) */
.panel .panel-heading,
.panel-default > .panel-heading {
  background: var(--c-surface-muted) !important;
  border-bottom: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
  padding: 12px 16px !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.panel .panel-heading h4,
.panel .panel-heading .panel-title { font-size: 14px !important; font-weight: 600 !important; margin: 0 !important; }
.panel .panel-heading a { color: var(--c-text) !important; text-decoration: none !important; }
.panel .panel-heading a:hover { color: var(--c-primary) !important; }
.panel .panel-body { padding: 16px !important; color: var(--c-text); }
.panel-group { margin-bottom: 20px; }
.panel-group .panel { margin-bottom: 8px !important; }
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group { border-top: 0 !important; }

/* Two-column page layout with a right-hand settings column */
.page-profil .profil-right,
.profil-right {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 4px 0 16px !important;
}
.page-profil .profil-right,
.profil-right {
  position: relative !important;
  right: auto !important;
  height: auto !important;
  min-height: 0 !important;
}
@media (min-width: 1200px) {
  .page-profil .profil-right,
  .profil-right {
    position: sticky !important;
    top: calc(var(--topbar-h) + 20px);
  }
}
.profil-right > .m-t-30, .profil-right > .m-t-60 { margin-top: 8px !important; padding: 0 20px; }
.profil-right .row { margin-left: 0; margin-right: 0; }
.profil-right .btn-block { margin-top: 8px; }
.profil-right .profil-sidebar-element,
.profil-sidebar-element { padding: 12px 20px !important; border: 0 !important; }
.profil-right h3, .profil-sidebar-element h3 { font-size: 14px !important; font-weight: 600 !important; color: var(--c-text) !important; text-transform: none !important; margin: 0 0 12px !important; }
.page-profil .profil-header { background: transparent !important; }

/* Filter rows above lists: fields share the row, action button aligns to the inputs */
.row.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-left: -8px;
  margin-right: -8px;
}
.row.filter-bar::before, .row.filter-bar::after { display: none; }
.row.filter-bar > [class*="col-"] {
  float: none;
  width: auto;
  flex: 1 1 180px;
  min-width: 0;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.row.filter-bar > .filter-actions { flex: 0 0 auto; }
.row.filter-bar .form-group { margin-bottom: 12px; }
.row.filter-bar .filter-actions .btn {
  width: auto !important;
  height: auto !important;
  min-height: var(--control-h);
  margin: 0 0 12px !important;
}
.filter-divider { border-top: 1px solid var(--c-border) !important; margin: 4px 0 16px !important; }

.booking-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-success-soft);
  color: var(--c-success);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.booking-code strong { font-family: var(--font-mono) !important; font-weight: 600; letter-spacing: 0.02em; }

/* Chip filters (vessel categories) */
.chip-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.chip-filter a {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-secondary);
  font-size: 13px;
  text-decoration: none !important;
}
.chip-filter a:hover { background: var(--c-surface-hover); color: var(--c-text); }
.chip-filter a.current { background: var(--c-primary-soft); border-color: transparent; color: var(--c-primary); font-weight: 600; }

/* Vessel cards */
.vessel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.vessel-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-surface);
  color: var(--c-text) !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vessel-card:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-2); }
.vessel-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--c-surface-muted); }
.vessel-card__media::before {
  content: "\f21a";
  font-family: FontAwesome;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #c3cbd3;
}
.vessel-card__media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.vessel-card__body { padding: 12px 14px 14px; }
.vessel-card__title { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.vessel-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  color: var(--c-text-muted);
}
.vessel-card__text * { font-size: inherit !important; color: inherit !important; margin: 0 !important; }

/* Reservation extras editor (rows built by GetDynamicTextBox) */
.extras-list { padding: 4px 0 8px; }
.extras-list > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.extras-list .extra-name { flex: 1 1 200px; width: auto !important; min-width: 0; }
.extras-list .extra-price { flex: 0 0 130px; width: 130px !important; }
.extras-list .extra-remove { flex: 0 0 auto; color: var(--c-danger) !important; }
.extras-list:empty::before { content: "No extras yet."; color: var(--c-text-muted); font-size: 13px; }
.modal-footer hr { display: none; }

/* Ad-hoc inner "cards" created with inline box-shadow */
/* These are grid columns, so a transparent border makes the gutter and an
   inset ring draws the card edge without changing the column widths. */
.panel .panel-content[style*="box-shadow"],
.panel-content [style*="box-shadow: 1px 1px 1px 1px"],
.modal-body [style*="box-shadow: 1px 1px 1px 1px"] {
  box-shadow: inset 0 0 0 1px var(--c-border) !important;
  border: 6px solid transparent !important;
  background-clip: padding-box;
  border-radius: 14px;
  padding: 16px !important;
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Alerts / messages
   -------------------------------------------------------------------------- */
.bs-component { margin-bottom: 16px; }
.alert {
  position: relative;
  border: 1px solid transparent !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 44px 14px 16px !important;
  font-size: 14px;
  box-shadow: none !important;
  margin-bottom: 16px;
}
.alert h4 { font-size: 14px !important; font-weight: 600 !important; margin: 0 0 4px !important; color: inherit !important; }
.alert p { margin: 0; color: inherit !important; }
.alert .close {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  width: 28px;
  height: 28px;
  line-height: 26px !important;
  text-align: center;
  border-radius: var(--radius-sm);
  font-size: 20px !important;
  opacity: 0.5;
  color: inherit !important;
  text-shadow: none !important;
  padding: 0 !important;
}
.alert .close:hover { opacity: 0.9; background: rgba(0, 0, 0, 0.05); }
.alert-success { background: var(--c-success-soft) !important; border-color: #c4e5d2 !important; color: #0f5a38 !important; }
.alert-info    { background: var(--c-info-soft) !important; border-color: #c8daf5 !important; color: #174b91 !important; }
.alert-warning { background: var(--c-warning-soft) !important; border-color: #f2dcb0 !important; color: #7a4800 !important; }
.alert-danger  { background: var(--c-danger-soft) !important; border-color: #f5c6c2 !important; color: #8f1c13 !important; }
.alert.media { display: block; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-h);
  height: auto;
  padding: 7px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--radius) !important;
  border: 1px solid transparent;
  box-shadow: none !important;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 0;
}
.btn:focus, .btn.focus, .btn:active:focus { outline: none !important; box-shadow: 0 0 0 3px var(--c-focus) !important; }
.btn:active, .btn.active { box-shadow: none !important; }
.btn i { margin: 0 !important; padding: 0 !important; font-size: 14px; line-height: 1; }
.btn.btn-block, input.btn-block { display: flex; width: 100%; }
input.btn, button.btn { display: inline-block; }
input.btn.btn-block { display: block; }
.btn[disabled], .btn.disabled, fieldset[disabled] .btn { opacity: 0.55 !important; cursor: not-allowed; }

.btn-sm, .btn-group-sm > .btn { min-height: 30px; padding: 5px 10px !important; font-size: 13px !important; }
.btn-xs, .btn-group-xs > .btn { min-height: 24px; padding: 2px 8px !important; font-size: 12px !important; }
.btn-lg, .btn-group-lg > .btn { min-height: 44px; padding: 10px 18px !important; font-size: 15px !important; }
.btn-md { min-height: var(--control-h); }
.btn-rounded, .btn-embossed, .btn-square { border-radius: var(--radius) !important; }
.btn-embossed { border-bottom-width: 1px !important; }

.btn-default, .btn-white {
  background: var(--c-surface) !important;
  border-color: var(--c-border-strong) !important;
  color: var(--c-text) !important;
}
.btn-default:hover, .btn-default:focus, .btn-white:hover, .btn-white:focus,
.btn-default.active, .btn-default:active, .open > .dropdown-toggle.btn-default {
  background: var(--c-surface-hover) !important;
  border-color: #b9c2cb !important;
  color: var(--c-text) !important;
}

.btn-primary {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus { background: var(--c-primary-hover) !important; border-color: var(--c-primary-hover) !important; color: #fff !important; }
.btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background: var(--c-primary-active) !important; border-color: var(--c-primary-active) !important; }

.btn-dark {
  background: var(--c-dark) !important;
  border-color: var(--c-dark) !important;
  color: #fff !important;
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active {
  background: var(--c-dark-hover) !important;
  border-color: var(--c-dark-hover) !important;
  color: #fff !important;
}

.btn-success { background: var(--c-success) !important; border-color: var(--c-success) !important; color: #fff !important; }
.btn-success:hover, .btn-success:focus { background: #11603c !important; border-color: #11603c !important; color: #fff !important; }
.btn-danger { background: var(--c-danger) !important; border-color: var(--c-danger) !important; color: #fff !important; }
.btn-danger:hover, .btn-danger:focus { background: #912018 !important; border-color: #912018 !important; color: #fff !important; }
.btn-warning { background: #b86e00 !important; border-color: #b86e00 !important; color: #fff !important; }
.btn-warning:hover, .btn-warning:focus { background: #965a00 !important; border-color: #965a00 !important; color: #fff !important; }
.btn-info { background: var(--c-info) !important; border-color: var(--c-info) !important; color: #fff !important; }
.btn-info:hover, .btn-info:focus { background: #174b91 !important; border-color: #174b91 !important; color: #fff !important; }
.btn-link { background: transparent !important; border-color: transparent !important; color: var(--c-primary) !important; }

.btn-group > .btn { border-radius: 0 !important; }
.btn-group > .btn:first-child { border-top-left-radius: var(--radius) !important; border-bottom-left-radius: var(--radius) !important; }
.btn-group > .btn:last-child, .btn-group > .dropdown-toggle { border-top-right-radius: var(--radius) !important; border-bottom-right-radius: var(--radius) !important; }
.btn-group > .btn:only-child { border-radius: var(--radius) !important; }

/* Material-design ripple from the template */
.ripple-wrapper, .ripple { display: none !important; }

/* Icon actions in table rows */
.table td .btn-sm,
.table td .btn-xs {
  min-width: 32px;
  min-height: 32px;
  padding: 0 8px !important;
  background: var(--c-surface) !important;
  border-color: var(--c-border-strong) !important;
  color: var(--c-text-secondary) !important;
  margin: 0 0 0 4px !important;
  float: none !important;
}
.table td .btn-sm:hover,
.table td .btn-xs:hover { background: var(--c-surface-hover) !important; color: var(--c-text) !important; border-color: #b9c2cb !important; }
.table td .btn-sm.btn-danger,
.table td .btn-sm[title^="Delete"]:hover { color: var(--c-danger) !important; }
.table td.text-right { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
label, .control-label, .form-label {
  color: var(--c-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 6px;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.form-label small, label small { color: var(--c-text-muted); font-weight: 400; font-size: 12px; }
.form-group { margin-bottom: 16px; }
/* Columns that hold a label + control without a .form-group wrapper */
[class*="col-"] > label.form-label + .prepend-icon,
[class*="col-"] > label.form-label + .append-icon,
[class*="col-"] > label.form-label + select,
[class*="col-"] > label.form-label + .select2-container,
[class*="col-"] > label.form-label + .form-control { margin-bottom: 16px; }

.form-control,
input[type="text"].form-control,
input[type="password"].form-control,
input[type="email"].form-control,
input[type="number"].form-control,
select.form-control,
textarea.form-control,
.form-control:focus {
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--c-text) !important;
  background: var(--c-surface) !important;
  background-image: none !important;
  border: 1px solid var(--c-border-strong) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  height: var(--control-h) !important;
  min-height: var(--control-h);
  padding: 7px 11px !important;
  line-height: 1.4 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea.form-control,
textarea.form-control:focus { height: auto !important; min-height: 96px; resize: vertical; }
select.form-control:not([multiple]):not([size]),
select.form-control:not([multiple]):not([size]):focus {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='none' stroke='%237b8794' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}
select.form-control[multiple], select.form-control[size] { height: auto !important; }
.form-control:hover { border-color: #b9c2cb !important; }
.form-control:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px var(--c-focus) !important;
  outline: none !important;
}
.form-control::placeholder { color: #9aa5b1 !important; opacity: 1; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control,
.form-control.aspNetDisabled {
  background: var(--c-surface-muted) !important;
  color: var(--c-text-secondary) !important;
  cursor: not-allowed;
}
.form-control[readonly] { cursor: default; }
.input-sm, .form-control.input-sm { height: var(--control-h) !important; font-size: 14px !important; }

/* Plain inputs without .form-control (the theme forced bold black text) */
input, select, textarea {
  font-weight: 400 !important;
  color: var(--c-text);
}
input:not(.form-control):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not(.select2-input):not(.select2-focusser),
textarea:not(.form-control) {
  background-color: var(--c-surface) !important;
}

/* Inputs with a leading/trailing icon */
.prepend-icon, .append-icon { position: relative; display: block; }
.prepend-icon > .form-control,
.prepend-icon > input,
.prepend-icon > input[type].form-control,
.prepend-icon > .form-control.form-control:focus { padding-left: 36px !important; }
.prepend-icon > i,
.append-icon > i {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  height: var(--control-h);
  width: 36px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--c-text-muted) !important;
  font-size: 14px !important;
  pointer-events: none;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2;
}
.prepend-icon > i { left: 0 !important; }
.append-icon > i { right: 0 !important; left: auto !important; }
.append-icon > .form-control,
.append-icon > input,
.append-icon > input[type].form-control,
.append-icon > .form-control.form-control:focus { padding-right: 36px !important; }
/* select2 inside .prepend-icon draws its own box; keep the icon out of it */
.prepend-icon > .select2-container + select + i,
.prepend-icon > .select2-container ~ i { display: none !important; }

.input-group { display: flex; width: 100%; align-items: stretch; }
.input-group > .form-control { flex: 1 1 auto; width: 1% !important; min-width: 0; position: relative; z-index: 1; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group-addon, .input-group-btn {
  display: flex !important;
  align-items: center;
  width: auto !important;
}
.input-group-addon {
  padding: 0 12px !important;
  background: var(--c-surface-muted) !important;
  border: 1px solid var(--c-border-strong) !important;
  color: var(--c-text-secondary) !important;
  font-size: 13.5px !important;
  border-radius: var(--radius) !important;
}
.input-group-addon:first-child { border-right: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group-addon:last-child { border-left: 0 !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group-btn > .btn { height: 100% !important; min-height: var(--control-h); border-radius: 0 !important; }
.input-group-btn:last-child > .btn { border-top-right-radius: var(--radius) !important; border-bottom-right-radius: var(--radius) !important; margin-left: -1px !important; }
.input-group-btn:first-child > .btn { border-top-left-radius: var(--radius) !important; border-bottom-left-radius: var(--radius) !important; margin-right: -1px !important; }
.input-group .btn[style*="height"] { height: auto !important; }

/* Validators rendered by ASP.NET */
span[id*="Required"][style*="color: red"],
span[id*="Validator"][style*="color:Red"],
span[id*="Validator"][style*="color: red"] {
  color: var(--c-danger) !important;
  font-size: 12.5px;
  font-weight: 500;
}

/* Checkboxes / radios: iCheck (minimal-grey skin) redrawn without sprites */
.icheckbox_minimal-grey,
.iradio_minimal-grey,
.icheckbox_minimal,
.iradio_minimal,
.icheckbox_square-blue,
.iradio_square-blue {
  display: inline-block;
  position: relative;
  width: 18px !important;
  height: 18px !important;
  margin: 0 6px 0 0 !important;
  vertical-align: -4px;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-strong) !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.iradio_minimal-grey, .iradio_minimal, .iradio_square-blue { border-radius: 50% !important; }
.icheckbox_minimal-grey.hover, .iradio_minimal-grey.hover,
.icheckbox_minimal.hover, .iradio_minimal.hover { border-color: var(--c-primary) !important; }
.icheckbox_minimal-grey.focus, .iradio_minimal-grey.focus { box-shadow: 0 0 0 3px var(--c-focus); }
.icheckbox_minimal-grey.checked, .icheckbox_minimal.checked, .icheckbox_square-blue.checked {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}
.icheckbox_minimal-grey.checked::after, .icheckbox_minimal.checked::after, .icheckbox_square-blue.checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.iradio_minimal-grey.checked, .iradio_minimal.checked, .iradio_square-blue.checked { border-color: var(--c-primary) !important; }
.iradio_minimal-grey.checked::after, .iradio_minimal.checked::after, .iradio_square-blue.checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-primary);
}
.icheckbox_minimal-grey.disabled, .iradio_minimal-grey.disabled { opacity: 0.5; cursor: not-allowed; }
.icheck-list > label, .icheck-inline > label { display: inline-flex; align-items: center; gap: 2px; margin-right: 16px; font-weight: 400 !important; color: var(--c-text) !important; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--c-primary); }

/* On/off switches (.onoffswitch2) as a compact toggle */
.onoffswitch2 {
  float: none !important;
  display: inline-block;
  position: relative;
  width: 40px !important;
  height: 22px !important;
  margin: 2px 0 0 !important;
  vertical-align: middle;
}
.onoffswitch2 + br { display: none; }
.onoffswitch2 .onoffswitch-checkbox {
  display: block !important;
  position: absolute !important;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.onoffswitch2 .onoffswitch-label {
  display: block;
  width: 40px;
  height: 22px;
  margin: 0 !important;
  border-radius: 11px !important;
  border: 0 !important;
  background: #c3cbd3 !important;
  overflow: visible !important;
  position: relative;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.onoffswitch2 .onoffswitch-inner { display: none !important; }
.onoffswitch2 .onoffswitch-switch {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  right: auto !important;
  bottom: auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.25);
  transition: transform 0.18s ease !important;
}
.onoffswitch2 .onoffswitch-checkbox:checked + .onoffswitch-label { background: var(--c-primary) !important; }
.onoffswitch2 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { transform: translateX(18px); right: auto !important; }
.onoffswitch2 .onoffswitch-checkbox:focus-visible + .onoffswitch-label { box-shadow: 0 0 0 3px var(--c-focus); }
.onoffswitch2 .onoffswitch-checkbox:disabled + .onoffswitch-label { opacity: 0.5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   select2 (v3)
   -------------------------------------------------------------------------- */
.select2-container { width: 100% !important; display: block !important; }
/* The original <select> select2 hides; keep the form-control sizing off it */
select.select2-offscreen,
select.select2-offscreen:focus,
.select2-offscreen.form-control,
.select2-offscreen.form-control:focus {
  position: absolute !important;
  clip: rect(0 0 0 0) !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  outline: 0 !important;
}
.select2-container .select2-choice,
.select2-container.form-control .select2-choice {
  height: var(--control-h) !important;
  line-height: 34px !important;
  padding: 0 0 0 11px !important;
  border: 1px solid var(--c-border-strong) !important;
  border-radius: var(--radius) !important;
  background: var(--c-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--c-text) !important;
  font-size: 14px !important;
}
.select2-container.form-control { height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.select2-container .select2-choice > .select2-chosen { margin: 0 34px 0 0 !important; padding: 0 !important; height: auto !important; line-height: 34px !important; color: var(--c-text) !important; }
.select2-container.select2-allowclear .select2-choice > .select2-chosen { margin-right: 52px !important; }
.select2-container .select2-choice .select2-arrow {
  right: 0 !important;
  width: 32px !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
}
.select2-container .select2-choice .select2-arrow::before,
.select2-container .select2-choice .select2-arrow::after,
.select2-container .select2-choice .select2-arrow b::before,
.select2-container .select2-choice .select2-arrow b::after { display: none !important; content: none !important; }
.select2-container .select2-choice .select2-arrow b {
  background: none !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px !important;
  height: 7px !important;
  margin: -6px 0 0 -4px;
  border-right: 1.5px solid var(--c-text-muted);
  border-bottom: 1.5px solid var(--c-text-muted);
  transform: rotate(45deg);
}
.select2-container .select2-choice abbr {
  right: 30px !important;
  top: 50% !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -8px;
  background: none !important;
  color: var(--c-text-muted);
  font-size: 15px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
}
.select2-container .select2-choice abbr::before { content: "\00d7"; }
.select2-container .select2-choice abbr:hover { background: var(--c-surface-hover) !important; color: var(--c-text); }
.select2-container-active .select2-choice,
.select2-container-active .select2-choices,
.select2-dropdown-open .select2-choice {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px var(--c-focus) !important;
}
.select2-dropdown-open .select2-choice { border-bottom-left-radius: var(--radius) !important; border-bottom-right-radius: var(--radius) !important; }
.select2-container.select2-container-disabled .select2-choice { background: var(--c-surface-muted) !important; }

.select2-container-multi .select2-choices {
  min-height: var(--control-h) !important;
  padding: 3px 6px !important;
  border: 1px solid var(--c-border-strong) !important;
  border-radius: var(--radius) !important;
  background: var(--c-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}
.select2-container-multi .select2-choices .select2-search-choice {
  margin: 3px 4px 3px 0 !important;
  padding: 3px 8px 3px 22px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--c-surface-muted) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--c-text) !important;
  font-size: 13px !important;
  line-height: 18px !important;
}
.select2-container-multi .select2-choices .select2-search-field input {
  padding: 4px 6px !important;
  margin: 1px 0 !important;
  min-height: 26px;
  font-size: 14px !important;
  color: var(--c-text) !important;
  background: transparent !important;
}

.select2-drop {
  margin-top: 4px;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-2) !important;
  background: var(--c-surface) !important;
  color: var(--c-text);
  z-index: 10600;
}
.select2-drop.select2-drop-above { margin-top: -4px; }
.select2-drop-active { border-color: var(--c-border) !important; }
.select2-search { padding: 8px 8px 4px !important; }
.select2-search input {
  height: 34px !important;
  min-height: 34px;
  padding: 6px 10px !important;
  border: 1px solid var(--c-border-strong) !important;
  border-radius: var(--radius) !important;
  background: var(--c-surface) !important;
  background-image: none !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
.select2-search input:focus { border-color: var(--c-primary) !important; box-shadow: 0 0 0 3px var(--c-focus) !important; }
.select2-results { padding: 4px !important; margin: 0 !important; max-height: 260px; }
.select2-results .select2-result-label {
  padding: 7px 10px !important;
  font-size: 14px !important;
  border-radius: var(--radius-sm);
  color: var(--c-text);
}
.select2-results .select2-highlighted { background: var(--c-primary-soft) !important; color: var(--c-text) !important; border-radius: var(--radius-sm); }
.select2-results .select2-highlighted .select2-result-label { color: var(--c-text) !important; }
.select2-results .select2-selected { display: none; }
.select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-more-results { background: transparent !important; padding: 8px 10px !important; color: var(--c-text-muted); }
/* DataTables "processing" notice (server-side tables, e.g. Customers) */
.dataTables_wrapper { position: relative; }
.dataTables_processing {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--c-text-secondary);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(23, 33, 43, 0.08);
}
/* Customers list */
.customers-table .customer-name { font-weight: 600; color: var(--c-text); }
.customers-table .customer-name:hover, .customers-table .customer-name:focus { color: var(--c-primary); text-decoration: none; }
.customers-table .customer-contact { margin-top: 2px; font-size: 12px; color: var(--c-text-muted); overflow-wrap: anywhere; }
.customers-table .customer-email { overflow-wrap: anywhere; }
.customers-table .col-name { min-width: 240px; }
.customers-table .col-phone { min-width: 130px; }
@media (max-width: 767px) { .customers-table .col-name { min-width: 0; } }
.customers-table .col-bookings { min-width: 110px; }
/* Customer search (reservation pages): name, then email / phone / bookings */
.customer-picker-drop .customer-option-name { font-weight: 500; line-height: 1.35; }
.customer-picker-drop .customer-option-detail { font-size: 12px; line-height: 1.4; color: var(--c-text-muted); overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   bootstrap-multiselect
   -------------------------------------------------------------------------- */
.multiselect.dropdown-toggle {
  width: 100%;
  justify-content: space-between;
  text-align: left;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-strong) !important;
  color: var(--c-text) !important;
}
.multiselect-container.dropdown-menu { max-height: 300px; overflow-y: auto; }
.multiselect-container > li > a > label { padding: 6px 12px 6px 32px !important; font-weight: 400 !important; color: var(--c-text) !important; }

/* --------------------------------------------------------------------------
   Dropdown menus (generic)
   -------------------------------------------------------------------------- */
.dropdown-menu {
  padding: 6px;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-2) !important;
  font-size: 13.5px;
}
.dropdown-menu > li > a { padding: 7px 10px; border-radius: var(--radius-sm); color: var(--c-text); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--c-surface-hover); color: var(--c-text); }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover { background: var(--c-primary-soft) !important; color: var(--c-primary) !important; }

/* --------------------------------------------------------------------------
   Date / time pickers
   -------------------------------------------------------------------------- */
.datepicker.dropdown-menu,
.datepicker-dropdown {
  padding: 10px !important;
  border-radius: var(--radius-lg) !important;
  font-family: var(--font) !important;
  font-size: 13px;
  z-index: 10600 !important;
}
.datepicker table tr td, .datepicker table tr th {
  width: 34px !important;
  height: 32px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px;
  text-shadow: none !important;
}
.datepicker table tr td.day:hover, .datepicker table tr td.focused { background: var(--c-surface-hover) !important; }
.datepicker table tr td.today { background: var(--c-primary-soft) !important; color: var(--c-primary) !important; background-image: none !important; }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.active,
.datepicker table tr td span.active, .datepicker table tr td span.active:hover {
  background: var(--c-primary) !important;
  background-image: none !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
  text-shadow: none !important;
}
.datepicker table tr td.old, .datepicker table tr td.new { color: #b2bcc6 !important; }
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { color: #c8cfd6 !important; background: transparent !important; }
.datepicker .datepicker-switch, .datepicker .prev, .datepicker .next { font-weight: 600; }
.datepicker .datepicker-switch:hover, .datepicker .prev:hover, .datepicker .next:hover { background: var(--c-surface-hover) !important; }
.datepicker table tr th.dow { color: var(--c-text-muted); font-weight: 500; font-size: 12px; }

.ui-datepicker {
  padding: 10px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--c-surface) !important;
  box-shadow: var(--shadow-2) !important;
  font-family: var(--font) !important;
  z-index: 10600 !important;
}
.ui-datepicker .ui-datepicker-header { background: transparent !important; border: 0 !important; color: var(--c-text) !important; padding: 4px 0 8px !important; }
.ui-datepicker .ui-datepicker-title { font-weight: 600; font-size: 14px; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { top: 4px !important; border-radius: var(--radius-sm); cursor: pointer; }
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { background: var(--c-surface-hover) !important; border: 0 !important; }
.ui-datepicker th { color: var(--c-text-muted); font-weight: 500; font-size: 12px; }
.ui-datepicker td a, .ui-datepicker td span {
  text-align: center !important;
  padding: 6px 0 !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  color: var(--c-text) !important;
  font-size: 13px;
}
.ui-datepicker td a:hover { background: var(--c-surface-hover) !important; }
.ui-datepicker td.ui-datepicker-today a { background: var(--c-primary-soft) !important; color: var(--c-primary) !important; }
.ui-datepicker td a.ui-state-active,
.ui-datepicker td.ui-state-highlight a,
.ui-datepicker td.ui-datepicker-current-day a { background: var(--c-primary) !important; color: #fff !important; }
.ui-datepicker td.ui-datepicker-unselectable span { color: #c8cfd6 !important; }
.ui-timepicker-div dl dt { font-size: 12.5px; color: var(--c-text-secondary); }
.ui-timepicker-div .ui-widget-header {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  border-radius: 0 !important;
  color: var(--c-text) !important;
  font-weight: 600;
  padding: 4px 0 8px !important;
  margin-bottom: 6px;
}
.ui-timepicker-div .ui-timepicker-select {
  height: 32px;
  min-width: 72px;
  padding: 2px 6px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 13px;
}
.ui-datepicker .ui-datepicker-buttonpane button { font-family: var(--font); border-radius: var(--radius) !important; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table {
  color: var(--c-text) !important;
  font-weight: 400 !important;
  font-size: 13.5px;
  margin-bottom: 0;
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table thead th,
.main-content .page-content .table thead th {
  background: var(--c-surface-muted) !important;
  color: var(--c-text-secondary) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px 12px !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  vertical-align: middle !important;
  white-space: nowrap;
}
.table > thead > tr > th:first-child { border-top-left-radius: var(--radius); }
.table > thead > tr > th:last-child { border-top-right-radius: var(--radius); }
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 11px 12px !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  vertical-align: middle !important;
  font-weight: 400;
  color: var(--c-text);
}
.table > tbody > tr:last-child > td { border-bottom: 0 !important; }
.table td strong { font-weight: 600; }
.table-hover > tbody > tr:hover > td,
.table.dataTable > tbody > tr:hover > td,
.table-dynamic > tbody > tr:hover > td { background-color: var(--c-surface-hover); }
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > td { background-color: #fbfcfd; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border: 1px solid var(--c-border) !important; }
.table-bordered { border-radius: var(--radius); }
.table .badge, .table .label { font-weight: 600; }
.table tr.active > td { background: var(--c-primary-soft) !important; }

/* Tables wider than their card scroll inside it instead of breaking the page */
.table-responsive,
.force-table-responsive,
.dataTables_wrapper .dt-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 0 !important;
  margin-bottom: 0;
}
.force-table-responsive { width: 100%; }

/* DataTables */
.dataTables_wrapper { position: relative; clear: both; margin: 0 !important; padding: 0 !important; }
.dataTables_wrapper::after { content: ""; display: table; clear: both; }
.main-content .page-content .dataTables_wrapper .row,
.dataTables_wrapper .row { margin-left: 0 !important; margin-right: 0 !important; }
.main-content .page-content .dataTables_wrapper .row > [class*="col-"],
.dataTables_wrapper .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
.dataTables_length, .dataTables_filter { margin-bottom: 12px !important; }
.dataTables_length label,
.dataTables_filter label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--c-text-secondary) !important;
  font-weight: 400 !important;
}
.dataTables_length select,
.dataTables_wrapper .dataTables_length .form-control {
  width: auto !important;
  min-width: 72px;
  display: inline-block !important;
  height: 34px !important;
  padding: 4px 28px 4px 10px !important;
  border: 1px solid var(--c-border-strong) !important;
  border-radius: var(--radius) !important;
  background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='none' stroke='%237b8794' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  -webkit-appearance: none;
  appearance: none;
  font-size: 13.5px !important;
}
.dataTables_length .select2-container { width: 84px !important; display: inline-block !important; }
.dataTables_filter { text-align: right; }
.dataTables_filter input,
.dataTables_wrapper .dataTables_filter input.form-control {
  width: 240px !important;
  max-width: 100%;
  height: 34px !important;
  margin: 0 !important;
  padding: 6px 10px 6px 32px !important;
  border: 1px solid var(--c-border-strong) !important;
  border-radius: var(--radius) !important;
  background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237b8794' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
}
.dataTables_filter input:focus { border-color: var(--c-primary) !important; box-shadow: 0 0 0 3px var(--c-focus) !important; outline: none; }
.dataTables_info {
  padding-top: 14px !important;
  font-size: 13px !important;
  color: var(--c-text-muted) !important;
}
.dataTables_paginate { padding-top: 10px !important; text-align: right; }
.dataTables_paginate .pagination,
.pagination {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 !important;
  border-radius: 0;
}
.pagination > li > a,
.pagination > li > span,
.dataTables_paginate .paginate_button,
.dataTables_paginate .pagination > li > a {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px !important;
  margin: 0 !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius) !important;
  background: var(--c-surface) !important;
  color: var(--c-text-secondary) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.pagination > li > a:hover,
.dataTables_paginate .paginate_button:hover { background: var(--c-surface-hover) !important; color: var(--c-text) !important; }
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
}
.pagination > .disabled > a,
.pagination > .disabled > span,
.dataTables_paginate .paginate_button.disabled { opacity: 0.45; cursor: default; background: var(--c-surface) !important; }

table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; width: 100% !important; }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { cursor: pointer; position: relative; padding-right: 26px !important; background-image: none !important; }
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #b3bdc7;
  opacity: 1;
  font-family: inherit !important;
}
table.dataTable thead .sorting_asc::after { border-top: 0; border-bottom: 5px solid var(--c-primary); margin-top: -3px; }
table.dataTable thead .sorting_desc::after { border-top-color: var(--c-primary); }
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before { display: none !important; }
table.dataTable thead th:empty::after { display: none !important; }
table.dataTable thead th:empty { cursor: default; padding-right: 12px !important; }
table.dataTable td.dataTables_empty { text-align: center; color: var(--c-text-muted); padding: 32px 12px !important; }

/* Export toolbar created by the table scripts */
.DTTT_container, .dt-buttons, .dt-export-toolbar {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 6px;
  float: none !important;
  margin: 0 0 12px !important;
}
.DTTT_container .btn, .DTTT_container a.DTTT_button, .dt-buttons .btn, .dt-export-toolbar .btn {
  min-height: 32px;
  padding: 5px 10px !important;
  font-size: 13px !important;
  border-radius: var(--radius) !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-strong) !important;
  color: var(--c-text-secondary) !important;
}
.DTTT_container .btn:hover, .dt-buttons .btn:hover, .dt-export-toolbar .btn:hover { background: var(--c-surface-hover) !important; color: var(--c-text) !important; }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.nav-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 4px;
  border-bottom: 1px solid var(--c-border) !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 0;
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs::before, .nav-tabs::after { display: none !important; }
.nav-tabs > li { float: none !important; margin: 0 0 -1px !important; flex: 0 0 auto; }
.nav-tabs > li > a,
.nav.nav-tabs > li > a,
.tabs-linetriangle .nav.nav-tabs > li > a {
  display: block;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--c-text-secondary) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  white-space: nowrap;
  box-shadow: none !important;
}
.nav-tabs > li > a:hover { color: var(--c-text) !important; border-bottom-color: var(--c-border-strong) !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.tabs-linetriangle .nav.nav-tabs > li.active > a {
  color: var(--c-primary) !important;
  border-bottom-color: var(--c-primary) !important;
  background: transparent !important;
}
.nav-tabs > li > a::before, .nav-tabs > li > a::after,
.tabs-linetriangle .nav-tabs li a::before, .tabs-linetriangle .nav-tabs li a::after,
.tabs-linetriangle .nav-tabs li.active a::before, .tabs-linetriangle .nav-tabs li.active a::after { display: none !important; }
.nav-tabs > li > a span, .tabs-linetriangle .nav-tabs li a span { color: inherit !important; font-weight: inherit !important; }
.nav-tabs.nav-primary, .nav-tabs.bg-dark, .nav-tabs.nav-red, .tabs-linetriangle .nav-tabs { background: transparent !important; }
.tab-content { background: transparent !important; padding: 16px 0 0 !important; border: 0 !important; box-shadow: none !important; }
.tabs-linetriangle, .tab_left { background: transparent !important; }

/* Vertical tabs (.tab_left) */
@media (min-width: 768px) {
  .tab_left { display: flex; gap: 20px; align-items: flex-start; }
  .tab_left > .nav-tabs {
    flex: 0 0 200px;
    width: 200px !important;
    flex-direction: column;
    overflow: visible;
    border-bottom: 0 !important;
    border-right: 1px solid var(--c-border) !important;
    gap: 2px;
    padding-right: 8px !important;
    float: none !important;
  }
  .tab_left > .nav-tabs > li { width: 100%; margin: 0 !important; }
  .tab_left > .nav-tabs > li > a { border-bottom: 0 !important; border-radius: var(--radius) !important; padding: 8px 12px !important; }
  .tab_left > .nav-tabs > li.active > a { background: var(--c-primary-soft) !important; }
  .tab_left > .tab-content { flex: 1 1 auto; min-width: 0; padding-top: 0 !important; float: none !important; width: auto !important; }
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
.modal-backdrop { position: fixed !important; background: #0b1520 !important; }
.modal-backdrop.in { opacity: 0.45 !important; }
.modal { padding-right: 0 !important; }
.modal-dialog,
.modal.modal-topfull .modal-dialog,
.modal-topfull .modal-dialog,
.modal-dialog.modal-topfull {
  width: auto;
  max-width: 560px;
  margin: 48px auto !important;
  padding: 0 16px;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  position: relative !important;
  transform: none;
}
.modal.fade .modal-dialog { transform: translateY(12px); transition: transform 0.2s ease-out; }
.modal.in .modal-dialog { transform: none; }
.modal-lg, .modal-dialog.modal-lg { max-width: 920px; }
.modal-wide .modal-dialog, .modal.modal-wide .modal-dialog { width: auto !important; max-width: 1100px !important; }
.modal-content {
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-3) !important;
  background: var(--c-surface) !important;
  overflow: hidden;
  width: auto;
}
.modal-content.modal-lg { max-width: none; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
}
.modal-header::before, .modal-header::after { display: none !important; }
.modal-header .modal-title,
.modal-title {
  order: 0;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  text-transform: none !important;
  line-height: 1.4;
}
.modal-title strong { font-weight: 600 !important; }
.modal-header h2, .modal-header h3, .modal-header h4 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  text-transform: none !important;
}
.modal-header > hr { display: none; }
.modal-header[class*="bg-"] { background: var(--c-surface) !important; color: var(--c-text) !important; }
.modal-body[style*="margin-top"] { margin-top: 0 !important; }
.main-content .page-content > .header:has(.breadcrumb:empty) { display: none; }
.modal-body h3 { font-size: 15px !important; margin: 0 0 12px !important; }
.panel-content h3, .panel .panel-content h3 { font-size: 15px !important; font-weight: 600 !important; margin: 0 0 14px !important; text-transform: none !important; }
.panel-content h3 strong { font-weight: 600 !important; }
.panel-content .name { font-size: 14px !important; font-weight: 600; color: var(--c-text); margin: 8px 0 4px; }
.modal-header .close {
  order: 1;
  float: none !important;
  margin: 0 0 0 auto !important;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6 !important;
  color: var(--c-text) !important;
  text-shadow: none !important;
  font-size: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  position: static !important;
}
.modal-header .close:hover { background: var(--c-surface-hover) !important; opacity: 1 !important; }
.modal-header .close i { font-size: 13px; }
.modal-body { padding: 20px !important; color: var(--c-text); }
.modal-body > hr:first-child { display: none; }
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px !important;
  border-top: 1px solid var(--c-border) !important;
  background: var(--c-surface-muted) !important;
}
.modal-footer::before, .modal-footer::after { display: none !important; }
.modal-footer .btn + .btn { margin-left: 0 !important; }
.modal-footer .btn { margin: 0 !important; }

/* Side-sheet variant */
.modal.modal-slideright .modal-dialog { max-width: 520px; margin: 0 0 0 auto !important; height: 100%; padding: 0; }
.modal.modal-slideright .modal-content { height: 100%; border-radius: 0 !important; overflow-y: auto; }

/* bootbox */
.bootbox .modal-dialog { max-width: 440px; }

/* --------------------------------------------------------------------------
   Badges, labels, progress, misc
   -------------------------------------------------------------------------- */
.badge, .label {
  display: inline-flex;
  align-items: center;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.badge-danger, .label-danger { background: var(--c-danger-soft) !important; color: var(--c-danger) !important; }
.badge-warning, .label-warning { background: var(--c-warning-soft) !important; color: var(--c-warning) !important; }
.badge-success, .label-success { background: var(--c-success-soft) !important; color: var(--c-success) !important; }
.badge-primary, .label-primary, .badge-info, .label-info { background: var(--c-primary-soft) !important; color: var(--c-primary) !important; }
.badge-default, .label-default { background: #eef1f4 !important; color: var(--c-text-secondary) !important; }
.badge-dark, .label-dark { background: var(--c-dark) !important; color: #fff !important; }

.progress { height: 8px; border-radius: 999px; background: #e9edf1; box-shadow: none; }
.progress-bar { background: var(--c-primary); box-shadow: none; }

.well { background: var(--c-surface-muted); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: none; }
.list-group-item { border-color: var(--c-border); }
.list-group-item:first-child { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.list-group-item:last-child { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }

.tooltip-inner { background: var(--c-dark); border-radius: var(--radius); font-size: 12px; padding: 5px 9px; font-family: var(--font); }
.tooltip.top .tooltip-arrow { border-top-color: var(--c-dark); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--c-dark); }
.tooltip.left .tooltip-arrow { border-left-color: var(--c-dark); }
.tooltip.right .tooltip-arrow { border-right-color: var(--c-dark); }
.popover { border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); font-family: var(--font); }

/* Toast notifications (noty) */
.noty_bar, #noty_topRight_layout_container li, #noty_bottomRight_layout_container li {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-2) !important;
}

/* Background colour helpers used for icons and tiles */
.bg-primary:not(i), .bg-blue:not(i) { background-color: var(--c-primary) !important; color: #fff !important; }
.bg-dark:not(i):not(.nav-tabs) { background-color: var(--c-dark) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   Dashboard widgets
   -------------------------------------------------------------------------- */
/* Quick links (Home_Menu) */
.panel .panel-content.widget-info {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 16px 18px !important;
  min-height: 0;
}
.panel .panel-content.widget-info > .row { margin: 0 !important; width: 100%; }
.panel .panel-content.widget-info > .row > a,
.panel .panel-content.widget-info > a {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none !important;
}
.panel:has(> .panel-content.widget-info) { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.panel:has(> .panel-content.widget-info):hover { border-color: var(--c-border-strong) !important; box-shadow: var(--shadow-2) !important; }
.widget-info .left, .widget-info .right { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
.widget-info .left i,
.widget-info .left i[class*="icon-"] {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.widget-info .left i::before {
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
  color: inherit !important;
  line-height: 1 !important;
  font-size: 18px !important;
}
.widget-info .left i.bg-blue   { background: #e6f0f9 !important; color: #1d5fb8 !important; }
.widget-info .left i.bg-green  { background: #e5f4ef !important; color: #127a57 !important; }
.widget-info .left i.bg-purple { background: #efeafa !important; color: #5b3fb0 !important; }
.widget-info .left i.bg-pink   { background: #fbe9f0 !important; color: #a3305d !important; }
.widget-info .left i.bg-orange { background: #fdf0e1 !important; color: #a35a00 !important; }
.widget-info .right .number,
.widget-info .right p.number {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.widget-info .right .text,
.widget-info .right p.text { font-size: 12.5px !important; color: var(--c-text-muted) !important; text-transform: none !important; margin: 2px 0 0 !important; }
.panel a:hover .widget-info, a > .panel:hover { border-color: var(--c-border-strong) !important; }

.widget-small, .widget-small .panel-content { border-radius: var(--radius-lg) !important; }
.widget-table .withScroll, .withScroll { max-height: none; }
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: rgba(23, 33, 43, 0.25) !important; }
.mCSB_scrollTools .mCSB_draggerRail { background: transparent !important; }

/* Daily report tabs */
.tabs-linetriangle .nav.nav-tabs[style*="background"] { background: transparent !important; }

/* --------------------------------------------------------------------------
   Calendars (FullCalendar 2)
   -------------------------------------------------------------------------- */
.calendar-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.calendar-legend__item {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: #fff !important;
}
.fc { font-family: var(--font); }
.fc .fc-toolbar { margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.fc .fc-toolbar::after { display: none; }
.fc .fc-toolbar > * { float: none !important; }
.fc .fc-toolbar h2 { font-size: 18px !important; font-weight: 600 !important; color: var(--c-text) !important; margin: 0 !important; }
.fc button, .fc .fc-button {
  height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid var(--c-border-strong) !important;
  background: var(--c-surface) !important;
  background-image: none !important;
  color: var(--c-text) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-size: 13px !important;
  text-transform: none !important;
}
.fc .fc-state-hover { background: var(--c-surface-hover) !important; }
.fc .fc-state-active, .fc .fc-state-down { background: var(--c-primary-soft) !important; color: var(--c-primary) !important; border-color: var(--c-primary-soft) !important; }
.fc .fc-state-disabled { opacity: 0.5; }
.fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-row,
.fc-unthemed .fc-divider, .fc-unthemed .fc-popover { border-color: var(--c-border) !important; }
.fc th.fc-widget-header, .fc .fc-day-header {
  background: var(--c-surface-muted) !important;
  padding: 8px 0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--c-text-secondary) !important;
}
.fc-basic-view .fc-day-number, .fc .fc-day-number {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 8px !important;
  color: var(--c-text-secondary) !important;
  opacity: 1 !important;
}
.fc .fc-day-number.fc-past { color: var(--c-text-muted) !important; }
.fc .fc-day-number.fc-other-month { opacity: 0.4 !important; }
.fc-unthemed .fc-today { background: var(--c-primary-soft) !important; }
.fc-event, .fc-event:hover {
  border: 0 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 12px !important;
}
.fc-event .fc-title, .fc-event .fc-time { color: inherit !important; }
.fc-content { height: auto !important; }
@media (max-width: 767px) {
  .fc .fc-toolbar { flex-direction: column; align-items: stretch; }
  .fc .fc-toolbar > * { display: flex; justify-content: center; }
  .fc th.fc-widget-header { font-size: 11px !important; }
}

/* A menu entry marked nav-parent without a sub-menu should not show a chevron */
.sidebar .sidebar-inner .nav-sidebar .nav-parent:not(:has(> .children)) > a::after { display: none !important; }

/* --------------------------------------------------------------------------
   Session-timeout dialog
   -------------------------------------------------------------------------- */
#session-timeout .modal-dialog { max-width: 420px; }

/* --------------------------------------------------------------------------
   Sign-in, lock, verification and error pages
   -------------------------------------------------------------------------- */
html body.auth-shell {
  min-height: 100vh;
  height: auto !important;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: var(--c-sidebar) !important;
  background-image: radial-gradient(1200px 600px at 50% -10%, rgba(91, 184, 209, 0.10), transparent 60%) !important;
  color: var(--c-text);
  overflow-y: auto;
}
.auth-shell > form { width: 100%; display: flex; flex-direction: column; align-items: center; }
.auth-brand { display: flex; justify-content: center; margin: 0 0 24px; }
.auth-brand img { height: 44px; width: auto; display: block; }
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--c-surface);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
  padding: 32px;
}
.auth-card--wide { max-width: 560px; }
.auth-card h1 {
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 0 0 6px !important;
  color: var(--c-text) !important;
  letter-spacing: -0.01em;
}
.auth-card .auth-lead { color: var(--c-text-secondary); font-size: 14px; margin: 0 0 24px; }
.auth-card .form-group { margin-bottom: 16px; }
.auth-card .form-control { height: 42px !important; font-size: 15px !important; }
.auth-card .btn-block { min-height: 42px; font-size: 15px !important; margin-top: 8px; }
.auth-card .field-error { display: block; margin-top: 4px; }
.auth-user { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px; }
.auth-user img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--c-border); margin-bottom: 12px; }
.auth-error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--c-danger-soft);
  border: 1px solid #f5c6c2;
  color: #8f1c13;
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13.5px;
  margin: 0 0 16px;
}
.auth-error:empty { display: none; }
.auth-footer {
  margin: 24px 0 0;
  font-size: 12.5px;
  color: rgba(169, 181, 193, 0.75) !important;
  text-align: center;
}
.auth-footer span, .auth-footer small { color: inherit !important; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.auth-actions .btn { flex: 1 1 auto; }
.auth-code {
  font-size: 44px !important;
  font-weight: 700 !important;
  color: var(--c-primary) !important;
  letter-spacing: -0.02em;
  margin: 0 0 4px !important;
  line-height: 1;
}
.auth-details { margin-top: 20px; border-top: 1px solid var(--c-border); padding-top: 12px; }
.auth-details summary { cursor: pointer; color: var(--c-text-secondary); font-size: 13px; font-weight: 500; }
.auth-details pre, .auth-details .auth-details-body {
  margin-top: 10px;
  max-height: 260px;
  overflow: auto;
  font-family: var(--font-mono) !important;
  font-size: 12px;
  background: var(--c-surface-muted);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 480px) {
  .auth-card { padding: 24px 20px; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* Off-canvas sidebar below 1025px (layout.js toggles body.sidebar-show) */
@media (max-width: 1024px) {
  body, body.fixed-sidebar, body.fixed-topbar { position: relative; overflow-x: hidden; }
  .sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0;
    left: 0 !important;
    width: min(var(--sidebar-w), 86vw) !important;
    height: 100% !important;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 1060 !important;
    box-shadow: none;
  }
  body.sidebar-show .sidebar { transform: none; box-shadow: var(--shadow-3); }
  .sidebar .sidebar-footer { width: min(var(--sidebar-w), 86vw) !important; }
  body.sidebar-show .main-content,
  body.sidebar-show .topbar,
  .main-content { margin-left: 0 !important; left: 0 !important; transform: none !important; }
  body.fixed-topbar .topbar,
  body.fixed-topbar.sidebar-show .topbar,
  body.fixed-topbar.sidebar-collapsed .topbar { left: 0 !important; }
  .admin-ui-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 21, 32, 0.45);
    z-index: 1055;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  body.sidebar-show .admin-ui-backdrop { opacity: 1; visibility: visible; }
  body.sidebar-show { overflow: hidden; }
}
@media (min-width: 1025px) { .admin-ui-backdrop { display: none; } }

@media (max-width: 991px) {
  :root { --gutter: 16px; }
  /* Right-hand settings column stacks under the form */
  .page-profil .profil-right,
  .profil-right {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
    margin-top: 16px;
  }
  .page-profil .profil-header,
  .profil-header,
  [style*="min-height: 865px"],
  [style*="min-height:865px"],
  [style*="min-height: 800px"] { min-height: 0 !important; height: auto !important; }
  [style*="height: 1006px"], [style*="height:1006px"],
  [style*="height: 865px"], [style*="height: 826px"],
  [style*="height: 630px"], [style*="height: 504px"],
  [style*="min-height: 640px"] { height: auto !important; min-height: 0 !important; }
}

@media (max-width: 767px) {
  :root { --gutter: 12px; --control-h: 40px; }
  body { font-size: 14px; }

  .main-content .page-content { padding: calc(var(--topbar-h) + 12px) 12px 0 !important; }
  .main-content .page-content > .row.p-t-30 > [class*="col-"],
  .main-content .page-content .row > .col-lg-12 { padding-left: 0; padding-right: 0; }
  .main-content .page-content .row { margin-left: 0; margin-right: 0; }
  .main-content .page-content [class*="col-"] { padding-left: 0; padding-right: 0; }
  .main-content .page-content .panel-content .row > [class*="col-"],
  .main-content .page-content .modal .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }
  .main-content .page-content .panel-content .row,
  .main-content .page-content .modal .row { margin-left: -6px; margin-right: -6px; }

  .topbar { padding: 0 8px 0 4px; }
  .topbar .header-right .header-menu #user-header > a .username { display: none; }
  .topbar .header-right .header-menu > li#notifications-header { display: flex !important; }

  .panel, .main-content .page-content .panel { margin-bottom: 12px; border-radius: var(--radius-lg) !important; }
  .main-content .page-content .panel > .panel-header, .panel > .panel-header { padding: 14px 14px !important; }
  .main-content .page-content .panel .panel-content, .panel .panel-content { padding: 14px !important; }
  .panel > .panel-header .btn-group,
  .panel > .panel-header > div:last-child:not(:first-child) { width: 100%; }
  .panel > .panel-header .btn-group > .btn,
  .panel > .panel-header > div:last-child:not(:first-child) > .btn { width: 100%; }

  /* Comfortable touch targets; 16px text keeps iOS from zooming on focus */
  .form-control,
  input[type="text"].form-control,
  input[type="password"].form-control,
  select.form-control,
  .form-control:focus,
  .select2-container .select2-choice,
  .select2-search input,
  .dataTables_filter input,
  .dataTables_length select { font-size: 16px !important; }
  .select2-container .select2-choice { height: var(--control-h) !important; line-height: 38px !important; }
  .select2-container .select2-choice > .select2-chosen { line-height: 38px !important; }
  .btn { min-height: 40px; }
  .btn-sm, .table td .btn-sm { min-height: 36px; min-width: 36px; }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter { float: none !important; text-align: left !important; width: 100%; }
  .dataTables_filter input, .dataTables_wrapper .dataTables_filter input.form-control { width: 100% !important; }
  .dataTables_filter label { display: flex !important; width: 100%; }
  .dataTables_info, .dataTables_paginate { float: none !important; text-align: center !important; width: 100%; }
  .dataTables_paginate .pagination { justify-content: center; }
  .dataTables_wrapper .row > [class*="col-"] { width: 100%; float: none; }

  .table > thead > tr > th, .table > tbody > tr > td { padding: 10px 10px !important; }

  /* Dialogs become near full-screen sheets */
  .modal-dialog,
  .modal.modal-topfull .modal-dialog,
  .modal-lg, .modal-dialog.modal-lg,
  .modal-wide .modal-dialog,
  .modal .modal-dialog[style*="width"] {
    width: auto !important;
    max-width: none !important;
    margin: 8px !important;
    padding: 0 !important;
  }
  .modal-content, .modal-content[style*="width"] { width: auto !important; max-width: 100% !important; }
  .modal-body { padding: 16px !important; }
  .modal-footer { padding: 12px 16px !important; }
  .modal-footer .btn { flex: 1 1 auto; }

  .alert { padding: 12px 40px 12px 14px !important; }

  .row.filter-bar > [class*="col-"] { flex-basis: 100%; }
  .row.filter-bar > .filter-actions .btn { width: 100% !important; }

  /* Inline fixed widths from older markup */
  [style*="width: 600px"], [style*="width:600px"],
  [style*="width: 1000px"], [style*="width:1000px"],
  [style*="width: 550px"], [style*="max-width: 550px"] { width: auto !important; max-width: 100% !important; }
  td[style*="min-width: 200px"], th[style*="min-width: 200px"] { min-width: 0 !important; }

  .main-content .page-content > .header { margin-bottom: 12px !important; }
  .scrollup { display: none !important; }

  /* Dashboard quick links: 2 x 2 on phones */
  .main-content .page-content [class*="col-"]:has(> .panel > .panel-content.widget-info) {
    float: left;
    width: 50%;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .main-content .page-content [class*="col-"]:has(> .panel > .panel-content.widget-info):nth-child(odd) { padding-right: 6px !important; }
  .main-content .page-content [class*="col-"]:has(> .panel > .panel-content.widget-info):nth-child(even) { padding-left: 6px !important; }
  .panel .panel-content.widget-info { padding: 14px !important; }
  .panel .panel-content.widget-info > .row > a { flex-direction: column; align-items: flex-start; gap: 10px; }
  .widget-info .right .text, .widget-info .right p.text { display: none; }
}
@media (max-width: 767px) {
  .widget-table td strong,
  .classgreyprice, .classwarningprice { white-space: nowrap; }
  .main-content .page-content > .footer { text-align: center; }
}

/* Section printing (printDiv in admin-ui.js) */
#admin-ui-print { display: none; }
@media print {
  body.admin-ui-printing > *:not(#admin-ui-print) { display: none !important; }
  body.admin-ui-printing #admin-ui-print { display: block !important; padding: 0; }
  #admin-ui-print .btn, #admin-ui-print [onclick*="printDiv"] { display: none !important; }
}

@media print {
  .sidebar, .topbar, .main-content .page-content > .header, .footer, .scrollup, .admin-ui-backdrop { display: none !important; }
  .main-content { margin: 0 !important; }
  .main-content .page-content { padding: 0 !important; }
  .panel { border: 0 !important; box-shadow: none !important; }
}