/* ── Nexa Clamp Calculator — Admin + Frontend Shared Styles ─────────────────── */

/* Variables */
.nexa-clamp-wrap,
.nexa-clamp-app {
    --nc-bg:         #ffffff;
    --nc-bg2:        #f8f9fa;
    --nc-bg3:        #f0f1f3;
    --nc-border:     #dde0e5;
    --nc-text:       #1e1e2e;
    --nc-muted:      #6c7080;
    --nc-accent:     #4f46e5;
    --nc-accent2:    #7c3aed;
    --nc-green:      #059669;
    --nc-orange:     #d97706;
    --nc-red:        #dc2626;
    --nc-radius:     6px;
    --nc-font-mono:  'Consolas', 'Courier New', monospace;
    --nc-font-ui:    -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --nc-shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
}

/* Dark theme */
.nexa-theme-dark .nexa-clamp-app,
.nexa-theme-dark.nexa-clamp-app {
    --nc-bg:       #13131f;
    --nc-bg2:      #1a1a2e;
    --nc-bg3:      #212136;
    --nc-border:   #2e2e4a;
    --nc-text:     #e8e8f0;
    --nc-muted:    #7a7a9a;
    --nc-accent:   #818cf8;
    --nc-accent2:  #a78bfa;
    color:         #e8e8f0;
}

/* Auto theme */
@media (prefers-color-scheme: dark) {
    .nexa-theme-auto .nexa-clamp-app,
    .nexa-theme-auto.nexa-clamp-app {
        --nc-bg:      #13131f;
        --nc-bg2:     #1a1a2e;
        --nc-bg3:     #212136;
        --nc-border:  #2e2e4a;
        --nc-text:    #e8e8f0;
        --nc-muted:   #7a7a9a;
        --nc-accent:  #818cf8;
        --nc-accent2: #a78bfa;
        color:        #e8e8f0;
    }
}

/* ── Page Heading ─────────────────────────────────────────────────────────────── */
.nexa-clamp-heading {
    display:      flex;
    align-items:  center;
    gap:          0.75rem;
    font-size:    1.6rem !important;
    font-weight:  700;
    color:        #1e1e2e;
    margin-bottom: 0.25rem !important;
}

.nexa-clamp-badge {
    display:       inline-block;
    font-size:     0.65rem;
    font-weight:   600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background:    #4f46e5;
    color:         #fff;
    padding:       0.2rem 0.55rem;
    border-radius: 3px;
    vertical-align: middle;
}

.nexa-clamp-sub {
    color:         #6c7080;
    margin-bottom: 1.5rem !important;
    font-size:     0.9rem;
}

/* ── Cards ────────────────────────────────────────────────────────────────────── */
.nexa-card {
    background:    #fff;
    border:        1px solid #dde0e5;
    border-radius: 8px;
    padding:       1.5rem;
    margin-bottom: 1.5rem;
    box-shadow:    0 1px 3px rgba(0,0,0,.05);
}

.nexa-card h2 {
    font-size:     1rem !important;
    font-weight:   600;
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
    color:         #1e1e2e;
}

/* ── App Shell ────────────────────────────────────────────────────────────────── */
.nexa-clamp-app {
    background:    var(--nc-bg);
    border:        1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    overflow:      hidden;
    font-family:   var(--nc-font-ui);
    color:         var(--nc-text);
    max-width:     900px;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────────── */
.nc-tabs {
    display:        flex;
    background:     var(--nc-bg2);
    border-bottom:  1px solid var(--nc-border);
}

.nc-tab {
    font-size:     0.8rem;
    font-weight:   500;
    padding:       0.7rem 1.25rem;
    background:    transparent;
    border:        none;
    border-bottom: 2px solid transparent;
    cursor:        pointer;
    color:         var(--nc-muted);
    transition:    all 0.15s;
    display:       flex;
    align-items:   center;
    gap:           0.35rem;
    font-family:   var(--nc-font-ui);
}

.nc-tab:hover { color: var(--nc-text); }

.nc-tab--active {
    color:         var(--nc-accent);
    border-bottom-color: var(--nc-accent);
    background:    var(--nc-bg);
}

.nc-badge {
    background:    var(--nc-accent);
    color:         #fff;
    font-size:     0.65rem;
    padding:       0.1rem 0.4rem;
    border-radius: 10px;
    min-width:     18px;
    text-align:    center;
}

/* ── Panels ───────────────────────────────────────────────────────────────────── */
.nc-panel { display: none; padding: 1.5rem; }
.nc-panel--active { display: block; }

/* ── Grid / Layout ────────────────────────────────────────────────────────────── */
.nc-grid-2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1rem;
    margin-bottom:         1rem;
}

@media (max-width: 600px) {
    .nc-grid-2 { grid-template-columns: 1fr; }
}

.nc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 500px) {
    .nc-row { grid-template-columns: 1fr; }
}

.nc-section {
    background:    var(--nc-bg2);
    border:        1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    padding:       1rem;
}

.nc-section-title {
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--nc-accent);
    margin:         0 0 0.75rem;
}

/* ── Fields ───────────────────────────────────────────────────────────────────── */
.nc-field {
    display:        flex;
    flex-direction: column;
    gap:            0.3rem;
}

.nc-field label {
    font-size:      0.72rem;
    font-weight:    500;
    color:          var(--nc-muted);
    letter-spacing: 0.03em;
}

.nc-input, .nc-select {
    background:    var(--nc-bg);
    border:        1px solid var(--nc-border);
    border-radius: 4px;
    padding:       0.45rem 0.65rem;
    font-family:   var(--nc-font-mono);
    font-size:     0.9rem;
    color:         var(--nc-text);
    outline:       none;
    transition:    border-color 0.15s, box-shadow 0.15s;
    width:         100%;
    box-sizing:    border-box;
}

.nc-input:focus, .nc-select:focus {
    border-color: var(--nc-accent);
    box-shadow:   0 0 0 2px rgba(79,70,229,.15);
}

.nc-input-group {
    display: flex;
}

.nc-input-group .nc-input {
    border-radius: 4px 0 0 4px;
    border-right:  none;
}

.nc-input-group .nc-select {
    width:         auto;
    min-width:     70px;
    border-radius: 0 4px 4px 0;
    background:    var(--nc-bg2);
    color:         var(--nc-accent);
    font-size:     0.8rem;
}

/* ── Buttons ──────────────────────────────────────────────────────────────────── */
.nc-actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }

.nc-btn {
    font-family:    var(--nc-font-ui);
    font-size:      0.8rem;
    font-weight:    500;
    padding:        0.5rem 1rem;
    border-radius:  4px;
    cursor:         pointer;
    border:         1px solid transparent;
    transition:     all 0.15s;
    display:        inline-flex;
    align-items:    center;
    gap:            0.3rem;
    white-space:    nowrap;
    text-decoration: none;
}

.nc-btn--primary {
    background: var(--nc-accent);
    color:      #fff;
    border-color: var(--nc-accent);
}
.nc-btn--primary:hover { background: var(--nc-accent2); border-color: var(--nc-accent2); }

.nc-btn--secondary {
    background:  transparent;
    color:       var(--nc-accent);
    border-color: var(--nc-accent);
}
.nc-btn--secondary:hover { background: rgba(79,70,229,.08); }

.nc-btn--ghost {
    background:  transparent;
    color:       var(--nc-muted);
    border-color: var(--nc-border);
}
.nc-btn--ghost:hover { border-color: var(--nc-text); color: var(--nc-text); }

.nc-btn--sm { padding: 0.3rem 0.65rem; font-size: 0.75rem; }

.nc-btn--danger {
    background:  transparent;
    color:       var(--nc-red);
    border-color: rgba(220,38,38,.3);
}
.nc-btn--danger:hover { background: rgba(220,38,38,.08); }

.nc-btn--copied { background: var(--nc-green) !important; border-color: var(--nc-green) !important; }

/* ── Output ───────────────────────────────────────────────────────────────────── */
.nc-output { margin-top: 1.25rem; }

.nc-output-label {
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--nc-accent);
    margin-bottom:  0.4rem;
}

.nc-output-box {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    background:    var(--nc-bg2);
    border:        1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    padding:       0.75rem 1rem;
    margin-bottom: 1rem;
}

.nc-output-code {
    flex:          1;
    font-family:   var(--nc-font-mono);
    font-size:     0.9rem;
    color:         var(--nc-text);
    word-break:    break-all;
}

/* ── Breakdown ────────────────────────────────────────────────────────────────── */
.nc-breakdown {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0.75rem;
    margin-bottom:         1rem;
}

@media (max-width: 480px) {
    .nc-breakdown { grid-template-columns: 1fr; }
}

.nc-breakdown-item {
    background:    var(--nc-bg2);
    border:        1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    padding:       0.75rem;
    text-align:    center;
}

.nc-bd-label {
    font-size:      0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--nc-muted);
    display:        block;
    margin-bottom:  0.25rem;
}

.nc-bd-val {
    font-family: var(--nc-font-mono);
    font-size:   0.85rem;
    font-weight: 700;
}

.nc-bd-min  { color: var(--nc-orange); }
.nc-bd-ideal { color: var(--nc-accent); }
.nc-bd-max  { color: var(--nc-green);  }

/* ── Preview ──────────────────────────────────────────────────────────────────── */
.nc-preview {
    background:    var(--nc-bg2);
    border:        1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    padding:       1rem;
    margin-bottom: 1rem;
}

.nc-preview-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   0.5rem;
}

.nc-vw-display {
    font-family: var(--nc-font-mono);
    font-size:   0.75rem;
    color:       var(--nc-accent);
}

.nc-vw-slider {
    width:      100%;
    -webkit-appearance: none;
    appearance: none;
    height:     4px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        var(--nc-accent) var(--nc-track-fill, 50%),
        var(--nc-border) var(--nc-track-fill, 50%));
    margin:     0.75rem 0;
    cursor:     pointer;
}

.nc-vw-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:         16px;
    height:        16px;
    border-radius: 50%;
    background:    var(--nc-accent);
    border:        2px solid #fff;
    box-shadow:    0 1px 4px rgba(0,0,0,.2);
    transition:    transform 0.1s;
}
.nc-vw-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }
.nc-vw-slider::-moz-range-thumb {
    width:         16px;
    height:        16px;
    border-radius: 50%;
    background:    var(--nc-accent);
    border:        2px solid #fff;
}

.nc-preview-box {
    background:    var(--nc-bg);
    border:        1px solid var(--nc-border);
    border-radius: 4px;
    padding:       1.5rem;
    min-height:    80px;
    overflow:      hidden;
}

.nc-preview-text {
    font-weight: 700;
    line-height: 1.2;
    transition:  font-size 0.1s;
}

.nc-preview-meta {
    font-family:   var(--nc-font-mono);
    font-size:     0.65rem;
    color:         var(--nc-muted);
    margin-top:    0.75rem;
    padding-top:   0.5rem;
    border-top:    1px solid var(--nc-border);
}

.nc-scale-bar {
    height:        6px;
    background:    var(--nc-bg3);
    border-radius: 3px;
    margin-top:    0.75rem;
    overflow:      hidden;
}

.nc-scale-fill {
    height:     100%;
    background: linear-gradient(90deg, var(--nc-orange), var(--nc-accent), var(--nc-green));
    transition: width 0.1s;
    border-radius: 3px;
}

/* ── Save Preset Row ──────────────────────────────────────────────────────────── */
.nc-save-row {
    display:   flex;
    gap:       0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.nc-save-row .nc-input {
    flex: 1;
    min-width: 180px;
}

/* ── Type Scale Output ────────────────────────────────────────────────────────── */
.nc-ms-output .nc-output-box {
    background: #1e1e2e;
    border-color: #2e2e4a;
}

.nc-ms-code {
    color: #cdd6f4;
    font-size: 0.8rem;
}

/* ── Presets Grid ─────────────────────────────────────────────────────────────── */
.nc-preset-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   0.75rem;
    margin-bottom:         1rem;
}

.nc-preset-card {
    background:    var(--nc-bg2);
    border:        1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    padding:       0.875rem;
    transition:    border-color 0.15s;
}

.nc-preset-card:hover { border-color: var(--nc-accent); }

.nc-preset-name-label {
    font-weight:   600;
    font-size:     0.875rem;
    margin-bottom: 0.2rem;
}

.nc-preset-vp {
    font-size:      0.7rem;
    color:          var(--nc-muted);
    margin-bottom:  0.4rem;
}

.nc-preset-css {
    display:       block;
    font-family:   var(--nc-font-mono);
    font-size:     0.7rem;
    background:    var(--nc-bg3);
    padding:       0.35rem 0.5rem;
    border-radius: 3px;
    word-break:    break-all;
    margin-bottom: 0.5rem;
    color:         var(--nc-accent);
}

.nc-preset-actions { display: flex; gap: 0.35rem; }

/* ── Export preview ───────────────────────────────────────────────────────────── */
.nc-export-preview {
    background:    #1e1e2e;
    color:         #cdd6f4;
    padding:       1rem;
    border-radius: var(--nc-radius);
    font-family:   var(--nc-font-mono);
    font-size:     0.8rem;
    white-space:   pre-wrap;
    max-height:    300px;
    overflow-y:    auto;
    margin-top:    0.75rem;
}

/* ── Misc ─────────────────────────────────────────────────────────────────────── */
.nc-muted { color: var(--nc-muted); font-size: 0.85rem; }

.nc-empty-presets {
    text-align:  center;
    padding:     2rem 1rem;
    color:       var(--nc-muted);
    font-size:   0.85rem;
}

/* ── Toast ────────────────────────────────────────────────────────────────────── */
.nc-toast {
    position:    fixed;
    bottom:      1.5rem;
    left:        50%;
    transform:   translateX(-50%) translateY(60px);
    background:  #1e1e2e;
    color:       #fff;
    font-size:   0.8rem;
    font-family: var(--nc-font-ui, sans-serif);
    padding:     0.55rem 1.1rem;
    border-radius: 4px;
    z-index:     9999;
    transition:  transform 0.2s;
    white-space: nowrap;
    box-shadow:  0 4px 16px rgba(0,0,0,.2);
    pointer-events: none;
}

.nc-toast--show { transform: translateX(-50%) translateY(0); }
.nc-toast--error { background: #dc2626; }

/* ── Presets table (admin list page) ─────────────────────────────────────────── */
.nexa-presets-table code {
    font-size:  0.78rem;
    background: #f0f0f5;
    padding:    0.15rem 0.4rem;
    border-radius: 3px;
}

.nexa-empty-state {
    text-align:  center;
    padding:     3rem 1rem;
    color:       #666;
}

.nexa-empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }