﻿/* GEO Shape - phone layout + "Download App" (blue theme #32BDEA)
   Loaded on every page after the other styles. */

:root {
    --geo-m-blue: #32BDEA;
    --geo-m-blue-dark: #1a9cc9;
    --geo-m-ink: #0f3d4f;
    --geo-m-muted: #5b7683;
    --geo-m-soft: #f2fafd;
    --geo-m-border: #dcebf2;
    --geo-m-nav: 62px;
    --geo-m-safe: env(safe-area-inset-bottom, 0px);
}

/* ---------------- Download App banner ---------------- */
.geo-install { background: #fff; border-bottom: 1px solid var(--geo-m-border); box-shadow: 0 2px 10px rgba(15, 76, 97, .05);
    max-height: 0; overflow: hidden; opacity: 0; transition: max-height .25s ease, opacity .25s ease; }
.geo-install.show { max-height: 140px; opacity: 1; }
.geo-install__inner { max-width: 720px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; }
.geo-install__icon { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--geo-m-border); flex: 0 0 44px; object-fit: cover; background: #fff; }
.geo-install__text { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.geo-install__text b { display: block; color: var(--geo-m-ink); font-size: 15px; }
.geo-install__text span { display: block; color: var(--geo-m-muted); font-size: 12.5px; }
.geo-install__btn { flex: 0 0 auto; border: 0; border-radius: 10px; padding: 9px 20px; font-weight: 700; font-size: 14px; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, var(--geo-m-blue), var(--geo-m-blue-dark)); box-shadow: 0 4px 12px rgba(50, 189, 234, .35); }
.geo-install__btn:active { transform: scale(.97); }
.geo-install__close { flex: 0 0 auto; border: 0; background: none; color: #8aa1ab; font-size: 20px; padding: 6px; line-height: 1; cursor: pointer; }
.content-page > .geo-install { margin: -20px -30px 20px; }   /* full width at the top of the page area */
body > .geo-install { position: relative; z-index: 5; }

/* sidebar / profile entries: only when the browser can install (or show help) */
.geo-install-item, .geo-install-link { display: none !important; }
html.geo-can-install .geo-install-item { display: block !important; }
html.geo-can-install .geo-install-link { display: inline-flex !important; align-items: center; gap: 4px; }
.geo-install-item__ico { font-size: 20px; width: 20px; text-align: center; }
.geo-install-item .ml-4 { margin-left: 16px !important; }
.geo-menu-ico { font-size: 20px; width: 20px; text-align: center; }
.geo-menu-item .ml-4 { margin-left: 16px !important; }
html.geo-standalone .geo-install, html.geo-standalone .geo-install-item, html.geo-standalone .geo-install-link { display: none !important; }

/* ---------------- how-to-install sheet ---------------- */
.geo-sheet-backdrop { position: fixed; inset: 0; z-index: 100000; background: rgba(8, 36, 48, .45); display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; transition: opacity .2s ease; }
.geo-sheet-backdrop.show { opacity: 1; }
.geo-sheet { position: relative; width: 100%; max-width: 460px; background: #fff; border-radius: 22px 22px 0 0; padding: 10px 20px calc(20px + var(--geo-m-safe));
    box-shadow: 0 -10px 40px rgba(8, 36, 48, .25); transform: translateY(40px); transition: transform .25s ease; }
.geo-sheet-backdrop.show .geo-sheet { transform: none; }
.geo-sheet__grip { width: 44px; height: 5px; border-radius: 5px; background: #d5e3ea; margin: 0 auto 14px; }
.geo-sheet__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.geo-sheet__head img { width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--geo-m-border); }
.geo-sheet__head b { display: block; color: var(--geo-m-ink); font-size: 17px; }
.geo-sheet__head span { color: var(--geo-m-muted); font-size: 13px; }
.geo-sheet__steps { list-style: none; margin: 0 0 18px; padding: 0; }
.geo-sheet__steps li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #eef4f7; color: var(--geo-m-ink); font-size: 14.5px; line-height: 1.4; }
.geo-sheet__num { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--geo-m-soft); color: var(--geo-m-blue-dark); font-weight: 800; font-size: 12px;
    display: flex; align-items: center; justify-content: center; }
.geo-sheet__ico { flex: 0 0 36px; height: 36px; border-radius: 10px; background: #e8f7fd; color: var(--geo-m-blue-dark); display: flex; align-items: center; justify-content: center; }
.geo-sheet__hint { color: var(--geo-m-muted); font-size: 12.5px; }
.geo-sheet__ok { width: 100%; border: 0; border-radius: 12px; padding: 13px; font-size: 16px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--geo-m-blue), var(--geo-m-blue-dark)); }
@media (min-width: 600px) {
    .geo-sheet-backdrop { align-items: center; }
    .geo-sheet { border-radius: 22px; padding-bottom: 20px; }
}

/* ---------------- header buttons ---------------- */
.geo-hdr-btn { border: 0; background: none; color: var(--geo-m-ink); font-size: 22px; width: 40px; height: 40px; border-radius: 12px; display: inline-flex;
    align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.geo-hdr-btn:active { background: var(--geo-m-soft); }
.geo-back, .geo-m-only, .geo-search__close { display: none !important; }
html.geo-can-back .geo-back { display: inline-flex !important; }

/* ---------------- bottom bar (phones / tablets) ---------------- */
.geo-bottom-nav { display: none; }

@media (max-width: 991.98px) {
    body { padding-bottom: calc(var(--geo-m-nav) + var(--geo-m-safe)); }
    .geo-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; height: calc(var(--geo-m-nav) + var(--geo-m-safe));
        padding-bottom: var(--geo-m-safe); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--geo-m-border);
        box-shadow: 0 -4px 18px rgba(15, 76, 97, .08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .geo-bottom-nav a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #7d929c;
        font-size: 11px; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; }
    .geo-bottom-nav a i { font-size: 22px; line-height: 1; }
    .geo-bottom-nav a.active, .geo-bottom-nav a:active { color: var(--geo-m-blue-dark); }
    .geo-bottom-nav a.active i { transform: translateY(-1px); }
    .geo-bottom-nav a.geo-bottom-nav__main i { width: 46px; height: 46px; margin-top: -22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        color: #fff; background: linear-gradient(135deg, var(--geo-m-blue), var(--geo-m-blue-dark)); box-shadow: 0 6px 16px rgba(50, 189, 234, .45); border: 3px solid #fff; }
    .geo-bottom-nav a.geo-bottom-nav__main { color: var(--geo-m-blue-dark); }

    /* header: search / bell / profile as icons (no second menu button) */
    .iq-top-navbar .navbar-toggler { display: none !important; }
    .iq-top-navbar .geo-m-only { display: inline-flex !important; }
    .iq-top-navbar #navbarSupportedContent { display: flex !important; flex-basis: auto; position: static !important; width: auto !important; background: none !important;
        box-shadow: none !important; padding: 0 !important; margin: 0 !important; height: auto !important; }
    .iq-top-navbar #navbarSupportedContent .navbar-list { display: flex; flex-direction: row; align-items: center; margin: 0 !important; padding: 0 !important;
        background: none !important; box-shadow: none !important; position: static !important; width: auto !important; }
    .iq-top-navbar #navbarSupportedContent .navbar-list li { position: static; }
    .iq-top-navbar #navbarSupportedContent .navbar-list li > a { padding: 0 6px !important; min-height: 40px; display: flex; align-items: center; }
    .iq-top-navbar #navbarSupportedContent .navbar-list li > a > img { width: 34px; height: 34px; }
    .iq-top-navbar .navbar-list li .iq-sub-dropdown { position: fixed !important; left: 8px !important; right: 8px !important; top: 64px !important;
        width: auto !important; min-width: 0 !important; max-height: calc(100vh - 150px); overflow-y: auto; transform: none !important; border-radius: 16px; }
    .iq-top-navbar .iq-navbar-logo .header-logo img { height: 34px; }

    /* full-width search panel */
    /* the whole header comes to the front while searching (on iPhone the header is its own layer) */
    body.geo-search-open .iq-top-navbar { z-index: 1080 !important; }
    body.geo-search-open .iq-top-navbar .geo-search { display: block !important; position: fixed; left: 0; right: 0; top: 0; z-index: 1080; padding: 10px 12px;
        padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: #fff; margin: 0 !important; width: auto !important;
        box-shadow: 0 0 0 100vmax rgba(8, 36, 48, .35); }   /* dims the page behind; the search box itself stays bright */
    body.geo-search-open .iq-top-navbar .geo-search .searchbox { width: 100% !important; display: flex; align-items: center; position: relative; }
    body.geo-search-open .iq-top-navbar .geo-search .geo-search__input { font-size: 16px !important; height: 46px; flex: 1 1 auto; padding-right: 52px; width: 100%;
        -webkit-appearance: none; appearance: none; }
    body.geo-search-open .iq-top-navbar .geo-search__icon { pointer-events: auto; cursor: pointer; }
    body.geo-search-open .iq-top-navbar .geo-search__hint { display: none !important; }
    body.geo-search-open .iq-top-navbar .geo-search__close { display: inline-flex !important; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
        border: 0; background: var(--geo-m-soft); color: var(--geo-m-ink); width: 36px; height: 36px; border-radius: 10px; align-items: center; justify-content: center; font-size: 18px; }
    body.geo-search-open .iq-top-navbar .geo-search__results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); max-height: calc(100vh - 170px);
        overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1081; }
    body.geo-search-open .geo-bottom-nav { z-index: 1000; }

    /* sidebar slides over the page */
    body.sidebar-main .iq-sidebar { z-index: 1070; box-shadow: 0 0 0 100vmax rgba(8, 36, 48, .35); }   /* dims the page around the open menu */
    .iq-sidebar { padding-bottom: calc(var(--geo-m-nav) + var(--geo-m-safe)); }

    .content-page > .geo-install { margin: -15px -15px 15px; }
}

/* ---------------- phones ---------------- */
@media (max-width: 767.98px) {
    /* iPhone zooms into inputs smaller than 16px - keep them at 16px */
    input.form-control, select.form-control, textarea.form-control, .geo-input, .geo-select, input[type="text"], input[type="search"], input[type="email"],
    input[type="password"], input[type="number"], input[type="tel"], input[type="date"], select, textarea { font-size: 16px !important; }
    .select2-container .select2-selection__rendered, .bootstrap-select .dropdown-toggle .filter-option-inner-inner { font-size: 16px; }

    .content-page { padding-left: 0; padding-right: 0; }
    .content-page .container-fluid { padding-left: 12px; padding-right: 12px; }
    .card, .geo-card { border-radius: 14px; }
    .card-body { padding: 16px; }
    .geo-card { padding: 16px; }

    /* titles + buttons */
    .geo-page-title { gap: 10px; margin-bottom: 14px; }
    .geo-page-title h4 { font-size: 20px; }
    .geo-page-title p { font-size: 13px; }
    .btn, .geo-btn { min-height: 42px; }
    .geo-btn--sm, .btn-sm { min-height: 34px; }
    .d-flex.flex-wrap .btn, .geo-actions .geo-btn { flex: 1 1 auto; justify-content: center; }
    h4.card-title, .header-title h4 { font-size: 18px; }

    /* stat tiles: compact, labels never overflow */
    .geo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .geo-stat { padding: 12px; gap: 10px; align-items: flex-start; min-width: 0; }
    .geo-stat > div:last-child { min-width: 0; }
    .geo-stat__icon { flex: 0 0 36px; height: 36px; font-size: 18px; border-radius: 10px; }
    .geo-stat__value { font-size: 20px; overflow-wrap: anywhere; }
    .geo-stat__label { font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere; }

    /* DataTables controls stack */
    .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate { float: none !important; text-align: left !important; width: 100%; }
    .dataTables_wrapper .dataTables_filter label { width: 100%; display: flex; align-items: center; gap: 8px; }
    .dataTables_wrapper .dataTables_filter input { flex: 1 1 auto; margin-left: 0 !important; width: 100% !important; height: 42px; }
    .dataTables_wrapper .dataTables_paginate { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 10px; }
    .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 38px; min-height: 38px; }

    /* ---------- tables as cards ---------- */
    table.geo-cards, table.geo-cards tbody { display: block; width: 100% !important; border: 0 !important; background: none !important; }
    table.geo-cards thead { display: none; }
    table.geo-cards tbody tr { display: block; background: #fff !important; border: 1px solid var(--geo-m-border); border-radius: 14px; margin: 0 0 12px;
        padding: 4px 14px; box-shadow: 0 3px 12px rgba(15, 76, 97, .05); }
    table.geo-cards tbody td { display: block; overflow: hidden; padding: 8px 0 8px 40% !important; position: relative; border: 0 !important;
        border-bottom: 1px dashed #e6eff4 !important; text-align: right !important; white-space: normal !important; min-height: 34px; background: none !important;
        font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
    table.geo-cards tbody td:last-child { border-bottom: 0 !important; }
    table.geo-cards tbody td::before { content: attr(data-label); position: absolute; left: 0; top: 8px; width: 38%; text-align: left; color: var(--geo-m-muted);
        font-size: 12px; font-weight: 600; line-height: 1.4; white-space: normal; }
    table.geo-cards tbody td[data-label=""]::before { display: none; }
    table.geo-cards tbody td[data-label=""] { padding-left: 0 !important; text-align: center !important; }
    table.geo-cards tbody td > .d-flex { justify-content: flex-end !important; }
    table.geo-cards tbody td .progress, table.geo-cards tbody td .geo-progress { margin-left: auto; }
    /* the first cell (usually the name or the Action menu) is the card title */
    table.geo-cards tbody tr td:first-child { border-bottom: 1px solid #e6eff4 !important; padding-bottom: 10px !important; font-weight: 700; color: var(--geo-m-ink); font-size: 15px; }
    table.geo-cards .dropdown-menu { font-size: 15px; }
    table.geo-cards .dropdown-menu .dropdown-item { padding: 10px 16px; }
    .table-responsive > table.geo-cards { margin-bottom: 0; }
    .table-responsive:has(> table.geo-cards) { overflow: visible; }

    /* login / forgot password */
    .geo-install__inner { padding: 10px 12px; gap: 10px; }
    .geo-install__text span { font-size: 12px; }
    .geo-install__btn { padding: 9px 16px; }

    /* dialogs / modals */
    .modal-dialog { margin: 10px; }
    .geo-confirm { width: calc(100vw - 24px) !important; max-width: 420px; }
}

/* installed app: no browser bar above the header on iPhone */
html.geo-standalone.geo-ios .iq-top-navbar { padding-top: env(safe-area-inset-top, 0px); }

/* ---------------- desktop: side menu hidden until the menu icon is clicked ---------------- */
@media (min-width: 1300px) {
    .iq-sidebar { left: -300px; transition: left .3s ease, box-shadow .3s ease; }
    body.geo-sb-open .iq-sidebar { left: 0; z-index: 1070; box-shadow: 0 0 0 100vmax rgba(8, 36, 48, .25); }
    .content-page { margin-left: 0 !important; }
    .iq-top-navbar, body.sidebar-main .iq-top-navbar { width: 100% !important; }
    .iq-navbar-logo { display: flex !important; }
    .iq-navbar-logo > a { display: flex !important; }
    .iq-top-navbar .iq-navbar-custom .wrapper-menu { display: inline-block !important; cursor: pointer; margin-right: 14px; }
    .iq-top-navbar .iq-navbar-logo .header-logo img { height: 36px; }
    .iq-top-navbar .iq-search-bar.device-search { margin-left: 28px; }
}
