/* Shared typography and table-action polish for every application surface. */
:root {
    --app-font: IRANSans, Tahoma, Arial, sans-serif;
    --table-action-size: 36px;
    --table-action-radius: 9px;
    --panel-primary: #6c55d9;
    --panel-primary-dark: #493a9f;
    --panel-primary-soft: #f0edff;
    --panel-hero-bg:
        radial-gradient(circle at 8% 5%, rgba(255, 255, 255, .14) 0 72px, transparent 73px),
        radial-gradient(circle at 42% 125%, rgba(255, 255, 255, .055) 0 125px, transparent 126px),
        linear-gradient(125deg, #242348 0%, #493a9f 55%, #6e54d9 100%);
    --panel-hero-shadow: 0 18px 45px rgba(57, 43, 124, .22);
}

html,
body,
button,
input,
select,
textarea,
optgroup,
.btn,
.form-control,
.dropdown-menu,
.tooltip,
.popover,
.modal,
.k-widget,
.k-input,
.k-textbox,
.k-grid,
.k-list,
.k-popup,
.select2-container {
    font-family: var(--app-font) !important;
}

/* Preserve icon-font glyphs while keeping adjacent button text in IranSans. */
i[class^="fa"], i[class*=" fa"],
i[class^="feather"], i[class*=" feather"],
i[class^="icon-"], i[class*=" icon-"],
.fa, .fas, .far, .fal, .fab,
.feather, .k-icon, [class^="ft-"], [class*=" ft-"] {
    font-family: inherit;
}

.fa, .fas, .far, .fal, .fab { font-family: FontAwesome !important; }
.feather, [class^="ft-"], [class*=" ft-"] { font-family: feather !important; }
.k-icon { font-family: WebComponentsIcons !important; }

/* A consistent, scan-friendly grid rhythm. */
.table,
.k-grid table {
    width: 100%;
}

.table th,
.table td,
.k-grid th.k-header,
.k-grid td {
    vertical-align: middle !important;
    text-align: center !important;
}

.table thead th,
.k-grid th.k-header {
    white-space: nowrap;
}

.table td > form,
.k-grid td > form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    vertical-align: middle;
}

.table td .btn,
.k-grid td .btn,
.k-grid td .k-button,
.k-command-cell .k-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px;
    min-width: var(--table-action-size);
    min-height: var(--table-action-size);
    margin: 2px;
    padding: 6px 10px !important;
    border-radius: var(--table-action-radius) !important;
    line-height: 1.15 !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.table td .btn > i,
.table td .btn > svg,
.k-grid td .btn > i,
.k-grid td .btn > svg,
.k-grid td .k-button > .k-icon,
.k-command-cell .k-button > .k-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    margin: 0 !important;
    line-height: 1 !important;
}

.table td .btn:empty,
.k-grid td .btn:empty,
.table td .btn.icon-only,
.k-grid td .btn.icon-only {
    width: var(--table-action-size);
    padding: 0 !important;
}

.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: #b7c9c2 transparent;
}

/* One visual identity for every top-of-page admin hero. */
.dashboard-welcome,
.workspace-hero,
.reminders-hero,
.report-hero,
.order-list-workspace .order-list-hero,
.customer-hero,
.order-workspace .order-hero {
    background: var(--panel-hero-bg) !important;
    box-shadow: var(--panel-hero-shadow) !important;
    color: #fff;
}

.dashboard-welcome :is(h1, h2, h3),
.workspace-hero :is(h1, h2, h3),
.reminders-hero :is(h1, h2, h3),
.report-hero :is(h1, h2, h3),
.order-list-hero :is(h1, h2, h3),
.customer-hero :is(h1, h2, h3),
.order-hero :is(h1, h2, h3, .card-title) {
    color: #fff !important;
}

.dashboard-welcome :is(p, small),
.workspace-hero :is(p, small),
.reminders-hero :is(p, small),
.report-hero :is(p, small),
.order-list-hero :is(p, small),
.customer-hero :is(p, small),
.order-hero :is(p, small) {
    color: rgba(255, 255, 255, .74);
}

/* Carry the dashboard purple into shared controls and Kendo states. */
body.horizontal-layout {
    --brand: var(--panel-primary);
    --brand-dark: var(--panel-primary-dark);
    --brand-soft: var(--panel-primary-soft);
}

.btn-primary,
.btn-success,
.k-button.k-primary,
.k-primary {
    border-color: var(--panel-primary) !important;
    background-color: var(--panel-primary) !important;
}

.btn-primary:hover,
.btn-success:hover,
.k-button.k-primary:hover,
.k-primary:hover {
    border-color: var(--panel-primary-dark) !important;
    background-color: var(--panel-primary-dark) !important;
}

.form-control:focus,
.k-input:focus,
.k-textbox:focus {
    border-color: var(--panel-primary) !important;
    box-shadow: 0 0 0 3px rgba(108, 85, 217, .14) !important;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline-color: rgba(108, 85, 217, .38) !important;
}

@media (max-width: 767.98px) {
    :root { --table-action-size: 40px; }

    .table th,
    .table td,
    .k-grid th.k-header,
    .k-grid td {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .table td .btn,
    .k-grid td .btn,
    .k-grid td .k-button { transition: none !important; }
}