:root {
    --office-primary: #0078d4;
    --office-primary-hover: #106ebe;
    --office-primary-pressed: #005a9e;
    --office-bg: #faf9f8;
    --office-surface: #ffffff;
    --office-sidebar: #f3f2f1;
    --office-border: #edebe9;
    --office-border-strong: #d2d0ce;
    --office-text: #323130;
    --office-text-secondary: #605e5c;
    --office-text-muted: #8a8886;
    --office-shadow: 0 1.6px 3.6px rgba(0,0,0,.13), 0 0.3px 0.9px rgba(0,0,0,.11);
    --office-shadow-lg: 0 6.4px 14.4px rgba(0,0,0,.13), 0 1.2px 3.6px rgba(0,0,0,.11);
    --office-radius: 4px;
    --office-font: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; }

body.office-theme {
    font-family: var(--office-font);
    background: var(--office-bg);
    color: var(--office-text);
    -webkit-font-smoothing: antialiased;
}

/* Cards & surfaces */
.office-card {
    background: var(--office-surface);
    border: 1px solid var(--office-border);
    border-radius: var(--office-radius);
    box-shadow: var(--office-shadow);
}

.office-card-flat {
    background: var(--office-surface);
    border: 1px solid var(--office-border);
    border-radius: var(--office-radius);
}

/* Typography */
.office-h1 { font-size: 1.75rem; font-weight: 600; color: var(--office-text); letter-spacing: -0.01em; }
.office-subtitle { color: var(--office-text-secondary); font-size: 0.875rem; }

/* Forms */
.office-input,
.office-select,
.office-textarea {
    width: 100%;
    background: var(--office-surface);
    border: 1px solid var(--office-border-strong);
    border-radius: var(--office-radius);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--office-text);
    transition: border-color 0.1s, box-shadow 0.1s;
}
.office-input:focus,
.office-select:focus,
.office-textarea:focus {
    outline: none;
    border-color: var(--office-primary);
    box-shadow: 0 0 0 1px var(--office-primary);
}
.office-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--office-text); margin-bottom: 0.375rem; }

/* Buttons */
.office-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--office-primary); color: #fff;
    border: 1px solid var(--office-primary);
    border-radius: var(--office-radius);
    padding: 0.4375rem 1rem;
    font-size: 0.875rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background 0.1s, border-color 0.1s;
}
.office-btn-primary:hover { background: var(--office-primary-hover); border-color: var(--office-primary-hover); color: #fff; }

.office-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--office-surface); color: var(--office-text);
    border: 1px solid var(--office-border-strong);
    border-radius: var(--office-radius);
    padding: 0.4375rem 1rem;
    font-size: 0.875rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background 0.1s;
}
.office-btn-secondary:hover { background: var(--office-sidebar); }

.office-btn-danger {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--office-surface); color: #a4262c;
    border: 1px solid #f1bbbc;
    border-radius: var(--office-radius);
    padding: 0.4375rem 1rem;
    font-size: 0.875rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background 0.1s, border-color 0.1s;
}
.office-btn-danger:hover { background: #fdf3f4; }

.office-btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.office-btn-group form {
    display: inline-flex;
    margin: 0;
}

/* Tables */
.office-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.office-table thead { background: var(--office-sidebar); border-bottom: 1px solid var(--office-border-strong); }
.office-table thead th {
    text-align: left; padding: 0.625rem 1rem;
    font-size: 0.75rem; font-weight: 600;
    color: var(--office-text-secondary); text-transform: uppercase; letter-spacing: 0.03em;
}
.office-table tbody tr { border-bottom: 1px solid var(--office-border); transition: background 0.1s; }
.office-table tbody tr:hover { background: #f8f8f8; }
.office-table tbody td { padding: 0.75rem 1rem; color: var(--office-text); }

/* Alerts */
.office-alert-success {
    background: #dff6dd; border: 1px solid #9fd89f; color: #0b6a0b;
    border-radius: var(--office-radius); padding: 0.75rem 1rem; font-size: 0.875rem;
}
.office-alert-error {
    background: #fde7e9; border: 1px solid #f1bbbc; color: #a4262c;
    border-radius: var(--office-radius); padding: 0.75rem 1rem; font-size: 0.875rem;
}
.office-alert-warning {
    background: #fff4ce; border: 1px solid #ffe08a; color: #835c00;
    border-radius: var(--office-radius); padding: 0.75rem 1rem; font-size: 0.875rem;
}

/* Status badges */
.badge-active { background: #dff6dd; color: #0b6a0b; border: 1px solid #9fd89f; }
.badge-parked { background: #fff4ce; color: #835c00; border: 1px solid #ffe08a; }
.badge-blocked { background: #fde7e9; color: #a4262c; border: 1px solid #f1bbbc; }
.badge-archived { background: #edebe9; color: #605e5c; border: 1px solid #d2d0ce; }
.badge-bug-open { background: #fde7e9; color: #a4262c; border: 1px solid #f1bbbc; }
.badge-bug-progress { background: #fff4ce; color: #835c00; border: 1px solid #ffe08a; }
.badge-bug-resolved { background: #dff6dd; color: #0b6a0b; border: 1px solid #9fd89f; }
.badge-bug-closed { background: #edebe9; color: #605e5c; border: 1px solid #d2d0ce; }
.badge-priority-low { background: #f3f2f1; color: #605e5c; border: 1px solid #d2d0ce; }
.badge-priority-medium { background: #e8f4fd; color: #0078d4; border: 1px solid #b3d6f5; }
.badge-priority-high { background: #fff4ce; color: #835c00; border: 1px solid #ffe08a; }
.badge-priority-critical { background: #fde7e9; color: #a4262c; border: 1px solid #f1bbbc; }
.office-badge {
    display: inline-flex; padding: 0.125rem 0.5rem;
    border-radius: 2px; font-size: 0.75rem; font-weight: 600;
}

/* Nav tabs (domain status etc) */
.office-tab {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600;
    border: 1px solid transparent; border-radius: var(--office-radius);
    color: var(--office-text-secondary); text-decoration: none;
    transition: all 0.1s;
}
.office-tab:hover { background: var(--office-surface); color: var(--office-text); }
.office-tab.active { background: var(--office-surface); color: var(--office-primary); border-color: var(--office-border); box-shadow: var(--office-shadow); }
.office-tab-count { font-size: 0.75rem; padding: 0.125rem 0.375rem; background: var(--office-sidebar); border-radius: 2px; }

/* Ribbon */
.office-ribbon {
    background: var(--office-primary);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.14);
}

/* Sidebar */
.office-sidebar {
    background: var(--office-sidebar);
    border-right: 1px solid var(--office-border);
}
.office-nav-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 0.75rem; margin: 0.125rem 0.5rem;
    font-size: 0.875rem; font-weight: 400;
    color: var(--office-text);
    border-radius: var(--office-radius);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.1s;
}
.office-nav-item:hover { background: rgba(0,0,0,.04); }
.office-nav-item.active {
    background: var(--office-surface);
    border-left-color: var(--office-primary);
    font-weight: 600;
    box-shadow: var(--office-shadow);
}

/* Links */
.office-link { color: var(--office-primary); text-decoration: none; font-weight: 600; }
.office-link:hover { color: var(--office-primary-hover); text-decoration: underline; }

/* Stat cards */
.office-stat-card {
    background: var(--office-surface);
    border: 1px solid var(--office-border);
    border-radius: var(--office-radius);
    box-shadow: var(--office-shadow);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s;
}
.office-stat-card:hover { box-shadow: var(--office-shadow-lg); transform: translateY(-1px); }
.office-stat-label { font-size: 0.8125rem; color: var(--office-text-secondary); font-weight: 600; }
.office-stat-value { font-size: 1.75rem; font-weight: 600; margin-top: 0.25rem; }

/* Pagination override */
nav[role="navigation"] a, nav[role="navigation"] span {
    color: var(--office-primary) !important;
}
nav[role="navigation"] span.relative.z-0 {
    border-color: var(--office-border) !important;
}

/* File input */
input[type="file"].office-file {
    font-size: 0.875rem; color: var(--office-text-secondary);
}
input[type="file"].office-file::file-selector-button {
    background: var(--office-sidebar);
    border: 1px solid var(--office-border-strong);
    border-radius: var(--office-radius);
    padding: 0.375rem 0.75rem;
    margin-right: 0.75rem;
    font-weight: 600; cursor: pointer;
}

/* Footer */
.office-footer { flex-shrink: 0; }
.office-footer-link {
    color: var(--office-text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: color 0.15s;
}
.office-footer-link:hover { color: var(--office-primary); text-decoration: underline; }

.office-footer-compact {
    flex-shrink: 0;
    padding: 1rem 1.5rem;
    text-align: center;
}
.office-footer-compact--dark {
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.office-footer-compact--dark .office-footer-compact-link {
    color: rgba(255, 255, 255, 0.75);
}
.office-footer-compact--dark .office-footer-compact-link:hover {
    color: #fff;
}
.office-footer-compact--light {
    background: var(--office-surface);
    border-top: 1px solid var(--office-border);
}
.office-footer-compact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.office-footer-compact-link {
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.15s;
}
.office-footer-compact--light .office-footer-compact-link {
    color: var(--office-text-secondary);
}
.office-footer-compact--light .office-footer-compact-link:hover {
    color: var(--office-primary);
    text-decoration: underline;
}
.office-footer-compact-copy {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    opacity: 0.6;
}

/* ── Office Auth (Login / 2FA) ─────────────────────────────────────────── */
.office-auth {
    background: var(--office-bg);
    min-height: 100vh;
}

.office-auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Ribbon */
.office-auth-ribbon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.25rem;
    height: 48px;
    background: linear-gradient(180deg, #0078d4 0%, #006cbe 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 60, 120, 0.25);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}
.office-auth-ribbon::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #185ABD 0%, #107C41 25%, #C43E1C 50%, #5C2D91 75%, #0078d4 100%);
}
.office-auth-ribbon-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.office-auth-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.office-auth-logo svg { width: 100%; height: 100%; display: block; }
.office-auth-ribbon-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
}
.office-auth-panel-logo--sm {
    width: 32px;
    height: 32px;
    font-size: 0.6875rem;
    border-radius: 6px;
    box-shadow: none;
}

/* Body split layout */
.office-auth-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
}

/* Hero panel */
.office-auth-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 3rem 3.5rem;
    background: linear-gradient(145deg, #004578 0%, #0078d4 45%, #106ebe 100%);
    color: #fff;
}
.office-auth-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 80%, rgba(24, 90, 189, 0.45) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(16, 124, 65, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 60% 70%, rgba(196, 62, 28, 0.25) 0%, transparent 50%);
    animation: office-auth-bg-shift 12s ease-in-out infinite alternate;
}
@keyframes office-auth-bg-shift {
    0% { opacity: 0.85; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.04); }
}
.office-auth-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.3) 100%);
}
/* Abstract hero decoration */
.office-auth-hero-shapes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.office-auth-shape {
    position: absolute;
    border-radius: 12px;
    opacity: 0.35;
    animation: office-auth-shape-float 8s ease-in-out infinite;
}
.office-auth-shape--1 {
    width: 120px; height: 120px;
    top: 15%; right: 12%;
    background: rgba(255, 255, 255, 0.12);
    animation-delay: 0s;
}
.office-auth-shape--2 {
    width: 80px; height: 80px;
    bottom: 25%; right: 28%;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation-delay: 2s;
}
.office-auth-shape--3 {
    width: 160px; height: 64px;
    bottom: 18%; left: 10%;
    background: rgba(255, 255, 255, 0.06);
    animation-delay: 4s;
}
.office-auth-shape--4 {
    width: 48px; height: 48px;
    top: 35%; left: 22%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    animation-delay: 1s;
}
@keyframes office-auth-shape-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
}

/* Sign-in panel */
.office-auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0, 120, 212, 0.06) 0%, transparent 70%),
        var(--office-bg);
}
.office-auth-panel {
    width: 100%;
    max-width: 420px;
    background: var(--office-surface);
    border: 1px solid var(--office-border);
    border-radius: 8px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.08);
    padding: 2rem 2rem 1.5rem;
    position: relative;
    overflow: hidden;
    animation: office-auth-panel-in 0.5s ease-out;
}
@keyframes office-auth-panel-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.office-auth-panel-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #185ABD, #107C41, #C43E1C, #5C2D91, #0078d4);
}
.office-auth-panel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.office-auth-panel-logo {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0078d4, #004578);
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.35);
    flex-shrink: 0;
}
.office-auth-panel-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--office-text);
    margin: 0;
    letter-spacing: -0.01em;
}
.office-auth-panel-sub {
    font-size: 0.8125rem;
    color: var(--office-text-secondary);
    margin: 0.125rem 0 0;
}

.office-auth-alert { margin-bottom: 1.25rem; }

/* Form */
.office-auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.office-auth-field { display: flex; flex-direction: column; gap: 0.375rem; }
.office-auth-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--office-text);
}
.office-auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.office-auth-input-icon {
    position: absolute;
    left: 0.75rem;
    width: 18px;
    height: 18px;
    color: var(--office-text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.office-auth-input-icon svg { width: 100%; height: 100%; }
.office-auth-input {
    width: 100%;
    padding: 0.625rem 0.75rem 0.625rem 2.5rem;
    font-size: 0.9375rem;
    color: var(--office-text);
    background: var(--office-surface);
    border: 1px solid var(--office-border-strong);
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.office-auth-input::placeholder { color: var(--office-text-muted); }
.office-auth-input:hover { border-color: #a19f9d; }
.office-auth-input:focus {
    outline: none;
    border-color: var(--office-primary);
    box-shadow: 0 0 0 1px var(--office-primary);
}
.office-auth-input--code {
    text-align: center;
    letter-spacing: 0.35em;
    font-size: 1.25rem;
    font-weight: 600;
    padding-left: 2.5rem;
}
.office-auth-input-wrap--code .office-auth-input-icon { left: 1rem; }
.office-auth-error {
    font-size: 0.8125rem;
    color: #a4262c;
    margin: 0;
}
.office-auth-hint {
    font-size: 0.75rem;
    color: var(--office-text-muted);
    margin: 0;
}

.office-auth-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--office-text-secondary);
    cursor: pointer;
    user-select: none;
}
.office-auth-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--office-primary);
    border-radius: 2px;
}

.office-auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6875rem 1.25rem;
    margin-top: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    background: var(--office-primary);
    border: 1px solid var(--office-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.office-auth-submit svg { width: 16px; height: 16px; transition: transform 0.15s; }
.office-auth-submit:hover {
    background: var(--office-primary-hover);
    border-color: var(--office-primary-hover);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.35);
}
.office-auth-submit:hover svg { transform: translateX(2px); }
.office-auth-submit:active {
    background: var(--office-primary-pressed);
    transform: scale(0.99);
}

.office-auth-panel-footer {
    margin-top: 1rem;
    text-align: center;
}
.office-auth-back {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--office-primary);
    text-decoration: none;
}
.office-auth-back:hover { text-decoration: underline; }

/* Auth page footer override */
.office-auth .office-footer-compact--light {
    background: var(--office-surface);
    border-top: 1px solid var(--office-border);
}

/* Responsive */
@media (max-width: 960px) {
    .office-auth-body { grid-template-columns: 1fr; }
    .office-auth-hero { min-height: 140px; }
    .office-auth-shape--1 { width: 72px; height: 72px; }
    .office-auth-shape--3 { width: 100px; height: 40px; }
}
@media (max-width: 480px) {
    .office-auth-main { padding: 1.25rem; }
    .office-auth-panel { padding: 1.5rem 1.25rem 1.25rem; }
    .office-auth-hero { min-height: 96px; }
}