:root {
    --green: #7e9e83;
    --forest: #3e4f3f;
    --text: #333333;
    --white: #ffffff;
    --accent: #d75e38;
    --mist: #f5f6f3;
    --border: #dce2dc;
    --shadow: 0 16px 40px rgba(62, 79, 63, 0.11);
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
    margin: 0;
    color: var(--text);
    background: var(--mist);
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    line-height: 1.6;
}

h1, h2, .brand {
    margin-top: 0;
    color: var(--forest);
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    line-height: 1.15;
}

h1 { font-size: clamp(2rem, 5vw, 3.7rem); letter-spacing: -0.04em; }
h2 { font-size: 1.35rem; }

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 74px;
    padding: 0.8rem max(1.25rem, calc((100vw - 1180px) / 2));
    color: var(--white);
    background: var(--forest);
}

.brand { color: var(--white); font-size: 1.15rem; text-decoration: none; }
.brand span { color: #c7dac9; font-weight: 400; }
.account { display: flex; align-items: center; gap: 1rem; }
.account form { margin: 0; }

.page { width: min(1180px, calc(100% - 2.5rem)); min-height: calc(100vh - 140px); margin: 0 auto; padding: 3rem 0; }
.hero { max-width: 750px; margin: 1rem 0 3rem; }
.hero p { max-width: 630px; font-size: 1.05rem; }
.eyebrow { color: var(--accent); font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; font-size: 0.78rem; }

.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.tool-card, .content-card, .login-card {
    padding: 1.6rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow);
}
.tool-card { display: flex; min-height: 245px; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.tool-card.is-disabled { box-shadow: none; opacity: 0.72; }
.tool-status { display: inline-block; margin-bottom: 1.5rem; color: var(--green); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }
.tool-card.is-disabled .tool-status { color: #6d706d; }

.button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.1rem;
    border: 0;
    border-radius: 7px;
    color: var(--white);
    background: var(--accent);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.button:hover { filter: brightness(0.93); }
.button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid rgba(215, 94, 56, 0.35); outline-offset: 2px; }
.button-secondary { min-height: 38px; border: 1px solid rgba(255,255,255,.45); background: transparent; }
.button-secondary-dark { border: 1px solid var(--forest); color: var(--forest); background: transparent; }
.button-sage { background: var(--green); }
.button-danger { background: #a73b2b; }
.button-danger-outline { border: 1px solid #a73b2b; color: #a73b2b; background: transparent; }
.button-disabled { background: #a9afaa; cursor: default; }
.button-large { width: 100%; min-height: 50px; }

.login-shell { display: grid; min-height: 68vh; grid-template-columns: 1.2fr minmax(320px, 460px); align-items: center; gap: clamp(2rem, 8vw, 7rem); }
.login-intro { max-width: 620px; }
.login-intro p:last-child { font-size: 1.1rem; }
.login-card { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 5vw, 2.5rem); }
label { display: block; margin-bottom: 0.35rem; color: var(--forest); font-weight: 700; }
input, select { width: 100%; min-height: 48px; padding: 0.7rem 0.8rem; border: 1px solid #aeb9af; border-radius: 7px; background: var(--white); font: inherit; }
.notice { margin-bottom: 1.5rem; padding: 1rem; border-left: 5px solid var(--accent); border-radius: 6px; background: #fff4ef; }
.notice-success { border-color: var(--green); color: #2e5734; background: #edf6ee; }
.notice-warning { border-color: #996414; color: #744b0f; background: #fff7df; }
.notice-error { border-color: #a73b2b; color: #812c20; background: #fff0ed; }
.narrow { max-width: 650px; margin: 4rem auto; }
.footer { padding: 1.5rem; color: #687269; text-align: center; font-size: 0.86rem; }

.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.page-heading h1 { margin-bottom: 0.5rem; font-size: clamp(2rem, 4vw, 3rem); }
.management-section { margin-bottom: 2rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.form-span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: end; }
.employee-list { display: grid; gap: 1.25rem; }
.employee-card { padding: 1.4rem; border: 1px solid var(--border); border-radius: 12px; background: var(--white); box-shadow: 0 2px 8px rgba(40, 57, 43, 0.06); }
.employee-card.is-protected { border-color: #9db5c5; background: #f5f9fc; }
.employee-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.employee-summary h3 { margin: 0; color: var(--forest); font-size: 1.2rem; }
.employee-summary p { margin: 0.25rem 0 0; overflow-wrap: anywhere; }
.assigned-tools { margin: 1rem 0 0; }
.status-list, .management-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.status-pill { display: inline-flex; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.status-success { color: #2e5734; background: #e4f1e6; }
.status-warning { color: #744b0f; background: #fff0c7; }
.status-error { color: #812c20; background: #fbe2dd; }
.status-info { color: #365b72; background: #e7f1f7; }
.protected-message { margin-bottom: 0; padding: 0.8rem; color: #365b72; background: #e7f1f7; border-radius: 7px; }
details { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
summary { color: var(--forest); font-weight: 700; cursor: pointer; }
.compact-form { margin-top: 1rem; }
.management-actions { margin-top: 1rem; }
.management-actions form, .tool-access-row form, .admin-action { margin: 0; }
.tool-access { margin-top: 1.25rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.tool-access h4 { margin: 0 0 0.5rem; color: var(--forest); }
.tool-access-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.tool-access-row span { display: grid; }
.tool-access-row small { color: #657069; }
.admin-action { margin-top: 1rem; }
.activation-card h1 { font-size: clamp(2rem, 5vw, 3rem); }
.activation-form { margin-top: 1.5rem; padding: 0; border: 0; box-shadow: none; }
.mfa-details { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1rem; }
.mfa-details dt { font-weight: 700; }
.mfa-details dd { margin: 0; overflow-wrap: anywhere; }
.recovery-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; padding: 0; list-style: none; }
.recovery-code-list li { padding: 0.65rem; border: 1px solid var(--border); border-radius: 6px; text-align: center; background: #f7f8f6; }

@media (max-width: 760px) {
    .site-header { align-items: flex-start; gap: 0.75rem; }
    .account { align-items: flex-end; flex-direction: column; gap: 0.4rem; }
    .page { width: min(100% - 1.5rem, 1180px); padding-top: 1.8rem; }
    .tool-grid, .login-shell { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .form-span-2 { grid-column: auto; }
    .page-heading, .employee-summary, .tool-access-row { align-items: stretch; flex-direction: column; }
    .page-heading .button, .tool-access-row .button { width: 100%; }
    .login-shell { gap: 1.5rem; padding: 1rem 0 2rem; }
    .tool-card { min-height: 220px; }
    .mfa-details, .recovery-code-list { grid-template-columns: 1fr; }
}