/* Shared, reusable UI component classes built on top of the design tokens in mc-variables.css. */

/*
 * Action link: an <a> that performs an action (Edit, Delete, Back, ...) rather than navigating.
 * Blue link colour by default; the --danger modifier signals a destructive action.
 * Uses fixed link/danger tokens, never the per-store theme-primary colour (that is reserved for buttons).
 */
.mc-action-link,
.mc-action-link:visited {
    align-items: center;
    color: var(--mc-link-color, #006fce);
    display: inline-flex;
    gap: 7px;
    text-decoration: none;
}

.mc-action-link:hover,
.mc-action-link:focus-visible {
    color: var(--mc-link-color-hover, #0051c8);
    text-decoration: underline;
}

.mc-action-link--danger,
.mc-action-link--danger:visited {
    color: var(--mc-danger-color, #e21b2d);
}

.mc-action-link--danger:hover,
.mc-action-link--danger:focus-visible {
    color: var(--mc-danger-color-hover, #b81220);
    text-decoration: underline;
}

/*
 * Status text colours: apply the semantic colour to any element (status messages,
 * inline notes, ...). Colour only — add boxing/padding per element where needed.
 */
.mc-text-success {
    color: var(--mc-success-color, #1a7f37);
}

.mc-text-warning {
    color: var(--mc-warning-color, #9a6700);
}

.mc-text-info {
    color: var(--mc-info-color, #0969da);
}

.mc-text-danger {
    color: var(--mc-danger-color, #e21b2d);
}

/* Lucide-ikon foran en seksjonstittel i sidebaren */
.sidebar-heading-icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}

.sidebar-heading-icon__svg {
    display: block;
    width: 20px;
    height: 20px;
}

/*
 * Alpine.js: hides elements until Alpine has initialised them.
 * Put x-cloak on markup whose server-rendered state would flash wrong before boot.
 */
[x-cloak] {
    display: none !important;
}

/*
 * Ordering-window notice in the header. Calm on purpose: this is information
 * about when the customer can order, not an incident. The service message
 * (.service-msg) stays red and keeps its warning symbol — do not merge the two.
 */
.mc-order-window {
    align-items: center;
    background: var(--mc-surface-color, #fff);
    border-bottom: 1px solid var(--mc-border-color, #dfe3e8);
    color: var(--mc-text-color, #1f2328);
    display: flex;
    font-size: 14px;
    gap: 8px;
    justify-content: center;
    line-height: 1.4;
    padding: 8px 16px;
    text-align: center;
}

/* display:flex would otherwise win over the hidden attribute the shell ships with. */
.mc-order-window[hidden] {
    display: none;
}

.mc-order-window__icon {
    flex: none;
    height: 18px;
    width: 18px;
}

/* Not open yet: same shape, quieter still, so it does not read as a call to action. */
.mc-order-window--upcoming {
    color: var(--mc-text-muted-color, #5b6475);
}