/* ════════════════════════════════════════════════════════════════════════
   TERMINAL COMPACT — 13–17 inch touch monitor responsive system
   Primary target: 1366x768, then scale up to 1920x1080
   Load this LAST in all layouts so it overrides everything cleanly.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL VIEWPORT LOCK (short screens) ─────────────────────────── */
@media (max-height: 820px) and (min-width: 901px) {
    .shell, .pos-app-frame, .page-body, .page-wrapper, .pos-modern, .pos-terminal-main {
        min-height: 100dvh;
        max-height: 100dvh;
        height: 100dvh;
        overflow: hidden;
    }
    .main, .content, .page-body, .pos-terminal-main > .shell, .pos-modern > .shell {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 100dvh;
    }
    .main::-webkit-scrollbar, .content::-webkit-scrollbar, .pos-terminal-main > .shell::-webkit-scrollbar {
        width: 4px;
    }
    .main::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-thumb, .pos-terminal-main > .shell::-webkit-scrollbar-thumb {
        background: rgba(27, 33, 83, 0.15);
        border-radius: 2px;
    }
    /* Touch buttons minimum 44px */
    .btn, .btn-primary, .btn-secondary, .btn-action, .btn-lg, .submit, .login-button, .key, .mode-tab, .order-type-btn, .nav-icon-btn, .nav-icon, .orders-btn2, .btn-blue, .btn-gold, .btn-green, .btn-red, .btn-soft, .field2, .type-tab2, .cat-tile, .ot, .cat-scroll-btn, .search-inp, .search-clear, .pos-branch-switcher, .nav-mpesa-prompt, .m-pesa-btn {
        min-height: 44px;
    }
}

@media (max-height: 720px) and (min-width: 901px) {
    .btn, .btn-primary, .btn-secondary, .btn-lg, .submit, .login-button, .key, .mode-tab, .order-type-btn, .nav-icon-btn, .nav-icon, .orders-btn2, .field2, .type-tab2, .cat-tile, .ot {
        min-height: 40px;
    }
}

/* ── 2. LOGIN PAGE ──────────────────────────────────────────────────── */
/* Target .login-page body class (added in login.blade.php) */
@media (max-height: 820px) and (min-width: 900px) {
    .login-page .page {
        padding: 20px 16px;
    }
    .login-page .card {
        padding: 20px 22px 16px;
    }
    .login-page .tabs {
        margin-bottom: 16px;
    }
    .login-page .submit {
        height: 48px;
        margin-top: 16px;
    }
}

/* Extra short login screens: keep the form visible and let the page scroll naturally. */
@media (max-height: 760px) and (min-width: 900px) {
    .login-page .page {
        align-items: flex-start;
        min-height: 100vh;
        height: auto;
        overflow: visible;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .login-page .stage {
        display: flex;
        visibility: visible;
        opacity: 1;
    }
    .login-page .card {
        max-height: none;
        overflow: visible;
        padding: 18px;
    }
    .login-page h1 {
        font-size: 26px;
    }
    .login-page .input {
        height: 44px;
        font-size: 14px;
    }
    .login-page .submit {
        height: 48px;
        font-size: 15px;
    }
    .login-page .key {
        height: 42px;
        font-size: 18px;
    }
    .login-page .mode-tab {
        height: 38px;
    }
}

/* ── 3. POS TERMINAL ───────────────────────────────────────────────── */
/* Compact: 1280px – 1440px */
@media (max-width: 1440px) and (min-width: 901px) {
    .pos-terminal-main > .shell, .pos-modern > .shell {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 10px;
    }
    .pos-terminal-main .right, .pos-modern .right, .pos-terminal-main .cart-area, .pos-modern .cart-area {
        max-height: calc(100dvh - 60px);
        overflow-y: auto;
    }
    .pos-terminal-main .left-top, .pos-modern .left-top, .pos-terminal-main .order-type-bar, .pos-modern .order-type-bar {
        padding: 8px 12px;
        gap: 6px;
    }
    .pos-terminal-main .ot, .pos-modern .ot {
        padding: 6px 10px;
        font-size: 12px;
    }
    .pos-terminal-main .search-wrap, .pos-modern .search-wrap, .pos-terminal-main .search-bar, .pos-modern .search-bar {
        margin-left: 10px;
    }
    .pos-terminal-main .search-inp, .pos-modern .search-inp {
        padding: 6px 32px 6px 30px;
        font-size: 12px;
    }
    .pos-terminal-main .main-cat-bar, .pos-modern .main-cat-bar, .pos-terminal-main .sub-cat-bar, .pos-modern .sub-cat-bar {
        padding: 8px 12px;
    }
    .pos-terminal-main .main-cat-bar .cat-tile, .pos-modern .main-cat-bar .cat-tile {
        padding: 6px 12px;
        font-size: 12px;
    }
    .pos-terminal-main .sub-cat-bar .cat-tile, .pos-modern .sub-cat-bar .cat-tile {
        padding: 5px 10px;
        font-size: 11px;
    }
    .pos-terminal-main .product-area, .pos-modern .product-area {
        padding: 0 12px 12px;
    }
    .pos-terminal-main .cat-header, .pos-modern .cat-header {
        padding: 8px 4px 6px;
    }
    .pos-terminal-main .cat-title, .pos-modern .cat-title {
        font-size: 12px;
    }
    .pos-terminal-main .prod-grid, .pos-modern .prod-grid, .pos-terminal-main .product-grid, .pos-modern .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
    .pos-terminal-main .prod, .pos-modern .prod, .pos-terminal-main .product-card, .pos-modern .product-card {
        min-height: 100px;
        padding: 10px 8px 8px;
    }
    .pos-terminal-main .prod-name, .pos-modern .prod-name {
        font-size: 11px;
    }
    .pos-terminal-main .prod-price, .pos-modern .prod-price {
        font-size: 14px;
    }
    .pos-terminal-main .prod-emoji, .pos-modern .prod-emoji, .pos-terminal-main .prod-station, .pos-modern .prod-station {
        display: none;
    }
    .pos-terminal-main nav, .pos-modern nav, .pos-terminal-main .top-nav, .pos-modern .top-nav {
        height: 46px;
        padding: 8px 12px;
        min-height: 46px;
    }
    .pos-terminal-main .nav-title, .pos-modern .nav-title {
        font-size: 14px;
    }
    .pos-terminal-main .nav-sub, .pos-modern .nav-sub {
        font-size: 10px;
    }
    .pos-terminal-main .nav-icon, .pos-modern .nav-icon, .pos-terminal-main .nav-icon-btn, .pos-modern .nav-icon-btn {
        width: 32px;
        height: 32px;
    }
    .pos-terminal-main .avatar, .pos-modern .avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .pos-terminal-main .nav-pill, .pos-modern .nav-pill {
        padding: 4px 8px;
        font-size: 11px;
    }
    .pos-terminal-main .pos-branch-switcher, .pos-modern .pos-branch-switcher {
        padding: 4px 8px;
        font-size: 11px;
    }
    .pos-terminal-main .nav-mpesa-prompt, .pos-modern .nav-mpesa-prompt {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* Short screens: 1366x768 / 1280x720 */
@media (max-height: 768px) and (min-width: 901px) {
    .pos-terminal-main > .shell, .pos-modern > .shell {
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 8px;
    }
    .pos-terminal-main nav, .pos-modern nav, .pos-terminal-main .top-nav, .pos-modern .top-nav {
        height: 42px;
        padding: 6px 10px;
        min-height: 42px;
    }
    .pos-terminal-main .left-top, .pos-modern .left-top, .pos-terminal-main .order-type-bar, .pos-modern .order-type-bar {
        padding: 6px 10px;
    }
    .pos-terminal-main .main-cat-bar, .pos-modern .main-cat-bar, .pos-terminal-main .sub-cat-bar, .pos-modern .sub-cat-bar {
        padding: 6px 10px;
    }
    .pos-terminal-main .product-area, .pos-modern .product-area {
        padding: 0 10px 10px;
    }
    .pos-terminal-main .prod-grid, .pos-modern .prod-grid, .pos-terminal-main .product-grid, .pos-modern .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 6px;
    }
    .pos-terminal-main .prod, .pos-modern .prod, .pos-terminal-main .product-card, .pos-modern .product-card {
        min-height: 90px;
        padding: 8px 6px 6px;
    }
    .pos-terminal-main .prod-name, .pos-modern .prod-name {
        font-size: 10px;
    }
    .pos-terminal-main .prod-price, .pos-modern .prod-price {
        font-size: 13px;
    }
    .pos-terminal-main .cat-title, .pos-modern .cat-title {
        font-size: 11px;
    }
    .pos-terminal-main .cat-header, .pos-modern .cat-header {
        padding: 6px 4px 4px;
    }
}

/* Very short: 1280x720 */
@media (max-height: 720px) and (min-width: 901px) {
    .pos-terminal-main > .shell, .pos-modern > .shell {
        grid-template-columns: minmax(0, 1fr) 240px;
    }
    .pos-terminal-main .prod-grid, .pos-modern .prod-grid, .pos-terminal-main .product-grid, .pos-modern .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 5px;
    }
    .pos-terminal-main .prod, .pos-modern .prod, .pos-terminal-main .product-card, .pos-modern .product-card {
        min-height: 80px;
        padding: 6px 5px 5px;
    }
    .pos-terminal-main .prod-name, .pos-modern .prod-name {
        font-size: 10px;
        margin-bottom: 2px;
    }
    .pos-terminal-main .prod-price, .pos-modern .prod-price {
        font-size: 12px;
    }
    .pos-terminal-main .main-cat-bar .cat-tile, .pos-modern .main-cat-bar .cat-tile {
        padding: 4px 8px;
        font-size: 11px;
    }
    .pos-terminal-main .sub-cat-bar .cat-tile, .pos-modern .sub-cat-bar .cat-tile {
        padding: 3px 8px;
        font-size: 10px;
    }
}

/* Medium: 1441px – 1700px (17-inch monitors) */
@media (min-width: 1441px) and (max-width: 1700px) {
    .pos-terminal-main > .shell, .pos-modern > .shell {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 12px;
    }
}

/* Full desktop: 1701px+ (22-inch monitors) */
@media (min-width: 1701px) {
    .pos-terminal-main > .shell, .pos-modern > .shell {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 16px;
    }
}

/* ── 4. ORDERS & BILL HISTORY ──────────────────────────────────────── */
@media (max-height: 768px) and (min-width: 901px) {
    .orders-v2.orders-v2 {
        height: calc(100dvh - 54px);
        min-height: auto;
        overflow: hidden;
    }
    .orders-shell2.orders-shell2 {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 10px;
        padding: 10px 12px;
    }
    .orders-left, .orders-right.orders-right {
        border-radius: 12px;
    }
    .orders-head.orders-head {
        padding: 10px 14px 8px;
    }
    .orders-title.orders-title {
        font-size: 20px;
    }
    .orders-sub.orders-sub {
        font-size: 12px;
    }
    .orders-stats2.orders-stats2 {
        gap: 6px;
        padding: 0 14px 8px;
    }
    .stat2.stat2 {
        height: 48px;
        padding: 8px 10px;
    }
    .stat2.stat2 strong {
        font-size: 16px;
    }
    .filters2.filters2 {
        padding: 8px 14px;
        gap: 6px;
    }
    .field2.field2 {
        height: 34px;
        font-size: 12px;
    }
    .type-tabs2.type-tabs2 {
        padding: 0 14px 8px;
    }
    .type-tab2.type-tab2 {
        height: 30px;
        padding: 0 10px;
        font-size: 11px;
    }
    .order-row2.order-row2 {
        padding: 10px 14px;
        gap: 10px;
    }
    .detail-head2.detail-head2 {
        padding: 10px 14px 8px;
    }
    .detail-num.detail-num {
        font-size: 20px;
    }
    .detail-body2.detail-body2 {
        padding: 10px 14px;
    }
    .info2.info2 {
        padding: 8px 10px;
    }
    .item2.item2 {
        padding: 8px 10px;
    }
    .total2.total2 {
        padding: 10px 12px;
        margin-top: 10px;
    }
    .total2.total2 strong {
        font-size: 20px;
    }
    .detail-actions2.detail-actions2 {
        padding: 8px 14px 10px;
    }
    .detail-actions2.detail-actions2 .orders-btn2 {
        height: 40px;
        font-size: 12px;
    }
}

@media (max-height: 720px) and (min-width: 901px) {
    .orders-shell2.orders-shell2 {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
    .orders-stats2.orders-stats2 {
        display: none;
    }
    .orders-head.orders-head {
        padding: 8px 12px 6px;
    }
    .filters2.filters2 {
        padding: 6px 12px;
    }
    .type-tabs2.type-tabs2 {
        padding: 0 12px 6px;
    }
    .detail-head2.detail-head2 {
        padding: 8px 12px 6px;
    }
    .detail-body2.detail-body2 {
        padding: 8px 12px;
    }
    .detail-actions2.detail-actions2 {
        padding: 6px 12px 8px;
    }
}

/* ── 5. GENERAL PAGES (Dashboard, Hotel, Reports, Settings, etc.) ─── */
@media (max-height: 768px) and (min-width: 901px) {
    .shell > .main {
        max-height: calc(100dvh - 54px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .topbar {
        height: 48px;
        min-height: 48px;
        padding: 0 12px;
    }
    .topbar-title {
        font-size: 16px;
    }
    .topbar-sub {
        font-size: 11px;
    }
    .card {
        padding: 12px;
        border-radius: 14px;
        margin-bottom: 8px;
    }
    .card-header {
        padding: 10px 12px;
        font-size: 13px;
    }
    .card-body {
        padding: 10px 12px;
    }
    .card-footer {
        padding: 8px 12px;
    }
    .form-control, .form-select {
        padding: 6px 10px;
        min-height: 40px;
        font-size: 13px;
    }
    .form-label {
        font-size: 11px;
        margin-bottom: 3px;
    }
    .form-group {
        margin-bottom: 8px;
    }
    .table > thead > tr > th, .table > tbody > tr > td {
        padding: 6px 8px;
        font-size: 12px;
    }
    .table > thead > tr > th {
        font-size: 10px;
    }
    .page-header {
        padding: 10px 0;
        gap: 6px;
    }
    .page-header h1, .page-header h2 {
        font-size: 18px;
    }
    .stats-row {
        gap: 8px;
    }
    .stat-card {
        padding: 10px;
    }
    .stat-value {
        font-size: 20px;
    }
    .stat-label {
        font-size: 10px;
    }
    .chart-container {
        min-height: 160px;
    }
    .modal-dialog {
        max-height: calc(100dvh - 32px);
        margin: 16px auto;
    }
    .modal-body {
        max-height: calc(100dvh - 140px);
        overflow-y: auto;
    }
    .modal-footer .btn {
        min-height: 44px;
    }
}

@media (max-height: 720px) and (min-width: 901px) {
    .shell > .main {
        max-height: calc(100dvh - 48px);
    }
    .topbar {
        height: 44px;
        min-height: 44px;
    }
    .card {
        padding: 10px;
        border-radius: 12px;
    }
    .card-header {
        padding: 8px 10px;
        font-size: 12px;
    }
    .card-body {
        padding: 8px 10px;
    }
    .form-control, .form-select {
        padding: 5px 8px;
        min-height: 36px;
        font-size: 12px;
    }
    .form-label {
        font-size: 10px;
    }
    .table > thead > tr > th, .table > tbody > tr > td {
        padding: 5px 6px;
        font-size: 11px;
    }
    .stat-card {
        padding: 8px;
    }
    .stat-value {
        font-size: 18px;
    }
    .chart-container {
        min-height: 140px;
    }
}

/* ── 6. DOCK / SIDEBAR TWEAKS ─────────────────────────────────────── */
@media (max-height: 768px) and (min-width: 901px) {
    #main-navigation-dock .dock-header {
        padding: 12px 14px 10px;
    }
    #main-navigation-dock .dock-logo {
        gap: 8px;
    }
    #main-navigation-dock .logo-mark {
        width: 32px;
        height: 32px;
    }
    #main-navigation-dock .logo-mark svg {
        width: 18px;
        height: 18px;
    }
    #main-navigation-dock .dock-brand strong {
        font-size: 13px;
    }
    #main-navigation-dock .dock-brand em {
        font-size: 10px;
    }
    #main-navigation-dock .dock-nav {
        padding: 6px 8px;
    }
    #main-navigation-dock .dock-item {
        min-height: 32px;
        padding: 6px 8px;
        font-size: 12px;
    }
    #main-navigation-dock .dock-icon {
        width: 18px;
        height: 18px;
    }
    #main-navigation-dock .dock-icon i {
        font-size: 16px;
    }
    #main-navigation-dock .dock-group-header {
        padding: 6px 10px 3px;
        font-size: 8px;
    }
    #main-navigation-dock .dock-footer {
        padding: 8px 12px 10px;
    }
    #main-navigation-dock .dock-collapse-btn {
        min-height: 44px;
    }
    #main-navigation-dock .mode-badge {
        padding: 3px 6px;
    }
    #main-navigation-dock .mode-dot {
        width: 7px;
        height: 7px;
    }
    #main-navigation-dock .mode-text {
        font-size: 11px;
    }
}

/* Dock must always be visible on desktop */
@media (min-width: 861px) {
    #main-navigation-dock {
        display: flex !important;
    }
    .dock-collapse-btn {
        display: flex !important;
    }
}


/* Login zoom safety guard: never hide or clip the sign-in panel on zoomed/short screens. */
.login-page {
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.login-page .page {
    min-height: 100vh;
    height: auto;
    overflow: visible;
}

.login-page .stage {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
}

.login-page .card {
    max-height: none !important;
}

@media (max-height: 900px) {
    .login-page .page {
        align-items: flex-start !important;
    }
}