:root {
     --bg-primary: #f5f7fb;
     --text-primary: #0f172a;
     --border-color: #e2e8f0;
     --card-bg: #ffffff;
     --button-bg: #2563eb;
     --button-text: #ffffff;
}
 [data-theme="dark"] {
     --bg-primary: #020617;
     --text-primary: #f1f5f9;
     --border-color: #1e293b;
     --card-bg: rgba(15, 23, 42, 0.7);
     --button-bg: linear-gradient(135deg,#2563eb,#4f46e5);
     --button-text: #ffffff;
}

[data-theme="dark"] .analytics-row:hover{
    background: rgba(148,163,184,0.12);
}

.analytics-head{
    background: var(--text-primary);
    color: var(--card-bg );
}

 input, textarea, select, code {
     color: #000000 !important;
}
 body {
     background: var(--bg-primary);
     color: var(--text-primary);
     transition: 0.25s ease;
     padding-top:4rem;
}
 .card {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
}
 .btn-primary {
     background: var(--button-bg);
     color: var(--button-text);
}
 .theme-toggle {
     border: 1px solid var(--border-color);
     padding: 6px 12px;
     border-radius: 8px;
}
/* REAL SYSTEM-STYLE NOTIFICATION */
 @keyframes slideInRight {
     from {
         transform: translateX(120%);
         opacity:0;
    }
     to {
         transform: translateX(0);
         opacity:1;
    }
}
 @keyframes fadeOut {
     from {
         opacity:1;
         transform: translateX(0);
    }
     to {
         opacity:0;
         transform: translateX(120%);
    }
}
 .system-toast {
     position: fixed;
     top: 20px;
     right: 20px;
     width: 320px;
     z-index: 9999;
}
 .toast-item {
     animation: slideInRight 0.35s ease forwards;
}
 .toast-exit {
     animation: fadeOut 0.3s ease forwards;
}
/* Draggable positioning styles */
 .system-toast.dragging {
     cursor: grabbing;
}
 .position-top-left {
     top:20px;
     left:20px;
     right:auto;
}
 .position-top-right {
     top:20px;
     right:20px;
     left:auto;
}
 .position-bottom-left {
     bottom:20px;
     left:20px;
     top:auto;
     right:auto;
}
 .position-bottom-right {
     bottom:20px;
     right:20px;
     top:auto;
     left:auto;
}
/* DARK MODE SYSTEM POPUP */
 .toast-dark {
     background: #020617;
     color: #f1f5f9;
     border: 1px solid #1e293b;
}
 .toast-dark .text-gray-600 {
     color: #94a3b8 !important;
}
 .toast-dark .text-gray-400 {
     color: #64748b !important;
}
/* FULL NOTIFICATION LIFECYCLE STATUS */
 .toast-status {
     font-size:10px;
     margin-left:6px;
     opacity:0.85;
     transition: all 0.35s ease;
}
 .status-delivered {
     color:#64748b;
}
 .status-seen {
     color:#3b82f6;
}
 .status-opened {
     color:#22c55e;
}
 .status-clicked {
     color:#a855f7;
     transform: scale(1.08);
}
/* EXPAND / COLLAPSE SIMULATION */
 .toast-collapsed .toast-extra {
     display: none;
}
 .toast-expanded {
     transform: scale(1.02);
}
 .expand-indicator {
     font-size: 10px;
     opacity: 0.6;
     cursor: pointer;
}
/* ACTION BUTTONS */
 .toast-actions {
     display:flex;
     gap:8px;
     margin-top:8px;
}
 .toast-btn {
     font-size:11px;
     padding:4px 8px;
     border-radius:6px;
     cursor:pointer;
     border:1px solid rgba(0,0,0,0.1);
     background:#f1f5f9;
}
 .modal-cancel {
     background: transparent;
     border: 1px solid var(--border-color);
     color: var(--text-primary);
     transition: background 0.2s ease;
}
 .modal-cancel:hover {
     background: var(--border-color);
}
 .toast-dark .toast-btn {
     background:#0f172a;
     border:1px solid #1e293b;
     color:#f1f5f9;
}
 .toast-dark .text-gray-600 {
     color: #94a3b8 !important;
}
 .toast-dark .text-gray-400 {
     color: #64748b !important;
}
/* hide dark logo by default */
 .logo_dark {
     display: none;
}
/* show dark logo when dark theme is active */
 [data-theme="dark"] .logo_light {
     display: none;
}
 [data-theme="dark"] .logo_dark {
     display: block;
}
/* hide sun icon by default */
 .dark-icon{
     display:none;
}
/* when dark mode is active */
 [data-theme="dark"] .light-icon{
     display:none;
}
 [data-theme="dark"] .dark-icon{
     display:inline;
}
 .theme-toggle{
     display:flex;
     align-items:center;
     justify-content:center;
     font-size:18px;
}
 .dashboard-header{
     position: fixed;
     top:0;
     left:0;
     width:100%;
     z-index:1000;
     backdrop-filter: blur(10px);
     box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
 .auth-logo img{
     height:48px;
}

.analytics-row:hover{
    background: rgba(100,116,139,0.12);
}