/* Общие стили */
* {
    box-sizing: border-box;
    margin: 3;
    padding: 3;
}

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;
    --secondary: #64748b;
    --success: #10b981;
    --background: #f8fafc;
    --surface: #ffffff;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-light: #64748b;
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
    --radius: 8px;
    --radius-lg: 12px;
}

body {
    color: rgb(205, 32, 44);
    font-size: 14px;
    font-family: arial;
    background-color: #414141;
	line-height:21px;
	margin:0;
	padding:0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* Заголовки */
h1 {  		
    color: #E21A1A;
    text-align: center;
    margin-bottom: 10px;
}

h2 {
    font-family: arial;
    font-weight: Bold;
    margin: 10px;
    color: #E21A1A;
    text-align: center;
}

h3 {
    font-family: arial;
    font-size: 18px;	  
    font-weight: Bold;
    color: #E21A1A;
    margin: 4px 10px 2px 14px;
}

h4 {
    font-family: arial;
    font-weight: normal;
    font-size: 14px;		
    margin: 4px;
    color: #000000;
}

h5 {
    font-family: arial;
    font-weight: normal;
    margin: 5px;
    color: #000000;
}

h6 {
    font-family: arial;
    font-size: 14px;	
    font-weight: normal;
    margin: 6px 6px 2px 36px;
    color: #ffffff;
}

h7 {
    font-family: arial;
    font-size: 16px;	
    font-weight: bold;
    margin: 6px 6px 2px 6px;
    color: #000000;
}

h8 {
    font-family: arial;
    font-size: 14px;	
    font-weight: normal;
    margin: 6px 6px 2px 6px;
    color: #ffffff;
}

h9 {
    font-family: arial;
    font-size: 16px;	
    font-weight: normal;
    margin: 6px 6px 2px 6px;
    color: #ffff00;
}

h10 {
    font-family: arial;
    font-weight: normal;
    font-size: 12px;		
    margin: 2px;
    color: #000000;
}

h11 {
    font-family: arial;
    font-size: 24px;	
    font-weight: normal;
    margin: 6px 6px 2px 6px;
    color: #ffff00;
    font-weight: Bold;
    text-align: center;
}

.title, .zag, .zag1, .zag2, .zag3, .zag4, .zag5, .zag7, .zag8, .zag26, .zag23, .zag24, .zag27, .zag217, .zag216, .zag9, .zag10, .zag11, .zag12, .zag13, .zag14, .zag15, .zag16, .zag17, .zag18 {
    color: #2c3e50;
    font-size: 24px;
    text-align: center;
    margin: 20px 0;
    font-weight: bold;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--primary);
    border-radius: 2px;
}

/* Классы */
.copyright {
    font-size: 11px;
    padding: 0 0 0 10px;
    color: #ffffff;
}

.top {
    padding: 3px 0 0 55px;
    font-style: italic;
    margin: 0 0 10px 0;
    color: rgb(205, 32, 44);
}

.content {
    background: #eee;
    border-radius: 5px;
    border-top: #1486ba 5px solid;
    padding: 7px;
    margin: 0 0 5px 0;
    vertical-align: middle;
}

.container {
    max-width: 97%;
    margin: 10 auto;
    padding: 2px;
}

.form {
    border: 5px solid;
    text-align: center;
    vertical-align: middle;
}

.design {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    background: #eee;
    background: linear-gradient(top, #eee 0%, #98bede 100%);
    border-radius: 8px;
    border: 1px solid #1486ba;
    font: 24px/1 Arial, sans-serif;
    color: #CD202C;
    margin: 10px;
    height: 200px;
    overflow-y: auto;
    width: 90%;
}

.design:hover {
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    background: linear-gradient(to bottom, #eee, #eee);
}

.hidden2 {
    display: none;
}

/* Таблицы */
table.details {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    color: #212121;
    vertical-align: middle;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

table.details caption {
    font-weight: bold;
    padding: 3px;
    color: #212121;
}

table.details td,
table.details th {
    border: #aaa 1px solid;
    padding: 1px 3px;
    vertical-align: top;
    
}

table.details th {
    background: #2c3e50;
    color: white;
    padding: 5px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

table.details tr:hover {
    background-color: #f9f9f9;
}

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

table.details a {
    color: #2980b9;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

table.details a:hover {
    color: #1c5a7a;
    text-decoration: underline;
}

table.details img {
    vertical-align: middle;
    transition: transform 0.3s ease;
    border-radius: 4px;
    padding: 3px;
    background: #f8f9fa;
}

table.details img:hover {
    transform: scale(1.1);
    background: #e9ecef;
}

/* Специальные таблицы */
.employees-table {
    width: 100%;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 40px;
}

.employees-table thead {
    background: #f8fafc;
}

.employees-table th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    color: white;
    border-bottom: 2px solid var(--border);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background-color 0.2s;
    user-select: none;
}

.employees-table th:hover {
    background-color: rgba(37, 99, 235, 0.9) !important;
}

.employees-table th:nth-child(1),
.employees-table th:nth-child(2),
.employees-table th:nth-child(3),
.employees-table th:nth-child(4),
.employees-table th:nth-child(5),
.employees-table th:nth-child(6) {
    background-color: #2563eb;
    text-align: center;
}

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

.employees-table tbody tr {
    transition: background-color 0.2s;
}

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

/* Бригады */
.brigade-nnovgorod {
    background-color: #f8f9fa;
}

.brigade-kazan {
    background-color: #e9ecef;
}

.brigade-izhevsk {
    background-color: #dee2e6;
}

.brigade-nnovgorod:hover {
    background-color: #e9ecef !important;
}

.brigade-kazan:hover {
    background-color: #dee2e6 !important;
}

.brigade-izhevsk:hover {
    background-color: #ced4da !important;
}

/* Статистика */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 6px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

/* Бригады секция */
.brigades-section {
    margin-bottom: 40px;
}

.brigades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.brigade-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 6px;
    border: 1px solid var(--border);
}

.brigade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.brigade-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
}

.brigade-count {
    background: var(--primary-light);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Employee row */
.employee-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.employee-avatar {
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.employee-details {
    flex: 1;
}

.employee-name {
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s;
}

.employee-name:hover {
    color: var(--primary);
}

.employee-position {
    font-size: 0.875rem;
    color: var(--text-light);
}

/* Кнопки */
button, .button {
    background: linear-gradient(to bottom, #3498db, #2980b9);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    margin: 5px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

button:hover, .button:hover {
    background: linear-gradient(to bottom, #2980b9, #1c5a7a);
    transform: translateY(-2px);
    box-shadow: 0 5px 8px rgba(0,0,0,0.3);
}

button:active, .button:active {
    background: rgb(76,88,40);
}

.button_disabled {
    color: #fff;
    background: rgb(0,102,161);
    border: 2px solid #575936;
    border-radius: 15px;
    cursor: pointer;
    padding: 10px;
    font-weight: bold;
    width: 200px;
    height: 40px;
}

.button_disabled:hover {
    background: rgb(51,217,255);
    color: black;
}

.button_disabled:active {
    background: rgb(76,88,40);
}

.button_enabled {
    color: #000;
    background: rgb(226, 26, 26);
    border: 2px solid #8B0000;
    border-radius: 15px;
    cursor: pointer;
    padding: 10px;
    color: white;
    font-weight: bold;
    width: 200px;
    height: 40px;
}

.button_enabled:hover {
    background: rgb(232, 95, 76);
    color: black;
}

.button_enabled:active {
    background: rgb(152, 15, 0);
}

.btn {
    padding: 10px 20px;
    border-radius: var(--radius);
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

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

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

.btn-outline {
    background: white;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-outline:hover {
    background: #f8fafc;
}

.btn-success {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    color: white;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(76, 175, 80, 0.3);
}

.btn-success:active {
    transform: translateY(0);
}

.btn-danger {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: white;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);
}

.btn-danger:active {
    transform: translateY(0);
}

.edit-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-light);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    text-decoration: none;
    margin-left: 8px;
}

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

.delete-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
    transition: all 0.2s;
}

.delete-btn:hover {
    background: #c82333;
    transform: translateY(-1px);
}

.delete-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
}

.btn-download {
    background: #28a745;
    color: white;
}

.btn-download:hover {
    background: #218838;
    color: white;
    transform: translateY(-1px);
}

.btn-open {
    background: #17a2b8;
    color: white;
}

.btn-open:hover {
    background: #138496;
    color: white;
    transform: translateY(-1px);
}

/* Формы */
.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    color: #495057;
    font-size: 15px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}

.form-control, select, .date-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    transition: border-color 0.2s;
    background: white;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.form-control:focus, select:focus, .date-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.date-input-container {
    position: relative;
}

.date-input:hover {
    border-color: #adb5bd;
}

.date-hint {
    font-size: 13px;
    color: #868e96;
    margin-top: 6px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-actions {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
}

.form-note {
    font-size: 14px;
    color: #6c757d;
    text-align: center;
    line-height: 1.5;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 8px;
}

.form-section {
    margin-top: 24px;
}

inputEnter[type=text], inputEnter[type=password] {
    width: 10%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

buttonEnter {
    background-color: #1486ba;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 10%;
}

.month-selector {
    margin-bottom: 20px;
}

.table-container {
    display: none;
    margin-top: 20px;
}

.visible {
    display: block;
}

/* Цветовые классы для статусов */
.vihodnoy { background-color: #1486ba; color: #ffffff; }
.holiday { background-color: #1486ba; color: #ffffff; }
.otpusk { background-color: #90EE90; color: #000000; }
.soder{ background-color: #FF0000; color: #ffffff; }
.bol{ background-color: #d1ecf1; color: #000000; }
.dezhur{ background-color: #D2B48C; color: #000000; }
.otgul{ background-color: #9ACD32; color: #000000; }  
.gtpshka{ background-color: #008000; color: #ffffff; }
.dopnik{ background-color: #FFE4B5; color: #000000; }
.komand{ background-color: #FFE4B5; color: #000000; }
.udal{ background-color: #DDA0DD; color: #000000; }


/* Стили для типов работ */
.plan-task {
    background-color: #fffacd;
    padding: 2px 5px;
    margin: 1px 0;
    border-radius: 3px;
    display: inline-block;
}

.akb-task {
    background-color: #e6f3ff;
    padding: 2px 5px;
    margin: 1px 0;
    border-radius: 3px;
    display: inline-block;
}

.aupt-task {
    background-color: #ffe6e6;
    padding: 2px 5px;
    margin: 1px 0;
    border-radius: 3px;
    display: inline-block;
}

.kond-task {
    background-color: #e6ffe6;
    padding: 2px 5px;
    margin: 1px 0;
    border-radius: 3px;
    display: inline-block;
}

.task-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.week-cell {
    vertical-align: top;
    padding: 3px !important;
}

.vacation-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vacation-badge {
    background: #f0f9ff;
    color: #0369a1;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8125rem;
    border: 1px solid #bae6fd;
}

/* ============================================
   МОДАЛЬНЫЕ ОКНА (OVERLAY) - ТЕМНЫЕ ТОНА
   ============================================ */
#overlay,
#overlay1,
#overlay2,
#overlay3,
#overlay4,  
#overlay5,
#overlay6,
#overlay7,
#overlay8,
#overlay9,
#overlay10,  
#overlay11,
#overlay12,
#overlay13,
#overlay14,
#overlay15,
#overlay16,
#overlay216,
#overlay24,
#overlay27,
#overlay217,
#overlay17,
#overlay18,
#overlay26,
#overlay23,
#overlay-new-work {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s ease-out;
    overflow: auto;
}

#overlay-new-work {
    z-index: 10000;
}

/* ============================================
   POPUP - ТЕМНЫЕ ТОНА
   ============================================ */
.popup,
.popup1,
.popup2,
.popup3,
.popup4,
.popup5,
.popup6,
.popup7,
.popup8,
.popup9,
.popup10,
.popup11,
.popup12,
.popup13,
.popup14,
.popup15,
.popup16,
.popup216,
.popup24,
.popup27,
.popup217,
.popup17,
.popup26,
.popup23,
.popup18 {
    background: #1e1e2f !important;
    border: 1px solid #3a3a5a !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    animation: popupAppearDark 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    padding: 25px;
    color: #e0e0e0 !important;
}

@keyframes popupAppearDark {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Стили для popup17 (плановые работы) в темных тонах */
.popup17 .popup-header {
    background: transparent !important;
    border-bottom: 2px solid #3a3a5a !important;
    padding: 0 0 15px 0 !important;
    margin-bottom: 15px !important;
}

.popup17 .popup-header h2 {
    color: #fbbf24 !important;
    font-size: 20px !important;
}

.popup17 .station-info h3 {
    color: #93c5fd !important;
}

.popup17 .current-date-info .date-display {
    color: #4ade80 !important;
    font-weight: 500;
}

.popup17 .current-performers-info {
    background: #1a1a2f !important;
    border: 1px solid #3a3a5a !important;
    border-radius: 6px !important;
    color: #d0d0e0 !important;
}

.popup17 .current-time-info {
    background: #1a3a2a !important;
    border-left-color: #4ade80 !important;
}

.popup17 .form-label {
    color: #fbbf24 !important;
}

.popup17 .date-input {
    background: #1a1a2f !important;
    color: #d0d0e0 !important;
    border: 2px solid #3a3a5a !important;
}

.popup17 .date-hint {
    color: #6c757d !important;
}

.popup17 .form-note {
    color: #a0aec0 !important;
}

/* Стили для отчетов (overlay7, overlay18, overlay9, overlay10, overlay12, overlay24, overlay23) */
.popup7 .zag7,
.popup18 .zag8,
.popup9 .zag9,
.popup10 .zag10,
.popup12 .zag12,
.popup24 .zag24,
.popup23 .zag23,
.popup7 .zag7 h3,
.popup18 .zag8 h3,
.popup9 .zag9 h3,
.popup10 .zag10 h3,
.popup12 .zag12 h3,
.popup24 .zag24 h3,
.popup23 .zag23 h3 {
    color: #fbbf24 !important;
}

.popup7 h7,
.popup18 h7,
.popup9 h7,
.popup10 h7,
.popup12 h7,
.popup24 h7,
.popup23 h7 {
    color: #fbbf24 !important;
}

.popup7 select,
.popup18 select,
.popup9 select,
.popup10 select,
.popup12 select,
.popup24 select,
.popup23 select,
.popup7 input[type="date"],
.popup18 input[type="date"],
.popup9 input[type="date"],
.popup10 input[type="date"],
.popup12 input[type="date"],
.popup24 input[type="date"],
.popup23 input[type="date"],
.popup7 input[type="number"],
.popup18 input[type="number"],
.popup9 input[type="number"],
.popup10 input[type="number"],
.popup12 input[type="number"],
.popup24 input[type="number"],
.popup23 input[type="number"],
.popup7 textarea,
.popup18 textarea,
.popup9 textarea,
.popup10 textarea,
.popup12 textarea,
.popup24 textarea,
.popup23 textarea {
    background: #1a1a2f !important;
    color: #d0d0e0 !important;
    border: 2px solid #3a3a5a !important;
}

/* Стили для справки (overlay11) */
.popup11 .zag11 {
    color: #fbbf24 !important;
}

.popup11 h4,
.popup11 strong {
    color: #fbbf24 !important;
}

.popup11 li {
    color: #a0c4e8 !important;
}

.popup11 ul li {
    color: #a0c4e8 !important;
}

/* ============================================
   ЗАГОЛОВКИ В ТЕМНЫХ ТОНАХ
   ============================================ */
.zag,
.zag1,
.zag2,
.zag3,
.zag4,
.zag5,
.zag7,
.zag8,
.zag9,
.zag10,
.zag11,
.zag12,
.zag13,
.zag14,
.zag15,
.zag16,
.zag17,
.zag18,
.zag23,
.zag24,
.zag26,
.zag27,
.zag216,
.zag217 {
    color: #fbbf24 !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    margin: 0 0 15px 0 !important;
    border-bottom: 2px solid #3a3a5a !important;
    padding-bottom: 10px !important;
}

.zag h3,
.zag2 h3,
.zag3 h3,
.zag4 h3,
.zag5 h3,
.zag7 h3,
.zag8 h3,
.zag9 h3,
.zag10 h3,
.zag11 h3,
.zag12 h3,
.zag13 h3,
.zag14 h3,
.zag15 h3,
.zag16 h3,
.zag17 h3,
.zag18 h3,
.zag23 h3,
.zag24 h3,
.zag26 h3,
.zag27 h3,
.zag216 h3,
.zag217 h3 {
    color: #93c5fd !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    margin: 5px 0 0 0 !important;
}

/* ============================================
   КНОПКА ЗАКРЫТИЯ В ТЕМНЫХ ТОНАХ
   ============================================ */
.popup input[type="button"].close,
.popup2 input[type="button"].close,
.popup3 input[type="button"].close,
.popup4 input[type="button"].close4,
.popup5 input[type="button"].close5,
.popup7 input[type="button"].close,
.popup9 input[type="button"].close9,
.popup10 input[type="button"].close10,
.popup11 input[type="button"].close11,
.popup12 input[type="button"].close12,
.popup13 input[type="button"].close13,
.popup14 input[type="button"].close14,
.popup15 input[type="button"].close15,
.popup16 input[type="button"].close16,
.popup17 input[type="button"].close17,
.popup18 input[type="button"].close18,
.popup23 input[type="button"].close23,
.popup24 input[type="button"].close24,
.popup26 input[type="button"].close26,
.popup27 input[type="button"].close27,
.popup216 input[type="button"].close216,
.popup217 input[type="button"].close217,
.close,
.close1,
.close2,
.close3,
.close4,
.close5,
.close6,
.close7,
.close8,
.close9,
.close10,
.close11,
.close12,
.close13,
.close14,
.close15,
.close16,
.close216,
.close24,
.close27,
.close217,
.close17,
.close26,
.close23,
.close18,
.close-btn,
.popup-close {
    background: #dc3545 !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.popup input[type="button"].close:hover,
.popup2 input[type="button"].close:hover,
.popup3 input[type="button"].close:hover,
.popup4 input[type="button"].close4:hover,
.popup5 input[type="button"].close5:hover,
.popup7 input[type="button"].close:hover,
.popup9 input[type="button"].close9:hover,
.popup10 input[type="button"].close10:hover,
.popup11 input[type="button"].close11:hover,
.popup12 input[type="button"].close12:hover,
.popup13 input[type="button"].close13:hover,
.popup14 input[type="button"].close14:hover,
.popup15 input[type="button"].close15:hover,
.popup16 input[type="button"].close16:hover,
.popup17 input[type="button"].close17:hover,
.popup18 input[type="button"].close18:hover,
.popup23 input[type="button"].close23:hover,
.popup24 input[type="button"].close24:hover,
.popup26 input[type="button"].close26:hover,
.popup27 input[type="button"].close27:hover,
.popup216 input[type="button"].close216:hover,
.popup217 input[type="button"].close217:hover,
.close:hover,
.close1:hover,
.close2:hover,
.close3:hover,
.close4:hover,
.close5:hover,
.close6:hover,
.close7:hover,
.close8:hover,
.close9:hover,
.close10:hover,
.close11:hover,
.close12:hover,
.close13:hover,
.close14:hover,
.close15:hover,
.close16:hover,
.close216:hover,
.close24:hover,
.close27:hover,
.close217:hover,
.close17:hover,
.close26:hover,
.close23:hover,
.close18:hover,
.close-btn:hover,
.popup-close:hover {
    background: #c82333 !important;
    transform: scale(1.1) !important;
}

/* ============================================
   КНОПКИ В ФОРМАХ - ТЕМНЫЕ ТОНА
   ============================================ */
.popup button,
.popup2 button,
.popup3 button,
.popup4 button,
.popup5 button,
.popup7 button,
.popup9 button,
.popup10 button,
.popup11 button,
.popup12 button,
.popup13 button,
.popup14 button,
.popup15 button,
.popup16 button,
.popup17 button,
.popup18 button,
.popup23 button,
.popup24 button,
.popup26 button,
.popup27 button,
.popup216 button,
.popup217 button {
    background: #2563eb !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}

.popup button:hover,
.popup2 button:hover,
.popup3 button:hover,
.popup4 button:hover,
.popup5 button:hover,
.popup7 button:hover,
.popup9 button:hover,
.popup10 button:hover,
.popup11 button:hover,
.popup12 button:hover,
.popup13 button:hover,
.popup14 button:hover,
.popup15 button:hover,
.popup16 button:hover,
.popup17 button:hover,
.popup18 button:hover,
.popup23 button:hover,
.popup24 button:hover,
.popup26 button:hover,
.popup27 button:hover,
.popup216 button:hover,
.popup217 button:hover {
    background: #1d4ed8 !important;
    transform: translateY(-1px) !important;
}

.popup button:active,
.popup2 button:active,
.popup3 button:active,
.popup4 button:active,
.popup5 button:active,
.popup7 button:active,
.popup9 button:active,
.popup10 button:active,
.popup11 button:active,
.popup12 button:active,
.popup13 button:active,
.popup14 button:active,
.popup15 button:active,
.popup16 button:active,
.popup17 button:active,
.popup18 button:active,
.popup23 button:active,
.popup24 button:active,
.popup26 button:active,
.popup27 button:active,
.popup216 button:active,
.popup217 button:active {
    transform: translateY(0px) !important;
}

/* ============================================
   ПОЛЯ ВВОДА - ТЕМНЫЕ ТОНА
   ============================================ */
.popup input[type="text"],
.popup input[type="date"],
.popup input[type="time"],
.popup input[type="number"],
.popup input[type="datetime-local"],
.popup2 input[type="text"],
.popup2 input[type="date"],
.popup2 input[type="time"],
.popup2 input[type="number"],
.popup2 input[type="datetime-local"],
.popup3 input[type="text"],
.popup3 input[type="date"],
.popup3 input[type="time"],
.popup3 input[type="number"],
.popup3 input[type="datetime-local"],
.popup4 input[type="text"],
.popup4 input[type="date"],
.popup4 input[type="time"],
.popup4 input[type="number"],
.popup4 input[type="datetime-local"],
.popup5 input[type="text"],
.popup5 input[type="date"],
.popup5 input[type="time"],
.popup5 input[type="number"],
.popup5 input[type="datetime-local"],
.popup7 input[type="text"],
.popup7 input[type="date"],
.popup7 input[type="time"],
.popup7 input[type="number"],
.popup7 input[type="datetime-local"],
.popup9 input[type="text"],
.popup9 input[type="date"],
.popup9 input[type="time"],
.popup9 input[type="number"],
.popup9 input[type="datetime-local"],
.popup10 input[type="text"],
.popup10 input[type="date"],
.popup10 input[type="time"],
.popup10 input[type="number"],
.popup10 input[type="datetime-local"],
.popup12 input[type="text"],
.popup12 input[type="date"],
.popup12 input[type="time"],
.popup12 input[type="number"],
.popup12 input[type="datetime-local"],
.popup13 input[type="text"],
.popup13 input[type="date"],
.popup13 input[type="time"],
.popup13 input[type="number"],
.popup13 input[type="datetime-local"],
.popup14 input[type="text"],
.popup14 input[type="date"],
.popup14 input[type="time"],
.popup14 input[type="number"],
.popup14 input[type="datetime-local"],
.popup15 input[type="text"],
.popup15 input[type="date"],
.popup15 input[type="time"],
.popup15 input[type="number"],
.popup15 input[type="datetime-local"],
.popup16 input[type="text"],
.popup16 input[type="date"],
.popup16 input[type="time"],
.popup16 input[type="number"],
.popup16 input[type="datetime-local"],
.popup17 input[type="text"],
.popup17 input[type="date"],
.popup17 input[type="time"],
.popup17 input[type="number"],
.popup17 input[type="datetime-local"],
.popup18 input[type="text"],
.popup18 input[type="date"],
.popup18 input[type="time"],
.popup18 input[type="number"],
.popup18 input[type="datetime-local"],
.popup23 input[type="text"],
.popup23 input[type="date"],
.popup23 input[type="time"],
.popup23 input[type="number"],
.popup23 input[type="datetime-local"],
.popup24 input[type="text"],
.popup24 input[type="date"],
.popup24 input[type="time"],
.popup24 input[type="number"],
.popup24 input[type="datetime-local"],
.popup26 input[type="text"],
.popup26 input[type="date"],
.popup26 input[type="time"],
.popup26 input[type="number"],
.popup26 input[type="datetime-local"],
.popup27 input[type="text"],
.popup27 input[type="date"],
.popup27 input[type="time"],
.popup27 input[type="number"],
.popup27 input[type="datetime-local"],
.popup216 input[type="text"],
.popup216 input[type="date"],
.popup216 input[type="time"],
.popup216 input[type="number"],
.popup216 input[type="datetime-local"],
.popup217 input[type="text"],
.popup217 input[type="date"],
.popup217 input[type="time"],
.popup217 input[type="number"],
.popup217 input[type="datetime-local"] {
    background: #1a1a2f !important;
    color: #d0d0e0 !important;
    border: 2px solid #3a3a5a !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.popup input[type="text"]:focus,
.popup input[type="date"]:focus,
.popup input[type="time"]:focus,
.popup input[type="number"]:focus,
.popup2 input[type="text"]:focus,
.popup2 input[type="date"]:focus,
.popup2 input[type="time"]:focus,
.popup2 input[type="number"]:focus,
.popup3 input[type="text"]:focus,
.popup3 input[type="date"]:focus,
.popup3 input[type="time"]:focus,
.popup3 input[type="number"]:focus,
.popup4 input[type="text"]:focus,
.popup4 input[type="date"]:focus,
.popup4 input[type="time"]:focus,
.popup4 input[type="number"]:focus,
.popup5 input[type="text"]:focus,
.popup5 input[type="date"]:focus,
.popup5 input[type="time"]:focus,
.popup5 input[type="number"]:focus,
.popup7 input[type="text"]:focus,
.popup7 input[type="date"]:focus,
.popup7 input[type="time"]:focus,
.popup7 input[type="number"]:focus,
.popup9 input[type="text"]:focus,
.popup9 input[type="date"]:focus,
.popup9 input[type="time"]:focus,
.popup9 input[type="number"]:focus,
.popup10 input[type="text"]:focus,
.popup10 input[type="date"]:focus,
.popup10 input[type="time"]:focus,
.popup10 input[type="number"]:focus,
.popup12 input[type="text"]:focus,
.popup12 input[type="date"]:focus,
.popup12 input[type="time"]:focus,
.popup12 input[type="number"]:focus,
.popup13 input[type="text"]:focus,
.popup13 input[type="date"]:focus,
.popup13 input[type="time"]:focus,
.popup13 input[type="number"]:focus,
.popup14 input[type="text"]:focus,
.popup14 input[type="date"]:focus,
.popup14 input[type="time"]:focus,
.popup14 input[type="number"]:focus,
.popup15 input[type="text"]:focus,
.popup15 input[type="date"]:focus,
.popup15 input[type="time"]:focus,
.popup15 input[type="number"]:focus,
.popup16 input[type="text"]:focus,
.popup16 input[type="date"]:focus,
.popup16 input[type="time"]:focus,
.popup16 input[type="number"]:focus,
.popup17 input[type="text"]:focus,
.popup17 input[type="date"]:focus,
.popup17 input[type="time"]:focus,
.popup17 input[type="number"]:focus,
.popup18 input[type="text"]:focus,
.popup18 input[type="date"]:focus,
.popup18 input[type="time"]:focus,
.popup18 input[type="number"]:focus,
.popup23 input[type="text"]:focus,
.popup23 input[type="date"]:focus,
.popup23 input[type="time"]:focus,
.popup23 input[type="number"]:focus,
.popup24 input[type="text"]:focus,
.popup24 input[type="date"]:focus,
.popup24 input[type="time"]:focus,
.popup24 input[type="number"]:focus,
.popup26 input[type="text"]:focus,
.popup26 input[type="date"]:focus,
.popup26 input[type="time"]:focus,
.popup26 input[type="number"]:focus,
.popup27 input[type="text"]:focus,
.popup27 input[type="date"]:focus,
.popup27 input[type="time"]:focus,
.popup27 input[type="number"]:focus,
.popup216 input[type="text"]:focus,
.popup216 input[type="date"]:focus,
.popup216 input[type="time"]:focus,
.popup216 input[type="number"]:focus,
.popup217 input[type="text"]:focus,
.popup217 input[type="date"]:focus,
.popup217 input[type="time"]:focus,
.popup217 input[type="number"]:focus {
    border-color: #fbbf24 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15) !important;
}

/* ============================================
   SELECT - ТЕМНЫЕ ТОНА
   ============================================ */
.popup select,
.popup2 select,
.popup3 select,
.popup4 select,
.popup5 select,
.popup7 select,
.popup9 select,
.popup10 select,
.popup12 select,
.popup13 select,
.popup14 select,
.popup15 select,
.popup16 select,
.popup17 select,
.popup18 select,
.popup23 select,
.popup24 select,
.popup26 select,
.popup27 select,
.popup216 select,
.popup217 select {
    background: #1a1a2f !important;
    color: #d0d0e0 !important;
    border: 2px solid #3a3a5a !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    min-width: 150px;
    width: 100% !important;
    box-sizing: border-box !important;
}

.popup select:focus,
.popup2 select:focus,
.popup3 select:focus,
.popup4 select:focus,
.popup5 select:focus,
.popup7 select:focus,
.popup9 select:focus,
.popup10 select:focus,
.popup12 select:focus,
.popup13 select:focus,
.popup14 select:focus,
.popup15 select:focus,
.popup16 select:focus,
.popup17 select:focus,
.popup18 select:focus,
.popup23 select:focus,
.popup24 select:focus,
.popup26 select:focus,
.popup27 select:focus,
.popup216 select:focus,
.popup217 select:focus {
    border-color: #fbbf24 !important;
    outline: none !important;
}

.popup select option,
.popup2 select option,
.popup3 select option,
.popup4 select option,
.popup5 select option,
.popup7 select option,
.popup9 select option,
.popup10 select option,
.popup12 select option,
.popup13 select option,
.popup14 select option,
.popup15 select option,
.popup16 select option,
.popup17 select option,
.popup18 select option,
.popup23 select option,
.popup24 select option,
.popup26 select option,
.popup27 select option,
.popup216 select option,
.popup217 select option {
    background: #1a1a2f !important;
    color: #d0d0e0 !important;
}

/* ============================================
   TEXTAREA - ТЕМНЫЕ ТОНА
   ============================================ */
.popup textarea,
.popup2 textarea,
.popup3 textarea,
.popup4 textarea,
.popup5 textarea,
.popup7 textarea,
.popup9 textarea,
.popup10 textarea,
.popup12 textarea,
.popup13 textarea,
.popup14 textarea,
.popup15 textarea,
.popup16 textarea,
.popup17 textarea,
.popup18 textarea,
.popup23 textarea,
.popup24 textarea,
.popup26 textarea,
.popup27 textarea,
.popup216 textarea,
.popup217 textarea {
    background: #1a1a2f !important;
    color: #d0d0e0 !important;
    border: 2px solid #3a3a5a !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    resize: vertical !important;
    min-height: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.popup textarea:focus,
.popup2 textarea:focus,
.popup3 textarea:focus,
.popup4 textarea:focus,
.popup5 textarea:focus,
.popup7 textarea:focus,
.popup9 textarea:focus,
.popup10 textarea:focus,
.popup12 textarea:focus,
.popup13 textarea:focus,
.popup14 textarea:focus,
.popup15 textarea:focus,
.popup16 textarea:focus,
.popup17 textarea:focus,
.popup18 textarea:focus,
.popup23 textarea:focus,
.popup24 textarea:focus,
.popup26 textarea:focus,
.popup27 textarea:focus,
.popup216 textarea:focus,
.popup217 textarea:focus {
    border-color: #fbbf24 !important;
    outline: none !important;
}

/* ============================================
   ТАБЛИЦЫ В POPUP - ТЕМНЫЕ ТОНА
   ============================================ */
.popup table,
.popup2 table,
.popup3 table,
.popup4 table,
.popup5 table,
.popup7 table,
.popup9 table,
.popup10 table,
.popup12 table,
.popup13 table,
.popup14 table,
.popup15 table,
.popup16 table,
.popup17 table,
.popup18 table,
.popup23 table,
.popup24 table,
.popup26 table,
.popup27 table,
.popup216 table,
.popup217 table {
    color: #d0d0e0 !important;
    width: 100% !important;
    border-collapse: collapse !important;
}

.popup table th,
.popup2 table th,
.popup3 table th,
.popup4 table th,
.popup5 table th,
.popup7 table th,
.popup9 table th,
.popup10 table th,
.popup12 table th,
.popup13 table th,
.popup14 table th,
.popup15 table th,
.popup16 table th,
.popup17 table th,
.popup18 table th,
.popup23 table th,
.popup24 table th,
.popup26 table th,
.popup27 table th,
.popup216 table th,
.popup217 table th {
    color: #fbbf24 !important;
    background: #1a1a2f !important;
    padding: 8px 10px !important;
    text-align: center !important;
    border: 1px solid #3a3a5a !important;
}

.popup table td,
.popup2 table td,
.popup3 table td,
.popup4 table td,
.popup5 table td,
.popup7 table td,
.popup9 table td,
.popup10 table td,
.popup12 table td,
.popup13 table td,
.popup14 table td,
.popup15 table td,
.popup16 table td,
.popup17 table td,
.popup18 table td,
.popup23 table td,
.popup24 table td,
.popup26 table td,
.popup27 table td,
.popup216 table td,
.popup217 table td {
    color: #d0d0e0 !important;
    padding: 6px 10px !important;
    border: 1px solid #3a3a5a !important;
    background: #1e1e2f !important;
}

.popup table tr:nth-child(even) td,
.popup2 table tr:nth-child(even) td,
.popup3 table tr:nth-child(even) td,
.popup4 table tr:nth-child(even) td,
.popup5 table tr:nth-child(even) td,
.popup7 table tr:nth-child(even) td,
.popup9 table tr:nth-child(even) td,
.popup10 table tr:nth-child(even) td,
.popup12 table tr:nth-child(even) td,
.popup13 table tr:nth-child(even) td,
.popup14 table tr:nth-child(even) td,
.popup15 table tr:nth-child(even) td,
.popup16 table tr:nth-child(even) td,
.popup17 table tr:nth-child(even) td,
.popup18 table tr:nth-child(even) td,
.popup23 table tr:nth-child(even) td,
.popup24 table tr:nth-child(even) td,
.popup26 table tr:nth-child(even) td,
.popup27 table tr:nth-child(even) td,
.popup216 table tr:nth-child(even) td,
.popup217 table tr:nth-child(even) td {
    background: #151525 !important;
}

.popup table tr:hover td,
.popup2 table tr:hover td,
.popup3 table tr:hover td,
.popup4 table tr:hover td,
.popup5 table tr:hover td,
.popup7 table tr:hover td,
.popup9 table tr:hover td,
.popup10 table tr:hover td,
.popup12 table tr:hover td,
.popup13 table tr:hover td,
.popup14 table tr:hover td,
.popup15 table tr:hover td,
.popup16 table tr:hover td,
.popup17 table tr:hover td,
.popup18 table tr:hover td,
.popup23 table tr:hover td,
.popup24 table tr:hover td,
.popup26 table tr:hover td,
.popup27 table tr:hover td,
.popup216 table tr:hover td,
.popup217 table tr:hover td {
    background: #2a2a3f !important;
}

/* ============================================
   ССЫЛКИ В POPUP - ТЕМНЫЕ ТОНА
   ============================================ */
.popup a,
.popup2 a,
.popup3 a,
.popup4 a,
.popup5 a,
.popup7 a,
.popup9 a,
.popup10 a,
.popup12 a,
.popup13 a,
.popup14 a,
.popup15 a,
.popup16 a,
.popup17 a,
.popup18 a,
.popup23 a,
.popup24 a,
.popup26 a,
.popup27 a,
.popup216 a,
.popup217 a {
    color: #93c5fd !important;
    text-decoration: none !important;
}

.popup a:hover,
.popup2 a:hover,
.popup3 a:hover,
.popup4 a:hover,
.popup5 a:hover,
.popup7 a:hover,
.popup9 a:hover,
.popup10 a:hover,
.popup12 a:hover,
.popup13 a:hover,
.popup14 a:hover,
.popup15 a:hover,
.popup16 a:hover,
.popup17 a:hover,
.popup18 a:hover,
.popup23 a:hover,
.popup24 a:hover,
.popup26 a:hover,
.popup27 a:hover,
.popup216 a:hover,
.popup217 a:hover {
    color: #fbbf24 !important;
    text-decoration: underline !important;
}

/* ============================================
   ЧЕКБОКСЫ - ТЕМНЫЕ ТОНА
   ============================================ */
.popup input[type="checkbox"],
.popup2 input[type="checkbox"],
.popup3 input[type="checkbox"],
.popup4 input[type="checkbox"],
.popup5 input[type="checkbox"],
.popup7 input[type="checkbox"],
.popup9 input[type="checkbox"],
.popup10 input[type="checkbox"],
.popup12 input[type="checkbox"],
.popup13 input[type="checkbox"],
.popup14 input[type="checkbox"],
.popup15 input[type="checkbox"],
.popup16 input[type="checkbox"],
.popup17 input[type="checkbox"],
.popup18 input[type="checkbox"],
.popup23 input[type="checkbox"],
.popup24 input[type="checkbox"],
.popup26 input[type="checkbox"],
.popup27 input[type="checkbox"],
.popup216 input[type="checkbox"],
.popup217 input[type="checkbox"] {
    accent-color: #fbbf24 !important;
}

/* ============================================
   GTТП ТАБЛИЦА - ТЕМНЫЕ ТОНА
   ============================================ */
.gtp-dates-table input[type="checkbox"]:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.gtp-dates-table input[type="checkbox"]:disabled + label {
    color: #6c757d !important;
}

.gtp-dates-table th {
    color: #fbbf24 !important;
    background: #1a1a2f !important;
}

.gtp-dates-table td {
    color: #d0d0e0 !important;
    background: #1e1e2f !important;
}

.gtp-dates-table tr:nth-child(even) td {
    background: #1a1a2f !important;
}

.gtp-dates-table tr:nth-child(odd) td {
    background: #151525 !important;
}

/* ============================================
   БЛОКИ ИБП И КРК - ТЕМНЫЕ ТОНА
   ============================================ */
#ibp_block_content,
#krk_block_content {
    background: #1a2a3a !important;
    border-radius: 8px !important;
}

#ibp_block_content table,
#krk_block_content table {
    color: #d0d0e0 !important;
}

#ibp_block_content input,
#krk_block_content input,
#ibp_block_content textarea,
#krk_block_content textarea {
    background: #1a1a2f !important;
    color: #d0d0e0 !important;
    border: 2px solid #3a3a5a !important;
    border-radius: 6px !important;
}

#ibp_block_content td,
#krk_block_content td {
    color: #a0c4e8 !important;
}

#ibp_block_content small,
#krk_block_content small {
    color: #6c757d !important;
}

/* ============================================
   КАРТЫ ГТП В OVERLAY7 - ТЕМНЫЕ ТОНА
   ============================================ */
#gtp_cards_content {
    background: #1a1a2f !important;
}

#gtp_cards_content table th {
    color: #fbbf24 !important;
    background: #2a2a3f !important;
}

#gtp_cards_content table td {
    color: #d0d0e0 !important;
}

#gtp_cards_content table tr:nth-child(even) {
    background: #151525 !important;
}

#gtp_cards_content table tr:nth-child(odd) {
    background: #1a1a2f !important;
}

#gtp_cards_content table tr:hover {
    background: #2a2a3f !important;
}

/* ============================================
   ФАЙЛОВЫЙ ЗАГРУЗЧИК - ТЕМНЫЕ ТОНА
   ============================================ */
.popup .file-upload label,
.popup2 .file-upload label,
.popup3 .file-upload label,
.popup4 .file-upload label,
.popup5 .file-upload label,
.popup7 .file-upload label,
.popup9 .file-upload label,
.popup10 .file-upload label,
.popup12 .file-upload label,
.popup13 .file-upload label,
.popup14 .file-upload label,
.popup15 .file-upload label,
.popup16 .file-upload label,
.popup17 .file-upload label,
.popup18 .file-upload label,
.popup23 .file-upload label,
.popup24 .file-upload label,
.popup26 .file-upload label,
.popup27 .file-upload label,
.popup216 .file-upload label,
.popup217 .file-upload label {
    background: #2a2a3f !important;
    color: #d0d0e0 !important;
    border: 1px solid #3a3a5a !important;
    border-radius: 4px !important;
    padding: 4px 14px !important;
    cursor: pointer !important;
    display: inline-block !important;
}

.popup .file-upload label:hover,
.popup2 .file-upload label:hover,
.popup3 .file-upload label:hover,
.popup4 .file-upload label:hover,
.popup5 .file-upload label:hover,
.popup7 .file-upload label:hover,
.popup9 .file-upload label:hover,
.popup10 .file-upload label:hover,
.popup12 .file-upload label:hover,
.popup13 .file-upload label:hover,
.popup14 .file-upload label:hover,
.popup15 .file-upload label:hover,
.popup16 .file-upload label:hover,
.popup17 .file-upload label:hover,
.popup18 .file-upload label:hover,
.popup23 .file-upload label:hover,
.popup24 .file-upload label:hover,
.popup26 .file-upload label:hover,
.popup27 .file-upload label:hover,
.popup216 .file-upload label:hover,
.popup217 .file-upload label:hover {
    background: #3a3a5a !important;
}

.popup .file-hint,
.popup2 .file-hint,
.popup3 .file-hint,
.popup4 .file-hint,
.popup5 .file-hint,
.popup7 .file-hint,
.popup9 .file-hint,
.popup10 .file-hint,
.popup12 .file-hint,
.popup13 .file-hint,
.popup14 .file-hint,
.popup15 .file-hint,
.popup16 .file-hint,
.popup17 .file-hint,
.popup18 .file-hint,
.popup23 .file-hint,
.popup24 .file-hint,
.popup26 .file-hint,
.popup27 .file-hint,
.popup216 .file-hint,
.popup217 .file-hint {
    color: #6c757d !important;
    font-size: 11px !important;
}

.popup .file-name,
.popup2 .file-name,
.popup3 .file-name,
.popup4 .file-name,
.popup5 .file-name,
.popup7 .file-name,
.popup9 .file-name,
.popup10 .file-name,
.popup12 .file-name,
.popup13 .file-name,
.popup14 .file-name,
.popup15 .file-name,
.popup16 .file-name,
.popup17 .file-name,
.popup18 .file-name,
.popup23 .file-name,
.popup24 .file-name,
.popup26 .file-name,
.popup27 .file-name,
.popup216 .file-name,
.popup217 .file-name {
    color: #a0aec0 !important;
    font-size: 12px !important;
    margin-left: 8px !important;
}

/* ============================================
   УВЕДОМЛЕНИЯ - ТЕМНЫЕ ТОНА
   ============================================ */
.alert.success {
    background: #1a3a2a !important;
    color: #4ade80 !important;
    border: 1px solid #4ade8033 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}

.alert.error {
    background: #2a1a1a !important;
    color: #f87171 !important;
    border: 1px solid #dc3545 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}

/* ============================================
   ПОЛОСА ПРОКРУТКИ ДЛЯ POPUP
   ============================================ */
.popup::-webkit-scrollbar,
.popup2::-webkit-scrollbar,
.popup3::-webkit-scrollbar,
.popup4::-webkit-scrollbar,
.popup5::-webkit-scrollbar,
.popup7::-webkit-scrollbar,
.popup9::-webkit-scrollbar,
.popup10::-webkit-scrollbar,
.popup12::-webkit-scrollbar,
.popup13::-webkit-scrollbar,
.popup14::-webkit-scrollbar,
.popup15::-webkit-scrollbar,
.popup16::-webkit-scrollbar,
.popup17::-webkit-scrollbar,
.popup18::-webkit-scrollbar,
.popup23::-webkit-scrollbar,
.popup24::-webkit-scrollbar,
.popup26::-webkit-scrollbar,
.popup27::-webkit-scrollbar,
.popup216::-webkit-scrollbar,
.popup217::-webkit-scrollbar {
    width: 6px;
}

.popup::-webkit-scrollbar-track,
.popup2::-webkit-scrollbar-track,
.popup3::-webkit-scrollbar-track,
.popup4::-webkit-scrollbar-track,
.popup5::-webkit-scrollbar-track,
.popup7::-webkit-scrollbar-track,
.popup9::-webkit-scrollbar-track,
.popup10::-webkit-scrollbar-track,
.popup12::-webkit-scrollbar-track,
.popup13::-webkit-scrollbar-track,
.popup14::-webkit-scrollbar-track,
.popup15::-webkit-scrollbar-track,
.popup16::-webkit-scrollbar-track,
.popup17::-webkit-scrollbar-track,
.popup18::-webkit-scrollbar-track,
.popup23::-webkit-scrollbar-track,
.popup24::-webkit-scrollbar-track,
.popup26::-webkit-scrollbar-track,
.popup27::-webkit-scrollbar-track,
.popup216::-webkit-scrollbar-track,
.popup217::-webkit-scrollbar-track {
    background: #1a1a2f;
}

.popup::-webkit-scrollbar-thumb,
.popup2::-webkit-scrollbar-thumb,
.popup3::-webkit-scrollbar-thumb,
.popup4::-webkit-scrollbar-thumb,
.popup5::-webkit-scrollbar-thumb,
.popup7::-webkit-scrollbar-thumb,
.popup9::-webkit-scrollbar-thumb,
.popup10::-webkit-scrollbar-thumb,
.popup12::-webkit-scrollbar-thumb,
.popup13::-webkit-scrollbar-thumb,
.popup14::-webkit-scrollbar-thumb,
.popup15::-webkit-scrollbar-thumb,
.popup16::-webkit-scrollbar-thumb,
.popup17::-webkit-scrollbar-thumb,
.popup18::-webkit-scrollbar-thumb,
.popup23::-webkit-scrollbar-thumb,
.popup24::-webkit-scrollbar-thumb,
.popup26::-webkit-scrollbar-thumb,
.popup27::-webkit-scrollbar-thumb,
.popup216::-webkit-scrollbar-thumb,
.popup217::-webkit-scrollbar-thumb {
    background: #3a3a5a;
    border-radius: 3px;
}

.popup::-webkit-scrollbar-thumb:hover,
.popup2::-webkit-scrollbar-thumb:hover,
.popup3::-webkit-scrollbar-thumb:hover,
.popup4::-webkit-scrollbar-thumb:hover,
.popup5::-webkit-scrollbar-thumb:hover,
.popup7::-webkit-scrollbar-thumb:hover,
.popup9::-webkit-scrollbar-thumb:hover,
.popup10::-webkit-scrollbar-thumb:hover,
.popup12::-webkit-scrollbar-thumb:hover,
.popup13::-webkit-scrollbar-thumb:hover,
.popup14::-webkit-scrollbar-thumb:hover,
.popup15::-webkit-scrollbar-thumb:hover,
.popup16::-webkit-scrollbar-thumb:hover,
.popup17::-webkit-scrollbar-thumb:hover,
.popup18::-webkit-scrollbar-thumb:hover,
.popup23::-webkit-scrollbar-thumb:hover,
.popup24::-webkit-scrollbar-thumb:hover,
.popup26::-webkit-scrollbar-thumb:hover,
.popup27::-webkit-scrollbar-thumb:hover,
.popup216::-webkit-scrollbar-thumb:hover,
.popup217::-webkit-scrollbar-thumb:hover {
    background: #5a5a7a;
}

/* Стили для задач ЗЕМЛ */
.zeml-task {
    background-color: #d1ecf1;
    color: #0c5460;
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 4px;
    border-left: 4px solid #17a2b8;
    font-size: 12px;
}

.work-type-option.zeml {
    border-left-color: #17a2b8;
}

.work-type-option.active.zeml {
    background-color: #d1ecf1;
    border-color: #17a2b8;
}

/* Обновляем стили для бейджей */
.work-type-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-weight: bold;
    font-size: 14px;
    margin-right: 10px;
}

/* ============================================
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   ============================================ */
@media (max-width: 768px) {
    .popup,
    .popup2,
    .popup3,
    .popup4,
    .popup5,
    .popup6,
    .popup7,
    .popup11,
    .popup13,
    .popup26,
    .popup14,
    .popup15,
    .popup16,
    .popup17,
    .popup18,
    .popup23,
    .popup24,
    .popup27,
    .popup216,
    .popup217 {
        width: 95%;
        margin: 20px auto;
        padding: 15px;
        max-height: 95vh !important;
    }
    
    .popup-header {
        padding: 20px 20px 12px;
    }
    
    .popup-header h2 {
        font-size: 18px;
    }
    
    .popup-content {
        padding: 20px;
    }
    
    .station-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .date-display {
        font-size: 20px;
    }
    
    .btn {
        padding: 12px 20px;
    }
    
    .work-type-selector,
    .plan-type-selector {
        flex-direction: column;
    }
    
    .container {
        padding: 15px;
    }
    
    table {
        font-size: 12px;
    }
    
    th, td {
        padding: 8px 10px;
    }
    
    .actions {
        flex-direction: column;
    }
    
    .btn {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    body {
        padding: 5px;
    }
    
    .details {
        display: block;
        overflow-x: auto;
    }
    
    button, .button {
        width: 100%;
        margin: 5px 0;
    }
    
    .zag, .zag2, .zag3, .zag4, .zag5, .zag7, .zag8, .zag9, .zag10, .zag11, .zag12,
    .zag13, .zag14, .zag15, .zag16, .zag17, .zag18, .zag23, .zag24, .zag26, .zag27,
    .zag216, .zag217 {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .popup-header h2 {
        font-size: 16px;
    }
    
    .work-type-badge {
        font-size: 12px;
        padding: 4px 12px;
    }
    
    .date-display {
        font-size: 18px;
    }
    
    .zag7 {
        font-size: 16px;
    }
    
    .add-work-icon {
        margin-left: 5px;
        padding: 2px 6px;
        font-size: 10px;
    }
}

/* iOS Safari специфичные исправления */
@supports (-webkit-touch-callout: none) {
    /* Специальные стили для iOS Safari */
    body {
        -webkit-text-size-adjust: 100%;
    }
    
    .employees-table,
    table.details {
        -webkit-overflow-scrolling: touch;
        background-color: var(--surface) !important;
        border-collapse: separate !important;
        border-spacing: 0;
    }
    
    .employees-table tr,
    table.details tr {
        background-color: inherit !important;
    }
    
    /* Исправление для строк бригад на iOS */
    .brigade-nnovgorod,
    .brigade-kazan,
    .brigade-izhevsk {
        background-color: inherit !important;
    }
    
    .brigade-nnovgorod td {
        background-color: #f8f9fa !important;
    }
    
    .brigade-kazan td {
        background-color: #e9ecef !important;
    }
    
    .brigade-izhevsk td {
        background-color: #dee2e6 !important;
    }
    
    /* Ховер эффекты для iOS */
    .employees-table tr:hover td,
    table.details tr:hover td {
        background-color: #f0f7ff !important;
    }
    
    .brigade-nnovgorod:hover td {
        background-color: #e9ecef !important;
    }
    
    .brigade-kazan:hover td {
        background-color: #dee2e6 !important;
    }
    
    .brigade-izhevsk:hover td {
        background-color: #ced4da !important;
    }
    
    /* Исправление для модальных окон на iOS */
    #overlay,
    #overlay1,
    #overlay2,
    #overlay3,
    #overlay4,  
    #overlay5,
    #overlay6,   
    #overlay7,
    #overlay8,
    #overlay9,
    #overlay10,  
    #overlay11,
    #overlay12,
    #overlay13,
    #overlay14,
    #overlay15,
    #overlay16,
    #overlay17,
    #overlay18,
    #overlay23,
    #overlay24,
    #overlay26,
    #overlay27,
    #overlay216,
    #overlay217,
    #overlay-new-work {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        height: -webkit-fill-available !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        z-index: 10000 !important;
        background-color: rgba(0, 0, 0, 0.85) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }
    
    .popup,
    .popup1,
    .popup2,
    .popup3,
    .popup4,
    .popup5,
    .popup6,    
    .popup7,
    .popup8,
    .popup9,
    .popup10,
    .popup11,
    .popup12,
    .popup13,
    .popup14,
    .popup15,
    .popup16,
    .popup17,
    .popup18,
    .popup23,
    .popup24,
    .popup26,
    .popup27,
    .popup216,
    .popup217 {
        display: block !important;
        position: relative !important;
        margin: auto !important;
        max-height: 85vh !important;
        max-width: 95% !important;
        width: auto !important;
        min-width: 300px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateZ(0) !important;
        margin-top: env(safe-area-inset-top) !important;
        margin-bottom: env(safe-area-inset-bottom) !important;
    }
    
    .popup-content {
        max-height: calc(85vh - 120px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .popup-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    
    .popup-close {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 11 !important;
    }
}

/* Явное указание фона для заголовков */
.employees-table th:nth-child(1),
.employees-table th:nth-child(2),
.employees-table th:nth-child(3),
.employees-table th:nth-child(4),
.employees-table th:nth-child(5),
.employees-table th:nth-child(6) {
    background-color: #2563eb !important;
    background-image: none !important;
}

/* Исправление для строк бригад */
.brigade-nnovgorod,
.brigade-kazan,
.brigade-izhevsk {
    background-color: inherit !important;
}

.brigade-nnovgorod td {
    background-color: #f8f9fa !important;
}

.brigade-kazan td {
    background-color: #e9ecef !important;
}

.brigade-izhevsk td {
    background-color: #dee2e6 !important;
}

/* Ховер эффекты */
.employees-table tr:hover td {
    background-color: #f8f9fa !important;
}

.brigade-nnovgorod:hover td {
    background-color: #e9ecef !important;
}

.brigade-kazan:hover td {
    background-color: #dee2e6 !important;
}

.brigade-izhevsk:hover td {
    background-color: #ced4da !important;
}

/* Viewport meta для мобильных устройств */
@media screen and (max-width: 768px) {
    .employees-table,
    table.details {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .employees-table thead,
    .employees-table tbody,
    .employees-table tr,
    table.details thead,
    table.details tbody,
    table.details tr {
        display: block !important;
        width: 100% !important;
    }
    
    .employees-table td,
    .employees-table th,
    table.details td,
    table.details th {
        display: block !important;
        text-align: left !important;
        border: none !important;
        border-bottom: 1px solid #eee !important;
    }
    
    .employees-table td:last-child,
    table.details td:last-child {
        border-bottom: none !important;
    }
}

.online-user-item {
    transition: all 0.2s ease;
}

.online-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
}

.online-indicator.active {
    background-color: #4CAF50;
    animation: pulse 2s infinite;
}

.online-indicator.idle {
    background-color: #FFC107;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Стили для ВОЛС */
.popup27, .popup217, .popup24 {
    background-color: #f5e6ff;
    border-left: 5px solid #9b59b6;
}

.zag27, .zag217, .zag24 {
    background-color: #9b59b6 !important;
}

/* Стили для ЗЕМЛ */
.zeml-task {
    background-color: #d1ecf1;
    color: #0c5460;
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 4px;
    border-left: 4px solid #17a2b8;
    font-size: 12px;
}

.work-type-option.zeml {
    border-left-color: #17a2b8;
}

.work-type-option.active.zeml {
    background-color: #d1ecf1;
    border-color: #17a2b8;
}

.work-type-badge:contains('ЗЕМЛ'),
.work-type-badge:has-text('ЗЕМЛ') {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #17a2b8;
}