/* ---- Card ---- */
.calc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 16px;
}
.site-tab-panel > .calc-card:first-child,
.site-tab-panel > .calc-form { margin-top: 0; }

/* ---- Clear button ---- */
.calc-clear {
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 500;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.calc-clear:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

/* ---- IP Calc form card ---- */
.ipc-form-card {
    margin-top: 16px;
    padding: 20px 24px;
}

.ipc-form-inner {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ipc-form-btns {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding-top: 22px; /* align with inputs which have labels above */
}

/* ---- Form inputs ---- */
.calc-form { margin-top: 16px; }

.calc-inputs {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.calc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calc-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.calc-ip-input {
    width: 180px;
    transition: border-color 0.15s;
}
.calc-ip-input:focus { }

.calc-mask-select {
    cursor: pointer;
    min-width: 185px;
    transition: border-color 0.15s;
}
.calc-mask-select:focus { }

.calc-submit {
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 500;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.calc-submit:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

/* ---- IP Calculator result table ---- */
.calc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.calc-table th {
    text-align: left;
    padding: 10px 16px;
    border-bottom: 2px solid var(--border);
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}
.calc-table td {
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.calc-table tr:last-child td { border-bottom: none; }
.calc-table tr:nth-child(even) td {
    background: color-mix(in srgb, var(--surface) 50%, var(--bg) 50%);
}

.calc-name  { color: var(--text); font-weight: 500; white-space: nowrap; }
.calc-val   { color: var(--accent); }
.hex-col    { color: #ef4444; }
.bin-col    { color: #22c55e; }
[data-theme="light"] .hex-col { color: #dc2626; }
[data-theme="light"] .bin-col { color: #16a34a; }
.mono { font-family: var(--font-mono, monospace); }

/* ---- Subnet Calculator — request table ---- */
.sub-req-card { margin-top: 16px; }

.sub-req-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.sub-req-table th {
    text-align: left;
    padding: 9px 14px;
    border-bottom: 2px solid var(--border);
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}
.sub-req-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.sub-req-table tr:last-child td { border-bottom: none; }

.sub-req-n { color: var(--text-muted); text-align: right; font-size: 13px; width: 28px; }

.sub-req-count {
    width: 70px;
    padding: 6px 10px;
    font-size: 14px;
    font-family: var(--font-mono, monospace);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}
.sub-req-count:focus { }
.sub-req-count::-webkit-outer-spin-button,
.sub-req-count::-webkit-inner-spin-button { -webkit-appearance: none; }

.sub-req-size {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 160px;
}

.sub-req-del {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px !important;
    font-weight: 400 !important;
    width: 28px !important; height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    transition: color 0.15s, border-color 0.15s;
}
.sub-req-del:hover { color: #ef4444 !important; border-color: #ef4444 !important; }

.sub-req-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
}

.sub-add-btn {
    border-style: dashed !important;
    color: var(--accent) !important;
}
.sub-add-btn:hover {
    border-color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
    color: var(--accent) !important;
}

/* ---- Subnet Calculator — allocation result ---- */
.sub-alloc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sub-alloc-table th {
    text-align: left;
    padding: 9px 14px;
    border-bottom: 2px solid var(--border);
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}
.sub-alloc-table td {
    padding: 7px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.sub-alloc-table tr:last-child td { border-bottom: none; }

/* Subnet rows */
.sub-row-subnet td { background: transparent; }
.sub-row-subnet:nth-child(odd) td {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* Gap rows */
.sub-row-gap td {
    background: color-mix(in srgb, #f59e0b 8%, transparent);
}
.sub-row-gap .sub-type-label { color: #f59e0b; font-style: italic; }

/* Free rows */
.sub-row-free td {
    background: color-mix(in srgb, #22c55e 6%, transparent);
}
.sub-row-free .sub-type-label { color: #22c55e; }

.sub-type-label { font-weight: 500; white-space: nowrap; }
.sub-scalar     { color: var(--text-muted); }

.subnet-note {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    font-family: var(--font-mono, monospace);
}

/* ---- Error ---- */
.calc-error-inline {
    margin-top: 10px;
    padding: 9px 14px;
    background: color-mix(in srgb, #ef4444 12%, transparent);
    border: 1px solid color-mix(in srgb, #ef4444 35%, transparent);
    border-radius: var(--radius);
    color: #ef4444;
    font-size: 14px;
}


/* ---- Space Map modal ---- */
.smap-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 500;
    padding: 32px 16px;
    overflow-y: auto;
}

.smap-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: min(1060px, 100%);
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-in 0.18s ease;
}

.smap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.smap-title {
    font-size: 15px;
    font-weight: 600;
}

.smap-close {
    background: none;
    border: none !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px !important;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s;
}
.smap-close:hover { color: var(--text) !important; border-color: transparent !important; }

.smap-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.smap-legend {
    display: flex;
    gap: 18px;
    padding: 10px 18px;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 60%, var(--bg) 40%);
}

.smap-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
}

.smap-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
.smap-dot--free    { background: color-mix(in srgb, #22c55e 55%, transparent); }
.smap-dot--used    { background: color-mix(in srgb, #ef4444 55%, transparent); }
.smap-dot--partial { background: color-mix(in srgb, #f59e0b 55%, transparent); }

.smap-body {
    padding: 14px 18px 18px;
}

.smap-group {
    margin-bottom: 18px;
}
.smap-group:last-child { margin-bottom: 0; }

.smap-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.smap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.smap-chip {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: var(--font-mono, monospace);
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.5;
}

.smap-chip--free {
    background: color-mix(in srgb, #22c55e 12%, transparent);
    border-color: color-mix(in srgb, #22c55e 35%, transparent);
    color: #22c55e;
}
.smap-chip--used {
    background: color-mix(in srgb, #ef4444 14%, transparent);
    border-color: color-mix(in srgb, #ef4444 40%, transparent);
    color: #ef4444;
}
.smap-chip--partial {
    background: color-mix(in srgb, #f59e0b 13%, transparent);
    border-color: color-mix(in srgb, #f59e0b 38%, transparent);
    color: #f59e0b;
}

[data-theme="light"] .smap-chip--free    { color: #16a34a; }
[data-theme="light"] .smap-chip--used    { color: #dc2626; }
[data-theme="light"] .smap-chip--partial { color: #d97706; }

/* ---- Responsive ---- */
@media (max-width: 700px) {

    /* Tabs: equal width */
    .calc-tabs { gap: 0; }
    .calc-tab-btn { flex: 1; padding: 8px 6px; font-size: 13px; text-align: center; white-space: nowrap; }

    /* ---- Tab 1: IP Calculator form ---- */
    .ipc-form-card { padding: 14px 16px; }
    .ipc-form-inner { flex-direction: column; align-items: stretch; gap: 10px; }
    .ipc-form-inner .calc-ip-input,
    .ipc-form-inner .calc-mask-select { width: 100%; min-width: unset; }
    .ipc-form-btns { padding-top: 0; width: 100%; }
    .ipc-form-btns .calc-submit,
    .ipc-form-btns .calc-clear { flex: 1; text-align: center; }

    /* ---- Tab 1: Result table — flex card layout ---- */
    #ipc-result .calc-card { overflow-x: visible; }
    #ipc-result .calc-table,
    #ipc-result .calc-table thead,
    #ipc-result .calc-table tbody { display: block; }
    #ipc-result .calc-table thead { display: none; }
    #ipc-result .calc-table tr {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 7px 14px;
        border-bottom: 1px solid var(--border);
    }
    #ipc-result .calc-table tr:last-child { border-bottom: none; }
    #ipc-result .calc-table td { padding: 0; border: none; font-size: 13px; }
    #ipc-result .calc-table .calc-name { flex: 0 0 90px; color: var(--text-muted); font-weight: 500; }
    #ipc-result .calc-table .calc-val  { flex: 1; word-break: break-all; }
    #ipc-result .calc-table .hex-col,
    #ipc-result .calc-table .bin-col   { display: none; }

    /* ---- Tab 2: Source network input (override inline width) ---- */
    #sub-src { width: 100% !important; min-width: unset; }
    .calc-inputs { flex-direction: column; align-items: stretch; }
    .calc-ip-input, .calc-mask-select { width: 100%; min-width: unset; }

    /* ---- Tab 2: Subnet request table → card layout ---- */
    .sub-req-table thead { display: none; }
    .sub-req-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 6px 8px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
    }
    .sub-req-table tbody td { padding: 0; border: none; }
    /* hide # and size cells */
    .sub-req-n   { display: none; }
    .sub-req-size { display: none; }
    /* mask select: col 1, row 1 */
    .sub-req-table tbody tr > td:nth-child(2) { grid-column: 1; grid-row: 1; }
    /* start select: col 1, row 2 */
    .sub-req-table tbody tr > td:nth-child(3) { grid-column: 1; grid-row: 2; }
    /* count input: col 2, row 1 */
    .sub-req-table tbody tr > td:nth-child(4) { grid-column: 2; grid-row: 1; align-self: center; }
    /* delete btn: col 2, row 2 */
    .sub-req-table tbody tr > td:nth-child(6) { grid-column: 2; grid-row: 2; display: flex; align-items: center; }
    /* selects fill their cell */
    .sub-req-table .calc-mask-select { width: 100%; min-width: 0; }
    .sub-req-count { width: 58px; }

    /* ---- Tab 2: Footer buttons ---- */
    .sub-req-footer { flex-wrap: wrap; gap: 8px; }
    .sub-add-btn { flex: 0 0 100%; }
    /* Calculate + Clear share first row; Space Map gets own full-width row */
    #sub-calc-btn, #sub-clear-btn { flex: 1; min-width: 0; font-size: 13px; padding: 9px 6px; text-align: center; }
    #sub-map-btn { flex: 0 0 100%; font-size: 13px; padding: 9px 6px; text-align: center; }

    /* ---- Tab 2: Allocation result — card layout ---- */
    #sub-result .calc-card { overflow-x: visible; }
    .sub-alloc-table { width: 100%; }
    /* Hide table header */
    .sub-alloc-table thead { display: none; }
    /* Each row becomes a card */
    .sub-alloc-table tbody tr {
        display: grid;
        gap: 2px 8px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
    }
    .sub-alloc-table tbody td { padding: 0; border: none; white-space: normal; }

    /* Subnet rows: [type | CIDR | ×] / [Min … | Max …] / [Bcast … | Hosts … | Size …] */
    .sub-row-subnet {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto auto;
    }
    .sub-row-subnet > td:nth-child(1) { grid-column: 1;   grid-row: 1; font-size: 13px; }
    .sub-row-subnet > td:nth-child(2) { grid-column: 2;   grid-row: 1; font-size: 13px; }
    .sub-row-subnet > td:nth-child(3) { grid-column: 1/3; grid-row: 2; font-size: 12px; }
    .sub-row-subnet > td:nth-child(4) { grid-column: 1/3; grid-row: 3; font-size: 12px; }
    .sub-row-subnet > td:nth-child(5) { grid-column: 1/3; grid-row: 4; font-size: 12px; }
    .sub-row-subnet > td:nth-child(6) { grid-column: 1;   grid-row: 5; font-size: 12px; }
    .sub-row-subnet > td:nth-child(7) { grid-column: 2;   grid-row: 5; font-size: 12px; }
    .sub-row-subnet > td:nth-child(8) { grid-column: 3;   grid-row: 1; }

    /* Labels for detail rows */
    .sub-row-subnet > td:nth-child(3)::before { content: 'Min: '; color: var(--text-muted); }
    .sub-row-subnet > td:nth-child(4)::before { content: 'Max: '; color: var(--text-muted); }
    .sub-row-subnet > td:nth-child(5)::before { content: 'Bcast: '; color: var(--text-muted); }
    .sub-row-subnet > td:nth-child(6)::before { content: 'Hosts: '; color: var(--text-muted); }
    .sub-row-subnet > td:nth-child(7)::before { content: 'Size: '; color: var(--text-muted); }

    /* Gap / Free rows: [type | range | size] */
    .sub-row-gap, .sub-row-free {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto;
    }
    .sub-row-gap > td:nth-child(1),
    .sub-row-free > td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: 13px; }
    .sub-row-gap > td:nth-child(2),
    .sub-row-free > td:nth-child(2) { grid-column: 2; grid-row: 1; font-size: 12px; word-break: break-all; }
    .sub-row-gap > td:nth-child(3),
    .sub-row-free > td:nth-child(3) { grid-column: 3; grid-row: 1; font-size: 12px; }
    .sub-row-gap > td:nth-child(4),
    .sub-row-free > td:nth-child(4) { display: none; }

    /* ---- Space Map: smaller chips ---- */
    .smap-chip { font-size: 11px; padding: 2px 6px; }
}