/* ==========================================================================
   RESET & BASE
   ========================================================================== */
#wpcontent {
    padding: 0;
}

/* changed body tag selection to .wrap */
.wrap {
    padding: 0;
    margin: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
        "Helvetica Neue", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s ease;
}

html[data-theme="light"] body {
    background: radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.04), transparent 25%), linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    background-attachment: fixed;
}

html[data-theme="dark"] body {
    background: radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.08), transparent 40%), linear-gradient(135deg, #020617 0%, #0f172a 100%);
    background-attachment: fixed;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Utility Classes */
.ctc_init_disabled {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(1);
}

.ctc_init_display_none {
    display: none !important;
}

/* SVG Icon Helper */
.ctc-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.ctc-spin {
    animation: spin 2s infinite linear;
}

/* ==========================================================================
   KEYBOARD FOCUS INDICATORS (Accessibility)
   Only shown for keyboard navigation, not mouse clicks.
   ========================================================================== */

/* Many components use `transition: all`, which makes the focus ring FADE IN
   (outline-width animates 0→2px over ~200ms) instead of appearing instantly.
   Suspend transitions while an element shows its keyboard focus ring. */
.ctc-admin-dashboard :focus-visible,
.ctc-admin-dashboard:focus-visible {
    /* !important so higher-specificity component `transition` rules
       (e.g. `.ctc-admin-dashboard input[type="text"]`) can't re-enable the
       fade while the ring is shown. */
    transition: none !important;
}

.nav-item:focus-visible,
.drill-down-btn:focus-visible,
.drill-down-back-btn:focus-visible,
.close-sidebar:focus-visible,
.menu-toggle:focus-visible,
/* todo: some pro things might be added. also overall will make things smart */
.ht_ctc_pro_agent_remove_agent_link:focus-visible,
.ctc_add_agent_button:focus-visible,
.ctc_add_field_button:focus-visible,
.dashicons-no-alt:focus-visible,
.bh_click_to_add_time:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

.collapsible-header:focus-visible,
.ctc-accordion-header:focus-visible,
.ctc-styled-details>summary:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: -2px !important;
    /* background-color: var(--primary-glow) !important; */
}

.save-button:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

.settings-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius);
}

.radio-option.segment-option input:focus-visible+span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.grid-option:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: var(--radius);
}

.tab-button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.theme-option input:focus-visible+.theme-icon {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-pill);
}