/**
 * OSO Dynamics — UVDesk public knowledgebase brand theme (light mode)
 * Loads after UVDesk knowledgebase.css + branding inline styles.
 */

:root {
  --oso-bg: #F5F7FB;
  --oso-surface: #FFFFFF;
  --oso-card: #FFFFFF;
  --oso-interactive: #ECF4EE;
  --oso-border-subtle: rgba(15, 23, 42, 0.06);
  --oso-border-default: rgba(15, 23, 42, 0.12);
  --oso-border-strong: rgba(15, 23, 42, 0.2);
  --oso-text: #0F172A;
  --oso-text-muted: #475569;
  --oso-accent: #2F8A59;
  --oso-accent-hover: #2C7D4D;
  --oso-success: #16A34A;
  --oso-warning: #D97706;
  --oso-error: #DC2626;
  --oso-info: #3B82F6;
  --spot-1: rgba(47, 138, 89, 0.12);
  --spot-2: rgba(59, 130, 246, 0.08);
}

/* Page atmosphere — dual radial spots over cool canvas */
body {
  background:
    radial-gradient(circle at 20% 0%, var(--spot-1) 0%, transparent 60%),
    radial-gradient(circle at 85% -10%, var(--spot-2) 0%, transparent 48%),
    var(--oso-bg) !important;
  color: var(--oso-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Surfaces */
.uv-header {
  background-color: var(--oso-surface) !important;
  border-bottom: 1px solid var(--oso-border-default);
}

.uv-paper,
.uv-paper-article,
.uv-kb-layout-folder .uv-kb-folder,
.uv-kb-layout-grid .uv-kb-folder,
.uv-ticket-form-box,
.uv-box,
.uv-login-wrapper,
.uv-customer-section {
  background-color: var(--oso-card);
  border-color: var(--oso-border-default);
  border-radius: 12px;
}

.uv-kb-layout-folder .uv-kb-folder,
.uv-kb-layout-grid .uv-kb-folder {
  border: 1px solid var(--oso-border-default) !important;
  border-radius: 12px;
  overflow: hidden;
}

.uv-kb-layout-folder .uv-kb-folder:hover,
.uv-kb-layout-grid .uv-kb-folder:hover {
  background-color: var(--oso-interactive);
}

/* Primary CTAs — green only */
.uv-btn-small,
.uv-btn,
.uv-btn-large,
.uv-btn-action,
.uv-btn-label,
.btn-primary {
  background: var(--oso-accent) !important;
  border-color: var(--oso-accent) !important;
  color: #ffffff !important;
}

.uv-btn-small:hover,
.uv-btn:hover,
.uv-btn-large:hover,
.uv-btn-action:hover,
.uv-btn-label:hover,
.btn:hover,
.btn-primary:hover,
.btn-primary:active {
  background: var(--oso-accent-hover) !important;
  border-color: var(--oso-accent-hover) !important;
  opacity: 1;
}

.uv-btn-small:active,
.uv-btn:active,
.uv-btn-large:active,
.uv-btn-action:active,
.uv-btn-label:active,
.btn:active {
  background: var(--oso-accent-hover) !important;
  opacity: 0.9;
}

.uv-btn-stroke:active {
  border-color: var(--oso-accent) !important;
}

/* Focus / interactive chrome */
.uv-select:focus,
.uv-field:focus,
.uv-search-inline:focus {
  border-color: var(--oso-accent) !important;
}

.uv-dropdown .uv-dropdown-btn-active {
  border: solid 1px var(--oso-accent) !important;
}

.uv-loader span:before,
.uv-loader span:after {
  background: var(--oso-accent) !important;
}

.uv-checkbox input[type="checkbox"]:checked + .uv-checkbox-view,
.uv-radio input[type="radio"]:checked + .uv-radio-view {
  background: var(--oso-accent) !important;
}

/* Hero / brand accents */
.uv-hero {
  background-color: var(--oso-accent) !important;
}

.uv-brand {
  color: var(--oso-accent) !important;
}

.uv-header .uv-header-rt .uv-hamburger svg path {
  fill: var(--oso-accent) !important;
}

.uv-cta-wrapper .uv-cta-lt svg path {
  fill: var(--oso-accent) !important;
}

.uv-kb-layout-folder .uv-kb-folder .uv-kb-folder-lt {
  background-color: var(--oso-accent) !important;
}

.uv-kb-layout-category .uv-kb-folder {
  border-bottom-color: var(--oso-accent) !important;
}

.uv-paper-article .uv-paper-section .uv-folder-title:after {
  background-color: var(--oso-accent) !important;
}

.uv-nav-tab ul.uv-nav-tab-label li a:hover,
.uv-nav-tab ul.uv-nav-tab-label li .uv-nav-tab-active {
  border-bottom-color: var(--oso-accent) !important;
}

.uv-pagination a:hover {
  background-color: var(--oso-accent) !important;
  border-color: var(--oso-accent) !important;
  color: #ffffff !important;
}

.uv-ticket-view .uv-ticket-accordion .uv-ticket-count-stat,
.uv-ticket-view .uv-ticket-accordion .uv-ticket-count-stat:hover {
  background: var(--oso-accent) !important;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background-color: var(--oso-accent) !important;
}

/* Links — blue / info (non-button) */
a:not(.uv-btn):not(.uv-btn-small):not(.uv-btn-large):not(.uv-btn-action):not(.uv-btn-label):not(.uv-table td a) {
  color: var(--oso-info);
}

a:hover:not(.uv-btn):not(.uv-btn-small):not(.uv-btn-large):not(.uv-btn-action):not(.uv-btn-label):not(.uv-table td a) {
  color: #2563EB;
}

/* Muted text */
.uv-text-dark,
.uv-field-label,
.uv-footer {
  color: var(--oso-text-muted);
}

/* Status chips — soft fill + matching border */
.uv-status-open,
.uv-label-success,
.status-open {
  background: color-mix(in srgb, var(--oso-success) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--oso-success) 45%, transparent);
  color: var(--oso-success);
}

.uv-status-pending,
.uv-label-warning,
.status-pending {
  background: color-mix(in srgb, var(--oso-warning) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--oso-warning) 45%, transparent);
  color: var(--oso-warning);
}

.uv-status-closed,
.uv-label-danger,
.status-closed {
  background: color-mix(in srgb, var(--oso-error) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--oso-error) 45%, transparent);
  color: var(--oso-error);
}