/* ============================================================================
   SeoCute — sc-bridge.css
   Maps legacy RF/app classes → new sc-token design system.
   Applied globally via app.php layout. No view files need changing.
   ============================================================================ */

/* ── Old CSS variable aliases → new tokens ── */
:root {
  --text:   var(--color-text);
  --text-2: var(--color-text-sec);
  --text-3: var(--color-muted);
  --bg:     var(--color-bg);
  --surface:var(--color-surface);
  --border: var(--color-border);
  --primary:var(--color-primary);
}

/* ── rf-card → sc-section-card ── */
.rf-card {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  box-shadow: 0 2px 12px rgba(15,23,42,.05) !important;
  transition: box-shadow 200ms ease, transform 200ms ease !important;
  color: var(--color-text) !important;
}
.rf-card:hover {
  box-shadow: 0 6px 24px rgba(15,23,42,.09) !important;
}
.rf-card-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  margin-bottom: 4px !important;
}
.rf-card-sub {
  font-size: 13px !important;
  color: var(--color-muted) !important;
  margin-bottom: 20px !important;
}

/* ── stat-card → sc-metric-card ── */
.stat-card {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.05) !important;
  transition: transform 200ms ease, box-shadow 200ms ease !important;
}
.stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(15,23,42,.09) !important;
}
.stat-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--color-muted) !important;
  margin-bottom: 8px !important;
}
.stat-value {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--color-text) !important;
  line-height: 1 !important;
}

/* ── app-topbar → page header ── */
.app-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.topbar-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--color-text) !important;
  letter-spacing: -.3px !important;
}
.topbar-subtitle {
  font-size: 13px !important;
  color: var(--color-muted) !important;
  margin-top: 2px !important;
}
.topbar-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* ── app-content ── */
.app-content {
  color: var(--color-text) !important;
}

/* ── badge-soft-* → token-based badges ── */
.badge-soft-primary   { background: var(--color-primary-soft) !important; color: var(--color-primary) !important; border-radius: 6px !important; }
.badge-soft-success   { background: var(--color-success-soft) !important; color: var(--color-success) !important; border-radius: 6px !important; }
.badge-soft-warning   { background: var(--color-warning-soft) !important; color: var(--color-warning) !important; border-radius: 6px !important; }
.badge-soft-danger    { background: var(--color-danger-soft)  !important; color: var(--color-danger)  !important; border-radius: 6px !important; }
.badge-soft-info      { background: var(--color-info-soft)    !important; color: var(--color-info)    !important; border-radius: 6px !important; }
.badge-soft-secondary { background: var(--color-border)       !important; color: var(--color-muted)   !important; border-radius: 6px !important; }
.badge-soft-muted     { background: var(--color-border)       !important; color: var(--color-muted)   !important; border-radius: 6px !important; }

/* ── btn-accent ── */
.btn-accent {
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: box-shadow 200ms ease, transform 200ms ease !important;
}
.btn-accent:hover {
  box-shadow: 0 4px 14px rgba(99,102,241,.35) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* ── Tables (old Bootstrap tables → token system) ── */
.table {
  color: var(--color-text) !important;
  --bs-table-bg: transparent !important;
  --bs-table-color: var(--color-text) !important;
  --bs-table-border-color: var(--color-border) !important;
  --bs-table-hover-bg: var(--color-primary-soft) !important;
  --bs-table-striped-bg: rgba(99,102,241,.03) !important;
}
.table th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--color-muted) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  padding: 11px 16px !important;
  white-space: nowrap !important;
}
.table td {
  font-size: 13px !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
  padding: 12px 16px !important;
  vertical-align: middle !important;
  background: transparent !important;
}
.table tbody tr:hover td { background: var(--color-primary-soft) !important; }
.table-responsive { border-radius: 14px !important; overflow: hidden !important; }
.sc-table-head th, thead.sc-table-head th {
  background: var(--color-surface) !important;
  color: var(--color-muted) !important;
}

/* ── Forms ── */
/* form-control — handled by sc-tokens.css */
/* form-select — handled by sc-tokens.css */
/* form focus — handled by sc-tokens.css */
/* placeholder — handled by sc-tokens.css */
.form-label, label { color: var(--color-text) !important; font-size: 13px !important; font-weight: 600 !important; }
.input-group-text {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-sec) !important;
}

/* ── Cards (Bootstrap .card → tokens) ── */
.card {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(15,23,42,.05) !important;
  color: var(--color-text) !important;
}
.card-header {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  font-weight: 700 !important;
  padding: 16px 20px !important;
}
.card-body  { color: var(--color-text) !important; padding: 20px !important; }
.card-title { color: var(--color-text) !important; font-weight: 700 !important; }
.card:hover { box-shadow: 0 6px 24px rgba(15,23,42,.09) !important; }

/* ── Alerts ── */
.alert { border-radius: 10px !important; font-size: 14px !important; }
.alert-success { background: var(--color-success-soft) !important; border-color: var(--color-success) !important; color: var(--color-success) !important; }
.alert-danger   { background: var(--color-danger-soft) !important;  border-color: var(--color-danger)  !important; color: var(--color-danger)  !important; }
.alert-warning  { background: var(--color-warning-soft)!important;  border-color: var(--color-warning) !important; color: var(--color-warning) !important; }
.alert-info     { background: var(--color-info-soft)   !important;  border-color: var(--color-info)    !important; color: var(--color-info)    !important; }
.alert-primary  { background: var(--color-primary-soft)!important;  border-color: var(--color-primary) !important; color: var(--color-primary) !important; }

/* ── Modals ── */
.modal-content {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  border-radius: 16px !important;
  color: var(--color-text) !important;
}
.modal-header {
  border-color: var(--color-border) !important;
  background: var(--color-surface) !important;
}
.modal-footer { border-color: var(--color-border) !important; }
.modal-title  { color: var(--color-text) !important; font-weight: 700 !important; }
body.theme-dark .btn-close { filter: invert(1) brightness(200%); }

/* ── Pagination ── */
.page-link {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-sec) !important;
}
.page-link:hover { background: var(--color-primary-soft) !important; color: var(--color-primary) !important; }
.page-item.active .page-link {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

/* ── Tabs ── */
.nav-tabs { border-color: var(--color-border) !important; }
.nav-tabs .nav-link { color: var(--color-text-sec) !important; border-color: transparent !important; border-radius: 8px 8px 0 0 !important; }
.nav-tabs .nav-link.active {
  background: var(--color-card) !important;
  border-color: var(--color-border) var(--color-border) var(--color-card) !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}
.nav-pills .nav-link { border-radius: 8px !important; color: var(--color-text-sec) !important; }
.nav-pills .nav-link.active {
  background: var(--color-primary) !important;
  color: #fff !important;
}

/* ── Breadcrumb ── */
.breadcrumb { background: transparent !important; padding: 0 !important; margin-bottom: 16px !important; }
.breadcrumb-item a { color: var(--color-primary) !important; text-decoration: none !important; font-size: 13px !important; }
.breadcrumb-item.active { color: var(--color-muted) !important; font-size: 13px !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--color-muted) !important; }

/* ── Select Project pages ── */
.project-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.project-select-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px;
  cursor: pointer;
  transition: all 200ms ease;
  text-decoration: none;
  display: block;
  color: var(--color-text);
}
.project-select-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  transform: translateY(-2px);
  color: var(--color-text);
}
.project-select-card .proj-name {
  font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 4px;
}
.project-select-card .proj-domain {
  font-size: 12px; color: var(--color-muted);
}

/* ── List groups ── */
.list-group-item {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}
.list-group-item:hover { background: var(--color-primary-soft) !important; }
.list-group-item.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

/* ── Dropdowns ── */
.dropdown-menu {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(15,23,42,.12) !important;
}
.dropdown-item { color: var(--color-text) !important; font-size: 13px !important; border-radius: 6px !important; }
.dropdown-item:hover { background: var(--color-primary-soft) !important; color: var(--color-primary) !important; }
.dropdown-divider { border-color: var(--color-border) !important; }

/* ── Accordion ── */
.accordion-item   { background: var(--color-surface) !important; border-color: var(--color-border) !important; }
.accordion-button { background: var(--color-surface) !important; color: var(--color-text) !important; font-weight: 600 !important; }
.accordion-button:not(.collapsed) { background: var(--color-primary-soft) !important; color: var(--color-primary) !important; }
body.theme-dark .accordion-button::after { filter: invert(1); }

/* ── Progress ── */
.progress { background: var(--color-border) !important; border-radius: 99px !important; }
.progress-bar { background: var(--color-primary) !important; border-radius: 99px !important; }

/* ── Sidebar border fix ── */
.menu-inner .menu-item .menu-link {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  outline: none !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin: 1px 8px !important;
}
.menu-inner .menu-item.active > .menu-link {
  border: none !important;
  border-left: none !important;
}
/* Remove Sneat left-border active indicator */
.menu-item.active:not(.open) > .menu-link:before,
.menu-item.active > .menu-link::before,
.menu-item.active > .menu-link::after {
  display: none !important;
}

/* ── Utility ── */
.text-muted { color: var(--color-muted) !important; }
.text-secondary { color: var(--color-text-sec) !important; }
.bg-white { background: var(--color-card) !important; }
.bg-light  { background: var(--color-surface) !important; }
.border    { border-color: var(--color-border) !important; }
.border-bottom { border-bottom-color: var(--color-border) !important; }
.border-top    { border-top-color: var(--color-border) !important; }
.shadow-sm { box-shadow: 0 2px 12px rgba(15,23,42,.05) !important; }
.shadow    { box-shadow: 0 6px 24px rgba(15,23,42,.09) !important; }
h1,h2,h3,h4,h5,h6 { color: var(--color-text) !important; }
p { color: var(--color-text-sec); }
small, .small { color: var(--color-muted); }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary); opacity: .85; }
hr { border-color: var(--color-border) !important; }
code { background: var(--color-primary-soft) !important; color: var(--color-primary) !important; border-radius: 5px; padding: 1px 5px; }