/*
 * Yard Dogs GI note-specific styles.
 * Form layout comes from intranet.css / ydForm classes.
 * Values come from /var/www/yardDogsNonPublic/intranet/intranetTheme.cfg
 */

.ydNotePanel {
    width: 100%;
    max-width: 100%;
    margin: var(--ydNotePanelPanelMargin);
    padding: 0;
    border: 0;
    background: transparent;
}

.ydNotePanelHeader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ydYardDogFormsFieldControlGap, 5px);
    margin-bottom: var(--ydYardDogFormsLayoutSectionTitleMarginBottom, 8px);
}

.ydNotePanelHeader .ydFormSectionTitle {
    margin-bottom: 0;
}

.ydNotePanelHint {
    margin: 2px 0 0;
    color: var(--ydBlue70);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
}

.ydNoteList {
    display: grid;
    gap: var(--ydNotePanelListGap);
    width: 100%;
    max-width: 100%;
}

.ydNoteEditor {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: var(--ydNotePanelEditorGap);
}

.ydNoteOptionsGrid {
    display: grid;
    grid-template-columns: var(--ydNotePanelOptionsGridColumns);
    gap: var(--ydNotePanelOptionsGap);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.ydNoteOptionItem {
    display: grid;
    gap: var(--ydYardDogFormsCompactSwitchItemGap, 2px);
    align-items: start;
    justify-items: var(--ydYardDogFormsCompactSwitchItemJustifyItems, center);
    min-width: 0;
}

.ydNoteOptionItem .ydFormSwitch {
    margin: 0;
}

.ydNoteExpirationControl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--ydYardDogFormsFieldControlGap, 5px);
    align-items: center;
}

.ydNoteExpirationSummaryText {
    color: var(--ydBlue90);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.ydNoteEditorActions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 0;
}

.ydNoteCard {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--ydNoteCardBorderRadius);
    padding: var(--ydNoteCardPadding);
}

.ydNoteCardLabel {
    display: block;
    margin: 0 0 4px;
    font-size: var(--ydNoteCardLabelFontSize);
    font-weight: 900;
}

.ydNoteCardBody {
    margin: 0;
    font-size: var(--ydNoteCardBodyFontSize);
    line-height: 1.34;
}

.ydNoteCardMeta {
    margin-top: 5px;
    font-size: var(--ydNoteCardMetaFontSize);
    line-height: 1.25;
    color: var(--ydBlue70);
}

.ydNoteCard--normal {
    border-color: var(--ydNoteCardNormalBorderColor);
    background: var(--ydNoteCardNormalBackground);
    color: var(--ydNoteCardNormalTextColor);
}

.ydNoteCard--normal .ydNoteCardLabel {
    color: var(--ydNoteCardNormalLabelColor);
}

.ydNoteCard--important {
    border-color: var(--ydNoteCardImportantBorderColor);
    background: var(--ydNoteCardImportantBackground);
    color: var(--ydNoteCardImportantTextColor);
}

.ydNoteCard--important .ydNoteCardLabel {
    color: var(--ydNoteCardImportantLabelColor);
}

.ydNoteCard--critical {
    border-color: var(--ydNoteCardCriticalBorderColor);
    background: var(--ydNoteCardCriticalBackground);
    color: var(--ydNoteCardCriticalTextColor);
}

.ydNoteCard--critical .ydNoteCardLabel {
    color: var(--ydNoteCardCriticalLabelColor);
}

@media (max-width: 380px) {
    .ydNoteOptionsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ydNoteExpirationControl {
        grid-template-columns: 1fr;
    }
}