/* BPMS Theme - Phase 1: Foundation
   Loaded after material.css and ControlPanel.css; Session["CustomCss"] still wins.
   Only colors, borders, radius, shadows and focus states change here - no layout geometry. */

/*#region Tokens */

:root {
    --accent: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-hover: color-mix(in srgb, var(--accent) 85%, #000);
    --accent-soft: rgba(37, 99, 235, 0.10);
    --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
    --danger: #DC2626;
    --Danger: #DC2626;
    --warning: #F59E0B;
    --info: #0284C7;
    --Success: #16A34A;
    --success: #16A34A;
    --color: #475569;
    --heading: #1E293B;
    --hint: #CBD5E1; /* used as border color across material.css */
    --muted: #64748B;
    --hover: rgba(15, 23, 42, 0.05);
    --haedColor: #F8FAFC;
    --border: #E2E8F0;
    --border-strong: #CBD5E1;
    --radius: 8px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.25);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/*#endregion */

/*#region Base */

body {
    color: var(--color);
}

*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Text fields always match :focus-visible, even on mouse click, and they already draw their own inset focus border;
   the outer outline made them look bigger and got clipped inside narrow containers like the login carousel */
input:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=image]):focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
}

::selection {
    background-color: var(--accent-soft);
}

html {
    scrollbar-color: var(--border-strong) transparent;
}

/* body is a flex row; without this the form grows to its content's min width on phones and the page scrolls sideways */
body > form {
    min-width: 0;
}

.lbl-name,
.fileUploader span,
::placeholder {
    color: var(--muted);
}

/*#endregion */

/*#region Header & Menu */

header {
    box-shadow: var(--shadow-md);
}

nav {
    box-shadow: -1px 0 0 var(--border), var(--shadow-md);
}

    nav a:hover {
        color: var(--accent) !important;
        background-color: var(--accent-soft) !important;
        box-shadow: inset -3px 0 0 var(--accent);
    }

div.ui-tooltip {
    border-radius: var(--radius-sm) !important;
    background: rgba(15, 23, 42, 0.88) !important;
}

nav #txtSearchMenu {
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    margin-top: 9px;
}

header .Title {
    font-weight: 500;
}

header .Company,
header .Notification items {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

/* Organization card opened from the page title: logo, organization name and online users */
header .Company {
    top: 58px;
    right: 56px;
    min-width: 260px;
    padding: 14px 16px;
    border-radius: 12px;
    background-color: var(--surface);
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.06);
}

    header .Company.Open {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    header .Company .arrow-company {
        display: none;
    }

    /* the system logo of the login page (Option.aspx > لوگو سازمان saves it as Images/arm.png), bare and larger */
    header .Company #Logo {
        flex: none;
        float: none;
        width: 76px;
        height: 76px;
        margin: 0;
        border-radius: 0;
        background-image: url('../Images/arm.png');
        background-color: transparent;
        background-size: contain;
        box-shadow: none;
    }

    header .Company .PageInfo {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 0;
    }

        header .Company .PageInfo .company-name {
            padding: 0;
            color: var(--heading);
            font-size: 11.5pt;
            font-weight: 600;
            line-height: 1.6;
        }

        header .Company .PageInfo .online-worker {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 0;
            padding: 2px 10px 2px 10px;
            border-radius: 999px;
            background-color: color-mix(in srgb, var(--success) 12%, transparent);
            color: var(--color);
            font-size: 9.5pt;
        }

            header .Company .PageInfo .online-worker::before {
                content: '';
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background-color: var(--success);
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent);
            }

/* Left side of the header: notifications, chat, theme picker and profile in one evenly spaced row */
header .LeftHeader {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 51px;
    padding: 0 8px;
    box-sizing: border-box;
}

header .Profile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 6px 0 0;
}

#username {
    font-size: 11pt;
    margin: 0;
}

#UserImage {
    display: block;
    line-height: 0;
}

header .Picture {
    width: 34px;
    height: 34px;
    margin: 0;
    float: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
    transition: transform .2s, box-shadow .2s;
}

    #UserImage:hover .Picture {
        transform: scale(1.18);
        box-shadow: 0 0 0 2px var(--accent), var(--shadow-md);
    }

/* Posts popup on avatar hover; the header text color is dark in the light themes, so the popup sets its own */
header .Post {
    background: rgba(15, 23, 42, 0.92);
    color: #FFFFFF;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 6px 12px;
    margin-left: 8px;
    max-width: 260px;
    line-height: 1.8;
    transform-origin: top left;
}

/* Notifications: same 40px box and muted icon as the chat and theme buttons */
header .Notification {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    color: var(--color);
}

    header .Notification .btnOpen {
        position: relative;
        top: auto;
        left: auto;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0;
        border-radius: 8px;
        font-size: 22px;
        color: color-mix(in srgb, var(--header-text, #FFFFFF) 60%, transparent);
        transition: color .2s;
    }

        header .Notification .btnOpen:hover,
        header .Notification.Open .btnOpen {
            color: var(--header-text, #FFFFFF);
        }

        header .Notification .btnOpen span {
            position: absolute;
            top: 3px;
            left: 3px;
            right: auto;
            bottom: auto;
            min-width: 16px;
            height: 16px;
            line-height: 16px;
            padding: 0 4px;
            box-sizing: border-box;
            border-radius: 8px;
            font-size: 8.5pt;
            color: #FFFFFF;
            background: var(--danger);
        }

    header .Notification items {
        position: absolute;
        top: 46px;
        left: 0;
        width: 320px;
        /* At most 10 items plus the footer button fit without a scrollbar; scroll only on very short windows */
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        z-index: 1100;
        box-sizing: border-box;
        padding: 0 6px 6px;
        border-radius: 12px;
        background-color: var(--surface);
        box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.06);
        scrollbar-width: thin;
    }

        /* Panel title; sticky so it stays while the list scrolls */
        header .Notification items:before {
            content: 'اعلان‌ها';
            position: sticky;
            top: 0;
            left: auto;
            z-index: 1;
            display: block;
            width: auto;
            height: auto;
            transform: none;
            margin: 0 -6px 4px;
            padding: 12px 16px 10px;
            border: 0;
            border-bottom: 1px solid var(--border);
            background-color: inherit;
            color: var(--heading);
            font-size: 10.5pt;
            font-weight: 600;
            text-align: right;
        }

        /* Bold inline style marks unread requests */
        header .Notification items a {
            position: relative;
            padding: 7px 30px 7px 10px;
            border-radius: 8px;
            font-size: 10pt;
            line-height: 1.6;
            font-weight: 400 !important;
            color: var(--muted) !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            header .Notification items a::before {
                content: '';
                position: absolute;
                top: 50%;
                right: 12px;
                width: 7px;
                height: 7px;
                border-radius: 50%;
                transform: translateY(-50%);
                background-color: var(--border-strong);
            }

            header .Notification items a[style*="bold"] {
                font-weight: 600 !important;
                color: var(--heading) !important;
            }

                header .Notification items a[style*="bold"]::before {
                    background-color: var(--accent);
                    box-shadow: 0 0 0 3px var(--accent-soft);
                }

            header .Notification items a:hover {
                background-color: var(--haedColor) !important;
                color: var(--heading) !important;
            }

            /* "See more" link as a clear full-width button, separated from the list */
            header .Notification items a[href="Dashboard.aspx"] {
                display: flex !important;
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin: 8px 0 0;
                padding: 9px 12px;
                border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
                border-radius: 8px;
                background-color: var(--accent-soft) !important;
                color: var(--accent) !important;
                font-weight: 600 !important;
                text-align: center;
                overflow: visible;
                transition: background-color .2s, color .2s, border-color .2s;
            }

                header .Notification items a[href="Dashboard.aspx"]::before {
                    content: '';
                    position: absolute;
                    top: -5px;
                    right: 4px;
                    left: 4px;
                    width: auto;
                    height: 1px;
                    border-radius: 0;
                    transform: none;
                    background-color: var(--border);
                    box-shadow: none;
                }

                header .Notification items a[href="Dashboard.aspx"]::after {
                    content: '←';
                    font-size: 12pt;
                    line-height: 1;
                    transition: transform .2s;
                }

                header .Notification items a[href="Dashboard.aspx"]:hover {
                    border-color: var(--accent);
                    background-color: var(--accent) !important;
                    color: var(--on-accent, #FFFFFF) !important;
                }

                    header .Notification items a[href="Dashboard.aspx"]:hover::after {
                        transform: translateX(-3px);
                    }

.chatAlarm span {
    background: var(--danger);
}

.Shortcut .Link, .Shortcut .Add, .Shortcut a {
    background: var(--accent);
    box-shadow: var(--shadow-md);
}

footer {
    color: var(--muted);
    border-top: 1px solid var(--border);
}

/*#endregion */

/*#region Buttons */

/* Cancel buttons carry different classes from page to page (Button, btnDefault, btnDelete) and FillForm's text
   comes from the step settings, so they are also matched by value and by the btnCancel / btnCancel2 IDs.
   --on-accent comes from the login settings' button text color, with white as the default */
.Button:not(.btnDefault, .Cancel, [value="انصراف"], [id$="btnCancel"], [id$="btnCancel2"]),
.Button2:not(.btnDefault, .Cancel, [value="انصراف"], [id$="btnCancel"], [id$="btnCancel2"]) {
    color: var(--on-accent, #FFFFFF) !important;
}

.Button, .Button2 {
    border-radius: var(--radius-sm);
    padding: 7px 16px !important;
    font-size: 11pt !important;
    box-shadow: var(--shadow-sm);
    transition: background-color ease .2s, box-shadow ease .2s;
}

    .Button:after, .Button2:after {
        display: none;
    }

    .Button:hover, .Button2:hover {
        background-color: var(--accent-hover) !important;
        box-shadow: var(--shadow-md);
    }

    .Button:focus-visible, .Button2:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }

    :is(.Button, .Button2):is(.Cancel, .btnDefault, [value="انصراف"], [id$="btnCancel"], [id$="btnCancel2"]) {
        background-color: white !important;
        color: var(--color) !important;
        box-shadow: inset 0 0 0 1px var(--border-strong);
    }

        :is(.Button, .Button2):is(.Cancel, .btnDefault, [value="انصراف"], [id$="btnCancel"], [id$="btnCancel2"]):hover {
            background-color: var(--haedColor) !important;
        }

.btnDefault:hover {
    background-color: var(--hover) !important;
}

/* One size for every action button. material.css and ControlPanel.css set the padding with !important
   (input[type=submit], .fillForm, .stepActionBox), hence the html…body prefix */
html[data-theme] body :is(.Button, .Button2) {
    box-sizing: border-box;
    height: 38px;
    min-width: 72px;
    padding: 0 18px !important;
    font-size: 11pt !important;
    line-height: 36px;
}

/* Search bars: the button keeps its width and sits centred beside the taller search field */
html[data-theme] body .search .Button {
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
}

/*#endregion */

/*#region Inputs */

.customSelect, .TextBox, .TextBoxReq,
select, select.TextBox, select.TextBoxReq {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color ease .2s, box-shadow ease .2s;
}

    .TextBox:hover, .TextBoxReq:hover, .customSelect:hover {
        border-color: #94A3B8;
    }

/* Focus and error stay inside the field (inset shadow) so the field never grows and nothing gets clipped by its container */
.focus .TextBoxReq,
.focus .TextBox,
.TextBox:focus,
.TextBoxReq:focus {
    border: 1px solid var(--accent) !important;
    box-shadow: inset 0 0 0 1px var(--accent);
}

.TextBoxReq.invalid {
    border: 1px solid var(--danger) !important;
    box-shadow: inset 0 0 0 1px var(--danger);
}

/* Captcha box holds an input, the image and a refresh button; an inset outline paints above them, an inset shadow would not */
#capcha {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}

    #capcha:focus-within {
        border-color: var(--accent);
        outline: 1px solid var(--accent);
        outline-offset: -2px;
    }

/*#endregion */

/*#region Dynamic form fields (ccField: FillForm, Step and Field pages) */
/* Class and attribute selectors only: ccField control IDs are generated per form */

/* Combo (kind 12): 22px line keeps it at the 43px height of the text fields */
.customSelect {
    line-height: 22px;
    padding-bottom: 9px;
}

    .customSelect::after {
        background-color: var(--muted);
    }

    .customSelect.active {
        border-color: var(--accent);
        box-shadow: inset 0 0 0 1px var(--accent);
    }

    .customSelect items {
        background-color: var(--surface);
        border-radius: var(--radius);
        line-height: 1.6;
    }

    .customSelect.active items {
        box-shadow: 0 0 0 1px var(--border), var(--shadow-md);
    }

    .customSelect items item {
        color: var(--color);
    }

        .customSelect items item:hover {
            background-color: var(--accent-soft);
        }

        .customSelect items item.active {
            color: var(--accent);
            background-color: var(--accent-soft);
        }

/* Image and file (kinds 14, 15): same frame as the text fields */
.fileUploader {
    box-sizing: border-box;
    min-height: 43px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background-size: 26px;
    background-position: 14px center;
    padding-left: 52px;
    transition: border-color ease .2s, box-shadow ease .2s;
}

    /* The hidden file input sets the frame height; it inherits the 44px TextBoxReq box */
    .fileUploader input[type=file] {
        display: block;
        box-sizing: border-box;
        height: 41px;
    }

    .fileUploader:hover {
        border-color: #94A3B8;
    }

    .fileUploader:focus-within,
    .focus .fileUploader {
        border-color: var(--accent);
        box-shadow: inset 0 0 0 1px var(--accent);
    }

.tdUploader:has(.Del) .fileUploader {
    border-color: color-mix(in srgb, var(--success) 55%, var(--border-strong));
}

/* Full width by default; narrower only while view / download / delete / clear icons are shown beside it */
.dynamicForm .fileUploader {
    width: 100%;
}

.dynamicForm .tdUploader:has(.uplIcon:not([style*="display: none"]):not([style*="display:none"])) .fileUploader {
    width: calc(100% - 100px);
}

/* Those icons in one row, centred on the 43px field (icons are 28px boxes, field centre is 31px above the cell bottom) */
.tdUploader .uplIcon {
    bottom: 17px;
    width: 20px;
    height: 20px;
    padding: 4px;
    border-radius: 6px;
    transition: background-color .2s;
}

    .tdUploader .uplIcon:hover {
        background-color: var(--haedColor);
    }

.tdUploader .galleryLink.uplIcon {
    left: 4px;
    bottom: 17px;
}

.tdUploader .uplIcon[src$="Save.png"] {
    left: 34px;
    bottom: 17px;
}

.tdUploader .uplIcon.Del,
.tdUploader .uplIcon.clear {
    left: 64px;
    bottom: 17px;
}

/* Checkbox list and radio list (kinds 11, 13) */
.checkbox .mark,
.radio .mark {
    border-color: #94A3B8;
}

.checkbox .mark {
    border-radius: 4px;
}

.checkbox:hover input ~ .mark:before,
.radio:hover input ~ .mark:before {
    background-color: var(--accent-soft);
}

.checkbox input:focus-visible ~ .mark,
.radio input:focus-visible ~ .mark {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.checkbox input:checked ~ .mark,
.radio input:checked ~ .mark {
    border-color: var(--accent);
}

/* Fields whose label sits above the control (time, lists, description, child, table, calculated, map, payment, plate, rich text) */
.lbl-name[kind="7"],
.lbl-name[kind="11"],
.lbl-name[kind="13"],
.lbl-name[kind="16"],
.lbl-name[kind="18"],
.lbl-name[kind="19"],
.lbl-name[kind="20"],
.lbl-name[kind="21"],
.lbl-name[kind="22"],
.lbl-name[kind="25"],
.lbl-name[kind="27"] {
    color: var(--heading);
    font-size: 10.5pt;
    font-weight: 600;
    margin: 14px 0 8px 16px !important;
}

/* Long labels: one line with an ellipsis (material.js puts the full text in the tooltip).
   The required star moves inside the label's left padding so overflow:hidden does not clip it. */
td.dynamicForm .lbl-name {
    box-sizing: border-box;
    max-width: calc(100% - 44px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

td.dynamicForm .required .lbl-name {
    padding-left: 14px;
}

    td.dynamicForm .required .lbl-name::after {
        transform: translate(0, -50%);
    }

/* Static ASP.NET validators reserve their line while hidden; keep it only when a message shows */
td.dynamicForm span[style*="visibility:hidden"] {
    display: none;
}

td.dynamicForm span[style*="color:Red"] {
    color: var(--danger) !important;
    font-size: 9.5pt;
}

/* Time (kind 7): hour and minute spinners inside one field frame */
.BorderTime {
    display: inline-flex !important;
    align-items: center;
    box-sizing: border-box;
    height: 43px;
    padding: 0 6px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--muted);
    transition: border-color ease .2s, box-shadow ease .2s;
}

    .BorderTime:hover {
        border-color: #94A3B8;
    }

    .BorderTime:focus-within {
        border-color: var(--accent);
        box-shadow: inset 0 0 0 1px var(--accent);
    }

    .BorderTime > div > span > .ui-spinner-input {
        margin: 0 18px 0 0 !important;
        padding: 0 4px;
        font-size: 12pt;
        line-height: 41px;
        height: 41px;
    }

    .BorderTime > div > span > a,
    .BorderTime > div > span > a:hover {
        width: 16px;
        height: 16px;
        top: 4px;
        right: 2px;
        border-radius: 0;
        background: var(--muted) !important;
        -webkit-mask: url(../images/down.svg) center / 12px no-repeat;
        mask: url(../images/down.svg) center / 12px no-repeat;
    }

        .BorderTime > div > span > a:hover {
            background: var(--accent) !important;
        }

        .BorderTime > div > span > a.ui-spinner-up {
            transform: rotate(180deg);
        }

        .BorderTime > div > span > a.ui-spinner-down {
            bottom: 4px;
        }

/* Description (kind 16): a quiet note between the fields */
.lbl-name[kind="16"] + span[kind="16"] {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    clear: both;
    padding: 10px 14px;
    border-radius: var(--radius);
    background-color: var(--accent-soft);
    box-shadow: inset -3px 0 0 var(--accent);
    color: var(--color);
    line-height: 1.9;
}

    .lbl-name[kind="16"] + span[kind="16"] > p {
        margin: 0;
    }

.lbl-name[kind="16"] + span[kind="16"] {
    margin-bottom: 12px;
}

/* Checkbox or radio list without a visible label (e.g. "I accept the terms"): keep it off the field above */
td.dynamicForm column-width + span.lstRadio {
    display: block;
    margin-top: 12px;
}

/* Table (kind 19) and child-form list (kind 18) */
table[kind="19"],
/* child form loading (ccField) : a skeleton of the list it is loading - the header and two rows
   (the bars are in ControlPanel.css, for the classic theme too) */
html[data-theme] div.child .gridloading {
    position: static !important;
    clear: both;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0 !important;
    padding: 2px 0;
    background: none !important;
    box-shadow: none !important;
    cursor: progress;
}

/* the loading (BPMS mark) always sits in a white circle : the gif edges are blended on white,
   so they stay clean on any background and the round edge is drawn by the browser.
   no padding or outline : the mark fills the circle */
html[data-theme] img[src$='images/loading.gif' i] {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #FFFFFF;
    box-shadow: none;
}

/* page loading (MasterPage #loading) : a card over a light veil, the mark in its circle,
   a second line of text and a running bar on the bottom edge */
html[data-theme] #loading {
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    min-width: 250px;
    padding: 14px 16px 17px 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background-color: var(--surface, #FFFFFF);
    color: var(--heading);
    font-size: 10pt;
    font-weight: 600;
    line-height: 1.7;
    text-align: right;
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.12), 0 20px 44px -14px rgba(15, 23, 42, 0.38);
    cursor: progress;
}

    html[data-theme] #loading img {
        position: static;
        flex: none;
        width: 50px;
        height: 50px;
        margin: 0 !important;
    }

    html[data-theme] #loading span:after {
        content: 'در حال آماده سازی اطلاعات';
        display: block;
        color: var(--muted);
        font-size: 8.5pt;
        font-weight: normal;
    }

    html[data-theme] #loading:after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat;
        background-size: 40% 100%;
        animation: bpmsLoadingBar 1s linear infinite;
    }

@keyframes bpmsLoadingBar {
    from {
        background-position: 170% 0;
    }

    to {
        background-position: -70% 0;
    }
}

div.child table {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
}

    table[kind="19"] th,
    div.child table th {
        background-color: var(--haedColor) !important;
        color: var(--heading) !important;
        font-size: 9.5pt !important;
        font-weight: 600;
        padding: 10px 8px;
        border: 0 !important;
        border-bottom: 1px solid var(--border) !important;
    }

    table[kind="19"] td,
    div.child table td {
        border-color: var(--border) !important;
    }

    table[kind="19"] td input[type=text] {
        border-radius: 6px;
        border: 1px solid transparent;
        border-bottom-color: var(--border-strong);
        transition: border-color ease .2s;
    }

        table[kind="19"] td input[type=text]:focus {
            border-color: var(--accent);
            outline: none;
        }

/* State and city (kind 28): two equal boxes with the same 16px gap as between field columns */
td.dynamicForm panel[id$="_stateCity"] {
    display: flex;
    gap: 16px;
}

    td.dynamicForm panel[id$="_stateCity"] > :is(select, div.customSelect) {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
        margin-left: 0;
        margin-right: 0;
    }

/* Plate (kind 27) : no overflow:hidden on the table, it would clip the letter list when it opens;
   the shaded "ایران" label rounds its own corner instead */
table.Plate {
    border-color: var(--border-strong) !important;
    border-radius: var(--radius) !important;
    overflow: visible !important;
}

    table.Plate td:last-child .lblIranPlate {
        border-top-right-radius: calc(var(--radius) - 1px);
    }

    /* the letter list over the next cells and the fields below */
    table.Plate .customSelect.active {
        z-index: 20;
    }

    table.Plate td + td {
        border-right: 1px solid var(--border);
    }

    table.Plate .lblIranPlate {
        color: var(--muted);
    }

/* FillForm wizard buttons (static IDs in FillForm.aspx): next = primary, save draft = tonal, previous = outlined */
#tabs :is(#btnSave, [id$="btnStageDraft"]).Button {
    background-color: color-mix(in srgb, var(--accent) 14%, transparent) !important;
    color: color-mix(in srgb, var(--accent) 82%, #000000) !important;
    font-weight: 600;
    box-shadow: none;
}

    #tabs :is(#btnSave, [id$="btnStageDraft"]).Button:hover {
        background-color: color-mix(in srgb, var(--accent) 22%, transparent) !important;
    }

html[data-theme="dark"] #tabs :is(#btnSave, [id$="btnStageDraft"]).Button {
    color: var(--accent) !important;
}

/* FillForm captcha (final tab): one 43px field holding the input, the code image and the refresh icon */
.CaptchaBox {
    padding: 0;
    vertical-align: middle;
}

    .CaptchaBox #capcha {
        box-sizing: border-box;
        width: 320px;
        max-width: 100%;
        height: 43px;
        align-items: center;
        overflow: hidden;
        background-color: var(--surface);
    }

        .CaptchaBox #capcha input[type=text] {
            flex: 1;
            min-width: 0;
            width: auto;
            height: 41px;
            margin: 0;
            padding: 0 14px;
            border: 0;
            background: transparent;
            font-size: 11pt;
            letter-spacing: 2px;
            text-align: center;
        }

            .CaptchaBox #capcha input[type=text]::placeholder {
                letter-spacing: 0;
                font-size: 10pt;
            }

        .CaptchaBox #capcha #imgCaptcha {
            box-sizing: border-box;
            width: auto;
            height: 33px;
            margin: 0 4px;
            padding: 0 8px;
            border-radius: 6px;
            background-color: #FFFFFF;
            box-shadow: inset 0 0 0 1px var(--border);
        }

        .CaptchaBox #capcha #btnRefresh {
            box-sizing: border-box;
            width: 38px;
            height: 41px;
            padding: 10px;
            border: 0;
            border-right: 1px solid var(--border);
            opacity: .55;
            transition: opacity .2s;
        }

            .CaptchaBox #capcha #btnRefresh:hover {
                opacity: 1;
            }

        .CaptchaBox #capcha span[style*="hidden"] {
            display: none;
        }

/* File field hint: material.css makes it ltr, which moved the trailing "..." to the start of Persian text */
.fileUploader span {
    direction: rtl;
    max-width: calc(100% - 70px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* File field placeholder when ccField leaves the hint text empty */
.fileUploader span:empty::before {
    content: 'انتخاب فایل ...';
}

/* Allowed formats and size under file and image fields (ccField adds .fieldHint; before it lived only in the tooltip) */
td.dynamicForm .fieldHint {
    clear: both;
    margin: 6px 4px 0 0;
    color: var(--muted);
    font-size: 9pt;
    line-height: 1.6;
}

/* Request grid capped at the latest 300 rows when nothing is searched (FillForm LoadGrid sets the caption) */
.gridNote {
    display: block;
    margin: 4px 0 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(59, 130, 246, .08);
    color: var(--muted);
    font-size: 9pt;
    font-weight: normal;
    text-align: right;
}

/* Child-form list with no rows yet: the header row and the hidden "Add" row only, so say so instead of an empty table */
div.child:has(table > tbody > tr:nth-child(2):last-child > td > button.Button)::after {
    content: 'هنوز موردی ثبت نشده است.';
    display: block;
    clear: both;
    margin-top: 8px;
    padding: 14px 12px;
    border: 1px dashed var(--border-strong, #CBD5E1);
    border-radius: 10px;
    color: var(--muted);
    font-size: 9.5pt;
    text-align: center;
}

/* Child-form list row actions (view / edit / delete GIFs from ccField): the white PNGs and the same soft tinted buttons as .btnTable */
div.child td > a.HtmlTag:has(> img[src$="Magnifire.gif"], > img[src$="Edit.gif"], > img[src$="Delete.gif"]) {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    vertical-align: middle;
    filter: invert(1);
    transition: filter .15s, background-color .15s;
}

    div.child td > a.HtmlTag:has(> img[src$="Magnifire.gif"]) {
        background-color: #241501; /* #DBEAFE */
    }

    div.child td > a.HtmlTag:has(> img[src$="Edit.gif"]) {
        background-color: #010C38; /* #FEF3C7 */
    }

    div.child td > a.HtmlTag:has(> img[src$="Delete.gif"]) {
        background-color: #011D1D; /* #FEE2E2 */
    }

    div.child td > a.HtmlTag:hover {
        filter: none;
    }

        div.child td > a.HtmlTag:has(> img[src$="Magnifire.gif"]):hover {
            background-color: #2563EB;
        }

        div.child td > a.HtmlTag:has(> img[src$="Edit.gif"]):hover {
            background-color: #D97706;
        }

        div.child td > a.HtmlTag:has(> img[src$="Delete.gif"]):hover {
            background-color: #DC2626;
        }

    div.child td > a.HtmlTag > img[src$="Magnifire.gif"] {
        content: url(../Images/Magnifire.png);
    }

    div.child td > a.HtmlTag > img[src$="Edit.gif"] {
        content: url(../Images/Edit.png);
    }

    div.child td > a.HtmlTag > img[src$="Delete.gif"] {
        content: url(../Images/Delete.png);
    }

    div.child td > a.HtmlTag > img {
        width: 16px;
        height: 16px;
    }

div.child table th[style*="width:40px"] {
    text-align: center;
}

/* Child-form "Add" button: out of the table's last row, to the far end of the title row.
   The emptied row is hidden at zero height (collapse would hide the button too); the button stays visible and is placed against the field cell (position:relative). */
div.child table tr:has(> td > button.Button) {
    visibility: hidden;
}

    div.child table tr:has(> td > button.Button) > td {
        position: static;
        height: 0;
        padding: 0 !important;
        border: 0 !important;
        font-size: 0;
        line-height: 0;
    }

    div.child table tr:has(> td > button.Button) > td > button.Button {
        visibility: visible;
        position: absolute;
        top: 10px;
        left: 4px;
        float: none !important;
        height: 34px;
        margin: 0;
        padding: 0 14px 0 12px !important;
        font-size: 10pt;
    }

        div.child table tr:has(> td > button.Button) > td > button.Button .ui-button-text {
            display: inline-flex;
            align-items: center;
            padding: 0;
        }

        div.child table tr:has(> td > button.Button) > td > button.Button img {
            width: 16px;
            height: 16px;
            margin-left: 6px !important;
        }

/* Child-form list header: label, help icon and refresh button share one row (all float right, so no extra line box is created) */
td.dynamicForm td:has(> div.child) > img.Helper {
    float: right;
    margin: 16px 0 0 10px;
}

td.dynamicForm td > div.child > img.reload,
td.dynamicForm td > div.child > img.loading {
    float: right;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    margin: 16px 0 0 0;
    padding: 0;
    opacity: 1;
}

    /* reload.png is a pale grey (#C8C8C8): draw it as a mask in the accent color, same 22px as the help icon beside it */
    td.dynamicForm td > div.child > img.reload {
        object-position: 100px 100px;
        background-color: var(--accent);
        -webkit-mask: url(../Images/reload.png) center / 20px no-repeat;
        mask: url(../Images/reload.png) center / 20px no-repeat;
        transition: background-color .2s, transform .3s;
    }

        td.dynamicForm td > div.child > img.reload:hover {
            background-color: color-mix(in srgb, var(--accent) 75%, #000000);
            transform: rotate(90deg);
        }

#tabs #btnPrevTab.Button {
    background-color: transparent !important;
    color: var(--heading) !important;
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

    #tabs #btnPrevTab.Button:hover {
        background-color: var(--haedColor) !important;
    }

/* Rich text (kind 25) and other Froala editors */
.fr-box.fr-basic {
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px var(--border-strong);
}

    .fr-box.fr-basic .fr-toolbar,
    .fr-box.fr-basic.fr-top .fr-wrapper,
    .fr-box.fr-basic .fr-second-toolbar {
        border: 0 !important;
        box-shadow: none !important;
    }

    .fr-box.fr-basic .fr-toolbar {
        border-radius: var(--radius) var(--radius) 0 0 !important;
        border-bottom: 1px solid var(--border) !important;
        background-color: var(--haedColor);
    }

    .fr-box.fr-basic .fr-wrapper {
        border-radius: 0 0 var(--radius) var(--radius) !important;
    }

    .fr-box.fr-basic:focus-within {
        box-shadow: 0 0 0 1px var(--accent), inset 0 0 0 1px var(--accent);
    }

/*#endregion */

/*#region Tables & Boxes */

.box,
.table,
.frmTable {
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.frmTable {
    border-radius: var(--radius) var(--radius) 0 0;
}

.frmTblFoot {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
}

.table > tbody > tr > th {
    color: var(--heading);
    font-size: 11pt;
    border-bottom: 1px solid var(--border);
}

.table > tbody > tr > td {
    border-top: 1px solid var(--border);
    font-size: 11pt;
}

.table > tbody > tr:hover > td {
    background-color: var(--hover);
}

/*#endregion */

/*#region Themes - shared shell
   html[data-theme] is set in MasterPage.master from the person's "UiTheme" setting. */

html[data-theme] body {
    background-color: var(--canvas);
}

html[data-theme] header ~ article {
    box-sizing: border-box;
    max-width: min(var(--maxWidth), calc(100% - 85px));
    margin: 67px auto 56px;
    margin-right: max(69px, calc((100% - var(--maxWidth)) / 2));
    padding: 20px 24px;
    background-color: var(--surface);
}

html[data-theme] header {
    background-color: var(--header-bg);
    color: var(--header-text) !important;
}

    html[data-theme] header a,
    html[data-theme] .Profile a:hover {
        color: var(--header-text) !important;
    }

    html[data-theme] header .btnChat {
        filter: var(--header-icon-filter);
    }

html[data-theme] nav {
    background-color: var(--nav-bg);
}

    html[data-theme] nav a,
    html[data-theme] .pnlMenu a {
        color: var(--nav-text);
    }

        html[data-theme] nav a:hover {
            color: var(--nav-hover-text) !important;
            background-color: var(--nav-hover-bg) !important;
        }

    html[data-theme] nav #btnMenu,
    html[data-theme] nav .btnBack {
        background-color: var(--nav-top-bg);
        color: var(--nav-top-text);
    }

        html[data-theme] nav #btnMenu:hover,
        html[data-theme] nav .btnBack:hover {
            background-color: var(--nav-hover-bg) !important;
            color: var(--nav-hover-text) !important;
        }

    html[data-theme] nav #txtSearchMenu {
        color: var(--nav-top-text);
        background-color: var(--nav-search-bg);
    }

        /* The box starts 45px from the edge, so its corner peeked into the 53px collapsed menu */
        html[data-theme] nav:not(.Open) #txtSearchMenu {
            visibility: hidden;
        }

/*#endregion */

/*#region Theme: minimal (default) */

html[data-theme="minimal"] {
    --canvas: #F6F7F9;
    --surface: #FFFFFF;
    --header-bg: #FFFFFF;
    --header-text: var(--heading);
    --header-icon-filter: brightness(0) opacity(.55);
    --nav-bg: #FFFFFF;
    --nav-text: var(--color);
    --nav-hover-bg: var(--accent-soft);
    --nav-hover-text: var(--accent);
    --nav-top-bg: #FFFFFF;
    --nav-top-text: var(--heading);
    --nav-search-bg: var(--canvas);
}

    html[data-theme="minimal"] header {
        box-shadow: 0 1px 0 var(--border);
    }

    html[data-theme="minimal"] header ~ article {
        border: 1px solid var(--border);
        border-radius: 16px;
    }

    html[data-theme="minimal"] nav {
        box-shadow: -1px 0 0 var(--border);
    }

        html[data-theme="minimal"] nav #btnMenu {
            box-shadow: 0 1px 0 var(--border);
        }

    html[data-theme="minimal"] header .Picture {
        box-shadow: 0 0 0 1px var(--border);
    }

/*#endregion */

/*#region Theme: material (Material 3) */

html[data-theme="material"] {
    --canvas: #F7F9FF;
    --canvas: color-mix(in srgb, var(--accent) 4%, #FFFFFF);
    --tonal: #EAF0FD;
    --tonal: color-mix(in srgb, var(--accent) 12%, #FFFFFF);
    --surface: #FFFFFF;
    --header-bg: var(--canvas);
    --header-text: #1A1C20;
    --header-icon-filter: brightness(0) opacity(.7);
    --nav-bg: var(--canvas);
    --nav-text: #44474F;
    --nav-hover-bg: var(--tonal);
    --nav-hover-text: #1A1C20;
    --nav-top-bg: var(--canvas);
    --nav-top-text: #1A1C20;
    --nav-search-bg: var(--tonal);
    --radius: 12px;
    --haedColor: var(--canvas);
}

    html[data-theme="material"] header {
        box-shadow: none;
    }

        html[data-theme="material"] header .Title {
            font-size: 14pt;
        }

    html[data-theme="material"] header ~ article {
        border-radius: 24px;
    }

    html[data-theme="material"] nav {
        box-shadow: none;
    }

        html[data-theme="material"] nav a:hover {
            border-radius: 28px 0 0 28px;
        }

    /* Same 38px height as the other themes (see Buttons), with wider pill padding */
    html[data-theme="material"] body :is(.Button, .Button2) {
        border-radius: 20px;
        padding: 0 24px !important;
        box-shadow: none;
    }

        html[data-theme="material"] .Button:hover,
        html[data-theme="material"] .Button2:hover {
            box-shadow: var(--shadow-sm);
        }

        html[data-theme="material"] :is(.Button, .Button2):is(.Cancel, .btnDefault, [value="انصراف"], [id$="btnCancel"], [id$="btnCancel2"]) {
            background-color: var(--tonal) !important;
            color: #1A1C20 !important;
            box-shadow: none;
        }

    html[data-theme="material"] .customSelect,
    html[data-theme="material"] .TextBox,
    html[data-theme="material"] .TextBoxReq,
    html[data-theme="material"] select {
        border-color: #74777F;
        border-radius: 4px;
    }

    html[data-theme="material"] .focus .TextBox,
    html[data-theme="material"] .focus .TextBoxReq,
    html[data-theme="material"] .TextBox:focus,
    html[data-theme="material"] .TextBoxReq:focus {
        box-shadow: inset 0 0 0 1px var(--accent);
    }

    html[data-theme="material"] .table,
    html[data-theme="material"] .box,
    html[data-theme="material"] [id*="grdRequest"] {
        border-radius: 16px;
    }

/*#endregion */

/*#region Theme: corporate (dark menu) */

html[data-theme="corporate"] {
    --canvas: #F1F5F9;
    --surface: #FFFFFF;
    --header-bg: #FFFFFF;
    --header-text: var(--heading);
    --header-icon-filter: brightness(0) opacity(.55);
    --nav-bg: #0F172A;
    --nav-text: #CBD5E1;
    --nav-hover-bg: rgba(255, 255, 255, 0.08);
    --nav-hover-text: #FFFFFF;
    --nav-top-bg: #0B1220;
    --nav-top-text: #FFFFFF;
    --nav-search-bg: rgba(255, 255, 255, 0.08);
    --grid-head-bg: #1E293B;
    --grid-head-text: #E2E8F0;
}

    html[data-theme="corporate"] header {
        box-shadow: 0 1px 0 var(--border), var(--shadow-sm);
    }

    html[data-theme="corporate"] header ~ article {
        border-radius: 10px;
        border-top: 3px solid var(--accent);
        box-shadow: var(--shadow-sm);
    }

    html[data-theme="corporate"] nav {
        box-shadow: none;
    }

        html[data-theme="corporate"] nav a:hover {
            box-shadow: inset -3px 0 0 var(--accent);
        }

    html[data-theme="corporate"] .table > tbody > tr > th,
    html[data-theme="corporate"] [id*="grdRequest"] tr th {
        background-color: var(--grid-head-bg);
        color: var(--grid-head-text);
    }

    html[data-theme="corporate"] :is(.Button, .Button2):is(.Cancel, .btnDefault, [value="انصراف"], [id$="btnCancel"], [id$="btnCancel2"]) {
        background-color: #E2E8F0 !important;
        box-shadow: none;
    }

/*#endregion */

/*#region Grids & Reports */

[id*="grdRequest"] tr th a {
    color: var(--heading) !important;
}

html[data-theme="corporate"] [id*="grdRequest"] tr th a {
    color: var(--grid-head-text) !important;
}

[id*="grdRequest"] > tbody > tr:not(.Pager):hover > td {
    background-color: var(--hover);
}

/* Row actions: soft tinted buttons that turn solid on hover.
   The icons are white PNGs, so invert(1) darkens the icon and the background is stored pre-inverted. */
[id*="grdRequest"] img[src$="Step.png"],
[id*="grdRequest"] img[src$="Magnifire.png"],
[id*="grdRequest"] img[src$="Return.png"],
[id*="grdRequest"] img[src$="Edit.png"],
[id*="grdRequest"] img[src$="Delete.png"] {
    filter: invert(1);
    border-radius: 8px !important;
    transition: filter .15s, background-color .15s;
}

[id*="grdRequest"] img[src$="Step.png"] {
    background-color: #0C1700 !important; /* #F3E8FF */
}

[id*="grdRequest"] img[src$="Magnifire.png"] {
    background-color: #241501 !important; /* #DBEAFE */
}

[id*="grdRequest"] img[src$="Return.png"] {
    background-color: #230318 !important; /* #DCFCE7 */
}

[id*="grdRequest"] img[src$="Edit.png"] {
    background-color: #010C38 !important; /* #FEF3C7 */
}

[id*="grdRequest"] img[src$="Delete.png"] {
    background-color: #011D1D !important; /* #FEE2E2 */
}

    [id*="grdRequest"] img[src$="Step.png"]:hover {
        filter: none;
        background-color: #9333EA !important;
    }

    [id*="grdRequest"] img[src$="Magnifire.png"]:hover {
        filter: none;
        background-color: #2563EB !important;
    }

    [id*="grdRequest"] img[src$="Return.png"]:hover {
        filter: none;
        background-color: #16A34A !important;
    }

    [id*="grdRequest"] img[src$="Edit.png"]:hover {
        filter: none;
        background-color: #D97706 !important;
    }

    [id*="grdRequest"] img[src$="Delete.png"]:hover {
        filter: none;
        background-color: #DC2626 !important;
    }

tr.Pager {
    background-color: transparent !important;
}

    .Pager td > table td span,
    .Pager td > table td a {
        min-width: 32px;
        height: 32px;
        line-height: 32px;
        padding: 0 8px;
        box-sizing: border-box;
        text-align: center;
        border-radius: 8px;
        font-size: 10.5pt;
        text-decoration: none;
        color: var(--color) !important;
        background-color: transparent;
    }

        .Pager td > table td a:hover {
            background-color: var(--hover);
        }

    .Pager td > table td span {
        color: var(--on-accent, #FFFFFF) !important;
        background-color: var(--accent);
        box-shadow: none;
    }

/*#endregion */

/*#region Popups */

.Message {
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.28);
    overflow: hidden;
}

.Overlay {
    background-color: #0F172A;
}

.pnlFullForm > table > tbody > tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--haedColor);
}

/*#endregion */

/*#region Legacy GridView colors (inline HeaderStyle / PagerStyle) */

tr[style*="#5D7B9D"],
tr[style*="#5d7b9d"] {
    background-color: var(--haedColor) !important;
    color: var(--heading) !important;
}

html[data-theme="corporate"] tr[style*="#5D7B9D"],
html[data-theme="corporate"] tr[style*="#5d7b9d"] {
    background-color: var(--grid-head-bg) !important;
    color: var(--grid-head-text) !important;
}

tr[style*="#284775"] {
    background-color: transparent !important;
    color: var(--color) !important;
}

    tr[style*="#284775"] a {
        color: var(--color) !important;
    }

/*#endregion */

/*#region Notice board (Desktop.aspx: pnlText, pnlNews and the module / form / report panels built in MasterPage.master.cs) */

/* The module and news columns float; let the page card contain them */
html[data-theme] article:has(.NewsPanel) {
    display: flow-root;
}

/* Free text from the "تابلو اعلانات" option */
html[data-theme] div[id*='pnlText'] > div {
    margin-bottom: 16px; /* same as the gap between the panels below */
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* Admin-authored colors in that text (e.g. #008000) are chosen for a white page; lift them on the dark surface */
html[data-theme="dark"] div[id*='pnlText'] [style*="color"] {
    filter: brightness(1.7);
}

/* Panels: a card with a quiet header instead of the solid accent bar */
html[data-theme] .cnt-panel {
    box-sizing: border-box;
    margin: 0 0 16px;
    padding-top: 48px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
}

    html[data-theme] .cnt-panel.Open {
        max-height: 48px;
    }

    /* Tile row: equal columns that fill the panel at any width */
    html[data-theme] .cnt-panel > div {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
        gap: 10px;
        padding: 14px;
    }

html[data-theme] .header-panel {
    height: 48px;
    box-sizing: border-box;
    padding: 0 20px 0 52px;
    line-height: 48px;
    border-bottom: 1px solid var(--border);
    background-color: transparent;
    color: var(--heading);
    font-size: 11pt;
    font-weight: 600;
}

    html[data-theme] .header-panel::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 16px;
        margin-left: 10px;
        border-radius: 2px;
        background-color: var(--accent);
        vertical-align: -2px;
    }

/* Collapse arrow (UpArrow.svg is white): drawn as a mask in the muted color */
html[data-theme] .btn-close-panel {
    top: 8px;
    left: 10px;
    width: 32px !important;
    height: 32px;
    border-radius: 8px;
    background: var(--muted);
    -webkit-mask: url(../Images/UpArrow.svg) center / 22px no-repeat;
    mask: url(../Images/UpArrow.svg) center / 22px no-repeat;
}

    html[data-theme] .btn-close-panel:hover {
        background: var(--accent);
    }

/* Icon tiles */
html[data-theme] .cnt-icon {
    box-sizing: border-box;
    width: auto;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    background-color: var(--haedColor);
    transition: background-color .2s, border-color .2s, transform .2s, box-shadow .2s;
}

    html[data-theme] .cnt-icon:hover {
        border-color: color-mix(in srgb, var(--accent) 35%, transparent);
        background-color: color-mix(in srgb, var(--accent) 10%, var(--surface));
        box-shadow: var(--shadow-sm);
        transform: translateY(-2px);
    }

    html[data-theme] .cnt-icon a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        height: 100%;
        padding: 16px 8px 14px;
        color: var(--heading);
        font-size: 9.5pt;
        font-weight: 500;
        line-height: 1.7;
    }

        html[data-theme] .cnt-icon a br {
            display: none;
        }

    html[data-theme] .cnt-icon img {
        position: relative;
        width: 40px;
        height: 40px;
        margin: 0;
        object-fit: contain;
    }

        /* Missing icon file (e.g. Images/form.png or a FormMultimediaIcons png): a document glyph in the accent color.
           Browsers draw ::before / ::after only on images that failed to load. */
        /* Opaque cover in the tile's own color, a little larger than the image so Chrome's broken-image frame is hidden too */
        html[data-theme] .cnt-icon img::before {
            content: '';
            position: absolute;
            inset: -3px;
            background-color: var(--haedColor);
            transition: background-color .2s;
        }

        html[data-theme] .cnt-icon:hover img::before {
            background-color: color-mix(in srgb, var(--accent) 10%, var(--surface));
        }

        html[data-theme] .cnt-icon img::after {
            content: '';
            position: absolute;
            inset: 0;
            background-color: var(--accent);
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") center / 26px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") center / 26px no-repeat;
        }

/* News list: title and date as two grid columns, one row per item */
html[data-theme] .NewsPanel .cnt-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: start;
}

html[data-theme] .news-title,
html[data-theme] .news-date {
    float: none;
    width: auto;
    margin: 0;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    line-height: 1.8;
}

html[data-theme] .news-title {
    position: relative;
    padding-right: 30px;
    color: var(--heading);
    font-size: 10.5pt;
    font-weight: 500;
    cursor: pointer;
    text-align: right;
    transition: color .2s, background-color .2s;
}

    html[data-theme] .news-title::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 16px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--accent);
        transform: translateY(-50%);
    }

    html[data-theme] .news-title:hover {
        color: var(--accent);
    }

html[data-theme] .news-date {
    color: var(--muted);
    font-size: 9.5pt;
    text-align: left;
    white-space: nowrap;
}

    html[data-theme] .news-title:nth-last-child(2),
    html[data-theme] .news-date:last-child {
        border-bottom: 0;
    }

/* No news yet */
html[data-theme] .NewsPanel .cnt-panel:not(:has(.news-title))::after {
    content: 'خبر یا اطلاعیه‌ای ثبت نشده است';
    grid-column: 1 / -1;
    padding: 28px 16px;
    color: var(--muted);
    font-size: 10pt;
    text-align: center;
}

/*#endregion */

/*#region Organization chart (Organization.aspx: action bar, search and the Dynatree of groups / posts / people) */

/* Action bar: right to left in the order of work (group, post, assign); edit and delete at the far end.
   Soft tinted buttons with the .btnTable invert trick (white PNG icons, pre-inverted background) */
body:has(#treePanel) .stepButton {
    float: right;
    margin: 0 0 12px 8px;
    overflow: visible;
}

    body:has(#treePanel) .stepButton:has(#btnEdit),
    body:has(#treePanel) .stepButton:has(#btnDelete) {
        float: left;
        margin: 0 8px 12px 0;
    }

    /* Edit comes first in the markup, so it floats leftmost; swap the two equal-width (140px + 8px) buttons
       so delete sits at the far end and edit beside it. transform, not left: the page makes .stepButton sticky. */
    @media (min-width: 769px) {
        body:has(#treePanel) .stepButton:has(#btnEdit) {
            transform: translateX(148px);
        }

        body:has(#treePanel) .stepButton:has(#btnDelete) {
            transform: translateX(-148px);
        }
    }

    body:has(#treePanel) .stepButton::before {
        display: none;
    }

    body:has(#treePanel) .stepButton input[type=image] {
        box-sizing: border-box;
        width: 140px;
        height: 36px;
        padding: 10px 12px;
        border-radius: 8px;
        box-shadow: none;
        object-position: center right;
        filter: invert(1);
        transition: filter .15s, background-color .15s;
    }

    body:has(#treePanel) .stepButton label {
        top: 0;
        right: 34px;
        left: 6px;
        line-height: 36px;
        font-size: 10pt;
        font-weight: 600;
        transition: color .15s;
    }

    body:has(#treePanel) .stepButton:has(.btnAddGroup, .btnAddPost) input[type=image] {
        background-color: #230318 !important; /* #DCFCE7 */
    }

    body:has(#treePanel) .stepButton:has(.btnAddGroup, .btnAddPost) label {
        color: #15803D;
    }

    body:has(#treePanel) .stepButton:has(.btnPersonPost) input[type=image] {
        background-color: #241501 !important; /* #DBEAFE */
    }

    body:has(#treePanel) .stepButton:has(.btnPersonPost) label {
        color: #1D4ED8;
    }

    body:has(#treePanel) .stepButton:has(#btnEdit) input[type=image] {
        background-color: #010C38 !important; /* #FEF3C7 */
    }

    body:has(#treePanel) .stepButton:has(#btnEdit) label {
        color: #B45309;
    }

    body:has(#treePanel) .stepButton:has(#btnDelete) input[type=image] {
        background-color: #011D1D !important; /* #FEE2E2 */
    }

    body:has(#treePanel) .stepButton:has(#btnDelete) label {
        color: #B91C1C;
    }

    /* Hover on an enabled button: solid color, white icon and text */
    body:has(#treePanel) .stepButton:has(input:not([disabled])):hover input[type=image] {
        filter: none;
    }

    /* !important: the per-button label colors for edit and delete use #ids and would otherwise win */
    body:has(#treePanel) .stepButton:has(input:not([disabled])):hover label {
        color: #FFFFFF !important;
    }

    body:has(#treePanel) .stepButton:has(.btnAddGroup:not([disabled]), .btnAddPost:not([disabled])):hover input[type=image] {
        background-color: #16A34A !important;
    }

    body:has(#treePanel) .stepButton:has(.btnPersonPost:not([disabled])):hover input[type=image] {
        background-color: #2563EB !important;
    }

    body:has(#treePanel) .stepButton:has(#btnEdit:not([disabled])):hover input[type=image] {
        background-color: #D97706 !important;
    }

    body:has(#treePanel) .stepButton:has(#btnDelete:not([disabled])):hover input[type=image] {
        background-color: #DC2626 !important;
    }

    /* The page dims only the image when a button does not apply to the selected node; dim its label too */
    body:has(#treePanel) .stepButton:has(input[disabled]) label {
        opacity: .5;
        cursor: not-allowed;
    }

/* Search bar and tree as one card */
body:has(#treePanel) .box {
    clear: both;
    margin-top: 0;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background-color: var(--surface);
}

body:has(#treePanel) #tree {
    box-sizing: border-box;
    padding: 12px 14px 16px;
    border: 1px solid var(--border) !important;
    border-radius: 0 0 12px 12px;
    background: var(--surface) !important;
}

    body:has(#treePanel) #tree ul.dynatree-container {
        display: block;
        padding: 0;
        line-height: normal;
        overflow: visible;
    }

        /* Level guides: a quiet vertical line under each open node */
        :is(body:has(#treePanel) #tree, .pnl-tree .chart) ul.dynatree-container ul {
            margin: 0 11px 0 0;
            padding: 0 14px 0 0;
            border-right: 1px solid var(--border);
        }

        :is(body:has(#treePanel) #tree, .pnl-tree .chart) ul.dynatree-container li {
            margin: 1px 0;
            padding: 0;
        }

    /* Node row */
    :is(body:has(#treePanel) #tree, .pnl-tree .chart) span.dynatree-node {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 6px 3px 12px;
        border-radius: 8px;
        transition: background-color .15s;
    }

        :is(body:has(#treePanel) #tree, .pnl-tree .chart) span.dynatree-node:hover {
            background-color: var(--haedColor);
        }

        :is(body:has(#treePanel) #tree, .pnl-tree .chart) span.dynatree-node.dynatree-active {
            background-color: var(--accent-soft);
            box-shadow: inset -3px 0 0 var(--accent);
        }

    :is(body:has(#treePanel) #tree, .pnl-tree .chart) a.dynatree-title {
        margin: 0 !important;
        padding: 0 !important;
        border: 0;
        background: none !important;
        color: var(--heading);
        font-size: 10.5pt;
        line-height: 1.9;
    }

    :is(body:has(#treePanel) #tree, .pnl-tree .chart) span.dynatree-active a.dynatree-title {
        border: 0;
        color: var(--accent);
        font-weight: 600;
    }

    :is(body:has(#treePanel) #tree, .pnl-tree .chart) span.dynatree-node:has(img[src$="disable.gif"]) a.dynatree-title {
        color: var(--muted);
    }

    /* Expand arrow: a chevron (pointing left when closed, down when open) instead of the sprite triangle */
    :is(body:has(#treePanel) #tree, .pnl-tree .chart) span.dynatree-expander {
        width: 18px;
        height: 18px;
        margin: 0;
        border-radius: 4px;
        background: var(--muted) !important;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
        transform: rotate(90deg);
        transition: transform .2s, background-color .2s;
        cursor: pointer;
    }

        :is(body:has(#treePanel) #tree, .pnl-tree .chart) span.dynatree-expanded > span.dynatree-expander {
            transform: none;
        }

        :is(body:has(#treePanel) #tree, .pnl-tree .chart) span.dynatree-expander:hover {
            background: var(--accent) !important;
        }

    :is(body:has(#treePanel) #tree, .pnl-tree .chart) span.dynatree-connector {
        width: 18px;
        height: 18px;
        margin: 0;
        background: none;
    }

    /* Node icons: group (unit), post, person and inactive person, each a 24px tinted chip */
    :is(body:has(#treePanel) #tree, .pnl-tree .chart) span.dynatree-icon,
    :is(body:has(#treePanel) #tree, .pnl-tree .chart) span.dynatree-node > img {
        flex: none;
        width: 24px;
        height: 24px;
        margin: 0 !important;
    }

    :is(body:has(#treePanel) #tree, .pnl-tree .chart) span.dynatree-icon {
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='7' fill='%236366F1' fill-opacity='.16'/%3E%3Cg transform='translate(5 5) scale(.5833)' fill='none' stroke='%234F46E5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/g%3E%3C/svg%3E") center / 24px no-repeat !important;
    }

    :is(body:has(#treePanel) #tree, .pnl-tree .chart) img[src$="post.gif"] {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='7' fill='%23F59E0B' fill-opacity='.16'/%3E%3Cg transform='translate(5 5) scale(.5833)' fill='none' stroke='%23D97706' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/g%3E%3C/svg%3E");
    }

    :is(body:has(#treePanel) #tree, .pnl-tree .chart) img[src$="person.gif"] {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='7' fill='%230EA5E9' fill-opacity='.16'/%3E%3Cg transform='translate(5 5) scale(.5833)' fill='none' stroke='%230284C7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/g%3E%3C/svg%3E");
    }

    :is(body:has(#treePanel) #tree, .pnl-tree .chart) img[src$="disable.gif"] {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='7' fill='%2394A3B8' fill-opacity='.18'/%3E%3Cg transform='translate(5 5) scale(.5833)' fill='none' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M2 2l20 20'/%3E%3C/g%3E%3C/svg%3E");
    }

/* Tree picker (Controls/PersonPicker.ascx, e.g. the parent-form field): the input with a chevron inside it and a popup card
   below it, holding the same tree as the organization chart. .ppBox wraps the input, the popup and the arrow image. */
html[data-theme] .ppBox {
    position: relative;
    display: flex;
    align-items: flex-end;
}

    html[data-theme] .ppBox > :is(.TextBox, .TextBoxReq) {
        flex: 1;
        min-width: 0;
        width: auto !important;
        box-sizing: border-box;
        padding-left: 42px;
    }

    /* down-circel.png becomes a chevron drawn in the theme color; it turns up while the popup is open */
    html[data-theme] .ppBox > img.father {
        position: absolute;
        /* material.css gives .prentField's arrow top: 28px, which would win over bottom */
        top: auto;
        bottom: 8px;
        left: 8px;
        width: 26px;
        height: 26px;
        margin: 0 !important;
        float: none !important;
        border-radius: 6px;
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
        background-color: var(--muted);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
        transition: transform .2s, background-color .2s;
        cursor: pointer;
    }

        html[data-theme] .ppBox > img.father:hover {
            background-color: var(--accent);
        }

    html[data-theme] .ppBox:has(> .pnl-tree[style*="block"]) > img.father {
        background-color: var(--accent);
        transform: rotate(180deg);
    }

    html[data-theme] .ppBox > .pnl-tree {
        top: 100%;
        right: 0;
        left: 0;
        box-sizing: border-box;
        min-width: 300px;
        max-height: none;
        margin: 6px 0 0 !important;
        padding: 12px;
        overflow: visible;
        border: 1px solid var(--border);
        border-radius: 12px;
        background-color: var(--surface);
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
        z-index: 60;
    }

html[data-theme] .pnl-tree center {
    display: block;
    text-align: right;
}

html[data-theme] .pnl-tree .txt-search-chart {
    position: static;
    float: none;
    box-sizing: border-box;
    width: calc(100% - 40px) !important;
    height: 38px;
    margin: 0 !important;
    /* material.css draws Search.svg at the right; keep the text clear of it */
    padding: 0 38px 0 12px;
    background-position: right 11px center;
    background-size: 18px;
    font-size: 10pt;
}

/* Close: Delete.gif drawn as a quiet X beside the search box */
html[data-theme] .pnl-tree .img-close {
    top: 19px;
    left: 12px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
    background-color: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 15px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 15px no-repeat;
}

    html[data-theme] .pnl-tree .img-close:hover {
        background-color: var(--danger, #DC2626);
    }

html[data-theme] .pnl-tree .chart {
    display: block !important;
    box-sizing: border-box;
    width: auto;
    margin-top: 10px !important;
    border: 0 !important;
    background: none !important;
}

    html[data-theme] .pnl-tree .chart ul.dynatree-container {
        width: 100% !important;
        min-width: 0 !important;
        max-height: 320px;
        padding: 0 0 0 4px;
        border: 0;
        background: none;
        line-height: normal;
        overflow: auto;
    }

    /* Selection marks: a rounded checkbox, or a radio ring in single-choice mode */
    html[data-theme] .pnl-tree .chart span:is(.dynatree-checkbox, .dynatree-radio) {
        box-sizing: border-box;
        flex: none;
        width: 17px;
        height: 17px;
        margin: 0;
        border: 1.5px solid var(--border-strong);
        border-radius: 5px;
        background: var(--surface) !important;
        transition: border-color .15s, background-color .15s;
    }

    html[data-theme] .pnl-tree .chart span.dynatree-radio {
        border-radius: 50%;
    }

    html[data-theme] .pnl-tree .chart span.dynatree-node:hover span:is(.dynatree-checkbox, .dynatree-radio) {
        border-color: var(--accent);
    }

    html[data-theme] .pnl-tree .chart span.dynatree-selected > span.dynatree-checkbox {
        border-color: var(--accent);
        background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat !important;
    }

    html[data-theme] .pnl-tree .chart span.dynatree-selected > span.dynatree-radio {
        border-color: var(--accent);
        background: var(--accent) !important;
        box-shadow: inset 0 0 0 3px var(--surface);
    }

    html[data-theme] .pnl-tree .chart span.dynatree-selected a.dynatree-title {
        color: var(--accent);
        font-weight: 600;
    }

/*#endregion */

/*#region Message popup (showMessage: news full text, full request view, ...) */

/* Close and print: ControlPanel.css keeps the clickable images at opacity 0 and hides the drawn icon, so nothing showed.
   They move to the left end of the title bar (they sat on top of the title text) and are drawn as masks. */
html[data-theme] .MessageTitle img[src="Images/close.gif"],
html[data-theme] .MessageTitle img[src="Images/Print.gif"] {
    top: 10px;
    right: auto;
    left: 12px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-position: 100px 100px;
    opacity: .75;
    background-image: none;
    background-color: var(--muted);
    -webkit-mask: url(../Images/Close.png) center / 12px no-repeat;
    mask: url(../Images/Close.png) center / 12px no-repeat;
    transition: opacity .2s, background-color .2s;
}

html[data-theme] .MessageTitle img[src="Images/Print.gif"] {
    left: 44px;
    -webkit-mask: url(../Images/Print.svg) center / 18px no-repeat;
    mask: url(../Images/Print.svg) center / 18px no-repeat;
}

    html[data-theme] .MessageTitle img[src="Images/close.gif"]:hover,
    html[data-theme] .MessageTitle img[src="Images/Print.gif"]:hover {
        opacity: 1;
    }

    html[data-theme] .MessageTitle img[src="Images/close.gif"]:hover {
        background-color: var(--danger);
    }

html[data-theme] .MessageTitle {
    padding-left: 84px;
}

/* News popup on the notice board: the whole text shows at once.
   Rows lose the fixed 50px height, a row that still overflows takes the full width, and the eye toggle is not needed. */
body:has(.NewsPanel) .Message .pnlFullForm > table > tbody > tr {
    height: auto;
}

    body:has(.NewsPanel) .Message .pnlFullForm > table > tbody > tr.Breaked {
        flex: 90%;
        min-width: 90%;
    }

    body:has(.NewsPanel) .Message .pnlFullForm > table > tbody > tr > td {
        overflow: visible;
    }

    body:has(.NewsPanel) .Message .pnlFullForm > table > tbody > tr > td.Label {
        white-space: nowrap;
    }

    body:has(.NewsPanel) .Message .pnlFullForm eye {
        display: none !important;
    }

/* Full request view: a date never breaks in the middle (1405/08/ + 20) */
html[data-theme] .pnlFullForm > table > tbody > tr[type="6"] > td.Value {
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*#endregion */

/*#region Tooltip (Admin.js tooltip(): above the cursor, or below it with .below near the top of the window) */

html[data-theme] #tooltip {
    max-width: 280px;
    padding: 6px 10px;
    border-radius: 6px;
    background-color: rgba(15, 23, 42, 0.92) !important;
    box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.30);
    font-size: 9.5pt;
    line-height: 1.7;
    pointer-events: none;
}

html[data-theme="dark"] #tooltip {
    background-color: #E2E8F0 !important;
    color: #0F172A !important;
}

/*#endregion */

/*#region Dialog close button */

/* The grey Close.png becomes a mask, so the X takes the title bar's text color (white on the accent bar) */
.ui-dialog .ui-dialog-titlebar-close {
    color: var(--on-accent, #FFFFFF);
    background: currentColor !important;
    -webkit-mask: url(../Images/Close.png) center / 13px no-repeat;
    mask: url(../Images/Close.png) center / 13px no-repeat;
    opacity: .8;
    transition: opacity .2s;
}

    .ui-dialog .ui-dialog-titlebar-close:hover {
        opacity: 1;
    }

html[data-theme="dark"] .ui-dialog .ui-dialog-titlebar-close {
    color: var(--heading);
}

/*#endregion */

/*#region Persian date picker (persian-datepicker popup) */

html[data-theme] .datepicker-plot-area {
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: var(--surface);
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.06);
    color: var(--color);
}

    html[data-theme] .datepicker-plot-area .datepicker-navigator {
        margin-bottom: 6px;
    }

        html[data-theme] .datepicker-plot-area .datepicker-navigator :is(.pwt-btn-next, .pwt-btn-switch, .pwt-btn-prev) {
            height: 32px;
            line-height: 32px;
            border-radius: 8px;
            background-color: transparent;
            color: var(--heading);
            transition: background-color .2s, color .2s;
        }

        html[data-theme] .datepicker-plot-area .datepicker-navigator :is(.pwt-btn-next, .pwt-btn-prev) {
            color: var(--muted);
            font-size: 14pt;
        }

        html[data-theme] .datepicker-plot-area .datepicker-navigator :is(.pwt-btn-next, .pwt-btn-switch, .pwt-btn-prev):hover {
            background-color: var(--haedColor);
            color: var(--accent);
        }

    html[data-theme] .datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row-cell {
        color: var(--muted);
        font-size: 9.5pt;
        font-weight: 600;
    }

    html[data-theme] .datepicker-plot-area .datepicker-day-view .table-days td {
        height: 32px; /* library: 38px */
        padding: 1px;
    }

    html[data-theme] .datepicker-plot-area .datepicker-day-view .table-days td span,
    html[data-theme] .datepicker-plot-area .datepicker-year-view .year-item,
    html[data-theme] .datepicker-plot-area .datepicker-month-view .month-item {
        height: 32px;
        line-height: 32px;
        border-radius: 8px;
        background-color: transparent;
        color: var(--color);
        text-shadow: none;
        font-size: 10.5pt;
        transition: background-color .15s, color .15s;
    }

    html[data-theme] .datepicker-plot-area .datepicker-year-view .year-item,
    html[data-theme] .datepicker-plot-area .datepicker-month-view .month-item {
        height: 42px;
        line-height: 42px;
    }

    /* Day cells: a fixed 30px square centred in the column, so selected / today / hover marks stay square at any width */
    html[data-theme] .datepicker-plot-area .datepicker-day-view .table-days td span {
        width: 30px;
        height: 30px;
        padding: 0; /* the library adds 8px 0 3px, which made the marks tall rectangles */
        line-height: 30px;
        margin: 0 auto;
    }

    html[data-theme] .datepicker-plot-area .datepicker-day-view .table-days td span.other-month,
    html[data-theme] .datepicker-plot-area .datepicker-day-view .table-days td.disabled span,
    html[data-theme] .datepicker-plot-area .datepicker-year-view .year-item-disable,
    html[data-theme] .datepicker-plot-area .datepicker-month-view .month-item-disable {
        background-color: transparent;
        color: var(--border-strong);
    }

    html[data-theme] .datepicker-plot-area .datepicker-day-view .table-days td:not(.disabled) span:hover,
    html[data-theme] .datepicker-plot-area .datepicker-year-view .year-item:hover,
    html[data-theme] .datepicker-plot-area .datepicker-month-view .month-item:hover {
        background-color: var(--accent-soft);
        color: var(--accent);
    }

    html[data-theme] .datepicker-plot-area .datepicker-day-view .table-days td.today span {
        background-color: transparent;
        color: var(--accent);
        font-weight: 600;
        box-shadow: inset 0 0 0 1px var(--accent);
    }

    html[data-theme] .datepicker-plot-area .datepicker-day-view .table-days td.selected span,
    html[data-theme] .datepicker-plot-area .datepicker-year-view .year-item.selected,
    html[data-theme] .datepicker-plot-area .datepicker-month-view .month-item.selected {
        background-color: var(--accent);
        color: var(--on-accent, #FFFFFF);
        font-weight: 600;
        box-shadow: none;
    }

/*#endregion */

/*#region Tabs (jQuery UI) */

#tabs {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.ui-tabs .ui-tabs-nav {
    border-bottom: 1px solid var(--border);
}

li.ui-state-default.ui-corner-top a,
#tabs .ui-tabs-nav a[style] {
    padding: 12px 16px;
    color: var(--muted) !important;
    background: transparent !important;
    transition: color .2s, box-shadow .2s;
}

li.ui-state-default.ui-corner-top:hover {
    background-color: transparent;
}

    li.ui-state-default.ui-corner-top:hover a {
        color: var(--heading) !important;
    }

li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active > a,
#tabs .ui-tabs-nav .ui-tabs-active > a[style] {
    color: var(--accent) !important;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 var(--accent);
}

.ui-tabs-nav .Count {
    font-weight: 600;
}

/* Overflowing tab row (FillForm): material.js adds .arrow and back/next spans; the row also scrolls natively */
.ui-tabs .ui-tabs-nav.arrow {
    margin: 0 34px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .ui-tabs .ui-tabs-nav.arrow::-webkit-scrollbar {
        display: none;
    }

.ui-tabs .ui-tabs-nav > li > span {
    box-sizing: border-box;
    width: 34px;
    height: 45px;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background-color: var(--surface);
    transition: background-color .2s;
}

    .ui-tabs .ui-tabs-nav > li > span:hover {
        background-color: var(--haedColor);
    }

    .ui-tabs .ui-tabs-nav > li > span::after {
        background-color: var(--muted);
        -webkit-mask-size: 14px;
        mask: url(/Images/arrow.svg) center / 14px no-repeat;
    }

    .ui-tabs .ui-tabs-nav > li > span:hover::after {
        background-color: var(--accent);
    }

.ui-tabs .ui-tabs-nav > li > .back {
    box-shadow: inset 1px 0 0 var(--border);
}

.ui-tabs .ui-tabs-nav > li > .next {
    box-shadow: inset -1px 0 0 var(--border);
}

/*#endregion */

/*#region Dashboards */

filter-box {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

    filter-box h3 {
        color: var(--heading);
        border-bottom-color: var(--border);
    }

    filter-box filters {
        border-bottom-color: var(--border);
    }

/* Category legend: the pastel fills become a white tile with a colored bar, matching the row markers below */
filter-box filters .cat-span {
    background-color: transparent !important;
    color: var(--heading) !important;
    border-left: 1px solid var(--border);
}

    filter-box filters .cat-span:last-child {
        border-left: none;
    }

.cat-span[style*="#F1F8E9"] {
    box-shadow: inset 0 -3px 0 #84CC16;
}

.cat-span[style*="#E8EAF6"] {
    box-shadow: inset 0 -3px 0 #3B82F6;
}

.cat-span[style*="#FCE4EC"] {
    box-shadow: inset 0 -3px 0 #EC4899;
}

.cat-span[style*="#FFFDE7"] {
    box-shadow: inset 0 -3px 0 #8B5CF6;
}

.cat-span[style*="#fff3ce"],
.cat-span[style*="#FFF3CE"] {
    box-shadow: inset 0 -3px 0 #F59E0B;
}

html[data-theme] .grdDashboard {
    border: none !important;
}

    .grdDashboard tr:first-child {
        font-size: 10.5pt !important;
        border-bottom-color: var(--border);
    }

    .grdDashboard th a {
        color: var(--heading) !important;
    }

    .grdDashboard > tbody > tr > td {
        border-top-color: var(--border) !important;
    }

    .grdDashboard > tbody > tr:not(:first-child):not(.Pager):hover > td {
        background-color: var(--hover) !important;
    }

/* Row category: the pastel row fill becomes a colored bar on the start edge */
.grdDashboard tr[style*="#F1F8E9"],
.grdDashboard tr[style*="#E8EAF6"],
.grdDashboard tr[style*="#FCE4EC"],
.grdDashboard tr[style*="#FFFDE7"],
.grdDashboard tr[style*="#fff3ce"],
.grdDashboard tr[style*="#FFF3CE"] {
    background-color: transparent !important;
}

.grdDashboard tr[style*="#F1F8E9"] > td:first-child {
    box-shadow: inset -3px 0 0 #84CC16;
}

.grdDashboard tr[style*="#E8EAF6"] > td:first-child {
    box-shadow: inset -3px 0 0 #3B82F6;
}

.grdDashboard tr[style*="#FCE4EC"] > td:first-child {
    box-shadow: inset -3px 0 0 #EC4899;
}

.grdDashboard tr[style*="#FFFDE7"] > td:first-child {
    box-shadow: inset -3px 0 0 #8B5CF6;
}

.grdDashboard tr[style*="#fff3ce"] > td:first-child,
.grdDashboard tr[style*="#FFF3CE"] > td:first-child {
    box-shadow: inset -3px 0 0 #F59E0B;
}

/* Row actions in any table cell: same soft tinted buttons as the report grids (white icon, pre-inverted background) */
:is(td, th) .btnTable {
    filter: invert(1);
    border-radius: 8px;
    transition: filter .15s, background-color .15s;
}

    :is(td, th) .btnTable:hover {
        filter: none;
    }

:is(td, th) .btnTable.btnCyan {
    background-color: #2C0B05 !important; /* #D3F4FA */
}

:is(td, th) .btnTable.btnSuccess {
    background-color: #230318 !important; /* #DCFCE7 */
}

:is(td, th) .btnTable.btnEdit {
    background-color: #010C38 !important; /* #FEF3C7 */
}

:is(td, th) .btnTable.btnDelete {
    background-color: #011D1D !important; /* #FEE2E2 */
}

:is(td, th) .btnTable.btnPurple {
    background-color: #0C1700 !important; /* #F3E8FF */
}

:is(td, th) .btnTable.btnPink {
    background-color: #00170C !important; /* #FFE8F3 */
}

:is(td, th) .btnTable.btnInfo {
    background-color: #241501 !important; /* #DBEAFE */
}

:is(td, th) .btnTable.btnCyan:hover {
    background-color: #0891B2 !important;
}

:is(td, th) .btnTable.btnSuccess:hover {
    background-color: #16A34A !important;
}

:is(td, th) .btnTable.btnEdit:hover {
    background-color: #D97706 !important;
}

:is(td, th) .btnTable.btnDelete:hover {
    background-color: #DC2626 !important;
}

:is(td, th) .btnTable.btnPurple:hover {
    background-color: #9333EA !important;
}

:is(td, th) .btnTable.btnPink:hover {
    background-color: #DB2777 !important;
}

:is(td, th) .btnTable.btnInfo:hover {
    background-color: #2563EB !important;
}

html[data-theme] .Empty {
    padding: 40px 16px;
    text-align: center;
    font-size: 11pt;
    color: var(--muted);
}

/* FormDashboard header: title, search and "new request" */
html[data-theme] .pnlTitle {
    gap: 8px;
    padding: 4px 0 16px;
    color: var(--heading);
    font-size: 13pt;
    font-weight: 600;
}

    html[data-theme] .pnlTitle .txtSearch {
        width: 220px;
        border-radius: var(--radius);
    }

    html[data-theme] .pnlTitle .btnSearch {
        filter: invert(1);
        background-color: transparent !important;
        opacity: .55;
    }

/*#endregion */

/* GridView EmptyDataText: the only row is the empty message */
.grdDashboard tr:only-child {
    background-color: transparent !important;
}

    .grdDashboard tr:only-child > td {
        padding: 40px 16px !important;
        text-align: center;
        color: var(--muted) !important;
        border-top: none !important;
    }

/* Material pill padding must keep room for the icon of FormDashboard's "new request" button */
html[data-theme="material"] input.Button.btnAdd {
    padding-right: 45px !important;
}

/*#region Responsive */

@media all and (max-width: 768px) {
    /* The collapsed menu stays 53px wide on phones, so the content card sits just beside it */
    html[data-theme] header ~ article {
        max-width: none;
        margin: 59px 61px 56px 8px;
        padding: 8px;
        border-radius: 12px;
    }

    /* Dashboard rows turn into cards on phones and the first cell is hidden, so the category bar moves to the row */
    .grdDashboard > tbody > tr {
        border-color: var(--border) !important;
        border-radius: 10px;
        overflow: hidden;
    }

    .grdDashboard tr[style*="#F1F8E9"] {
        box-shadow: inset -3px 0 0 #84CC16;
    }

    .grdDashboard tr[style*="#E8EAF6"] {
        box-shadow: inset -3px 0 0 #3B82F6;
    }

    .grdDashboard tr[style*="#FCE4EC"] {
        box-shadow: inset -3px 0 0 #EC4899;
    }

    .grdDashboard tr[style*="#FFFDE7"] {
        box-shadow: inset -3px 0 0 #8B5CF6;
    }

    .grdDashboard tr[style*="#fff3ce"],
    .grdDashboard tr[style*="#FFF3CE"] {
        box-shadow: inset -3px 0 0 #F59E0B;
    }

    filter-box filters .cat-span {
        border-left: none;
        border-bottom: 1px solid var(--border);
    }

    .ThemePicker .Themes {
        left: auto;
        right: 0;
    }

    /* Organization chart action bar on phones: two equal columns (group | post, assign | edit, delete) */
    body:has(#treePanel) .stepButton {
        width: calc(50% - 4px);
        margin: 0 0 8px 0;
    }

        body:has(#treePanel) .stepButton:has(.btnAddPost, #btnEdit) {
            float: left;
        }

        body:has(#treePanel) .stepButton:has(.btnAddGroup, .btnPersonPost, #btnDelete) {
            float: right;
        }

        body:has(#treePanel) .stepButton input[type=image] {
            width: 100% !important;
        }

        body:has(#treePanel) .stepButton label {
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 9pt;
        }

    /* FillForm on phones: card, tab panel and field rows each added side padding (about 44px a side); keep fields wide */
    html[data-theme] .fillForm .ui-tabs .ui-tabs-panel {
        padding: 12px 4px !important;
        width: calc(100% - 8px) !important;
    }

    html[data-theme] td.dynamicForm > table > tbody > tr {
        padding: 0 4px;
    }

    /* The page title runs under the header icons on phones: the icon group gets the header background and fades over the title's end */
    html[data-theme] header .LeftHeader {
        z-index: 2;
        background-color: var(--header-bg);
        box-shadow: 16px 0 12px -4px var(--header-bg);
    }
}

/*#endregion */

/*#region Chat panel */

/* The closed panel sits off-screen with translate(-100%), but its 28px shadow still bled into the left edge of every page */
.chatPanel:not(.active) {
    box-shadow: none;
    visibility: hidden;
    transition: transform .7s, box-shadow .7s, visibility 0s .7s;
}

.chatPanel.active {
    visibility: visible;
    transition: transform .7s, box-shadow .7s, visibility 0s;
}

/* chatroom.css paints its buttons, reply bars and send button with --Success; inside the site they follow the theme color */
html[data-theme] .chatPanel {
    --Success: var(--accent);
}

/*#endregion */

/*#region Theme color for legacy "current" states (material.css paints them with the success green) */

html[data-theme] #pnlTypes span.current,
html[data-theme] wizard-nav item {
    background-color: var(--accent);
    color: var(--on-accent, #FFFFFF);
}

html[data-theme] .tabState.active {
    box-shadow: 0px 18px 51px -22px var(--accent);
}

    html[data-theme] .tabState.active span {
        background-color: var(--accent);
    }

html[data-theme] .information {
    background-color: var(--accent);
    color: var(--on-accent, #FFFFFF);
}

/*#endregion */

/*#region Legacy GridView row colors (inline RowStyle / SelectedRowStyle / FooterStyle) */

tr[style*="#F2F5F7"],
tr[style*="#f2f5f7"] {
    background-color: transparent !important;
}

tr[style*="#FFFFC0"],
tr[style*="#FFFF80"],
tr[style*="#ffffc0"],
tr[style*="#ffff80"] {
    background-color: var(--accent-soft) !important;
}

tr[style*="#CCEEC0"],
tr[style*="#cceec0"] {
    background-color: var(--haedColor) !important;
    color: var(--heading) !important;
}

table[border="1"],
table[border="1"] > tbody > tr > td,
table[border="1"] > tbody > tr > th {
    border-color: var(--border) !important;
}

/*#endregion */

/*#region Person.aspx */

/* Mode switch, fields and footer read as one card */
.prsHead {
    display: flex;
    gap: 4px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    background-color: var(--haedColor);
}

    /* "ثبت ساده" / "ثبت کامل" radios as underline tabs, like the jQuery UI tabs */
    .prsHead .radio {
        margin: 0;
        padding: 0;
    }

        .prsHead .radio .mark {
            display: none;
        }

        .prsHead .radio label {
            display: block;
            padding: 12px;
            color: var(--muted);
            cursor: pointer;
            transition: color .2s, box-shadow .2s;
        }

        .prsHead .radio:hover label {
            color: var(--heading);
        }

        .prsHead .radio input:checked + label {
            color: var(--accent);
            font-weight: 600;
            box-shadow: inset 0 -2px 0 var(--accent);
        }

        .prsHead .radio input:focus-visible + label {
            outline: 2px solid var(--accent);
            outline-offset: -4px;
            border-radius: var(--radius-sm);
        }

.prsHead + .Grid {
    padding: 16px 20px 8px;
    border: 1px solid var(--border);
    border-radius: 0;
}

    /* As many columns as fit; a section title always starts a new row */
    .prsHead + .Grid > tbody {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
        gap: 0 16px;
    }

    /* Field cells already keep 21px above the input for the floating label */
    .prsHead + .Grid .prsSec > td {
        margin: 36px 0 6px;
        padding: 0 0 8px;
        border-bottom: 1px solid var(--border);
        color: var(--heading);
        font-size: 10.5pt;
        font-weight: 600;
    }

    .prsHead + .Grid .prsSec:first-child > td {
        margin-top: 0;
    }

    .prsHead + .Grid .stable {
        color: var(--muted);
    }

/* Password rules (shown when the complexity option is on): a quiet note under the password fields */
.prsNote:not(:has(.pwdHint)) {
    display: none;
}

.pwdHint {
    display: block;
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    border-radius: var(--radius-sm);
    background-color: color-mix(in srgb, var(--warning) 10%, transparent);
    color: var(--color);
    font-size: 10pt;
    line-height: 1.9;
}

/* Active checkbox at the start; at the far end save, with cancel to its right (as with the floated buttons elsewhere) */
.prsFoot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-color: var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
}

    /* material.css sets the checkbox margin with !important */
    .prsFoot .checkbox {
        order: -2;
        margin: 0 0 0 auto !important;
    }

    .prsFoot .Cancel {
        order: -1;
    }

    .prsFoot .Button {
        float: none;
        margin: 0;
    }

/* Excel panel: report and import as two cards (layout lives in Person.aspx so the classic theme keeps it) */
.prsExcelCard {
    border-color: var(--border);
    border-radius: var(--radius);
    background-color: var(--surface, #FFFFFF);
}

    .prsExcelCard h3 {
        color: var(--heading);
        font-size: 11pt;
        font-weight: 600;
    }

    .prsExcelCard p {
        color: var(--muted);
        font-size: 10pt;
    }

        .prsExcelCard p a {
            color: var(--accent);
            font-weight: 500;
        }

    .prsExcelCard .checkbox {
        font-size: 10.5pt;
    }

@media all and (max-width: 768px) {
    .prsHead + .Grid {
        padding: 12px 12px 4px;
    }

    .prsFoot {
        padding: 12px;
    }
}

/*#endregion */

/*#region SmsBox.aspx (layout lives in the page so the classic theme keeps it) */

/* Composer: counters under the fields */
.smsHint {
    color: var(--muted);
}

.smsBadge {
    background-color: var(--hover);
    color: var(--muted);
    font-weight: 500;
    transition: background-color .2s, color .2s;
}

    .smsBadge.on {
        background-color: var(--accent-soft);
        color: var(--accent);
    }

.smsOption .stable {
    color: var(--heading);
    font-size: 10.5pt;
    font-weight: 600;
}

.smsFoot {
    border-top: 1px solid var(--border);
}

/* Phone preview: the message as a sent bubble under the sender number */
.smsPhone {
    border: 1px solid var(--border);
    background-color: var(--haedColor);
    box-shadow: inset 0 0 0 6px var(--surface, #FFFFFF);
}

.smsPhoneHead {
    border-bottom: 1px solid var(--border);
    color: var(--heading);
    font-weight: 600;
}

.smsBubble {
    background-color: var(--accent);
    color: var(--on-accent, #FFFFFF);
    font-size: 10.5pt;
    box-shadow: var(--shadow-sm);
}

    .smsBubble.empty {
        background-color: var(--surface, #FFFFFF);
        color: var(--muted);
        box-shadow: inset 0 0 0 1px var(--border);
    }

/* Received-message rules */
.smsRule {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface, #FFFFFF);
}

    .smsRule h3 {
        color: var(--heading);
        font-size: 11.5pt;
        font-weight: 600;
    }

    .smsRule .smsLead {
        color: var(--muted);
        font-size: 10pt;
    }

    .smsRule .lblParser {
        color: var(--heading);
        font-size: 10.5pt;
        font-weight: 600;
    }

/* Lists: filter bar, result count, state chips */
.smsFilter {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--haedColor);
}

.smsCount {
    color: var(--muted);
    font-size: 10.5pt;
}

.smsList td.smsIndex {
    color: var(--muted);
}

.smsList td.smsNum {
    font-variant-numeric: tabular-nums;
}

.smsState {
    font-size: 9.5pt;
    font-weight: 500;
    background-color: var(--hover);
    color: var(--muted);
}

    .smsState.s0 {
        background-color: color-mix(in srgb, var(--info) 12%, transparent);
        color: var(--info);
    }

    .smsState.s1,
    .smsState.s4 {
        background-color: color-mix(in srgb, var(--success) 12%, transparent);
        color: var(--success);
    }

    /* SmsReportStates: 0 sent, 1 delivered, 2 not delivered, 3 blacklist, 4 received, 5 not sent */
    .smsState.s2 {
        background-color: color-mix(in srgb, var(--warning) 16%, transparent);
        color: color-mix(in srgb, var(--warning) 70%, #000000);
    }

    .smsState.s5 {
        background-color: color-mix(in srgb, var(--danger) 12%, transparent);
        color: var(--danger);
    }

html[data-theme="dark"] .smsState.s2 {
    color: var(--warning);
}

    .smsState.s3 {
        background-color: color-mix(in srgb, var(--heading) 10%, transparent);
        color: var(--heading);
    }

/*#endregion */

/*#region Accordion panels (AutoReference, Person, ...) */

/* The page designer (#pnlMain) and the chat panel style their own accordions */
html[data-theme] .Accordion:not(#pnlMain .Accordion, .chatTab > .Accordion) {
    background-color: var(--haedColor);
    color: var(--heading);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 11pt;
    font-weight: 600;
}

    html[data-theme] .Accordion:not(#pnlMain .Accordion, .chatTab > .Accordion):before {
        background-color: var(--muted);
    }

html[data-theme] .AccordionPanel:not(#pnlMain .AccordionPanel, .chatTab > .AccordionPanel) {
    border: 1px solid var(--border);
    border-radius: 10px;
}

/*#endregion */

/*#region Theme: dark */

html[data-theme="dark"] {
    color-scheme: dark;
    --accent: #3B82F6;
    /* Derived from --accent so an organization color set in the login settings carries over */
    --accent-hover: color-mix(in srgb, var(--accent) 80%, #FFFFFF);
    --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
    --danger: #F87171;
    --Danger: #F87171;
    --warning: #FBBF24;
    --success: #22C55E;
    --Success: #22C55E;
    --color: #CBD5E1;
    --heading: #F1F5F9;
    --muted: #94A3B8;
    --hint: #334155;
    --hover: rgba(255, 255, 255, 0.05);
    --haedColor: #1A2435;
    --border: #273449;
    --border-strong: #334155;
    --field-bg: #0F172A;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --canvas: #0B1120;
    --surface: #111827;
    --header-bg: #111827;
    --header-text: var(--heading);
    --header-icon-filter: brightness(0) invert(1) opacity(.7);
    --nav-bg: #111827;
    --nav-text: var(--color);
    --nav-hover-bg: var(--accent-soft);
    --nav-hover-text: #FFFFFF;
    --nav-top-bg: #111827;
    --nav-top-text: var(--heading);
    --nav-search-bg: var(--field-bg);
    --grid-head-bg: var(--haedColor);
    --grid-head-text: var(--heading);
}

    html[data-theme="dark"] body {
        color: var(--color);
    }

    html[data-theme="dark"] header {
        box-shadow: 0 1px 0 var(--border);
    }

    html[data-theme="dark"] header ~ article {
        border: 1px solid var(--border);
        border-radius: 16px;
    }

    html[data-theme="dark"] nav {
        box-shadow: -1px 0 0 var(--border);
    }

        html[data-theme="dark"] nav a:hover {
            box-shadow: inset -3px 0 0 var(--accent);
        }

    /* Surfaces that legacy CSS hard-codes to white */
    html[data-theme="dark"] header .Company,
    html[data-theme="dark"] header .Notification items,
    html[data-theme="dark"] .ThemePicker .Themes,
    html[data-theme="dark"] .Message,
    html[data-theme="dark"] #tabs,
    html[data-theme="dark"] .ui-widget-content,
    html[data-theme="dark"] .ui-dialog,
    html[data-theme="dark"] .AccordionPanel,
    html[data-theme="dark"] .ac_results,
    html[data-theme="dark"] footer {
        background-color: var(--surface) !important;
        color: var(--color);
        border-color: var(--border);
    }

    html[data-theme="dark"] header .arrow-company {
        border-bottom-color: var(--surface);
    }

    html[data-theme="dark"] .ui-widget-header,
    html[data-theme="dark"] .ui-dialog .ui-dialog-titlebar {
        background: var(--haedColor) !important;
        color: var(--heading) !important;
        border-color: var(--border) !important;
    }

    /* Form fields; the floating label sits on the field border, so its notch must share the field background */
    html[data-theme="dark"] .customSelect,
    html[data-theme="dark"] .TextBox,
    html[data-theme="dark"] .TextBoxReq,
    html[data-theme="dark"] select,
    html[data-theme="dark"] textarea,
    html[data-theme="dark"] input[type=text],
    html[data-theme="dark"] input[type=password],
    html[data-theme="dark"] input[type=email],
    html[data-theme="dark"] input[type=tel],
    html[data-theme="dark"] input[type=number],
    html[data-theme="dark"] input[type=search],
    html[data-theme="dark"] .lbl-name,
    html[data-theme="dark"] .lbl-name.active,
    html[data-theme="dark"] .focus .lbl-name,
    html[data-theme="dark"] .checkbox .mark,
    html[data-theme="dark"] .radio .mark,
    html[data-theme="dark"] #capcha #imgCaptcha {
        background-color: var(--field-bg) !important;
        color: var(--heading);
    }

    html[data-theme="dark"] .customSelect,
    html[data-theme="dark"] .TextBox,
    html[data-theme="dark"] .TextBoxReq,
    html[data-theme="dark"] select,
    html[data-theme="dark"] textarea {
        border-color: var(--border-strong);
    }

        html[data-theme="dark"] .TextBox:hover,
        html[data-theme="dark"] .TextBoxReq:hover,
        html[data-theme="dark"] .customSelect:hover,
        html[data-theme="dark"] .fileUploader:hover {
            border-color: #475569;
        }

    html[data-theme="dark"] .fileUploader,
    html[data-theme="dark"] .BorderTime,
    html[data-theme="dark"] table.Plate {
        background-color: var(--field-bg);
    }

        html[data-theme="dark"] .BorderTime:hover {
            border-color: #475569;
        }

    /* Froala keeps its light editing surface (like CKEditor), so its toolbar stays light too */
    html[data-theme="dark"] .fr-box.fr-basic .fr-toolbar {
        background-color: #F1F5F9;
    }

    html[data-theme="dark"] .checkbox .mark,
    html[data-theme="dark"] .radio .mark {
        border-color: #64748B;
    }

    html[data-theme="dark"] .checkbox input:checked ~ .mark {
        background-color: var(--accent) !important;
        border-color: var(--accent);
    }

        html[data-theme="dark"] .checkbox .mark:after {
            border-color: var(--on-accent, #0B1120);
        }

    html[data-theme="dark"] :is(.Button, .Button2):is(.Cancel, .btnDefault, [value="انصراف"], [id$="btnCancel"], [id$="btnCancel2"]) {
        background-color: var(--haedColor) !important;
        color: var(--color) !important;
        box-shadow: inset 0 0 0 1px var(--border-strong);
    }

    /* Inline black text from ASP.NET ForeColor="Black" and old markup */
    html[data-theme="dark"] [style*="color:Black"],
    html[data-theme="dark"] [style*="color: Black"],
    html[data-theme="dark"] [style*="color:black"],
    html[data-theme="dark"] [style*="color: black"],
    html[data-theme="dark"] [style*="color:#000"],
    html[data-theme="dark"] [style*="color: #000"],
    html[data-theme="dark"] font[color] {
        color: var(--color) !important;
    }

    /* Row actions: white icons on translucent tints instead of the pre-inverted light tints */
    html[data-theme="dark"] :is(td, th) .btnTable,
    html[data-theme="dark"] [id*="grdRequest"] img[src$="Step.png"],
    html[data-theme="dark"] [id*="grdRequest"] img[src$="Magnifire.png"],
    html[data-theme="dark"] [id*="grdRequest"] img[src$="Return.png"],
    html[data-theme="dark"] [id*="grdRequest"] img[src$="Edit.png"],
    html[data-theme="dark"] [id*="grdRequest"] img[src$="Delete.png"] {
        filter: none;
    }

    html[data-theme="dark"] :is(td, th) .btnTable.btnCyan {
        background-color: rgba(8, 145, 178, 0.28) !important;
    }

    html[data-theme="dark"] :is(td, th) .btnTable.btnSuccess,
    html[data-theme="dark"] [id*="grdRequest"] img[src$="Return.png"] {
        background-color: rgba(22, 163, 74, 0.28) !important;
    }

    html[data-theme="dark"] :is(td, th) .btnTable.btnEdit,
    html[data-theme="dark"] [id*="grdRequest"] img[src$="Edit.png"] {
        background-color: rgba(217, 119, 6, 0.30) !important;
    }

    html[data-theme="dark"] :is(td, th) .btnTable.btnDelete,
    html[data-theme="dark"] [id*="grdRequest"] img[src$="Delete.png"] {
        background-color: rgba(220, 38, 38, 0.30) !important;
    }

    html[data-theme="dark"] :is(td, th) .btnTable.btnPurple,
    html[data-theme="dark"] [id*="grdRequest"] img[src$="Step.png"] {
        background-color: rgba(147, 51, 234, 0.30) !important;
    }

    html[data-theme="dark"] div.child td > a.HtmlTag:has(> img) {
        filter: none;
    }

    html[data-theme="dark"] div.child td > a.HtmlTag:has(> img[src$="Magnifire.gif"]) {
        background-color: rgba(37, 99, 235, 0.30);
    }

    html[data-theme="dark"] div.child td > a.HtmlTag:has(> img[src$="Edit.gif"]) {
        background-color: rgba(217, 119, 6, 0.30);
    }

    html[data-theme="dark"] div.child td > a.HtmlTag:has(> img[src$="Delete.gif"]) {
        background-color: rgba(220, 38, 38, 0.30);
    }

        html[data-theme="dark"] div.child td > a.HtmlTag:has(> img):hover {
            filter: brightness(1.35);
        }

    html[data-theme="dark"] :is(td, th) .btnTable.btnPink {
        background-color: rgba(219, 39, 119, 0.30) !important;
    }

    html[data-theme="dark"] :is(td, th) .btnTable.btnInfo,
    html[data-theme="dark"] [id*="grdRequest"] img[src$="Magnifire.png"] {
        background-color: rgba(37, 99, 235, 0.30) !important;
    }

    html[data-theme="dark"] :is(td, th) .btnTable:hover,
    html[data-theme="dark"] [id*="grdRequest"] img:hover {
        filter: brightness(1.35);
    }

    html[data-theme="dark"] .pnlTitle .btnSearch {
        filter: none;
    }

    html[data-theme="dark"] tr.Pager td > table td span {
        color: var(--on-accent, #FFFFFF) !important;
    }

    /* Dashboard legend tiles and tracking rows keep their colored bars; the pastel text backgrounds are already cleared */
    html[data-theme="dark"] filter-box filters .cat-span {
        color: var(--heading) !important;
    }

    html[data-theme="dark"] .dynatree-title,
    html[data-theme="dark"] span.dynatree-node a {
        color: var(--color) !important;
    }

    html[data-theme="dark"] span.dynatree-active a,
    html[data-theme="dark"] span.dynatree-focused a {
        background-color: var(--accent-soft) !important;
        color: var(--heading) !important;
    }

    /* Organization chart icons: their stroke colors are tuned for white; lift them on the dark surface */
    html[data-theme="dark"] :is(body:has(#treePanel) #tree, .pnl-tree .chart) :is(span.dynatree-icon, span.dynatree-node > img) {
        filter: brightness(1.7) saturate(1.1);
    }

    /* Organization chart action bar: white icons on translucent tints, light labels */
    html[data-theme="dark"] body:has(#treePanel) .stepButton input[type=image] {
        filter: none;
    }

    html[data-theme="dark"] body:has(#treePanel) .stepButton:has(.btnAddGroup, .btnAddPost) input[type=image] {
        background-color: rgba(22, 163, 74, 0.28) !important;
    }

    html[data-theme="dark"] body:has(#treePanel) .stepButton:has(.btnAddGroup, .btnAddPost) label {
        color: #86EFAC;
    }

    html[data-theme="dark"] body:has(#treePanel) .stepButton:has(.btnPersonPost) input[type=image] {
        background-color: rgba(37, 99, 235, 0.30) !important;
    }

    html[data-theme="dark"] body:has(#treePanel) .stepButton:has(.btnPersonPost) label {
        color: #93C5FD;
    }

    html[data-theme="dark"] body:has(#treePanel) .stepButton:has(#btnEdit) input[type=image] {
        background-color: rgba(217, 119, 6, 0.30) !important;
    }

    html[data-theme="dark"] body:has(#treePanel) .stepButton:has(#btnEdit) label {
        color: #FCD34D;
    }

    html[data-theme="dark"] body:has(#treePanel) .stepButton:has(#btnDelete) input[type=image] {
        background-color: rgba(220, 38, 38, 0.30) !important;
    }

    html[data-theme="dark"] body:has(#treePanel) .stepButton:has(#btnDelete) label {
        color: #FCA5A5;
    }

/*#endregion */