/* ============================================
   responsive.css — Media Queries Only
   Auth Page (Login / Register)
   ============================================ */

/* -------------------------------------------
   Tablet — 768px to 1024px
------------------------------------------- */
@media (max-width: 1024px) {

    .auth-container.container-login {
        flex-direction: row;
    }

    .auth-banner {
        flex: 1;
        padding: 40px;
    }

    .banner-content h1 {
        font-size: 36px;
    }

    .auth-form-side {
        flex: 1;
        padding: 30px;
    }

    .auth-box {
        max-width: 100%;
    }

    .auth-box h2 {
        font-size: 26px;
        margin-bottom: 20px;
    }
}

/* -------------------------------------------
   Mobile — max 768px
   Banner chhota, form full width
------------------------------------------- */
@media (max-width: 768px) {

    .auth-container.container-login {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow: auto;
          padding: 0px 20px;
    }

    .footer-grid{
        flex-direction: column;
  align-items: flex-start;
  text-align: start;
  padding: 0px 20px;
    }
    .auth-banner {
        flex: none;
        height: 220px;
        padding: 30px 24px;
        background-position: center top;
    }

    .auth-logo {
        width: 100px;
        margin-bottom: 10px;
    }

    .banner-content h1 {
        font-size: 26px;
        margin-bottom: 0;
        line-height: 1.3;
    }

    .auth-form-side {
        flex: none;
        width: 100%;
        padding: 30px 20px 40px;
        align-items: flex-start;
    }

    .auth-box {
        width: 100%;
        max-width: 100%;
    }

    .auth-box h2 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .auth-box input {
        padding: 13px;
        font-size: 15px;
        margin-bottom: 12px;
    }

    .flex-row {
        flex-direction: column;
        gap: 0;
    }

    .btn-auth {
        padding: 14px;
        font-size: 15px;
    }

    .toggle-text {
        font-size: 14px;
        margin-top: 16px;
    }

    .auth-alert {
        font-size: 13px;
        padding: 12px;
    }

    .alert {
        font-size: 13px;
        padding: 12px;
    }

    .toggle-password {
        right: 12px;
    }
}

/* -------------------------------------------
   Small Mobile — max 480px
------------------------------------------- */
@media (max-width: 480px) {

    .auth-banner {
        height: 180px;
        padding: 20px 16px;
    }

    .auth-logo {
        width: 80px;
    }

    .banner-content h1 {
        font-size: 22px;
    }

    .auth-form-side {
        padding: 24px 16px 36px;
    }

    .auth-box h2 {
        font-size: 20px;
    }

    .auth-box input {
        padding: 12px;
        font-size: 14px;
    }

    .btn-auth {
        padding: 13px;
        font-size: 14px;
    }
}

/* -------------------------------------------
   Header & Hamburger — Responsive
------------------------------------------- */
@media (max-width: 768px) {

    .site-header {
        padding: 12px 16px;
    }

    .header-flex {
        position: relative;
        flex-wrap: wrap;
        align-items: center;
    }

    /* Logo left, hamburger right */
    .logo-area {
        flex: 1;
    }

    /* Hamburger visible on mobile */
    .hamburger-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 18px;
        cursor: pointer;
        z-index: 999;
    }

    .hamburger-menu span {
        display: block;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Hamburger X animation */
    .hamburger-menu.open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger-menu.open span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Nav hidden by default */
    .main-navigation {
        display: none;
        width: 100%;
        margin-top: 12px;
        background: #1a1625;
        border-radius: 10px;
        padding: 10px 0;
    }

    .main-navigation.open {
        display: block;
    }

    .nav-list {
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-list li a {
        display: block;
        padding: 12px 20px;
        color: #fff;
        text-decoration: none;
        font-size: 15px;
        border-radius: 8px;
        transition: background 0.2s;
    }

    .nav-list li a:hover {
        background: rgba(255,255,255,0.07);
    }

    /* Login/Logout button */
    .header-actions {
        display: none;
        width: 100%;
        margin-top: 8px;
        padding: 0 10px 10px;
    }

    .header-actions a {
        display: block;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    /* Desktop par hamburger hidden */
    @media (min-width: 769px) {
        .hamburger-menu {
            display: none;
        }
    }
}
/* -------------------------------------------
   Footer — Responsive
------------------------------------------- */
@media (max-width: 1024px) {

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .footer-about {
        grid-column: 1 / -1; /* full width upar */
    }
}

@media (max-width: 768px) {

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 30px 26px;
    }

    .footer-about,
    .footer-partners,
    .footer-status {
        width: 100%;
    }

    .footer-about p {
        font-size: 14px;
        line-height: 1.6;
    }

    .footer-partners h4,
    .footer-status h4 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .partners-list {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
    }

    .partner-item img {
        max-height: 40px;
        width: auto;
    }

    .status-item {
        font-size: 13px;
        margin-bottom: 10px;
        line-height: 1.5;
    }

    .quote-item span {
        font-size: 13px;
        font-style: italic;
        line-height: 1.6;
    }

    .footer-bottom {
        padding: 16px;
        text-align: center;
    }

    .footer-bottom p {
        font-size: 13px;
    }
}

@media (max-width: 480px) {

    .footer-grid {
        /* padding: 24px 12px; */
        gap: 20px;
    }

    .footer-logo-text {
        font-size: 20px;
    }

    .partner-item img {
        max-height: 32px;
    }

    .footer-bottom p {
        font-size: 12px;
    }
}

/* -------------------------------------------
   Dashboard — Responsive
------------------------------------------- */
@media (max-width: 1024px) {

    .dash-wrapper {
        flex-direction: row;
        gap: 16px;
    }

    .dash-sidebar {
        width: 220px;
        min-width: 220px;
    }
}

@media (max-width: 768px) {

    .dash-wrapper {
        flex-direction: column;
        height: auto;
          padding: 0px 5px;
        min-height: 100vh;
    }
    .logo-area img {
  width: auto;
  height: 39px;
}

    /* Sidebar top par, horizontal scroll */
    .dash-sidebar {
        width: 100%;
        min-width: unset;
        border-radius: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sidebar-user {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        width: 100%;
        margin-bottom: 12px;
    }

    /* .profile-upload-wrap {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
    } */
     .profile-upload-wrap {
  margin: 0;
}

    .profile-upload-wrap img {
        width: 60px;
        height: 60px;
    }

    .sidebar-user h3 {
        font-size: 16px;
        margin: 0 0 4px;
    }

    .sidebar-user .badge {
        font-size: 12px;
        padding: 3px 10px;
    }

    /* Past logs horizontal scroll on mobile */
    .past-logs {
        width: 100%;
    }

    .past-logs h4 {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .past-logs ul {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
        list-style: none;
        margin: 0;
        padding-left: 0;
        scrollbar-width: none;
    }

    .past-logs ul::-webkit-scrollbar {
        display: none;
    }

    .past-logs ul li {
        flex-shrink: 0;
    }

    .past-logs ul li a {
        display: block;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        white-space: nowrap;
    }

    .logout-link {
        display: none; /* Header mein already hai */
    }

    /* Main content */
    .dash-main {
        padding: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    .dash-main-header h2 {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .dash-main-header p {
        font-size: 13px;
    }

    /* Task rows */
    .task-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .task-row input {
        font-size: 14px;
        padding: 10px 12px;
    }

    .form-actions {
        flex-direction: column;
        gap: 10px;
        margin-top: 16px;
    }

    .form-actions .btn-ghost,
    .form-actions .btn-submit {
        width: 100%;
        text-align: center;
        padding: 12px;
        font-size: 14px;
    }

    /* Missing days wizard */
    .wizard-modal {
        width: 90%;
        max-width: 380px;
        padding: 24px 20px;
    }

    .wizard-header h3 {
        font-size: 16px;
    }

    .wizard-body h2 {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .wizard-options {
        flex-direction: column;
        gap: 10px;
    }

    .option-card {
        width: 100%;
    }

    #wizard-next-btn {
        width: 100%;
        padding: 12px;
        margin-top: 16px;
    }
}

@media (max-width: 480px) {

    .dash-main {
        padding: 12px;
    }

    .dash-main-header h2 {
        font-size: 18px;
    }

    .task-row input {
        font-size: 13px;
        padding: 9px 10px;
    }

    .wizard-modal {
        padding: 20px 16px;
    }

    .wizard-body h2 {
        font-size: 16px;
    }
}

/* Desktop par mobile-actions hidden */
.header-actions-mobile {
    display: none;
}

@media (max-width: 768px) {

    /* Desktop wala hide */
    .header-actions.view-more-btn {
        display: none !important;
    }

    /* Mobile wala nav ke andar show */
    .header-actions-mobile {
        display: block;
        padding: 8px 10px;
        border-top: 1px solid rgba(255,255,255,0.08);
        margin-top: 6px;
    }

    .header-actions-mobile a {
        display: block;
        text-align: center;
        padding: 12px 20px;
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
        font-size: 15px;
    }

    .header-actions-mobile a:hover {
        background: rgba(255,255,255,0.07);
    }
}