/*
 * Bijoy to Avro Converter — Stylesheet
 * Version: 1.0.0
 *
 * Aesthetic: Editorial‑craft. Clean ink-on-paper feeling with warm accents.
 * Fonts: Hind Siliguri (Bangla-friendly), DM Serif Display (headings).
 */

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Hind+Siliguri:wght@300;400;500;600&display=swap');

/* ── CSS Custom Properties ─────────────────────────────────────────────────── */
.bta-wrapper {
    /* Light theme (default) */
    --bta-bg:           #FAFAF7;
    --bta-surface:      #FFFFFF;
    --bta-surface-2:    #F4F3EE;
    --bta-border:       #DDD9CE;
    --bta-border-focus: #C4873A;
    --bta-text:         #1A1915;
    --bta-text-muted:   #7A7669;
    --bta-accent:       #C4873A;
    --bta-accent-hover: #A86D26;
    --bta-accent-text:  #FFFFFF;
    --bta-success:      #2D7A4F;
    --bta-warn:         #B55F0B;
    --bta-error:        #B83232;
    --bta-shadow:       0 2px 12px rgba(0,0,0,.08);
    --bta-shadow-lg:    0 8px 32px rgba(0,0,0,.12);
    --bta-radius:       10px;
    --bta-radius-sm:    6px;
    --bta-font-body:    'Hind Siliguri', sans-serif;
    --bta-font-display: 'DM Serif Display', Georgia, serif;
    --bta-transition:   0.18s ease;
}

/* Dark theme */
.bta-wrapper.bta-theme-dark {
    --bta-bg:           #141410;
    --bta-surface:      #1E1D18;
    --bta-surface-2:    #28271F;
    --bta-border:       #38362B;
    --bta-border-focus: #E09B50;
    --bta-text:         #F0EDE4;
    --bta-text-muted:   #8A876F;
    --bta-accent:       #E09B50;
    --bta-accent-hover: #C4873A;
    --bta-accent-text:  #141410;
    --bta-success:      #4BAE77;
    --bta-warn:         #F0994A;
    --bta-error:        #E06060;
    --bta-shadow:       0 2px 12px rgba(0,0,0,.4);
    --bta-shadow-lg:    0 8px 32px rgba(0,0,0,.5);
}

/* ── Reset & Base ───────────────────────────────────────────────────────────── */
.bta-wrapper *,
.bta-wrapper *::before,
.bta-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.bta-wrapper {
    font-family: var(--bta-font-body);
    font-size: 15px;
    color: var(--bta-text);
    background: var(--bta-bg);
    border: 1px solid var(--bta-border);
    border-radius: var(--bta-radius);
    padding: 2rem 2.2rem 1.6rem;
    max-width: 1100px;
    margin: 2rem auto;
    box-shadow: var(--bta-shadow-lg);
    transition: background var(--bta-transition), color var(--bta-transition), border-color var(--bta-transition);
    position: relative;
    overflow: hidden;
}

/* Subtle ink-texture overlay */
.bta-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='1' cy='1' r='.5' fill='%23000' opacity='.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}
.bta-wrapper > * { position: relative; z-index: 1; }

/* ── Header ─────────────────────────────────────────────────────────────────── */
.bta-header {
    text-align: center;
    margin-bottom: 1.8rem;
}

.bta-title {
    font-family: var(--bta-font-display);
    line-height: 1.15;
    margin-bottom: .4rem;
}

.bta-title-bn {
    display: block;
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    color: var(--bta-accent);
    font-style: italic;
    letter-spacing: -.01em;
}

.bta-title-en {
    display: block;
    font-size: clamp(1rem, 2.5vw, 1.45rem);
    color: var(--bta-text);
    font-weight: 400;
}

.bta-title-en em {
    font-style: italic;
    color: var(--bta-accent);
}

.bta-subtitle {
    font-size: .87rem;
    color: var(--bta-text-muted);
    margin-bottom: 1.2rem;
    line-height: 1.5;
}

/* ── Top Controls (toggles row) ─────────────────────────────────────────────── */
.bta-controls-top {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1.4rem;
    justify-content: center;
    align-items: center;
}

/* Toggle switch */
.bta-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    user-select: none;
    font-size: .82rem;
    color: var(--bta-text-muted);
    transition: color var(--bta-transition);
}
.bta-toggle:hover { color: var(--bta-text); }
.bta-toggle input { display: none; }

.bta-toggle-track {
    display: inline-block;
    width: 34px;
    height: 19px;
    background: var(--bta-border);
    border-radius: 100px;
    position: relative;
    transition: background var(--bta-transition);
    flex-shrink: 0;
}
.bta-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: transform 0.2s cubic-bezier(.4,0,.2,1), background var(--bta-transition);
}
.bta-toggle input:checked ~ .bta-toggle-track {
    background: var(--bta-accent);
}
.bta-toggle input:checked ~ .bta-toggle-track::after {
    transform: translateX(15px);
}

/* ── Panels (two-column) ────────────────────────────────────────────────────── */
.bta-panels {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    gap: 0;
    align-items: start;
}

.bta-panel {
    background: var(--bta-surface);
    border: 1.5px solid var(--bta-border);
    border-radius: var(--bta-radius);
    overflow: hidden;
    transition: border-color var(--bta-transition), box-shadow var(--bta-transition);
}
.bta-panel:focus-within {
    border-color: var(--bta-border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bta-accent) 18%, transparent);
}

.bta-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem .85rem;
    background: var(--bta-surface-2);
    border-bottom: 1px solid var(--bta-border);
    font-size: .78rem;
    color: var(--bta-text-muted);
}

.bta-panel-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 500;
    color: var(--bta-text);
    letter-spacing: .01em;
}

.bta-panel-label svg {
    width: 14px; height: 14px;
    fill: var(--bta-accent);
    flex-shrink: 0;
}

.bta-char-count {
    font-size: .73rem;
    color: var(--bta-text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
}

/* ── Textarea ───────────────────────────────────────────────────────────────── */
.bta-textarea {
    display: block;
    width: 100%;
    min-height: 220px;
    padding: .9rem 1rem;
    font-family: var(--bta-font-body);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--bta-text);
    background: transparent;
    border: none;
    outline: none;
    resize: vertical;
    -webkit-font-smoothing: antialiased;
    transition: color var(--bta-transition);
}

.bta-textarea-bijoy {
    /* Bijoy text tends to look like garbled Latin — keep as-is */
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: .95rem;
    letter-spacing: .01em;
}

.bta-textarea-unicode {
    font-size: 1.12rem;
    /* Ensure Bangla glyphs render beautifully */
    font-feature-settings: "liga" 1, "calt" 1;
}

.bta-textarea::placeholder {
    color: var(--bta-text-muted);
    opacity: .55;
    font-style: italic;
    font-size: .88rem;
}

/* ── Panel Action Buttons ────────────────────────────────────────────────────── */
.bta-panel-actions {
    display: flex;
    gap: .55rem;
    padding: .65rem .85rem;
    background: var(--bta-surface-2);
    border-top: 1px solid var(--bta-border);
}

.bta-btn {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    font-family: var(--bta-font-body);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .42rem .9rem;
    border: 1.5px solid transparent;
    border-radius: var(--bta-radius-sm);
    cursor: pointer;
    transition:
        background var(--bta-transition),
        color var(--bta-transition),
        border-color var(--bta-transition),
        transform .1s ease,
        box-shadow var(--bta-transition);
    white-space: nowrap;
    line-height: 1;
}

.bta-btn svg {
    width: 13px; height: 13px;
    fill: currentColor;
    flex-shrink: 0;
}

.bta-btn:active { transform: scale(0.97); }

/* Convert — primary filled */
.bta-btn-convert {
    background: var(--bta-accent);
    color: var(--bta-accent-text);
    border-color: var(--bta-accent);
}
.bta-btn-convert:hover {
    background: var(--bta-accent-hover);
    border-color: var(--bta-accent-hover);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--bta-accent) 35%, transparent);
}

/* Clear — ghost */
.bta-btn-clear {
    background: transparent;
    color: var(--bta-text-muted);
    border-color: var(--bta-border);
}
.bta-btn-clear:hover {
    background: var(--bta-surface-2);
    color: var(--bta-text);
    border-color: var(--bta-text-muted);
}

/* Copy */
.bta-btn-copy {
    background: transparent;
    color: var(--bta-accent);
    border-color: var(--bta-accent);
}
.bta-btn-copy:hover {
    background: var(--bta-accent);
    color: var(--bta-accent-text);
}
.bta-btn-copy.bta-btn-copied {
    background: var(--bta-success);
    color: #fff;
    border-color: var(--bta-success);
}

/* Download */
.bta-btn-download {
    background: transparent;
    color: var(--bta-text-muted);
    border-color: var(--bta-border);
}
.bta-btn-download:hover {
    background: var(--bta-surface-2);
    color: var(--bta-text);
    border-color: var(--bta-text-muted);
}

/* ── Divider Arrow ───────────────────────────────────────────────────────────── */
.bta-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .25rem;
    padding-top: 2.2rem; /* align with textarea */
}

.bta-arrow {
    width: 32px; height: 32px;
    stroke: var(--bta-accent);
    opacity: .7;
    flex-shrink: 0;
    animation: bta-pulse 2.2s ease-in-out infinite;
}

@keyframes bta-pulse {
    0%, 100% { opacity: .5; transform: translateX(0); }
    50%       { opacity: .9; transform: translateX(3px); }
}

/* ── Status Bar ─────────────────────────────────────────────────────────────── */
.bta-status {
    min-height: 1.4rem;
    font-size: .8rem;
    font-weight: 500;
    padding: .35rem .6rem;
    border-radius: var(--bta-radius-sm);
    margin-top: .85rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}

.bta-status-visible {
    opacity: 1;
    transform: translateY(0);
}

.bta-status-success { background: color-mix(in srgb, var(--bta-success) 12%, transparent); color: var(--bta-success); }
.bta-status-warn    { background: color-mix(in srgb, var(--bta-warn)    12%, transparent); color: var(--bta-warn); }
.bta-status-error   { background: color-mix(in srgb, var(--bta-error)   12%, transparent); color: var(--bta-error); }
.bta-status-info    { background: var(--bta-surface-2); color: var(--bta-text-muted); }

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .bta-status-success { background: rgba(45,122,79,.12); }
    .bta-status-warn    { background: rgba(181,95,11,.12); }
    .bta-status-error   { background: rgba(184,50,50,.12); }
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.bta-footer {
    margin-top: 1.2rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--bta-border);
    text-align: center;
    font-size: .73rem;
    color: var(--bta-text-muted);
    letter-spacing: .01em;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .bta-wrapper {
        padding: 1.4rem 1.1rem 1.2rem;
        margin: 1rem auto;
        border-radius: var(--bta-radius-sm);
    }

    .bta-panels {
        grid-template-columns: 1fr;
        gap: .9rem;
    }

    .bta-divider {
        padding: 0;
        transform: rotate(90deg);
    }

    .bta-controls-top {
        gap: .5rem .9rem;
    }

    .bta-title-bn  { font-size: 1.5rem; }
    .bta-title-en  { font-size: 1rem; }

    .bta-panel-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 420px) {
    .bta-wrapper { padding: 1rem .8rem 1rem; }
    .bta-textarea { font-size: .95rem; }
    .bta-btn      { font-size: .76rem; padding: .4rem .7rem; }
}

/* ── Print ──────────────────────────────────────────────────────────────────── */
@media print {
    .bta-controls-top,
    .bta-panel-actions,
    .bta-footer,
    .bta-divider { display: none; }
    .bta-wrapper { box-shadow: none; border: 1px solid #ccc; }
}

/* ── Accessibility: high-contrast mode ─────────────────────────────────────── */
@media (forced-colors: active) {
    .bta-btn          { border: 2px solid ButtonText; }
    .bta-panel        { border: 2px solid ButtonText; }
    .bta-toggle-track { border: 1px solid ButtonText; }
}

/* ── Scrollbar (Webkit) ─────────────────────────────────────────────────────── */
.bta-textarea::-webkit-scrollbar       { width: 5px; }
.bta-textarea::-webkit-scrollbar-track { background: transparent; }
.bta-textarea::-webkit-scrollbar-thumb {
    background: var(--bta-border);
    border-radius: 10px;
}
.bta-textarea::-webkit-scrollbar-thumb:hover {
    background: var(--bta-text-muted);
}

/* ── Focus visible (keyboard nav) ───────────────────────────────────────────── */
.bta-btn:focus-visible,
.bta-textarea:focus-visible {
    outline: 2.5px solid var(--bta-accent);
    outline-offset: 2px;
}