/**
 * eucd-main.css — Edutalora Universal Connection Designer
 * Screen stylesheet (print styles are in eucd-print.css)
 *
 * Brand tokens:
 *   --eucd-navy   #1A2E4A  (primary / dark bg)
 *   --eucd-blue   #2563EB  (accent / interactive)
 *   --eucd-slate  #F1F5F9  (panel backgrounds)
 *   --eucd-border #CBD5E1
 *
 * @package EduTaloraUCD
 */

/* ── Reset & Tokens ──────────────────────────────────────────────────────── */
#eucd-designer-root *,
#eucd-designer-root *::before,
#eucd-designer-root *::after { box-sizing: border-box; margin: 0; padding: 0; }

#eucd-designer-root {
    --eucd-navy:     #1A2E4A;
    --eucd-blue:     #2563EB;
    --eucd-blue-lt:  #EFF6FF;
    --eucd-slate:    #F1F5F9;
    --eucd-border:   #CBD5E1;
    --eucd-text:     #1E293B;
    --eucd-muted:    #64748B;
    --eucd-pass:     #16A34A;
    --eucd-fail:     #DC2626;
    --eucd-warn:     #F59E0B;
    --eucd-radius:   10px;
    --eucd-shadow:   0 4px 24px rgba(26,46,74,.10);
    --eucd-shadow-sm:0 2px 8px  rgba(26,46,74,.07);

    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size:   15px;
    color:       var(--eucd-text);
    line-height: 1.6;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.eucd-wrapper {
    max-width: 1100px;
    margin:    0 auto;
    padding:   28px 20px;
}

/* ── Tool Header ─────────────────────────────────────────────────────────── */
.eucd-tool-header {
    display:         flex;
    align-items:     center;
    gap:             16px;
    background:      var(--eucd-navy);
    border-radius:   var(--eucd-radius);
    padding:         20px 28px;
    margin-bottom:   28px;
    box-shadow:      var(--eucd-shadow);
}

.eucd-tool-header__icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.eucd-tool-header__title {
    font-size:   1.35rem;
    font-weight: 700;
    color:       #fff;
    letter-spacing: -.02em;
}

.eucd-tool-header__sub {
    font-size: .85rem;
    color:     #94A3B8;
    margin-top: 2px;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.eucd-card {
    background:    #fff;
    border:        1px solid var(--eucd-border);
    border-radius: var(--eucd-radius);
    padding:       24px 28px;
    box-shadow:    var(--eucd-shadow-sm);
    margin-bottom: 20px;
}

.eucd-card__title {
    font-size:     .78rem;
    font-weight:   700;
    letter-spacing:.10em;
    text-transform:uppercase;
    color:         var(--eucd-blue);
    margin-bottom: 18px;
    padding-bottom:10px;
    border-bottom: 2px solid var(--eucd-blue-lt);
}

/* ── Code Selector Row ───────────────────────────────────────────────────── */
.eucd-selector-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:     16px;
}

.eucd-selector-group label {
    display:     block;
    font-size:   .78rem;
    font-weight: 600;
    color:       var(--eucd-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.eucd-select {
    width:          100%;
    padding:        9px 12px;
    border:         1.5px solid var(--eucd-border);
    border-radius:  7px;
    font-size:      .92rem;
    color:          var(--eucd-text);
    background:     #fff;
    appearance:     none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 12px center;
    cursor:         pointer;
    transition:     border-color .2s, box-shadow .2s;
}
.eucd-select:focus {
    outline:    none;
    border-color: var(--eucd-blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* ── Input Groups ─────────────────────────────────────────────────────────── */
.eucd-input-group { margin-bottom: 22px; }

.eucd-input-group-title {
    font-size:     .82rem;
    font-weight:   700;
    color:         var(--eucd-navy);
    margin-bottom: 12px;
    padding:       6px 12px;
    background:    var(--eucd-slate);
    border-left:   3px solid var(--eucd-blue);
    border-radius: 0 6px 6px 0;
}

.eucd-input-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   14px;
}

.eucd-field label {
    display:     block;
    font-size:   .78rem;
    font-weight: 600;
    color:       var(--eucd-muted);
    margin-bottom: 4px;
}

.eucd-unit { font-weight: 400; color: var(--eucd-blue); margin-left: 3px; }

.eucd-input,
.eucd-field select {
    width:        100%;
    padding:      8px 11px;
    border:       1.5px solid var(--eucd-border);
    border-radius:7px;
    font-size:    .9rem;
    color:        var(--eucd-text);
    background:   #fff;
    transition:   border-color .18s, box-shadow .18s;
}
.eucd-input:focus,
.eucd-field select:focus {
    outline:      none;
    border-color: var(--eucd-blue);
    box-shadow:   0 0 0 3px rgba(37,99,235,.13);
}

/* ── Action Buttons ──────────────────────────────────────────────────────── */
.eucd-actions {
    display:    flex;
    gap:        12px;
    flex-wrap:  wrap;
    margin-top: 6px;
}

.eucd-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           7px;
    padding:       10px 22px;
    border-radius: 8px;
    font-size:     .92rem;
    font-weight:   600;
    cursor:        pointer;
    border:        none;
    transition:    background .18s, transform .12s, box-shadow .18s;
}
.eucd-btn:active  { transform: scale(.97); }
.eucd-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

.eucd-btn--primary {
    background:  var(--eucd-blue);
    color:       #fff;
    box-shadow:  0 2px 12px rgba(37,99,235,.28);
}
.eucd-btn--primary:hover:not(:disabled) { background: #1d4ed8; box-shadow: 0 4px 16px rgba(37,99,235,.36); }

.eucd-btn--ghost {
    background:  #fff;
    color:       var(--eucd-muted);
    border:      1.5px solid var(--eucd-border);
}
.eucd-btn--ghost:hover:not(:disabled) { background: var(--eucd-slate); color: var(--eucd-navy); }

.eucd-btn--print {
    background:  var(--eucd-navy);
    color:       #fff;
}
.eucd-btn--print:hover:not(:disabled) { background: #112039; }

/* ── Loader ──────────────────────────────────────────────────────────────── */
.eucd-loader {
    position:       fixed;
    inset:          0;
    background:     rgba(255,255,255,.65);
    backdrop-filter:blur(3px);
    display:        flex;
    align-items:    center;
    justify-content:center;
    z-index:        9999;
}
.eucd-spinner {
    width:  40px; height: 40px;
    border: 4px solid var(--eucd-border);
    border-top-color: var(--eucd-blue);
    border-radius: 50%;
    animation: eucd-spin .7s linear infinite;
}
@keyframes eucd-spin { to { transform: rotate(360deg); } }

/* ── Results Panel ───────────────────────────────────────────────────────── */
.eucd-results-header {
    display:     flex;
    align-items: center;
    gap:         16px;
    margin-bottom:20px;
}

.eucd-status-badge {
    font-size:   1.25rem;
    font-weight: 800;
    padding:     6px 20px;
    border-radius: 8px;
    letter-spacing:.05em;
}
.eucd-status-badge.pass { background: #DCFCE7; color: var(--eucd-pass); border: 2px solid #86EFAC; }
.eucd-status-badge.fail { background: #FEE2E2; color: var(--eucd-fail); border: 2px solid #FCA5A5; }

#eucd-governing {
    font-size:  .9rem;
    color:      var(--eucd-muted);
    flex:       1;
}
#eucd-governing strong { color: var(--eucd-navy); }

/* ── Checks Table ────────────────────────────────────────────────────────── */
.eucd-checks-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .88rem;
}
.eucd-checks-table th {
    background:    var(--eucd-navy);
    color:         #fff;
    font-weight:   600;
    padding:       9px 14px;
    text-align:    left;
    font-size:     .78rem;
    letter-spacing:.05em;
    text-transform:uppercase;
}
.eucd-checks-table th:first-child { border-radius: 8px 0 0 0; }
.eucd-checks-table th:last-child  { border-radius: 0 8px 0 0; }

.eucd-checks-table td {
    padding:      10px 14px;
    border-bottom:1px solid var(--eucd-border);
    vertical-align:middle;
}
.eucd-checks-table tr:last-child td { border-bottom: none; }
.eucd-checks-table tr.row-pass:hover td { background: #F0FDF4; }
.eucd-checks-table tr.row-fail:hover td { background: #FFF1F2; }
.eucd-checks-table tr.row-fail td:first-child { border-left: 3px solid var(--eucd-fail); }

/* IR progress bar */
.eucd-ir-bar-wrap {
    background:    var(--eucd-slate);
    border-radius: 99px;
    height:        8px;
    min-width:     80px;
    overflow:      hidden;
}
.eucd-ir-bar {
    height:        100%;
    border-radius: 99px;
    transition:    width .5s cubic-bezier(.4,0,.2,1);
}

/* Status badges inside table */
.eucd-badge {
    display:       inline-block;
    padding:       2px 10px;
    border-radius: 99px;
    font-size:     .75rem;
    font-weight:   700;
    letter-spacing:.04em;
}
.badge-pass { background: #DCFCE7; color: var(--eucd-pass); }
.badge-fail { background: #FEE2E2; color: var(--eucd-fail); }

.text-pass { color: var(--eucd-pass); font-weight: 700; }
.text-fail { color: var(--eucd-fail); font-weight: 700; }

/* ── SVG Container ───────────────────────────────────────────────────────── */
#eucd-svg-container {
    background:    var(--eucd-slate);
    border:        1px solid var(--eucd-border);
    border-radius: var(--eucd-radius);
    padding:       12px;
    min-height:    320px;
    display:       flex;
    align-items:   center;
    justify-content:center;
}

/* ── Banners ─────────────────────────────────────────────────────────────── */
.eucd-banner {
    padding:       12px 18px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size:     .88rem;
    font-weight:   500;
}
.eucd-banner-info  { background: var(--eucd-blue-lt); color: #1d4ed8; border: 1px solid #BFDBFE; }
.eucd-banner-warn  { background: #FFFBEB;             color: #92400E; border: 1px solid #FDE68A; }
.eucd-banner-error { background: #FFF1F2;             color: #9F1239; border: 1px solid #FECDD3; }

/* ── Layout utilities ────────────────────────────────────────────────────── */
.eucd-hidden { display: none !important; }
.eucd-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 720px) {
    .eucd-two-col { grid-template-columns: 1fr; }
    .eucd-selector-row { grid-template-columns: 1fr 1fr; }
    .eucd-input-grid { grid-template-columns: 1fr 1fr; }
    .eucd-tool-header { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
    .eucd-selector-row, .eucd-input-grid { grid-template-columns: 1fr; }
}

/* Hide print report div on screen */
#eucd-print-report { display: none; }