@font-face {
    font-family: Vazirmatn;
    src: url("./fonts/vazirmatn_regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Vazirmatn;
    src: url("./fonts/vazirmatn_bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
}

html {
    --lumo-font-family: Vazirmatn, sans-serif;
    --lumo-primary-color: #0066ff;
    --lumo-primary-color-10pct: #e5efff;
    --lumo-primary-text-color: #0059df;
    --lumo-base-color: #ffffff;
    --lumo-body-text-color: #172033;
    --lumo-secondary-text-color: #667085;
    --lumo-border-radius-m: 14px;
    --lumo-border-radius-l: 20px;
    --dimo-canvas: #f5f7fc;
    font-family: var(--lumo-font-family);
}

html[data-palette="pink"] {
    --lumo-primary-color: #ba1d65;
    --lumo-primary-color-10pct: #ffe8f2;
    --lumo-primary-text-color: #ba1d65;
}

html[data-palette="green"] {
    --lumo-primary-color: #087f5b;
    --lumo-primary-color-10pct: #def5e9;
    --lumo-primary-text-color: #087f5b;
}

html[theme~="dark"] {
    --lumo-base-color: #161c28;
    --lumo-body-text-color: #f3f5fa;
    --lumo-secondary-text-color: #a9b4c7;
    --lumo-primary-text-color: #8cb8ff;
    --lumo-primary-color-10pct: #1c2e4a;
    --dimo-canvas: #101520;
}

html[theme~="dark"][data-palette="pink"] {
    --lumo-primary-text-color: #ff9ac7;
    --lumo-primary-color-10pct: #452438;
}

html[theme~="dark"][data-palette="green"] {
    --lumo-primary-text-color: #73dbb0;
    --lumo-primary-color-10pct: #173d32;
}

body {
    margin: 0;
    background: var(--dimo-canvas);
}

.brand {
    color: var(--lumo-primary-text-color);
    letter-spacing: -1px;
    font-size: 2rem;
    margin-block: 12px 0;
}

.navigation {
    gap: 8px;
    padding: 24px 16px;
}

.navigation a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    color: var(--lumo-secondary-text-color);
    text-decoration: none;
    font-weight: 700;
}

.navigation a:hover,
.navigation a[highlight] {
    background: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-text-color);
}

.topbar {
    padding: 8px 20px;
    flex-wrap: wrap;
    background: var(--lumo-base-color);
}

.workspace {
    background: var(--dimo-canvas);
    padding: 28px;
    gap: 20px;
    overflow: auto;
}

.workspace h2 {
    margin: 0;
    font-size: 1.65rem;
}

.workspace vaadin-horizontal-layout {
    flex-wrap: wrap;
    align-items: end;
}

vaadin-grid {
    background: var(--lumo-base-color);
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: 18px;
    min-height: 240px;
}

.statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
}

.stat-card {
    background: var(--lumo-base-color);
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: 22px;
    padding: 24px;
}

.stat-card h1 {
    color: var(--lumo-primary-text-color);
    margin-block: 14px 0;
}

.login-page {
    min-height: 100vh;
    background: radial-gradient(ellipse at top, var(--lumo-primary-color-10pct), var(--dimo-canvas) 70%);
}

.login-card {
    padding: 36px;
    background: var(--lumo-base-color);
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: 28px;
    box-shadow: 0 18px 70px #1720330d;
}

.login-card h1 {
    color: var(--lumo-primary-text-color);
    margin: 0;
}

.login-card h2 {
    font-size: 1.2rem;
}

.login-error {
    color: var(--lumo-error-text-color);
}

@media (max-width: 700px) {
    .workspace {
        padding: 16px;
    }

    .topbar {
        gap: 8px;
        padding: 8px;
    }

    .login-card {
        padding: 24px;
    }
}

.statistics-grid { align-items: start; flex-shrink: 0; }
.statistics-grid .stat-card { min-height: 100px; padding: 18px 22px; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; flex-shrink: 0; }
.analytics-grid > :last-child { grid-column: 1 / -1; }
.stat-card { min-width: 0; }
.stat-card h3 { margin-top: 0; }
.compact-chart { display: flex; gap: 8px; height: 235px; overflow-x: auto; direction: ltr; padding-block: 12px; }
.chart-column { flex: 1 0 30px; min-width: 30px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; }
.chart-track { height: 165px; width: 100%; max-width: 34px; display: flex; align-items: end; }
.chart-bar { background: var(--lumo-primary-color); width: 100%; border-radius: 6px 6px 0 0; }
.presence-ranking { max-height: 340px; overflow: auto; }
.ranking-row { display: flex; justify-content: space-between; padding: 10px 4px; border-bottom: 1px solid var(--lumo-contrast-10pct); gap: 20px; }
.message-timeline { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; background: var(--dimo-canvas); padding: 20px; box-sizing: border-box; min-height: 180px; }
.message-bubble { max-width: 75%; width: fit-content; padding: 14px 18px; border-radius: 18px; background: var(--lumo-base-color); border: 1px solid var(--lumo-contrast-10pct); display: flex; flex-direction: column; gap: 8px; }
.message-left { align-self: flex-start; border-bottom-left-radius: 4px; }
.message-right { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--lumo-primary-color-10pct); }
.message-author { font-weight: 700; color: var(--lumo-primary-text-color); }
.message-body { white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.message-time { font-size: 11px; color: var(--lumo-secondary-text-color); }
.message-deleted { opacity: .65; }
.message-bubble vaadin-button { align-self: end; font-size: 11px; height: 26px; }
@media (max-width: 900px) { .analytics-grid { grid-template-columns: minmax(0, 1fr); } .message-bubble { max-width: 90%; } }

.user-identity { align-items: center !important; gap: 10px; min-width: 0; flex-wrap: nowrap !important; }
.user-identity vaadin-avatar { flex-shrink: 0; }
.user-identity span { overflow: hidden; text-overflow: ellipsis; }
.message-author vaadin-avatar { width: 30px !important; height: 30px !important; }

.coin-detail-row { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; border-bottom: 1px solid var(--lumo-contrast-10pct); overflow-wrap: anywhere; }
.coin-detail-row > span:last-child { unicode-bidi: plaintext; text-align: end; }
.coin-details { width: 100%; }

.coin-workspace {
    overflow: auto;
    gap: 18px;
}
.coin-section-tabs { flex-shrink: 0; }
.coin-application-selector {
    align-items: end;
    width: 100%;
    gap: 10px;
}
.coin-section-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding-bottom: 24px;
}
.coin-section-content > h3 { margin: 0; }
.coin-section-content > p { margin: 0; color: var(--lumo-secondary-text-color); }
.coin-section-content > vaadin-vertical-layout,
.coin-application-context {
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: 16px;
    background: var(--lumo-base-color);
    width: 100%;
    min-width: 0;
}
.coin-application-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.coin-application-context h3 { margin: 0; }
.coin-application-context vaadin-details { margin-inline-start: auto; }
.coin-status-active, .coin-status-inactive {
    padding: 4px 10px;
    border-radius: 100px;
    font-size: var(--lumo-font-size-s);
    background: var(--lumo-contrast-5pct);
}
.coin-status-active { color: var(--lumo-success-text-color); }
.coin-status-inactive { color: var(--lumo-secondary-text-color); }
.coin-command-dialog { --vaadin-form-layout-column-spacing: 24px; }
.coin-command-dialog h4 { margin-block: 20px 4px; color: var(--lumo-primary-text-color); }
.coin-detail-row { align-items: baseline; }
@media (max-width: 640px) {
    .coin-section-content > vaadin-vertical-layout,
    .coin-application-context { padding: 14px; border-radius: 12px; }
    .coin-application-context vaadin-details { margin-inline-start: 0; width: 100%; }
    .coin-detail-row { flex-wrap: wrap; gap: 4px 14px; }
}
.coin-policy-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.coin-policy-options > h3, .coin-policy-options > p { grid-column: 1 / -1; }
.coin-policy-options > vaadin-button { width: 100%; min-height: 52px; margin: 0; }
.coin-balance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.coin-balance-grid .coin-detail-row { display: flex; flex-direction: column; align-items: start; padding: 16px; border: 1px solid var(--lumo-contrast-10pct); border-radius: 12px; }
.coin-balance-grid .coin-detail-row > span:last-child { font-size: var(--lumo-font-size-xl); font-weight: 700; }
@media (max-width: 640px) {
    .coin-policy-options, .coin-balance-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Coin controls share one responsive rhythm in both reading directions. */
.coin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
}
.coin-actions > vaadin-button { flex: 0 0 auto; margin: 0; }
.coin-application-selector {
    padding: 16px;
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: 16px;
    background: var(--lumo-base-color);
    box-sizing: border-box;
    align-items: end;
}
.coin-application-selector > .coin-application-choice { flex: 1 1 240px; min-width: 180px; max-width: 420px; }
.coin-application-selector > span { padding-block: 10px; }
.coin-application-context { align-items: start; }
.coin-application-context vaadin-details[opened] { flex-basis: 100%; margin-inline-start: 0; }
.coin-detail-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 0 24px;
    width: 100%;
    max-width: 900px;
    min-width: 0;
    box-sizing: border-box;
    text-align: start;
}
.coin-detail-card > .coin-detail-card,
.coin-detail-card > p,
.coin-detail-card > vaadin-details,
.coin-detail-card > vaadin-vertical-layout,
.coin-pack-translation { grid-column: 1 / -1; min-width: 0; }
.coin-detail-card .coin-detail-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 1.2fr); align-items: start; gap: 12px; }
.coin-detail-card .coin-detail-row > span:first-child { color: var(--lumo-secondary-text-color); }
.coin-detail-card .coin-detail-row > span:last-child { text-align: start; overflow-wrap: anywhere; }
.coin-pack-translation { padding-block: 12px; border-bottom: 1px solid var(--lumo-contrast-10pct); }
.coin-pack-translation h4 { margin: 0 0 8px; }
.coin-pack-translation p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.coin-duration-field { gap: 8px; }
.coin-duration-field > vaadin-text-field { flex: 1 1 120px; min-width: 0; }
.coin-duration-field > vaadin-combo-box { width: 120px; }
.coin-section-content > vaadin-vertical-layout { align-items: stretch; gap: 14px; }
.coin-section-content > vaadin-vertical-layout > h3 { margin-block: 4px; }
.coin-policy-options { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
@media (max-width: 640px) {
    .coin-application-selector { padding: 12px; }
    .coin-application-selector > .coin-application-choice { flex-basis: 100%; max-width: none; }
    .coin-detail-card { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .coin-actions > vaadin-button { max-width: 100%; white-space: normal; height: auto; min-height: 36px; }
}

.user-details-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; max-width: 960px; }
.user-details-field { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--lumo-contrast-10pct); min-width: 0; }
.user-details-field > span:first-child { color: var(--lumo-secondary-text-color); font-size: var(--lumo-font-size-s); }
.user-details-field > span:last-child { white-space: pre-wrap; overflow-wrap: anywhere; }
.user-details-pictures { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; max-height: 600px; overflow: auto; }
.user-details-picture { padding: 12px; border: 1px solid var(--lumo-contrast-10pct); border-radius: 14px; }
@media (max-width: 640px) { .user-details-card { grid-template-columns: minmax(0, 1fr); } }