/* ================================================================
   app-components.css — shared design tokens and utility classes
   Loaded globally. Used by json-node, sg-editor, and all
   future components that need consistent inputs, buttons, etc.
================================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    --app-accent:     #0a5dc2;
    --app-accent-lt:  #e8f0fb;
    --app-accent-bd:  #bfd4f5;
    --app-border:     #dee2e6;
    --app-bg:         #ffffff;
    --app-bg-subtle:  #f8f9fa;
    --app-text:       #212529;
    --app-text-muted: #6c757d;
    --app-success:    #198754;
    --app-warning:    #fd7e14;
    --app-danger:     #dc3545;
    --app-radius-sm:  4px;
    --app-radius:     6px;
    --app-radius-lg:  10px;
    --app-shadow:     0 1px 4px rgba(0,0,0,.08);
    --app-shadow-lg:  0 8px 32px rgba(0,0,0,.14);

    /* ── Fluid type scale ── */
    --text-xxs:   clamp(7px, 0.45vw, 9px);
    --text-xs:   clamp(11px, 0.65vw, 12px);
    --text-sm:   clamp(13px, 0.85vw, 14px);
    --text-base: clamp(14px, 0.95vw, 15px);
    --text-md:   clamp(15px, 1.05vw, 17px);
    --text-lg:   clamp(17px, 1.8vw,  28px);
    --text-xl:   clamp(24px, 2.8vw,  40px);
}

/* ── Font-size utility classes ─────────────────────────────── */
.font-xs   { font-size: var(--text-xs);   }
.font-sm   { font-size: var(--text-sm);   }
.font-base { font-size: var(--text-base); }
.font-md   { font-size: var(--text-md);   }
.font-lg   { font-size: var(--text-lg);   }
.font-xl   { font-size: var(--text-xl);   }

/* ── Buttons ───────────────────────────────────────────────── */
.app-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--app-radius-sm);
    /*border: 1px solid var(--app-border);*/
    border:none;
    background: inherit;
    
    
    font-weight: 500;
    cursor: pointer;
    /*transition: background .12s, border-color .12s, color .12s;*/
    white-space: nowrap;
    line-height: 1.4;
}
/*.app-btn:hover            { background: var(--app-bg-subtle); border-color: #adb5bd; }
.app-btn-primary          { color: var(--app-accent); border-color: var(--app-accent-bd); background: var(--app-accent-lt); }
.app-btn-primary:hover    { background: #d0e4ff; border-color: var(--app-accent); }
.app-btn-success          { color: var(--app-success); border-color: #a3cfbb; background: #d1e7dd; }
.app-btn-success:hover    { background: #badbcc; }
.app-btn-danger           { color: var(--app-danger); border-color: #f1aeb5; background: #f8d7da; }
.app-btn-danger:hover     { background: #f1aeb5; }*/
.app-btn-sm {
    padding: 2px 7px;
    font-size: var(--text-sm)
}
.app-btn-md {
    padding: 2px 7px;
    font-size: var(--text-md)
}
.app-btn-lg {
    padding: 2px 7px;
    font-size: var(--text-lg)
}
.app-btn-icon             { padding: 3px 6px; font-size: 1em; line-height: 1; }

/* ── Status / alert bar ────────────────────────────────────── */
.app-status {
    padding: 7px 16px;
    font-size: 0.92em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid transparent;
}
.app-status-info    { background: var(--app-accent-lt); color: var(--app-accent);  border-color: var(--app-accent-bd); }
.app-status-success { background: #d1e7dd; color: var(--app-success); border-color: #a3cfbb; }
.app-status-warning { background: #fff3cd; color: #7c4e00; border-color: #ffc107; }
.app-status-error   { background: #f8d7da; color: var(--app-danger); border-color: #f1aeb5; }
.app-status-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.08em;
    opacity: .6;
    padding: 0 2px;
}
.app-status-close:hover { opacity: 1; }

/* ── Overlay backdrop ──────────────────────────────────────── */
.app-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10500;
    padding: 20px;
    backdrop-filter: blur(3px);
}

/* ── Dialog / modal shell ──────────────────────────────────── */
.app-dialog {
    background: var(--app-bg);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-lg);
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.app-dialog-lg { max-width: 860px; max-height: 88vh; }

.app-dialog-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--app-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--app-bg-subtle);
}
.app-dialog-title  { font-weight: 600; font-size: 1.08em; color: var(--app-text); display: flex; align-items: center; gap: 8px; }
.app-dialog-close  { background: none; border: none; font-size: 1.54em; cursor: pointer; color: var(--app-text-muted); line-height: 1; padding: 0 4px; }
.app-dialog-close:hover { color: var(--app-text); }
.app-dialog-body   { padding: 20px; flex: 1; overflow-y: auto; }
.app-dialog-footer { padding: 12px 20px; border-top: 1px solid var(--app-border); display: flex; gap: 8px; justify-content: flex-end; background: var(--app-bg-subtle); }

.app-dialog-label { font-size: 1em; font-weight: 500; color: var(--app-text); }
.app-dialog-input {
    width: 100%;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: 8px 10px;
    font-size: 1em;
    outline: none;
    margin-top: 8px;
    transition: border-color .12s;
    font-family: inherit;
}
.app-dialog-input:focus { border-color: var(--app-accent); }

/* ── Template grid (ds-tmpl-*) ─────────────────────────────── */
/* Shared by browser and any feature that renders a template picker */
.ds-tmpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 30%, 160px), 1fr));
    gap: clamp(8px, 1.5vw, 12px);
    padding: clamp(10px, 2vw, 16px);
}

.ds-tmpl-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: clamp(10px, 2vw, 14px) 8px;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    text-align: center;
}
.ds-tmpl-card:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), .12);
}

/* Extends .emoji-icon — add this class alongside emoji-icon in HTML */
.ds-tmpl-icon {
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
    flex-shrink: 0;
}

.ds-tmpl-name {
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.2;
}

.ds-tmpl-desc {
    font-size: var(--text-sm);
    color: var(--bs-secondary-color);
    line-height: 1.3;
}