/* ==========================================
CloudStore - Responsive CSS
ເພີ່ມໃສ່ທຸກໄຟລ PHP ໃນ :
ສຳລັບ admin/ ໃຊ້:
========================================== */
/* ======= Mobile Hamburger Button ======= */
.hamburger {
display: none;
position: fixed;
top: 14px;
left: 14px;
z-index: 999;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
font-size: 20px;
cursor: pointer;
align-items: center;
justify-content: center;
}
/* ======= Sidebar Overlay ======= */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 150;
left: 260px;
}
.sidebar-overlay.show { display: block; }
/* ======= Tablet (max 1024px) ======= */
@media (max-width: 1024px) {
:root { --sidebar-w: 220px; }
.stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
.pkg-grid { grid-template-columns: repeat(2, 1fr) !important; }
.file-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
}
/* ======= Mobile (max 768px) ======= */
@media (max-width: 768px) {
/* Hamburger */
.hamburger { display: flex; }
/* Sidebar - ຊ່ອນໄວ້ຄ້ານຊ້າຍ */
.sidebar {
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 200;
width: 260px !important;
}
.sidebar.open { transform: translateX(0); }
/* Main - ໃຊ້ຄວາມກວ້າງເຕັມ */
.main {
margin-left: 0 !important;
width: 100%;
}
/* Topbar */
.topbar {
padding: 14px 16px 14px 64px !important;
flex-wrap: wrap;
gap: 10px;
}
.page-title { font-size: 16px !important; }
.topbar-actions { gap: 6px; }
.topbar-actions .btn { padding: 8px 12px !important; font-size: 12px !important; }
/* Content */
.content { padding: 16px !important; }
/* Stats Grid */
.stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.stat-card { padding: 14px !important; }
.stat-value { font-size: 18px !important; }
/* File Grid */
.file-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; gap: 10px !important; }
.file-card { padding: 12px !important; }
.file-icon { font-size: 30px !important; }
.file-name { font-size: 11px !important; }
/* Upload Zone */
.upload-zone { padding: 24px 16px !important; margin-bottom: 16px !important; }
.upload-zone .upload-icon { font-size: 36px !important; }
.upload-zone h3 { font-size: 14px !important; }
/* Package Grid */
.pkg-grid { grid-template-columns: 1fr !important; max-width: 340px; margin-left: auto; margin-right: auto; }
/* Table - Scroll horizontal */
.card { overflow-x: auto; padding: 16px !important; }
table { min-width: 500px; }
/* List items */
.file-list-item { padding: 10px 12px !important; gap: 10px !important; }
.list-name { font-size: 13px !important; }
/* Profile */
.stats-row { grid-template-columns: 1fr !important; gap: 8px !important; }
/* Modal */
.modal-box { padding: 20px !important; margin: 16px; width: calc(100% - 32px) !important; }
/* Admin table */
.table td, .table th { padding: 10px 10px !important; font-size: 12px !important; }
/* Section header */
.section-header { flex-wrap: wrap; gap: 8px; }
}
/* ======= Small Mobile (max 480px) ======= */
@media (max-width: 480px) {
.stats-grid { grid-template-columns: 1fr 1fr !important; }
.file-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.topbar-actions .btn span { display: none; }
.pkg-grid { grid-template-columns: 1fr !important; }
}