Fixed the edge tabs overhang

2026-05-08 21:09:06 +02:00
parent ae2e631cc7
commit feac4235b2
10 changed files with 393 additions and 36 deletions
--- a/styles/main.css
+++ b/styles/main.css
@@ -1198,6 +1198,143 @@ input[type="checkbox"]:focus {
    }
 }

+/* ── Copper Sheet Order Calculator ─────────────────────────────────────── */
+
+.order-header {
+    font-size: 0.72em;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: #64748b;
+    padding: 4px 0 10px;
+    margin-top: 4px;
+}
+
+.order-placeholder {
+    font-size: 0.85em;
+    color: #475569;
+    padding: 4px 0 8px;
+}
+
+.order-summary {
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(100, 149, 237, 0.1);
+    border-radius: 8px;
+    padding: 10px 12px;
+    margin-bottom: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.order-summary-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 8px;
+    font-size: 0.85em;
+}
+
+.order-label {
+    color: #64748b;
+    white-space: nowrap;
+}
+
+.order-value {
+    color: #e2e8f0;
+    font-weight: 600;
+    text-align: right;
+}
+
+.order-muted {
+    color: #64748b;
+    font-weight: 400;
+    font-size: 0.9em;
+}
+
+.order-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.83em;
+    margin-bottom: 4px;
+}
+
+.order-table th {
+    text-align: left;
+    padding: 5px 8px;
+    color: #64748b;
+    font-weight: 600;
+    font-size: 0.9em;
+    border-bottom: 1px solid rgba(100, 149, 237, 0.15);
+    white-space: nowrap;
+}
+
+.order-table td {
+    padding: 5px 8px;
+    color: #cbd5e1;
+    border-bottom: 1px solid rgba(100, 149, 237, 0.06);
+    white-space: nowrap;
+}
+
+.order-table tr:last-child td {
+    border-bottom: none;
+}
+
+.order-row-nofit td {
+    color: #334155;
+}
+
+.order-row-best td {
+    color: #fff;
+    font-weight: 600;
+}
+
+.order-row-best td:last-child {
+    color: #6ee7b7;
+}
+
+.order-table tr:not(.order-row-nofit):not(.order-row-best):hover td {
+    background: rgba(100, 149, 237, 0.07);
+    color: #e2e8f0;
+}
+
+.order-warning {
+    display: flex;
+    align-items: flex-start;
+    gap: 7px;
+    font-size: 0.82em;
+    color: #fbbf24;
+    background: rgba(251, 191, 36, 0.08);
+    border: 1px solid rgba(251, 191, 36, 0.25);
+    border-radius: 6px;
+    padding: 7px 10px;
+    margin-bottom: 8px;
+    line-height: 1.4;
+}
+
+.order-warning strong {
+    color: #fde68a;
+}
+
+.order-busbar-sizes {
+    background: rgba(0, 0, 0, 0.15);
+    border: 1px solid rgba(100, 149, 237, 0.08);
+    border-radius: 6px;
+    padding: 7px 12px;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.order-busbar-size-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 8px;
+    font-size: 0.82em;
+}
+
 /* Axis diagram — resolves width/depth confusion by showing which input maps to which
   on-screen dimension. Mirrors the canvas orientation: X horizontal, Y vertical, Z depth. */
 .axis-diagram {