/*
 * Sievana Portal — unified mobile responsive layer
 * Loaded after portal-specific styles so the same mobile rules apply to
 * customer, admin and employee surfaces without changing desktop layout.
 */

html{
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}
[hidden]{display:none!important}
body{
    max-width:100%;
    overflow-x:hidden;
    min-width:0;
}
img,video,canvas,svg{max-width:100%}
.main-panel,.main-content,.app-shell,.main-area,.content-wrap,.content-section,.portal-section,.card{min-width:0}
.table-wrap,.table-scroll,.hr-table-scroll,.mobile-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
.data-table{width:100%}
.break-anywhere,.stat-value,.card-title,.section-title,.section-subtitle,.user-name,.header-user,.sidebar-logo,.sidebar-brand{overflow-wrap:anywhere;word-break:break-word}
.mobile-sidebar-backdrop{display:none}

@media (max-width: 900px){
    :root{--mobile-page-padding:16px;--mobile-header-height:64px}

    body.sidebar-open{overflow:hidden;touch-action:none}
    .mobile-sidebar-backdrop{
        position:fixed;inset:0;z-index:899;display:block;
        background:rgba(12,29,21,.48);backdrop-filter:blur(2px);
        border:0;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease;
    }
    body.sidebar-open .mobile-sidebar-backdrop{opacity:1;visibility:visible;pointer-events:auto}

    .sidebar{
        width:min(84vw,310px)!important;
        max-width:310px;
        height:100dvh!important;
        max-height:100dvh;
        z-index:900!important;
        overscroll-behavior:contain;
        box-shadow:-18px 0 40px rgba(0,0,0,.22);
        padding-bottom:max(14px,env(safe-area-inset-bottom));
    }
    .sidebar-header,.sidebar-brand{position:sticky;top:0;z-index:2;background:inherit}
    .sidebar-nav,.sidebar nav{padding-bottom:24px}
    .nav-item,.nav-link{min-height:48px!important;padding-block:11px!important}

    .main-content,.main-area{width:100%!important;max-width:100%;margin-right:0!important}
    .panel-header,.topbar{
        min-height:var(--mobile-header-height);
        height:auto!important;
        padding:10px var(--mobile-page-padding)!important;
        padding-top:max(10px,env(safe-area-inset-top))!important;
        gap:10px!important;
    }
    .panel-header{display:flex;align-items:center}
    .menu-toggle,.menu-button{display:grid!important;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:10px}
    .header-actions,.header-user,.top-actions{min-width:0;gap:8px!important}
    .header-user{margin-right:auto}
    .header-user .user-name,.user-chip>div{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .header-search{display:none!important}

    .content-section,.content-wrap{padding:var(--mobile-page-padding)!important}
    .content-section{padding-bottom:calc(24px + env(safe-area-inset-bottom))!important}
    .section-heading,.section-heading.page-heading,.hr-admin-header,.quick-buy-head,.finance-section-head,.order-history-head,.active-order-head,.agri-head{
        align-items:flex-start!important;flex-direction:column!important;gap:10px!important;
    }
    .section-heading>.btn-primary,.section-heading>.btn-secondary,.section-heading.page-heading .btn,.hr-admin-header>.btn-primary{width:100%!important;justify-content:center}
    .section-title{font-size:clamp(19px,5vw,24px)!important;line-height:1.45}
    .section-subtitle{line-height:1.8}

    .stats-grid,.metric-grid,.stats-grid.hr-stats{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:10px!important;
    }
    .stat-card,.metric-card{min-width:0;min-height:96px!important;padding:13px!important;gap:10px!important}
    .stat-value,.metric-card strong{font-size:clamp(17px,4.5vw,23px)!important;line-height:1.35}
    .stat-label,.metric-card small,.metric-card em{font-size:11px!important;line-height:1.55}
    .stat-icon-wrap,.metric-icon{flex:0 0 38px!important;width:38px!important;height:38px!important}

    .dashboard-row,.doctor-grid,.advisor-layout,.profile-layout,.dashboard-columns,.hr-two-column{
        grid-template-columns:1fr!important;
    }
    .products-grid,.rewards-grid,.quick-grid,.facilities-info,.facility-plan-grid,.goals-grid,.documents-grid,.service-categories{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:12px!important;
    }
    .card{padding:16px!important;border-radius:13px!important}
    .card.mt-20{margin-top:14px!important}

    .form-row,.form-grid,.hr-modal-grid,.checkout-fields,.lab-fields,.doctor-selectors,.eco-cost-grid,.credit-method-fieldset,.simple-check-upload,.mobile-fluid-grid{
        grid-template-columns:1fr!important;
    }
    .form-group{min-width:0}
    .form-group input,.form-group select,.form-group textarea,
    input:not([type="checkbox"]):not([type="radio"]),select,textarea{
        width:100%;max-width:100%;min-width:0;
    }
    input[type="file"]{padding:9px!important}
    input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
    .shop-filters,.hr-toolbar,.sheet-actions,.setup-copy-row,.modal-actions,.sheet-modal-actions,.active-order-actions,.finance-record-actions{
        align-items:stretch!important;flex-direction:column!important;width:100%;gap:9px!important;
    }
    .mobile-fluid-actions{flex-wrap:wrap!important;align-items:stretch!important;gap:8px!important}
    .mobile-fluid-actions>button,.mobile-fluid-actions>.btn-primary,.mobile-fluid-actions>.btn-secondary{flex:1 1 140px!important;width:auto!important}
    .shop-filters>*,.hr-toolbar>*,.sheet-actions>*,.modal-actions>button,.sheet-modal-actions>button,.active-order-actions>button,.finance-record-actions>button{
        width:100%!important;max-width:none!important;
    }
    .search-input{min-width:0!important;width:100%!important}
    .btn-primary,.btn-secondary,.btn,.action-btn{min-height:42px}

    .modal-overlay,.modal-backdrop{
        align-items:flex-end!important;justify-content:center!important;
        padding:0!important;
    }
    .modal-content,.modal-panel{
        width:100%!important;max-width:100%!important;
        max-height:min(92dvh,860px)!important;
        margin:0!important;padding:20px var(--mobile-page-padding) max(20px,env(safe-area-inset-bottom))!important;
        border-radius:20px 20px 0 0!important;
        overscroll-behavior:contain;
    }
    .modal-content h2,.modal-content h3,.modal-panel h2,.modal-panel h3{padding-left:34px;line-height:1.55}
    .modal-close{width:42px;height:42px}

    .notif-dropdown{position:fixed!important;top:calc(var(--mobile-header-height) + env(safe-area-inset-top))!important;left:10px!important;right:10px!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 90px)!important}
    #notifList{max-height:calc(100dvh - 150px)!important}

    .bar-chart-item{grid-template-columns:minmax(70px,110px) minmax(80px,1fr) auto!important;gap:7px!important}
    .bar-chart-label{width:auto!important;min-width:0;white-space:normal!important;overflow-wrap:anywhere}
    .spending-chart{gap:4px!important;overflow-x:auto;padding-bottom:6px}
    .chart-col{min-width:34px}

    .order-timeline,.order-progress,.credit-process,.cart-checkout-steps{overflow-x:auto;overscroll-behavior-inline:contain;padding-bottom:8px}
    .order-timeline .timeline-step{min-width:92px}
    .order-progress{grid-template-columns:repeat(5,minmax(88px,1fr))!important}

    .quick-price-row,.quick-history-row,.finance-record,.finance-history-row,.agri-task,.agri-farm-head{
        align-items:flex-start!important;flex-wrap:wrap!important;
    }
    .quick-price-row>div:first-child,.quick-history-row>div:first-child{min-width:0!important;flex:1 1 180px}
    .quick-price-value,.quick-price-buttons{margin-right:0!important;width:auto!important}
    .quick-price-buttons{flex:1 1 100%;justify-content:flex-start!important}
    .quick-price-buttons .btn-primary,.quick-price-buttons .btn-secondary{flex:1 1 130px;width:auto!important}

    .doctor-chat-card{min-height:0!important}
    .doctor-messages{height:min(52dvh,430px)!important}
    .doctor-tabs,.hr-tabs,.tabs{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
    .doctor-tabs button,.hr-tabs button,.tabs button{white-space:nowrap;flex:0 0 auto}

    .notifications-list{min-width:0}

    .auth-page{min-height:100dvh!important;padding:12px!important;padding-top:max(12px,env(safe-area-inset-top))!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
    .auth-container,.auth-card{width:100%!important;max-width:440px!important;margin:auto!important;padding:26px 18px!important;border-radius:18px!important}
    .auth-tabs,.auth-method-toggle{max-width:100%;overflow-x:auto}
    .auth-tab,.auth-method-btn{white-space:nowrap}
    .auth-form .link-btn{min-height:44px}
}

/* Mobile tables become readable cards instead of compressed columns. */
@media (max-width: 640px){
    :root{--mobile-page-padding:12px;--mobile-header-height:60px}

    .stats-grid,.metric-grid,.stats-grid.hr-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .products-grid,.rewards-grid,.quick-grid,.facilities-info,.facility-plan-grid,.goals-grid,.documents-grid,.service-categories,.levels-overview,.finance-action-grid{
        grid-template-columns:1fr!important;
    }
    .header-user .user-name,.user-chip>div{display:none!important}
    .header-user.account-menu-wrap{display:flex!important}
    .panel-header,.topbar{box-shadow:0 1px 7px rgba(15,44,29,.08)}
    .content-section,.content-wrap{padding:12px!important}
    .card{padding:14px!important}

    table.mobile-card-table{display:block;width:100%;min-width:0!important;border:0!important;background:transparent!important;border-spacing:0!important}
    table.mobile-card-table thead{display:none}
    table.mobile-card-table tbody{display:grid;gap:10px;width:100%}
    table.mobile-card-table tr{display:block;width:100%;padding:8px 12px;background:#fff;border:1px solid var(--border,#dde2d6);border-radius:12px;box-shadow:0 1px 2px rgba(20,30,20,.04)}
    table.mobile-card-table td{display:grid;grid-template-columns:minmax(88px,38%) minmax(0,1fr);align-items:start;gap:10px;width:100%;min-height:38px;padding:9px 0!important;border:0!important;border-bottom:1px dashed var(--border-light,#eceee7)!important;text-align:right!important;white-space:normal!important;overflow-wrap:anywhere}
    table.mobile-card-table td:last-child{border-bottom:0!important}
    table.mobile-card-table td::before{content:attr(data-label);font-weight:700;color:var(--text-light,#666f61);font-size:11.5px;line-height:1.7}
    table.mobile-card-table td.mobile-full-row{display:block;text-align:center!important}
    table.mobile-card-table td.mobile-full-row::before{display:none}
    table.mobile-card-table td button,
    table.mobile-card-table td .action-btn,
    table.mobile-card-table td .btn-sm{margin:2px;max-width:100%}
    table.mobile-card-table td.mobile-actions-cell{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
    table.mobile-card-table td.mobile-actions-cell::before{flex:0 0 100%}

    .table-pagination{gap:8px!important}
    .table-pagination span{order:-1;width:100%;min-width:0!important}
    .table-pagination button{flex:1 1 110px}
    .pagination-size{width:100%;justify-content:space-between}

    .modal-content,.modal-panel{padding-inline:14px!important}
    .doctor-compose{flex-direction:column!important}
    .doctor-compose button{width:100%}
    .doctor-message{max-width:96%!important}

    .checkout-price{gap:8px}
    .checkout-price span:first-child{min-width:0}
    .order-cost-summary{align-items:stretch!important}
    .order-cost-summary>*{text-align:right!important}

    .cart-professional-head,.club-status-bar,.points-hero,.welcome-panel,.finance-section-head{align-items:flex-start!important;flex-direction:column!important}
    .professional-cart-item{grid-template-columns:40px minmax(0,1fr) 32px!important}
    .cart-product-info,.cart-quantity-control,.cart-line-total{min-width:0}

    .setup-status-grid,.spreadsheet-summary{grid-template-columns:1fr!important}
    .setup-status-card{min-height:68px!important}
    .finance-review-row{grid-template-columns:1fr!important}
    .finance-review-row button{width:100%}

    .toast{left:10px!important;right:10px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;width:auto!important;max-width:none!important}
}

@media (max-width: 380px){
    .stats-grid,.metric-grid,.stats-grid.hr-stats{grid-template-columns:1fr!important}
    .stat-card,.metric-card{min-height:84px!important}
    .auth-container,.auth-card{padding:22px 15px!important}
    .mobile-fluid-actions{flex-direction:column!important}
    .mobile-fluid-actions>button,.mobile-fluid-actions>.btn-primary,.mobile-fluid-actions>.btn-secondary{width:100%!important;flex-basis:auto!important}
    .panel-header,.topbar{padding-inline:10px!important}
    .content-section,.content-wrap{padding-inline:10px!important}
    .card{padding:12px!important}
    .notif-dropdown{left:6px!important;right:6px!important}
    .modal-content,.modal-panel{padding-inline:12px!important}
}

@media (orientation:landscape) and (max-height:520px) and (max-width:900px){
    .sidebar{width:min(62vw,310px)!important}
    .modal-content,.modal-panel{max-height:96dvh!important}
    .doctor-messages{height:46dvh!important}
}

@media (hover:none) and (pointer:coarse){
    button,a,[role="button"],select,input[type="checkbox"],input[type="radio"]{touch-action:manipulation}
    .nav-item,.nav-link,.action-btn,.btn-sm{min-height:44px}
}

/* Portal-specific mobile refinements discovered during the second audit. */
@media (max-width:640px){
    .payslip-head{align-items:flex-start!important;flex-direction:column!important;gap:10px!important;padding:16px!important}
    .payslip-totals{grid-template-columns:1fr!important;padding:12px!important}
    .payslip-sheet{border-radius:12px!important}
    .row-actions,.goal-meta,.goal-actions,.balance-meta{flex-wrap:wrap!important;white-space:normal!important;gap:7px!important}
    .timeline-item{grid-template-columns:38px minmax(0,1fr)!important;align-items:start!important}
    .timeline-item .point-value{grid-column:2;text-align:right}
    .balance-row{grid-template-columns:minmax(84px,1fr) minmax(70px,1fr)!important}
    .balance-row .balance-bar{grid-column:1/-1;grid-row:2}
    .balance-row b{text-align:right!important}
    .profile-identity dl div{align-items:flex-start;gap:10px}
    .profile-identity dt{flex:0 0 40%}
    .profile-identity dd{min-width:0;overflow-wrap:anywhere;text-align:left}
    .document-card{grid-template-columns:40px minmax(0,1fr)!important;padding:14px!important}
    .announcement-card{padding:15px!important}
    .chat-message,.chat-message.hr{max-width:94%;margin-inline:0!important}

    .club-status-item{padding:14px!important}
    .levels-overview{grid-template-columns:1fr!important}
    .facility-selection-banner{align-items:flex-start!important;flex-direction:column!important}
    .facility-selection-banner button{width:100%}
    .order-overview-grid{grid-template-columns:1fr!important}
    .finance-action-card{min-height:0!important}
    .simple-check-upload .selected-file{grid-column:auto!important}

    .hr-admin-header{padding:18px!important}
    .hr-admin-header h2{font-size:20px!important}
    .hr-tabs{top:64px!important;margin-inline:-4px;padding-inline:4px}
    .icon-upload-row,.icon-type-toggle{align-items:stretch!important;flex-direction:column!important}
    .icon-upload-row>*{width:100%!important}
    .spreadsheet-summary{gap:8px!important}
    .spreadsheet-summary div{padding:11px!important}

    .quick-history-row>b,.quick-history-row>.badge{margin-right:auto}
}