/* Prompt Aid — Filament admin theme overrides.
   Filament renders its own DOM (fi-* classes), so this can't be a literal
   markup port like the website — it reshapes Filament's real components
   toward the promptaid-admin mockups: near-square corners, hairline
   borders instead of shadows, Lato, and the ink/signal/beacon palette
   (colors already come from each PanelProvider's ->colors(); this file
   covers shape, spacing and border language ->colors() can't touch).
   Loaded after Filament's own CSS via a panel renderHook. */

:root {
  --pa-ink: #101012;
  --pa-ink-soft: #3A3A3E;
  --pa-paper: #F5F2EC;
  --pa-surface: #FFFFFF;
  --pa-line: #E0DACB;
  --pa-line-soft: #F0EBE0;
  --pa-muted: #6E6A62;
  --pa-signal: #D0211C;
  --pa-beacon: #F2C200;
  --pa-beacon-wash: #FEF6DA;
  --pa-go: #1F7A4C;
  --pa-radius: 0px;
}

/* Force light mode regardless of the OS/browser's prefers-color-scheme —
   Filament's `dark:` classes are media-query driven, not just tied to the
   panel's darkMode() toggle, so a system in dark mode renders Filament's
   dark palette (near-black body/sidebar) even with darkMode(false) set on
   the panel. Overriding every dark: variant individually isn't practical,
   so we force color-scheme and the handful of containers that otherwise
   show through as dark chrome. */
html, .fi-body {
  color-scheme: light !important;
}
.fi-body {
  background: var(--pa-surface) !important;
  color: var(--pa-ink) !important;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Flatten Filament's default shadow-heavy look to the hairline-border,
   near-square-corner language the mockups use throughout. */
.fi-main .fi-section,
.fi-main .fi-card,
.fi-modal-window,
.fi-dropdown-panel,
.fi-ta-ctn,
.fi-fo-component-ctn,
.fi-wi-stats-overview-stat {
  border-radius: var(--pa-radius) !important;
  box-shadow: none !important;
  border: 1px solid var(--pa-line) !important;
}

/* Square every corner site-wide — buttons, inputs, badges, modals,
   dropdowns, tables, avatars, the lot — except elements that are
   deliberately circular (status dots, the round user-avatar bubble). */
.fi-btn,
.fi-icon-btn,
.fi-input,
.fi-select-input,
.fi-textarea,
.fi-badge,
.fi-modal-window,
.fi-dropdown-panel,
.fi-ta-ctn,
.fi-fo-component-ctn,
.fi-wi-stats-overview-stat,
.fi-section,
.fi-card,
.fi-tabs,
.fi-tabs-item,
.fi-pagination-item,
.fi-notification {
  border-radius: var(--pa-radius) !important;
}

/* Sidebar: white background to match the logo, red link text, black on
   hover/active. */
.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-header-ctn,
.fi-sidebar-nav,
.fi-sidebar-footer {
  background: var(--pa-surface) !important;
  border-inline-end: 1px solid var(--pa-line) !important;
}
.fi-sidebar-nav-groups .fi-sidebar-group-label {
  color: var(--pa-muted) !important;
}
.fi-sidebar-item-icon,
.fi-sidebar-item-label {
  color: var(--pa-signal) !important;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
  color: var(--pa-ink) !important;
  font-weight: 700 !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-button:hover {
  background: var(--pa-paper) !important;
  border-radius: var(--pa-radius) !important;
}

/* Topbar: hairline instead of shadow, matches .pa-header on the site. */
.fi-topbar {
  box-shadow: none !important;
  border-bottom: 1px solid var(--pa-line) !important;
}

/* Buttons: square-ish corners, no shadow, heavier weight — matches
   .pa-btn / .pa-btn-ghost on the public site. */
.fi-btn {
  border-radius: var(--pa-radius) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.fi-btn.fi-color-primary {
  background: var(--pa-signal) !important;
}

/* Any solid red/black/gray button needs white text — overriding the
   background above broke Filament's own text/background contrast pairing. */
.fi-btn.fi-color-primary,
.fi-btn.fi-color-danger,
.fi-btn.fi-color-gray:not(.fi-btn-outlined),
.fi-btn[class*="fi-color-"]:not(.fi-btn-outlined) {
  color: #FFFFFF !important;
}
.fi-btn.fi-color-primary .fi-btn-label,
.fi-btn.fi-color-danger .fi-btn-label,
.fi-btn.fi-color-gray:not(.fi-btn-outlined) .fi-btn-label,
.fi-btn[class*="fi-color-"]:not(.fi-btn-outlined) .fi-btn-label {
  color: #FFFFFF !important;
}
.fi-btn.fi-color-danger {
  background: #C8102E !important;
}

/* Inputs: hairline border, square corners, no focus glow — matches
   .pa-field. */
.fi-input,
.fi-select-input,
.fi-textarea {
  border-radius: var(--pa-radius) !important;
  border-color: var(--pa-line) !important;
  box-shadow: none !important;
}
.fi-input:focus,
.fi-select-input:focus,
.fi-textarea:focus {
  box-shadow: 0 0 0 1px var(--pa-signal) !important;
  border-color: var(--pa-signal) !important;
}

/* Badges: square, matches .pa-badge. Solid danger/gray badges need white
   text for the same contrast reason as the buttons above. */
.fi-badge {
  border-radius: var(--pa-radius) !important;
}
.fi-badge.fi-color-danger,
.fi-badge.fi-color-gray {
  color: #FFFFFF !important;
}

/* Tables: hairline row dividers instead of zebra/shadow, matches
   .pa-table / .pa-tablewrap. */
.fi-ta-table {
  border-collapse: collapse !important;
}
.fi-ta-row {
  border-bottom: 1px solid var(--pa-line-soft) !important;
}
.fi-ta-header-cell {
  background: var(--pa-paper) !important;
  font-weight: 900 !important;
  text-transform: none !important;
}

/* Stat widgets: square corners, hairline, matches .pa-stat. */
.fi-wi-stats-overview-stat {
  padding: 1.25rem !important;
}
.fi-wi-stats-overview-stat-value {
  font-weight: 900 !important;
}

/* Tabs: underline style matching .pa-tabs rather than Filament's pill
   default. */
.fi-tabs-item.fi-active {
  border-bottom: 2px solid var(--pa-signal) !important;
  font-weight: 700 !important;
}

/* Media Library — plain custom classes (not Tailwind utilities) on
   purpose: this page's Blade view ships new markup after Filament's CSS
   was last built, and Tailwind's JIT purge only keeps classes it saw at
   build time, so any new utility class here would silently render
   unstyled. Plain CSS in this always-loaded stylesheet sidesteps that. */
.pa-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.pa-media-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--pa-line);
  background: var(--pa-paper);
  cursor: pointer;
}
.pa-media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pa-media-tile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 18, 0.72);
  opacity: 0;
  transition: opacity 0.12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
}
.pa-media-tile:hover .pa-media-tile-overlay {
  opacity: 1;
}
.pa-media-tile-name {
  color: #fff;
  font-size: 11px;
  text-align: center;
  word-break: break-all;
  padding: 0 6px;
}
.pa-media-tile-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.pa-media-tile-actions button,
.pa-media-tile-actions a {
  background: #fff;
  color: var(--pa-ink);
  border: none;
  border-radius: var(--pa-radius);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
}
.pa-media-tile-actions .pa-media-danger {
  background: var(--pa-signal);
  color: #fff;
}
.pa-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(16, 16, 18, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.pa-media-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pa-media-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.pa-media-cropper-wrap {
  background: #fff;
  padding: 20px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.pa-media-cropper-img-ctn {
  max-height: 55vh;
  overflow: hidden;
  margin-bottom: 16px;
}
.pa-media-cropper-img-ctn img {
  display: block;
  max-width: 100%;
}
.pa-media-ratio-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pa-media-ratio-btns button {
  border: 1px solid var(--pa-line);
  background: #fff;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--pa-radius);
}
.pa-media-ratio-btns button.is-active {
  background: var(--pa-signal);
  color: #fff;
  border-color: var(--pa-signal);
}
.pa-media-cropper-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.pa-media-cropper-actions button {
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--pa-radius);
  border: 1px solid var(--pa-line);
  background: #fff;
  color: var(--pa-ink);
}
.pa-media-cropper-actions button.pa-media-primary {
  background: var(--pa-signal);
  border-color: var(--pa-signal);
  color: #fff;
}

/* "Choose from library" picker attached to FileUpload fields — same
   plain-CSS-not-Tailwind-utility reasoning as the Media Library page
   above, since this view also ships after Filament's CSS was last built. */
.pa-mlp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--pa-line);
  background: #fff;
  color: var(--pa-ink-soft);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--pa-radius);
  cursor: pointer;
  margin: -6px 0 8px;
}
.pa-mlp-btn:hover {
  background: var(--pa-paper);
}
.pa-mlp-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(16, 16, 18, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pa-mlp-modal {
  background: #fff;
  max-width: 860px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  border-radius: var(--pa-radius);
}
.pa-mlp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pa-mlp-modal-head h2 {
  font-size: 16px;
  font-weight: 900;
  margin: 0;
}
.pa-mlp-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--pa-muted);
}
.pa-mlp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.pa-mlp-item {
  border: 1px solid var(--pa-line);
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  border-radius: var(--pa-radius);
}
.pa-mlp-item:hover {
  border-color: var(--pa-signal);
}
.pa-mlp-item img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
}
.pa-mlp-item-name {
  display: block;
  font-size: 11px;
  color: var(--pa-muted);
  padding: 4px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}