:root {
    --tile-accent: #6BACE1;
    --tile-accent-dark: #5A9CD8;
    /* Тема компонентів бібліотеки (як у шаблоні ds_template, base.html): без цього фокус і вибір — сині #2563eb */
    --app-accent: #6BACE1;
    --app-accent-dark: #5a9bc4;
    --app-hover-bg: #f0f7ff;
    --sl-color-border: #ced4da;
    --sl-color-text: #333;
    --sl-color-text-secondary: #495057;
    --input-border: #ced4da;
    --sl-color-primary: var(--app-accent);
    --sl-color-focus: var(--app-accent);
    --sl-color-hover: var(--app-hover-bg);
    --sl-color-hover-selected: var(--app-accent-dark);
    --ac-color-primary: var(--app-accent);
    --ac-color-focus: var(--app-accent);
    --ac-color-hover: var(--app-hover-bg);
    --ac-color-hover-selected: var(--app-accent-dark);
    --input-focus: var(--app-accent);
    --input-primary: var(--app-accent);
    --menu-item-hover-bg: var(--app-hover-bg);
    --color-primary: var(--app-accent);
    --color-primary-dark: var(--app-accent-dark);
    --color-header-bg: var(--app-accent);
    --row-hover-bg: var(--app-hover-bg);
}

.menu-container-content {
    max-width: 100%;
}

.header-title {
    display: flex;
    align-items: center;
    margin-right: 8px;
    gap: 8px;
}

/* Емблема й назва — як .app-header__brand у шаблоні ds_template */
.header-title > .logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.header-title .site-branding {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    line-height: 1.2;
    color: #F2F2F2;
}
.header-title .site-name {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}
.header-title .site-subtitle {
    font-size: 12px;
    opacity: 0.88;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .header-title > .logo { height: 32px; }
    .header-title .site-branding { display: none; }
}

.header-block {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Стилі для контейнера сервісів */
.services-container {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.services-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 0 10px;
}

.services-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.services-title i {
    font-size: 24px;
    color: #6BACE1;
}

.services-title h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    color: #2c3e50;
}

.services-stats {
    color: #666;
    font-size: 14px;
}

@media (max-width: 768px) {
    .services-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .services-title h2 {
        font-size: 20px;
    }
}

/* Аватарка в шапці — відкриває панель профілю (appShell.js) */
.header-avatar[hidden] {
    display: none !important;   /* modal.css задає display усім <button> — інакше hidden не діє */
}
.header-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    box-shadow: none;
    filter: none;
}
.header-avatar:hover,
.header-avatar[aria-expanded="true"] {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.3);
    filter: none;
}
.header-avatar:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.header-avatar__photo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.header-avatar__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.header-avatar--impersonated {
    border-color: #f0ad4e;
}
.header-avatar__badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #f0ad4e;
    color: #fff;
    font-size: 9px;
}
.header-signin {
    min-height: 40px;
}

/* Емблема й назва в шапці — посилання на головну порталу, без вигляду посилання */
a.header-title--link,
a.header-title--link:hover,
a.header-title--link:visited { color: inherit; text-decoration: none; }
a.header-title--link:hover { filter: brightness(1.12); }