/* ─── Shell layout (sidebar + content) ─────────────────────────────────────── */
.admin-shell {
    display: flex;
    min-height: 100vh;
    background: var(--color-gray-50);
}
.admin-body {
    display: flex;
    flex: 1;
    min-height: 100vh;
}

/* ─── Sidebar ───────────────────────────────────────────────────────────────── */
.admin-sidebar {
    width: 248px;
    flex-shrink: 0;
    background: var(--color-white);
    border-right: 1px solid var(--color-gray-200);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.1rem 1.1rem .9rem;
    font-weight: 800;
    font-size: 1rem;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-gray-100);
}

.sidebar-new-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem .75rem .4rem;
    padding: .55rem .9rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background var(--transition);
}
.sidebar-new-btn:hover { background: var(--color-primary-h); }

.sidebar-nav {
    flex: 1;
    padding: .4rem .5rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    overflow-y: auto;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    color: var(--color-gray-700);
    text-decoration: none !important;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-item:hover { background: var(--color-gray-100); }
.sidebar-item--active {
    background: #EEF2FF;
    color: var(--color-primary);
    font-weight: 600;
}

.sidebar-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sidebar-dot--on  { background: var(--color-success); }
.sidebar-dot--off { background: var(--color-gray-300); }

.sidebar-item-label { overflow: hidden; text-overflow: ellipsis; }

.sidebar-empty {
    padding: .75rem;
    font-size: .82rem;
    color: var(--color-gray-400);
    text-align: center;
}

.sidebar-footer {
    padding: .75rem;
    border-top: 1px solid var(--color-gray-100);
}
.sidebar-logout {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .85rem;
    color: var(--color-gray-500);
    text-decoration: none !important;
    transition: background var(--transition), color var(--transition);
}
.sidebar-logout:hover { background: var(--color-gray-100); color: var(--color-gray-700); }

/* ─── Main content area ─────────────────────────────────────────────────────── */
.admin-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
}

/* ─── Tabs bar ──────────────────────────────────────────────────────────────── */
.admin-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--color-gray-200);
    background: var(--color-white);
    padding: 0 1.75rem;
    position: sticky;
    top: 0;
    z-index: 10;
}
.admin-tabs {
    display: flex;
    align-items: stretch;
    gap: .15rem;
}
.admin-tab {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .85rem 1.1rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap;
}
.admin-tab:hover { color: var(--color-primary); }
.admin-tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.admin-tabs-actions { display: flex; align-items: center; gap: .5rem; }

/* ─── Content body ──────────────────────────────────────────────────────────── */
.admin-content-body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 900px;
}
.content-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: -.5rem;
}

/* ─── Welcome screen ────────────────────────────────────────────────────────── */
.admin-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 1rem;
}
.welcome-icon { font-size: 3.5rem; line-height: 1; }
.admin-welcome h2 { font-size: 1.4rem; color: var(--color-gray-900); }
.admin-welcome p  { color: var(--color-gray-500); max-width: 340px; }

/* ─── Login ────────────────────────────────────────────────────────────────── */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-container { width: 100%; max-width: 400px; padding: 1.5rem; }
.login-box {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    display: flex; flex-direction: column; gap: 1.25rem;
    box-shadow: var(--shadow);
}
.login-box h1 { font-size: 1.5rem; text-align: center; color: var(--color-primary); }
.login-box h2 { font-size: 1.1rem; text-align: center; color: var(--color-gray-700); font-weight: 600; }

/* ─── survey-new form ───────────────────────────────────────────────────────── */
.new-survey-wrap { padding: 1.75rem; max-width: 640px; display: flex; flex-direction: column; gap: 1.25rem; }
.new-survey-wrap h2 { font-size: 1.3rem; font-weight: 700; }

/* ─── Editor sections ───────────────────────────────────────────────────────── */
.editor-section {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    padding: 1.4rem;
    box-shadow: var(--shadow-sm);
}
.section-title { font-size: 1rem; font-weight: 700; color: var(--color-gray-800); margin-bottom: 1rem; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.section-header .section-title { margin-bottom: 0; }
.form-inline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-inline-grid .form-group:nth-child(-n+3) { grid-column: 1 / -1; }
.share-link-row { display: flex; gap: .5rem; }
.share-link-row input { flex: 1; }

/* ─── Question cards ────────────────────────────────────────────────────────── */
.questions-list { display: flex; flex-direction: column; gap: .6rem; }
.question-card {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    background: var(--color-gray-50);
    overflow: hidden;
    transition: box-shadow var(--transition);
}
.question-card:hover { box-shadow: var(--shadow-sm); }
.question-card.sortable-ghost { opacity: .4; }
.question-card.sortable-chosen { box-shadow: var(--shadow); }
.question-card-header {
    display: flex; align-items: center; gap: .65rem;
    padding: .65rem 1rem;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
}
.drag-handle {
    color: var(--color-gray-400); cursor: grab;
    font-size: 1.1rem; user-select: none; flex-shrink: 0;
}
.drag-handle:active { cursor: grabbing; }
.question-number { font-size: .78rem; font-weight: 700; color: var(--color-gray-400); flex-shrink: 0; min-width: 20px; }
.question-type-badge {
    background: var(--color-primary); color: #fff;
    font-size: .7rem; font-weight: 700;
    padding: .15em .5em; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .04em;
}
.question-card-actions { margin-left: auto; display: flex; gap: .35rem; }
.question-preview { padding: .55rem 1rem; font-size: .9rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.question-edit-form { padding: 1rem; border-top: 1px solid var(--color-gray-200); display: flex; flex-direction: column; gap: .85rem; }
.empty-state-inline { color: var(--color-gray-400); font-size: .88rem; text-align: center; padding: 1.5rem; }

/* ─── Options ───────────────────────────────────────────────────────────────── */
.q-options-section { display: flex; flex-direction: column; gap: .45rem; }
.q-options-section > label { font-size: .83rem; font-weight: 600; color: var(--color-gray-600); }
.q-options-list { display: flex; flex-direction: column; gap: .35rem; }
.option-row { display: flex; align-items: center; gap: .45rem; }
.option-row .opt-text { flex: 1; }
.option-row .opt-jump { flex: 1.4; font-size: .82rem; }

/* ─── Statistics ────────────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .85rem; }
@media (max-width: 800px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    padding: 1.1rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.stat-value { font-size: 1.9rem; font-weight: 800; }
.stat-label { font-size: .72rem; color: var(--color-gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-top: .15rem; }
.stat-card--total     .stat-value { color: var(--color-gray-900); }
.stat-card--completed .stat-value { color: var(--color-success); }
.stat-card--progress  .stat-value { color: var(--color-primary); }
.stat-card--abandoned .stat-value { color: var(--color-warning); }
.stat-card--timeout   .stat-value { color: var(--color-danger); }

.completion-rate-bar {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
    box-shadow: var(--shadow-sm);
}
.completion-rate-label { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: .5rem; color: var(--color-gray-600); }
.completion-rate-label strong { color: var(--color-primary); font-size: 1rem; }
.completion-rate-track { height: 10px; background: var(--color-gray-100); border-radius: 999px; overflow: hidden; }
.completion-rate-fill  { height: 100%; background: var(--color-primary); border-radius: 999px; transition: width .6s ease; }

.results-section {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    padding: 1.4rem;
    box-shadow: var(--shadow-sm);
}
.results-section h3 { font-size: .95rem; margin-bottom: 1rem; color: var(--color-gray-700); display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.chart-container { max-width: 480px; }

.dropoff-list { display: flex; flex-direction: column; gap: .55rem; }
.dropoff-row  { display: flex; align-items: center; gap: .6rem; }
.dropoff-num  { min-width: 22px; font-size: .78rem; font-weight: 700; color: var(--color-gray-400); text-align: right; flex-shrink: 0; }
.dropoff-text { min-width: 160px; max-width: 260px; font-size: .83rem; color: var(--color-gray-700); }
.dropoff-bar-wrap { flex: 1; height: 14px; background: var(--color-gray-100); border-radius: 999px; overflow: hidden; }
.dropoff-bar  { height: 100%; background: var(--color-primary); border-radius: 999px; transition: width .5s ease; }
.dropoff-count { min-width: 32px; text-align: right; font-size: .83rem; font-weight: 700; color: var(--color-gray-500); flex-shrink: 0; }

.data-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.data-table th { background: var(--color-gray-50); padding: .55rem .75rem; text-align: left; font-weight: 600; border-bottom: 2px solid var(--color-gray-200); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-gray-500); }
.data-table td { padding: .5rem .75rem; border-bottom: 1px solid var(--color-gray-100); vertical-align: top; }
.data-table tr:last-child td { border-bottom: none; }
.td-date { white-space: nowrap; color: var(--color-gray-400); font-size: .8rem; }
.td-question { color: var(--color-gray-500); font-size: .83rem; }

/* ─── Export cards ──────────────────────────────────────────────────────────── */
.export-cards { display: flex; flex-direction: column; gap: 1rem; }
.export-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    padding: 1.4rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}
.export-card:hover { box-shadow: var(--shadow); }
.export-card-icon {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
}
.export-icon--all       { background: #EEF2FF; color: var(--color-primary); }
.export-icon--completed { background: #F0FDF4; color: var(--color-success); }
.export-icon--partial   { background: #FFFBEB; color: var(--color-warning); }
.export-card-body { flex: 1; }
.export-card-body h3 { font-size: 1rem; font-weight: 700; margin-bottom: .2rem; }
.export-card-body p  { font-size: .85rem; color: var(--color-gray-500); margin-bottom: .5rem; }
.export-count { display: flex; gap: .4rem; }
.export-card-action { flex-shrink: 0; }
.export-note {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    padding: .85rem 1.1rem;
    font-size: .83rem;
    color: var(--color-gray-600);
    line-height: 1.6;
}
.export-note strong { color: var(--color-gray-700); }

/* ─── Misc ───────────────────────────────────────────────────────────────────── */
.save-status { font-size: .82rem; color: var(--color-success); opacity: 0; transition: opacity .4s; }
.save-status.visible { opacity: 1; }
.save-status.error { color: var(--color-danger); }