/* ==========================================================================
   BUTTONS — Unified button & icon-button system
   Design language: flat, subtle tonal backgrounds, soft hover states
   Reference: users module (flat design, subtle colors)
   ========================================================================== */


/* ==========================================================================
   1. BASE BUTTON  (.gc-btn)
   ========================================================================== */

/* Planner avatars are user-filter buttons in both Installation and Paving boards. */
.installation-board button.installation-avatar {
    background: #ffffff;
    border-color: #d1d5db;
    color: #111827 !important;
    text-shadow: none;
}
.installation-board button.installation-avatar.is-active,
.installation-board button.installation-avatar.is-active:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff !important;
}
[data-theme="dark"] .installation-board button.installation-avatar {
    background: var(--erp-dark-surface-control, var(--fluent-colorNeutralBackground2)) !important;
    border-color: var(--erp-dark-border, var(--fluent-colorNeutralStrokeAlpha)) !important;
    color: var(--erp-dark-text-primary, var(--fluent-colorNeutralForegroundOnBrand)) !important;
}
[data-theme="dark"] .installation-board button.installation-avatar.is-active,
[data-theme="dark"] .installation-board button.installation-avatar.is-active:hover {
    background: var(--fluent-colorBrandBackgroundHover) !important;
    border-color: var(--fluent-colorBrandStroke1) !important;
    color: var(--fluent-colorNeutralForegroundOnBrand) !important;
}

:root {
    --gc-action-blue: #2463ea;
    --gc-action-blue-hover: #1d4ed8;
    --gc-action-blue-focus: rgba(36, 99, 234, 0.18);
    --gc-action-blue-active-ring: rgba(36, 99, 234, 0.35);
}

/* Stock movement note previews reuse the existing note overlay trigger. */
.svl-info-btn.stock-movement-note-button {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--gc-action-blue);
    font: inherit;
    cursor: pointer;
}

.svl-info-btn.stock-movement-note-button:hover,
.svl-info-btn.stock-movement-note-button:focus-visible {
    background: transparent;
    color: var(--gc-action-blue-hover);
    text-decoration: underline;
}

.svl-info-btn.stock-movement-note-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

html[data-theme="dark"] .svl-info-btn.stock-movement-note-button {
    color: var(--md-primary-hover, var(--fluent-colorBrandForeground1));
}

.boq-page .boq-child-overview-description-button {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1d4ed8;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.boq-page .boq-child-overview-description-button span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.boq-page .boq-child-overview-description-button:hover,
.boq-page .boq-child-overview-description-button:focus-visible {
    color: #1e40af;
    text-decoration: underline;
}

.boq-page .boq-child-overview-description-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

html[data-theme="dark"] .boq-page .boq-child-overview-description-button {
    color: var(--md-primary-hover, var(--fluent-colorBrandForeground1));
}

.gc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: var(--gc-control-height, 36px);
    padding: 7px 12px;
    border-radius: 4px;
    font-size: var(--gc-base-font-size, 14px);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.gc-btn:focus {
    outline: none;
    box-shadow: none;
}

.gc-btn:focus-visible {
    outline: 2px solid rgba(71, 85, 105, 0.25);
    outline-offset: 2px;
}

.gc-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}


/* --------------------------------------------------------------------------
   1a. Button colour variants  (flat tonal — subtle background + coloured text)
   -------------------------------------------------------------------------- */

/* Success — soft green tonal (matches .users-create-trigger / job_functions reference) */
.gc-btn.success {
    color: #ffffff;
    background: var(--gc-fluent-success, #16a34a);
    border-color: var(--gc-fluent-success, #16a34a);
    box-shadow: none;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease,
                transform 180ms ease, color 180ms ease;
}
.gc-btn.success:hover {
    color: #ffffff;
    background: var(--gc-fluent-success-hover, #15803d);
    border-color: var(--gc-fluent-success-hover, #15803d);
    box-shadow: none;
    transform: translateY(-1px);
}
.gc-btn.success:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc-fluent-success, #16a34a) 18%, transparent);
}
.gc-btn.success,
.gc-btn.success .material-icons,
.gc-btn.success .material-icons-round {
    color: #ffffff;
}

/* 2FA setup/start action - yellow action variant. */
.gc-2fa-enable {
    color: #111827;
    background: #ffda48;
    border-color: #ffda48;
    box-shadow: none;
}
.gc-2fa-enable:hover,
.gc-2fa-enable:focus-visible {
    color: #111827;
    background: #f5cd2e;
    border-color: #f5cd2e;
}
.gc-2fa-enable,
.gc-2fa-enable .material-icons,
.gc-2fa-enable .material-icons-round {
    color: #111827;
}
.gc-2fa-enable:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 218, 72, 0.24);
}

/* Create — subtle green action for add/create flows */
.gc-btn.create {
    color: #2f6f49;
    background: #e7f3ea;
    border-color: rgba(52, 129, 84, 0.2);
    box-shadow: 0 8px 20px rgba(47, 111, 73, 0.08);
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease,
                transform 180ms ease, color 180ms ease;
}
.gc-btn.create:hover {
    color: #275c3b;
    background: #dcecdf;
    border-color: rgba(52, 129, 84, 0.32);
    box-shadow: 0 12px 24px rgba(47, 111, 73, 0.12);
    transform: translateY(-1px);
}
.gc-btn.create:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(74, 163, 102, 0.16), 0 12px 24px rgba(47, 111, 73, 0.12);
}
.gc-btn.create,
.gc-btn.create .material-icons,
.gc-btn.create .material-icons-round {
    color: #2f6f49;
}

/* Primary — soft slate tonal */
.gc-btn.primary {
    color: #1e293b;
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.gc-btn.primary:hover {
    color: #0f172a;
    background: #e2e8f0;
    border-color: #94a3b8;
}
.gc-btn.primary,
.gc-btn.primary .material-icons,
.gc-btn.primary .material-icons-round {
    color: #1e293b;
}

/* Filter drawer reset buttons use the shared blue accent. */
.ops-drawer-filter-actions .gc-btn.primary,
.stock-filter-drawer-actions .gc-btn.primary {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
    color: #ffffff;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: none;
}
.ops-drawer-filter-actions .gc-btn.primary:hover,
.stock-filter-drawer-actions .gc-btn.primary:hover {
    color: #ffffff;
    background: #1d4ed8;
    border-color: #1d4ed8;
}
.ops-drawer-filter-actions .gc-btn.primary .material-icons,
.ops-drawer-filter-actions .gc-btn.primary .material-icons-round,
.stock-filter-drawer-actions .gc-btn.primary .material-icons,
.stock-filter-drawer-actions .gc-btn.primary .material-icons-round {
    color: inherit;
}

/* Stock reservations — shared blue accent for workorder entry points */
.gc-btn.stock-reservations-btn {
    color: #ffffff;
    background: var(--gc-action-blue, #2463ea);
    border-color: var(--gc-action-blue, #2463ea);
    box-shadow: none;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease,
                transform 180ms ease, color 180ms ease;
}
.gc-btn.stock-reservations-btn:hover {
    color: #ffffff;
    background: var(--gc-action-blue-hover, #1d4ed8);
    border-color: var(--gc-action-blue-hover, #1d4ed8);
    box-shadow: none;
    transform: translateY(-1px);
}
.gc-btn.stock-reservations-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--gc-action-blue-focus, rgba(36, 99, 234, 0.18));
}
.gc-btn.stock-reservations-btn,
.gc-btn.stock-reservations-btn .material-icons,
.gc-btn.stock-reservations-btn .material-icons-round {
    color: #ffffff;
}

/* Pending warehouse requests — shared blue accent used on stock movement approval entry points */
.gc-btn.sm-open-requests-btn {
    color: #ffffff;
    background: var(--gc-action-blue, #2463ea);
    border: 1px solid var(--gc-action-blue, #2463ea);
    box-shadow: none;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease,
                transform 180ms ease, color 180ms ease;
}
.gc-btn.sm-open-requests-btn:hover {
    color: #ffffff;
    background: var(--gc-action-blue-hover, #1d4ed8);
    border-color: var(--gc-action-blue-hover, #1d4ed8);
    box-shadow: none;
    transform: translateY(-1px);
}
.gc-btn.sm-open-requests-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--gc-action-blue-focus, rgba(36, 99, 234, 0.18));
}
.gc-btn.sm-open-requests-btn.is-active {
    box-shadow: 0 0 0 2px var(--gc-action-blue-active-ring, rgba(36, 99, 234, 0.35));
}
.gc-btn.sm-open-requests-btn,
.gc-btn.sm-open-requests-btn .material-icons,
.gc-btn.sm-open-requests-btn .material-icons-round {
    color: #ffffff;
}

/* Save — solid green action for primary save/submit flows */
.gc-btn.save {
    color: #ffffff;
    background: var(--gc-fluent-success, #16a34a);
    border-color: var(--gc-fluent-success, #16a34a);
    box-shadow: none;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease,
                transform 180ms ease, color 180ms ease;
}
.gc-btn.save:hover {
    color: #ffffff;
    background: var(--gc-fluent-success-hover, #15803d);
    border-color: var(--gc-fluent-success-hover, #15803d);
    box-shadow: none;
    transform: translateY(-1px);
}
.gc-btn.save:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc-fluent-success, #16a34a) 18%, transparent);
}
.gc-btn.save,
.gc-btn.save .material-icons,
.gc-btn.save .material-icons-round {
    color: #ffffff;
}

/* Solid modifier — opt-in filled intent buttons for detail/action bars */
.gc-btn.gc-btn-solid {
    box-shadow: none;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease,
                transform 180ms ease, color 180ms ease;
}

.gc-btn.gc-btn-solid:hover {
    box-shadow: none;
    transform: translateY(-1px);
}

.gc-btn.gc-btn-solid:focus-visible {
    outline: 2px solid rgba(71, 85, 105, 0.25);
    outline-offset: 2px;
    box-shadow: none;
}

.gc-btn.gc-btn-solid.success,
.gc-btn.gc-btn-solid.save,
.gc-btn.gc-btn-solid.create {
    color: #ffffff;
    background: var(--gc-fluent-success, #16a34a);
    border-color: var(--gc-fluent-success, #16a34a);
}

.gc-btn.gc-btn-solid.success:hover,
.gc-btn.gc-btn-solid.save:hover,
.gc-btn.gc-btn-solid.create:hover {
    color: #ffffff;
    background: var(--gc-fluent-success-hover, #15803d);
    border-color: var(--gc-fluent-success-hover, #15803d);
}

.gc-btn.gc-btn-solid.primary,
.gc-btn.gc-btn-solid.secondary {
    color: #ffffff;
    background: #2563eb;
    border-color: #2563eb;
}

.gc-btn.gc-btn-solid.primary:hover,
.gc-btn.gc-btn-solid.secondary:hover {
    color: #ffffff;
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.gc-btn.gc-btn-solid.danger,
.gc-btn.gc-btn-solid.tonal-danger {
    color: #ffffff;
    background: #dc2626;
    border-color: #dc2626;
}

.gc-btn.gc-btn-solid.danger:hover,
.gc-btn.gc-btn-solid.tonal-danger:hover {
    color: #ffffff;
    background: #b91c1c;
    border-color: #b91c1c;
}

.gc-btn.gc-btn-solid.neutral,
.gc-btn.gc-btn-solid.tonal-cancel {
    color: #ffffff;
    background: #64748b;
    border-color: #64748b;
}

.gc-btn.gc-btn-solid.neutral:hover,
.gc-btn.gc-btn-solid.tonal-cancel:hover {
    color: #ffffff;
    background: #475569;
    border-color: #475569;
}

.gc-btn.gc-btn-solid.acties,
.gc-btn.gc-btn-solid.tonal-warning {
    color: #111827;
    background: #ffda48;
    border-color: #ffda48;
}

.gc-btn.gc-btn-solid.acties:hover,
.gc-btn.gc-btn-solid.tonal-warning:hover {
    color: #111827;
    background: #f5cd2e;
    border-color: #f5cd2e;
}

.gc-btn.gc-btn-solid.success .material-icons,
.gc-btn.gc-btn-solid.success .material-icons-round,
.gc-btn.gc-btn-solid.save .material-icons,
.gc-btn.gc-btn-solid.save .material-icons-round,
.gc-btn.gc-btn-solid.create .material-icons,
.gc-btn.gc-btn-solid.create .material-icons-round,
.gc-btn.gc-btn-solid.primary .material-icons,
.gc-btn.gc-btn-solid.primary .material-icons-round,
.gc-btn.gc-btn-solid.secondary .material-icons,
.gc-btn.gc-btn-solid.secondary .material-icons-round,
.gc-btn.gc-btn-solid.danger .material-icons,
.gc-btn.gc-btn-solid.danger .material-icons-round,
.gc-btn.gc-btn-solid.tonal-danger .material-icons,
.gc-btn.gc-btn-solid.tonal-danger .material-icons-round,
.gc-btn.gc-btn-solid.neutral .material-icons,
.gc-btn.gc-btn-solid.neutral .material-icons-round,
.gc-btn.gc-btn-solid.tonal-cancel .material-icons,
.gc-btn.gc-btn-solid.tonal-cancel .material-icons-round {
    color: #ffffff;
}

.gc-btn.gc-btn-solid.acties .material-icons,
.gc-btn.gc-btn-solid.acties .material-icons-round,
.gc-btn.gc-btn-solid.tonal-warning .material-icons,
.gc-btn.gc-btn-solid.tonal-warning .material-icons-round {
    color: #111827;
}

/* Save FAB — floating save/submit action */
.gc-save-fab {
    border: none;
    background: var(--gc-fluent-success, #16a34a);
    color: #ffffff;
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.25s ease;
}

.gc-save-fab .material-icons,
.gc-save-fab .material-icons-round {
    color: #ffffff;
}

.gc-save-fab:hover:not(:disabled) {
    background: var(--gc-fluent-success-hover, #15803d);
    box-shadow: none;
    transform: scale(1.06);
}

.gc-save-fab:active:not(:disabled) {
    transform: scale(0.96);
    box-shadow: none;
}

.gc-save-fab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--gc-fluent-success, #16a34a) 28%, transparent);
    outline-offset: 3px;
}

/* Secondary — soft blue tonal */
.gc-btn.secondary {
    color: #1e40af;
    background: #dbeafe;
    border-color: #bfdbfe;
}
.gc-btn.secondary:hover {
    color: #1e3a8a;
    background: #c7d7fe;
    border-color: #a5b4fc;
}
.gc-btn.secondary,
.gc-btn.secondary .material-icons,
.gc-btn.secondary .material-icons-round {
    color: #1e40af;
}

/* Finish — solid blue completion action */
.gc-btn.finish {
    color: #ffffff;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: none;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease,
                transform 180ms ease, color 180ms ease;
}
.gc-btn.finish:hover {
    color: #ffffff;
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: none;
    transform: translateY(-1px);
}
.gc-btn.finish:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}
.gc-btn.finish,
.gc-btn.finish .material-icons,
.gc-btn.finish .material-icons-round {
    color: #ffffff;
}

/* Danger — soft red tonal */
.gc-btn.danger {
    color: #9f1239;
    background: #fce7ef;
    border-color: #f7cad8;
}
.gc-btn.danger:hover {
    color: #881337;
    background: #fbdbe7;
    border-color: #f3b8cc;
}
.gc-btn.danger,
.gc-btn.danger .material-icons,
.gc-btn.danger .material-icons-round {
    color: #9f1239;
}

/* --------------------------------------------------------------------------
   1b. Execution-time pill  (.gc-exec-pill)
   Single morphing Start/Stop button.
   Used in the work_orders detail header.
   -------------------------------------------------------------------------- */
.gc-exec-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 128px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.gc-exec-pill .gc-exec-pill-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.gc-exec-pill .material-icons-round {
    font-size: 20px;
}

/* Idle — ready to start (filled green, matches .gc-btn.success) */
.gc-exec-pill.is-idle,
.gc-exec-pill.is-idle .material-icons-round {
    color: #ffffff;
}
.gc-exec-pill.is-idle {
    background: var(--gc-fluent-success, #16a34a);
    border-color: var(--gc-fluent-success, #16a34a);
}
.gc-exec-pill.is-idle:hover {
    background: var(--gc-fluent-success-hover, #15803d);
    border-color: var(--gc-fluent-success-hover, #15803d);
    transform: translateY(-1px);
}

/* Running — ready to stop (filled red) */
.gc-exec-pill.is-running,
.gc-exec-pill.is-running .material-icons-round {
    color: #ffffff;
}
.gc-exec-pill.is-running {
    background: #dc2626;
    border-color: #dc2626;
}
.gc-exec-pill.is-running:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    transform: translateY(-1px);
}

/* Completed — both times recorded (neutral, non-interactive) */
.gc-exec-pill.is-completed,
.gc-exec-pill.is-completed .material-icons-round {
    color: #475569;
}
.gc-exec-pill.is-completed {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.gc-exec-pill[disabled] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}
.gc-exec-pill.is-completed[disabled] {
    opacity: 1;
}

/* Acties — amber tonal (used for action-menu triggers in operations, boq, sites) */
.gc-btn.acties {
    color: #111827;
    background: #ffda48;
    border-color: #ffda48;
}
.gc-btn.acties:hover {
    color: #111827;
    background: #f5cd2e;
    border-color: #f5cd2e;
}
[data-theme="dark"] .gc-btn.warning,
.gc-btn.acties,
.gc-btn.acties .material-icons,
.gc-btn.acties .material-icons-round {
    color: var(--fluent-colorNeutralForeground1Static, #111827);
}

/* Neutral — soft grey tonal */
.gc-btn.neutral {
    color: #475569;
    background: #ffffff;
    border-color: #dddedd;
}
.gc-btn.neutral:hover {
    color: #334155;
    background: #f8f8f8;
    border-color: #dddedd;
}

.gc-btn.neutral,
.gc-btn.neutral .material-icons,
.gc-btn.neutral .material-icons-round {
    color: #475569;
}

.gc-btn.icon-only-primary {
    width: var(--gc-icon-btn-size, 36px);
    height: var(--gc-icon-btn-size, 36px);
    min-width: var(--gc-icon-btn-size, 36px);
    padding: 0 !important;
    justify-content: center;
    gap: 0;
    color: #ffffff;
    background: var(--gc-fluent-primary, #2563eb);
    border: 1px solid var(--gc-fluent-primary, #2563eb);
    border-radius: 4px;
}

.gc-btn.icon-only-primary .material-icons,
.gc-btn.icon-only-primary .material-icons-round {
    color: #ffffff;
}

.gc-btn.icon-only-primary:hover {
    color: #ffffff;
    background: #1a5fd0;
    border-color: #1a5fd0;
}


/* --------------------------------------------------------------------------
   1b. Extra tonal variants
   -------------------------------------------------------------------------- */

/* Cancel — alias for neutral (semantic naming) */
.gc-btn.tonal-cancel {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #dbe4ef;
    font-weight: 600;
}
.gc-btn.tonal-cancel:hover {
    color: #334155;
    background: #e7eef6;
    border-color: #ced9e7;
}

/* Confirm-danger — soft red tonal */
.gc-btn.tonal-danger {
    color: #9f1239;
    background: #fce7ef;
    border: 1px solid #f7cad8;
    font-weight: 600;
}
.gc-btn.tonal-danger:hover {
    color: #881337;
    background: #fbdbe7;
    border-color: #f3b8cc;
}

/* Confirm-success — soft green tonal */
.gc-btn.tonal-success {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    font-weight: 600;
}
.gc-btn.tonal-success:hover {
    color: #14532d;
    background: #d1fae5;
    border-color: #a7f3d0;
}

/* Info — soft blue tonal */
.gc-btn.tonal-info {
    color: #1e40af;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    font-weight: 600;
}
.gc-btn.tonal-info:hover {
    color: #1e3a8a;
    background: #c7d7fe;
    border-color: #a5b4fc;
}

/* Warning — soft amber tonal */
.gc-btn.tonal-warning {
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    font-weight: 600;
}
.gc-btn.tonal-warning:hover {
    color: #78350f;
    background: #fde68a;
    border-color: #fcd34d;
}


/* --------------------------------------------------------------------------
   1c. Disabled wrapper & disabled class
   -------------------------------------------------------------------------- */

.gc-btn-disabled {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.gc-btn-lock-wrapper:hover .gc-btn {
    opacity: 0.35;
}

.u-user-actions .u-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.gc-btn .material-icons {
    font-size: 20px;
    margin-right: 6px;
}

/* Responsive: full-width in action bars on mobile */
@media (max-width: 640px) {
    .gc-bulkbar-row .gc-btn {
        width: 100%;
        justify-content: center;
    }
}


/* --------------------------------------------------------------------------
   1d. Anchor button resets  (keep <a> tags styled as buttons)
   -------------------------------------------------------------------------- */

a.gc-btn,
a.gc-btn:hover,
a.gc-btn:focus,
a.gc-btn:active {
    text-decoration: none;
}

a.gc-btn span,
a.gc-btn .material-icons-round {
    text-decoration: none;
    color: inherit;
}


/* --------------------------------------------------------------------------
   1e. Module .btn class  (sites, work_orders — mirrors gc-btn)
   -------------------------------------------------------------------------- */

.sites-page .btn,
.work-orders-page .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: var(--gc-control-height, 34px);
    padding: 7px 12px;
    border-radius: 4px;
    font-size: var(--gc-base-font-size, 14px);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.sites-page .btn:hover,
.work-orders-page .btn:hover {
    opacity: 1;
}
.sites-page .btn:disabled,
.sites-page .btn.is-disabled,
.sites-page .btn[aria-disabled="true"],
.work-orders-page .btn:disabled,
.work-orders-page .btn.is-disabled,
.work-orders-page .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.sites-page .btn.primary,
.work-orders-page .btn.primary {
    color: #1e293b;
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.sites-page .btn.primary:hover,
.work-orders-page .btn.primary:hover {
    color: #0f172a;
    background: #e2e8f0;
    border-color: #94a3b8;
}

.sites-page .btn.secondary,
.work-orders-page .btn.secondary {
    color: #1e40af;
    background: #dbeafe;
    border-color: #bfdbfe;
}
.sites-page .btn.secondary:hover,
.work-orders-page .btn.secondary:hover {
    color: #1e3a8a;
    background: #c7d7fe;
    border-color: #a5b4fc;
}

.sites-page .btn.neutral,
.work-orders-page .btn.neutral {
    color: #475569;
    background: #f1f5f9;
    border-color: #dbe4ef;
}
.sites-page .btn.neutral:hover,
.work-orders-page .btn.neutral:hover {
    color: #334155;
    background: #e7eef6;
    border-color: #ced9e7;
}

.sites-page .btn.danger,
.work-orders-page .btn.danger {
    color: #9f1239;
    background: #fce7ef;
    border-color: #f7cad8;
}
.sites-page .btn.danger:hover,
.work-orders-page .btn.danger:hover {
    color: #881337;
    background: #fbdbe7;
    border-color: #f3b8cc;
}

.sites-page .btn {
    margin-top: 10px;
}


/* --------------------------------------------------------------------------
   1f. Standalone action buttons  (gc-btn-restore, gc-btn-archive)
   -------------------------------------------------------------------------- */

.gc-btn-restore {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}
.gc-btn-restore:hover {
    color: #14532d;
    background: #d1fae5;
    border-color: #a7f3d0;
}
.gc-btn-restore:focus-visible {
    outline: 2px solid rgba(22, 101, 52, 0.3);
    outline-offset: 2px;
}

.gc-btn-archive {
    color: #9f1239;
    background: #fce7ef;
    border: 1px solid #f7cad8;
}
.gc-btn-archive:hover {
    color: #881337;
    background: #fbdbe7;
    border-color: #f3b8cc;
}
.gc-btn-archive:focus-visible {
    outline: 2px solid rgba(159, 18, 57, 0.3);
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   1g. Delete / confirm modal buttons  (users reference)
   -------------------------------------------------------------------------- */

.users-delete-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    height: 40px;
    padding: 0 22px;
    border-radius: 4px;
    border: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    background-image: none;
    box-shadow: none;
    flex: 1;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.users-delete-modal-btn .material-icons-round {
    font-size: 18px;
}

.users-delete-modal-btn--cancel {
    color: #374151;
    background: #f3f4f6;
}
.users-delete-modal-btn--cancel:hover {
    color: #1f2937;
    background: #e5e7eb;
}

.users-delete-modal-btn--confirm {
    color: #ffffff;
    background: #dc2626;
}
.users-delete-modal-btn--confirm:hover {
    background: #b91c1c;
}

.users-delete-modal-btn--warning {
    color: #ffffff;
    background: #d97706;
}
.users-delete-modal-btn--warning:hover {
    background: #b45309;
}

.users-delete-modal-btn--info {
    color: #ffffff;
    background: #2563eb;
}
.users-delete-modal-btn--info:hover {
    background: #1d4ed8;
}

.users-delete-modal-btn--success {
    color: #ffffff;
    background: var(--gc-fluent-success, #16a34a);
}
.users-delete-modal-btn--success:hover {
    background: var(--gc-fluent-success-hover, #15803d);
}

.users-delete-modal-btn:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.3);
    outline-offset: 2px;
}

/* ==========================================================================
   1h. Pagination controls  (.pg-btn, .pg-page, .gc-pagination)
   ========================================================================== */

.gc-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-right: 20px;
}

.gc-pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    width: 100%;
    margin-top: 16px;
}

.gc-pagination-wrapper form,
.gc-pagination-wrapper .gc-limit-selector,
.gc-pagination-wrapper .gc-pagination {
    min-height: var(--gc-control-height, 38px);
}

.pg-btn,
.pg-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--gc-control-height, 38px);
    height: var(--gc-control-height, 38px);
    padding: 7px 12px;
    border-radius: 4px;
    background: #f1f3f4;
    color: #202124;
    border: 1px solid #dadce0;
    text-decoration: none;
    font-size: var(--gc-base-font-size, 14px);
    line-height: 1.2;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pg-btn:hover,
.pg-page:hover {
    background: #e2e3e4;
    text-decoration: none;
}

.pg-btn.disabled,
.pg-btn[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

.pg-page.active {
    background: #3261c8;
    border-color: #3261c8;
    color: #fff !important;
    cursor: default;
}

.pg-ellipsis {
    padding: 6px;
    color: #5f6368;
}

.gc-limit-selector {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px;
    width: auto !important;
    margin: 0 !important;
    padding-left: 20px !important;
}

.gc-limit-label {
    font-size: var(--gc-base-font-size, 14px);
    color: #5f6368;
}

.gc-limit-input {
    height: var(--gc-control-height, 38px);
    min-height: var(--gc-control-height, 38px);
    padding: 7px 10px;
    border-radius: 4px;
    border: 1px solid #dadce0;
    background: #ffffff;
    font-size: var(--gc-base-font-size, 14px);
    color: #202124;
    box-sizing: border-box;
}

.gc-limit-input:focus {
    outline: none;
    border-color: #1a73e8;
}

@media (max-width: 640px) {
    .gc-pagination {
        justify-content: center !important;
        gap: 8px;
        text-align: center;
        width: 100%;
        margin-top: 12px;
    }

    .pg-btn,
    .pg-page {
        padding: 8px 12px;
    }

    .gc-limit-selector {
        width: 100% !important;
        justify-content: center !important;
        padding-left: 0 !important;
        text-align: center !important;
    }
}


/* ==========================================================================
   2. ICON BUTTON  (.gc-icon-btn)
   Base: transparent, round, subtle hover tint
   ========================================================================== */

.gc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gc-icon-btn-size, 36px);
    height: var(--gc-icon-btn-size, 36px);
    border-radius: 4px;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

/* Dossier and Meetstaat detail share the bordered photo-download controls. */
.gc-icon-btn.boq-dossier-photo-download-all,
.gc-icon-btn.boq-dossier-photo-download,
.boq-page .boq-detail-photo-gallery .gc-icon-btn.boq-photo-download {
    border: 1px solid var(--gc-fluent-neutral-border, #cbd5e1) !important;
}

[data-theme="dark"] .gc-icon-btn.tonal.boq-dossier-photo-download-all,
[data-theme="dark"] .gc-icon-btn.tonal.boq-dossier-photo-download,
[data-theme="dark"] .boq-page .boq-detail-photo-gallery .gc-icon-btn.boq-photo-download {
    border-color: var(--gc-fluent-neutral-border, var(--fluent-colorNeutralStroke1)) !important;
}

.work_orders-page .gc-icon-btn[hidden] {
    display: none !important;
}

.installation-page-shell .gc-icon-btn[data-backlog-search-clear][hidden],
.installation-page-shell .gc-icon-btn[data-installation-list-search-clear][hidden] {
    display: none !important;
}

.gc-icon-btn span.material-icons,
.gc-icon-btn .material-icons-round {
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
}

/* Remove text-decoration on all states */
.gc-icon-btn,
.gc-icon-btn:link,
.gc-icon-btn:visited,
.gc-icon-btn:hover,
.gc-icon-btn:active {
    text-decoration: none !important;
}

/* Default hover — subtle dark tint */
.gc-icon-btn:hover {
    background: rgba(15, 23, 42, 0.06);
}

.gc-icon-btn:active {
    background: rgba(15, 23, 42, 0.10);
}

/* Focus ring */
.gc-icon-btn:focus-visible {
    --gc-icon-foreground: var(--fluent-colorNeutralForeground1Hover);
    outline: 2px solid rgba(71, 85, 105, 0.25);
    outline-offset: 2px;
}

/* Disabled state */
.gc-icon-btn:disabled,
.gc-icon-btn[aria-disabled="true"],
.gc-icon-btn.disabled,
.gc-icon-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.gc-icon-btn:disabled::after,
.gc-icon-btn[aria-disabled="true"]::after,
.gc-icon-btn.disabled::after,
.gc-icon-btn.is-disabled::after {
    content: none !important;
}

.gc-icon-btn:disabled .material-icons,
.gc-icon-btn:disabled .material-icons-round,
.gc-icon-btn[aria-disabled="true"] .material-icons,
.gc-icon-btn[aria-disabled="true"] .material-icons-round,
.gc-icon-btn.disabled .material-icons,
.gc-icon-btn.disabled .material-icons-round {
    color: #94a3b8 !important;
}


/* --------------------------------------------------------------------------
   2a. Semantic colour variants  (icon colour + tinted hover)
   -------------------------------------------------------------------------- */

/* Edit / success — green */
.gc-icon-btn.icon-edit .material-icons,
.gc-icon-btn.icon-edit .material-icons-round,
.gc-icon-btn.icon-success .material-icons,
.gc-icon-btn.icon-success .material-icons-round {
    color: #16a34a;
}
.gc-icon-btn.icon-edit:hover,
.gc-icon-btn.icon-success:hover {
    background: rgba(21, 128, 61, 0.10);
}

/* View — default dark icon like BOQ table actions */
.gc-icon-btn.icon-view .material-icons,
.gc-icon-btn.icon-view .material-icons-round {
    color: #111827;
}

/* Delete / danger — red */
.gc-icon-btn.icon-delete .material-icons,
.gc-icon-btn.icon-delete .material-icons-round,
.gc-icon-btn.icon-danger .material-icons,
.gc-icon-btn.icon-danger .material-icons-round {
    color: #dc2626;
}
.gc-icon-btn.icon-delete:hover,
.gc-icon-btn.icon-danger:hover {
    background: rgba(185, 28, 28, 0.10);
}

/* Primary / info — blue */
.gc-icon-btn.icon-primary .material-icons,
.gc-icon-btn.icon-primary .material-icons-round,
.gc-icon-btn.icon-info .material-icons,
.gc-icon-btn.icon-info .material-icons-round {
    color: #2563eb;
}
.gc-icon-btn.icon-primary:hover,
.gc-icon-btn.icon-info:hover {
    background: rgba(37, 99, 235, 0.10);
}

/* Warning / archive — amber */
.gc-icon-btn.icon-warning .material-icons,
.gc-icon-btn.icon-warning .material-icons-round {
    color: #d97706;
}
.gc-icon-btn.icon-warning:hover {
    background: rgba(217, 119, 6, 0.10);
}

/* Draft — amber */
.gc-icon-btn.icon-draft .material-icons,
.gc-icon-btn.icon-draft .material-icons-round {
    color: #f59e0b;
}
.gc-icon-btn.icon-draft:hover {
    background: rgba(245, 158, 11, 0.10);
}

/* Neutral / muted — grey */
.gc-icon-btn.icon-neutral .material-icons,
.gc-icon-btn.icon-neutral .material-icons-round {
    color: #64748b;
}
.gc-icon-btn.icon-neutral:hover {
    background: rgba(100, 116, 139, 0.10);
}

.gc-icon-btn.icon-muted-square {
    --gc-icon-btn-size: 42px;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f8fafc;
    color: #64748b;
    box-shadow: none;
}

.gc-icon-btn.icon-muted-square .material-icons,
.gc-icon-btn.icon-muted-square .material-icons-round {
    color: #64748b;
}

.gc-icon-btn.icon-muted-square:hover,
.gc-icon-btn.icon-muted-square:focus-visible {
    background: #f1f5f9;
    border-color: #94a3b8;
}


/* --------------------------------------------------------------------------
   2b. Filled icon button variants  (soft tonal backgrounds)
   -------------------------------------------------------------------------- */

/* Error — soft red fill */
.gc-icon-btn.error {
    background: #fce7ef;
}
.gc-icon-btn.error span,
.gc-icon-btn.error .material-icons-round {
    color: #9f1239 !important;
}
.gc-icon-btn.error:hover {
    background: #fbdbe7;
}

/* Info — soft blue fill */
.gc-icon-btn.info {
    background: #e8f0fe;
}
.gc-icon-btn.info span,
.gc-icon-btn.info .material-icons-round {
    color: #1a73e8 !important;
}
.gc-icon-btn.info:hover {
    background: #d2e3fc;
}

/* Tonal — soft grey fill */
.gc-icon-btn.tonal {
    background: #f1f3f4;
}
.gc-icon-btn.tonal span,
.gc-icon-btn.tonal .material-icons-round {
    color: #64748b !important;
}
.gc-icon-btn.tonal:hover {
    background: #e2e3e4;
}


/* --------------------------------------------------------------------------
   2c. Size modifiers
   -------------------------------------------------------------------------- */

/* Compact — 30px (dense table actions) */
.gc-icon-btn.icon-sm {
    width: 30px;
    height: 30px;
    min-height: 30px;
}
.gc-icon-btn.icon-sm .material-icons,
.gc-icon-btn.icon-sm .material-icons-round {
    font-size: 18px;
}

/* Extra compact — 24px (notification dismiss actions) */
.gc-icon-btn.icon-xs {
    width: 24px;
    height: 24px;
    min-height: 24px;
}
.gc-icon-btn.icon-xs .material-icons,
.gc-icon-btn.icon-xs .material-icons-round {
    font-size: 16px;
}

/* Large — 42px (modal footers) */
.gc-icon-btn.icon-lg {
    width: 42px;
    height: 42px;
}
.gc-icon-btn.icon-lg .material-icons,
.gc-icon-btn.icon-lg .material-icons-round {
    font-size: 28px;
}
.gc-icon-btn.icon-lg:hover {
    transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   2d. Action button containers & patterns  (shared across modules)
   -------------------------------------------------------------------------- */

/* --- User actions container (users, boq pricefactors, modules) --- */
.u-user-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.u-user-actions .gc-icon-btn.u-user-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 999px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none;
    transition: background-color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.u-user-actions .u-user-action-icon .material-icons-round {
    font-size: 20px;
}

.u-user-actions .u-user-action-icon--edit .material-icons-round {
    color: #5cb85c;
}

.u-user-actions .u-user-action-icon--delete .material-icons-round {
    color: var(--gc-fluent-danger-text, #dc2626);
}

.u-user-actions .u-user-action-icon--disabled .material-icons-round {
    color: #94a3b8;
}

.u-user-actions .u-user-action-icon--edit:hover {
    background: rgba(21, 128, 61, 0.1) !important;
}

.u-user-actions .u-user-action-icon--delete:hover {
    background: rgba(185, 28, 28, 0.1) !important;
}

.u-user-actions .u-user-action-icon--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Site card action icon layout; colors/states follow shared gc-icon-btn rules. --- */
.sites-page .site-card-actions .gc-icon-btn {
    background: transparent;
    box-shadow: none;
    border: 1px solid transparent;
    padding: 6px;
    border-radius: 6px;
    width: var(--gc-icon-btn-size, 36px);
    height: var(--gc-icon-btn-size, 36px);
    min-width: var(--gc-icon-btn-size, 36px);
    min-height: var(--gc-icon-btn-size, 36px);
    box-sizing: border-box;
}

.sites-page .site-card-actions .gc-icon-btn:hover,
.sites-page .site-card-actions .gc-icon-btn:focus,
.sites-page .site-card-actions .gc-icon-btn:active {
    background: rgba(15, 23, 42, 0.06);
    border-radius: 6px;
}

.sites-page .gc-icon-btn.icon-warning:hover,
.sites-page .gc-icon-btn.icon-warning:focus,
.sites-page .gc-icon-btn.icon-warning:active {
    background: rgba(217, 119, 6, 0.10);
}

.sites-page .gc-icon-btn.icon-delete:hover,
.sites-page .gc-icon-btn.icon-delete:focus,
.sites-page .gc-icon-btn.icon-delete:active {
    background: rgba(185, 28, 28, 0.10);
}

.sites-page .gc-icon-btn.icon-warning:disabled .material-icons-round,
.sites-page .gc-icon-btn.icon-warning[aria-disabled="true"] .material-icons-round,
.sites-page .gc-icon-btn.icon-warning.gc-btn-disabled .material-icons-round {
    color: var(--gc-fluent-disabled-text, #94a3b8);
}

.sites-page .gc-icon-btn.icon-warning,
.sites-page .gc-icon-btn.icon-delete {
    cursor: pointer;
}

.sites-page .gc-icon-btn.icon-warning:disabled,
.sites-page .gc-icon-btn.icon-warning[aria-disabled="true"],
.sites-page .gc-icon-btn.icon-delete:disabled,
.sites-page .gc-icon-btn.icon-delete[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* --- Module card actions (admin modules page) --- */
.module-card-actions .gc-icon-btn:not(.u-user-action-icon) {
    width: 32px;
    height: 32px;
}

.module-card-actions .gc-icon-btn:not(.u-user-action-icon) span.material-icons {
    font-size: 20px;
}

.boq-dossier-view-page .boq-col-filter-trigger,
.boq-dossier-view-page .ops-overkoppeling-filter-icon {
    border: 0 !important;
    box-shadow: none !important;
}

/* Operations overdue filters retain purple through the shared dark-mode cascade. */
.operations-page .gc-icon-btn.icon-overdue {
    color: #8764b8 !important;
}
.operations-page .gc-icon-btn.icon-overdue[aria-pressed="true"],
.operations-page .gc-btn.icon-overdue[aria-pressed="true"] {
    background: #8764b826 !important;
    border-color: #8764b8 !important;
}
.operations-page .gc-icon-btn.icon-overdue:hover,
.operations-page .gc-btn.icon-overdue:hover {
    background: #8764b81a !important;
}
.operations-page .gc-icon-btn.icon-overdue:hover {
    color: #715099 !important;
}
[data-theme="dark"] .operations-page .gc-icon-btn.icon-overdue {
    color: var(--fluent-colorPalettePurpleForeground2) !important;
}
[data-theme="dark"] .operations-page .gc-icon-btn.icon-overdue[aria-pressed="true"],
[data-theme="dark"] .operations-page .gc-icon-btn.icon-overdue:hover,
[data-theme="dark"] .operations-page .gc-btn.icon-overdue[aria-pressed="true"],
[data-theme="dark"] .operations-page .gc-btn.icon-overdue:hover {
    background: var(--fluent-colorPalettePurpleBackground2) !important;
    border-color: var(--fluent-colorPalettePurpleBorderActive) !important;
}
.operations-page .ops-overkoppeling-filter-icon[hidden] {
    display: none;
}

.operations-page .gc-icon-btn.icon-overdue .material-icons-round {
    color: inherit !important;
}
.operations-page .gc-btn.icon-overdue .material-icons-round {
    color: #8764b8 !important;
}
.operations-page .gc-btn.icon-overdue:hover .material-icons-round {
    color: #715099 !important;
}
[data-theme="dark"] .operations-page .gc-btn.icon-overdue .material-icons-round {
    color: var(--fluent-colorPalettePurpleForeground2) !important;
}

/* Canonical file actions share the square Fluent control used by activities. */
.sites-page #siteFileManager .gc-icon-btn,
.boq-dossier-view-page .boq-dossier-files-table .gc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    vertical-align: middle;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
}

/* --- Site file action icon colours (download, delete, edit, view, open, planning, merge) --- */
.sites-page .site-table-actions-cell .boq-file-action,
.sites-page .site-table-actions .boq-file-action {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px !important;
    border-radius: 999px !important;
}

.sites-page .boq-file-action-download {
    color: #0f766e;
}

.sites-page .boq-file-action-delete {
    color: #b91c1c;
}

.sites-page .boq-file-action-edit,
.sites-page .boq-file-action-view {
    color: #475569;
}

.boq-page [data-ops-table-id="work_orders"] .gc-icon-btn.icon-view .material-icons-round {
    color: #2563eb;
}

.sites-page .boq-file-action-open {
    color: #1d4ed8;
}

.sites-page .boq-file-action-planning {
    color: #0f766e;
}

.sites-page .boq-file-action-merge {
    color: #b45309;
}

.sites-page .site-table-actions-cell .boq-file-action:hover,
.sites-page .site-table-actions-cell .boq-file-action:focus,
.sites-page .site-table-actions .boq-file-action:hover,
.sites-page .site-table-actions .boq-file-action:focus {
    background: rgba(37, 99, 235, 0.10) !important;
    border-radius: 999px !important;
}

/* --- Operations column action icon overrides (ops table rows) --- */
.operations-page .ops-col-action .gc-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    padding: 6px;
    border-radius: 999px;
}

.operations-page .ops-col-action .gc-icon-btn:not(:disabled):not([aria-disabled="true"]):hover {
    cursor: pointer;
    background: var(--gc-fluent-icon-hover-bg, rgba(37, 99, 235, 0.10));
}

.operations-page .ops-col-action .gc-icon-btn:disabled,
.operations-page .ops-col-action .gc-icon-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.operations-page .ops-col-action .ops-plan-archive-btn:disabled .material-icons-round,
.operations-page .ops-col-action .ops-plan-archive-btn[aria-disabled="true"] .material-icons-round {
    color: var(--gc-fluent-disabled-text, #94a3b8);
}

/* --- Operations card action icon colours (edit, archive, disabled) --- */
.operations-page .ops-card-actions .gc-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    padding: 6px;
}

.operations-page .ops-card-actions .gc-icon-btn .material-icons-round {
    color: var(--gc-icon-foreground, var(--gc-fluent-primary-text, #2563eb));
}

.operations-page .ops-card-actions .ops-archive-btn .material-icons-round {
    color: var(--gc-icon-foreground, var(--gc-fluent-warning-hover-text, #d97706));
}

.operations-page .ops-card-actions .gc-icon-btn:hover {
    background: rgba(37, 99, 235, 0.10);
}

.operations-page .ops-card-actions .gc-icon-btn:disabled,
.operations-page .ops-card-actions .gc-icon-btn[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.operations-page .ops-card-actions .gc-icon-btn:disabled .material-icons-round,
.operations-page .ops-card-actions .gc-icon-btn[aria-disabled="true"] .material-icons-round {
    color: var(--gc-fluent-disabled-text, #94a3b8);
}

.operations-page .ops-card-actions .gc-icon-btn[aria-disabled="true"]::after {
    content: none !important;
}

/* --- BOQ meetstaten action icon colours (edit, finish, pause, archive, disabled) --- */
.boq-page [data-ops-table-id="boq_meetstaten"] .ops-col-action .gc-icon-btn {
    height: var(--gc-icon-btn-size, 36px);
    min-height: var(--gc-icon-btn-size, 36px);
    padding: 6px;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.boq-page [data-ops-table-id="boq_meetstaten"] .boq-meet-action-btn { cursor: pointer; }
.boq-page [data-ops-table-id="boq_meetstaten"] .boq-meet-edit-btn .material-icons-round { color: var(--gc-fluent-success-text, #16a34a); }
.boq-page [data-ops-table-id="boq_meetstaten"] .boq-meet-edit-btn:hover { background: rgba(34, 197, 94, 0.16) !important; }
.boq-page [data-ops-table-id="boq_meetstaten"] .boq-meet-finish-btn .material-icons-round { color: var(--gc-fluent-primary-text, #2563eb); }
.boq-page [data-ops-table-id="boq_meetstaten"] .boq-meet-pauze-btn .material-icons-round { color: #d97706; }
.boq-page [data-ops-table-id="boq_meetstaten"] .boq-meet-archive-btn .material-icons-round,
.boq-page [data-ops-table-id="boq_meetstaten"] .ops-archive-btn .material-icons-round { color: var(--gc-fluent-warning-hover-text, #d97706); }
.boq-page [data-ops-table-id="boq_meetstaten"] .boq-meet-action-btn:hover { background: rgba(37, 99, 235, 0.10) !important; }
.boq-page [data-ops-table-id="boq_meetstaten"] .boq-meet-action-btn:disabled,
.boq-page [data-ops-table-id="boq_meetstaten"] .boq-meet-action-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
    background: transparent !important;
    box-shadow: none !important;
}
.boq-page [data-ops-table-id="boq_meetstaten"] .boq-meet-action-btn:disabled:hover,
.boq-page [data-ops-table-id="boq_meetstaten"] .boq-meet-action-btn[aria-disabled="true"]:hover { background: transparent !important; }
.boq-page [data-ops-table-id="boq_meetstaten"] .boq-meet-action-btn:disabled .material-icons-round,
.boq-page [data-ops-table-id="boq_meetstaten"] .boq-meet-action-btn[aria-disabled="true"] .material-icons-round { color: var(--gc-fluent-disabled-text, #94a3b8) !important; }

/* --- BOQ dossier action icon colours/states: align with child meetstaten reference --- */
.boq-page [data-ops-table-id="boq_dossier"] .ops-col-action .gc-icon-btn {
    height: var(--gc-icon-btn-size, 36px);
    min-height: var(--gc-icon-btn-size, 36px);
    padding: 6px;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-action-btn {
    cursor: pointer;
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-edit-btn .material-icons-round {
    color: var(--gc-fluent-success-text, #16a34a);
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-edit-btn:hover {
    background: rgba(34, 197, 94, 0.16) !important;
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-finish-btn .material-icons-round {
    color: var(--gc-fluent-primary-text, #2563eb);
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-archive-btn .material-icons-round,
.boq-page [data-ops-table-id="boq_dossier"] .ops-archive-btn .material-icons-round {
    color: var(--gc-fluent-warning-hover-text, #d97706);
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-delete-btn .material-icons-round {
    color: var(--gc-fluent-danger-text, #dc2626);
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-delete-btn:hover {
    background: rgba(220, 38, 38, 0.10) !important;
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-delete-placeholder {
    cursor: help;
    background: transparent !important;
    box-shadow: none !important;
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-delete-placeholder:hover,
.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-delete-placeholder:focus-visible {
    background: transparent !important;
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-delete-placeholder .material-icons-round {
    color: var(--gc-fluent-disabled-text, #94a3b8) !important;
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-delete-tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-delete-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 90;
    display: none;
    width: max-content;
    min-width: 220px;
    max-width: 320px;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: var(--card-bg, #ffffff);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.18);
    color: var(--md-text, #111827);
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    pointer-events: none;
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-delete-tooltip .ops-badge-tooltip-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--md-text, #111827);
    white-space: normal;
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-delete-tooltip-wrapper:hover .boq-dossier-delete-tooltip,
.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-delete-tooltip-wrapper:focus-within .boq-dossier-delete-tooltip {
    display: block;
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-action-btn:hover {
    background: rgba(37, 99, 235, 0.10) !important;
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-action-btn:disabled,
.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-action-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
    background: transparent !important;
    box-shadow: none !important;
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-action-btn:disabled:hover,
.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-action-btn[aria-disabled="true"]:hover {
    background: transparent !important;
}

.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-action-btn:disabled .material-icons-round,
.boq-page [data-ops-table-id="boq_dossier"] .boq-dossier-action-btn[aria-disabled="true"] .material-icons-round {
    color: var(--gc-fluent-disabled-text, #94a3b8) !important;
}

/* --- BOQ werkposten action icon colours/states: align with child meetstaten reference --- */
.boq-werkposten-page .boq-meet-edit-btn .material-icons-round {
    color: var(--gc-fluent-success-text, #16a34a);
}

.boq-werkposten-page .boq-meet-edit-btn:hover {
    background: rgba(34, 197, 94, 0.16) !important;
}

.boq-werkposten-page .boq-meet-delete .material-icons-round {
    color: var(--gc-fluent-danger-text, #dc2626);
}

.boq-werkposten-page .boq-meet-delete:hover {
    background: rgba(220, 38, 38, 0.10) !important;
}

/* --- BOQ dossier file table actions: same light-mode semantics as shared action icons --- */
.boq-dossier-view-page .boq-file-action {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    width: var(--gc-icon-btn-size, 36px);
    height: var(--gc-icon-btn-size, 36px);
    min-width: var(--gc-icon-btn-size, 36px);
    min-height: var(--gc-icon-btn-size, 36px);
    padding: 6px !important;
    border-radius: 999px !important;
}

.boq-dossier-view-page .boq-file-action-download {
    color: var(--gc-fluent-primary-text, #2563eb);
}

.boq-dossier-view-page .boq-file-action-delete {
    color: var(--gc-fluent-danger-text, #dc2626);
}

.boq-dossier-view-page .boq-file-action-download:hover,
.boq-dossier-view-page .boq-file-action-download:focus {
    background: rgba(37, 99, 235, 0.10) !important;
}

.boq-dossier-view-page .boq-file-action-delete:hover,
.boq-dossier-view-page .boq-file-action-delete:focus {
    background: rgba(220, 38, 38, 0.10) !important;
}


/* ==========================================================================
   3. MODAL FOOTER ICON BUTTONS  (boq-modal-icon-btn, site-file-modal-icon-btn,
      ops-footer-icon — unified pattern)
   ========================================================================== */

.boq-modal-icon-btn,
.site-file-modal-icon-btn,
.ops-footer-icon {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.boq-modal-icon-btn .material-icons-round,
.site-file-modal-icon-btn .material-icons-round {
    font-size: 28px;
}

.ops-footer-icon .material-icons-round {
    font-size: 26px;
}

.boq-modal-icon-btn:hover,
.site-file-modal-icon-btn:hover,
.ops-footer-icon:hover {
    background: rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.ops-footer-icon:hover {
    border-radius: 999px;
}

.boq-modal-icon-btn:disabled,
.boq-modal-icon-btn[aria-disabled="true"],
.site-file-modal-icon-btn:disabled,
.site-file-modal-icon-btn[aria-disabled="true"],
.ops-footer-icon:disabled,
.ops-footer-icon[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   3a. Status colour classes  (shared across modules)
   -------------------------------------------------------------------------- */

.ops-footer-planned {
    color: #16a34a;
}

.ops-footer-cancel {
    color: #dc2626;
}

/* Bulk planner actions use one fixed Fluent surface for rest, hover and focus. */
#bulk-plan-panel .planner-side-panel-footer .gc-icon-btn.ops-footer-icon {
    --gc-icon-btn-size: 48px;
    box-sizing: border-box;
    width: 48px; min-width: 48px; max-width: 48px;
    height: 48px; min-height: 48px; max-height: 48px;
    flex: 0 0 48px; align-self: center; padding: 0;
    border-radius: 4px !important;
    transform: none;
}
#bulk-plan-panel .planner-side-panel-footer .gc-icon-btn.ops-footer-icon:is(:hover, :focus-visible, :active) {
    border-radius: 4px !important;
    transform: none;
}
#bulk-plan-panel .planner-side-panel-footer .ops-footer-icon .erp-icon { width: 24px; height: 24px; }

.gc-icon-btn.icon-muted-square.ops-footer-icon,
.gc-icon-btn.icon-muted-square.boq-modal-icon-btn {
    --gc-icon-btn-size: 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f8fafc;
    color: #64748b;
    box-shadow: none;
}

.gc-icon-btn.icon-muted-square.ops-footer-icon:hover,
.gc-icon-btn.icon-muted-square.ops-footer-icon:focus-visible,
.gc-icon-btn.icon-muted-square.boq-modal-icon-btn:hover,
.gc-icon-btn.icon-muted-square.boq-modal-icon-btn:focus-visible {
    border-radius: 4px;
    background: #f1f5f9;
    border-color: #94a3b8;
}

.ops-footer-draft {
    color: #d97706;
}


/* ==========================================================================
   5. GLOBAL SPECIAL OVERRIDES
   ========================================================================== */


/* ==========================================================================
   Tab/view-switch active states (boq + operations)
   ========================================================================== */

/* Shared active tab colour matches the sidebar selected-item blue token.
   Used by: operations activity tabs, BOQ dossier tab, BOQ meetstaten tab */
.operations-page .ops-activities-trigger.is-active,
.operations-page .ops-project-planning-btn.is-active,
.operations-page .ops-planning-overzicht-btn.is-active,
.boq-page .ops-activities-trigger.is-active,
.boq-page .ops-project-planning-btn.is-active,
.boq-page .ops-planning-overzicht-btn.is-active {
    background: var(--fluent-colorBrandBackground, var(--color-primary, #2563eb));
    border-color: var(--color-primary, #2563eb);
    color: #fff !important;
    font-weight: 600;
    box-shadow: none;
    transition: background 180ms ease, border-color 180ms ease,
                transform 180ms ease, color 180ms ease;
}
.operations-page .ops-activities-trigger.is-active:hover,
.operations-page .ops-project-planning-btn.is-active:hover,
.operations-page .ops-planning-overzicht-btn.is-active:hover,
.boq-page .ops-activities-trigger.is-active:hover,
.boq-page .ops-project-planning-btn.is-active:hover,
.boq-page .ops-planning-overzicht-btn.is-active:hover {
    background: var(--fluent-colorBrandBackgroundHover, var(--color-primary-hover, #1d4ed8));
    border-color: var(--color-primary-hover, #1d4ed8);
    color: #fff !important;
    box-shadow: none;
    transform: translateY(-1px);
}
.operations-page .ops-activities-trigger.is-active:focus-visible,
.operations-page .ops-project-planning-btn.is-active:focus-visible,
.operations-page .ops-planning-overzicht-btn.is-active:focus-visible,
.boq-page .ops-activities-trigger.is-active:focus-visible,
.boq-page .ops-project-planning-btn.is-active:focus-visible,
.boq-page .ops-planning-overzicht-btn.is-active:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--color-primary-muted, rgba(37, 99, 235, 0.12));
}
.operations-page .ops-activities-trigger.is-active .material-icons-round,
.operations-page .ops-project-planning-btn.is-active .material-icons-round,
.operations-page .ops-planning-overzicht-btn.is-active .material-icons-round,
.boq-page .ops-activities-trigger.is-active .material-icons-round,
.boq-page .ops-project-planning-btn.is-active .material-icons-round,
.boq-page .ops-planning-overzicht-btn.is-active .material-icons-round {
    color: inherit !important;
}

/* ==========================================================================
   Logout confirmation modal action buttons
   ========================================================================== */

.logout-modal-confirm-btn {
    color: #16a34a;
}

.logout-modal-confirm-btn:hover {
    background: rgba(22, 163, 74, 0.12) !important;
}

.logout-modal-cancel-btn {
    color: #dc2626;
}

.logout-modal-cancel-btn:hover {
    background: rgba(220, 38, 38, 0.12) !important;
}

/* ==========================================================================
   6. FLUENT 2 MODERN GLOBAL BUTTON REFRESH
   Palette adopted from the approved Fluent Dense ERP preview.
   This final layer intentionally overrides older per-variant button colours.
   ========================================================================== */

:root {
    --gc-fluent-primary: var(--fluent-colorBrandBackground);
    --gc-fluent-primary-text: var(--fluent-colorBrandForeground1, var(--gc-fluent-primary));
    --gc-fluent-primary-hover-text: var(--fluent-colorBrandForegroundLinkHover, var(--gc-fluent-primary-hover));
    --gc-fluent-primary-active-text: var(--fluent-colorBrandForegroundLinkSelected, var(--gc-fluent-primary-active));
    --gc-fluent-success-text: var(--fluent-colorStatusSuccessForeground1, var(--gc-fluent-success));
    --gc-fluent-success-hover-text: var(--fluent-colorStatusSuccessForeground2, var(--gc-fluent-success-hover));
    --gc-fluent-danger-text: var(--fluent-colorStatusDangerForeground1, var(--gc-fluent-danger));
    --gc-fluent-danger-hover-text: var(--fluent-colorStatusDangerForeground2, var(--gc-fluent-danger-hover));
    --gc-fluent-warning-text: var(--fluent-colorStatusWarningForeground1, var(--gc-fluent-warning));
    --gc-fluent-warning-hover-text: var(--fluent-colorStatusWarningForeground2, var(--gc-fluent-warning-hover));
    --gc-fluent-primary-hover: var(--fluent-colorBrandBackgroundHover);
    --gc-fluent-primary-active: var(--fluent-colorBrandBackground);
    --gc-fluent-primary-subtle: var(--fluent-colorBrandBackground2, #eef4ff);
    --gc-fluent-primary-subtle-hover: var(--fluent-colorBrandBackground2Hover, #dbeafe);
    --gc-fluent-success: var(--fluent-colorStatusSuccessBackground3, #16a34a);
    --gc-fluent-success-hover: var(--fluent-colorStatusSuccessBackground3, #15803d);
    --gc-fluent-success-active: var(--fluent-colorStatusSuccessBackground3, #166534);
    --gc-fluent-danger: var(--fluent-colorStatusDangerBackground3, #dc2626);
    --gc-fluent-danger-hover: var(--fluent-colorStatusDangerBackground3Hover, #b91c1c);
    --gc-fluent-danger-active: var(--fluent-colorStatusDangerBackground3Pressed, #991b1b);
    --gc-fluent-warning: var(--fluent-colorStatusWarningBackground3, #f59e0b);
    --gc-fluent-warning-hover: var(--fluent-colorStatusWarningBackground3, #d97706);
    --gc-fluent-neutral: var(--fluent-colorNeutralBackground1, #f8fafc);
    --gc-fluent-neutral-hover: var(--fluent-colorNeutralBackground1Hover, #eef2f7);
    --gc-fluent-neutral-active: var(--fluent-colorNeutralBackground1Pressed, #e2e8f0);
    --gc-fluent-neutral-border: var(--fluent-colorNeutralStroke2, #cbd5e1);
    --gc-fluent-text: var(--fluent-colorNeutralForeground1, #1f2937);
    --gc-fluent-muted: var(--fluent-colorNeutralForeground2, #64748b);
    --gc-fluent-focus: var(--fluent-colorStrokeFocus2, rgba(37, 99, 235, 0.28));
}


.gc-btn,
.sites-page .btn,
.work-orders-page .btn {
    min-height: var(--gc-control-height, 38px);
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    box-shadow: none;
    font-weight: 600;
    transition:
        background 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease;
}

.gc-btn:hover,
.sites-page .btn:hover,
.work-orders-page .btn:hover {
    opacity: 1;
}

.gc-btn:focus-visible,
.sites-page .btn:focus-visible,
.work-orders-page .btn:focus-visible,
.users-delete-modal-btn:focus-visible,
.pg-btn:focus-visible,
.pg-page:focus-visible {
    outline: 2px solid var(--gc-fluent-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.gc-btn:active,
.sites-page .btn:active,
.work-orders-page .btn:active {
    transform: translateY(0);
}

.gc-btn[disabled],
.gc-btn:disabled,
.gc-btn.is-disabled,
.gc-btn[aria-disabled="true"],
.sites-page .btn:disabled,
.sites-page .btn.is-disabled,
.sites-page .btn[aria-disabled="true"],
.work-orders-page .btn:disabled,
.work-orders-page .btn.is-disabled,
.work-orders-page .btn[aria-disabled="true"] {
    color: #8a8886 !important;
    background: #f3f2f1 !important;
    border-color: #edebe9 !important;
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.gc-btn.primary,
.gc-btn.finish,
.gc-btn.stock-reservations-btn,
.gc-btn.sm-open-requests-btn,
.ops-drawer-filter-actions .gc-btn.primary,
.stock-filter-drawer-actions .gc-btn.primary,
.sites-page .btn.primary,
.work-orders-page .btn.primary {
    color: #ffffff;
    background: var(--gc-fluent-primary);
    border-color: var(--gc-fluent-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
}

.gc-btn.primary:hover,
.gc-btn.finish:hover,
.gc-btn.stock-reservations-btn:hover,
.gc-btn.sm-open-requests-btn:hover,
.ops-drawer-filter-actions .gc-btn.primary:hover,
.stock-filter-drawer-actions .gc-btn.primary:hover,
.sites-page .btn.primary:hover,
.work-orders-page .btn.primary:hover {
    color: #ffffff;
    background: var(--gc-fluent-primary-hover);
    border-color: var(--gc-fluent-primary-hover);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.14);
    transform: translateY(-1px);
}

.gc-btn.primary:active,
.gc-btn.primary.is-active,
.gc-btn.finish:active,
.gc-btn.finish.is-active,
.gc-btn.stock-reservations-btn:active,
.gc-btn.sm-open-requests-btn:active,
.gc-btn.sm-open-requests-btn.is-active,
.sites-page .btn.primary:active,
.work-orders-page .btn.primary:active {
    color: #ffffff;
    background: var(--gc-fluent-primary-active);
    border-color: var(--gc-fluent-primary-active);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
    transform: translateY(0);
}

.gc-btn.secondary,
.gc-btn.tonal-info,
.sites-page .btn.secondary,
.work-orders-page .btn.secondary {
    color: var(--gc-fluent-primary-active-text);
    background: var(--gc-fluent-primary-subtle);
    border-color: #bfdbfe;
    box-shadow: none;
}

.gc-btn.secondary:hover,
.gc-btn.tonal-info:hover,
.sites-page .btn.secondary:hover,
.work-orders-page .btn.secondary:hover {
    color: var(--gc-fluent-primary-active-text);
    background: var(--gc-fluent-primary-subtle-hover);
    border-color: #93c5fd;
    box-shadow: none;
    transform: translateY(-1px);
}

.gc-btn.secondary:active,
.gc-btn.secondary.is-active,
.gc-btn.tonal-info:active,
.gc-btn.tonal-info.is-active,
.sites-page .btn.secondary:active,
.work-orders-page .btn.secondary:active {
    color: var(--gc-fluent-primary-active-text);
    background: #c7ddff;
    border-color: #60a5fa;
    transform: translateY(0);
}

.fleet-tabs .gc-btn.is-active,
.fleet-tabs .gc-btn.neutral.is-active {
    color: #ffffff !important;
    background: var(--gc-fluent-primary);
    border-color: var(--gc-fluent-primary);
    box-shadow: none;
}

.fleet-tabs .gc-btn.is-active:hover,
.fleet-tabs .gc-btn.neutral.is-active:hover,
.fleet-tabs .gc-btn.is-active:focus-visible,
.fleet-tabs .gc-btn.neutral.is-active:focus-visible {
    color: #ffffff !important;
    background: var(--gc-fluent-primary-hover);
    border-color: var(--gc-fluent-primary-hover);
}

.fleet-tabs .gc-btn.is-active .material-icons,
.fleet-tabs .gc-btn.is-active .material-icons-round,
.fleet-tabs .gc-btn.neutral.is-active .material-icons,
.fleet-tabs .gc-btn.neutral.is-active .material-icons-round {
    color: #ffffff !important;
}

.gc-btn.neutral,
.gc-btn.tonal-cancel,
.sites-page .btn.neutral,
.work-orders-page .btn.neutral {
    color: var(--gc-fluent-text);
    background: #ffffff;
    border-color: #dddedd;
    box-shadow: none;
}

.gc-btn.neutral:hover,
.gc-btn.tonal-cancel:hover,
.sites-page .btn.neutral:hover,
.work-orders-page .btn.neutral:hover {
    color: #111827;
    background: #f8f8f8;
    border-color: #dddedd;
    box-shadow: none;
    transform: translateY(-1px);
}

.gc-btn.neutral:active,
.gc-btn.neutral.is-active,
.gc-btn.tonal-cancel:active,
.gc-btn.tonal-cancel.is-active,
.sites-page .btn.neutral:active,
.work-orders-page .btn.neutral:active {
    color: #111827;
    background: #f3f4f6;
    border-color: #dddedd;
    transform: translateY(0);
}

.gc-btn.success,
.gc-btn.save,
.gc-btn.create,
.gc-btn.tonal-success,
.gc-btn-restore,
.sites-page .btn.success,
.work-orders-page .btn.success {
    color: #ffffff;
    background: var(--gc-fluent-success);
    border-color: var(--gc-fluent-success);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
}

.gc-btn.success:hover,
.gc-btn.save:hover,
.gc-btn.create:hover,
.gc-btn.tonal-success:hover,
.gc-btn-restore:hover,
.sites-page .btn.success:hover,
.work-orders-page .btn.success:hover {
    color: #ffffff;
    background: var(--gc-fluent-success-hover);
    border-color: var(--gc-fluent-success-hover);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.14);
    transform: translateY(-1px);
}

.gc-btn.success:active,
.gc-btn.success.is-active,
.gc-btn.save:active,
.gc-btn.save.is-active,
.gc-btn.create:active,
.gc-btn.create.is-active,
.gc-btn.tonal-success:active,
.gc-btn-restore:active {
    color: #ffffff;
    background: var(--gc-fluent-success-active);
    border-color: var(--gc-fluent-success-active);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
    transform: translateY(0);
}

.gc-btn.danger,
.gc-btn.tonal-danger,
.gc-btn-archive,
.sites-page .btn.danger,
.work-orders-page .btn.danger {
    color: #ffffff;
    background: var(--gc-fluent-danger);
    border-color: var(--gc-fluent-danger);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
}

.gc-btn.danger:hover,
.gc-btn.tonal-danger:hover,
.gc-btn-archive:hover,
.sites-page .btn.danger:hover,
.work-orders-page .btn.danger:hover {
    color: #ffffff;
    background: var(--gc-fluent-danger-hover);
    border-color: var(--gc-fluent-danger-hover);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.14);
    transform: translateY(-1px);
}

.gc-btn.danger:active,
.gc-btn.danger.is-active,
.gc-btn.tonal-danger:active,
.gc-btn.tonal-danger.is-active,
.gc-btn-archive:active {
    color: #ffffff;
    background: var(--gc-fluent-danger-active);
    border-color: var(--gc-fluent-danger-active);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
    transform: translateY(0);
}

[data-theme="dark"] .gc-btn.warning,
.gc-btn.acties,
.gc-btn.tonal-warning,
.gc-2fa-enable {
    color: var(--fluent-colorNeutralForeground1Static, #111827);
    background: var(--gc-fluent-warning);
    border-color: var(--gc-fluent-warning);
    box-shadow: none;
}

[data-theme="dark"] .gc-btn.warning:hover,
.gc-btn.acties:hover,
.gc-btn.tonal-warning:hover,
.gc-2fa-enable:hover,
.gc-2fa-enable:focus-visible {
    color: var(--fluent-colorNeutralForeground1Static, #111827);
    background: var(--gc-fluent-warning-hover);
    border-color: var(--gc-fluent-warning-hover);
    box-shadow: none;
    transform: translateY(-1px);
}

.gc-btn.gc-btn-solid.primary,
.gc-btn.gc-btn-solid.secondary {
    color: #ffffff;
    background: var(--gc-fluent-primary);
    border-color: var(--gc-fluent-primary);
}

.gc-btn.gc-btn-solid.primary:hover,
.gc-btn.gc-btn-solid.secondary:hover {
    background: var(--gc-fluent-primary-hover);
    border-color: var(--gc-fluent-primary-hover);
}

.gc-btn.gc-btn-solid.success,
.gc-btn.gc-btn-solid.save,
.gc-btn.gc-btn-solid.create {
    color: #ffffff;
    background: var(--gc-fluent-success);
    border-color: var(--gc-fluent-success);
}

.gc-btn.gc-btn-solid.success:hover,
.gc-btn.gc-btn-solid.save:hover,
.gc-btn.gc-btn-solid.create:hover {
    background: var(--gc-fluent-success-hover);
    border-color: var(--gc-fluent-success-hover);
}

.gc-btn.gc-btn-solid.danger,
.gc-btn.gc-btn-solid.tonal-danger {
    color: #ffffff;
    background: var(--gc-fluent-danger);
    border-color: var(--gc-fluent-danger);
}

.gc-btn.gc-btn-solid.danger:hover,
.gc-btn.gc-btn-solid.tonal-danger:hover {
    background: var(--gc-fluent-danger-hover);
    border-color: var(--gc-fluent-danger-hover);
}

.gc-btn.gc-btn-solid.neutral,
.gc-btn.gc-btn-solid.tonal-cancel {
    color: var(--gc-fluent-text);
    background: var(--gc-fluent-neutral);
    border-color: var(--gc-fluent-neutral-border);
}

.gc-btn.gc-btn-solid.neutral:hover,
.gc-btn.gc-btn-solid.tonal-cancel:hover {
    color: #111827;
    background: var(--gc-fluent-neutral-hover);
    border-color: #94a3b8;
}

.gc-btn.gc-btn-solid.acties,
.gc-btn.gc-btn-solid.tonal-warning {
    color: #111827;
    background: var(--gc-fluent-warning);
    border-color: var(--gc-fluent-warning);
}

.gc-btn.gc-btn-solid.acties:hover,
.gc-btn.gc-btn-solid.tonal-warning:hover {
    background: var(--gc-fluent-warning-hover);
    border-color: var(--gc-fluent-warning-hover);
}

.gc-btn.primary .material-icons,
.gc-btn.primary .material-icons-round,
.gc-btn.finish .material-icons,
.gc-btn.finish .material-icons-round,
.gc-btn.stock-reservations-btn .material-icons,
.gc-btn.stock-reservations-btn .material-icons-round,
.gc-btn.sm-open-requests-btn .material-icons,
.gc-btn.sm-open-requests-btn .material-icons-round,
.gc-btn.success .material-icons,
.gc-btn.success .material-icons-round,
.gc-btn.save .material-icons,
.gc-btn.save .material-icons-round,
.gc-btn.create .material-icons,
.gc-btn.create .material-icons-round,
.gc-btn.tonal-success .material-icons,
.gc-btn.tonal-success .material-icons-round,
.gc-btn.danger .material-icons,
.gc-btn.danger .material-icons-round,
.gc-btn.tonal-danger .material-icons,
.gc-btn.tonal-danger .material-icons-round,
.gc-btn-restore .material-icons,
.gc-btn-restore .material-icons-round,
.gc-btn-archive .material-icons,
.gc-btn-archive .material-icons-round,
.sites-page .btn.primary .material-icons,
.sites-page .btn.primary .material-icons-round,
.sites-page .btn.success .material-icons,
.sites-page .btn.success .material-icons-round,
.sites-page .btn.danger .material-icons,
.sites-page .btn.danger .material-icons-round,
.work-orders-page .btn.primary .material-icons,
.work-orders-page .btn.primary .material-icons-round,
.work-orders-page .btn.success .material-icons,
.work-orders-page .btn.success .material-icons-round,
.work-orders-page .btn.danger .material-icons,
.work-orders-page .btn.danger .material-icons-round {
    color: #ffffff;
}

.gc-btn.secondary .material-icons,
.gc-btn.secondary .material-icons-round,
.gc-btn.tonal-info .material-icons,
.gc-btn.tonal-info .material-icons-round,
.sites-page .btn.secondary .material-icons,
.sites-page .btn.secondary .material-icons-round,
.work-orders-page .btn.secondary .material-icons,
.work-orders-page .btn.secondary .material-icons-round {
    color: var(--gc-fluent-primary-active-text);
}

.gc-btn.gc-btn-solid.primary .material-icons,
.gc-btn.gc-btn-solid.primary .material-icons-round,
.gc-btn.gc-btn-solid.secondary .material-icons,
.gc-btn.gc-btn-solid.secondary .material-icons-round {
    color: #ffffff;
}

.gc-btn.neutral .material-icons,
.gc-btn.neutral .material-icons-round,
.gc-btn.tonal-cancel .material-icons,
.gc-btn.tonal-cancel .material-icons-round,
.sites-page .btn.neutral .material-icons,
.sites-page .btn.neutral .material-icons-round,
.work-orders-page .btn.neutral .material-icons,
.work-orders-page .btn.neutral .material-icons-round {
    color: var(--gc-fluent-text);
}

.gc-btn.acties .material-icons,
.gc-btn.acties .material-icons-round,
.gc-btn.tonal-warning .material-icons,
.gc-btn.tonal-warning .material-icons-round,
.gc-2fa-enable .material-icons,
.gc-2fa-enable .material-icons-round {
    color: #111827;
}

.gc-save-fab {
    background: var(--gc-fluent-success);
}

.gc-save-fab:hover:not(:disabled) {
    background: var(--gc-fluent-success-hover);
}

.gc-exec-pill {
    border-radius: 999px;
    box-shadow: none;
}

.work_orders-detail-view .gc-exec-pill.work_orders-execution-time-btn,
.work_orders-detail-view .gc-btn[data-gw-pause-resume] {
    border-radius: 4px !important;
}

.gc-exec-pill.is-idle {
    background: var(--gc-fluent-success);
    border-color: var(--gc-fluent-success);
}

.gc-exec-pill.is-idle:hover {
    background: var(--gc-fluent-success-hover);
    border-color: var(--gc-fluent-success-hover);
}

.gc-exec-pill.is-running {
    background: var(--gc-fluent-danger);
    border-color: var(--gc-fluent-danger);
}

.gc-exec-pill.is-running:hover {
    background: var(--gc-fluent-danger-hover);
    border-color: var(--gc-fluent-danger-hover);
}

.gc-exec-pill.is-completed {
    color: var(--gc-fluent-muted);
    background: var(--gc-fluent-neutral);
    border-color: var(--gc-fluent-neutral-border);
}

.users-delete-modal-btn {
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.users-delete-modal-btn--cancel {
    color: var(--gc-fluent-text);
    background: var(--gc-fluent-neutral);
    border-color: var(--gc-fluent-neutral-border);
}

.users-delete-modal-btn--cancel:hover {
    color: #111827;
    background: var(--gc-fluent-neutral-hover);
    border-color: #94a3b8;
}

.users-delete-modal-btn--confirm {
    color: #ffffff;
    background: var(--gc-fluent-danger);
    border-color: var(--gc-fluent-danger);
}

.users-delete-modal-btn--confirm:hover {
    background: var(--gc-fluent-danger-hover);
    border-color: var(--gc-fluent-danger-hover);
}

.users-delete-modal-btn--warning {
    color: #111827;
    background: var(--gc-fluent-warning);
    border-color: var(--gc-fluent-warning);
}

.users-delete-modal-btn--warning:hover {
    background: var(--gc-fluent-warning-hover);
    border-color: var(--gc-fluent-warning-hover);
}

.users-delete-modal-btn--info {
    color: #ffffff;
    background: var(--gc-fluent-primary);
    border-color: var(--gc-fluent-primary);
}

.users-delete-modal-btn--info:hover {
    background: var(--gc-fluent-primary-hover);
    border-color: var(--gc-fluent-primary-hover);
}

.users-delete-modal-btn--success {
    color: #ffffff;
    background: var(--gc-fluent-success);
    border-color: var(--gc-fluent-success);
}

.users-delete-modal-btn--success:hover {
    background: var(--gc-fluent-success-hover);
    border-color: var(--gc-fluent-success-hover);
}

.pg-btn,
.pg-page {
    border-radius: 4px;
    color: var(--gc-fluent-text);
    background: var(--gc-fluent-neutral);
    border-color: var(--gc-fluent-neutral-border);
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.pg-btn:hover,
.pg-page:hover {
    color: #111827;
    background: var(--gc-fluent-neutral-hover);
    border-color: #94a3b8;
    transform: translateY(-1px);
}

.pg-page.active {
    color: #ffffff !important;
    background: var(--gc-fluent-primary);
    border-color: var(--gc-fluent-primary);
    transform: none;
}

.gc-icon-btn {
    --gc-icon-hover-border: rgba(37, 99, 235, 0.18);
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.gc-icon-btn:hover,
.gc-icon-btn.is-hover {
    --gc-icon-foreground: var(--fluent-colorNeutralForeground1Hover);
    background: var(--gc-fluent-primary-subtle);
    border-color: rgba(37, 99, 235, 0.18);
}

/* Shared action feedback; compact chips and filled modal/gallery controls keep their own borders. */
.gc-icon-btn:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-disabled):not(.gc-btn-disabled):not(.gc-chip-remove):not(.icon-muted-square):not(.boq-photo-delete):not(.ops-footer-icon):not(.boq-modal-icon-btn):not(.site-file-modal-icon-btn):is(:hover, :focus-visible, .is-hover) {
    border-color: var(--gc-icon-hover-border) !important;
}

[data-theme="dark"] .gc-icon-btn {
    --gc-icon-hover-border: var(--fluent-colorBrandStroke2);
}

.gc-icon-btn:focus-visible {
    outline: 2px solid var(--gc-fluent-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.gc-icon-btn.icon-primary .material-icons,
.gc-icon-btn.icon-primary .material-icons-round,
.gc-icon-btn.icon-info .material-icons,
.gc-icon-btn.icon-info .material-icons-round,
.gc-icon-btn.icon-view .material-icons,
.gc-icon-btn.icon-view .material-icons-round,
.boq-dossier-view-page .boq-file-action-download,
.sites-page .boq-file-action-open {
    color: var(--gc-icon-foreground, var(--gc-fluent-primary-text));
}

.gc-icon-btn.icon-edit .material-icons,
.gc-icon-btn.icon-edit .material-icons-round,
.gc-icon-btn.icon-success .material-icons,
.gc-icon-btn.icon-success .material-icons-round,
.ops-footer-planned {
    color: var(--gc-icon-foreground, var(--gc-fluent-success-text));
}

.gc-icon-btn.icon-delete .material-icons,
.gc-icon-btn.icon-delete .material-icons-round,
.gc-icon-btn.icon-danger .material-icons,
.gc-icon-btn.icon-danger .material-icons-round,
.ops-footer-cancel,
.boq-dossier-view-page .boq-file-action-delete {
    color: var(--gc-icon-foreground, var(--gc-fluent-danger-text));
}

.gc-icon-btn.icon-warning .material-icons,
.gc-icon-btn.icon-warning .material-icons-round,
.gc-icon-btn.icon-draft .material-icons,
.gc-icon-btn.icon-draft .material-icons-round,
.ops-footer-draft {
    color: var(--gc-icon-foreground, var(--gc-fluent-warning-hover-text));
}

.gc-icon-btn.icon-neutral .material-icons,
.gc-icon-btn.icon-neutral .material-icons-round {
    color: var(--gc-fluent-muted);
}

/* Match module notification headers, including the dashboard's docked panel. */
.dashboard-home-page .sidebar-site-lead-notification-header .gc-icon-btn:is(.sidebar-site-lead-notification-settings, .sidebar-site-lead-notification-breakout-toggle),
.dashboard-home-page .sidebar-site-lead-notification-header .gc-icon-btn:is(.sidebar-site-lead-notification-settings, .sidebar-site-lead-notification-breakout-toggle) .material-icons-round {
    color: var(--color-text-primary) !important;
}

/* Status-notification dismiss controls retain the prior topbar icon colour.
   They use a bare glyph, so their visual states live here with shared buttons. */
.sidebar-site-lead-notification-item-clear--status-update .material-icons-round {
    color: var(--gc-fluent-text);
    font-size: 20px;
}

.sidebar-site-lead-notification-item-clear--status-update:hover .material-icons-round,
.sidebar-site-lead-notification-item-clear--status-update:focus-visible .material-icons-round {
    color: var(--gc-fluent-danger-text);
}

[data-theme="dark"] .sidebar-site-lead-notification-item-clear--status-update .material-icons-round {
    color: var(--gc-fluent-muted);
}

.gc-icon-btn:not(.icon-overdue):not(.icon-primary):not(.icon-info):not(.icon-view):not(.icon-edit):not(.icon-success):not(.icon-delete):not(.icon-danger):not(.icon-warning):not(.icon-draft):not(.icon-neutral):not(.tonal):not(.info):not(.error):not(.u-user-action-icon--edit):not(.u-user-action-icon--delete):not(.u-user-action-icon--disabled):not(.sm-product-modal-close):not(.ops-card-action):not(.ops-footer-icon):not(.boq-modal-icon-btn):not(.site-file-modal-icon-btn) .material-icons,
.gc-icon-btn:not(.icon-overdue):not(.icon-primary):not(.icon-info):not(.icon-view):not(.icon-edit):not(.icon-success):not(.icon-delete):not(.icon-danger):not(.icon-warning):not(.icon-draft):not(.icon-neutral):not(.tonal):not(.info):not(.error):not(.u-user-action-icon--edit):not(.u-user-action-icon--delete):not(.u-user-action-icon--disabled):not(.sm-product-modal-close):not(.ops-card-action):not(.ops-footer-icon):not(.boq-modal-icon-btn):not(.site-file-modal-icon-btn) .material-icons-round {
    color: var(--gc-fluent-text);
}

.gc-icon-btn.ops-footer-icon .material-icons,
.gc-icon-btn.ops-footer-icon .material-icons-round,
.gc-icon-btn.boq-modal-icon-btn .material-icons,
.gc-icon-btn.boq-modal-icon-btn .material-icons-round,
.gc-icon-btn.site-file-modal-icon-btn .material-icons,
.gc-icon-btn.site-file-modal-icon-btn .material-icons-round {
    color: inherit;
}

.gc-icon-btn.icon-muted-square,
.gc-icon-btn.icon-muted-square.ops-footer-icon,
.gc-icon-btn.icon-muted-square.boq-modal-icon-btn {
    border-radius: 4px;
    border-color: var(--gc-fluent-neutral-border);
    background: var(--gc-fluent-neutral);
    color: var(--gc-fluent-muted);
}

.gc-icon-btn.icon-muted-square:hover,
.gc-icon-btn.icon-muted-square:focus-visible,
.gc-icon-btn.icon-muted-square.ops-footer-icon:hover,
.gc-icon-btn.icon-muted-square.ops-footer-icon:focus-visible,
.gc-icon-btn.icon-muted-square.boq-modal-icon-btn:hover,
.gc-icon-btn.icon-muted-square.boq-modal-icon-btn:focus-visible {
    border-radius: 4px;
    background: var(--gc-fluent-neutral-hover);
    border-color: #94a3b8;
}

/* Preserve tab geometry when Paving switches between reporting and planning. */
.paving-page .installation-planner-tabs .gc-btn,
.paving-page .installation-planner-tabs .gc-btn.is-active {
    border-width: 1px;
    border-style: solid;
}

/* Use Installation's neutral backlog-tab treatment for Paving's filter keys. */
.paving-page .installation-backlog .installation-segments button[data-paving-filter]:not(.active) {
    background: var(--gc-badge-neutral-bg, #f2f4f7);
    border-color: var(--gc-badge-neutral-border, #d0d5dd);
    color: var(--gc-badge-neutral-text, #344054);
}

/* Shared photo lightbox controls. */
#stockBookingModal .sm-chip {
    min-height: 40px;
}
#stockBookingModal .sm-chip:disabled {
    opacity: .45;
    filter: grayscale(1);
    cursor: default;
}
#stockBookingModal .sm-qty-btn {
    border-radius: 4px;
    height: var(--gc-control-height, 38px);
    min-height: var(--gc-control-height, 38px);
    box-sizing: border-box;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
#stockBookingModal .stock-booking-search-clear,
.reservation-pallet-search-clear {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 999px;
}
#stockBookingModal .sm-product-modal-close {
    border-width: 1px;
}
#stockBookingModal .stock-booking-search-clear .material-icons-round,
.reservation-pallet-search-clear .material-icons-round {
    font-size: 18px;
}
.reservation-pallet-search-clear[hidden] { display: none !important; }
#stockBookingModal .sm-qty-minus {
    /* Filled quantity controls retain contrast above legacy dark icon overrides. */
    background: var(--gc-fluent-danger, #dc2626) !important;
    border-color: var(--gc-fluent-danger, #dc2626);
    color: #fff !important;
}
#stockBookingModal .sm-qty-minus:hover:not(:disabled) {
    background: var(--gc-fluent-danger-hover, #b91c1c) !important;
}
#stockBookingModal .sm-qty-plus {
    background: var(--gc-fluent-success, #16a34a) !important;
    border-color: var(--gc-fluent-success-hover, #15803d);
    color: #fff !important;
}
#stockBookingModal .sm-qty-plus:hover:not(:disabled) {
    background: var(--gc-fluent-success-hover, #15803d) !important;
}
#stockBookingModal .sm-qty-btn .material-icons-round {
    color: inherit;
}
#stockBookingModal .sm-qty-btn:focus-visible {
    outline: 2px solid var(--gc-primary, #4f8cff);
    outline-offset: 2px;
}
#stockBookingModal .sm-chip:focus-visible {
    outline: 2px solid var(--gc-primary, #4f8cff);
    outline-offset: 3px;
}
.stock-booking-thumbnail {
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: zoom-in;
}
.stock-booking-thumbnail:focus-visible {
    outline: 2px solid var(--gc-primary, #4f8cff);
    outline-offset: 2px;
}
.erp-photo-lightbox .erp-photo-lightbox-close.gc-icon-btn,
.erp-photo-lightbox .erp-photo-lightbox-nav.gc-icon-btn,
.erp-photo-lightbox .erp-photo-lightbox-tool.gc-icon-btn {
    box-sizing: border-box;
    width: 44px; min-width: 44px; max-width: 44px;
    height: 44px; min-height: 44px; max-height: 44px;
    padding: 0;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #111827;
    border: 0;
    box-shadow: none;
}
.erp-photo-lightbox .erp-photo-lightbox-close.gc-icon-btn:hover,
.erp-photo-lightbox .erp-photo-lightbox-close.gc-icon-btn:focus-visible,
.erp-photo-lightbox .erp-photo-lightbox-nav.gc-icon-btn:hover,
.erp-photo-lightbox .erp-photo-lightbox-nav.gc-icon-btn:focus-visible,
.erp-photo-lightbox .erp-photo-lightbox-tool.gc-icon-btn:hover,
.erp-photo-lightbox .erp-photo-lightbox-tool.gc-icon-btn:focus-visible {
    background: #ffffff !important;
}

[data-theme="dark"] .erp-photo-lightbox .erp-photo-lightbox-close.gc-icon-btn,
[data-theme="dark"] .erp-photo-lightbox .erp-photo-lightbox-nav.gc-icon-btn,
[data-theme="dark"] .erp-photo-lightbox .erp-photo-lightbox-tool.gc-icon-btn {
    background: var(--fluent-colorNeutralBackground2) !important;
    border: 1px solid var(--fluent-colorNeutralStroke2);
    color: var(--fluent-colorNeutralForeground1);
}

[data-theme="dark"] .erp-photo-lightbox .erp-photo-lightbox-close.gc-icon-btn:hover,
[data-theme="dark"] .erp-photo-lightbox .erp-photo-lightbox-close.gc-icon-btn:focus-visible,
[data-theme="dark"] .erp-photo-lightbox .erp-photo-lightbox-nav.gc-icon-btn:hover,
[data-theme="dark"] .erp-photo-lightbox .erp-photo-lightbox-nav.gc-icon-btn:focus-visible,
[data-theme="dark"] .erp-photo-lightbox .erp-photo-lightbox-tool.gc-icon-btn:hover,
[data-theme="dark"] .erp-photo-lightbox .erp-photo-lightbox-tool.gc-icon-btn:focus-visible {
    background: var(--fluent-colorNeutralBackground1Hover) !important;
}

.erp-photo-lightbox .gc-icon-btn .material-icons-round {
    color: inherit !important;
    font-size: 20px;
}



.work_orders-site-photo-preview { border: 0; background: transparent; }
.work_orders-site-photo-preview:focus-visible { outline: 2px solid var(--gc-primary, #4f8cff); outline-offset: 2px; }

/* Overflow tiles share the photo preview's compact rail footprint, whether
   rendered as a native link/button or inside a shared React control island. */
.erp-photo-gallery[data-photo-layout] :is(a, button).gc-btn:is([data-site-photo-more], [data-boq-site-photo-more], [data-gw-site-photos-more]) {
    box-sizing: border-box;
    width: var(--erp-photo-preview-width, 168px);
    height: var(--erp-photo-preview-height, 128px);
    min-height: 0;
    flex-shrink: 0;
    align-self: start;
    align-items: center;
    flex-direction: column;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal;
}
/* Keep the tile border inside the photo rail during hover. */
.erp-photo-gallery[data-photo-layout] :is(a, button).gc-btn:is([data-site-photo-more], [data-boq-site-photo-more], [data-gw-site-photos-more]):hover {
    transform: none;
}

/* Thumbnail previews use Fluent semantics with the existing image-only surface. */
.erp-photo-thumbnail .erp-photo-thumbnail-preview.fui-Button {
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: zoom-in;
}
.erp-photo-thumbnail--gallery .erp-photo-thumbnail-preview.fui-Button {
    background: #ffffff;
    border: 1px solid var(--installation-border, #cbd5e1);
    cursor: pointer;
}
.gc-icon-btn:is([data-installation-photo-view], [data-paving-photo-view], [data-stock-photo-view]) {
    --erp-photo-action-background: #ffffff;
    --erp-photo-action-hover: rgb(203, 213, 225);
    background: var(--erp-photo-action-background) !important;
}
[data-theme="dark"] .gc-icon-btn:is([data-installation-photo-view], [data-paving-photo-view], [data-stock-photo-view]) {
    --erp-photo-action-background: var(--fluent-colorNeutralBackground2);
    --erp-photo-action-hover: var(--fluent-colorNeutralBackground2);
}
.gc-icon-btn.icon-view:is([data-installation-photo-view], [data-paving-photo-view], [data-stock-photo-view]):is(:hover, :focus-visible, :active) {
    background: var(--erp-photo-action-hover) !important;
}

/* Shared thumbnail action surfaces for Sites detail, full gallery and BOQ. */
.erp-photo-thumbnail .erp-photo-thumbnail-action,
.sites-page .installation-gallery-card-actions .gc-icon-btn,
.sites-page .site-native-photo-gallery .boq-photo-delete,
.paving-page .boq-detail-photo-gallery .work_orders-photo-delete,
.boq-page .boq-detail-photo-gallery :is(.boq-photo-download, .boq-photo-delete) {
    width: 32px;
    height: 32px;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 6px;
    box-shadow: none !important;
    opacity: 1 !important;
}
.erp-photo-thumbnail .erp-photo-thumbnail-action.gc-icon-btn:is(:hover, :focus-visible),
.sites-page .installation-gallery-card-actions .gc-icon-btn:is(:hover, :focus-visible),
.sites-page .site-native-photo-gallery .boq-photo-delete:hover,
.sites-page .site-native-photo-gallery .boq-photo-delete:focus-visible,
.paving-page .boq-detail-photo-gallery .work_orders-photo-delete:is(:hover, :focus-visible),
.boq-page .boq-detail-photo-gallery :is(.boq-photo-download, .boq-photo-delete):is(:hover, :focus-visible) {
    background: rgb(203, 213, 225) !important;
}
[data-theme="dark"] .erp-photo-thumbnail .erp-photo-thumbnail-action,
[data-theme="dark"] .sites-page .installation-gallery-card-actions .gc-icon-btn,
[data-theme="dark"] .sites-page .site-native-photo-gallery .boq-photo-delete,
[data-theme="dark"] .paving-page .boq-detail-photo-gallery .work_orders-photo-delete,
[data-theme="dark"] .boq-page .boq-detail-photo-gallery :is(.boq-photo-download, .boq-photo-delete) {
    background: var(--fluent-colorNeutralBackground2) !important;
}
[data-theme="dark"] .erp-photo-thumbnail .erp-photo-thumbnail-action.gc-icon-btn:is(:hover, :focus-visible),
[data-theme="dark"] .sites-page .installation-gallery-card-actions .gc-icon-btn:is(:hover, :focus-visible),
[data-theme="dark"] .sites-page .site-native-photo-gallery .boq-photo-delete:hover,
[data-theme="dark"] .sites-page .site-native-photo-gallery .boq-photo-delete:focus-visible,
[data-theme="dark"] .paving-page .boq-detail-photo-gallery .work_orders-photo-delete:is(:hover, :focus-visible),
[data-theme="dark"] .boq-page .boq-detail-photo-gallery :is(.boq-photo-download, .boq-photo-delete):is(:hover, :focus-visible) {
    background: var(--fluent-colorNeutralBackground1Hover) !important;
}

/* Unfilled at rest; retain the shared navigation button hover/focus style. */
[data-project-planning-root] .ops-col-reference-icons :is(.ops-reference-link, .ops-planning-link).gc-icon-btn:not(:hover):not(:focus-visible):not(:active) {
    background: transparent !important;
}

/* Work-order floating submit: state and icon colors live with shared button controls. */
.work_orders-floating-submit-btn {background:var(--gc-fluent-primary-active,#2563eb);color:#fff;cursor:pointer;box-shadow:none;}
.work_orders-floating-submit-btn:hover:not(:disabled) {background:var(--gc-fluent-primary-active,#2563eb);}
.work_orders-floating-submit-btn .material-icons,
.work_orders-floating-submit-btn .material-icons-round {color:inherit;}
.work_orders-page .gc-save-fab.work_orders-floating-submit-btn:disabled,
.work_orders-page .gc-save-fab.work_orders-floating-submit-btn[aria-disabled="true"] {background:var(--gc-fluent-primary-active,#2563eb) !important;color:#ffffff !important;border-color:var(--gc-fluent-primary-active,#2563eb) !important;filter:saturate(.55) opacity(.65);box-shadow:none !important;cursor:default !important;pointer-events:none !important;transform:none !important;}
html[data-theme="dark"] .work_orders-page .gc-save-fab.work_orders-floating-submit-btn:disabled,
html[data-theme="dark"] .work_orders-page .gc-save-fab.work_orders-floating-submit-btn[aria-disabled="true"] {background:var(--gc-fluent-primary-active,var(--fluent-colorBrandBackground)) !important;color:var(--fluent-colorNeutralForegroundDisabled) !important;border-color:var(--gc-fluent-primary-active,var(--fluent-colorBrandStroke1)) !important;}

/* Keep the unavailable FAB recognizable without overriding the controller's
   opacity-based visibility. Native disabled/pointer guards remain authoritative. */
.work_orders-page .gc-save-fab.work_orders-floating-submit-btn:is(:disabled, [aria-disabled="true"]) :is(.fui-Button__icon, .erp-icon, .material-icons, .material-icons-round) {
    color: #ffffff !important;
}

/* Locked work-order steppers retain their muted state under pointer hover. */
.boq-page .work_orders-stepper .boq-workpost-row-stepper-btn:is(:disabled, [aria-disabled="true"]) {
    background: transparent !important;
    color: var(--gc-fluent-disabled-text, #8a8886) !important;
    cursor: default !important;
}
html[data-theme="dark"] .boq-page .work_orders-stepper .boq-workpost-row-stepper-btn:is(:disabled, [aria-disabled="true"]) {
    background: transparent !important;
    color: var(--erp-dark-text-muted, var(--fluent-colorNeutralForegroundDisabled)) !important;
}
.boq-page .work_orders-stepper .boq-workpost-row-stepper-btn:is(:disabled, [aria-disabled="true"]) .material-icons-round {
    color: inherit !important;
}

/* Selected PUT tabs share the requested blue in both themes and on hover. */
.work_orders-page .gw-puts-tabs .gw-puts-tab.is-active:not(:disabled):not([aria-disabled="true"]) {
    background: var(--gc-fluent-primary-active, #2563eb);
    color: #fff;
    border-color: var(--gc-fluent-primary-active, #2563eb);
}
/* Keep the blocked-profile action aligned with its compact status notice. */
.users-page .users-edit-state-notice--locked .users-edit-state-notice__action .gc-btn {
    border-radius: 4px !important;
}

/* Compact chip removal: keep the hover target inside the badge. */
.gc-badge .gc-icon-btn.gc-chip-remove {
    --gc-icon-btn-size: 16px;
    width: 16px;
    height: 16px;
    min-width: 16px;
    max-width: 16px;
    min-height: 16px;
    max-height: 16px;
    flex: 0 0 16px;
    box-sizing: border-box;
    padding: 0;
    margin-left: 3px;
    border: 0;
    border-radius: 4px;
    line-height: 1;
    overflow: hidden;
    box-shadow: none;
    transform: none;
}
.gc-badge .gc-icon-btn.gc-chip-remove:hover,
.gc-badge .gc-icon-btn.gc-chip-remove:focus-visible,
.gc-badge .gc-icon-btn.gc-chip-remove:active {
    background: var(--gc-fluent-primary-subtle);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}
.gc-badge .gc-icon-btn.gc-chip-remove .material-icons-round {
    font-size: 12px;
    line-height: 1;
    color: inherit;
}

/* Module pages retain their existing mobile overlay opener. */
@media (max-width: 900px) {
    body.has-dashboard-sidebar-shell .gc-topbar #topbarToggleBtn {
        display: none;
    }
}

/* Planning More controls keep label and icon on the shared action colour. */
.installation-page .ops-more-trigger.gc-btn.acties > span {
    color: inherit !important;
}

/* Product suggestions in the Stock booking modal. */
.catalog-create-form .stock-booking-results button,
#stockBookingModal .stock-booking-results button {
    display: block;
    width: 100%;
    padding: 10px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.catalog-create-form .stock-booking-results button:hover,
.catalog-create-form .stock-booking-results [aria-selected="true"],
#stockBookingModal .stock-booking-results button:hover,
#stockBookingModal .stock-booking-results [aria-selected="true"] {
    background: var(--gc-surface-alt, #f0f0f0);
}

.stock-filter-page .stock-search-clear {
    flex: 0 0 auto;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    margin-left: auto;
    border-radius: 999px;
}
.stock-filter-page .stock-search-clear[hidden],
.erp-list-filter-page .stock-search-clear[hidden] {
    display: none !important;
}
.reservations-page button[data-reservation-status-toggle] {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.stock-filter-page .stock-search-clear .material-icons-round {
    font-size: 18px;
}
.erp-sites-table-workspace .ops-overkoppeling-sort {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--md-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.erp-sites-table-workspace .ops-overkoppeling-filter-trigger {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--md-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.erp-sites-table-workspace .ops-overkoppeling-filter-trigger .material-icons-round { font-size: 16px; }
.erp-sites-table-workspace .ops-overkoppeling-filter-trigger:is(:hover, .is-open) {
    background: rgba(31, 111, 235, 0.08);
    border-color: rgba(31, 111, 235, 0.25);
    color: #1f6feb;
}
.erp-sites-table-workspace .ops-overkoppeling-filter-trigger.is-active,
.erp-sites-table-workspace .ops-overkoppeling-sort:is([aria-sort="ascending"], [aria-sort="descending"]) { color: #1f6feb; }
.erp-sites-table-workspace .native-table-resizer:is(:hover, :focus-visible),
.erp-sites-table-workspace [data-native-table-resizing] .native-table-resizer { background: rgba(31, 111, 235, 0.12); }
/* Shared planner day headings keep the calendar typography and expose only
   populated days as actions. */
button.installation-month-day-heading[data-planning-day-open] {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    padding: 5px 6px;
    text-align: left;
    transition: background .15s ease;
    width: 100%;
}
button.installation-month-day-heading[data-planning-day-open]:enabled:is(:hover,:focus-visible) {
    background: var(--installation-accent-soft);
}
button.installation-month-day-heading[data-planning-day-open]:focus-visible {
    outline: 2px solid var(--gc-primary, #2563eb);
    outline-offset: 2px;
}
button.installation-month-day-heading[data-planning-day-open]:disabled {
    cursor: default;
    opacity: 1;
}
button.gc-badge[data-planning-day-user-filter] {
    cursor: pointer;
    font-family: inherit;
    white-space: normal;
    text-align: left;
    max-width: 100%;
    overflow-wrap: anywhere;
}
button[data-planning-day-collapse] {
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
}
.installation-day-dialog-group > button.installation-month-user-group-header[data-planning-day-collapse]:is(:hover,:focus-visible) {
    background: var(--gc-fluent-neutral-hover);
}
button[data-planning-day-collapse]:focus-visible {
    outline: 2px solid var(--installation-accent);
    outline-offset: 2px;
}
button.gc-badge[data-planning-day-user-filter]:focus-visible {
    outline: 2px solid var(--installation-accent);
    outline-offset: 2px;
}
/* Sites column controls on the explicitly adopted administration tables. */
.admin-sites-table-page .ops-overkoppeling-sort {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    font: inherit;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--md-muted, #6b7280);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-sites-table-page .ops-overkoppeling-filter-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--md-muted, #6b7280);
    cursor: pointer;
}
.admin-sites-table-page .ops-overkoppeling-filter-trigger .material-icons-round { font-size: 16px; }
.admin-sites-table-page .ops-overkoppeling-filter-trigger:is(:hover, .is-open, .is-active),
.admin-sites-table-page .ops-overkoppeling-sort[aria-sort]:not([aria-sort="none"]) {
    color: #2563eb;
    background: rgba(37, 99, 235, .08);
}
[data-theme="dark"] .admin-sites-table-page :is(.ops-overkoppeling-sort, .ops-overkoppeling-filter-trigger) { color: var(--erp-dark-text-soft, var(--fluent-colorNeutralForeground2)); }
[data-theme="dark"] .admin-sites-table-page .ops-overkoppeling-filter-trigger:is(:hover, .is-open, .is-active),
[data-theme="dark"] .admin-sites-table-page .ops-overkoppeling-sort[aria-sort]:not([aria-sort="none"]) { color: var(--fluent-colorBrandForegroundLinkHover); }

/* The file viewer must never expose Save for a view-only link. */
.erp-file-modal .gc-btn[data-file-save][hidden] {
    display: none !important;
}

/* Keep a selected column filter visibly marked after its popup closes or
   cookie state is restored. Shared by every popup table controller. */
body .ops-overkoppeling-filter-trigger.is-active:not(:disabled) {
    color: #2563eb;
    background-color: #dbeafe;
    border-color: #93c5fd;
    border-radius: 4px;
}
[data-theme="dark"] .ops-overkoppeling-filter-trigger.is-active:not(:disabled) {
    color: var(--fluent-colorBrandForeground2) !important;
    background-color: var(--fluent-colorBrandBackground2) !important;
    border-color: var(--fluent-colorBrandStroke1) !important;
    border-radius: 4px !important;
}

/* Sorted heading colour matches Sites, including restored popup sorts. */
/* Project planning's grey information headers need stronger text contrast. */
#opsProjectPlanningHead .ops-overkoppeling-sort[aria-sort="none"] {
    color: inherit !important;
}
#opsProjectPlanningHead .ops-overkoppeling-sort:is([aria-sort="ascending"], [aria-sort="descending"]) {
    color: #1e40af !important;
}
[data-theme="dark"] #opsProjectPlanningHead .ops-overkoppeling-sort:is([aria-sort="ascending"], [aria-sort="descending"]) {
    color: var(--fluent-colorBrandForeground1) !important;
}

body .ops-overkoppeling-sort[aria-sort]:is([aria-sort="ascending"], [aria-sort="descending"]),
body th:is([aria-sort="ascending"], [aria-sort="descending"]) > .boq-th-label {
    color: #2563eb !important;
}
[data-theme="dark"] body .ops-overkoppeling-sort[aria-sort]:is([aria-sort="ascending"], [aria-sort="descending"]),
[data-theme="dark"] body th[aria-sort]:is([aria-sort="ascending"], [aria-sort="descending"]) > .boq-th-label {
    color: var(--fluent-colorBrandForeground1) !important;
}

/* Native-table enhancers reuse the heading typography without browser button chrome. */
button.boq-th-label.ops-overkoppeling-sort {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}
.erp-detail-table .ops-overkoppeling-filter-trigger { width: 24px; min-width: 24px; height: 24px; min-height: 24px; }

/* Match the Warehouses up/down glyph for either heading or popup sorting. */
.ops-overkoppeling-sort[aria-sort="ascending"]::after {
    content: '↑';
}
.ops-overkoppeling-sort[aria-sort="descending"]::after {
    content: '↓';
}
.ops-overkoppeling-sort:is([aria-sort="ascending"], [aria-sort="descending"])::after {
    display: inline-block;
    flex-shrink: 0;
    margin-inline-start: 4px;
    font-family: inherit;
}

/* Shared self-hosted SVG icons for opted-in React ERP controls. */
svg.erp-icon { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
/* Opted-in Fluent buttons keep ERP metrics; its icon slot must not double our gap. */
.fui-Button.erp-button.gc-btn {
    min-width: 0;
    padding: 7px 12px;
    line-height: normal;
}
/* Grid wrapping belongs to cell content; action labels remain one readable line. */
.erp-react-grid .erp-button.gc-btn {
    white-space: nowrap;
    flex-shrink: 0;
}
.erp-react-grid .erp-button.gc-btn.erp-button-truncate {
    max-width: 100%; min-width: 0; flex-shrink: 1;
}
.erp-button-truncate-label {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gc-icon-btn.erp-sidebar-toggle {
    /* Topbar utility icons are white by default; this control has a neutral surface. */
    --gc-topbar-icon-color: var(--color-text-primary, #0f172a);
    color: var(--color-text-primary, #0f172a);
}

/* Icon-only utility launchers retain a generous hit target without a button surface. */
.gc-icon-btn.erp-icon-launcher[data-slot="button"] {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: var(--erp-icon-launcher-size, 40px); min-width: var(--erp-icon-launcher-size, 40px); height: var(--erp-icon-launcher-size, 40px); padding: 4px;
    color: var(--gc-fluent-muted, #64748b) !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    line-height: 1; text-decoration: none; overflow: visible;
}
.gc-icon-btn.erp-icon-launcher[data-slot="button"]:is(:hover,:focus-visible) { color: var(--gc-icon-foreground, var(--gc-fluent-primary-active-text, #2563eb) )!important; }
.gc-icon-btn.erp-icon-launcher[data-slot="button"]:is(:hover,:focus-visible,:active) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.gc-icon-btn.erp-icon-launcher[data-slot="button"]:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; }
.erp-icon-launcher .fui-Button__icon { display: flex; align-items: center; justify-content: center; width: var(--erp-icon-launcher-glyph-slot, 32px); height: var(--erp-icon-launcher-glyph-slot, 32px); margin: 0; }
.erp-icon-launcher svg.erp-icon { display: block; width: var(--erp-icon-launcher-glyph-slot, 32px); height: var(--erp-icon-launcher-glyph-slot, 32px); }

.gc-icon-btn.erp-icon-button--surface {
    box-sizing: border-box;
    width: var(--gc-icon-btn-size, 36px); min-width: var(--gc-icon-btn-size, 36px);
    height: var(--gc-icon-btn-size, 36px); min-height: var(--gc-icon-btn-size, 36px);
    padding: 0;
    border-radius: 4px !important;
}
.gc-icon-btn.erp-icon-button--surface[data-slot="button"] {
    background: var(--gc-fluent-neutral);
    border: 1px solid var(--gc-fluent-neutral-border);
    box-shadow: none;
}
.gc-icon-btn.erp-icon-button--surface[data-slot="button"]:is(:hover, :focus-visible) {
    background: var(--gc-fluent-neutral-hover);
}
/* KPI launchers retain ERP blue over the legacy dark-mode neutral !important. */
@media (forced-colors: none) {
    .gc-icon-btn.erp-kpi-launcher:not(:disabled):is(:hover, :focus-visible) {
        color: var(--gc-icon-foreground, var(--gc-fluent-primary-active-text, #2563eb) )!important;
    }
}
.fui-Button.erp-button.gc-icon-btn {
    min-width: var(--gc-icon-btn-size, 36px);
    padding: 0;
    font: inherit;
}
/* A disabled placeholder must absorb pointer hits instead of exposing row navigation. */
.fui-Button.erp-button.gc-icon-btn.erp-icon-button--placeholder:disabled {
    pointer-events: auto;
    cursor: default;
}
/* Shared row actions reveal the Sites button surface on hover or keyboard focus.
   Restore the complete border: legacy action resets can remove its style/width,
   so changing border-color alone does not produce a visible surface. Semantic
   icon colors and hover fills continue to use the shared tone rules above. */
.erp-react-actions [data-slot="button"].gc-icon-btn {
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
.erp-react-actions [data-slot="button"].gc-icon-btn:not(:hover):not(:focus-visible):not(:active):not(.is-hover) {
    background: transparent !important;
    border-color: transparent !important;
}
.erp-react-actions [data-slot="button"].gc-icon-btn:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-disabled):not(.gc-btn-disabled):is(:hover, :focus-visible, .is-hover) {
    border-color: var(--gc-icon-hover-border) !important;
}
.erp-react-actions [data-slot="button"].gc-icon-btn.icon-neutral:not(:is(.icon-primary, .icon-info, .icon-view, .icon-edit, .icon-success, .icon-delete, .icon-danger, .icon-warning, .icon-draft)):not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-disabled):not(.gc-btn-disabled):is(:hover, :focus-visible, .is-hover) {
    background: var(--gc-fluent-primary-subtle) !important;
}
/* Unavailable slots stay muted and bare, including when the pointer rests on
   an aria-disabled link. This does not change native disabled/action behavior. */
.erp-react-actions [data-slot="button"].gc-icon-btn:is(:disabled, [aria-disabled="true"], .disabled, .is-disabled, .gc-btn-disabled) {
    border: 0 !important;
    background: transparent !important;
    color: var(--gc-fluent-disabled-text, #94a3b8) !important;
    box-shadow: none !important;
    outline: 0 !important;
}
/* A missing dossier keeps its action slot, without a fabricated border. */
.sites-page .erp-react-actions .site-grid-planning-placeholder { border: 0 !important; }
.fui-Button.erp-button > .fui-Button__icon { margin: 0; flex-shrink: 0; color: inherit; }
/* Wizard footer controls share one stationary 4px surface in every module.
   Native resets used to remove border width/style and hover translated it. */
.gc-icon-btn:is(.ops-footer-icon,.boq-modal-icon-btn,.site-file-modal-icon-btn){border:1px solid transparent!important;border-radius:4px!important;transform:none!important;box-sizing:border-box}
.gc-icon-btn:is(.ops-footer-icon,.boq-modal-icon-btn,.site-file-modal-icon-btn):not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-disabled):not(.gc-btn-disabled):is(:hover,:focus-visible,.is-hover){border-color:var(--gc-icon-hover-border)!important}
/* Fluent subtle buttons otherwise recolor their icon slot independently on hover. */
@media (forced-colors: none) {
    .fui-Button.erp-button:is(:hover, :active, :focus-visible) > .fui-Button__icon {
        color: inherit;
    }
}
.fui-Button.erp-button:focus-visible {
    outline: 2px solid var(--gc-fluent-focus, rgba(37, 99, 235, 0.28));
    outline-offset: 2px;
    box-shadow: none;
}
.create-edit-modal-actions > .erp-fluent-provider > .fui-Button.erp-button.gc-btn {
    border-radius: 4px !important;
}
.erp-react-modal-icons button[data-modal-close] > .material-icons-round,
.erp-react-modal-icons button.gc-delete-modal-close > .material-icons-round,
.erp-react-modal-icons [data-delete-modal-submit-icon],
.erp-react-modal-icons [data-delete-modal-title-icon] { display: none; }
.erp-react-modal-icons [data-delete-modal-title] > .erp-icon,
.erp-react-modal-icons [data-delete-modal-cancel] > .erp-icon,
.erp-react-modal-icons [data-delete-modal-submit] > .erp-icon { order: -1; }

/* Opt-in React data-table pagination; shared ERP colors/states remain authoritative. */
.erp-pagination.gc-pagination-wrapper { flex-shrink: 0; flex-wrap: wrap; gap: 12px; }
.erp-pagination .erp-pagination-controls { list-style: none; margin: 0; padding: 0; width: auto; }
.erp-pagination .erp-pagination-controls > li { display: flex; }
.erp-pagination .erp-pagination-size.fui-Dropdown {
    width: auto;
    min-width: 70px;
    flex: none;
    height: var(--gc-control-height, 38px);
    min-height: var(--gc-control-height, 38px);
    padding: 0;
    border-radius: 4px;
}
.erp-pagination-size.fui-Dropdown > .fui-Dropdown__button {
    height: 100%;
    padding: 7px 10px;
    font: inherit;
    color: inherit;
    background: transparent;
}
.erp-pagination-size.fui-Dropdown .fui-Dropdown__expandIcon { color: inherit; }
.erp-pagination .pg-btn.gc-icon-btn {
    border-radius: 4px !important;
    width: var(--gc-control-height, 38px);
    min-width: var(--gc-control-height, 38px);
    height: var(--gc-control-height, 38px);
    min-height: var(--gc-control-height, 38px);
    padding: 0;
}
.erp-pagination .erp-pagination-controls .pg-page {
    height: var(--gc-control-height, 38px);
    min-height: var(--gc-control-height, 38px);
    padding: 7px 12px;
    font-size: var(--gc-base-font-size, 14px);
    line-height: 1.2;
    border-radius: 4px !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: default;
}
@media (max-width: 640px) and (orientation: portrait) {
    .erp-pagination.gc-pagination-wrapper { justify-content: center !important; }
}
.erp-react-search .erp-search-clear.gc-icon-btn {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    justify-self: end;
}
.erp-react-search .erp-search-clear[hidden] { display: none !important; }

/* Shared React warning controls, including action-menu triggers. */
.erp-button.gc-btn.warning {
    color: #fff; background: var(--gc-fluent-warning); border-color: var(--gc-fluent-warning);
}
.erp-button.gc-btn.warning:hover,
.erp-button.gc-btn.warning:active {
    color: #fff; background: var(--gc-fluent-warning-hover); border-color: var(--gc-fluent-warning-hover);
}

/* The reusable multiselect keeps removal targets distinct from compact status badges. */
.erp-multiselect .erp-multiselect-chip .gc-chip-remove {
    --gc-icon-btn-size: 24px;
    width: 24px; min-width: 24px; max-width: 24px;
    height: 24px; min-height: 24px; max-height: 24px;
    flex: 0 0 24px; margin: 0; padding: 0;
}
.erp-multiselect .gc-chip-remove .erp-icon { width: 14px; height: 14px; font-size: 14px; }
@media (any-pointer: coarse) {
    .erp-multiselect .erp-multiselect-chip .gc-chip-remove {
        --gc-icon-btn-size: 32px;
        width: 32px; min-width: 32px; max-width: 32px;
        height: 32px; min-height: 32px; max-height: 32px;
        flex-basis: 32px;
    }
}

/* Opt-in compact selection badges keep their removal controls inside 22px. */
.erp-multiselect.erp-multiselect--compact-chips .erp-multiselect-chip .gc-chip-remove {
    --gc-icon-btn-size: 18px;
    width: 18px; min-width: 18px; max-width: 18px;
    height: 18px; min-height: 18px; max-height: 18px;
    flex: 0 0 18px; margin: 0; padding: 0;
}
.erp-multiselect.erp-multiselect--compact-chips .gc-chip-remove .erp-icon { width: 12px; height: 12px; font-size: 12px; }

/* React back arrows follow the standard native module back-arrow colors. */
.gc-topbar-left .gc-icon-btn .erp-icon[data-erp-icon="ArrowLeft20Filled"] {
    color: var(--gc-fluent-text, #1f2937);
}
[data-theme="dark"] .gc-topbar-left .gc-icon-btn .erp-icon[data-erp-icon="ArrowLeft20Filled"] {
    color: var(--dashboard-shell-topbar-title, var(--fluent-colorNeutralForeground1));
}

/* Match native responsive Home icons when a topbar uses Fluent SVGs. */
.gc-topbar .gc-icon-btn.fallback-mobile .erp-icon[data-erp-icon="Home20Filled"] {
    color: #64748b;
}
[data-theme="dark"] .gc-topbar .gc-icon-btn.fallback-mobile .erp-icon[data-erp-icon="Home20Filled"] {
    color: var(--fluent-colorNeutralForeground2);
}

/* Menu labels shrink with a resized grid column while their icons remain usable. */
.erp-button.gc-btn.erp-actions-menu-trigger { min-width: 0; max-width: 100%; flex-shrink: 1; }
.erp-actions-menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Strong brand fill retains readable white choice labels in both themes. */
[data-slot="button"].gc-btn.erp-choice-button:is([aria-pressed="true"], .is-active):not(:disabled) {
    background: var(--gc-fluent-primary-active) !important;
    border-color: var(--gc-fluent-primary-active) !important;
    color: #ffffff !important;
}
[data-slot="button"].gc-btn.erp-choice-button:is([aria-pressed="true"], .is-active):not(:disabled):hover {
    background: var(--gc-fluent-primary-active) !important;
    border-color: var(--gc-fluent-primary-active) !important;
}

/* Fluent split-pane grip: preserve the full divider hit area, center one icon. */
.site-reservation-modal .reservation-picker-resize-handle.erp-button {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    color: var(--gc-badge-neutral-text, #64748b);
    cursor: col-resize;
    touch-action: none;
}
.site-reservation-modal .reservation-picker-resize-handle.erp-button::before { content: none; }
.site-reservation-modal .reservation-picker-resize-handle.erp-button .erp-icon {
    width: 12px;
    height: 28px;
    color: inherit;
}
.site-reservation-modal .reservation-picker-resize-handle.erp-button:is(:hover, :active, :focus-visible, [data-resizing]) {
    /* The full-height hit target stays invisible; only the compact grip reacts.
       Override the shared icon-button hover surface, including dark mode. */
    background: transparent !important;
    box-shadow: none !important;
    color: var(--gc-fluent-primary-text, #2563eb) !important;
}
.site-reservation-modal .reservation-picker-resize-handle.erp-button:is(:hover, :active, :focus-visible, [data-resizing]) .erp-icon {
    background: var(--gc-fluent-primary-subtle, #eef4ff);
    border-radius: 3px;
    color: var(--gc-fluent-primary-text, #2563eb) !important;
}

/* Semantic status-menu controls share badge identities in both themes. */
.erp-button.gc-btn.purple:not(:disabled) {
    color: var(--gc-badge-purple-text, #fff);
    background: var(--gc-badge-purple-bg, #5c2d91);
    border-color: var(--gc-badge-purple-border, #4f277d);
}
.erp-button.gc-btn.purple:not(:disabled):is(:hover, :active) {
    color: #fff;
    background: var(--gc-badge-purple-border, #4f277d);
    border-color: var(--gc-badge-purple-border, #4f277d);
}
.erp-button.gc-btn.info:not(:disabled) {
    color: var(--gc-badge-boq-status-blue-text, #fff);
    background: var(--gc-badge-boq-status-blue-bg, #1d4ed8);
    border-color: var(--gc-badge-boq-status-blue-border, #1e40af);
}
.erp-button.gc-btn.info:not(:disabled):is(:hover, :active) {
    color: #fff;
    background: var(--gc-badge-boq-status-blue-border, #1e40af);
    border-color: var(--gc-badge-boq-status-blue-border, #1e40af);
}
.erp-button.gc-btn:is(.purple, .info) .fui-Button__icon { color: inherit; }

/* Dense table status commands use Fluent's compact control scale. */
.erp-initial-button-placeholder.erp-actions-menu-trigger--compact,
.fui-Button.erp-button.gc-btn.erp-actions-menu-trigger--compact {
    height: 28px;
    min-height: 28px;
    padding: 3px 8px;
    font-size: 12px;
    line-height: 18px;
    gap: 4px;
}
.erp-actions-menu-trigger--compact > :is(.erp-icon, .erp-initial-button-icon) { width: 16px; height: 16px; flex-basis:16px; }
/* Opt-in status shape; ordinary action menus retain the shared 4px geometry. */
.fui-Button.erp-button.gc-btn.erp-actions-menu-trigger[data-erp-menu-shape="pill"] {
    border-radius: 999px !important;
}
/* A selected status can supply its existing palette for the entire Fluent
   trigger. Preserve that hue through hover, press and an open menu. */
.fui-Button.erp-button.gc-btn.erp-actions-menu-trigger[data-erp-menu-colors]:not(:disabled) {
    color: var(--erp-menu-foreground) !important;
    background: var(--erp-menu-background) !important;
    border-color: var(--erp-menu-border, var(--erp-menu-background)) !important;
}
.fui-Button.erp-button.gc-btn.erp-actions-menu-trigger[data-erp-menu-colors]:not(:disabled):is(:hover, [aria-expanded="true"]) {
    background: color-mix(in srgb, var(--erp-menu-background) 92%, #000) !important;
    border-color: color-mix(in srgb, var(--erp-menu-background) 92%, #000) !important;
}
.fui-Button.erp-button.gc-btn.erp-actions-menu-trigger[data-erp-menu-colors]:not(:disabled):active {
    background: color-mix(in srgb, var(--erp-menu-background) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--erp-menu-background) 88%, #000) !important;
}
@media (pointer: coarse) {
    .erp-initial-button-placeholder.erp-actions-menu-trigger--compact,
    .fui-Button.erp-button.gc-btn.erp-actions-menu-trigger--compact { height: 32px; min-height: 32px; }
}
/* Badge menus share badge metrics, including on touch; other menus keep button density. */
.erp-initial-button-placeholder[data-erp-menu-badge],
.fui-Button.erp-button.gc-btn.erp-actions-menu-trigger[data-erp-menu-badge] {
    box-sizing: border-box;
    height: var(--gc-badge-min-height);
    min-height: var(--gc-badge-min-height);
    padding: 0 calc(var(--spacingHorizontalXS, 4px) + var(--spacingHorizontalXXS, 2px));
    font-size: var(--fontSizeBase200, 12px);
    font-weight: var(--fontWeightSemibold, 600);
    line-height: var(--lineHeightBase200, 16px);
}
.erp-actions-menu-trigger[data-erp-menu-badge] > :is(.erp-icon, .erp-initial-button-icon) { width: 12px; height: 12px; flex-basis:12px; }
/* Shared Fluent record choices; selection logic remains with the page controller. */
.erp-selection-card.fui-Button { color: var(--gc-fluent-text, #1f2937); border: 1px solid transparent; border-radius: 4px; background: transparent; }
.erp-selection-card.fui-Button:hover { background: var(--gc-fluent-neutral-hover, #e2e8f0); color: var(--gc-fluent-text, #1f2937); }
.erp-selection-card.fui-Button[aria-pressed="true"] { color: var(--gc-fluent-text, #1f2937); background: var(--gc-fluent-primary-soft, #eaf2ff); border-color: var(--gc-fluent-primary, #2563eb); }
.erp-selection-card.fui-Button.is-pending { border-color: var(--gc-fluent-warning, #d97706); }
[data-theme="dark"] .erp-selection-card.fui-Button[aria-pressed="true"] { background: var(--fluent-colorBrandBackground2Pressed); }
.erp-selection-card.fui-Button:disabled { opacity: .5; cursor: not-allowed; }

.warehouse-access-pivot:hover,
.warehouse-access-pivot.is-active {
    background: var(--wa-blue-soft);
    border-color: #cfe0ff;
    color: var(--wa-blue);
}

[data-theme="dark"] .warehouse-access-pivot {
    color: var(--fluent-colorNeutralForeground1);
}

[data-theme="dark"] .warehouse-access-pivot:hover,
[data-theme="dark"] .warehouse-access-pivot.is-active {
    background: var(--fluent-colorBrandBackground2Hover);
    border-color: var(--fluent-colorBrandStroke1);
    color: var(--fluent-colorBrandForegroundLinkHover);
}

/* Calendar month navigation uses the shared neutral button surface and states. */
.fleet-page-shell .fleet-calendar-nav .gc-btn.neutral.fleet-calendar-nav-btn { width: 38px; min-width: 38px; height: 38px; padding: 0; justify-content: center !important; gap: 0; }

/* Read-only calendar icon links retain neutral surfaces and centered icons even
   under legacy mobile rules that align ordinary text buttons to the left. */
.erp-calendar .erp-calendar-navigation .gc-btn.neutral.erp-calendar-nav-button {
    width:38px; min-width:38px; height:38px; padding:0; gap:0;
    justify-content:center !important;
}

/* The summary lives in a legacy card, whose dark-mode span guard otherwise
   recolors Fluent's icon slot. Let the shared semantic button rules own resting,
   hover and unavailable foregrounds. */
.boq-page .boq-meet-detail-page #boqDetailSummarySyncula .boq-syncula-toggle :is(.fui-Button__icon, .erp-icon) {
    color: inherit !important;
}

/* Header links and buttons use the same border box and hover target. */
.sidebar-site-lead-notification-header .erp-notification-control.gc-icon-btn {
    box-sizing: border-box;
    width: 36px;
    height: 28px;
    min-width: 36px;
    min-height: 28px;
    padding: 0;
}