/* Adhar - editor styles. Bootstrap-compatible naming is avoided on purpose so this file has no dependency. */
:root {
    --ad-bg: #f3f5f7;
    --ad-surface: #ffffff;
    --ad-ink: #1c2530;
    --ad-muted: #5d6b7a;
    --ad-line: #d7dde3;
    --ad-accent: #1f5f8b;
    --ad-accent-ink: #ffffff;
    --ad-error-bg: #fdecea;
    --ad-error-ink: #8a1f17;
    --ad-ok-ink: #17652e;
    --ad-radius: 6px;
}

* { box-sizing: border-box; }

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

body {
    background: var(--ad-bg);
    color: var(--ad-ink);
    font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }

.ad-topbar {
    display: flex; align-items: baseline; gap: 1rem;
    padding: .75rem 1.25rem;
    background: var(--ad-surface);
    border-bottom: 1px solid var(--ad-line);
}
.ad-brand { font-weight: 700; font-size: 1.15rem; }
.ad-sub, .ad-muted { color: var(--ad-muted); }
.ad-link { margin-left: auto; color: var(--ad-accent); text-decoration: none; }
.ad-link:hover { text-decoration: underline; }

.ad-container { padding: 1rem 1.25rem 2rem; max-width: 1600px; margin: 0 auto; }
.ad-narrow { max-width: 560px; }

.ad-panel {
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: var(--ad-radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

/* ---- editor layout: 30% controls / 70% preview ---- */
.ad-editor { display: flex; gap: 1rem; align-items: flex-start; }
.ad-controls { flex: 0 0 30%; min-width: 280px; }
.ad-preview { flex: 1 1 70%; min-width: 0; }

.ad-canvas-wrap {
    overflow: auto;
    max-height: 80vh;
    background: repeating-conic-gradient(#eceff2 0% 25%, #f7f8fa 0% 50%) 50% / 20px 20px;
    border: 1px solid var(--ad-line);
    border-radius: var(--ad-radius);
    padding: .5rem;
    text-align: center;
}
#previewCanvas { max-width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); }

.ad-text {
    margin: 0; padding: .75rem;
    max-height: 260px; overflow: auto;
    background: #f8f9fa; border: 1px solid var(--ad-line); border-radius: var(--ad-radius);
    white-space: pre-wrap; word-break: break-word;
    font: 13px/1.45 Consolas, "Courier New", monospace;
}

/* ---- form controls ---- */
.ad-field { margin-bottom: .85rem; }
.ad-field label, .ad-slider label { display: block; font-weight: 600; margin-bottom: .25rem; }
.ad-field input[type=text], .ad-field input[type=password], .ad-field input[type=file], .ad-field textarea {
    width: 100%; padding: .5rem .6rem;
    border: 1px solid var(--ad-line); border-radius: var(--ad-radius);
    font: inherit; background: #fff; color: var(--ad-ink);
}
.ad-field input[readonly], .ad-field textarea[readonly] { background: #f3f5f7; color: #33404d; }

.ad-slider { margin-bottom: 1rem; }
.ad-slider label { display: flex; justify-content: space-between; }
.ad-slider output { font-variant-numeric: tabular-nums; color: var(--ad-accent); min-width: 3ch; text-align: right; }
.ad-slider input[type=range] { width: 100%; }

.ad-hint { color: var(--ad-muted); font-size: .85rem; margin: .25rem 0 .75rem; }
.ad-note { color: var(--ad-muted); font-size: .85rem; margin-top: 1.25rem; }
.ad-busy { color: var(--ad-muted); font-weight: 400; font-size: .85rem; margin-left: .5rem; }

.ad-actions { display: flex; gap: .5rem; }
.ad-actions .ad-btn { flex: 1; }

.ad-btn {
    padding: .6rem 1rem; border-radius: var(--ad-radius);
    border: 1px solid var(--ad-line); background: #fff; color: var(--ad-ink);
    font: inherit; font-weight: 600; cursor: pointer;
}
.ad-btn:hover:not(:disabled) { border-color: var(--ad-accent); }
.ad-btn:disabled { opacity: .6; cursor: default; }
.ad-btn-primary { background: var(--ad-accent); border-color: var(--ad-accent); color: var(--ad-accent-ink); }

.ad-btn:focus-visible, input:focus-visible, textarea:focus-visible, .ad-link:focus-visible {
    outline: 3px solid #7fb2d6; outline-offset: 2px;
}

.ad-status { min-height: 1.5rem; margin-top: .75rem; color: var(--ad-muted); }
.ad-status.ok { color: var(--ad-ok-ink); }
.ad-status.error { color: var(--ad-error-ink); }

.ad-alert { padding: .75rem 1rem; border-radius: var(--ad-radius); margin: 1rem 0; }
.ad-alert-error { background: var(--ad-error-bg); color: var(--ad-error-ink); border: 1px solid #f3c2bd; }
.ad-alert-error ul { margin: 0; padding-left: 1.1rem; }

/* ---- mobile: controls first, preview below ---- */
@media (max-width: 900px) {
    .ad-editor { flex-direction: column; }
    .ad-controls, .ad-preview { flex: 1 1 auto; width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---- selection stage (crop / photo rectangles) ---- */
.ad-stage { position: relative; display: inline-block; max-width: 100%; overflow: hidden; line-height: 0; }
.ad-stage canvas { display: block; }

.ad-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; }
.ad-layer.active { pointer-events: auto; cursor: crosshair; }

.ad-rect { position: absolute; box-sizing: border-box; border: 2px dashed; pointer-events: none; }
.ad-rect-crop { border-color: #1f5f8b; box-shadow: 0 0 0 9999px rgba(20, 30, 40, .42); }
.ad-rect-photo { border-color: #0f8a6b; background: rgba(15, 138, 107, .14); }

.ad-row { display: flex; gap: .5rem; }
.ad-row .ad-btn { flex: 1; }
.ad-btn.active { background: #e6f0f7; border-color: var(--ad-accent); }
.ad-info { margin: .6rem 0 .25rem; color: var(--ad-muted); font-size: .85rem; }
.ad-slider input[type=range]:disabled { opacity: .45; }