/* BizProCall Common Sense — validation feedback, avatars, submit state, mobile toasts
 *
 * Do NOT override stock Fomantic UI component colors (.ui.button, .ui.toast, etc.).
 * Exception: Common Sense toast typography (14px) and hidden progress bar — see common-sense.css.
 * Page-specific invalid-field colors live in page CSS (e.g. auth.css).
 */

/* —— Field wrap (added by common-sense.js when needed) —— */

.cs-field-wrap {
    position: relative;
}

/* —— Validation feedback ——
 *
 * Errors render as `<span class="ui red text cs-feedback">` below the field.
 * Fomantic Text only applies color on span tags — not div.
 */

/* —— Required marker —— */

.cs-feedback {
    font-size: 12px;
}

.cs-required {
    margin-left: 0.15em;
    color: #db2828;
}

/* —— Invalid inputs (generic; auth overrides in auth.css) —— */

input.cs-invalid,
select.cs-invalid,
textarea.cs-invalid {
    border-color: #db2828;
}

/* —— Submit loader state —— */

button.is-cs-submitting,
.ui.button.is-cs-submitting {
    position: relative;
    cursor: wait;
    min-width: 4.5rem;
}

button.is-cs-submitting:disabled,
.ui.button.is-cs-submitting:disabled {
    opacity: 0.85;
}

/* —— Toasts (Common Sense defaults — typography only, stock Fomantic colors) —— */

.ui.toast-container .ui.toast > .content {
    font-size: 14px;
    line-height: 1.4;
}

.ui.toast-container .ui.toast > .content .fas,
.ui.toast-container .ui.toast > .content > i.icon:not(.close) {
    font-size: 14px;
}

.ui.toast > .progress {
    display: none !important;
}

/* —— Avatar initials —— */

.cs-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 1;
    background: #e8e8e8;
    color: #333;
    user-select: none;
    text-transform: uppercase;
}

/* —— Mobile —— */

/*
 * Toasts must be fully responsive on small screens (Computer + Mobile).
 * Fomantic's `.top.center` container uses `left:50%; transform:translate(-50%,0)`
 * — on mobile we stretch the container to the viewport instead, so the
 * `transform` MUST be reset or the toast drifts off-center / off-screen.
 */
@media (max-width: 575.98px) {
    .ui.toast-container.top.right,
    .ui.toast-container.top.left,
    .ui.toast-container.top.center,
    .ui.toast-container.bottom.right,
    .ui.toast-container.bottom.left,
    .ui.toast-container.bottom.center {
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }

    .ui.toast-container .toast-box,
    .ui.toast-container .ui.toast {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* —— Responsive tables (desktop table + mobile cards) —— */

.app-table-responsive {
    container-type: inline-size;
    container-name: app-table;
}

.app-mobile-list {
    display: none;
}

.app-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.app-table-wrapper .ui.table {
    min-width: 960px;
}

.app-table-wrapper .ui.table th,
.app-table-wrapper .ui.table td {
    white-space: nowrap;
}

.app-table-wrapper .cs-truncate {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.app-table-scroll-hint {
    display: none;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
    align-items: center;
    gap: 6px;
}

.app-mobile-card {
    border: 1px solid #e3e5ea;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Card row hover — same tokens as dashboard `.app-card-row` (Chapter 16) */
.app-mobile-card:hover,
.app-mobile-card:focus-within {
    border-color: var(--app-card-row-hover-border, var(--brand-gold, #f6b221));
    box-shadow: var(--app-card-row-hover-ring, 0 0 0 1px rgba(246, 178, 33, 0.35));
}

@media (prefers-reduced-motion: reduce) {
    .app-mobile-card {
        transition: none;
    }
}

.app-mobile-card:last-child {
    margin-bottom: 0;
}

.app-mobile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
}

.app-mobile-top strong {
    font-weight: 600;
    color: #1b2437;
}

.app-mobile-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 4px 0;
}

.app-mobile-row .label {
    color: #6b7280;
    flex-shrink: 0;
}

.app-mobile-row > span:last-child {
    text-align: right;
    min-width: 0;
    word-break: break-word;
}

.app-mobile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e3e5ea;
}

.app-table-responsive--embed .app-mobile-card {
    padding: 10px 12px;
    margin-bottom: 8px;
}

.app-table-responsive--embed .app-mobile-top {
    margin-bottom: 6px;
}

/* Card swap when the table container is too narrow (e.g. 1024px laptop + sidebar rail).
   ~900px fits wide multi-column tables; narrower layouts get cards regardless of viewport. */
@container app-table (max-width: 900px) {
    .app-table-scroll-hint,
    .app-table-wrapper {
        display: none;
    }

    .app-mobile-list {
        display: block;
    }
}