/**
 * AIS brand skin — loaded after style.css (NioBoard / Bootstrap).
 * Mirrors tailwind.config.js brand tokens for the nk theme.
 */
:root {
  --brand-teal: #006064;
  --brand-teal-light: #e0f2f1;
  --brand-teal-dark: #00363a;
  --brand-coral: #ff8a65;
  --brand-coral-light: #ffab91;
  --brand-coral-dark: #d84315;
  --brand-cyan: #22d3ee;
  --brand-bg: #f9fafb;
  --facebook-blue: #1877f2;

  --bs-primary: var(--brand-coral);
  --bs-primary-rgb: 255, 138, 101;
  --bs-teal: var(--brand-teal);
  --bs-cyan: var(--brand-cyan);
}

body.nk-body {
  font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  color: var(--brand-teal-dark);
}

/*
 * NioBoard style.css sets .link-primary:hover to RGB(50, 50, 190); override to brand coral.
 */
body.nk-body .link-primary:hover,
body.nk-body .link-primary:focus {
  color: var(--brand-coral-dark) !important;
  text-decoration-color: var(--brand-coral-dark) !important;
}

.nk-wrap {
  background-color: var(--brand-bg);
}

/* Dashboard top bar only — public marketing uses <header class="nk-header"> without .nk-header-fixed */
.nk-header.nk-header-fixed {
  background-color: #fff;
}

/* Dark teal sidebar (uses .is-theme menu rules from theme) */
.nk-sidebar.is-theme {
  background-color: var(--brand-teal-dark) !important;
}

/*
 * Collapsed sidebar logo: NioBoard applies translateX(-0.75rem) to .logo-img in compact mode,
 * which shifts the bitmap left and clips it against .nk-sidebar-head { overflow: hidden }.
 */
.nk-sidebar.is-compact:not(:hover) .logo-img {
  transform: scale(0.70);
  transform-origin: center center;
}

.nk-sidebar.is-compact:not(:hover) .brand-logo-name {
  display: none;
}

.nk-sidebar.is-compact:not(:hover) .logo-link {
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.nk-sidebar.is-compact:not(:hover) .nk-sidebar-head {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.nk-sidebar.is-theme .nk-menu-link:hover .icon,
.nk-sidebar.is-theme .active > .nk-menu-link .icon {
  color: var(--brand-coral) !important;
}

.nk-sidebar.is-theme .nk-menu > .nk-menu-item.active > .nk-menu-link {
  color: #fff !important;
  background-color: rgba(255, 138, 101, 0.22) !important;
}

.nk-sidebar.is-theme .nk-menu-sub .nk-menu-link:hover {
  color: #fff !important;
}

.nk-sidebar.is-theme .nk-menu-sub .active > .nk-menu-link {
  color: var(--brand-coral-light) !important;
  opacity: 1 !important;
}

.nk-sidebar.is-theme .nk-menu-sub .active > .nk-menu-link::before {
  background-color: var(--brand-coral) !important;
}

/* Primary buttons — coral */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-coral);
  --bs-btn-border-color: var(--brand-coral);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-coral-dark);
  --bs-btn-hover-border-color: var(--brand-coral-dark);
  --bs-btn-focus-shadow-rgb: 255, 138, 101;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-coral-dark);
  --bs-btn-active-border-color: var(--brand-coral-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand-coral);
  --bs-btn-disabled-border-color: var(--brand-coral);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-coral);
  --bs-btn-border-color: var(--brand-coral);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-coral);
  --bs-btn-hover-border-color: var(--brand-coral);
  --bs-btn-focus-shadow-rgb: 255, 138, 101;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-coral-dark);
  --bs-btn-active-border-color: var(--brand-coral-dark);
}

/*
 * Form fields: NioBoard uses purple focus rings; align with brand teal (body / structure).
 */
body.nk-body .form-control:focus {
  border-color: rgba(0, 96, 100, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(0, 96, 100, 0.12);
}

body.nk-body .form-select:focus {
  border-color: rgba(0, 96, 100, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(0, 96, 100, 0.12);
}

body.nk-body .form-check-input:focus {
  border-color: rgba(0, 96, 100, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(0, 96, 100, 0.12);
}

body.nk-body .form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 96, 100, 0.65%29'/%3e%3c/svg%3e");
}

/*
 * Tab strip (profile, etc.): NioBoard hardcodes purple #3f3eed on .nav-tabs-s1.
 */
body.nk-body .nav-tabs-s1 .nav-link.active {
  color: var(--brand-coral);
}

body.nk-body .nav-tabs-s1 .nav-link::after {
  background-color: var(--brand-coral);
}

body.nk-body.is-dark .nav-tabs-s1 .nav-link.active {
  color: var(--brand-coral-light);
}

body.nk-body.is-dark .nav-tabs-s1 .nav-link::after {
  background-color: var(--brand-coral-light);
}

/* AI suggestion highlight utility (matches Tailwind app.css) */
.ai-suggestion-highlight {
  background-color: rgba(34, 211, 238, 0.1);
}

/*
 * Sidebar: NioBoard sets .is-theme h6 { color: #fff }, which hides text on white panels.
 */
.nk-sidebar.is-theme .sidebar-credits-panel h6,
.nk-sidebar.is-theme .sidebar-credits-panel .lead-text,
.nk-sidebar.is-theme .sidebar-credits-panel #credits-left-sidebar,
.nk-sidebar.is-theme .sidebar-credits-panel .sidebar-credits-amount {
  color: var(--brand-teal-dark) !important;
}

.nk-sidebar.is-theme .sidebar-credits-panel .text-muted {
  color: #6b7280 !important;
}

.nk-sidebar.is-theme .sidebar-credits-panel .sidebar-credits-amount {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}

/* Profile row sits on dark teal — use light text (do not use brand-teal-dark here). */
.nk-sidebar.is-theme .sidebar-profile-footer {
  background-color: rgba(0, 0, 0, 0.18) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nk-sidebar.is-theme .sidebar-profile-footer .sidebar-profile-name {
  color: #f8fafc !important;
}

.nk-sidebar.is-theme .sidebar-profile-footer .sidebar-profile-email {
  color: rgba(248, 250, 252, 0.72) !important;
}

.nk-sidebar.is-theme .sidebar-profile-footer .icon {
  color: var(--brand-coral) !important;
}

/* Client dashboard section titles */
.nk-page-head .display-6,
.nk-block-head .display-6 {
  color: var(--brand-teal-dark);
}

.dashboard-stat-card h5.fs-1,
.dashboard-template-card h5.fs-4 {
  color: var(--brand-teal-dark);
}

.dashboard-stat-card {
  border: 1px solid rgba(0, 54, 58, 0.08);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 96, 100, 0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

/* Brand-tinted stat row: teal (stability), coral (human / drafts), cyan (AI / templates) */
.dashboard-stat-card--teal {
  background-color: rgba(0, 96, 100, 0.08) !important;
  border-color: rgba(0, 96, 100, 0.14) !important;
}

.dashboard-stat-card--teal:hover {
  border-color: rgba(0, 96, 100, 0.22) !important;
  box-shadow: 0 0.35rem 1rem rgba(0, 96, 100, 0.1);
}

.dashboard-stat-card--coral {
  background-color: rgba(255, 138, 101, 0.12) !important;
  border-color: rgba(255, 138, 101, 0.22) !important;
}

.dashboard-stat-card--coral:hover {
  border-color: rgba(216, 67, 21, 0.28) !important;
  box-shadow: 0 0.35rem 1rem rgba(255, 138, 101, 0.14);
}

.dashboard-stat-card--cyan {
  background-color: rgba(34, 211, 238, 0.11) !important;
  border-color: rgba(34, 211, 238, 0.24) !important;
}

.dashboard-stat-card--cyan:hover {
  border-color: rgba(34, 211, 238, 0.35) !important;
  box-shadow: 0 0.35rem 1rem rgba(34, 211, 238, 0.12);
}

.dashboard-template-card {
  border: 1px solid rgba(0, 54, 58, 0.08);
  border-radius: 0.75rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.dashboard-template-card:hover {
  border-color: rgba(0, 96, 100, 0.15);
  box-shadow: 0 0.35rem 1rem rgba(0, 54, 58, 0.07);
}

/* Template grid icons: default coral; Facebook uses official brand blue */
.template-card-icon:not(.template-card-icon--facebook) {
  background-color: rgba(255, 138, 101, 0.15) !important;
  color: var(--brand-coral-dark) !important;
}

.template-card-icon.template-card-icon--facebook {
  background-color: rgba(24, 119, 242, 0.14) !important;
  color: var(--facebook-blue) !important;
}

/* -------------------------------------------------------------------------- */
/* Public marketing (frontend landing — .nk-pages, hero lives under .nk-header) */
/* -------------------------------------------------------------------------- */

body.nk-body:not(.is-dark) .nk-pages {
  background-color: var(--brand-bg);
}

body.nk-body:not(.is-dark) .nk-header.has-mask .nk-mask.bg-gradient-a {
  background-image: none;
  background: radial-gradient(ellipse 100% 85% at 50% -15%, rgba(0, 96, 100, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 75% 55% at 78% 12%, rgba(255, 138, 101, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse 65% 50% at 18% 32%, rgba(34, 211, 238, 0.1) 0%, transparent 55%);
}

body.nk-body:not(.is-dark) .nk-pages .nk-shape.bg-shape-blur-a {
  background-image: none;
  width: min(898px, 92vw);
  height: min(1168px, 125vh);
  background: radial-gradient(ellipse at center, rgba(0, 96, 100, 0.2) 0%, rgba(0, 54, 58, 0.05) 52%, transparent 74%);
  opacity: 0.95;
}

body.nk-body:not(.is-dark) .nk-pages .text-bg-primary-soft {
  color: var(--brand-coral-dark) !important;
  background-color: rgba(255, 138, 101, 0.14) !important;
  border: 1px solid rgba(0, 96, 100, 0.06);
}

body.nk-body:not(.is-dark) .nk-pages .text-bg-primary-soft .icon,
body.nk-body:not(.is-dark) .nk-pages .text-bg-primary-soft .ni {
  color: var(--brand-teal) !important;
}

/* Facebook (Meta) brand — official blue #1877F2; Nioicon uses ni-facebook-circle | ni-facebook-fill | ni-facebook-f */
body.nk-body:not(.is-dark) .nk-pages .text-bg-primary-soft .ni[class*="facebook"],
body.nk-body:not(.is-dark) .nk-pages .text-bg-primary-soft .icon[class*="facebook"] {
  color: var(--facebook-blue) !important;
}

body.nk-body:not(.is-dark) .nk-pages .text-bg-primary-soft:has(.ni[class*="facebook"]) {
  color: var(--facebook-blue) !important;
  background-color: rgba(24, 119, 242, 0.14) !important;
  border-color: rgba(24, 119, 242, 0.2) !important;
}

body.nk-body:not(.is-dark) .nk-pages .feature .media.media-xl.text-bg-primary-soft {
  padding: 1rem 1.15rem;
}

body.nk-body:not(.is-dark) .nk-header .nk-hero .title,
body.nk-body:not(.is-dark) .nk-pages .section .title {
  color: var(--brand-teal-dark);
}

body.nk-body:not(.is-dark) .nk-pages .section-head .lead,
body.nk-body:not(.is-dark) .nk-header .nk-hero .lead {
  color: #4b5563;
}

body.nk-body:not(.is-dark) .nk-header .nk-hero .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-teal-dark);
  --bs-btn-border-color: var(--brand-teal-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-teal);
  --bs-btn-hover-border-color: var(--brand-teal);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-teal);
  --bs-btn-active-border-color: var(--brand-teal);
  --bs-btn-focus-shadow-rgb: 0, 96, 100;
}

body.nk-body:not(.is-dark) .nk-header .carousel-indicators [data-bs-target] {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: rgba(0, 54, 58, 0.2);
  border: 0;
  opacity: 1;
}

body.nk-body:not(.is-dark) .nk-header .carousel-indicators .active {
  background-color: var(--brand-coral);
}

body.nk-body:not(.is-dark) .nk-pages .card.shadow-tiny {
  border: 1px solid rgba(0, 54, 58, 0.08);
  box-shadow: 0 0.35rem 1.35rem rgba(0, 96, 100, 0.07);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

body.nk-body:not(.is-dark) .nk-pages .card.shadow-tiny:hover {
  border-color: rgba(0, 96, 100, 0.16);
  box-shadow: 0 0.55rem 1.85rem rgba(0, 96, 100, 0.11);
  transform: translateY(-2px);
}

body.nk-body:not(.is-dark) .nk-footer {
  border-top: 1px solid rgba(0, 54, 58, 0.08);
  background: linear-gradient(180deg, #fff 0%, var(--brand-bg) 100%);
}

body.nk-body:not(.is-dark) .nk-footer .text-heading a:hover {
  color: var(--brand-coral-dark);
}

/*
 * Client/admin footer copyright link: theme .link-primary uses brand coral for default
 * but hardcodes blue on :hover. Force AIS coral for default + hover/focus.
 */
body.nk-body .nk-footer-copyright a {
  color: var(--brand-coral) !important;
  text-decoration-color: var(--brand-coral) !important;
}

body.nk-body .nk-footer-copyright a:hover,
body.nk-body .nk-footer-copyright a:focus {
  color: var(--brand-coral-dark) !important;
  text-decoration-color: var(--brand-coral-dark) !important;
}

body.nk-body:not(.is-dark) .nk-header-menu .nk-menu-item:hover > .nk-menu-link {
  color: var(--brand-coral-dark);
}

body.nk-body:not(.is-dark) .nk-pages .accordion-button:not(.collapsed) {
  color: var(--brand-teal-dark);
}

body.nk-body:not(.is-dark) .nk-pages .accordion-icon-accent .accordion-button:after {
  color: var(--brand-coral);
}

body.nk-body.is-dark .nk-pages .accordion-icon-accent .accordion-button:after {
  color: var(--brand-coral-light);
}

body.nk-body.is-dark .nk-pages .text-bg-primary-soft {
  color: var(--brand-coral-light) !important;
  background-color: rgba(255, 138, 101, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.08);
}

body.nk-body.is-dark .nk-pages .text-bg-primary-soft .ni[class*="facebook"],
body.nk-body.is-dark .nk-pages .text-bg-primary-soft .icon[class*="facebook"] {
  color: var(--facebook-blue) !important;
}

body.nk-body.is-dark .nk-pages .text-bg-primary-soft:has(.ni[class*="facebook"]) {
  color: var(--facebook-blue) !important;
  background-color: rgba(24, 119, 242, 0.16) !important;
  border-color: rgba(24, 119, 242, 0.28) !important;
}