/* ==========================================================================
   QR-STUDIO GLOBAL MASTER STYLESHEET (style.css)
   ========================================================================== */

:root {
    --primary: #0070f3;
    --dark: #1e293b;
    --gray: #eaeaea;
    --border: #cbd5e1;
    --danger: #dc2626;
    --success: #16a34a;
    --warning: #d97706;
    --bg: #fafafa;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--dark);
    line-height: 1.5;
}

/* --- SYSTEM HEADER --- */
header {
    background: white;
    border-bottom: 1px solid var(--gray);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

header h1 {
    margin: 0;
    font-size: 22px;
}

header h1 a {
    text-decoration: none;
    color: inherit;
}

.header-controls, .header-nav {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-status {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
}

.user-email {
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

/* --- NAVIGATION, TABS & INDICATORS --- */
.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--gray);
    padding-bottom: 10px;
}

.tab, .inspect-tab {
    text-decoration: none;
    color: #64748b;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    background: #e2e8f0;
    transition: all 0.15s ease;
}

.tab.active, .inspect-tab.active {
    background: var(--primary);
    color: white;
}

/* Step/Wizard Indicators (Fra poll.php) */
.step-indicators {
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px;
    border-bottom: 2px solid var(--gray);
    padding-bottom: 15px;
}

.step-dot {
    font-weight: 600;
    color: #999;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.step-dot.active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 15px;
    margin-bottom: -17px;
}

.wizard-step { display: none; }
.wizard-step.active { display: block; }

/* --- LAYOUT & CONTAINERS --- */
.container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.card, .table-container, .workspace, .work-space, .channel-group-card, .selector-card {
    background: white;
    border: 1px solid var(--gray);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.015);
    margin-bottom: 25px;
    box-sizing: border-box;
}

.workspace, .work-space {
    display: flex;
    gap: 40px;
}

.form-panel {
    flex: 1;
}

.preview-panel {
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--gray);
    padding-left: 40px;
    box-sizing: border-box;
}

/* Special Cards */
.channel-group-card { border-left: 5px solid var(--primary); }
.channel-group-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #edf2f7; padding-bottom: 10px; margin-bottom: 15px; }
.option-block { border-left: 4px solid var(--primary); padding: 15px; margin-bottom: 15px; background: #fdfdfd; border-radius: 0 6px 6px 0; border: 1px solid #eee; }

/* --- FORMS & INPUTS --- */
.form-group {
    margin-bottom: 20px;
}

.form-group label, label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--dark);
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-row .form-group {
    flex: 1;
}

input[type="text"], input[type="email"], input[type="url"], input[type="number"], select, textarea {
    width: 100%;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: inherit;
    color: #334155;
    transition: border-color 0.15s ease;
}

input[type="color"] {
    width: 100%;
    height: 43px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    box-sizing: border-box;
    cursor: pointer;
    background: #fff;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    outline: none;
    background: #f8fafc;
}

/* Color Picker Modul (Statisk / Dynamisk) */
.color-pickers { display: flex; gap: 20px; }
.color-wrapper { display: flex; align-items: center; gap: 10px; background: #f5f5f5; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); flex: 1; }
.color-wrapper input[type="color"] { border: none; background: none; width: 35px; height: 35px; cursor: pointer; padding: 0; }
.checkbox-group { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

/* --- SYSTEM-KNAPPER (ENSARTET UX) --- */
.btn, button[type="submit"], input[type="submit"] {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.btn:hover, button[type="submit"]:hover, input[type="submit"]:hover {
    opacity: 0.9;
}

.btn-danger, .btn-delete { background: var(--danger) !important; color: white !important; }
.btn-success, .btn-save { background: var(--success) !important; color: white !important; }
.btn-secondary, .btn-db-nav, .btn-nav { background: #64748b !important; color: white !important; }
.btn-warning { background: var(--warning) !important; color: white !important; }
.btn-login { background: var(--primary) !important; color: white !important; padding: 8px 16px; border-radius: 6px; font-weight: bold; text-decoration: none; }
.btn-action { 
    margin-top: 2px; 
    padding: 6px 10px !important; /* Tvinger den kompakte messe-størrelse igennem */
    font-size: 11px !important;   /* Ensretter tekststørrelsen med de andre links */
    line-height: 1.2 !important;  /* Nulstiller browserens skjulte button-højde */
}

.btn-logout { 
    background: transparent !important; 
    color: var(--danger) !important; 
    border: 1px solid var(--danger) !important; 
    padding: 6px 12px; 
    border-radius: 6px; 
    font-weight: bold; 
    text-decoration: none; 
    cursor: pointer; 
    transition: background 0.2s, color 0.2s; 
}
.btn-logout:hover { 
    background: var(--danger) !important; 
    color: white !important; 
}

.btn-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --- DATA-TABELLER (3-KOLONNE SYSTEM TIL POLLS) --- */
table, .list-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--gray);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 15px;
    margin-bottom: 25px;
    font-size: 13px;
    table-layout: fixed; /* Tvinger browseren til at overholde bredderne */
}

th, td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--gray);
    vertical-align: middle;
    box-sizing: border-box;
    word-wrap: break-word;
}

th {
    background: #f1f5f9;
    font-weight: 600;
    color: #475569;
}

.toggle-arrow {
    display: inline-block;
    width: 0; height: 0; margin-right: 8px; vertical-align: middle;
    border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #666;
    transition: transform 0.2s;
}

.open .toggle-arrow { transform: rotate(90deg); }

/* Sørg for at knap-grupper i tabeller ikke bryder linjen, men holdes pænt på ét spor */
table .btn-group {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap; 
    justify-content: flex-end;
    align-items: center;
}

/* --- ALERTS, BADGES & NOTIFIKATIONER --- */
.alert { padding: 14px; border-radius: 8px; margin-bottom: 25px; font-weight: bold; font-size: 14px; }
.alert-success { background-color: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.alert-error { background-color: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

.status-badge, .log-badge { padding: 4px 10px; border-radius: 20px; font-weight: bold; font-size: 12px; display: inline-block; }
.status-open, .badge-success { background: #e6f4ea; color: #137333; }
.status-closed, .badge-fail { background: #fce8e6; color: #c5221f; }
.badge-req { background: #fef9c3; color: #a16207; }

.badge { display: inline-block; padding: 3px 8px; font-size: 11px; font-weight: bold; border-radius: 20px; background: #e2e8f0; color: #475569; }
.badge-pk { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* --- UTILITIES & SYSTEM ELEMENTS --- */
.qr-box {
    width: 250px; height: 250px; border: 1px dashed #ccc; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; background: #fafafa;
    overflow: hidden; margin-bottom: 20px;
}
.qr-box img { width: 100%; height: 100%; object-fit: contain; }
.search-bar { width: 100%; padding: 12px; font-size: 15px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; margin-bottom: 20px; }

/* Afstemnings-statistikker (Søjler) */
.stat-row-progress { background: #f1f5f9; height: 12px; border-radius: 6px; overflow: hidden; width: 100%; max-width: 300px; margin-top: 5px; }
.stat-bar { background: var(--primary); height: 100%; width: 0%; border-radius: 6px; transition: width 0.4s; }

/* Modaler */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); justify-content: center; align-items: center; z-index: 1000; }
.modal.show { display: flex; }
.modal-content { background: white; padding: 30px; border-radius: 12px; max-width: 450px; width: 100%; box-shadow: 0 5px 20px rgba(0,0,0,0.15); position: relative; }
.close-modal { position: absolute; top: 15px; right: 20px; font-size: 24px; text-decoration: none; color: #aaa; }
.close-modal:hover { color: #333; }

.actions { display: flex; gap: 10px; }
.action-link { text-decoration: none; font-weight: 600; font-size: 13px; color: var(--primary); }
.action-link.delete { color: var(--danger); }

/* Database Explorer Specifikt */
.selector-card { padding: 20px 30px; display: flex; align-items: center; justify-content: space-between; }
.selector-card select { padding: 10px 16px; font-size: 14px; border-radius: 6px; border: 1px solid var(--border); font-weight: bold; background: #fff; width: auto; cursor: pointer; }
.table-container h3 { color: var(--primary); border-bottom: 2px solid #f1f5f9; padding-bottom: 12px; margin-top: 0; font-size: 20px; }
.table-container h4 { color: #475569; margin: 25px 0 10px 0; font-size: 15px; font-weight: 600; }
.table-container table code { font-family: monospace; color: var(--danger); font-weight: bold; }

/* ==========================================================================
   LANDING PAGE KORT (Fra index.php)
   ========================================================================== */
.landing-grid { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; width: 100%; }
.lane-card {
    flex: 1; min-width: 250px; max-width: 280px; background: white; border: 1px solid #e1e4e6; border-radius: 12px;
    padding: 35px 25px; box-sizing: border-box; text-align: center; text-decoration: none; color: inherit;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; cursor: pointer;
    display: flex; flex-direction: column; justify-content: space-between;
}
.lane-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.lane-card h3 { font-size: 22px; margin: 0 0 15px 0; color: var(--primary); }
.lane-card p { font-size: 15px; color: #555; line-height: 1.5; margin: 0; }
.lane-card.admin-card { border-left: 4px solid var(--success); }
.lane-card.admin-card h3 { color: var(--success); }

/* ==========================================================================
   LOGIN SCREEN SPECIFIC CLASSES (Fra login.php)
   ========================================================================== */
.login-body-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    padding: 20px;
    box-sizing: border-box;
}

.login-card {
    background: #ffffff;
    border: 1px solid var(--border);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    max-width: 400px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.login-card h2 {
    margin: 0 0 15px 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -0.5px;
}

.login-card p {
    line-height: 1.6;
    margin-top: 0;
}

.login-card input[type="email"],
.login-card input[type="text"] {
    width: 100%;
    padding: 13px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 15px;
    text-align: center;
    transition: all 0.15s ease;
}

.login-card input:focus {
    border-color: var(--primary);
    background: #f8fafc;
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
}

.login-card .btn {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-size: 15px;
}