/*
 * MuslimHub admin styles (loaded from _Host.cshtml, all classes mh-prefixed).
 *
 * The mobile rule: every data grid has two presentations from one source —
 * a table at >= 900px and stacked cards below. Never a horizontally
 * scrolling table on a phone; touch targets >= 44px.
 */

.mh-serif {
    font-family: 'Source Serif 4', Georgia, serif;
}

.mh-time {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
}

.mh-time-iqama {
    color: var(--mud-palette-text-secondary);
}

/* --- Chrome ------------------------------------------------------------- */

.mh-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mh-logo {
    height: 28px;
    width: 28px;
    object-fit: contain;
    display: block;
}

.mh-appbar a.mh-brand,
.mh-appbar a.mh-brand .mud-typography {
    color: var(--mud-palette-text-primary);
}

.mh-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

.mh-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-text,
.mh-drawer .mud-nav-group-title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.mh-drawer .mud-nav-link.active {
    background: #E8F0EA;
    color: #174B32;
    font-weight: 600;
}

/* --- Dual-presentation grid --------------------------------------------- */

.mh-grid-table {
    display: block;
}

.mh-grid-cards {
    display: none;
}

@media (max-width: 899.98px) {
    .mh-grid-table {
        display: none;
    }

    .mh-grid-cards {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

.mh-table {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.mh-table th {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.mh-table td {
    white-space: nowrap;
}

.mh-row-clickable {
    cursor: pointer;
}

/* Friday gets the accent treatment. */
.mh-row-jumuah {
    background: #F4F9F5;
    box-shadow: inset 3px 0 0 #177532;
}

.mh-grid-empty {
    padding: 24px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* --- Cards (phone presentation) ----------------------------------------- */

.mh-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mh-card-tappable {
    cursor: pointer;
}

.mh-card-jumuah {
    background: #F4F9F5;
    border-color: #B9D4C0;
}

.mh-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mh-card-title {
    font-weight: 700;
    font-size: 0.95rem;
}

.mh-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: #E8F0EA;
    color: #174B32;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.mh-badge-muted {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
}

/* --- Prayer chips on day cards ------------------------------------------ */

.mh-prayer-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.mh-prayer-chip {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 6px 8px;
    background: var(--mud-palette-surface);
    min-height: 44px;
}

.mh-card-jumuah .mh-prayer-chip {
    border-color: #DBEADF;
}

.mh-prayer-chip .mh-prayer-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.mh-prayer-chip .mh-prayer-iqama {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* --- Day-of-week chips (announcements) ----------------------------------- */

.mh-day-chips {
    display: flex;
    gap: 5px;
}

.mh-day-chip {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--mud-palette-background);
    color: #B9BFB9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
}

.mh-day-chip.mh-on {
    background: #177532;
    color: #FFFFFF;
    font-weight: 700;
}

.mh-day-chips-sm .mh-day-chip {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 0.62rem;
}

/* --- Public landing ------------------------------------------------------ */

.mh-hero {
    padding: 40px 0 8px;
}

.mh-badges {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* The official badges carry different built-in padding; these heights make
   them visually equal. */
.mh-badge-google {
    height: 72px;
    display: block;
}

.mh-badge-apple {
    height: 48px;
    display: block;
    border-radius: 10px;
}

.mh-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 32px;
}

.mh-features .mh-card {
    gap: 6px;
}

@media (max-width: 899.98px) {
    .mh-features {
        grid-template-columns: 1fr;
    }
}

.mh-admin-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 16px 20px;
    background: #F4F9F5;
    border-color: #DBEADF;
}

/* --- Misc ---------------------------------------------------------------- */

.mh-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.mh-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 16px;
}