/* ==========================================================================
   Custom Stylesheet
   ==========================================================================
   Author: Rikard Stein
   Description: This file contains custom CSS rules that are not covered by
                the Tailwind CSS framework. It is organized by component.
   ========================================================================== */


/*
 * iOS-style Toggle Switch
 * --------------------------------------------------------------------------
 * Used for the dark mode theme toggler.
 * Found in: admin_header.php, staff_dashboard.php
 */

.toggle-checkbox:checked {
    right: 0;
    border-color: #68D391;
}

.toggle-checkbox:checked + .toggle-label {
    background-color: #68D391;
}

.toggle-checkbox:checked + .toggle-label:after {
    transform: translateX(100%);
    border-color: white;
}

.toggle-label {
    width: 3rem;
    height: 1.5rem;
    background-color: #ccc;
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}

.toggle-label:after {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}