@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #f5f5f5; color: #333; overflow-x: hidden; }

/* Utilities */
.text-primary { color: #e85d26; }
.text-muted { color: #888; }
.text-sm { font-size: 13px; }
.flex-1 { flex: 1; }
.error-text { color: #ef5350; font-size: 13px; margin-top: 8px; }
.link-btn { background: none; border: none; cursor: pointer; font-family: inherit; }
.link-btn:hover { color: #555; }

/* Login */
.login-overlay { position: fixed; inset: 0; background: #f5f5f5; display: flex; align-items: center; justify-content: center; z-index: 200; }
.login-card { background: #fff; border-radius: 12px; padding: 32px; width: 380px; box-shadow: 0 8px 32px rgba(0,0,0,.1); }
.login-title { font-size: 24px; font-weight: 700; margin-bottom: 24px; }
.login-card label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 4px; margin-top: 12px; }
.login-card input { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-family: inherit; }
.login-card input:focus { outline: none; border-color: #e85d26; box-shadow: 0 0 0 2px rgba(232,93,38,.2); }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 8px; color: #aaa; font-size: 13px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: #ddd; }

/* Header */
.app-header { background: #fff; border-bottom: 2px solid #e85d26; padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
.app-logo { font-size: 20px; font-weight: 700; }

/* Layout */
.main-container { display: flex; height: calc(100vh - 52px); }
.sidebar { width: 60px; background: #fff; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; align-items: center; padding-top: 16px; gap: 20px; }
.sidebar-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; font-size: 18px; text-decoration: none; color: #888; transition: all .15s; }
.sidebar-icon:hover { background: #f0f0f0; color: #e85d26; }
.sidebar-icon.active { color: #e85d26; background: #fff3ef; }
.content-area { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* Pages */
.page { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.page-content { padding: 24px; overflow: auto; }
.page-title { font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.section-subtitle { font-size: 15px; font-weight: 600; color: #555; margin-bottom: 10px; }

/* Categories */
.categories-section { margin-bottom: 8px; }
.categories-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.categories-toggle:hover { color: #333; }
.section-toggle-arrow { font-size: 12px; transition: transform .2s; }
.categories-section.collapsed .section-toggle-arrow { transform: rotate(-90deg); }
.categories-section.collapsed #categories-body { display: none; }
.category-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.category-row .cat-color-input { width: 28px; height: 28px; border: 1px solid #ddd; border-radius: 6px; padding: 1px; cursor: pointer; }
.category-row .cat-name-input { flex: 1; padding: 5px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; font-family: inherit; }
.category-row .cat-name-input:focus, .category-row .cat-color-input:focus { outline: none; border-color: #e85d26; }
.category-row .btn-cat-delete { background: none; border: none; color: #ccc; cursor: pointer; font-size: 16px; padding: 4px; line-height: 1; }
.category-row .btn-cat-delete:hover { color: #ef5350; }
.category-row .btn-cat-save { background: #e85d26; color: #fff; border: none; border-radius: 4px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.category-row .btn-cat-save:hover { background: #d14e1c; }
.btn-small { background: #f0f0f0; color: #555; border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: 6px; }
.btn-small:hover { background: #e0e0e0; }

/* Tables */
.table-container { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); overflow: hidden; }
.data-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.data-table thead { background: #f8f8f8; border-bottom: 1px solid #e0e0e0; }
.data-table th { text-align: left; padding: 10px 16px; font-weight: 600; color: #555; }
.data-table td { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; }
.data-table tr:hover { background: #fafafa; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.badge-green { background: #e8f5e9; color: #2e7d32; }
.badge-gray { background: #f0f0f0; color: #666; }
.badge-yellow { background: #fff8e1; color: #f57f17; }
.color-dot { display: inline-block; width: 18px; height: 18px; border-radius: 4px; }

/* Toolbar */
.toolbar { background: #fff; padding: 10px 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #e0e0e0; flex-wrap: wrap; }
.toolbar-btn, .nav-btn { padding: 6px 14px; border: 1px solid #ddd; background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: #555; font-family: inherit; transition: all .15s; }
.toolbar-btn:hover, .nav-btn:hover { background: #f9f9f9; border-color: #ccc; }
.nav-btn { font-size: 18px; font-weight: 700; padding: 4px 10px; }
.kw-label { font-size: 15px; font-weight: 600; color: #333; margin: 0 8px; }
.view-toggle { display: flex; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; }
.view-toggle button { padding: 6px 14px; border: none; border-right: 1px solid #ddd; background: #fff; font-size: 13px; font-weight: 500; color: #555; cursor: pointer; font-family: inherit; }
.view-toggle button:last-child { border-right: none; }
.view-toggle button.active { background: #e85d26; color: #fff; }

/* Board */
.board-container { flex: 1; overflow: auto; padding-bottom: 90px; user-select: none; -webkit-user-select: none; }

/* Day Headers */
.day-headers { display: grid; grid-template-columns: 220px repeat(5,1fr); background: #fff; border-bottom: 1px solid #e0e0e0; position: sticky; top: 0; z-index: 10; }
.day-header-spacer { padding: 8px 16px; border-right: 1px solid #eee; }
.day-header { padding: 10px 8px; text-align: center; border-right: 1px solid #eee; }
.day-header .day-num { font-size: 22px; font-weight: 700; color: #e85d26; }
.day-header .day-name { font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .5px; }
.day-hours { display: flex; justify-content: space-between; font-size: 10px; color: #aaa; margin-top: 2px; padding: 0 4px; }
.day-header.today .day-num { color: #fff; background: #e85d26; border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }

/* Section Headers */
.section-header { display: grid; grid-template-columns: 220px 1fr; background: #f8f8f8; border-bottom: 1px solid #e0e0e0; cursor: pointer; }
.section-header:hover { background: #f0f0f0; }
.section-title { padding: 8px 16px; font-size: 12px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 8px; }
.section-toggle { font-size: 10px; transition: transform .2s; display: inline-block; }
.section-toggle.collapsed { transform: rotate(-90deg); }

/* Project Bars */
.project-row { display: grid; grid-template-columns: 220px repeat(5,1fr); border-bottom: 1px solid #f0f0f0; min-height: 34px; position: relative; }
.project-label { padding: 4px 16px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; display: flex; align-items: center; border-right: 1px solid #eee; z-index: 1; }
.project-label:hover { text-decoration: underline; }
.project-bar-cell { padding: 3px 2px; border-right: 1px solid #f5f5f5; }
.project-span-bar { position: absolute; height: 22px; top: 6px; border-radius: 4px; opacity: .4; z-index: 0; }
.project-category-header { padding: 4px 16px; font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .5px; background: #f8f8f8; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 6px; }
.cat-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Employee Rows */
.employee-row { display: grid; grid-template-columns: 220px repeat(5,1fr); border-bottom: 1px solid #f0f0f0; min-height: 58px; position: relative; }
.employee-row:hover { background: #fafafa; }
.employee-name { padding: 8px 16px; font-size: 13px; font-weight: 500; color: #333; display: flex; align-items: flex-start; padding-top: 12px; border-right: 1px solid #eee; }
.team-row { background: #fafafa; border-bottom: 2px solid #e0e0e0; }
.team-row .employee-name { color: #e85d26; font-size: 12px; }

/* Day Cells (timeline: 7:00-19:00) */
.day-cell { border-right: 1px solid #f0f0f0; min-height: 54px; position: relative; transition: background .15s; }
.day-cell.drag-over { background: #fff3ef; outline: 2px dashed #e85d26; outline-offset: -2px; border-radius: 4px; }
body.dragging .day-cell > *, body.dragging .assignment-bar { pointer-events: none; }
.day-cell-add { position: absolute; height: 24px; border-radius: 4px; cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; font-size: 14px; color: transparent; font-weight: 600; border: 1px dashed transparent; background: transparent; }
.day-cell-add:hover { color: #999; border-color: #ccc; background: #f0f0f0; }
body.role-readonly .day-cell-add { display: none !important; }
body.role-readonly .assignment-block, body.role-readonly .assignment-bar { cursor: default !important; }
body.role-readonly .legend-item { -webkit-user-drag: none; user-select: none; cursor: default !important; }

/* Assignment Blocks */
.assignment-block { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; cursor: grab; user-select: none; display: flex; align-items: center; gap: 4px; transition: transform .1s, box-shadow .1s; min-height: 24px; border-left: 3px solid transparent; overflow: hidden; }
.assignment-block:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 5; }
.assignment-block:active { cursor: grabbing; transform: scale(1.03); box-shadow: 0 4px 16px rgba(0,0,0,.2); z-index: 10; }
.assignment-locked { cursor: default !important; opacity: .65; }
.assignment-locked:hover { transform: none !important; box-shadow: none !important; }
.assignment-locked:active { cursor: default !important; transform: none !important; box-shadow: none !important; }
.block-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Activity Colors */
.block-werkstatt { background: #fce4ec; color: #c62828; border-left-color: #e91e63; }
.block-urlaub { background: #e8f5e9; color: #1b5e20; border-left-color: #66bb6a; }
.block-schulung { background: #e3f2fd; color: #1565c0; border-left-color: #42a5f5; }
.block-berufsschule { background: #f3e5f5; color: #6a1b9a; border-left-color: #ab47bc; }
.block-buero { background: #fff3e0; color: #e65100; border-left-color: #ff9800; }
.block-wartung { background: #efebe9; color: #4e342e; border-left-color: #8d6e63; }

/* Resize Handle */
.resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 2; border-radius: 0 4px 4px 0; }
.resize-handle:hover { background: rgba(0,0,0,.12); }
body.resizing { cursor: col-resize !important; user-select: none !important; }
body.resizing * { cursor: col-resize !important; }
body.resizing .day-cell > *, body.resizing .assignment-bar { pointer-events: none; }
body.resizing .resize-handle.active { pointer-events: all !important; }
body.role-readonly .resize-handle { display: none !important; }

/* Spanning Assignment Bars */
.assignment-bar { position: absolute; border-radius: 4px; font-size: 11px; font-weight: 500; cursor: grab; user-select: none; display: flex; align-items: center; gap: 4px; padding: 4px 8px; z-index: 6; border-left: 3px solid transparent; overflow: hidden; white-space: nowrap; transition: box-shadow .15s; height: 24px; }
.assignment-bar:hover { box-shadow: 0 2px 8px rgba(0,0,0,.2); z-index: 7; }
.assignment-bar:active { cursor: grabbing; }
.bar-icon { font-size: 12px; flex-shrink: 0; }
.bar-text { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.bar-arrow { flex-shrink: 0; font-size: 10px; opacity: 0.8; }
.bar-arrow-left { margin-right: 2px; }
.bar-arrow-right { margin-left: auto; }

/* Legend */
.legend { position: fixed; bottom: 0; left: 60px; right: 0; background: #fff; border-top: 1px solid #e0e0e0; padding: 8px 24px; display: flex; align-items: center; gap: 6px; z-index: 20; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #fff; cursor: grab; user-select: none; transition: transform .1s, box-shadow .1s; }
.legend-item:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.legend-item:active { cursor: grabbing; transform: scale(1.05); }

/* Month View */
.month-headers { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid #e0e0e0; }
.month-kw-row { display: grid; border-bottom: 1px solid #eee; }
.month-day-row { display: grid; }
.month-header-spacer { padding: 4px 12px; border-right: 1px solid #eee; min-width: 0; }
.month-kw-cell { padding: 4px 6px; text-align: center; font-size: 11px; font-weight: 700; color: #e85d26; border-right: 1px solid #ddd; background: #fafafa; }
.month-day-header { padding: 2px 1px; text-align: center; border-right: 1px solid #f0f0f0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.month-day-header.month-week-start { border-left: 2px solid #ddd; }
.month-day-header.today { background: #fff3ef; }
.month-day-header.today .month-day-num { color: #fff; background: #e85d26; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.month-day-name { font-size: 9px; font-weight: 600; color: #888; text-transform: uppercase; }
.month-day-num { font-size: 12px; font-weight: 700; color: #e85d26; }
.month-row { display: grid; border-bottom: 1px solid #f0f0f0; min-height: 28px; position: relative; }
.month-row:hover { background: #fafafa; }
.month-name { padding: 4px 8px; font-size: 11px; font-weight: 500; color: #333; display: block; padding-top: 6px; border-right: 1px solid #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; min-width: 0; }
.month-name:hover { text-decoration: underline; }
.month-cell { border-right: 1px solid #f0f0f0; padding: 2px 1px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; min-width: 0; }
.month-cell.month-week-start { border-left: 2px solid #ddd; }
.month-block { padding: 1px 2px; border-radius: 3px; font-size: 11px; cursor: pointer; text-align: center; border-left: 2px solid transparent; transition: box-shadow .1s; line-height: 1.3; }
.month-block:hover { box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.month-block-icon { font-size: 9px; flex-shrink: 0; }
.month-block-text { overflow: hidden; text-overflow: ellipsis; }
.month-project-bar { position: absolute; height: 18px; top: 5px; border-radius: 4px; opacity: .4; z-index: 0; }
.month-span-bar { position: absolute; height: 18px; border-radius: 3px; font-size: 9px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 2px; padding: 1px 4px; z-index: 1; overflow: hidden; white-space: nowrap; border-left: 2px solid transparent; }
.month-span-bar:hover { box-shadow: 0 1px 4px rgba(0,0,0,.15); }

/* FAB */
.add-fab { position: fixed; bottom: 60px; right: 24px; width: 48px; height: 48px; background: #e85d26; color: #fff; border: none; border-radius: 50%; font-size: 28px; cursor: pointer; box-shadow: 0 4px 12px rgba(232,93,38,.4); display: flex; align-items: center; justify-content: center; z-index: 25; transition: transform .15s; }
.add-fab:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(232,93,38,.5); }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal { background: #fff; border-radius: 12px; padding: 24px; width: 420px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: #333; }
.modal label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 4px; margin-top: 12px; }
.modal select, .modal input { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; background: #fff; font-family: inherit; }
.modal select:focus, .modal input:focus { outline: none; border-color: #e85d26; box-shadow: 0 0 0 2px rgba(232,93,38,.2); }
.team-checklist { max-height: 200px; overflow-y: auto; border: 1px solid #eee; border-radius: 6px; padding: 2px 0; margin-top: 4px; }
.team-checklist label { display: flex; align-items: center; padding: 5px 12px; font-size: 13px; cursor: pointer; font-weight: 400; margin: 0; }
.team-checklist label:hover { background: #f5f5f5; }
.team-checklist .emp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-checklist input[type="checkbox"] { width: auto; flex-shrink: 0; margin: 0; }
/* Custom Dropdown */
.custom-dropdown { position: relative; width: 100%; }
.custom-dropdown-selected { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; background: #fff; cursor: pointer; user-select: none; }
.custom-dropdown-selected:hover { border-color: #bbb; }
.custom-dropdown.open .custom-dropdown-selected { border-color: #e85d26; box-shadow: 0 0 0 2px rgba(232,93,38,.2); }
.custom-dropdown-text { flex: 1; }
.custom-dropdown-arrow { color: #888; font-size: 12px; }
.custom-dropdown-options { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 6px; margin-top: 2px; box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 10; max-height: 200px; overflow-y: auto; }
.custom-dropdown.open .custom-dropdown-options { display: block; }
.custom-dropdown-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; }
.custom-dropdown-option:hover { background: #f5f5f5; }
.custom-dropdown-option.selected { background: #fff3ef; font-weight: 500; }
.custom-dropdown-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.modal-actions { display: flex; gap: 8px; margin-top: 20px; justify-content: flex-end; }
.modal-actions button { padding: 8px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; }

/* Buttons */
.btn-primary { background: #e85d26; color: #fff; padding: 8px 20px; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-primary:hover { background: #d14e1c; }
.btn-secondary { background: #f0f0f0; color: #555; }
.btn-secondary:hover { background: #e0e0e0; }
.btn-danger { background: #ef5350; color: #fff; }
.btn-danger:hover { background: #e53935; }