/* ===== Dynamic Branding - Logo Sizing ===== */

.s-site-logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.s-form-title-logo {
  height: 125px;
  width: auto;
  object-fit: contain;
}

/* ============================================================
   Dynamic Theme System — all colors from CSS custom properties
   injected via appsettings.json → _LayoutHead.cshtml
   ============================================================ */

/* ----- Bootstrap overrides: Primary button ----- */
.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-bg: var(--app-primary-active);
  --bs-btn-active-border-color: var(--app-primary-active);
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}

/* ----- Bootstrap overrides: Secondary button ----- */
.btn-secondary {
  --bs-btn-bg: var(--app-secondary);
  --bs-btn-border-color: var(--app-secondary);
  --bs-btn-hover-bg: var(--app-secondary-hover);
  --bs-btn-hover-border-color: var(--app-secondary-hover);
  --bs-btn-active-bg: var(--app-secondary-hover);
  --bs-btn-active-border-color: var(--app-secondary-hover);
}

/* ----- Bootstrap overrides: Outline primary button ----- */
.btn-outline-primary {
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-active-bg: var(--app-primary-active);
  --bs-btn-active-border-color: var(--app-primary-active);
}

/* ----- Bootstrap overrides: Status buttons ----- */
.btn-success {
  --bs-btn-bg: var(--app-success);
  --bs-btn-border-color: var(--app-success);
}

.btn-warning {
  --bs-btn-bg: var(--app-warning);
  --bs-btn-border-color: var(--app-warning);
}

.btn-danger {
  --bs-btn-bg: var(--app-danger);
  --bs-btn-border-color: var(--app-danger);
}

.btn-info {
  --bs-btn-bg: var(--app-info);
  --bs-btn-border-color: var(--app-info);
}

/* ----- Bootstrap overrides: Alerts ----- */
.alert-success { --bs-alert-color: var(--app-success); }
.alert-warning { --bs-alert-color: var(--app-warning); }
.alert-danger  { --bs-alert-color: var(--app-danger);  }
.alert-info    { --bs-alert-color: var(--app-info);    }

/* ----- Bootstrap overrides: Links ----- */
a {
  color: var(--app-link);
}

a:hover {
  color: var(--app-link-hover);
}

/* ----- Bootstrap overrides: Text utilities ----- */
.text-primary { color: var(--app-primary) !important; }
.text-secondary { color: var(--app-text-secondary) !important; }
.text-success { color: var(--app-success) !important; }
.text-warning { color: var(--app-warning) !important; }
.text-danger { color: var(--app-danger) !important; }
.text-info { color: var(--app-info) !important; }
.text-muted { color: var(--app-text-muted) !important; }

/* ----- Bootstrap overrides: Background utilities ----- */
.bg-primary { background-color: var(--app-primary) !important; }
.bg-success { background-color: var(--app-success) !important; }
.bg-warning { background-color: var(--app-warning) !important; }
.bg-danger  { background-color: var(--app-danger) !important; }
.bg-info    { background-color: var(--app-info) !important; }

/* ----- Bootstrap overrides: Borders ----- */
.border { border-color: var(--app-border) !important; }
.border-primary { border-color: var(--app-primary) !important; }
.border-success { border-color: var(--app-success) !important; }
.border-danger  { border-color: var(--app-danger) !important; }

/* ----- Global body text ----- */
body {
  color: var(--app-text-primary);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--app-heading);
}

/* ----- Form focus states ----- */
.form-control:focus,
.form-select:focus {
  border-color: var(--app-focus-border);
  box-shadow: 0 0 0 0.25rem var(--app-focus-shadow);
}

/* ----- Cards & Modals ----- */
.card {
  background-color: var(--app-card-bg);
  border-color: var(--app-border);
}

.modal-content {
  background-color: var(--app-modal-bg);
  border-color: var(--app-border);
}

/* ----- Sidebar / Navigation ----- */
.s-sidebar-header {
  background-color: var(--app-sidebar) !important;
  color: var(--app-sidebar-text);
}

.s-sidebar-header .s-sidebar-header-title {
  color: var(--app-sidebar-text);
}

.s-sidebar-header .s-sidebar-header-link {
  color: var(--app-sidebar-text);
}

.s-sidebar .s-sidebar-item.active > .s-sidebar-link {
  background-color: var(--app-sidebar-active);
}

/* ----- Navigation heading color (top-level sidebar links) ----- */
.s-sidebar-menu > li > .s-sidebar-link,
.s-sidebar-menu > li > .s-sidebar-link .s-sidebar-icon,
.s-sidebar-menu > li > .s-sidebar-link .s-sidebar-link-text {
  color: var(--app-nav-heading) !important;
}

.s-sidebar-menu > li > .s-sidebar-link:hover,
.s-sidebar-menu > li > .s-sidebar-link:hover .s-sidebar-icon,
.s-sidebar-menu > li > .s-sidebar-link:hover .s-sidebar-link-text,
.s-sidebar-menu > li.active > .s-sidebar-link,
.s-sidebar-menu > li.active > .s-sidebar-link .s-sidebar-icon,
.s-sidebar-menu > li.active > .s-sidebar-link .s-sidebar-link-text {
  color: var(--app-nav-heading-hover) !important;
}

/* ----- Sidebar pane: push content below 48px header ----- */
.s-sidebar-pane {
  padding-top: 48px;
}

/* ----- Sidebar search bar (matches grid toolbar search style) ----- */
.s-sidebar-search {
  display: flex !important;
  align-items: center;
  position: relative;
  margin: 10px 12px !important;
  padding: 0 !important;
}

.s-sidebar-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  z-index: 1;
  font-size: 14px;
}

.s-sidebar-search-input {
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  color: #333;
  padding: 5px 8px 5px 30px;
  font-size: 13px;
  line-height: 23px;
  outline: none;
}

.s-sidebar-search-input::placeholder {
  color: #aaa;
}

.s-sidebar-search-input:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ----- Auth pages (no-navigation) ----- */
.no-navigation body,
body.no-navigation {
  background-color: var(--app-bg);
}

.no-navigation .s-form-title-logo {
  background-color: var(--app-logo-bg);
  border-radius: 8px;
  padding: 4px;
}

.no-navigation .s-Panel {
  background: var(--app-card-bg);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ----- Serenity grid / dialog toolbar ----- */
.s-DataGrid .s-Toolbar,
.s-TemplatedDialog .s-Toolbar {
  border-bottom-color: var(--app-border);
}

.s-DataGrid .s-Toolbar .tool-button:hover {
  color: var(--app-primary);
}

/* ----- Serenity dialog title bar ----- */
.s-TemplatedDialog .s-DialogTitle {
  color: var(--app-heading);
}

/* ----- Serenity quick filter & search ----- */
.quick-filters-bar .quick-filter .editor:focus {
  border-color: var(--app-focus-border);
}

/* ----- Badge overrides ----- */
.badge.bg-primary { background-color: var(--app-primary) !important; }
.badge.bg-success { background-color: var(--app-success) !important; }
.badge.bg-warning { background-color: var(--app-warning) !important; }
.badge.bg-danger  { background-color: var(--app-danger) !important; }
.badge.bg-info    { background-color: var(--app-info) !important; }
.badge.bg-secondary { background-color: var(--app-secondary) !important; }

/* ----- Pagination ----- */
.page-link {
  color: var(--app-primary);
}

.page-item.active .page-link {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}

/* ----- Tables ----- */
.table {
  --bs-table-border-color: var(--app-border);
}

/* ----- Dropdown active/selected ----- */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--app-primary);
}

/* ----- Nav tabs / pills ----- */
.nav-link {
  color: var(--app-link);
}

.nav-link:hover {
  color: var(--app-link-hover);
}

.nav-tabs .nav-link.active {
  color: var(--app-primary);
  border-bottom-color: var(--app-primary);
}

.nav-pills .nav-link.active {
  background-color: var(--app-primary);
}

/* Sidebar scroll fix */
.s-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.s-sidebar-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#s-sidebar-menus {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

  /* Webkit scrollbar styling for sidebar */
  #s-sidebar-menus::-webkit-scrollbar {
    width: 6px;
  }

  #s-sidebar-menus::-webkit-scrollbar-track {
    background: transparent;
  }

  #s-sidebar-menus::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
  }

    #s-sidebar-menus::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.5);
    }

.s-TranslationGrid input.custom-text {
  width: 100%;
  height: 23px;
  padding: 0 3px;
}

.s-PermissionCheckEditor {
  min-height: 450px;
}

/* Target specifically when screen is large enough */
@media screen and (min-width: 768px) {

  .field {
    flex-wrap: wrap !important;
    align-items: center !important;
  }

    .field > .caption {
      flex: 0 0 100% !important;
      width: 100% !important;
      max-width: none !important;
      padding-bottom: 2px;
      text-align: left;
    }

    .field > .editor {
      flex: 1 1 0% !important;
      min-width: 0;
      width: 0 !important;
    }

    /* Keep BooleanEditor checkbox compact instead of collapsing to width:0 */
    .field > input[type=checkbox].editor {
      flex: 0 0 auto !important;
      width: 1.5em !important;
      height: 1.5em;
      margin-top: 0.4em;
    }

    .field > .ui-datepicker-trigger,
    .field > .inplace-button {
      flex: 0 0 auto !important;
      margin-left: 4px;
    }

    .field > .ui-datepicker-trigger {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      height: calc(var(--s-input-inner-height) + 2px);
      width: calc(var(--s-input-inner-height) + 2px);
      margin-top: 0 !important;
      border: 1px solid var(--bs-border-color) !important;
      border-radius: var(--bs-border-radius);
      background-color: transparent;
      background-clip: padding-box;
      cursor: pointer;
      color: var(--s-tool-icon);
      padding: 0 !important;
      font-size: 1.725rem;
      line-height: 1;
    }

    .field > .widget-wrapper {
      display: flex !important;
      flex: 1 1 0% !important;
      min-width: 0;
      width: 0 !important;
    }

    /* Maintain the 50% width for side-by-side fields */
    .field.col-md-6,
    .field.col-sm-6 {
      width: 50%;
    }
}

/* Preserve default behavior on smaller screens */
@media screen and (max-width: 767px) {
  /* Serenity's default mobile styles will apply */
  .field {
    /* Default responsive behavior */
  }
}