/* ============================= */ /* Base (User pages: mobile card) */ /* ============================= */ html, body { height: 100%; margin: 0; display: flex; justify-content: center; /* horizontal center */ align-items: center; /* vertical center */ background: #f4f6f9; font-family: Arial, sans-serif; } .container { background: white; padding: 30px 25px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); width: 100%; max-width: 400px; box-sizing: border-box; /* Allow long pages to scroll inside card */ max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; align-items: center; } h2 { margin-bottom: 25px; font-weight: 700; font-size: 26px; text-align: center; } input, select, button { width: 100%; max-width: 350px; padding: 15px; margin-top: 15px; font-size: 18px; border-radius: 8px; border: 1px solid #ccc; box-sizing: border-box; font-weight: 500; } button { background-color: #0066cc; color: white; border: none; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #004c99; } /* User tables (if any): allow horizontal scroll on small screens */ table { width: 100%; max-width: 400px; border-collapse: collapse; margin-top: 20px; box-sizing: border-box; /* On user pages, table can scroll inside card */ overflow-x: auto; display: block; } th, td { padding: 12px; border: 1px solid #ddd; text-align: center; font-size: 16px; word-wrap: break-word; } /* Mobile tweaks */ @media (max-width: 480px) { .container { padding: 25px 20px; max-width: 95vw; } h2 { font-size: 28px; } input, select, button { font-size: 20px; padding: 18px; max-width: 100%; } table, th, td { font-size: 18px; padding: 14px 10px; } } /* ===================================== */ /* Admin logs page (full-width desktop) */ /* Use: */ /* */ /* ===================================== */ html.admin-html, html.admin-html body.admin-body { height: auto !important; margin: 0 !important; padding: 0 !important; display: block !important; /* override base flex-centering */ justify-content: unset !important; align-items: unset !important; } body.admin-body { background: #f4f6f9; padding: 20px; font-family: Arial, sans-serif; } /* Full-width admin container */ .admin-container { width: 100%; background: #fff; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); padding: 16px; box-sizing: border-box; overflow-x: hidden; /* prevent horizontal scroll */ } /* Admin table: fit to screen */ .admin-table { width: 100%; border-collapse: collapse; table-layout: fixed; /* force columns to fit */ word-break: break-word; } .admin-table th, .admin-table td { border: 1px solid #ddd; padding: 8px; font-size: 13px; text-align: center; vertical-align: top; white-space: normal; } /* Make "Others" column easier to read */ .admin-table td:nth-child(7) { text-align: left; } /* IMPORTANT: override base user-table rule (display:block, max-width:400px) */ html.admin-html table, body.admin-body table { display: table !important; width: 100% !important; max-width: none !important; overflow-x: visible !important; } /* ============================= */ /* Admin toolbar (single version) */ /* ============================= */ .admin-toolbar { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: nowrap; margin-bottom: 12px; } .admin-toolbar-form { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } /* Toolbar controls should not be full-width */ .admin-toolbar select, .admin-toolbar .admin-btn { width: auto !important; max-width: none !important; margin-top: 0 !important; padding: 8px 12px !important; font-size: 14px !important; height: 38px; box-sizing: border-box; } /* Buttons inside admin toolbar */ .admin-btn { background: #0066cc; color: #fff; border: none; border-radius: 6px; cursor: pointer; } .admin-btn:hover { background: #004c99; } .admin-btn-secondary { background: #6c757d; } .admin-btn-secondary:hover { background: #545b62; } /* Allow toolbar wrap on smaller screens */ @media (max-width: 768px) { .admin-toolbar, .admin-toolbar-form { flex-wrap: wrap; } } /* ============================= */ /* Pickup page: desktop side view */ /* ============================= */ .pickup-layout { width: 100%; } /* Desktop: 2 columns */ @media (min-width: 900px) { .pickup-layout { display: flex; gap: 20px; align-items: flex-start; justify-content: center; padding: 20px; box-sizing: border-box; } /* Main form stays as your mobile container width */ .pickup-main { flex: 0 0 420px; } /* Side panel takes remaining space */ .pickup-side { flex: 1; max-width: 900px; } } /* Mobile: stacked (unchanged feel) */ @media (max-width: 899px) { .pickup-layout { display: block; } .pickup-side { margin-top: 20px; } } /* Fix quick view table layout */ .pickup-side{ overflow-x:auto; /* ✅ ADD THIS */ } .pickup-side table{ width:100%; table-layout:auto; /* ❗ CHANGE fixed → auto */ } /* Only prevent wrapping in Status column */ .pickup-side td:nth-child(2), .pickup-side th:nth-child(2){ white-space:nowrap; } /* Allow other columns to wrap normally */ .pickup-side td, .pickup-side th{ white-space:nowrap; word-wrap:normal; } /* Quick view status badges */ .status-available{ background:#d4edda; color:#155724; padding:4px 10px; border-radius:6px; font-weight:600; font-size:13px; } .status-borrowed{ background:#f8d7da; color:#721c24; padding:4px 10px; border-radius:6px; font-weight:600; font-size:13px; } /* Prevent room name wrapping in quick view */ .pickup-side td:nth-child(4), .pickup-side th:nth-child(4){ white-space: nowrap; } /* ================================= */ /* Fix pickup page layout (mobile) */ /* ================================= */ body.pickup-page { display:block; align-items:unset; justify-content:unset; } /* Prevent layout stretching */ .pickup-layout{ width:100%; max-width:100%; margin:auto; } /* Mobile stack */ @media (max-width:899px){ .pickup-layout{ display:block; padding:10px; } .pickup-main{ margin:auto; } .pickup-side{ margin-top:20px; width:100%; } } /* Prevent room name wrapping in quick view */ .pickup-side td:nth-child(4), .pickup-side th:nth-child(4){ white-space: nowrap; } /* Prevent key column wrapping */ .pickup-side td:nth-child(1), .pickup-side th:nth-child(1){ white-space: nowrap; } /* Prevent holder column wrapping */ .pickup-side td:nth-child(3), .pickup-side th:nth-child(3){ white-space: nowrap; } /* ============================= */ /* Mobile Quick View Drawer */ /* ============================= */ .quickview-toggle{ display:none; margin-bottom:10px; } /* mobile only */ @media (max-width:899px){ .quickview-toggle{ display:block; width:100%; } .pickup-side{ position:fixed; top:0; right:-100%; width:85%; height:100%; background:white; z-index:999; overflow-y:auto; transition:right 0.3s ease; padding:20px; box-shadow:-3px 0 10px rgba(0,0,0,0.2); } .pickup-side.open{ right:0; } .quickview-close{ float:right; background:#ccc; color:black; border:none; padding:6px 10px; cursor:pointer; } } /* Hide quick view controls by default (desktop) */ .quickview-toggle, .quickview-close{ display:none; } /* Mobile only */ @media (max-width:899px){ .quickview-toggle{ display:block; width:90%; margin:0 auto 10px auto; text-align:center; } .quickview-close{ display:inline-block; float:right; background:#ccc; color:black; border:none; padding:6px 10px; cursor:pointer; } } /* Desktop: fit quick view table fully */ @media (min-width:900px){ .pickup-side table{ display:table; width:100%; table-layout:auto; } } /* ============================= */ /* Perfect center for pickup page (mobile) */ /* ============================= */ @media (max-width:899px){ .pickup-layout{ width:100%; max-width:420px; margin:0 auto; padding:0; box-sizing:border-box; } .pickup-main{ width:100%; margin:0 auto; } .quickview-toggle{ display:block; width:100%; margin:10px auto; } } /* ============================= */ /* Admin logs mobile layout fix */ /* ============================= */ @media (max-width:768px){ .admin-container{ overflow-x:auto; } .admin-table{ min-width:800px; table-layout:auto; } .admin-table th, .admin-table td{ white-space:nowrap; word-break:normal; } } /* ============================= */ /* Admin logs mobile column fix */ /* ============================= */ @media (max-width:768px){ /* Keep ID, Type and Key on one line */ .admin-table td:nth-child(1), .admin-table th:nth-child(1), .admin-table td:nth-child(3), .admin-table th:nth-child(3), .admin-table td:nth-child(4), .admin-table th:nth-child(4){ white-space:nowrap; } /* Allow other columns to wrap normally */ .admin-table td, .admin-table th{ word-break:break-word; } } /* Prevent admin log type from breaking */ .log-type{ white-space:nowrap; display:inline-block; } /* ============================= */ /* Admin CRUD forms */ /* ============================= */ .admin-form{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:15px; } .admin-form input, .admin-form select{ padding:8px 10px; font-size:14px; border-radius:6px; border:1px solid #ccc; height:38px; box-sizing:border-box; } .admin-form button{ padding:8px 14px; font-size:14px; height:38px; } .admin-actions{ display:flex; gap:6px; justify-content:center; } .admin-btn-danger{ background:#dc3545; } .admin-btn-danger:hover{ background:#b02a37; }