/* ============================================================ responsive.css — SkillHarbor Global Responsive Styles Link this in every PHP file inside : ============================================================ */ /* ══════════════════════════════════════════════════════════════ HAMBURGER BUTTON — hidden on desktop, shown on mobile/tablet ══════════════════════════════════════════════════════════════ */ .hamburger-btn { display: none; /* hidden on desktop */ align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border2, #252540); background: transparent; color: var(--muted2, #8888aa); cursor: pointer; flex-shrink: 0; transition: all .2s; margin-right: 4px; } .hamburger-btn:hover { background: rgba(124,106,247,0.1); color: var(--accentH, #9d8fff); border-color: rgba(124,106,247,0.3); } .hamburger-btn svg { width: 18px; height: 18px; } /* ── Dark overlay behind open sidebar — click it to close ── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 149; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .sidebar-overlay.active { display: block; } /* ══════════════════════════════════════════════════════════════ TABLET (max-width: 768px) ══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Show hamburger on tablet */ .hamburger-btn { display: flex; } /* Sidebar slides in from left as overlay */ .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 240px; z-index: 150; transform: translateX(-100%); transition: transform .3s cubic-bezier(.22,1,.36,1); } .sidebar.open { transform: translateX(0); } /* Main content full width — sidebar is now overlay */ .main-content { margin-left: 0 !important; padding: 24px 20px !important; } /* Stats 2 columns on tablet */ .stats-grid { grid-template-columns: repeat(2,1fr); } /* Quick actions 1 column */ .quick-grid { grid-template-columns: 1fr; } /* Topbar logos smaller */ .logo-img-parent { height: 32px; } .logo-img-child { height: 26px; } /* Hide username and role tags to save space */ .user-name { display: none; } .admin-tag, .mis-tag { display: none; } /* index.php card */ .card { padding: 36px 36px 32px; } /* index.php orbs */ .orb-1 { width: 380px; height: 380px; } .orb-2 { width: 280px; height: 280px; } .orb-3 { width: 180px; height: 180px; } /* index.php logos */ .brand-logo-parent { height: 56px; max-width: 150px; } .brand-logo-child { height: 44px; max-width: 115px; } /* index.php register panel */ #panel-register { max-height: 60vh; } /* dashboard orbs */ body::before { width: 400px; height: 400px; } body::after { width: 320px; height: 320px; } /* Tables scroll horizontally */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } /* Modals */ .modal-content, .modal-dialog { width: 95% !important; margin: 10px auto !important; } } /* ══════════════════════════════════════════════════════════════ MOBILE (max-width: 480px) ══════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { /* Show hamburger on mobile */ .hamburger-btn { display: flex; } /* Topbar tighter */ .topbar { padding: 0 12px; gap: 4px; } /* Hide nav buttons (Notification, Support, Settings) */ .top-nav { display: none; } /* Topbar logos smaller */ .logo-img-parent { height: 28px; max-width: 90px; padding: 3px 7px; } .logo-img-child { height: 24px; max-width: 76px; padding: 3px 6px; } .logo-divider { height: 22px; } /* Sidebar slides in — slightly wider for tap comfort */ .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 260px; z-index: 150; transform: translateX(-100%); transition: transform .3s cubic-bezier(.22,1,.36,1); } .sidebar.open { transform: translateX(0); } /* Main content full width */ .main-content { margin-left: 0 !important; padding: 16px !important; } /* Stats 2 columns */ .stats-grid { grid-template-columns: repeat(2,1fr); gap: 10px; } .stat-card { padding: 14px; } .stat-value { font-size: 20px; } /* Quick actions 1 column */ .quick-grid { grid-template-columns: 1fr; gap: 10px; } /* Welcome banner stack vertically */ .welcome-banner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; } /* index.php card */ .card { padding: 28px 20px 24px; border-radius: 20px; } /* index.php orbs */ .orb-1 { width: 260px; height: 260px; top: -100px; left: -80px; } .orb-2 { width: 200px; height: 200px; bottom: -60px; right: -60px; } .orb-3 { display: none; } /* index.php brand logos */ .brand { gap: 10px; } .brand-logo-parent { height: 48px; max-width: 130px; padding: 5px 10px; } .brand-logo-child { height: 38px; max-width: 100px; padding: 5px 8px; } .brand-divider { height: 38px; } /* index.php tabs */ .tab-btn { font-size: 13px; padding: 8px 6px; margin-bottom: 0; } /* index.php form */ .form-title { font-size: 20px; } .form-sub { font-size: 12.5px; margin-bottom: 18px; } #panel-register { max-height: 50vh; } /* Inputs */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"] { font-size: 14px !important; padding: 10px 12px 10px 38px; } select, textarea { font-size: 14px !important; padding: 10px 12px !important; } /* Buttons */ .submit-btn, button[type="submit"] { font-size: 14px; padding: 12px; margin-top: 16px; } /* Alerts */ .alert { font-size: 12.5px; padding: 10px 12px; } /* Forgot password tap target */ a[href="forgot_password.php"] { font-size: 13px; display: inline-block; padding: 4px 0; } /* dashboard avatar */ .avatar { width: 58px; height: 58px; font-size: 22px; margin-bottom: 18px; } /* Headings */ h1 { font-size: 20px; } h2 { font-size: 18px; } h3 { font-size: 16px; } /* dashboard badge */ .badge { font-size: 12px; padding: 3px 12px; margin: 14px 0 22px; } /* dashboard logout */ .logout-btn { font-size: 13px; padding: 9px 20px; } /* dashboard orbs */ body::before { width: 260px; height: 260px; top: -60px; left: -60px; } body::after { width: 220px; height: 220px; bottom: -30px; right: -30px; } /* Tables */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } /* Modals */ .modal-content, .modal-dialog { width: 100% !important; margin: 0 !important; border-radius: 16px 16px 0 0 !important; } /* Sections */ .section, .container, .wrapper { padding: 16px !important; } /* Flex rows */ .flex-row, .row { flex-direction: column !important; } /* Labels */ label { font-size: 12px; } /* Page header */ .page-header { margin-bottom: 16px; } .page-title { font-size: 16px; } } /* ── Sidebar close (X) button — shown only on mobile/tablet ── */ @media (max-width: 768px) { .sidebar-close-btn { display: flex !important; } }