/*!
 * AsciiPad v1.0 - Lightweight ASCII Text Editor Styles
 * Copyright © 2025 Injosoft. All rights reserved.
 *
 * Part of ASCII Art Archive (asciiart.eu)
 */

/* CSS Variables */
.ap-wrapper {
    --ap-bg: var(--bs-body-bg, #fff);
    --ap-text: var(--bs-body-color, #212529);
    --ap-grid-color: rgba(128, 128, 128, 0.15);
    --ap-canvas-border: rgba(128, 128, 128, 0.5);
    --ap-cursor-bg: var(--bs-primary, #0d6efd);
    --ap-cursor-text: #fff;
    --ap-selection-bg: rgba(13, 110, 253, 0.3);
    --ap-border: var(--bs-border-color, #dee2e6);
    --ap-status-bg: var(--bs-tertiary-bg, #f8f9fa);
    --ap-status-text: var(--bs-secondary-color, #6c757d);
    --ap-font: 'JetBrains Mono', Consolas, 'Courier New', monospace;
}

/* Dark theme */
[data-bs-theme="dark"] .ap-wrapper,
.dark .ap-wrapper {
    --ap-bg: var(--bs-body-bg, #212529);
    --ap-text: var(--bs-body-color, #dee2e6);
    --ap-grid-color: rgba(255, 255, 255, 0.08);
    --ap-canvas-border: rgba(255, 255, 255, 0.4);
    --ap-cursor-bg: var(--bs-primary, #0d6efd);
    --ap-cursor-text: #fff;
    --ap-selection-bg: rgba(13, 110, 253, 0.4);
    --ap-border: var(--bs-border-color, #495057);
    --ap-status-bg: var(--bs-tertiary-bg, #2b3035);
    --ap-status-text: var(--bs-secondary-color, #adb5bd);
}

/* Wrapper */
.ap-wrapper {
    display: inline-flex;
    flex-direction: column;
    border: 1px solid var(--ap-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--ap-bg);
}

/* Grid container */
.ap-grid-container {
    position: relative;
    overflow: hidden;
    background: #fff;
}

[data-bs-theme="dark"] .ap-grid-container,
.dark .ap-grid-container {
    background: #fff;
}

/* Grid */
.ap-grid {
    position: relative;
    display: block;
    font-family: var(--ap-font);
    font-size: var(--ap-font-size, 14px);
    line-height: var(--ap-line-height, 1.2);
    color: var(--ap-text);
    background: var(--ap-bg);
    cursor: text;
    outline: none;
    overflow: hidden;
}

/* Grid content */
.ap-grid-content {
    position: relative;
}

.ap-rows {
    position: relative;
}

/* Grid lines */
.ap-grid.ap-show-grid .ap-grid-content {
    background-image:
        linear-gradient(to right, var(--ap-grid-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--ap-grid-color) 1px, transparent 1px);
    background-size: var(--ap-char-width, 10px) var(--ap-char-height, 20px);
    background-position: 0 0;
}

/* Row */
.ap-row {
    display: block;
    height: var(--ap-char-height);
    line-height: var(--ap-char-height);
    white-space: pre;
    letter-spacing: 0;
}

/* Cursor overlay */
.ap-cursor-overlay {
    position: absolute;
    background: var(--ap-cursor-bg);
    color: var(--ap-cursor-text);
    pointer-events: none;
    z-index: 2;
    text-align: center;
    font-family: var(--ap-font);
    font-size: var(--ap-font-size, 14px);
    line-height: var(--ap-char-height);
}

/* Blinking cursor */
@keyframes ap-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.4; }
}

.ap-grid:focus-within .ap-cursor-overlay {
    animation: ap-blink 1s step-end infinite;
}

/* Insert mode cursor */
.ap-grid.ap-insert-mode .ap-cursor-overlay {
    width: 2px !important;
    background: var(--ap-cursor-bg);
    color: transparent;
}

/* Selection overlay */
.ap-selection-overlay {
    position: absolute;
    background: var(--ap-selection-bg);
    pointer-events: none;
    z-index: 1;
}

/* Hidden textarea */
.ap-textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    resize: none;
    border: none;
    padding: 0;
    margin: 0;
}

/* Status bar */
.ap-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    font-family: var(--ap-font);
    font-size: 11px;
    color: var(--ap-status-text);
    background: var(--ap-status-bg);
    border-top: 1px solid var(--ap-border);
    user-select: none;
    gap: 8px;
}

.ap-status-left {
    display: flex;
    gap: 12px;
}

.ap-status-left i {
    margin-right: 3px;
    opacity: 0.7;
}

.ap-status-right {
    display: flex;
    gap: 12px;
}

.ap-selection-info {
    color: var(--bs-primary, #0d6efd);
    font-weight: 500;
}

/* Mode toggle (INS/OVR) */
.ap-mode-toggle {
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 10px;
    background: var(--ap-border);
    color: var(--ap-text);
    user-select: none;
    transition: background-color 0.15s;
}

.ap-mode-toggle:hover {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
}