/**
 * ValuNxt CMS - Responsive Styles
 * Breakpoints: 1200 / 991.98 / 767.98 / 575.98 / 480 / 360
 */

/* ================================================================
   DESKTOP SIDEBAR COLLAPSED STATE
   ================================================================ */
body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
}

body.sidebar-collapsed .top-navbar {
    margin-left: 0;
    left: 0;
}

body.sidebar-collapsed .main-content,
body.sidebar-collapsed .main-footer {
    margin-left: 0;
}

body.sidebar-collapsed .sidebar-toggle-btn {
    left: 14px;
}

/* ================================================================
   LARGE DESKTOP  ≤ 1200px
   ================================================================ */
@media (max-width: 1200px) {
    :root {
        --sidebar-width: 240px;
    }

    .navbar-search {
        max-width: 380px;
    }

    .dashboard-hero h2 {
        font-size: 1.5rem;
    }

    .dashboard-hero p {
        font-size: 0.82rem;
    }
}

/* ================================================================
   TABLET / SMALL LAPTOP  ≤ 991.98px  (mobile breakpoint)
   ================================================================ */
@media (max-width: 991.98px) {

    /* Sidebar: hidden by default, slides in */
    .sidebar {
        transform: translateX(-100%);
        border-radius: 0;
        z-index: 1060;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    /* Layout resets */
    .top-navbar,
    .main-content,
    .main-footer {
        margin-left: 0;
        left: 0;
    }

    /* Toggle button: hamburger menu in navbar */
    .sidebar-toggle-btn {
        position: fixed;
        left: 14px;
        top: 14px;
    }

    /* Leave room for hamburger in navbar */
    .top-navbar {
        padding-left: 3.5rem;
        padding-right: 0.75rem;
    }

    /* Content */
    .main-content .content-wrapper {
        padding: 1.25rem;
    }

    /* Dashboard hero */
    .dashboard-hero {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .dashboard-hero h2 {
        font-size: 1.35rem;
    }

    .dashboard-hero p {
        font-size: 0.8rem;
    }

    .dashboard-hero .hero-badge {
        font-size: 0.6rem;
        padding: 0.3rem 0.75rem;
    }

    /* Navbar search hidden on tablet */
    .navbar-search {
        display: none !important;
    }

    /* User Management - Hero */
    .hero-actions {
        position: static;
        margin-top: 0;
    }

    .dashboard-hero {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        justify-content: space-between;
        flex-direction: row-reverse;
    }

    .dashboard-hero .hero-badge {
        order: 0;
    }

    .dashboard-hero .hero-actions {
        order: 0;
        margin-left: 0;
    }

    .dashboard-hero h2 {
        width: 100%;
        order: 1;
        margin-top: 0.5rem;
    }

    .dashboard-hero p {
        width: 100%;
        order: 2;
    }

    .btn-hero-add {
        padding: 0.4rem 1rem;
        font-size: 0.75rem;
    }

    /* User Management - Toolbar */
    .users-toolbar {
        flex-direction: row;
        align-items: center;
    }

    .users-search {
        flex: 1;
        max-width: 100%;
    }

    .btn-export {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* User Management - Cards */
    .user-card {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .user-card-left {
        flex: 1 1 100%;
        min-width: 0;
    }

    .user-card-meta {
        flex: 1;
        gap: 1.5rem;
    }

    .meta-col-actions {
        border-left: none;
        padding-left: 0;
        margin-left: auto;
    }

    /* User dropdown compact */
    .navbar-user-btn {
        padding: 4px 8px 4px 4px;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    /* Footer */
    .main-footer {
        font-size: 0.72rem;
        padding: 0.75rem 1.25rem;
    }
}

/* ================================================================
   TABLET PORTRAIT  ≤ 767.98px
   ================================================================ */
@media (max-width: 767.98px) {
    .main-content .content-wrapper {
        padding: 1rem;
    }

    .dashboard-hero {
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .dashboard-hero h2 {
        font-size: 1.2rem;
    }

    .dashboard-hero .hero-badge {
        font-size: 0.58rem;
        letter-spacing: 0.8px;
    }

    /* Navbar icons smaller */
    .navbar-icon-btn {
        width: 36px;
        height: 36px;
    }

    .navbar-icon-btn .bx {
        font-size: 1.2rem;
    }

    .badge-dot {
        min-width: 16px;
        height: 16px;
        font-size: 0.5rem;
        top: 2px;
        right: 1px;
    }

    /* Dropdown */
    .navbar-dropdown {
        min-width: 220px;
        border-radius: 12px;
    }

    .navbar-dropdown .dropdown-item {
        font-size: 0.78rem;
        padding: 0.5rem 0.85rem;
    }

    .user-avatar-lg {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }

    /* Login page */
    .login-card {
        max-width: 400px;
    }

    .login-card .card-body {
        padding: 0 1.75rem 1.5rem;
    }

    .login-footer {
        padding: 0 1.75rem 1.25rem;
    }

    .login-subtitle {
        font-size: 0.8rem;
        margin-bottom: 1.25rem;
    }

    /* Footer */
    .main-footer {
        flex-direction: column;
        gap: 0.25rem;
        text-align: center;
        font-size: 0.7rem;
    }

    /* User Management */
    .form-card {
        padding: 1.5rem;
    }

    .user-card {
        padding: 1rem 1.15rem;
    }

    .user-card-left {
        min-width: 0;
        flex: 1 1 100%;
    }

    .user-card-avatar {
        width: 42px;
        height: 42px;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .user-card-meta {
        flex: 1 1 100%;
        gap: 1.25rem;
    }

    .meta-col {
        min-width: 60px;
    }

    .meta-col-actions {
        border-left: none;
        padding-left: 0;
        margin-left: auto;
    }
}

/* ================================================================
   MOBILE LANDSCAPE  ≤ 575.98px
   ================================================================ */
@media (max-width: 575.98px) {
    :root {
        --navbar-height: 56px;
    }

    .top-navbar {
        height: var(--navbar-height);
        padding-left: 3rem;
        padding-right: 0.5rem;
    }

    .sidebar-toggle-btn {
        top: 10px;
        left: 10px;
        width: 34px;
        height: 34px;
    }

    .sidebar-toggle-btn .toggle-icon-menu {
        font-size: 1.25rem;
    }

    .main-content .content-wrapper {
        padding: 0.85rem;
    }

    /* Sidebar brand */
    .sidebar-brand {
        height: 56px;
        padding: 0 1rem;
    }

    .sidebar-brand a img {
        width: 120px;
    }

    .sidebar-nav .nav-link {
        font-size: 0.78rem;
        padding: 0.55rem 0.85rem;
    }

    .sidebar-nav .nav-link .nav-icon {
        font-size: 1.15rem;
    }

    /* Dashboard hero */
    .dashboard-hero {
        padding: 1rem;
        border-radius: 10px;
        margin-bottom: 1rem;
    }

    .dashboard-hero h2 {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }

    .dashboard-hero p {
        font-size: 0.75rem;
    }

    .dashboard-hero .hero-badge {
        font-size: 0.55rem;
        padding: 0.25rem 0.65rem;
        margin-bottom: 0;
    }

    .btn-hero-add {
        padding: 0.35rem 0.75rem;
        font-size: 0.7rem;
        border-radius: 8px;
    }

    .btn-hero-add .bx {
        font-size: 0.9rem;
    }

    /* Toolbar compact */
    .users-toolbar {
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }

    .users-search .form-control {
        padding: 0.5rem 0.85rem 0.5rem 2.5rem;
        font-size: 0.78rem;
    }

    .btn-export {
        padding: 0.45rem 0.85rem;
        font-size: 0.72rem;
    }

    /* Card compact */
    .user-card-meta {
        gap: 1rem;
    }

    .meta-col-actions .meta-label {
        display: none;
    }

    /* Navbar - hide user info text */
    .user-info {
        display: none !important;
    }

    .navbar-user-btn .bx-chevron-down {
        display: none !important;
    }

    .navbar-user-btn {
        padding: 3px;
        border-radius: 50%;
        border: none;
    }

    /* Icon buttons tighter */
    .navbar-icon-btn {
        width: 34px;
        height: 34px;
    }

    .navbar-icon-btn .bx {
        font-size: 1.1rem;
    }

    /* Login page */
    .login-card {
        max-width: 100%;
        margin: 0 0.75rem;
        border-radius: 16px;
    }

    .login-card .card-body {
        padding: 0 1.5rem 1.5rem;
    }

    .login-footer {
        padding: 0 1.5rem 1.25rem;
    }

    .login-logo-box {
        padding: 10px 20px;
        border-radius: 12px;
    }

    .login-logo-box img {
        height: 32px;
    }

    .login-subtitle {
        font-size: 0.75rem;
        margin-bottom: 1rem;
    }

    .login-card .form-label {
        font-size: 0.65rem;
    }

    .login-card .form-control {
        padding: 0.6rem 0.85rem;
        font-size: 0.8rem;
    }

    .btn-login {
        padding: 0.7rem;
        font-size: 0.8rem;
        letter-spacing: 1.2px;
    }

    .login-footer-logo img {
        height: 22px;
    }

    .login-footer-label {
        font-size: 0.55rem;
    }

    /* User Management */
    .form-card {
        padding: 1.25rem;
        border-radius: 10px;
    }

    .form-card-title {
        font-size: 1rem;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn-form-cancel,
    .form-actions .btn-form-submit {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .user-card {
        padding: 0.85rem 1rem;
        gap: 0.75rem;
    }

    .user-card-left {
        gap: 0.75rem;
    }

    .user-card-avatar {
        width: 38px;
        height: 38px;
        font-size: 0.78rem;
        border-radius: 10px;
    }

    .user-card-name {
        font-size: 0.82rem;
    }

    .user-card-email {
        font-size: 0.68rem;
    }

    .user-card-meta {
        gap: 1rem;
    }

    .meta-label {
        font-size: 0.58rem;
    }

    .meta-value {
        font-size: 0.73rem;
    }

    .meta-badge {
        font-size: 0.65rem;
    }

    .action-divider {
        display: none;
    }

    .meta-col-actions {
        border-left: none;
        padding-left: 0;
        margin-left: auto;
    }

    /* Guest wrapper blobs smaller */
    .guest-wrapper::before {
        width: 300px;
        height: 300px;
        top: -120px;
        right: -80px;
    }

    .guest-wrapper::after {
        width: 250px;
        height: 250px;
        bottom: -100px;
        left: -70px;
    }
}

/* ================================================================
   SMALL MOBILE  ≤ 480px
   ================================================================ */
@media (max-width: 480px) {
    .main-content .content-wrapper {
        padding: 0.75rem;
    }

    .dashboard-hero h2 {
        font-size: 1rem;
    }

    .dashboard-hero p {
        font-size: 0.7rem;
    }

    .main-footer {
        font-size: 0.65rem;
        padding: 0.65rem 0.75rem;
    }
}

/* ================================================================
   EXTRA SMALL MOBILE  ≤ 360px
   ================================================================ */
@media (max-width: 360px) {
    .login-card .card-body {
        padding: 0 1.15rem 1.25rem;
    }

    .login-footer {
        padding: 0 1.15rem 1rem;
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .login-logo-box img {
        height: 28px;
    }

    .login-subtitle {
        font-size: 0.7rem;
    }

    .navbar-icon-btn {
        width: 30px;
        height: 30px;
    }

    .badge-dot {
        min-width: 14px;
        height: 14px;
        font-size: 0.45rem;
    }
}