* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #f8fafc; color: #0f172a; padding: 24px; min-height: 100vh; }
.dashboard { max-width: 1600px; margin: 0 auto; }

.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
.logo-area h1 { font-size: 1.8rem; font-weight: 600; background: linear-gradient(135deg, #1e293b, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-area p { font-size: 0.85rem; color: #475569; margin-top: 4px; }
.top-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn-change-pwd { background: #3b82f6; color: white; border: none; padding: 8px 20px; border-radius: 40px; font-weight: 500; cursor: pointer; }
.btn-change-pwd:hover { background: #2563eb; }
.btn-logout { background: #ef4444; color: white; border: none; padding: 8px 20px; border-radius: 40px; font-weight: 500; cursor: pointer; }
.btn-logout:hover { background: #dc2626; }
.btn-users { background: #10b981; color: white; border: none; padding: 8px 20px; border-radius: 40px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-users:hover { background: #059669; }
.btn-rating { background: #8b5cf6; color: white; border: none; padding: 8px 20px; border-radius: 40px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-rating:hover { background: #7c3aed; }
.btn-schedule { background: #f97316; color: white; border: none; padding: 8px 20px; border-radius: 40px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-schedule:hover { background: #ea580c; }
.btn-calendar { background: #3b82f6; color: white; border: none; padding: 8px 20px; border-radius: 40px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-calendar:hover { background: #2563eb; }
.btn-overtime { background: #dc2626; color: white; border: none; padding: 8px 20px; border-radius: 40px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-overtime:hover { background: #b91c1c; }

.rooms-tabs { display: flex; gap: 8px; margin-bottom: 24px; overflow-x: auto; padding-bottom: 4px; border-bottom: 2px solid #e2e8f0; }
.room-tab { background: #f1f5f9; border: none; padding: 10px 20px; border-radius: 40px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: 0.2s; white-space: nowrap; user-select: none; }
.room-tab.active { background: #3b82f6; color: white; }
.room-tab:hover:not(.active) { background: #e2e8f0; }
.room-tab.dragging { opacity: 0.5; }
.add-room-tab { background: #e2e8f0; color: #1e293b; }
.add-room-tab:hover { background: #cbd5e1; }
.room-settings { user-select: none; display: inline-block; margin-left: 8px; cursor: pointer; font-size: 0.8rem; }

/* Компактные строки */
.stats-row-compact {
    background: white;
    border-radius: 20px;
    padding: 12px 20px;
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: 0.9rem;
}
.stats-row-compact span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.energy-row-compact {
    background: white;
    border-radius: 20px;
    padding: 12px 20px;
    margin-bottom: 24px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    font-size: 0.9rem;
}
.energy-row-compact span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-outline {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    padding: 6px 14px;
    border-radius: 40px;
    cursor: pointer;
    font-size: 0.8rem;
}
.btn-outline:hover {
    background: #e2e8f0;
}

.map-container { background: white; border-radius: 24px; border: 1px solid #e2e8f0; overflow: hidden; margin-bottom: 24px; }
.map-header { padding: 16px 20px; border-bottom: 1px solid #eef2ff; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.map-title { font-weight: 600; }
.svg-container { padding: 20px; background: #ffffff; min-height: 400px; max-height: 600px; overflow: auto; }
#svgContainer svg { width: 100%; height: auto; border-radius: 16px; background: #fefefe; }

.machines-section { background: white; border-radius: 24px; border: 1px solid #e2e8f0; padding: 20px; margin-bottom: 24px; }
.section-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
.machines-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-height: 600px; overflow-y: auto; margin-bottom: 16px; }
.machine-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 12px; display: flex; align-items: center; justify-content: space-between; transition: background 0.2s; cursor: pointer; }
.machine-card:hover { background: #fefce8; }
.machine-card.highlight { background: #fef3c7; border-color: #f59e0b; }
.machine-info { flex: 1; }
.machine-name { font-weight: 600; margin-bottom: 4px; font-size: 0.9rem; }
.machine-current { font-size: 0.8rem; color: #334155; }
.machine-badge { width: 12px; height: 12px; border-radius: 20px; display: inline-block; margin-right: 6px; }
.to-warning-icon { background: #f97316; color: white; font-size: 0.7rem; padding: 2px 8px; border-radius: 20px; font-weight: 600; margin-left: 6px; }
.machine-card.gray .machine-badge { background: #6b7280; }
.machine-card.yellow .machine-badge { background: #eab308; }
.machine-card.green .machine-badge { background: #22c55e; }
.machine-card.red .machine-badge { background: #ef4444; }
.edit-machine-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 6px; border-radius: 30px; }
.btn-primary { background: #3b82f6; color: white; border: none; padding: 10px 0; border-radius: 40px; font-weight: 600; width: 100%; cursor: pointer; margin-top: 8px; }
.btn-secondary { background: #e2e8f0; color: #1e293b; border: none; padding: 10px 0; border-radius: 40px; width: 100%; margin-top: 8px; cursor: pointer; }

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(3px); justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background: white; border-radius: 32px; width: 800px; max-width: 95%; padding: 28px; max-height: 90vh; overflow-y: auto; }
.modal-content h3 { font-size: 1.4rem; margin-bottom: 20px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 0.85rem; }
.form-group input, .form-group select { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 16px; font-size: 0.9rem; }
.threshold-row { display: flex; gap: 12px; }
.close-modal { float: right; font-size: 24px; cursor: pointer; }

.drawer { position: fixed; top: 0; right: -500px; width: 500px; max-width: 90%; height: 100%; background: white; box-shadow: -4px 0 20px rgba(0,0,0,0.1); transition: right 0.3s ease; z-index: 1100; display: flex; flex-direction: column; }
.drawer.open { right: 0; }
.drawer-header { padding: 20px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; }
.drawer-header h3 { font-size: 1.3rem; }
.drawer-close { background: none; border: none; font-size: 28px; cursor: pointer; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.users-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.users-table th, .users-table td { border-bottom: 1px solid #e2e8f0; padding: 10px 5px; text-align: left; }
.users-table th { background: #f8fafc; }
.drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 1050; display: none; }
.drawer-overlay.active { display: block; }

.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #ccc; border-top-color: #3b82f6; border-radius: 50%; animation: spin 0.6s linear infinite; margin-left: 8px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
hr { margin: 20px 0; border-color: #eef2ff; }
.period-selector { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.period-btn { background: #e2e8f0; border: none; padding: 6px 12px; border-radius: 40px; cursor: pointer; }
.period-btn.active { background: #3b82f6; color: white; }
.date-picker { display: inline-flex; align-items: center; gap: 8px; margin-left: 16px; }
.analytics-box { background: #f8fafc; border-radius: 20px; padding: 16px; margin-top: 20px; }
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.analytics-item { text-align: center; }
.analytics-value { font-size: 1.3rem; font-weight: 700; }
.analytics-label { font-size: 0.75rem; color: #475569; }
.to-forecast-box { background: #fff7ed; border-left: 4px solid #f97316; padding: 12px; margin-top: 16px; border-radius: 12px; font-size: 0.9rem; }
.events-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.85rem; }
.events-table th, .events-table td { border-bottom: 1px solid #e2e8f0; padding: 8px; text-align: left; }
.events-table th { background: #f1f5f9; }

.calendar-day { transition: transform 0.1s; }
.calendar-day:hover { transform: scale(1.02); }
/* Подсветка контура станка при наведении на SVG элемент или при наведении на карточку */
.machine-icon-svg.highlight-svg > :first-child {
    stroke: #f59e0b;
    stroke-width: 3;
}
/* При наведении на сам SVG элемент тоже подсвечиваем контур */
.machine-icon-svg:hover > :first-child {
    stroke: #f59e0b;
    stroke-width: 3;
}
/* Текст не должен менять цвет или фон */
.machine-icon-svg text {
    pointer-events: none;
}

@media (max-width: 1200px) { .machines-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
    .stats-row-compact, .energy-row-compact { flex-direction: column; align-items: flex-start; gap: 8px; }
    .rooms-tabs { gap: 4px; }
    .room-tab { padding: 6px 12px; font-size: 0.8rem; }
    .top-actions { gap: 8px; }
    .btn-change-pwd, .btn-logout, .btn-users, .btn-rating, .btn-schedule, .btn-calendar, .btn-overtime { padding: 6px 12px; font-size: 0.8rem; }
    .machines-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .machines-grid { grid-template-columns: 1fr; } }