/* ================================================================
   responsive.css - 繝ｬ繧ｹ繝昴Φ繧ｷ繝・繝｡繝・ぅ繧｢繧ｯ繧ｨ繝ｪ
   ================================================================ */

/* 繝ｬ繧ｹ繝昴Φ繧ｷ繝門ｯｾ蠢・*/

/* Tablet & Small Desktop (1024px and below) */
@media (max-width: 1024px) {
    :root {
        --spacing-lg: 20px;
        --spacing-xl: 28px;
    }
    
    .content-grid {
        gap: 20px;
    }
    
    .panel-header h3 {
        font-size: 1.2rem;
    }
}

/* Tablet Portrait (768px and below) */
@media (max-width: 768px) {
    :root {
        font-size: 15px;
    }
    
    .admin-container {
        padding: 12px;
    }

    .admin-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 20px 0;
    }

    .admin-header h1 {
        font-size: 1.8rem;
    }
    
    .list-item-actions {
        max-width: 60%;
        gap: 5px;
    }
    
    .btn-small {
        padding: 3px 6px;
        font-size: 9px;
        min-width: 50px;
    }

    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }

    .control-panel {
        justify-content: center;
        gap: 12px;
    }
    
    .btn {
        min-width: 140px;
        padding: 12px 20px;
        font-size: 14px;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        height: auto;
        min-height: auto;
    }

    /* 繧ｿ繝悶Ξ繝・ヨ莉･荳九〒縺ｯ騾壼ｸｸ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ縺ｫ謌ｻ縺・*/
    .admin-body {
        height: auto;
        min-height: 100vh;
        overflow: auto;
    }

    .admin-container {
        height: auto;
        min-height: auto;
    }

    .admin-content {
        flex: none;
        overflow: visible;
    }

    .left-column {
        overflow: visible;
    }

    .list-container {
        flex: none;
        min-height: auto;
        max-height: 400px;
    }

    .panel {
        border-radius: var(--radius-lg);
    }

    .panel-header {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 20px;
        gap: 12px;
    }
    
    .panel-header h3 {
        font-size: 1.1rem;
    }

    .panel-controls {
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    .list-item {
        padding: 14px;
    }

    .list-item-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .list-item-actions {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .btn-small {
        padding: 4px 6px;
        font-size: 9px;
        gap: 2px;
        min-width: 45px;
        max-width: 70px;
    }
    
    /* 4縺､縺ｮ繝懊ち繝ｳ縺瑚｡ｨ遉ｺ縺輔ｌ繧句ｴ蜷医・隱ｿ謨ｴ */
    .list-item-actions:has(.btn-small:nth-child(4)) .btn-small {
        padding: 3px 4px;
        font-size: 8px;
        min-width: 40px;
    }
    
    .batch-toolbar {
        flex-direction: column;
        padding: 8px 12px;
        gap: 6px;
    }

    .batch-section {
        width: 100%;
        padding: 6px 8px;
    }

    .batch-divider-v {
        width: 100%;
        min-height: 1px;
        height: 1px;
        margin: 2px 0;
    }

    .batch-btn-group {
        flex-wrap: wrap;
        gap: 4px;
    }

    .batch-action-btn {
        flex: 1 1 calc(50% - 4px);
        font-size: 11px;
        padding: 6px 8px;
    }

    .state-banner-stats {
        display: none;
    }

    .state-banner-text {
        font-size: 0.95rem;
    }

    #register-area,
    #wait-area,
    #answer-area {
        margin: 16px;
        padding: 24px 16px;
        border-radius: var(--radius-lg);
    }
    
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* 邨ｱ險医ム繝・す繝･繝懊・繝・ 繧ｿ繝悶Ξ繝・ヨ莉･荳九〒縺ｯ3蛻励Ξ繧､繧｢繧ｦ繝・*/
    .stats-dashboard {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 12px;
        gap: 10px;
    }
    
    .stat-card {
        flex: none;
        max-width: none;
        min-width: 0;
    }

    .bulk-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .bulk-actions {
        width: 100%;
    }

    .modal-content {
        margin: 20px;
        width: calc(100% - 40px);
    }

    .system-header {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        gap: 15px;
        flex-wrap: wrap;
    }

    .header-info {
        justify-content: flex-end;
    }

    .user-name-display {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .user-greeting {
        font-size: 1rem;
        padding: 10px 16px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    :root {
        font-size: 14px;
        --spacing-md: 12px;
        --spacing-lg: 16px;
    }
    
    /* 繧ｭ繝ｼ繝懊・繝峨・繝ｫ繝励・繧ｿ繝ｳ繧偵せ繝槭・縺ｧ縺ｯ髱櫁｡ｨ遉ｺ */
    #keyboard-help-btn {
        display: none !important;
    }
    
    .btn {
        min-width: auto;
        flex: 1 1 100%;
        padding: 12px 16px;
        font-size: 13px;
        gap: 6px;
    }
    
    .btn i {
        font-size: 14px;
    }

    .control-panel {
        gap: 10px;
    }
    
    /* control-panel蜀・・繝懊ち繝ｳ縺ｯ蟷・00%縺ｫ縺励↑縺・*/
    .control-panel .btn {
        flex: 0 0 auto;
    }

    .admin-header h1 {
        font-size: 1.5rem;
    }
    
    h1 {
        font-size: 1.8rem;
    }

    .panel {
        border-radius: var(--radius-md);
    }

    .panel-header {
        padding: 14px 16px;
    }

    .panel-header h3 {
        font-size: 1rem;
    }
    
    .list-item {
        padding: 12px;
        margin-bottom: 10px;
    }
    
    .btn-small {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .batch-toolbar {
        padding: 8px 12px;
    }
    
    .status-badge {
        font-size: 10px;
        padding: 4px 10px;
    }
    
    #register-area,
    #wait-area,
    #answer-area {
        margin: 12px;
        padding: 20px 14px;
    }
    
    /* 邨ｱ險医ム繝・す繝･繝懊・繝・ 繝｢繝舌う繝ｫ縺ｧ繧・蛻励Ξ繧､繧｢繧ｦ繝医€∵峩縺ｫ繧ｳ繝ｳ繝代け繝・*/
    .stats-dashboard {
        padding: 12px 8px;
        gap: 8px;
        margin-bottom: 16px;
    }
    
    .stat-card {
        padding: 12px 8px;
        min-width: 0;
    }
    
    .stat-card i {
        font-size: 1.5rem;
        margin-right: 8px;
    }
    
    .stat-value {
        font-size: 1.8rem;
        font-weight: 700;
    }
    
    .stat-label {
        font-size: 0.75rem;
    }
    
    /* 繧ｳ繝ｳ繝医Ο繝ｼ繝ｫ繝懊ち繝ｳ: 繧｢繧､繧ｳ繝ｳ縺ｮ縺ｿ陦ｨ遉ｺ縲∵ｨｪ縺ｫ隧ｰ繧√ｋ */
    .control-panel {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        padding: 8px 4px;
        margin-bottom: 8px;
    }

    .control-panel .btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 0;
        font-size: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 8px;
    }

    .control-panel .btn i {
        font-size: 18px;
        margin: 0;
    }
    
    /* 繧ｹ繝槭・縺ｧ縺ｯ繧ｭ繝ｼ繝懊・繝峨す繝ｧ繝ｼ繝医き繝・ヨ髱櫁｡ｨ遉ｺ */
    kbd,
    .shortcut-item {
        display: none !important;
    }
    
    /* 繧ｹ繝槭・縺ｧ縺ｮ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繝舌・隱ｿ謨ｴ縺ｨ菴咏區譛€驕ｩ蛹・*/
    .list-container {
        padding: 8px; /* 蜈ｨ菴鍋噪縺ｫpadding繧貞炎貂・*/
        margin: 0; /* margin繧偵Μ繧ｻ繝・ヨ */
    }
    
    .list-container::-webkit-scrollbar {
        width: 4px; /* 縺輔ｉ縺ｫ邏ｰ縺・*/
    }
    
    .list-container::-webkit-scrollbar-thumb {
        background: rgba(79, 195, 247, 0.6);
        border-radius: 2px;
    }
    
    .list-item {
        padding: 10px; /* 繧｢繧､繝・Β縺ｮpadding繧ょ炎貂・*/
        margin-bottom: 8px; /* 繝槭・繧ｸ繝ｳ繧貞炎貂・*/
    }
    
    /* 繝代ロ繝ｫ縺ｨ繝ｪ繧ｹ繝医・鬮倥＆繧堤ｵｱ荳€・医せ繝槭・縺ｮ縺ｿ・・*/
    .panel {
        height: auto;
        min-height: 300px;
    }
    
    .list-container {
        min-height: 250px; /* 譛€蟆城ｫ倥＆繧定ｨｭ螳・*/
    }
}


/* Very small screens - button overflow prevention */
@media (max-width: 400px) {
    .list-item-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .list-item-actions {
        justify-content: center;
        width: 100%;
        max-width: 100%;
        gap: 4px;
    }
    
    .btn-small {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 23%;
        padding: 3px 2px;
        font-size: 8px;
        gap: 1px;
    }
    
    /* 4縺､縺ｮ繝懊ち繝ｳ譎ゅ・繧｢繧､繧ｳ繝ｳ縺ｮ縺ｿ陦ｨ遉ｺ */
    .list-item-actions:has(.btn-small:nth-child(4)) .btn-small {
        padding: 4px;
        font-size: 0;
        min-width: 32px;
        max-width: 22%;
    }
    
    .list-item-actions:has(.btn-small:nth-child(4)) .btn-small i {
        font-size: 12px;
    }
    
    .list-item-name {
        text-align: center;
        justify-content: center;
    }
    
    /* 邨ｱ險医ム繝・す繝･繝懊・繝・ 400px莉･荳九〒繧・蛻励げ繝ｪ繝・ラ邯ｭ謖√€∫ｸｦ蝙九き繝ｼ繝・*/
    .stats-dashboard {
        padding: 8px;
        gap: 6px;
    }
    
    .stat-card {
        padding: 8px 6px;
        border-radius: var(--radius-sm);
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .stat-card i {
        font-size: 1.4rem;
        margin-right: 0;
        margin-bottom: 4px;
    }
    
    .stat-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .stat-value {
        font-size: 1.4rem;
        margin-bottom: 2px;
    }
    
    .stat-label {
        font-size: 0.7rem;
        white-space: nowrap;
    }
    
    /* 繧ｳ繝ｳ繝医Ο繝ｼ繝ｫ繝懊ち繝ｳ: 繧｢繧､繧ｳ繝ｳ縺ｮ縺ｿ陦ｨ遉ｺ・医＆繧峨↓繧ｳ繝ｳ繝代け繝茨ｼ・*/
    .control-panel .btn {
        min-width: 44px;
        padding: 10px 8px;
        font-size: 0;
    }
    
    .control-panel .btn i {
        font-size: 16px;
        margin: 0;
    }
    
    /* 繝倥ャ繝€繝ｼ繧ｿ繧､繝医Ν繧貞ｰ上＆縺・*/
    .admin-header h1 {
        font-size: 1.3rem;
    }
    
    .system-title {
        font-size: 1.1rem;
    }
}

/* Extra small screens for very tight spaces */
@media (max-width: 320px) {
    .btn-small {
        padding: 3px 4px;
        font-size: 8px;
        gap: 1px;
    }
    
    .list-item-actions {
        gap: 4px;
    }
    
    .system-header {
        padding: 10px;
        gap: 10px;
    }
    
    .system-title {
        font-size: 1.2rem;
        letter-spacing: 1px;
    }
}

/* Dark Mode Styles: 蟒・ｭ｢ */