/* ============================================================
   mobile.css - phone / tablet / installed app (Android + iOS)
   Loaded AFTER the other site css. Desktop look is not changed:
   everything under a media query only applies to small screens,
   the few global rules below are harmless on a desktop.
   ============================================================ */

/* ---- phone / tablet / installed app only (touch + small screens). A desktop browser window is NOT affected. ---- */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {

    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }   /* no pull-to-refresh that would drop a draft */
    a, button, input, select, textarea, label, .k-button { touch-action: manipulation; } /* no 300 ms tap delay / double-tap zoom */

    /* notch / home-bar safe areas (iPhone, Android cut-outs) */
    body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .pwa-standalone body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }

    /* Kendo windows never wider than the screen, long content scrolls inside */
    .k-window { max-width: calc(100vw - 12px) !important; }
    .k-window-content { overflow: auto; -webkit-overflow-scrolling: touch; }

    .k-window .vcpl-msg-btn { min-height: 36px; }
}

/* install bar from mobile.js (only ever created on phones / tablets) */
#vcplInstallBar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: #7700b3; color: #fff; font-size: 14px;
}
#vcplInstallBar .vcpl-ib-text { flex: 1; }
#vcplInstallBar button { min-height: 32px; border: 0; border-radius: 4px; padding: 0 12px; font-size: 14px; }
#vcplInstallBar .vcpl-ib-go { background: #fff; color: #7700b3; font-weight: bold; }
#vcplInstallBar .vcpl-ib-x { background: transparent; color: #fff; font-size: 22px; line-height: 1; padding: 0 6px; }

/* ============================================================
   Tablet and phone  (<= 768 px)
   ============================================================ */
@media (max-width: 768px) {

    /* ---- inputs: 16 px stops iOS zooming the page when a field is tapped ---- */
    input, select, textarea,
    .k-input, .k-input-inner, .k-textbox, .k-picker, .k-dropdown-wrap .k-input {
        font-size: 16px !important;
    }

    /* ---- bigger touch targets ---- */
    .clsMain button, .clsMain .k-button, .clsMain .k-primary,
    .k-window button, .k-window .k-button {
        min-height: 44px;
    }
    .clsMain input[type="radio"], .clsMain input[type="checkbox"] { width: 22px; height: 22px; vertical-align: middle; }
    .clsMain label { padding: 0 8px 0 2px; }

    /* ============ compose page ============ */
    .clsMain { padding: 4px 6px; }

    /* the label | field table becomes label + field rows that can wrap */
    .clsMain > .xtable,
    .clsMain > .xtable > tbody { display: block; width: 100% !important; }
    .clsMain > .xtable > tbody > tr { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; }
    .clsMain > .xtable > tbody > tr > td { display: block; padding-left: 2px; padding-right: 2px; }
    .clsMain > .xtable > tbody > tr > td:first-child { flex: 0 0 62px; width: 62px; min-width: 62px; max-width: 62px; }
    .clsMain > .xtable > tbody > tr > td:nth-child(2) { flex: 1 1 0; min-width: 0; }
    .clsMain > .xtable > tbody > tr > td[colspan="2"] { flex: 1 1 100%; width: 100% !important; min-width: 0 !important; max-width: 100% !important; }

    /* Bcc row is shown / hidden by script with an inline display value */
    .clsMain > .xtable > tbody > tr.clsBcc[style*="none"] { display: none !important; }
    .clsMain > .xtable > tbody > tr.clsBcc:not([style*="none"]) { display: flex !important; }

    /* From row: the groups stack instead of sitting side by side */
    .email-from-content > div { display: block !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; width: 100%; }
    .email-from-select { min-width: 0 !important; width: 100%; }
    .email-from-content > div:last-child { text-align: right; }
    #dvReminder, #dvDocument, #dvActionRequired { width: auto !important; min-width: 0; margin-right: 6px; }

    /* To / Cc / Bcc / Subject / Share use the full width */
    #txtTo, #txtCc, #txtBcc, #txtSubject, #txtEmailDraftShareWith { width: 100% !important; max-width: 100%; }
    .clsMain .clsVo { min-width: 0; }
    .clsMain td > div[style*="width:100%"] > div[style*="inline-block"] { display: block !important; padding-left: 0 !important; }

    /* editor: tall enough to type, never taller than the screen */
    .email-editor-container { height: clamp(220px, 45dvh, 480px); }
    .clsMain .k-editor-toolbar { overflow-x: auto; }

    /* bottom area: Send full width, Share full width, the other buttons in a 3 column grid */
    .clsMain > .xtable > tbody > tr:last-child > td > div:first-child { display: block !important; width: 100%; }
    .clsMain > .xtable > tbody > tr:last-child > td > div:first-child > div:first-child { display: block !important; width: 100%; }
    #btnSend { min-width: 100% !important; min-height: 48px; font-size: 17px; }
    .clsShare { display: block !important; padding: 8px 0 0 0 !important; width: 100%; }
    .clsShare > div { display: block !important; padding-left: 0 !important; }
    .clsShare textarea { width: 100% !important; }
    .clsMain > .xtable > tbody > tr:last-child > td > div[style*="float:right"],
    .clsMain > .xtable > tbody > tr:last-child > td > div[style*="float: right"] {
        float: none !important; display: grid !important;
        grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; padding-top: 8px;
    }
    .clsMain .clsPrimaryButton { margin: 0; white-space: normal; }
    /* the page has width:NNpx!important inline; a min-width of 100% of the grid cell wins over any width */
    #btnAttachment, #btnMapped, #btnNormalMail, #btnEmailReminder, #btnIntroduction, #btnSaveAsDraft { min-width: 100% !important; }

    /* attachment chips and files: long names wrap instead of widening the page */
    #dvEmailAttachments .file-heading a,
    #dvEmailAttachments li.k-file.vcpl-att-error,
    #dvEmailAttachments li.k-file.vcpl-att-error .file-heading { white-space: normal; overflow-wrap: anywhere; }

    /* windows: tables inside them (OTP, mapped, contacts) stack */
    .k-window #dvEmailOverRule table, .k-window #dvEmailOverRule tbody, .k-window #dvEmailOverRule tr, .k-window #dvEmailOverRule td { display: block; width: 100%; }
    #drpOtpRequestedTo { width: 100%; min-height: 44px; font-size: 16px; }
    #txtOTP { width: 100% !important; }
    .clsAoh { min-height: 44px; display: flex; align-items: center; }       /* contact search results */
}

/* ============================================================
   Phone  (<= 480 px)
   ============================================================ */
@media (max-width: 480px) {
    .clsMain > .xtable { font-size: 14px; }
    .clsMain > .xtable > tbody > tr > td:first-child { flex-basis: 54px; width: 54px; min-width: 54px; max-width: 54px; }
    .email-editor-container { height: 42dvh; min-height: 200px; }
    .clsMain > .xtable > tbody > tr:last-child > td > div[style*="float:right"],
    .clsMain > .xtable > tbody > tr:last-child > td > div[style*="float: right"] { grid-template-columns: repeat(2, 1fr); }
}

/* landscape phone: keep the editor usable under the keyboard */
@media (max-height: 480px) and (orientation: landscape) {
    .email-editor-container { height: 60dvh; min-height: 140px; }
}

/* ============================================================
   Layout header on small screens (other pages that show it)
   ============================================================ */
@media (max-width: 768px) {
    .main-header { flex-wrap: wrap; min-height: 0 !important; padding: 4px 6px !important; }
    #dvVaidLogo { flex: 0 0 110px !important; }
    #dvVaidLogo img { width: 110px !important; height: auto !important; }
    #dvA { flex-wrap: wrap; height: auto !important; gap: 6px; }
    #dvA > div { position: static !important; width: auto !important; }
    .clsEmailNotification { position: static !important; }
    .mainNavMenu { margin-left: 0 !important; overflow-x: auto; white-space: nowrap; height: auto !important; -webkit-overflow-scrolling: touch; }
    .mainNavMenu li { float: none !important; display: inline-block !important; }
    .mainNavMenu li a { display: inline-block; min-height: 44px; line-height: 44px !important; height: auto !important; }
}