/* css/style.css */
body {
    background-color: #e9ecef; /* Lighter grey background */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh; /* Ensure body takes full viewport height */
    display: flex;
    flex-direction: column;
}

/* Main content wrapper to push footer down */
body > .d-flex {
    flex-grow: 1;
}

/* Header styling */
header {
    background-color: #343a40 !important; /* Darker header */
    color: white;
    z-index: 1030; /* Ensure header is above offcanvas */
    border-bottom: 3px solid #007bff; /* Accent line */
}

/* Sidebar styling for larger screens (md and up) */
aside.sidebar-fixed {
    width: 280px; /* Slightly wider sidebar for better readability */
    flex-shrink: 0; /* Prevent shrinking */
    position: sticky; /* Make sidebar sticky */
    top: 0; /* Align to top of viewport */
    height: calc(100vh - 56px); /* Adjust height to fit viewport minus header height */
    overflow-y: auto; /* Enable scrolling for long content */
    padding-top: 1rem !important; /* Ensure padding for sticky header */
    background-color: #f8f9fa; /* Lighter sidebar background */
    border-right: 1px solid #dee2e6; /* Subtle border */
}

/* Adjust main content area to fill remaining space */
main {
    flex-grow: 1;
    padding-left: 1.5rem; /* Initial padding */
    padding-right: 1.5rem;
    padding-top: 1.5rem;
}

/* Tool Container Styling */
#tool-container {
    background-color: white;
    padding: 2.5rem; /* Slightly more padding */
    border-radius: 0.75rem; /* More rounded corners */
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1); /* Stronger shadow */
    min-height: calc(100vh - 180px); /* Adjust min-height to push footer down */
}

/* Sidebar Navigation Links */
#sidebar-nav .nav-link,
#offcanvas-sidebar-nav .nav-link {
    color: #495057; /* Darker text for links */
    padding: 0.85rem 1.2rem; /* Slightly more padding */
    border-radius: 0.35rem; /* More rounded */
    margin-bottom: 0.3rem; /* More spacing */
    display: flex; /* Use flex for icon alignment */
    align-items: center;
    transition: all 0.2s ease-in-out; /* Smooth transitions */
}

#sidebar-nav .nav-link i,
#offcanvas-sidebar-nav .nav-link i {
    margin-right: 0.6rem;
    color: #6c757d; /* Icon color */
}

#sidebar-nav .nav-link:hover,
#offcanvas-sidebar-nav .nav-link:hover {
    background-color: #e2e6ea; /* Lighter hover background */
    color: #0056b3; /* Darker blue on hover */
}

#sidebar-nav .nav-link.active,
#offcanvas-sidebar-nav .nav-link.active {
    background-color: #007bff; /* Primary blue for active */
    color: white;
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2); /* Subtle shadow for active */
}

#sidebar-nav .nav-link.active i,
#offcanvas-sidebar-nav .nav-link.active i {
    color: white; /* White icon for active */
}


/* Sub-menu styling */
#sidebar-nav ul,
#offcanvas-sidebar-nav ul {
    list-style: none; /* Remove default list bullets */
    padding-left: 0;
}

#sidebar-nav ul .nav-item .nav-link,
#offcanvas-sidebar-nav ul .nav-item .nav-link {
    padding-left: 3rem; /* Indent sub-items */
    font-size: 0.9em; /* Slightly smaller font for sub-items */
    border-left: 3px solid transparent; /* Visual cue for sub-items */
}

#sidebar-nav ul .nav-item .nav-link.active,
#offcanvas-sidebar-nav ul .nav-item .nav-link.active {
    background-color: #e9f2ff; /* Lighter background for active sub-item */
    color: #007bff;
    border-left-color: #007bff; /* Blue border for active sub-item */
}
#sidebar-nav ul .nav-item .nav-link.active i,
#offcanvas-sidebar-nav ul .nav-item .nav-link.active i {
    color: #007bff;
}


/* Tool Section Specifics */
.tool-section {
    margin-bottom: 2.5rem;
}

.tool-section h3 {
    margin-bottom: 1.8rem;
    color: #007bff; /* Primary blue for tool titles */
    font-weight: 600;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 767.98px) { /* Below md breakpoint */
    header .h3 {
        font-size: 1.35rem; /* Smaller header title on mobile */
        text-align: left !important; /* Align title left on mobile */
    }

    aside.sidebar-fixed {
        display: none; /* Hide fixed sidebar on mobile */
    }

    main {
        padding: 1rem; /* Adjust padding for mobile */
    }

    #tool-container {
        padding: 1.5rem; /* Smaller padding inside tool container on mobile */
        min-height: calc(100vh - 140px); /* Adjust min-height for mobile */
    }

    .offcanvas-body #offcanvas-sidebar-nav ul {
        padding-left: 0; /* Reset padding for offcanvas sub-menus */
    }
    .offcanvas-body #offcanvas-sidebar-nav ul .nav-item .nav-link {
        padding-left: 2.5rem; /* Indent sub-items in offcanvas */
    }
}

/* Specific styles for individual tools */
/* For Coin Flipper */
@keyframes flip {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}
.flipping {
    animation: flip 0.8s ease-out forwards;
}

/* For Stopwatch display */
.stopwatch-display {
    font-family: 'monospace', sans-serif; /* For better number alignment */
    letter-spacing: -2px; /* Adjust as needed */
}

/* For Metronome beat display animation */
#metronomeBeatDisplay {
    background-color: #e9ecef; /* Default background */
    transition: background-color 0.1s ease-in-out; /* Smooth transition */
}

#metronomeBeatDisplay.active-beat {
    background-color: #007bff; /* Highlight color when beat plays */
}

/* General button styling adjustments for a slightly softer look */
.btn {
    border-radius: 0.35rem;
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.btn-outline-primary {
    color: #007bff;
    border-color: #007bff;
}
.btn-outline-primary:hover {
    background-color: #007bff;
    color: white;
}

/* Card styling */
.card {
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}

/* Alert styling */
.alert {
    border-radius: 0.35rem;
}