.feature-request-trigger,
.topbar-cake-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--color-text, #333333) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.topbar-cake-link {
  /* anchor-specific */
  -webkit-tap-highlight-color: transparent;
}

.feature-request-trigger:hover,
.topbar-cake-link:hover {
  background: rgba(52, 86, 139, 0.12) !important;
  color: var(--color-link, #3a5392) !important;
}

.dark .feature-request-trigger,
.dark .topbar-cake-link,
.adminjs-dark .feature-request-trigger,
.adminjs-dark .topbar-cake-link {
  color: var(--color-text, #e0e0e0) !important;
}

.dark .feature-request-trigger:hover,
.dark .topbar-cake-link:hover,
.adminjs-dark .feature-request-trigger:hover,
.adminjs-dark .topbar-cake-link:hover {
  background: rgba(100, 181, 246, 0.15) !important;
  color: var(--color-primary, #90caf9) !important;
}

/*
 * Mobile: hide Ideas/Cake toolbar entirely (reclaims topbar space; modal still works if opened from elsewhere).
 * Sidebar nav drops leading icons; breadcrumbs drop SVG chevrons. List row actions stay icon buttons.
 */
@media (max-width: 768px) {
  #admin-topbar-toolbar,
  .admin-topbar-toolbar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    flex: 0 0 0 !important;
    min-width: 0 !important;
    border: none !important;
  }

  /* Stop horizontal bleed so the off-canvas sidebar doesn’t show a sliver over the main area */
  [data-css="app"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* min-width:0 + flex so main column absorbs width; do not set overflow-x here — keep tablet rule for wide tables */
  [data-css="app-content"] {
    min-width: 0 !important;
    flex: 1 1 0% !important;
    max-width: 100% !important;
  }

  /* Drawer: remove right-edge chrome that can read as a “sliver” over the main area on narrow viewports */
  [data-css="sidebar"] {
    border-right: none !important;
    box-shadow: none !important;
  }

  [data-css="sidebar-resources"] svg,
  [data-css="sidebar-resources"] .adminjs_Icon,
  [data-css="sidebar-pages"] svg,
  [data-css="sidebar-pages"] .adminjs_Icon,
  [data-css="sidebar"] li a > .adminjs_Icon,
  [data-css="sidebar"] li a > svg:first-of-type {
    display: none !important;
  }

  [data-css*="breadcrumb"] svg,
  .adminjs_Breadcrumbs svg {
    display: none !important;
  }

  /*
   * List badges (enum pills + BooleanStatus chips): avoid full-width stretch; center in column.
   * Overrides wide `max-width: 100%` on pills and `display: revert` on cell descendants from touch/table fixes.
   */
  [data-css$="-list-table-wrapper"] .admin-list-enum-pill,
  [data-css$="-list-table-wrapper"] .post-template-method-list-pill {
    display: inline-block !important;
    width: fit-content !important;
    max-width: min(100%, 9.5rem) !important;
    padding: 2px 7px !important;
    font-size: 0.6875rem !important;
    line-height: 1.3 !important;
    vertical-align: middle !important;
  }

  [data-css$="-list-table-wrapper"] .boolean-status-chip.MuiChip-root,
  [data-css$="-list-table-wrapper"] .MuiChip-root.boolean-status-chip {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: min(100%, 9.5rem) !important;
    min-height: 22px !important;
    height: auto !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
  }

  [data-css$="-list-table-wrapper"] .boolean-status-chip .MuiChip-label {
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 0.6875rem !important;
    line-height: 1.3 !important;
  }

  [data-css$="-list-table-wrapper"] td:has(.boolean-status-chip),
  [data-css$="-list-table-wrapper"] .adminjs_TableCell:has(.boolean-status-chip),
  [data-css$="-list-table-wrapper"] td:has(.admin-list-enum-pill),
  [data-css$="-list-table-wrapper"] .adminjs_TableCell:has(.admin-list-enum-pill) {
    text-align: center !important;
  }
}
.feature-request-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  box-sizing: border-box !important;
  /* Scroll containment without body { overflow: hidden }, which breaks fixed topbars */
  overscroll-behavior: contain !important;
  touch-action: none !important;
}

.feature-request-backdrop[hidden] {
  display: none !important;
}

.feature-request-panel {
  touch-action: auto !important;
  width: 100% !important;
  max-width: 920px !important;
  max-height: min(92vh, 880px) !important;
  overflow: auto !important;
  padding: 24px !important;
  border-radius: 8px !important;
  background: var(--color-container, #ffffff) !important;
  color: var(--color-text, #333333) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid var(--color-border, #e0e0e0) !important;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.feature-request-drag-bar {
  margin: -24px -24px 8px -24px !important;
  padding: 10px 16px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: grab !important;
  user-select: none !important;
  color: #64748b !important;
  touch-action: none !important;
  box-sizing: border-box !important;
}

.feature-request-drag-bar:active,
.feature-request-drag-bar.feature-request-drag-bar--dragging {
  cursor: grabbing !important;
  background: rgba(59, 130, 246, 0.12) !important;
}

.dark .feature-request-drag-bar,
.adminjs-dark .feature-request-drag-bar {
  background: rgba(255, 255, 255, 0.08) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
}

.dark .feature-request-drag-bar.feature-request-drag-bar--dragging,
.adminjs-dark .feature-request-drag-bar.feature-request-drag-bar--dragging {
  background: rgba(59, 130, 246, 0.2) !important;
}

.feature-request-title {
  margin: 0 0 10px 0 !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: inherit !important;
  letter-spacing: -0.01em !important;
}

.feature-request-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.feature-request-label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
}

/* Label captions — aligned with AdminJS / MUI-style field labels */
.feature-request-label > span {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

.dark .feature-request-panel .feature-request-label > span,
.adminjs-dark .feature-request-panel .feature-request-label > span {
  color: rgba(255, 255, 255, 0.65) !important;
}

.feature-request-input,
.feature-request-textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  border: 1px solid var(--color-border, #ccc) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: rgba(0, 0, 0, 0.87) !important;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
}

.dark .feature-request-input,
.dark .feature-request-textarea,
.adminjs-dark .feature-request-input,
.adminjs-dark .feature-request-textarea {
  background: var(--color-container, #1e1e1e) !important;
  color: var(--color-text, rgba(255, 255, 255, 0.87)) !important;
}

.feature-request-textarea {
  resize: vertical !important;
  min-height: 160px !important;
}

.feature-request-input::placeholder,
.feature-request-textarea::placeholder {
  color: rgba(0, 0, 0, 0.38) !important;
}

.dark .feature-request-input::placeholder,
.dark .feature-request-textarea::placeholder,
.adminjs-dark .feature-request-input::placeholder,
.adminjs-dark .feature-request-textarea::placeholder {
  color: rgba(255, 255, 255, 0.38) !important;
}

.feature-request-input[readonly] {
  background: rgba(0, 0, 0, 0.04) !important;
  cursor: default !important;
}

.dark .feature-request-input[readonly],
.adminjs-dark .feature-request-input[readonly] {
  background: rgba(255, 255, 255, 0.06) !important;
}

.feature-request-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
}

.feature-request-btn {
  padding: 8px 20px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
  text-transform: none !important;
}

.feature-request-btn-secondary {
  background: transparent !important;
  border-color: rgba(0, 0, 0, 0.23) !important;
  color: var(--color-link, #3a5392) !important;
}

.feature-request-btn-secondary:hover {
  background: rgba(52, 86, 139, 0.06) !important;
}

.dark .feature-request-btn-secondary,
.adminjs-dark .feature-request-btn-secondary {
  border-color: rgba(255, 255, 255, 0.23) !important;
  color: var(--color-primary, #90caf9) !important;
}

/* Override global submit-button rule (secondary/pink) for this modal */
.feature-request-panel .feature-request-btn-primary,
.feature-request-panel button[type="submit"].feature-request-btn-primary {
  background: var(--color-primary, #34568b) !important;
  color: #fff !important;
  border-color: var(--color-primary, #34568b) !important;
}

.feature-request-panel .feature-request-btn-primary:hover,
.feature-request-panel button[type="submit"].feature-request-btn-primary:hover {
  filter: brightness(1.06) !important;
}

.feature-request-status {
  margin: 0 !important;
  min-height: 1.25em !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

.dark .feature-request-status,
.adminjs-dark .feature-request-status {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Slightly shorter than before so Page + Subject line + Description fit without growing the modal. */
.feature-request-field-hint {
  margin: -4px 0 10px 0 !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

.dark .feature-request-field-hint,
.adminjs-dark .feature-request-field-hint {
  color: rgba(255, 255, 255, 0.5) !important;
}

.feature-request-rich-editor {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 292px !important;
}

.feature-request-rich-editor .adminjs_RichTextEditor,
.feature-request-rich-editor [class*='RichTextEditor'] {
  min-height: 252px !important;
}

/* TipTap editor content area (toolbar is above this) */
.feature-request-rich-editor .ProseMirror {
  min-height: 200px !important;
}

.feature-request-rich-editor .feature-request-textarea {
  min-height: 200px !important;
}

/* Rich text toolbar: hover tooltips and line-spacing toggle */
.feature-request-rich-editor [class*='MenuBarWrapper'] > span[data-tooltip] {
  position: relative !important;
  cursor: pointer !important;
}

.feature-request-rich-editor [class*='MenuBarWrapper'] > span[data-tooltip]:hover::after,
.feature-request-rich-editor [class*='MenuBarWrapper'] > span[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  bottom: calc(100% + 6px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  background: rgba(33, 33, 33, 0.92) !important;
  color: #fff !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 20 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

.feature-request-rich-editor .feature-request-line-spacing-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.75rem !important;
  height: 1.5rem !important;
  margin-left: 0.25rem !important;
  padding: 0 0.35rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: rgba(0, 0, 0, 0.72) !important;
  border-left: 1px solid var(--color-border, #e0e0e0) !important;
  padding-left: 0.65rem !important;
}

.feature-request-rich-editor .feature-request-line-spacing-btn.active {
  color: var(--color-primary, #3040d6) !important;
}

.dark .feature-request-rich-editor .feature-request-line-spacing-btn,
.adminjs-dark .feature-request-rich-editor .feature-request-line-spacing-btn {
  color: rgba(255, 255, 255, 0.78) !important;
  border-left-color: rgba(255, 255, 255, 0.18) !important;
}

.dark .feature-request-rich-editor .feature-request-line-spacing-btn.active,
.adminjs-dark .feature-request-rich-editor .feature-request-line-spacing-btn.active {
  color: var(--color-primary, #90caf9) !important;
}

.feature-request-file-input {
  font-size: 0.875rem !important;
  max-width: 100% !important;
}

.feature-request-file-list {
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  color: rgba(0, 0, 0, 0.75) !important;
}

.dark .feature-request-file-list,
.adminjs-dark .feature-request-file-list {
  color: rgba(255, 255, 255, 0.75) !important;
}

.feature-request-file-list li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--color-border, #e8e8e8) !important;
}

.feature-request-file-remove {
  flex-shrink: 0 !important;
  padding: 4px 10px !important;
  font-size: 0.75rem !important;
  border: 1px solid rgba(0, 0, 0, 0.23) !important;
  border-radius: 4px !important;
  background: transparent !important;
  cursor: pointer !important;
  color: var(--color-link, #3a5392) !important;
}

.dark .feature-request-file-remove,
.adminjs-dark .feature-request-file-remove {
  border-color: rgba(255, 255, 255, 0.23) !important;
  color: var(--color-primary, #90caf9) !important;
}

/* ── Chouf dashboard (rover-admin pattern) ── */

/* Header + login logo (same asset as chouf-web /chouflogo.png) */
[data-css="logo"],
.adminjs_Logo,
.adminjs_Logo img,
header img[alt*="Chouf"],
header img[alt*="logo"],
header img[alt*="Logo"],
[data-css="topbar"] .adminjs_Logo img {
  display: block !important;
  max-height: 100px !important;
  width: auto !important;
  max-width: min(450px, 100%) !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Center logo in the top bar (hamburger left, user menu right) */
[data-css="topbar"],
.adminjs_Topbar {
  position: relative !important;
}

[data-css="topbar-content"],
[class*="Topbar__content"] {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  position: relative !important;
}

[data-css="topbar"] .adminjs_Logo,
[data-css="topbar"] [data-css="logo"],
.adminjs_Topbar .adminjs_Logo {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  margin: 0 !important;
}

[data-css="topbar"] .logged-in-user,
[data-css="topbar"] [data-css="logged-in"] {
  margin-left: auto !important;
}

.adminjs_LoginPage .adminjs_Logo,
.adminjs_LoginPage [data-css="logo"] {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.adminjs_LoginPage img[alt*="Chouf"],
.adminjs_LoginPage img[alt*="logo"],
.adminjs_LoginPage img[alt*="Logo"],
.adminjs_LoginPage .adminjs_Logo img,
[data-css="login-page-wrapper"] img {
  display: block !important;
  margin: 0 auto 20px !important;
  max-height: 180px !important;
  width: auto !important;
  max-width: min(520px, 100%) !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Hide default AdminJS welcome panel (left sidebar) on login */
.login__Wrapper > .adminjs_Box > .adminjs_Box:first-child {
  display: none !important;
}

/* Center logo on login page (standalone login uses .login__Wrapper, not .adminjs_LoginPage) */
.login__Wrapper form h5,
.login__Wrapper form .adminjs_H5 {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.login__Wrapper form img {
  display: block !important;
  margin: 0 auto 20px !important;
  max-height: 180px !important;
  width: auto !important;
  max-width: min(520px, 100%) !important;
  height: auto !important;
  object-fit: contain !important;
}

.dashboard-link {
  color: var(--color-link, #3a5392);
  text-decoration: none;
  transition: color 0.2s ease;
}

.dashboard-link:hover {
  color: var(--color-link-hover, #2d4478);
  text-decoration: underline;
}

.dashboard-link:visited {
  color: var(--color-link, #3a5392);
}

.chouf-dashboard .adminjs_TableCell,
.chouf-dashboard table td,
.chouf-dashboard table th {
  padding: 6px 10px !important;
  line-height: 1.35 !important;
  vertical-align: middle !important;
}

.chouf-dashboard table.adminjs_Table tbody td a.dashboard-link,
.chouf-dashboard table.adminjs_Table .adminjs_TableBody td a.dashboard-link {
  color: var(--color-link, #3a5392) !important;
  text-decoration: none !important;
}

.chouf-dashboard table.adminjs_Table tbody td a.dashboard-link:hover,
.chouf-dashboard table.adminjs_Table .adminjs_TableBody td a.dashboard-link:hover {
  color: var(--color-link-hover, #2d4478) !important;
  text-decoration: underline !important;
}

.chouf-dashboard .adminjs_H3,
.chouf-dashboard h3.adminjs_Header.adminjs_H3,
.chouf-dashboard .adminjs_Section .adminjs_Header.adminjs_H3 {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 12px 0 !important;
  padding: 8px 14px !important;
  border: 1px solid var(--color-border, #e0e0e0) !important;
  border-radius: 8px !important;
  background: var(--color-muted, #f8fafc) !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

.chouf-dashboard .adminjs_H3 a,
.chouf-dashboard h3.adminjs_Header.adminjs_H3 a {
  vertical-align: middle !important;
  line-height: inherit !important;
}

.chouf-dashboard [data-css="section"],
.chouf-dashboard .adminjs_Section,
.chouf-dashboard section[data-css="section"] {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-bottom: 4px !important;
}

.dashboard-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 16px !important;
}

.dashboard-stat-card-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
}

.dashboard-stat-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  height: 100% !important;
}

.dashboard-stat-card-link:hover .dashboard-stat-card {
  border-color: var(--color-link, #3a5392) !important;
  box-shadow: 0 2px 8px rgba(58, 83, 146, 0.12) !important;
}

.dashboard-stat-card-link:hover .adminjs_Header.adminjs_H2,
.dashboard-stat-card-link:hover h2 {
  color: var(--color-link, #3a5392) !important;
}