/* ------------------------------------------------------------------
   UI3 panel form skin (.we-*).

   Every form inside the admin panel wears this: the business wizard
   (Edit company / guild), the new-business form, the user profile and
   the password change. One card with a coloured head band, padded
   body, and a footer action bar - so a form looks the same wherever
   it sits in the panel.

   Layered on top of account-ui3.css - the pages reuse .ac-page,
   .ac-card, .ac-grid, .ac-field, .ac-btn and the alert/parsley rules
   from there, and only the panel/wizard chrome lives here.

   The markup is driven by jquery.bootstrap.wizard, so .nav-tabs,
   .progress-bar, .tab-pane and .pager .previous/.next/.finish must
   keep their Bootstrap 3 class names; they are restyled, not renamed.

   !important appears where a legacy id- or element-scoped rule in
   newDesign.css / smeNewPages.css outranks a class selector
   (`select {height:auto;width:auto}` and the forced input borders).
   ------------------------------------------------------------------ */

/* ============================ page shell ========================== */
.we-page {
    padding-bottom: 72px;
}

/* --------------------------- meta chips -------------------------- */
/* national id + sakkook code, previously two floated col-xs-6 cells */
.we-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 22px;
}

/*  the business pages put the name and the two chips on one line instead of a
    centred heading with a chip row of its own underneath: two short codes were
    costing a whole band of head above the invoices, which is what the page is
    opened for. The chips keep their own markup, they just travel inside
    .ac-head now and sit at the far end of its line. */
.ac-head--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    text-align: start;
    margin-bottom: 16px;
}

    .ac-head--inline > h1 {
        margin: 0;
        font-size: 23px;
    }

        /*  a gradient rule under the name, the width of the name itself: the
            heading is a flex item, so it is already only as wide as its text and
            a block pseudo-element inherits exactly that width - nothing has to
            be measured. Same ramp as the wizard's progress bar. */
        .ac-head--inline > h1::after {
            content: "";
            display: block;
            height: 3px;
            margin-top: 7px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--primary-light, #F25C54) 0%, var(--primary, #C1122F) 100%);
        }

    /*  the auto margin, not space-between, is what holds the far end together:
        with a button on the line as well (ثبت فاکتور) space-between would strand
        the chips in the middle of the row. An auto margin eats the free space
        first, so the chips and the button travel as one group */
    .ac-head--inline > .we-meta {
        margin: 0;
        margin-inline-start: auto;
        justify-content: flex-end;
    }

    /*  a section's own action can ride at the far end of the title line instead
        of on a bar below it - the orders list exports from there. Trimmed to the
        same size the head bands give their buttons; the page button at 48px
        would tower over a 23px heading */
    .ac-page .ac-head--inline > .ac-btn {
        min-width: 0;
        height: 38px;
        padding: 0 18px;
        font-size: 13.5px;
    }

        .ac-page .ac-head--inline > .ac-btn > i {
            font-size: 13px;
        }

/*  Excel's own green for the export button - it is the one action on these
    pages that hands back a file rather than touching a record, and the brand red
    of .ac-btn--primary would put it on the same footing as «ثبت فاکتور». A
    generic .ac-btn variant, kept in this sheet because the pages that use it are
    the ones this sheet dresses. Every link state is spelled out for the same
    reason .we-order-link--main is: the tenant sheets carry id-scoped `a { color }`
    rules that outrank a class on their own. */
.ac-page a.ac-btn--excel,
.ac-page a.ac-btn--excel:hover,
.ac-page a.ac-btn--excel:focus,
.ac-page a.ac-btn--excel:visited {
    color: #fff;
    text-decoration: none;
}

.ac-page .ac-btn--excel {
    color: #fff;
    background: linear-gradient(135deg, #217346 0%, #185C37 100%);
}

    .ac-page .ac-btn--excel:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(33, 115, 70, .28);
    }

/*  wrapped onto two lines the split alignment reads as ragged, so the phone
    layout goes back to centring both parts */
@media (max-width: 767px) {
    .ac-head--inline {
        justify-content: center;
        text-align: center;
    }

        /*  no width:100% here - the heading has to stay shrink-wrapped or the
            rule under it would stretch the width of the page. Wrapping puts it
            on its own line anyway, and justify-content centres it there */
        .ac-head--inline > h1 {
            font-size: 21px;
        }

        /*  the auto margin has to go here or it would eat the free space the
            centring needs and push the chips back to the edge */
        .ac-head--inline > .we-meta {
            margin-inline-start: 0;
            justify-content: center;
        }
}

.we-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 999px;
    background: var(--surface, #fff);
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-secondary, #6B7280);
}

    .we-meta-item i {
        font-size: 13px;
        color: var(--primary, #C1122F);
    }

    .we-meta-item b {
        font-weight: 700;
        color: var(--text, #374151);
        direction: ltr;
        unicode-bidi: embed;
    }

        /* temporary code keeps its legacy amber, permanent code the brand blue */
        .we-meta-item b.sakkookTempCode {
            color: #C2410C;
        }

        .we-meta-item b.sakkookFinalCode {
            color: var(--info, #2563EB);
        }

/* ============================== card ============================== */
.we-card {
    padding: 0;
    overflow: hidden;
}

/* ------------------------ single step form ------------------------ */
/* the wizard's head band / body / pager, for forms without steps */
.we-form-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border, #E5E7EB);
    background: var(--surface-alt, #F1F5F9);
    font-size: 15px;
    line-height: 1.8;
    font-weight: 700;
    color: var(--text, #374151);
}

    .we-form-head > i {
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        font-size: 13px;
        color: #fff;
        background: linear-gradient(135deg, var(--primary, #C1122F) 0%, var(--primary-hover, #A10F26) 100%);
    }

/*  a head band that carries the section's own action button: the title stays
    at the reading edge and the button is pushed to the far end, so the action
    sits with the section it belongs to instead of on a row of its own. the
    band trims its padding because the button is taller than the icon badge. */
.we-form-head--action {
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
}

    .ac-page .we-form-head--action > .ac-btn {
        margin-inline-start: auto;
        min-width: 0;
        height: 38px;
        padding: 0 18px;
        font-size: 13.5px;
    }

        .ac-page .we-form-head--action > .ac-btn > i {
            font-size: 13px;
        }

/* wrapped onto its own line the button is the whole row, not a stub */
@media (max-width: 575px) {
    .ac-page .we-form-head--action > .ac-btn {
        width: 100%;
        margin-top: 10px;
    }
}

.we-form-body {
    padding: 28px;
}

    .we-form-body > .ac-section:first-child {
        margin-top: 0;
    }

.we-form-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 28px;
    border-top: 1px solid var(--border, #E5E7EB);
    background: var(--surface-alt, #F1F5F9);
}

    /* the buttons carry .ac-btn; the bar supplies its own separator */
    .we-form-foot .ac-actions {
        margin: 0;
        padding: 0;
        border: 0;
    }

/* ----------------------------- steps ----------------------------- */
.we-page .we-steps {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--border, #E5E7EB);
    background: var(--surface-alt, #F1F5F9);
    list-style: none;
}

    .we-page .we-steps > li {
        flex: 1 1 180px;
        float: none;
        margin: 0;
        min-width: 0;
    }

        .we-page .we-steps > li > a {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            height: 100%;
            margin: 0;
            padding: 16px 12px;
            border: 0;
            border-radius: 0;
            background: transparent;
            font-size: 15px;
            line-height: 1.7;
            font-weight: 600;
            color: var(--text-secondary, #6B7280);
            text-decoration: none;
            transition: color .2s ease, background .2s ease;
        }

            .we-page .we-steps > li > a:hover,
            .we-page .we-steps > li > a:focus {
                border: 0;
                background: rgba(193, 18, 47, .05);
                color: var(--primary, #C1122F);
            }

    .we-page .we-steps > li + li {
        border-right: 1px solid var(--border, #E5E7EB);
    }

    /* bootstrap-wizard marks the visible pane's tab with .active */
    .we-page .we-steps > li.active > a,
    .we-page .we-steps > li.active > a:hover,
    .we-page .we-steps > li.active > a:focus {
        border: 0;
        background: var(--surface, #fff);
        color: var(--primary, #C1122F);
        box-shadow: inset 0 -3px 0 var(--primary, #C1122F);
    }

.we-step-num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--border, #E5E7EB);
    color: var(--text-secondary, #6B7280);
    font-size: 13px;
    font-weight: 700;
}

.we-page .we-steps > li.active .we-step-num {
    background: linear-gradient(135deg, var(--primary, #C1122F) 0%, var(--primary-hover, #A10F26) 100%);
    color: #fff;
}

.we-step-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------- progress --------------------------- */
/* #bar width is written inline by the wizard's onTabShow callback */
.we-page .we-progress {
    height: 4px;
    margin: 0;
    border-radius: 0;
    background: var(--surface-alt, #F1F5F9);
    box-shadow: none;
}

    .we-page .we-progress .progress-bar {
        background: linear-gradient(90deg, var(--primary-light, #F25C54) 0%, var(--primary, #C1122F) 100%);
        box-shadow: none;
        transition: width .35s ease;
    }

/* --------------------------- tab panes --------------------------- */
.we-page .tab-content {
    padding: 28px;
}

.we-page .tab-pane > .ac-section:first-child {
    margin-top: 0;
}

/* --------------------------- sub panels -------------------------- */
/* replaces .panel.panel-default around the agents / addresses lists */
.we-panel {
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 14px;
    background: var(--surface-alt, #F1F5F9);
    overflow: hidden;
}

.we-panel-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #E5E7EB);
    background: var(--surface, #fff);
    font-size: 15px;
    line-height: 1.8;
    font-weight: 700;
    color: var(--text, #374151);
}

    .we-panel-head > i {
        color: var(--primary, #C1122F);
    }

.we-panel-body {
    padding: 18px;
}

/* ------------------------- repeatable rows ------------------------ */
/* one agent / one address; jQuery show()/hide() toggles these        */
.we-row {
    padding: 18px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 12px;
    background: var(--surface, #fff);
}

    .we-row + .we-row {
        margin-top: 14px;
    }

.we-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border, #E5E7EB);
}

.we-row-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #374151);
}

    .we-row-title i {
        color: var(--primary, #C1122F);
    }

/* smeNewPages.css gives every .userRow/.addressRow button margin-top:25px */
.we-page .we-row-head button {
    margin-top: 0;
}

.we-row-foot {
    margin-top: 16px;
}

/* --------------------------- checkboxes -------------------------- */
.we-checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.we-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    font-weight: 500;
    color: var(--text, #374151);
    cursor: pointer;
}

    .we-check input[type="checkbox"],
    .we-check input[type="radio"] {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 4px 0 0;
        accent-color: var(--primary, #C1122F);
        cursor: pointer;
    }

    .we-check > span {
        min-width: 0;
    }

/* --------------------- membership type choice -------------------- */
.we-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.we-choice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 16px;
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 12px;
    background: var(--surface, #fff);
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .we-choice:hover {
        border-color: var(--primary-light, #F25C54);
    }

    /* the radio was inline-styled visibility:hidden in the old markup */
    .we-choice input[type="radio"] {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 3px 0 0;
        visibility: visible;
        accent-color: var(--primary, #C1122F);
        cursor: pointer;
    }

    .we-choice:has(input[type="radio"]:checked) {
        border-color: var(--primary, #C1122F);
        background: rgba(193, 18, 47, .04);
        box-shadow: 0 0 0 3px rgba(193, 18, 47, .1);
    }

.we-choice-title {
    display: block;
    font-size: 15px;
    line-height: 1.8;
    font-weight: 700;
    color: var(--text, #374151);
}

/* ---------------------------- controls --------------------------- */
/* the field box, textarea, file, select, checkbox and date-picker
   rules live in fields-ui3.css; only the wizard-specific bits and the
   legacy id-scoped re-assertions are below. */

/* "not in the list" free-text twins that ddCheck() shows/hides */
.we-page .ac-field > select + input[type="text"] {
    margin-top: 8px;
}

.we-page .ac-field > .date-picker {
    margin-top: 0;
}

/* selectize (tags, products, equipment, brands) */
.we-page .selectize-control {
    width: 100%;
}

.we-page .selectize-input {
    min-height: var(--field-height);
    padding: 7px 12px;
    border: 1px solid var(--field-border) !important;
    border-radius: var(--field-radius) !important;
    background: var(--field-bg);
    box-shadow: none !important;
    font-size: var(--field-font-size);
    line-height: 1.9;
}

    .we-page .selectize-input.focus {
        background: var(--field-bg-focus);
        border-color: var(--field-border-focus) !important;
        box-shadow: var(--field-ring) !important;
    }

    .we-page .selectize-input > .item {
        margin: 2px 4px 2px 0;
        padding: 2px 10px;
        border-radius: 999px;
        background: rgba(193, 18, 47, .08);
        color: var(--primary, #C1122F);
        font-size: 13px;
    }

/* download link rendered by Html.ActionLink next to an upload field */
.we-file-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
}

.we-page a.btn-Default,
.we-page a.btn-default {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 9px;
    background: var(--surface, #fff);
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #374151);
    text-decoration: none;
}

    .we-page a.btn-Default:hover,
    .we-page a.btn-default:hover {
        border-color: var(--primary, #C1122F);
        color: var(--primary, #C1122F);
    }

/* ---------------------------- buttons ---------------------------- */
/* #main .btn in newDesign.css sets its own font/padding, so these
   rules keep the .btn class (the wizard JS never reads it) and win
   on specificity through the .we-page ancestor.                      */
.we-page .we-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.we-page .we-btn--add {
    background: rgba(193, 18, 47, .07);
    border-color: rgba(193, 18, 47, .25);
    color: var(--primary, #C1122F);
}

    .we-page .we-btn--add:hover {
        background: rgba(193, 18, 47, .12);
        border-color: var(--primary, #C1122F);
        color: var(--primary-hover, #A10F26);
    }

.we-page .we-btn--del {
    height: 34px;
    padding: 0 14px;
    background: transparent;
    border-color: var(--border, #E5E7EB);
    color: var(--text-secondary, #6B7280);
    font-size: 13px;
}

    .we-page .we-btn--del:hover {
        background: rgba(220, 38, 38, .06);
        border-color: var(--error, #DC2626);
        color: var(--error, #DC2626);
    }

/* ----------------------------- pager ----------------------------- */
.we-page .we-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 20px 28px;
    border-top: 1px solid var(--border, #E5E7EB);
    background: var(--surface-alt, #F1F5F9);
    list-style: none;
}

    .we-page .we-pager > li {
        display: inline-flex;
        margin: 0;
    }

    /* .previous keeps the start of the line, everything else the end */
    .we-page .we-pager > li.previous {
        margin-inline-end: auto;
    }

    .we-page .we-pager > li > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        float: none;
        min-width: 150px;
        height: 46px;
        padding: 0 22px;
        border: 1.5px solid var(--border, #E5E7EB);
        border-radius: 10px;
        background: var(--surface, #fff);
        font-size: 15px;
        font-weight: 700;
        color: var(--text, #374151);
        text-decoration: none;
        transition: box-shadow .25s ease, transform .2s ease, background .2s ease, color .2s ease;
    }

        .we-page .we-pager > li > a:hover {
            background: var(--surface, #fff);
            border-color: var(--primary, #C1122F);
            color: var(--primary, #C1122F);
        }

    .we-page .we-pager > li.next > a,
    .we-page .we-pager > li.finish > a {
        border-color: transparent;
        background: linear-gradient(135deg, var(--primary, #C1122F) 0%, var(--primary-hover, #A10F26) 100%);
        color: #fff;
    }

        .we-page .we-pager > li.next > a:hover,
        .we-page .we-pager > li.finish > a:hover {
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 12px 26px rgba(193, 18, 47, .3);
        }

    /* the wizard adds .disabled to .previous on the first step */
    .we-page .we-pager > li.disabled > a,
    .we-page .we-pager > li.disabled > a:hover {
        background: var(--surface, #fff);
        border-color: var(--border, #E5E7EB);
        color: var(--text-muted, #9CA3AF);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* ------------------ legacy #frmMain id-scoped rules ---------------
   newDesign.css styles this exact form through `#frmMain ...`
   selectors (fields, .nav-tabs, .progress-bar and .pager.wizard).
   An id beats every class selector, so those rules were still
   winning over account-ui3.css and over everything above - the
   fields kept 14px/square padding, the tabs floated as red blocks
   and the pager kept its pill buttons. Re-asserted here with the
   same id in the selector.
   ------------------------------------------------------------------ */

/* ---- fields: same metrics as the registration form ---- */
.we-page #frmMain input[type="text"],
.we-page #frmMain input[type="email"],
.we-page #frmMain input[type="password"],
.we-page #frmMain input[type="tel"],
.we-page #frmMain input[type="number"],
.we-page #frmMain select,
.we-page #frmMain .form-control {
    height: var(--field-height);
    margin: 0;
    padding: 0 var(--field-padding-x);
    background: var(--field-bg);
    box-shadow: none;
    font-size: var(--field-font-size);
    line-height: var(--field-height);
    color: var(--field-text);
    vertical-align: middle;
}

    .we-page #frmMain input:focus,
    .we-page #frmMain select:focus,
    .we-page #frmMain textarea:focus,
    .we-page #frmMain .form-control:focus {
        background: var(--field-bg-focus);
        box-shadow: var(--field-ring);
    }

.we-page #frmMain select {
    width: 100%;
}

.we-page #frmMain textarea,
.we-page #frmMain textarea.form-control {
    height: auto;
    min-height: var(--textarea-min-height);
    padding: 12px var(--field-padding-x);
    background: var(--field-bg);
    font-size: var(--field-font-size);
    line-height: 1.9;
}

.we-page #frmMain input[type="file"],
.we-page #frmMain input[type="file"].form-control {
    height: auto;
    min-height: var(--field-height);
    padding: 9px var(--field-padding-x);
    line-height: 1.7;
}

/* `#frmMain input` also lands on checkboxes and radios, boxing them
   in a 1px #aaa border with 5px/15px padding */
.we-page #frmMain input[type="checkbox"],
.we-page #frmMain input[type="radio"] {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    accent-color: var(--primary, #C1122F);
}

.we-page #frmMain .we-check input[type="checkbox"],
.we-page #frmMain .we-check input[type="radio"],
.we-page #frmMain .we-choice input[type="radio"] {
    margin: 4px 0 0;
}

/* ---- steps ---- */
.we-page #frmMain .we-steps {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border, #E5E7EB);
}

    .we-page #frmMain .we-steps > li {
        float: none;
        margin: 0;
    }

        /* float:right on the anchor collapsed each tab to its text width */
        .we-page #frmMain .we-steps > li > a {
            float: none;
            border: 0;
            background: transparent;
            color: var(--text-secondary, #6B7280);
        }

            .we-page #frmMain .we-steps > li > a:hover,
            .we-page #frmMain .we-steps > li > a:focus {
                border-color: transparent !important;
                background: rgba(193, 18, 47, .05);
                color: var(--primary, #C1122F);
            }

        .we-page #frmMain .we-steps > li.active > a,
        .we-page #frmMain .we-steps > li.active > a:hover,
        .we-page #frmMain .we-steps > li.active > a:focus {
            border: 0;
            border-color: transparent !important;
            background: var(--surface, #fff);
            color: var(--primary, #C1122F);
            box-shadow: inset 0 -3px 0 var(--primary, #C1122F);
        }

/* ---- progress ---- */
.we-page #frmMain .we-progress {
    margin: 0;
}

    .we-page #frmMain .we-progress .progress-bar {
        float: none !important;
    }

/* ---- pager ---- */
.we-page #frmMain .we-pager > li > a {
    margin-top: 0;
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 10px;
    background: var(--surface, #fff);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--text, #374151);
}

    .we-page #frmMain .we-pager > li > a:hover {
        border-color: var(--primary, #C1122F);
        color: var(--primary, #C1122F);
    }

.we-page #frmMain .we-pager > li.next > a,
.we-page #frmMain .we-pager > li.finish > a {
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary, #C1122F) 0%, var(--primary-hover, #A10F26) 100%);
    color: #fff;
}

.we-page #frmMain .we-pager > li.disabled > a,
.we-page #frmMain .we-pager > li.disabled > a:hover {
    background: var(--surface, #fff);
    border-color: var(--border, #E5E7EB);
    color: var(--text-muted, #9CA3AF);
}

/* ======================== collapsible card ======================== */
/*  A <details class="ac-card we-card we-fold"> whose <summary> is the
    usual .we-form-head band. Native disclosure - no script, keyboard
    operable - so the business profile can lead with the invoices and
    park the reference sections underneath, folded.                   */
.we-fold > summary {
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

    /* the default triangle, in every engine that draws one */
    .we-fold > summary::-webkit-details-marker {
        display: none;
    }

    .we-fold > summary::marker {
        content: "";
    }

    .we-fold > summary:hover {
        background: var(--border, #E5E7EB);
    }

/* folded: the head band is the whole card, so it carries no divider */
.we-fold:not([open]) > summary {
    border-bottom: 0;
}

/*  .we-form-head > i is the gradient badge; the caret is not one, and
    an auto inline-start margin parks it at the far end of the band  */
.we-fold > summary > i.we-fold-caret {
    width: auto;
    height: auto;
    margin-inline-start: auto;
    border-radius: 0;
    background: none;
    font-size: 13px;
    color: var(--text-secondary, #6B7280);
    transition: transform .18s ease;
}

.we-fold[open] > summary > i.we-fold-caret {
    transform: rotate(180deg);
}

/* ======================= read-only detail view ==================== */
/* the business profile (Company/Details): same card chrome as the
   forms, but label/value pairs instead of inputs.                    */
.we-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px 20px;
}

.we-info-item {
    display: flex;
    flex-direction: column;
    /* shrink both lines to their content so the ltr values below still
       hang off the right edge on an rtl page (and the left on an ltr one) */
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

.we-info-item--full {
    grid-column: 1 / -1;
}

.we-info-label {
    display: block;
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    font-weight: 600;
    color: var(--text-secondary, #6B7280);
}

    .we-info-label > i {
        margin-left: 6px;
        font-size: 12px;
        color: var(--primary, #C1122F);
    }

.we-info-value {
    font-size: 14.5px;
    line-height: 1.9;
    font-weight: 600;
    color: var(--text, #374151);
    overflow-wrap: anywhere;
}

    .we-info-value:empty::before,
    .we-info-value.is-empty::before {
        content: "—";
        color: var(--text-muted, #9CA3AF);
    }

/* national code / postal code / economic code read left to right;
   overrides the text-align of the shared .ltrField rule, which is meant
   for full-width inputs rather than a shrink-wrapped value */
.we-page .we-info-value.ltrField {
    direction: ltr;
    unicode-bidi: embed;
    text-align: start;
}

/* action row without the divider .ac-actions draws (it is a form foot) */
.we-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 22px;
}

.we-form-body > .we-actions {
    margin-bottom: 18px;
}

/* ------------------------------ QR box --------------------------- */
.we-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border: 1px dashed var(--border, #E5E7EB);
    border-radius: 14px;
    background: var(--surface, #fff);
    text-align: center;
}

    .we-qr img {
        max-width: 160px;
        height: auto;
    }

    .we-qr a {
        font-size: 12.5px;
        color: var(--text-secondary, #6B7280);
    }

        .we-qr a:hover {
            color: var(--primary, #C1122F);
        }

/* --------------------- chip lists (tags, products) ---------------- */
.we-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .we-chips > li,
    .we-chips > span {
        display: inline-flex;
        align-items: center;
        padding: 6px 13px;
        border: 1px solid var(--border, #E5E7EB);
        border-radius: 999px;
        background: var(--surface, #fff);
        font-size: 13.5px;
        line-height: 1.8;
        color: var(--text, #374151);
    }

.we-chips--tag > span {
    border-color: transparent;
    background: var(--surface-alt, #F1F5F9);
    color: var(--text-secondary, #6B7280);
}

/* people: one name pair per cell */
.we-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .we-people > li {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 10px 14px;
        border: 1px solid var(--border, #E5E7EB);
        border-radius: 12px;
        background: var(--surface, #fff);
        font-size: 14px;
        line-height: 1.8;
        color: var(--text, #374151);
    }

        .we-people > li > i {
            color: var(--primary, #C1122F);
        }

/* ================= factor list + issue modals ==================== */
/*  Factors/Index: an 11 column table plus two bootstrap modals. The
    table and the modal markup keep their ids and the class names the
    page scripts write into rows (.chkFactor, .page-link, the
    .factor-row-* states, the .badge / .label pills), so everything
    here is presentation only.                                        */

/* the table needs more room than the 1040px form shell */
.ac-shell.we-shell--table {
    max-width: 1360px;
}

/* ------------------------- selection bar ------------------------- */
/* jQuery show()/hide() toggles this, so the hidden state is an inline
   style on the element - a display:none here would make show() guess */
.we-select-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 18px;
    border: 1px solid rgba(193, 18, 47, .22);
    border-radius: 14px;
    background: rgba(193, 18, 47, .05);
    font-size: 14px;
    color: var(--text, #374151);
}

    .we-select-bar b {
        font-weight: 700;
    }

.we-page .amount-display {
    font-weight: 700;
    color: var(--success, #16A34A);
}

/* ----------------------------- table ----------------------------- */
.we-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 14px;
}

.we-page table.we-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 13.5px;
    white-space: nowrap;
}

    .we-page table.we-table > thead > tr > th {
        padding: 13px 12px;
        border: 0;
        border-bottom: 1px solid var(--border, #E5E7EB);
        background: var(--surface-alt, #F1F5F9);
        font-size: 13px;
        font-weight: 700;
        color: var(--text-secondary, #6B7280);
        text-align: right;
        white-space: nowrap;
    }

    .we-page table.we-table > tbody > tr > td {
        padding: 13px 12px;
        border: 0;
        border-bottom: 1px solid var(--border, #E5E7EB);
        color: var(--text, #374151);
        vertical-align: middle;
    }

    .we-page table.we-table > tbody > tr:last-child > td {
        border-bottom: 0;
    }

    /* the empty / error rows the scripts write, and the initial one */
    .we-page table.we-table > tbody > tr > td.text-muted {
        padding: 40px 12px;
        color: var(--text-secondary, #6B7280);
        white-space: normal;
    }

    .we-page table.we-table > tbody > tr > td.text-danger {
        padding: 40px 12px;
        color: var(--error, #DC2626);
        white-space: normal;
    }

    .we-page table.we-table > tbody > tr:hover > td {
        background: var(--surface-alt, #F1F5F9);
    }

/* row states written by the scripts */
.we-page table.we-table > tbody > tr.factor-row-paid > td {
    background: rgba(22, 163, 74, .08);
}

.we-page table.we-table > tbody > tr.factor-row-selected > td {
    background: rgba(193, 18, 47, .07);
}

.we-page table.we-table > tbody > tr.factor-row-disabled {
    opacity: .5;
}

.we-page table.we-table input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--primary, #C1122F);
    cursor: pointer;
}

/* the pills the scripts render inside cells */
.we-page .we-table .badge,
.we-page .we-table .label {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--surface-alt, #F1F5F9);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
    color: var(--text-secondary, #6B7280);
}

.we-page .we-table .badge-type-payable,
.we-page .we-table .label-warning {
    background: rgba(220, 38, 38, .1);
    color: var(--error, #DC2626);
}

.we-page .we-table .badge-type-receivable,
.we-page .we-table .label-success {
    background: rgba(22, 163, 74, .12);
    color: var(--success, #16A34A);
}

/* =========================== inbox =============================== */
/*  Inbox/Index renders its two lists through ajax partials, so the
    markup below belongs to PersonalMessageList / WikiEntityMessageList.
    The .box and .unRead classes and the row's onclick are what the page
    scripts and the read/unread state rely on - kept, restyled.      */
.we-msg-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.we-msg {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 16px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 14px;
    background: var(--surface, #fff);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .we-msg:hover {
        border-color: var(--primary, #C1122F);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    }

/* unread: a filled dot and a heavier subject */
.we-msg-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 9px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border, #E5E7EB);
}

.we-msg.unRead {
    background: rgba(193, 18, 47, .03);
    border-color: rgba(193, 18, 47, .18);
}

    .we-msg.unRead .we-msg-dot {
        border-color: transparent;
        background: var(--primary, #C1122F);
    }

    .we-msg.unRead .we-msg-subject {
        font-weight: 700;
        color: var(--text, #374151);
    }

.we-msg-main {
    flex: 1 1 auto;
    min-width: 0;
}

.we-msg-subject {
    margin: 0 0 5px;
    font-size: 14.5px;
    line-height: 1.8;
    font-weight: 600;
    color: var(--text, #374151);
}

/* the body is a preview: two lines, then an ellipsis */
.we-msg-body {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    font-weight: 400;
    color: var(--text-secondary, #6B7280);
}

.we-msg-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 9px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-muted, #9CA3AF);
}

    .we-msg-meta > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .we-msg-meta i {
        font-size: 11px;
    }

/* ------------------------ mricode paginator ---------------------- */
.we-page .m-pagination {
    font-family: inherit;
}

    .we-page .m-pagination .m-pagination-page > li > a {
        min-width: 34px;
        margin-inline-start: 6px;
        padding: 6px 10px;
        border: 1px solid var(--border, #E5E7EB);
        border-radius: 9px;
        background: var(--surface, #fff);
        font-size: 13px;
        color: var(--text, #374151);
        text-align: center;
    }

        .we-page .m-pagination .m-pagination-page > li > a:hover {
            border-color: var(--primary, #C1122F);
            color: var(--primary, #C1122F);
        }

    .we-page .m-pagination .m-pagination-page > li.active > a {
        border-color: transparent;
        background: var(--primary, #C1122F);
        color: #fff;
    }

    .we-page .m-pagination .m-pagination-info,
    .we-page .m-pagination .m-pagination-jump {
        font-size: 12.5px;
        color: var(--text-secondary, #6B7280);
    }

    .we-page .m-pagination .m-pagination-group > input {
        height: 32px;
        width: 56px;
        padding: 0 8px;
        border: 1px solid var(--border, #E5E7EB) !important;
        border-radius: 8px !important;
        background: var(--surface, #fff);
        font-size: 13px;
    }

    .we-page .m-pagination .m-pagination-group > button {
        height: 32px;
        padding: 0 12px;
        border: 1px solid var(--border, #E5E7EB);
        border-radius: 8px;
        background: var(--surface, #fff);
        font-family: inherit;
        font-size: 13px;
        color: var(--text, #374151);
    }

/* --------------------- one message, read view -------------------- */
.we-msg-view-head {
    margin-bottom: 18px;
}

.we-msg-view-subject {
    margin: 0 0 10px;
    font-size: 19px;
    line-height: 1.7;
    font-weight: 700;
    color: var(--text, #374151);
}

.we-msg-view-body {
    font-size: 15px;
    line-height: 2.1;
    color: var(--text, #374151);
    overflow-wrap: anywhere;
}

/* a ghost button that reads as destructive */
.we-page .ac-btn.we-btn-danger {
    border-color: rgba(220, 38, 38, .35);
    color: var(--error, #DC2626);
}

    .we-page .ac-btn.we-btn-danger:hover {
        border-color: var(--error, #DC2626);
        background: rgba(220, 38, 38, .06);
        color: var(--error, #DC2626);
    }

/* the delete button sits apart from the two continue actions */
.we-page .we-form-foot > .we-btn-danger {
    margin-inline-start: auto;
}

/* ========================== order list =========================== */
/*  Invoice/Index_sme: one card per order. The ten column datatable it
    replaced could only be read by scrolling sideways, so the columns
    became a head strip (number, date, total, status) over a grid of
    label/value facts, with the row actions in a footer.              */
.we-order-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.we-order {
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 16px;
    background: var(--surface, #fff);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .we-order:hover {
        border-color: var(--primary, #C1122F);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    }

.we-order-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border, #E5E7EB);
    background: var(--surface-alt, #F1F5F9);
}

.we-order-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--surface, #fff);
    font-size: 16px;
    color: var(--primary, #C1122F);
}

.we-order-id {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

    .we-order-id > b {
        font-size: 15px;
        line-height: 1.7;
        font-weight: 700;
        color: var(--text, #374151);
    }

    .we-order-id > small {
        font-size: 12.5px;
        color: var(--text-secondary, #6B7280);
    }

/* the total, read left to right whatever the page direction */
.we-order-total {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 0 0 auto;
}

    .we-order-total > b {
        direction: ltr;
        unicode-bidi: embed;
        font-size: 17px;
        font-weight: 700;
        color: var(--text, #374151);
    }

    .we-order-total > small {
        font-size: 12px;
        color: var(--text-secondary, #6B7280);
    }

/* the status pill wraps whatever the payment-method branches print */
.we-order-status {
    flex: 0 0 auto;
    display: inline-block;
    max-width: 260px;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--border, #E5E7EB);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.9;
    color: var(--text-secondary, #6B7280);
}

    .we-order-status.is-ok {
        background: rgba(22, 163, 74, .14);
        color: var(--success, #16A34A);
    }

    .we-order-status.is-progress {
        background: rgba(217, 119, 6, .14);
        color: var(--warning, #D97706);
    }

    /* the branches emit a bare <span>; it is only a text carrier here */
    .we-order-status span {
        color: inherit;
    }

.we-order-body {
    padding: 16px 18px;
}

.we-order-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 18px;
}

.we-order-fact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

    .we-order-fact > label {
        margin: 0;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.8;
        color: var(--text-secondary, #6B7280);
    }

    .we-order-fact > b {
        font-size: 14px;
        line-height: 1.9;
        font-weight: 700;
        color: var(--text, #374151);
        overflow-wrap: anywhere;
    }

.we-order-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 14px 18px;
    border-top: 1px solid var(--border, #E5E7EB);
}

.we-page a.we-order-link,
.we-page button.we-order-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    background: var(--surface, #fff);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
    color: var(--text, #374151);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

    .we-page a.we-order-link:hover,
    .we-page button.we-order-link:hover {
        border-color: var(--primary, #C1122F);
        color: var(--primary, #C1122F);
    }

    .we-page a.we-order-link--main {
        border-color: transparent;
        background: linear-gradient(135deg, var(--primary, #C1122F) 0%, var(--primary-hover, #A10F26) 100%);
        color: #fff;
    }

        .we-page a.we-order-link--main:hover {
            border-color: transparent;
            color: #fff;
            filter: brightness(1.06);
        }

/*  an action the viewer may not perform, kept on the row anyway so the actions
    column lines up from row to row instead of jumping about. it is rendered
    without an href, so it is already inert and out of the tab order - this only
    makes that visible. the title still works, which pointer-events:none would
    have killed */
.we-page a.we-order-link.is-disabled,
.we-page button.we-order-link.is-disabled {
    opacity: .45;
    cursor: default;
}

    .we-page a.we-order-link.is-disabled:hover,
    .we-page button.we-order-link.is-disabled:hover {
        border-color: var(--border, #E5E7EB);
        color: var(--text, #374151);
    }

.we-order-expired {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--error, #DC2626);
}

/* --------------------------- pagination -------------------------- */
.we-pager-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.we-page ul.we-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .we-page ul.we-pagination > li > a {
        display: block;
        min-width: 36px;
        padding: 7px 10px;
        border: 1px solid var(--border, #E5E7EB);
        border-radius: 9px;
        background: var(--surface, #fff);
        font-size: 13px;
        line-height: 1.6;
        color: var(--text, #374151);
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }

        .we-page ul.we-pagination > li > a:hover {
            border-color: var(--primary, #C1122F);
            color: var(--primary, #C1122F);
        }

    .we-page ul.we-pagination > li.active > a {
        border-color: transparent;
        background: var(--primary, #C1122F);
        color: #fff;
    }

    .we-page ul.we-pagination > li.disabled > a {
        background: var(--surface-alt, #F1F5F9);
        color: var(--text-muted, #9CA3AF);
        cursor: default;
    }

.we-pager-info {
    font-size: 13px;
    color: var(--text-secondary, #6B7280);
}

/* ----------------------------- modals ---------------------------- */
/*  the modals carry .we-page so the shared field styles reach them;
    they are not inside .ac-page, so the panel button skin is restated
    on the bootstrap classes the scripts leave untouched  */
/*  .we-page would add its own page padding here; the modal wants none - except
    at the bottom, where bootstrap drops the dialog's own margin once the
    overlay starts scrolling and the footer ends up flush with the window edge */
.we-page.we-modal {
    padding: 0 0 30px;
}

.we-modal .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    overflow: hidden;
}

/*  no max-height / internal scrolling here: the dialog grows with its form
    and the page scrolls, which is what the modal did before and what reads
    correctly on a long form.                                              */

/*  Content/bootstrap/v5-2 is Bootstrap 3, whose .modal-header / .modal-footer
    carry clearfix `::before` and `::after` rules with `display: table`. In a
    flex container those pseudo-elements count as flex items: they claimed the
    two edge slots of `space-between` and left the title and the close button
    stranded in the middle of the bar.                                       */
.we-modal .modal-header::before,
.we-modal .modal-header::after,
.we-modal .modal-footer::before,
.we-modal .modal-footer::after {
    display: none;
}

.we-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border, #E5E7EB);
    background: var(--surface-alt, #F1F5F9);
}

    .we-modal .modal-header .modal-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--text, #374151);
    }

        .we-modal .modal-header .modal-title .fa {
            color: var(--primary, #C1122F);
        }

    /*  bootstrap 3's .close is a bare floated glyph at opacity .2 with a
        white text-shadow - too faint and with no hit area. Give it the same
        square button shape the rest of the panel uses.                    */
    .we-modal .modal-header .close {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        margin: 0;
        padding: 0;
        float: none;
        border: 1px solid var(--border, #E5E7EB);
        border-radius: 10px;
        background: var(--surface, #fff);
        opacity: 1;
        font-size: 20px;
        font-weight: 400;
        line-height: 1;
        color: var(--text-secondary, #6B7280);
        text-shadow: none;
        transition: color .2s ease, border-color .2s ease;
    }

        .we-modal .modal-header .close:hover,
        .we-modal .modal-header .close:focus {
            opacity: 1;
            color: var(--primary, #C1122F);
            border-color: var(--primary-light, #F25C54);
        }

.we-modal .modal-body {
    padding: 22px;
}

.we-modal .modal-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 22px;
    border-top: 1px solid var(--border, #E5E7EB);
    background: var(--surface-alt, #F1F5F9);
}

    /*  bootstrap-rtl ships `.modal-footer .btn + .btn { margin-left: auto }`,
        which resolves to a ~540px margin and throws the second button at the
        far edge of the footer. The bar is a flex row with its own gap, so the
        buttons must not carry margins of their own.                          */
    .we-modal .modal-footer > .btn,
    .we-modal .modal-footer > .btn + .btn {
        margin: 0;
    }

/* a titled block inside a modal */
.we-modal-section + .we-modal-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px dashed var(--border, #E5E7EB);
}

.we-modal-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text, #374151);
}

    .we-modal-title .fa {
        color: var(--primary, #C1122F);
    }

/* the selected-factor summary the scripts fill with html() */
.we-modal-summary {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 12px;
    background: var(--surface-alt, #F1F5F9);
    font-size: 13.5px;
    line-height: 2;
    color: var(--text, #374151);
}

    .we-modal-summary .fa {
        color: var(--primary, #C1122F);
    }

/* readonly-field is added and removed by the scripts; the modals carry
   .we-page too, so one rule covers them and the sepami form */
.we-page .readonly-field {
    background: var(--field-bg-disabled, #EEF2F7) !important;
    color: var(--text-secondary, #6B7280);
    cursor: not-allowed;
}

/* a lone check above a field, not one of the wizard's .we-checks stacks */
.we-modal .we-check,
.we-page #frmSepamiBoe .we-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13.5px;
    color: var(--text, #374151);
}

    .we-modal .we-check input[type="checkbox"],
    .we-page #frmSepamiBoe .we-check input[type="checkbox"] {
        width: 17px;
        height: 17px;
        margin: 0;
        accent-color: var(--primary, #C1122F);
    }

/* the "check these things" list on the sepami error state */
.we-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .we-checklist > li {
        position: relative;
        padding-inline-start: 22px;
        font-size: 14px;
        line-height: 2.1;
        color: var(--text-secondary, #6B7280);
    }

        .we-checklist > li::before {
            content: "";
            position: absolute;
            inset-inline-start: 6px;
            top: 14px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--primary, #C1122F);
        }

/*  buttons keep their bootstrap class names for the scripts, but they must
    read as the same control as .ac-btn, which every other footer in the
    panel uses: 48px tall, 10px radius, 170px minimum, 16px/700 label.    */
.we-modal .modal-footer > .btn,
.we-page .we-form-foot > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 170px;
    height: 48px;
    margin: 0;
    padding: 0 26px;
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 700;
    color: var(--text, #374151);
    text-decoration: none;
    box-shadow: none;
    transition: box-shadow .25s ease, transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

    /* the ghost hover of .ac-btn--ghost */
    .we-modal .modal-footer > .btn:hover,
    .we-page .we-form-foot > .btn:hover {
        color: var(--primary, #C1122F);
        border-color: var(--primary, #C1122F);
    }

.we-modal .modal-footer > .btn-success,
.we-page .we-form-foot > .btn-success {
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary, #C1122F) 0%, var(--primary-hover, #A10F26) 100%);
    color: #fff;
}

    .we-modal .modal-footer > .btn-success:hover,
    .we-page .we-form-foot > .btn-success:hover {
        color: #fff;
        border-color: transparent;
        transform: translateY(-1px);
        box-shadow: 0 12px 26px rgba(193, 18, 47, .3);
    }

    .we-modal .modal-footer > .btn-success[disabled],
    .we-page .we-form-foot > .btn-success[disabled] {
        background: var(--surface-alt, #F1F5F9);
        color: var(--text-muted, #9CA3AF);
        opacity: 1;
    }

        /* a disabled button must not react to the hover rules above */
        .we-modal .modal-footer > .btn[disabled]:hover,
        .we-page .we-form-foot > .btn[disabled]:hover {
            transform: none;
            box-shadow: none;
            color: var(--text-muted, #9CA3AF);
            border-color: var(--border, #E5E7EB);
        }

/*  .ac-btn itself is declared under .ac-page, and a bootstrap modal sits
    outside that container - it is a sibling of the page, not a child. so
    buttons that live in the modal body (adding a bill, deleting a bill row)
    fell back to the browser default. same control, scoped to the modal.  */
.we-modal .ac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 170px;
    height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow .25s ease, transform .2s ease, background .2s ease, color .2s ease;
}

.we-modal .ac-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--primary, #C1122F) 0%, var(--primary-hover, #A10F26) 100%);
}

    .we-modal .ac-btn--primary:hover {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 12px 26px rgba(193, 18, 47, .3);
    }

.we-modal .ac-btn--ghost {
    color: var(--text, #374151);
    background: transparent;
    border: 1.5px solid var(--border, #E5E7EB);
}

    .we-modal .ac-btn--ghost:hover {
        color: var(--primary, #C1122F);
        border-color: var(--primary, #C1122F);
    }

/* ===================== even column grid ========================== */
/*  .ac-grid uses auto-fit, which collapses the empty tracks: a section
    with two fields stretches each one across half the card while the
    section above it, with three, shows thirds. auto-fill keeps the
    empty track, so every section lines up on the same columns.      */
.we-page .ac-grid--fill,
.ac-page .ac-grid--fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/*  a cell holding a checkbox instead of an input: the blank label keeps
    the box on the same line as the inputs beside it  */
.we-page .ac-field--check > .ac-label {
    visibility: hidden;
}

/* the #frmSepamiBoe twin outranks the id-scoped .we-check rule below */
.we-page .ac-field--check > .we-check,
.we-page #frmSepamiBoe .ac-field--check > .we-check {
    display: flex;
    align-items: center;
    min-height: var(--field-height);
    margin: 0;
}

/* ==================== compact date picker ======================== */
/*  Three selects for day / month / year. The base .date-picker rule in
    fields-ui3.css lets them share the row (flex: 1 1 0), which on a
    full-width field stretches each one across a third of the card.
    --compact sizes them to their content and parks the group at the
    start of the row, so the date reads as one control.              */
.we-page .date-picker--compact,
.ac-page .date-picker--compact {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

    .we-page .date-picker--compact > select,
    .ac-page .date-picker--compact > select {
        flex: 0 0 auto;
    }

        /* day, then month, then year - the order the view emits them */
        .we-page .date-picker--compact > select:nth-of-type(1),
        .ac-page .date-picker--compact > select:nth-of-type(1) {
            width: 96px !important;
        }

        .we-page .date-picker--compact > select:nth-of-type(2),
        .ac-page .date-picker--compact > select:nth-of-type(2) {
            width: 150px !important;
        }

        .we-page .date-picker--compact > select:nth-of-type(3),
        .ac-page .date-picker--compact > select:nth-of-type(3) {
            width: 116px !important;
        }

/* ============ legacy #frmUserProfile / #frmChangePassword ========= */
/*  newDesign.css styles both forms by id, with !important on the text
    inputs:

        #frmUserProfile { margin-top: 50px }
        #frmUserProfile input[type='text'],
        #frmChangePassword input[type='password'] {
            border-radius: 0 !important; padding: 5px 15px !important;
            font-size: 14px !important; margin: 0 !important }
        #frmUserProfile select { background:#f0f0f0; height:35px;
            border-radius: 0; padding: 5px 10px 7px }

    An id outranks the class selectors in fields-ui3.css, and the
    !important outranks them again - so these two pages rendered flat,
    square, 14px fields while every other panel form was rounded. The
    ids stay (the scripts submit and validate through them), so the
    field tokens are restated here at id weight.                      */
#frmUserProfile {
    margin-top: 0;
}

.we-page #frmUserProfile input[type="text"],
.we-page #frmUserProfile input[type="email"],
.we-page #frmUserProfile input[type="tel"],
.we-page #frmUserProfile input[type="number"],
.we-page #frmChangePassword input[type="text"],
.we-page #frmChangePassword input[type="password"] {
    height: var(--field-height) !important;
    margin: 0 !important;
    padding: 0 var(--field-padding-x) !important;
    border-radius: var(--field-radius) !important;
    font-size: var(--field-font-size) !important;
    line-height: var(--field-height) !important;
    vertical-align: baseline !important;
}

    /* legacy kills the focus ring with box-shadow:0 0 0 !important */
    .we-page #frmUserProfile input:focus,
    .we-page #frmChangePassword input:focus {
        box-shadow: var(--field-ring) !important;
    }

.we-page #frmUserProfile select {
    height: var(--field-height);
    padding: 0 var(--field-padding-x);
    background: var(--field-bg);
    border-radius: var(--field-radius) !important;
}

/* the birthday selects: legacy pins them to 30% / 80px */
.we-page #frmUserProfile .user-birthday select {
    width: auto;
}

/* =================== legacy #pnlEntity re-assert ================== */
/*  newDesign.css styles the new-business form by id:

        #pnlEntity          { padding-top: 50px }
        #pnlEntity input    { border-radius:0 !important; padding:5px 15px
                              !important; margin:0 !important;
                              font-size:14px !important }
        #pnlEntity select   { background-color:#f0f0f0; border-radius:0 }

    An id beats the class selectors in fields-ui3.css, and the
    !important beats them again - so that one page rendered flat,
    square, 14px fields while every other panel form was rounded.
    The id cannot go: SME_AddNewWikiEntity's scripts hide/show
    #pnlEntity and post $('#pnlEntity form'). So the field tokens are
    restated here at id weight.                                       */
.we-page #pnlEntity {
    padding-top: 0;
}

.we-page #pnlEntity input[type="text"]:not(.ac-captcha-input),
.we-page #pnlEntity input[type="password"],
.we-page #pnlEntity input[type="email"],
.we-page #pnlEntity input[type="tel"],
.we-page #pnlEntity input[type="number"] {
    height: var(--field-height) !important;
    margin: 0 !important;
    padding: 0 var(--field-padding-x) !important;
    border-radius: var(--field-radius) !important;
    font-size: var(--field-font-size) !important;
    line-height: var(--field-height) !important;
    vertical-align: baseline !important;
}

/*  the captcha box keeps the shared field height and is only narrower
    (92px, centred, 20px) - only the properties newDesign.css forces are
    restated, so the responsive rule in account-ui3.css can still widen
    it on a phone  */
.we-page #pnlEntity input.ac-captcha-input {
    margin: 0 !important;
    padding: 0 6px !important;
    border-radius: var(--field-radius) !important;
    font-size: 20px !important;
    vertical-align: baseline !important;
}

.we-page #pnlEntity select {
    background: var(--field-bg);
    border-radius: var(--field-radius) !important;
}

/* ====================== business list ============================ */
/* Company/Index_sme: one card per business instead of a datatable row.
   The card is a three-part strip - icon, name + chips, actions - that
   stacks on a phone.                                                 */
.we-biz-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

    .we-biz-bar > .we-actions {
        margin: 0;
    }

    /*  the bar carrying nothing but the card/table switch - what is left of it
        below a single invoice, where there is no filter head for the switch to
        ride on. It gets the gap of a control, not of a section */
    .we-biz-bar--tight {
        margin-bottom: 12px;
    }

.we-biz-search {
    position: relative;
    flex: 0 1 280px;
}

    .we-biz-search > i {
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        font-size: 13px;
        color: var(--text-muted, #9CA3AF);
        pointer-events: none;
    }

    .we-page .we-biz-search > input {
        padding-right: 38px;
    }

.we-biz-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.we-biz {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 16px;
    background: var(--surface, #fff);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .we-biz:hover {
        border-color: var(--primary, #C1122F);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    }

.we-biz-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--surface-alt, #F1F5F9);
    font-size: 19px;
    color: var(--primary, #C1122F);
}

.we-biz-main {
    flex: 1 1 auto;
    min-width: 0;
}

.we-biz-title {
    margin: 0 0 9px;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 700;
}

    .we-page .we-biz-title > a {
        color: var(--text, #374151);
        text-decoration: none;
    }

        .we-page .we-biz-title > a:hover {
            color: var(--primary, #C1122F);
        }

.we-biz-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.we-biz-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--surface-alt, #F1F5F9);
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--text-secondary, #6B7280);
}

    .we-biz-chip > b {
        font-weight: 700;
        color: var(--text, #374151);
    }

/* permanent vs temporary sakkook code */
.we-biz-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1.9;
    font-weight: 700;
}

    .we-biz-state.is-ok {
        background: rgba(22, 163, 74, .12);
        color: var(--success, #16A34A);
    }

    .we-biz-state.is-pending {
        background: rgba(217, 119, 6, .12);
        color: var(--warning, #D97706);
    }

.we-biz-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 8px;
}

.we-page a.we-biz-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    background: var(--surface, #fff);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
    color: var(--text, #374151);
    text-decoration: none;
    white-space: nowrap;
}

    .we-page a.we-biz-btn:hover {
        border-color: var(--primary, #C1122F);
        color: var(--primary, #C1122F);
    }

    .we-page a.we-biz-btn--main {
        border-color: transparent;
        background: linear-gradient(135deg, var(--primary, #C1122F) 0%, var(--primary-hover, #A10F26) 100%);
        color: #fff;
    }

        .we-page a.we-biz-btn--main:hover {
            border-color: transparent;
            color: #fff;
            filter: brightness(1.06);
        }

.we-biz-empty {
    padding: 46px 20px;
    border: 1px dashed var(--border, #E5E7EB);
    border-radius: 16px;
    background: var(--surface-alt, #F1F5F9);
    text-align: center;
    color: var(--text-secondary, #6B7280);
}

    .we-biz-empty > i {
        font-size: 26px;
        color: var(--text-muted, #9CA3AF);
    }

    .we-biz-empty > p {
        margin: 12px 0 0;
        font-size: 14px;
    }

/* ======================== invoice form =========================== */
/* WikiVitrin/EditCreateFactor_sme: the fields wear .ac-field, but a few
   legacy wrappers stay put because the page scripts key off them -
   deleteImage() re-appends a .vitrin-images row with the bootstrap
   classes below, and set-default-image toggles its own class names. */

/* a cell holding an action instead of an input: the button carries no
   label, so it is pushed down by exactly one label line plus the label
   gap and lands on the input line of its grid row. Bottom-aligning it
   instead dropped it below the inputs, because the grid stretches every
   cell to the tallest one and the neighbours carry a hint (the toman
   preview under مبلغ فاکتور) under their field. */
.we-page .ac-field--action {
    justify-content: flex-start;
}

    .we-page .ac-field--action > .ac-btn {
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        margin-top: calc(var(--label-font-size, 14px) * 1.8 + var(--label-gap, 7px));
    }

/* the inquiry button shares a grid row with the tax-id input, so it
   takes the field metrics - same height, radius and font size - or the
   row reads as two boxes of different size. The neutral ghost skin also
   looked like one more empty input; the primary tint says it acts. */
.we-page .ac-btn.we-btn-inquiry {
    height: var(--field-height, 46px);
    padding: 0 18px;
    gap: 8px;
    border: 1px solid var(--primary, #C1122F);
    border-radius: var(--field-radius, 10px);
    font-size: var(--field-font-size, 15px);
    font-weight: 600;
    color: var(--primary, #C1122F);
    background: rgba(193, 18, 47, .06);
}

    /* the click handler rewrites the button's html() while it waits, so
       the icon lives here - an <i> in the markup would not survive the
       round trip. */
    .we-page .ac-btn.we-btn-inquiry::before {
        font: var(--fa-font-solid, normal 900 1em/1 "Font Awesome 7 Free");
        font-size: 14px;
        content: "\f002"; /* fa-magnifying-glass */
    }

    .we-page .ac-btn.we-btn-inquiry:hover {
        color: #fff;
        background: var(--primary, #C1122F);
        border-color: var(--primary, #C1122F);
        box-shadow: 0 8px 18px rgba(193, 18, 47, .22);
    }

    .we-page .ac-btn.we-btn-inquiry:active {
        transform: translateY(1px);
        box-shadow: none;
    }

    /* waiting for the service: dimmed, and the magnifier turns into the
       spinner that already ships with Font Awesome. */
    .we-page .ac-btn.we-btn-inquiry[disabled] {
        cursor: progress;
        color: var(--text-secondary, #6B7280);
        background: var(--surface-alt, #F1F5F9);
        border-color: var(--border, #E5E7EB);
        transform: none;
        box-shadow: none;
    }

        .we-page .ac-btn.we-btn-inquiry[disabled]::before {
            content: "\f110"; /* fa-spinner */
            animation: fa-spin 1.4s linear infinite;
        }

.we-uploads-panel {
    margin-top: 4px;
}

    .we-uploads-panel .we-panel-head > label {
        margin: 0;
        font-weight: 700;
    }

    .we-uploads-panel .we-panel-head > .imgFileInfo {
        margin: 0;
    }

/* already uploaded images */
.we-uploads {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

    /* the cells keep .col-md-4 for the scripts; undo the grid geometry */
    .we-uploads > [data-image-id] {
        float: none;
        width: auto;
        padding: 14px;
        border: 1px solid var(--border, #E5E7EB);
        border-radius: 14px;
        background: var(--surface, #fff);
        text-align: center;
    }

        .we-uploads > [data-image-id] > .vitrinImage {
            display: block;
            float: none;
            margin-bottom: 12px;
        }

            .we-uploads > [data-image-id] > .vitrinImage img {
                max-width: 100%;
                border-radius: 10px;
            }

.we-page .set-default-image,
.we-page .default-image,
.we-uploads > [data-image-id] > button.btn {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    padding: 8px 12px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    background: var(--surface, #fff);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
    color: var(--text, #374151);
    cursor: pointer;
}

/* the image currently used as the cover */
.we-page .default-image {
    border-color: transparent;
    background: var(--primary, #C1122F);
    color: #fff;
    cursor: default;
}

/* the single factor attachment: a compact picker with the preview beside it */
.factor-file-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

    /* holds the picker button and its hint; the preview sits next to it */
    .factor-file-field .vitrin-images {
        display: flex;
        align-items: center;
        gap: 10px;
    }

/* the native control is unstyleable, so it stays for the form post and the
   label in front of it is what the user sees and clicks */
.factor-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.we-page .factor-file-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 16px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    background: var(--surface, #fff);
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #374151);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

    .we-page .factor-file-button > i {
        font-size: 13px;
        color: var(--primary, #C1122F);
    }

    .we-page .factor-file-button:hover {
        border-color: var(--primary, #C1122F);
        background: rgba(193, 18, 47, .06);
    }

/* the hidden input can still be reached with the keyboard */
.factor-file-input:focus-visible + .factor-file-button {
    outline: 2px solid var(--primary, #C1122F);
    outline-offset: 2px;
}

.factor-file-hint {
    font-size: 12px;
    color: var(--text-muted, #9CA3AF);
}

.factor-file-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 10px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 12px;
    background: var(--surface, #fff);
}

/* fixed box so a tall photo and the pdf icon take the same room */
.factor-file-thumb {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--background, #F8FAFC);
}

    .factor-file-thumb canvas,
    .factor-file-thumb img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 6px;
    }

.factor-file-meta {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 220px;
}

.factor-file-name {
    display: block;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text, #374151);
}

.factor-file-size {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted, #9CA3AF);
}

.we-page .factor-file-remove {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--background, #F8FAFC);
    font-size: 16px;
    line-height: 1;
    color: var(--text-muted, #9CA3AF);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

    .we-page .factor-file-remove:hover {
        background: rgba(220, 38, 38, .12);
        color: #B91C1C;
    }

/* ========================= invoice list ========================== */
/* WikiVitrin/PartialListVitrins + PartialListSingleFactor render inside
   the detail card. Both are shared partials that keep their own markup
   and inline <style>, so everything below is scoped to .we-page: the
   guild profile, which uses the same partials outside the panel, is
   left exactly as it was.                                            */

/* the strip now carries a single tab, and the card head above it
   already says "فاکتور ها" - so it is redundant here */
.we-page .wikiVitrins .nav-tabs {
    display: none;
}

.we-page .wikiVitrins .tab-content {
    padding: 0;
    border: 0;
    background: none;
}

.we-page .wikiVitrins .well {
    margin: 0;
    padding: 26px 18px;
    border: 1px dashed var(--border, #E5E7EB);
    border-radius: 14px;
    box-shadow: none;
    background: var(--surface-alt, #F1F5F9);
    color: var(--text-secondary, #6B7280);
    font-size: 14px;
}

.we-page .vitrin-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* .list-group rides along on the same element */
    margin: 0;
    padding: 0;
}

.we-page .vitrin-list-item {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 14px;
    background: var(--surface, #fff);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .we-page .vitrin-list-item:hover {
        transform: none;
        border-color: var(--primary, #C1122F);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    }

.we-page .vitrin-content-area {
    padding: 0 14px;
}

.we-page .vitrin-title-row {
    border-bottom-color: var(--border, #E5E7EB);
}

.we-page .vitrin-title {
    font-size: 15px;
    color: var(--text, #374151);
}

    .we-page .vitrin-title .fa {
        color: var(--primary, #C1122F);
    }

.we-page .vitrin-meta-label {
    color: var(--text-secondary, #6B7280);
}

    .we-page .vitrin-meta-label .fa {
        color: var(--primary, #C1122F);
    }

.we-page .vitrin-meta-value {
    color: var(--text, #374151);
}

/* the panel skin keeps amounts in the body colour rather than green */
.we-page .vitrin-meta-value--price {
    color: var(--text, #374151);
}

.we-page .vitrin-unit,
.we-page .vitrin-meta-time {
    color: var(--text-secondary, #6B7280);
}

.we-page .vitrin-meta-cell--muted .vitrin-meta-value {
    color: var(--text-secondary, #6B7280);
}

    /* the registration cell keeps its label quiet - it is not a headline */
    .we-page .vitrin-meta-cell--muted .vitrin-meta-label .fa {
        color: var(--text-secondary, #6B7280);
    }

/* invoice number / payable / receivable pills */
.we-page .vitrin-badge,
.we-page .vitrin-badge-payable,
.we-page .vitrin-badge-receivable {
    margin: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--surface-alt, #F1F5F9);
    color: var(--text, #374151);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.9;
}

.we-page .vitrin-badge-payable {
    background: rgba(220, 38, 38, .1);
    color: var(--error, #DC2626);
}

.we-page .vitrin-badge-receivable {
    background: rgba(22, 163, 74, .12);
    color: var(--success, #16A34A);
}

.we-page .vitrin-image-container img {
    border-radius: 10px;
   /* border: 1px solid var(--border, #E5E7EB);*/
}

/* row actions wear the panel button skin */
.we-page .vitrin-btn-group {
    gap: 9px;
}

.we-page a.vitrin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    background: var(--surface, #fff);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text, #374151);
    text-decoration: none;
}

    .we-page a.vitrin-btn:hover {
        border-color: var(--primary, #C1122F);
        color: var(--primary, #C1122F);
    }

    .we-page a.vitrin-btn.vitrin-btn-delete,
    .we-page a.vitrin-btn.vitrin-btn-delete:hover {
        border-color: rgba(220, 38, 38, .35);
        color: var(--error, #DC2626);
    }

/* --------------------------- responsive -------------------------- */
@media (max-width: 767px) {
    .we-info {
        grid-template-columns: 1fr;
    }

    /* the business card unstacks into icon+name, then chips, then a
       full-width action column */
    .we-biz {
        flex-wrap: wrap;
        padding: 16px;
    }

    .we-biz-main {
        flex: 1 1 60%;
    }

    .we-biz-actions {
        flex: 1 1 100%;
        justify-content: stretch;
    }

    .we-page a.we-biz-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .we-biz-search {
        flex: 1 1 100%;
    }

    /* the order head stacks: number+date, then total and status */
    .we-order-id {
        flex: 1 1 60%;
    }

    .we-order-total,
    .we-order-status {
        flex: 1 1 auto;
    }

    .we-order-facts {
        grid-template-columns: 1fr;
    }

    .we-page a.we-order-link,
    .we-page button.we-order-link {
        flex: 1 1 auto;
        justify-content: center;
    }


    .we-page .we-steps > li {
        flex: 1 1 100%;
    }

        .we-page .we-steps > li + li {
            border-right: 0;
            border-top: 1px solid var(--border, #E5E7EB);
        }

        .we-page .we-steps > li > a {
            justify-content: flex-start;
            padding: 13px 16px;
        }

    .we-page .tab-content,
    .we-form-body {
        padding: 20px 16px;
    }

    .we-form-head,
    .we-form-foot {
        padding: 14px 16px;
    }

    .we-form-foot,
    .we-form-foot .ac-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .we-page .we-pager {
        flex-direction: column-reverse;
        align-items: stretch;
        padding: 16px;
    }

        .we-page .we-pager > li > a {
            width: 100%;
        }

    .we-row,
    .we-panel-body {
        padding: 14px;
    }

    .we-row-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ================== two sections side by side ====================== */
/*  used by the sepami page to put «اطلاعات خریدار» (two fields) and
    «اطلاعات مالی» (one field) on one line.

    the split repeats the track definition of .ac-grid--fill with the
    same gap, so its columns are whole grid tracks: a section spanning
    two tracks is exactly as wide as two fields plus the gap between
    them, and its own .ac-grid--fill splits it back into those two
    tracks. that is what keeps every input on the card the same width.
    changing the gap here breaks that - it must stay 18px.

    .ac-section keeps the dashed separator above the pair; below 900px
    the columns stack and get their own separator.                     */
.we-page .we-split,
.ac-page .we-split {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
}

    .we-page .we-split > .we-split-col,
    .ac-page .we-split > .we-split-col {
        min-width: 0;
    }

    .we-page .we-split > .we-split-col--wide,
    .ac-page .we-split > .we-split-col--wide {
        grid-column: span 2;
    }

@media (max-width: 900px) {
    .we-page .we-split,
    .ac-page .we-split {
        grid-template-columns: 1fr;
    }

        /*  span 2 on a single-track grid would conjure an implicit second
            column, so the spans are dropped along with the columns.      */
        .we-page .we-split > .we-split-col--wide,
        .ac-page .we-split > .we-split-col--wide {
            grid-column: auto;
        }

        .we-page .we-split > .we-split-col + .we-split-col,
        .ac-page .we-split > .we-split-col + .we-split-col {
            padding-top: 26px;
            border-top: 1px dashed var(--border, #E5E7EB);
        }
}

/* ============================== bills ============================== */
/*  one row per bill: due date + amount, added and removed at runtime.
    each row reuses the .ac-grid--fill of the sections above, so the two
    inputs land on the same tracks - and therefore the same width - as
    the seller fields, and the delete button takes the third track.    */
.we-page .we-boe-intro {
    margin: -6px 0 18px;
}

.we-page .we-boe-row + .we-boe-row {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--border, #E5E7EB);
}

/*  the blank label keeps the button on the input line, the same trick
    .ac-field--check uses for its checkbox                             */
.we-page .we-boe-act > .ac-label {
    visibility: hidden;
}

.we-page .we-boe-remove {
    align-self: start;
    height: var(--field-height, 42px);
    padding: 0 16px;
    color: var(--error, #DC2626);
}

    .we-page .we-boe-remove:hover {
        border-color: var(--error, #DC2626);
        color: var(--error, #DC2626);
    }

.we-page .we-boe-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.we-page .we-boe-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 13px;
    color: var(--text-secondary, #4B5563);
}

    .we-page .we-boe-totals b {
        color: var(--text, #374151);
    }

    /* جمع برات‌ها از مبلغ فاکتور رد کرده است */
    .we-page .we-boe-totals b.we-boe-over {
        color: var(--error, #DC2626);
    }

/* ========================= view mode switch ====================== */
/*  Shared by the lists that render the same records two ways: the cards
    they default to, and one table-like row each. Both markups are on the
    page and the switch only swaps which container is shown, so the two
    pages that use it (the factors on a business, the orders list) get the
    same control rather than one each. */
.we-viewmode {
    display: inline-flex;
    margin-inline-start: auto;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface, #fff);
}

.we-page .we-viewmode-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: auto;
    margin: 0;
    padding: 9px 16px;
    border: 0;
    border-radius: 0;
    background: var(--surface, #fff);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #6B7280);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .we-page .we-viewmode-btn + .we-viewmode-btn {
        border-inline-start: 1px solid var(--border, #E5E7EB);
    }

    .we-page .we-viewmode-btn:hover {
        background: var(--surface-alt, #F1F5F9);
        color: var(--text, #374151);
    }

    .we-page .we-viewmode-btn.is-active {
        background: var(--primary, #C1122F);
        color: #fff;
    }

/*  on a head band the switch is the last thing on the line, after the count and
    the clear button that already carry the auto margin - its own auto margin
    would open a second gap and split the pair apart. Riding here rather than on
    a bar of its own is what saves that bar's ~60px. */
.ac-page .we-form-head--action > .we-viewmode {
    margin-inline-start: 0;
    align-self: center;
}

    .ac-page .we-form-head--action > .we-viewmode > .we-viewmode-btn {
        padding: 7px 14px;
    }

/*  wrapped onto its own line it fills the row, like the button above it */
@media (max-width: 575px) {
    .ac-page .we-form-head--action > .we-viewmode {
        width: 100%;
        margin-top: 8px;
    }

        .ac-page .we-form-head--action > .we-viewmode > .we-viewmode-btn {
            flex: 1 1 0;
            justify-content: center;
        }
}

/*  display:none here rather than from the script, so the cards stay the
    default even for the moment before the switch is wired up */
.we-viewmode-rows {
    display: none;
}

/*  the row view packs the card's action pills into one cell; they keep the
    look they have in the card foot and only stop wrapping */
.we-page .we-table .we-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    /*  a table row is half the height of a card foot, so the pill is trimmed to
        match. flex is pinned back to 0 0 auto because the narrow-screen rule for
        the card foot stretches these to fill their line - in a cell that turns
        one button into a block the width of the column */
    .we-page .we-table .we-row-actions .we-order-link {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 6px 13px;
        font-size: 12.5px;
        line-height: 1.7;
    }

/*  the primary pill is white-on-red, so every link state has to be spelled out:
    the tenant sheets carry id-scoped rules like `#tblOrders tbody tr td a
    { color: var(--primary-color) }` that outrank a class selector and would
    paint the label the same red as the button it sits on */
.we-page a.we-order-link.we-order-link--main,
.we-page a.we-order-link.we-order-link--main:hover,
.we-page a.we-order-link.we-order-link--main:focus,
.we-page a.we-order-link.we-order-link--main:visited {
    color: #fff;
    text-decoration: none;
}

/*  the count next to the clear button of a filter panel */
.we-filter-count {
    align-self: center;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-secondary, #6B7280);
}

/*  on a head band the count travels with the button at the far end: the auto
    margin moves onto the count and off the button, so the pair stays together
    and the button's edge does not shift when the count appears or empties */
.ac-page .we-form-head--action > .we-filter-count {
    margin-inline-start: auto;
}

    .ac-page .we-form-head--action > .we-filter-count + .ac-btn {
        margin-inline-start: 0;
    }

/*  the band is tinted, so a transparent ghost button reads as a hole in it */
.ac-page .we-form-head--action > .ac-btn--ghost {
    background: var(--surface, #fff);
}

/*  a row's attachment is one icon rather than the card's thumbnail: a cell has
    no room for a preview, and downloading is the only thing that thumbnail was
    ever clicked for. the glyph says what will arrive, the arrow is the
    affordance */
.we-page a.we-file-icon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px;
    color: var(--error, #DC2626);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

    .we-page a.we-file-icon:hover {
        border-color: var(--text-muted, #9CA3AF);
        background: var(--surface-alt, #F1F5F9);
        text-decoration: none;
    }

    .we-page a.we-file-icon .fa-download {
        font-size: 10px;
        color: var(--text-secondary, #6B7280);
    }

.we-page a.we-file-icon--image {
    color: var(--info, #2563EB);
}

.we-file-none {
    color: var(--text-muted, #9CA3AF);
}

/*  a cell that carries two lines - a name and the reference detail under it */
.we-page .we-table td.we-cell-stack {
    white-space: normal;
    min-width: 150px;
}

.we-cell-main {
    display: block;
    font-weight: 700;
}

    .we-cell-main--muted {
        font-weight: 400;
        color: var(--text-muted, #9CA3AF);
    }

.we-cell-sub {
    display: block;
    font-size: 12px;
    color: var(--text-secondary, #6B7280);
}

/*  a status pill inside a cell: the same colours the card head uses, minus
    the card's layout - the cell already places it */
.we-page .we-table .we-order-status {
    display: inline-block;
    width: auto;
    max-width: none;
    padding: 4px 11px;
    text-align: center;
    white-space: normal;
}