/* ==========================================================================
   CALAKAN Enterprise Portal - Responsive Breakpoints
   Desktop > Laptop > Tablet > Mobile
   ========================================================================== */

/* ---- Large desktop (<= 1400px) ---- */
@media (max-width: 1400px) {
    :root { --shell-max: 1140px; }
}

/* ---- Laptop (<= 1100px) ---- */
@media (max-width: 1100px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-card  { display: none; }
    .split      { grid-template-columns: 1fr; gap: var(--sp-6); }
    .topbar-search { max-width: 360px; }
}

/* ---- Tablet (<= 860px) ---- */
@media (max-width: 860px) {
    :root { --topbar-h: 64px; }
    .shell { padding: 0 var(--sp-5); }
    .hero-shell { padding: 0 var(--sp-5); }
    .topbar-inner {
        grid-template-columns: auto 1fr;
        gap: var(--sp-3);
        padding: 0 var(--sp-5);
    }
    .topbar-search { order: 3; grid-column: 1 / -1; max-width: none; margin-top: var(--sp-2); }
    .topbar { height: auto; padding: var(--sp-2) 0; }
    .topbar-inner { grid-template-columns: auto auto; }
    .brand-sub { display: none; }
    .profile-meta { display: none; }
    .profile-trigger { padding: 4px; }
    .profile-trigger > i { display: none; }
    #clockBtn .clock-text { display: none; }
    #clockBtn { width: 42px; }

    .hero { padding: var(--sp-7) 0 var(--sp-5); }
    .hero-inner { max-width: none; }
    .hero-text { max-width: none; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); max-width: none; }
    .section { padding: var(--sp-6) 0; }
    .status-grid { grid-template-columns: 1fr; }
    .section-head { flex-direction: column; align-items: flex-start; }
    .section-filters { width: 100%; overflow-x: auto; padding-bottom: 4px; }
    .section-filters::-webkit-scrollbar { height: 4px; }
    .services-grid { grid-template-columns: 1fr 1fr; }
    .services-head { flex-direction: column; }
    .services-cta-top { align-self: stretch; justify-content: center; }
}

/* ---- Mobile (<= 560px) ---- */
@media (max-width: 560px) {
    :root { --fs-4xl: 2.25rem; }
    .shell { padding: 0 var(--sp-4); }
    .hero-shell { padding: 0 var(--sp-4); }
    .app-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
    .hero-stats { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
    .stat { padding: var(--sp-3); }
    .stat-num { font-size: var(--fs-lg); }
    .quick-actions { grid-template-columns: 1fr 1fr; }
    .services-grid { grid-template-columns: 1fr; }
    .footer-inner { flex-direction: column; text-align: center; gap: var(--sp-2); }
    .footer-links { flex-wrap: wrap; justify-content: center; }
    .notif-drawer { right: var(--sp-3); width: calc(100vw - 24px); }
    .brand-name { font-size: var(--fs-md); }
    .brand-mark { width: 36px; height: 36px; font-size: 1.05rem; }
}

/* ---- Small mobile (<= 380px) ---- */
@media (max-width: 380px) {
    .quick-actions { grid-template-columns: 1fr; }
    .hero-stats { grid-template-columns: 1fr; }
    .services-grid { grid-template-columns: 1fr; }
    .services-banner { flex-direction: column; text-align: center; }
    .services-banner-actions { width: 100%; justify-content: center; }
}

/* ---- Print ---- */
@media print {
    .bg-gradient, .bg-particles, .bg-overlay, .topbar, .footer, .notif-drawer { display: none !important; }
    body { background: #fff; color: #000; }
    .glass, .app-card, .status-widget, .announcement, .quick-action, .service-card, .services-banner {
        background: #fff; border: 1px solid #ccc; box-shadow: none; backdrop-filter: none;
    }
}