/* ============================================================= Twilio Light Theme (body.light) - Preserves existing Finance Dark UI as default/dark - Apply by setting in your layout ============================================================= */ /* Base layout (unchanged) */ html, body { height: 100%; } body { min-height: 100vh; display: flex; flex-direction: column; } /* Sticky footer layout extras */ .main-content { flex: 1 0 auto; /* fills remaining height */ } .footer { margin-top: auto; /* pins to bottom when content is short */ flex-shrink: 0; } body.light .alert-secondary { background: #eef2f7; color: #1e2a4a; } /* Light mode */ body.light .alert-info { background: #e0f2fe; color: #075985; border-color: rgba(56, 189, 248, 0.4); box-shadow: 0 4px 14px rgba(56, 189, 248, 0.25); } /* Light Mode Design Tokens (Twilio-inspired) */ body.light{ --bg-0:#f4f6fb; /* overall page */ --bg-1:#ffffff; /* cards */ --bg-2:#eef1f9; /* subtle panels / strips */ --text:#111827; /* primary text */ --muted:#6b7280; /* secondary text */ --border:rgba(15,23,42,.08); --shadow:rgba(15,23,42,.12); --primary:#0254e8; /* Twilio-ish blue */ --primary-soft:#e0edff; --accent-red:#f22f46; /* Twilio brand red */ } /* Headings & body text in light mode */ body.light h1, body.light h2, body.light h3, body.light h4, body.light h5{ color:#111827 !important; font-weight:600; } body.light .small, body.light .text-muted{ color:var(--muted) !important; } /* Links */ body.light a{ color:#0254e8; } body.light a:hover{ color:#023db0; } /* Navbar (top bar) */ body.light .navbar{ background:#050b1f !important; border-bottom:1px solid rgba(15,23,42,.7) !important; box-shadow:0 8px 24px rgba(15,23,42,.45); } body.light .navbar .navbar-brand, body.light .navbar .nav-link{ color:#e5e7eb !important; } body.light .navbar .nav-link:hover{ color:#ffffff !important; } /* Main page background */ body.light, body.light html{ background:var(--bg-0); color:var(--text); } /* Cards */ body.light .card{ background:#ffffff !important; border-radius:18px !important; border:1px solid var(--border) !important; box-shadow:0 18px 45px rgba(15,23,42,.12) !important; color:var(--text) !important; } body.light .card-header, body.light .card-footer{ background:#ffffff !important; border-color:var(--border) !important; color:#111827 !important; } body.light .card-title{ color:#111827 !important; } /* Prominent banner-style card (like Twilio “Connected to your Twilio account”) */ body.light .card.twilio-banner, body.light .card .twilio-banner{ background:#0b1020 !important; color:#f9fafb !important; border:none !important; box-shadow:0 20px 50px rgba(15,23,42,.6) !important; } /* Forms */ body.light .form-control, body.light input[type="text"], body.light input[type="email"], body.light input[type="password"], body.light input[type="number"], body.light textarea, body.light .form-select{ background:#ffffff !important; border:1px solid #cbd5e1 !important; color:#111827 !important; border-radius:10px !important; box-shadow:none !important; } body.light .form-control::placeholder, body.light .form-select::placeholder, body.light textarea::placeholder{ color:#9ca3af !important; } body.light .form-control:focus, body.light .form-select:focus, body.light textarea:focus{ border-color:#0254e8 !important; box-shadow:0 0 0 .15rem rgba(2,84,232,.25) !important; background:#ffffff !important; color:#111827 !important; } body.light .input-group-text{ background:#f3f4f6 !important; border:1px solid #cbd5e1 !important; color:#4b5563 !important; } /* Buttons */ body.light .btn{ border-radius:999px; font-weight:600; letter-spacing:.02em; } body.light .btn-primary{ background:#0254e8 !important; border-color:#0246c0 !important; color:#ffffff !important; box-shadow:0 8px 20px rgba(2,84,232,.45); } body.light .btn-primary:hover{ background:#0246c0 !important; } body.light .btn-secondary{ background:#eef1f9 !important; border-color:#d4daea !important; color:#111827 !important; } body.light .btn-outline-primary{ background:#ffffff !important; color:#0254e8 !important; border-color:#0254e8 !important; } body.light .btn-outline-primary:hover{ background:#0254e8; color:#ffffff; } /* Pills / badges */ body.light .badge{ border-radius:999px; } body.light .badge-primary{ background:#0254e8; } body.light .badge-success{ background:#0f766e; } body.light .badge-danger{ background:#f22f46; } /* Tables */ body.light .table{ color:#111827 !important; background:#ffffff !important; } body.light .table thead th{ background:#f9fafb !important; color:#374151 !important; border-color:var(--border) !important; } body.light .table tbody tr:nth-of-type(odd){ background:#ffffff !important; } body.light .table tbody tr:hover{ background:#f5f8ff !important; } /* DataTables controls */ body.light .dataTables_wrapper{ color:#111827; } body.light .dataTables_filter label, body.light .dataTables_length label, body.light .dataTables_info{ color:#6b7280; } body.light .dataTables_filter input, body.light .dataTables_length select{ background:#ffffff; border:1px solid #cbd5e1; color:#111827; } body.light .dataTables_filter input:focus{ border-color:#0254e8; box-shadow:0 0 0 .12rem rgba(2,84,232,.25); } body.light .dataTables_paginate .page-item.active .page-link{ background:#0254e8; color:#ffffff; box-shadow:0 0 10px rgba(2,84,232,.35); } /* Alerts */ body.light .alert{ border-radius:12px; border:1px solid var(--border); box-shadow:0 8px 24px rgba(15,23,42,.06); } body.light .alert-primary{ background:#e0edff; color:#032c8c; border-color:#c7dcff; } body.light .alert-success{ background:#d1fae5; color:#065f46; border-color:#6ee7b7; } body.light .alert-danger{ background:#fee2e2; color:#991b1b; border-color:#fecaca; } /* Footer */ body.light .footer{ background:transparent; border-top:1px solid var(--border) !important; color:#6b7280; } /* Left “nav” / dark strips (if you introduce them later) stay navy */ body.light .bg-dark, body.light .bg-panel{ background:rgb(18, 28, 45) !important; color:#e5e7eb !important; } /* Ensure generic global dark styles don’t wash out light mode headings */ body.light .stat-title, body.light .field-note, body.light .text-faint{ color:var(--muted) !important; } /* ===== Twilio Light: fix modals + tab content ===== */ /* Modals that use .bg-dark should become white in light theme */ body.light .modal-content.bg-dark { background:#ffffff !important; color:var(--text) !important; box-shadow:0 18px 45px var(--shadow); } /* Remove the dark gradient overlay from bg-dark when used on modals */ body.light .modal-content.bg-dark::before { content:none !important; } /* Modal header/footer borders in light mode */ body.light .modal-content.bg-dark .modal-header, body.light .modal-content.bg-dark .modal-footer { border-color:var(--border) !important; } /* Tabs: your global .tab-content is dark; override for light theme */ body.light .tab-content { background:#ffffff !important; box-shadow:none !important; border-radius:0 0 .75rem .75rem !important; } body.light .bg-secondary { background: #e9edf3 !important; color: #2e3a46 !important; border: 1px solid rgba(0,0,0,.08) !important; } /* Twilio-style form labels in light mode */ body.light .form-label { color: #2e3a46 !important; /* Twilio console label text */ font-weight: 600; /* keep same weight for consistency */ } /* =========================================================== LIGHT MODE — RESET TABLE / DATATABLES SURFACES =========================================================== */ body.light .table-dark, body.light .dataTables_wrapper, body.light .table-responsive, body.light .dataTable, body.light table.table-dark { background: #f8fafc !important; /* soft Twilio bg */ color: #1e293b !important; /* readable dark */ } /* Card-inside table alignment */ body.light #jobsTable_wrapper { background: #f8fafc !important; border-radius: 0.75rem; } /* THEAD */ body.light table.table-dark thead th { background: #f1f5f9 !important; border-bottom: 1px solid rgba(0,0,0,.07) !important; color: #334155 !important; /* readable but soft */ font-weight: 600; } /* BODY ROWS */ body.light table.table-dark tbody tr { background: #ffffff !important; /* white for clean contrast */ color: #1e293b !important; } body.light table.table-dark tbody tr:nth-child(odd) { background: #fafafa !important; } /* Hover */ body.light table.table-dark tbody tr:hover { background: #eef2f6 !important; } /* No data row */ body.light table.table-dark .dataTables_empty { background: #ffffff !important; color: #64748b !important; } /* =========================================================== Light Mode — LENGTH + SEARCH BOX =========================================================== */ body.light .dataTables_filter label, body.light .dataTables_length label { color: #334155 !important; } body.light .dataTables_filter input, body.light .dataTables_length select { background: #ffffff !important; border: 1px solid rgba(0,0,0,.15) !important; color: #1e293b !important; border-radius: 0.5rem !important; } /* Focus */ body.light .dataTables_filter input:focus, body.light .dataTables_length select:focus { border-color: #3b82f6 !important; /* Twilio blue */ box-shadow: 0 0 0 0.15rem rgba(59,130,246,.25) !important; } /* =========================================================== PAGINATION =========================================================== */ body.light .dataTables_paginate .page-link { background: #ffffff !important; border: 1px solid rgba(0,0,0,.1) !important; color: #334155 !important; border-radius: 0.5rem; } body.light .dataTables_paginate .page-link:hover { background: #f1f5f9 !important; color: #1e293b !important; } /* =========================================================== LIGHT MODE — FIX PAGINATION BUTTONS =========================================================== */ /* Base pagination button */ body.light .dataTables_paginate .page-item .page-link { background: #ffffff !important; border: 1px solid rgba(0,0,0,.12) !important; color: #475569 !important; /* Twilio gray-600 */ border-radius: 0.5rem !important; box-shadow: none !important; /* remove dark inset shadow */ padding: 0.35rem 0.75rem !important; font-weight: 500; } /* Hover */ body.light .dataTables_paginate .page-item .page-link:hover { background: #f1f5f9 !important; /* soft hover */ color: #1e293b !important; border-color: rgba(0,0,0,.15) !important; } /* Active (current page) */ body.light .dataTables_paginate .page-item.active .page-link { background: #3b82f6 !important; /* Twilio blue */ border-color: #3b82f6 !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(59,130,246,.25) !important; } /* Disabled */ body.light .dataTables_paginate .page-item.disabled .page-link { background: #e2e8f0 !important; /* slate-200 */ border-color: rgba(0,0,0,.08) !important; color: #94a3b8 !important; /* gray-400 */ } /* ============================================================ LIGHT MODE — DATATABLES PAGINATION BUTTONS (Twilio theme) ============================================================ */ body.light .dataTables_paginate .paginate_button { background: #ffffff !important; /* clean white button */ color: #334155 !important; /* slate-700 text */ border: 1px solid rgba(0,0,0,.12) !important; /* soft neutral border */ border-radius: 8px !important; padding: .35rem .7rem !important; margin: 0 .15rem !important; box-shadow: none !important; transition: all .15s ease-in-out; } /* Hover */ body.light .dataTables_paginate .paginate_button:hover { background: #f1f5f9 !important; /* slate-100 hover */ color: #1e293b !important; /* slate-800 */ border-color: rgba(0,0,0,.18) !important; } /* Active (current page) */ body.light .dataTables_paginate .paginate_button.current { background: #3b82f6 !important; /* Twilio blue */ color: #ffffff !important; border-color: #3b82f6 !important; box-shadow: 0 2px 6px rgba(59,130,246,.25) !important; } /* Disabled */ body.light .dataTables_paginate .paginate_button.disabled, body.light .dataTables_paginate .paginate_button.disabled:hover { background: #e2e8f0 !important; /* slate-200 */ border-color: rgba(0,0,0,.08) !important; color: #94a3b8 !important; /* slate-400 */ cursor: default !important; box-shadow: none !important; } /* =========================================================== SORTING ICONS =========================================================== */ body.light table.table-dark th.sorting::after { content: "\f0dc"; opacity: .4; color: #475569 !important; font-family: "Font Awesome 5 Free"; font-weight: 900; } body.light table.table-dark th.sorting_asc::after { content: "\f0de"; color: #3b82f6 !important; } body.light table.table-dark th.sorting_desc::after { content: "\f0dd"; color: #3b82f6 !important; } /* End Twilio light overrides */ /* ============================================================= */ /* =========================================================== LIGHT MODE — CARD + DATATABLE CONTAINER FIX =========================================================== */ /* Card wrapper (the dark navy box around the table) */ body.light .card { background: #ffffff !important; border: 1px solid rgba(0,0,0,.06) !important; box-shadow: 0 8px 24px rgba(15,23,42,.06) !important; } /* The inner wrapper still keeping dark-mode colors */ body.light .dataTables_wrapper { background: #ffffff !important; color: #1e293b !important; } /* The top controls row */ body.light #jobsTable_wrapper .row > div { background: #ffffff !important; color: #1e293b !important; } /* “Show 10 per page” text */ body.light #jobsTable_length label { color: #334155 !important; } /* Search label text */ body.light #jobsTable_filter label { color: #334155 !important; } /* Remove dark background from table-responsive */ body.light .table-responsive { background: #ffffff !important; } /* Remove dark background from bottom paginate bar */ body.light #jobsTable_paginate { background: #ffffff !important; } /* Pagination buttons */ body.light #jobsTable_paginate .page-link { background: #ffffff !important; border: 1px solid rgba(0,0,0,.1) !important; color: #475569 !important; } body.light #jobsTable_paginate .page-link:hover { background: #f1f5f9 !important; } /* Disabled pagination buttons look dark currently – fix */ body.light #jobsTable_paginate .page-item.disabled .page-link { background: #e2e8f0 !important; color: #94a3b8 !important; } /* Fix the transparent row background “strip” behind the table */ body.light #jobsTable_wrapper .dataTables_scroll { background: #ffffff !important; } /* Scrollbar track inside the bottom div */ body.light .dataTables_scrollBody::-webkit-scrollbar-track { background: #f1f5f9 !important; } body.light .dataTables_scrollBody::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 4px; } /* ============================================================ LIGHT MODE — Twilio-style ACTIVE TAB ============================================================ */ body.light .nav-tabs .nav-link.active, body.light .nav-tabs .nav-item.show .nav-link { color: #0f172a !important; /* slate-900 */ background: #ffffff !important; /* clean white tab */ border: 1px solid rgba(0,0,0,.12) !important; /* soft gray border */ border-bottom-color: transparent !important; /* seamless into panel */ box-shadow: inset 0 -3px 0 #3b82f6 !important; /* Twilio blue highlight */ position: relative; z-index: 2; font-weight: 600; /* crisp Twilio look */ } /* Inactive tabs */ body.light .nav-tabs .nav-link { color: #475569 !important; /* slate-600 */ background: #f8fafc !important; /* slate-50 */ border: 1px solid rgba(0,0,0,.08) !important; } /* Hover */ body.light .nav-tabs .nav-link:hover { color: #1e293b !important; /* slate-800 */ background: #f1f5f9 !important; /* slate-100 */ border-color: rgba(0,0,0,.15) !important; } body.light .bg-dark, body.light .bg-dark h1, body.light .bg-dark h2, body.light .bg-dark h3, body.light .bg-dark h4, body.light .bg-dark h5, body.light .bg-dark p, body.light .bg-dark a, body.light .bg-dark .text-light, body.light .bg-dark .nav-link, body.light .bg-dark .card-title, body.light .bg-dark label, body.light .bg-dark span, body.light .bg-dark small { color: #1e293b; } body.light .bg-dark .badge { color: #e6edf3; !important; } body.dark .border{ border: 1px solid var(--border) !important; } /* ===== Finance Dark UI (Bootstrap 4 overrides) ===== */ :root{ --bg-0:#0e1320; /* page */ --bg-1:#121827; /* panels */ --bg-2:#172039; /* deeper panels */ --text:#e6edf3; --muted:#8b98a5; --border:rgba(255,255,255,.06); --shadow:rgba(0,0,0,.55); --primary:#60a5fa; /* blue */ --success:#22c55e; /* green */ --warning:#f59e0b; /* amber */ --danger:#ef4444; /* red */ --purple:#a78bfa; /* violet */ --teal:#2dd4bf; /* aqua */ } .text-dark{color:#000;} html,body{background:var(--bg-0); color:var(--text); -webkit-font-smoothing:antialiased; font-smooth:always;} a{color:var(--primary);} a:hover{color:#93c5fd; text-decoration:none;} /* Headings */ h1,h2,h3,h4,h5{color:#f3f5f7; font-weight:600;} .text-muted{color:var(--muted)!important} body.dark .btn-outline-primary:not(:disabled):not(.disabled).active, body.dark .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle{ background: #1e3a8a; border-color: #1e3a8a; } /* Dark mode dropdown styling */ body.dark .dropdown-menu { background-color: var(--bg-1); border: 1px solid var(--bg-2); color: var(--text-1); } body.dark .dropdown-item { color: var(--text-1); } body.dark .dropdown-item:hover, body.dark .dropdown-item:focus { background-color: var(--bg-2); color: var(--text-1); } body.dark .dropdown-divider { border: var(--border) !important; } /* Danger item */ body.dark .dropdown-item.text-danger { color: #ff6b6b !important; } body.dark .dropdown-item.text-danger:hover { background-color: rgba(255, 107, 107, 0.15) !important; } /* Navbar */ .navbar{background:linear-gradient(180deg, #0f1628 0%, #0d1221 100%); border-bottom:1px solid var(--border) !important;} .navbar .navbar-brand, .navbar .nav-link{color:#cfd6e4!important;} .navbar .nav-link:hover{color:#fff!important} /* Cards */ .card{ background:linear-gradient(180deg, var(--bg-1), var(--bg-2)); border:1px solid var(--border); border-radius:14px; box-shadow:0 6px 20px var(--shadow), inset 0 1px 0 rgba(255,255,255,.04); color:var(--text); } .card-header, .card-footer{ background:transparent; border-color:var(--border); color:#cdd5e5; } .card-title{font-weight:600; letter-spacing:.2px;} .dashboard-card .card-body{padding:1.1rem 1.2rem} /* Lists (Transactions / Recurring) */ .list-group{background:transparent;} .list-group-item{ background:transparent; border-color:var(--border); color:var(--text); } .list-group-item:hover{background:#0f1a30} /* Tables */ .table{color:var(--text);} .table thead th{border-bottom:1px solid var(--border); color:#cfd6e4; font-weight:600;} .table td, .table th{border-color:var(--border);} .table-hover tbody tr:hover{background:#121b33; color:#ffffff;} .table-striped tbody tr:nth-of-type(odd){background-color:rgba(255,255,255,.015);} /* Forms */ .form-control{ background:#0f1730; border:1px solid var(--border); color:var(--text); border-radius:10px; } .form-control:focus{ background:#101a35; color:#fff; border-color:#274fef; box-shadow:0 0 0 .14rem rgba(39,79,239,.25); } .custom-select{background:#0f1730; color:var(--text); border-color:var(--border);} /* Buttons */ .btn{border-radius:10px; font-weight:600; letter-spacing:.2px;} .btn-primary{background:linear-gradient(180deg,#3b82f6,#1d4ed8); border:1px solid #1e40af;} .btn-outline-primary{color:#93c5fd; border-color:#1e3a8a;} .btn-outline-primary:hover{background:#1e3a8a;border-color:#1e3a8a;color:#fff;} .btn-success{background:linear-gradient(180deg,#22c55e,#16a34a); border-color:#15803d;} .btn-secondary{background:#1b2438; border-color:var(--border); color:#cfd6e4;} .btn-light{background:#0f1730; color:#e5eaf2; border-color:var(--border);} /* Badges / Pills */ .badge{border-radius:999px; padding:.35rem .55rem; font-weight:600;} .badge-primary{background:#1e40af;} .badge-success{background:#166534;} .badge-warning{background:#b45309; color:#111827;} .badge-danger{background:#7f1d1d;} .badge-purple{background:#5b21b6;} .badge-teal{background:#115e59;} /* Progress (for “Monthly Income”, progress bars, etc.) */ .progress{ height:8px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--border); } .progress-bar{background:linear-gradient(90deg,var(--teal),var(--success));} /* Mini KPI blocks */ .stat-title{font-size:.85rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;} .stat-value{font-size:1.6rem; font-weight:700; color:#f8fafc;} .stat-delta{font-size:.9rem; font-weight:700;} .stat-delta.up{color:var(--success);} .stat-delta.down{color:#f87171;} /* “Top Categories” bars (lightweight without JS) */ .category-row{display:flex; align-items:center; justify-content:space-between; margin:.45rem 0;} .category-row .bar{ flex:1; height:8px; margin:0 .75rem; background:#0f1730; border-radius:999px; position:relative; box-shadow:inset 0 0 0 1px var(--border); } .category-row .bar > span{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,#1dd1a1,#10b981); } /* Sparkline/line-chart containers (if you drop in canvases/SVGs) */ .sparkline, .mini-chart{ height:120px; width:100%; display:block; position:relative; } .sparkline .accent-point{ position:absolute; right:8px; bottom:14px; background:#052e1b; color:#a7f3d0; border:1px solid rgba(16,185,129,.45); border-radius:6px; padding:.15rem .4rem; font-size:.75rem; } /* Pills used in “Transactions to Review” */ .txn-pill{ display:inline-flex; align-items:center; padding:.2rem .5rem; border-radius:999px; background:#0f1730; border:1px solid var(--border); color:#9fb3c8; font-weight:600; font-size:.75rem; } .txn-pill i{margin-right:.35rem; opacity:.85} /* Right-rail “Next Two Weeks” schedule look */ .recurring-label{font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);} .recurring-item{display:flex; align-items:center; justify-content:space-between; padding:.45rem .25rem; border-bottom:1px dashed var(--border);} .recurring-item:last-child{border-bottom:none;} .recurring-item .brand{display:flex; align-items:center;} .recurring-item .brand i{margin-right:.5rem; opacity:.8;} .recurring-item .amount{font-weight:700; color:#dbe7ff;} /* Alerts */ .alert{border-radius:12px; border:1px solid var(--border); box-shadow:0 4px 14px var(--shadow);} .alert-success{background:#072217; color:#b6f3cd; border-color:rgba(16,185,129,.25);} .alert-secondary{background:#0f1730; color:#c2cbe0;} /* Utilities */ .bg-panel{background:var(--bg-1)!important} .text-faint{color:#9aa7ba!important} .hr-soft{border-top:1px solid var(--border) !important;} .shadow-soft{box-shadow:0 10px 30px var(--shadow)!important} /* Optional: make checkboxes/radios visible on dark */ .custom-control-input:focus ~ .custom-control-label::before{box-shadow:0 0 0 .14rem rgba(39,79,239,.25);} .custom-control-input:checked ~ .custom-control-label::before{border-color:#3b82f6; background:#3b82f6;} .custom-control-label{color:var(--text);} /* Footer */ .footer{border-top:1px solid var(--border) !important; color:var(--muted); background:transparent;} /* ==== bg-dark enhancement ==== */ .bg-secondary { background: linear-gradient(180deg, #0f1628 0%, #0d1221 100%) !important; color: #e6edf3; } .bg-secondary-border{ border: 1px solid rgba(255,255,255,.06); box-shadow: 0 4px 18px rgba(0,0,0,.45); } /* ==== bg-dark enhancement ==== */ .bg-dark { background: linear-gradient(180deg, #0f1628 0%, #0d1221 100%) !important; color: #e6edf3; } .bg-dark-border{ border: 1px solid rgba(255,255,255,.06); box-shadow: 0 4px 18px rgba(0,0,0,.45); } /* Give child text and icons the correct tone */ .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark p, .bg-dark .text-light, .bg-dark .nav-link, .bg-dark .card-title, .bg-dark label, .bg-dark span, .bg-dark small { color: #e6edf3; } /* Muted text tone inside dark sections */ .bg-dark .text-muted { color: #9ba8ba; } /* Buttons that appear inside dark cards or navbars */ .bg-dark .btn { border-radius: 10px; font-weight: 600; letter-spacing: .2px; } .bg-dark .btn-primary { background: linear-gradient(180deg, #3b82f6, #1d4ed8); border-color: #1e40af; color: #fff; } .bg-dark .btn-outline-light { color: #e6edf3; border-color: rgba(255,255,255,.25); } .imessage-thread { display: flex; justify-content: flex-start; width: 100%; } .imessage-bubble { border-radius: 20px; padding: 10px 16px; display: inline-block; position: relative; word-break: break-word; font-size: 0.95rem; line-height: 1.4; } /* OUTGOING (blue bubble) */ .imessage-bubble.outgoing { align-self: flex-end; color: #fff; background: linear-gradient(to bottom, #0a84ff 0%, #0077e6 100%); background-attachment: fixed; } /* iOS overlapping tail – RIGHT SIDE */ .imessage-bubble.outgoing.last:before { content: ""; position: absolute; z-index: 0; bottom: 0; right: -8px; height: 20px; width: 20px; background: inherit; border-bottom-left-radius: 16px; } .imessage-bubble.outgoing.last:after { content: ""; position: absolute; z-index: 1; bottom: 0; right: -10px; width: 10px; height: 20px; background: var(--bg-2); border-bottom-left-radius: 10px; } .bg-black{background-color:#000;} .bg-dark .btn-outline-light:hover { background: rgba(255,255,255,.1); color: #fff; } /* Links inside dark sections */ .bg-dark a:not(.btn) { color: #93c5fd; } .bg-dark a:hover:not(.btn) { color: #bfdbfe; text-decoration: none; } /* Optional: darker table rows when used in dark cards */ .bg-dark .table { color: #e6edf3; } .bg-dark .table thead th { border-color: rgba(255,255,255,.06); } .bg-dark .table td, .bg-dark .table th { border-color: rgba(255,255,255,.05); } /* Slight gradient overlay for nicer feel */ .bg-dark::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: radial-gradient(ellipse at top left, rgba(255,255,255,.04), transparent 60%); border-radius: inherit; } /* ===== Dark Input Styling ===== */ .form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea { background: #0f1730 !important; color: #e6edf3 !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 10px !important; transition: all .15s ease-in-out; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); } .form-control::placeholder, .form-select::placeholder, textarea::placeholder { color: #7a8696 !important; opacity: 1; } /* On focus */ .form-control:focus, .form-select:focus, textarea:focus { background: #101a35 !important; border-color: #2563eb !important; color: #fff !important; box-shadow: 0 0 0 .15rem rgba(37,99,235,.25); outline: none; } /* Disabled */ .form-control:disabled, .form-select:disabled, textarea:disabled { background: #151b2e !important; color: #6b7280 !important; border-color: rgba(255,255,255,.04); opacity: .75; } /* Readonly */ .form-control[readonly], textarea[readonly] { background: #121a33 !important; color: #aeb8c4 !important; } /* Custom selects */ select.form-control, .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cbd5e1' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 12px; padding-right: 2rem !important; } /* Input groups */ .input-group-text { background: #1a233a !important; color: #cfd6e4 !important; border: 1px solid rgba(255,255,255,.08) !important; } /* Checkboxes / Radios */ .custom-control-label::before, .custom-control-label::after { top: .15rem; } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .15rem rgba(59,130,246,.25); } .custom-control-input:checked ~ .custom-control-label::before { background-color: #3b82f6 !important; border-color: #3b82f6 !important; } .custom-control-label { color: #e6edf3 !important; } /* Modern radio row for number selection */ #numbersTbody tr { cursor: pointer; transition: background .15s, box-shadow .15s; } #numbersTbody tr:hover { background: rgba(96,165,250,.08); /* light blue hover */ } #numbersTbody tr.ta-selected { background: rgba(96,165,250,.15); box-shadow: inset 0 0 0 2px var(--primary); } .modal-header{ border-bottom: 1px solid var(--border) !important; } .modal-footer{ border-top: 1px solid var(--border) !important; } /* Inline form feedback */ .invalid-feedback, .valid-feedback { color: #f87171 !important; font-size: .85rem; } .is-valid + .valid-feedback { color: #22c55e !important; } /* Range sliders */ input[type="range"] { accent-color: #3b82f6; } /* File inputs */ .custom-file-label { background-color: #0f1730 !important; color: #cfd6e4 !important; border: 1px solid rgba(255,255,255,.08) !important; } .custom-file-label::after { background: #1e3a8a !important; color: #fff !important; border-left: none; } /* ===== Dark Theme Nav Tabs ===== */ .nav-tabs { border-bottom: 1px solid rgba(255,255,255,.06); } .nav-tabs .nav-item { margin-bottom: -1px; } .nav-tabs .nav-link { background: transparent; color: #9ba8ba; border: 1px solid transparent; border-top-left-radius: .75rem; border-top-right-radius: .75rem; font-weight: 600; padding: .6rem 1rem; transition: all .15s ease-in-out; } .nav-tabs .nav-link:hover { color: #e6edf3; border-color: rgba(255,255,255,.1) rgba(255,255,255,.1) rgba(255,255,255,.06); background: rgba(255,255,255,.03); } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #fff; background: linear-gradient(180deg, #1a233a, #0f1730); border-color: rgba(255,255,255,.15) rgba(255,255,255,.15) #0e1320; border-bottom-color: transparent; box-shadow: inset 0 -2px 0 #3b82f6; position: relative; z-index: 2; } /* Optional glowing accent line on active tab */ .nav-tabs .nav-link.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #60a5fa, #2563eb); border-radius: 2px 2px 0 0; } /* Tab content panel */ .tab-content { background: linear-gradient(180deg, #121827, #0e1320); border: none !important; border-top: none; border-radius: 0 0 .75rem .75rem; box-shadow: 0 6px 20px rgba(0,0,0,.45); padding: 1.25rem; } /* Compact variant for dashboards */ .nav-tabs.nav-tabs-sm .nav-link { padding: .4rem .8rem; font-size: .9rem; } /* Optional centered tabs */ .nav-tabs.nav-tabs-center { justify-content: center; border-bottom: 1px solid rgba(255,255,255,.06); } /* ===== Dark Theme thead-light ===== */ .thead-light { background: linear-gradient(180deg, #1a233a 0%, #111827 100%) !important; color: #e6edf3 !important; border-bottom: 2px solid rgba(255,255,255,.08) !important; } .thead-light th { font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .85rem; color: #cfd6e4 !important; border-color: rgba(255,255,255,.08) !important; padding-top: .75rem; padding-bottom: .6rem; background: transparent !important; } .thead-light th:first-child { border-top-left-radius: .5rem; } .thead-light th:last-child { border-top-right-radius: .5rem; } /* Hoverable table rows with darker highlight */ .table-dark tbody tr:hover { background: rgba(255,255,255,.03) !important; } /* Make header separators crisp */ .table th, .table td { border-color: rgba(255,255,255,.06) !important; } /* Optional subtle bottom shadow under thead for separation */ .table thead.thead-light { box-shadow: inset 0 -1px 0 rgba(255,255,255,.04), 0 2px 6px rgba(0,0,0,.25); } /* ===== Dark Theme table-dark ===== */ .table-dark { color: #e6edf3 !important; background: linear-gradient(180deg, #111827 0%, #0b1020 100%) !important; border-color: rgba(255,255,255,.06) !important; } .table-dark th, .table-dark td { border-color: rgba(255,255,255,.06) !important; background: transparent !important; } .table th, .table td { padding-left:1.25rem; padding-right:1.25rem; } .table-dark thead th { color: #cfd6e4 !important; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .85rem; border-bottom: 2px solid rgba(255,255,255,.08) !important; background: linear-gradient(180deg, #1a233a 0%, #111827 100%) !important; } .table-dark tbody tr { transition: background .15s ease-in-out; } .table-dark tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02); } .table-dark tbody tr:hover { background: rgba(255,255,255,.05) !important; } /* Highlight selected or active rows */ .table-dark tbody tr.active, .table-dark tbody tr.table-active { background: rgba(59,130,246,.15) !important; } /* Footer cells */ .table-dark tfoot td { color: #aab6c4 !important; border-top: 2px solid rgba(255,255,255,.08) !important; background: #0f1628; } /* Condensed version for compact data tables */ .table-dark.table-sm th, .table-dark.table-sm td { padding: .45rem .6rem !important; } /* Head + body visual separation */ .table-dark thead { box-shadow: inset 0 -1px 0 rgba(255,255,255,.04), 0 2px 6px rgba(0,0,0,.25); } /* Aligns with DataTables / sortable indicators */ .table-dark th.sorting, .table-dark th.sorting_asc, .table-dark th.sorting_desc { cursor: pointer; position: relative; } .table-dark th.sorting::after, .table-dark th.sorting_asc::after, .table-dark th.sorting_desc::after { position: absolute; right: .5rem; opacity: .4; font-size: .75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; } .table-dark th.sorting::after { content: '\f0dc'; /* fa-sort */ font-family: 'Font Awesome 5 Free'; font-weight: 900; } .table-dark th.sorting_asc::after { content: '\f0de'; /* fa-sort-up */ color: #60a5fa; } .table-dark th.sorting_desc::after { content: '\f0dd'; /* fa-sort-down */ color: #60a5fa; } /* ===== Form label system (dark, refined) ===== */ .form-label { display:flex; align-items:center; gap:.5rem; font-weight:600; color:#cfd6e4; } /* Small secondary line under a label for context */ .field-note { display:block; margin-top:.25rem; font-size:.8rem; color:var(--muted); } /* Compact capsule tag for "Optional" etc. */ .optional-tag { font-size:.72rem; color:#aeb8c4; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:.12rem .45rem; letter-spacing:.04em; line-height:1; white-space:nowrap; } /* Optional: visual cue for required (if you use it) */ .required-asterisk { color:#ef4444; margin-left:.25rem; font-weight:700; } /* ===== DataTables Dark Theme Integration ===== */ /* Container + search/filter bar */ .dataTables_wrapper { color: var(--text); background: transparent; } .dataTables_filter { float: right; } .dataTables_filter label { color: var(--muted); font-weight: 600; } .dataTables_filter input { background: #0f1730; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: .35rem .75rem; margin-left: .5rem; font-size: .9rem; } .dataTables_filter input:focus { outline: none; background: #101a35; border-color: #2563eb; box-shadow: 0 0 0 .12rem rgba(37,99,235,.25); } /* Length ("Show 10 entries") dropdown */ .dataTables_length { float: left; } .dataTables_length label { color: var(--muted); font-weight: 600; } .dataTables_length select { background: #0f1730; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .25rem .5rem; font-size: .9rem; } /* Table info text ("Showing 1–10 of ...") */ .dataTables_info { color: var(--muted); font-size: .85rem; padding-top: .75rem; } /* Pagination */ .dataTables_paginate { padding-top: .5rem; text-align: right; } .dataTables_paginate .paginate_button { border: 1px solid var(--border); background: #0f1730; color: var(--text) !important; border-radius: 8px; padding: .05rem .1rem; margin: 0 .15rem; transition: all .15s ease-in-out; } .dataTables_paginate .paginate_button:hover { background: #1e3a8a; color: #fff !important; border-color: #1e3a8a; } .dataTables_paginate .paginate_button.current { background: var(--primary); color: #fff !important; border-color: var(--primary); box-shadow: 0 0 0 1px rgba(37,99,235,.4); } /* Remove default DataTables gray borders */ table.dataTable.no-footer { border-bottom: 1px solid var(--border); } /* Sort icons align with your custom table-dark style (already themed) */ table.dataTable thead th { background: linear-gradient(180deg, #1a233a 0%, #111827 100%) !important; color: #cfd6e4 !important; font-weight: 600; border-bottom: 2px solid rgba(255,255,255,.08) !important; } /* Compact padding for dark theme */ .dataTables_wrapper .row { margin: 0; } .dataTables_wrapper .col-sm-12 { padding: 0; } /* Responsive tweaks */ @media (max-width: 768px){ .dataTables_filter, .dataTables_length { float: none; text-align: left; } .dataTables_paginate { text-align: center; } } /* ===== Sleek Pagination (Dark Dashboard Variant) ===== */ .dataTables_paginate { padding: 1rem 0 .75rem; text-align: right; } .dataTables_paginate .pagination { justify-content: flex-end; margin: 0; gap: .35rem; } .dataTables_paginate .page-item .page-link { background: transparent; border: none; color: var(--muted); border-radius: 8px; padding: .45rem .85rem; font-weight: 600; font-size: .9rem; transition: all .15s ease-in-out; } .dataTables_paginate .page-item .page-link:hover { color: #fff; background: rgba(255,255,255,.05); box-shadow: 0 0 6px rgba(255,255,255,.08) inset; } .dataTables_paginate .page-item.active .page-link { background: linear-gradient(180deg, #3b82f6, #1d4ed8); color: #fff; box-shadow: 0 0 10px rgba(37,99,235,.4); } .dataTables_paginate .page-item.disabled .page-link { color: #475569; opacity: .5; cursor: default; } .dataTables_paginate .page-item:first-child .page-link, .dataTables_paginate .page-item:last-child .page-link { border-radius: 8px; } /* Slight scale-in for active page */ .dataTables_paginate .page-item.active .page-link { transform: scale(1.05); } /* Pagination alignment on small screens */ @media (max-width:768px){ .dataTables_paginate { text-align:center; } .dataTables_paginate .pagination { justify-content:center; } } /* ===== Additional Dark-UI Alerts ===== */ .alert-dark { background: #0e1320; color: #cfd6e4; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 4px 14px var(--shadow); } .alert-primary { background: #1e3a8a; color: #dbeafe; border-color: rgba(59,130,246,.35); box-shadow: 0 4px 14px rgba(37,99,235,.35); } .alert-warning { background: #3b2904; color: #fcd34d; border-color: rgba(245,158,11,.25); box-shadow: 0 4px 14px rgba(245,158,11,.25); } .alert-danger { background: #3b0d0d; color: #fecaca; border-color: rgba(239,68,68,.3); box-shadow: 0 4px 14px rgba(239,68,68,.35); } .alert-info { background: #082f49; color: #bae6fd; border-color: rgba(56,189,248,.3); box-shadow: 0 4px 14px rgba(56,189,248,.35); } .alert-light { background: #1a2236; color: #f3f4f6; border-color: rgba(255,255,255,.05); } .alert-purple { background: #2e1f4d; color: #ddd6fe; border-color: rgba(168,85,247,.25); box-shadow: 0 4px 14px rgba(168,85,247,.35); } .alert-teal { background: #063b38; color: #99f6e4; border-color: rgba(45,212,191,.25); box-shadow: 0 4px 14px rgba(45,212,191,.3); } /* Optional close button styling to match dark theme */ .alert .close { color: #9ba8ba; opacity: .8; } .alert .close:hover { color: #fff; opacity: 1; } /* === Summernote dark theme (scoped) === */ .sn-dark.note-editor { border: 1px solid var(--border); background: var(--bg-1); color: var(--text); box-shadow: none; } .sn-dark .note-toolbar { /*background: var(--bg-2); border-bottom: 1px solid var(--border);*/ padding: .35rem .5rem; } .sn-dark .note-toolbar .btn, .sn-dark .note-toolbar .btn-light { background: rgba(255,255,255,.06); border-color: var(--border); border: 1px solid transparent; color: var(--text); } .sn-dark .note-toolbar .btn:hover, .sn-dark .note-toolbar .btn:focus { background: rgba(255,255,255,.06); border-color: var(--border); color: var(--text); box-shadow: none; } .sn-dark .note-editing-area { background: var(--bg-1); } .sn-dark .note-editable { color: var(--text); background: var(--bg-1); min-height: 120px; } .sn-dark .note-placeholder { color: var(--muted); opacity: .85; } .sn-dark .note-statusbar { background: var(--bg-2); border-top: 1px solid var(--border); } .sn-dark .note-statusbar .note-resizebar { border-top: none; } .sn-dark .dropdown-menu { background: var(--bg-2); border: 1px solid var(--border); color: var(--text); } .sn-dark .dropdown-item { color: var(--text); } .sn-dark .dropdown-item:hover, .sn-dark .dropdown-item:focus { background: rgba(255,255,255,.06); border-color: var(--border); color: var(--text); } .sn-dark .note-modal .modal-content { background: var(--bg-1); color: var(--text); border: 1px solid var(--border); } .sn-dark .note-modal .modal-header, .sn-dark .note-modal .modal-footer { border-color: var(--border); } .sn-dark .note-modal .form-control { background: var(--bg-2); color: var(--text); border: 1px solid var(--border); } .sn-dark .note-color .note-dropdown-menu .note-palette { background: var(--bg-2); border-color: var(--border); } .sn-dark .note-link-popover, .sn-dark .note-image-popover { background: var(--bg-2); border: 1px solid var(--border); color: var(--text); } .sn-dark .note-btn.disabled, .sn-dark .note-btn:disabled { opacity: .5; } /* Make toolbar icons visible even if using or SVG */ .sn-dark .note-toolbar .note-btn i, .sn-dark .note-toolbar .note-btn svg { filter: none; color: var(--text); fill: var(--text); } /* Focus ring */ .sn-dark .note-editable:focus { outline: 0; /*box-shadow: 0 0 0 2px rgba(96,165,250,.35);*/ } /* Compact toolbar spacing */ .sn-dark .note-btn { padding: .25rem .4rem; } /* MOBILE INLINE NAV — NO HAMBURGER */ @media (max-width: 767.98px) { .navbar { padding-top: 0.55rem; padding-bottom: 0.55rem; border-bottom: 1px solid rgba(255,255,255,0.07); } .nav-inline-mobile { margin-left: auto; } .nav-inline-mobile .nav-link { color: var(--text-muted); font-size: 1.1rem; } .nav-inline-mobile .btn-outline-primary { padding: 2px 8px; font-size: 0.75rem; border-radius: 6px; white-space: nowrap; } /* Hide Bootstrap burger icon */ .navbar-toggler { display: none !important; } } /* Fix header vertical alignment */ .navbar { display: flex; align-items: center; } .navbar-brand { display: flex !important; align-items: center !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-right: 10px; } .nav-inline-mobile, .d-md-flex { display: flex; align-items: center; } /* Make the dashboard header fixed */ .navbar { position: sticky; top: 0; z-index: 1050; /* above all page content + dropdowns */ } @media (max-width: 767.98px) { .table td, .table th { padding: .35rem .5rem; } } /* --- MOBILE: stacked rows, no horizontal scroll --- */ @media (max-width: 767.98px) { table.table thead { display: none; /* hide headers on mobile */ } table.table tbody { width: 100%; } table.table tr { width: 100%; margin-bottom: .75rem; border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; background: var(--bg-1); } table.table td { display: flex; justify-content: space-between; padding: .35rem .25rem; width: 100%; } /* Optional: make labels appear */ table.table #activity-body td::before { content: attr(data-label); font-weight: 600; color: var(--muted); margin-right: .5rem; } /* Prevent long text from forcing scroll */ table.table td span, table.table td small { white-space: normal !important; word-break: break-word; } } @media (max-width: 767.98px) { td.rec-cell { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; } td.rec-cell::before { /* label on the left */ margin-right: 1rem; flex-shrink: 0; } /* The right-side name + number column */ td.rec-cell .rec-right { display: flex; flex-direction: column; text-align: right; } } #jobsTable tbody tr { cursor: pointer; } /* ================================ Job Stats – status-based hues ================================ */ /* Shared */ .stats-card { transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease; } /* ---------- DARK THEME (default body) ---------- */ body:not(.light) .status-complete { background: rgba(16, 185, 129, 0.10) !important; border-color: rgba(16, 185, 129, 0.35) !important; } body:not(.light) .status-sending { background: rgba(59, 130, 246, 0.10) !important; border-color: rgba(59, 130, 246, 0.35) !important; } body:not(.light) .status-queued { background: rgba(245, 158, 11, 0.10) !important; border-color: rgba(245, 158, 11, 0.35) !important; } body:not(.light) .status-paused { background: rgba(99, 102, 241, 0.10) !important; border-color: rgba(99, 102, 241, 0.35) !important; } body:not(.light) .status-failed { background: rgba(239, 68, 68, 0.10) !important; border-color: rgba(239, 68, 68, 0.35) !important; } body:not(.light) .status-canceled { background: rgba(107, 114, 128, 0.10) !important; border-color: rgba(107, 114, 128, 0.35) !important; } body:not(.light) .status-draft { background: rgba(148, 163, 184, 0.06) !important; border-color: rgba(148, 163, 184, 0.25) !important; } /* ---------- LIGHT THEME (body.light) ---------- */ body.light .stats-card { /* ensure the card still uses light text colors */ color: var(--text); } /* COMPLETE → soft green card */ body.light .status-complete { background-color: #dcfce7 !important; /* light green */ border-color: rgba(22, 163, 74, 0.35) !important; } /* SENDING → soft blue */ body.light .status-sending { background-color: #dbeafe !important; /* light blue */ border-color: rgba(37, 99, 235, 0.35) !important; } /* QUEUED → soft amber */ body.light .status-queued { background-color: #fef3c7 !important; /* light amber */ border-color: rgba(217, 119, 6, 0.35) !important; } /* PAUSED → soft indigo */ body.light .status-paused { background-color: #e0e7ff !important; /* light indigo */ border-color: rgba(79, 70, 229, 0.35) !important; } /* FAILED → soft red */ body.light .status-failed { background-color: #fee2e2 !important; /* light red */ border-color: rgba(220, 38, 38, 0.35) !important; } /* CANCELED → soft gray */ body.light .status-canceled { background-color: #e5e7eb !important; /* light gray */ border-color: rgba(75, 85, 99, 0.35) !important; } /* DRAFT → subtle neutral */ body.light .status-draft { background-color: #e5ecf4 !important; border-color: rgba(148, 163, 184, 0.35) !important; } @media (max-width: 576px) { .card { padding: .2rem !important; } .card-body { padding: .5rem !important; } .card-header { padding: .2rem .5rem !important; } .main-content { padding-left: .5rem !important; padding-right: .5rem !important; } }