/* A1MASK:  Dark Mode Fixes for articleOne Platform */
/* A1MASK:  This file addresses systematic dark mode color issues across the platform */

/* A1MASK:  ========================================
   UNIVERSAL DARK MODE COLOR HIERARCHY
   ======================================== */

/* A1MASK:  Base page background - darkest */
.dark {
    background-color: #0f172a !important; /* A1MASK:  slate-900 */
}

/* A1MASK:  Fix for custom bg-slate-25 color */
.dark .bg-slate-25 {
    background-color: #0f172a !important; /* A1MASK:  slate-900 */
}

/* A1MASK:  Fix malformed dark mode classes */
.darkbg-slate-900,
.darkslate-900,
.darkbg-slate-800,
.darkslate-800 {
    /* A1MASK:  These are malformed - ignore them */
    background-color: inherit !important;
}

/* A1MASK:  Main content areas - same as base to avoid visible separation */
.dark main,
.dark .main-content,
.dark [role="main"] {
    background-color: #0f172a !important; /* A1MASK:  slate-900 - same as base */
}

/* A1MASK:  Cards, panels, and active UI spaces - lighter for hierarchy */
.dark .bg-white,
.dark .bg-gray-50,
.dark .bg-slate-50,
.dark [class*="card"],
.dark [class*="panel"] {
    background-color: #334155 !important; /* A1MASK:  slate-700 */
    color: #f1f5f9 !important; /* A1MASK:  slate-100 */
}

/* A1MASK:  Interactive elements (buttons, form controls) */
.dark .bg-gray-100,
.dark .bg-slate-100 {
    background-color: #475569 !important; /* A1MASK:  slate-600 */
    color: #f1f5f9 !important; /* A1MASK:  slate-100 */
}

/* A1MASK:  Hover states */
.dark .hover\:bg-gray-100:hover,
.dark .hover\:bg-slate-100:hover {
    background-color: #475569 !important; /* A1MASK:  slate-600 */
}

.dark .hover\:bg-gray-200:hover,
.dark .hover\:bg-slate-200:hover {
    background-color: #64748b !important; /* A1MASK:  slate-500 */
}

/* A1MASK:  Active/focused states */
.dark .bg-gray-200,
.dark .bg-slate-200 {
    background-color: #64748b !important; /* A1MASK:  slate-500 */
    color: #f8fafc !important; /* A1MASK:  slate-50 */
}

/* A1MASK:  ========================================
   UNIVERSAL TABLE STYLING
   ======================================== */

/* A1MASK:  All tables should have consistent dark mode styling */
.dark table {
    background-color: #334155 !important; /* A1MASK:  slate-700 - same as cards */
}

/* A1MASK:  Table headers should be darker than body for hierarchy */
.dark table thead th,
.dark th {
    background-color: #1e293b !important; /* A1MASK:  slate-800 */
    color: #f8fafc !important; /* A1MASK:  slate-50 - white text */
    border-color: #475569 !important; /* A1MASK:  slate-600 */
}

/* A1MASK:  Table body rows */
.dark table tbody tr {
    background-color: #334155 !important; /* A1MASK:  slate-700 */
    border-color: #475569 !important; /* A1MASK:  slate-600 */
}

/* A1MASK:  Zebra striping for better readability */
.dark table tbody tr:nth-child(even) {
    background-color: #2d3f57 !important; /* A1MASK:  slightly darker than slate-700 */
}

/* A1MASK:  Table hover states */
.dark table tbody tr:hover {
    background-color: #475569 !important; /* A1MASK:  slate-600 */
}

/* A1MASK:  ========================================
   TEXT COLOR HIERARCHY
   ======================================== */

/* A1MASK:  Primary text - high contrast */
.dark,
.dark body {
    color: #f1f5f9 !important; /* A1MASK:  slate-100 */
}

/* A1MASK:  Headings - maximum contrast */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
    color: #f8fafc !important; /* A1MASK:  slate-50 */
}

/* A1MASK:  Secondary text */
.dark .text-gray-600,
.dark .text-slate-600 {
    color: #94a3b8 !important; /* A1MASK:  slate-400 */
}

/* A1MASK:  Muted text */
.dark .text-gray-500,
.dark .text-slate-500 {
    color: #64748b !important; /* A1MASK:  slate-500 */
}

/* A1MASK:  ======================================== 
BORDER COLORS 
======================================== */



.dark .border-gray-200,
.dark .border-slate-200 {
    border-color: #475569 !important; /* A1MASK:  slate-600 */
}

.dark .border-gray-300,
.dark .border-slate-300 {
    border-color: #334155 !important; /* A1MASK:  slate-700 */
}

.dark .divide-gray-200 > *,
.dark .divide-slate-200 > * {
    border-color: #475569 !important; /* A1MASK:  slate-600 */
}

/* A1MASK:  ========================================
   FORM ELEMENTS
   ======================================== */

.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="search"],
.dark textarea,
.dark select {
    background-color: #374151 !important; /* A1MASK:  gray-700 - darker, matches Member */
    border-color: #475569 !important; /* A1MASK:  slate-600 for contrast */
    color: #f1f5f9 !important; /* A1MASK:  slate-100 */
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="search"]:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #3b82f6 !important; /* A1MASK:  blue-500 */
    outline: none !important;
}

/* A1MASK:  ========================================
   BUTTON STYLES
   ======================================== */

/* A1MASK:  Primary buttons maintain their colors */
.dark .bg-blue-500,
.dark .bg-blue-600 {
    /* A1MASK:  Keep original colors for primary actions */
}

/* A1MASK:  Secondary buttons */
.dark .bg-gray-200 {
    background-color: #475569 !important; /* A1MASK:  slate-600 */
    color: #f1f5f9 !important; /* A1MASK:  slate-100 */
}

/* A1MASK:  ========================================
   DROPDOWN AND MODAL BACKGROUNDS
   ======================================== */

.dark .dropdown-menu,
.dark [role="menu"],
.dark .modal-content {
    background-color: #334155 !important; /* A1MASK:  slate-700 */
    border-color: #475569 !important; /* A1MASK:  slate-600 */
}

/* A1MASK:  ========================================
   SPECIFIC COMPONENT FIXES
   ======================================== */

/* A1MASK:  MemoBuilder specific fixes */
.dark .memo-container,
.dark .memo-form,
.dark .memo-preview {
    background-color: #334155 !important; /* A1MASK:  slate-700 */
    color: #f1f5f9 !important; /* A1MASK:  slate-100 */
}

.dark .memo-input,
.dark .memo-textarea {
    background-color: #374151 !important; /* A1MASK:  gray-700 */
    border-color: #475569 !important; /* A1MASK:  slate-600 */
    color: #f1f5f9 !important; /* A1MASK:  slate-100 */
}

/* A1MASK:  PolicyStream feed items */
.dark .feed-item,
.dark .policy-card {
    background-color: #334155 !important; /* A1MASK:  slate-700 */
    border-color: #475569 !important; /* A1MASK:  slate-600 */
}

/* A1MASK:  Research threads */
.dark .thread-item,
.dark .research-card {
    background-color: #334155 !important; /* A1MASK:  slate-700 */
}

/* A1MASK:  Live alerts dashboard */
.dark .alert-item,
.dark .keyword-item {
    background-color: #334155 !important; /* A1MASK:  slate-700 */
}

/* A1MASK:  ========================================
   ELLIPSIS DASHBOARD SPECIFIC FIXES
   ======================================== */

/* A1MASK:  Table styling in Ellipsis dashboard */
.dark #your-keywords-table {
    background-color: #334155 !important; /* A1MASK:  slate-700 */
}

.dark #your-keywords-table thead {
    background-color: #1e293b !important; /* A1MASK:  slate-800 */
}

.dark #your-keywords-table th {
    color: #f8fafc !important; /* A1MASK:  slate-50 */
    border-color: #475569 !important; /* A1MASK:  slate-600 */
}

.dark #your-keywords-table tbody tr {
    background-color: transparent !important;
    border-color: #475569 !important; /* A1MASK:  slate-600 */
}

.dark #your-keywords-table tbody tr:hover {
    background-color: rgba(71, 85, 105, 0.3) !important; /* A1MASK:  slate-600 with transparency */
}

/* A1MASK:  Surfaced alerts table */
.dark #surfaced-alerts-table {
    background-color: #334155 !important; /* A1MASK:  slate-700 */
}

.dark #surfaced-alerts-table thead {
    background-color: #1e293b !important; /* A1MASK:  slate-800 */
}

.dark #surfaced-alerts-table th {
    color: #f8fafc !important; /* A1MASK:  slate-50 */
    border-color: #475569 !important; /* A1MASK:  slate-600 */
}

.dark #surfaced-alerts-table tbody tr {
    background-color: transparent !important;
    border-color: #475569 !important; /* A1MASK:  slate-600 */
}

.dark #surfaced-alerts-table tbody tr:hover {
    background-color: rgba(71, 85, 105, 0.3) !important; /* A1MASK:  slate-600 with transparency */
}

/* A1MASK:  Live Congressional Alerts specific */
.dark .divide-slate-700 {
    border-color: #475569 !important; /* A1MASK:  slate-600 */
}

.dark thead.bg-slate-800\/60 {
    background-color: #1e293b !important; /* A1MASK:  slate-800 solid */
}

.dark thead.bg-slate-800\/60 th {
    color: #f8fafc !important; /* A1MASK:  slate-50 */
}

.dark #surfaced-alerts-tbody {
    background-color: transparent !important;
}

.dark #surfaced-alerts-tbody tr {
    background-color: #334155 !important; /* A1MASK:  slate-700 */
}

.dark #surfaced-alerts-tbody tr:hover {
    background-color: #475569 !important; /* A1MASK:  slate-600 */
}

/* A1MASK:  Your Keywords table */
.dark thead.bg-slate-50 {
    background-color: #1e293b !important; /* A1MASK:  slate-800 */
}

.dark thead.bg-slate-50 th {
    color: #f8fafc !important; /* A1MASK:  slate-50 */
}

.dark #keyword-alerts-tbody {
    background-color: transparent !important;
}

.dark #keyword-alerts-tbody tr {
    background-color: #334155 !important; /* A1MASK:  slate-700 */
}

.dark #keyword-alerts-tbody tr:hover {
    background-color: #475569 !important; /* A1MASK:  slate-600 */
}

/* A1MASK:  Fix specific text colors in tables */
.dark .text-slate-300 {
    color: #cbd5e1 !important; /* A1MASK:  slate-300 */
}

.dark .text-slate-500 {
    color: #94a3b8 !important; /* A1MASK:  slate-400 */
}

.dark #surfaced-alerts-table tbody tr {
    background-color: transparent !important;
}

.dark #surfaced-alerts-table tbody tr:hover {
    background-color: rgba(30, 41, 59, 0.5) !important; /* A1MASK:  slate-800 with transparency */
}

/* A1MASK:  ========================================
   LIGHT MODE BUILDER INPUT LEGIBILITY
   Ensure typed text is darker than placeholder in builders/forms
   ======================================== */
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="search"],
.form textarea,
.form select {
    color: #0f172a !important; /* slate-900 */
}

.form ::placeholder {
    color: #94a3b8 !important; /* slate-400 */
    opacity: 1; /* ensure consistent contrast across browsers */
}