/* === Reset & Base === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'PingFang SC', 'Segoe UI', sans-serif; background: #f7f8fc; color: #2d3436; font-size: 14px; line-height: 1.6; }

/* === Nav === */
nav { background: #fff; padding: 0 2rem; display: flex; align-items: center; height: 56px; gap: 0; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 100; }
nav a { color: #636e72; text-decoration: none; padding: 0 1.1rem; height: 56px; display: flex; align-items: center; font-size: 0.9rem; transition: all 0.15s; border-bottom: 2px solid transparent; }
nav a.logo { font-weight: 700; font-size: 1.1rem; color: #2d3436; margin-right: 1.5rem; padding-left: 0; border: none; letter-spacing: -0.5px; }
nav a:hover { color: #2d3436; }
nav a.active { color: #6c5ce7; border-bottom-color: #6c5ce7; font-weight: 500; }

/* === Nav Dropdown === */
.nav-dropdown { position: relative; height: 56px; display: flex; align-items: center; }
.nav-dropdown > a { cursor: pointer; }
.nav-dropdown-menu { display: none; position: absolute; top: 56px; left: 0; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); min-width: 150px; z-index: 200; overflow: hidden; }
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: block; padding: 0.6rem 1.2rem; height: auto; border-bottom: none; font-size: 0.85rem; color: #636e72; }
.nav-dropdown-menu a:hover { background: #f8f9ff; color: #6c5ce7; }

/* === Layout === */
main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
h1 { font-size: 1.5rem; font-weight: 700; color: #2d3436; margin-bottom: 1.5rem; }
h2 { font-size: 1.1rem; font-weight: 600; color: #2d3436; margin: 1.5rem 0 0.75rem; }

/* === Cards === */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.card { background: #fff; padding: 1.25rem 1.5rem; border-radius: 12px; border: 1px solid #f0f0f0; transition: box-shadow 0.2s; }
.card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.card h3 { color: #b2bec3; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 0.3rem; font-weight: 600; }
.big-number { font-size: 2rem; font-weight: 700; color: #2d3436; }
.card.small { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; }
.card.small span { color: #b2bec3; font-size: 0.8rem; }
.card.small strong { font-size: 1.3rem; color: #2d3436; font-weight: 700; }

/* === Group section === */
.group-section { margin-bottom: 1.25rem; background: #fff; border-radius: 12px; padding: 1rem 1.25rem; border: 1px solid #f0f0f0; }
.group-section h3 { margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 600; color: #2d3436; }
.group-section .cards { margin-bottom: 0; gap: 0.75rem; }
.group-header { display: flex; justify-content: space-between; align-items: center; }
.btn-leave { background: none; border: 1px solid #eee; color: #b2bec3; cursor: pointer; font-size: 0.8rem; padding: 2px 8px; border-radius: 4px; transition: all 0.15s; }
.btn-leave:hover { color: #e17055; border-color: #e17055; }

/* === Tables === */
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #f0f0f0; }
th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #f5f6fa; font-size: 0.9rem; }
th { background: #fafbfc; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.3px; color: #2d3436; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #f8f9ff; }

/* === Badges === */
.badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; color: #fff; letter-spacing: 0.3px; }
.badge.admin { background: #e74c3c; }
.badge.maintainer { background: #e67e22; }
.badge.manager { background: #3498db; }
.badge.user, .badge.member { background: #27ae60; }
.badge.perm-none, .badge.none { background: #95a5a6; }

/* === Role chips === */
.chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.role-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 500; white-space: nowrap; }
.role-chip.mgr { background: #dbeafe; color: #1e40af; }
.role-chip.mem { background: #dcfce7; color: #166534; }
.chip-group { font-weight: 600; }
.chip-select { border: none; background: transparent; color: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; padding: 0; appearance: auto; }
.role-chip.perm-admin { background: #fde8e8; color: #c0392b; }
.role-chip.perm-maintainer { background: #fef3e2; color: #d35400; }
.role-chip.perm-none { background: #f0f0f0; color: #636e72; }
.role-chip.perm-admin .chip-select,
.role-chip.perm-maintainer .chip-select,
.role-chip.perm-none .chip-select { font-size: 0.78rem; }

/* === Delete button hover === */
.btn-delete-hover { opacity: 0; transition: opacity 0.15s; }
tr:hover .btn-delete-hover { opacity: 1; }

/* === Role select === */
select.role-select { border: none; cursor: pointer; padding: 3px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; color: #fff; appearance: auto; letter-spacing: 0.3px; }
select.role-select.admin { background: #e74c3c; }
select.role-select.maintainer { background: #e67e22; }
select.role-select.manager { background: #3498db; }
select.role-select.user, select.role-select.member { background: #27ae60; }
select.role-select.none { background: #95a5a6; }

/* === Filters === */
.filters { margin-bottom: 1.25rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.filters a, .filters select, .filter-btn { padding: 0.4rem 0.9rem; background: #fff; border-radius: 8px; text-decoration: none; color: #636e72; border: 1px solid #eee; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; }
.filters a:hover, .filter-btn:hover { border-color: #6c5ce7; color: #6c5ce7; }
.filters a.active, .filter-btn.active { background: #6c5ce7; color: #fff; border-color: #6c5ce7; }

/* === People page === */
.role-legend { margin-bottom: 1.5rem; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; font-size: 0.85rem; color: #636e72; }
.save-status { font-size: 0.75rem; margin-left: 0.4rem; }
.save-status.ok { color: #00b894; }
.save-status.err { color: #e17055; }
.group-roles { max-width: 450px; min-width: 250px; }
.group-role-item { display: flex; align-items: center; padding: 3px 0; gap: 6px; }
.group-role-item .group-name { font-size: 0.8rem; color: #2d3436; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.group-role-item select.role-select { font-size: 0.7rem; padding: 2px 6px; }
.btn-kick { background: none; border: 1px solid #eee; color: #b2bec3; cursor: pointer; font-size: 0.7rem; padding: 1px 5px; border-radius: 4px; transition: all 0.15s; }
.btn-kick:hover { color: #e17055; border-color: #e17055; }

/* === Settings page === */
.settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.settings-desc { color: #b2bec3; margin-bottom: 1rem; font-size: 0.85rem; }
.cmd-name { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-weight: 600; color: #2d3436; white-space: nowrap; font-size: 0.85rem; }
.cmd-desc { color: #b2bec3; font-size: 0.8rem; white-space: pre-line; }
.dim-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }
.dim-tag.perm { background: #fde8e2; color: #e74c3c; }
.dim-tag.pos { background: #e8f4fd; color: #3498db; }
.dim-tag.none { background: #f5f6fa; color: #b2bec3; }
.btn-reset { background: #e17055; color: #fff; border: none; padding: 0.45rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.8rem; font-weight: 600; transition: background 0.15s; }
.btn-reset:hover { background: #d63031; }
.btn-revert { background: none; border: 1px solid #eee; border-radius: 4px; cursor: pointer; font-size: 0.9rem; padding: 2px 8px; color: #b2bec3; transition: all 0.15s; }
.btn-revert:hover { color: #6c5ce7; border-color: #6c5ce7; }
.btn-revert.hidden { visibility: hidden; }
.settings-footer { margin-top: 1.5rem; color: #dfe6e9; font-size: 0.8rem; }
tr.cmd-row.dim { opacity: 0.15; }

/* === Org chart / Dashboard === */
.dept-block { margin-bottom: 2rem; background: #fff; border-radius: 14px; border: 1px solid #f0f0f0; overflow: hidden; }
.dept-header-bar { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%); color: #fff; }
.dept-title { font-size: 1rem; font-weight: 700; margin: 0; cursor: pointer; }
.dept-title:hover { opacity: 0.85; }
.dept-title .edit-hint { font-size: 0.65rem; font-weight: 400; opacity: 0.5; margin-left: 0.3rem; }
.dept-title:hover .edit-hint { opacity: 1; }
.dept-badge-tag { background: rgba(255,255,255,0.25); padding: 2px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; }
.mgr-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.5rem; border-bottom: 1px solid #f5f6fa; flex-wrap: wrap; }
.mgr-label { font-size: 0.75rem; color: #b2bec3; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.mgr-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: #eef0fb; color: #6c5ce7; padding: 3px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.org-group { margin: 0.75rem 1.5rem; padding: 0.75rem 1rem; background: #fafbfe; border-radius: 10px; border: 1px solid #f0f0f5; }
.org-group:last-child { margin-bottom: 1rem; }
.org-group-mgr { border: 1px solid #d5d0f5; background: #f5f3ff; }
.org-group-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; flex-wrap: wrap; gap: 0.5rem; }
.org-group-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.org-group-right { display: flex; align-items: center; gap: 0.75rem; }
.org-group-name { font-weight: 600; font-size: 0.9rem; color: #2d3436; }
.org-group-tag { font-size: 0.65rem; color: #6c5ce7; font-weight: 600; }
.org-group-mgr-names { font-size: 0.75rem; color: #6c5ce7; font-weight: 500; }
.org-group-count { font-size: 0.7rem; color: #b2bec3; }
.org-group-stats { font-size: 0.7rem; color: #b2bec3; margin-left: 0.25rem; }
.org-member { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0 0.2rem 0.5rem; font-size: 0.85rem; }
.org-avatar { width: 18px; height: 18px; border-radius: 50%; background: #dfe6e9; color: #636e72; display: flex; align-items: center; justify-content: center; font-size: 0.5rem; font-weight: 700; flex-shrink: 0; }
.org-avatar.mgr { background: #6c5ce7; color: #fff; }
.org-avatar.unassigned { background: #e17055; color: #fff; }
.org-name { color: #2d3436; }
.org-username { color: #b2bec3; font-size: 0.75rem; }
.org-empty { color: #b2bec3; font-size: 0.8rem; text-align: center; padding: 0.75rem 1.5rem; font-style: italic; }
.unassigned-block { background: #fff; border-radius: 14px; border: 1px dashed #ddd; padding: 1rem 0.5rem; margin-bottom: 2rem; }
.unassigned-block h3 { font-size: 0.85rem; color: #b2bec3; margin: 0 1rem 0.75rem; font-weight: 600; }
.org-group-unassigned { margin: 0.5rem 0.5rem; }
.org-info-box { background: #fff; border-radius: 12px; border: 1px solid #f0f0f0; padding: 1.25rem; color: #636e72; font-size: 0.85rem; }
.org-info-box ul { margin-top: 0.5rem; padding-left: 1.5rem; display: grid; gap: 0.3rem; }
.dept-select { border: 1px solid #e0e0e0; border-radius: 6px; padding: 2px 6px; font-size: 0.7rem; color: #636e72; background: #fff; cursor: pointer; }
.dept-select:focus { border-color: #6c5ce7; outline: none; }
.toggle-row { display: flex; align-items: center; gap: 0.4rem; }
.toggle-label { font-size: 0.7rem; color: #b2bec3; }
.toggle-switch { position: relative; display: inline-block; width: 32px; height: 18px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #ccc; border-radius: 18px; transition: 0.2s; }
.toggle-slider::before { content: ''; position: absolute; height: 12px; width: 12px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.2s; }
.toggle-switch input:checked + .toggle-slider { background: #6c5ce7; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(14px); }
.btn-delete-user { margin-left:8px; background:transparent; color:#999; border:1px solid #ddd; border-radius:4px; padding:2px 8px; cursor:pointer; font-size:12px; }

/* === Empty state === */
.empty-state { text-align: center; padding: 3rem 1rem; color: #dfe6e9; }

/* === Responsive === */
@media (max-width: 768px) {
    nav { padding: 0 1rem; overflow-x: auto; }
    nav a { font-size: 0.8rem; padding: 0 0.75rem; white-space: nowrap; }
    main { padding: 1.25rem 1rem; }
    h1 { font-size: 1.25rem; }
    .cards { grid-template-columns: repeat(2, 1fr); }
    th, td { padding: 0.6rem 0.6rem; font-size: 0.8rem; }
    .settings-header { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
    .group-roles { max-width: 200px; }
}
@media (max-width: 480px) {
    .cards { grid-template-columns: 1fr; }
    .filters { flex-direction: column; }
    .role-legend { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* === Telegram Mini App === */
body.tg-mini-app { background: var(--tg-bg, #f7f8fc); color: var(--tg-text, #2d3436); }
body.tg-mini-app nav { display: flex; overflow-x: auto; white-space: nowrap; padding: 0 0.5rem; }
body.tg-mini-app nav a { font-size: 0.8rem; padding: 0 0.7rem; }
body.tg-mini-app main { padding: 0.5rem; }
body.tg-mini-app table { font-size: 0.75rem; }
body.tg-mini-app h1 { font-size: 1.2rem; }
body.tg-mini-app h2 { font-size: 1rem; }