/* 
   Avrina POS - Responsive Overrides 
   Targeting: Mobile (Small) and 17"+ (Large) displays
*/

/* =========================================
   1. MOBILE OVERRIDES (max-width: 900px) 
   ========================================= */
@media (max-width: 900px) {

    /* --- LOGIN PAGE --- */
    .login-wrapper {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .login-hero {
        flex: none;
        width: 100%;
        height: 30vh;
        /* Reduced height */
        padding: 30px;
        align-items: center;
        /* Center text */
        text-align: center;
    }

    .hero-title {
        font-size: 28px !important;
        /* Smaller title */
        margin-bottom: 5px;
    }

    .hero-subtitle {
        display: none !important;
        /* Hide subtitle to save space */
    }

    .hero-brand {
        top: 20px;
        left: 20px;
        font-size: 18px;
    }

    .login-panel {
        flex: 1;
        width: 100%;
        border-radius: 20px 20px 0 0;
        margin-top: -20px;
        /* Overlap effect */
        padding: 30px 20px;
        justify-content: flex-start;
        /* Start from top */
    }

    .login-box {
        max-width: 100%;
        padding-top: 20px;
    }

    /* --- HEADER / NAVIGATION --- */
    .navbar {
        min-height: 60px;
        /* Shorter navbar */
        padding: 10px;
    }

    .navbar-brand {
        font-size: 20px;
    }

    .navbar-nav {
        margin-top: 10px;
        width: 100%;
    }

    .navbar-nav>li {
        display: inline-block;
        /* Stack horizontally or grid */
        width: 32%;
        /* 3-up grid for icons */
        text-align: center;
        margin-bottom: 10px;
    }

    .navbar-nav>li>a {
        padding: 10px 5px !important;
        font-size: 12px;
    }

    .navbar-nav>li>a i {
        font-size: 20px;
    }

    /* --- MODULES GRID (Home) --- */
    #home_module_list {
        gap: 15px;
        margin-top: 20px;
    }

    .module_item {
        width: 46%;
        /* 2 items per row */
        height: 120px;
        padding: 15px;
    }

    .module-icon {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .module-label {
        font-size: 12px;
    }

    /* --- TABLES (Customers, Items, etc) --- */
    .table-responsive {
        border: 0;
        overflow-x: auto !important;
        /* Force scroll */
    }

    /* Card/List View for tiny screens? Maybe later. For now, horizontal scroll. */

    /* --- SALES REGISTER --- */
    #register_wrapper {
        height: auto !important;
        /* Allow growing */
        margin-top: 20px;
        min-height: 300px;
    }

    /* Force Category Bar to be Horizontal Scroll on Mobile */
    #cafe-categories-wrapper {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        width: 100% !important;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .cafe-category-btn {
        display: inline-block !important;
        width: auto !important;
        min-width: 100px;
        margin-right: 10px !important;
        margin-bottom: 0 !important;
        flex: 0 0 auto;
    }

    /* --- MANAGE TABLES TOOLBAR --- */
    #toolbar .form-inline {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .fixed-table-toolbar .columns {
        float: none !important;
        text-align: left;
        margin-top: 5px;
    }

    .cafe-item-card {
        margin-bottom: 10px;
    }

    .cafe-item-card .panel-body {
        height: auto;
        padding: 10px;
    }

    .cafe-item-img {
        height: 80px;
    }
}

/* =========================================
   2. LARGE DISPLAY OVERRIDES (17"+ / >1600px)
   ========================================= */
@media (min-width: 1600px) {

    .container,
    .container-fluid {
        max-width: 95% !important;
        /* Use more width */
    }

    /* Scale up Grid */
    #home_module_list {
        max-width: 1600px;
    }

    .module_item {
        width: 180px;
        /* Larger tiles */
        height: 180px;
    }

    .module-icon {
        font-size: 56px;
    }

    .module-label {
        font-size: 16px;
    }



    .cafe-item-card .panel-body {
        height: 240px;
        /* Taller cards */
    }

    .cafe-item-img {
        height: 140px;
        /* Larger images */
    }

    /* Login Page Scaling */
    .hero-title {
        font-size: 72px;
    }

    .login-box {
        max-width: 450px;
    }

    body {
        font-size: 16px;
        /* Slightly larger base text */
    }
}