/* =========================================================================
   NamaTSP — panel layer 2
   panel-app.css is the original my.namatsp.ir stylesheet (unmodified), so light
   mode is identical. This file only adds:
     1. dark mode (the original has none)
     2. the login background panel on the right-hand side
     3. a few helpers the Razor views need
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. LOGIN — form on the RIGHT, artwork on the LEFT (same as the live panel)
   The original is `.8fr 1fr` with DOM [.right, .bg]; in RTL column 1 lands on
   the right, so `.right` (the form) is right and `.bg` (the image) is left.
   The grid placement is spelled out explicitly so it cannot drift.
   ------------------------------------------------------------------------- */
.auth-card.login .main-card {
    grid-template-columns: .8fr 1fr; /* form (right, narrower) | image (left, wider) */
    align-items: stretch;
}

.auth-card.login .main-card > .right {
    grid-column: 1; /* inline-start → right in RTL */
    grid-row: 1;
    min-width: 0;
}

.auth-card.login .main-card > .bg {
    grid-column: 2; /* left */
    grid-row: 1;
    position: relative;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    border-radius: 13px;
}

/* the image must fill its whole column — the upstream rule relies on the grid
   row having a height, which collapsed in our markup */
.auth-card.login .main-card > .bg img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 13px;
    display: block;
}

/* -------------------------------------------------------------------------
   2b. REGISTER — five-step wizard
   ------------------------------------------------------------------------- */
.reg-step {
    display: none;
    width: 100%;
}

.reg-step.is-active {
    display: block;
}

.auth-card.register-card .main-card .right .inputs .input-box {
    margin-bottom: 18px;
}

.auth-card.register-card .main-card .right .inputs .alert-desc {
    font-size: 12.5px;
    color: #7c7d7d;
    line-height: 2;
    margin-bottom: 14px;
}

.auth-card.register-card .main-card .right .inputs .alert-desc .icon {
    color: #0b57d0;
    margin-inline-end: 4px;
}

/* document upload cards */
.auth-card.register-card .main-card .right .inputs .input-box.upload-file .input-card {
    background-color: #f3f7fe;
    border-radius: 13px;
    height: 66px;
    position: relative;
    overflow: hidden;
    border: 1px solid #e6ecf5;
    cursor: pointer;
}

.auth-card.register-card .main-card .right .inputs .input-box.upload-file .input-card.true {
    background-color: #3db17830;
    border-color: #3db178;
}

.auth-card.register-card .main-card .right .inputs .input-box.upload-file .input-card .info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-inline: 15px 20px;
}

.auth-card.register-card .main-card .right .inputs .input-box.upload-file .input-card .right-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-card.register-card .main-card .right .inputs .input-box.upload-file .input-card .right-info .input-icon {
    color: #0b57d0;
    font-size: 20px;
}

.auth-card.register-card .main-card .right .inputs .input-box.upload-file .input-card .right-info .title {
    color: #abb5c6;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

.auth-card.register-card .main-card .right .inputs .input-box.upload-file .input-card input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    height: 100%;
    margin: 0;
}

/* the wizard's own tab strip */
.auth-card.register-card .main-card .right .inputs .tab {
    display: flex;
    background-color: #f3f7fe;
    border-radius: 13px;
    margin-bottom: 18px;
    position: relative;
    width: 100%;
    justify-content: center;
}

.auth-card.register-card .main-card .right .inputs .tab li {
    flex: 1;
    text-align: center;
    padding: 16px 0;
    font-size: 14px;
    color: #abb5c6;
    cursor: pointer;
    z-index: 2;
    transition: color .3s;
}

.auth-card.register-card .main-card .right .inputs .tab li.active,
.auth-card.register-card .main-card .right .inputs .tab li:hover {
    color: #0b57d0;
}

.auth-card.register-card .main-card .right .inputs .tab .line {
    position: absolute;
    height: 80%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #e9eef6;
    border-radius: 13px;
    transition: all .3s;
    z-index: 1;
}

/* -------------------------------------------------------------------------
   3. Helpers used by the Razor views
   ------------------------------------------------------------------------- */
/* the SSO control is an <a> now, not a <button> */
.auth-card .main-card .sso-login-btn {
    text-decoration: none;
}

/* panel day / night toggle — top-left of the navbar */
.theme-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #0c6fcc;
    padding: 0;
    transition: background-color .25s, color .25s, transform .25s;
}

.theme-toggle:hover {
    background: rgba(12, 111, 204, .1);
    transform: translateY(-1px);
}

.theme-toggle .icon {
    line-height: 1;
}

html[data-theme="dark"] .theme-toggle {
    color: #ffc861;
}

html[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255, 200, 97, .14);
}

/* the toggle lives in `.manegmant`, which the theme pins to the left edge */
.navbar > .manegmant .theme-toggle {
    margin-inline-end: 6px;
}

/* only one glyph is visible at a time: moon in light mode, sun in dark mode */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* native <select> styled like the original inputs */
.auth-card .main-card .right .inputs .input-box .input-card select,
.input-box .input-card select {
    background-color: #f3f7fe;
    border-radius: 13px;
    height: 73px;
    padding-right: 20px;
    padding-left: 40px;
    color: #3d3c45;
    width: 100%;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23abb5c6' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 18px center;
}

/* server-side validation summary */
.server-errors {
    background: #eb423512;
    border: 1px solid #eb423540;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #eb4235;
    font-size: 13px;
    line-height: 2;
}

.server-errors ul {
    margin: 6px 0 0;
    padding-inline-start: 18px;
}

/* generic inline form used by the small panel pages */
.panel-inline-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 16px;
}

.panel-inline-form .input-box {
    margin-bottom: 0;
    min-width: 180px;
}

.panel-inline-form .input-box label {
    font-size: 12px;
    color: #7c7d7d;
    display: block;
    margin-bottom: 6px;
}

.panel-inline-form .input-card input,
.panel-inline-form .input-card select {
    background: #f3f7fe;
    border: 0;
    border-radius: 10px;
    height: 46px;
    padding-inline: 14px;
    width: 100%;
    font-family: inherit;
    font-size: 13px;
    color: #3d3c45;
}

.btn-submit,
.btn-cancel {
    border: 0;
    border-radius: 10px;
    height: 46px;
    padding-inline: 22px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: all .25s;
}

.btn-submit {
    background: #0c6fcc;
    color: #fff;
}

.btn-submit:hover {
    background: #0b57d0;
}

.btn-cancel {
    background: #f3f7fe;
    color: #3d3c45;
}

/* make the empty-state component reusable outside React */
.empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: #abb5c6;
    text-align: center;
}

.empty-box .icon {
    font-size: 54px;
    color: #d7e3ef;
}

/* -------------------------------------------------------------------------
   3. DARK MODE
   ------------------------------------------------------------------------- */
html[data-theme="dark"] body {
    background-color: #101821;
    color: #dbe4ee;
}

html[data-theme="dark"] #root > .main_content {
    background-color: #17212b;
}

html[data-theme="dark"] .navbar {
    background-color: transparent;
}

html[data-theme="dark"] .main_navbar_links a {
    color: #b9c6d4;
}

html[data-theme="dark"] .main_navbar_links.active a {
    color: #4da3f0;
}

html[data-theme="dark"] .main_navbar_links > .line {
    background: #4da3f0;
}

html[data-theme="dark"] .navbar > .companey .current .info .name,
html[data-theme="dark"] .navbar > .manegmant .user .user-info .name {
    color: #dbe4ee;
}

html[data-theme="dark"] .navbar > .companey > .option,
html[data-theme="dark"] .main_navbar_links {
    background-color: #1e2936;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8);
}

html[data-theme="dark"] .navbar > .companey > .option > .list .item:not(.active):hover {
    background-color: #253243;
}

html[data-theme="dark"] .ListBox > .List .Item,
html[data-theme="dark"] .List .Item,
html[data-theme="dark"] .moadi-list-card,
html[data-theme="dark"] .moadi-list-header {
    background-color: #17212b;
    color: #dbe4ee;
}

html[data-theme="dark"] .List .Item:not(:last-child) {
    border-bottom-color: #24313f;
}

html[data-theme="dark"] .List .Item:hover,
html[data-theme="dark"] .ListBox > .List .Item:hover,
html[data-theme="dark"] .List .Item.active {
    background-color: #1e2b39 !important;
}

html[data-theme="dark"] .List .Item .ItemValue .Title,
html[data-theme="dark"] .ListBox > .Header .InfoBox .Count {
    color: #8497ab;
}

html[data-theme="dark"] .List .Item .ItemValue .valueBox .value {
    color: #cbd7e4;
}

html[data-theme="dark"] .Header .SearchBox,
html[data-theme="dark"] .ListBox > .Header .filter-box .SearchBox {
    background: #1e2936;
    border-color: #2b3948;
}

html[data-theme="dark"] .Header .SearchBox input,
html[data-theme="dark"] .ListBox > .Header .filter-box .SearchBox > input {
    background: transparent;
    color: #dbe4ee;
}

html[data-theme="dark"] .Sidebar > .StatusBox {
    background: #1a2531;
}

html[data-theme="dark"] .Sidebar > .StatusBox > .Item .Title {
    color: #cbd7e4;
}

html[data-theme="dark"] .Sidebar .action-modal {
    background: #1e2936;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8);
}

html[data-theme="dark"] .pagination {
    background-color: #17212b;
}

html[data-theme="dark"] .pagination .page-item .page-link {
    background-color: #1e2b39;
    color: #7fb6ea;
}

html[data-theme="dark"] .auth-card .main-card {
    background-color: #17212b;
}

html[data-theme="dark"] .auth-card.register-card .main-card {
    background-color: #101821;
}

html[data-theme="dark"] .auth-card.register-card .main-card .right {
    background-color: #17212b;
}

html[data-theme="dark"] .auth-card .main-card .right .inputs .input-box .input-card input,
html[data-theme="dark"] .auth-card .main-card .right .inputs .input-box .input-card select,
html[data-theme="dark"] .input-box .input-card select {
    background-color: #1e2936;
    color: #dbe4ee;
}

html[data-theme="dark"] .auth-card .main-card .right .inputs .input-box .input-card input::placeholder {
    color: #64758a;
}

html[data-theme="dark"] .auth-card .main-card .right .inputs .input-box label {
    color: #a8b8c8;
}

html[data-theme="dark"] .auth-card.register-card.create-moadi .tab {
    background-color: #1e2936;
}

html[data-theme="dark"] .auth-card.register-card.create-moadi .tab .line {
    background-color: #253243;
}

html[data-theme="dark"] .auth-card.register-card.create-moadi .tab li {
    color: #8497ab;
}

html[data-theme="dark"] .auth-card .bottom-card .text {
    color: #64758a;
}

html[data-theme="dark"] .auth-card .bottom-card .links li .link {
    color: #a8b8c8;
}

html[data-theme="dark"] .navbar-taxpayer .left .user .user-info .name {
    color: #dbe4ee;
}

html[data-theme="dark"] .modal .box,
html[data-theme="dark"] .ModalBox .ModalContent {
    background: #1e2936;
    color: #dbe4ee;
}

html[data-theme="dark"] .panel-inline-form .input-card input,
html[data-theme="dark"] .panel-inline-form .input-card select {
    background: #1e2936;
    color: #dbe4ee;
}

html[data-theme="dark"] .panel-inline-form .input-box label {
    color: #8497ab;
}

html[data-theme="dark"] .server-errors {
    background: #eb42351f;
    border-color: #eb42354d;
}

html[data-theme="dark"] .empty-box {
    color: #64758a;
}

html[data-theme="dark"] .empty-box .icon {
    color: #2b3948;
}

/* -------------------------------------------------------------------------
   4. RESPONSIVE touch-ups
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* the live panel drops the artwork on phones — keep that behaviour */
    .auth-card.login .main-card {
        grid-template-columns: 1fr;
    }

    .auth-card.login .main-card > .right {
        grid-column: 1;
        grid-row: 1;
    }

    .auth-card.login .main-card > .bg {
        display: none;
    }

    .auth-card.login .main-card {
        height: auto;
        min-height: 520px;
    }
}