.patrol-columns { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: 10px; } .patrol-column-list { display: flex; flex-direction: column; gap: 10px; } /* ========================= PATROL CARD ========================= */ .patrol-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; gap: 8px; transition: all 0.25s ease; backdrop-filter: blur(12px); cursor: grab; } .patrol-card:active { cursor: grabbing; } .patrol-card:has(.custom-dropdown.is-open) { z-index: 99999; } /* ========================= HEADER ========================= */ .patrol-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; width: 100%; } .patrol-header-left { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; } .patrol-icon { font-size: 22px; } .patrol-info { flex: 1; min-width: 0; } .patrol-title { display: flex; align-items: center; gap: 5px; font-size: 18px; font-weight: 600; color: #eee; } .patrol-title p { margin: 0; white-space: nowrap; } .patrol-status, .unassign-patrol-btn { flex-shrink: 0; } /* ========================= STATUS ========================= */ .patrol-status { display: flex; align-items: center; gap: 5px; } .patrol-status p { color: #999; margin-top: -4px; } .patrol-status-select { background: transparent; color: inherit; outline: none; cursor: pointer; appearance: none; text-align: center; padding: 5px 6px; border-radius: var(--radius); font-size: 14px; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.08); } .patrol-status-select option { background: var(--bg-card); color: var(--text-secondary); } /* ========================= STATUS COLORS ========================= */ .patrol-status-select.ledig { color: #22c55e; background: rgba(34, 197, 94, 0.12); } .patrol-status-select.patrulje { color: #f59e0b; background: rgba(245, 158, 11, 0.12); } .patrol-status-select.pause { color: #ef4444; background: rgba(239, 68, 68, 0.12); } .patrol-status-select.sagsbehandling { color: #06b6d4; background: rgba(6, 182, 212, 0.12); } /* ========================= OFFICERS ========================= */ .patrol-officers summary { display: flex; flex-direction: row; align-items: center; gap: 10px; } .patrol-officers summary i { transition: var(--transition); } details:open > summary i{ transform: rotate(180deg); } .patrol-officers summary .count { margin-left: auto; } .patrol-officers .officers { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--bg-card); padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-inner); margin-top: 5px; } .patrol-officers .count { background: var(--bg-card); padding: 2px 5px; border-radius: var(--radius-inner); border: 1px solid var(--border); width: fit-content; height: fit-content; } .patrol-officers i { color: #999; } .patrol-card-buttons { display: flex; gap: 12px; } /* ========================= EDIT MODE ========================= */ #editOfficerInputs { display: flex; flex-direction: column; gap: 5px; } .edit-officer-row { display: flex; flex-direction: row; justify-content: space-between; } .assignedButtons { display:flex; justify-content: space-between; align-items: center; width:100%; } /* ========================= COMPACT MODE ========================= */ /* Aktiveres fx med */ body.compact-mode .patrol-columns, body.ultra-compact-mode .patrol-columns { gap: 6px; } body.compact-mode .patrol-column-list, body.ultra-compact-mode .patrol-column-list{ gap: 6px; } /* COMPACT CARD */ body.compact-mode .patrol-card, body.ultra-compact-mode .patrol-card{ padding: 6px 8px; gap: 5px; border-radius: 10px; } body.compact-mode .patrol-header, body.ultra-compact-mode .patrol-header { gap: 6px; } body.compact-mode .patrol-header-left, body.ultra-compact-mode .patrol-header-left { gap: 4px; } body.compact-mode .patrol-icon, body.ultra-compact-mode .patrol-icon { font-size: 18px; } body.compact-mode .patrol-title, body.ultra-compact-mode .patrol-title { font-size: 14px; gap: 4px; font-weight: 600; } body.compact-mode .patrol-title p, body.ultra-compact-mode .patrol-title p { font-size: 14px; } body.compact-mode .patrol-status, body.ultra-compact-mode .patrol-status { padding: 3px 5px; font-size: 12px; border-radius: 8px; } body.compact-mode .patrol-status-select, body.ultra-compact-mode .patrol-status-select { font-size: 12px; } body.compact-mode .patrol-card-buttons, body.ultra-compact-mode .patrol-card-buttons { gap: 6px; } body.compact-mode .btn, body.ultra-compact-mode .btn { padding: 4px; font-size: 12px; } body.ultra-compact-mode .task-card .patrol-officers { display: none; } body.ultra-compact-mode .task-card .patrol-card:hover .patrol-officers { display: flex; } /* ========================= TASK PATROL STATUS ========================= */ .patrol-task-status-select { background: transparent; color: inherit; outline: none; cursor: pointer; appearance: none; text-align: center; padding: 5px 6px; border-radius: var(--radius); font-size: 14px; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.08); } .patrol-task-status-select option { background: var(--bg-card); color: var(--text-secondary); } .patrol-task-status { flex-shrink: 0; } body.compact-mode .patrol-task-status, body.ultra-compact-mode .patrol-task-status { padding: 3px 5px; font-size: 12px; border-radius: 8px; } body.compact-mode .patrol-task-status-select, body.ultra-compact-mode .patrol-task-status-select { font-size: 12px; }