/* === CSS Variables === */
:root {
    --theme-color: #3b82f6;
    /* Light Blue */
    --primary-bg-color: #f8f8f8;
    /* Lightest Background */
    --primary-color: #3b82f6;
    --secondary-color: #4c4f9d;
    --hover-color: #2563eb;
    --light-bg: #f8fafc;
    --light-text: #1e3a8a;
}

/* === Dark Mode Overrides === */
.dark-mode {
    --theme-color: #1e3a8a;
    /* Deep Blue */
    --primary-bg-color: #1e293b;
    --primary-color: #60a5fa;
    --secondary-color: #93c5fd;
    --hover-color: #3b82f6;
    --light-bg: #1e293b;
    --light-text: #e0f2fe;
}

html{
  zoom:0.9;
}
/* === General Body === */
body,
main,
.thetop,
.main_header{
    background-color: var(--light-bg) !important;
    color: var(--light-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}
#side-bar svg:not(:root) {
    /* overflow: hidden; */
    color: #404699;
    /* font-size: 15px;
    line-height: 10px;
    margin-right: 10px;
    width: 20px; */
}
.btn,
#side-bar > div,
#side-bar > a {
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    color: #303030;
    /* padding: 8px 10px; */
    color: #3b82f6;
    border: 1px dashed #bebebe8c;
    border-radius:4px;
}
button{
    color: #ffffff;
    background: #3b82f6;
}
#side-bar > div:hover,
#side-bar > a:hover,
#side-bar > div:focus,
#side-bar > a:focus {
--tw-bg-opacity: 1;
    background-color: rgb(238 242 246 / var(--tw-bg-opacity));
}
.logo_sidebar{
  background-color: rgb(255 255 255);
}

.box , .card{
  background-color: #fff;
    border: 1px solid #e4e6fc;
    color: var(--light-text);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border: 1px dashed #bebebe8c;
    border-radius: 4px;
}
.tw-bg-red-800,
.tw-bg-primary-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(231 231 231);
    color: black;
}
.tw-bg-red-800:hover,
.tw-bg-primary-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(64 70 153);
  color: white !important;
}
.tw-bg-red-800:hover svg,
.tw-bg-primary-800:hover svg {
  color:white;
}

.zatca_reporting .nav-tabs>li>a {
    font-size: 14px;
    font-weight: 600;
}
.nav-tabs-custom>.nav-tabs>li{
      font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    color: #303030;
    /* padding: 8px 10px; */
    color: #3b82f6;
    border: 1px dashed #bebebe8c;
    border-radius: 4px;
}
.tw-dw-btn {
  height:1.5rem;
  min-height: 1.2rem;
  border-radius: 4px;
  border: 1px dashed #bebebe8c;
}
.btn-primary {
    background: #1572e8;
    color: #fff;
}
.btn-info {
    background: #11cdef;
    color: #fff;
}
.btn-warning {
    background: #f59e0b;
    color: #fff;
}
.btn-danger {
    background: #ef4444;
    color: #fff;
}
.btn-success {
    background: #22c55d;
    color: #fff;
}
.btn-outline-primary {
    background: transparent;
    color: #1572e8;
    border: 1px solid #1572e8;
}
.btn-outline-info {
    background: transparent;
    color: #11cdef;
    border: 1px solid #11cdef;
}
.btn-outline-warning {
    background: transparent;
    color: #f59e0b;
    border: 1px solid #f59e0b;
}
.btn-outline-danger {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
}
.btn-outline-success {
    background: transparent;
    color: #22c55d;
    border: 1px solid #22c55d;
}
.btn-outline-primary:hover {
    background: transparent;
    color: #1572e8;
    border: 1px solid #1572e8;
}
.btn-outline-info:hover {
    background: transparent;
    color: #11cdef;
    border: 1px solid #11cdef;
}
.btn-outline-warning:hover {
    background: transparent;
    color: #f59e0b;
    border: 1px solid #f59e0b;
}
.btn-outline-danger:hover {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
}
.btn-outline-success:hover {
    background: transparent;
    color: #22c55d;
    border: 1px solid #22c55d;
}
.btn-outline-primary:hover {
    background: transparent;
    color: #1572e8;
    border: 1px solid #1572e8;
}
.btn-outline-info:hover {
    background: transparent;
    color: #11cdef;
    border: 1px solid #11cdef;
}
.btn-outline-warning:hover {
    background: transparent;
    color: #f59e0b;
    border: 1px solid #f59e0b;
}
.btn-outline-danger:hover {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
}
.btn-outline-success:hover {
    background: transparent;
    color: #22c55d;
    border: 1px solid #22c55d;
}
@media (hover: hover) {
    .tw-dw-btn-outline.tw-dw-btn-primary:hover {
        --tw-text-opacity: 1;
        color: var(--fallback-pc, oklch(1 0 0));
    }
}
@media (hover: hover) {
    .tw-dw-btn-outline.tw-dw-btn-error:hover {
        --tw-text-opacity: 1;
        color: var(--fallback-erc, oklch(1 0 0));
    }
}
::-webkit-scrollbar {
    background-color: var(--light-bg);
    width:7px
}
::-webkit-scrollbar-thumb {
    background-color: #3b82f6;
    border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #3b82f6;
}
/* scroolbar height */
::-webkit-scrollbar {
    height: 7px;
}
::-webkit-scrollbar-thumb {
    background-color: #3b82f6;
    border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #3b82f6;
}