/* NOOR Game Management System - Responsive Styles */

/* Tablets (768px - 1024px) */
@media (max-width: 1024px) {
  .topbar{padding:10px 15px;flex-wrap:wrap;}
  .nav{gap:8px;flex-wrap:wrap;}
  .nav button{padding:10px 15px;font-size:0.9rem;flex:0 1 auto;}
  .content-area{padding:15px;}
  .game-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;}
  .modal-content{padding:20px;max-width:90%;width:90%;}
  .left-panel, .right-panel{max-width:280px;}
}

/* Mobile (480px - 768px) */
@media (max-width: 768px) {
  body{font-size:14px;}
  
  .topbar{flex-direction:column;padding:10px;gap:10px;align-items:center;}
  .logo{font-size:1.2rem;}
  .nav{flex-wrap:wrap;width:100%;justify-content:center;gap:5px;}
  .nav button{padding:10px 12px;font-size:0.85rem;flex:1 1 calc(33.33% - 5px);min-width:90px;max-width:140px;}
  
  .content-area{padding:10px;}
  .game-grid{grid-template-columns:1fr;gap:10px;}
  
  .modal{padding:10px;align-items:center;}
  .modal-content{width:95%;max-width:95%;padding:15px;max-height:85vh;overflow-y:auto;}
  .modal-header{font-size:1.1rem;padding:10px 0;}
  .modal-text{font-size:0.9rem;line-height:1.5;}
  .modal-buttons{grid-template-columns:1fr !important;gap:10px;}
  .modal-close{grid-template-columns:1fr !important;}
  
  .game-card{padding:12px;margin-bottom:10px;}
  .card-title{font-size:1rem;}
  .status-badge{font-size:0.85rem;padding:4px 8px;}
  .game-buttons{flex-direction:column;gap:8px;}
  .game-buttons button{width:100%;min-height:42px;font-size:0.9rem;}
  
  .login-box{padding:25px 20px;max-width:90%;width:90%;}
  .login-header .logo{font-size:2rem;}
  .login-header h1{font-size:1.2rem;}
  .login-form input{font-size:1rem;padding:12px;}
  
  .left-panel, .right-panel{width:100%;max-width:300px;height:100vh;overflow-y:auto;}
  .stat-item{padding:12px;}
  
  .form-group{margin-bottom:12px;}
  .form-group label{font-size:0.9rem;display:block;margin-bottom:5px;}
  .form-group input,.form-group select,.form-group textarea{padding:10px;font-size:1rem;width:100%;box-sizing:border-box;}
  
  .btn{font-size:0.9rem;padding:12px 16px;min-height:42px;cursor:pointer;}
  .login-btn{min-height:48px;font-size:1rem;}
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
  body{font-size:13px;line-height:1.4;}
  
  .topbar{padding:8px;gap:6px;}
  .logo{font-size:0.95rem;padding:4px 0;}
  .nav{gap:4px;}
  .nav button{font-size:0.75rem;padding:8px 10px;min-width:70px;max-width:110px;flex:1 1 calc(50% - 4px);}
  
  .content-area{padding:8px;}
  .game-grid{gap:8px;}
  
  .game-card{padding:10px;margin-bottom:8px;}
  .card-title{font-size:0.9rem;}
  .status-badge{font-size:0.75rem;padding:3px 6px;}
  .game-buttons{gap:6px;}
  .game-buttons button{min-height:40px;font-size:0.8rem;padding:8px 10px;}
  
  .modal{padding:5px;}
  .modal-content{padding:12px;width:98%;max-width:98%;}
  .modal-header{font-size:1rem;padding:8px 0;}
  .modal-text{font-size:0.85rem;}
  
  .btn{padding:10px 12px;font-size:0.85rem;min-height:40px;}
  
  .login-box{padding:20px 15px;width:96%;}
  .login-header .logo{font-size:1.8rem;}
  .login-header h1{font-size:1.1rem;}
  .login-form input{font-size:0.95rem;padding:12px;}
  .login-btn{padding:12px;font-size:1rem;min-height:46px;}
  
  .left-panel, .right-panel{max-width:280px;}
  .stat-item{padding:8px;}
  
  .form-group{margin-bottom:10px;}
  .form-group label{font-size:0.85rem;}
  .form-group input,.form-group select,.form-group textarea{font-size:0.9rem;padding:10px;}
}

/* Landscape mode */
@media (max-height: 600px) and (orientation: landscape) {
  .login-container{padding:5px;}
  .login-box{padding:15px;max-height:90vh;overflow-y:auto;}
  .login-header{margin-bottom:10px;}
  .login-header .logo{font-size:1.5rem;}
  .login-header h1{font-size:1rem;}
  .login-form{gap:8px;}
  .login-form input{padding:10px;}
  .modal{align-items:flex-start;padding-top:10px;}
  .modal-content{max-height:90vh;overflow-y:auto;margin:0;}
  .content-area{padding:8px;}
  .topbar{padding:8px;}
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  .btn{min-height:44px;padding:12px 16px;}
  .nav button{min-height:44px;}
  .game-buttons button{min-height:44px;}
  input,select,textarea{min-height:44px;font-size:16px !important;}
}