:root {
    --w-color-primary: #000000; /* Pure black for primary elements */
    --w-color-primary-hover: #333333; /* Dark grey for hover state */
    --w-color-background: #ffffff; /* White page background */
    --w-color-box-background: #ffffff; /* White for boxes/panels */
    --w-color-text: #000000; /* Black text */
    --w-color-surface-page: #ffffff; 
    --w-color-surface-menus: #000000; /* Black menu surfaces */
    --w-color-surface-menu-item-active: #333333; /* Dark grey active item */
    --w-color-text-button-outline-default: var(--w-color-primary);
    --w-color-text-link-default: var(--w-color-primary-hover);
    --w-color-border-field-default: var(--w-color-primary);
    --w-color-focus: var(--w-color-primary);
    --w-color-border-field-hover: var(--w-color-primary-hover);
    --w-color-surface-tooltip: var(--w-color-surface-menus);
    --w-color-border-button-outline-default: var(--w-color-primary);
    --w-color-text-label: var(--w-color-surface-menus);
    --w-color-text-button-outline-hover: var(--w-color-primary);
}

.w-summary__list {
    color: var(--w-color-primary);
}

.navbar {
    background-color: var(--w-color-primary) !important;
    color: #ffffff !important;
}

.w-panel,
.w-col,
.panel {
    background-color: var(--w-color-box-background);
    border: 1px solid #0000000d; /* subtle light border */
}

.panel-heading,
.w-title,
.w-col-title {
    background-color: var(--w-color-primary);
    color: white;
}

.button,
.w-action-primary {
    background-color: var(--w-color-primary) !important;
    border: none;
    color: white !important;
}

.button:hover,
.w-action-primary:hover {
    background-color: var(--w-color-primary-hover) !important;
}

body,
.w-title,
.w-col-title,
.panel-body {
    color: var(--w-color-text);
    background-color: var(--w-color-background);
}

/* Apply black text to elements with a white background */
body, .w-panel, .panel, .w-col, .w-title, .w-col-title, .panel-body, .login input, .login label, .login .logo-wrapper img, .w-summary__list {
    color: black !important;
}

/* New rules for the preview controls, error banner, and iframe */
.w-preview__controls,
.w-preview__error-banner,
.w-preview__error-title,
.w-preview__error-details,
.w-preview__wrapper {
    background-color: white !important; /* Ensuring white background */
    color: black !important; /* Ensuring black text */
}

.w-preview__error-title, 
.w-preview__error-details {
    color: black !important; /* Making text in the error section black */
}

.w-preview__wrapper iframe {
    background-color: white !important; /* Ensuring the iframe wrapper has white background */
}

body.login {
    background: var(--w-color-surface-menus);
    color: white;
}

body.login input {
    background-color: white !important;
    color: black !important;
}

body.login label {
    color: black !important;
}

body.login input:-webkit-autofill {
    background-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: black !important;
}

body.login input:-webkit-autofill:focus {
    background-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: black !important;
}

body.login .logo-wrapper img {
    display: block;
    margin: 0 auto;
}

body.login a:hover {
    color: #ffffff;
    text-decoration: underline;
}

::selection {
    background-color: #000000;
    color: white;
}

/* ===============================
   General field labels and checkbox/radio labels
   =============================== */
.w-field__label,
.w-field__input label,
.w-field__input input[type="checkbox"] + label,
.w-field__input input[type="radio"] + label {
    color: black !important;
}

.w-status,
.w-badge,
.w-tag,
.w-chip,
.w-status--primary,
.w-status--secondary,
.w-status--success,
.w-status--warning,
.w-status--danger {
    color: black !important;
    background-color: #f0f0f0 !important; /* light gray for contrast */
    padding: 0.2em 0.5em;
    border-radius: 3px;
    font-weight: bold;
    display: inline-block; /* ensures proper spacing */
}


/* ===============================
   User information and meta text
   =============================== */
.w-user-info,
.w-user-name,
.w-user-role,
.w-meta,
.w-meta span {
    color: black !important;
}

/* ===============================
   Help text and error messages
   =============================== */
.w-field__help,
.w-field__errors {
    color: #333 !important;
}

/* ===============================
   Table cells and inline text
   =============================== */
table,
table td,
table th,
table span,
table .avatar + span {
    color: black !important;       /* force all text in tables to black */
}

/* Specifically target usernames or inline dev/published text next to avatars */
table td .avatar + text,
table td span + text,
table td {
    color: black !important;
}

/* Optional: keep avatars intact */
table td .avatar img {
    display: inline-block;
}