/**
 * Guildmaster Writing Forge Pro v2 - Core Stylesheet
 * 
 * Contains:
 * - All CSS variables for theming (colors, spacing, typography)
 * - Global resets and base styles
 * - Reusable button styles
 * - Form element styles
 * - Reusable component styles (message boxes, cards, stat boxes, etc.)
 * 
 * This file is theme-independent. Theme files override the CSS variables.
 */

/* ============================================================================
   CSS VARIABLES - THEMING
   ============================================================================
   
   These variables control the entire visual theme. When a theme is selected,
   a theme-specific CSS file overrides these variables.
   
   Color palette:
   - Primary accent: yellowy/gold (changes per theme)
   - Dark backgrounds
   - Light text
   - Border colors (shades of primary)
*/

:root {
    /* Primary theme color (currently gold, changes per theme) */
    --gmv2-primary: #ffc400;
    --gmv2-primary-dark: #07101c;
    --gmv2-primary-light: rgba(255, 196, 0, 0.05);
    
    /* Opacity variants for borders and overlays */
    --gmv2-primary-border-strong: rgba(255, 196, 0, 0.7);
    --gmv2-primary-border-medium: rgba(255, 196, 0, 0.5);
    --gmv2-primary-border-light: rgba(255, 196, 0, 0.3);
    --gmv2-primary-border-subtle: rgba(255, 196, 0, 0.22);
    --gmv2-primary-border-faint: rgba(255, 196, 0, 0.2);
    
    /* Background colors */
    --gmv2-bg-darkest: #0a0e17;
    --gmv2-bg-dark: #07101c;
    --gmv2-bg-darker: #0a1219;
    
    /* Text colors */
    --gmv2-text-primary: #f6f1df;
    --gmv2-text-secondary: rgba(246, 241, 223, 0.85);
    --gmv2-text-muted: rgba(246, 241, 223, 0.72);
    --gmv2-text-faint: rgba(246, 241, 223, 0.65);
    --gmv2-text-subtle: rgba(246, 241, 223, 0.6);
    --gmv2-text-faded: rgba(246, 241, 223, 0.5);
    --gmv2-text-disabled: rgba(246, 241, 223, 0.4);
    
    /* Spacing */
    --gmv2-spacing-xs: 4px;
    --gmv2-spacing-sm: 8px;
    --gmv2-spacing-md: 12px;
    --gmv2-spacing-lg: 16px;
    --gmv2-spacing-xl: 20px;
    
    /* Border radius */
    --gmv2-radius-sm: 4px;
    --gmv2-radius-md: 6px;
    --gmv2-radius-lg: 8px;
    --gmv2-radius-full: 99px;
    
    /* Typography */
    --gmv2-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --gmv2-font-size-sm: 0.65rem;
    --gmv2-font-size-base: 0.75rem;
    --gmv2-font-size-md: 0.85rem;
    --gmv2-font-size-lg: 0.9rem;
    --gmv2-font-size-xl: 1.1rem;
    --gmv2-font-size-2xl: 1.28rem;
    --gmv2-font-size-3xl: 1.5rem;
    
    /* Transitions */
    --gmv2-transition-fast: 140ms ease;
    --gmv2-transition-normal: 200ms ease;
}

/* ============================================================================
   GLOBAL RESETS & BASE STYLES
   ============================================================================ */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

/* ============================================================================
   BUTTONS - All button types
   ============================================================================
   
   Usage:
   - .gmv2-btn-primary: Main action button (Save, Submit, etc.)
   - .gmv2-btn-secondary: Secondary action (Subscriptions, etc.)
   - .gmv2-btn-tertiary: Tertiary action (Cancel, etc.)
   - .gmv2-btn-icon: Icon-only buttons (Refresh, Expand, etc.)
*/

button {
    transition: all var(--gmv2-transition-fast);
}

button:hover {
    opacity: 0.8;
}

/* Primary button - main actions */
.gmv2-btn-primary {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--gmv2-spacing-md) var(--gmv2-spacing-lg);
    border: 1px solid var(--gmv2-primary-border-strong);
    border-radius: var(--gmv2-radius-md);
    background: var(--gmv2-primary-dark);
    color: var(--gmv2-primary);
    font-weight: 600;
    font-size: var(--gmv2-font-size-sm);
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--gmv2-transition-fast);
}

.gmv2-btn-primary:hover {
    opacity: 0.8;
}

/* Secondary button - secondary actions */
.gmv2-btn-secondary {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--gmv2-spacing-md) var(--gmv2-spacing-lg);
    border: 1px solid var(--gmv2-primary-border-medium);
    border-radius: var(--gmv2-radius-md);
    background: transparent;
    color: var(--gmv2-primary);
    font-weight: 600;
    font-size: var(--gmv2-font-size-sm);
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--gmv2-transition-fast);
}

.gmv2-btn-secondary:hover {
    border-color: var(--gmv2-primary-border-strong);
}

/* Tertiary button - less important actions */
.gmv2-btn-tertiary {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--gmv2-spacing-md) var(--gmv2-spacing-lg);
    border: 1px solid var(--gmv2-primary-border-light);
    border-radius: var(--gmv2-radius-md);
    background: transparent;
    color: var(--gmv2-text-subtle);
    font-weight: 600;
    font-size: var(--gmv2-font-size-sm);
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--gmv2-transition-fast);
}

.gmv2-btn-tertiary:hover {
    color: var(--gmv2-primary);
    border-color: var(--gmv2-primary-border-medium);
}

/* Icon button - buttons with just an icon */
.gmv2-btn-icon {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: var(--gmv2-primary);
    font-size: 24px;
    cursor: pointer;
    padding: var(--gmv2-spacing-md);
    transition: all var(--gmv2-transition-fast);
    line-height: 1;
    flex-shrink: 0;
}

.gmv2-btn-icon:hover {
    opacity: 0.8;
}

/* Refresh button - specific style */
.gmv2-refresh-btn {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--gmv2-spacing-md) var(--gmv2-spacing-lg);
    border: 1px solid var(--gmv2-primary-border-medium);
    border-radius: var(--gmv2-radius-sm);
    background: transparent;
    color: var(--gmv2-primary);
    font-weight: 600;
    font-size: var(--gmv2-font-size-sm);
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--gmv2-transition-fast);
}

.gmv2-refresh-btn:hover {
    border-color: var(--gmv2-primary-border-strong);
}

/* Edit Profile button */
.gmv2-edit-btn {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--gmv2-spacing-md) var(--gmv2-spacing-lg);
    border: 1px solid var(--gmv2-primary-border-strong);
    border-radius: var(--gmv2-radius-sm);
    background: var(--gmv2-primary-dark);
    color: var(--gmv2-primary);
    font-weight: 600;
    font-size: var(--gmv2-font-size-sm);
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--gmv2-transition-fast);
}

.gmv2-edit-btn:hover {
    opacity: 0.8;
}

/* Form action buttons */
.gmv2-btn-save {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex: 1 !important;
    padding: var(--gmv2-spacing-lg) !important;
    border: 1px solid var(--gmv2-primary-border-strong) !important;
    border-radius: var(--gmv2-radius-md) !important;
    background: var(--gmv2-primary-dark) !important;
    color: var(--gmv2-primary) !important;
    font-weight: 600 !important;
    font-size: var(--gmv2-font-size-sm) !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all var(--gmv2-transition-fast) !important;
    font-family: var(--gmv2-font-family) !important;
}

.gmv2-btn-save:hover {
    opacity: 0.8 !important;
    transform: translateY(-1px) !important;
}

.gmv2-btn-cancel {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex: 1 !important;
    padding: var(--gmv2-spacing-lg) !important;
    border: 1px solid var(--gmv2-primary-border-light) !important;
    border-radius: var(--gmv2-radius-md) !important;
    background: transparent !important;
    color: var(--gmv2-text-subtle) !important;
    font-weight: 600 !important;
    font-size: var(--gmv2-font-size-sm) !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all var(--gmv2-transition-fast) !important;
    font-family: var(--gmv2-font-family) !important;
}

.gmv2-btn-cancel:hover {
    color: var(--gmv2-primary) !important;
    border-color: var(--gmv2-primary-border-medium) !important;
}

/* ============================================================================
   FORM ELEMENTS
   ============================================================================ */

/* Global input/textarea reset */
input,
textarea {
    transition: border-color var(--gmv2-transition-normal) !important;
    font-family: var(--gmv2-font-family) !important;
    background: var(--gmv2-bg-darker) !important;
    color: var(--gmv2-text-primary) !important;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
.gmv2-form-input {
    width: 100% !important;
    padding: var(--gmv2-spacing-lg) !important;
    border: 1px solid var(--gmv2-primary-border-light) !important;
    border-radius: var(--gmv2-radius-md) !important;
    background: var(--gmv2-bg-darker) !important;
    color: var(--gmv2-text-primary) !important;
    font-size: var(--gmv2-font-size-lg) !important;
    box-sizing: border-box !important;
    font-family: var(--gmv2-font-family) !important;
    line-height: 1.5 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

input:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--gmv2-primary) !important;
    box-shadow: 0 0 0 2px rgba(255, 196, 0, 0.1) !important;
}

/* Autofill styling override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--gmv2-bg-darker) inset !important;
    box-shadow: 0 0 0 30px var(--gmv2-bg-darker) inset !important;
}

input:-webkit-autofill {
    -webkit-text-fill-color: var(--gmv2-text-primary) !important;
}

input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--gmv2-text-primary) !important;
}

.gmv2-form-label {
    display: block !important;
    font-size: var(--gmv2-font-size-base) !important;
    color: var(--gmv2-text-subtle) !important;
    text-transform: uppercase !important;
    margin-bottom: var(--gmv2-spacing-sm) !important;
    letter-spacing: 0.02em !important;
    font-weight: 600 !important;
    font-family: var(--gmv2-font-family) !important;
}

.gmv2-form-input {
    width: 100% !important;
    padding: var(--gmv2-spacing-lg) !important;
    border: 1px solid var(--gmv2-primary-border-light) !important;
    border-radius: var(--gmv2-radius-md) !important;
    background: var(--gmv2-bg-darker) !important;
    color: var(--gmv2-text-primary) !important;
    font-size: var(--gmv2-font-size-lg) !important;
    box-sizing: border-box !important;
    margin-bottom: var(--gmv2-spacing-sm) !important;
    font-family: var(--gmv2-font-family) !important;
    line-height: 1.5 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.gmv2-form-input:last-child {
    margin-bottom: 0 !important;
}

.gmv2-form-input::placeholder {
    color: var(--gmv2-text-disabled) !important;
    opacity: 1 !important;
}

.gmv2-form-input:disabled {
    background: var(--gmv2-bg-darker) !important;
    color: var(--gmv2-text-disabled) !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

.gmv2-form-description {
    color: var(--gmv2-text-disabled);
    font-size: 0.7rem;
    margin-top: var(--gmv2-spacing-xs);
}

/* ============================================================================
   REUSABLE COMPONENTS
   ============================================================================ */

/* Message Box - for status messages, empty states, etc. */
.gmv2-message-box {
    padding: var(--gmv2-spacing-md);
    border: 1px solid var(--gmv2-primary-border-light);
    border-radius: var(--gmv2-radius-md);
    background: transparent;
    color: var(--gmv2-text-subtle);
    font-size: var(--gmv2-font-size-md);
    text-align: center;
}

/* Stat Box - for displaying statistics */
.gmv2-stat-box {
    padding: var(--gmv2-spacing-md);
    border: 1px solid var(--gmv2-primary-border-light);
    border-radius: var(--gmv2-radius-md);
    background: transparent;
    text-align: center;
}

.gmv2-stat-value {
    color: var(--gmv2-primary);
    font-weight: 600;
    font-size: var(--gmv2-font-size-3xl);
    margin-bottom: var(--gmv2-spacing-xs);
}

.gmv2-stat-value-label {
    color: var(--gmv2-text-faded);
    font-size: var(--gmv2-font-size-base);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Card - for grouping content */
.gmv2-card {
    padding: var(--gmv2-spacing-md);
    border: 1px solid var(--gmv2-primary-border-light);
    border-radius: var(--gmv2-radius-md);
    background: transparent;
}

/* ============================================================================
   MODAL & NOTIFICATION STYLES
   ============================================================================ */

.gmv2-notice-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

.gmv2-notice-backdrop.is-open {
    display: flex;
}

.gmv2-notice-modal {
    width: min(460px, calc(100vw - 40px));
    border: 1px solid rgba(255, 196, 0, 0.45);
    border-radius: var(--gmv2-radius-lg);
    background: var(--gmv2-primary-dark);
    color: var(--gmv2-text-primary);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    padding: 22px;
}

.gmv2-notice-modal.gmv2-notice-error {
    border-color: rgba(255, 80, 80, 0.65);
}

.gmv2-notice-title {
    color: var(--gmv2-primary);
    font-weight: 800;
    font-size: 1rem;
    margin: 0 0 10px 0;
}

.gmv2-notice-message {
    color: var(--gmv2-text-secondary);
    font-size: 0.95rem;
    line-height: 1.45;
    margin-bottom: 18px;
}

.gmv2-notice-actions {
    display: flex;
    justify-content: flex-end;
}

.gmv2-notice-ok {
    appearance: none;
    -webkit-appearance: none;
    min-width: 96px;
    padding: 9px 18px;
    border: 1px solid var(--gmv2-primary-border-strong);
    border-radius: var(--gmv2-radius-lg);
    background: var(--gmv2-bg-darker);
    color: var(--gmv2-primary);
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}

/* ============================================================================
   RISING STARS COMPONENTS
   ============================================================================ */

.gmv2-rising-stars-item {
    padding: var(--gmv2-spacing-md);
    border: 1px solid var(--gmv2-primary-border-light);
    border-radius: var(--gmv2-radius-md);
    background: rgba(255, 196, 0, 0.03);
}

.gmv2-rising-stars-title {
    font-weight: 700;
    margin-bottom: var(--gmv2-spacing-sm);
}

.gmv2-rising-stars-title-link {
    color: var(--gmv2-primary);
    text-decoration: none;
}

.gmv2-rising-stars-row {
    display: flex;
    justify-content: space-between;
    gap: var(--gmv2-spacing-sm);
    color: var(--gmv2-text-muted);
    font-size: var(--gmv2-font-size-base);
}

.gmv2-rising-stars-position {
    color: var(--gmv2-primary);
}

/* ============================================================================
   RATING DISTRIBUTION COMPONENTS
   ============================================================================ */

.gmv2-rating-bar {
    display: grid;
    grid-template-columns: 38px 1fr 52px;
    gap: var(--gmv2-spacing-sm);
    align-items: center;
    margin: 4px 0;
    text-align: left;
}

.gmv2-rating-key {
    color: var(--gmv2-text-faint);
}

.gmv2-rating-bar-container {
    height: 8px;
    border: 1px solid rgba(255, 196, 0, 0.25);
    border-radius: var(--gmv2-radius-full);
    overflow: hidden;
}

.gmv2-rating-bar-fill {
    display: block;
    height: 100%;
    background: var(--gmv2-primary);
}

.gmv2-rating-percentage {
    color: var(--gmv2-primary);
    text-align: right;
}

/* ============================================================================
   LOGIN ERROR (Shortcode Fallback)
   ============================================================================ */

.gmv2-login-error {
    padding: var(--gmv2-spacing-xl);
    color: #d32f2f;
    background: #ffebee;
    border-radius: var(--gmv2-radius-sm);
}

/* ============================================================================
   CHATGPT EDIT: Compact 27px control contract
   Keep plugin buttons and dropdown/select controls to a 27px rendered height.
   This is intentionally scoped to plugin wrappers so it does not affect WP admin
   controls outside Guild Master. Textareas and text inputs are left alone.
   ============================================================================ */
.gmv2-studio-wrapper button,
.gmv2-studio-wrapper .button,
.gmv2-studio-wrapper select,
.gm-editor-wrapper button,
.gm-editor-wrapper .gm-btn,
.gm-editor-wrapper .gm-style-toggle,
.gm-editor-wrapper .gm-style-option,
.gm-editor-wrapper select {
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    line-height: 25px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

.gmv2-studio-wrapper .gmv2-btn-icon,
.gmv2-studio-wrapper .gmv2-editor-icon-button,
.gmv2-studio-wrapper .gmv2-docker-side-toggle,
.gmv2-studio-wrapper .gmv2-docker-close,
.gm-editor-wrapper .gm-format-btn,
.gm-editor-wrapper .gm-link-btn,
.gm-editor-wrapper .gm-align-btn {
    width: 27px !important;
    min-width: 27px !important;
    max-width: 27px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.gmv2-studio-wrapper .gmv2-editor-dropdown-menu button,
.gm-editor-wrapper .gm-style-option {
    display: flex !important;
    align-items: center !important;
}