/* ===========================
   CARD
=========================== */

.card {
    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    overflow: hidden;

    width: 100%;
}

.card-header {
    padding: 10px 14px;

    border-bottom: 1px solid var(--color-border);

    font-weight: 600;

    font-size: 15px;
}

.card-body {
    padding: 14px;
}

/* ===========================
   BUTTON
=========================== */

.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 7px 12px;

    border: none;

    border-radius: var(--radius-sm);

    cursor: pointer;

    text-decoration: none;

    transition: 0.2s;
}

.btn-primary {
    background: var(--color-primary);

    color: #fff;
}

.btn-primary:hover {
    background: var(--color-primary-hover);
}

.btn-secondary {
    background: #f3f4f6;

    color: #374151;

    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background: #e5e7eb;
}

.btn-danger {
    background: #dc2626;

    color: #fff;
}

.btn-danger:hover {
    background: #b91c1c;
}

.iis-ui-icon {
    width: 1.1rem;
    height: 1.1rem;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    flex: 0 0 auto;
}

.iis-ui-icon--lg {
    width: 1.4rem;
    height: 1.4rem;
}

/* ===========================
   KPI CARDS
=========================== */

.alert {
    padding: 9px 12px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}

.btn-sm {
    padding: 5px 9px;
    font-size: 12px;
}

.alert-success { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.alert-danger { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.alert-warning { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.alert-info { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }

.pagination { display:flex; align-items:center; justify-content:flex-end; gap:4px; padding:10px 0; }
.pagination-summary { margin-right:8px; color:var(--color-text-light); }
.pagination-link { min-width:32px; padding:5px 8px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); text-align:center; text-decoration:none; }
.pagination-link.is-active { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }

.error-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--space-5);
}

.error-card {
    width: min(100%, 520px);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    text-align: center;
}

.error-code {
    margin-bottom: var(--space-2);
    color: var(--color-primary);
    font-size: clamp(56px, 12vw, 96px);
    font-weight: 800;
    line-height: 1;
}

.error-card p {
    margin-bottom: var(--space-5);
    color: var(--color-text-light);
}

.kpi-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-top: 12px;

    align-items: stretch;
}

.kpi-grid--secondary {
    margin-top: 12px;
}

.kpi-card {
    display: flex;
    flex-direction: column;

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    padding: 14px;

    box-shadow: var(--shadow);

    color: inherit;

    text-decoration: none;

    min-height: 116px;

    position: relative;

    overflow: hidden;

    padding-right: 92px;

    height: 100%;
}

.kpi-card--link {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.kpi-card--link:hover,
.kpi-card--link:focus-visible {
    border-color: var(--color-primary);

    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.12);

    transform: translateY(-2px);
}

.kpi-card--link:focus-visible {
    outline: 2px solid var(--color-primary);

    outline-offset: 2px;
}

.kpi-title {
    color: var(--color-primary);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    margin-bottom: 10px;
}

.kpi-value {
    display: block;

    font-size: 34px;

    font-weight: 700;

    line-height: 1;
}

.kpi-values {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kpi-metric + .kpi-metric {
    border-left: 1px solid var(--color-border);

    padding-left: 12px;
}

.kpi-metric:first-child {
    padding-right: 12px;
}

.kpi-label {
    display: block;

    margin-top: 7px;

    color: var(--color-text-light);

    font-size: 12px;
}

.kpi-value--unavailable {
    color: var(--color-text-light);
}

.kpi-footer {
    margin-top: auto;
    padding-top: 12px;

    font-size: 13px;

    color: var(--color-text-light);

    max-width: 100%;
}

.kpi-card--compact {
    min-height: 96px;
}

.kpi-card--tall {
    min-height: 168px;
}

.kpi-card--feature {
    display: flex;
    flex-direction: column;
}

.kpi-card__icon {
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(37, 99, 235, 0.11);
    color: rgba(37, 99, 235, 0.85);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
    pointer-events: none;
}

.kpi-card__icon .iis-ui-icon {
    width: 1.85rem;
    height: 1.85rem;
}

.kpi-card__icon--soft {
    background: rgba(15, 23, 42, 0.045);
    color: rgba(30, 64, 175, 0.84);
}

.kpi-card-divider {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

.attendance-filter-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.1fr) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.attendance-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attendance-filter-actions {
    display: flex;
    align-items: end;
    gap: 8px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .attendance-filter-row {
        grid-template-columns: 1fr;
    }

    .attendance-filter-actions {
        align-items: stretch;
        white-space: normal;
    }
}

@media (max-width: 1050px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 580px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .kpi-card {
        padding-right: 14px;
        padding-bottom: 84px;
    }
}

/* ===========================
   TABLE
=========================== */

.table {
    width: 100%;

    border-collapse: collapse;
}

.table th {
    text-align: left;

    padding: 7px 9px;

    border-bottom: 2px solid var(--color-border);
}

.table td {
    padding: 7px 9px;

    border-bottom: 1px solid var(--color-border);
}

.table tbody tr:hover {
    background: #f8fafc;
}

.systematization-table {
    width: min(100%, 1240px);
    table-layout: fixed;
    font-size: 15px;
    line-height: 1.2;
}

.systematization-table th,
.systematization-table td {
    padding: 2px 3px;
    overflow-wrap: anywhere;
}

.systematization-table th {
    font-size: 15px;
    white-space: normal;
}

.systematization-col-article { width: 7%; }
.systematization-col-name { width: 37%; }
.systematization-col-executors { width: 7%; }
.systematization-col-education { width: 16%; }
.systematization-col-profile { width: 27%; }
.systematization-col-group { width: 6%; }

.systematization-table th:nth-child(3),
.systematization-table td:nth-child(3),
.systematization-table th:nth-child(6),
.systematization-table td:nth-child(6) {
    text-align: center;
}

.systematization-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.systematization-heading h2,
.systematization-heading p {
    margin-bottom: 2px;
}

.systematization-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 1;
}

.systematization-toolbar .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.systematization-search {
    width: min(260px, 24vw);
}

.systematization-organization {
    width: min(310px, 27vw);
}

.systematization-status {
    min-height: 18px;
    margin-bottom: 4px;
    color: var(--color-text-light);
    font-size: 12px;
    text-align: right;
}

.systematization-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.systematization-per-page {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    width: max-content;
    color: var(--color-text-light);
    white-space: nowrap;
}

.systematization-per-page-select {
    flex: 0 0 68px;
    width: 68px !important;
    min-width: 68px;
    max-width: 68px;
    min-height: 32px;
    padding: 4px 24px 4px 8px;
}

.systematization-table tbody.is-loading {
    opacity: .45;
}

.systematization-group-row td {
    padding: 0 !important;
}

.systematization-group-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 5px 7px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.systematization-group-toggle:hover,
.systematization-group-toggle:focus-visible {
    background: rgba(15, 76, 129, .08);
}

.systematization-group-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.systematization-group-indicator {
    display: inline-block;
    font-size: 10px;
    transition: transform .15s ease;
}

.systematization-group-stats {
    margin-left: auto;
    color: var(--color-text-light);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.systematization-group-row.is-collapsed .systematization-group-indicator {
    transform: rotate(-90deg);
}

.systematization-empty {
    padding: 18px 8px !important;
    color: var(--color-text-light);
    text-align: center !important;
}

.employee-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.employee-page-heading h2,
.employee-page-heading p {
    margin-bottom: 2px;
}

.employee-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 1;
}

.employee-toolbar .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.employee-search {
    width: min(360px, 32vw);
}

.employee-search-status {
    min-height: 18px;
    margin-bottom: 4px;
    color: var(--color-text-light);
    font-size: 12px;
    text-align: right;
}

.employee-table {
    table-layout: fixed;
}

.employee-table tbody.is-loading {
    opacity: .45;
}

.employee-col-photo { width: 62px; }
.employee-col-personal { width: 13%; }
.employee-col-name { width: 24%; }
.employee-col-rbsis { width: 8%; }
.employee-col-position { width: 34%; }
.employee-col-email { width: 21%; }

.employee-group-row td {
    padding: 0 !important;
}

.employee-group-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.employee-group-toggle:hover,
.employee-group-toggle:focus-visible {
    background: rgba(15, 76, 129, .08);
}

.employee-group-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.employee-group-indicator {
    display: inline-block;
    font-size: 10px;
    transition: transform .15s ease;
}

.employee-group-row.is-collapsed .employee-group-indicator {
    transform: rotate(-90deg);
}

.employee-row.is-organization-manager td {
    background: #fffdf2;
}

.employee-manager-badge {
    display: inline-flex;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.employee-empty {
    padding: 28px 8px !important;
    color: var(--color-text-light);
    text-align: center !important;
}

@media (max-width: 900px) {
    .employee-page-header,
    .employee-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .employee-search {
        width: 100%;
    }

    .employee-list-card {
        overflow-x: auto;
    }

    .employee-table {
        min-width: 900px;
    }
}

.systematization-delete-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1100px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    background: #fff7f7;
}

.systematization-delete-panel p {
    margin: 2px 0 0;
    color: var(--color-text-light);
    font-size: 12px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 1100px) {
    .systematization-page-header,
    .systematization-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .systematization-search,
    .systematization-organization {
        width: min(100%, 300px);
    }
}

@media (max-width: 700px) {
    .systematization-page-header,
    .systematization-toolbar,
    .systematization-delete-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .systematization-search,
    .systematization-organization {
        width: 100%;
    }

    .systematization-pagination-bar {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ===========================
   TREE
=========================== */

.tree {
    list-style: none;

    margin-left: 20px;

    padding-left: 20px;

    border-left: 1px solid #ddd;
}

.tree li {
    margin: 6px 0;
}

/* ==========================================================
   BADGES
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    padding:4px 10px;

    border-radius:999px;

    font-size:10px;

    font-weight:500;

    line-height:1;

    white-space:nowrap;

}

/* ---------- USER STATUS ---------- */

.badge-success{

    background:#dcfce7;

    color:#166534;

}

.badge-primary{

    background:#9bb8f5;

}

.badge-warning{

    background:#fef3c7;

    color:#92400e;

}

.badge-danger{

    background:#fee2e2;

    color:#991b1b;

}

.badge-info{

    background:#0891b2;

}

.badge-secondary{

    background:#e5e7eb;

    color:#374151;

}