/* Global responsive helpers - mobile-first */
:root{
    --container-padding:16px;
}

html,body{box-sizing:border-box;-webkit-text-size-adjust:100%;}
*,*::before,*::after{box-sizing:inherit}

img,svg{max-width:100%;height:auto;display:block}

/* Stats grid: responsive columns */
.admin-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}

/* Tables: allow horizontal scroll on small screens */
.admin-table-wrapper, .admin-table-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-table{width:100%;border-collapse:collapse;min-width:700px}

/* Forms: stack on narrow screens */
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row .form-group{flex:1 1 220px;min-width:200px}

.form-group.full-width{flex-basis:100%;width:100%}

/* Modals */
.admin-modal .modal-content, .settings-modal-content{
    width:94%;
    max-width:720px;
    margin:24px auto;
    max-height:90vh;
    overflow-y:auto;
}

/* Content grid responsive */
.content-grid{display:grid;grid-template-columns:1fr;gap:20px}

@media (min-width:1100px){
    .content-grid{grid-template-columns:1fr 360px}
}

/* Utility text sizing */
.page-title{font-size:clamp(1.2rem, 5vw, 2rem)}
.page-subtitle{font-size:clamp(0.85rem, 2.5vw, 1rem)}

/* Mobile optimizations */
@media (max-width:768px){
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }
    
    .admin-stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .stat-card{padding:16px 12px}
    
    .admin-table{min-width:600px;font-size:13px}
    .admin-table th,.admin-table td{padding:10px 8px}
    
    .admin-header{flex-direction:column;align-items:flex-start;gap:12px}
    .admin-title-section{width:100%}
    
    .admin-table-header{flex-direction:column;gap:12px;align-items:stretch}
    .table-search-box{width:100%}
    .table-search-box input{width:100%;font-size:14px;padding:10px 12px}
    
    .admin-tabs{
        overflow-x:auto;
        white-space:nowrap;
        -webkit-overflow-scrolling:touch;
        display:flex;
        gap:8px;
        margin-bottom:16px;
    }
    .admin-tab{
        display:inline-flex;
        min-width:120px;
        flex-shrink:0;
        justify-content:center;
    }
    
    /* Modals on mobile */
    .admin-modal, .settings-modal{
        padding:0;
    }
    .modal-content, .settings-modal-content{
        width:100%;
        max-width:100%;
        margin:0;
        border-radius:0;
        max-height:100vh;
        min-height:100vh;
    }
    .modal-header,.modal-footer{padding:16px}
    .modal-body{padding:16px}
    
    .form-row{flex-direction:column;gap:16px}
    .form-row .form-group{flex:1 1 100%;min-width:100%}
    
    /* Button groups */
    .admin-table-header > div[style*="display: flex"]{
        flex-direction:column;
        width:100%;
        gap:10px;
    }
    .admin-primary-btn{
        width:100%;
        justify-content:center;
        padding:12px 16px;
    }
    
    /* Config panels */
    .config-panel{padding:16px}
    .config-panel-header{flex-direction:column;align-items:flex-start;gap:8px}
    
    /* Content sections */
    .page-title{font-size:1.4rem;margin-bottom:8px}
    .page-subtitle{font-size:0.9rem}
}

/* Small phones */
@media (max-width:480px){
    .admin-stats-grid{grid-template-columns:1fr;gap:8px}
    .stat-card{padding:14px}
    .page-title{font-size:1.1rem}
    .admin-table{min-width:500px;font-size:12px}
}

/* Tablet landscape */
@media (min-width:769px) and (max-width:1024px){
    .admin-stats-grid{grid-template-columns:repeat(2,1fr)}
    .content-grid{grid-template-columns:1fr}
}

/* Prevent long words from breaking layout */
.admin-table td,.admin-table th{word-break:break-word;overflow-wrap:break-word}

/* Touch-friendly buttons on mobile */
@media (max-width:768px){
    button,.admin-tab,.nav-item{min-height:44px;padding:10px 14px}
}