/* ============================================================
   AutoDWG API Portal - shared theme
   English only. Free system fonts (Segoe UI / Helvetica / Arial).
   Dark accent palette consistent with the Swagger UI theme.
   ============================================================ */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #1a2b45;
    background: #eef1f5;
}

a {
    color: #1f6feb;
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* ---------- Top bar ---------- */
.topbar {
    background: #0f1b2d;
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .topbar .wrapper {
        display: flex;
        width: 100%;
        max-width: 1460px;
        align-content: center;
        justify-content: space-between;
        align-items: center;
    }

    .topbar .brand {
        font-size: 18px;
        font-weight: 700;
        color: #fff;
    }

        .topbar .brand:hover {
            text-decoration: none;
        }

    .topbar .links a {
        color: #cdd6e4;
        margin-left: 18px;
        font-size: 13px;
    }

        .topbar .links a:hover {
            color: #fff;
        }

/* ---------- Centered auth card ---------- */
.auth-wrap {
    display: flex;
    justify-content: center;
    padding: 60px 16px;
}

.card {
    background: #fff;
    border: 1px solid #d5dae1;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(15, 27, 45, 0.08);
    padding: 32px;
    width: 100%;
    max-width: 420px;
}

    .card h1 {
        margin: 0 0 4px;
        font-size: 22px;
        color: #0f1b2d;
    }

    .card .subtitle {
        margin: 0 0 22px;
        color: #5a6a80;
        font-size: 13px;
    }

/* ---------- Form ---------- */
.field {
    margin-bottom: 16px;
}

    .field label {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
        color: #1a2b45;
    }

    .field input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #b0b8c4;
        border-radius: 6px;
        font-family: inherit;
        font-size: 14px;
        color: #1a2b45;
        background: #fff;
    }

        .field input:focus {
            outline: none;
            border-color: #1f6feb;
            box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.15);
        }

.btn {
    display: inline-block;
    width: 100%;
    padding: 11px 16px;
    border: none;
    border-radius: 6px;
    background: #1f6feb;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

    .btn:hover {
        background: #1a5fd0;
    }

    .btn:disabled {
        background: #9bb6e8;
        cursor: not-allowed;
    }

.form-footer {
    margin-top: 18px;
    text-align: center;
    color: #5a6a80;
    font-size: 13px;
}

/* ---------- Alerts ---------- */
.alert {
    display: none;
    margin-bottom: 18px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
}

    .alert.error {
        display: block;
        background: #fbe3e3;
        border: 1px solid #e0a0a0;
        color: #a11a1a;
    }

    .alert.success {
        display: block;
        background: #d4edda;
        border: 1px solid #6bc49a;
        color: #1a6b45;
    }

/* ---------- Dashboard ---------- */
.dash-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 16px 64px;
}

    .dash-wrap h1 {
        color: #0f1b2d;
        font-size: 24px;
        margin: 0 0 4px;
    }

    .dash-wrap .muted {
        color: #5a6a80;
        margin: 0 0 24px;
    }

.panel {
    background: #fff;
    border: 1px solid #d5dae1;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(15, 27, 45, 0.06);
    padding: 24px;
    margin-bottom: 20px;
}

    .panel h2 {
        margin: 0 0 16px;
        font-size: 16px;
        color: #0f1b2d;
    }

.plan-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    background: #0f1b2d;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* Quota progress */
.quota-numbers {
    display: flex;
    justify-content: space-between;
    margin: 4px 0 8px;
    font-size: 13px;
    color: #1a2b45;
}

.progress {
    height: 12px;
    background: #e2e6ec;
    border-radius: 8px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: #2f9e6b;
    border-radius: 8px;
    transition: width 0.3s ease;
}

    .progress-bar.warn {
        background: #d9822b;
    }

    .progress-bar.full {
        background: #c0392b;
    }

/* Info grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 24px;
    margin-top: 16px;
}

    .info-grid .item .k {
        font-size: 12px;
        color: #5a6a80;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .info-grid .item .v {
        font-size: 15px;
        color: #1a2b45;
        font-weight: 600;
    }

/* API key row */
.apikey-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

    .apikey-row code {
        flex: 1;
        padding: 10px 12px;
        background: #f2f4f8;
        border: 1px solid #d5dae1;
        border-radius: 6px;
        color: #1a2b45;
        font-family: "Segoe UI", Helvetica, Arial, sans-serif;
        font-size: 13px;
        word-break: break-all;
    }

.btn-secondary {
    padding: 8px 16px;
    border: 1px solid #b0b8c4;
    border-radius: 6px;
    background: #fff;
    color: #1a2b45;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-secondary:hover {
        background: #f2f4f8;
    }

.loading {
    text-align: center;
    color: #5a6a80;
    padding: 40px 0;
}

/* Usage detail table */
.usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .usage-table th,
    .usage-table td {
        text-align: left;
        padding: 8px 10px;
        border-bottom: 1px solid #e3e8ef;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 220px;
    }

    .usage-table th {
        color: #5a6a80;
        font-weight: 600;
        border-bottom: 2px solid #d7dee8;
    }

    .usage-table tbody tr:hover {
        background: #f7f9fc;
    }