/* =========================
   PASSWORD OUTPUT
========================= */

.password-output {
    display:flex;
    gap:10px;
    margin-top:15px;
}

.password-output input {
    flex:1;
    padding:14px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);
    background:#111;
    color:#fff;
    font-size:15px;
    outline:none;
}

/* =========================
   SETTINGS
========================= */

.settings-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:15px;
}

.setting-card {
    background:#111;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:12px;
}

.setting-card h3 {
    margin-bottom:10px;
    font-size:14px;
}

.setting-card label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    padding: 6px 8px;
    border-radius: 8px;

    font-size: 14px;
    cursor: pointer;

    user-select: none;
}

/* Align checkboxes perfectly */
.setting-card input[type="checkbox"] {
    width: 16px;
    height: 16px;

    margin: 0;
    accent-color: #4f46e5;
}

/* Optional hover effect (makes it feel premium) */
.setting-card label:hover {
    background: rgba(255, 255, 255, 0.04);
}

.range-box {
    margin-top:10px;
}

.range-box input {
    width:100%;
}

/* =========================
   STRENGTH
========================= */

.strength-box {
    margin-top:15px;
}

.strength-bar {
    width:100%;
    height:10px;
    border-radius:999px;
    background:#111;
    overflow:hidden;
}

.strength-fill {
    width:0%;
    height:100%;
    transition:0.25s ease;
}

.strength-meta {
    display:flex;
    justify-content:space-between;
    margin-top:8px;
    font-size:13px;
}

/* =========================
   ANALYTICS
========================= */

.analytics-box {
    margin-top:15px;
    padding:14px;
    border-radius:12px;
    background:#111;
    border:1px solid rgba(255,255,255,0.08);
    font-size:13px;
    line-height:1.8;
}

/* =========================
   BULK TABLE
========================= */

.table-wrapper {
    overflow:auto;
    margin-top:15px;
}

table {
    width:100%;
    border-collapse:collapse;
}

th,
td {
    padding:10px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    text-align:left;
    font-size:13px;
}

th {
    background:#111;
}

/* =========================
   HISTORY
========================= */

.history-list {
    margin-top:15px;
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:400px;
    overflow:auto;
}

.history-item {
    padding:10px;
    border-radius:10px;
    background:#111;
    border:1px solid rgba(255,255,255,0.08);
    font-family:monospace;
    font-size:13px;
    word-break:break-all;
}

/* =========================
   MODE BUTTONS
========================= */

.mode-buttons {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:15px;
}

.mode-btn {
    padding:10px 12px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    background:#1f1f1f;
    color:#fff;
}

.mode-btn.active {
    background:#4f46e5;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){

    .settings-grid{
        grid-template-columns:1fr;
    }

}

.bulk-table-wrapper {
    display: flex;
    flex-direction: column;

    height: 420px;        /* fixed height = required */
    min-height: 420px;    /* prevents flex stretching bugs */

    overflow: hidden;     /* important: isolate scroll area */

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: #111;
}

/* Keep table clean */
#bulkTable {
    width: 100%;
    border-collapse: collapse;
    color: #e5e7eb;
    font-size: 13px;
    table-layout: fixed;   /* IMPORTANT FIX */
}

.bulk-table-wrapper,
#bulkTable {
    min-height: 0;   /* CRITICAL for flex layouts */
}

/* HEADER stays fixed */
#bulkTable thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* BODY becomes scrollable */
#bulkTable tbody {
    display: block;
    overflow-y: auto;
    height: 360px;   /* this creates internal scroll */
}

/* rows must behave like table rows again */
#bulkTable tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Sticky header */
#bulkTable thead th {
    position: sticky;
    top: 0;

    background: #111;
    z-index: 2;

    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 10px;
}

/* Body cells */
#bulkTable td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Scrollbar styling (optional but nice) */
.bulk-table-wrapper::-webkit-scrollbar {
    width: 8px;
}

.bulk-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
}

.bulk-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25);
}