/* ========== Base ========== */
body {
  font-family: Arial, sans-serif;
  background-color: #181d30;
  padding-bottom: 48px;
}

/* Container for entire main content */
.container {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 10px;
}

/* Sub-container for search panel and cards */
.sub-container {
  max-width: 100%;
  margin-left: auto;
  padding: 30px 15px;
}

/* Headings */
h1, .main-title {
  font-size: 3rem;
  color: #dee2e6;
  font-weight: 700;
}

.section-subtitle {
  font-size: 1.5rem;
  color: #7f8c8d;
}

/* ========== Rule cards (home list) ========== */
.rule-list-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 10px;
}

.rule-card {
  background: #232840;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transition: box-shadow 0.2s;
  width: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.rule-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.23); }

.rule-card-body {
  padding: 1.5rem 1.3rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
}

.rule-card-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #41bdfc;
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rule-card-tags { margin-bottom: 0.1rem; }
.rule-badge {
  background: #232d45;
  color: #8eb3f7;
  border-radius: 12px;
  padding: 0.19em 0.9em;
  font-size: 0.97em;
  margin-right: 5px;
}

/* Meta & actions */
.rule-card-meta-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.2rem;
}

.rule-card-meta {
  color: #b2b9d7;
  font-size: 0.97em;
  font-style: italic;
  line-height: 1.5;
}

.meta-label { font-weight: bold; font-style: normal; color: #e3e8ef; margin-right: 2px; }
.release-date { font-style: italic; color: #e3e8ef; }

.rule-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6em;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}
.rule-card-actions, .rule-card-actions * { cursor: default; }

.rule-action-btn {
  background: #28304a;
  color: #b2b9d7;
  border: none;
  border-radius: 8px;
  padding: 0.35em 0.59em;
  font-size: 1.25rem;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  outline: none;
}
.rule-action-btn:hover, .rule-action-btn:focus {
  background: #41bdfc;
  color: #192134;
  box-shadow: 0 2px 10px #0001;
  outline: none;
}

.rule-card-empty { color: #bbb; text-align: center; margin: 2em 0; font-size: 1.15em; }


/* Responsive — widen ONLY the list, not all .container */
@media (max-width: 1200px) {
  .rule-list-main { max-width: 99vw; }
  .rule-card-meta-actions { flex-direction: column; align-items: flex-start; }
  .rule-card-actions { margin-top: 0.5rem; width: 100%; justify-content: flex-start; }
}
@media (max-width: 900px) {
  .rule-list-main { max-width: 100vw; }
  .rule-card-title { font-size: 1.1rem; }
}
@media (max-width: 600px) {
  .rule-card-body { padding: 1rem 0.6rem; }
  .rule-card-title { font-size: 1rem; }
  .rule-card-meta { font-size: 0.88em; }
}

/* ----------- Filter/Modal/Search Form styles (dark theme) ----------- */

/* Dialog position */
#filterModal .modal-dialog { margin-top: 6vh; }

/* Panel */
#filterModal .modal-content {
  background: #1b2233;                 /* same family as your cards */
  color: #e3e8ef;
  border: 1px solid #2e3a55;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

/* Header */
#filterModal .modal-header {
  background: #1f2a44;
  color: #e3e8ef;
  border-bottom: 1px solid #2e3a55;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: .75rem 1rem;
}
#filterModal .modal-title { font-weight: 700; letter-spacing: .2px; }
#filterModal .close { color: #e3e8ef; opacity: .9; text-shadow: none; }
#filterModal .close:hover { color: #64d6ff; opacity: 1; }

/* Labels & inputs */
#filterModal .modal-body label { color: #cfd8e3; }
#filterModal .form-control {
  background: #232d45;
  color: #e3e8ef;
  border: 1px solid #364566;
}
#filterModal .form-control:focus {
  background: #26304a;
  color: #fff;
  border-color: #41bdfc;
  box-shadow: 0 0 0 .2rem rgba(65,189,252,.25);
}

/* Footer & buttons */
#filterModal .modal-footer {
  display: flex; justify-content: center; align-items: center;
  background: transparent;
  border-top: 1px solid #2e3a55;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
#filterModal .modal-footer .btn { margin-left: 10px; }

/* Apply Filters (btn-info) -> accent blue */
#filterModal .btn-info {
  background: #41bdfc; border-color: #41bdfc; color: #0f172a; font-weight: 600;
}
#filterModal .btn-info:hover, #filterModal .btn-info:focus {
  background: #64d6ff; border-color: #64d6ff; color: #0b1220;
}

#filterModal .btn-warning {
  background: #b84b4b;
  border-color: #b84b4b;
  color: #fff;
  font-weight: 600;
}
#filterModal .btn-warning:hover,
#filterModal .btn-warning:focus {
  background: #d25c5c;
  border-color: #d25c5c;
  color: #fff;
}

/* Backdrop tint to match site */
.modal-backdrop.show { background: #0b1020; opacity: .6; }

/* Search input (kept from your theme) */
.search .form-control { background-color: #dee2e6; color: #181d30; }
.search .form-control:focus { background-color: #dee2e6; }

/* ---------------- Footer ------------------ */
.footer-fixed {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  background: #212436;
  border-top: 1px solid #34374a;
  color: #e0e6ed;
  text-align: center;
  z-index: 1000;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.17);
}
.footer-content { margin: 0 auto; padding: 0.6rem 0; font-size: 1.08rem; letter-spacing: 0.02em; font-weight: 600; }
.footer-fixed a { color: #41bdfc; text-decoration: underline; font-weight: 600; transition: color 0.2s; margin-left: 5px; }
.footer-fixed a:hover { color: #64d6ff; }

/* Rule list colors */
.rule-card-body, .rule-card-title, .rule-card-meta, .rule-card-tags, .rule-badge { color: #e3e8ef !important; }
.rule-card-title { color: #41bdfc !important; }
.rule-card-meta { color: #b2b9d7 !important; }
.rule-badge { color: #8eb3f7 !important; }
.rule-meta-author strong, .rule-meta-date strong { font-weight: bold !important; color: #e3e8ef !important; }
.rule-meta-author span, .rule-meta-date span { font-weight: normal !important; color: #b2b9d7 !important; }

/* ---------- Details page ---------- */
.dark-bg { background-color: #181d30; }

.custom-dark-panel {
  background: #1b2233;
  border: 2px dotted #2e3a55;
  border-radius: 18px;
  color: #dfe6f1;
}

.section-heading { color: #dfe6f1; margin-bottom: .25rem; }
.section-divider { border-top: 1px solid #2e3a55; opacity: .9; }

.rule-title {
  color: #e3e8ef;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  word-break: break-word;
}

.rule-pre {
  background: #10162a;
  color: #e3e8ef;
  border-radius: 10px;
  padding: 14px;
  font-size: 0.98rem;
  max-height: 60vh;
  overflow: auto;
}

.link-accent { color: #41bdfc; }
.link-accent:hover { color: #64d6ff; text-decoration: underline; }

.copy-btn { margin-top: 2px; }
.home-icon {
  position: absolute; top: -6px; left: 0;
  background: transparent; border: 0; color: #e3e8ef;
  font-size: 1.15rem; padding: .25rem .5rem; border-radius: 8px;
}
.home-icon:hover { color: #64d6ff; }

/* ---------- FORM PAGE (dark, centered) ---------- */
/* NOTE: removed the hard 900px cap so desktop media queries can widen it */
.form-page .container {
  /* no max-width here — inherits .container at 900px on mobile/tablet */
  margin: 0 auto;
}

/* intro paragraph under the title */
.form-page .container > p.text-white {
  /* let media queries control width; just center it */
  margin: 0 auto 1rem;
  padding-left: 0;   /* override px-4 if present */
  padding-right: 0;
}

/* the card itself */
.form-panel{
  background:#1b2233 !important;
  border:2px dotted #2e3a55 !important;
  border-radius:18px !important;
  color:#dfe6f1 !important;
  width: 100%;
  margin: 0 auto;       /* ⛔ no max-width here */
}

/* Labels & inputs in dark */
.form-panel label{ color:#cfd8e3 !important; }
.form-panel .form-control{
  background:#232d45 !important;
  color:#e3e8ef !important;
  border-color:#364566 !important;
}
.form-panel .form-control::placeholder{ color:#8aa0c6 !important; }
.form-panel .form-control:focus{
  background:#26304a !important;
  color:#fff !important;
  border-color:#41bdfc !important;
  box-shadow:0 0 0 .2rem rgba(65,189,252,.25) !important;
}

/* ========= Desktop-wide layout (all pages) ========= */
/* Keep mobile/tablet as-is. Only widen >= 1200px, and a touch more >= 1440px. */
@media (min-width: 1200px) {
  /* Global containers (home, details, form) */
  .container { max-width: 1140px; }

  /* Home rule list wrapper so cards align with the container */
  .rule-list-main { max-width: 1140px; }

  /* Details card panel */
  .details-card { max-width: 1140px; margin-left: auto; margin-right: auto; }

  /* Form page elements */
  .form-page .container > p.text-white { max-width: 1140px; margin-left: auto; margin-right: auto; }
  .form-panel { max-width: 1140px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 1440px) {
  .container,
  .rule-list-main,
  .details-card,
  .form-page .container > p.text-white,
  .form-panel {
    max-width: 1240px; /* bump a bit on very large monitors */
  }
}
.copied { filter: saturate(1.2); }
.rule-card-desc { margin-top: 6px; font-size: 0.95rem; opacity: 0.9; }