/* Step 62 — one look for every signed-in page: glass (frosted, see-through surfaces) and soft depth
   (neumorphism: raised cards and buttons, pressed-in fields), plus the UX rules: type-to-search lists,
   code boxes, masked phone fields, date shortcuts, skeleton loading, red for destructive actions.
   Colours are unchanged — the brand's paper #FAFBF9, navy #000E36, emerald #12B886 / #0FA47F, blue #0064BD,
   slate #55607D; status colours stay Bootstrap's own. Navy, not pure black; paper, not pure white, behind. */

/* ---------- a soft background the glass can show through ---------- */
body.gd-app {
    background:
        radial-gradient(55% 40% at 0% 0%, rgba(18, 184, 134, .10), transparent 70%),
        radial-gradient(45% 40% at 100% 100%, rgba(0, 100, 189, .08), transparent 70%),
        #FAFBF9 !important;
    background-attachment: fixed !important;
    color: #000E36;
}

/* ---------- glass: top bars and the light sidebar ---------- */
body.gd-app .gd-deskbar {
    position: sticky; top: 0; z-index: 1020;
    background: rgba(250, 251, 249, .72);
    backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 10px 30px -24px rgba(0, 14, 54, .35);
    padding-bottom: .7rem !important;
}
body.gd-app.gd-skin--light .gd-sidebar {
    background: rgba(255, 255, 255, .72) !important;
    backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-right: 1px solid rgba(255, 255, 255, .85) !important;
    box-shadow: 8px 0 30px -26px rgba(0, 14, 54, .35);
}
body.gd-app.gd-skin--light .gd-sidebar__link.is-active { box-shadow: inset 3px 3px 7px rgba(0, 14, 54, .07), inset -3px -3px 7px rgba(255, 255, 255, .9); }
body.gd-app.gd-skin--light .gd-sidebar__link:hover { background: rgba(255, 255, 255, .7); box-shadow: 4px 4px 10px rgba(0, 14, 54, .06), -4px -4px 10px rgba(255, 255, 255, .9); }

/* ---------- glass + soft depth: cards and panels ---------- */
body.gd-app .card, body.gd-app .gd-panel, body.gd-app .gd-callout {
    background: linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .7)) !important;
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .9) !important;
    box-shadow: 10px 12px 30px -18px rgba(0, 14, 54, .22), -8px -8px 24px -14px rgba(255, 255, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
body.gd-app .card .card { box-shadow: 4px 4px 12px -6px rgba(0, 14, 54, .14), -3px -3px 10px -6px #fff !important; }
body.gd-app .gd-tile { box-shadow: 10px 12px 26px -18px rgba(0, 14, 54, .25), -8px -8px 22px -14px #fff, inset 0 1px 0 rgba(255, 255, 255, .9); }
body.gd-app a.gd-tile:active { box-shadow: inset 5px 5px 12px rgba(0, 14, 54, .1), inset -5px -5px 12px #fff; transform: translateY(1px); }
body.gd-app .alert { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 24px -20px rgba(0, 14, 54, .35); }
body.gd-app .table { --bs-table-bg: transparent; }
body.gd-app .table > thead th { background: rgba(250, 251, 249, .7); }
body.gd-app .table-hover > tbody > tr:hover > *, body.gd-app .table > tbody > tr:hover > * { --bs-table-accent-bg: rgba(18, 184, 134, .045); }
body.gd-app .dropdown-menu, body.gd-app .gd-langpick__menu {
    background: rgba(255, 255, 255, .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 24px 50px -24px rgba(0, 14, 54, .35);
}

/* The dashboard figure cards and panels: glass with soft depth; they press in when tapped. */
body.gd-app .gb-kpi, body.gd-app .gb-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .7)) !important;
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .92) !important;
    box-shadow: 10px 12px 30px -18px rgba(0, 14, 54, .24), -8px -8px 24px -14px rgba(255, 255, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
body.gd-app a.gb-kpi:hover { transform: translateY(-2px); }
body.gd-app a.gb-kpi:active { transform: translateY(0); box-shadow: inset 5px 5px 12px rgba(0, 14, 54, .1), inset -5px -5px 12px #fff !important; }
/* "Prioritise important information": the figure big and strong, its label small and quiet. */
body.gd-app .gb-kpi__value { font-weight: 700; letter-spacing: -.035em; color: #000E36; }
body.gd-app .gb-kpi__label { font-size: .82rem; font-weight: 500; color: #55607D; }
body.gd-app .gb-tag, body.gd-app .gb-act { box-shadow: 2px 2px 6px -2px rgba(0, 14, 54, .12), -2px -2px 6px -2px #fff; }

/* ---------- soft depth: fields pressed in, buttons raised (same as the sign-in pages) ---------- */
body.gd-app .form-control, body.gd-app .form-select {
    background-color: #FAFBF9;
    border: 1px solid rgba(220, 226, 234, .9);
    box-shadow: inset 3px 3px 7px rgba(0, 14, 54, .06), inset -3px -3px 7px rgba(255, 255, 255, .95);
    transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
body.gd-app .form-control:focus, body.gd-app .form-select:focus {
    background-color: #FFFFFF; border-color: rgba(18, 184, 134, .6);
    box-shadow: inset 2px 2px 4px rgba(0, 14, 54, .05), 0 0 0 4px rgba(18, 184, 134, .14), 0 0 20px -6px rgba(18, 184, 134, .5);
}
body.gd-app .gd-askbar input { box-shadow: 0 10px 26px -18px rgba(0, 14, 54, .35); }
body.gd-app .btn { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; }
body.gd-app .btn-primary, body.gd-app .btn-success, body.gd-app .btn-danger {
    box-shadow: 5px 6px 14px -4px rgba(0, 14, 54, .28), -4px -4px 10px -2px rgba(255, 255, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
}
body.gd-app .btn-primary:hover, body.gd-app .btn-success:hover, body.gd-app .btn-danger:hover { transform: translateY(-1px); }
body.gd-app .btn:active { transform: translateY(1px); box-shadow: inset 3px 3px 8px rgba(0, 14, 54, .22), inset -2px -2px 6px rgba(255, 255, 255, .25) !important; }
body.gd-app .btn-outline-primary, body.gd-app .btn-outline-secondary, body.gd-app .btn-outline-success, body.gd-app .btn-outline-danger, body.gd-app .btn-light {
    background-color: rgba(250, 251, 249, .9);
    box-shadow: 4px 4px 10px -2px rgba(0, 14, 54, .1), -4px -4px 10px -2px rgba(255, 255, 255, .95);
}
body.gd-app .btn-outline-danger:hover { background-color: var(--bs-danger, #dc3545); }

/* ---------- colour psychology: anything that deletes or refuses is red ---------- */
.gd-danger-action, body .btn.gd-danger-action { color: #dc3545 !important; border-color: rgba(220, 53, 69, .55) !important; }
.gd-danger-action:hover { background-color: #dc3545 !important; color: #fff !important; }

/* ---------- type-to-search lists (long drop-downs) ---------- */
.gd-combo { position: relative; }
.gd-lifted { z-index: 1015 !important; }
.gd-lifted--pos { position: relative; }
.gd-combo__input { cursor: text; padding-right: 2.2rem !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2355607D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .85rem center; background-size: 14px 10px; }
.gd-combo__list { position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 6px); max-height: 260px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
    background: rgba(255, 255, 255, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .95); border-radius: 16px; box-shadow: 0 24px 50px -22px rgba(0, 14, 54, .4); }
.gd-combo__list[hidden] { display: none; }
.gd-combo__opt { padding: .5rem .75rem; border-radius: 10px; cursor: pointer; color: #000E36; font-size: .92rem; }
.gd-combo__opt[aria-selected="true"], .gd-combo__opt:hover { background: #E9F7F2; color: #086B53; }
.gd-combo__opt.is-current { font-weight: 600; }
.gd-combo__opt mark { background: none; color: #0FA47F; font-weight: 700; padding: 0; }
.gd-combo__none { padding: .5rem .75rem; color: #55607D; font-size: .88rem; }
.gd-combo select.gd-combo__native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

/* ---------- code boxes (one box per digit) ---------- */
.gd-otp { display: flex; gap: .55rem; justify-content: center; margin-bottom: 1rem; }
.gd-otp__box { flex: 1 1 0; min-width: 0; max-width: 3rem; width: 3rem; height: 3.4rem; text-align: center; font-size: 1.45rem; font-weight: 700; color: #000E36; border-radius: 14px;
    border: 1px solid rgba(220, 226, 234, .9); background: #FAFBF9;
    box-shadow: inset 4px 4px 9px rgba(0, 14, 54, .08), inset -4px -4px 9px rgba(255, 255, 255, .95); caret-color: #12B886; }
.gd-otp__box:focus { outline: 0; background: #fff; border-color: rgba(18, 184, 134, .6); box-shadow: 0 0 0 4px rgba(18, 184, 134, .16), 0 0 20px -6px rgba(18, 184, 134, .5); }
.gd-otp__box.is-filled { border-color: rgba(18, 184, 134, .45); }
@media (max-width: 400px) { .gd-otp { gap: .35rem; } .gd-otp__box { width: 2.55rem; height: 3rem; font-size: 1.25rem; } }

/* ---------- date shortcuts beside a "from / to" pair ---------- */
.gd-dates { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .2rem; }
.gd-dates__chip { border: 1px solid rgba(220, 226, 234, .95); background: rgba(250, 251, 249, .9); color: #000E36; border-radius: 999px; padding: .25rem .75rem; font-size: .8rem; font-weight: 500;
    box-shadow: 3px 3px 8px -2px rgba(0, 14, 54, .1), -3px -3px 8px -2px #fff; cursor: pointer; }
.gd-dates__chip:hover { border-color: rgba(18, 184, 134, .5); color: #086B53; }
.gd-dates__chip.is-on { background: #E9F7F2; color: #086B53; border-color: rgba(18, 184, 134, .6); box-shadow: inset 2px 2px 5px rgba(0, 14, 54, .08), inset -2px -2px 5px #fff; }

/* ---------- skeleton loading (instead of a spinner or a frozen page) ---------- */
@keyframes gd-shimmer { 0% { background-position: -460px 0; } 100% { background-position: 460px 0; } }
.gd-skel { position: fixed; z-index: 1030; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.gd-skel.is-on { opacity: 1; }
.gd-skel__in { display: grid; gap: 14px; }
.gd-skel__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gd-skel__b { border-radius: 16px; background: linear-gradient(90deg, #EEF1F5 0px, #F4F7FA 140px, #EEF1F5 280px); background-size: 920px 100%; animation: gd-shimmer 1.3s linear infinite; }
.gd-skel__b--title { height: 34px; width: 40%; }
.gd-skel__b--line { height: 14px; width: 65%; border-radius: 8px; }
.gd-skel__b--kpi { height: 96px; }
.gd-skel__b--big { height: 220px; }
.gd-skel__b--row { height: 44px; }
.gd-skel-cover { background: rgba(250, 251, 249, .96); }
.gd-skel-inline { display: grid; gap: 8px; }
.gd-skel-inline .gd-skel__b { height: 12px; border-radius: 6px; }
@media (max-width: 768px) { .gd-skel__row { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .gd-skel__b { animation: none; } body.gd-app .btn, body.gd-app a.gd-tile { transition: none; } }

/* Browsers without blur: solid surfaces, text always readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.gd-app .card, body.gd-app .gd-panel, body.gd-app .gd-callout { background: #FFFFFF !important; }
    body.gd-app .gd-deskbar { background: #FAFBF9; }
}
@media print { body.gd-app { background: #fff !important; } body.gd-app .card { box-shadow: none !important; backdrop-filter: none; } .gd-skel { display: none !important; } }
.gd-prep__msg--wait { min-width: 220px; font-style: normal; }

/* ---------- chart tooltips + hover ---------- */
.gd-tip { position: fixed; z-index: 1080; pointer-events: none; transform: translateY(-100%); max-width: 260px; padding: .45rem .7rem; border-radius: 12px; font-size: .82rem; font-weight: 600; color: #000E36;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 14px 30px -14px rgba(0, 14, 54, .4); }
.gd-tip[hidden] { display: none; }
svg rect.is-hot, svg circle.is-hot, svg path.is-hot { filter: brightness(1.12) drop-shadow(0 2px 4px rgba(0, 14, 54, .25)); cursor: default; }

/* Step 63 — "Send my code by": three raised choices, the chosen one pressed in with the brand glow. */
.gd-codeby { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.gd-codeby__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.gd-codeby__opt { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: .5rem .75rem; border-radius: 14px; cursor: pointer;
    font-size: .88rem; font-weight: 600; color: #000E36; background: linear-gradient(150deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82));
    border: 1px solid rgba(0, 14, 54, .1); box-shadow: 5px 6px 14px -8px rgba(0, 14, 54, .28), -4px -4px 12px -6px rgba(255, 255, 255, .95);
    transition: box-shadow .2s ease, border-color .2s ease, color .2s ease; text-align: center; line-height: 1.2; }
.gd-codeby__opt svg { flex: none; color: #55607D; }
.gd-codeby__opt:hover { border-color: rgba(15, 164, 127, .45); }
.btn-check:checked + .gd-codeby__opt { color: #086B53; border-color: #0FA47F; background: #E9F7F2;
    box-shadow: inset 3px 3px 8px rgba(0, 14, 54, .1), 0 0 0 3px rgba(15, 164, 127, .16); }
.btn-check:checked + .gd-codeby__opt svg { color: #0FA47F; }
.btn-check:focus-visible + .gd-codeby__opt { outline: 2px solid #0064BD; outline-offset: 2px; }

/* Step 64 — forms you can see on every signed-in page. The page is the same soft dimmed white as the home page,
   cards are solid white, and fields have a light brand-blue tint with a clear border (they were paper-white on a
   white card); white with the emerald glow while typing. */
body.gd-app {
    background:
        radial-gradient(55% 40% at 0% 0%, rgba(18, 184, 134, .10), transparent 70%),
        radial-gradient(45% 40% at 100% 100%, rgba(0, 100, 189, .08), transparent 70%),
        #EFF3F7 !important;
}
body.gd-app .card, body.gd-app .gd-panel { background: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .9)) !important; }
body.gd-app .card:has(form .form-control, form .form-select) { box-shadow: inset 0 4px 0 #0FA47F, 12px 14px 32px -18px rgba(0, 14, 54, .28) !important; }
body.gd-app .form-control, body.gd-app .form-select {
    background-color: rgba(0, 100, 189, .06) !important;
    border: 1.5px solid rgba(0, 14, 54, .2) !important;
    color: #000E36;
}
body.gd-app .form-control::placeholder { color: #55607D; opacity: .8; }
body.gd-app .form-control:hover, body.gd-app .form-select:hover { border-color: rgba(0, 100, 189, .45) !important; }
body.gd-app .form-control:focus, body.gd-app .form-select:focus { background-color: #FFFFFF !important; border-color: #0FA47F !important; }
body.gd-app .form-control:disabled, body.gd-app .form-control[readonly], body.gd-app .form-select:disabled { background-color: rgba(0, 14, 54, .07) !important; }
body.gd-app .form-check-input { border: 1.5px solid rgba(0, 14, 54, .32); }
body.gd-app .gd-askbar input { background-color: #FFFFFF !important; }
@media print { body.gd-app .card:has(form .form-control, form .form-select) { box-shadow: none !important; } }

/* Step 66 — nothing wider than a phone: long button words wrap, rows of buttons wrap, long words break,
   hidden chart tables take no room, and wide tables scroll inside their card (ui.js wraps them). */
body.gd-app main { overflow-wrap: break-word; }
body.gd-app table.visually-hidden { display: block !important; max-width: 1px; }
.gd-tablewrap { -webkit-overflow-scrolling: touch; }
@media (max-width: 575px) {
    body.gd-app main .btn, body.gd-app main .gd-linkbtn { white-space: normal; text-align: center; max-width: 100%; }
    body.gd-app main .d-flex:not(.flex-nowrap):not(.gd-otp) { flex-wrap: wrap; }
    body.gd-app main .flex-grow-1, body.gd-app main .d-flex > * { min-width: 0; }
    body.gd-app main form.ms-auto { margin-left: 0 !important; }
}