@import url("variable.css");
@import url("navbar.css");
@import url("sidebar.css");
@import url("dashboard.css");
@import url("status-card.css");
@import url("data-trends.css");
@import url("notification.css");
@import url("chart.css");
@import url("login.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body {
   font-family: "Poppins", sans-serif;
   background-color: var(--color-bg-secondary);
}

/* Prevent flash of unstyled content */
#navbar:empty,
#sidebar:empty {
   min-height: 1px;
}

.section-header {
   font-size: 1.75rem;
   font-weight: 600;
   color: var(--color-text);
}

/* Card Styles */
.card {
   background-color: var(--color-bg);
   border: 1px solid var(--color-border);
   padding: 16px;
   border-radius: 8px;
}

.card-title-small {
   font-size: 16px;
   font-weight: 500;
   color: var(--color-muted);
   margin-bottom: 0.15rem;
}

.card-subtitle {
   font-size: 16px;
   font-weight: 500;
   color: var(--color-secondary-text);
   margin-bottom: 0.15rem;
}

.metric-value {
   font-size: 28px;
   font-weight: 600;
   line-height: 1;
   color: var(--color-text);
}

.metric-unit {
   font-size: 1rem;
   margin-left: 0.15rem;
   color: var(--color-secondary-text);
}

.metric-sub {
   font-size: 0.9rem;
   color: var(--color-muted);
}

.metric-change {
   color: var(--color-success);
   font-weight: 550;
}

/* Filter Button Styles */
.filter-btn {
   transition: all 0.3s ease;
}

.filter-btn:hover {
   opacity: 0.8;
}

.filter-btn:focus {
   box-shadow: none;
}

.ap-btn {
   background-color: var(--color-primary);
   color: var(--color-bg);
   border: 1px solid var(--color-primary);
   transition: all 0.3s ease;
}

.ap-btn:hover {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--color-bg);
   opacity: 0.85;
   transform: translateY(-2px);
}

.ap-btn:active {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--color-bg);
   opacity: 0.9;
   transform: translateY(0);
}

.ap-btn:focus {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--color-bg);
   box-shadow: 0 0 0 0.2rem var(--color-bg-primary-transparent);
}

/* Primary Button Styles */
.btn-primary {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   transition: all 0.3s ease;
}

.btn-primary:hover {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   opacity: 0.85;
   transform: translateY(-2px);
}

.btn-primary:active {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   opacity: 0.9;
   transform: translateY(0);
}

.btn-primary:focus {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   box-shadow: 0 0 0 0.2rem var(--color-bg-primary-transparent);
}

/* Global Form Control Styles */
.form-control,
.form-select {
   background-color: var(--color-bg);
   border-color: var(--color-border);
   color: var(--color-text);
}

.form-control:focus,
.form-select:focus {
   background-color: var(--color-bg);
   border-color: var(--color-primary);
   box-shadow: 0 0 0 0.2rem var(--color-bg-primary-transparent);
   color: var(--color-text);
}

.input-group-text {
   background-color: var(--color-bg);
   border-color: var(--color-border);
   color: var(--color-text);
}

/* Table Styles */
.table {
   background-color: var(--color-bg);
   color: var(--color-text);
   --bs-table-bg: var(--color-bg);
   --bs-table-hover-bg: var(--color-bg-secondary);
   --bs-table-striped-bg: var(--color-bg-secondary);
}

.table thead {
   background-color: var(--color-bg-secondary);
}

.table tbody tr {
   background-color: var(--color-bg);
}

.table-hover tbody tr:hover {
   background-color: var(--color-bg-secondary);
   color: var(--color-text);
}

/* Modal Styles */
.modal-content {
   background-color: var(--color-bg);
   border-color: var(--color-border);
}

.modal-header {
   border-bottom-color: var(--color-border);
}

.modal-footer {
   border-top-color: var(--color-border);
}