/* Custom CSS for Customer Dashboard - Dark Mode */

/* ====================== */
/* GLOBAL DARK MODE       */
/* ====================== */

/* Force dark mode on all elements */
* {
    scrollbar-width: thin;
    scrollbar-color: #4b5563 #1f2937;
}

/* Global body and html */
html, body {
    background-color: #0f172a !important; /* Koyu lacivert */
    color: #f1f5f9 !important; /* Çok açık gri */
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Footer always at bottom - using min-height approach */
body {
    min-height: 100vh;
    position: relative;
    padding-bottom: 60px; /* Space for footer */
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #1f2937 !important; /* Gray-800 equivalent */
    border-top: 1px solid #374151 !important; /* Gray-700 equivalent */
}

main {
    flex-grow: 1;
}

/* Remove default styles */
* {
    box-sizing: border-box;
}

/* ====================== */
/* BACKGROUND COLORS     */
/* ====================== */

/* Force background colors */

/* Card backgrounds */
.card,
[class*="bg-white"] {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* ====================== */
/* TEXT COLORS           */
/* ====================== */

/* Force text colors */
.text-black,
.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-gray-600,
.text-gray-500,
.text-gray-400,
.text-red-900,
.text-red-800,
.text-red-700,
.text-red-600,
.text-yellow-900,
.text-yellow-800,
.text-yellow-700,
.text-yellow-600,
.text-green-900,
.text-green-800,
.text-green-700,
.text-green-600,
.text-blue-900,
.text-blue-800,
.text-blue-700,
.text-blue-600,
.text-indigo-900,
.text-indigo-800,
.text-indigo-700,
.text-indigo-600,
.text-purple-900,
.text-purple-800,
.text-purple-700,
.text-purple-600 {
    color: #f1f5f9 !important; /* Çok açık gri */
}

/* Specific text colors */
.text-gray-500,
.text-gray-400 {
    color: #94a3b8 !important; /* Orta gri */
}

.text-gray-600 {
    color: #cbd5e1 !important; /* Açık gri */
}

/* ====================== */
/* BORDER COLORS         */
/* ====================== */

/* Force border colors */
.border-white,
.border-gray-50,
.border-gray-100,
.border-gray-200,
.border-gray-300,
.border-gray-400,
.border-gray-500 {
    border-color: #334155 !important; /* Koyu gri */
}

.border-red-200,
.border-red-300 {
    border-color: #7f1d1d !important; /* Koyu kırmızı */
}

.border-green-200,
.border-green-300 {
    border-color: #14532d !important; /* Koyu yeşil */
}

.border-yellow-200,
.border-yellow-300 {
    border-color: #713f12 !important; /* Koyu sarı */
}

.border-blue-200,
.border-blue-300 {
    border-color: #1e3a8a !important; /* Koyu mavi */
}

.border-indigo-200,
.border-indigo-300 {
    border-color: #3730a3 !important; /* Koyu indigo */
}

/* ====================== */
/* INPUTS & FORMS        */
/* ====================== */

/* Form inputs */
input,
textarea,
select,
.form-input,
.form-select,
.form-textarea {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
}

input:focus,
textarea:focus,
select:focus {
    background-color: #1e293b !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

/* ====================== */
/* BUTTONS               */
/* ====================== */

/* Primary buttons */
.btn-primary,
.bg-indigo-600,
.bg-blue-600 {
    background-color: #3b82f6 !important;
    color: white !important;
}

.btn-primary:hover,
.bg-indigo-600:hover,
.bg-blue-600:hover {
    background-color: #2563eb !important;
}

/* Secondary buttons */
.btn-secondary,
.bg-gray-100,
.bg-gray-200,
.bg-white {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border: 1px solid #475569 !important;
}

.btn-secondary:hover,
.bg-gray-100:hover,
.bg-gray-200:hover {
    background-color: #475569 !important;
}

/* Success buttons */
.btn-success,
.bg-green-600 {
    background-color: #16a34a !important;
    color: white !important;
}

.btn-success:hover,
.bg-green-600:hover {
    background-color: #15803d !important;
}

/* Danger buttons */
.btn-danger,
.bg-red-600 {
    background-color: #dc2626 !important;
    color: white !important;
}

.btn-danger:hover,
.bg-red-600:hover {
    background-color: #b91c1c !important;
}

/* ====================== */
/* TABLES                */
/* ====================== */

/* Table styles */
table,
.table {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

table th,
table td,
.table th,
.table td {
    border: 1px solid #334155 !important;
    padding: 0.75rem 1rem !important;
    color: #f1f5f9 !important;
}

table th,
.table th {
    background-color: #0f172a !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
}

table tr:hover,
.table tbody tr:hover {
    background-color: #334155 !important;
}

/* ====================== */
/* CARDS                 */
/* ====================== */

/* Card styles */
.card,
[class*="rounded-lg"] {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

.card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ====================== */
/* NAVIGATION            */
/* ====================== */

/* Navigation links */
nav a,
nav button {
    color: #cbd5e1 !important;
}

nav a:hover {
    color: #f1f5f9 !important;
}

/* Active navigation */
nav a[class*="text-gray-700"],
nav a[class*="text-gray-900"] {
    color: #3b82f6 !important;
}

/* ====================== */
/* MODALS & DROPDOWNS    */
/* ====================== */

/* Modal styles */
.modal-overlay,
.fixed.inset-0 {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.modal-container {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
}

/* Dropdown menus */
[class*="dropdown"],
[class*="menu"] {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

/* ====================== */
/* NOTIFICATIONS         */
/* ====================== */

/* Flash messages */
.rounded-md,
.notification,
.alert {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
}

/* Success messages */
.bg-green-50,
.bg-green-100 {
    background-color: #14532d !important;
    color: #dcfce7 !important;
    border-color: #166534 !important;
}

.text-green-700,
.text-green-800 {
    color: #dcfce7 !important;
}

/* Error messages */
.bg-red-50,
.bg-red-100 {
    background-color: #7f1d1d !important;
    color: #fecaca !important;
    border-color: #991b1b !important;
}

.text-red-700,
.text-red-800 {
    color: #fecaca !important;
}

/* Warning messages */
.bg-yellow-50,
.bg-yellow-100 {
    background-color: #713f12 !important;
    color: #fef3c7 !important;
    border-color: #a16207 !important;
}

.text-yellow-700,
.text-yellow-800 {
    color: #fef3c7 !important;
}

/* Info messages */
.bg-blue-50,
.bg-blue-100 {
    background-color: #1e3a8a !important;
    color: #dbeafe !important;
    border-color: #1d4ed8 !important;
}

.text-blue-700,
.text-blue-800 {
    color: #dbeafe !important;
}

/* ====================== */
/* LOADING STATES        */
/* ====================== */

/* Loading spinner */
.spinner {
    border: 2px solid #334155 !important;
    border-top: 2px solid #3b82f6 !important;
}

/* Skeleton loading */
.skeleton {
    background-color: #334155 !important;
    animation: pulse 2s infinite !important;
}

/* ====================== */
/* SCROLLBARS            */
/* ====================== */

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #0f172a !important;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #475569 !important;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #64748b !important;
}

/* ====================== */
/* LINKS                 */
/* ====================== */

/* Links */
a {
    color: #3b82f6 !important;
    text-decoration: none !important;
}

a:hover {
    color: #60a5fa !important;
    text-decoration: underline !important;
}

/* ====================== */
/* LINE CLAMP UTILITIES  */
/* ====================== */

.line-clamp-2,
.line-clamp-3 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ====================== */
/* ANIMATIONS            */
/* ====================== */

.fade-in {
    animation: fadeIn 0.3s ease-in-out !important;
}

.fade-out {
    animation: fadeOut 0.3s ease-in-out !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

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

/* ====================== */
/* RESPONSIVE            */
/* ====================== */

@media (max-width: 640px) {
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-full {
        width: 100% !important;
    }
}

/* ====================== */
/* CLIENT_IN SPECIFIC     */
/* ====================== */

/* Gradient background for client header */
.gradient-bg {
    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%) !important;
}

/* Glass effect for status indicators */
.glass-effect {
    background: rgba(30, 41, 59, 0.95) !important;
    backdrop-filter: blur(10px) !important;
}

/* Status indicator styling */
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.status-active {
    background-color: #10b981 !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6) !important;
}

.status-inactive {
    background-color: #ef4444 !important;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6) !important;
}

/* Time stepper specific styling */
input[type="number"] {
    appearance: textfield !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    appearance: none !important;
    margin: 0 !important;
}

/* Custom stepper button styles */
.stepper-button {
    background-color: transparent !important;
    border: none !important;
    padding: 0.5rem !important;
    transition: all 0.2s ease !important;
}

.stepper-button:hover {
    background-color: #374151 !important;
    color: #f1f5f9 !important;
}

/* Notification styles for client_in page */
.client-notification {
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 9999 !important;
    max-width: 400px !important;
}

/* Client info card specific styling */
.client-info-card {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 0.5rem !important;
}

.client-info-card h3 {
    color: #f1f5f9 !important;
    border-bottom: 1px solid #334155 !important;
}

.client-info-card .info-row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid #334155 !important;
}

.client-info-card .info-row:last-child {
    border-bottom: none !important;
}

.client-info-card .info-label {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.client-info-card .info-value {
    color: #f1f5f9 !important;
    font-weight: 600 !important;
}

/* Code blocks styling */
code {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    border-radius: 0.25rem !important;
    padding: 0.25rem 0.5rem !important;
    color: #f1f5f9 !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
}

/* Server control panel styling */
.server-control-panel {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 0.75rem !important;
}

.server-control-panel h3 {
    color: #f1f5f9 !important;
    border-bottom: 1px solid #334155 !important;
}

/* Weather and time settings panels */
.settings-panel {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 0.75rem !important;
}

.settings-panel h3 {
    color: #f1f5f9 !important;
    border-bottom: 1px solid #334155 !important;
}

/* Form controls in settings panels */
.settings-panel label {
    color: #cbd5e1 !important;
}

.settings-panel select,
.settings-panel input {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
}

.settings-panel select:focus,
.settings-panel input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Status message styling */
.status-message {
    background-color: #0f172a !important;
    border-left: 4px solid #3b82f6 !important;
    border-radius: 0.375rem !important;
}

.status-message.online {
    border-left-color: #10b981 !important;
}

.status-message.offline {
    border-left-color: #ef4444 !important;
}

.status-message.error {
    border-left-color: #f59e0b !important;
}