/* =============================================================
   Roennes Design Catalog — app.css
   Dark terminal aesthetic: #0b0f1a background, #00e5ff accent
   Fonts: Syne (headings/UI), JetBrains Mono (IDs/code)
   ============================================================= */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  --rdc-bg:           #0b0f1a;
  --rdc-surface:      #111827;
  --rdc-surface-2:    #1a2035;
  --rdc-border:       #1e2d45;
  --rdc-accent:       #00e5ff;
  --rdc-accent-dark:  #00b8cc;
  --rdc-text:         #e2e8f0;
  --rdc-text-muted:   #6b7c99;
  --rdc-danger:       #f87171;
  --rdc-success:      #4ade80;
  --rdc-warning:      #fbbf24;
  --rdc-sidebar-w:    220px;
  --rdc-navbar-h:     56px;
  --rdc-font-ui:      'Syne', sans-serif;
  --rdc-font-mono:    'JetBrains Mono', monospace;
  --rdc-radius:       6px;
  --rdc-radius-lg:    10px;
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--rdc-bg);
  color:            var(--rdc-text);
  font-family:      var(--rdc-font-ui);
  font-size:        0.9375rem;
  line-height:      1.6;
  margin:           0;
}

a {
  color:           var(--rdc-accent);
  text-decoration: none;
}
a:hover { color: var(--rdc-accent-dark); }

/* ── Navbar ─────────────────────────────────────────────────── */
.rdc-navbar {
  background-color: var(--rdc-surface);
  border-bottom:    1px solid var(--rdc-border);
  height:           var(--rdc-navbar-h);
  z-index:          1030;
}

.rdc-brand {
  font-family:  var(--rdc-font-ui);
  font-weight:  700;
  font-size:    1.25rem;
  color:        var(--rdc-text) !important;
  letter-spacing: 0.05em;
  white-space:  nowrap;
}
.rdc-brand-accent { color: var(--rdc-accent); }

/* Search input */
.rdc-search {
  background-color: var(--rdc-bg);
  border:           1px solid var(--rdc-border);
  color:            var(--rdc-text);
  border-radius:    var(--rdc-radius);
  font-size:        0.875rem;
}
.rdc-search:focus {
  background-color: var(--rdc-bg);
  border-color:     var(--rdc-accent);
  color:            var(--rdc-text);
  box-shadow:       0 0 0 2px rgba(0, 229, 255, 0.15);
}
.rdc-search::placeholder { color: var(--rdc-text-muted); }

/* User button */
.rdc-user-btn {
  border-color: var(--rdc-border);
  color:        var(--rdc-text-muted);
  font-size:    0.8125rem;
}
.rdc-user-btn:hover {
  border-color: var(--rdc-accent);
  color:        var(--rdc-accent);
}

/* ── Layout shell ───────────────────────────────────────────── */
.rdc-layout {
  display:    flex;
  min-height: calc(100vh - var(--rdc-navbar-h));
}

/* ── Sidebar ────────────────────────────────────────────────── */
.rdc-sidebar {
  width:            var(--rdc-sidebar-w);
  flex-shrink:      0;
  background-color: var(--rdc-surface);
  border-right:     1px solid var(--rdc-border);
  padding-top:      0.5rem;
  overflow-y:       auto;
  position:         sticky;
  top:              var(--rdc-navbar-h);
  height:           calc(100vh - var(--rdc-navbar-h));
}

.rdc-offcanvas {
  background-color: var(--rdc-surface);
  border-right:     1px solid var(--rdc-border);
  width:            var(--rdc-sidebar-w) !important;
}

/* Sidebar nav */
.rdc-nav-list { padding: 0.5rem 0.5rem; }

.rdc-nav-link {
  display:       flex;
  align-items:   center;
  gap:           0.625rem;
  padding:       0.5rem 0.75rem;
  border-radius: var(--rdc-radius);
  color:         var(--rdc-text-muted);
  font-size:     0.875rem;
  font-weight:   500;
  transition:    background 0.15s, color 0.15s;
}
.rdc-nav-link:hover {
  background-color: var(--rdc-surface-2);
  color:            var(--rdc-text);
}
.rdc-nav-link.active {
  background-color: rgba(0, 229, 255, 0.1);
  color:            var(--rdc-accent);
}

.rdc-nav-icon {
  font-size:   1rem;
  flex-shrink: 0;
  width:       1.25rem;
  text-align:  center;
}

/* ── Main content ───────────────────────────────────────────── */
.rdc-main {
  flex:       1;
  min-width:  0;
  padding:    2rem 1.75rem;
}

@media (max-width: 576px) {
  .rdc-main { padding: 1rem; }
}

/* ── Flash messages ─────────────────────────────────────────── */
.rdc-flash {
  border-radius: var(--rdc-radius);
  font-size:     0.875rem;
  margin-bottom: 1.5rem;
}

/* ── Page title ─────────────────────────────────────────────── */
.rdc-page-title {
  font-size:   1.375rem;
  font-weight: 700;
  color:       var(--rdc-text);
  margin:      0;
}

/* ── Cards ──────────────────────────────────────────────────── */
.rdc-card {
  background-color: var(--rdc-surface);
  border:           1px solid var(--rdc-border);
  border-radius:    var(--rdc-radius-lg);
  color:            var(--rdc-text);
}

.rdc-card .card-header {
  background-color: var(--rdc-surface-2);
  border-bottom:    1px solid var(--rdc-border);
  font-weight:      600;
  font-size:        0.875rem;
  letter-spacing:   0.04em;
  text-transform:   uppercase;
  color:            var(--rdc-text-muted);
}

/* Stat cards on the dashboard */
.rdc-stat-card {
  background-color: var(--rdc-surface);
  border:           1px solid var(--rdc-border);
  border-radius:    var(--rdc-radius-lg);
  padding:          1.25rem 1.5rem;
  text-decoration:  none;
  display:          block;
  transition:       border-color 0.2s, transform 0.15s;
}
.rdc-stat-card:hover {
  border-color: var(--rdc-accent);
  transform:    translateY(-2px);
  color:        inherit;
}
.rdc-stat-number {
  font-family:  var(--rdc-font-mono);
  font-size:    2rem;
  font-weight:  700;
  color:        var(--rdc-accent);
  line-height:  1.1;
}
.rdc-stat-label {
  font-size:  0.8125rem;
  color:      var(--rdc-text-muted);
  margin-top: 0.25rem;
}
.rdc-stat-icon {
  font-size: 1.75rem;
  color:     var(--rdc-border);
}

/* ── Tables ─────────────────────────────────────────────────── */
.rdc-table {
  color:         var(--rdc-text);
  border-color:  var(--rdc-border);
  font-size:     0.875rem;
  margin-bottom: 0;
}
.rdc-table thead th {
  background-color: var(--rdc-surface-2);
  border-bottom:    1px solid var(--rdc-border);
  color:            var(--rdc-text-muted);
  font-size:        0.75rem;
  font-weight:      600;
  letter-spacing:   0.06em;
  text-transform:   uppercase;
  white-space:      nowrap;
  padding:          0.625rem 0.875rem;
}
.rdc-table td {
  border-color: var(--rdc-border);
  padding:      0.625rem 0.875rem;
  vertical-align: middle;
}
.rdc-table tbody tr { background-color: var(--rdc-surface); }
.rdc-table tbody tr:hover { background-color: var(--rdc-surface-2); }

/* Mono IDs in tables */
.rdc-table .id-cell {
  font-family: var(--rdc-font-mono);
  color:       var(--rdc-text-muted);
  font-size:   0.8rem;
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-label {
  font-size:   0.875rem;
  font-weight: 500;
  color:       var(--rdc-text);
  margin-bottom: 0.375rem;
}

.rdc-input,
.form-control,
.form-select {
  background-color: var(--rdc-bg);
  border:           1px solid var(--rdc-border);
  color:            var(--rdc-text);
  border-radius:    var(--rdc-radius);
  font-size:        0.9rem;
  padding:          0.5rem 0.75rem;
  transition:       border-color 0.15s, box-shadow 0.15s;
}
.rdc-input:focus,
.form-control:focus,
.form-select:focus {
  background-color: var(--rdc-bg);
  border-color:     var(--rdc-accent);
  color:            var(--rdc-text);
  box-shadow:       0 0 0 2px rgba(0, 229, 255, 0.15);
}
.rdc-input::placeholder,
.form-control::placeholder { color: var(--rdc-text-muted); }

.form-select option {
  background-color: var(--rdc-surface);
  color:            var(--rdc-text);
}

.form-text {
  color:     var(--rdc-text-muted);
  font-size: 0.8rem;
}

.form-check-input {
  background-color: var(--rdc-bg);
  border-color:     var(--rdc-border);
}
.form-check-input:checked {
  background-color: var(--rdc-accent);
  border-color:     var(--rdc-accent);
}
.form-check-label { font-size: 0.875rem; }

/* Validation states */
.is-invalid { border-color: var(--rdc-danger) !important; }
.invalid-feedback {
  color:     var(--rdc-danger);
  font-size: 0.8rem;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.rdc-btn-primary {
  background-color: var(--rdc-accent);
  border-color:     var(--rdc-accent);
  color:            #0b0f1a;
  font-weight:      600;
  border-radius:    var(--rdc-radius);
  font-size:        0.875rem;
  padding:          0.45rem 1rem;
  transition:       background 0.15s, opacity 0.15s;
}
.rdc-btn-primary:hover {
  background-color: var(--rdc-accent-dark);
  border-color:     var(--rdc-accent-dark);
  color:            #0b0f1a;
}

.rdc-btn-secondary {
  background-color: var(--rdc-surface-2);
  border-color:     var(--rdc-border);
  color:            var(--rdc-text);
  font-size:        0.875rem;
  border-radius:    var(--rdc-radius);
  padding:          0.45rem 1rem;
  transition:       background 0.15s;
}
.rdc-btn-secondary:hover {
  background-color: var(--rdc-border);
  color:            var(--rdc-text);
}

/* ── Badges ─────────────────────────────────────────────────── */
.rdc-badge-accent {
  background-color: rgba(0, 229, 255, 0.15);
  color:            var(--rdc-accent);
  border:           1px solid rgba(0, 229, 255, 0.3);
  font-size:        0.75rem;
  font-weight:      500;
  border-radius:    var(--rdc-radius);
  padding:          0.15em 0.5em;
}

/* ── Dropdown ───────────────────────────────────────────────── */
.rdc-dropdown {
  background-color: var(--rdc-surface);
  border:           1px solid var(--rdc-border);
  border-radius:    var(--rdc-radius);
  min-width:        160px;
}
.rdc-dropdown .dropdown-item {
  color:     var(--rdc-text);
  font-size: 0.875rem;
}
.rdc-dropdown .dropdown-item:hover {
  background-color: var(--rdc-surface-2);
  color:            var(--rdc-text);
}

/* ── Login page ─────────────────────────────────────────────── */
.rdc-login-page { background-color: var(--rdc-bg); }

.rdc-login-wrap { width: 100%; max-width: 420px; padding: 1rem; }

.rdc-login-logo {
  font-family:    var(--rdc-font-ui);
  font-weight:    700;
  font-size:      3rem;
  color:          var(--rdc-accent);
  letter-spacing: 0.1em;
  line-height:    1;
}

.rdc-login-subtitle {
  color:     var(--rdc-text-muted);
  font-size: 0.875rem;
}

.rdc-login-card {
  background-color: var(--rdc-surface);
  border-color:     var(--rdc-border);
}

/* ── Misc utilities ─────────────────────────────────────────── */
.text-accent { color: var(--rdc-accent) !important; }

.rdc-mono {
  font-family: var(--rdc-font-mono);
  font-size:   0.85em;
}

.rdc-section-title {
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--rdc-text-muted);
  margin-bottom:  0.75rem;
}

.rdc-thumb {
  width:         60px;
  height:        60px;
  object-fit:    cover;
  border-radius: var(--rdc-radius);
  border:        1px solid var(--rdc-border);
}

/* Price stats bar */
.rdc-stats-bar {
  background-color: var(--rdc-surface-2);
  border:           1px solid var(--rdc-border);
  border-radius:    var(--rdc-radius-lg);
  padding:          1rem 1.5rem;
  display:          flex;
  gap:              2rem;
  flex-wrap:        wrap;
  align-items:      center;
}
.rdc-stats-item .rdc-stats-value {
  font-family: var(--rdc-font-mono);
  font-size:   1.125rem;
  font-weight: 600;
  color:       var(--rdc-accent);
}
.rdc-stats-item .rdc-stats-label {
  font-size: 0.75rem;
  color:     var(--rdc-text-muted);
}

/* Alias pill */
.rdc-alias-pill {
  display:          inline-block;
  background-color: var(--rdc-surface-2);
  border:           1px solid var(--rdc-border);
  border-radius:    100px;
  padding:          0.15rem 0.6rem;
  font-size:        0.8rem;
  color:            var(--rdc-text-muted);
}

/* ── Navbar toggler (mobile) ────────────────────────────────── */
.rdc-toggler {
  border:  none;
  color:   var(--rdc-text-muted);
  padding: 0.375rem 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
}
.rdc-toggler:hover { color: var(--rdc-accent); }

/* ── Card footer ────────────────────────────────────────────── */
.rdc-card .card-footer {
  background-color: transparent;
  border-top:       1px solid var(--rdc-border);
  padding:          0.625rem 1rem;
}

/* ── Image gallery (images/index.php) ───────────────────────── */

.rdc-image-card {
  transition: border-color 0.2s, transform 0.15s;
}
.rdc-image-card:hover {
  border-color: var(--rdc-accent);
  transform:    translateY(-2px);
}

.rdc-image-thumb-wrap {
  position:        relative;
  aspect-ratio:    1 / 1;
  overflow:        hidden;
  background-color:var(--rdc-surface-2);
  border-bottom:   1px solid var(--rdc-border);
}

.rdc-image-thumb {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.rdc-image-primary-badge {
  position:         absolute;
  top:              0.375rem;
  left:             0.375rem;
  background-color: rgba(0, 229, 255, 0.85);
  color:            #0b0f1a;
  font-size:        0.65rem;
  font-weight:      700;
  letter-spacing:   0.05em;
  text-transform:   uppercase;
  border-radius:    var(--rdc-radius);
  padding:          0.1em 0.4em;
}

.rdc-image-entity-link {
  color:     var(--rdc-accent);
  font-size: 0.8rem;
}

/* ── Upload form ────────────────────────────────────────────── */

.rdc-upload-context {
  background-color: var(--rdc-surface-2);
  border:           1px solid var(--rdc-border);
}

.rdc-upload-preview {
  max-height:   260px;
  border-radius:var(--rdc-radius);
  border:       1px solid var(--rdc-border);
}

/* ── Search results ─────────────────────────────────────────── */

.rdc-search-section h2.rdc-section-title {
  display:     flex;
  align-items: center;
  gap:         0.375rem;
}

/* ── Detail page ────────────────────────────────────────────── */

/* Full-width image on detail pages */
.rdc-detail-image {
  width:         100%;
  border-radius: var(--rdc-radius-lg);
  border:        1px solid var(--rdc-border);
  display:       block;
}

/* Definition list used in detail sidebar cards */
.rdc-dl {
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   0.375rem 1rem;
  font-size:             0.875rem;
}
.rdc-dl dt {
  color:       var(--rdc-text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.rdc-dl dd {
  margin:      0;
  color:       var(--rdc-text);
  word-break:  break-word;
}

/* ── Scrollbar (Webkit) ─────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--rdc-bg); }
::-webkit-scrollbar-thumb { background: var(--rdc-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--rdc-text-muted); }