/* Custom styles can go here if needed to override Tabler defaults */

/* --- Login/App Display Control --- */
/* Default state: Show login, hide app */
#simple-login-screen {
    display: flex; /* Or block, depending on desired layout */
}
#main-app {
    display: none;
}

/* Logged-in state: Hide login, show app */
body.logged-in #simple-login-screen {
    display: none !important;
}
body.logged-in #main-app {
    display: block !important;
}
/* --- End Login/App Display Control --- */

/* Ensure KPI card value stands out */
.card-sm .card-body .font-weight-medium {
    font-size: 1.25rem; /* Make the number slightly larger */
    font-weight: 600 !important; /* Make it bold */
}

.card-sm .card-body .text-muted {
    font-size: 0.875rem; /* Smaller label text */
}

.card-sm .avatar {
    width: 2.5rem; /* Adjust icon size */
    height: 2.5rem;
    font-size: 1.25rem; /* Adjust icon content size */
}

.card-sm .card-body .col-auto {
    padding-right: 1rem; /* Space between icon and text */
}

/* Ensure SVG icons within KPI avatars scale properly */
.card-sm span.avatar svg.icon {
    width: 60%; /* Adjust percentage as needed */
    height: 60%;
}

/* Style for the page logo in the header (If you add one later) */
.page-logo {
  height: 24px; /* Set height via CSS */
  width: auto; /* Maintain aspect ratio */
  vertical-align: middle; /* Adjust vertical alignment if needed */
}

/* Add padding to the top of the main page container */
.page {
    padding-top: 1.5rem; /* Adjust value as needed */
}

/* Style the favicon on the login screen */
#login-favicon {
    max-height: 40px; /* Control size via max-height */
    width: auto; /* Maintain aspect ratio */
}

/* Form help icon styling */
.form-help {
    cursor: help;
    margin-left: 4px;
    opacity: 0.6;
}