/* Dark Theme CSS - Apply by adding 'dark-theme' class to the tag */ /* Base Colors for Dark Theme (Conceptual - applied throughout) --dark-bg-primary: #23272A; (Very Dark Gray) --dark-bg-secondary: #2C2F33; (Dark Gray for elements like inputs, cards) --dark-bg-tertiary: #36393E; (Slightly Lighter Dark Gray for hover/active) --dark-text-primary: #DCDDDE; (Off-White/Light Gray) --dark-text-secondary: #B9BBBE; (Medium Light Gray) --dark-text-placeholder: #72767D; (Muted Gray) --dark-border-primary: #40444B; (Noticeable Border) --dark-border-secondary: #303336; (Subtle Border) --dark-accent-blue: #008bbf; (Discord-like Blue) --dark-accent-green: #43B581; (Discord-like Green) --dark-accent-red: #F04747; (Discord-like Red) --dark-focus-ring: #5865F2; (Brighter blue for focus) --dark-shadow-color: rgba(0, 0, 0, 0.3); --dark-light-glow: rgba(255, 255, 255, 0.05); --dark-disabled-bg: #202225; --dark-disabled-text: #4F545C; */ body.dark-theme { /* Base styles for the dark theme body */ background-color: rgb(31, 33, 35); color: #DCDDDE; } .dark-theme .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #72767D; /* Was #666 */ opacity: 1; /* Firefox */ } /* .dark-theme .form-control::placeholder {} (Duplicate from original, font-family commented out) */ /* .dark-theme .form-control:-ms-input-placeholder {} (IE 10+, font-family commented out) */ /* .dark-theme .form-control::-ms-input-placeholder {} (Edge, specific properties commented out) */ .dark-theme select.formControl + .chosen-container.chosen-container-single .chosen-single { width: 100%; height: 53px; padding: 25px 12px; font-size: 16px; color: #DCDDDE; /* Was #111 */ margin-top: -22px; background-color: #2C2F33; /* Was #fff */ vertical-align: top; border: 1px solid #40444B; /* Was #a7a7a7 */ border-radius: 0px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.2); /* Was rgba(0,0,0,0.075), darker for depth */ box-shadow: inset 0 1px 1px rgba(0,0,0,0.2); /* Was rgba(0,0,0,0.075) */ -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } .dark-theme label[for=categorySelect] { margin-top: -20px; } .dark-theme label[for=vendor] { margin-top: -20px; } .dark-theme .select2-container--open{ z-index: 99999; } .dark-theme .moneyFormat{ text-align: right; } .dark-theme #newAlertCountContainer{ font-size: 16px; color: #FFFFFF; /* Was white, keep white */ background: #5865F2; /* Was #7188a6, using a more vibrant accent */ border: 2px solid #40444B; /* Was #485469, adjusted for dark theme */ border-radius: 15px; min-width: 28px; display: inline-block; font-weight: 600; margin-left: 10px; text-align: center; } .dark-theme .newAlert > td{ font-weight: 600; color: #F0C47A; /* Example: amber/yellow for new alerts */ } .dark-theme .sidebar .nav > li.active-pro { position: absolute; width: 100%; bottom: 10px; } .dark-theme .newProject{ font-size: 34px; color: #FFFFFF; /* Was #fff */ background: #43B581; /* Was #28a745, keep green accent */ border: 2px solid #367c59; /* Darker shade of green */ border-radius: 50px; width: 80px; font-weight: 600; text-align: center; padding: 15px; position: fixed; bottom: 25px; right: 25px; cursor: pointer; } .dark-theme .newProject:hover{ background: #3AA370; /* Was #1e7e4b, slightly lighter hover for green */ } .dark-theme .addNew{ font-size: 34px; color: #FFFFFF; /* Was #fff */ background: #43B581; /* Was #28a745 */ border: 2px solid #367c59; border-radius: 50px; width: 80px; font-weight: 600; text-align: center; padding: 15px; position: fixed; bottom: 25px; right: 25px; cursor: pointer; } .dark-theme .addNew:hover{ background: #3AA370; /* Was #1e7e4b */ } .dark-theme .newInvoice{ font-size: 34px; color: #FFFFFF; /* Was #fff */ background: #43B581; /* Was #28a745 */ border: 2px solid #367c59; border-radius: 50px; width: 80px; font-weight: 600; text-align: center; padding: 15px; position: fixed; bottom: 25px; right: 25px; cursor: pointer; } .dark-theme .newInvoice:hover{ background: #3AA370; /* Was #1e7e4b */ } .dark-theme .errorDisplay{ text-align: center; font-size: 22px; color: #F04747; /* Error text, ensure contrast */ } .dark-theme .billing-empty-state { color: #b99da4; font-size: 19px; } .dark-theme #actionDone, html[data-bs-theme='dark'] #actionDone { --actionDone-bg: #2b3138; --actionDone-border: #40444B; --actionDone-ink: #E5E7EB; --actionDone-muted: #C7CCD2; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34); } .dark-theme #actionDone.actionDone--success, html[data-bs-theme='dark'] #actionDone.actionDone--success { --actionDone-accent: #3AA370; --actionDone-icon-bg: rgba(58, 163, 112, 0.16); } .dark-theme #actionDone.actionDone--warning, html[data-bs-theme='dark'] #actionDone.actionDone--warning { --actionDone-accent: #f59e0b; --actionDone-icon-bg: rgba(245, 158, 11, 0.16); } .dark-theme #actionDone.actionDone--error, html[data-bs-theme='dark'] #actionDone.actionDone--error { --actionDone-accent: #f87171; --actionDone-icon-bg: rgba(248, 113, 113, 0.16); } /*For PopUp*/ .dark-theme .modal { font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; } .dark-theme .modal__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.75); /* Was rgba(0,0,0,0.6), slightly darker overlay */ display: flex; justify-content: center; align-items: center; } .dark-theme .modal__container { background-color: #2C2F33; /* Was #fefefe */ padding: 30px; max-width: 900px; max-height: 100vh; border-radius: 4px; overflow-y: auto; box-sizing: border-box; min-width: 400px; position: relative; display: flex; flex-direction: column; pointer-events: auto; border: 1px solid #40444B; /* Was rgba(0, 0, 0, 0.2) */ outline: 0; z-index: 99; } .dark-theme .modal__header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #40444B; /* Was #cdd4e0 */ border-top-left-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px); } .dark-theme .modal__title { margin-top: 0; margin-bottom: 0; font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: #DCDDDE; /* Was #00449e (dark blue) */ box-sizing: border-box; } .dark-theme .modal__close { background: transparent; border: 0; color: #B9BBBE; /* Ensure close button is visible */ } .dark-theme .modal__close:hover { color: #FFFFFF; } .dark-theme .modal__header .modal__close:before { content: "\2715"; } .dark-theme .modal__content { line-height: 1.5; color: #B9BBBE; /* Was rgba(0,0,0,.8) */ } .dark-theme .modal__btn { font-size: .875rem; padding-left: 1rem; padding-right: 1rem; padding-top: .5rem; padding-bottom: .5rem; background-color: #36393E; /* Was #e6e6e6 */ color: #DCDDDE; /* Was rgba(0,0,0,.8) */ border-radius: .25rem; border-style: none; border-width: 0; cursor: pointer; -webkit-appearance: button; text-transform: none; overflow: visible; line-height: 1.15; margin: 0; will-change: transform; -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); transition: -webkit-transform .25s ease-out, background-color .2s ease-out; transition: transform .25s ease-out, background-color .2s ease-out; transition: transform .25s ease-out,-webkit-transform .25s ease-out, background-color .2s ease-out; } .dark-theme .modal__btn:focus, .dark-theme .modal__btn:hover { -webkit-transform: scale(1.05); transform: scale(1.05); background-color: #40444B; /* Darker hover */ } .dark-theme .modal__btn-primary { background-color: #008bbf; /* Was #00449e */ color: #FFFFFF; /* Was #fff */ } .dark-theme .modal__btn-primary:hover { background-color: #677BC4; /* Darker blue hover */ } /**************************\ START Pop up editor \**************************/ /* Keyframes are global, no prefix needed */ @keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes mmslideIn { from { transform: translateY(15%); } to { transform: translateY(0); } } @keyframes mmslideOut { from { transform: translateY(0); } to { transform: translateY(-10%); } } .dark-theme .micromodal-slide { display: none; } .dark-theme .micromodal-slide.is-open { display: block; } .dark-theme .micromodal-slide[aria-hidden="false"] .modal__overlay { animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1); } .dark-theme .micromodal-slide[aria-hidden="false"] .modal__container { animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1); } .dark-theme .micromodal-slide[aria-hidden="true"] .modal__overlay { animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1); } .dark-theme .micromodal-slide[aria-hidden="true"] .modal__container { animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1); } .dark-theme .micromodal-slide .modal__container, .dark-theme .micromodal-slide .modal__overlay { will-change: transform; } /* Uploader*/ .dark-theme .drop_file_zone { background-color: #2C2F33; /* Was #c8dadf */ color: #B9BBBE; /* Text color for drop zone */ outline: 2px dashed #5865F2; /* Was #afafaf - use accent for visibility */ outline-offset: -5px; width: 100%; padding: 8px; font-size: 18px; margin: 0px 0px 5px; } .dark-theme #drag_upload_file { width:90%; margin:0 auto; } .dark-theme #drag_upload_file p { text-align: center; } .dark-theme #drag_upload_file #selectfile { display: none; } .dark-theme .is-dragover { /* This applies to .drop_file_zone.is-dragover as well */ background-color: #36393E; /* Was #ffffff, slightly different dark */ outline: 2px dashed #008bbf; /* Was #afafaf, brighter accent */ /* outline-offset: -5px; */ /* Inherited */ } .dark-theme .uploaderTile{ pointer-events:none; color: #DCDDDE; } .dark-theme .search-field{ border-color:#40444B; /* Was #e3e3e3 */ background-color: #2C2F33; color: #DCDDDE; } .dark-theme .loadingContainer{ position: fixed; top: 40%; left: 45%; z-index: 99; } .dark-theme .loadingBody{ /* This was already dark-friendly */ font-size: 42px; margin: 0px auto; max-width: 645px; text-align:center; padding:25px 35px; transform:translate(0,40%); background: rgba(10,10,10,0.85); /* Was #00000075, slightly more opaque */ border-radius: 10px; color:white; } .dark-theme section{ margin: 20px auto; background-color: #2C2F33; /* Was #fff */ max-width: 1200px; box-shadow: 0px 0px 15px rgba(0,0,0,0.3); /* Was #cccccc, subtle dark shadow */ padding: 20px; color: #DCDDDE; /* Default text color for section */ } .dark-theme .flexContainer{ display: flex; flex-wrap: wrap; } .dark-theme .innerSection{ padding: 20px; } .dark-theme .noPadding{ padding:0px; } .dark-theme .noMargin{ margin:0px; } .dark-theme .formControl{ /* General form control style */ min-width:150px; max-width: 100%; height: 55px; display: block; padding: 0px 0px 0px 10px; padding-top: 20px; margin: 5px 0px; font-size: 16px; line-height: 1.5; color: #DCDDDE; /* Was #111 */ background-color: #23272A; /* Was #fefefe, slightly darker than card bg */ background-clip: padding-box; border: 1px solid #40444B; /* Was #a7a7a7 */ border-radius: 0px !important; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .dark-theme .formControl:focus{ outline: 0px; border: 2px solid #008bbf; /* Was #7188a6, using accent blue */ box-shadow: 0 0 0 0.2rem rgba(0, 139, 191, 0.22); /* Focus ring */ } .dark-theme .form-control:focus{ /* Assuming this is a general bootstrap .form-control */ border: 1px solid #008bbf; /* Was #2a9bd1 */ background-color: #2C2F33; color: #DCDDDE; box-shadow: 0 0 0 0.2rem rgba(0, 139, 191, 0.22); } /* we put label on top of the input*/ .dark-theme .floatLable { position: absolute; right: 1px; bottom: 1px; left:12px; top:-5px; z-index: 1; height: 1em; font-size: 16px; line-height: 3.5em; color: #F04747; /* Was red, keep as error/attention color */ white-space: nowrap; cursor: text; transition:all .1s ease; } .dark-theme input:focus ~ label, .dark-theme input:valid ~label, .dark-theme input:disabled ~label { color: #B9BBBE; /* Was #495057, lighter gray for dark theme */ /* other properties remain */ position: absolute; right: 1px; bottom: 1px; left:12px; top:-5px; z-index: 1; height: 1em; font-size: 14px; line-height: 3.5em; white-space: nowrap; cursor: text; transition:all .1s ease; } .dark-theme textarea:focus ~ label, .dark-theme textarea:valid ~label { color: #B9BBBE; /* Was #495057 */ /* other properties remain */ position: absolute; right: 1px; bottom: 1px; left:12px; top:-5px; z-index: 1; height: 1em; font-size: 14px; line-height: 3.5em; white-space: nowrap; cursor: text; transition:all .1s ease; } .dark-theme select:valid ~ label{ color: #B9BBBE; /* Was #495057 */ /* other properties remain */ position: absolute; right: 1px; bottom: 1px; left:12px; top:-9px !important; z-index: 1; height: 1em; font-size: 14px; line-height: 3.5em; white-space: nowrap; cursor: text; transition:all .1s ease; } /* Note: Original CSS had two textarea:valid ~ label. Combining and keeping consistent. */ /* textarea:valid ~ label from original: font-size: 11px; top:-5px; */ /* This rule seems more specific: */ .dark-theme textarea:valid ~ label{ color: #B9BBBE; /* Was #495057 */ position: absolute; right: 1px; bottom: 1px; left:12px; top:-5px; z-index: 1; height: 1em; font-size: 11px; /* from specific rule */ line-height: 3.5em; white-space: nowrap; cursor: text; transition:all .1s ease; } .dark-theme select:disabled ~ label{ color: #72767D; /* Was #495057, more muted for disabled */ /* other properties remain */ cursor: not-allowed !important; position: absolute; right: 1px; bottom: 1px; left:12px; top:-5px; z-index: 1; height: 1em; font-size: 14px; line-height: 3.5em; white-space: nowrap; /* cursor: text; REMOVED, it's not-allowed */ transition:all .1s ease; } .dark-theme input:valid ~label { font-size: 14px; color:#B9BBBE; /* Was #6e6e6e */ } .dark-theme input:focus:invalid ~label{ font-size: 14px; color: #F04747; /* Was red */ } .dark-theme input:required ~label::before { content:"*"; color: #F04747; /* Was red */ } .dark-theme input:required:valid ~label::before { color:#B9BBBE; /* Was #6e6e6e */ } .dark-theme select:valid ~label { /* This rule existed above, might need merging if properties differ */ color:#B9BBBE; /* Was #6e6e6e */ } .dark-theme select:focus:invalid ~label{ color: #F04747; /* Was red */ } .dark-theme select:required ~label::before { content:"*"; color: #F04747; /* Was red */ } .dark-theme select:required:valid ~label::before { color:#B9BBBE; /* Was #6e6e6e */ } .dark-theme select{ font-family: "Roboto", "fontAwesome" ; background-color: #23272A; /* Match .formControl */ color: #DCDDDE; border: 1px solid #40444B; } .dark-theme select option { /* Style options for better visibility */ background-color: #2C2F33; color: #DCDDDE; } .dark-theme select option:hover { background-color: #008bbf !important; /* Accent blue for hover */ color: #FFFFFF !important; } .dark-theme select option:focus { background-color: #008bbf !important; color: #FFFFFF !important; } .dark-theme select option:focus-within { background-color: #008bbf !important; color: #FFFFFF !important; } .dark-theme select option:target { background-color: #008bbf !important; color: #FFFFFF !important; } .dark-theme input:not(.btn):not(.select2-search__field):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), .dark-theme textarea { /* General input, textarea */ padding:1em; border: 1px solid #40444B; /* Was #ccc */ -webkit-box-shadow: inset 0 1px 0 #1e2022, #2C2F33 0 1px 0; /* Adjusted shadow for dark */ box-shadow: inset 0 1px 0 #1e2022, #2C2F33 0 1px 0; /* Was #eee, #fff */ border-radius:0px; background-color: #23272A; /* Base input bg */ color: #DCDDDE; /* Text color */ } .dark-theme .inputContainer { position: relative; top: auto; left: auto; width: auto; } .dark-theme .inline{ display: inline-block; } .dark-theme .switch { position: relative; display: inline-block; width: 40px; height: 20px; margin: 3px; } .dark-theme .switch input { opacity: 0; width: 0; height: 0; } .dark-theme .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #40444B; /* Was #ccc */ -webkit-transition: .2s; transition: .2s; border-radius: 10px; /* Rounded track */ } .dark-theme .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 4px; bottom: 3px; background-color: #B9BBBE; /* Was white, light gray handle */ -webkit-transition: .2s; transition: .2s; border-radius: 50%; /* Rounded handle */ } .dark-theme input:checked + .slider { background-color: #008bbf; /* Was #008CBA (blue) */ } .dark-theme input:focus + .slider { box-shadow: 0 0 2px #5865F2; /* Was #2196F3, brighter focus */ outline: 1px solid #DCDDDE; /* Was black solid 1px */ } .dark-theme input:checked + .slider:before { -webkit-transform: translateX(18px); -ms-transform: translateX(18px); transform: translateX(18px); } .dark-theme input:disabled, .dark-theme textarea:disabled, .dark-theme select:disabled { cursor: not-allowed !important; background: #202225 !important; /* Was #e3e7ed, dark disabled bg */ color: #4F545C !important; /* Dark disabled text */ border-color: #303336 !important; } .dark-theme .chosen-disabled > .chosen-single { cursor: not-allowed !important; background: #202225 !important; /* Was #e3e7ed */ color: #4F545C !important; /* Text color for disabled chosen */ opacity: 0.7 !important; /* Was 1 */ } .dark-theme .validationError { border-color: #F04747; /* Was #dc3545, using theme red */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F04747' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23F04747' stroke='none'/%3e%3c/svg%3e"); /* Updated SVG color */ background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .dark-theme .validationError-Text{ font-size: 12px; color: #F04747; /* Ensure text is also red */ } /*Uploader style*/ .dark-theme .uploader{ /* (Original comments kept for reference) min-height:40px; padding: 0px 0px 0px 10px; text-align: left; background: #2C2F33; (Was #fefefe) cursor: pointer; font-size: 14px; color: #B9BBBE; (Was #6e6e6e) */ } .dark-theme .uploaderContainer{ min-height:40px; padding: 0px 0px 0px 10px; text-align: left; border: 1px solid #40444B; /* Was #8e8e8e */ border-radius: 5px; cursor: pointer; background-color: #2C2F33; /* Adding a base background */ color: #DCDDDE; } .dark-theme .uploader.is-dragover { /* Note: if .uploader uses .is-dragover, it's covered here */ background-color: #36393E; /* Was grey */ } .dark-theme .uploderInsp{ min-height:40px; padding: 0px 10px; text-align: left; background: #2C2F33; /* Was #fefefe */ border: 1px solid #40444B; /* Was #a7a7a7 */ border-radius: 5px; cursor: pointer; display: inline-block; font-size: 14px; color: #B9BBBE; /* Was #6e6e6e */ } .dark-theme .uploderInsp.is-dragover { background-color: #36393E; /* Was grey */ } .dark-theme .uploaderTile{ padding-top: 8px; display: inline-block; color: #DCDDDE; } .dark-theme .uploaderRemove{ float:right; color:white; background:#a73541b0; /* Was #db2637b0, slightly less saturated red */ height:38px; padding:10px 8px; margin-top:0px; border-radius: 0px 4px 4px 0px; } .dark-theme .uploaderRemove:hover{ background:#F04747; /* Was #db2637 */ } .dark-theme .uploaderViewFile{ float:right; color:white; background:#378f01b0; /* Was #3bb001b0, slightly less saturated green */ height:38px; padding:10px 8px; margin-top:0px; } .dark-theme .uploaderViewFile:hover{ background:#43B581; /* Was #3bb001 */ } /*Progress Bar Guide*/ .dark-theme .progressBarCurrent{ background: #008bbf; /* Was #7188a6, theme blue */ padding:10px; color:white; } .dark-theme .progressBarDone{ background: #43B581; /* Was #7188a6, theme green for done */ padding:10px; color:white; } .dark-theme .progressBarNotDone{ background: #40444B; /* Was #e2e2e2, dark gray */ padding:10px; color: #B9BBBE; /* Was black */ } /*Auto Fill*/ .dark-theme .autocomplete { position: relative; display: inline-block; } .dark-theme .autocomplete-items { position: absolute; border: 1px solid #40444B; /* Was #d4d4d4 */ border-bottom: none; border-top: none; z-index: 99; top: 100%; left: 0; right: 0; background-color: #2C2F33; /* Background for the container */ } .dark-theme .autocomplete-items div { padding: 10px; cursor: pointer; background-color: #2C2F33; /* Was #fff */ border-bottom: 1px solid #40444B; /* Was #d4d4d4 */ color: #DCDDDE; } .dark-theme .autocomplete-items div:hover { background-color: #36393E; /* Was #e9e9e9 */ } .dark-theme .autocomplete-active { background-color: #008bbf !important; /* Was DodgerBlue, using theme blue */ color: #ffffff !important; } .dark-theme .clickable{ cursor: pointer; } .dark-theme .moveable{ cursor: move; } .dark-theme .adminOptions{ background: #c0392b !important; /* Was #9a001b, slightly brighter red */ color: white !important; } .dark-theme .recordInfoContainer{ margin-top: 15px; } .dark-theme .serviceSelectBlock{ padding:20px; border-radius: 5px; border: 3px solid #40444B; /* Was #e5e5e5 */ background-color: #2C2F33; /* Added background */ color: #DCDDDE; /* Added text color */ } .dark-theme .serviceSelectBlockSelected{ background: #233b2a; /* Was #edf8f0, dark green tint */ border: 3px solid #43B581; /* Was #35ad56, theme green */ color: #DCDDDE; } .dark-theme .serviceSelectBlock > .iconBlock{ font-size:30px; text-align: center; color: #B9BBBE; /* Was #485469 */ } .dark-theme .budgetRangeSelectBlock{ padding:20px; border-radius: 5px; border: 3px solid #40444B; /* Was #e5e5e5 */ background-color: #2C2F33; color: #DCDDDE; } .dark-theme .budgetRangeSelectBlockSelected{ background: #233b2a; /* Was #edf8f0 */ border: 3px solid #43B581; /* Was #35ad56 */ color: #DCDDDE; } .dark-theme .selectBlockSelected{ /* Generic selected block */ background: #233b2a; /* Dark green tint, assuming it's a positive selection */ border: 3px solid #43B581; /* Theme green */ color: #DCDDDE; } .dark-theme .budgetRangeSelectBlock > .iconBlock{ font-size:30px; text-align: center; color: #B9BBBE; /* Was #485469 */ } .dark-theme .card-hover:hover{ cursor: pointer; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.4); /* Was rgb(147 147 147 / 50%) */ } .dark-theme .card-shadow{ box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3); /* Was rgb(207 207 207 / 50%) */ } .dark-theme .iconAlert:after{ content: " "; position: absolute; background: #F04747; /* Was red */ height: 10px; top: 1rem; left: 15px; width: 10px; border-radius: 50%; box-shadow: 0 0 3px #F04747; /* Optional: add a subtle glow */ } .dark-theme .alertDot{ content: " "; position: absolute; background: #F04747; /* Was red */ height: 10px; width: 10px; border-radius: 50%; box-shadow: 0 0 3px #F04747; } .dark-theme .criteriaAction{ margin-top: 15px; } .dark-theme .reportCriteriaContainer{ margin-top: 20px; } .dark-theme .dt-button embed { outline: none } .dark-theme div.dt-buttons { position: relative; float: left; } .dark-theme div.dt-buttons.buttons-right { float: right } .dark-theme div.dataTables_layout_cell div.dt-buttons { float: none } .dark-theme div.dataTables_layout_cell div.dt-buttons.buttons-right { float: none } .dark-theme div.dt-btn-split-wrapper { display: inline-block } .dark-theme div.dt-button-collection { position: absolute; top: 0; left: 0; width: 200px; margin-top: 3px; padding: 4px 4px 2px 4px; border: 1px solid #303336; /* Was #485469 or #ccc */ background-color: #2C2F33; /* Was #485469 or white */ overflow: hidden; z-index: 2002; border-radius: 5px; box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.5); /* Darker shadow */ box-sizing: border-box; } .dark-theme .dt-button{ display: inline-block; font-weight: 400; color: #DCDDDE; /* Was #fff */ background-color: #36393E !important; /* Was #485469 */ border-color: #40444B !important; /* Was #485469 */ text-align: center; vertical-align: middle; user-select: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0px; } .dark-theme .dt-button:hover{ color: #FFFFFF; /* Was #fff */ background-color: #4F545C !important; /* Was #7987a1, darker hover */ border-color: #585D63 !important; /* Slightly lighter border on hover */ /* other properties remain same */ display: inline-block; font-weight: 400; text-align: center; vertical-align: middle; user-select: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0px; } .dark-theme .cardHoverable:hover{ box-shadow: 0px 0px 10px rgba(0,0,0,0.5); /* Was #807a7a */ } .dark-theme .list-item-hover:hover{ background:#36393E; /* Was #f7f7f7 */ } /*Data Table Style*/ .dark-theme .dataTables_length, .dark-theme .dataTables_info, .dark-theme .dataTables_filter { color: #B9BBBE; } .dark-theme .dataTables_length{ margin-left: 10px; } .dark-theme .dataTables_info{ margin-top: 10px; margin-left: 10px; } .dark-theme .paging_simple_numbers{ margin-right: 10px; } .dark-theme .dataTables_filter input { background-color: #23272A; color: #DCDDDE; border: 1px solid #40444B; padding: .375rem .75rem; /* Added padding */ border-radius: .25rem; /* Added radius */ } .dark-theme .dataTables_filter label { color: #B9BBBE; } .dark-theme .dragging { border: 4px solid #72767D !important; /* Was #aaa */ background-color: rgba(54, 57, 62, 0.5) !important; /* Dark semi-transparent background */ } /* timeline CSS*/ .dark-theme .timeline-steps { display: flex; justify-content: center; flex-wrap: wrap; } .dark-theme .timeline-steps .timeline-step { align-items: center; display: flex; flex-direction: column; position: relative; margin: 1rem; color: #B9BBBE; /* Text color for step content */ } @media (min-width:768px) { .dark-theme .timeline-steps .timeline-step:not(:last-child):after { content: ""; display: block; border-top: .25rem dotted #5865F2; /* Was #7987a1, using accent */ width: 3.46rem; position: absolute; left: 7.5rem; top: 1.1rem; } .dark-theme .timeline-steps .timeline-step:not(:first-child):before { content: ""; display: block; border-top: .25rem dotted #5865F2; /* Was #7987a1 */ width: 3.8125rem; position: absolute; right: 7.5rem; top: 1.1rem; } } .dark-theme .timeline-steps .timeline-content { width: 10rem; text-align: center; } .dark-theme .timeline-steps .timeline-content .inner-circle { border-radius: 1.5rem; height: 3rem; width: 3rem; display: inline-flex; align-items: center; justify-content: center; background-color: #40444B; /* Was #485369, slightly different dark gray */ color: #DCDDDE; /* Icon/text color inside circle */ } .dark-theme .timeline-steps .timeline-content .current { /* This is the small dot */ border-radius: 1.5rem; height: 1rem; width: 1rem; display: inline-flex; align-items: center; justify-content: center; background-color: #43B581; /* Was #71a68f, theme green for current */ } .dark-theme .timeline-steps .timeline-content .current:before { /* This is the larger pulse/glow */ content: ""; background-color: #43B581; /* Was green, use theme green */ display: inline-block; height: 3rem; width: 3rem; min-width: 3rem; border-radius: 6.25rem; opacity: .3; /* Was .5, adjust for dark theme visibility */ } .dark-theme datalist { position: absolute; max-height: 20em; border: 0 none; overflow-x: hidden; overflow-y: auto; background-color: #2C2F33; /* Datalist background */ } .dark-theme datalist option { font-size: 0.8em; padding: 0.3em 1em; background-color: #2C2F33; /* Was #ccc */ color: #DCDDDE; /* Text color */ cursor: pointer; } .dark-theme datalist option:hover, .dark-theme datalist option:focus { color: #FFFFFF; /* Was #fff */ background-color: #008bbf; /* Was #036 (dark blue), use theme accent */ outline: 0 none; } /*info Tooltip style*/ .dark-theme .tooltipInfo{ /*background:#2C2F33 !important;*/ /* Was #fff */ } .dark-theme .tooltipBody{ text-align: left !important; background:#23272A !important; /* Was #fafafa, darker tooltip body */ padding:10px !important; font-size: 12px !important; max-width: 350px !important; border: 1px solid #40444B !important; /* Was #999 */ color: #B9BBBE !important; /* Text color */ border-radius: 4px; } /*Table freezing*/ @media (min-width: 576px) { .dark-theme .freezeCol { position: block; } } @media (min-width: 992px) { .dark-theme .freezeCol{ position: sticky; left: 0; background-color: #23272A; /* Add background to cover scrolled content */ z-index: 2; } } @media (min-width: 576px) { .dark-theme .freezeRow { position: block; } } @media (min-width: 992px) { .dark-theme .freezeRow{ position: sticky; top: 0; z-index: 3; background-color: #2C2F33; /* Header row background */ color: #DCDDDE; } } /*Toggle systle placeholder*/ .dark-theme .az-toggle-disabled { width: 60px; height: 25px; background-color: #40444B; /* Was #b4bdce (light blue-gray) */ padding: 2px; position: relative; overflow: hidden; border-radius: 15px; } .dark-theme .az-toggle-disabled span { /* The handle */ position: absolute; top: 3px; bottom: 3px; left: 3px; display: block; width: 19px; /* Adjusted for padding and border */ background-color: #B9BBBE; /* Was #fff, light gray handle */ cursor: not-allowed; transition: all 0.2s ease-in-out; border-radius: 50%; } @media (prefers-reduced-motion: reduce) { .dark-theme .az-toggle-disabled span { transition: none; } } .dark-theme .az-toggle-disabled span::before, .dark-theme .az-toggle-disabled span::after { /* Text for on/off states */ position: absolute; font-size: 10px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: #DCDDDE; /* Was #fff, text on the toggle track */ top: 2px; line-height: 1.38; } .dark-theme .az-toggle-disabled span::before { /* 'yes' or 'on' */ content: 'yes'; left: -25px; } .dark-theme .az-toggle-disabled span::after { /* 'no' or 'off' */ content: 'no'; right: -29px; } .dark-theme .az-toggle-disabled.on { background-color: #008bbf; /* Was #b4bdce, use accent for 'on' state */ } .dark-theme .az-toggle-disabled.on span { left: 36px; /* Adjusted for 60px width - (19px handle + 2*3px padding) */ } .dark-theme .tosHeader{ font-weight: 600; text-decoration: underline; margin-top: 35px; color: #DCDDDE; } /*Standard Icons classes*/ .dark-theme .iconOpened:before { font-family: "Font Awesome 5 Free"; content: '\f078'; font-weight: 900; color: #B9BBBE; } .dark-theme .iconClosed:before { font-family: "Font Awesome 5 Free"; content: '\f054'; font-weight: 900; color: #B9BBBE; } .dark-theme .iconVisable:before { font-family: "Font Awesome 5 Free"; content: '\f06e'; font-weight: 900; color: #43B581; } .dark-theme .iconHidden:before { font-family: "Font Awesome 5 Free"; content: '\f070'; font-weight: 900; color: #72767D; } .dark-theme .deleted > td{ color: #F04747; /* Was red */ text-decoration: line-through; } .dark-theme .disabled { cursor: not-allowed !important; opacity: 0.5; } .dark-theme #ui-datepicker-div, .dark-theme .popupContainer .ui-datepicker { z-index: 9999 !important; background-color: #2C2F33; /* Datepicker background */ border: 1px solid #40444B; color: #DCDDDE; /* Default text */ border-radius: 4px; padding: 5px; } .dark-theme #ui-datepicker-div .ui-datepicker-header, .dark-theme .popupContainer .ui-datepicker .ui-datepicker-header { background-color: #36393E; color: #DCDDDE; border-bottom: 1px solid #40444B; padding: 5px 0; border-radius: 4px 4px 0 0; } .dark-theme #ui-datepicker-div .ui-datepicker-prev, .dark-theme #ui-datepicker-div .ui-datepicker-next, .dark-theme .popupContainer .ui-datepicker .ui-datepicker-prev, .dark-theme .popupContainer .ui-datepicker .ui-datepicker-next { color: #008bbf; /* Accent for controls */ } .dark-theme #ui-datepicker-div .ui-datepicker-prev:hover, .dark-theme #ui-datepicker-div .ui-datepicker-next:hover, .dark-theme .popupContainer .ui-datepicker .ui-datepicker-prev:hover, .dark-theme .popupContainer .ui-datepicker .ui-datepicker-next:hover { color: #FFFFFF; background-color: #4F545C; } .dark-theme #ui-datepicker-div table, .dark-theme .popupContainer .ui-datepicker table { color: #DCDDDE; margin: 0; /* Remove default margin */ } .dark-theme #ui-datepicker-div th, /* Day names */ .dark-theme .popupContainer .ui-datepicker th { color: #B9BBBE; font-weight: normal; padding: .5em 0; } .dark-theme #ui-datepicker-div td, .dark-theme .popupContainer .ui-datepicker td { border: 1px solid #2C2F33 !important; background-color: #2C2F33 !important; } .dark-theme #ui-datepicker-div td a, .dark-theme #ui-datepicker-div td span, /* Day numbers */ .dark-theme .popupContainer .ui-datepicker td a, .dark-theme .popupContainer .ui-datepicker td span { color: #DCDDDE; text-align: center; padding: .5em; display: block; border-radius: 3px; background: transparent !important; border: 1px solid transparent !important; } .dark-theme #ui-datepicker-div td a:hover, .dark-theme #ui-datepicker-div td span.ui-state-hover, .dark-theme .popupContainer .ui-datepicker td a:hover, .dark-theme .popupContainer .ui-datepicker td span.ui-state-hover { background-color: #36393E; color: #FFFFFF; } .dark-theme #ui-datepicker-div td a.ui-state-active, .dark-theme #ui-datepicker-div td span.ui-state-active, /* Selected day */ .dark-theme .popupContainer .ui-datepicker td a.ui-state-active, .dark-theme .popupContainer .ui-datepicker td span.ui-state-active { background-color: #008bbf; color: #FFFFFF; } .dark-theme #ui-datepicker-div td.ui-datepicker-unselectable span, .dark-theme .popupContainer .ui-datepicker td.ui-datepicker-unselectable span { color: #4F545C; /* Muted for unselectable days */ } /* Force jQuery UI date cell states to dark mode (prevents light number tiles). */ .dark-theme #ui-datepicker-div .ui-state-default, .dark-theme #ui-datepicker-div .ui-widget-content .ui-state-default, .dark-theme #ui-datepicker-div .ui-widget-header .ui-state-default, .dark-theme .popupContainer .ui-datepicker .ui-state-default, .dark-theme .popupContainer .ui-datepicker .ui-widget-content .ui-state-default, .dark-theme .popupContainer .ui-datepicker .ui-widget-header .ui-state-default { background: transparent !important; background-image: none !important; border: 1px solid transparent !important; color: #DCDDDE !important; } .dark-theme #ui-datepicker-div .ui-state-hover, .dark-theme #ui-datepicker-div .ui-widget-content .ui-state-hover, .dark-theme #ui-datepicker-div .ui-widget-header .ui-state-hover, .dark-theme .popupContainer .ui-datepicker .ui-state-hover, .dark-theme .popupContainer .ui-datepicker .ui-widget-content .ui-state-hover, .dark-theme .popupContainer .ui-datepicker .ui-widget-header .ui-state-hover { background: #36393E !important; background-image: none !important; border: 1px solid rgba(220, 220, 222, 0.24) !important; color: #FFFFFF !important; } .dark-theme #ui-datepicker-div .ui-state-active, .dark-theme #ui-datepicker-div .ui-widget-content .ui-state-active, .dark-theme #ui-datepicker-div .ui-widget-header .ui-state-active, .dark-theme .popupContainer .ui-datepicker .ui-state-active, .dark-theme .popupContainer .ui-datepicker .ui-widget-content .ui-state-active, .dark-theme .popupContainer .ui-datepicker .ui-widget-header .ui-state-active { background: #008bbf !important; background-image: none !important; border: 1px solid rgba(0, 139, 191, 0.55) !important; color: #FFFFFF !important; } .dark-theme .settingsGroupButtonSelector{ margin: 5px 0px; } .dark-theme .alignTextLeft{ text-align: left; } .dark-theme .alignTextCenter{ text-align: center; } .dark-theme .alignTextRight{ text-align: right; } .dark-theme .form-group{ margin-right: 10px; margin-bottom: 10px; } .dark-theme .form-group > label{ font-weight: 500; font-size: 13px; text-transform: uppercase; margin-bottom: 0px; color: #B9BBBE; /* Label color */ } .dark-theme .labelStyle{ font-weight: 500; font-size: 13px; text-transform: uppercase; margin-bottom: 0px; color: #B9BBBE; /* Was #596882 */ } .dark-theme .uploader-container { /* Generic uploader container */ background-color: #2C2F33; /* Was #fff */ border-radius: 5px; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Was rgba(0, 0, 0, 0.1) */ width: 600px; color: #DCDDDE; /* Default text */ } .dark-theme .uploader-text h1 { font-size: 20px; margin-bottom: 5px; color: #DCDDDE; } .dark-theme .uploader-text p { font-size: 14px; color: #72767D; /* Was #999 */ margin-bottom: 15px; } .dark-theme .uploaderItem{ border: 2px solid #40444B; /* Was black */ display: block; background-color: #23272A; /* Added background for item */ color: #DCDDDE; } /* @keyframes and @property are global */ @keyframes growProgressBar { 0%, 33% { --pgPercentage: 0; } 100% { --pgPercentage: var(--value); } } @property --pgPercentage { syntax: ''; inherits: false; initial-value: 0; } .dark-theme div[role="progressbar"] { --fg: #008bbf; /* Was #00aeef (cyan), using theme blue */ --bg: #40444B; /* Was #def (light), using dark border color for track */ animation: growProgressBar 3s 1 forwards; width: 65px; height: 65px; display: grid; /* Changed from place-items to display: grid */ place-items: center; background: radial-gradient(closest-side, #2C2F33 80%, transparent 0 99.9%, #2C2F33 0), /* Was #EEE, using secondary bg */ conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0) ; font-size: 18px; color: var(--fg); /* Text color matches progress color */ margin-left: 15px; /* padding-top: 20px; */ /* Replaced by grid centering */ margin-top: -10px; border-radius: 50%; } .dark-theme div[role="progressbar"]::before { counter-reset: percentage var(--value); content: counter(percentage) '%'; } /*Uploader Normal View*/ .dark-theme .dropArea{ text-align: center; font-size: 24px; border: 3px dotted #72767D; /* Was #777, slightly lighter dotted */ border-radius: 5px; margin-bottom: 40px; padding: 15px; cursor: pointer; background-color: #23272A; /* Added background */ color: #B9BBBE; /* Text color */ } .dark-theme .dropArea:hover { border-color: #008bbf; /* Accent on hover */ color: #DCDDDE; } .dark-theme .uploadRestrictions{ font-size: 18px; margin-top: -35px; margin-bottom: 40px; padding-left: 5px; color: #72767D; /* Was #999 */ } .dark-theme .uploaderItemContainer { border: 2px solid #40444B; /* Was #999 */ border-radius: 5px; margin-bottom: 15px; height: 95px; position: relative; background-color: #2C2F33; /* Background for items */ display: flex; align-items: center; } .dark-theme .uploaderItemContainer.error:before { content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background-color: #F04747; /* Was red */ z-index: 2; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .dark-theme .uploaderItemPreview{ min-width: 95px; width: 95px; height: 100%; text-align: center; font-size: 25px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #23272A; /* Was #EEE, darker part of item */ background-size: cover; background-repeat: no-repeat; background-position: center; color: #B9BBBE; /* Icon color */ border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .dark-theme .uploaderItemPreview:hover{ font-size: 28px; background-color: #36393E; /* Darker hover */ } .dark-theme .uploaderItemInfo{ padding-left: 20px; margin-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; color: #DCDDDE; } .dark-theme .uploaderItemOptions{ color: #B9BBBE; /* Was #555 */ text-align: right; min-width:50px; font-size: 25px; padding-right: 20px; cursor: pointer; align-self: center; } .dark-theme .uploaderItemOptions:hover{ font-size: 28px; color: #008bbf; /* Accent on hover */ } .dark-theme .uploaderItemFileName{ font-size: 20px; padding-bottom: 3px; color: #DCDDDE; } .dark-theme .uploaderItemFileSize{ font-size: 16px; color: #72767D; } /*Uploader Slim View*/ .dark-theme .dropArea.slim{ text-align: center; font-size: 18px; border: 2px dotted #72767D; /* Was #777 */ border-radius: 5px; margin-bottom: 10px; padding: 5px; cursor: pointer; background-color: #23272A; color: #B9BBBE; } .dark-theme .dropArea.slim:hover { border-color: #008bbf; color: #DCDDDE; } .dark-theme .uploadRestrictions.slim{ font-size: 14px; margin-top: -5px; margin-bottom: 10px; padding-left: 5px; color: #72767D; /* Was #999 */ } .dark-theme .uploaderItemContainer.slim { border: 2px solid #40444B; /* Was #999 */ border-radius: 5px; margin-bottom: 5px; height: 40px; position: relative; padding-left: 3px; background-color: #2C2F33; display: flex; align-items: center; } .dark-theme .uploaderItemFileName.slim{ font-size: 18px; color: #DCDDDE; } .dark-theme .uploaderItemFileSize.slim{ display:none; } .dark-theme .uploaderItemPreview.slim{ min-width: 30px; width: 30px; height: 30px; text-align: center; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #23272A; /* Was #fff */ color: #B9BBBE; /* Was #555 */ background-image: none; border-radius: 3px; margin-right: 5px; } .dark-theme .uploaderItemPreview.slim:hover { background-color: #36393E; } .dark-theme .uploaderItemInfo.slim{ padding-left: 5px; margin-right: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; color: #DCDDDE; } .dark-theme .uploaderItemOptions.slim{ color: #B9BBBE; /* Was #555 */ text-align: right; min-width: 20px; font-size: 18px; padding-right: 5px; cursor: pointer; } .dark-theme .uploaderItemOptions.slim:hover { color: #008bbf; } .dark-theme div[role="progressbar"].slim { --fg: #008bbf; /* Was #00aeef */ --bg: #40444B; /* Was #def */ width: 30px; height: 30px; background: radial-gradient(closest-side, #2C2F33 80%, transparent 0 99.9%, #2C2F33 0), /* Was #FFF */ conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0) ; font-size: 12px; color: var(--fg); margin-left: 5px; display: flex; /* For centering content */ align-items: center; justify-content: center; margin-top: 0px; border-radius: 50%; } .dark-theme .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 200px; height: 100px; margin: 50px auto; background-color: #2C2F33; /* Was #ffffff */ border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Was rgba(0, 0, 0, 0.1) */ position: relative; color: #DCDDDE; /* Text color */ } .dark-theme .loading::before { /* Spinner */ content: ''; display: block; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; border: 4px solid #40444B; /* Was #f3f3f3 (track color) */ border-color: #008bbf transparent #008bbf transparent; /* Was #007bff, using theme blue */ animation: spin 1.5s linear infinite; } .dark-theme .loading::after { content: 'Loading...'; color: #DCDDDE; /* Ensure text is visible */ } /* @keyframes spin is global */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Snapshot */ .dark-theme .snapshotViewBody{ margin-top:0px; background-color: #23272A; /* Overall background for snapshot view */ color: #DCDDDE; } .dark-theme .snapshotSection{ border: 2px solid #40444B; /* Was #dbdbdb */ border-radius: 2px; padding: 10px; background: #2C2F33; /* Was rgb(230 230 230) */ min-height: 80vmin; color: #DCDDDE; } .dark-theme .snapshotSectionTableView{ height:auto; } .dark-theme .snapshotSectionHeader{ font-weight: 700; color: #DCDDDE; /* Was #1c273c */ /*margin-bottom: var(--bs-card-title-spacer-y);*/ font-size: 1.48rem; } /* Snapshot section headers: keep neutral gray (avoid global bluish card-header gradient). */ .dark-theme .snapshot-column .card-header.snapshotSectionHeader { background: #3a3d40 !important; border-color: #4a4e53 !important; color: #e5e9ee !important; } .dark-theme .snapshotCardGroup{ border: 1px solid #303336; /* Was #cecece, subtle border */ border-radius: 3px; background: #23272A; /* Was white, slightly darker than section */ margin-bottom: 10px; color: #DCDDDE; } .dark-theme .snapshotCardGroupHeader{ font-weight: 500; color: #DCDDDE; /* Was #1c273c */ font-size: 1.1rem; padding: 10px; background:#36393E; /* Was #f7f8f9, subtle header bg */ border-bottom: 1px solid #40444B; /* Add separator */ } .dark-theme .snapshotCardGroupBody{ color: #B9BBBE; /* Was #1c273c, slightly muted for body text */ padding: 10px; font-size: 14px; margin-bottom:5px; } .dark-theme .snapshotCard{ border: 1px solid #40444B; /* Was #cecece */ border-radius: 3px; padding: 10px; background: #2C2F33; /* Was white */ min-height: 115px; height: auto; margin-top:10px; cursor:pointer; color: #DCDDDE; position: relative; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .dark-theme .snapshotCard:hover { background-color: #36393E; border-color: #008bbf; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); } .dark-theme .snapshotCardText { color: #DCDDDE; /* Was black */ } .dark-theme .snapshotCardText > .title{ font-size: 16px; font-weight:700; color: #FFFFFF; /* Brighter title */ } .dark-theme .snapshotCardText > .address{ font-size: 14px; color: #B9BBBE; /* Muted address */ } .dark-theme .snapshotCard-details { color: #B9BBBE; } .dark-theme .snapshotCard-details a { color: #66b9ff; text-decoration: none; } .dark-theme .snapshotCard-details a:hover { text-decoration: underline; } .dark-theme .snapshotCard .card-details-toggle { color: #8ea1bf; } .dark-theme .snapshotCard .card-details-toggle:hover { color: #d8e2f2; } .dark-theme .priorityIcon::before { font-family: "Font Awesome 6 Free"; content: "\f7e4"; color: #F04747; /* Was red */ } .dark-theme .scheduledIcon::before { font-family: "Font Awesome 6 Free"; content: "\f017"; color: #7f91a8; /* Muted blue-gray for less visual intensity */ } .dark-theme .page-header{ background:#2C2F33; /* Was white */ padding: 20px 0px 10px; margin-bottom:20px; border-bottom: 1px solid #40444B; /* Add separator */ color: #DCDDDE; } .dark-theme .toggleText{ display: inline-block; vertical-align: middle; padding-bottom: 18px; color: #DCDDDE; } .dark-theme .taskOptions{ cursor: pointer; color: #008bbf; /* Make options stand out */ } .dark-theme .taskOptions:hover { color: #FFFFFF; } .dark-theme .folderTag{ cursor: pointer; border-bottom: solid 1px #40444B; /* Was #cdd4e0 */ padding:10px; color: #B9BBBE; } .dark-theme .folderTag:hover{ background:#36393E; /* Was #dfdfdf */ color: #FFFFFF; } .dark-theme .folderTitle{ font-size:15px; color: #DCDDDE; /* Ensure title is visible */ } .dark-theme .folderTag.selected{ background:#008bbf; /* Was #dfdfdf, use accent for selected */ color:#FFFFFF; border-bottom-color: #5865F2; /* Darker accent border */ } .dark-theme .rounded-top-left-8{ border-radius: 8px 0px 0px 0px; } .dark-theme .rounded-bottom-left-8{ border-radius: 0px 0px 0px 8px; } .dark-theme .buttonBar{ margin-top:10px; padding: 10px; background-color: #23272A; /* Background for button bar */ border-top: 1px solid #40444B; } /*Form Builder*/ .dark-theme #formBuilderCanvas { display: flex; flex-wrap: wrap; padding: 0; border-radius: 4px; } .dark-theme .form-row { display: flex; flex-wrap: wrap; margin-bottom: 10px; } .dark-theme .form-element { margin-right: 1%; margin-bottom: 10px; box-sizing: border-box; /*background-color: #2C2F33; Element background */ padding: 10px; /*border: 1px solid #303336;*/ border-radius: 3px; color: #DCDDDE; } .dark-theme .form-element.inline { margin-right: 1%; } .dark-theme .form-element:last-child { margin-right: 0; } .dark-theme .sortable-placeholder { background-color: rgba(114, 137, 218, 0.3); /* Was rgba(0, 123, 255, 0.3), using theme blue */ flex: 1 1 24%; height: 100px; border: 2px dashed #008bbf; /* Was blue */ margin-right: 1%; border-radius: 3px; } .dark-theme .sortable-placeholder:last-child { margin-right: 0; } /* Phase list */ .dark-theme .phase-list { display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 10px; gap: 10px; border-bottom: 1px solid #40444B; /* Was #ddd */ background-color: #23272A; /* Background for phase list area */ } .dark-theme .phase-container { display: flex; align-items: center; } .dark-theme .phase-item { background-color: #2C2F33; /* Was #f8f9fa */ padding: 10px 15px; border-radius: 5px; border: 1px solid #40444B; /* Was #ddd */ cursor: pointer; display: flex; align-items: center; white-space: nowrap; color: #B9BBBE; margin: 0px 5px; } .dark-theme .phase-item:hover { background-color: #36393E; color: #FFFFFF; } .dark-theme .phase-item.selected { background:#008bbf; /* Was #353535, using theme accent */ color:white; border-color: #5865F2; } .dark-theme .phase-item .moveable { cursor: move; margin-right: 8px; } .dark-theme .phase-chevron { font-size: 16px; color: #008bbf; /* Was #007bff (blue) */ margin-left: 5px; margin-right: 5px; } .dark-theme .phase-item.sortable-placeholder { background-color: rgba(54, 57, 62, 0.5); /* Was #e3f2fd */ border: 2px dashed #008bbf; /* Was #2196f3 */ border-radius: 4px; color: transparent; } .dark-theme .inspection-details { padding: 20px; border-bottom: 1px solid #40444B; /* Was #ddd */ background-color: #2C2F33; /* Background for details */ color: #DCDDDE; } .dark-theme .phase-settings { border-top: 1px solid #40444B; /* Was #ddd */ padding: 20px; background-color: #2C2F33; color: #DCDDDE; } .dark-theme .phase-settings-bar { display: flex; gap: 10px; margin-bottom: 20px; } .dark-theme .form-container-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; margin-bottom: 5px; border: 1px solid #40444B; /* Was #ddd */ border-radius: 5px; background-color: #23272A; /* Darker item background */ color: #DCDDDE; } .dark-theme .form-container-item button { margin-left: 10px; } .dark-theme .formEditSections { border-bottom: 2px solid #585D63; /* Was #888, a slightly more prominent border */ padding: 5px 0px; margin-bottom: 15px; } .dark-theme .formsHeader { padding-left: 10px; font-size: 1.2em; font-weight: bold; color: #DCDDDE; } .dark-theme .editSections { padding-top: 15px; padding-bottom: 35px; } .dark-theme .inspection-type-editor { background: #20252b; border-color: #40444B; } .dark-theme .inspection-type-editor .inspection-details, .dark-theme .inspection-editor-hero, .dark-theme .inspection-settings-panel, .dark-theme .inspection-preview-panel, .dark-theme .rendered-form-preview { background: #20252b; border-color: #40444B; } .dark-theme .inspection-type-editor .phase-list-wrapper, .dark-theme .inspection-type-editor .phase-settings { background: #171b20; border-color: #40444B; } .dark-theme .inspection-type-editor .phase-list { background: transparent; border-bottom: 0; display: inline-flex !important; gap: 8px; max-width: none; min-width: 0; overflow: visible; padding: 0; width: max-content; } .dark-theme .inspection-type-editor .inspection-settings-workspace { align-items: start; } .dark-theme .inspection-type-editor .inspection-settings-panel, .dark-theme .inspection-type-editor .inspection-preview-panel { align-self: start; margin-top: 0; } .dark-theme .inspection-type-editor .inspection-preview-panel__body { padding-top: 0; } .dark-theme .inspection-type-editor .inspection-details { padding: 0; } .dark-theme .inspection-type-editor .phase-settings { padding: 14px; } .dark-theme .inspection-editor-hero__eyebrow, .dark-theme .inspection-editor-hero__copy, .dark-theme .inspection-phase-step__meta, .dark-theme .inspection-settings-label, .dark-theme .inspection-preview-empty, .dark-theme .inspection-preview-loading { color: #aeb7c2; } .dark-theme .inspection-editor-hero__title-row h4, .dark-theme .inspection-settings-toggle, .dark-theme .inspection-preview-status .project-task-card__section-heading h6, .dark-theme .inspection-form-preview-header h5 { color: #eef2f7; } .dark-theme .inspection-phase-step__number { background: #2a3037; border-color: rgba(255, 255, 255, 0.16); color: #aeb7c2; } .dark-theme .inspection-type-editor .phase-item.inspection-phase-step { background: #20252b; border-color: rgba(255, 255, 255, 0.14); color: #d6dde6; } .dark-theme .inspection-type-editor .phase-item.inspection-phase-step:hover { border-color: rgba(0, 174, 239, 0.45); box-shadow: none; } .dark-theme .inspection-type-editor .phase-item.inspection-phase-step.selected { background: rgba(0, 174, 239, 0.14); border-color: rgba(0, 174, 239, 0.58); color: #eef2f7; } .dark-theme .inspection-settings-section, .dark-theme .inspection-form-preview-header { border-color: #40444B; } .dark-theme .inspection-type-editor .inspection-settings-section { border-bottom: 1px solid #40444B; margin: 0; padding: 0; } .dark-theme .inspection-type-editor .inspection-settings-toggle { font-size: 0.94rem; font-weight: 800; padding: 12px 14px; text-transform: none; } .dark-theme .inspection-type-editor .inspection-settings-toggle__count { color: #aeb7c2; } .dark-theme .inspection-type-editor .inspection-settings-options { padding: 0 14px 12px; } .dark-theme .inspection-settings-section--nested, .dark-theme .inspection-point-rule, .dark-theme .inspection-preview-status, .dark-theme .inspection-form-preview-header { background: #232a33; border-color: #40444B; } .dark-theme .inspection-preview-status { --project-tasks-border: #40444B; --project-tasks-ink: #C7CCD2; } .dark-theme .inspection-preview-status .project-task-card__status-choice { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.09); color: var(--project-tasks-ink); } .dark-theme .inspection-type-editor .inspection-settings-section--nested { border: 1px solid #40444B; border-left: 2px solid #5b6a7d; margin: 0 0 7px 8px; } .dark-theme .inspection-type-editor .inspection-settings-section--nested .inspection-settings-toggle { font-size: 0.82rem; padding: 8px 10px; } .dark-theme .inspection-type-editor .inspection-settings-section--nested .inspection-settings-options { padding: 0 10px 10px; } .dark-theme .inspection-settings-toggle:hover { background: #252b33; } .dark-theme .inspection-settings-checkbox { color: #d6dde6; text-transform: none; } .dark-theme .inspection-settings-label, .dark-theme .inspection-points-summary, .dark-theme .inspection-settings-checkbox span { text-transform: none; } .dark-theme .inspection-point-rule__field .inspection-settings-label, .dark-theme .inspection-points-summary { color: #aeb7c2; } .dark-theme .inspection-passfail-toggle-row { border-top-color: #40444B; } .dark-theme .inspection-type-editor .form-containers-list .form-container-item { background: #232a33; border-color: #40444B; color: #dce4f2; } .dark-theme .inspection-type-editor .sortable-handle { color: #93a4bc; } .dark-theme .inspection-type-editor .form-containers-list .sortable-placeholder { background-color: #2d3441; border-color: #5d8fe0; } .dark-theme .textarea-container { position: relative; } .dark-theme .field-selector-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer; font-size: 16px; color: #008bbf; /* Button color */ } .dark-theme .field-selector-btn:hover { color: #FFFFFF; } .dark-theme .field-selector-dropdown { position: absolute; top: 40px; right: 10px; background: #2C2F33; /* Was white */ border: 1px solid #40444B; /* Was #ccc */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Was rgba(0, 0, 0, 0.1) */ z-index: 1000; width: 200px; border-radius: 4px; } /* Styling for items in the dropdown, assuming they are divs or similar */ .dark-theme .field-selector-dropdown > div, .dark-theme .field-selector-dropdown > span { /* if using option tags, this won't style them fully */ padding: 8px 10px; cursor: pointer; color: #DCDDDE; } .dark-theme .field-selector-dropdown > div:hover, .dark-theme .field-selector-dropdown > span:hover { background-color: #36393E; /* Was #f0f0f0 */ color: #FFFFFF; } .dark-theme .passFailToggle span::before { /* Text "Pass" */ content: "Pass"; left: -32px; color: #DCDDDE; /* Text on the track */ } .dark-theme .passFailToggle span::after { /* Text "Fail" */ content: "Fail"; right: -32px; color: #DCDDDE; /* Text on the track */ } .dark-theme .passFailToggle { /* The track, when 'Fail' is selected (default) */ background-color: #F04747; /* Was #dc3545 (red for Fail) */ /* Assuming this is the az-toggle structure from earlier, needs slider:before for handle */ position: relative; /* Needed for ::before handle if it's the az-toggle structure */ border-radius: 15px; height: 25px; width: 60px; /* Match az-toggle */ padding: 2px; display: inline-block; /* For layout */ } .dark-theme input:checked + .passFailToggle { background-color: #43B581; /* Green for Pass */ } /* If .passFailToggle uses .slider:before structure from .switch */ .dark-theme .passFailToggle .slider:before { /* Assuming .slider is child or part of it */ background-color: #B9BBBE; /* Handle color */ } .dark-theme .formOptions{ padding-left:10px; padding-right:10px; } .dark-theme .hidden { display: none; } /* START Company Select */ .dark-theme .custom-select-container { position: relative; width: 180px; margin: 0px 0px 0px 15px; } .dark-theme .custom-select { /* The visible part of the select */ padding: 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: #DCDDDE; background-color: #2C2F33; border: 1px solid #40444B; border-radius: 4px; } .dark-theme .custom-select:hover { background-color: #36393E; } .dark-theme .custom-select::after { /* Arrow */ content: '▼'; margin-left: 10px; color: #72767D; /* Arrow color */ } .dark-theme .dropdown-options { /* The dropdown list */ position: absolute; width: 100%; border: 1px solid #40444B; background-color: #2C2F33; box-shadow: 0 2px 5px rgba(0,0,0,0.3); z-index: 1; border-radius: 0 0 4px 4px; margin-top: -1px; } .dark-theme .dropdown-options div { /* Items in dropdown */ padding: 10px; cursor: pointer; color: #DCDDDE; } .dark-theme .dropdown-options div:hover { background-color: #36393E; color: #FFFFFF; } /* END Company Select */ /* Rotation for different compass directions */ .dark-theme .arrow-n, .dark-theme .arrow-nne, .dark-theme .arrow-ne, .dark-theme .arrow-ene, .dark-theme .arrow-e, .dark-theme .arrow-ese, .dark-theme .arrow-se, .dark-theme .arrow-sse, .dark-theme .arrow-s, .dark-theme .arrow-ssw, .dark-theme .arrow-sw, .dark-theme .arrow-wsw, .dark-theme .arrow-w, .dark-theme .arrow-wnw, .dark-theme .arrow-nw, .dark-theme .arrow-nnw { /* Transforms are fine, ensure color comes from parent or is set if needed */ color: #B9BBBE; /* Default arrow color if it's an icon font */ } .dark-theme .user-filter-container { display: flex; align-items: center; gap: 5px; } .dark-theme .user-icon-filter { width: 38px; height: 38px; background-color: #40444B; /* Was #D9D9D9, dark gray */ border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #303336; /* Subtle border */ } .dark-theme .user-icon-filter img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .dark-theme .user-badge-filter { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-weight: bold; font-size: 13px; text-transform: uppercase; border-radius: 50%; transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease; background-color: #40444B; /* Default badge background */ color: #DCDDDE; /* Default badge text */ border: 1px solid #303336; } .dark-theme .user-badge-filter:hover { background-color: #4F545C; } /* Unassigned user icons should be a bit more muted than assigned badges. */ .dark-theme .user-icon-filter[data-userid="0"] { background-color: #353b45 !important; border-color: #4a5260 !important; color: #8f9bb0 !important; } .dark-theme .user-icon-filter[data-userid="0"] i, .dark-theme .user-badge-filter[data-bs-original-title="Unassigned"] i, .dark-theme .user-badge-filter i.fa-user-plus { color: #8f9bb0 !important; } .dark-theme .user-badge-filter[data-bs-original-title="Unassigned"] { background-color: #353b45 !important; border-color: #4a5260 !important; color: #8f9bb0 !important; } .dark-theme .user-badge-filter-selected { box-shadow: 0 0 0 3px #008bbf; /* Was #4285F4 (blue), using theme blue */ background-color: #008bbf; /* Selected badge background */ color: #FFFFFF; /* Selected badge text */ border-color: #5865F2; /* Darker border for selected */ } .dark-theme .compact-table td { padding: 5px; color: #B9BBBE; /* Text color for table cells */ border-bottom: 1px solid #303336; /* Subtle row separator */ } .dark-theme .compact-table th { padding: 8px 5px; color: #DCDDDE; background-color: #36393E; border-bottom: 2px solid #40444B; text-align: left; /* Ensure header text alignment */ } .dark-theme .compact-table td:first-child { padding-right: 5px; } .dark-theme .compact-table td:nth-child(2) { padding-left: 5px; } .dark-theme .compact-table tr:hover td { background-color: #303336; /* Slightly darker hover */ } .dark-theme .select2-results__group{ font-size:16px; font-weight:700; background: #36393E; /* Was #454545, slightly adjusted */ color: #DCDDDE; /* Was white */ padding: 8px 10px; } .dark-theme .select2-dropdown { /* For Select2 v4 */ background-color: #2C2F33; border: 1px solid #40444B; color: #DCDDDE; border-radius: 4px; } .dark-theme .select2-results__option { color: #DCDDDE; padding: 6px 12px; } .dark-theme .select2-results__option--highlighted[aria-selected], .dark-theme .select2-results__option--selected { /* More robust for selected */ background-color: #008bbf; color: #FFFFFF; } .dark-theme .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) { /* Persist selection color if not hovered */ background-color: #4F545C; color: #FFFFFF; } .dark-theme .select2-search--dropdown .select2-search__field { background-color: #23272A; border: 1px solid #40444B; color: #DCDDDE; padding: 6px 12px; border-radius: 3px; } .dark-theme .select2-results__options { max-height: 400px !important; overflow-y: auto; } @media (min-width: 992px) { .dark-theme .snapshotContainerView.horizontal-scroll-lg { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden; background-color: #23272A; /* Background for the scrollable container */ padding-bottom: 10px; /* Space for scrollbar if needed */ } .dark-theme .snapshot-column.col-lg-fixed-width { flex: 0 0 350px !important; max-width: 350px !important; } } .dark-theme .option-new-builder { background: #2a4b34; /* Was #eef9f1 (light green), now dark green */ color: #DCDDDE; /* Was black */ padding: 4px 8px; border-radius: 4px; display: inline-block; font-size: 0.9em; border: 1px solid #376344; /* Subtle border */ } .dark-theme .option-new-builder:hover { color: #FFFFFF; /* Was black */ background: #376344; /* Was #def2e2, slightly lighter dark green */ } .dark-theme .map-responsive { overflow: hidden; padding-bottom: 75%; position: relative; height: 0; border: 1px solid #40444B; /* Border around map */ border-radius: 4px; } .dark-theme .map-responsive iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; /* filter: invert(90%) hue-rotate(180deg) saturate(70%) brightness(90%); */ /* Example advanced filter for maps */ } /* Scrollbar styling for webkit browsers */ .dark-theme .snapshot-column > .card > .card-body::-webkit-scrollbar, .dark-theme .snapshotContainerView::-webkit-scrollbar { width: 8px; height: 8px; /* For horizontal scrollbar */ } .dark-theme .snapshot-column > .card > .card-body::-webkit-scrollbar-thumb, .dark-theme .snapshotContainerView::-webkit-scrollbar-thumb { background-color: rgba(114, 118, 125, 0.5); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; transition: background-color 0.3s ease; } .dark-theme .snapshot-column > .card > .card-body::-webkit-scrollbar-thumb:hover, .dark-theme .snapshotContainerView::-webkit-scrollbar-thumb:hover { background-color: rgba(114, 118, 125, 0.8); } .dark-theme .snapshot-column > .card > .card-body::-webkit-scrollbar-track, .dark-theme .snapshotContainerView::-webkit-scrollbar-track { background-color: rgba(35, 39, 42, 0.5); border-radius: 6px; } .dark-theme .phaseGroupContainer{ overflow:auto; background-color: transparent; /* Avoid dark band directly under section header */ padding: 0 5px 5px; border-radius: 4px; } .dark-theme .snapshot-horizontal-scroller-wrapper .scroll-arrow { background: #2C2F33; border-color: #40444B; color: #DCDDDE; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); } .dark-theme .snapshot-horizontal-scroller-wrapper .scroll-arrow:hover { background: #36393E; } /* Snapshot card assignee badges should match light-mode size. */ .dark-theme .snapshotViewModule .snapshotViewBody .snapshotCard .user-badge-filter { width: 25px; height: 25px; font-size: 13px; } .dark-theme #snapshotFiltersOffcanvas .offcanvas-footer { background: #2C2F33; border-top-color: #40444B !important; } .dark-theme #snapshotFiltersOffcanvas #phaseVisibilityList { border-color: #40444B !important; background-color: #23272A !important; } .dark-theme #schedulerFiltersOffcanvas #schedulerPhaseVisibilityList { border-color: #40444B; background-color: #23272A; } .dark-theme #snapshotFiltersOffcanvas .filter-search-input { background-color: #23272A; border-color: #40444B; color: #DCDDDE; } .dark-theme #snapshotFiltersOffcanvas .filter-search-input::placeholder { color: #72767D; } .dark-theme #snapshotFiltersOffcanvas .snapshot-filter-item { background: #36393E !important; border-color: #4E535B !important; color: #DCDDDE !important; } .dark-theme #snapshotFiltersOffcanvas .snapshot-filter-item:hover { background: #43484f !important; border-color: #5B616A !important; } .dark-theme #snapshotFiltersOffcanvas .snapshot-filter-item.active { background: #008bbf !important; border-color: #008bbf !important; color: #FFFFFF !important; } .dark-theme .beta-tag { font-size: 0.6em; color: #B9BBBE; /* Was #777 */ vertical-align: super; margin-left: 5px; font-weight: normal; background-color: #40444B; /* Was #f0f0f0 */ padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; text-transform: uppercase; display: inline-block; line-height: 1; } .dark-theme .inspector-list-container .list-group-item { margin-bottom: 5px; border-radius: .375rem; background-color: #2C2F33; /* Item background */ border: 1px solid #40444B; color: #DCDDDE; } .dark-theme .inspector-list-container .list-group-item:hover { background-color: #36393E; } .dark-theme .inspector-initials-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: white; font-weight: bold; font-size: 0.9em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.1); } .dark-theme .inspector-name { font-weight: 600; color: #FFFFFF; /* Brighter name */ } .dark-theme .inspector-zone-status { font-size: 0.8em; display: block; color: #B9BBBE; /* Muted status text */ } .dark-theme .inspector-zone-status .fa-map-marked-alt.text-success { color: #43B581 !important; /* Was #198754, theme green */ } .dark-theme .inspector-zone-status .fa-map-marked-alt.text-muted { color: #72767D !important; /* Was #6c757d, theme muted */ } .dark-theme .capacity-badge { font-size: 0.7em !important; padding: .3em .5em !important; margin-bottom: 2px; min-width: 50px; text-align: right; border-radius: .25rem; font-weight: bold; } .dark-theme .capacity-am-badge { background-color: #4a3c1e !important; color: #ffda6b !important; border: 1px solid #6e562b; } .dark-theme .capacity-pm-badge { background-color: #1c3c6e !important; color: #a8caff !important; border: 1px solid #2a5aa0; } .dark-theme .inspector-daily-load { border-top: 1px solid #40444B; /* Was #eee */ padding-top: 5px; margin-top: 8px !important; } .dark-theme #inspectorList .list-group-item.active { background-color: #008bbf; /* Was #e7f1ff, theme blue for active */ border-color: #5865F2; /* Darker blue border */ color: #FFFFFF; /* Text color for active item */ } .dark-theme #inspectorList .list-group-item.active .inspector-name { color: #FFFFFF !important; /* Was #0b5ed7, ensure name is bright */ } .dark-theme #inspectorList .list-group-item.active .inspector-zone-status, .dark-theme #inspectorList .list-group-item.active .inspector-zone-status .fa-map-marked-alt { color: #E0E0E0 !important; /* Lighter muted text for active item */ } .dark-theme .advanced-pin-marker * { pointer-events: auto !important; } .dark-theme .advanced-pin-marker { /* filter: drop-shadow(0 0 1px rgba(255,255,255,0.7)) drop-shadow(0 0 1px rgba(255,255,255,0.7)); */ } .dark-theme .edit-points-toggle-btn-minimal { background: transparent; border: none; padding: 2px; line-height: 1; cursor: pointer; color: #B9BBBE; /* Was #6c757d, light gray icon */ display: inline-flex; align-items: center; justify-content: center; font-size: 0.9em; } .dark-theme .edit-points-toggle-btn-minimal:hover { color: #FFFFFF; /* Was #343a40, white on hover */ } .dark-theme .edit-points-toggle-btn-minimal[aria-expanded="false"] .fa-pencil-alt { display: inline-block; } .dark-theme .edit-points-toggle-btn-minimal[aria-expanded="false"] .fa-times { display: none; } .dark-theme .edit-points-toggle-btn-minimal[aria-expanded="true"] .fa-pencil-alt { display: none; } .dark-theme .edit-points-toggle-btn-minimal[aria-expanded="true"] .fa-times { display: inline-block; } /* ==== START: Azia Theme Specific Overrides from second file ==== */ /* Note: These are already prefixed with .dark-theme */ /* If they duplicate selectors above, the later one (these) will take precedence if specificity is equal. */ /* Header (Azia Specific - ensure these override general .dark-theme .az-header if needed) */ .dark-theme .az-header.az-header-primary { background-color: rgb(40, 43, 45); /* var(--dark-bg-secondary, #2C2F33); */ border-bottom: 1px solid #40444B; /* var(--dark-border-primary, #40444B); */ } /* Custom Select in Header (Azia Specific) */ .dark-theme .custom-select-container .custom-select { background-color: #36393E; /* var(--dark-bg-tertiary, #36393E); */ color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ border: 1px solid #40444B; /* var(--dark-border-primary, #40444B); */ } .dark-theme .custom-select-container .custom-select::after { color: #B9BBBE; /* var(--dark-text-secondary, #B9BBBE); */ } .dark-theme .custom-select-container .dropdown-options { background-color: #2C2F33; /* var(--dark-bg-secondary, #2C2F33); */ border: 1px solid #40444B; /* var(--dark-border-primary, #40444B); */ border-top: none; } .dark-theme .custom-select-container .dropdown-options div { color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ } .dark-theme .custom-select-container .dropdown-options div:hover { background-color: #36393E; /* var(--dark-bg-tertiary, #36393E); */ color: #FFFFFF; } .dark-theme .custom-select-container .dropdown-options div i.fas { color: #008bbf !important; /* var(--dark-accent-blue, #008bbf) !important; */ } /* Header Right - Profile Menu (Azia Specific) */ .dark-theme .az-header-right .az-img-user img.rounded-circle { border: 2px solid #40444B; /* var(--dark-border-primary, #40444B); */ } .dark-theme .az-profile-menu .dropdown-menu { background-color: #2C2F33; /* var(--dark-bg-secondary, #2C2F33); */ border: 1px solid #40444B; /* var(--dark-border-primary, #40444B); */ box-shadow: 0 3px 15px rgba(0,0,0,0.3); /* var(--dark-shadow-color, rgba(0,0,0,0.3)); */ } .dark-theme .az-profile-menu .az-dropdown-header { background-color: #36393E; /* var(--dark-bg-tertiary, #36393E); */ border-bottom: 1px solid #40444B; /* var(--dark-border-primary, #40444B); */ } .dark-theme .az-profile-menu .az-dropdown-header .az-header-arrow i { color: #B9BBBE; /* var(--dark-text-secondary, #B9BBBE); */ } .dark-theme .az-profile-menu .az-header-profile h6 { color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ } .dark-theme .az-profile-menu .az-header-profile span { color: #B9BBBE; /* var(--dark-text-secondary, #B9BBBE); */ } .dark-theme .az-profile-menu .dropdown-item { color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ } /* Header company switch should blend into header without a filled background. */ .dark-theme .az-header .custom-select-container .custom-select { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; } .dark-theme .az-header .custom-select-container .custom-select:hover, .dark-theme .az-header .custom-select-container .custom-select:focus { background-color: transparent !important; border-color: transparent !important; } /* Footer theme toggle should stay subtle for testing period. */ .dark-theme .az-footer .theme-toggle-btn { background: transparent; border: 0; color: #99a6b8; } .dark-theme .az-footer .theme-toggle-btn:hover, .dark-theme .az-footer .theme-toggle-btn:focus { background: transparent; border: 0; color: #c5d0df; } .dark-theme .az-profile-menu .dropdown-item:hover, .dark-theme .az-profile-menu .dropdown-item:focus { background-color: #36393E; /* var(--dark-bg-tertiary, #36393E); */ color: #FFFFFF; } .dark-theme .az-profile-menu .dropdown-item i { color: #B9BBBE; /* var(--dark-text-secondary, #B9BBBE); */ } .dark-theme .az-profile-menu .dropdown-item:hover i, .dark-theme .az-profile-menu .dropdown-item:focus i { color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ } /* Navbar (Azia Specific) */ .dark-theme .az-navbar.az-navbar-dashboard-four { background-color: rgb(0, 139, 191); /* var(--dark-bg-secondary, #2C2F33); */ border-bottom: 1px solid #40444B; /* var(--dark-border-primary, #40444B); */ } .dark-theme .az-navbar .nav .nav-item .nav-link { color: #ffffff; /* var(--dark-text-secondary, #B9BBBE); */ } .dark-theme .az-navbar .nav .nav-item .nav-link:hover, .dark-theme .az-navbar .nav .nav-item .nav-link:focus { color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ background-color: rgb(0, 139, 191); /* var(--dark-bg-tertiary, #36393E); */ } .dark-theme .az-navbar .nav .nav-item.active .nav-link { color: #FFFFFF; background-color: rgb(0, 139, 191); /* var(--dark-accent-blue, #008bbf); */ } /* Page Header (Azia Specific) */ .dark-theme .page-header { /* This was already in general, Azia specific might be if Azia themes page-header differently */ background-color: #181a1b; /* var(--dark-bg-primary, #23272A); */ border-bottom: 1px solid #40444B; /* var(--dark-border-primary, #40444B); */ } .dark-theme .page-header .az-content-title { color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ } /* Cards (Azia Specific) */ .dark-theme .card { background-color: rgb(24, 26, 27); /* var(--dark-bg-secondary, #2C2F33); */ border: 1px solid #40444B; /* var(--dark-border-primary, #40444B); */ color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ } .dark-theme hr { border-top: 1px solid #b1bcd0; /* var(--dark-border-secondary, #303336); */ } /* Buttons (Azia Specific) */ .dark-theme .btn { background-color: #36393E; /* var(--dark-bg-tertiary, #36393E); */ color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ border-color: #40444B; /* var(--dark-border-primary, #40444B); */ } .dark-theme .btn:hover { background-color: #4f545c; border-color: #585D63; } /* Keep input-based buttons aligned with normal Bootstrap button sizing. */ .dark-theme input.btn, .dark-theme input[type="button"].btn, .dark-theme input[type="submit"].btn, .dark-theme input[type="reset"].btn { padding: 0.375rem 0.75rem; line-height: 1.5; min-height: calc(1.5em + 0.75rem + 2px); } .dark-theme .btn-primary { background-color: #008bbf; /* var(--dark-accent-blue, #008bbf); */ border-color: #008bbf; /* var(--dark-accent-blue, #008bbf); */ color: #FFFFFF; } .dark-theme .btn-primary:hover { background-color: #5865F2; border-color: #5865F2; } .dark-theme .btn-primary.buttonGlow { --buttonGlowColorRgb: 0, 139, 191; } .dark-theme .btn-primary.buttonGlow:hover, .dark-theme .btn-primary.buttonGlow:focus-visible { background-color: #1196cb; border-color: #1196cb; } .dark-theme .btn-danger { background-color: #F04747; /* var(--dark-accent-red, #F04747); */ border-color: #F04747; /* var(--dark-accent-red, #F04747); */ color: #FFFFFF; } .dark-theme .btn-danger:hover { background-color: #d94040; border-color: #d94040; } /* Loading Indicator (Azia Specific) */ .dark-theme .loading { background-color: #2C2F33; /* This will be on a card, so it should be consistent with card bg */ color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ } .dark-theme .loading::before { border: 4px solid #40444B; /* var(--dark-border-primary, #40444B); */ border-color: #008bbf transparent #008bbf transparent; /* var(--dark-accent-blue, #008bbf) transparent var(--dark-accent-blue, #008bbf) transparent; */ } /* Modals (Azia Specific - these are more general modal structure from micromodal) */ .dark-theme .modal__overlay { background: rgba(10, 10, 10, 0.85); } .dark-theme .modal__container { /* This selector is generic, already well-covered */ background-color: #2C2F33; /* var(--dark-bg-secondary, #2C2F33); */ border: 1px solid #40444B; /* var(--dark-border-primary, #40444B); */ color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ } .dark-theme .modal__header { /* Generic */ border-bottom: 1px solid #40444B; /* var(--dark-border-primary, #40444B); */ } .dark-theme .modal__header #mediaModel-title, .dark-theme .modal__header #fullWidthModel-title, .dark-theme .modal__header #fullScreenModel-title, .dark-theme .modal__header #smallModal-title, .dark-theme .modal__header .modal_title { color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ } .dark-theme .modal__close { /* Generic */ color: #B9BBBE; /* var(--dark-text-secondary, #B9BBBE); */ } .dark-theme .modal__close:hover { /* Generic */ color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ } .dark-theme .modal__content .tx-success i { color: #43B581; /* var(--dark-accent-green, #43B581); */ } .dark-theme .modal__content h4, .dark-theme .modal__content h5, .dark-theme .modal__content p { color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ } .dark-theme .modal__content p#mediaModel-Body, .dark-theme .modal__content p#confirmationModel-Body { color: #B9BBBE; /* var(--dark-text-secondary, #B9BBBE); */ } .dark-theme .modal__content .fa-circle-notch.fa-spin { color: #008bbf; /* var(--dark-accent-blue, #008bbf); */ } /* Footer (Azia Specific) */ .dark-theme .az-footer { background-color: #23272A; /* var(--dark-bg-primary, #23272A); */ border-top: 1px solid #40444B; /* var(--dark-border-primary, #40444B); */ color: #B9BBBE; /* var(--dark-text-secondary, #B9BBBE); */ } .dark-theme .az-footer span { color: #B9BBBE; /* var(--dark-text-secondary, #B9BBBE); */ } .dark-theme .az-footer .az-footer-menu a, .dark-theme .az-footer .az-footer-menu a.az-content-text, .dark-theme .az-footer .az-footer-menu a i { color: #c4cedb; } .dark-theme .az-footer .az-footer-menu a:hover, .dark-theme .az-footer .az-footer-menu a:focus, .dark-theme .az-footer .az-footer-menu a:hover i, .dark-theme .az-footer .az-footer-menu a:focus i { color: #eef3fa; } /* General Text & Icon Colors (Azia Specific Fallback/General) */ .dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5, .dark-theme h6 { color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ } .dark-theme p { color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ } .dark-theme .fas, .dark-theme .far, .dark-theme .fab, .dark-theme .fal, .dark-theme .fad, .dark-theme .icon { color: #ffffff; /* var(--dark-text-secondary, #B9BBBE); */ } .dark-theme .text-cyan { color: #008bbf !important; /* var(--dark-accent-blue, #008bbf) !important; */ } /* Select2 (Azia Specific - ensure these match previous Select2 for consistency) */ .dark-theme .select2-container--default .select2-selection--single { background-color: #2C2F33; /* var(--dark-bg-secondary, #2C2F33); */ border: 1px solid #40444B; /* var(--dark-border-primary, #40444B); */ } .dark-theme .select2-container--default .select2-selection--single .select2-selection__rendered { color: #DCDDDE; /* var(--dark-text-primary, #DCDDDE); */ } .dark-theme .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #B9BBBE transparent transparent transparent; /* var(--dark-text-secondary, #B9BBBE) ... */ } .dark-theme .table { /* Default table text color in dark theme */ --bs-table-color: var(--dark-text-primary, #DCDDDE); /* Default table background in dark theme - set to transparent to allow row/cell styling */ --bs-table-bg: transparent; /* Border color for table elements */ --bs-table-border-color: var(--dark-border-secondary, #303336); /* Striped table variables for dark theme */ --bs-table-striped-color: var(--dark-text-primary, #DCDDDE); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); /* Subtle light overlay for striping on dark */ /* Active table variables (if used, e.g., for selected rows) */ --bs-table-active-color: #FFFFFF; --bs-table-active-bg: var(--dark-accent-blue, #008bbf); /* Hover table variables for dark theme */ --bs-table-hover-color: #FFFFFF; --bs-table-hover-bg: var(--dark-bg-tertiary, #36393E); width: 100%; margin-bottom: 1rem; color: var(--bs-table-color); /* Use the CSS variable */ background-color: var(--bs-table-bg); /* Use the CSS variable */ border-collapse: collapse; border-color: var(--bs-table-border-color); /* Set overall table border color */ } /* Direct element styling as a fallback or for non-Bootstrap variable contexts. The `!important` flags are here because we're fighting a stubborn style. Ideally, these would not be needed if variable overrides work perfectly. */ .dark-theme .table thead th { vertical-align: bottom; border-bottom: 2px solid var(--dark-border-primary, #40444B) !important; background-color: var(--dark-bg-tertiary, #36393E) !important; color: var(--dark-text-primary, #DCDDDE) !important; padding: 0.75rem; text-align: left; font-weight: 600; } .dark-theme .table tbody tr { /* Attempt to override any direct background set by azia.css */ background-color: transparent !important; /* Most critical override */ color: inherit; /* Rows should inherit color from .table or have it set by td */ transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; } .dark-theme .table tbody td { padding: 0.75rem; vertical-align: top; border-top: 1px solid var(--bs-table-border-color, #303336) !important; /* Use variable or fallback */ color: var(--dark-text-secondary, #B9BBBE) !important; } .dark-theme .table tbody td:first-child { color: var(--dark-text-primary, #DCDDDE) !important; } /* --- Hover States (using Bootstrap variable and direct fallback) --- */ .dark-theme .table tbody tr.clickable:hover, .dark-theme .table-hover tbody tr:hover { /* For .table-hover bootstrap class */ background-color: var(--bs-table-hover-bg, #36393E) !important; color: var(--bs-table-hover-color, #FFFFFF) !important; } /* Ensure td text color also changes on row hover if not inheriting properly */ .dark-theme .table tbody tr.clickable:hover td, .dark-theme .table-hover tbody tr:hover td { color: var(--bs-table-hover-color, #FFFFFF) !important; } /* --- Striped Table Styling (using Bootstrap variable and direct fallback) --- */ .dark-theme .table-striped > tbody > tr:nth-of-type(odd) > * { /* Targets cells for color */ --bs-table-accent-bg: var(--bs-table-striped-bg, rgba(255, 255, 255, 0.03)); color: var(--bs-table-striped-color, #DCDDDE); } .dark-theme .table-striped tbody tr:nth-of-type(odd) { background-color: var(--bs-table-striped-bg, rgba(255, 255, 255, 0.03)) !important; } /* Ensure even rows in striped table are default (transparent or base tr color) */ .dark-theme .table-striped tbody tr:nth-of-type(even) { background-color: transparent !important; /* Or var(--bs-table-bg) if that's not transparent */ } /* Hover on striped rows should still use the standard hover background */ .dark-theme .table-striped tbody tr:nth-of-type(odd):hover, .dark-theme .table-striped tbody tr:nth-of-type(even):hover { background-color: var(--bs-table-hover-bg, #36393E) !important; color: var(--bs-table-hover-color, #FFFFFF) !important; } .dark-theme .table-striped tbody tr:nth-of-type(odd):hover td, .dark-theme .table-striped tbody tr:nth-of-type(even):hover td { color: var(--bs-table-hover-color, #FFFFFF) !important; } /* --- Bordered Table Styling --- */ .dark-theme .table-bordered { border: 1px solid var(--bs-table-border-color, #40444B) !important; } .dark-theme .table-bordered th, .dark-theme .table-bordered td { border: 1px solid var(--bs-table-border-color, #40444B) !important; } .dark-theme .table-bordered thead th { border-bottom-width: 2px !important; } .dark-theme table#inspectionTypeTable tbody tr { background-color: transparent !important; } .dark-theme table#inspectionTypeTable tbody tr:hover, .dark-theme table#inspectionTypeTable tbody tr.clickable:hover { background-color: #2a2d30 !important; } .dark-theme table.dataTable tbody td.sorting_1 { background-color: var(--dark-bg-tertiary, #36393E) !important; color: var(--dark-text-primary, #DCDDDE) !important; } .dark-theme .dropdown-menu { --bs-dropdown-color: var(--dark-text-primary, #DCDDDE); --bs-dropdown-bg: var(--dark-bg-secondary, #2C2F33); --bs-dropdown-border-color: var(--dark-border-primary, #40444B); --bs-dropdown-box-shadow: 0 0.5rem 1rem var(--dark-shadow-color, rgba(0, 0, 0, 0.3)); --bs-dropdown-link-color: var(--dark-text-primary, #DCDDDE); --bs-dropdown-link-hover-color: #FFFFFF; --bs-dropdown-link-hover-bg: var(--dark-bg-tertiary, #36393E); --bs-dropdown-link-active-color: #FFFFFF; --bs-dropdown-link-active-bg: var(--dark-accent-blue, #008bbf); --bs-dropdown-link-disabled-color: var(--dark-disabled-text, #4F545C); --bs-dropdown-header-color: var(--dark-text-secondary, #B9BBBE); --bs-dropdown-divider-bg: var(--dark-border-primary, #40444B); color: var(--bs-dropdown-color) !important; background-color: var(--bs-dropdown-bg) !important; border: var(--bs-dropdown-border-width, 1px) solid var(--bs-dropdown-border-color) !important; box-shadow: var(--bs-dropdown-box-shadow) !important; } .dark-theme .dropdown-item { color: var(--bs-dropdown-link-color) !important; background-color: transparent !important; } .dark-theme .dropdown-item:hover, .dark-theme .dropdown-item:focus { color: var(--bs-dropdown-link-hover-color) !important; background-color: var(--bs-dropdown-link-hover-bg) !important; } .dark-theme .dropdown-item.active, .dark-theme .dropdown-item:active { color: var(--bs-dropdown-link-active-color) !important; background-color: var(--bs-dropdown-link-active-bg) !important; } .dark-theme .dropdown-item.disabled, .dark-theme .dropdown-item:disabled { color: var(--bs-dropdown-link-disabled-color) !important; background-color: transparent !important; } .dark-theme .dropdown-divider { border-top-color: var(--bs-dropdown-divider-bg) !important; /* Bootstrap 5 uses border-top for divider */ background-color: var(--bs-dropdown-divider-bg) !important; /* Fallback or if it's a bg */ } .dark-theme .dropdown-header { color: var(--bs-dropdown-header-color) !important; } .dark-theme .project-list-showcase .project-grid .project-location { color: var(--dark-text-secondary, #B9BBBE) !important; } .dark-theme .text-muted { --bs-text-opacity: 1; color: var(--dark-text-secondary, #c4cddc) !important; } .dark-theme .offcanvas { --bs-offcanvas-color: var(--dark-text-primary, #DCDDDE); --bs-offcanvas-bg: var(--dark-bg-secondary, #2C2F33); /* Assuming --bs-offcanvas-border-color is used internally for headers/footers */ --bs-offcanvas-border-color: var(--dark-border-primary, #40444B); color: var(--bs-offcanvas-color) !important; background-color: var(--bs-offcanvas-bg) !important; box-shadow: 0 0.5rem 1.5rem var(--dark-shadow-color, rgba(0, 0, 0, 0.4)) !important; /* Add a subtle shadow for depth */ } /* Offcanvas header specific styles */ .dark-theme .offcanvas-header { border-bottom: var(--bs-border-width, 1px) solid var(--bs-offcanvas-border-color, #40444B) !important; color: var(--dark-text-primary, #DCDDDE) !important; /* Ensure header text is light */ } .dark-theme .offcanvas-header .btn-close { /* Bootstrap's default btn-close is an SVG. For dark theme, it inverts based on data-bs-theme="dark" */ /* If that's not active, or for more control: */ filter: invert(1) grayscale(100%) brightness(200%); /* Makes it white */ } .dark-theme .offcanvas-header .offcanvas-title { color: var(--dark-text-primary, #DCDDDE) !important; } /* Offcanvas body specific styles (usually inherits offcanvas color) */ .dark-theme .offcanvas-body { color: var(--dark-text-primary, #DCDDDE) !important; } .dark-theme .card-header, .dark-theme .card-footer { border-color: var(--dark-border-primary, #40444B) !important; background-color: var(--dark-bg-tertiary, #36393E) !important; /* Give headers/footers a distinct dark background */ color: var(--dark-text-primary, #DCDDDE) !important; /* Ensure text in header/footer is light */ } /* The `.bg-light` class is a utility class meant to apply a light background. In a dark theme, you generally want to avoid using `.bg-light` or override it if it's unavoidable. If `.bg-light` is applied to a card header or footer that should be dark: */ .dark-theme .card-header.bg-light, .dark-theme .card-footer.bg-light { --bs-bg-opacity: 1; /* This might not be needed if we override bg directly */ background-color: var(--dark-bg-tertiary, #36393E) !important; /* Override .bg-light */ color: var(--dark-text-primary, #DCDDDE) !important; } /* If `.bg-light` is used on other elements that need to be dark in dark-theme: You might need a more general override for `.bg-light` in dark theme context, or specific overrides for elements where it appears. A general override could be problematic if some things *should* remain light even in dark theme. For elements that should become dark when they have .bg-light: */ .dark-theme .bg-light { --bs-bg-opacity: 1; background-color: var(--dark-bg-secondary, #2C2F33) !important; /* General dark replacement for bg-light */ color: var(--dark-text-primary, #DCDDDE) !important; /* Ensure text on this new dark bg is light */ } .dark-theme .az-nav-line .nav-link.active { color: #FFFFFF !important; /* White for active navigation link text */ } /* Adjusting the border/underline for the active link to also be prominent, but perhaps not the same accent blue if the text is now white, or keep it as an accent. */ /* Option 1: Keep accent color for the underline/border */ .dark-theme .az-nav-line .nav-link.active { border-bottom-color: var(--dark-accent-blue, #008bbf) !important; } .dark-theme .az-nav-line .nav-link.active::after { /* If using pseudo-element */ background-color: var(--dark-accent-blue, #008bbf) !important; } .dark-theme .az-nav-line .nav-link { color: var(--dark-text-secondary, #B9BBBE) !important; } .dark-theme .bg-gray-100 { background-color: var(--dark-bg-primary, #23272A) !important; /* Ensure text on this new background is readable */ color: var(--dark-text-primary, #DCDDDE) !important; } .dark-theme .bg-gray-200 { background-color: var(--dark-bg-secondary, #2C2F33) !important; /* Ensure text on this new background is readable */ color: var(--dark-text-primary, #DCDDDE) !important; } .dark-theme .schedulerCardGroup{ background:#35393b; } .dark-theme .az-content-label, .dark-theme .card-dashboard-eight .card-title, .dark-theme .card-table-two .card-title { color: var(--dark-text-primary, #DCDDDE) !important; } .dark-theme .bg-secondary { --bs-bg-opacity: 1; background-color: var(--dark-bg-tertiary, #4b4c5e) !important; /* Or another distinct dark shade */ /* Ensure text on this new background is readable */ color: var(--dark-text-primary, #fff) !important; font-size: 14px; } .dark-theme .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #008bbf !important; box-shadow: 0 0 0 0.2rem rgba(0, 139, 191, 0.22) !important; } .dark-theme .select2-container--default .select2-selection--multiple { background-color: var(--dark-bg-secondary, #2C2F33) !important; /* Or --dark-bg-primary if preferred for inputs */ border-color: var(--dark-border-primary, #40444B) !important; /* border-radius: 0; */ /* Keep if this is your desired style */ /* min-height: 38px; */ /* Keep if this is your desired style */ /* outline: none; */ /* Keep if this is your desired style */ } /* Styles for the selected choices within the multiple select */ .dark-theme .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--dark-bg-tertiary, #36393E) !important; border: 1px solid var(--dark-border-secondary, #303336) !important; color: var(--dark-text-primary, #DCDDDE) !important; border-radius: .2rem; /* Or match your theme's border-radius for tags/pills */ /* Keep extra left padding because the remove button is absolutely positioned by base Select2 styles. */ padding: .15rem .5rem .15rem 1.35rem; } /* Style for the "remove choice" X icon */ .dark-theme .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--dark-text-secondary, #B9BBBE) !important; margin-right: .3rem; } .dark-theme .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #FFFFFF !important; background-color: var(--dark-accent-red, #F04747) !important; /* Optional: make X bg red on hover */ border-radius: 50%; /* Optional: round background for X on hover */ } /* Style for the search field within the multiple select */ .dark-theme .select2-container--default .select2-search--inline .select2-search__field { color: var(--dark-text-primary, #DCDDDE) !important; /* Ensures typed text is visible */ margin-top: 5px; /* Adjust as per Select2 version for alignment */ } .dark-theme .select2-container--default .select2-search--inline .select2-search__field::placeholder { color: var(--dark-text-placeholder, #72767D) !important; } .dark-theme .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--dark-text-placeholder, #72767D) !important; } /* Keep search input addons consistent in dark mode (avoid navy blocks). */ .dark-theme .keyword-search-group { background-color: #262b32; border-color: #414a57; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02); } .dark-theme .keyword-search-group:hover { background-color: #292f37; border-color: #4b5666; } .dark-theme .keyword-search-group .keyword-search-addon { background: transparent; color: #95a5bc; border: 0; border-right: 1px solid #3b4450; } .dark-theme .keyword-search-group .form-control { border: 0 !important; background-color: transparent !important; box-shadow: none !important; color: #e3eaf4 !important; } .dark-theme .keyword-search-group .form-control::placeholder { color: #8794a9 !important; } .dark-theme .keyword-search-group:focus-within { border-color: #00a7e4; box-shadow: none; } .dark-theme .keyword-search-group:focus-within .keyword-search-addon { color: #d8f4ff; border-right-color: rgba(0, 167, 228, 0.34); background: transparent; } .dark-theme .keyword-search-group .form-control:focus { box-shadow: none !important; border-color: transparent !important; } .dark-theme .projects-toolbar-panel { border-color: transparent; background: transparent; box-shadow: none; } .dark-theme .projects-toolbar-divider { background: #404854; } .dark-theme .projects-toolbar-search .form-label, .dark-theme .projects-toolbar-field .form-label, .dark-theme .projects-toolbar-filters .form-label { color: #aeb8c8; } .dark-theme .projects-toolbar-action-cluster { border-color: #434d5a; background: #272b31; box-shadow: none; } .dark-theme .scheduler-include-unscheduled-control { color: #c7d2e2; } .dark-theme .scheduler-include-unscheduled-hint { color: #aeb8c8; } .dark-theme .scheduler-include-unscheduled-control--panel { border-top-color: #434d5a; } .dark-theme .projects-toolbar-action.btn-outline-secondary, .dark-theme .projects-toolbar-action.btn-outline-primary { color: #c7d2e2; background: transparent; } .dark-theme .projects-toolbar-action.btn-outline-secondary:hover, .dark-theme .projects-toolbar-action.btn-outline-secondary:focus, .dark-theme .projects-toolbar-action.btn-outline-primary:hover, .dark-theme .projects-toolbar-action.btn-outline-primary:focus { background: #343840; color: #f1f5fb; } .dark-theme .projects-toolbar-action-cluster > * + * { border-left-color: #434d5a; } .dark-theme .projects-toolbar-view-switcher .projectLayoutView { color: #b4bfd0; } .dark-theme .projects-toolbar-action--filters.is-active { color: #f1f5fb; background: #343840; } .dark-theme .projects-toolbar-action-cluster--secondary .projects-toolbar-action--filters::before { background: #434d5a; } .dark-theme .projects-toolbar-filter-count { background: #3b4654; color: #f1f5fb; } .dark-theme .projects-toolbar-view-switcher .projectLayoutView + .projectLayoutView { border-left-color: #434d5a; } .dark-theme .projects-toolbar-view-switcher .projectLayoutView:hover, .dark-theme .projects-toolbar-view-switcher .projectLayoutView:focus { background: #343840; color: #f1f5fb; } .dark-theme .projects-toolbar-view-switcher .projectLayoutView.is-active { background: #343840; color: #7fd8ff; box-shadow: none; } .dark-theme .input-group-text { background-color: #2C2F33; border-color: #40444B; color: #9AA6BC; } /* Project contact selectors should not have strong filled backgrounds. */ .dark-theme #contact-selection-zone .select2-container--default .select2-selection--single { background-color: #1f2329 !important; border-color: #4a5260 !important; } .dark-theme #contact-selection-zone .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e4e9f2 !important; } .dark-theme #contact-selection-zone .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9aa6bc !important; } /* New uploader layouts need higher-specificity dark overrides than legacy rules. */ .dark-theme .uploader-files-container.grid-view-container .uploaderItemContainer.grid { background-color: #2C2F33; border-color: #40444B; } .dark-theme .uploaderDateGroup { background: #2c2f33; border-color: #404854; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2); } .dark-theme .uploaderDateGroupHeader { border-bottom-color: #404854; background: #31363f; } .dark-theme .uploaderDateGroupLabel { color: #f3f6fb; } .dark-theme .uploaderDateGroupDate { color: #b3bfd1; } .dark-theme .uploaderDateGroupSubtext { color: #b8c3d3; } .dark-theme .uploaderDateGroupCount { color: #e4eaf6; } .dark-theme .uploaderDateGroupDetailItem { color: #b8c3d3; } .dark-theme .uploaderDateGroupDetailItem + .uploaderDateGroupDetailItem::before { color: #6f7f95; } .dark-theme .uploaderDateGroupSplitHint { color: #8fb5ff; } .dark-theme .uploaderDateGroupActions { border-left-color: #46505d; } .dark-theme .uploaderDateGroupAction { color: #d6def0; } .dark-theme .uploaderDateGroupAction:hover, .dark-theme .uploaderDateGroupAction:focus { background: rgba(91, 141, 219, 0.16); color: #f5f8ff; } .dark-theme .uploaderSessionSplitButton.is-active { background: rgba(69, 124, 216, 0.18); color: #f7faff; } .dark-theme .uploaderSessionMergeButton { color: #d0d9ea; } .dark-theme .uploaderSessionEditButton { color: #f4f7fb; } .dark-theme .uploaderSessionEditButton:hover, .dark-theme .uploaderSessionEditButton:focus { color: #ffffff; } .dark-theme .uploaderDateGroup.is-selecting-split { border-color: #4d6486; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); } .dark-theme .uploaderDateGroup.is-selecting-split .uploaderDateGroupHeader { background: linear-gradient(180deg, #343c48 0%, #303744 100%); border-bottom-color: #49576a; } .dark-theme .uploaderDateGroup.is-selecting-split .uploaderItemContainer.splitCandidate { border-color: #4f617b; box-shadow: 0 0 0 1px rgba(103, 148, 223, 0.08); } .dark-theme .uploaderDateGroup.is-selecting-split .uploaderItemContainer.splitCandidate:hover { border-color: #657d9f; box-shadow: 0 0 0 1px rgba(103, 148, 223, 0.12); } .dark-theme .uploaderDateGroup.is-selecting-split .uploaderItemContainer.splitPreviewFollowing { border-color: #7297d2; background: #313b48; box-shadow: inset 5px 0 0 #7ba8f1, 0 0 0 1px rgba(123, 168, 241, 0.18); } .dark-theme .uploaderDateGroup.is-selecting-split .uploaderItemContainer.splitPreviewStart { border-color: #8ab4f8; background: #364252; box-shadow: 0 0 0 2px rgba(122, 167, 235, 0.3), 0 14px 26px rgba(8, 14, 24, 0.4); } .dark-theme .uploaderDateGroup.is-selecting-split .uploaderItemContainer.splitPreviewStart .uploaderItemInfo, .dark-theme .uploaderDateGroup.is-selecting-split .uploaderItemContainer.splitPreviewFollowing .uploaderItemInfo { background: #364252; border-top-color: #49576a; } .dark-theme .uploaderDateGroup.is-selecting-split .uploaderItemContainer.splitPreviewStart .uploaderItemSide, .dark-theme .uploaderDateGroup.is-selecting-split .uploaderItemContainer.splitPreviewFollowing .uploaderItemSide { background: rgba(112, 151, 221, 0.14); border-left-color: #506280; } .dark-theme .uploaderDateGroup.is-selecting-split .uploaderItemContainer.splitLocked { opacity: 0.66; } .dark-theme .uploader-files-container.grid-view-container .uploaderItemPreview.grid { background-color: #23272A; } .dark-theme .uploader-files-container.grid-view-container .uploaderItemInfo.grid { background-color: #2C2F33; border-top-color: #40444B; } .dark-theme .uploader-files-container.grid-view-container .uploaderItemFileName.grid { color: #DCDDDE; } .dark-theme .uploaderItemContainer.list { background: #2C2F33; border-color: #40444B; box-shadow: none; } .dark-theme .uploaderItemPreview.list { background-color: #23272A; } .dark-theme .uploaderItemFileName.list, .dark-theme .uploaderItemMeta { color: #DCDDDE; } .dark-theme .uploaderItemSideValue.list, .dark-theme .uploaderItemSideValue.slim { color: #b5c0d1; } .dark-theme .uploaderItemSide.list, .dark-theme .uploaderItemSide.slim { border-left-color: #3f4752; background: rgba(255, 255, 255, 0.02); } .dark-theme .uploader-files-container.slim-view-container .uploaderItemContainer.slim { background: #2C2F33; border-color: #40444B; } .dark-theme .uploader-files-container.slim-view-container .uploaderItemPreview.slim { background-color: #23272A; } .dark-theme .uploaderItemOptions.deleteImage.list, .dark-theme .uploaderItemOptions.deleteImage.slim { color: #b5c0d1; } .dark-theme .uploaderItemOptions.deleteImage.list:hover, .dark-theme .uploaderItemOptions.deleteImage.slim:hover { background: rgba(220, 53, 69, 0.16); color: #ffd7dc; } .dark-theme .uploaderItemOptions.list.confirm-active:hover, .dark-theme .uploaderItemOptions.slim.confirm-active:hover { background: transparent; color: inherit; } .dark-theme .uploaderItemOptions.list .confirm-delete-btn:hover, .dark-theme .uploaderItemOptions.slim .confirm-delete-btn:hover { background: rgba(40, 167, 69, 0.2); color: #9df0b6; } .dark-theme .uploaderItemOptions.list .cancel-delete-btn:hover, .dark-theme .uploaderItemOptions.slim .cancel-delete-btn:hover { background: rgba(220, 53, 69, 0.2); color: #ffb9c2; } .dark-theme .uploader-files-container.slim-view-container .uploaderItemFileName.slim { color: #DCDDDE; } .dark-theme .media-details-map-frame { border-color: #40444B; background: #1f2329; } .dark-theme .media-details-map-frame iframe { filter: invert(92%) hue-rotate(180deg) saturate(70%) brightness(88%) contrast(92%); } /* File Manager uses the newer uploader layouts, so reset legacy dark preview sizing. */ .dark-theme #fileManagerUploader .uploader-files-container.grid-view-container .uploaderItemPreview.grid { width: 100%; min-width: 0; min-height: 160px; height: auto; font-size: inherit; border-top-left-radius: 0; border-bottom-left-radius: 0; } .dark-theme #fileManagerUploader .uploader-files-container.grid-view-container .uploaderItemContainer.grid { height: auto; display: flex; flex-direction: column; align-items: stretch; margin-bottom: 0; } .dark-theme #fileManagerUploader .uploader-files-container.grid-view-container .uploaderItemPreview.grid .preview-image { width: 100%; height: 100%; } .dark-theme #fileManagerUploader .uploader-files-container.grid-view-container .uploaderItemInfo.grid { width: 100%; padding: 12px; margin-right: 0; white-space: normal; overflow: visible; text-overflow: initial; } .dark-theme #fileManagerUploader .uploader-files-container.grid-view-container .uploaderItemFileName.grid { font-size: inherit; } .dark-theme #fileManagerUploader .uploaderItemOptions.deleteImage.grid { min-width: 0; padding-right: 0; font-size: 1rem; text-align: center; align-self: auto; color: #fff; background-color: rgba(0, 0, 0, 0.55); } .dark-theme #fileManagerUploader .uploaderItemOptions.deleteImage.grid:hover { font-size: 1rem; color: #fff; background-color: rgba(220, 53, 69, 0.85); } .dark-theme #fileManagerUploader .uploaderItemOptions.deleteImage.grid.confirm-active, .dark-theme #fileManagerUploader .uploaderItemOptions.deleteImage.grid.confirm-active:hover { min-width: 0; padding-right: 0; font-size: 1rem; background-color: rgba(0, 0, 0, 0.7); } .dark-theme #fileManagerUploader .uploaderItemOptions.deleteImage.list, .dark-theme #fileManagerUploader .uploaderItemOptions.deleteImage.slim { min-width: 0; padding-right: 0; font-size: inherit; text-align: inherit; align-self: auto; } .dark-theme #fileManagerUploader .uploaderItemOptions.deleteImage.list:hover, .dark-theme #fileManagerUploader .uploaderItemOptions.deleteImage.slim:hover { font-size: inherit; } .dark-theme #fileManagerUploader .uploaderItemOptions.list.confirm-active:hover, .dark-theme #fileManagerUploader .uploaderItemOptions.slim.confirm-active:hover { background: transparent; } .dark-theme #fileManagerUploader .uploader-files-container.list-view-container .uploaderItemPreview.list { min-width: 92px; width: 92px; height: auto; font-size: 24px; border-radius: 0; margin-right: 0; align-self: stretch; } .dark-theme #fileManagerUploader .uploader-files-container.slim-view-container .uploaderItemPreview.slim { min-width: 58px; width: 58px; height: auto; font-size: 20px; border-radius: 0; margin-right: 0; align-self: stretch; } /* Scheduler View */ .dark-theme .schedulerViewModule .schedulerContainerView { gap: 14px; } .dark-theme .scheduler-page-header { margin-right: calc(-1 * var(--bs-card-spacer-x, 1rem)); margin-left: calc(-1 * var(--bs-card-spacer-x, 1rem)); padding-right: var(--bs-card-spacer-x, 1rem); padding-left: var(--bs-card-spacer-x, 1rem); } .dark-theme .schedulerViewModule .resetSortOrder { color: #a7b1c1; border-color: #4a5361; background: transparent; } .dark-theme .schedulerViewModule .resetSortOrder:hover, .dark-theme .schedulerViewModule .resetSortOrder:focus { color: #d9e1ee; border-color: #5f6b7e; background: #2e353f; } .dark-theme .schedulerViewModule .schedulerCardGroup { --scheduler-accent: #7b8796; --scheduler-head-bg: #36393e; --scheduler-head-border: #434b56; border: 1px solid #3d444e; border-left: 4px solid var(--scheduler-accent); border-radius: 10px; background: #23272d; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.35); overflow: hidden; } .dark-theme .schedulerViewModule .schedulerCardGroup:nth-child(6n + 1) { --scheduler-accent: #6b8fc7; } .dark-theme .schedulerViewModule .schedulerCardGroup:nth-child(6n + 2) { --scheduler-accent: #5aa786; } .dark-theme .schedulerViewModule .schedulerCardGroup:nth-child(6n + 3) { --scheduler-accent: #c59656; } .dark-theme .schedulerViewModule .schedulerCardGroup:nth-child(6n + 4) { --scheduler-accent: #c97878; } .dark-theme .schedulerViewModule .schedulerCardGroup:nth-child(6n + 5) { --scheduler-accent: #9981c7; } .dark-theme .schedulerViewModule .schedulerCardGroup:nth-child(6n + 6) { --scheduler-accent: #5aa79d; } .dark-theme .schedulerViewModule .schedulerCardGroupHeader { background: var(--scheduler-head-bg); border-bottom: 1px solid var(--scheduler-head-border); } .dark-theme .schedulerViewModule .schedulerCardGroupHeader span { color: #dbe3f2; font-weight: 700; } .dark-theme .schedulerViewModule .sortable-table { margin-bottom: 0; } .dark-theme .schedulerViewModule .sortable-table thead th { background: var(--scheduler-head-bg); color: #c5cedd; border-bottom: 1px solid var(--scheduler-head-border); } .dark-theme .schedulerViewModule .sortable-table tbody td { border-color: #3d4450; color: #e1e7f2; } .dark-theme .schedulerViewModule .sortable-table tbody tr { background: #252a31; } .dark-theme .schedulerViewModule .sortable-table tbody tr:nth-child(even) { background: #2a3038; } .dark-theme .schedulerViewModule .sortable-table tbody tr:hover { background: #37404c !important; } .dark-theme .schedulerViewModule .sortable-table tbody tr.sortable-placeholder { display: table-row !important; height: auto !important; min-height: 0 !important; flex: none !important; margin-right: 0 !important; border: 0 !important; background: rgba(79, 147, 255, 0.14) !important; } .dark-theme .schedulerViewModule .sortable-table tbody tr.sortable-placeholder td { padding-top: 0.5rem; padding-bottom: 0.5rem; border-top: 1px dashed rgba(79, 147, 255, 0.55); border-bottom: 1px dashed rgba(79, 147, 255, 0.55); } .dark-theme .schedulerViewModule .sortable-table .drag-handle { color: #7f8999 !important; } .dark-theme .schedulerViewModule .sortable-table tbody tr:hover .drag-handle { color: #b6c3d9 !important; } .dark-theme .schedulerViewModule .sortable-table .badge, .dark-theme .schedulerViewModule .sortable-table .badge-secondary { background: #4a5567 !important; color: #e5ebf6 !important; } html[data-bs-theme='dark'] .badge-warning, .dark-theme .badge-warning { background: #f0b429 !important; border-color: #f0b429 !important; color: #2f2200 !important; } .dark-theme .schedulerViewModule .avatar-group .user-badge-filter { border-color: #252a31 !important; box-shadow: 0 0 0 1px #3f4752; } .dark-theme .schedulerViewModule #bulkActionsBar { border-top: 1px solid #3f4651; box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.42); } .dark-theme .schedulerViewModule #bulkActionsBar .card-body { background: #1f2329; color: #d8dfe9; } .dark-theme .schedulerViewModule #bulkActionsBar .btn-outline-secondary { background: #2f353e; border-color: #475160; color: #d3dbe8; } .dark-theme .schedulerViewModule #bulkActionsBar .btn-light { background: #3a4049; border-color: #4b5563; color: #e6ebf5; } /* Scheduler bulk users Select2: keep compact and prevent inner boxed search field. */ .dark-theme .schedulerViewModule #bulkActionsBar .bulk-users-select + .select2-container { width: 340px !important; min-width: 340px; max-width: 100%; } .dark-theme .schedulerViewModule #bulkActionsBar .bulk-users-select + .select2-container .select2-selection--multiple { min-height: 34px !important; padding: 2px 6px !important; background-color: #2f353e !important; border-color: #475160 !important; color: #d3dbe8 !important; } .dark-theme .schedulerViewModule #bulkActionsBar .bulk-users-select + .select2-container .select2-selection__rendered { padding: 0 !important; } .dark-theme .schedulerViewModule #bulkActionsBar .bulk-users-select + .select2-container .select2-selection--multiple .select2-selection__choice { background-color: #3b4553 !important; border-color: #566376 !important; color: #e7edf8 !important; } .dark-theme .schedulerViewModule #bulkActionsBar .bulk-users-select + .select2-container .select2-search--inline .select2-search__field { margin-top: 0 !important; padding: 0 2px !important; min-height: 0 !important; background: transparent !important; box-shadow: none !important; } /* =============================== Dark Theme Refinements (UI pass) =============================== */ /* 1) Make striped tables subtler in dark mode. */ .dark-theme .table { --bs-table-striped-bg: rgba(255, 255, 255, 0.015); } .dark-theme .schedulerViewModule .sortable-table tbody tr { background: #262b33; } .dark-theme .schedulerViewModule .sortable-table tbody tr:nth-child(even) { background: #292e36; } /* 2) Improve readability for filter/search labels. */ .dark-theme .form-label, .dark-theme .form-group > label, .dark-theme .filter-bar .form-label { color: #edf2fc !important; font-weight: 600; } /* 3) Keep primary action buttons visually consistent size. */ .dark-theme .btn, .dark-theme input.btn { min-height: calc(1.5em + 0.75rem + 2px); } /* 4) Ensure toggle controls are fully dark-themed. */ .dark-theme .az-toggle { background-color: #3a4250; border: 1px solid #4a5465; border-radius: 15px; } .dark-theme .az-toggle span { background-color: #dbe3f0; } .dark-theme .az-toggle span::before, .dark-theme .az-toggle span::after { color: #eaf0fa; } .dark-theme .az-toggle.on { background-color: #4f93ff; } .dark-theme .az-toggle-success.on { background-color: #2f8d68; border-color: #2f8d68; } .dark-theme .az-toggle-dark.on { background-color: #5c6677; } .dark-theme .form-check-input { background-color: #2c2f33; border-color: #586476; } .dark-theme .form-check-input:checked { background-color: #4f93ff; border-color: #4f93ff; } .dark-theme .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(79, 147, 255, 0.25); } /* 5) Increase card header contrast from card body. */ .dark-theme .card { background-color: rgb(24, 26, 27); border-color: #353535; } .dark-theme .card-header, .dark-theme .card-footer { background: linear-gradient(180deg, #2c2c2c 0%, #272727 100%) !important; border-color: #3a3a3a !important; color: #ececec !important; } /* 6) Make Select2 multi selected chips stand out from background. */ .dark-theme .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #45566f !important; border-color: #647a9b !important; color: #f1f6ff !important; } /* 7) Normalize native select/input backgrounds in dark theme. */ .dark-theme .form-control, .dark-theme .form-select { background-color: #1f2329 !important; border-color: #4a5260 !important; color: #e4e9f2 !important; } .dark-theme .form-control:focus, .dark-theme .form-select:focus { border-color: #008bbf !important; box-shadow: 0 0 0 0.2rem rgba(0, 139, 191, 0.22) !important; } .dark-theme .input-group:focus-within .input-group-text { border-color: #008bbf; } .dark-theme .form-select option { background-color: #1f2329; color: #e4e9f2; } .dark-theme .select2-container--default .select2-selection--single, .dark-theme .select2-container--default .select2-selection--multiple { background-color: #1f2329 !important; border-color: #4a5260 !important; } .dark-theme .select2-container--default.select2-container--focus .select2-selection--single, .dark-theme .select2-container--default.select2-container--focus .select2-selection--multiple, .dark-theme .select2-container--default.select2-container--open .select2-selection--single, .dark-theme .select2-container--default.select2-container--open .select2-selection--multiple { border-color: #008bbf !important; box-shadow: 0 0 0 0.2rem rgba(0, 139, 191, 0.22) !important; } .dark-theme .select2-container--default .select2-selection--single .select2-selection__rendered, .dark-theme .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: #e4e9f2 !important; } /* 8) Project timeline cards/accordions dark-mode parity. */ .dark-theme .rf-timeline:before { background: #404854; } .dark-theme .rf-timeline-dot { background: #313741; border-color: #4b5566; color: #b7c2d6; } .dark-theme .rf-timeline-item[data-type="task"] .rf-timeline-dot { background-color: #1f314f; border-color: #4f93ff; color: #8fc4ff; } .dark-theme .rf-timeline-item[data-type="comm"] .rf-timeline-dot { background-color: #1d3f38; border-color: #39c9a5; color: #6de7c5; } .dark-theme .rf-timeline-item[data-type="invoice"] .rf-timeline-dot { background-color: #4a3521; border-color: #f0a33a; color: #ffc472; } .dark-theme .rf-timeline-item[data-type="payment"] .rf-timeline-dot { background-color: #1d3d2b; border-color: #49c37a; color: #82e5a9; } .dark-theme .rf-timeline-item[data-type="task_change"] .rf-timeline-dot, .dark-theme .rf-timeline-item[data-type="project_change"] .rf-timeline-dot { background-color: #343b47; border-color: #8792a6; color: #b9c4d6; } .dark-theme .rf-timeline-item[data-type="merged"] .rf-timeline-dot { background-color: #3a2f55; border-color: #a383ff; color: #c7adff; } .dark-theme .rf-card { border-color: #353535; background: rgb(24, 26, 27); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .dark-theme .rf-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); } .dark-theme .rf-card .accordion-button { background: #272727 !important; color: #e2e9f6 !important; } .dark-theme .rf-card .accordion-button:not(.collapsed) { background: #2f2f2f !important; color: #f0f4fc !important; } .dark-theme .rf-card .accordion-body { background: rgb(24, 26, 27); border-top-color: #353535; color: #cdd6e5; } .dark-theme .rf-title-text { color: #e8eef9; } .dark-theme .rf-sub { color: #aeb8c8; } .dark-theme .rf-time-val { color: #d9e1ef; } .dark-theme .rf-time-label { color: #8f9bb0; } .dark-theme .accordion-button::after { filter: invert(86%) sepia(9%) saturate(442%) hue-rotate(181deg) brightness(103%) contrast(91%); } /* Timeline filter selected-state visibility */ .dark-theme #timelineFiltersOffcanvas [data-tl-filter] { color: #c9d3e5; border-color: #4a5260; background-color: #2a2f36; } .dark-theme #timelineFiltersOffcanvas [data-tl-filter]:hover { background-color: #343b46; color: #eef4ff; border-color: #5a6577; } .dark-theme #timelineFiltersOffcanvas [data-tl-filter].active, .dark-theme #timelineFiltersOffcanvas [data-tl-filter]:active { background: #4f93ff !important; border-color: #4f93ff !important; color: #ffffff !important; box-shadow: 0 0 0 0.15rem rgba(79, 147, 255, 0.22); } /* Timeline: inner merged cards and detail text should not stay light-mode. */ .dark-theme .rf-merged-item { border-color: #424b58; background-color: #2b3038; } .dark-theme .rf-merged-header { background: #353c47; color: #e1e8f5; border-bottom-color: #444d5b; } .dark-theme .rf-merged-body { background: #2a2f36; } .dark-theme .rf-kv .k { color: #9eabc0; } .dark-theme .rf-kv .v { color: #e0e7f2; } .dark-theme .rf-lines-table { color: #dbe3f2 !important; } .dark-theme .rf-lines-table td { color: inherit !important; } .dark-theme .rf-grid .border { border-color: #434b58 !important; } .dark-theme .rf-grid a { color: #9dc6ff; } .dark-theme .rf-grid a:hover { color: #cfe4ff; } .dark-theme .rf-raw { border-top-color: #454e5c; } .dark-theme .rf-raw summary { color: #9aa8be; } .dark-theme .rf-raw summary:hover { color: #d5dff0; } .dark-theme .rf-raw pre { background: #1f242b; border: 1px solid #3c4451; color: #d4dceb; } /* Project overview: contact accordions shouldn't turn bright blue. */ .dark-theme #contactsAccordion .accordion-item { background: transparent; } .dark-theme #contactsAccordion .accordion-button { background: transparent !important; color: #dbe3f2 !important; box-shadow: none !important; } .dark-theme #contactsAccordion .accordion-button:not(.collapsed) { background: transparent !important; color: #eaf1ff !important; } .dark-theme #contactsAccordion .accordion-button:focus { box-shadow: none !important; border-color: transparent !important; } .dark-theme #contactsAccordion .accordion-body { background: transparent; color: #c9d3e5; } .dark-theme #contactsAccordion a { color: #9dc6ff; } .dark-theme #contactsAccordion a:hover { color: #cfe4ff; } /* Notes module empty-state and bubbles in dark mode. */ .dark-theme .note-content { background-color: #2b3038; border-color: #434b58; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .dark-theme .note-author { color: #e6edf8; } .dark-theme .note-text p { color: #d5deed; } .dark-theme .note-timestamp { color: #9aa8be; } .dark-theme .empty-notes-message { background-color: #242931; border-color: #3e4755; color: #cbd5e6; } .dark-theme .empty-notes-message .fas { color: #94a4bd; } .dark-theme .empty-notes-message p { color: #e2e9f5; } /* Projects list: grid view cards (v2) dark mode */ .dark-theme #gridView .project-grid-card-v2, .dark-theme .project-list-showcase .project-grid-card-v2 { background-color: #262b33; border-color: #3d4654; color: #dce3ef; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); } .dark-theme #gridView .project-grid-card-v2:hover, .dark-theme .project-list-showcase .project-grid-card-v2:hover { background-color: #2d333d; border-color: #4b586a; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32); } .dark-theme #gridView .project-grid-content-v2, .dark-theme .project-list-showcase .project-grid-content-v2 { background: transparent; } .dark-theme #gridView .project-title-v2, .dark-theme .project-list-showcase .project-title-v2 { color: #edf3ff; } .dark-theme #gridView .project-location-v2, .dark-theme .project-list-showcase .project-location-v2 { color: #b3bfd3; } .dark-theme #gridView .project-location-v2 i, .dark-theme .project-list-showcase .project-location-v2 i { color: #8fa0b9; } .dark-theme #gridView .project-meta-grid, .dark-theme .project-list-showcase .project-meta-grid { color: #b9c5d8; } .dark-theme #gridView .meta-item i, .dark-theme .project-list-showcase .meta-item i { color: #96a6bf; } .dark-theme #gridView .project-inspections-v2, .dark-theme .project-list-showcase .project-inspections-v2 { border-top-color: #3e4755; } /* Pagination (projects list + global pagination controls) */ .dark-theme .pagination .page-link { background-color: #2a2f37; border-color: #404854; color: #c8d3e6; } .dark-theme .pagination .page-link:hover { background-color: #343b46; border-color: #556174; color: #eef3fb; } .dark-theme .pagination .page-item.active .page-link { background-color: #4f93ff; border-color: #4f93ff; color: #ffffff; } .dark-theme .pagination .page-item.disabled .page-link { background-color: #242a32; border-color: #3a424f; color: #7f8ca2; } /* Toggle corners should match light version (square/straight). */ .dark-theme .az-toggle, .dark-theme .az-toggle-disabled, .dark-theme .passFailToggle { border-radius: 0 !important; } .dark-theme .az-toggle span, .dark-theme .az-toggle-disabled span { border-radius: 0 !important; } /* Snapshot info button should not carry generic button background. */ .dark-theme .snapshotCard .card-details-toggle { background: transparent !important; border: none !important; box-shadow: none !important; } .dark-theme .snapshotCard .card-details-toggle:hover, .dark-theme .snapshotCard .card-details-toggle:focus { background: transparent !important; box-shadow: none !important; } /* Restore semantic button colors that generic .btn dark rule muted. */ .dark-theme .btn-success { background-color: #2cb57f; border-color: #2cb57f; color: #ffffff; } .dark-theme .btn-success:hover, .dark-theme .btn-success:focus { background-color: #249a6c; border-color: #249a6c; color: #ffffff; } .dark-theme .btn-outline-danger { color: #ff8383; border-color: #c84c4c; background-color: rgba(200, 76, 76, 0.08); } .dark-theme .btn-outline-danger:hover, .dark-theme .btn-outline-danger:focus, .dark-theme .btn-outline-danger:active, .dark-theme .btn-outline-danger.active { color: #ffffff; background-color: #d55353; border-color: #d55353; } /* Keep danger/warning utility colors visible on icons (e.g., priority flame). */ .dark-theme .tx-danger, .dark-theme .text-danger, .dark-theme i.tx-danger, .dark-theme i.text-danger, .dark-theme .fa-fire { color: #f04747 !important; } .dark-theme .tx-warning, .dark-theme .text-warning, .dark-theme i.tx-warning, .dark-theme i.text-warning, .dark-theme .fa-bolt { color: #f0a33a !important; } /* Quotes: generated document list (remove legacy navy backgrounds). */ .dark-theme .quote-documents-list { border-color: #353535; border-radius: 8px; } .dark-theme .quote-documents-list .quote-document-item { background-color: rgb(24, 26, 27); border-color: #353535; } .dark-theme .quote-documents-list .quote-document-item .fw-semibold { color: #e4ebf7; } .dark-theme .quote-documents-empty { background-color: #212121; border-color: #353535; color: #c7d2e6; } /* Billing: invoice cards and dashboard summary cards */ .dark-theme .invoiceCard { background-color: rgb(24, 26, 27); border-color: #353535; color: #dce4f2; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .dark-theme .invoiceCard:hover { border-color: #4a4a4a; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32); } .dark-theme .invoiceCard h4, .dark-theme .invoiceCard h5, .dark-theme .invoiceCard .scheduledIcon { color: #e7eef9; } .dark-theme .card-dashboard-eighteen { background-color: rgb(24, 26, 27); border: 1px solid #353535; } .dark-theme .card-dashboard-eighteen .card-title { color: #e8eef9; } .dark-theme .card-dashboard-eighteen .card-body h6, .dark-theme .card-dashboard-eighteen .card-body .h6 { color: #e8eef9; } .dark-theme .card-dashboard-eighteen .card-body h6 span, .dark-theme .card-dashboard-eighteen .card-body .h6 span, .dark-theme .card-dashboard-eighteen .card-body label { color: #aebad0; } .dark-theme .card-dashboard-eighteen .tx-color-01 { color: #e8eef9 !important; } .dark-theme .card-dashboard-eighteen .tx-color-02 { color: #c8d3e5 !important; } .dark-theme .card-dashboard-eighteen .tx-color-03 { color: #9facc0 !important; } .dark-theme .card-dashboard-eighteen .border-bottom { border-color: #404854 !important; } .dark-theme #projectRatesEdit { color: #9dc2ff; } /* Keep compact buttons compact (fix oversized save button in small forms). */ .dark-theme .btn.btn-sm, .dark-theme input.btn.btn-sm { min-height: 31px; } /* Builder forms: make inputs less bright than surrounding cards. */ .dark-theme .builder-form-surface .formControl, .dark-theme .builder-form-surface .form-control { background-color: #1a1f26 !important; border-color: #434d5d !important; color: #e3eaf6 !important; } /* Snapshot phone links should match surrounding text. */ .dark-theme .snapshotCard-details a[href^="tel:"] { color: inherit; } /* Form builder + repeatable sections */ .dark-theme .form-builder-editor, .dark-theme .form-builder-hero, .dark-theme .form-builder-canvas-panel, .dark-theme .form-builder-palette, .dark-theme .form-builder-editor #formBuilderCanvas { background: #20252b; border-color: #40444B; } .dark-theme .form-builder-workspace { background: #171b20; } .dark-theme .form-builder-canvas-panel, .dark-theme .form-builder-palette { box-shadow: none; color: inherit; margin: 0; max-width: none; padding: 0; width: 100%; } .dark-theme .form-builder-create-body { background: #171b20; } .dark-theme .form-builder-create-label { color: #aeb7c2; } .dark-theme .form-builder-field-dialog { --form-builder-dialog-panel-bg: var(--rs-create-panel-bg, #1c1f22); --form-builder-dialog-panel-border: var(--rs-create-panel-border, rgba(255, 255, 255, 0.12)); --form-builder-dialog-panel-lift: var(--rs-create-panel-lift, inset 0 1px 0 rgba(255, 255, 255, 0.04)); --form-builder-dialog-shadow: var(--rs-create-shadow-soft, 0 12px 24px rgba(0, 0, 0, 0.18)); --form-builder-dialog-text: var(--rs-create-text, #eef1f4); --form-builder-dialog-muted: var(--rs-create-muted, #9da5ad); --form-builder-dialog-label: var(--rs-create-label, #c0c7cf); --form-builder-dialog-input-bg: var(--rs-create-input-bg, #171b1f); --form-builder-dialog-input-bg-focus: var(--rs-create-input-bg-focus, #1d2125); --form-builder-dialog-input-border: var(--rs-create-input-border, rgba(255, 255, 255, 0.14)); --form-builder-dialog-danger: var(--rs-create-danger, #ff8d84); } .dark-theme .form-builder-dialog-section { background: var(--form-builder-dialog-panel-bg); border-color: var(--form-builder-dialog-panel-border); box-shadow: var(--form-builder-dialog-shadow), var(--form-builder-dialog-panel-lift); } .dark-theme .form-builder-modal .modal_title .form-builder-dialog-title-type { background: #202428; border-color: rgba(255, 255, 255, 0.14); color: #aeb7c2; } .dark-theme .form-builder-dialog-section__title { color: var(--form-builder-dialog-text); } .dark-theme .form-builder-dialog-field label:not(.ckbox):not(.form-builder-dialog-toggle-row), .dark-theme .form-builder-dialog-field > label:not(.ckbox):not(.form-builder-dialog-toggle-row), .dark-theme .form-builder-range-label, .dark-theme .form-builder-range-input label { color: var(--form-builder-dialog-label); } .dark-theme .form-builder-dialog-note { color: var(--form-builder-dialog-muted); } .dark-theme .form-builder-dialog-note--danger { color: var(--form-builder-dialog-danger); } .dark-theme .form-builder-dialog-field .form-control { background-color: var(--form-builder-dialog-input-bg); border-color: var(--form-builder-dialog-input-border); color: var(--form-builder-dialog-text); } .dark-theme .form-builder-range-mode { background-color: var(--form-builder-dialog-input-bg); border-color: var(--form-builder-dialog-input-border); color: var(--form-builder-dialog-label); } .dark-theme .form-builder-range-mode.active { background: rgba(0, 174, 239, 0.16); border-color: #00aeef; color: #83dfff; } .dark-theme .form-builder-dialog-field .form-control:focus { background-color: var(--form-builder-dialog-input-bg-focus); } .dark-theme .form-builder-dialog-field .form-text, .dark-theme .form-builder-dialog-field .text-muted { color: var(--form-builder-dialog-muted) !important; } .dark-theme .form-builder-dialog-toggle-row, .dark-theme .form-builder-option-default { background: var(--form-builder-dialog-input-bg); border-color: var(--form-builder-dialog-input-border); color: var(--form-builder-dialog-label); } .dark-theme .form-builder-option-default-mark { border-color: var(--form-builder-dialog-input-border); } .dark-theme .form-builder-dialog-toggle-label { color: var(--form-builder-dialog-text); } .dark-theme .form-builder-dialog-actions { border-top-color: var(--form-builder-dialog-panel-border); } .dark-theme .form-builder-panel-header { background: #232a33; border-bottom-color: #40444B; } .dark-theme .form-builder-hero__title-row h4, .dark-theme .form-builder-panel-header h5 { color: #eef2f7; } .dark-theme .form-builder-hero__copy, .dark-theme .form-builder-tool-group__label { color: #aeb7c2; } .dark-theme .form-builder-editor #formBuilderCanvas:empty { background: #1f242c; border-color: #40444B; } .dark-theme .form-builder-editor #formBuilderCanvas .form-element .edit-icon { color: #aeb7c2; } .dark-theme .form-builder-editor #formBuilderCanvas .form-element:hover .form-label, .dark-theme .form-builder-editor #formBuilderCanvas .form-element:hover .toggle-label, .dark-theme .form-builder-editor #formBuilderCanvas .form-element:hover .edit-icon { color: #83dfff; } .dark-theme .form-builder-editor #formBuilderCanvas .form-element:hover h3.text-primary { color: #83dfff !important; } .dark-theme .form-builder-tool { background: #232a33; border-color: #40444B; color: #d6dde6; } .dark-theme .form-builder-tool:hover { background: #252f3a; border-color: rgba(0, 174, 239, 0.45); color: #eef2f7; } .dark-theme .form-builder-tool i { color: #aeb7c2; } .dark-theme .form-builder-tool:hover i, .dark-theme .form-builder-tool:focus i, .dark-theme .form-builder-tool:hover span, .dark-theme .form-builder-tool:focus span { color: inherit; } .dark-theme .formBuilderViewModule .az-header-primary { background-color: #2a313a !important; color: #e3eaf6 !important; border-left: 1px solid #404854; } .dark-theme .formBuilderViewModule .addInput.btn-light { background-color: #2f353e; border-color: #495565; color: #e3eaf6; } .dark-theme .formBuilderViewModule .addInput.btn-light:hover { background-color: #3a424e; border-color: #5a677a; } .dark-theme .repeatable-container { border-color: #4a5568; background-color: #252b33; } .dark-theme .repeatable-header { background-color: #313844; border-bottom-color: #465264; color: #e6edf9; } .dark-theme .repeatable-header .edit-icon { color: #9dc2ff; } .dark-theme .repeatable-content { background-color: #1f242c; } .dark-theme .repeatable-placeholder { color: #9dacbf; border-color: #495567; background-color: rgba(255, 255, 255, 0.02); } .dark-theme .repeatable-footer { background-color: #252b33; border-top-color: #404854; } .dark-theme #formBuilderCanvas > .sortable-placeholder { background: #2d3441; border-color: #5d8fe0; } .dark-theme .repeatable-content.invalid-drop { background-color: #3a2b2f; border-color: #b85c67; } .dark-theme .sortable-placeholder.invalid-placeholder { background: #4a3338; border-color: #d37780; } .dark-theme .repeatable-section { background-color: #252b33; border: 1px solid #404854; border-radius: 6px; padding: 12px; } /* Inspection type edit: eliminate remaining light blocks */ .dark-theme .inspectionTypeEditModule .az-header-primary { background-color: #2a313a !important; color: #e3eaf6 !important; } .dark-theme .inspectionTypeEditModule .inspection-details-header .tx-gray-600 { color: #b7c4d8 !important; } .dark-theme .inspectionTypeEditModule .rendered-form-preview { background-color: #20252b; border-color: #404854 !important; } .dark-theme .inspectionTypeEditModule .inspection-form-preview-header { background-color: #313844 !important; border-bottom: 1px solid #455262; } .dark-theme .inspectionTypeEditModule .inspection-form-preview-header h5 { color: #e6edf9 !important; } .dark-theme .inspectionTypeEditModule .inspection-form-preview-body { background-color: #1f242c; color: #dce4f2; } .dark-theme .inspectionTypeEditModule .pass-fail-preview-element { background-color: #252b33; border-color: #404854 !important; color: #dce4f2; } .dark-theme .inspectionTypeEditModule .pass-fail-preview-element h6 { color: #eef2f7 !important; } .dark-theme .inspectionTypeEditModule .form-containers-list .form-container-item { background-color: #232a33 !important; border-color: #404854 !important; color: #dce4f2 !important; } .dark-theme .inspectionTypeEditModule .form-containers-list .sortable-placeholder { background-color: #2d3441 !important; border: 1px dashed #5d8fe0 !important; } .dark-theme .inspectionTypeEditModule .sortable-handle { color: #93a4bc !important; } /* Inspection requests queue */ .dark-theme .inspectionRequestsModule .inspectionRequestsRowCaret { color: #89a3c7; } .dark-theme .inspectionRequestsModule .inspectionRequestsDetailPanel { border-top-color: #404854; background: #242b33; } .dark-theme .inspectionRequestsModule .inspectionRequestsDetailPanel h6 { color: #9ab3d8; } .dark-theme .inspectionRequestsModule .inspectionRequestsHasBuilderNoteIcon { color: #94a7c4; } .dark-theme .inspectionRequestsModule .inspectionRequestsDetailNoteBox { border-color: #485464; background: #1f252d; color: #d6deea; } .dark-theme .inspectionRequestsModule .inspectionRequestsDetailNoteEmpty { color: #9fb0c7; } /* Project overview history/notes cards should match dark parent cards (neutral gray, not blue). */ .dark-theme .project-overview-notes-box { background: #1f2123 !important; border-color: #3a3a3a !important; } .dark-theme .project-overview-history-item { background: #1f2123 !important; border-color: #3a3a3a !important; } .dark-theme .project-overview-history-header { background: linear-gradient(180deg, #2c2c2c 0%, #272727 100%) !important; border-bottom-color: #3a3a3a !important; }