:root {
    --wf-blue: #0095b9;
    --wf-ocean: #007795;
    --wf-yellow: #ffc60b;
    --wf-text: #4d4d4d;
    --wf-muted: #707070;
    --wf-border: #e2e2e2;
    --wf-pale-blue: #80cadc;
    --page-bg: #f7f8f9;
    --sidebar-width: 292px;
    --radius: 13px;
    --shadow: 0 10px 30px rgba(77, 77, 77, .08);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--wf-text);
    background: var(--page-bg);
    font-family: "Poppins", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }

.app-main { min-width: 0; min-height: 100vh; margin-left: var(--sidebar-width); overflow-x: clip; }
.auth-main { min-height: 100vh; }
.page-shell { width: min(1440px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 52px; }
.auth-main .page-shell { width: 100%; padding: 0; }
.global-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--wf-border);
}
.page-eyebrow { margin: 0 0 4px; color: var(--wf-blue); font-size: 13px; font-weight: 700; }
.global-page-header h1 { margin: 0; font-size: clamp(28px, 3vw, 42px); font-weight: 600; line-height: 1.12; letter-spacing: -.035em; }
.page-description { max-width: 720px; margin: 8px 0 0; color: var(--wf-muted); font-size: 11.5px; line-height: 1.6; }
.page-body { width: 100%; min-width: 0; overflow-wrap: anywhere; }
.page-body > * { max-width: 100%; }

.page-body fieldset, .page-body .section, .page-body .wf-section, .page-body .update,
.page-body .access-log-toolbar, .page-body .datetime-filter-bar, .page-body .job-card {
    border-color: #dde3e5;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 4px 13px rgba(77,77,77,.035);
}
.page-body table { background: #fff; }
.page-body input, .page-body select, .page-body textarea {
    border: 1px solid var(--wf-border);
    border-radius: 8px;
    color: var(--wf-text);
    background: #fff;
    outline: none;
}
.page-body input:focus, .page-body select:focus, .page-body textarea:focus { border-color: var(--wf-blue); box-shadow: 0 0 0 3px rgba(0,149,185,.1); }
.c-button, .button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 16px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--wf-blue);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.c-button:hover, .button-primary:hover { background: var(--wf-ocean); transform: translateY(-1px); }
.button-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; border: 1px solid var(--wf-border); border-radius: 8px; color: var(--wf-text); background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
.button-secondary:hover { border-color: var(--wf-pale-blue); color: var(--wf-ocean); background: rgba(128,202,220,.1); }
.button-danger { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 13px; border: 0; border-radius: 8px; color: #fff; background: #d95c5c; font-size: 12px; font-weight: 600; cursor: pointer; }
.button-danger:hover { background: #bd4444; }
#submit-rule-modal { color: #fff; background: var(--wf-blue); font-size: 12px; font-weight: 600; }
#submit-rule-modal:hover { background: var(--wf-ocean); }
#add-option-rule-modal { border: 1px solid var(--wf-border); color: var(--wf-text); background: #fff; font-size: 12px; font-weight: 600; }
#add-option-rule-modal:hover { border-color: var(--wf-pale-blue); color: var(--wf-ocean); background: rgba(128,202,220,.1); }
.rule-modal .remove-rule-btn { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: rgba(217,92,92,.1); }
.rule-modal .remove-rule-btn:hover { background: rgba(217,92,92,.2); }

/* Existing feature pages stay inside the shared canvas and inherit its scale. */
.access-log-title, .jobs-dashboard-title { display: none; }
.access-log-toolbar { justify-content: flex-end; min-height: 64px; }
.access-log-summary { border-left: 0; }
.jobs-dashboard-toolbar { justify-content: flex-end; }
.page-body .section { margin-bottom: 14px; padding: 18px 20px; }
.page-body .section h2 { color: var(--wf-text); font-family: inherit; font-size: 15px; }
.page-body .rum-grid-2, .page-body .rum-grid-3 { gap: 14px; }
.page-body .rum-table th { color: var(--wf-text); background: #eef7f9; }
.page-body .rum-table th, .page-body .rum-table td { padding: 9px 10px; font-size: 11px; }
.page-body canvas { max-width: 100%; }
.page-body .table-scroll { width: 100%; overflow: auto; }
.page-body img { max-width: 100%; }
.page-body .rule-modal-input { max-width: 100%; }
.page-body > .update { padding: 14px 18px; border-radius: 11px; }
.page-body > .content { width: 100%; min-width: 0; margin: 14px 0 0; overflow: auto; }
.page-body .container-body { width: 100%; margin: 0; }
.page-body .search-order { padding: 20px; border: 1px solid #dde3e5; border-radius: 13px; background: #fff; }
.page-body .search-order input { min-width: min(420px, 70vw); padding: 10px 12px; }
.page-body .search-order button { padding: 10px 18px; }

@media (max-width: 1000px) {
    .page-body .rum-grid-3 { grid-template-columns: 1fr 1fr; }
    .page-body .rum-grid-3 > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 850px) {
    .app-main { margin-left: 0; }
    .page-shell { width: calc(100% - 28px); padding-top: 25px; }
}
@media (max-width: 560px) {
    .global-page-header { align-items: flex-start; flex-direction: column; }
    .page-body .rum-grid-2, .page-body .rum-grid-3 { grid-template-columns: 1fr; }
    .page-body .rum-grid-3 > :last-child { grid-column: auto; }
    .access-log-toolbar, .jobs-dashboard-toolbar { align-items: stretch; flex-direction: column; }
    .jobs-dashboard-summary { grid-template-columns: 1fr; min-width: 0; }
    .page-body .search-order { align-items: stretch; flex-direction: column; }
    .page-body .search-order input { width: 100%; min-width: 0; }
    .page-body .search-order button { width: 100%; }
    .page-body > .update { align-items: stretch; flex-direction: column; gap: 12px; }
    .page-body > .update .buttons, .page-body > .update button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}