/* BIGG4-CALL responsive overrides.
   Loaded after each page's existing styles so desktop behavior stays intact. */

html {
    -webkit-text-size-adjust: 100%;
}

img,
video,
canvas {
    max-width: 100%;
}

@media (hover: none), (pointer: coarse) {
    button,
    input,
    select,
    textarea,
    [role="button"] {
        font-size: max(16px, 1em);
    }

    button,
    a,
    select,
    input[type="checkbox"],
    input[type="radio"] + label {
        touch-action: manipulation;
    }
}

/* Authentication */
@media (max-width: 600px) {
    body.auth-page {
        min-height: 100dvh;
        height: auto;
        padding: 76px 14px 20px;
        overflow-y: auto;
        align-items: flex-start;
    }

    .auth-page .lang-switcher-wrap {
        top: 14px !important;
        right: 14px !important;
    }

    .auth-page .card-wrap {
        width: 100%;
        min-height: calc(100dvh - 96px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .auth-page .card {
        width: 100% !important;
        max-width: 430px !important;
        max-height: none !important;
        padding: 30px 22px !important;
        border-radius: 22px !important;
        overflow: visible !important;
    }

    .auth-page .brand-logo-wrap {
        margin-bottom: 10px !important;
    }

    .auth-page .brand-logo-wrap img {
        width: 140px !important;
        max-height: 88px !important;
    }

    .auth-page .brand h1 {
        font-size: clamp(23px, 7vw, 30px);
    }

    .auth-page .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .auth-page .form-row .form-group {
        width: 100% !important;
    }

    .auth-page .modal-box {
        width: calc(100vw - 28px) !important;
        max-width: 420px;
        max-height: calc(100dvh - 28px);
        padding: 26px 20px !important;
        overflow-y: auto;
    }
}

@media (max-width: 380px) {
    .auth-page .card {
        padding: 24px 17px !important;
    }

    .auth-page .account-type-selector {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 650px) {
    body.auth-page {
        height: auto;
        min-height: 100dvh;
        padding-top: 24px;
        padding-bottom: 24px;
        overflow-y: auto;
        align-items: flex-start;
    }

    .auth-page .card-wrap {
        min-height: 0;
    }

    .auth-page .card {
        max-height: none !important;
        margin: auto;
    }

    .auth-page .lang-switcher-wrap {
        position: absolute !important;
    }
}

/* Main chat shell */
@media (max-width: 768px) {
    body.app-shell {
        overscroll-behavior: none;
    }

    .app-shell .sidebar,
    .app-shell .content {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .app-shell .sidebar-header,
    .app-shell .content_header {
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
    }

    .app-shell .profile-avatar-name {
        max-width: 38vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-shell .content_inside {
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .app-shell .modal {
        padding: 12px !important;
        align-items: center;
        overflow-y: auto;
    }

    .app-shell .modal-content {
        width: min(100%, 520px) !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 24px);
        margin: auto !important;
        padding: 22px 18px !important;
        overflow-y: auto;
        border-radius: 20px !important;
    }

    .app-shell .mentor-card,
    .app-shell .appointment-card {
        width: 100%;
        min-width: 0;
    }

    .app-shell .message-file-attachment {
        max-width: min(250px, 72vw);
    }

    .app-shell #invite-link-modal {
        margin: 10px !important;
    }
}

/* Call lobby and active call */
@media (max-width: 900px) {
    .app-shell #call-lobby-modal .modal-content {
        padding: max(58px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)) !important;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .app-shell #call-lobby-modal .close-modal {
        top: max(10px, env(safe-area-inset-top));
        right: 18px;
        font-size: 34px;
    }

    .app-shell #call-lobby-modal #lobby-title {
        margin: 8px 0 18px !important;
        font-size: clamp(24px, 7vw, 34px) !important;
        text-align: center;
    }

    .app-shell #call-lobby-modal .lobby-video-container {
        width: min(100%, 720px) !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9;
        max-height: 56dvh;
    }

    .app-shell #lobby-join-btn {
        width: min(100%, 320px) !important;
        margin-top: 22px !important;
    }

    .app-shell .active-call-overlay {
        height: 100dvh;
        min-height: 100dvh;
    }

    .app-shell .call-video-area {
        width: 100%;
        min-width: 0;
    }

    .app-shell .overlay-header {
        top: max(10px, env(safe-area-inset-top));
        left: 12px;
        right: 12px;
        gap: 8px;
        align-items: flex-start;
    }

    .app-shell .overlay-header > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px !important;
    }

    .app-shell .call-timer,
    .app-shell .call-expiry-countdown {
        padding: 7px 11px;
        font-size: 12px;
    }

    .app-shell .active-call-overlay .call-btn-participants,
    .app-shell .active-call-overlay .call-btn-leave-stream,
    .app-shell .active-call-overlay .call-btn-reject {
        min-height: 40px;
        padding: 8px 12px !important;
        margin: 0 !important;
        font-size: 11px;
    }

    .app-shell .group-call-layout {
        padding: 68px 10px 102px;
        gap: 8px;
    }

    .app-shell #active-call-overlay .top-cameras-row {
        height: 94px;
        min-height: 94px;
        justify-content: flex-start;
        gap: 8px;
        padding: 4px;
    }

    .app-shell #active-call-overlay .top-cameras-row .participant-item {
        width: 142px !important;
        max-width: 142px !important;
        height: 80px !important;
        max-height: 80px !important;
        border-radius: 10px !important;
    }

    .app-shell .bottom-cameras-container {
        gap: 8px;
        min-height: 0;
    }

    .app-shell #active-call-overlay .main-camera-slot {
        min-width: 0;
    }

    .app-shell #active-call-overlay .main-camera-slot .participant-item {
        border-radius: 12px !important;
    }

    .app-shell .overlay-controls {
        position: fixed;
        left: 50%;
        bottom: max(10px, env(safe-area-inset-bottom));
        width: max-content;
        max-width: calc(100vw - 20px);
        gap: 8px;
        padding: 9px 11px;
        border-radius: 28px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .app-shell .overlay-controls::-webkit-scrollbar {
        display: none;
    }

    .app-shell .overlay-controls .lobby-ctrl-btn {
        width: 48px;
        height: 48px;
        min-width: 48px;
        flex: 0 0 48px;
    }

    .app-shell .overlay-controls .lobby-ctrl-btn svg {
        width: 22px;
        height: 22px;
    }

    .app-shell #call-chat-sidebar,
    .app-shell #call-participants-sidebar {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        z-index: 300 !important;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .app-shell #group-call-layout.screenshare-active #top-cameras-row {
        height: 86px;
        min-height: 86px;
        max-height: 86px;
        padding: 5px 8px;
    }

    .app-shell #group-call-layout.screenshare-active #top-cameras-row .participant-item {
        width: 120px !important;
        min-width: 120px !important;
        height: 74px !important;
    }

    .app-shell #group-call-layout.screenshare-active #main-camera-1 {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .app-shell #group-call-layout.screenshare-active #main-camera-1 .participant-item,
    .app-shell .screen-share-main {
        border-radius: 10px !important;
    }

    .app-shell .screen-share-controls {
        right: 8px;
        bottom: 8px;
        gap: 6px;
        padding: 6px;
    }

    .app-shell .screen-control-btn {
        width: 36px;
        height: 36px;
    }

    .app-shell .screen-volume-slider {
        bottom: 91px;
    }
}

@media (max-width: 560px) {
    .app-shell .overlay-header {
        flex-direction: column;
        align-items: stretch;
    }

    .app-shell .overlay-header > div {
        justify-content: flex-start;
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 3px;
    }

    .app-shell .group-call-layout {
        padding-top: 108px;
    }

    .app-shell .bottom-cameras-container {
        flex-direction: column;
    }

    .app-shell #active-call-overlay .main-camera-slot {
        width: 100%;
        max-width: 100%;
        flex: 1 1 50%;
    }

    .app-shell #active-call-overlay .main-camera-slot:empty,
    .app-shell #active-call-overlay .main-camera-slot .slot-placeholder {
        display: none;
    }

    .app-shell #active-call-overlay .participant-name-tag {
        left: 7px !important;
        bottom: 7px !important;
        padding: 4px 8px !important;
        font-size: 10px !important;
    }

    .app-shell .overlay-controls .lobby-ctrl-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        flex-basis: 44px;
    }

    .app-shell #call-lobby-modal .lobby-controls {
        gap: 12px !important;
    }
}

@media (max-height: 560px) and (orientation: landscape) {
    .app-shell #call-lobby-modal .modal-content {
        padding: 16px 70px !important;
    }

    .app-shell #call-lobby-modal #lobby-title {
        font-size: 22px !important;
        margin: 0 0 8px !important;
    }

    .app-shell #call-lobby-modal .lobby-video-container {
        width: min(58vw, 620px) !important;
        max-height: 62dvh;
    }

    .app-shell #lobby-join-btn {
        margin-top: 10px !important;
        padding: 10px !important;
    }

    .app-shell .group-call-layout {
        padding: 54px 8px 76px;
    }

    .app-shell #active-call-overlay .top-cameras-row {
        height: 70px;
        min-height: 70px;
    }

    .app-shell #active-call-overlay .top-cameras-row .participant-item {
        width: 104px !important;
        height: 58px !important;
    }

    .app-shell .overlay-controls .lobby-ctrl-btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
        flex-basis: 42px;
    }
}

/* Mentor calendar */
@media (max-width: 1024px) {
    body.calendar-page {
        height: auto;
        min-height: 100dvh;
        overflow-y: auto;
    }

    .calendar-page .topbar {
        position: sticky;
        top: 0;
        z-index: 100;
        height: auto;
        min-height: 64px;
        padding: 10px 14px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .calendar-page .topbar > div:last-child {
        display: flex !important;
        flex: 1 1 100%;
        gap: 8px !important;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .calendar-page .topbar #user-label {
        display: none;
    }

    .calendar-page .topbar .icon-btn,
    .calendar-page .topbar .save-btn {
        min-height: 42px;
        white-space: nowrap;
    }

    .calendar-page .main {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .calendar-page .settings-panel {
        width: 100%;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
        overflow: visible;
        padding: 14px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .calendar-page .calendar-view {
        min-height: 720px;
        overflow: visible;
    }

    .calendar-page .cal-header {
        position: sticky;
        top: 118px;
        z-index: 50;
        background: var(--bg-main);
        padding: 12px 14px;
    }

    .calendar-page .cal-grid {
        display: grid;
        min-width: 820px;
        overflow: visible;
    }

    .calendar-page .calendar-view {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .calendar-page .custom-popup-content {
        width: calc(100vw - 28px) !important;
        max-height: calc(100dvh - 28px);
        overflow-y: auto;
    }
}

@media (max-width: 680px) {
    .calendar-page .topbar-left {
        min-width: 0;
    }

    .calendar-page .topbar h1 {
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calendar-page .topbar > div:last-child {
        scroll-snap-type: x proximity;
    }

    .calendar-page .topbar > div:last-child > button {
        scroll-snap-align: start;
    }

    .calendar-page .settings-panel {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .calendar-page .day-row {
        gap: 8px;
    }

    .calendar-page .day-label {
        width: 42px;
    }

    .calendar-page .cal-header {
        top: 116px;
        justify-content: space-between;
    }

    .calendar-page .cal-month-label {
        font-size: 15px;
    }
}

/* Admin */
@media (max-width: 900px) {
    body.admin-page {
        min-height: 100dvh;
        height: auto;
        overflow-y: auto;
    }

    .admin-page .main-layout {
        min-height: 0;
    }

    .admin-page .content-area {
        overflow: visible;
    }

    .admin-page .page {
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    .admin-page .sidebar {
        padding-top: max(30px, env(safe-area-inset-top));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        overflow-y: auto;
    }

    .admin-page .table-wrap {
        margin: 0 -12px;
        width: calc(100% + 24px);
        padding: 0 12px 4px;
    }

    .admin-page .action-btn,
    .admin-page .role-select {
        min-height: 40px;
        margin: 3px 2px;
    }

    .admin-page #grafana-iframe {
        min-height: 70dvh;
    }
}

@media (max-width: 600px) {
    .admin-page .top-nav {
        min-height: 62px;
    }

    .admin-page .logo-section img {
        max-width: 120px;
        height: auto;
    }

    .admin-page .nav-user-info {
        min-width: 0;
        max-width: 45vw;
    }

    .admin-page .nav-user-info span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-page .data-card h2,
    .admin-page .data-card h3 {
        overflow-wrap: anywhere;
    }

    .admin-page #smtp-form input,
    .admin-page #smtp-form select {
        min-height: 46px;
    }

    .admin-page .support-admin-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}