/* gentelella-adapter.css — bridges Bootstrap patterns used in existing views
   to work with Gentelella v4's CSS framework.

   Gentelella v4 uses many of the same class names as Bootstrap (btn, card,
   table, form-control, etc.) but has its own grid, lacks Bootstrap's utility
   classes, and has different alert/tab/nav markup. This file fills those gaps
   so the existing Razor views keep working without rewrites. */

/* ── Bootstrap-style grid system ───────────────────────────────────────
   Gentelella uses row.col-3 / row.col-2 / row.col-8-4 for its grid.
   Bootstrap's .row > .col-* needs to work for existing views. */
.container, .container-fluid {
  width: 100%;
  margin: 0 auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.row > [class*="col-"] { flex-shrink: 0; width: 100%; max-width: 100%; }
.col-1  { flex: 0 0 auto; width: 8.33333333%; }
.col-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 auto; width: 8.33333333%; }
  .col-md-2  { flex: 0 0 auto; width: 16.66666667%; }
  .col-md-3  { flex: 0 0 auto; width: 25%; }
  .col-md-4  { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-5  { flex: 0 0 auto; width: 41.66666667%; }
  .col-md-6  { flex: 0 0 auto; width: 50%; }
  .col-md-7  { flex: 0 0 auto; width: 58.33333333%; }
  .col-md-8  { flex: 0 0 auto; width: 66.66666667%; }
  .col-md-9  { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}
.g-3 { gap: 1rem; }
.g-2 { gap: .5rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }

/* ── Flex/display utilities ─────────────────────────────────────────── */
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }
.flex-grow-1 { flex: 1 1 auto !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.align-self-start { align-self: flex-start !important; }
.text-center { text-align: center !important; }
.text-nowrap { white-space: nowrap !important; }

/* ── Spacing (Bootstrap-style margin/padding utilities) ─────────────── */
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.ms-1 { margin-left: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-auto { margin-left: auto !important; }
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.me-3 { margin-right: 1rem !important; }
.my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: .25rem !important; }
.p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-2 { padding-top: .5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }

/* ── Typography utilities ──────────────────────────────────────────── */
.text-muted { color: var(--text-muted) !important; }
.text-danger { color: var(--red) !important; }
.small { font-size: .85em !important; }
.fw-semibold { font-weight: 600 !important; }
.font-monospace { font-family: "Cascadia Code", "Fira Code", "Consolas", monospace !important; }

/* ── Table variants ────────────────────────────────────────────────────
   Gentelella's .table is clean. Add Bootstrap variants that views use. */
.table-bordered { border: 1px solid var(--border-color); }
.table-bordered th,
.table-bordered td { border: 1px solid var(--border-color); }
.table-sm th,
.table-sm td { padding: .35rem .5rem; }
.table-hover tbody tr:hover { background-color: var(--bg-subtle); }
.table-light { background-color: var(--bg-subtle); }
.table thead.table-light th { background-color: var(--bg-subtle); }

/* ── Nav tabs (used in Entity Create/Edit) ──────────────────────────── */
.nav { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.nav-item { list-style: none; }
.nav-tabs { border-bottom: 1px solid var(--border-color); gap: 0; }
.nav-tabs .nav-link {
  display: block;
  padding: .5rem 1rem;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: .85rem;
  background: none;
  cursor: pointer;
}
.nav-tabs .nav-link:hover { border-color: var(--bg-subtle) var(--bg-subtle) var(--border-color); }
.nav-tabs .nav-link.active {
  color: var(--primary);
  background: var(--surface);
  border-color: var(--border-color) var(--border-color) var(--surface);
}
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }
.tab-content > .tab-pane.fade { transition: opacity .15s linear; }
.tab-content > .tab-pane.fade.active { display: block; opacity: 1; }

/* ── Alerts ────────────────────────────────────────────────────────────
   Gentelella doesn't have Bootstrap-style alerts. Add them. */
.alert {
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  font-size: .875rem;
  border: 1px solid transparent;
}
.alert-success {
  color: #1f6b58;
  background-color: #e9f5f1;
  border-color: #cde9e1;
}
.alert-danger {
  color: #b4453f;
  background-color: #fdeeee;
  border-color: #f6d4d4;
}
.alert-warning {
  color: #98661f;
  background-color: #fbf1e3;
  border-color: #f3e0c4;
}
.alert-info {
  color: #1a6a8a;
  background-color: #e5f4fa;
  border-color: #cce8f2;
}
.alert-dismissible { padding-right: 2.5rem; }
.alert-dismissible .btn-close {
  position: absolute;
  top: 0; right: 0;
  padding: .75rem 1rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: .5;
}
.alert-dismissible .btn-close:hover { opacity: .75; }
.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  color: inherit;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: 4px;
  opacity: .5;
  cursor: pointer;
}
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }

/* ── Buttons: btn-secondary maps to btn-outline ─────────────────────── */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 32px;
  font-size: .8125rem;
  font-weight: 500;
  font-family: inherit;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-secondary:hover { background: var(--bg-subtle); border-color: var(--border-color); }

/* Anchor buttons: Gentelella's .btn assumes a <button>, so strip the link underline. */
.btn { text-decoration: none; }
.btn:hover { text-decoration: none; }

/* Outline + extra button variants (Gentelella ships only .btn / .btn-primary / .btn-sm).
   They ride on Gentelella's .btn base for size/shape and just set the colours. */
.btn-outline-secondary { background: transparent; border-color: var(--border-color); color: var(--text-secondary); }
.btn-outline-secondary:hover { background: var(--bg-surface-secondary); border-color: var(--border-color); color: var(--text); }
.btn-outline-primary { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-outline-dark { background: transparent; border-color: var(--border-color); color: var(--text); }
.btn-outline-dark:hover { background: var(--text); border-color: var(--text); color: #fff; }
.btn-outline-info { background: transparent; border-color: var(--blue); color: var(--blue); }
.btn-outline-info:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-outline-danger { background: transparent; border-color: var(--red); color: var(--red); }
.btn-outline-danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn-outline-success { background: transparent; border-color: var(--green); color: var(--green); }
.btn-outline-success:hover { background: var(--green); border-color: var(--green); color: #fff; }
.btn-warning { background: var(--yellow); border-color: var(--yellow); color: #78350f; }
.btn-warning:hover { filter: brightness(.96); color: #78350f; }
.btn-link { background: transparent; border-color: transparent; color: var(--primary); padding: 0 4px; }
.btn-link:hover { text-decoration: underline; }

/* ── Form select (Gentelella styles .form-control but not .form-select) ───────
   Mirrors .form-control (36px, same border/radius) and adds a caret. Multi-row
   selects (size > 1, e.g. the FK typeahead list) render as a plain list box. */
.form-select {
  width: 100%;
  height: 36px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0 32px 0 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237e8896' stroke-width='1.5'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-lt); }
.form-select[multiple],
.form-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 12px;
  background-image: none;
}

/* Sidebar nav links are styled by Gentelella's own .nav-link rule (display:flex, full-width,
   dark-sidebar colours, hover/active states). We must NOT override it here — an earlier
   `aside .nav-link { display:inline-flex }` rule made the links flow horizontally and wrap into
   multiple columns. The topbar uses .tb-btn / .breadcrumb, not .nav-link, so nothing else needs it. */

/* ── Validation summary ────────────────────────────────────────────── */
.validation-summary-errors ul {
  list-style: none;
  padding: 0;
  margin: .5rem 0;
}
.field-validation-error { color: var(--red); }

/* ── Details/summary (used in admin forms) ─────────────────────────── */
details.border { border: 1px solid var(--border-color); }
details.rounded { border-radius: 8px; }
summary { cursor: pointer; font-weight: 500; padding: .5rem; }

/* ── Responsive table wrapper ──────────────────────────────────────── */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Status badges (Gentelella style) ─────────────────────────────────
   Used in table rows to show status (active/inactive/completed/pending).
   .status is the base, .status-color adds the hue. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.4;
}
.status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-green { background: var(--green-lt); color: var(--green); }
.status-green::before { background: var(--green); }
.status-blue { background: var(--blue-lt); color: var(--blue); }
.status-blue::before { background: var(--blue); }
.status-yellow { background: var(--yellow-lt); color: #b45309; }
.status-yellow::before { background: var(--yellow); }
.status-red { background: var(--red-lt); color: var(--red); }
.status-red::before { background: var(--red); }
.status-purple { background: var(--purple-lt); color: var(--purple); }
.status-purple::before { background: var(--purple); }
.status-azure { background: var(--azure-lt); color: var(--azure); }
.status-azure::before { background: var(--azure); }

/* ── Stat cards (Gentelella dashboard pattern) ───────────────────────
   .card > .stat > .stat-icon + .stat-content > .stat-value + .stat-label */
.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
}
.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.stat-icon.teal { background: var(--primary-lt); color: var(--primary); }
.stat-icon.blue { background: var(--blue-lt); color: var(--blue); }
.stat-icon.green { background: var(--green-lt); color: var(--green); }
.stat-icon.yellow { background: var(--yellow-lt); color: #b45309; }
.stat-icon.red { background: var(--red-lt); color: var(--red); }
.stat-icon.purple { background: var(--purple-lt); color: var(--purple); }
.stat-content { display: flex; flex-direction: column; gap: 2px; }
.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.3px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.stat-change {
  font-size: 12px;
  font-weight: 500;
}
.stat-change.up { color: var(--green); }
.stat-change.down { color: var(--red); }

/* ── Divider label (horizontal rule with embedded text) ───────────── */
.divider-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  margin: 20px 0 14px;
}
.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color-light);
}

/* ── Form actions (button row at bottom of forms) ─────────────────── */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--border-color-light);
}

/* ── Form help text ───────────────────────────────────────────────── */
.form-help {
  display: block;
  color: var(--text-muted);
  font-size: 11.5px;
  margin-top: 4px;
}

/* ── Segmented control ────────────────────────────────────────────── */
.segmented {
  display: inline-flex;
  background: var(--bg-surface-secondary);
  border-radius: var(--radius);
  padding: 2px;
  gap: 1px;
}
.segmented .segmented-item {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 5px 12px;
  border-radius: calc(var(--radius) - 1px);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.segmented .segmented-item:hover { color: var(--text); }
.segmented .segmented-item.active {
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* ── Toggle switch ────────────────────────────────────────────────── */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--border-color);
  border-radius: 10px;
  transition: background .2s;
  flex-shrink: 0;
}
.switch-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform .2s;
}
.switch input:checked + .switch-slider { background: var(--primary); }
.switch input:checked + .switch-slider::before { transform: translateX(16px); }
.switch-label { font-size: 13px; color: var(--text); }

/* ── Button group ─────────────────────────────────────────────────── */
.btn-group {
  display: inline-flex;
  gap: 0;
}
.btn-group .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}
.btn-group .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* ── Embedded layout (chrome-less iframe) ──────────────────────────── */
body:has(.embedded-layout) .app-wrapper,
body:has(.embedded-layout) .sidebar,
body:has(.embedded-layout) .topbar,
body:has(.embedded-layout) .footer {
  display: none !important;
}

/* ── Breadcrumb compatibility for views that use Bootstrap's breadcrumb */
.breadcrumb { display: flex; flex-wrap: wrap; list-style: none; padding: 0; }
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding: 0 .5rem;
  color: var(--text-muted);
}