/*!
 * XC Industrial Log Analyzer — front-end styles
 * Author: Xania Code (https://xaniacode.com)
 * Version: 1.0.0
 *
 * Theme modes are selected via the [data-xcila-theme] attribute on .xcila-wrap:
 *   data-xcila-theme="inherit"      → inherits colors from the active WordPress theme
 *                                     via CSS variables, with safe fallbacks.
 *   data-xcila-theme="light"        → forced light palette.
 *   data-xcila-theme="dark"         → forced dark palette.
 *   data-xcila-theme="professional" → XaniaCode branded indigo palette.
 *
 * All styles are scoped under .xcila-wrap to avoid polluting the host theme.
 */

/* ==========================================================================
   1. Theme tokens
   ========================================================================== */

/* Inherit: pull from theme if it exposes CSS variables, else fall back. */
.xcila-wrap[data-xcila-theme="inherit"] {
    --xcila-bg:            var(--color-bg, var(--wp--preset--color--background, #ffffff));
    --xcila-surface:       var(--color-surface, #ffffff);
    --xcila-surface-alt:   rgba(127, 127, 127, 0.06);
    --xcila-text:          var(--color-text, var(--wp--preset--color--foreground, #111827));
    --xcila-text-muted:    var(--color-text-muted, rgba(0, 0, 0, 0.65));
    --xcila-border:        var(--color-border, rgba(0, 0, 0, 0.12));
    --xcila-primary:       var(--color-primary, #4f46e5);
    --xcila-primary-hover: var(--color-primary-hover, #4338ca);
    --xcila-primary-contrast: #ffffff;
    --xcila-success:       var(--color-success, #0f7a3b);
    --xcila-warning:       var(--color-warning, #a05a00);
    --xcila-danger:        var(--color-danger, #b00020);
    --xcila-radius-sm: 8px;
    --xcila-radius-md: 12px;
    --xcila-radius-lg: 16px;
    --xcila-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    --xcila-focus-ring: 0 0 0 4px rgba(79, 70, 229, 0.18);
}

/* Light: explicit light palette. */
.xcila-wrap[data-xcila-theme="light"] {
    --xcila-bg:            #ffffff;
    --xcila-surface:       #ffffff;
    --xcila-surface-alt:   #f8fafc;
    --xcila-text:          #0f172a;
    --xcila-text-muted:    #64748b;
    --xcila-border:        #e2e8f0;
    --xcila-primary:       #2563eb;
    --xcila-primary-hover: #1d4ed8;
    --xcila-primary-contrast: #ffffff;
    --xcila-success:       #15803d;
    --xcila-warning:       #b45309;
    --xcila-danger:        #b91c1c;
    --xcila-radius-sm: 8px;
    --xcila-radius-md: 12px;
    --xcila-radius-lg: 16px;
    --xcila-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    --xcila-focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

/* Dark: explicit dark palette. */
.xcila-wrap[data-xcila-theme="dark"] {
    --xcila-bg:            #0f172a;
    --xcila-surface:       #1e293b;
    --xcila-surface-alt:   #111827;
    --xcila-text:          #e2e8f0;
    --xcila-text-muted:    #94a3b8;
    --xcila-border:        #334155;
    --xcila-primary:       #818cf8;
    --xcila-primary-hover: #a5b4fc;
    --xcila-primary-contrast: #0f172a;
    --xcila-success:       #34d399;
    --xcila-warning:       #fbbf24;
    --xcila-danger:        #f87171;
    --xcila-radius-sm: 8px;
    --xcila-radius-md: 12px;
    --xcila-radius-lg: 16px;
    --xcila-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --xcila-focus-ring: 0 0 0 4px rgba(129, 140, 248, 0.22);
}

/* Professional: XaniaCode branded (indigo gradient). */
.xcila-wrap[data-xcila-theme="professional"] {
    --xcila-bg:            #ffffff;
    --xcila-surface:       #ffffff;
    --xcila-surface-alt:   #f5f3ff;
    --xcila-text:          #1e1b4b;
    --xcila-text-muted:    #6366f1;
    --xcila-border:        #c7d2fe;
    --xcila-primary:       #4f46e5;
    --xcila-primary-hover: #4338ca;
    --xcila-primary-contrast: #ffffff;
    --xcila-success:       #059669;
    --xcila-warning:       #d97706;
    --xcila-danger:        #dc2626;
    --xcila-radius-sm: 10px;
    --xcila-radius-md: 14px;
    --xcila-radius-lg: 18px;
    --xcila-shadow: 0 14px 40px rgba(79, 70, 229, 0.12);
    --xcila-focus-ring: 0 0 0 4px rgba(79, 70, 229, 0.22);
}

/* ==========================================================================
   2. Layout
   ========================================================================== */

.xcila-wrap {
    width: 100%;
    margin: 24px 0;
    color: var(--xcila-text);
    box-sizing: border-box;
}
.xcila-wrap *,
.xcila-wrap *::before,
.xcila-wrap *::after { box-sizing: border-box; }

.xcila-card {
    padding: 20px 22px 22px;
    background: var(--xcila-surface);
    border: 1px solid var(--xcila-border);
    border-radius: var(--xcila-radius-lg);
    box-shadow: var(--xcila-shadow);
}

.xcila-wrap[data-xcila-theme="professional"] .xcila-card {
    background: linear-gradient(135deg, var(--xcila-surface) 0%, var(--xcila-surface-alt) 100%);
    border-color: var(--xcila-border);
}

.xcila-header { margin-bottom: 12px; }
.xcila-title {
    margin: 0 0 6px;
    font-size: 1.55rem;
    line-height: 1.2;
    color: var(--xcila-text);
}
.xcila-subtitle {
    margin: 0;
    color: var(--xcila-text-muted);
    font-size: 0.98rem;
}

/* Progress + steps */
.xcila-progress {
    width: 100%;
    height: 10px;
    background: var(--xcila-surface-alt);
    border-radius: 999px;
    overflow: hidden;
    margin: 14px 0 12px;
}
.xcila-progress-bar {
    height: 100%;
    width: 50%;
    background: var(--xcila-primary);
    transition: width 0.25s ease;
}

.xcila-steps {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    font-size: 0.95rem;
}
.xcila-steps li {
    flex: 1;
    padding: 10px 12px;
    border-radius: var(--xcila-radius-md);
    background: var(--xcila-surface-alt);
    color: var(--xcila-text-muted);
    opacity: 0.85;
    border: 1px solid var(--xcila-border);
}
.xcila-steps li.is-active {
    opacity: 1;
    color: var(--xcila-text);
    font-weight: 700;
    border-color: var(--xcila-primary);
}

.xcila-step { display: none; }
.xcila-step.is-active { display: block; }

/* Form grid */
.xcila-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}
@media (max-width: 720px) {
    .xcila-grid { grid-template-columns: 1fr; }
    .xcila-field.is-span-2 { grid-column: auto; }
}
.xcila-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.xcila-field.is-span-2 { grid-column: span 2; }
.xcila-field label {
    font-weight: 700;
    color: var(--xcila-text);
}

.xcila-field input[type="text"],
.xcila-field input[type="email"],
.xcila-field input[type="file"],
.xcila-field select,
.xcila-field textarea {
    width: 100%;
    padding: 0.78rem 0.9rem;
    border-radius: var(--xcila-radius-md);
    border: 1px solid var(--xcila-border);
    background: var(--xcila-surface-alt);
    color: var(--xcila-text);
    font: inherit;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.xcila-field input[type="file"] { padding: 0.65rem 0.7rem; }
.xcila-field input:focus,
.xcila-field select:focus,
.xcila-field textarea:focus {
    border-color: var(--xcila-primary);
    box-shadow: var(--xcila-focus-ring);
}

.xcila-hint {
    font-size: 0.92rem;
    color: var(--xcila-text-muted);
}
.xcila-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--xcila-text);
}

.req { color: var(--xcila-danger); font-weight: 900; }
.opt { color: var(--xcila-text-muted); font-weight: 600; font-size: 0.9em; }

/* Honeypot — off-screen */
.xcila-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Actions + buttons */
.xcila-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.xcila-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.7rem 1.15rem;
    border-radius: var(--xcila-radius-md);
    border: 1px solid var(--xcila-border);
    background: var(--xcila-surface-alt);
    color: var(--xcila-text);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.xcila-btn:hover { border-color: var(--xcila-primary); }
.xcila-btn:focus-visible { outline: none; box-shadow: var(--xcila-focus-ring); }
.xcila-btn:active { transform: translateY(1px); }
.xcila-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.xcila-btn-primary {
    background: var(--xcila-primary);
    color: var(--xcila-primary-contrast);
    border-color: var(--xcila-primary);
}
.xcila-btn-primary:hover {
    background: var(--xcila-primary-hover);
    border-color: var(--xcila-primary-hover);
}
.xcila-btn-ghost {
    background: transparent;
}

/* Status pill */
.xcila-status {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--xcila-radius-md);
    border: 1px solid var(--xcila-border);
    background: var(--xcila-surface-alt);
    color: var(--xcila-text);
    font-weight: 600;
}
.xcila-status.is-ok    { color: var(--xcila-success); border-color: var(--xcila-success); }
.xcila-status.is-warn  { color: var(--xcila-warning); border-color: var(--xcila-warning); }
.xcila-status.is-bad   { color: var(--xcila-danger);  border-color: var(--xcila-danger);  }

/* Lock notice (no license) */
.xcila-lock-notice {
    padding: 14px 16px;
    border-radius: var(--xcila-radius-md);
    border: 1px solid var(--xcila-warning);
    background: var(--xcila-surface-alt);
    color: var(--xcila-warning);
    font-weight: 600;
    margin-top: 12px;
}

/* Result block */
.xcila-result { margin-top: 4px; }

.xcila-kpigrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}
@media (max-width: 720px) {
    .xcila-kpigrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.xcila-kpi {
    border: 1px solid var(--xcila-border);
    border-radius: var(--xcila-radius-md);
    padding: 12px 14px;
    background: var(--xcila-surface-alt);
}
.xcila-kpi-label { font-size: 12px; color: var(--xcila-text-muted); }
.xcila-kpi-value { font-size: 20px; font-weight: 800; color: var(--xcila-text); }

.xcila-subcard {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--xcila-border);
    border-radius: var(--xcila-radius-md);
    background: var(--xcila-surface-alt);
}

.xcila-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--xcila-border);
    background: var(--xcila-surface-alt);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--xcila-text-muted);
    margin-left: 8px;
}

.xcila-narrative {
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px solid var(--xcila-border);
    border-radius: var(--xcila-radius-md);
    background: var(--xcila-surface-alt);
}
.xcila-narrative h4 {
    margin: 0.6em 0 0.3em;
    color: var(--xcila-text);
}

.xcila-list, .xcila-ol {
    margin: 0.4em 0 0.8em;
    padding-left: 1.4em;
}

.xcila-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--xcila-border);
    border-radius: var(--xcila-radius-md);
    background: var(--xcila-surface-alt);
    margin: 12px 0;
}
.xcila-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 820px;
    color: var(--xcila-text);
}
.xcila-table th, .xcila-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--xcila-border);
    vertical-align: top;
    text-align: left;
}
.xcila-table th {
    background: var(--xcila-surface);
    font-weight: 800;
    font-size: 0.93rem;
}
.xcila-ellipsis {
    max-width: 480px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xcila-details {
    margin-top: 16px;
    border: 1px solid var(--xcila-border);
    border-radius: var(--xcila-radius-md);
    padding: 12px 14px;
    background: var(--xcila-surface-alt);
}
.xcila-details summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--xcila-text);
}
.xcila-pre {
    white-space: pre-wrap;
    background: #0b1020;
    color: #e5e7eb;
    padding: 12px;
    border-radius: var(--xcila-radius-md);
    overflow: auto;
    margin-top: 10px;
    font-size: 0.85rem;
}

/* Mobile-friendly table stacking */
@media (max-width: 820px) {
    .xcila-table-wrap {
        border: 0;
        background: transparent;
        overflow: visible;
    }
    .xcila-table { min-width: 0; }
    .xcila-table thead { display: none; }
    .xcila-table, .xcila-table tbody, .xcila-table tr, .xcila-table td { display: block; width: 100%; }
    .xcila-table tr {
        background: var(--xcila-surface);
        border: 1px solid var(--xcila-border);
        border-radius: var(--xcila-radius-md);
        margin: 10px 0;
        padding: 10px 12px;
    }
    .xcila-table td {
        border: 0;
        padding: 6px 0;
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .xcila-ellipsis { max-width: 100%; white-space: normal; }
}