/*
  Leaders Approvals (19-10-2026). Plain Bootstrap 5.3 plus the few things the page took from the back office's
  theme (its blue, avatar, *-transparent badges, fs-*), so the theme's whole stylesheet does not travel to a phone.
*/

:root {
    --brand: #004b85;
    --brand-dark: #033b6b;
    --brand-light: #0a5aa0;
    --primary-rgb: 0, 75, 133;
    --secondary-rgb: 0, 54, 95;
    --warning-rgb: 254, 164, 90;
    --info-rgb: 71, 139, 243;
    --success-rgb: 40, 215, 133;
    --danger-rgb: 249, 79, 79;
}

html, body { background: #f4f6f9; }
body { min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); -webkit-tap-highlight-color: transparent; }

/* the back office's blue for Bootstrap's primary */
.btn-primary {
    --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
}

/* from the theme */
.min-w-0 { min-width: 0; }
.fs-12 { font-size: .75rem; }
.fs-13 { font-size: .8125rem; }
.fs-18 { font-size: 1.125rem; }
.fs-20 { font-size: 1.25rem; }
.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: .25rem; font-weight: 500; }
.avatar.avatar-md { width: 2.5rem; height: 2.5rem; }
.bg-primary-transparent { background-color: rgba(var(--primary-rgb), .1) !important; color: rgb(var(--primary-rgb)) !important; }
.bg-secondary-transparent { background-color: rgba(var(--secondary-rgb), .1) !important; color: rgb(var(--secondary-rgb)) !important; }
.bg-info-transparent { background-color: rgba(var(--info-rgb), .1) !important; color: rgb(var(--info-rgb)) !important; }
.bg-success-transparent { background-color: rgba(var(--success-rgb), .1) !important; color: rgb(var(--success-rgb)) !important; }
.bg-warning-transparent { background-color: rgba(var(--warning-rgb), .1) !important; color: rgb(var(--warning-rgb)) !important; }
.bg-danger-transparent { background-color: rgba(var(--danger-rgb), .1) !important; color: rgb(var(--danger-rgb)) !important; }

/* ════════ The header ════════ */

.m-head { position: sticky; top: 0; z-index: 10; background: var(--brand); color: #fff; padding: calc(.7rem + env(safe-area-inset-top)) 1rem .7rem; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.m-head .m-title { font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.m-head .m-user { font-size: .8rem; opacity: .85; }
.m-head .m-icon-btn { color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: .5rem; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.m-head .m-icon-btn:active { background: rgba(255,255,255,.25); }
.m-head .m-lang-btn { font-size: .8rem; font-weight: 700; }
.m-head .m-count { background: #ffc107; color: #222; border-radius: 1rem; padding: 0 .5rem; font-size: .75rem; font-weight: 700; }

/* ════════ The requests ════════ */

.m-main { max-width: 560px; margin: 0 auto; padding: .75rem .75rem 1.5rem; }

.m-push { background: #fff; border-radius: .75rem; padding: .75rem .9rem; margin-bottom: .75rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); font-size: .85rem; }
.m-push .btn { font-weight: 600; }

.m-card { background: #fff; border-radius: .9rem; padding: .9rem; margin-bottom: .75rem; box-shadow: 0 1px 4px rgba(0,0,0,.07); border: 2px solid transparent; }
.m-card.is-focus { border-color: var(--brand); }
.m-card.is-over { opacity: .55; }
.m-card .m-type { font-weight: 700; font-size: 1rem; }
.m-card .m-no { font-size: .75rem; color: #8c9097; }
.m-card .m-value { font-size: 1.35rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: end; }
.m-card .m-value small { display: block; font-size: .75rem; font-weight: 500; color: #6b7280; }
.m-card .m-line { font-size: .85rem; color: #374151; margin-top: .35rem; display: flex; gap: .4rem; align-items: baseline; }
.m-card .m-line i { color: #8c9097; }
.m-card .m-reason { font-size: .85rem; color: #6b7280; background: #f8f9fb; border-radius: .5rem; padding: .4rem .6rem; margin-top: .5rem; white-space: pre-line; word-break: break-word; }
.m-card .m-step { font-size: .8rem; margin-top: .5rem; }
.m-card .m-timer { margin-top: .6rem; }
.m-card .m-timer .progress { height: 5px; }
.m-card .m-timer-text { font-size: .8rem; font-variant-numeric: tabular-nums; }
.m-card .m-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .8rem; }
.m-card .m-actions.one { grid-template-columns: 1fr; }
.m-card .m-actions .btn { padding: .7rem .5rem; font-weight: 700; font-size: 1rem; border-radius: .6rem; }
.m-card .m-why { font-size: .8rem; margin-top: .6rem; }

.m-card { cursor: pointer; }

/* ════════ One request whole: the sheet ════════ */

body.m-sheet-on { overflow: hidden; }
.m-sheet { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45); }
.m-sheet.open { display: block; }
.m-sheet-panel {
    position: absolute; inset: 0; display: flex; flex-direction: column; background: #f4f6f9;
    animation: m-sheet-up .22s ease-out;
}
/* wider than a phone: a centred panel rather than the whole screen */
@media (min-width: 600px) {
    .m-sheet-panel { inset: 2rem 0 0; max-width: 560px; margin: 0 auto; border-radius: 1rem 1rem 0 0; overflow: hidden; }
}
@keyframes m-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .m-sheet-panel { animation: none; } }

.m-sheet-head { display: flex; align-items: center; gap: .5rem; background: var(--brand); color: #fff; padding: calc(.7rem + env(safe-area-inset-top)) 1rem .7rem; }
.m-sheet-title { font-size: 1.05rem; font-weight: 700; }
.m-sheet-sub { font-size: .8rem; opacity: .85; }
.m-sheet-close { color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: .5rem; width: 2.4rem; height: 2.4rem; font-size: 1.3rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.m-sheet-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .75rem; }
.m-sheet-foot { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; background: #fff; padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom)); box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
.m-sheet-foot.one { grid-template-columns: 1fr; }
.m-sheet-foot .btn { padding: .75rem .5rem; font-weight: 700; font-size: 1rem; border-radius: .6rem; }

.m-sec { background: #fff; border-radius: .75rem; padding: .75rem .9rem; margin-bottom: .75rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.m-sec h3 { font-size: .85rem; font-weight: 700; color: var(--brand); margin-bottom: .5rem; }
.m-sec .m-timer { margin-top: .5rem; }
.m-sec .m-timer .progress { height: 5px; }
.m-sec .m-timer-text { font-size: .8rem; font-variant-numeric: tabular-nums; }
.m-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; font-size: .9rem; padding: .25rem 0; }
.m-row .k { color: #6b7280; flex-shrink: 0; }
.m-row .v { font-weight: 600; text-align: end; min-width: 0; word-break: break-word; font-variant-numeric: tabular-nums; }
.m-row .v a { text-decoration: none; }

.m-item { border-top: 1px solid #eef0f3; padding: .55rem 0; }
.m-item:first-child { border-top: 0; }
.m-item-name { font-weight: 600; font-size: .9rem; word-break: break-word; }
.m-item-code { font-size: .75rem; color: #8c9097; }
.m-item-qty { font-size: .8rem; color: #374151; font-variant-numeric: tabular-nums; }
.m-item-total { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-totals { border-top: 1px dashed #d5d9e0; margin-top: .4rem; padding-top: .4rem; }
.m-row.m-grand { font-size: 1.05rem; }
.m-row.m-grand .k { color: #111827; font-weight: 700; }
.m-row.m-grand .v { font-weight: 800; }

.m-flow-step { display: flex; gap: .6rem; align-items: flex-start; padding: .4rem 0; font-size: .9rem; }
.m-flow-step.is-current { background: rgba(var(--primary-rgb), .06); border-radius: .5rem; padding-inline: .4rem; }
.m-flow-icon { font-size: 1.2rem; line-height: 1.2; }

.m-empty { text-align: center; color: #6b7280; padding: 3rem 1rem; }
.m-empty i { font-size: 3rem; color: #c3cad5; display: block; margin-bottom: .5rem; }
.m-error { font-size: .85rem; }

/* ════════ Sign-in ════════ */

body.m-login {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand-dark) 100%);
    padding: calc(4rem + env(safe-area-inset-top)) 1rem 2rem;
}
.m-login-card { width: 100%; max-width: 400px; background: #fff; border-radius: 1.25rem; padding: 2rem 1.5rem; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.m-login-logo { display: block; width: auto; height: auto; max-height: 46px; max-width: 210px; object-fit: contain; margin: 0 auto 1.25rem; }
.m-login-card h1 { font-size: 1.35rem; font-weight: 800; color: var(--brand); text-align: center; margin-bottom: .25rem; }
.m-login-card .m-login-sub { text-align: center; color: #6b7280; font-size: .9rem; margin-bottom: 1.5rem; }
.m-login-card .form-control { border-radius: .6rem; padding: .7rem .9rem; font-size: 1rem; }
.m-login-card .btn-signin { border-radius: .6rem; padding: .75rem 1rem; font-weight: 700; font-size: 1rem; }
.m-pass-wrap { position: relative; }
.m-pass-wrap .form-control { padding-inline-end: 2.75rem; }
.m-pass-wrap .m-toggle-pass { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: .5rem; background: none; border: 0; color: #8b98a6; padding: .4rem; font-size: 1.1rem; }

/* the language switch, top corner, as on the back office's sign-in page */
.m-lang { position: fixed; top: calc(1rem + env(safe-area-inset-top)); inset-inline-end: 1rem; z-index: 30; display: inline-flex; gap: 3px; padding: 4px; background: rgba(3,30,56,.55); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; }
.m-lang button { min-width: 40px; padding: 5px 13px; border-radius: 999px; line-height: 1; color: #fff; background: none; border: 0; font-size: .78rem; font-weight: 700; }
.m-lang button.active { background: #fff; color: var(--brand-dark); }

/* install on the phone (the layout's bar, every page): the brand's colour, above the page's bottom edge */
.m-install { position: fixed; inset-inline: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 1050; display: flex; align-items: center; gap: .6rem; background: var(--brand); color: #fff; border-radius: .75rem; padding: .6rem .75rem; box-shadow: 0 4px 16px rgba(0,0,0,.2); font-size: .85rem; }
.m-install.d-none { display: none !important; }
.m-install > i { font-size: 1.3rem; }
.m-install .m-icon-btn { color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: .5rem; width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }