/* Classeto v7.14 — dark-blue brand overlay for management UI and public tutor sites.
   Non-destructive stylesheet; remains last in both HTML heads.
   The single primary brand blue can be adjusted below. */
:root {
  --classeto-blue: #2855C9;        /* royal/deep blue, white-text contrast >= 6:1 */
  --classeto-blue-hover: #2147AA;
  --classeto-blue-link: #91B7FF;   /* accessible small-text accent on #080808 */
  --classeto-blue-tint: #142346;
  --classeto-blue-outline: #39568C;
  --classeto-blue-rgb: 40, 85, 201;
}

/* Shared UI palette. Keep true-black backdrop and the original font stack. */
html:not([data-theme="light"]) {
  --teal: var(--classeto-blue-link) !important;
  --teal2: var(--classeto-blue) !important;
  --v6-top: rgba(8,8,8,.96);
}
html[data-theme="light"] {
  --teal: #214BAE !important;
  --teal2: var(--classeto-blue) !important;
}

/* Primary actions: every primary label/icon stays white, not dark. */
:is(.app-shell,.auth-wrap) .btn:not(.btn-outline):not(.btn-quiet):not(.btn-danger),
:is(.app-shell,.auth-wrap) button.btn:not(.btn-outline):not(.btn-quiet):not(.btn-danger),
:is(.app-shell,.auth-wrap) input[type="submit"].btn {
  background: var(--classeto-blue) !important;
  border-color: var(--classeto-blue) !important;
  color: #fff !important;
  box-shadow: 0 8px 25px rgba(var(--classeto-blue-rgb),.14);
}
:is(.app-shell,.auth-wrap) .btn:not(.btn-outline):not(.btn-quiet):not(.btn-danger):is(:hover,:focus-visible) {
  background: var(--classeto-blue-hover) !important;
  border-color: var(--classeto-blue-hover) !important;
}
:is(.app-shell,.auth-wrap) .btn svg,
:is(.app-shell,.auth-wrap) .btn svg * {color:inherit;}


/* v7.7 specifically removed the tile behind dashboard statistics: preserve it. */
html:not([data-theme="light"]) .app-shell .panel.stat .stat-icon,
html[data-theme="light"] .app-shell .panel.stat .stat-icon {
  background:transparent !important;
  background-image:none !important;
  color:var(--classeto-blue-link) !important;
}
html[data-theme="light"] .app-shell .panel.stat .stat-icon {color:#2855C9 !important;}
/* The special site-publication toggle was green in v7.7; turn it brand-blue. */
.cl-publish-row .cl-publish-toggle:has(input:checked),
html:not([data-theme="light"]) .cl-publish-row .cl-publish-toggle:has(input:checked) {
  background:var(--classeto-blue) !important;
  border-color:var(--classeto-blue) !important;
}
.cl-publish-row .cl-publish-toggle:focus-within {outline-color:var(--classeto-blue-link) !important;}

/* Neutral secondary buttons and legible dark forms. */
html:not([data-theme="light"]) :is(.app-shell,.auth-wrap) :is(.btn-outline,.btn-quiet) {
  background:#171922 !important;
  border-color:#343D52 !important;
  color:#F5F7FE !important;
}
html:not([data-theme="light"]) :is(.app-shell,.auth-wrap) .btn-danger {
  background:#46232D !important;
  border-color:#7C414B !important;
  color:#FFE3E5 !important;
}
html:not([data-theme="light"]) :is(.app-shell,.auth-wrap) :is(.field input,.field textarea,.field select,.category-create-form input) {
  background:#111217;
  color:#F7F9FF !important;
  border-color:#393D4A;
}
html:not([data-theme="light"]) :is(.app-shell,.auth-wrap) :is(button,input,textarea,select):focus-visible,
html:not([data-theme="light"]) :is(.app-shell,.auth-wrap) .field :is(input,textarea,select):focus {
  outline-color:var(--classeto-blue-link);
  border-color:var(--classeto-blue) !important;
  box-shadow:0 0 0 3px rgba(var(--classeto-blue-rgb),.2);
}

/* Panel chrome and status elements: eliminate legacy green highlights. */
html:not([data-theme="light"]) .nav a.active,
html:not([data-theme="light"]) .mobile-more-sheet a.active {
  background:#162344 !important;
  color:#C4D7FF !important;
  border-color:#354E85 !important;
}
html[data-theme="light"] .nav a.active {
  background:#E7EDFF !important;
  color:#224BA8 !important;
  border-color:#C1D0F7 !important;
}
:is(.app-shell,.auth-wrap) :is(.brandmark,.avatar-small,.tile-icon,.contact-heading-icon,.contact-admin-icon,.upload-zone-icon) {
  background:#192849 !important;
  color:var(--classeto-blue-link) !important;
  box-shadow:none;
}
html[data-theme="light"] .app-shell :is(.tile-icon,.contact-heading-icon,.contact-admin-icon) {
  background:#E7EDFF !important;
  color:#2752B4 !important;
}
html:not([data-theme="light"]) :is(.app-shell,.auth-wrap) :is(.workspace-hero,.admin-welcome,.site-banner,.auth-art) {
  background:radial-gradient(ellipse at 18% 10%,rgba(var(--classeto-blue-rgb),.22),transparent 54%),linear-gradient(130deg,#111521,#0B0B0E) !important;
  border-color:#29385B !important;
}
html:not([data-theme="light"]) :is(.app-shell,.auth-wrap) :is(.url-box,.tag,.auth-mini,.contact-panel-tip,.billing-hero,.upload-zone) {
  background:linear-gradient(115deg,#12182A,#101217) !important;
  border-color:#33456E !important;
  color:#EAF1FF !important;
}
html:not([data-theme="light"]) :is(.app-shell,.auth-wrap) :is(.eyebrow,.admin-jalali-caption,.url-box,.tag,.site-link,.contact-status.is-on,.upload-feedback) {
  color:var(--classeto-blue-link) !important;
}
html:not([data-theme="light"]) .billing-hero h2,
html:not([data-theme="light"]) .auth-art .hero-accent {color:#F4F7FF !important;}
:is(.app-shell,.auth-wrap) :is(.switch:has(input:checked),.finance-track i,.analytics-bar i) {
  background:var(--classeto-blue) !important;
}
html:not([data-theme="light"]) :is(.app-shell,.auth-wrap) .alert:not(.error) {
  background:#152343 !important;
  border-color:#3A5EA5 !important;
  color:#DDE9FF !important;
}
html:not([data-theme="light"]) .contact-editor-shortcut {
  background:rgba(var(--classeto-blue-rgb),.08) !important;
  border-color:rgba(var(--classeto-blue-rgb),.45) !important;
}
html[data-theme="light"] .app-shell :is(.workspace-hero,.admin-welcome) {
  background:linear-gradient(110deg,#E7EEFF,#F8FAFF) !important;
  border-color:#C5D4F6 !important;
}

/* v7.15: The teacher's public website is independent of the Classeto brand. 
   IMPORTANT: --accent is supplied inline by src/views.php from sites.accent.
   NEVER assign !important to --accent here, or the user's color picker stops working. */
.public {
  --classeto-public-cta: var(--classeto-cta-color, var(--accent, #2855C9));
  --classeto-public-link: var(--classeto-readable-accent, var(--accent, #2855C9));
}

/* Preserve white, readable dark-mode content without forcing a global blue accent. */
.public.dark {
  --pbg: #080808;
  --pcard: #131417;
  --ptext: #F7F8FD;
  --pmuted: #B8BFCD;
  color: var(--ptext);
  background: var(--pbg);
}
.public.dark :is(.public-hero .bio, .site-contact-cta p, .site-inner-header .bio, .site-empty, .post-meta) {
  color: var(--pmuted) !important;
}
.public :is(.site-intro-line, .site-link, .site-card-eyebrow,
            .public-footer b, .site-contact-info strong, .site-contact-arrow,
            .site-contact-icon, .hero-floating-tag svg, .site-contact-cta svg) {
  color: var(--classeto-public-link) !important;
}
.public.dark .public-nav a.current,
.public.dark .site-category:not(.selected):hover,
.public.dark .mobile-tabbar :is(a,button).current {
  color: var(--classeto-public-link) !important;
}
.public.dark :is(.site-media-card, .site-contact-card, .site-contact-cta,
                 .site-article, .public-top, .mobile-tabbar) {
  border-color: #313847;
}
.public.dark .site-contact-cta {
  background: radial-gradient(circle at 95% 5%,
              color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
              linear-gradient(135deg, #131623, #101114) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, #2C3444) !important;
}
.public.dark .public-top { background: rgba(16,17,22,.94) !important; }
.public.dark .mobile-tabbar { background: rgba(17,18,24,.95) !important; }
.public.dark .mobile-tabbar :is(a,button).current {
  background: color-mix(in srgb, var(--accent) 18%, #15161A) !important;
}
.public:not(.dark) .mobile-tabbar :is(a,button).current {
  color: var(--classeto-public-link) !important;
  background: color-mix(in srgb, var(--accent) 13%, #FFF) !important;
}
.public .brand-color-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent) !important;
}
.public .site-contact-icon {
  background: color-mix(in srgb, var(--accent) 13%, var(--pcard)) !important;
  color: var(--classeto-public-link) !important;
}
.public .public-brand-period { color: var(--classeto-public-link) !important; }
.public.dark .public-hero .hero-image {
  box-shadow: 0 18px 55px color-mix(in srgb, var(--accent) 11%, transparent) !important;
  outline-color: color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

/* All filled public-site actions follow each teacher's chosen color; legible white text.
   The backend calculates --classeto-cta-color as a WCAG-aware darker variant only
   when the original accent is too light for white lettering. */
.public :is(a.accent-btn, button.accent-btn, .accent-btn) {
  background: var(--classeto-public-cta) !important;
  border: 1px solid var(--classeto-public-cta) !important;
  color: #FFFFFF !important;
  font-weight: 750;
  box-shadow: 0 9px 28px color-mix(in srgb, var(--accent) 22%, transparent);
}
.public :is(a.accent-btn, button.accent-btn, .accent-btn):is(:hover,:focus-visible) {
  background: color-mix(in srgb, var(--classeto-public-cta) 86%, #000) !important;
  border-color: var(--classeto-public-cta) !important;
  color: #FFFFFF !important;
}
.public .accent-btn *,
.public .accent-btn svg,
.public .accent-btn svg * { color: #FFFFFF !important; stroke: currentColor; }
.public.dark .soft-btn {
  background: #171922 !important;
  color: #F5F8FF !important;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, #343B4B) !important;
}
.public.dark .soft-btn *,
.public.dark .soft-btn svg { color: #F5F8FF !important; }
.public:not(.dark) .soft-btn {
  color: #18243B !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, #CCD4E3) !important;
  background: color-mix(in srgb, var(--accent) 8%, #FFF) !important;
}
.public .site-category.selected,
.public .site-category:hover {
  background: var(--classeto-public-cta) !important;
  border-color: var(--classeto-public-cta) !important;
  color: #FFF !important;
}
.public .site-category.selected small,
.public .site-category:hover small { color: inherit !important; }
.public :is(a,button,input,select,textarea):focus-visible {
  outline: 2px solid var(--classeto-public-link) !important;
  outline-offset: 3px;
}
@media (prefers-reduced-motion:reduce) {
  .public :is(.accent-btn,.soft-btn) { transition: none !important; }
}