/* MyBiz POS by Gravita Tech: sign-in page (Bootstrap 5, Flatly). The OSPOS footer keeps its text; colours only. */

@font-face { font-family: 'Carlito'; src: url('fonts/carlito-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Carlito'; src: url('fonts/carlito-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root, :root[data-bs-theme="light"] {
    --g-navy: #0C1844;
    --g-orange: #E07B00;
    --bs-body-font-family: 'Carlito', Calibri, 'Segoe UI', Arial, sans-serif;
    --bs-body-bg: #FFFFFF;
    --bs-body-color: #0C1844;
    --bs-secondary-bg-subtle: #F5F7FB;
    --bs-border-color: #D8DEEA;
    --bs-primary: #E07B00;
    --bs-primary-rgb: 224, 123, 0;
    --bs-link-color: #B85C00;
    --bs-link-color-rgb: 184, 92, 0;
    --bs-link-hover-color: #E07B00;
    --g-page: #F5F7FB;
}
:root[data-bs-theme="dark"] {
    --bs-body-bg: #111A45;
    --bs-body-bg-rgb: 17, 26, 69;
    --bs-body-color: #E8ECF8;
    --bs-secondary-bg-subtle: #0A1030;
    --bs-border-color: #2A3672;
    --bs-link-color: #FFAA45;
    --bs-link-color-rgb: 255, 170, 69;
    --bs-link-hover-color: #FFC37A;
    --g-page: #0A1030;
}

body { font-family: var(--bs-body-font-family); background: var(--g-page) !important; color: var(--bs-body-color); }

.container-login {
    max-width: 960px;
    min-height: 480px;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 14px !important;
    box-shadow: 0 2px 4px rgba(12, 24, 68, .06), 0 18px 48px rgba(12, 24, 68, .14) !important;
}
.footer { max-width: 960px; }

/* Left: who we are and the demo login */
.gravita-intro {
    flex: 0 0 52%;
    background: var(--g-navy);
    color: #DCE3F5;
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
[data-bs-theme="dark"] .gravita-intro { background: #0E1A4F; }
.gravita-intro-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gravita-login-logo { height: 40px; width: auto; }
.gravita-login-logo.only-light { display: none; }
.gravita-app-name {
    margin: 10px 0 0; color: #FFFFFF; font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -.005em; text-wrap: balance;
}
.gravita-app-name span { display: block; color: var(--g-orange); font-size: 20px; margin-top: 6px; letter-spacing: 0; }
.gravita-pitch { margin: 0; font-size: 17px; line-height: 1.5; color: #C9D3EE; max-width: 34em; }
.gravita-demo-login {
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
    padding: 14px 18px;
}
.gravita-demo-title { color: var(--g-orange); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.gravita-demo-login dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; margin: 0 0 8px; font-size: 16px; }
.gravita-demo-login dt { font-weight: 400; color: #A9B4D6; }
.gravita-demo-login dd { margin: 0; color: #FFFFFF; font-weight: 700; font-family: Consolas, 'Courier New', monospace; font-size: 15px; }
.gravita-demo-login p { margin: 0; font-size: 14px; color: #A9B4D6; line-height: 1.45; }
.gravita-credit { margin: auto 0 0; font-size: 13px; color: #A9B4D6; }
.gravita-credit a { color: #FFC37A; }
.gravita-credit a:hover { color: #FFFFFF; }

/* Right: the form */
.box-login { flex: 1 1 auto; width: auto !important; padding: 40px !important; }
#form-heading { font-weight: 700; font-size: 26px; color: var(--bs-body-color); }
.form-control { border-color: var(--bs-border-color); font-size: 16px; }
.form-control:focus { border-color: var(--g-orange); box-shadow: 0 0 0 .2rem rgba(224, 123, 0, .2); }
.btn-primary {
    --bs-btn-bg: #E07B00; --bs-btn-border-color: #E07B00; --bs-btn-color: #0C1844;
    --bs-btn-hover-bg: #C96E00; --bs-btn-hover-border-color: #C96E00; --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-bg: #B85C00; --bs-btn-active-border-color: #B85C00; --bs-btn-active-color: #FFFFFF;
    --bs-btn-disabled-bg: #E07B00; --bs-btn-disabled-border-color: #E07B00; --bs-btn-disabled-color: #0C1844;
    font-weight: 700;
}
.progress-bar.bg-primary { background-color: var(--g-orange) !important; }

/* Switches (shared markup with the app header) */
.gravita-switches { display: inline-flex; align-items: center; gap: 8px; }
.gravita-lang { display: inline-flex; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; overflow: hidden; }
.gravita-lang button { background: transparent; color: #C9D3EE; border: 0; padding: 3px 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.gravita-lang button[aria-pressed="true"] { background: var(--g-orange); color: var(--g-navy); }
.gravita-theme { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: #C9D3EE; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; padding: 3px 10px; font-size: 13px; cursor: pointer; }
.gravita-theme:hover, .gravita-lang button:hover { color: #FFFFFF; }
.gravita-lang button[aria-pressed="true"]:hover { color: var(--g-navy); }
.gravita-theme svg { width: 14px; height: 14px; display: none; }
html[data-theme-choice="auto"] .gravita-theme .i-auto,
html[data-theme-choice="light"] .gravita-theme .i-light,
html[data-theme-choice="dark"] .gravita-theme .i-dark { display: inline-block; }
.gravita-theme-label { display: none; }
.gravita-lang button:focus-visible, .gravita-theme:focus-visible { outline: 2px solid var(--g-orange); outline-offset: 2px; }
/* Way back to the demo gallery (2A): same frame as the switches */
a.gravita-gallery {
    display: inline-flex; align-items: center; gap: 4px; color: #C9D3EE; text-decoration: none; white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; padding: 3px 10px 3px 7px; font-size: 13px;
}
a.gravita-gallery:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, .5); }
a.gravita-gallery:focus-visible { outline: 2px solid var(--g-orange); outline-offset: 2px; }
a.gravita-gallery svg { width: 13px; height: 13px; }
/* Share button (Share phase 2, 1 Nov 2026): same frame as the switches; its menu takes the page's colours */
.gravita-share.gshare-btn {
    min-height: 0; gap: 5px; padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px;
    background: transparent; color: #C9D3EE; font-size: 13px; font-weight: 400; line-height: 1.5;
}
.gravita-share.gshare-btn:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, .5); }
.gravita-share.gshare-btn:focus-visible { outline: 2px solid var(--g-orange); outline-offset: 2px; }
.gravita-share.gshare-btn svg { width: 13px; height: 13px; }
.gshare-menu { --surface: var(--bs-body-bg); --surface-2: var(--bs-secondary-bg); --text: var(--bs-body-color); --line: var(--bs-border-color); --accent-text: var(--bs-body-color); z-index: 1060; }
.gshare-menu a.gshare-item, .gshare-menu a.gshare-item:hover, .gshare-menu a.gshare-item:focus { color: var(--bs-body-color); text-decoration: none; }
.gshare-menu .gshare-item:focus-visible { outline: 2px solid var(--g-orange); outline-offset: -2px; }
@media (max-width: 600px) { .gravita-share.gshare-compact { width: 34px; height: 28px; padding: 0; } }

/* OSPOS footer: colours only */
footer .footer { color: var(--bs-body-color); }
footer .text-primary { color: var(--g-navy) !important; }
[data-bs-theme="dark"] footer .text-primary { color: #A9C2F0 !important; }

/* Sign-in errors: the same readable colours as the app's alerts in gravita.css */
.alert-danger { background: #FBE7E5; border-color: #F1C1BB; color: #7A1E14; }
[data-bs-theme="dark"] .alert-danger { background: #42181A; border-color: #6B2A2D; color: #F8D3D0; }

@media (max-width: 767.98px) {
    main.d-flex { display: block !important; flex-grow: 0 !important; }
    html, body, body.bg-secondary-subtle { background: var(--bs-body-bg) !important; } /* QC 29 Oct: no grey band under the footer */
    footer .footer { box-shadow: none !important; border-top: 1px solid var(--bs-border-color); margin-bottom: 0 !important; }
    .container-login { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
    .gravita-intro { flex: none; padding: 24px 20px; gap: 14px; }
    .gravita-login-logo { height: 30px; }
    .gravita-app-name { font-size: 28px; margin-top: 4px; }
    .gravita-app-name span { font-size: 18px; }
    .gravita-pitch { font-size: 16px; }
    .box-login { padding: 24px 20px 28px !important; }
    .gravita-credit { margin-top: 0; }
    /* JA joined EN and ID (1 Nov 2026): the theme button ran past the right edge at 390 px, so the switches
       take their own row under the logo */
    .gravita-intro-top { flex-wrap: wrap; row-gap: 12px; }
    .gravita-intro-top .gravita-switches { flex: 1 1 100%; }
}

/* Japanese (item 17, 1 Nov 2026): Carlito has no Japanese glyphs, so system Japanese fonts follow it */
:root:lang(ja) { --bs-body-font-family: 'Carlito', Calibri, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; }
:lang(ja) body, :lang(ja) h1, :lang(ja) input, :lang(ja) button, :lang(ja) .btn {
    font-family: var(--bs-body-font-family);
    line-break: strict;
}