/* ========================================
   簡訊帳號管理 - 頁面特有樣式
   檔案位置：Content/MessageAccountManage.css
   
   共同樣式已移至 Site.css：
   - 頁面容器 (.page-container, .page-header, .page-title, .page-description)
   - 搜尋面板 (.search-panel, .search-row, .search-field-inline, .search-label-inline, .search-input)
   - 自動完成 (.autocomplete-field, .autocomplete-container, .autocomplete-dropdown, .autocomplete-item, .autocomplete-value, .autocomplete-name)
   - 結果面板 (.result-panel, .result-table)
   - 表單 (.form-group-inline, .form-label-inline, .form-control, .error-message)
   - 按鈕 (.btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-sm)
   - 分頁 (.pagination, .pagination-info)
   - 彈窗 (.modal, .modal-dialog, .modal-header, .modal-title, .modal-body, .modal-footer)
   ======================================== */

/* 密碼相關樣式 - 這是本頁面特有的 */
.password-cell {
    position: relative;
}

.password-mask {
    color: #999;
    letter-spacing: 2px;
}

.password-text {
    font-family: monospace;
    word-break: break-all;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .page-container {
        padding: 10px;
    }

    .search-row {
        grid-template-columns: 1fr;
    }

    .search-field-inline,
    .search-field-inline.w-6 {
        grid-column: span 1;
    }

    .search-actions {
        flex-direction: column;
    }

    .search-actions .btn {
        width: 100%;
    }

    .result-table {
        font-size: 12px;
    }

    .result-table th,
    .result-table td {
        padding: 8px;
    }

    .btn-sm {
        padding: 4px 8px;
        font-size: 11px;
    }

    .pagination {
        flex-direction: column;
        gap: 8px;
    }

    .modal-dialog {
        width: 95%;
    }
}