/*
 * The reminder indicator and its sheet (spec 012 FR-018–FR-020, FR-023).
 *
 * ITS OWN STYLESHEET, AND THAT IS THE POINT. The indicator renders in two
 * shells — the tenant portal's workspace topbar and the shared
 * _ModuleShell.cshtml strip that every module page draws through — and FR-018
 * asks for one control, not two that resemble each other.
 *
 * These rules started inside erp-ui.css, which only the module shell loads. The
 * workspace layout links bootstrap, workspace.css and auth.css and never that
 * file, so the sheet rendered there with no positioning, no panel, and no
 * hiding: an open block of text sitting in the topbar. Moving the rules here and
 * linking this file from both layouts is what makes the two identical rather
 * than merely intended to be.
 *
 * Loading erp-ui.css into the workspace would have fixed it too, and would have
 * dragged a whole module UI kit — .btn, .card, .empty-state, .badge — into a
 * surface with its own design language in workspace.css. This file carries only
 * what the indicator needs.
 *
 * Tokens only, no invented colours. Both hosts define the same custom
 * properties, so the same rules resolve identically on either surface. The badge
 * uses the error token because a count is state, and status colours are reserved
 * for state; brand colours stay reserved for interactive intent.
 *
 * Direction is expressed with logical properties (inline-start / inline-end)
 * so the control mirrors correctly under dir="rtl".
 */

.reminder-indicator {
    position: relative;
    display: inline-flex;
}

.reminder-indicator-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600, #475467);
    background: none;
    border: 0;
    padding: 6px;
    border-radius: var(--r-md, 8px);
    cursor: pointer;
}

.reminder-indicator-button:hover {
    color: var(--gray-900, #101828);
    background: var(--gray-100, #F2F4F7);
}

.reminder-indicator-button:focus-visible {
    outline: 2px solid var(--brand-700, #1B6E63);
    outline-offset: 2px;
}

/* The count. Absent entirely at zero — hidden rather than shown as "0". */
.reminder-badge {
    position: absolute;
    inset-block-start: -2px;
    inset-inline-end: -2px;
    min-inline-size: 18px;
    padding: 0 5px;
    border-radius: var(--r-full, 9999px);
    background: var(--error-fg, #B42318);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.reminder-badge.is-empty,
.reminder-badge[hidden] {
    display: none;
}

/*
 * The panel. position:absolute is load-bearing rather than cosmetic — without
 * it the sheet is an ordinary block in the middle of the toolbar, which is
 * exactly how this looked before the stylesheet reached the workspace.
 */
.reminder-sheet {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    inline-size: min(320px, calc(100vw - 32px));
    max-block-size: 60vh;
    overflow-y: auto;
    z-index: 1050;
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--border, #EAECF0);
    border-radius: var(--r-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06));
    text-align: start;
}

/* Belt and braces: the attribute alone is the browser default, and any stray
   display rule on a container would defeat it. */
.reminder-sheet[hidden] {
    display: none;
}

.reminder-sheet-header {
    padding: 12px 14px;
    border-block-end: 1px solid var(--border, #EAECF0);
    font-weight: 600;
    font-size: .8125rem;
    color: var(--gray-700, #344054);
}

.reminder-sheet-body {
    padding: 4px;
}

.reminder-sheet-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Spec 013 FR-024: the row gained a 24px avatar, so the link is now
   avatar-beside-text. The name and its meta line keep their own 4px stack
   inside .reminder-sheet-body — nothing about either line changed. */
.reminder-sheet-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-md, 8px);
    color: inherit;
    text-decoration: none;
}

.reminder-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.reminder-sheet-link:hover {
    background: var(--gray-50, #F9FAFB);
}

.reminder-sheet-person {
    font-weight: 600;
    font-size: .875rem;
}

.reminder-sheet-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    color: var(--gray-500, #667085);
}

/*
 * Three distinct states, and they must never be confused for one another.
 * "Loading" and "couldn't load" are not answers; "nothing waiting" is. Rendering
 * the empty state for a failed fetch is how somebody misses a reminder they were
 * just told they had (unread-count-contract §6).
 */
.reminder-sheet-empty,
.reminder-sheet-loading,
.reminder-sheet-error {
    margin: 0;
    padding: 16px 12px;
    font-size: .8125rem;
    text-align: center;
}

.reminder-sheet-empty,
.reminder-sheet-loading {
    color: var(--gray-500, #667085);
}

.reminder-sheet-error {
    color: var(--error-fg, #B42318);
}

.reminder-sheet-all {
    display: block;
    padding: 10px 12px;
    border-block-start: 1px solid var(--border, #EAECF0);
    font-size: .8125rem;
    font-weight: 600;
    text-align: center;
    color: var(--brand-700, #1B6E63);
    text-decoration: none;
}

.reminder-sheet-all:hover {
    background: var(--gray-50, #F9FAFB);
    text-decoration: none;
}

/*
 * The module chip, used by the sheet and by the reminders list page. It lives
 * here rather than in workspace.css because the sheet renders inside modules
 * too, where workspace.css is never loaded — the same split that left the sheet
 * unstyled in the workspace, in the other direction.
 */
.badge-module {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r-full, 9999px);
    background: var(--gray-100, #F2F4F7);
    color: var(--gray-700, #344054);
    font-size: .6875rem;
    font-weight: 500;
    white-space: nowrap;
}