/* Requests.css - Inbox workspace module-specific styles */
/* Atoms/molecules/organisms handle their own styling. */
/* Only custom layout and module-specific overrides here. */

/* ==================================================================
   INBOX HOST (BL_044 Phase 3) -- sub-tab structure
   ==================================================================
   Tasks + Requests sub-tabs sit under a SegmentedControl at the top
   of the Inbox host. Tasks panel uses list-left / teams-right; the
   Requests sub-tab content is the legacy three-panel layout below.
*/

.inbox-host {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
    min-height: 0;
}

.inbox-subtab-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* No left padding -- segmented control sits flush against the parent's
       left edge. Right padding kept so action buttons don't kiss the edge. */
    padding: 0 var(--space-3) 0 0;
}

.inbox-subtab-nav.segmented-control {
    max-width: 240px;
}

.inbox-subtab-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.inbox-subtab-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* -- Tasks workbench: list left, optional teams pane right (inbox mode only) -- */

.inbox-tasks-workbench {
    display: grid;
    gap: var(--space-3);
    flex: 1;
    min-height: 0;
}

.inbox-tasks-workbench.with-pane {
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
}

.inbox-tasks-workbench.no-pane {
    grid-template-columns: minmax(0, 1fr);
}

.inbox-tasks-list {
    min-height: 0;
    overflow: auto;
}

.inbox-tasks-right-pane {
    min-height: 0;
    overflow: auto;
}

/* Empty-only scaffolding: inbox sub-tab only. Draws a Panel-style border
   around each pane when its content is empty so the user can see where the
   list / team columns would render. Matches Panel.css tokens verbatim. */
.inbox-tasks-list.is-empty,
.inbox-tasks-right-pane.is-empty {
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-xl);
    padding: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
    .inbox-tasks-workbench.with-pane {
        grid-template-columns: minmax(0, 1fr);
    }
    .inbox-tasks-right-pane {
        display: none;
    }
}

/* -- Tasks row header: now uses ExpandableRowHeader molecule -- */

/* -- Tasks detail (expanded row content) -- */

.inbox-tasks-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.inbox-tasks-detail-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
}

@media (max-width: 640px) {
    .inbox-tasks-detail-rows {
        grid-template-columns: 1fr;
    }
}

.inbox-tasks-detail-description {
    background-color: var(--bg-layer-2);
    padding: var(--space-3);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--line-height-loose);
}

.inbox-tasks-detail-note {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-style: italic;
}

/* ==================================================================
   REPAIR CREATION MODAL (hoisted from modules/Repairs/Repairs.css)
   ================================================================== */

.repairs-creation-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Generic Task creation modal (BL_047) -- single-column form. */
.task-creation-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.task-creation-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.task-creation-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.task-creation-row--three {
    grid-template-columns: 1fr 1fr 1fr;
}

.repairs-creation-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.repairs-creation-row--three {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Reserve vertical space for the location field so the modal does not
   reflow when switching between Room / Location / Other tabs. Height
   equals one FormField row (label + input + gap). */
.repairs-location-slot {
    min-height: var(--space-15);
}

.repairs-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1_5);
}

.repairs-location-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.repairs-helper-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.repairs-helper-title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.repairs-helper-detail {
    font-size: var(--text-sm);
    color: var(--text-body);
    margin: 0;
}

/* -- Description field with inline photo trigger -- */

.repairs-notes-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.repairs-photo-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1_5);
}

.repairs-photo-trigger {
    color: var(--text-muted);
}

.repairs-photo-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0_5) var(--space-2);
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-full);
    font-size: var(--text-xs);
    color: var(--text-body);
    line-height: 1;
}

.repairs-photo-chip-icon {
    color: var(--text-muted);
}

.repairs-photo-chip-num {
    font-weight: var(--font-weight-semibold);
}

.repairs-photo-chip-remove {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin-left: var(--space-0_5);
    cursor: pointer;
    font-size: var(--text-base);
    line-height: 1;
    color: var(--text-muted);
}

.repairs-photo-chip-remove:hover {
    color: var(--color-error);
}

.repairs-photo-input-hidden {
    display: none;
}

textarea.repairs-notes-textarea {
    min-height: var(--space-12);
    resize: vertical;
}

/* ==================================================================
   REPAIR DETAIL PANE (ported from main's RepairsQueue.css)
   ==================================================================
   The supervisor repair detail surface lives inside the expanded row
   of the inbox list. All class names are renamed from the legacy
   `.rq-*` namespace to `.inbox-tasks-*` so the rules don't collide
   with anything else in the codebase.
*/

.inbox-tasks-detail-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
}

.inbox-tasks-detail-col {
    display: flex;
    flex-direction: column;
}

/* Explicit-pair grid for the repair detail identity + status blocks.
   Each cell is a single DetailRow; .cell-full spans both columns so
   long values (Reported By name, Location, Closure Reason) get the
   full width while short fields pair up on a single row. */
.inbox-tasks-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
}

.inbox-tasks-detail-cell {
    min-width: 0;
}

.inbox-tasks-detail-cell-full {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .inbox-tasks-detail-grid { grid-template-columns: 1fr; }
}

/* Progress row -- sits immediately below the photo thumbnails, full-width. */
.inbox-tasks-detail-progress {
    padding-top: var(--space-2);
}

/* Narrow sidebar context: tighten label column so values get more room. */
.inbox-tasks-detail .detail-row-label {
    min-width: 80px;
}

.inbox-tasks-detail-category-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}

.inbox-tasks-detail-section {
    padding-top: var(--space-3);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

.inbox-tasks-detail-label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* -- Notes / description ----------------------------------------- */

.inbox-tasks-detail-notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.inbox-tasks-detail-notes p {
    font-size: var(--text-sm);
    color: var(--text-body);
    margin: 0;
}

.inbox-tasks-notes-empty {
    color: var(--text-muted);
    font-style: italic;
}

.inbox-tasks-notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.inbox-tasks-notes-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--duration-150) var(--easing-out),
                color var(--duration-150) var(--easing-out);
}

.inbox-tasks-notes-edit-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.inbox-tasks-notes-textarea {
    width: 100%;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--text-body);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    padding: var(--space-2);
    resize: vertical;
    min-height: 80px;
}

.inbox-tasks-notes-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.inbox-tasks-notes-edit-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

/* -- Comments ---------------------------------------------------- */

.inbox-tasks-comments {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.inbox-tasks-comments-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.inbox-tasks-comments-empty {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
}

.inbox-tasks-comment-entry {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

/* Body leads -- primary text + line height for readability. */
.inbox-tasks-comment-text {
    font-size: var(--text-sm);
    color: var(--text-body);
    line-height: var(--line-height-loose);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Lean icon-led meta below the body. Mirrors DetailRow / history conventions. */
.inbox-tasks-comment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.inbox-tasks-comment-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
}

.inbox-tasks-comment-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.inbox-tasks-comment-textarea {
    width: 100%;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--text-body);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    padding: var(--space-2);
    resize: vertical;
    min-height: 48px;
}

.inbox-tasks-comment-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.inbox-tasks-comment-input > button {
    align-self: flex-end;
}

.inbox-tasks-detail-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    padding-top: var(--space-2);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

/* -- Change history --------------------------------------------- */

.inbox-tasks-history {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.inbox-tasks-history-entry {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-body);
}

.inbox-tasks-history-time {
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 130px;
}

.inbox-tasks-history-action {
    font-weight: var(--font-weight-semibold);
}

.inbox-tasks-history-by {
    color: var(--text-muted);
}

/* -- Photos (inline grouped thumbs + lightbox modal) ------------ */

.inbox-tasks-photos-section {
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.inbox-tasks-photo-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.inbox-tasks-photo-type-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.inbox-tasks-photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.inbox-tasks-photo-thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    cursor: pointer;
}

.inbox-tasks-photo-thumb:hover {
    border-color: var(--color-primary);
}

.inbox-tasks-photo-full img {
    max-width: 100%;
    max-height: 70vh;
    display: block;
    margin: 0 auto;
    border-radius: var(--border-radius-md);
}

/* ============================================================
   TASK EXECUTION MODAL (right-pane team-panel row click)
   ============================================================ */

.task-exec-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 320px;
}

.task-exec-pool {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.task-exec-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-md);
    font-size: var(--text-sm);
}

.task-exec-banner-locked {
    background: var(--color-warning-light);
    border: var(--border-width-1) solid var(--color-warning);
    color: var(--color-text-primary);
}

.task-exec-banner-busy {
    background: var(--bg-surface-muted);
    border: var(--border-width-1) solid var(--border-subtle);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Step renderer is intrinsically mobile-styled. Centre it inside the wider
   modal and cap its width so it reads like the phone view. */
.task-exec-mount {
    display: flex;
    justify-content: center;
}

.task-exec-mount > * {
    max-width: 420px;
    width: 100%;
}