/* Tacty Toolkit Admin — app styles on top of MudBlazor. Colours come from MudBlazor's CSS variables so the
   light/dark theme switch applies everywhere. */

html, body { height: 100%; }
body { margin: 0; background: var(--mud-palette-background); }

/* ---- boot / blank layouts ---------------------------------------------------------------------------------- */
.tt-boot {
    min-height: 100vh; display: flex; flex-direction: column; gap: 16px;
    align-items: center; justify-content: center;
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; color: #6b7280;
}
.tt-boot-spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid rgba(91, 108, 255, .25); border-top-color: #5b6cff;
    animation: tt-spin .9s linear infinite;
}
@keyframes tt-spin { to { transform: rotate(360deg); } }

.tt-blank { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.tt-login-card { width: 100%; max-width: 460px; }
.tt-login-logo { width: 44px; height: 44px; }
.tt-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--mud-palette-text-secondary); font-size: .8rem; }
.tt-or::before, .tt-or::after { content: ""; flex: 1; border-top: 1px solid var(--mud-palette-lines-default); }

#blazor-error-ui {
    background: #fff3cd; color: #5c4400; bottom: 0; box-shadow: 0 -1px 4px rgba(0, 0, 0, .2);
    display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 2000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ---- shell ------------------------------------------------------------------------------------------------------ */
.tt-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.tt-appbar-logo { width: 26px; height: 26px; margin-left: 4px; }
.tt-drawer { border-right: 1px solid var(--mud-palette-lines-default); }
.tt-nav { padding-top: 8px; }
.tt-nav-heading { display: block; padding: 12px 16px 2px; color: var(--mud-palette-text-secondary); }
.tt-page { padding: 20px 24px 32px; max-width: 1600px; margin: 0 auto; }

.tt-usermenu-activator { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.tt-usermenu-activator:hover { background: var(--mud-palette-action-default-hover); }
.tt-usermenu-name { font-size: .9rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-usermenu-info { padding: 12px 16px; min-width: 240px; }

/* ---- page scaffolding ------------------------------------------------------------------------------------------ */
.tt-page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tt-page-header .tt-title { margin-right: auto; }
.tt-muted { color: var(--mud-palette-text-secondary) !important; }
.tt-mono { font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; font-size: .85em; }
.tt-selectable { user-select: text; }
.tt-nowrap { white-space: nowrap; }
.tt-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Master/detail: list on the left, detail on the right (stacked on narrow screens). */
.tt-master-detail { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 960px) { .tt-master-detail { grid-template-columns: 1fr; } }
.tt-list-panel { position: sticky; top: 64px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; }
.tt-list-scroll { overflow: auto; flex: 1; }
.tt-list-group { padding: 10px 14px 4px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.tt-list-row {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; border: 0; background: none;
    text-align: left; cursor: pointer; color: inherit; font: inherit; border-left: 3px solid transparent;
}
.tt-list-row:hover { background: var(--mud-palette-action-default-hover); }
.tt-list-row.selected { background: var(--mud-palette-primary-hover); border-left-color: var(--mud-palette-primary); }
.tt-list-row .tt-row-text { min-width: 0; flex: 1; }
.tt-list-row .tt-row-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-list-row .tt-row-sub { font-size: .8rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tt-section { margin-bottom: 16px; }
.tt-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tt-empty { padding: 32px; text-align: center; color: var(--mud-palette-text-secondary); }
.tt-form-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 16px; }

/* ---- avatars / chips / image tiles -------------------------------------------------------------------------- */
.tt-avatar img { object-fit: cover; }
.tt-avatar-initials { font-size: .75em; font-weight: 600; }
.tt-userchip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; max-width: 100%; vertical-align: middle; }
.tt-userchip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-userchip-bubble { padding: 12px 16px; min-width: 260px; max-width: 360px; }

.tt-imagetile {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative;
    border-radius: 8px; overflow: hidden; background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default); box-sizing: border-box; padding: 0;
}
.tt-imagetile img { width: 100%; height: 100%; object-fit: contain; }
.tt-imagetile-placeholder { color: var(--mud-palette-text-disabled); }
.tt-imagetile-button { cursor: pointer; }
.tt-imagetile-button:disabled { cursor: default; opacity: .6; }
.tt-imagetile-edit {
    position: absolute; right: 2px; bottom: 2px; display: none; border-radius: 6px; padding: 1px;
    background: var(--mud-palette-surface); color: var(--mud-palette-primary); line-height: 0;
}
.tt-imagetile-button:hover:not(:disabled) .tt-imagetile-edit { display: block; }
.tt-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; max-height: 52vh; overflow: auto; padding: 2px; }
.tt-image-cell {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 10px; cursor: pointer;
    border: 2px solid transparent; background: none; color: inherit; font: inherit;
}
.tt-image-cell:hover { background: var(--mud-palette-action-default-hover); }
.tt-image-cell.selected { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.tt-image-cell-size { font-size: .72rem; color: var(--mud-palette-text-secondary); }

/* Project glyph (legacy Segoe MDL2 icon char) — renders on Windows browsers that ship the font. */
.tt-glyph { font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets"; font-size: 18px; }

/* ---- tables ------------------------------------------------------------------------------------------------------ */
.tt-table { width: 100%; border-collapse: collapse; }
.tt-table th { text-align: left; font-weight: 600; font-size: .78rem; color: var(--mud-palette-text-secondary); padding: 8px 10px; border-bottom: 1px solid var(--mud-palette-lines-default); white-space: nowrap; }
.tt-table td { padding: 6px 10px; border-bottom: 1px solid var(--mud-palette-lines-default); vertical-align: middle; }
.tt-table tr:last-child td { border-bottom: 0; }
.tt-table .tt-radio-cell { text-align: center; width: 92px; }
.tt-permission-picker .mud-radio { margin-right: 6px; }

/* ---- config form ---------------------------------------------------------------------------------------------- */
.tt-config-section { border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; padding: 12px 14px; margin: 8px 0 12px; }
.tt-config-section-title { font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; cursor: default; }
.tt-config-section-title.collapsible { cursor: pointer; user-select: none; }
.tt-config-row { margin-bottom: 10px; }
.tt-config-key { font-family: Consolas, ui-monospace, monospace; font-size: .72rem; color: var(--mud-palette-text-disabled); }
.tt-map-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.tt-json-editor textarea { font-family: Consolas, "Cascadia Mono", ui-monospace, monospace !important; font-size: .85rem !important; }

/* ---- virtualized tree --------------------------------------------------------------------------------------- */
.tt-tree {
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; overflow: auto;
    user-select: none; outline: none; background: var(--mud-palette-surface);
}
.tt-tree-row {
    display: flex; align-items: center; gap: 6px; padding: 0 10px 0 0; box-sizing: border-box; cursor: default;
    border-bottom: 1px solid transparent; white-space: nowrap;
}
.tt-tree-row:hover { background: var(--mud-palette-action-default-hover); }
.tt-tree-row.selected { background: var(--mud-palette-primary-hover); }
.tt-tree-row.focused { box-shadow: inset 2px 0 0 var(--mud-palette-primary); }
.tt-tree-toggle { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; flex-shrink: 0; }
.tt-tree-spacer { width: 22px; flex-shrink: 0; }
.tt-tree-icon { flex-shrink: 0; color: var(--mud-palette-text-secondary); }
.tt-tree-name { overflow: hidden; text-overflow: ellipsis; }
.tt-tree-meta { margin-left: auto; padding-left: 12px; font-size: .78rem; color: var(--mud-palette-text-secondary); display: flex; align-items: center; gap: 8px; }
.tt-tree-lines { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tt-tree-subline { font-size: .74rem; color: var(--mud-palette-text-secondary); display: flex; align-items: center; gap: 6px; overflow: hidden; }
.tt-tree-subline.warn { color: var(--mud-palette-warning-darken); }
.tt-lock-icon { color: var(--mud-palette-error); }

/* ---- cards (Lost Media repositories) ----------------------------------------------------------------------- */
.tt-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
@media (max-width: 560px) { .tt-card-grid { grid-template-columns: 1fr; } }
.tt-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tt-status-line { font-size: .82rem; margin-top: 6px; }