:root {
    --mz-sidebar-width: 220px;
    --mz-bg: #f5f6f7;
    --mz-panel: #ffffff;
    --mz-border: #dee0e3;
    --mz-text: #1f2329;
    --mz-text-secondary: #646a73;
    --mz-primary: #3370ff;
    --mz-primary-light: #e8f0ff;
    --mz-purple: #7c3aed;
    --mz-purple-bg: #f3e8ff;
    --mz-success-bg: #eef0f2;
    --mz-success-text: #8f959e;
    --mz-active-bg: #e8f3ff;
    --mz-row-hover: #f7f8fa;
    --mz-header-height: 48px;
    --mz-toolbar-height: 40px;
    --mz-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    font-family: var(--mz-font);
    font-size: 13px;
    color: var(--mz-text);
    background: var(--mz-bg);
}

a { color: inherit; text-decoration: none; }

.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar */
.app-sidebar {
    width: var(--mz-sidebar-width);
    min-width: var(--mz-sidebar-width);
    background: var(--mz-panel);
    border-right: 1px solid var(--mz-border);
    display: flex;
    flex-direction: column;
    padding: 12px 8px;
}

.sidebar-user {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    margin-bottom: 12px;
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    border-radius: 8px;
    min-height: 44px;
}

.sidebar-user-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sidebar-user-loaded {
    min-height: 72px;
}

.sidebar-user-loading {
    font-size: 12px;
    color: var(--mz-text-secondary);
}

.sidebar-user-avatar,
.sidebar-user-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sidebar-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, #3370ff, #5b8def);
}

.sidebar-user-avatar-img {
    object-fit: cover;
}

.sidebar-user-avatar-dept-rd { background: linear-gradient(135deg, #3370ff, #6366f1); }
.sidebar-user-avatar-dept-hr { background: linear-gradient(135deg, #10b981, #34d399); }
.sidebar-user-avatar-dept-finance { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.sidebar-user-avatar-dept-sales { background: linear-gradient(135deg, #ec4899, #f472b6); }
.sidebar-user-avatar-dept-default { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }

.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--mz-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.sidebar-user-dept {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--mz-text-secondary);
    flex-wrap: wrap;
    min-width: 0;
}

.sidebar-user-hint {
    font-size: 11px;
    color: var(--mz-primary);
    margin-top: 4px;
}

.sidebar-user-clickable {
    cursor: pointer;
}

.sidebar-user-clickable:hover {
    border-color: var(--mz-primary);
    box-shadow: 0 0 0 1px var(--mz-primary-light);
}

.user-switch-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(31, 35, 41, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.user-switch-modal[hidden] {
    display: none !important;
}

.user-switch-modal.visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.user-switch-box {
    width: min(360px, calc(100vw - 48px));
    max-height: 70vh;
    background: var(--mz-panel);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(31, 35, 41, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-switch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mz-border);
}

.user-switch-header h3 {
    margin: 0;
    font-size: 15px;
}

.user-switch-close {
    border: none;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
    color: var(--mz-text-secondary);
}

.user-switch-search {
    margin: 12px 16px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--mz-border);
    border-radius: 6px;
    font-size: 13px;
}

.user-switch-list {
    list-style: none;
    margin: 0;
    padding: 0 8px 12px;
    overflow-y: auto;
    flex: 1;
}

.user-switch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}

.user-switch-item:hover {
    background: var(--mz-row-hover);
}

.user-switch-avatar,
.user-switch-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.user-switch-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3370ff, #5b8def);
    color: #fff;
    font-size: 12px;
}

.user-switch-avatar-img {
    object-fit: cover;
}

.user-switch-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-switch-name {
    font-size: 13px;
    font-weight: 500;
}

.user-switch-dept {
    font-size: 12px;
    color: var(--mz-text-secondary);
}

.user-switch-empty {
    padding: 16px;
    text-align: center;
    color: var(--mz-text-secondary);
    font-size: 13px;
}

body.user-switch-open {
    overflow: hidden;
}

.sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 12px;
    background: var(--mz-bg);
    border-radius: 6px;
    color: var(--mz-text-secondary);
    font-size: 12px;
}

.sidebar-search svg { flex-shrink: 0; opacity: 0.6; }

.sidebar-nav { flex: 1; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 2px;
    border-radius: 6px;
    color: var(--mz-text);
    transition: background 0.15s;
}

.nav-item:hover { background: var(--mz-row-hover); }

.nav-item.active {
    background: var(--mz-active-bg);
    color: var(--mz-primary);
    font-weight: 500;
}

.nav-item svg { flex-shrink: 0; opacity: 0.75; }
.nav-item.active svg { opacity: 1; }

.nav-group {
    margin-bottom: 4px;
}

.nav-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mz-text-secondary);
}

.nav-group-active .nav-group-label {
    color: var(--mz-text);
}

.nav-item-sub {
    padding-left: 34px;
    font-size: 13px;
}

.nav-group .nav-item-sub.active {
    background: var(--mz-active-bg);
    color: var(--mz-primary);
    font-weight: 500;
}

.sidebar-new {
    margin-top: auto;
    padding-top: 12px;
}

.btn-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--mz-border);
    border-radius: 6px;
    background: transparent;
    color: var(--mz-text-secondary);
    cursor: pointer;
    font-size: 13px;
}

.btn-new:hover { border-color: var(--mz-primary); color: var(--mz-primary); }

/* Main area */
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.app-topbar {
    height: var(--mz-header-height);
    min-height: var(--mz-header-height);
    background: var(--mz-panel);
    border-bottom: 1px solid var(--mz-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mz-text-secondary);
    min-width: 0;
}

.breadcrumb strong {
    color: var(--mz-text);
    font-weight: 600;
}

.breadcrumb-sep { opacity: 0.5; }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: var(--mz-text-secondary);
    cursor: pointer;
}

.btn-icon:hover { background: var(--mz-row-hover); }

.btn-text {
    padding: 4px 12px;
    border: 1px solid var(--mz-border);
    border-radius: 4px;
    background: var(--mz-panel);
    font-size: 12px;
    cursor: pointer;
}

.btn-text.primary {
    background: var(--mz-primary);
    border-color: var(--mz-primary);
    color: #fff;
}

/* View tabs */
.view-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 16px;
    background: var(--mz-panel);
    border-bottom: 1px solid var(--mz-border);
    height: 36px;
}

.view-tab {
    padding: 6px 12px;
    border-radius: 4px 4px 0 0;
    font-size: 12px;
    color: var(--mz-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.view-tab:hover { color: var(--mz-text); }

.view-tab.active {
    color: var(--mz-primary);
    border-bottom-color: var(--mz-primary);
    font-weight: 500;
}

/* Data toolbar */
.data-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    background: var(--mz-panel);
    border-bottom: 1px solid var(--mz-border);
    min-height: var(--mz-toolbar-height);
    flex-wrap: wrap;
    gap: 8px;
}

.toolbar-left, .toolbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 12px;
    color: var(--mz-text);
    cursor: pointer;
    white-space: nowrap;
}

.tool-btn:hover { background: var(--mz-row-hover); }
.tool-btn.primary { color: var(--mz-primary); font-weight: 500; }

.grid-btn-delete {
    padding: 2px 8px;
    font-size: 12px;
    color: #d03050;
    background: #fff;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    cursor: pointer;
}

.grid-btn-delete:hover {
    background: #fff1f0;
    border-color: #d03050;
}

.grid-toolbar-delete:not(:disabled) {
    color: #d03050;
}

.grid-toolbar-delete:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.col-grid-actions {
    width: 64px;
    white-space: nowrap;
    text-align: center;
}

.tool-divider {
    width: 1px;
    height: 16px;
    background: var(--mz-border);
    margin: 0 4px;
}

/* Content */
.app-content {
    flex: 1;
    overflow: auto;
    background: var(--mz-panel);
}

.page-placeholder {
    padding: 48px 24px;
    text-align: center;
    color: var(--mz-text-secondary);
}

.page-placeholder h2 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--mz-text);
}

/* Data grid */
.data-grid-wrap {
    overflow: auto;
    height: 100%;
}

.data-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 1400px;
}

.data-grid th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fafbfc;
    border-bottom: 1px solid var(--mz-border);
    border-right: 1px solid var(--mz-border);
    padding: 8px 10px;
    text-align: left;
    font-weight: 500;
    font-size: 12px;
    color: var(--mz-text-secondary);
    white-space: nowrap;
}

.data-grid td {
    border-bottom: 1px solid var(--mz-border);
    border-right: 1px solid var(--mz-border);
    padding: 6px 10px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-grid tbody tr:hover td { background: var(--mz-row-hover); }

.col-check { width: 36px; text-align: center; }
.col-index { width: 48px; text-align: center; color: var(--mz-text-secondary); }
.col-name { width: 200px; }
.col-code { width: 140px; }
.col-objective { width: 160px; }
.col-intro { width: 180px; }
.col-dept { width: 100px; }
.col-owner { width: 110px; }
.col-date { width: 110px; }
.col-goal { width: 200px; }
.col-status { width: 90px; }

.group-row td {
    background: #f7f8fa !important;
    font-weight: 600;
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
}

.group-row .group-meta {
    font-weight: normal;
    color: #8f959e;
    margin-left: 8px;
}

.group-toggle-indent {
    padding-left: 20px;
}

.group-level-2 td {
    background: #fafbfc !important;
}

/* Projects page */
.projects-grid {
    min-width: 2000px;
}

.projects-grid .col-prj-name { width: 180px; }
.projects-grid .col-prj-code { width: 130px; }
.projects-grid .col-prj-objective { width: 150px; }
.projects-grid .col-prj-intro { width: 160px; }
.projects-grid .col-prj-dept { width: 90px; }
.projects-grid .col-prj-owner { width: 110px; }
.projects-grid .col-prj-date { width: 110px; }
.projects-grid .col-prj-goal { width: 160px; }
.projects-grid .col-prj-status { width: 80px; }
.projects-grid .col-prj-num { width: 72px; text-align: center; }
.projects-grid .col-prj-progress { width: 120px; }
.projects-grid .col-prj-members { width: 100px; }
.projects-grid .col-prj-tasks { width: 280px; }

.projects-grid .cell-wrap {
    white-space: normal;
    line-height: 1.45;
    vertical-align: top;
    padding-top: 8px;
    padding-bottom: 8px;
}

.progress-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: #e8eaed;
    border-radius: 3px;
    overflow: hidden;
    min-width: 48px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
    border-radius: 3px;
}

.progress-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--mz-text);
    min-width: 32px;
}

.progress-fill-done {
    background: linear-gradient(90deg, #10b981, #34d399);
}

/* Tasks page */
.tasks-grid {
    min-width: 1600px;
}

.tasks-grid .col-task-name { width: 200px; }
.tasks-grid .col-task-project { width: 140px; }
.tasks-grid .col-task-code { width: 130px; }
.tasks-grid .col-task-desc { width: 180px; }
.tasks-grid .col-task-executor { width: 120px; }
.tasks-grid .col-task-status { width: 100px; }
.tasks-grid .col-task-risk { width: 90px; }
.tasks-grid .col-task-progress { width: 120px; }
.tasks-grid .col-task-date { width: 130px; }
.tasks-grid .col-task-reason { width: 160px; }
.tasks-grid .col-task-priority { width: 110px; }

.grid-inline-textarea {
    width: 100%;
    min-width: 0;
    min-height: 2.6em;
    box-sizing: border-box;
    padding: 4px 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #1f2329;
    background: #fff;
    border: 1px solid #d0d3d6;
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
}

.grid-inline-textarea:hover:not(:disabled):not([readonly]) {
    border-color: #3370ff;
}

.grid-inline-textarea:focus {
    outline: none;
    border-color: #3370ff;
    box-shadow: 0 0 0 2px rgba(51, 112, 255, 0.15);
}

.grid-inline-textarea:disabled,
.grid-inline-textarea[readonly] {
    background: #f5f6f7;
    color: #646a73;
    cursor: not-allowed;
}

.task-edit-select,
.task-edit-date {
    width: 100%;
    max-width: 100%;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    color: var(--mz-text);
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.task-edit-select:hover,
.task-edit-date:hover {
    border-color: var(--mz-border);
    background: var(--mz-panel);
}

.task-edit-select:focus,
.task-edit-date:focus {
    outline: none;
    border-color: var(--mz-primary);
    background: var(--mz-panel);
    box-shadow: 0 0 0 2px rgba(51, 112, 255, 0.1);
}

.task-edit-select.task-status-done { color: #237b4b; font-weight: 500; }
.task-edit-select.task-status-progress { color: #3370ff; font-weight: 500; }
.task-edit-select.task-status-delayed { color: #d83931; font-weight: 500; }
.task-edit-select.task-status-pending { color: #8f959e; }
.task-edit-select.task-status-tbd { color: #b86e00; }

.task-edit-saving { opacity: 0.6; }
.task-edit-saved { border-color: #34c759 !important; background: #f0fff4 !important; }
.task-edit-error { border-color: #f54a45 !important; background: #fff2f0 !important; }

.tasks-grid .cell-wrap {
    white-space: normal;
    line-height: 1.45;
    vertical-align: top;
    padding-top: 8px;
    padding-bottom: 8px;
}

.risk-badge,
.priority-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.risk-low { background: #fde8f0; color: #c93c7a; }
.risk-medium { background: #fff3e0; color: #b86e00; }
.risk-high { background: #fff1f0; color: #c93c37; }
.risk-default { background: #f0f1f5; color: #646a73; }

.priority-urgent-important { background: #fff1f0; color: #c93c37; }
.priority-urgent { background: #fff7e6; color: #b86e00; }
.priority-important { background: #e8f0ff; color: #245bdb; }
.priority-default { background: #f0f1f5; color: #646a73; }

.group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.group-toggle .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid var(--mz-text-secondary);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.2s;
}

.group-row.collapsed .arrow { transform: rotate(-90deg); }

.tag-code {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--mz-purple-bg);
    color: var(--mz-purple);
    font-size: 11px;
    font-weight: 500;
}

.tag-dept {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--mz-purple-bg);
    color: var(--mz-purple);
    font-size: 11px;
}

.owner-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3370ff, #7c3aed);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.status-done {
    background: var(--mz-success-bg);
    color: var(--mz-success-text);
}

.status-progress {
    background: #3370ff;
    color: #fff;
}

.status-pending {
    background: #fff;
    color: var(--mz-primary);
    border: 1px solid #b8d4ff;
}

.status-tbd {
    background: #fff7e6;
    color: #b86e00;
    border: 1px solid #ffe7ba;
}

/* Stats cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 20px;
}

.stat-card {
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    border-radius: 8px;
    padding: 16px;
}

.stat-card .label {
    font-size: 12px;
    color: var(--mz-text-secondary);
    margin-bottom: 8px;
}

.stat-card .value {
    font-size: 28px;
    font-weight: 600;
    color: var(--mz-text);
}

.stat-card .value.primary { color: var(--mz-primary); }

.simple-list {
    padding: 16px 20px;
}

.simple-list table {
    width: 100%;
    border-collapse: collapse;
}

.simple-list th,
.simple-list td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--mz-border);
    text-align: left;
}

.simple-list th {
    background: #fafbfc;
    font-weight: 500;
    color: var(--mz-text-secondary);
    font-size: 12px;
}

/* Members card grid */
.members-grid-wrap {
    padding: 16px 20px 8px;
    overflow: auto;
    height: 100%;
    background: var(--mz-bg);
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.member-card {
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    border-radius: 8px;
    padding: 14px 14px 12px;
    min-height: 96px;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.member-card:hover {
    border-color: #c9cdd4;
    box-shadow: 0 2px 8px rgba(31, 35, 41, 0.06);
}

.member-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    min-width: 0;
}

.member-name-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.member-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--mz-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

.member-leader-tag {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--mz-primary);
    background: var(--mz-primary-light);
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.4;
}

.member-avatar,
.member-avatar-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.member-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, #3370ff, #5b8def);
}

.member-avatar-img {
    object-fit: cover;
}

.member-avatar-dept-rd { background: linear-gradient(135deg, #3370ff, #6366f1); }
.member-avatar-dept-hr { background: linear-gradient(135deg, #10b981, #34d399); }
.member-avatar-dept-finance { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.member-avatar-dept-sales { background: linear-gradient(135deg, #ec4899, #f472b6); }
.member-avatar-dept-default { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }

.member-card-dept {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 12px;
    color: var(--mz-text-secondary);
}

.member-dept-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.member-dept-leader-mark {
    margin-left: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--mz-primary);
}

.dept-icon {
    font-size: 10px;
    opacity: 0.6;
}

.dept-label {
    flex-shrink: 0;
}

.dept-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dept-rd {
    background: #e8f0ff;
    color: #245bdb;
}

.dept-hr {
    background: #e6f7ed;
    color: #237b4b;
}

.dept-finance {
    background: #fde8e8;
    color: #c93c37;
}

.dept-sales {
    background: #fff3e0;
    color: #b86e00;
}

.dept-default {
    background: #f0f1f5;
    color: #646a73;
}

.members-footer {
    padding: 8px 20px 16px;
    font-size: 12px;
    color: var(--mz-text-secondary);
    background: var(--mz-bg);
}

.members-footer .members-refresh a {
    color: var(--mz-primary);
}

.members-footer .members-refresh a:hover {
    text-decoration: underline;
}

/* Objectives page */
.objectives-grid {
    min-width: 1100px;
}

.objectives-grid .col-obj-catalog { width: 220px; }
.objectives-grid .col-obj-period { width: 110px; }
.objectives-grid .col-obj-owner { width: 120px; }
.objectives-grid .col-obj-dept { width: 100px; }
.objectives-grid .col-obj-projects { width: 280px; }
.objectives-grid .col-obj-completion { width: 80px; text-align: center; }

.objectives-grid .cell-wrap {
    white-space: normal;
    line-height: 1.5;
    vertical-align: top;
    padding-top: 8px;
    padding-bottom: 8px;
}

.period-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.obj-catalog-editable,
.prj-name-editable,
.task-name-editable {
    cursor: pointer;
}

.obj-catalog-editable:hover .obj-catalog-text,
.prj-name-editable:hover .prj-name-text,
.task-name-editable:hover .task-name-text {
    color: #3370ff;
}

.obj-catalog-editable.obj-edit-saving,
.prj-name-editable.obj-edit-saving,
.task-name-editable.obj-edit-saving {
    opacity: 0.6;
}

.obj-catalog-editable.obj-edit-saved,
.prj-name-editable.obj-edit-saved,
.task-name-editable.obj-edit-saved {
    background: #f0fff4;
}

.obj-catalog-editable.obj-edit-error,
.prj-name-editable.obj-edit-error,
.task-name-editable.obj-edit-error {
    background: #fff2f0;
}

.catalog-edit-textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #1f2329;
    background: #fff;
    border: 1px solid #d0d3d6;
    border-radius: 4px;
    resize: vertical;
}

.catalog-edit-textarea:focus {
    outline: none;
    border-color: #3370ff;
    box-shadow: 0 0 0 2px rgba(51, 112, 255, 0.15);
}

.obj-edit-select {
    width: 100%;
    max-width: 140px;
    padding: 4px 8px;
    border: 1px solid var(--mz-border);
    border-radius: 6px;
    font-size: 12px;
    background: var(--mz-panel);
    color: var(--mz-text);
}

.obj-edit-select.obj-edit-period {
    font-weight: 500;
}

.obj-edit-select.obj-edit-period.period-q3 { color: #245bdb; background: #e8f0ff; border-color: #c5d9ff; }
.obj-edit-select.obj-edit-period.period-q2 { color: #b86e00; background: #fff3e0; border-color: #ffe0b2; }
.obj-edit-select.obj-edit-period.period-q1 { color: #237b4b; background: #e6f7ed; border-color: #b7e4c7; }
.obj-edit-select.obj-edit-period.period-q4 { color: #7c3aed; background: #f3e8ff; border-color: #e9d5ff; }
.obj-edit-select.obj-edit-period.period-default { color: #646a73; background: #f0f1f5; }

.obj-edit-select:hover {
    border-color: #3370ff;
}

.obj-edit-select:focus {
    outline: none;
    border-color: #3370ff;
    box-shadow: 0 0 0 2px rgba(51, 112, 255, 0.15);
}

.obj-edit-saving { opacity: 0.6; }
.obj-edit-saved { border-color: #34c759 !important; background: #f0fff4 !important; }
.obj-edit-error { border-color: #f54a45 !important; background: #fff2f0 !important; }

.period-q3 { background: #e8f0ff; color: #245bdb; }
.period-q2 { background: #fff3e0; color: #b86e00; }
.period-q1 { background: #e6f7ed; color: #237b4b; }
.period-q4 { background: #f3e8ff; color: #7c3aed; }
.period-default { background: #f0f1f5; color: #646a73; }

.project-tag {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 2px 8px;
    border-radius: 4px;
    background: #f0f1f5;
    color: #646a73;
    font-size: 11px;
    white-space: nowrap;
}

.completion-text {
    font-weight: 600;
    color: var(--mz-text);
}

.add-row .add-row-cell {
    color: var(--mz-text-secondary);
    font-size: 16px;
    padding-left: 14px;
}

.toolbar-badge {
    font-size: 11px;
    color: var(--mz-primary);
    margin-left: 2px;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay[hidden] {
    display: none;
}

.export-dept-select {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--mz-border);
    border-radius: 6px;
    font-size: 14px;
    background: var(--mz-panel);
    color: var(--mz-text);
}

.modal-dialog {
    background: var(--mz-panel);
    border-radius: 8px;
    width: 480px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mz-border);
}

.modal-header h3 {
    margin: 0;
    font-size: 16px;
}

.modal-close {
    border: none;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
    color: var(--mz-text-secondary);
    line-height: 1;
}

.modal-body {
    padding: 16px 20px;
}

.modal-hint {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--mz-text-secondary);
}

.modal-columns {
    margin: 0 0 12px;
    padding: 8px 12px;
    background: var(--mz-bg);
    border-radius: 4px;
    font-size: 12px;
    color: var(--mz-text);
}

.file-label input[type="file"] {
    font-size: 13px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--mz-border);
}

.members-empty {
    padding: 48px;
    text-align: center;
    color: var(--mz-text-secondary);
}

.members-alert {
    margin: 16px 20px 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
}

.members-alert strong {
    display: block;
    margin-bottom: 6px;
}

.members-alert p {
    margin: 0 0 6px;
    color: var(--mz-text-secondary);
}

.members-alert .hint {
    font-size: 12px;
}

.members-alert-warn {
    background: #fff7e6;
    border: 1px solid #ffe7ba;
}

.members-alert-error {
    background: #fff1f0;
    border: 1px solid #ffccc7;
}

.permission-hint-box {
    margin-top: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ffccc7;
}

.permission-hint-box ul,
.permission-hint-box ol {
    margin: 8px 0;
    padding-left: 20px;
}

.permission-hint-box li {
    margin-bottom: 8px;
}

.permission-hint-box .ok { color: #237b4b; }
.permission-hint-box .warn { color: #b86e00; }

.view-tab.active {
    color: var(--mz-primary);
    border-bottom-color: var(--mz-primary);
    font-weight: 500;
}

a.view-tab {
    text-decoration: none;
}

/* Weekly Report Form */
.weekly-report-page {
    min-height: 100%;
    background: var(--mz-bg);
}

.weekly-report-hero {
    position: relative;
    height: 120px;
    background: linear-gradient(135deg, #4f8cff 0%, #6eb5ff 45%, #a8d4ff 100%);
    overflow: hidden;
}

.weekly-report-hero-shapes::before,
.weekly-report-hero-shapes::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.weekly-report-hero-shapes::before {
    width: 180px;
    height: 180px;
    top: -40px;
    right: 12%;
}

.weekly-report-hero-shapes::after {
    width: 120px;
    height: 120px;
    bottom: -30px;
    left: 8%;
}

.weekly-report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 44px;
    background: var(--mz-panel);
    border-bottom: 1px solid var(--mz-border);
}

.weekly-report-toolbar-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mz-text);
}

.weekly-report-toolbar-actions {
    display: flex;
    gap: 8px;
}

.weekly-report-form-wrap {
    display: flex;
    justify-content: center;
    padding: 24px 20px 40px;
}

.weekly-report-form-card {
    width: 100%;
    max-width: 720px;
    background: var(--mz-panel);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(31, 35, 41, 0.06);
    padding: 28px 32px 32px;
}

.weekly-report-form-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    color: var(--mz-text);
}

.weekly-report-form-subtitle {
    margin: 0 0 28px;
    text-align: center;
    color: var(--mz-text-secondary);
    font-size: 13px;
}

.wr-field {
    margin-bottom: 20px;
}

.wr-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mz-text);
}

.wr-required {
    color: #f54a45;
}

.wr-field-hint {
    margin: -4px 0 8px;
    font-size: 12px;
    color: var(--mz-text-secondary);
}

.wr-input,
.wr-textarea,
.wr-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--mz-border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: var(--mz-text);
    background: var(--mz-panel);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wr-input:focus,
.wr-textarea:focus,
.wr-select:focus {
    outline: none;
    border-color: var(--mz-primary);
    box-shadow: 0 0 0 2px rgba(51, 112, 255, 0.12);
}

.wr-textarea {
    resize: vertical;
    min-height: 72px;
}

.wr-date-input-wrap {
    position: relative;
}

.wr-date-input {
    cursor: pointer;
    background: var(--mz-panel);
}

.wr-reporter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--mz-border);
    border-radius: 6px;
    background: #fafbfc;
    min-height: 40px;
}

.wr-reporter-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.wr-reporter-avatar-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3370ff, #6366f1);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.wr-reporter-name {
    font-size: 14px;
    font-weight: 500;
}

.wr-reporter-placeholder {
    color: var(--mz-text-secondary);
    font-size: 13px;
}

.wr-calendar {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    width: 280px;
    padding: 12px;
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 35, 41, 0.12);
}

.wr-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.wr-cal-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--mz-text);
}

.wr-cal-chevron {
    font-size: 10px;
    color: var(--mz-text-secondary);
    margin-left: 2px;
}

.wr-cal-nav {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--mz-text-secondary);
    cursor: pointer;
    font-size: 14px;
}

.wr-cal-nav:hover {
    background: var(--mz-row-hover);
    color: var(--mz-text);
}

.wr-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
    text-align: center;
    font-size: 12px;
    color: var(--mz-text-secondary);
}

.wr-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.wr-cal-day {
    width: 34px;
    height: 34px;
    margin: 0 auto;
    border: none;
    border-radius: 50%;
    background: transparent;
    font-size: 13px;
    color: var(--mz-text);
    cursor: pointer;
}

.wr-cal-day:hover {
    background: var(--mz-row-hover);
}

.wr-cal-day-other {
    color: #c9cdd4;
}

.wr-cal-day-selected {
    background: var(--mz-primary);
    color: #fff;
}

.wr-cal-day-selected:hover {
    background: #2860e0;
}

.wr-tasks-list,
.wr-projects-list {
    border: 1px solid var(--mz-border);
    border-radius: 6px;
    background: #fafbfc;
    min-height: 48px;
}

.wr-tasks-empty,
.wr-tasks-loading {
    padding: 14px 12px;
    font-size: 13px;
    color: var(--mz-text-secondary);
}

.wr-task-item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--mz-border);
}

.wr-task-item:last-child {
    border-bottom: none;
}

.wr-task-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--mz-text);
}

.wr-task-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--mz-text-secondary);
}

.wr-task-complete-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.wr-task-complete-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--mz-text);
    cursor: pointer;
    user-select: none;
}

.wr-task-complete-option input {
    margin: 0;
    cursor: pointer;
}

.wr-task-incomplete-fields {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fafbfc;
    border: 1px solid var(--mz-border);
    border-radius: 6px;
}

.wr-task-incomplete-row {
    margin-bottom: 10px;
}

.wr-task-incomplete-row:last-child {
    margin-bottom: 0;
}

.wr-task-incomplete-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mz-text);
}

.wr-task-incomplete-row .wr-input {
    width: 100%;
    padding: 6px 10px;
    font-size: 13px;
}

.wr-task-status {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--mz-active-bg);
    color: var(--mz-primary);
}

.wr-project-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mz-border);
    font-size: 13px;
}

.wr-project-item:last-child {
    border-bottom: none;
}

.wr-upload-box {
    border: 1px solid var(--mz-border);
    border-radius: 8px;
    padding: 12px;
    background: var(--mz-panel);
}

.wr-upload-dropzone {
    padding: 28px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--mz-text-secondary);
    background: #f7f8fa;
    border: 1px dashed #c9cdd4;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.wr-upload-dropzone:hover,
.wr-upload-dropzone.wr-upload-dragover {
    border-color: var(--mz-primary);
    background: #f0f5ff;
    color: var(--mz-primary);
}

.wr-upload-add-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mz-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.wr-upload-add-btn:hover {
    background: var(--mz-row-hover);
}

.wr-file-input {
    display: none;
}

.wr-upload-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.wr-upload-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    margin-top: 6px;
    background: #f7f8fa;
    border: 1px solid var(--mz-border);
    border-radius: 6px;
    font-size: 13px;
}

.wr-upload-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mz-text);
}

.wr-upload-item-size {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--mz-text-secondary);
}

.wr-upload-item-remove {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--mz-text-secondary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
}

.wr-upload-item-remove:hover {
    color: #f54a45;
    background: #fff2f0;
}

.wr-submit-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background: var(--mz-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.wr-submit-btn:hover {
    background: #2860e0;
}

.wr-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.wr-submit-msg {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}

.wr-submit-msg.success {
    background: #f0fff4;
    color: #237b4b;
    border: 1px solid #b7eb8f;
}

.wr-submit-msg.error {
    background: #fff2f0;
    color: #cf1322;
    border: 1px solid #ffccc7;
}

/* Permission management */
.perm-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--mz-bg);
    padding: 0 24px 24px;
    overflow: auto;
}

.perm-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--mz-border);
    margin: 16px 0;
    background: var(--mz-panel);
    padding: 0 16px;
    border-radius: 8px 8px 0 0;
}

.perm-tab {
    display: inline-block;
    padding: 12px 4px;
    margin-right: 24px;
    font-size: 14px;
    color: var(--mz-text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: default;
}

.perm-tab.active {
    color: var(--mz-primary);
    font-weight: 500;
    border-bottom-color: var(--mz-primary);
}

.perm-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.perm-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.perm-filter-text {
    font-size: 13px;
    color: var(--mz-text-secondary);
    white-space: nowrap;
}

.perm-select {
    height: 32px;
    min-width: 120px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--mz-border);
    border-radius: 6px;
    background: var(--mz-panel);
    font-size: 13px;
    color: var(--mz-text);
    cursor: pointer;
}

.perm-search-wrap {
    flex: 1;
    max-width: 280px;
}

.perm-search-input {
    width: 100%;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--mz-border);
    border-radius: 16px;
    font-size: 13px;
    background: var(--mz-panel);
    outline: none;
}

.perm-search-input:focus {
    border-color: var(--mz-primary);
    box-shadow: 0 0 0 2px var(--mz-primary-light);
}

.perm-card {
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(31, 35, 41, 0.06);
}

.perm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.perm-table thead tr {
    background: #f7f8fa;
    border-bottom: 1px solid var(--mz-border);
}

.perm-table th {
    text-align: left;
    padding: 10px 16px;
    font-weight: 500;
    color: var(--mz-text-secondary);
    font-size: 12px;
}

.perm-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mz-border);
    vertical-align: middle;
}

.perm-table tbody tr:last-child td {
    border-bottom: none;
}

.perm-table tbody tr:hover {
    background: var(--mz-row-hover);
}

.perm-col-name { width: 220px; }
.perm-col-members { min-width: 280px; }
.perm-col-scope { width: auto; }
.perm-col-actions { width: 160px; white-space: nowrap; }

.perm-role-name {
    font-weight: 500;
    color: var(--mz-text);
    margin-right: 8px;
}

.perm-tag-system {
    display: inline-block;
    padding: 1px 6px;
    font-size: 11px;
    color: var(--mz-primary);
    background: var(--mz-primary-light);
    border-radius: 4px;
    vertical-align: middle;
}

.perm-member-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.perm-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 140px;
}

.perm-member-avatar,
.perm-member-avatar-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.perm-member-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, #3370ff, #5b8def);
}

.perm-member-avatar-img {
    object-fit: cover;
}

.perm-member-avatar-dept-rd { background: linear-gradient(135deg, #3370ff, #6366f1); }
.perm-member-avatar-dept-hr { background: linear-gradient(135deg, #10b981, #34d399); }
.perm-member-avatar-dept-finance { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.perm-member-avatar-dept-sales { background: linear-gradient(135deg, #ec4899, #f472b6); }
.perm-member-avatar-dept-default { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }

.perm-member-name {
    font-size: 13px;
    color: var(--mz-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.perm-member-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 6px;
    font-size: 12px;
    color: var(--mz-text-secondary);
    background: #f2f3f5;
    border-radius: 12px;
}

.perm-scope-text {
    color: var(--mz-text-secondary);
    line-height: 1.5;
}

.perm-link-btn {
    border: none;
    background: none;
    padding: 0;
    margin-right: 16px;
    font-size: 13px;
    color: var(--mz-primary);
    cursor: pointer;
}

.perm-link-btn:last-child {
    margin-right: 0;
}

.perm-link-btn:hover {
    text-decoration: underline;
}

.perm-empty {
    padding: 32px;
    text-align: center;
    color: var(--mz-text-secondary);
    font-size: 13px;
}

/* Permission role detail drawer */
body.perm-drawer-open {
    overflow: hidden;
}

.perm-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(31, 35, 41, 0.4);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
}

.perm-drawer-backdrop[hidden] {
    display: none !important;
}

.perm-drawer-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

.perm-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(480px, 42vw);
    min-width: 360px;
    height: 100vh;
    background: var(--mz-panel);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(31, 35, 41, 0.12);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    pointer-events: none;
}

.perm-drawer[hidden] {
    display: none !important;
}

.perm-drawer.visible {
    transform: translateX(0);
    pointer-events: auto;
}

.perm-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mz-border);
    flex-shrink: 0;
}

.perm-drawer-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--mz-text);
}

.perm-drawer-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--mz-text-secondary);
    cursor: pointer;
    border-radius: 6px;
}

.perm-drawer-close:hover {
    background: var(--mz-row-hover);
    color: var(--mz-text);
}

.perm-drawer-body {
    flex: 1;
    overflow: auto;
    padding: 0 20px 20px;
}

.perm-drawer-role-head {
    padding: 16px 0 12px;
    border-bottom: 1px solid var(--mz-border);
}

.perm-drawer-role-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.perm-drawer-role-name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--mz-text);
}

.perm-drawer-role-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mz-text-secondary);
}

.perm-drawer-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--mz-border);
    margin-bottom: 16px;
}

.perm-drawer-tab {
    border: none;
    background: none;
    padding: 12px 0;
    margin-bottom: -1px;
    font-size: 14px;
    color: var(--mz-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.perm-drawer-tab.active {
    color: var(--mz-primary);
    font-weight: 500;
    border-bottom-color: var(--mz-primary);
}

.perm-drawer-panel[hidden] {
    display: none !important;
}

.perm-drawer-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.perm-drawer-search {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--mz-border);
    border-radius: 6px;
    font-size: 13px;
    outline: none;
}

.perm-drawer-search:focus {
    border-color: var(--mz-primary);
    box-shadow: 0 0 0 2px var(--mz-primary-light);
}

.perm-drawer-add-btn {
    flex-shrink: 0;
    height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: 6px;
    background: var(--mz-primary);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.perm-drawer-add-btn:hover {
    background: #2860e1;
}

.perm-drawer-table-wrap {
    border: 1px solid var(--mz-border);
    border-radius: 8px;
    overflow: hidden;
}

.perm-drawer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.perm-drawer-table thead tr {
    background: #f7f8fa;
}

.perm-drawer-table th {
    text-align: left;
    padding: 8px 12px;
    font-weight: 500;
    font-size: 12px;
    color: var(--mz-text-secondary);
    border-bottom: 1px solid var(--mz-border);
}

.perm-drawer-table td {
    padding: 12px;
    border-bottom: 1px solid var(--mz-border);
    vertical-align: middle;
}

.perm-drawer-table tbody tr:last-child td {
    border-bottom: none;
}

.perm-drawer-table tbody tr:hover {
    background: var(--mz-row-hover);
}

.perm-drawer-col-name { width: 48%; }
.perm-drawer-col-dept { width: 32%; }
.perm-drawer-col-action { width: 20%; text-align: right; }

.perm-drawer-user-cell {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.perm-drawer-user-avatar,
.perm-drawer-user-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.perm-drawer-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(135deg, #3370ff, #5b8def);
}

.perm-drawer-user-avatar-img {
    object-fit: cover;
}

.perm-drawer-user-meta {
    min-width: 0;
    flex: 1;
}

.perm-drawer-user-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.perm-drawer-user-name {
    font-weight: 500;
    color: var(--mz-text);
}

.perm-drawer-user-phone {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--mz-text-secondary);
}

.perm-drawer-creator-tag {
    display: inline-block;
    padding: 0 6px;
    font-size: 11px;
    color: var(--mz-text-secondary);
    background: #f2f3f5;
    border-radius: 4px;
}

.perm-drawer-action-remove {
    border: none;
    background: none;
    padding: 0;
    font-size: 13px;
    color: #d83931;
    cursor: pointer;
}

.perm-drawer-action-remove:hover {
    text-decoration: underline;
}

.perm-drawer-action-transfer {
    border: none;
    background: none;
    padding: 0;
    font-size: 13px;
    color: #c9cdd4;
    cursor: not-allowed;
}

.perm-drawer-action-muted {
    color: var(--mz-text-secondary);
}

.perm-drawer-empty {
    padding: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--mz-text-secondary);
}

.perm-drawer-perm-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.perm-drawer-perm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    font-size: 13px;
    color: var(--mz-text);
    border-bottom: 1px solid #f0f1f2;
}

.perm-drawer-perm-item:last-child {
    border-bottom: none;
}

.perm-drawer-perm-check {
    color: #00b96b;
    font-weight: 600;
}

/* Remove member confirm modal */
.perm-remove-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(31, 35, 41, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.perm-remove-modal[hidden] {
    display: none !important;
}

.perm-remove-modal.visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.perm-remove-modal-box {
    width: min(420px, calc(100vw - 48px));
    background: var(--mz-panel);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(31, 35, 41, 0.18);
    padding: 24px;
}

.perm-remove-modal-main {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.perm-remove-modal-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ff8800;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.perm-remove-modal-text {
    flex: 1;
    min-width: 0;
}

.perm-remove-modal-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mz-text);
    line-height: 1.5;
}

.perm-remove-modal-desc {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--mz-text-secondary);
    line-height: 1.5;
}

.perm-remove-modal-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mz-text);
    cursor: pointer;
    user-select: none;
}

.perm-remove-modal-check input {
    margin: 0;
    accent-color: var(--mz-primary);
}

.perm-remove-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.perm-remove-btn-cancel {
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--mz-border);
    border-radius: 6px;
    background: var(--mz-panel);
    font-size: 13px;
    color: var(--mz-text);
    cursor: pointer;
}

.perm-remove-btn-cancel:hover {
    background: var(--mz-row-hover);
}

.perm-remove-btn-confirm {
    height: 32px;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    background: #f54a45;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
}

.perm-remove-btn-confirm:hover {
    background: #e03e39;
}

body.perm-remove-modal-open {
    overflow: hidden;
}

body.grid-delete-modal-open {
    overflow: hidden;
}

/* Add member modal */
.perm-add-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(31, 35, 41, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.perm-add-modal[hidden] {
    display: none !important;
}

.perm-add-modal.visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.perm-add-modal-box {
    width: min(720px, calc(100vw - 48px));
    max-height: calc(100vh - 80px);
    background: var(--mz-panel);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(31, 35, 41, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.perm-add-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mz-border);
    flex-shrink: 0;
}

.perm-add-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.perm-add-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 22px;
    color: var(--mz-text-secondary);
    cursor: pointer;
    border-radius: 6px;
}

.perm-add-modal-close:hover {
    background: var(--mz-row-hover);
}

.perm-add-modal-body {
    display: flex;
    min-height: 360px;
    max-height: 420px;
    margin: 16px 20px;
    border: 1px solid var(--mz-border);
    border-radius: 8px;
    overflow: hidden;
}

.perm-add-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.perm-add-pane-left {
    border-right: 1px solid var(--mz-border);
    padding: 12px;
}

.perm-add-pane-right {
    padding: 12px;
    background: #fafbfc;
}

.perm-add-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 36px;
    border: 1px solid var(--mz-border);
    border-radius: 6px;
    background: var(--mz-panel);
    margin-bottom: 12px;
    flex-shrink: 0;
}

.perm-add-search-icon {
    font-size: 14px;
    opacity: 0.5;
}

.perm-add-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 13px;
    background: transparent;
}

.perm-add-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.perm-add-empty[hidden] {
    display: none !important;
}

.perm-add-empty-illus {
    margin-bottom: 12px;
    opacity: 0.85;
}

.perm-add-empty-text {
    margin: 0;
    font-size: 13px;
    color: var(--mz-text-secondary);
}

.perm-add-results {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.perm-add-results[hidden] {
    display: none !important;
}

.perm-add-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}

.perm-add-result-item:hover {
    background: var(--mz-row-hover);
}

.perm-add-result-avatar,
.perm-add-result-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.perm-add-result-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(135deg, #3370ff, #5b8def);
}

.perm-add-result-avatar-img {
    object-fit: cover;
}

.perm-add-result-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.perm-add-result-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--mz-text);
}

.perm-add-result-sub {
    font-size: 12px;
    color: var(--mz-text-secondary);
}

.perm-add-no-result {
    padding: 16px;
    text-align: center;
    color: var(--mz-text-secondary);
    font-size: 13px;
}

.perm-add-selected-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    max-height: 100%;
}

.perm-add-selected-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid #eef0f2;
}

.perm-add-selected-avatar,
.perm-add-selected-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.perm-add-selected-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, #3370ff, #5b8def);
}

.perm-add-selected-avatar-img {
    object-fit: cover;
}

.perm-add-selected-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perm-add-selected-remove {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--mz-text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}

.perm-add-selected-remove:hover {
    background: #fee;
    color: #d83931;
}

.perm-add-selected-hint {
    margin: 0;
    padding: 24px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--mz-text-secondary);
}

.perm-add-selected-hint[hidden] {
    display: none !important;
}

.perm-add-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--mz-border);
    flex-shrink: 0;
}

.perm-add-btn-cancel {
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--mz-border);
    border-radius: 6px;
    background: var(--mz-panel);
    font-size: 13px;
    cursor: pointer;
}

.perm-add-btn-cancel:hover {
    background: var(--mz-row-hover);
}

.perm-add-btn-confirm {
    height: 32px;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    background: #c9cdd4;
    font-size: 13px;
    color: #fff;
    cursor: not-allowed;
}

.perm-add-btn-confirm.enabled {
    background: var(--mz-primary);
    cursor: pointer;
}

.perm-add-btn-confirm.enabled:hover {
    background: #2860e1;
}

body.perm-add-modal-open {
    overflow: hidden;
}

/* Workbench */
.wb-page {
    padding: 0 24px 32px;
    max-width: 1200px;
}

.wb-readonly-banner {
    margin-bottom: 16px;
    padding: 8px 12px;
    font-size: 12px;
    color: #646a73;
    background: #f0f4ff;
    border: 1px solid #d6e4ff;
    border-radius: 6px;
}

.wb-hero {
    text-align: center;
    padding: 24px 0 20px;
}

.wb-date {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--mz-text-secondary);
}

.wb-greeting {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    color: var(--mz-text);
}

.wb-wave {
    font-size: 24px;
}

.wb-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--mz-border);
    margin-bottom: 16px;
    background: var(--mz-panel);
    border-radius: 8px 8px 0 0;
    padding: 0 8px;
}

.wb-tab {
    display: inline-block;
    padding: 12px 16px;
    margin-bottom: -1px;
    font-size: 14px;
    color: var(--mz-text-secondary);
    border-bottom: 2px solid transparent;
}

.wb-tab.active {
    color: var(--mz-primary);
    font-weight: 500;
    border-bottom-color: var(--mz-primary);
}

.wb-single-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--mz-text);
}

.wb-scope-desc {
    font-size: 13px;
    color: var(--mz-text-secondary);
    margin-bottom: 16px;
}

.wb-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.wb-summary-card {
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(31, 35, 41, 0.04);
}

.wb-summary-label {
    font-size: 12px;
    color: var(--mz-text-secondary);
    margin-bottom: 6px;
}

.wb-summary-value {
    font-size: 22px;
    font-weight: 600;
    color: var(--mz-text);
}

.wb-summary-value.wb-tone-primary {
    color: var(--mz-primary);
}

.wb-summary-value.wb-tone-success {
    color: #00b96b;
}

.wb-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wb-card {
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(31, 35, 41, 0.06);
    overflow: hidden;
}

.wb-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mz-border);
}

.wb-card-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
}

.wb-card-icon-目标 { background: #ff8800; }
.wb-card-icon-项目 { background: #3370ff; }
.wb-card-icon-任务 { background: #7c3aed; }

.wb-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.wb-card-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mz-border);
    background: #fafbfc;
}

.wb-metric-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: default;
    opacity: 1;
}

.wb-metric-tab.active {
    background: var(--mz-active-bg);
}

.wb-metric-tab.active .wb-metric-num {
    color: var(--mz-primary);
}

.wb-metric-num {
    font-size: 18px;
    font-weight: 600;
    color: var(--mz-text);
    line-height: 1.2;
}

.wb-metric-label {
    font-size: 12px;
    color: var(--mz-text-secondary);
    margin-top: 2px;
}

.wb-metric-rate .wb-metric-num {
    font-size: 16px;
}

.wb-card-body {
    padding: 16px;
    min-height: 80px;
}

.wb-empty {
    text-align: center;
    padding: 24px;
    color: var(--mz-text-secondary);
}

.wb-empty-icon {
    font-size: 40px;
    opacity: 0.35;
    margin-bottom: 8px;
}

.wb-breakdown {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.wb-breakdown li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #f7f8fa;
    border-radius: 6px;
    font-size: 13px;
}

.wb-breakdown-count {
    font-weight: 600;
    color: var(--mz-text);
}

.role-readonly-banner {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: #fff7e6;
    border: 1px solid #ffd591;
    border-radius: 6px;
    font-size: 13px;
    color: #ad6800;
    line-height: 1.5;
}