html,
body {
height: 100%;
margin: 0;
overflow-x: hidden;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: radial-gradient(circle at 10% 10%, rgba(37, 99, 235, .08), transparent 30%), radial-gradient(circle at 90% 90%, rgba(124, 58, 237, .07), transparent 30%), #f1f5f9;
color: #172033;
}
.app-wrapper {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 270px;
height: 100vh;
min-height: 100vh;
flex-shrink: 0;
position: sticky;
top: 0;
align-self: flex-start;
display: flex;
flex-direction: column;
background: radial-gradient(circle at 20% 10%, rgba(37, 99, 235, .18), transparent 30%), linear-gradient(180deg, #071426 0%, #0b1220 55%, #111827 100%);
color: #fff;
padding: 20px 16px;
box-shadow: 8px 0 30px rgba(2, 8, 23, .18);
z-index: 1055;
transition: all .3s ease;
overflow: hidden;
}
.sidebar .logo {
text-align: center;
margin-bottom: 15px;
padding: 5px 0 14px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.logo-title {
font-size: 28px;
font-weight: 800;
letter-spacing: 4px;
color: #fff;
text-shadow: 0 0 18px rgba(96, 165, 250, .35);
}
.sidebar a {
display: flex;
align-items: center;
gap: 10px;
color: #cbd5e1 !important;
text-decoration: none;
padding: 9px 13px;
margin-bottom: 3px;
border-radius: 11px;
font-weight: 500;
transition: all .25s ease;
border: 1px solid transparent;
}
.sidebar a:hover {
color: #fff !important;
background: rgba(59, 130, 246, .12);
border-color: rgba(96, 165, 250, .12);
transform: translateX(4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}
.sidebar a i {
width: 24px;
text-align: center;
font-size: 18px;
}
.sidebar hr {
border-color: rgba(255, 255, 255, .08);
margin: 9px 4px;
}
.logout-form {
margin: 0;
padding: 0;
width: 100%;
}
.sidebar .logout {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
color: #fca5a5 !important;
text-decoration: none;
padding: 9px 13px;
margin-bottom: 3px;
margin-top: auto;
border-radius: 11px;
font-weight: 500;
transition: all .25s ease;
border: 1px solid transparent;
background: transparent;
font-family: inherit;
font-size: inherit;
text-align: left;
cursor: pointer;
flex-shrink: 0;
}
.sidebar .logout:hover {
background: rgba(220, 38, 38, .12);
border-color: rgba(248, 113, 113, .12);
color: #fecaca !important;
transform: translateX(4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}
.sidebar .logout i {
width: 24px;
text-align: center;
font-size: 18px;
flex-shrink: 0;
}
.main-content {
flex: 1;
min-width: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 20px 24px 30px;
transition: all .3s ease;
position: relative;
z-index: 1;
}
.top-bar {
min-height: 68px;
padding: 10px 16px;
margin-bottom: 18px;
border-radius: 18px;
background: rgba(255, 255, 255, .78);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, .8);
box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
position: relative;
z-index: 3000;
}
.top-bar > div {
position: relative;
z-index: 3001;
}
.top-bar .dropdown {
position: relative;
z-index: 4000;
}
.top-bar .dropdown-menu {
z-index: 5000 !important;
}
.dropdown {
position: relative;
z-index: 4000;
}
.dropdown-menu {
position: absolute !important;
z-index: 5000 !important;
border: 1px solid rgba(148, 163, 184, .16);
border-radius: 15px;
box-shadow: 0 18px 45px rgba(15, 23, 42, .22);
padding: 8px;
overflow: auto;
}
.top-bar .dropdown-menu.show {
z-index: 99999 !important;
}
.content-body {
flex: 1;
position: relative;
z-index: 1;
}
.main-content h1,
.main-content h2,
.main-content h3 {
font-weight: 750;
color: #172033;
}
.card {
border: 1px solid rgba(148, 163, 184, .12);
border-radius: 18px;
background: rgba(255, 255, 255, .88);
box-shadow: 0 8px 28px rgba(15, 23, 42, .07);
transition: all .3s ease;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(15, 23, 42, .11);
}
.card-header {
border-bottom: 1px solid rgba(148, 163, 184, .12);
background: transparent;
font-weight: 700;
}
label {
font-weight: 600;
margin-bottom: 6px;
color: #334155;
}
input,
select,
textarea,
.form-control,
.form-select {
border-radius: 11px !important;
border: 1px solid #dbe2ea !important;
padding: 10px 12px !important;
color: #172033 !important;
background: rgba(255, 255, 255, .95) !important;
min-height: 45px;
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
border-color: #3b82f6 !important;
box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .13) !important;
}
textarea.form-control {
min-height: 100px;
}
.btn {
border-radius: 11px !important;
padding: 8px 15px;
font-weight: 600;
transition: all .25s ease;
white-space: nowrap;
}
.btn:hover {
transform: translateY(-1px);
}
.btn-primary {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
border: none;
box-shadow: 0 6px 16px rgba(37, 99, 235, .18);
}
.btn-primary:hover {
background: linear-gradient(135deg, #1d4ed8, #1e40af);
box-shadow: 0 9px 22px rgba(37, 99, 235, .25);
}
.btn-success {
background: linear-gradient(135deg, #16a34a, #15803d);
border: none;
}
.btn-danger {
background: linear-gradient(135deg, #dc2626, #b91c1c);
border: none;
}
.btn-warning {
border: none;
}
.btn-light {
background: rgba(255, 255, 255, .88);
border: 1px solid #e2e8f0;
}
.table-responsive {
border-radius: 16px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table {
margin-bottom: 0;
background: rgba(255, 255, 255, .94);
border-radius: 16px;
overflow: hidden;
}
.table thead {
background: linear-gradient(135deg, #0f172a, #1e293b);
}
.table thead th {
color: #fff !important;
border: none;
padding: 14px;
font-weight: 600;
white-space: nowrap;
}
.table tbody td {
padding: 12px;
vertical-align: middle;
border-color: #edf1f5;
}
.table-hover tbody tr {
transition: all .2s ease;
}
.table-hover tbody tr:hover {
background: #eff6ff !important;
}
table.dataTable thead th {
cursor: pointer;
position: relative;
white-space: nowrap;
}
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
padding-right: 28px !important;
}
table.dataTable tbody tr:hover {
background-color: #eff6ff !important;
}
.dataTables_wrapper .dataTables_filter input {
border-radius: 10px !important;
border: 1px solid #dbe2ea !important;
padding: 7px 11px !important;
margin-left: 6px;
}
.dataTables_wrapper .dataTables_length select {
border-radius: 10px !important;
border: 1px solid #dbe2ea !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: 8px !important;
border: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
color: white !important;
border: none !important;
}
.dropdown-item {
border-radius: 9px;
padding: 9px 12px;
}
.dropdown-item:hover {
background: #eff6ff;
color: #2563eb;
}
.dropdown-header {
color: #2563eb;
font-weight: 700;
}
.badge {
border-radius: 50rem;
padding: 6px 10px;
font-weight: 600;
}
.dash-card,
.line-card {
border: none;
border-radius: 20px;
color: #fff;
padding: 22px;
position: relative;
overflow: hidden;
transition: all .3s ease;
box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}
.dash-card:hover,
.line-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(15, 23, 42, .18);
}
.dash-card::before,
.line-card::before {
content: "";
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
right: -55px;
top: -55px;
}
.dash-card .icon-bg {
position: absolute;
right: 20px;
top: 18px;
font-size: 70px;
opacity: .15;
}
.dash-card h6 {
opacity: .9;
font-weight: 600;
margin-bottom: 8px;
}
.dash-card h2 {
font-size: 2.3rem;
font-weight: 700;
margin-bottom: 5px;
}
.dash-card small {
opacity: .85;
}
.bg-total {
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
color: #fff !important;
}
.bg-pending {
background: linear-gradient(135deg, #dc2626, #991b1b) !important;
color: #fff !important;
}
.bg-store {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
color: #fff !important;
}
.bg-excellent {
background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
color: #fff !important;
}
.bg-pdf {
background: linear-gradient(135deg, #dc3545, #b91c1c) !important;
color: #fff !important;
}
.bg-active {
background: linear-gradient(135deg, #16a34a, #15803d) !important;
color: #fff !important;
}
.bg-monthly {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
color: #fff !important;
}
.bg-yearly {
background: linear-gradient(135deg, #e74a3b, #b91c1c) !important;
color: #fff !important;
}
.bg-purple {
background: linear-gradient(135deg, #6f42c1, #8e44ad) !important;
color: #fff !important;
}
.bg-orange,
.bg-burgundy {
background: #800020 !important;
color: #fff !important;
}
.text-burgundy {
color: #800020 !important;
}
.line-card i {
position: absolute;
right: 20px;
top: 20px;
font-size: 45px;
opacity: .25;
}
.line-title {
font-size: .9rem;
opacity: .9;
margin-bottom: 8px;
}
.line-value {
font-size: 2rem;
font-weight: bold;
margin: 0;
}
.dashboard-icon {
width: 68px;
height: 68px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
transition: .3s ease;
}
.card:hover .dashboard-icon {
transform: scale(1.08);
}
.action-btn {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 11px;
padding: 0;
transition: all .25s ease;
margin-right: 4px;
}
.action-btn:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 8px 18px rgba(15, 23, 42, .15);
}
.health-badge {
border-radius: 20px;
padding: 6px 14px;
font-weight: 600;
}
.company-badge {
display: inline-block;
padding: 6px 14px;
border-radius: 20px;
font-weight: 600;
font-size: 13px;
color: white;
min-width: 90px;
text-align: center;
}
.company-ratomag {
background: #6f42c1;
}
.company-steelcraft {
background: #800020;
}
.company-factory {
background: #198754;
}
.company-default {
background: #6c757d;
}
.provider-orange {
background-color: #ff7900 !important;
color: #fff !important;
}
.provider-we {
background-color: #6f42c1 !important;
color: #fff !important;
}
.provider-vodafone {
background-color: #e60000 !important;
color: #fff !important;
}
.provider-orange,
.provider-we,
.provider-vodafone {
display: inline-block;
min-width: 90px;
text-align: center;
padding: 6px 14px;
border-radius: 50rem;
font-weight: 600;
font-size: .85rem;
}
.border-purple {
border-color: #6f42c1 !important;
}
.border-steel {
border-color: #800020 !important;
}
.border-factory {
border-color: #198754 !important;
}
#mailTable {
table-layout: fixed;
}
#mailTable td {
vertical-align: middle;
}
#mailTable .text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.flag-red {
background: #fdebec !important;
}
.flag-orange {
background: #fff3e8 !important;
}
.flag-yellow {
background: #fffbe6 !important;
}
.flag-green {
background: #edf9f1 !important;
}
.flag-blue {
background: #edf4ff !important;
}
.flag-purple {
background: #f5efff !important;
}
.mail-row.selected,
.selected {
box-shadow: inset 4px 0 0 #8b949e;
outline: none;
filter: brightness(98%);
}
table.dataTable tbody tr.selected > *,
table.dataTable tbody > tr.selected > * {
background: #eceff3 !important;
box-shadow: inset 0 0 0 9999px #eceff3 !important;
color: inherit !important;
}
.mail-row.selected {
background: #eceff3 !important;
}
.color-dot {
width: 22px;
height: 22px;
border-radius: 50%;
display: block;
cursor: pointer;
transition: transform .2s ease;
}
.color-item {
border: none !important;
background: transparent !important;
padding: 2px !important;
}
.color-item:hover .color-dot {
transform: scale(1.2);
box-shadow: 0 0 0 3px rgba(108, 117, 125, .18);
}
.expired-row {
background-color: #f8d7da !important;
}
.expiring-row {
background-color: #fff8db !important;
}
.expired-row:hover,
.expiring-row:hover {
background-color: inherit !important;
filter: brightness(97%);
}
.license-warning {
background-color: #f8e9ee !important;
}
.license-warning td {
background-color: transparent !important;
}
.license-warning:hover {
background-color: #efd3dc !important;
}
.license-warning:hover td {
background-color: transparent !important;
}
.dashboard-filter-card {
cursor: pointer;
transition: all .25s ease;
}
.dashboard-filter-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 35px rgba(0, 0, 0, .14);
}
.dashboard-filter-card.active {
transform: translateY(-6px);
box-shadow: 0 0 0 3px rgba(37, 99, 235, .25), 0 12px 28px rgba(0, 0, 0, .12);
}
#loadingOverlay {
position: fixed;
inset: 0;
background: rgba(7, 20, 38, .72);
display: none;
justify-content: center;
align-items: center;
z-index: 999999;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.loading-box {
background: rgba(255, 255, 255, .95);
padding: 45px 60px;
border-radius: 22px;
box-shadow: 0 25px 60px rgba(0, 0, 0, .25);
text-align: center;
}
.sidebar-overlay {
position: fixed;
inset: 0;
background: rgba(2, 8, 23, .55);
display: none;
z-index: 1050;
backdrop-filter: blur(3px);
}
.sidebar-overlay.show {
display: block;
}
.sidebar.collapsed {
width: 78px;
}
.sidebar.collapsed .logo-title {
font-size: 0;
}
.sidebar.collapsed .logo-title::after {
content: "IT";
font-size: 24px;
letter-spacing: 1px;
}
.sidebar.collapsed a {
justify-content: center;
padding: 14px 0;
font-size: 0;
gap: 0;
}
.sidebar.collapsed a i {
font-size: 20px;
margin: 0;
}
.sidebar.collapsed .logout-form {
width: 100%;
margin: 0;
padding: 0;
}
.sidebar.collapsed .logout {
width: 100%;
box-sizing: border-box;
justify-content: center;
padding: 14px 0;
gap: 0;
font-size: 0;
overflow: hidden;
}
.sidebar.collapsed .logout span {
display: none;
}
.sidebar.collapsed .logout i {
width: 24px;
min-width: 24px;
margin: 0 !important;
font-size: 20px;
text-align: center;
flex-shrink: 0;
}
@media (max-width: 991px) {
.sidebar {
position: fixed;
left: -290px;
top: 0;
width: 270px;
height: 100dvh;
min-height: 100dvh;
transition: left .35s ease;
}
.sidebar .logout {
margin-top: auto;
flex-shrink: 0;
}
.sidebar.show {
left: 0;
}
.main-content {
width: 100%;
padding: 12px;
}
.top-bar {
gap: 10px;
}
.sidebar.collapsed {
width: 270px;
}
.sidebar.collapsed .logo-title {
font-size: 28px;
}
.sidebar.collapsed .logo-title::after {
display: none;
}
.sidebar.collapsed a {
justify-content: flex-start;
padding: 9px 13px;
font-size: inherit;
gap: 10px;
}
.sidebar.collapsed a i {
font-size: 18px;
}
.dash-card,
.line-card {
margin-bottom: 15px;
}
.btn {
min-height: 42px;
}
}
@media (max-width: 768px) {
.main-content {
padding: 10px;
width: 100%;
min-width: 0;
}
.content-body {
padding-top: 8px !important;
width: 100%;
min-width: 0;
}
.card {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.card-body {
padding: 12px;
min-width: 0;
}
/* =========================================
RESPONSIVE TABLE
========================================= */
.table-responsive {
width: 100%;
max-width: 100%;
overflow-x: auto !important;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
border-radius: 12px;
}
.table-responsive > table {
width: 100%;
margin-bottom: 0;
}
.table {
width: 100%;
max-width: 100%;
}
.table thead {
display: none;
}
/* =========================================
DATATABLE RESPONSIVE
========================================= */
table.dataTable {
width: 100% !important;
max-width: 100% !important;
}
table.dataTable > tbody > tr:not(.child) {
display: table-row;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
position: relative;
padding-left: 42px !important;
cursor: pointer;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
top: 50%;
left: 12px;
margin-top: -9px;
width: 18px;
height: 18px;
line-height: 18px;
font-size: 14px;
font-weight: 700;
border: 0 !important;
box-shadow: none !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
content: "−";
background: #2563eb !important;
color: #fff !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.parent) > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.parent) > th.dtr-control:before {
content: "+";
background: #2563eb !important;
color: #fff !important;
}
/* =========================================
MOBILE CHILD ROW
========================================= */
table.dataTable.dtr-inline.collapsed > tbody > tr.child {
background: #f8fafc !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.child > td {
padding: 12px 14px !important;
border-top: 0 !important;
}
table.dataTable > tbody > tr.child ul.dtr-details {
width: 100% !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
width: 100% !important;
padding: 10px 4px !important;
border-bottom: 1px solid #e2e8f0 !important;
white-space: normal !important;
gap: 15px !important;
}
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
border-bottom: 0 !important;
}
table.dataTable > tbody > tr.child span.dtr-title {
flex: 0 0 40% !important;
max-width: 40% !important;
font-weight: 700 !important;
color: #334155 !important;
white-space: normal !important;
}
table.dataTable > tbody > tr.child span.dtr-data {
flex: 1 1 auto !important;
min-width: 0 !important;
text-align: right !important;
color: #172033 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
/* =========================================
MOBILE BADGES
========================================= */
table.dataTable > tbody > tr.child .badge {
white-space: normal !important;
text-align: center !important;
overflow-wrap: anywhere;
}
/* =========================================
MOBILE ACTION BUTTONS
========================================= */
table.dataTable > tbody > tr.child .d-flex {
justify-content: flex-end !important;
flex-wrap: wrap !important;
gap: 5px !important;
}
.table td,
.table th {
font-size: 14px;
}
.table tbody td {
padding: 10px 8px;
}
.table .btn {
min-height: 35px;
padding: 5px 10px;
font-size: 13px;
}
.top-bar {
padding: 10px;
border-radius: 15px;
}
.top-bar > div {
width: 100%;
}
.top-bar > div:last-child {
justify-content: flex-end;
}
.provider-orange,
.provider-we,
.provider-vodafone {
min-width: 80px;
}
.action-btn {
width: 36px;
height: 36px;
}
}
@media (max-width: 480px) {
.main-content h1 {
font-size: 24px;
}
.main-content h2 {
font-size: 21px;
}
.btn {
margin-bottom: 5px;
}
.d-flex {
flex-wrap: wrap;
}
.top-bar > div:last-child {
justify-content: stretch;
}
.top-bar > div:last-child .dropdown,
.top-bar > div:last-child .dropdown > .btn {
width: 100%;
}
.loading-box {
width: calc(100% - 30px);
padding: 35px 20px;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
display: block !important;
padding: 11px 4px !important;
}
table.dataTable > tbody > tr.child span.dtr-title {
display: block !important;
max-width: 100% !important;
margin-bottom: 5px;
}
table.dataTable > tbody > tr.child span.dtr-data {
display: block !important;
text-align: left !important;
}
.provider-orange,
.provider-we,
.provider-vodafone {
min-width: 75px;
font-size: .8rem;
padding: 5px 10px;
}
}
.ratomag-logo {
width: 125px;
height: auto;
display: block;
margin: 0 auto 8px;
object-fit: contain;
}
.sidebar.collapsed .ratomag-logo {
width: 38px;
margin-bottom: 8px;
}
.secure-wrapper {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url('/images/Login-Background.png');
background-size: cover;
background-position: center;
}
.secure-card {
width: 450px;
padding: 45px;
background: rgba(255,255,255,.12);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-radius: 25px;
border: 1px solid rgba(255,255,255,.25);
box-shadow: 0 25px 70px rgba(0,0,0,.5);
animation: secureFade .6s ease;
}
.secure-icon {
width: 95px;
height: 95px;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
border-radius: 50%;
background: rgba(255,255,255,.15);
color: white;
font-size: 48px;
box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.glass-input {
background: rgba(255,255,255,.15) !important;
border: 1px solid rgba(255,255,255,.25) !important;
color: white !important;
}
.glass-input::placeholder {
color: rgba(255,255,255,.7);
}
@keyframes secureFade {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================
ITMS DARK MODE
Navy / Glassmorphism Theme
============================================================ */
html[data-theme="dark"] {
color-scheme: dark;
}
html[data-theme="dark"] body {
color: #ffffff;
background: radial-gradient(circle at 15% 20%, rgba(37, 99, 235, .18), transparent 30%), radial-gradient(circle at 85% 80%, rgba(79, 70, 229, .16), transparent 30%), linear-gradient(135deg, #06101d 0%, #0a1424 48%, #101a30 100%);
}
html[data-theme="dark"] .main-content {
background: transparent;
}
html[data-theme="dark"] .content-body {
color: #ffffff;
}
html[data-theme="dark"] .sidebar {
background: radial-gradient(circle at 20% 10%, rgba(37, 99, 235, .22), transparent 30%), linear-gradient(180deg, #06101d 0%, #0a1424 55%, #101a30 100%);
box-shadow: 8px 0 35px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .sidebar .logo {
border-bottom-color: rgba(255, 255, 255, .09);
}
html[data-theme="dark"] .sidebar a {
color: #cbd5e1 !important;
}
html[data-theme="dark"] .sidebar a:hover {
color: #ffffff !important;
background: rgba(59, 130, 246, .14);
border-color: rgba(96, 165, 250, .16);
box-shadow: 0 8px 25px rgba(37, 99, 235, .10);
}
html[data-theme="dark"] .sidebar hr {
border-color: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .top-bar {
background: rgba(17, 31, 51, .68);
border-color: rgba(255, 255, 255, .09);
box-shadow: 0 15px 45px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-theme="dark"] .top-bar .text-muted {
color: rgba(255, 255, 255, .52) !important;
}
html[data-theme="dark"] .top-bar strong {
color: #ffffff;
}
.theme-toggle {
min-height: 42px;
padding: 8px 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border-radius: 50rem;
border: 1px solid rgba(148, 163, 184, .20);
background: rgba(255, 255, 255, .70);
color: #334155;
box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
cursor: pointer;
transition: all .25s ease;
font-family: inherit;
font-weight: 600;
}
.theme-toggle:hover {
transform: translateY(-2px);
border-color: rgba(59, 130, 246, .35);
box-shadow: 0 9px 24px rgba(37, 99, 235, .15);
}
.theme-toggle i {
font-size: 15px;
}
html[data-theme="dark"] .theme-toggle {
background: rgba(255, 255, 255, .055);
border-color: rgba(255, 255, 255, .10);
color: #cbd5e1;
box-shadow: 0 8px 25px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .04);
}
html[data-theme="dark"] .theme-toggle:hover {
color: #ffffff;
background: rgba(59, 130, 246, .12);
border-color: rgba(96, 165, 250, .20);
}
html[data-theme="dark"] .card {
background: rgba(255, 255, 255, .055);
border-color: rgba(255, 255, 255, .08);
box-shadow: 0 15px 45px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .035);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
html[data-theme="dark"] .card:hover {
box-shadow: 0 20px 55px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-theme="dark"] .card-header {
border-bottom-color: rgba(255, 255, 255, .07);
}
html[data-theme="dark"] .main-content h1,
html[data-theme="dark"] .main-content h2,
html[data-theme="dark"] .main-content h3,
html[data-theme="dark"] .main-content h4,
html[data-theme="dark"] .main-content h5,
html[data-theme="dark"] .main-content h6 {
color: #ffffff;
}
html[data-theme="dark"] label {
color: #cbd5e1;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
color: #f8fafc !important;
background: rgba(8, 20, 37, .72) !important;
border-color: rgba(148, 163, 184, .20) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .form-control::placeholder {
color: rgba(203, 213, 225, .45);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
color: #ffffff !important;
background: rgba(10, 25, 45, .88) !important;
border-color: #3b82f6 !important;
box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .18) !important;
}
html[data-theme="dark"] .form-select option {
background: #101d31;
color: #ffffff;
}
html[data-theme="dark"] .btn-light {
color: #dbeafe;
background: rgba(255, 255, 255, .055);
border-color: rgba(255, 255, 255, .10);
}
html[data-theme="dark"] .btn-light:hover {
color: #ffffff;
background: rgba(59, 130, 246, .12);
border-color: rgba(96, 165, 250, .20);
}
html[data-theme="dark"] .btn-primary {
background: linear-gradient(135deg, #2563eb, #3b82f6);
box-shadow: 0 10px 25px rgba(37, 99, 235, .22);
}
html[data-theme="dark"] .btn-primary:hover {
background: linear-gradient(135deg, #1d4ed8, #2563eb);
box-shadow: 0 14px 32px rgba(37, 99, 235, .35);
}
html[data-theme="dark"] .dropdown-menu {
color: #e2e8f0;
background: rgba(15, 29, 48, .96);
border-color: rgba(255, 255, 255, .09);
box-shadow: 0 25px 60px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .035);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
html[data-theme="dark"] .dropdown-item {
color: #dbe4f0;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
color: #ffffff;
background: rgba(59, 130, 246, .12);
}
html[data-theme="dark"] .dropdown-header {
color: #60a5fa;
}
html[data-theme="dark"] .dropdown-divider {
border-color: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .dropdown-item.text-muted,
html[data-theme="dark"] .dropdown-item .text-muted {
color: rgba(255, 255, 255, .48) !important;
}
html[data-theme="dark"] .dropdown-item .text-secondary {
color: rgba(255, 255, 255, .40) !important;
}
html[data-theme="dark"] .table {
color: #dbe4f0;
background: rgba(255, 255, 255, .045);
--bs-table-bg: transparent;
--bs-table-color: #dbe4f0;
}
html[data-theme="dark"] .table thead,
html[data-theme="dark"] .table thead tr {
background: linear-gradient(135deg, #071426, #101f35);
}
html[data-theme="dark"] .table thead th {
color: #ffffff !important;
border-color: rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .table tbody td {
color: #dbe4f0;
border-color: rgba(148, 163, 184, .10);
}
html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] table.dataTable tbody tr:hover {
background: rgba(37, 99, 235, .10) !important;
}
html[data-theme="dark"] table.dataTable tbody tr {
background: transparent;
}
html[data-theme="dark"] table.dataTable tbody td {
color: #dbe4f0;
}
html[data-theme="dark"] .dataTables_wrapper {
color: #cbd5e1;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
color: #ffffff !important;
background: rgba(8, 20, 37, .72) !important;
border-color: rgba(148, 163, 184, .20) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
color: #cbd5e1 !important;
background: transparent !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: #ffffff !important;
background: rgba(59, 130, 246, .12) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
color: #ffffff !important;
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}
html[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr.child {
background: #0d1b2d !important;
}
html[data-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details > li {
border-bottom-color: rgba(148, 163, 184, .12) !important;
}
html[data-theme="dark"] table.dataTable > tbody > tr.child span.dtr-title {
color: #93c5fd !important;
}
html[data-theme="dark"] table.dataTable > tbody > tr.child span.dtr-data {
color: #e2e8f0 !important;
}
html[data-theme="dark"] table.dataTable tbody tr.selected > *,
html[data-theme="dark"] table.dataTable tbody > tr.selected > * {
background: #16263d !important;
box-shadow: inset 0 0 0 9999px #16263d !important;
color: #ffffff !important;
}
html[data-theme="dark"] .mail-row.selected {
background: #16263d !important;
}
html[data-theme="dark"] .flag-red {
background: rgba(220, 38, 38, .16) !important;
}
html[data-theme="dark"] .flag-orange {
background: rgba(249, 115, 22, .15) !important;
}
html[data-theme="dark"] .flag-yellow {
background: rgba(234, 179, 8, .15) !important;
}
html[data-theme="dark"] .flag-green {
background: rgba(34, 197, 94, .14) !important;
}
html[data-theme="dark"] .flag-blue {
background: rgba(59, 130, 246, .15) !important;
}
html[data-theme="dark"] .flag-purple {
background: rgba(124, 58, 237, .15) !important;
}
html[data-theme="dark"] .expired-row {
background-color: rgba(220, 38, 38, .16) !important;
}
html[data-theme="dark"] .expiring-row {
background-color: rgba(245, 158, 11, .13) !important;
}
html[data-theme="dark"] .license-warning {
background-color: rgba(190, 24, 93, .13) !important;
}
html[data-theme="dark"] .license-warning:hover {
background-color: rgba(190, 24, 93, .20) !important;
}
html[data-theme="dark"] #loadingOverlay {
background: rgba(3, 10, 20, .78);
}
html[data-theme="dark"] .loading-box {
color: #ffffff;
background: rgba(17, 31, 51, .95);
border: 1px solid rgba(255, 255, 255, .09);
box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .loading-box .text-muted {
color: rgba(255, 255, 255, .50) !important;
}
html[data-theme="dark"] .alert {
border-color: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .alert-success {
color: #bbf7d0;
background: rgba(22, 163, 74, .14);
}
html[data-theme="dark"] .alert-danger {
color: #fecaca;
background: rgba(220, 38, 38, .14);
}
html[data-theme="dark"] .sidebar-overlay {
background: rgba(2, 8, 23, .72);
}
html[data-theme="dark"] .secure-card {
background: rgba(9, 24, 43, .28);
border-color: rgba(255, 255, 255, .16);
box-shadow: 0 25px 70px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .secure-icon {
background: rgba(59, 130, 246, .12);
border: 1px solid rgba(96, 165, 250, .16);
}
html[data-theme="dark"] .text-muted {
color: rgba(255, 255, 255, .50) !important;
}
html[data-theme="dark"] .text-secondary {
color: rgba(255, 255, 255, .42) !important;
}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start {
border-color: rgba(255, 255, 255, .09) !important;
}
html[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
html[data-theme="dark"] .dashboard-filter-card:hover {
box-shadow: 0 18px 40px rgba(0, 0, 0, .30), 0 0 0 1px rgba(96, 165, 250, .08);
}
html[data-theme="dark"] .dashboard-filter-card.active {
box-shadow: 0 0 0 3px rgba(37, 99, 235, .25), 0 15px 35px rgba(0, 0, 0, .30);
}
html[data-theme="dark"] .action-btn:hover {
box-shadow: 0 8px 22px rgba(0, 0, 0, .30);
}
body,
.sidebar,
.main-content,
.top-bar,
.card,
.card-header,
.table,
.table tbody td,
.dropdown-menu,
.dropdown-item,
.form-control,
.form-select,
input,
select,
textarea,
.theme-toggle,
.loading-box {
transition: background-color .25s ease, background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
/* ============================================================
Device Management - IT Store = YES
Dark Mode Text Fix
============================================================ */
html[data-theme="dark"] #deviceTable tbody tr[data-store="yes"] {
color: #000000 !important;
}
html[data-theme="dark"] #deviceTable tbody tr[data-store="yes"] > td {
color: #000000 !important;
}
/* All text inside IT Store = YES row */
html[data-theme="dark"] #deviceTable tbody tr[data-store="yes"] td,
html[data-theme="dark"] #deviceTable tbody tr[data-store="yes"] td *,
html[data-theme="dark"] #deviceTable tbody tr[data-store="yes"] td a {
color: #000000 !important;
}
/* Keep the yellow background */
html[data-theme="dark"] #deviceTable tbody tr[data-store="yes"],
html[data-theme="dark"] #deviceTable tbody tr[data-store="yes"] > td {
background-color: #fff3cd !important;
}
/* Hover */
html[data-theme="dark"] #deviceTable tbody tr[data-store="yes"]:hover,
html[data-theme="dark"] #deviceTable tbody tr[data-store="yes"]:hover > td {
background-color: #ffe69c !important;
color: #000000 !important;
}
html[data-theme="dark"] #deviceTable tbody tr[data-store="yes"]:hover td,
html[data-theme="dark"] #deviceTable tbody tr[data-store="yes"]:hover td * {
color: #000000 !important;
}
/* ================================
Device Scan Modal Fix
================================ */
#scanModal {
z-index: 1060 !important;
}
#scanModal + .modal-backdrop,
.modal-backdrop {
z-index: 1050 !important;
}
#scanModal .modal-dialog {
z-index: 1061;
}
body.modal-open {
overflow: hidden;
}
/* Prevent stuck/dark backdrop */
.modal-backdrop.show {
opacity: 0.5;
}
/* ============================================================
DARK MODE - GLOBAL TABLE TEXT FIX
Fix Bootstrap / DataTables text colors
============================================================ */
html[data-theme="dark"] .table {
color: #e2e8f0 !important;
--bs-table-color: #e2e8f0 !important;
--bs-table-bg: transparent !important;
--bs-table-striped-color: #e2e8f0 !important;
}
html[data-theme="dark"] .table tbody tr {
color: #e2e8f0 !important;
background-color: transparent;
}
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table tbody th {
color: #e2e8f0 !important;
border-color: rgba(148, 163, 184, .12) !important;
}
/* Normal text inside table cells */
html[data-theme="dark"] .table tbody td span:not(.badge),
html[data-theme="dark"] .table tbody td strong,
html[data-theme="dark"] .table tbody td small,
html[data-theme="dark"] .table tbody td div,
html[data-theme="dark"] .table tbody td p {
color: #e2e8f0;
}
/* Links inside tables */
html[data-theme="dark"] .table tbody td a:not(.btn) {
color: #93c5fd !important;
}
html[data-theme="dark"] .table tbody td a:not(.btn):hover {
color: #bfdbfe !important;
}
/* Icons inside normal table text */
html[data-theme="dark"] .table tbody td i:not(.btn i) {
color: #93c5fd;
}
/* Keep Bootstrap text-muted readable */
html[data-theme="dark"] .table .text-muted {
color: #94a3b8 !important;
}
html[data-theme="dark"] .table .text-secondary {
color: #cbd5e1 !important;
}
/* Keep colored Bootstrap text utilities working */
html[data-theme="dark"] .table .text-primary {
color: #60a5fa !important;
}
html[data-theme="dark"] .table .text-success {
color: #4ade80 !important;
}
html[data-theme="dark"] .table .text-danger {
color: #f87171 !important;
}
html[data-theme="dark"] .table .text-warning {
color: #fbbf24 !important;
}
html[data-theme="dark"] .table .text-info {
color: #67e8f9 !important;
}
/* ============================================================
DATATABLES - DARK MODE
============================================================ */
html[data-theme="dark"] table.dataTable {
color: #e2e8f0 !important;
background: transparent !important;
}
html[data-theme="dark"] table.dataTable tbody tr {
color: #e2e8f0 !important;
background-color: transparent !important;
}
html[data-theme="dark"] table.dataTable tbody td {
color: #e2e8f0 !important;
border-color: rgba(148, 163, 184, .12) !important;
}
html[data-theme="dark"] table.dataTable tbody td span:not(.badge),
html[data-theme="dark"] table.dataTable tbody td strong,
html[data-theme="dark"] table.dataTable tbody td small,
html[data-theme="dark"] table.dataTable tbody td div {
color: #e2e8f0;
}
html[data-theme="dark"] table.dataTable tbody td a:not(.btn) {
color: #93c5fd !important;
}
/* ============================================================
DATATABLES MOBILE CHILD ROW
============================================================ */
html[data-theme="dark"] table.dataTable > tbody > tr.child {
background: #0d1b2d !important;
color: #e2e8f0 !important;
}
html[data-theme="dark"] table.dataTable > tbody > tr.child > td {
color: #e2e8f0 !important;
background: #0d1b2d !important;
}
html[data-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details {
color: #e2e8f0 !important;
}
html[data-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details > li {
color: #e2e8f0 !important;
border-bottom-color: rgba(148, 163, 184, .12) !important;
}
html[data-theme="dark"] table.dataTable > tbody > tr.child span.dtr-title {
color: #93c5fd !important;
}
html[data-theme="dark"] table.dataTable > tbody > tr.child span.dtr-data {
color: #e2e8f0 !important;
}
html[data-theme="dark"] table.dataTable > tbody > tr.child span.dtr-data a {
color: #93c5fd !important;
}
/* ============================================================
MOBILE NORMAL TABLE
============================================================ */
@media (max-width: 768px) {
html[data-theme="dark"] .table tbody td {
color: #e2e8f0 !important;
}
html[data-theme="dark"] .table tbody td::before {
color: #93c5fd !important;
}
html[data-theme="dark"] .table tbody td span:not(.badge),
html[data-theme="dark"] .table tbody td strong,
html[data-theme="dark"] .table tbody td small,
html[data-theme="dark"] .table tbody td div {
color: #e2e8f0;
}
html[data-theme="dark"] .table tbody td .text-muted {
color: #94a3b8 !important;
}
}
/* ============================================================
COMMON TABLE ELEMENTS
============================================================ */
html[data-theme="dark"] .table-hover tbody tr:hover {
color: #ffffff !important;
}
html[data-theme="dark"] .table-hover tbody tr:hover td {
color: #ffffff !important;
}
/* ============================================================
ACTION BUTTONS - DO NOT INHERIT TABLE TEXT COLOR
============================================================ */
html[data-theme="dark"] .table .action-btn,
html[data-theme="dark"] .table .btn {
color: #ffffff !important;
}
html[data-theme="dark"] .table .action-btn i,
html[data-theme="dark"] .table .btn i {
color: inherit !important;
}
/* ============================================================
BADGES - PRESERVE THEIR OWN COLORS
============================================================ */
html[data-theme="dark"] .table .badge {
color: inherit;
}
html[data-theme="dark"] .table .bg-success {
color: #ffffff !important;
}
html[data-theme="dark"] .table .bg-danger {
color: #ffffff !important;
}
html[data-theme="dark"] .table .bg-primary {
color: #ffffff !important;
}
html[data-theme="dark"] .table .bg-warning {
color: #000000 !important;
}
html[data-theme="dark"] .table .bg-info {
color: #000000 !important;
}
/* ============================================================
BOOTSTRAP TABLE VARIABLES
============================================================ */
html[data-theme="dark"] {
--bs-table-color: #e2e8f0;
--bs-table-bg: transparent;
--bs-table-border-color: rgba(148, 163, 184, .12);
--bs-table-hover-color: #ffffff;
--bs-table-hover-bg: rgba(37, 99, 235, .10);
}
/* ============================================================
MAIL ACCOUNTS - COMPANY BADGE DARK MODE FIX
============================================================ */
html[data-theme="dark"] .company-badge {
color: #ffffff !important;
}
/* Ratomag */
html[data-theme="dark"] .company-ratomag {
background: #7c4dcc !important;
color: #ffffff !important;
}
/* Steel Craft */
html[data-theme="dark"] .company-steelcraft {
background: #9b1235 !important;
color: #ffffff !important;
}
/* Factory */
html[data-theme="dark"] .company-factory {
background: #198754 !important;
color: #ffffff !important;
}
/* Default */
html[data-theme="dark"] .company-default {
background: #64748b !important;
color: #ffffff !important;
}
/* Make sure text inside Company badge stays visible */
html[data-theme="dark"] .company-badge,
html[data-theme="dark"] .company-badge *,
html[data-theme="dark"] .company-badge i {
color: #ffffff !important;
}
/* ============================================================
MAIL ACCOUNTS - COMPANY BADGES
Dark Mode Visibility Fix
============================================================ */
html[data-theme="dark"] .company-badge {
color: #ffffff !important;
}
html[data-theme="dark"] .company-ratomag {
background: #6f42c1 !important;
color: #ffffff !important;
}
html[data-theme="dark"] .company-steelcraft {
background: #800020 !important;
color: #ffffff !important;
}
html[data-theme="dark"] .company-factory {
background: #198754 !important;
color: #ffffff !important;
}
html[data-theme="dark"] .company-default {
background: #475569 !important;
color: #ffffff !important;
}
/* ============================================================
MAIL TABLE - COMPANY COLUMN
============================================================ */
html[data-theme="dark"] #mailTable tbody td {
color: #e2e8f0;
}
html[data-theme="dark"] #mailTable tbody td .company-badge,
html[data-theme="dark"] #mailTable tbody td .company-ratomag,
html[data-theme="dark"] #mailTable tbody td .company-steelcraft,
html[data-theme="dark"] #mailTable tbody td .company-factory,
html[data-theme="dark"] #mailTable tbody td .company-default {
color: #ffffff !important;
}
/* ============================================================
MAIL DASHBOARD - DARK MODE
============================================================ */
html[data-theme="dark"] .mail-dashboard,
html[data-theme="dark"] .mail-page {
color: #e2e8f0;
}
html[data-theme="dark"] .mail-dashboard .card,
html[data-theme="dark"] .mail-page .card {
background: rgba(255, 255, 255, .055);
color: #e2e8f0;
border-color: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .mail-dashboard .text-muted,
html[data-theme="dark"] .mail-page .text-muted {
color: rgba(255, 255, 255, .55) !important;
}
html[data-theme="dark"] .mail-dashboard h1,
html[data-theme="dark"] .mail-dashboard h2,
html[data-theme="dark"] .mail-dashboard h3,
html[data-theme="dark"] .mail-dashboard h4,
html[data-theme="dark"] .mail-dashboard h5,
html[data-theme="dark"] .mail-dashboard h6,
html[data-theme="dark"] .mail-page h1,
html[data-theme="dark"] .mail-page h2,
html[data-theme="dark"] .mail-page h3,
html[data-theme="dark"] .mail-page h4,
html[data-theme="dark"] .mail-page h5,
html[data-theme="dark"] .mail-page h6 {
color: #ffffff;
}
/* ============================================================
MAIL DASHBOARD - STAT CARDS
============================================================ */
html[data-theme="dark"] .mail-dashboard .dash-card,
html[data-theme="dark"] .mail-page .dash-card {
color: #ffffff !important;
}
html[data-theme="dark"] .mail-dashboard .dash-card h2,
html[data-theme="dark"] .mail-dashboard .dash-card h6,
html[data-theme="dark"] .mail-dashboard .dash-card small,
html[data-theme="dark"] .mail-page .dash-card h2,
html[data-theme="dark"] .mail-page .dash-card h6,
html[data-theme="dark"] .mail-page .dash-card small {
color: #ffffff !important;
}
/* ============================================================
MAIL TABLE - DARK MODE ROW HOVER
============================================================ */
html[data-theme="dark"] #mailTable tbody tr:hover {
background: rgba(37, 99, 235, .10) !important;
}
html[data-theme="dark"] #mailTable tbody tr:hover td {
color: #f8fafc;
}
/* ============================================================
MOBILE / DATATABLE CHILD ROW
============================================================ */
html[data-theme="dark"] #mailTable_wrapper .dtr-details {
color: #e2e8f0;
}
html[data-theme="dark"] #mailTable_wrapper .dtr-title {
color: #93c5fd !important;
}
html[data-theme="dark"] #mailTable_wrapper .dtr-data {
color: #e2e8f0 !important;
}
html[data-theme="dark"] #mailTable_wrapper .dtr-data .company-badge,
html[data-theme="dark"] #mailTable_wrapper .dtr-data .company-ratomag,
html[data-theme="dark"] #mailTable_wrapper .dtr-data .company-steelcraft,
html[data-theme="dark"] #mailTable_wrapper .dtr-data .company-factory,
html[data-theme="dark"] #mailTable_wrapper .dtr-data .company-default {
color: #ffffff !important;
}
/* ============================================================
MAIL ACCOUNTS - TABLE COLUMN OVERFLOW FIX
Fixed for desktop + mobile card layout
============================================================ */
#mailTable {
width: 100% !important;
max-width: 100% !important;
table-layout: auto !important;
}
#mailTable th,
#mailTable td {
vertical-align: middle;
}
/* Desktop */
@media (min-width: 768px) {
#mailTable {
width: 100% !important;
table-layout: auto !important;
}
#mailTable td {
overflow: visible;
}
#mailTable td:nth-child(1),
#mailTable td:nth-child(2),
#mailTable td:nth-child(3) {
overflow: visible;
}
#mailTable td:nth-child(1) .mail-username-cell {
min-width: 0;
}
#mailTable .text-truncate {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* Mobile */
@media (max-width: 767.98px) {
/* Do not let the desktop table rules squeeze the mobile cards */
.mail-list-card,
.mail-list-card .card-body,
.mail-table-wrapper,
.mail-table-wrapper .table-responsive,
#mailTable,
#mailTable tbody {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.mail-table-wrapper .table-responsive {
overflow: visible !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#mailTable {
display: block !important;
table-layout: auto !important;
margin: 0 !important;
}
#mailTable thead {
display: none !important;
}
#mailTable tbody {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
#mailTable tbody tr {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#mailTable tbody td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* Username */
#mailTable tbody td:first-child .mail-username-cell {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
white-space: normal !important;
}
#mailTable tbody td:first-child .mail-username-icon {
flex: 0 0 28px;
}
#mailTable tbody td:first-child .fw-bold {
flex: 1 1 auto;
min-width: 0 !important;
max-width: 100% !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* Display Name */
#mailTable tbody td:nth-child(2) .text-truncate {
display: block !important;
width: 100% !important;
max-width: 100% !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* Department */
#mailTable tbody td:nth-child(3) {
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* Company */
#mailTable tbody td:nth-child(4) .mail-company-badge {
max-width: 100% !important;
white-space: nowrap !important;
}
/* Email */
#mailTable tbody td:nth-child(5) .mail-email {
display: block !important;
width: 100% !important;
max-width: 100% !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
#mailTable tbody td:nth-child(5) .mail-email a {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
/* Actions */
#mailTable tbody td.actions-cell {
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
}
.mail-action-buttons {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: .5rem !important;
}
}
/* ============================================================
DARK MODE
============================================================ */
html[data-theme="dark"] #mailTable td:nth-child(1),
html[data-theme="dark"] #mailTable td:nth-child(2),
html[data-theme="dark"] #mailTable td:nth-child(3) {
color: #e2e8f0 !important;
}
html[data-theme="dark"] #mailTable td:nth-child(1) *,
html[data-theme="dark"] #mailTable td:nth-child(2) *,
html[data-theme="dark"] #mailTable td:nth-child(3) * {
color: inherit;
}
/* ============================================================
LICENSE - DAYS LEFT DARK MODE
============================================================ */
html[data-theme="dark"] .text-burgundy {
color: #ff4d5a !important;
}
/* ============================================================
LICENSE - DAYS LEFT
============================================================ */
.expiry-burgundy {
color: #800020 !important;
}
html[data-theme="dark"] .expiry-burgundy {
color: #ff3b30 !important;
}
/* =========================================================
DEVICE HISTORY - DARK MODE
========================================================= */
html[data-theme="dark"] {
/* Main page cards */
--history-dark-bg: #0f172a;
--history-dark-card: #172033;
--history-dark-card-2: #1e293b;
--history-dark-border: rgba(148, 163, 184, .16);
}
/* =========================================================
MAIN CARDS
========================================================= */
html[data-theme="dark"] .history-info-card {
background: #172033 !important;
border: 1px solid rgba(148, 163, 184, .14);
box-shadow: 0 4px 16px rgba(0, 0, 0, .25) !important;
color: #e2e8f0;
}
html[data-theme="dark"] .history-info-card:hover {
background: #1c2940 !important;
border-color: rgba(59, 130, 246, .30);
box-shadow: 0 14px 30px rgba(0, 0, 0, .35) !important;
}
/* =========================================================
INFO CARD TEXT
========================================================= */
html[data-theme="dark"] .history-info-card small {
color: #94a3b8 !important;
}
html[data-theme="dark"] .history-info-card strong {
color: #f1f5f9 !important;
}
/* =========================================================
MAIN ICONS
========================================================= */
html[data-theme="dark"] .history-main-icon,
html[data-theme="dark"] .history-info-icon,
html[data-theme="dark"] .history-empty-icon,
html[data-theme="dark"] .history-transfer-icon {
background: rgba(59, 130, 246, .14) !important;
color: #60a5fa !important;
}
html[data-theme="dark"] .history-info-card:hover .history-info-icon {
background: rgba(59, 130, 246, .20) !important;
}
/* =========================================================
HISTORY MAIN CARD
========================================================= */
html[data-theme="dark"] .card {
border-color: rgba(148, 163, 184, .12) !important;
}
html[data-theme="dark"] .card.shadow-sm,
html[data-theme="dark"] .card.shadow-lg {
box-shadow: 0 8px 28px rgba(0, 0, 0, .25) !important;
}
/* =========================================================
HISTORY HEADER
========================================================= */
html[data-theme="dark"] .card-header {
color: #f1f5f9;
}
html[data-theme="dark"] .card-header h4,
html[data-theme="dark"] .card-header h5 {
color: #f1f5f9 !important;
}
/* =========================================================
TIMELINE
========================================================= */
html[data-theme="dark"] .history-type {
color: #f1f5f9 !important;
}
html[data-theme="dark"] .history-date {
color: #94a3b8 !important;
}
/* =========================================================
TRANSFER / ASSIGNED / DEPARTMENT
========================================================= */
html[data-theme="dark"] .transfer-box,
html[data-theme="dark"] .assigned-box,
html[data-theme="dark"] .department-change-box {
background: #1e293b !important;
border: 1px solid rgba(148, 163, 184, .14);
color: #e2e8f0;
}
html[data-theme="dark"] .transfer-box:hover,
html[data-theme="dark"] .assigned-box:hover,
html[data-theme="dark"] .department-change-box:hover {
background: #243247 !important;
border-color: rgba(59, 130, 246, .25);
box-shadow: 0 10px 25px rgba(0, 0, 0, .30) !important;
}
/* =========================================================
FROM / TO LABELS
========================================================= */
html[data-theme="dark"] .transfer-person small,
html[data-theme="dark"] .assigned-box small,
html[data-theme="dark"] .department-change-box small {
color: #94a3b8 !important;
}
/* =========================================================
PERSON NAME
========================================================= */
html[data-theme="dark"] .person-name {
color: #f8fafc !important;
}
/* =========================================================
DEPARTMENT NAME
========================================================= */
html[data-theme="dark"] .department-name {
color: #94a3b8 !important;
}
/* =========================================================
ARROWS
========================================================= */
html[data-theme="dark"] .transfer-arrow,
html[data-theme="dark"] .department-arrow {
color: #60a5fa !important;
}
/* =========================================================
ASSIGNED ICON
========================================================= */
html[data-theme="dark"] .assigned-icon {
background: rgba(34, 197, 94, .13) !important;
color: #4ade80 !important;
}
html[data-theme="dark"] .assigned-box:hover .assigned-icon {
background: rgba(34, 197, 94, .20) !important;
}
/* =========================================================
NOTES
========================================================= */
html[data-theme="dark"] .history-notes {
background: rgba(59, 130, 246, .09) !important;
border: 1px solid rgba(59, 130, 246, .15);
color: #cbd5e1 !important;
}
html[data-theme="dark"] .history-notes i {
color: #60a5fa !important;
}
/* =========================================================
ACTION BY
========================================================= */
html[data-theme="dark"] .history-action-by {
color: #94a3b8 !important;
}
html[data-theme="dark"] .history-action-by strong {
color: #cbd5e1 !important;
}
/* =========================================================
EMPTY STATE
========================================================= */
html[data-theme="dark"] .history-empty-icon {
background: rgba(59, 130, 246, .12) !important;
color: #60a5fa !important;
}
/* =========================================================
TRANSFER MODAL OVERLAY
========================================================= */
html[data-theme="dark"] .history-transfer-overlay {
background: rgba(2, 6, 23, .78) !important;
}
/* =========================================================
TRANSFER MODAL
========================================================= */
html[data-theme="dark"] .history-transfer-modal {
background: #172033 !important;
color: #e2e8f0 !important;
border: 1px solid rgba(148, 163, 184, .16);
box-shadow: 0 25px 70px rgba(0, 0, 0, .55) !important;
}
/* =========================================================
MODAL HEADER
========================================================= */
html[data-theme="dark"] .history-transfer-header {
border-bottom-color: rgba(148, 163, 184, .14) !important;
}
html[data-theme="dark"] .history-transfer-header h5 {
color: #f8fafc !important;
}
html[data-theme="dark"] .history-transfer-header small {
color: #94a3b8 !important;
}
/* =========================================================
MODAL ICON
========================================================= */
html[data-theme="dark"] .history-transfer-icon {
background: rgba(59, 130, 246, .14) !important;
color: #60a5fa !important;
}
/* =========================================================
CLOSE BUTTON
========================================================= */
html[data-theme="dark"] .history-transfer-close {
color: #94a3b8 !important;
}
html[data-theme="dark"] .history-transfer-close:hover {
background: rgba(148, 163, 184, .10) !important;
color: #f8fafc !important;
}
/* =========================================================
FORM LABELS
========================================================= */
html[data-theme="dark"] .history-form-label {
color: #e2e8f0 !important;
}
html[data-theme="dark"] .history-form-label .text-danger {
color: #f87171 !important;
}
/* =========================================================
INPUT GROUP
========================================================= */
html[data-theme="dark"] .history-input-group {
background: #1e293b !important;
border-color: rgba(148, 163, 184, .20) !important;
}
html[data-theme="dark"] .history-input-group:focus-within {
border-color: #3b82f6 !important;
box-shadow: 0 0 0 .15rem rgba(59, 130, 246, .15) !important;
}
html[data-theme="dark"] .history-input-group > i {
color: #94a3b8 !important;
}
html[data-theme="dark"] .history-input-group .form-control {
background: transparent !important;
color: #f1f5f9 !important;
}
/* =========================================================
INPUT PLACEHOLDER
========================================================= */
html[data-theme="dark"] .history-input-group .form-control::placeholder,
html[data-theme="dark"] .history-textarea::placeholder {
color: #64748b !important;
}
/* =========================================================
TEXTAREA
========================================================= */
html[data-theme="dark"] .history-textarea {
background: #1e293b !important;
color: #f1f5f9 !important;
border-color: rgba(148, 163, 184, .20) !important;
}
html[data-theme="dark"] .history-textarea:focus {
background: #1e293b !important;
color: #f1f5f9 !important;
border-color: #3b82f6 !important;
box-shadow: 0 0 0 .15rem rgba(59, 130, 246, .15) !important;
}
/* =========================================================
WARNING
========================================================= */
html[data-theme="dark"] .history-transfer-warning {
background: rgba(234, 179, 8, .12) !important;
border: 1px solid rgba(234, 179, 8, .20);
color: #facc15 !important;
}
html[data-theme="dark"] .history-transfer-warning i {
color: #facc15 !important;
}
/* =========================================================
MODAL FOOTER
========================================================= */
html[data-theme="dark"] .history-transfer-footer {
border-top-color: rgba(148, 163, 184, .14) !important;
}
/* =========================================================
CANCEL BUTTON
========================================================= */
html[data-theme="dark"] .history-transfer-footer .btn-light {
background: #334155 !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
html[data-theme="dark"] .history-transfer-footer .btn-light:hover {
background: #475569 !important;
color: #ffffff !important;
}
/* =========================================================
PRIMARY BUTTON
========================================================= */
html[data-theme="dark"] .history-transfer-footer .btn-primary {
background: #2563eb !important;
border-color: #2563eb !important;
color: #ffffff !important;
}
html[data-theme="dark"] .history-transfer-footer .btn-primary:hover {
background: #3b82f6 !important;
border-color: #3b82f6 !important;
}
/* =========================================================
MOBILE DARK MODE
========================================================= */
@@media (max-width: 767.98px) {
html[data-theme="dark"] .history-info-card {
background: #172033 !important;
}
html[data-theme="dark"] .transfer-box,
html[data-theme="dark"] .assigned-box,
html[data-theme="dark"] .department-change-box {
background: #1e293b !important;
}
html[data-theme="dark"] .history-transfer-modal {
border-radius: 16px;
}
}
/* =========================================================
TABLE HEADER - DARK MODE
========================================================= */
html[data-theme="dark"] .card-header.bg-white,
html[data-theme="dark"] .table-card .card-header,
html[data-theme="dark"] .list-card .card-header {
background: #172033 !important;
color: #f1f5f9 !important;
border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
}
/* Header title */
html[data-theme="dark"] .card-header h4,
html[data-theme="dark"] .card-header h5,
html[data-theme="dark"] .card-header h6 {
color: #f1f5f9 !important;
}
/* Header icons */
html[data-theme="dark"] .card-header i {
color: #60a5fa;
}
/* Record count badge */
html[data-theme="dark"] .card-header .badge {
background: #2563eb !important;
color: #ffffff !important;
}
/* =========================================================
TABLE ITSELF - DARK MODE
========================================================= */
html[data-theme="dark"] .table {
color: #e2e8f0 !important;
--bs-table-bg: transparent;
--bs-table-color: #e2e8f0;
}
html[data-theme="dark"] .table thead {
background: #1e293b !important;
}
html[data-theme="dark"] .table thead th {
background: #1e293b !important;
color: #f1f5f9 !important;
border-color: rgba(148, 163, 184, .16) !important;
}
html[data-theme="dark"] .table tbody td {
background: #172033 !important;
color: #e2e8f0 !important;
border-color: rgba(148, 163, 184, .10) !important;
}
html[data-theme="dark"] .table tbody tr:nth-of-type(odd) td {
background: #1a2538 !important;
}
html[data-theme="dark"] .table tbody tr:hover td {
background: #243247 !important;
}
/* =========================================================
CARD BODY
========================================================= */
html[data-theme="dark"] .card-body {
color: #e2e8f0;
}
html[data-theme="dark"] .card {
background: #172033 !important;
color: #e2e8f0;
border-color: rgba(148, 163, 184, .14) !important;
}
/* Mobile */
@media (max-width: 576px) {
#scanModal .modal-dialog {
margin: 0;
width: 100%;
max-width: 100%;
}
#scanModal .modal-content {
min-height: 100vh;
border-radius: 0;
}
}
@media (max-width: 480px) {
.theme-toggle {
width: 42px;
height: 42px;
min-height: 42px;
padding: 8px;
border-radius: 50%;
}
.theme-toggle i {
font-size: 16px;
}
}
/* ============================================================
SYSTEM SETTINGS - GLOBAL DARK MODE FIX
============================================================ */
html[data-theme="dark"] body {
color: #e2e8f0;
}
html[data-theme="dark"] .main-content h1,
html[data-theme="dark"] .main-content h2,
html[data-theme="dark"] .main-content h3 {
color: #f1f5f9;
}
html[data-theme="dark"] .card {
background: rgba(15, 23, 42, 0.78);
border-color: rgba(148, 163, 184, 0.14);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] label {
color: #cbd5e1;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
color: #e2e8f0 !important;
background: rgba(30, 41, 59, 0.85) !important;
border-color: rgba(148, 163, 184, 0.22) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .form-control::placeholder {
color: #64748b !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
color: #f8fafc !important;
background: rgba(30, 41, 59, 0.95) !important;
border-color: #3b82f6 !important;
box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .16) !important;
}
/* ============================================================
LOGIN ACTIVITY DASHBOARD
DARK MODE FIX
============================================================ */
html[data-theme="dark"] .login-activity-dashboard {
opacity: 1 !important;
filter: none !important;
color: #e2e8f0;
}
/* Main dashboard glass container */
html[data-theme="dark"] .login-activity-dashboard .dashboard-panel {
background: rgba(15, 23, 42, 0.72) !important;
border: 1px solid rgba(148, 163, 184, 0.28) !important;
box-shadow: 0 20px 55px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
/* Dashboard title */
html[data-theme="dark"] .login-activity-dashboard h1,
html[data-theme="dark"] .login-activity-dashboard h2,
html[data-theme="dark"] .login-activity-dashboard h3,
html[data-theme="dark"] .login-activity-dashboard h4 {
color: #f8fafc !important;
}
/* Subtitle / descriptions */
html[data-theme="dark"] .login-activity-dashboard .text-muted,
html[data-theme="dark"] .login-activity-dashboard small,
html[data-theme="dark"] .login-activity-dashboard .dashboard-subtitle {
color: #94a3b8 !important;
}
/* Statistic cards */
html[data-theme="dark"] .login-activity-dashboard .stat-card {
background: rgba(30, 41, 59, 0.88) !important;
border: 1px solid rgba(148, 163, 184, 0.18) !important;
color: #f8fafc !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
opacity: 1 !important;
filter: none !important;
}
/* Card title */
html[data-theme="dark"] .login-activity-dashboard .stat-card h5,
html[data-theme="dark"] .login-activity-dashboard .stat-card h6 {
color: #94a3b8 !important;
}
/* Card number */
html[data-theme="dark"] .login-activity-dashboard .stat-card h2,
html[data-theme="dark"] .login-activity-dashboard .stat-card .stat-value {
color: #f8fafc !important;
font-weight: 750;
}
/* Card description */
html[data-theme="dark"] .login-activity-dashboard .stat-card small,
html[data-theme="dark"] .login-activity-dashboard .stat-card .stat-description {
color: #94a3b8 !important;
}
/* Icons */
html[data-theme="dark"] .login-activity-dashboard .dashboard-icon {
background: rgba(59, 130, 246, 0.12) !important;
border-color: rgba(96, 165, 250, 0.28) !important;
color: #60a5fa !important;
}
/* Purple icon */
html[data-theme="dark"] .login-activity-dashboard .icon-purple {
background: rgba(139, 92, 246, 0.12) !important;
border-color: rgba(167, 139, 250, 0.25) !important;
color: #a78bfa !important;
}
/* Unique Users */
html[data-theme="dark"] .login-activity-dashboard .unique-users {
background: rgba(30, 41, 59, 0.88) !important;
border: 1px solid rgba(148, 163, 184, 0.18) !important;
color: #f8fafc !important;
opacity: 1 !important;
filter: none !important;
}
html[data-theme="dark"] .login-activity-dashboard .unique-users h2,
html[data-theme="dark"] .login-activity-dashboard .unique-users .stat-value {
color: #f8fafc !important;
}
html[data-theme="dark"] .login-activity-dashboard .unique-users .text-muted,
html[data-theme="dark"] .login-activity-dashboard .unique-users small {
color: #94a3b8 !important;
}
/* =========================================================
DARK MODE - BADGES TEXT
========================================================= */
[data-bs-theme="dark"] #accessPointTable .badge {
color: #ffffff !important;
}
/* Secondary badges */
[data-bs-theme="dark"] #accessPointTable .badge.bg-secondary {
color: #ffffff !important;
}
/* Info badge */
[data-bs-theme="dark"] #accessPointTable .badge.bg-info {
color: #0f172a !important;
}
/* Success */
[data-bs-theme="dark"] #accessPointTable .badge.bg-success {
color: #ffffff !important;
}
/* Danger */
[data-bs-theme="dark"] #accessPointTable .badge.bg-danger {
color: #ffffff !important;
}
@media (min-width: 992px) {
.sidebar {
width: 280px;
min-width: 280px;
flex: 0 0 280px;
transition: width .3s ease, min-width .3s ease, flex-basis .3s ease;
overflow: visible;
}
.sidebar.collapsed,
.sidebar-pre-collapsed .sidebar {
width: 78px;
min-width: 78px;
flex-basis: 78px;
padding-left: 0;
padding-right: 0;
}
.sidebar.collapsed .logo,
.sidebar-pre-collapsed .sidebar .logo {
justify-content: center;
padding-left: 0;
padding-right: 0;
}
.sidebar.collapsed .logo-title,
.sidebar-pre-collapsed .sidebar .logo-title {
display: none;
}
.sidebar.collapsed .ratomag-logo,
.sidebar-pre-collapsed .sidebar .ratomag-logo {
max-width: 42px;
}
.sidebar.collapsed > a,
.sidebar-pre-collapsed .sidebar > a {
justify-content: center;
padding-left: 0;
padding-right: 0;
position: relative;
}
.sidebar.collapsed > a span,
.sidebar-pre-collapsed .sidebar > a span {
display: none;
}
.sidebar.collapsed > a i,
.sidebar-pre-collapsed .sidebar > a i {
margin: 0 !important;
font-size: 1.25rem;
}
.sidebar.collapsed hr,
.sidebar-pre-collapsed .sidebar hr {
margin-left: 12px;
margin-right: 12px;
}
.sidebar.collapsed > a:hover::after,
.sidebar-pre-collapsed .sidebar > a:hover::after {
content: attr(data-tooltip);
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
background: #0f172a;
color: #fff;
padding: 7px 11px;
border-radius: 8px;
font-size: .8rem;
font-weight: 500;
white-space: nowrap;
z-index: 99999;
box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
pointer-events: none;
}
.sidebar.collapsed > a:hover::before,
.sidebar-pre-collapsed .sidebar > a:hover::before {
content: "";
position: absolute;
left: calc(100% + 4px);
top: 50%;
transform: translateY(-50%);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 6px solid #0f172a;
z-index: 99999;
}
[data-theme="dark"] .sidebar.collapsed > a:hover::after,
[data-theme="dark"] .sidebar-pre-collapsed .sidebar > a:hover::after {
background: #1e293b;
}
[data-theme="dark"] .sidebar.collapsed > a:hover::before,
[data-theme="dark"] .sidebar-pre-collapsed .sidebar > a:hover::before {
border-right-color: #1e293b;
}
.sidebar-toggle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
border-radius: 12px;
}
}
@media (max-width: 991.98px) {
.sidebar.collapsed {
width: auto;
min-width: auto;
flex-basis: auto;
}
.sidebar.collapsed .logo-title {
display: block;
}
.sidebar.collapsed > a span {
display: inline;
}
.sidebar.collapsed > a {
justify-content: flex-start;
padding-left: 15px;
padding-right: 15px;
}
.sidebar.collapsed > a i {
margin-right: .75rem !important;
}
.sidebar.collapsed > a::before,
.sidebar.collapsed > a::after {
display: none;
}
}
/* =========================================================
ITMS ASSISTANT - MOBILE TOP BAR
========================================================= */
@media (max-width: 991.98px) {
.itms-assistant-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
z-index: 6000;
width: 100%;
margin-top: 6px;
}
.itms-assistant-trigger {
width: 100% !important;
min-width: 0 !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 14px !important;
margin: 0 !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, .82) !important;
border: 1px solid rgba(148, 163, 184, .20) !important;
box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
transition: all .25s ease;
position: relative;
z-index: 6001;
}
.itms-assistant-trigger:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, .95) !important;
box-shadow: 0 8px 22px rgba(15, 23, 42, .14);
}
.itms-assistant-trigger:active {
transform: scale(.98);
}
.itms-assistant-trigger-orb {
width: 27px;
height: 27px;
min-width: 27px;
min-height: 27px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: radial-gradient( circle at 35% 30%, #60a5fa 0%, #3b82f6 35%, #2563eb 70%, #1d4ed8 100% );
box-shadow: 0 4px 10px rgba(37, 99, 235, .28), inset 0 1px 2px rgba(255, 255, 255, .35);
position: relative;
overflow: hidden;
}
.itms-assistant-trigger-orb::before {
content: "";
position: absolute;
width: 9px;
height: 9px;
top: 4px;
left: 5px;
border-radius: 50%;
background: rgba(255, 255, 255, .30);
filter: blur(2px);
}
.itms-assistant-trigger .itms-assistant-robot-eyes {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
position: relative;
z-index: 2;
}
.itms-assistant-trigger .itms-assistant-robot-eyes span {
width: 4px;
height: 4px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 5px rgba(255, 255, 255, .8);
}
.itms-assistant-greeting {
display: none !important;
}
.itms-assistant-panel {
z-index: 7000;
}
}
/* =========================================================
ITMS ASSISTANT - MOBILE DARK MODE
========================================================= */
@media (max-width: 991.98px) {
html[data-theme="dark"] .itms-assistant-trigger,
[data-bs-theme="dark"] .itms-assistant-trigger {
background: rgba(30, 41, 59, .90) !important;
border-color: rgba(148, 163, 184, .20) !important;
color: #f8fafc !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
html[data-theme="dark"] .itms-assistant-trigger:hover,
[data-bs-theme="dark"] .itms-assistant-trigger:hover {
background: rgba(51, 65, 85, .95) !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
}
}
/* =========================================================
ITMS ASSISTANT - SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.itms-assistant-container {
width: 100%;
margin-top: 6px;
}
.itms-assistant-trigger {
width: 100% !important;
height: 42px !important;
min-height: 42px !important;
border-radius: 12px !important;
}
.itms-assistant-trigger-orb {
width: 26px;
height: 26px;
}
.itms-assistant-trigger .itms-assistant-robot-eyes {
gap: 4px;
}
.itms-assistant-trigger .itms-assistant-robot-eyes span {
width: 3.5px;
height: 3.5px;
}
}
@media (max-width: 991.98px) {
.top-bar {
position: relative;
z-index: 3000;
overflow: visible !important;
}
.top-bar > div {
position: relative;
z-index: 3001;
overflow: visible !important;
}
/* =========================================
ACTIVE USERS + NOTIFICATIONS
========================================= */
.top-bar .dropdown {
position: relative;
z-index: 10000 !important;
}
.top-bar .dropdown.show,
.top-bar .dropdown:has(.dropdown-menu.show) {
z-index: 100000 !important;
}
.top-bar .dropdown-menu {
position: absolute !important;
z-index: 999999 !important;
overflow: auto !important;
}
.top-bar .dropdown-menu.show {
z-index: 999999 !important;
}
/* =========================================
ITMS ASSISTANT
========================================= */
.itms-assistant-container {
position: relative;
z-index: 6000 !important;
}
.itms-assistant-panel {
position: absolute !important;
z-index: 7000 !important;
}
/* Assistant opened */
.itms-assistant-container:has(.itms-assistant-panel[aria-hidden="false"]) {
z-index: 200000 !important;
}
.itms-assistant-container:has(.itms-assistant-panel.show) {
z-index: 200000 !important;
}
.itms-assistant-container:has(.itms-assistant-panel[style*="display: block"]) {
z-index: 200000 !important;
}
}
/* =========================================================
ITMS ASSISTANT - PREMIUM ANIMATIONS
========================================================= */
.itms-assistant-trigger {
overflow: visible !important;
isolation: isolate;
}
.itms-assistant-trigger-orb {
animation: itmsAssistantFloat 3s ease-in-out infinite;
}
.itms-assistant-trigger-orb::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid rgba(59, 130, 246, .35);
animation: itmsAssistantPulse 2.2s ease-out infinite;
pointer-events: none;
}
.itms-assistant-trigger .itms-assistant-robot-eyes span {
animation: itmsAssistantBlink 4s infinite;
}
.itms-assistant-trigger .itms-assistant-robot-eyes span:nth-child(2) {
animation-delay: .08s;
}
/* =========================================================
HOVER
========================================================= */
.itms-assistant-trigger:hover .itms-assistant-trigger-orb {
animation-play-state: paused;
transform: scale(1.08);
}
.itms-assistant-trigger:hover .itms-assistant-trigger-orb::after {
animation-play-state: paused;
opacity: .8;
}
/* =========================================================
PANEL OPEN ANIMATION
========================================================= */
.itms-assistant-panel {
transform-origin: bottom right;
}
.itms-assistant-panel.show {
animation: itmsAssistantPanelOpen .32s cubic-bezier(.22, 1, .36, 1);
}
/* =========================================================
GREETING
========================================================= */
.itms-assistant-greeting {
animation: itmsAssistantGreetingIn .45s cubic-bezier(.22, 1, .36, 1);
}
.itms-assistant-greeting-orb {
animation: itmsAssistantGreetingFloat 2.8s ease-in-out infinite;
}
/* =========================================================
WELCOME ORB
========================================================= */
.itms-assistant-orb {
animation: itmsAssistantWelcomeFloat 3s ease-in-out infinite;
}
.itms-assistant-orb-glow {
animation: itmsAssistantGlow 2.5s ease-in-out infinite;
}
.itms-assistant-orb-wave {
animation: itmsAssistantWave 2.8s ease-out infinite;
}
.itms-assistant-orb-wave:nth-child(2) {
animation-delay: .9s;
}
.itms-assistant-orb-wave:nth-child(3) {
animation-delay: 1.8s;
}
/* =========================================================
KEYFRAMES
========================================================= */
@keyframes itmsAssistantFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-2px);
}
}
@keyframes itmsAssistantPulse {
0% {
transform: scale(.85);
opacity: .65;
}
70% {
transform: scale(1.35);
opacity: 0;
}
100% {
transform: scale(1.35);
opacity: 0;
}
}
@keyframes itmsAssistantBlink {
0%, 45%, 47%, 100% {
transform: scaleY(1);
}
46% {
transform: scaleY(.15);
}
}
@keyframes itmsAssistantPanelOpen {
from {
opacity: 0;
transform: translateY(12px) scale(.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes itmsAssistantGreetingIn {
from {
opacity: 0;
transform: translateY(-8px) scale(.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes itmsAssistantGreetingFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
@keyframes itmsAssistantWelcomeFloat {
0%, 100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-5px) scale(1.015);
}
}
@keyframes itmsAssistantGlow {
0%, 100% {
opacity: .55;
transform: scale(.95);
}
50% {
opacity: .9;
transform: scale(1.08);
}
}
@keyframes itmsAssistantWave {
0% {
transform: scale(.75);
opacity: .45;
}
70% {
transform: scale(1.35);
opacity: 0;
}
100% {
transform: scale(1.35);
opacity: 0;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.itms-assistant-trigger-orb,
.itms-assistant-trigger-orb::after,
.itms-assistant-trigger .itms-assistant-robot-eyes span,
.itms-assistant-panel,
.itms-assistant-greeting,
.itms-assistant-greeting-orb,
.itms-assistant-orb,
.itms-assistant-orb-glow,
.itms-assistant-orb-wave {
animation: none !important;
transition: none !important;
}
}
.logout-form {
margin: 0;
padding: 0;
width: 100%;
}
.logout-form .logout {
appearance: none;
-webkit-appearance: none;
width: 100%;
border: 0;
outline: 0;
background: none;
box-shadow: none;
font: inherit;
color: inherit;
text-align: inherit;
cursor: pointer;
display: flex;
align-items: center;
}
.logout-form .logout:hover,
.logout-form .logout:focus,
.logout-form .logout:active {
background: inherit;
color: inherit;
outline: none;
box-shadow: none;
}