/* hub-layout.css — tile sizes and the admin edit-mode chrome for the Hub.
 *
 * Pairs with /static/js/hub-layout.js. The Hub's own look lives inline in
 * hub.html; everything here is either a size preset (which the saved layout
 * document sets) or edit-mode-only chrome that a normal user never renders.
 */

/* ── Bands ───────────────────────────────────────────────────────────────
 * A band is one section: its heading row plus its card grid. The layout engine
 * emits these; the heading keeps hub.html's own .section-title styling.
 */
.hub-band-head { display: flex; align-items: center; gap: 10px; }
.hub-band-head .section-title { margin-bottom: 10px; }
.hub-band-tools { display: none; align-items: center; gap: 6px; margin-bottom: 10px; }

/* ── Size presets ────────────────────────────────────────────────────────
 * The grid is repeat(auto-fill, minmax(200px, 1fr)) in a 1100px container, so
 * ~5 columns. S and M both occupy one column; S is shorter because the engine
 * hides everything below the title (see .hub-tile-hide).
 */
.cards .card[data-size="l"] { grid-column: span 2; }
/* align-self is load-bearing: the grid stretches every card in a row to the
 * tallest one, so without this a Small tile keeps full height and saves nothing.
 * Only S opts out — M and L still stretch, so the default look is unchanged. */
.cards .card[data-size="s"] { padding: 12px 14px; align-self: start; }
.cards .card[data-size="s"] h3 { margin-bottom: 0; }
.hub-tile-hide { display: none !important; }

/* Phones get one column regardless of size, so a span-2 tile can't force a
 * horizontal scroll. */
@media (max-width: 700px) {
    .cards .card[data-size="l"] { grid-column: span 1; }
}

/* ── "Hidden tiles" tile + drawer ───────────────────────────────────────── */
.hub-more-card { border-style: dashed !important; background: #fbfcfe !important; }
.hub-more-count { font-size: 11px; color: #94a3b8; }

.hub-drawer-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center; z-index: 120; padding: 20px;
}
.hub-drawer {
    background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%; max-width: 520px; max-height: 80vh; overflow-y: auto; padding: 22px 24px;
}
.hub-drawer h2 { font-size: 16px; color: #2F5496; margin-bottom: 4px; }
.hub-drawer .hub-drawer-note { font-size: 12px; color: #94a3b8; margin-bottom: 16px; }
.hub-drawer-item {
    display: block; padding: 11px 12px; border: 1px solid #e8ecf0; border-radius: 8px;
    margin-bottom: 8px; text-decoration: none; color: inherit;
}
.hub-drawer-item:hover { background: #f7faff; border-color: #d0d8e8; }
.hub-drawer-item strong { font-size: 13px; color: #2F5496; display: block; }
.hub-drawer-item span { font-size: 11px; color: #94a3b8; }

/* ── Edit mode ───────────────────────────────────────────────────────────
 * Every tile is revealed while editing — including ones the editing admin has
 * no permission for — so a tile can never be lost by being invisible.
 */
body.hub-edit #hub-grid .card { display: block !important; position: relative; cursor: grab; }
body.hub-edit #hub-grid .card.hub-drag-src { opacity: 0.35; }
body.hub-edit .hub-band-tools { display: flex; }
body.hub-edit #hub-grid .hub-band {
    border: 1px dashed #cbd5e1; border-radius: 10px; padding: 12px 12px 2px; margin-bottom: 14px;
}
body.hub-edit #hub-grid .hub-band.hub-band-over { border-color: #2F5496; background: #f7faff; }
body.hub-edit #hub-grid .cards { min-height: 64px; }
body:not(.hub-edit) .hub-tile-tools,
body:not(.hub-edit) .hub-tile-usage,
body:not(.hub-edit) #hub-edit-bar,
body:not(.hub-edit) #hub-hidden-band { display: none !important; }

/* Insertion marker: a bar on the edge the dragged tile would land on. */
#hub-grid .card.hub-drop-before { box-shadow: -3px 0 0 0 #2F5496, 0 2px 8px rgba(0, 0, 0, 0.06); }
#hub-grid .card.hub-drop-after { box-shadow: 3px 0 0 0 #2F5496, 0 2px 8px rgba(0, 0, 0, 0.06); }

.hub-tile-tools {
    display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
    margin: 10px -4px -4px; padding-top: 8px; border-top: 1px dashed #e2e8f0;
}
.hub-btn {
    font-family: inherit; font-size: 10px; font-weight: 600; line-height: 1;
    padding: 4px 6px; border: 1px solid #d0d8e8; background: #fff; color: #475569;
    border-radius: 4px; cursor: pointer;
}
.hub-btn:hover { background: #eef2f9; }
.hub-btn.hub-btn-on { background: #2F5496; border-color: #2F5496; color: #fff; }
.hub-btn-grip { cursor: grab; border-style: dashed; }
.hub-tile-usage { font-size: 10px; color: #94a3b8; margin-top: 8px; }
.hub-tile-usage.hub-usage-cold { color: #b45309; font-weight: 600; }
.hub-tile-noperm {
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #94a3b8; background: #f1f5f9; border-radius: 4px; padding: 2px 5px; margin-left: 4px;
}

#hub-edit-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 110;
    background: #1a3a6e; color: #fff; padding: 12px 20px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
}
#hub-edit-bar .hub-edit-msg { font-size: 13px; flex: 1; min-width: 200px; }
#hub-edit-bar .hub-edit-dirty { color: #fde68a; font-weight: 600; }
#hub-edit-bar button {
    font-family: inherit; font-size: 13px; font-weight: 500; padding: 7px 14px;
    border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15); color: #fff; cursor: pointer;
}
#hub-edit-bar button:hover { background: rgba(255, 255, 255, 0.28); }
#hub-edit-bar button.hub-primary { background: #fff; color: #1a3a6e; border-color: #fff; font-weight: 600; }
#hub-edit-bar button.hub-danger { border-color: rgba(252, 165, 165, 0.6); color: #fecaca; }
body.hub-edit { padding-bottom: 70px; }

#hub-hidden-band .cards .card { opacity: 0.75; }
#hub-hidden-band .section-title { color: #64748b; }

/* Rename / add-section modal */
.hub-modal-field { margin-bottom: 12px; }
.hub-modal-field label {
    display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #64748b; margin-bottom: 4px;
}
.hub-modal-field input, .hub-modal-field textarea {
    width: 100%; font-family: inherit; font-size: 13px; padding: 8px 10px;
    border: 1px solid #d0d8e8; border-radius: 6px; color: #333;
}
.hub-modal-field textarea { resize: vertical; min-height: 56px; }
.hub-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

.hub-usage-list { max-height: 46vh; overflow-y: auto; }
.hub-usage-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 4px;
    border-bottom: 1px solid #f0f3f7; font-size: 13px;
}
.hub-usage-row .hub-usage-name { flex: 1; color: #2c3e50; }
.hub-usage-row .hub-usage-n { color: #94a3b8; font-size: 12px; font-variant-numeric: tabular-nums; }