/* remitza v4 theme: portal login and both dashboards (spec 8.1, 9). */

/*
 * ---------- Portal login: resources/views/admin/pages/login.blade.php ----------
 * Scoped to .rz-app-admin: this file loads on the customer site too, whose login, register and forgot-password
 * pages reuse the .login-page / .login-box markup and are styled in frontend.css (spec 8.2).
 * The inline background is `url(image/login_background.jpeg) … !important`. A stylesheet cannot beat an
 * inline !important, but that image does not exist and the shorthand makes the element transparent,
 * so the body's --background shows through.
 */
body.rz-theme.rz-app-admin .login-page {
    height: auto;
    min-height: 100vh;
    padding: 24px 16px;
}

body.rz-theme.rz-app-admin .login-page .login-box {
    width: 100%;
    max-width: 400px;
    margin-top: 0; /* the template pulls it up by 10rem */
    padding: 0;
}

body.rz-theme.rz-app-admin .login-page .login-box > .login-logo:first-child {
    height: 56px !important; /* inline style: height 105px */
    margin-bottom: 16px;
    background: url("/images/logo-128.png") center / contain no-repeat;
}

body.rz-theme.rz-app-admin .login-page .login-box > .login-logo.mb-2 {
    color: var(--foreground) !important; /* inline style: white 35px bold */
    font-family: var(--font-heading);
    font-size: 24px !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em;
    text-align: center;
}

body.rz-theme.rz-app-admin .login-page .login-box .card {
    margin-bottom: 0;
    overflow: hidden;
}

body.rz-theme.rz-app-admin .login-page .login-card-body {
    padding: 32px;
    background: transparent;
    box-shadow: none !important; /* .shadow-100 is !important */
    color: var(--foreground);
}

body.rz-theme.rz-app-admin .login-page .login-box-msg {
    color: var(--text-2);
    font-size: 13px;
}

body.rz-theme.rz-app-admin .login-page .form-control {
    height: 36px;
    border: 1px solid var(--input);
    border-radius: 12px;
    background-color: var(--card);
    color: var(--foreground);
    font-size: 14px;
}

body.rz-theme.rz-app-admin .login-page .form-control:focus {
    border-color: var(--brand-text); /* the same focus as every form (Part 2 spec 5.6) */
    box-shadow: 0 0 0 3px var(--ring-halo), var(--shadow-xs);
}

/* Login pages never get body.dark-mode (no navbar, so no Dcat switcher), so dark.css's placeholder and
   has-error colours never reach them; these token colours suit both themes */
body.rz-theme.rz-app-admin .login-page .form-control::placeholder {
    color: var(--text-3); /* spec 6.1 placeholder token; Dcat: rgba(34,41,47,.4) */
}

body.rz-theme.rz-app-admin .login-page .form-label-group > input:not(:focus):not(:placeholder-shown) ~ label {
    color: var(--text-2) !important; /* adminlte-primary.css sets rgba(34,41,47,.4) !important on the filled, unfocused label */
}

body.rz-theme.rz-app-admin .login-page .has-error .help-block,
body.rz-theme.rz-app-admin .login-page .has-error .control-label,
body.rz-theme.rz-app-admin .login-page .has-error .form-control-position i {
    color: var(--err); /* dcat-app-primary.css: #bd4147; Form.js prints the message as label.control-label */
}

body.rz-theme.rz-app-admin .login-page .has-icon-left .form-control {
    padding-left: 36px;
}

body.rz-theme.rz-app-admin .login-page .has-icon-left .form-control-position {
    top: 0;
    width: 36px;
    height: 36px;
    color: var(--text-2);
    line-height: 36px;
}

body.rz-theme.rz-app-admin .login-page .vs-checkbox-con input:checked ~ .vs-checkbox {
    border-color: var(--brand);
    background-color: var(--brand);
}

body.rz-theme.rz-app-admin .login-page .login-btn {
    width: 100%;
    height: 36px;
    padding: 0 16px !important; /* the template and Dcat's .btn set padding with !important */
    float: none !important; /* .float-right is !important */
    border-radius: 12px;
    font-weight: 600;
}

/* ---------- Dashboards (portal and customer site): .small-box tiles ---------- */
body.rz-theme .small-box {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card); /* with --shadow-card: every card's shape (Part 2 spec 5.6) */
    background: var(--card) !important; /* beats AdminLTE's .bg-green / .bg-red !important */
    box-shadow: var(--shadow-card);
    color: var(--foreground) !important;
}

body.rz-theme .small-box > .inner {
    padding: 0;
}

body.rz-theme .small-box > .inner h3 {
    margin: 0 0 4px;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

body.rz-theme .small-box > .inner p {
    margin: 0;
    color: var(--text-2);
    font-size: 12.5px;
}

body.rz-theme .small-box > .icon {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

body.rz-theme .small-box > .icon > i {
    position: static;
    color: inherit;
    font-size: 18px;
    opacity: 1;
    transform: none;
}

body.rz-theme .small-box.bg-green > .icon {
    background-color: var(--ok-bg);
    color: var(--ok);
}

body.rz-theme .small-box.bg-red > .icon {
    background-color: var(--err-bg);
    color: var(--err);
}

body.rz-theme .small-box > .small-box-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 16px -20px -20px;
    padding: 10px 20px;
    border-top: 1px solid var(--line);
    background: transparent;
    color: var(--text-2) !important; /* beats .bg-green a / .bg-red a !important */
    font-size: 12.5px;
    text-align: left;
}

body.rz-theme .small-box > .small-box-footer:hover {
    background: transparent;
    color: var(--brand-text) !important;
}

/* Rate cards (HTML from both HomeControllers: .card.h-100.p-1.rounded); their shadow is base.css's .card rule */
body.rz-theme section.content .card.rounded {
    border-radius: var(--radius-card) !important; /* .rounded is !important; the card radius (Part 2 spec 5.6) */
}

/* The .text-xl.text-primary title is the payment-method name, so it keeps the body font */
body.rz-theme section.content .card .text-xl.text-primary {
    color: var(--foreground) !important; /* .text-primary is !important */
    font-weight: 600;
}

/* The numbers ("rate explain" strings): amount in <strong>, rate in .custom-tag-green, the fee as bare text */
body.rz-theme section.content .card .card-content {
    font-feature-settings: "tnum" 1;
}

body.rz-theme section.content .card .card-content strong,
body.rz-theme section.content .card .card-content .custom-tag-green {
    font-family: var(--font-mono);
    font-weight: 600;
}

/* Portal chart panels carry inline style="background: white; padding: 10px 10px" */
body.rz-theme section.content > .row > [style*="background: white"] {
    margin-top: 16px;
    padding: 16px !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-card); /* with --shadow-card: every card's shape (Part 2 spec 5.6) */
    background: var(--card) !important;
    box-shadow: var(--shadow-card);
}

/* Chart hover labels in dark mode. ApexCharts' light tooltip paints a white box but leaves the text colour to the page,
   so the page's light text sat on white. Light mode keeps ApexCharts' own look. */
body.rz-theme.dark-mode .apexcharts-tooltip.apexcharts-theme-light {
    border-color: var(--border);
    background: var(--popover);
    color: var(--foreground);
    box-shadow: var(--shadow-pop);
}

body.rz-theme.dark-mode .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    border-bottom-color: var(--border);
    background: var(--secondary);
}

/* The axis label that follows the pointer; its arrow is two triangles, :before the border and :after the fill */
body.rz-theme.dark-mode .apexcharts-xaxistooltip.apexcharts-theme-light {
    border-color: var(--border);
    background: var(--secondary);
    color: var(--foreground);
}

body.rz-theme.dark-mode .apexcharts-xaxistooltip-top.apexcharts-theme-light:before {
    border-top-color: var(--border);
}

body.rz-theme.dark-mode .apexcharts-xaxistooltip-top.apexcharts-theme-light:after {
    border-top-color: var(--secondary);
}

body.rz-theme.dark-mode .apexcharts-xaxistooltip-bottom.apexcharts-theme-light:before {
    border-bottom-color: var(--border);
}

body.rz-theme.dark-mode .apexcharts-xaxistooltip-bottom.apexcharts-theme-light:after {
    border-bottom-color: var(--secondary);
}