/* Database hosting page (pages/database-hosting.html). Everything else on the
   page comes from chapter.css and the bot page's panel replicas in
   bot-hosting.css; this file adds the panel pieces the bot page has no replica
   of: the Databases page's table and usage bar, its sheet fields and type
   picker, and the Network page's proxy card, with sizes and colours taken from
   nextclient's databases, SheetModal and subdomains styles. */

/* Databases and backups tables */
.dp-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/* The rows share the table's columns, so each column is as wide as its
   widest cell, as in the panel's table */
.dp-table {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, auto);
    gap: 12px 16px;
}

.dp-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.dp-row.is-head {
    margin-bottom: -4px;
    padding-block: 0;
    background: none;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.68);
}

.dp-name {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.dp-name b {
    overflow: hidden;
    font-size: 15.2px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.95);
}

.dp-name .bh-tile {
    border-radius: 6px;
}

.dp-name .bh-chip {
    border-radius: 4px;
}

/* A neutral icon tile, as the backup rows and the sheet's options draw it */
.dp-muted {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(226, 232, 240, 0.9);
}

.dp-badge {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 13px;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.75);
}

.dp-badge i {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.68);
}

.dp-actions {
    display: flex;
    gap: 4px;
}

.dp-usage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    font-size: 12.8px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.68);
}

.dp-meter {
    width: 140px;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
}

.dp-meter span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.7), #3b82f6);
}

/* Sheet fields: a label over an input row with a Copy button */
.dp-field {
    display: grid;
    gap: 7px;
}

.dp-field > span:first-child {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.dp-field em {
    margin-left: auto;
    padding: 5px 11px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 12.5px;
    font-style: normal;
    color: rgba(255, 255, 255, 0.85);
}

/* The Create New Database sheet */
.dp-sheet {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
    padding: 22px;
    background: #141421;
}

.dp-sheet-head {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

.dp-sheet-head .bh-tile {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 16px;
}

.dp-sheet > .bh-pbtn {
    min-height: 46px;
    font-size: 14.5px;
}

.dp-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.dp-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.dp-option .bh-tile {
    width: 32px;
    height: 32px;
}

.dp-option.is-active {
    background: rgba(59, 130, 246, 0.18);
}

.dp-option.is-active .bh-tile {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

/* Network › Internal network: the internal-only switch under the address */
.dp-only {
    margin-top: 12px;
}

/* Network › Reverse proxy card */
.dp-proxy {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.dp-proxy + .dp-proxy {
    margin-top: 12px;
}

.dp-proxy-main {
    flex: 1;
    min-width: 0;
}

.dp-proxy-main b {
    display: block;
    overflow: hidden;
    font-size: 15.2px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.95);
}

.dp-proxy-main small {
    display: block;
    margin-top: 2px;
    font-size: 12.8px;
    color: rgba(255, 255, 255, 0.72);
}

.dp-proxy-main > span {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.dp-proxy .bh-chip {
    gap: 5px;
}

@media (max-width: 767.98px) {
    /* The hero's three options stay on one line */
    .dp-kinds button {
        padding: 0 9px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* On a phone the Databases page swaps its tabs for a bottom bar */
    .dp-tabs {
        display: none;
    }

    /* The tables become cards, as the panel shows them on a phone */
    .dp-table {
        grid-template-columns: minmax(0, 1fr);
    }

    .dp-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 14px;
    }

    .dp-row.is-head,
    .dp-actions {
        display: none;
    }

    .dp-name {
        grid-column: 1 / -1;
    }
}