header,
main,
footer {
    padding-left: 300px;
}

@media only screen and (max-width : 992px) {

    header,
    main,
    footer {
        padding-left: 0;
    }
}

.app-card {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Add transition for smooth hover effect */
    transition: background-color 0.3s ease;
}

.app-card-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.app-name {
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[theme="light"] .app-name {
    color: #333;
}

[theme="dark"] .app-name {
    color: #f5f5f5; /* Brighter white for better contrast on dark cards */
}

.card-title {
    font-size: 14px;
    font-weight: 500;
    margin: 5px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


[nav-section="addEmployee"] h5 {
    margin-top: 50px;
}

[nav-section="addEmployee"] .row {
    margin-bottom: 10px;
}

[nav-section] {
    display: none;
}

#sideNavElements {
    display: none;
}

[theme="light"] .material-icons {
    color: rgba(0, 0, 0, 0.6);
}

[theme="dark"] .material-icons {
    color: rgba(255, 255, 255, 0.8);
}

[theme="light"] .themed-logo {
    content: url('/img/tc-logo.png');
}

[theme="dark"] .themed-logo {
    content: url('/img/tc-logo-reversed.png');
}

[nav-section="ourApps"] {
    margin-left: 20px;
    margin-right: 20px;
}

#appsContainer {
    margin-bottom:20px;
}

/* Splash Screen Styles */
.splash-container {
    position: fixed; /* Added from preloader-overlay */
    top: 0; /* Added */
    left: 0; /* Added */
    width: 100%; /* Added */
    height: 100%; /* Added */
    z-index: 9999; /* Added */
    opacity: 1; /* Added */
    visibility: visible; /* Added */
    transition: opacity 0.6s ease, visibility 0.6s ease; /* Added */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Full viewport height */
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.splash-container.fade-out { /* Added for the splash container itself */
    opacity: 0;
    visibility: hidden;
}

.splash-content {
    max-width: 500px; /* Max width for content */
    width: 100%;
}

.splash-content .themed-logo {
    max-width: 280px; /* Increased size */
    margin-bottom: 30px;
}

.splash-message {
    font-size: 1.8rem; /* Larger text for the main message */
    margin-bottom: 15px;
    font-weight: 300; /* Lighter font weight for modern feel */
}

[theme="light"] .splash-message {
    color: #333;
}

[theme="dark"] .splash-message {
    color: #eee;
}

.splash-subtext {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
}

[theme="light"] .splash-subtext {
    color: #666;
}

[theme="dark"] .splash-subtext {
    color: #ccc;
}

/* Ensure the login section is visible by default if it's the splash */
[nav-section="login"].splash-container {
    display: flex; /* Override the general [nav-section] display:none - removed !important */
}

/* Dark Mode Enhancements */
[theme="dark"] body {
    background-color: #212121; /* Darker base background for the page */
    color: #e0e0e0; /* Default text color for dark mode */
}

[theme="dark"] .card,
[theme="dark"] .app-card {
    background-color: #333333; /* Slightly lighter background for cards */
    border: 1px solid #444444; /* Subtle border for cards */
}

/* Hover effect for app cards in dark mode */
[theme="dark"] .card:hover,
[theme="dark"] .app-card:hover {
    background-color: #4a4a4a; /* Lighten card on hover */
    border-color: #5a5a5a;
}

/* Ensure good contrast for text within cards, if not covered by .app-name */
[theme="dark"] .card .card-content p,
[theme="dark"] .card .card-title {
    color: #f5f5f5;
}

/* Dark mode for Materialize Tabs */
[theme="dark"] .tabs {
    background-color: #212121; /* Match body or a slightly different shade */
}

[theme="dark"] .tabs .tab a {
    color: rgba(255, 255, 255, 0.7); /* Standard tab text color */
}

[theme="dark"] .tabs .tab a:hover {
    color: #ffffff; /* Tab text color on hover */
}

[theme="dark"] .tabs .tab a.active {
    color: #ffffff; /* Active tab text color */
    /* background-color: #333333; Optional: active tab background */
}

[theme="dark"] .tabs .indicator {
    background-color: #ffffff; /* Indicator color for active tab */
}

/* Adjust sidenav for dark mode if needed */
[theme="dark"] .sidenav {
    background-color: #2c2c2c; /* Sidenav background */
}

[theme="dark"] .sidenav li > a {
    color: rgba(255, 255, 255, 0.87);
}

[theme="dark"] .sidenav li > a > i.material-icons {
    color: rgba(255, 255, 255, 0.7);
}

[theme="dark"] .user-view {
    /* background-color: #383838; */ /* User view background if needed */
}
[theme="dark"] .divider {
    background-color: rgba(255, 255, 255, 0.12);
}

/* Admin Form Styling Adjustments */

/* General input field adjustments for #appForm */
#appForm .input-field {
    margin-bottom: 1.5rem; /* Add some space between rows of fields */
}

/* Prefix icon vertical alignment */
#appForm .input-field .prefix {
    top: 0.8rem; /* Adjusted based on common Materialize defaults. Fine-tune if necessary. */
                 /* This should lower the icons compared to a smaller 'top' value if they were too high. */
}

/* Ensure input text aligns with the prefix icon */
#appForm .input-field input[type="text"],
#appForm .input-field input[type="url"] {
    /* Materialize default line-height and padding should align text with a correctly positioned prefix.
       If text is misaligned, it might be due to custom line-height or font-size on inputs. */
    /* No specific change here yet, assuming prefix 'top' is the main fix needed. */
}


/* File input specific adjustments */
#appForm .file-field .btn {
    height: 3rem; /* Match standard input height */
    line-height: 3rem; /* Vertically center text/icon in button */
}

#appForm .file-field .btn i.material-icons {
    line-height: 3rem; /* Vertically center icon in button */
    margin-right: 5px; /* Space between icon and "Icon" text */
}
#appForm .file-field .btn span {
    vertical-align: middle; /* Helps align text within the button span */
}

#appForm .file-field .file-path-wrapper {
    padding-left: 10px; /* Add some padding if the text is too close to the button */
}

#appForm .file-field .file-path {
    height: 3rem; /* Match standard input height */
    line-height: 3rem; /* Attempt to vertically center placeholder text */
    /* If placeholder is still too high, padding-top might be needed, but that can affect input text */
}

/* Checkbox alignment */
#appForm .input-field label[for="appActive"] { /* Targeting the specific label for the checkbox */
    /* The structure is <label><input/><span></span></label> */
    /* The label itself might need some margin if it's too close to other elements */
    /* The image shows the checkbox itself is fine, but the label text "Is this application active?"
       is part of a span inside the label. Materialize usually handles this. */
    /* No specific change yet, assuming structure is okay. */
}