/* styles.css */
body { font-family: system-ui, -apple-system, sans-serif; }

/* --- GLOBAL INPUTS --- */
.filter-input, .modal-input, .input-field { 
    width: 100%; 
    padding: 0.6rem 1rem; 
    border-radius: 0.5rem; 
    border: 1px solid #e5e7eb; 
    background-color: white; 
    font-size: 0.875rem; 
    outline: none; 
    transition: all 0.2s; 
    appearance: none; 
    -webkit-appearance: none; 
}

.filter-input:focus, .modal-input:focus, .input-field:focus { 
    border-color: #cc0000; 
    box-shadow: 0 0 0 1px #cc0000; 
}

.modal-input:disabled, .input-field:disabled, .input-field[readonly] { 
    background-color: #f9fafb; 
    border-color: #e5e7eb; 
    color: #6b7280; 
    cursor: not-allowed; 
}

/* --- GLOBAL BUTTONS --- */
.btn { 
    padding: 0.5rem 1rem; 
    border-radius: 0.5rem; 
    font-weight: 700; 
    font-size: 0.875rem; 
    transition: all 0.2s; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0.5rem; 
    cursor: pointer; 
}

.btn-primary { 
    background-color: #cc0000; 
    color: white; 
    box-shadow: 0 2px 4px rgba(204,0,0,0.2); 
    border: 1px solid transparent; 
}
.btn-primary:hover { background-color: #aa0000; }

.btn-danger { 
    background-color: white; 
    color: #ef4444; 
    border: 1px solid #fee2e2; 
}
.btn-danger:hover { background-color: #fef2f2; border-color: #ef4444; }

/* --- DASHBOARD COMPONENTS --- */
.modal-overlay { background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); transition: background 0.3s ease; }

.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: #f1f1f1; }
.custom-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Status Dropdown Arrows */
.card-select { 
    appearance: none; background-repeat: no-repeat; background-position: right 0.2rem center; background-size: 0.6em; 
    padding-right: 1rem; padding-left: 0.5rem; border-radius: 0.25rem; font-size: 0.65rem; font-weight: 700; 
    text-transform: uppercase; height: 20px; line-height: 1; cursor: pointer; border: 1px solid transparent; 
    transition: opacity 0.2s; color: white; 
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'%3e%3c/path%3e%3c/svg%3e"); 
}
.card-select:hover { opacity: 0.9; }

/* Menus */
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu { display: none; position: absolute; right: 0; top: 100%; background-color: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); z-index: 50; min-width: 140px; }

.autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; top: 100%; left: 0; right: 0; background-color: white; border-radius: 0 0 5px 5px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); max-height: 150px; overflow-y: auto; }
.autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; font-size: 0.8rem; }
.autocomplete-items div:hover { background-color: #e9e9e9; }

/* Dashboard Columns */
.dash-col-header { 
    display: flex; align-items: center; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.75rem; margin-bottom: 1rem; min-height: 50px; 
}
.dash-col-title { 
    font-size: 1.1rem; font-weight: 900; color: #1f2937; text-transform: uppercase; letter-spacing: -0.025em; line-height: 1; 
}
.dash-total { 
    color: #cc0000; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.025em; white-space: nowrap; 
}

/* --- UTILITIES --- */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }
.uppercase { text-transform: uppercase; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }

/* --- COLORS --- */
.bg-swmred { background-color: #cc0000; }
.text-swmred { color: #cc0000; }
.border-swmred { border-color: #cc0000; }

.bg-blue-500 { background-color: #3b82f6; color: white; }
.bg-yellow-500 { background-color: #eab308; color: white; }
.bg-green-600 { background-color: #16a34a; color: white; }
.bg-red-500 { background-color: #ef4444; color: white; }
.bg-orange-500 { background-color: #f97316; color: white; }
.bg-gray-500 { background-color: #6b7280; color: white; }
.bg-gray-400 { background-color: #9ca3af; color: white; }
.bg-teal-600 { background-color: #0d9488; color: white; }

.bg-green-100 { background-color: #dcfce7; }
.text-green-800 { color: #166534; }

.bg-blue-50 { background-color: #eff6ff; }
.text-blue-600 { color: #2563eb; }
.hover\:text-blue-800:hover { color: #1e40af; }
.hover\:bg-blue-100:hover { background-color: #dbeafe; }
.border-blue-100 { border-color: #dbeafe; }
.border-blue-200 { border-color: #bfdbfe; }

/* Login Page specific */
.login-body { height: 100vh; width: 100vw; background-color: #f3f4f6; overflow: hidden; margin: 0; position: relative; }
.login-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; width: 90%; max-width: 380px; padding: 2.5rem; border-radius: 0.75rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); border: 1px solid #e5e7eb; text-align: center; z-index: 1000; }
.login-title { font-size: 3rem; font-weight: 900; color: #cc0000; line-height: 1; letter-spacing: -0.05em; margin: 0 0 0.5rem 0; }
.login-subtitle { color: #9ca3af; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2rem; }
.login-label { display: block; color: #374151; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.login-input { width: 100%; padding: 0.75rem 1rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.875rem; text-align: center; background-color: #f9fafb; transition: all 0.2s; outline: none; margin-bottom: 1.5rem; box-sizing: border-box; }
.login-input:focus { background-color: white; border-color: #cc0000; box-shadow: 0 0 0 1px #cc0000; }