/* Frontend-owned shell and feature layout. Shared tokens/primitives live in TIFS_WebUI. */

.tifs-mud-shell {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(26, 117, 181, .18), transparent 360px),
        linear-gradient(90deg, #04101c, #0a273e 48%, #05121f) !important;
}

.tifs-mud-shell.tifs-theme-light {
    background: linear-gradient(180deg, rgba(7, 95, 154, .10), transparent 360px), #f3f7fa !important;
}

.tifs-mud-shell.tifs-theme-light .tifs-nav-drawer.mud-drawer {
    color: var(--tifs-text) !important;
    background: linear-gradient(180deg, #f7fbfe, #e8f1f7) !important;
    border-right-color: var(--tifs-border);
}

.tifs-mud-shell.tifs-theme-light .tifs-nav-menu .mud-nav-link { color: #174968 !important; }
.tifs-mud-shell.tifs-theme-light .tifs-nav-menu .mud-nav-link:hover,
.tifs-mud-shell.tifs-theme-light .tifs-nav-menu .mud-nav-link.active { color: #075f9a !important; background: rgba(7, 95, 154, .10) !important; }
.tifs-mud-shell.tifs-theme-light .tifs-nav-menu .mud-icon-root { color: #246a96 !important; }
.tifs-mud-shell.tifs-theme-light .tifs-nav-menu .mud-nav-link:hover .mud-icon-root,
.tifs-mud-shell.tifs-theme-light .tifs-nav-menu .mud-nav-link.active .mud-icon-root { color: #075f9a !important; }

.tifs-mud-shell.tifs-theme-light .tifs-workspace-context.is-selected {
    background: linear-gradient(135deg, #d8edf9, #e4f7ed);
    border-color: #76bd9b;
}

.tifs-mud-shell.tifs-theme-light .tifs-workspace-context.is-empty {
    background: #fff4df;
    border-color: #d89d48;
}

.tifs-mud-shell.tifs-theme-light .tifs-workspace-context-icon {
    color: #1f5f85;
    background: #cfe4f1;
    border-color: #85b8d3;
}

.tifs-mud-shell.tifs-theme-light .tifs-workspace-context.is-selected .tifs-workspace-context-icon { color: #08783e; }
.tifs-mud-shell.tifs-theme-light .tifs-workspace-context.is-empty .tifs-workspace-context-icon { color: #965900; }
.tifs-mud-shell.tifs-theme-light .tifs-workspace-context-label { color: #2b6f97; }
.tifs-mud-shell.tifs-theme-light .tifs-workspace-context strong { color: #102a3b; }
.tifs-mud-shell.tifs-theme-light .tifs-workspace-context-type { color: #435f72; }

.tifs-mud-shell.tifs-theme-light .tifs-page-heading .mud-typography { color: var(--tifs-text) !important; }
.tifs-mud-shell.tifs-theme-light .tifs-page-heading .mud-typography.tifs-muted,
.tifs-mud-shell.tifs-theme-light .tifs-page-heading .mud-typography.mud-typography-color-secondary { color: var(--tifs-text-muted) !important; }

.tifs-mud-shell.tifs-theme-light .tifs-dashboard-hero {
    background:
        radial-gradient(circle at 86% 8%, rgba(7, 95, 154, .13), transparent 220px),
        linear-gradient(135deg, #f7fbfe, #dcecf6);
    border-color: #82b4cf;
}

.tifs-mud-shell.tifs-theme-light .tifs-dashboard-hero .mud-typography { color: var(--tifs-text) !important; }
.tifs-mud-shell.tifs-theme-light .tifs-dashboard-hero .tifs-muted { color: var(--tifs-text-muted) !important; }
.tifs-mud-shell.tifs-theme-light .tifs-dashboard-hero-icon {
    color: #075f9a;
    background: #cfe5f4;
    border-color: #82b4cf;
}

.main-content {
    min-width: 0;
    background: transparent;
}

.content {
    width: 100%;
    min-height: calc(100vh - 72px);
    padding: 1.15rem;
    overflow: auto;
}

.tifs-appbar.mud-appbar {
    min-height: 72px;
    padding: 0 1rem;
    background: linear-gradient(90deg, #0a2740, #135f98 68%, #1f7fc4) !important;
    border-bottom: 1px solid rgba(151, 210, 255, .25);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .28);
}

.tifs-appbar .mud-toolbar {
    min-height: 72px;
    gap: .75rem;
}

.tifs-app-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 50%;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .32);
}

.tifs-app-title {
    color: #fff;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
}

.tifs-workspace-control-group {
    display: flex;
    min-width: 0;
    margin-left: .5rem;
    gap: .2rem;
    align-items: center;
    flex: 0 1 auto;
}

.tifs-workspace-selector {
    min-width: 240px;
    max-width: 360px;
    flex: 0 1 360px;
}

.tifs-workspace-selector .mud-input,
.tifs-workspace-selector .mud-input-label,
.tifs-workspace-selector .mud-icon-root {
    color: #e8f5ff !important;
}

.tifs-workspace-selector .mud-input-outlined-border {
    border-color: rgba(232, 245, 255, .52) !important;
}

.tifs-nav-drawer.mud-drawer {
    color: var(--tifs-text) !important;
    background:
        radial-gradient(circle at 50% 0, rgba(55, 169, 255, .14), transparent 190px),
        linear-gradient(180deg, rgba(11, 51, 81, .98), rgba(5, 18, 31, .98)) !important;
    border-right: 1px solid rgba(92, 177, 238, .24);
}

.tifs-nav-menu .mud-nav-link,
.tifs-nav-menu .mud-nav-group .mud-nav-link,
.tifs-nav-menu .mud-nav-group .mud-nav-group {
    min-height: 38px;
    margin: 2px 8px;
    color: #dcefff !important;
    font-weight: 800;
    border: 1px solid transparent;
    border-radius: var(--tifs-radius-sm);
}

.tifs-nav-menu .mud-nav-link:hover,
.tifs-nav-menu .mud-nav-link.active,
.tifs-nav-menu .mud-nav-group > .mud-nav-link:hover {
    color: #fff !important;
    background: rgba(55, 169, 255, .13) !important;
    border-color: rgba(90, 190, 255, .28);
}

.tifs-nav-menu .mud-icon-root {
    color: #85c9fb !important;
}

.tifs-workspace-context {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    margin: .65rem .75rem .9rem;
    padding: .65rem;
    border: 1px solid var(--tifs-border);
    border-radius: var(--tifs-radius);
}

.tifs-workspace-context.is-selected {
    background: linear-gradient(135deg, rgba(24, 142, 225, .22), rgba(26, 213, 125, .10));
    border-color: rgba(56, 208, 148, .46);
}

.tifs-workspace-context.is-empty {
    background: rgba(255, 159, 28, .08);
    border-color: rgba(255, 159, 28, .38);
}

.tifs-workspace-context-icon {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    background: rgba(4, 19, 33, .42);
    border: 1px solid var(--tifs-border);
    border-radius: var(--tifs-radius-sm);
}

.tifs-workspace-context.is-selected .tifs-workspace-context-icon { color: #54df9a; }
.tifs-workspace-context.is-empty .tifs-workspace-context-icon { color: #ffb34f; }

.tifs-workspace-context-content {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

.tifs-workspace-context-label {
    color: #91c9ee;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tifs-workspace-context strong,
.tifs-workspace-context-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tifs-workspace-context strong { color: #f4fbff; font-size: .84rem; }
.tifs-workspace-context-type { color: #b9d9ec; font-size: .68rem; }

.tifs-no-access,
.tifs-shell-message {
    display: grid;
    min-height: calc(100vh - 200px);
    padding: 1.5rem;
    place-items: center;
}

.tifs-shell-message-panel,
.tifs-error-panel {
    width: min(100%, 620px);
    padding: 1.5rem;
    color: var(--tifs-text);
    text-align: center;
    background: var(--tifs-surface);
    border: 1px solid var(--tifs-border);
    border-radius: var(--tifs-radius);
    box-shadow: var(--tifs-shadow);
}

.tifs-admin-page { min-width: 0; }
.tifs-admin-card { height: 100%; }

.tifs-detail-line,
.tifs-form-actions,
.tifs-toolbar-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.tifs-detail-line { min-height: 28px; gap: .5rem; }
.tifs-form-actions { padding: .75rem 1rem 1rem; }

.tifs-map-frame {
    width: 100%;
    height: 480px;
    border: 1px solid var(--tifs-border);
    border-radius: var(--tifs-radius);
}

.tifs-message-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .65rem;
}

.tifs-gallery-item {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--tifs-border);
    border-radius: var(--tifs-radius);
}

.tifs-transfer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.tifs-transfer-col { display: flex; min-width: 0; flex-direction: column; }
.tifs-transfer-head { display: flex; align-items: center; gap: .5rem; min-height: 32px; margin-bottom: .4rem; }
.tifs-transfer-list {
    height: 360px;
    padding: .4rem;
    overflow-y: auto;
    background: rgba(4, 18, 32, .44) !important;
    border: 1px solid var(--tifs-border) !important;
    border-radius: var(--tifs-radius);
}
.tifs-transfer-item { display: flex; align-items: center; gap: .5rem; min-height: 34px; padding: .15rem .5rem; border-radius: var(--tifs-radius-sm); }
.tifs-transfer-item:hover { background: var(--tifs-primary-soft); }

.tifs-dashboard-hero {
    padding: 1.15rem;
    background:
        radial-gradient(circle at 86% 8%, rgba(55, 169, 255, .22), transparent 220px),
        linear-gradient(135deg, rgba(8, 37, 60, .92), rgba(8, 24, 40, .92));
    border: 1px solid rgba(92, 177, 238, .32);
    border-radius: var(--tifs-radius);
}

.tifs-dashboard-hero-icon {
    display: grid;
    width: 48px;
    height: 48px;
    color: #8bd1ff;
    place-items: center;
    background: rgba(55, 169, 255, .18);
    border: 1px solid rgba(116, 204, 255, .36);
    border-radius: var(--tifs-radius);
}

.tifs-dashboard-metric { height: 100%; border: 1px solid rgba(92, 177, 238, .22); }
.tifs-dashboard-metric-progress { border-color: rgba(255, 179, 79, .35); }
.tifs-dashboard-metric-complete { border-color: rgba(84, 223, 154, .35); }
.tifs-dashboard-metric .mud-card-content { display: grid; gap: .4rem; min-height: 144px; }
.tifs-dashboard-metric .mud-card-actions { padding: .25rem .5rem .5rem; border-top: 1px solid rgba(92, 177, 238, .16); }

.tifs-dashboard-project-row,
.tifs-dashboard-message-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 58px;
    padding: .5rem 0;
    border-bottom: 1px solid rgba(92, 177, 238, .14);
}

.tifs-dashboard-project-row:last-child,
.tifs-dashboard-message-row:last-child { border-bottom: 0; }
.tifs-dashboard-project-row > :first-child,
.tifs-dashboard-message-content { flex: 1; min-width: 0; }
.tifs-dashboard-project-progress { width: 120px; min-width: 100px; }

body.tifs-login-body {
    min-height: 100vh;
    overflow: auto;
    background: linear-gradient(135deg, #04101c, #0a273e 50%, #05121f);
}

.tifs-login-page,
.login-page,
.tifs-error-page {
    display: grid;
    min-height: 100vh;
    padding: 1.5rem;
    place-items: center;
}

.tifs-login-panel,
.login-panel {
    display: flex;
    width: min(100%, 520px);
    padding: 1.9rem;
    flex-direction: column;
    gap: .75rem;
    background: linear-gradient(180deg, rgba(16, 60, 91, .94), rgba(7, 22, 36, .96));
    border: 1px solid var(--tifs-border);
    border-top: 5px solid var(--tifs-primary);
    border-radius: var(--tifs-radius);
    box-shadow: var(--tifs-shadow);
}

.tifs-login-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: .65rem; }
.tifs-login-brand span { display: block; color: var(--tifs-text-muted); font-size: .82rem; font-weight: 800; }
.tifs-login-brand strong { display: block; color: #fff; font-size: 1.55rem; font-weight: 900; }
.tifs-login-logo,
.login-logo { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; }
.tifs-field-label,
.login-panel label { color: var(--tifs-text-muted) !important; font-weight: 800; }
.tifs-text-field,
.login-panel input[type="text"],
.login-panel input[type="password"] { min-height: 44px; padding: .65rem .75rem; color: var(--tifs-text) !important; background: rgba(4, 18, 32, .44) !important; border: 1px solid var(--tifs-border-strong); border-radius: var(--tifs-radius-sm); }
.tifs-login-check,
.login-check { display: flex; align-items: center; gap: .5rem; color: var(--tifs-text) !important; font-weight: 700 !important; }
.tifs-login-button,
.login-panel button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .65rem 1rem; color: #fff !important; font-weight: 900; background: linear-gradient(90deg, #168ce1, #38adff) !important; border: 0; border-radius: var(--tifs-radius-sm); cursor: pointer; }
.tifs-login-error,
.login-error { padding: .65rem .75rem; color: #ffd5d9; background: rgba(239, 77, 90, .14); border: 1px solid rgba(239, 77, 90, .42); border-radius: var(--tifs-radius); }
.tifs-signedout-message { color: var(--tifs-text-muted); line-height: 1.5; }
.tifs-login-link-button { width: 100%; }

.tifs-operations-drawer .mud-drawer-content {
    color: var(--tifs-text);
    background: linear-gradient(180deg, #0c263a, #071521 70%);
}

.tifs-command-results {
    display: flex;
    max-height: min(62vh, 560px);
    margin-top: 1rem;
    gap: .35rem;
    flex-direction: column;
    overflow-y: auto;
}

.tifs-command-results__group { margin: .8rem .4rem .15rem; }

.tifs-command-result.mud-button-root {
    min-height: 58px;
    padding: .6rem .75rem;
    gap: .75rem;
    justify-content: flex-start;
    color: var(--tifs-text) !important;
    text-align: left;
    border: 1px solid transparent;
    border-radius: var(--tifs-radius-sm);
}

.tifs-command-result.mud-button-root:hover,
.tifs-command-result.mud-button-root:focus-visible {
    background: var(--tifs-primary-soft);
    border-color: var(--tifs-border-strong);
}

.tifs-command-result__copy { display: grid; min-width: 0; gap: .15rem; flex: 1; }
.tifs-command-result__copy strong,
.tifs-command-result__copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tifs-command-result__copy span { color: var(--tifs-text-muted); font-size: .8rem; }

.tifs-operations-panel {
    display: flex;
    height: 100%;
    padding: 1rem;
    flex-direction: column;
    gap: .85rem;
    overflow: hidden;
}

.tifs-operations-panel__header { flex: 0 0 auto; }
.tifs-operations-counts { flex-wrap: wrap; }
.tifs-operations-panel__actions { flex: 0 0 auto; margin-top: auto; }

.tifs-operations-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.tifs-operations-list.is-compact {
    min-height: 0;
    padding-right: .2rem;
    flex: 1;
    overflow-y: auto;
}

.tifs-operation-entry {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    min-width: 0;
    padding: .8rem;
    gap: .65rem;
    align-items: center;
    background: rgba(4, 18, 32, .44);
    border: 1px solid var(--tifs-border);
    border-radius: var(--tifs-radius);
}

.tifs-operation-entry.has-problem { border-color: rgba(239, 77, 90, .48); background: rgba(239, 77, 90, .06); }
.tifs-operation-entry.is-unread { border-left: 4px solid var(--tifs-primary); }
.tifs-operation-icon { position: relative; display: grid; place-items: center; }
.tifs-operation-unread { position: absolute; top: -2px; right: 0; width: 8px; height: 8px; background: var(--tifs-primary); border: 2px solid #0c263a; border-radius: 50%; }
.tifs-operation-copy { min-width: 0; }
.tifs-operation-heading { min-width: 0; }
.tifs-operation-heading > :first-child { flex: 1; min-width: 0; }
.tifs-operation-failure { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.tifs-operations-list.is-compact .tifs-operation-entry { grid-template-columns: 30px minmax(0, 1fr); padding: .65rem; }
.tifs-operations-list.is-compact .tifs-operation-entry > .mud-button-root { grid-column: 2; justify-self: start; padding-left: 0; }

.tifs-operation-metric {
    display: flex;
    min-height: 96px;
    gap: .8rem;
    align-items: center;
}

@media (max-width: 760px) {
    .content { padding: .75rem; }
    .tifs-appbar .mud-toolbar { min-height: 96px; padding-block: .5rem; flex-wrap: wrap; gap: .4rem; }
    .tifs-app-title { font-size: .95rem !important; }
    .tifs-workspace-control-group { order: 5; width: 100%; margin-left: 0; flex: 1 1 100%; }
    .tifs-workspace-selector { flex: 1 1 auto; min-width: 0; max-width: none; }
    .tifs-nav-drawer.mud-drawer { padding-top: 98px; }
    .tifs-transfer { grid-template-columns: 1fr; }
    .tifs-dashboard-project-progress { width: 86px; min-width: 72px; }
    .tifs-operation-entry { grid-template-columns: 32px minmax(0, 1fr); }
    .tifs-operation-entry > .mud-button-root { grid-column: 2; justify-self: start; }
}