/* Custom styles for Shoremem Premium Organization Management */

:root {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --info-color: #0dcaf0;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --light-color: #f8f9fa;
    --dark-color: #212529;
}

html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Sidebar Styles */
.sidebar {
    background: linear-gradient(180deg, #052767 0%, #3a0647 70%);
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.sidebar .navbar-brand {
    font-weight: 700;
    font-size: 1.2rem;
    color: white !important;
}

.sidebar .nav-link {
    color: #d7d7d7 !important;
    padding: 0.75rem 1rem;
    margin: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white !important;
    transform: translateX(5px);
}

.sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.2);
    color: white !important;
    font-weight: 600;
}

.sidebar .nav-link i {
    width: 20px;
    margin-right: 10px;
    text-align: center;
}

/* Main Content Styles */
.content {
    background-color: #f8f9fa;
    min-height: calc(100vh - 3.5rem);
}

.top-row {
    background: white;
    border-bottom: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Card Styles */
.card {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: box-shadow 0.15s ease-in-out;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
}

/* Button Styles */
.btn {
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-primary {
    background: linear-gradient(45deg, #0d6efd, #0056b3);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(45deg, #0056b3, #004085);
}

/* Organization Chart Styles */
.organization-chart-container {
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
}

.persona-node {
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.persona-node:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-color: var(--primary-color);
}

.persona-node.executive {
    border-color: #dc3545;
    background: linear-gradient(135deg, #fff, #ffe6e6);
}

.persona-node.senior-manager {
    border-color: #fd7e14;
    background: linear-gradient(135deg, #fff, #fff3e0);
}

.persona-node.manager {
    border-color: #ffc107;
    background: linear-gradient(135deg, #fff, #fffbf0);
}

.persona-node.team-lead {
    border-color: #20c997;
    background: linear-gradient(135deg, #fff, #e6fff9);
}

.persona-node.senior {
    border-color: #6f42c1;
    background: linear-gradient(135deg, #fff, #f3e6ff);
}

.persona-node.standard {
    border-color: #6c757d;
    background: linear-gradient(135deg, #fff, #f8f9fa);
}

/* Modal Styles */
.modal-content {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.175);
}

.modal-header {
    border-bottom: 1px solid #dee2e6;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.modal-title {
    font-weight: 600;
    color: var(--dark-color);
}

/* Form Styles */
.form-control, .form-select {
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Badge Styles */
.badge {
    font-weight: 500;
    border-radius: 0.375rem;
}

/* Progress Bar Styles */
.progress {
    border-radius: 0.5rem;
    background-color: #e9ecef;
}

.progress-bar {
    border-radius: 0.5rem;
    transition: width 0.6s ease;
}

/* Loading Spinner */
.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Responsive Design */
@media (max-width: 767.98px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .content {
        margin-left: 0 !important;
    }
    
    .top-row {
        margin-left: 0 !important;
    }
    
    .card {
        margin-bottom: 1rem;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* Utility Classes */
.text-gradient {
    background: linear-gradient(45deg, var(--primary-color), var(--info-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-sm-hover:hover {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow-hover:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Blazor Error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}



/* NavMenu Styles */
.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand {
    font-size: 1.1rem;
    font-weight: 600;
}

.oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-item:first-of-type {
    padding-top: 1rem;
}

.nav-item:last-of-type {
    padding-bottom: 1rem;
}

.nav-item ::deep a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    transition: all 0.3s ease;
}

.nav-item ::deep a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item ::deep a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow-y: auto;
    height: calc(100vh - 3.5rem);
    padding-bottom: 60px;
}

.navbar-toggler:checked {
    background-color: rgba(255, 255, 255, 0.5);
}

/* Chat Styles */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
}

.typing-indicator span {
    height: 8px;
    width: 8px;
    background-color: #6c757d;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { 
    animation-delay: -0.32s; 
}

.typing-indicator span:nth-child(2) { 
    animation-delay: -0.16s; 
}

@keyframes typing {
    0%, 80%, 100% { 
        transform: scale(0); 
    }
    40% { 
        transform: scale(1); 
    }
}

/* Layout fixes */
.page {
    position: relative;
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

main {
    margin-left: 260px;
    flex: 1;
    min-width: 0; /* allow plan/check text to shrink; otherwise nowrap rows stretch the page */
    display: flex;
    flex-direction: column;
}

/* Removed problematic top-row styling that caused header overlap */

.content {
    flex: 1;
    min-width: 0; /* pair with main; keeps group plan checks inside the column */
    overflow-x: hidden;
    padding: 1rem;
    background-color: #f8f9fa;
}

/* Always show navigation on desktop */
@media (min-width: 768px) {
    .navbar-toggler {
        display: none;
    }

    .nav-scrollable {
        display: flex !important;
    }
}

/* Mobile responsive */
@media (max-width: 767.98px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    main {
        margin-left: 0;
    }
    
    .navbar-toggler {
        display: block;
    }
}


/* Navigation Logo Styles */
.nav-logo {
    height: 32px;
    width: auto;
    max-width: 150px;
}

.navbar-brand {
    padding: 0.5rem 0;
}


/* Tab Navigation Alignment Fix */
.nav-tabs {
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: flex-end; /* Align all tabs to the bottom */
}

.nav-tabs .nav-item {
    margin-bottom: 0; /* Remove any bottom margin */
    padding-bottom: 0; /* Remove any bottom padding */
}

.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    padding: 0.75rem 1rem; /* Consistent padding for all tabs */
    margin-bottom: 0; /* Ensure no bottom margin */
    display: flex;
    align-items: center;
    height: auto; /* Let height be determined by content and padding */
    line-height: 1.5; /* Consistent line height */
}

.nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    border-bottom: 1px solid #fff; /* Hide bottom border for active tab */
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
}

/* Ensure consistent vertical alignment for tab content */
.nav-tabs .nav-link i {
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Fix for Bootstrap tab content */
.tab-content {
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 1rem;
    background-color: #fff;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* Ensure all tab buttons have the same baseline */
.nav-tabs .nav-item .nav-link {
    vertical-align: baseline;
    display: inline-flex;
    align-items: center;
}

/* Fix for any custom tab styling that might cause misalignment */
.nav-tabs .nav-item:first-child .nav-link {
    margin-left: 0;
}

/* Ensure consistent spacing between tabs */
.nav-tabs .nav-item + .nav-item {
    margin-left: 0.25rem;
}


/* Navigation Section Headers */
.nav-section-header {
    color: #ffffff !important;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0.5rem 0.25rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

.nav-section-header i {
    opacity: 0.8;
}

/* Nested navigation items */
.nav-item.ms-3 .nav-link {
    font-size: 0.9rem;
    padding-left: 2rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    margin-left: 1rem;
}

.nav-item.ms-3 .nav-link:hover {
    border-left-color: rgba(255, 255, 255, 0.4);
}

.nav-item.ms-3 .nav-link.active {
    border-left-color: var(--primary-color);
}


/* Collapsible Memory Management Navigation */
.collapsible-header {
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.collapsible-header:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
}

.memory-management-submenu {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.memory-management-submenu.collapsed {
    max-height: 0;
    opacity: 0;
}

.memory-management-submenu.expanded {
    max-height: fit-content;
    opacity: 1;
    overflow: visible;
}

.collapsible-header i.ms-auto {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

.collapsible-header:hover i.ms-auto {
    transform: scale(1.1);
}

.security-center-submenu {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.security-center-submenu.collapsed {
    max-height: 0;
    opacity: 0;
}

.security-center-submenu.expanded {
    max-height: fit-content;
    opacity: 1;
    overflow: visible;
}

.sql-query-manager-submenu {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.sql-query-manager-submenu.collapsed {
    max-height: 0;
    opacity: 0;
}

.sql-query-manager-submenu.expanded {
    max-height: fit-content;
    opacity: 1;
    overflow: visible;
}

.email-management-submenu {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.email-management-submenu.collapsed {
    max-height: 0;
    opacity: 0;
}

.email-management-submenu.expanded {
    max-height: 500px;
    opacity: 1;
}

.testing-submenu {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.testing-submenu.collapsed {
    max-height: 0;
    opacity: 0;
}

.testing-submenu.expanded {
    max-height: 500px;
    opacity: 1;
}

/* InfoTip trigger — a real button so an ancestor <label> does not treat
   the icon as label text (which would toggle the associated control).
   Reset chrome so it stays the same gray info icon. */
.infotip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    font: inherit;
    line-height: 1;
    color: #adb5bd;
    cursor: pointer;
    vertical-align: baseline;
    appearance: none;
    -webkit-appearance: none;
}
.infotip-trigger i {
    font-size: 1rem;
    color: #adb5bd;
    line-height: 1;
    pointer-events: none;
}
.infotip-trigger:focus {
    outline: none;
}
.infotip-trigger:focus-visible {
    outline: 1px dotted #adb5bd;
    outline-offset: 2px;
}

/* InfoTip popup — appended to document.body via JS, position:fixed */
.infotip-bubble {
    position: fixed;
    transform: translate(-50%, -100%) translateY(-8px);
    background: #1a1a2e;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: max-content;
    max-width: 300px;
    padding: 10px 14px;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    z-index: 9999;
    text-align: left;
    animation: infotip-in 0.15s ease-out;
}
.infotip-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a2e;
}
@keyframes infotip-in {
    from { opacity: 0; transform: translate(-50%, -100%) translateY(-2px); }
    to   { opacity: 1; transform: translate(-50%, -100%) translateY(-8px); }
}
.infotip-bubble--below {
    transform: translate(-50%, 8px);
    animation: infotip-in-below 0.15s ease-out;
}
.infotip-bubble--below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #1a1a2e;
}
@keyframes infotip-in-below {
    from { opacity: 0; transform: translate(-50%, 2px); }
    to   { opacity: 1; transform: translate(-50%, 8px); }
}

/* InfoTip rich variant — wider popup with code/list formatting */
.infotip-rich {
    max-width: 380px;
    font-size: 0.78rem;
    line-height: 1.55;
}
.infotip-rich p {
    margin: 0 0 0.45em;
}
.infotip-rich p:last-child {
    margin-bottom: 0;
}
.infotip-rich ul {
    margin: 0.3em 0 0.45em 1.1em;
    padding: 0;
}
.infotip-rich li {
    margin-bottom: 0.2em;
}
.infotip-rich code {
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
    padding: 0 3px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.9em;
    color: #f0c674 !important; /* amber — override Bootstrap code colour */
}
.infotip-rich strong {
    color: #e2e8f0;
}
.infotip-rich hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin: 0.5em 0;
}
.infotip-rich ol {
    margin: 0.3em 0 0.45em 1.2em;
    padding: 0;
}
.infotip-rich em {
    color: #cbd5e1;
    font-style: italic;
}


/* Plan / results check-result lines: hard-clip + ellipsis so peer-review
   text cannot stretch the page. Click opens a Bootstrap modal (full text).
   grid minmax(0,1fr) + width:0 on the text button beat flex min-content. */
.group-check-lines {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}
.group-check-line {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.group-check-line-icon {
    flex: 0 0 auto;
    line-height: 1.5;
    margin-top: 0.1em;
}
.group-check-line-text {
    /* width:0 + flex grow is the reliable flex ellipsis trick */
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    max-width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
}
.group-check-line-text:hover,
.group-check-line-text:focus {
    color: inherit;
    text-decoration: underline;
}
.group-check-line-name {
    margin-right: 0.25em;
}
.group-check-line-tip {
    flex: 0 0 auto;
    line-height: 1.5;
}
.group-check-popup-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Watch tab system messages: other notices truncate + modal; response/peer-review
   outcomes render full text inline (WatchSystemMessageLine / WatchOutcomeMessage). */
.watch-transcript {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}
.watch-system-line-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
.watch-system-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 0.35rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: #f8f9fa;
    color: #6c757d;
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.watch-system-line:hover,
.watch-system-line:focus {
    background: #e9ecef;
    color: #495057;
}
.watch-system-line-icon {
    flex: 0 0 auto;
    line-height: 1;
}
.watch-system-line-text {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Response / peer-review outcomes: full text visible inline on Watch (2026-10-27). */
.watch-system-outcome {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: #f8f9fa;
    color: #495057;
    font-size: 0.875rem;
    line-height: 1.45;
    text-align: left;
}
.watch-system-outcome-icon {
    flex: 0 0 auto;
    line-height: 1.45;
    margin-top: 0.05rem;
}
.watch-system-outcome-body {
    flex: 1 1 auto;
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.watch-system-outcome-pass {
    border-color: #badbcc;
    background: #d1e7dd;
    color: #0f5132;
}
.watch-system-outcome-pass .watch-system-outcome-icon { color: #198754; }
.watch-system-outcome-add {
    border-color: #ffe69c;
    background: #fff3cd;
    color: #664d03;
}
.watch-system-outcome-add .watch-system-outcome-icon { color: #997404; }
.watch-system-outcome-fail {
    border-color: #f5c2c7;
    background: #f8d7da;
    color: #842029;
}
.watch-system-outcome-fail .watch-system-outcome-icon { color: #dc3545; }
.watch-system-outcome-neutral {
    border-color: #dee2e6;
    background: #f8f9fa;
    color: #495057;
}

/* Watch phase blocks (Rick, 2026-10-27): turn banner + nested posts/outcomes
   read as one meeting section. Header left-aligned with body content (not a
   centered floating pill). Clear gap before the next phase. */
.watch-phase {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 1rem 0;
    padding: 0;
    border: 1px solid #dee2e6;
    border-left-width: 4px;
    border-radius: 0.375rem;
    background: #fff;
    overflow: hidden;
}
.watch-phase:last-child {
    margin-bottom: 0.25rem;
}
.watch-phase-preamble {
    border: none;
    border-radius: 0;
    background: transparent;
    margin-bottom: 0.75rem;
}
.watch-phase-header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #dee2e6;
    background: #f1f3f5;
    color: #212529;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}
.watch-phase-header-icon {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: #0d6efd;
}
.watch-phase-header-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    text-align: left;
}
.watch-phase-plan-item {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 0.2rem 0.55rem;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.08);
    color: #212529;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.watch-phase-plan-item-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    max-width: 100%;
}
.watch-phase-time-required {
    margin: 0;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.65);
    color: #495057;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.wg-item-time-required {
    font-weight: 600;
}
.watch-phase-kind {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    color: #343a40;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
}
.watch-phase-kind .infotip-trigger {
    flex: 0 0 auto;
}
.watch-phase-header-text {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    text-align: left;
    color: #6c757d;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.watch-phase-body,
.watch-phase-loose-body {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.65rem 0.75rem 0.35rem 0.75rem;
}
.watch-phase-loose-body {
    padding-left: 0;
    padding-right: 0;
}
/* Align outcome cards / system lines with the phase header left edge. */
.watch-phase-body > .watch-system-outcome,
.watch-phase-body > .watch-system-line-wrap {
    margin-left: 0;
    margin-right: 0;
}
.watch-phase-body .watch-system-outcome {
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
}
.watch-phase-body .d-flex.mb-3 {
    margin-bottom: 0.65rem !important;
}
.watch-phase-body .card.my-3 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.65rem !important;
}
/* Phase accent colors (left border + header tint) by turn kind. */
.watch-phase-drafting { border-left-color: #0d6efd; }
.watch-phase-drafting .watch-phase-header { background: #e7f1ff; border-bottom-color: #cfe2ff; }
.watch-phase-drafting .watch-phase-header-icon { color: #0d6efd; }
.watch-phase-planning { border-left-color: #6f42c1; }
.watch-phase-planning .watch-phase-header { background: #f3e8ff; border-bottom-color: #e2d4f7; }
.watch-phase-planning .watch-phase-header-icon { color: #6f42c1; }
.watch-phase-responses { border-left-color: #fd7e14; }
.watch-phase-responses .watch-phase-header { background: #fff4e6; border-bottom-color: #ffe0b8; }
.watch-phase-responses .watch-phase-header-icon { color: #fd7e14; }
.watch-phase-item-review { border-left-color: #198754; }
.watch-phase-item-review .watch-phase-header { background: #e8f5ee; border-bottom-color: #c7e6d5; }
.watch-phase-item-review .watch-phase-header-icon { color: #198754; }
.watch-phase-plan-review { border-left-color: #20c997; }
.watch-phase-plan-review .watch-phase-header { background: #e6faf4; border-bottom-color: #c5eee3; }
.watch-phase-plan-review .watch-phase-header-icon { color: #20c997; }
.watch-phase-freeform { border-left-color: #6c757d; }
.watch-phase-writeup { border-left-color: #0dcaf0; }
.watch-phase-writeup .watch-phase-header { background: #e7f9fc; border-bottom-color: #c5eef5; }
.watch-phase-stuck { border-left-color: #dc3545; }
.watch-phase-stuck .watch-phase-header { background: #fdebec; border-bottom-color: #f5c2c7; }
.watch-phase-generic { border-left-color: #0d6efd; }
.list-group-item.overflow-hidden {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}
/* ===== Form control visibility fixes ===== */

/* Radio buttons - ensure they render at a legible size with a clear border */
.form-check-input[type="radio"] {
    width: 1.1em;
    height: 1.1em;
    border: 2px solid #6c757d;
    background-color: #fff;
    appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 0.2em;
}

.form-check-input[type="radio"]:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Range slider — make the track and thumb clearly visible */
.form-range {
    cursor: pointer;
    height: 1.5rem;
    padding: 0;
}

.form-range::-webkit-slider-runnable-track {
    height: 6px;
    background: #dee2e6;
    border-radius: 3px;
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0d6efd;
    cursor: pointer;
    margin-top: -8px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #0d6efd;
}

.form-range::-moz-range-track {
    height: 6px;
    background: #dee2e6;
    border-radius: 3px;
    border: none;
}

.form-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0d6efd;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #0d6efd;
}

/* =============================================
   Markdown Content Styles (.markdown-content)
   Used by MarkdownMessage component and
   SKILL.md rendering on SkillDetail page.
   ============================================= */

.markdown-content {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #212529;
    word-break: break-word;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a2e;
}

.markdown-content h1 { font-size: 1.5rem; border-bottom: 2px solid #dee2e6; padding-bottom: 0.3rem; }
.markdown-content h2 { font-size: 1.25rem; border-bottom: 1px solid #dee2e6; padding-bottom: 0.25rem; }
.markdown-content h3 { font-size: 1.1rem; }
.markdown-content h4 { font-size: 1rem; }

.markdown-content p {
    margin-bottom: 0.75rem;
}

.markdown-content ul,
.markdown-content ol {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
}

.markdown-content li {
    margin-bottom: 0.25rem;
}

.markdown-content code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.85em;
    background-color: #f0f2f5;
    color: #c7254e;
    padding: 0.15em 0.4em;
    border-radius: 3px;
    border: 1px solid #e0e3e8;
}

.markdown-content pre {
    background-color: #1e1e2e;
    color: #cdd6f4;
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    line-height: 1.5;
    border: 1px solid #313244;
}

.markdown-content pre code {
    background: none;
    color: inherit;
    padding: 0;
    border: none;
    font-size: inherit;
    border-radius: 0;
}

.markdown-content blockquote {
    border-left: 4px solid #0d6efd;
    background-color: #f0f6ff;
    padding: 0.5rem 1rem;
    margin: 0.75rem 0;
    border-radius: 0 4px 4px 0;
    color: #495057;
}

.markdown-content blockquote p:last-child {
    margin-bottom: 0;
}

.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.markdown-content table th,
.markdown-content table td {
    border: 1px solid #dee2e6;
    padding: 0.4rem 0.75rem;
    text-align: left;
}

.markdown-content table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.markdown-content table tr:nth-child(even) {
    background-color: #f8f9fa;
}

.markdown-content hr {
    border: none;
    border-top: 1px solid #dee2e6;
    margin: 1.25rem 0;
}

.markdown-content a {
    color: #0d6efd;
    text-decoration: none;
}

.markdown-content a:hover {
    text-decoration: underline;
}

/* Task list checkboxes */
.markdown-content input[type="checkbox"] {
    margin-right: 0.4em;
}

/* ── Controls withheld for want of a permission ──────────────────────────────
   Rendered by <Authorized ShowDisabled="true">, which wraps them in a disabled
   fieldset. Bootstrap already dims a disabled .btn to .65 opacity, which on an
   outline button is easy to miss: the Departments and Workers rows looked fully
   clickable in full colour while being inert, so a reader learned they could not
   act by clicking and having nothing happen.

   pointer-events is the load-bearing line. Bootstrap sets it to none on a
   disabled .btn, and that also removes hover — so the fieldset's title, which
   names the permission that would enable the control, could never be shown. The
   control is blocked by the disabled attribute, not by pointer-events, so putting
   them back costs nothing and buys the explanation. */
.authz-withheld:disabled .btn,
.authz-withheld:disabled button,
.authz-withheld:disabled .form-control,
.authz-withheld:disabled .form-select {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto;
    filter: grayscale(55%);
}

/* Keyboard users get the same signal: the control is reachable to read but not
   to operate, so it must not advertise a focus ring it cannot honour. */
.authz-withheld:disabled .btn:focus,
.authz-withheld:disabled button:focus {
    box-shadow: none;
    outline: none;
}

/* ── Grant dialog: the tick boxes ────────────────────────────────────────────
   Bootstrap's default form-check-input is a 1em box with a #dee2e6 hairline, which
   on the white rows of the "what this page needs" table is very nearly invisible --
   an administrator reading the dialog could not see that the rows were selectable at
   all, which makes the Grant button look like it applies to nothing. These are the
   dialog's only controls, so they are sized and outlined to read as controls.

   Scoped to the dialog rather than applied to every checkbox in the application: the
   grids elsewhere have their own density, and widening every box would reflow them. */
.needed-permissions .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid #6c757d;
    background-color: #fff;
    cursor: pointer;
}

.needed-permissions .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.needed-permissions .form-check-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.3);
}

/* Disabled means "possible, not yet" -- still visible as a box, plainly not clickable. */
.needed-permissions .form-check-input:disabled {
    border-color: #adb5bd;
    background-color: #f1f3f5;
    cursor: not-allowed;
    opacity: 1;
}

/* Blazor Server prerender window. _Layout keeps #blazor-app-host inert until
   Blazor.start() resolves. The badge is the visible not-yet-ready cue. */
.blazor-connecting {
    z-index: 1080;
    pointer-events: none;
    display: none;
}

body.blazor-not-ready .blazor-connecting {
    display: block;
}

#blazor-app-host[inert],
#blazor-app-host[inert] * {
    cursor: progress;
    pointer-events: none;
}

/* GroupRoom primary tab strip (Rick, 2026-10-24): scoped to .group-room-tabs
   so other nav-tabs (1:1 chat etc.) are untouched. */
.nav-tabs.group-room-tabs {
    margin-top: 1rem;
    padding: .35rem;
    gap: .25rem;
    background: #fff;
    border: 1px solid #ced4da;
    border-bottom: 3px solid var(--primary-color);
    border-radius: .5rem .5rem 0 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.nav-tabs.group-room-tabs .nav-item + .nav-item { margin-left: 0; }
.nav-tabs.group-room-tabs .nav-link {
    font-size: 1rem;
    font-weight: 600;
    padding: .55rem 1rem;
    color: var(--dark-color);
    background: transparent;
    border: 1px solid transparent;
    border-radius: .375rem;
}
.nav-tabs.group-room-tabs .nav-link i { font-size: 1.05rem; color: var(--primary-color); }
.nav-tabs.group-room-tabs .nav-link:hover {
    background: #e7f1ff;
    color: var(--primary-color);
}
.nav-tabs.group-room-tabs .nav-link.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(13,110,253,.35);
}
.nav-tabs.group-room-tabs .nav-link.active i { color: #fff; }

/* GroupRoom "Goal and context" card (Rick, 2026-10-24): scoped to .group-goal-card */
.group-goal-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-left: 4px solid var(--primary-color);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    max-width: 960px;
}
.group-goal-card .group-goal-header {
    font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: #6c757d; padding: 0.5rem 1rem; border-bottom: 1px solid #eef0f2; background: #fafbfc;
    border-top-right-radius: 0.5rem;
}
.group-goal-card .group-goal-header i { color: var(--primary-color); }
.group-goal-card .group-goal-body { padding: 0.75rem 1rem 0.25rem; color: #343a40; }
.group-goal-card .group-goal-body > :last-child,
.group-goal-card .group-goal-body p:last-child { margin-bottom: 0; }
.group-goal-card .group-goal-toggle { margin: 0 1rem 0.6rem; font-size: 0.85rem; }

/* GroupRoom: collapsible Group loop activity log (header toggles body) */
.group-loop-activity-toggle { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: .1rem .25rem; margin-left: -.25rem; border-radius: .25rem; cursor: pointer; color: inherit; }
.group-loop-activity-toggle:hover { background: rgba(0,0,0,.05); }
.group-loop-activity-toggle:focus-visible { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 1px; }
.group-loop-activity-chevron { font-size: .7rem; width: .8rem; color: var(--bs-secondary-color, #6c757d); }

/* Shared Memory System Processing step icon (Chat + WG Plan/Approval active section) */
.processing-status-pending-dot {
    font-size: 6px;
}
.wg-status-step {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wg-status-step .step-icon {
    width: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wg-approval-active-icon {
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 0.35rem;
}
/* Working Groups Plan: "Needs my sign-off" checkboxes.
   Same contrast treatment as .needed-permissions / Grant dialog — Bootstrap's
   default #dee2e6 hairline is nearly invisible on white plan rows. Also pin
   flex-shrink so the box does not collapse inside .wg-status-step flex rows. */
.wg-status-step .form-check-input[type="checkbox"],
#plan-so.form-check-input,
#new-item-signoff.form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid #6c757d;
    background-color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}

.wg-status-step .form-check-input[type="checkbox"]:checked,
#plan-so.form-check-input:checked,
#new-item-signoff.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.wg-status-step .form-check-input[type="checkbox"]:focus,
#plan-so.form-check-input:focus,
#new-item-signoff.form-check-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.3);
}

.wg-status-step .form-check-input[type="checkbox"]:disabled,
#plan-so.form-check-input:disabled,
#new-item-signoff.form-check-input:disabled {
    border-color: #adb5bd;
    background-color: #f1f3f5;
    cursor: not-allowed;
    opacity: 1;
}

.wg-status-step .form-check {
    flex-shrink: 0;
}