/* BASE.CSS - Базовые стили */

:root{
  --bg:#ffffff;
  --card:#fff;
  --muted:#6b7280;
  --text:#0f172a;
  --primary:#4f46e5;
  --primary-weak:#eef2ff;
  --success:#16a34a;
  --warning:#f59e0b;
  --danger:#ef4444;
  --stroke:#e5e7eb;
  --chip:#f3f4f6;
  --blue:#2563eb;
  --green:#10b981;
  --orange:#f59e0b;
  --indigo:#4f46e5;
}

/* Dark Theme */
[data-theme="dark"] {
  --bg:#1a1a2e;
  --card:#16213e;
  --muted:#9ca3af;
  --text:#e5e7eb;
  --primary:#6366f1;
  --primary-weak:#1e1e3f;
  --success:#22c55e;
  --warning:#fbbf24;
  --danger:#f87171;
  --stroke:#374151;
  --chip:#1f2937;
  --blue:#3b82f6;
  --green:#22c55e;
  --orange:#fbbf24;
  --indigo:#6366f1;
}

[data-theme="dark"] .kanban-card {
  background: var(--card);
  color: var(--text);
  border-color: var(--stroke) !important;
}

[data-theme="dark"] .kanban-card[data-type="REF"]:not([data-priority="express"]):not(.reserved) {
  border-color: #3b82f6 !important;
}

[data-theme="dark"] .kanban-card[data-type="DRY"]:not([data-priority="express"]):not(.reserved) {
  border-color: #f59e0b !important;
}

[data-theme="dark"] .kanban-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

[data-theme="dark"] .kanban-card-title {
  color: var(--text);
}

/* Driver badge in kanban - darker in dark theme */
[data-theme="dark"] .driver-badge-kanban {
  background: #065f46;
  color: #6ee7b7;
  border-color: #047857;
}

[data-theme="dark"] .driver-badge-kanban:hover {
  background: #047857;
  color: #fff;
  border-color: #059669;
}

[data-theme="dark"] .modal-content {
  background: var(--card);
  color: var(--text);
}

[data-theme="dark"] .btn:not(.primary):not(.success):not(.danger):not(.warning) {
  background: var(--chip);
  color: var(--text);
  border-color: var(--stroke);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--chip);
  color: var(--text);
  border-color: var(--stroke);
}

[data-theme="dark"] .driver {
  background: var(--card);
  color: var(--text);
}

[data-theme="dark"] .order {
  background: var(--card) !important;
  border-color: var(--stroke) !important;
}

/* Driver cards in overview */
[data-theme="dark"] .driver-card {
  background: var(--card) !important;
  border-color: var(--stroke) !important;
}

/* Driver list items */
[data-theme="dark"] #driversList > div {
  background: var(--card) !important;
  border-color: var(--stroke) !important;
}

/* Order cards in modal */
[data-theme="dark"] #driverOrdersList > div {
  background: var(--card) !important;
  border-color: var(--stroke) !important;
}

[data-theme="dark"] .context-menu {
  background: var(--card);
  border-color: var(--stroke);
}

[data-theme="dark"] .context-menu-item {
  color: var(--text);
}

[data-theme="dark"] .context-menu-item:hover {
  background: var(--chip);
}

[data-theme="dark"] .context-menu-item.warning:hover {
  background: rgba(245, 158, 11, 0.15);
}

[data-theme="dark"] .context-menu-item.success:hover {
  background: rgba(22, 163, 74, 0.15);
}

[data-theme="dark"] .context-menu-item.danger:hover {
  background: rgba(220, 38, 38, 0.15);
}

[data-theme="dark"] .confirm-modal {
  background: var(--card);
}

[data-theme="dark"] .confirm-modal-title {
  color: var(--text);
}

[data-theme="dark"] .confirm-modal-btn.cancel {
  background: var(--chip);
  color: var(--text);
}

[data-theme="dark"] header {
  background: var(--card);
  border-color: var(--stroke);
}

[data-theme="dark"] .tab {
  background: var(--chip);
  color: var(--text);
  border-color: var(--stroke);
}

[data-theme="dark"] .top-stats {
  background: var(--card);
  border-color: var(--stroke);
}

[data-theme="dark"] .kanban-column {
  background: var(--chip);
}

[data-theme="dark"] .kanban-header {
  background: var(--chip);
  border-color: var(--stroke);
}

[data-theme="dark"] .kanban-count {
  background: var(--card);
  color: var(--text);
}

[data-theme="dark"] .card {
  background: var(--card) !important;
  border-color: var(--stroke) !important;
}

/* Overview list with driver cards */
[data-theme="dark"] .list {
  background: transparent !important;
}

[data-theme="dark"] .list > .driver {
  background: var(--card) !important;
  border-color: var(--stroke) !important;
}

[data-theme="dark"] .list > .driver.online {
  background: linear-gradient(135deg, #065f46 0%, var(--card) 100%) !important;
  border-color: #047857 !important;
}

[data-theme="dark"] .daily-stats {
  background: var(--card);
  border-color: var(--stroke);
}

[data-theme="dark"] .chat-driver-item {
  background: var(--card);
  color: var(--text);
}

[data-theme="dark"] .chat-driver-item:hover {
  background: var(--chip);
}

[data-theme="dark"] .chat-message-bubble {
  background: var(--chip);
  color: var(--text);
}

[data-theme="dark"] table {
  color: var(--text);
}

[data-theme="dark"] .table thead {
  background: var(--card);
}

[data-theme="dark"] .table th {
  background: var(--card);
  border-color: var(--stroke);
}

[data-theme="dark"] th {
  background: var(--chip);
  color: var(--text);
  border-color: var(--stroke);
}

[data-theme="dark"] td {
  border-color: var(--stroke);
}

[data-theme="dark"] tr:nth-child(even) {
  background: var(--chip);
}

/* Dark theme - additional elements */
[data-theme="dark"] tr:nth-child(odd) {
  background: var(--card);
}

[data-theme="dark"] tr:hover {
  background: #2d3748;
}

[data-theme="dark"] .order,
[data-theme="dark"] .driver,
[data-theme="dark"] .issue {
  background: var(--card) !important;
  border-color: var(--stroke) !important;
}

[data-theme="dark"] .driver.online {
  background: linear-gradient(135deg, #065f46 0%, var(--card) 100%) !important;
  border-color: #047857 !important;
}

[data-theme="dark"] .daily-stats {
  background: var(--card);
}

[data-theme="dark"] .stat-item-daily {
  background: var(--chip);
  border-color: var(--stroke);
}

[data-theme="dark"] .stat-item-daily.success {
  background: linear-gradient(135deg, #065f46 0%, var(--chip) 100%);
  border-color: #047857;
}

[data-theme="dark"] .stat-item-daily.warning {
  background: linear-gradient(135deg, #92400e 0%, var(--chip) 100%);
  border-color: #b45309;
}

[data-theme="dark"] .stat-item-daily.alert {
  background: linear-gradient(135deg, #991b1b 0%, var(--chip) 100%);
  border-color: #dc2626;
}

[data-theme="dark"] .stat-item-daily.alert:hover {
  background: linear-gradient(135deg, #7f1d1d 0%, #450a0a 100%);
  border-color: #b91c1c;
}

[data-theme="dark"] .stat-label {
  color: var(--muted);
}

[data-theme="dark"] .driver-metric {
  background: var(--chip);
  border-color: var(--stroke);
}

[data-theme="dark"] .driver-metric-value {
  color: var(--muted);
}

[data-theme="dark"] .driver-metric.online {
  background: #065f46;
  border-color: #047857;
}

[data-theme="dark"] .driver-info .meta {
  color: var(--muted);
}

[data-theme="dark"] .chip.green {
  background: #065f46;
  color: #10b981;
  border-color: #047857;
}

/* Chat dark theme */
[data-theme="dark"] .chat-container {
  background: var(--card);
}

[data-theme="dark"] .chat-sidebar {
  background: var(--chip);
  border-color: var(--stroke);
}

[data-theme="dark"] .chat-sidebar-header {
  background: var(--card);
  border-color: var(--stroke);
}

[data-theme="dark"] .chat-driver-item {
  border-color: var(--stroke);
}

[data-theme="dark"] .chat-driver-item:hover {
  background: var(--chip);
}

[data-theme="dark"] .chat-driver-item.active {
  background: var(--chip);
  border-left-color: var(--primary);
}

[data-theme="dark"] .chat-driver-item.unread {
  background: rgba(79, 70, 229, 0.15);
}

[data-theme="dark"] .chat-messages {
  background: var(--bg);
}

[data-theme="dark"] .chat-message.incoming .chat-message-bubble {
  background: var(--card);
  color: var(--text);
}

[data-theme="dark"] .chat-header {
  background: var(--card);
  border-color: var(--stroke);
}

[data-theme="dark"] .chat-input-container {
  background: var(--card);
  border-color: var(--stroke);
}

[data-theme="dark"] .chat-input {
  background: var(--chip);
  color: var(--text);
  border-color: var(--stroke);
}

[data-theme="dark"] .chat-empty {
  background: var(--card);
}

/* Modal dark theme */
[data-theme="dark"] .modal-content {
  background: var(--card);
  color: var(--text);
}

[data-theme="dark"] .modal-content h2,
[data-theme="dark"] .modal-content h3,
[data-theme="dark"] .modal-content label {
  color: var(--text);
}

[data-theme="dark"] .modal-content .meta,
[data-theme="dark"] .modal-content small {
  color: var(--muted);
}

/* Issues modal dark theme */
[data-theme="dark"] .issue-item {
  background: var(--chip);
  border-color: var(--stroke);
}

[data-theme="dark"] .issue-title {
  color: var(--text);
}

[data-theme="dark"] .issue-desc {
  color: var(--muted);
}

/* Table styles */
[data-theme="dark"] .table-responsive {
  background: var(--card);
}

/* Fix confirm modal text */
[data-theme="dark"] .confirm-modal-text {
  color: var(--text);
}

/* Toast notifications dark theme */
[data-theme="dark"] .toast {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .toast-message {
  color: var(--text);
}

/* Mass comment button dark theme */
[data-theme="dark"] .mass-comment-btn,
[data-theme="dark"] .mass-comment-container .mass-comment-btn {
  background: var(--card);
  border-color: var(--stroke);
  color: var(--text);
}

[data-theme="dark"] .mass-comment-btn:hover,
[data-theme="dark"] .mass-comment-container .mass-comment-btn:hover {
  background: var(--chip);
  border-color: var(--primary);
}

[data-theme="dark"] .mass-comment-btn.active,
[data-theme="dark"] .mass-comment-container .mass-comment-btn.active {
  background: var(--primary-weak);
  border-color: var(--primary);
}

/* Modal overlay and content dark theme */
[data-theme="dark"] .modal {
  background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal > div,
[data-theme="dark"] .modal {
  background: var(--card) !important;
  color: var(--text);
}

/* All inputs in modals */
[data-theme="dark"] .modal input,
[data-theme="dark"] .modal textarea,
[data-theme="dark"] .modal select,
[data-theme="dark"] .modal-content input,
[data-theme="dark"] .modal-content textarea,
[data-theme="dark"] .modal-content select {
  background: var(--chip) !important;
  color: var(--text) !important;
  border-color: var(--stroke) !important;
}

/* Readonly inputs with inline styles */
[data-theme="dark"] .modal input[readonly],
[data-theme="dark"] .modal input[style*="background-color"],
[data-theme="dark"] .form-group input[readonly] {
  background: var(--chip) !important;
  color: var(--text) !important;
}

/* Driver modal specific */
[data-theme="dark"] #driverModal .modal,
[data-theme="dark"] #driverModal > div {
  background: var(--card) !important;
}

[data-theme="dark"] .modal-content input::placeholder,
[data-theme="dark"] .modal-content textarea::placeholder {
  color: var(--muted);
}

/* Comment modal */
[data-theme="dark"] .comment-modal-content {
  background: var(--card) !important;
}

[data-theme="dark"] .comment-textarea {
  background: var(--chip) !important;
  color: var(--text) !important;
  border-color: var(--stroke) !important;
}

/* Driver modal cards - completed containers and order cards */
[data-theme="dark"] #modalDriverCompletedContainers > div,
[data-theme="dark"] #modalDriverOrders > .order,
[data-theme="dark"] .completed-container-card {
  background: var(--chip) !important;
  border-color: var(--stroke) !important;
}

[data-theme="dark"] #modalDriverOrders > .order {
  background: var(--chip) !important;
}

/* Completed container cards background */
.completed-container-card {
  background: #fff;
}

[data-theme="dark"] .completed-container-card {
  background: var(--chip) !important;
}

/* Driver info card in modal */
[data-theme="dark"] #driverModal .modal > div[style*="background"] {
  background: var(--chip) !important;
}

/* Close button in modals */
[data-theme="dark"] .modal-close,
[data-theme="dark"] [onclick*="closeModal"] {
  color: var(--muted);
}

[data-theme="dark"] .modal-close:hover,
[data-theme="dark"] [onclick*="closeModal"]:hover {
  color: var(--text);
}

/* Comment indicator in selection mode for all statuses */
[data-theme="dark"] .comment-indicator {
  border-color: var(--stroke);
}

[data-theme="dark"] .comment-indicator.selected {
  background: var(--primary);
  border-color: var(--primary);
}

/* History of movements (checkpoint history) in order modal */
[data-theme="dark"] #checkpointHistory {
  background: var(--chip) !important;
  border-color: var(--stroke) !important;
}

[data-theme="dark"] .checkpoint-history-item {
  background: var(--card) !important;
}

/* Driver modal - Transport and Statistics sections */
[data-theme="dark"] #driverModal div[style*="background: #f9fafb"],
[data-theme="dark"] #driverModal div[style*="background:#f9fafb"] {
  background: var(--chip) !important;
}

/* Driver info and stats cards */
.driver-info-card,
.driver-stats-card {
  background: #f9fafb;
}

[data-theme="dark"] .driver-info-card,
[data-theme="dark"] .driver-stats-card {
  background: var(--chip) !important;
}

/* Table row selection in dark mode */
[data-theme="dark"] tr[style*="background-color: #d1fae5"] {
  background-color: #065f46 !important;
}

/* Autofill styles for dark theme */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill:hover,
[data-theme="dark"] textarea:-webkit-autofill:focus,
[data-theme="dark"] select:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill:hover,
[data-theme="dark"] select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--chip) inset !important;
  box-shadow: 0 0 0px 1000px var(--chip) inset !important;
  background-color: var(--chip) !important;
  caret-color: var(--text) !important;
  transition: background-color 5000s ease-in-out 0s;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  padding-top:60px;
  background:var(--bg);
  color:var(--text);
  font:14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.btn{
  padding:8px 12px; border-radius:10px; border:1px solid var(--stroke);
  background:#fff; cursor:pointer; font-weight:600;
  transition: all 0.2s;
  font-size:13px;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.btn.primary{
  background:var(--indigo) !important; 
  color:#fff !important; 
  border:2px solid var(--indigo) !important;
  border-radius:12px !important; 
  overflow:hidden !important;
  box-shadow: 0 0 0 0 transparent !important;
}
.btn.success{background:var(--green); color:#fff; border-color:var(--green)}
.btn.warning{background:var(--orange); color:#fff; border-color:var(--orange)}
.btn.danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn.ghost{background:#fff}
.btn.sm{
  padding:7px 14px !important; 
  font-size:12px; 
  border-radius:10px !important; 
  overflow:hidden !important;
}

.flex{display:flex; gap:10px; align-items:center}
.right{justify-self:end}
.hidden{display:none}

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

@keyframes slideIn{
  from{transform:translateX(400px); opacity:0}
  to{transform:translateX(0); opacity:1}
}