/* ============================================================
   RockitzWeb Responsive Styles
   Breakpoints:
     Phone:   max-width 576px   (Bootstrap xs)
     Tablet:  577px – 991px     (Bootstrap sm/md)
     Desktop: 992px+            (existing behaviour preserved)
   ============================================================ */

/* ----------------------------------------------------------
   LOGIN BUTTON – all sizes (no-wrap, scale down on small screens)
   ---------------------------------------------------------- */
.login-btn {
    white-space: nowrap;
}

.remember-label {
    white-space: nowrap;
}

@media (max-width: 576px) {
    .login-btn {
        font-size: 0.9rem;
        padding: 0.4rem 0.75rem;
    }
}

/* ----------------------------------------------------------
   SIDEBAR COLLAPSE  (< 992px)
   Collapsed to 60px icon strip, hover or pin to expand.
   Applies at ALL widths below desktop, replacing the old
   phone hamburger overlay entirely.
   ---------------------------------------------------------- */

/* Pin checkbox: hidden on desktop (≥992px) */
.sidebar-pin {
    display: none;
}

@media (max-width: 991px) {

    /* Override old phone hamburger: hide it, always show nav */
    .navbar-toggler {
        display: none !important;
    }

    .nav-scrollable {
        display: block !important;
        height: calc(100vh - 3.5rem - 2rem) !important; /* top-row + pin toggle */
        overflow-y: auto !important;
    }

    /* Sidebar collapses to narrow icon strip, fixed position */
    .sidebar {
        width: 60px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        z-index: 1000 !important;
        overflow: hidden !important;
        transition: width 0.2s ease !important;
    }

    /* Hover temporarily expands the sidebar */
    .sidebar:hover {
        width: 250px !important;
    }

    /* Pin checked keeps sidebar permanently expanded */
    .sidebar:has(.sidebar-pin:checked) {
        width: 250px !important;
    }

    /* Push main content right to clear collapsed sidebar */
    main {
        margin-left: 60px !important;
        transition: margin-left 0.2s ease;
    }

    /* When pinned, push content to clear full sidebar */
    .page:has(.sidebar-pin:checked) main {
        margin-left: 250px !important;
    }

    /* --- Pin toggle button styling --- */
    .sidebar-pin {
        display: block !important;
        appearance: none;
        cursor: pointer;
        width: 100%;
        height: 2rem;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin: 0;
        padding: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgba(255,255,255,0.7)' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center/1rem transparent;
    }

    .sidebar-pin:checked {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
        background-color: rgba(255, 255, 255, 0.15);
    }

    .sidebar-pin:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* ----------------------------------------------------------
   PHONE  (≤ 576px)
   ---------------------------------------------------------- */
@media (max-width: 576px) {

    /* --- Global / Layout --- */
    .content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .header-banner {
        height: 70px !important;
    }

    .user-badge {
        font-size: 0.85rem !important;
    }

    /* --- Headings: shrink slightly on phones --- */
    h1 { font-size: 1.4rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }
    h4 { font-size: 1rem !important; }
    h5 { font-size: 0.9rem !important; }

    /* --- Touch targets: ensure minimum 44px tap area --- */
    .btn-sm {
        min-height: 38px;
        min-width: 38px;
        padding: 0.35rem 0.5rem;
    }

    /* --- Tables: tighter on phones --- */
    .table {
        font-size: 0.85rem;
    }

    .table th,
    .table td {
        padding: 0.3rem 0.4rem;
    }

    /* --- Cards: reduce internal padding --- */
    .card-body {
        padding: 0.75rem;
    }

    .card-header {
        padding: 0.5rem 0.75rem;
    }

    /* --- Reorder toolbar: wrap buttons, icon-only labels --- */
    .reorder-toolbar {
        flex-wrap: wrap !important;
    }

    .reorder-toolbar .btn-text {
        display: none !important;
    }

    .reorder-toolbar .reorder-hint {
        display: none !important;
    }

    /* --- Voting page: hide inline rank badges in collapsed headers --- */
    .rank-badges-inline {
        display: none !important;
    }

    /* --- Voting page: voter completion stats --- */
    .voter-stat-item {
        min-width: 110px !important;
    }

    .voter-stats-grid {
        gap: 2px 10px !important;
    }

    /* --- Voting page: disable sticky summary on phones --- */
    .voting-summary-card {
        position: static !important;
        top: auto !important;
    }

    /* --- Calendar: reduce scheduler height --- */
    .scheduler-container {
        height: 400px !important;
    }

    /* --- Calendar event detail: stack header items --- */
    .event-detail-header {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .event-detail-actions {
        width: 100%;
        justify-content: flex-start !important;
    }

    /* --- Admin search toolbar: stack search + button --- */
    .admin-toolbar {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .admin-toolbar .input-group {
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .admin-toolbar .btn-primary {
        margin-left: 0 !important;
    }

    /* --- Admin: voting event voter badges --- */
    .voter-badge-item {
        min-width: 100px !important;
    }
}

/* ----------------------------------------------------------
   TABLET  (577px – 991px)
   ---------------------------------------------------------- */
@media (min-width: 577px) and (max-width: 991px) {

    /* --- Calendar: medium height --- */
    .scheduler-container {
        height: 520px !important;
    }

    /* --- Admin search toolbar: allow wrapping if tight --- */
    .admin-toolbar .input-group {
        max-width: 300px !important;
    }
}

/* ----------------------------------------------------------
   DESKTOP  (≥ 992px) – just the scheduler default
   ---------------------------------------------------------- */
@media (min-width: 992px) {

    .scheduler-container {
        height: 650px !important;
    }
}