/* ============================================================
   Bosket's Alimentos — CMS Portal styling
   (loads AFTER the main style.css, reuses its coastal-mint vars)
   ============================================================ */

.cms-body { background: var(--green-50); min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Top bar ---------- */
.cms-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--green-900); color: #fff; padding: 10px 22px; position: sticky; top: 0; z-index: 50;
}
.cms-brand { display: flex; align-items: center; gap: 11px; color: #fff; }
.cms-brand:hover { color: #fff; }
.cms-brand svg { background: #fff; border-radius: 50%; padding: 2px; }
.cms-brand-txt { font-family: var(--font-display); font-size: 18px; letter-spacing: .4px; display: flex; align-items: center; gap: 10px; }
.cms-badge {
  font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: var(--orange-500); color: #fff; padding: 3px 9px; border-radius: 999px;
}
.cms-top-actions { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.cms-top-actions a { color: #cfe5e0; }
.cms-top-actions a:hover { color: #fff; }
.cms-who { color: #fff; font-weight: 600; }

/* ---------- Shell ---------- */
.cms-shell { flex: 1; display: grid; grid-template-columns: 232px 1fr; align-items: start; }
.cms-sidebar {
  background: #fff; border-right: 1px solid var(--line); min-height: calc(100vh - 54px);
  padding: 16px 12px; position: sticky; top: 54px; align-self: stretch;
}
.cms-sidebar a {
  display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 10px;
  color: var(--ink); font-weight: 600; font-size: 14.5px; margin-bottom: 3px;
}
.cms-sidebar a:hover { background: var(--green-50); color: var(--green-700); }
.cms-sidebar a.active { background: var(--green-700); color: #fff; }
.cms-sidebar .ci { font-size: 15px; width: 20px; text-align: center; }
.cms-main { padding: 28px 32px 60px; min-width: 0; }

/* auth (login / forgot / reset) */
.cms-auth { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.cms-auth .panel { max-width: 420px; width: 100%; }
.cms-body.cms-bare { background: linear-gradient(135deg, #14322d 0%, #23756a 100%); }
.cms-body.cms-bare .cms-topbar { background: transparent; }

/* ---------- Headings / page intro ---------- */
.cms-main h1 { font-size: 26px; margin: 0 0 4px; }
.cms-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cms-sub { color: var(--ink-soft); margin: 0 0 22px; }

/* ---------- Dashboard tiles ---------- */
.cms-stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 26px; }
.cms-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.cms-tile strong { display: block; font-family: var(--font-display); font-size: 30px; color: var(--green-700); line-height: 1.1; }
.cms-tile span { color: var(--ink-soft); font-size: 13.5px; }
.cms-tile.alert strong { color: var(--orange-600); }

/* ---------- Tables ---------- */
.cms-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.cms-table th { background: var(--green-900); color: #fff; text-align: left; padding: 11px 14px; font-size: 13px; }
.cms-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.cms-table tr:hover td { background: var(--green-50); }
.cms-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.cms-pill.green { background: var(--green-100); color: var(--green-900); }
.cms-pill.grey  { background: #eceff1; color: #5b6b62; }
.cms-pill.orange{ background: var(--orange-100); color: #91503b; }
.cms-pill.red   { background: #fdecea; color: var(--danger); }
.cms-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Forms ---------- */
.cms-form-2col { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
.cms-form-2col .panel { margin: 0; }
.cms-help { font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 0; }
.cms-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.slug-row { display: flex; align-items: center; gap: 6px; }
.slug-row .pfx { color: var(--ink-soft); font-size: 13px; white-space: nowrap; }

/* switches */
.cms-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; font-size: 14px; }
.cms-switch input { display: none; }
.cms-switch .track { width: 42px; height: 24px; border-radius: 999px; background: #cfd8d5; position: relative; transition: .18s; flex: 0 0 auto; }
.cms-switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.cms-switch input:checked + .track { background: var(--green-600); }
.cms-switch input:checked + .track::after { left: 21px; }

/* ---------- WYSIWYG editor ---------- */
.cms-editor { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; margin-top: 6px; }
.cms-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 7px 8px; border-bottom: 1px solid var(--line); background: var(--green-50); }
.cms-toolbar button { border: 0; background: transparent; width: 34px; height: 32px; border-radius: 7px; cursor: pointer; font-size: 15px; color: var(--ink); }
.cms-toolbar button:hover { background: var(--green-100); }
.cms-toolbar .sep { width: 1px; background: var(--line); margin: 4px 4px; }
.cms-area { min-height: 320px; padding: 16px 18px; outline: none; font-size: 15.5px; line-height: 1.7; }
.cms-area:focus { background: #fff; }
.cms-area h2 { font-size: 24px; } .cms-area h3 { font-size: 20px; }
.cms-area img { max-width: 100%; border-radius: 8px; }
.cms-area blockquote { border-left: 4px solid var(--green-600); margin: 12px 0; padding: 4px 16px; color: var(--ink-soft); }

/* ---------- Menu builder ---------- */
.cms-menu-col h3 { margin-top: 0; }
.cms-menu-list { list-style: none; margin: 0; padding: 0; }
.cms-menu-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-bottom: 8px; }
.cms-menu-row.child { margin-left: 28px; background: var(--green-50); }
.cms-menu-row .grip { color: var(--ink-soft); cursor: default; }
.cms-menu-row .ml-label { font-weight: 600; flex: 1; min-width: 0; }
.cms-menu-row .ml-dest { color: var(--ink-soft); font-size: 12.5px; }
.cms-ord { display: inline-flex; flex-direction: column; }
.cms-ord button { border: 0; background: var(--green-50); cursor: pointer; line-height: 1; padding: 1px 6px; border-radius: 5px; font-size: 11px; }
.cms-ord button:hover { background: var(--green-100); }

/* ---------- Moderation tabs ---------- */
.cms-tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.cms-tabs a { padding: 9px 16px; font-weight: 600; color: var(--ink-soft); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.cms-tabs a.active { color: var(--green-700); border-bottom-color: var(--green-700); }
.cms-tabs .count { background: var(--orange-100); color: #91503b; border-radius: 999px; padding: 0 7px; font-size: 11px; margin-left: 5px; }

/* ---------- Footer ---------- */
.cms-foot { background: var(--green-900); color: #9fc1ba; font-size: 12.5px; padding: 12px 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Appearance preview ---------- */
.theme-choices { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.theme-choice { border: 2px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; width: 120px; text-align: center; font-weight: 600; font-size: 13px; }
.theme-choice input { display: none; }
.theme-choice .swatch { height: 46px; border-radius: 8px; margin-bottom: 8px; }
.theme-choice.light .swatch { background: linear-gradient(135deg,#f6faf9,#dfe9e6); }
.theme-choice.dark .swatch { background: linear-gradient(135deg,#1a2420,#0f1714); }
.theme-choice.system .swatch { background: linear-gradient(135deg,#f6faf9 50%,#1a2420 50%); }
.theme-choice.sel { border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); }

@media (max-width: 860px) {
  .cms-shell { grid-template-columns: 1fr; }
  .cms-sidebar { position: static; min-height: 0; display: flex; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); }
  .cms-sidebar a { margin-bottom: 0; }
  .cms-form-2col { grid-template-columns: 1fr; }
  .cms-main { padding: 20px 18px 50px; }
}