/* stylelint-disable selector-class-pattern */

/* Base styles for all overlay components */

/* Animation for spinners */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* stylelint-disable selector-class-pattern */

.app-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center center;
    place-content: center center;
    background: var(--tg-theme-bg-color);
    padding-inline: 20px;
    padding-bottom: 20px;
    pointer-events: all;
    z-index: 1000;
}

.app-overlay__developer {
    align-self: center;
}

.app-overlay__content {
    display: flex;
    flex-direction: column;
    place-items: center center;
    place-content: center center;
}

.app-overlay__spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--tg-theme-button-color);
    border-top-color: var(--tg-theme-secondary-bg-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.app-overlay__message {
    text-align: center;
}

/* stylelint-disable selector-class-pattern */

.button {
    background-color: var(--tg-theme-button-color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px;
    border-radius: 15px;
    width: 60px;
    height: 60px;
    position: relative;
    transition: all 0.3s ease;
}

/* stylelint-disable comment-empty-line-before */
/* Commented out: now using ripple effect instead */
/* @media (hover: hover) and (pointer: fine) {
    button:hover {
        background-color: #209b76;
    }
}

@media (hover: none) and (pointer: coarse) {
    button:active {
        background-color: #209b76;
    }
} */
/* stylelint-enable comment-empty-line-before */

button:focus {
    outline: none;
}

button.button:disabled {
    cursor: not-allowed;
}

.button.loading {
    opacity: 0.6;
    cursor: not-allowed;
}

/* stylelint-disable selector-class-pattern */

.doc__button-download {
    background-image: url(38d3ebf1a38aae0ff9d5.svg);
    position: relative;
    transition: all 0.3s ease;
}

.doc__button-download.loading {
    opacity: 0.6;
    cursor: not-allowed;
}

.doc__button-download.success {
    background-color: #4caf50;
    cursor: not-allowed;
}

.doc__button-download.error {
    background-color: #f44336;
    cursor: not-allowed;
}

.doc__button-download:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Override disabled styles when showing success/error state */
.doc__button-download.success:disabled,
.doc__button-download.error:disabled {
    opacity: 1;
    cursor: not-allowed;
}

.button__spinner {
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 40px;
    height: 40px;
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid rgb(255 255 255 / 30%);
    border-top-color: white;
    animation: button-spin 0.6s linear infinite;
    background-color: var(--tg-theme-button-color);
}

@keyframes button-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.button__checkmark,
.button__crossmark {
    position: absolute;
    inset: 0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.button__checkmark {
    background-color: #4caf50;
}

.button__crossmark {
    background-color: #f44336;
}

.button__checkmark svg,
.button__crossmark svg {
    width: 85%;
    height: 85%;
}

.button__checkmark path {
    animation: checkmark 0.3s ease-in-out;
}

.button__crossmark path {
    animation: crossmark 0.3s ease-in-out;
}

@keyframes checkmark {
    0% {
        stroke-dasharray: 0, 100;
    }

    100% {
        stroke-dasharray: 100, 100;
    }
}

@keyframes crossmark {
    0% {
        stroke-dasharray: 0, 100;
    }

    100% {
        stroke-dasharray: 100, 100;
    }
}

/* stylelint-disable selector-class-pattern */

.control-panel__button-first-page {
    background-image: url(f3c73e29d31919892e41.svg);
    grid-column: 1;
}

/* stylelint-disable selector-class-pattern */

.control-panel__button-last-page {
    background-image: url(6fcbdcb9bcf823256268.svg);
    grid-column: 4;
}

/* stylelint-disable selector-class-pattern */

.control-panel__button-next-page {
    background-image: url(d177f3527c3a21bd7b1e.svg);
    grid-column: 2;
}

/* stylelint-disable selector-class-pattern */

.control-panel__button-prev-page {
    background-image: url(43e4a9cd2454e2fce145.svg);
    grid-column: 3;
}

/* stylelint-disable selector-class-pattern */

.control-panel__button-refresh {
    background-image: url(2fc2e107220681f05ad0.svg);
    grid-column: 5;
}

/* stylelint-disable selector-class-pattern */

.patient__button-show-docs,
.main-patient__button-show-docs {
    position: relative;
    overflow: hidden;
    background-image: url(7e343078c5c1456b1894.svg);
}

.control-panel {
    background-color: transparent;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 5px;
}

/* stylelint-disable selector-class-pattern */
.doc {
    background-color: var(--tg-theme-bg-color);
    grid-template-columns: 1fr 60px;
    border-radius: 15px;
    display: grid;
    padding: 5px;
    gap: 5px;
    min-height: 70px;
    height: max-content;
    box-sizing: border-box;
}

.doc > :nth-child(2) {
    align-self: center;
}

.doc__info {
    background-color: var(--tg-theme-bg-color);
    display: grid;
    grid-template-columns: 70px 1fr;
    grid-template-rows: 1fr 29px;
    gap: 2px;
}

.doc__info__title-wrapper,
.doc__info__date-wrapper,
.doc__info__specialist-wrapper {
    background-color: var(--tg-theme-secondary-bg-color);
    padding: 2px 5px 2px 8px;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    display: flex;
}

.doc__info__title-wrapper {
    border-radius: 15px 15px 0 0;
    height: var(--height-document-info-title);
    grid-column: 1 / 3;
    grid-row: 1;
}

.doc__info__date-wrapper {
    border-radius: 0 0 0 15px;
    grid-column: 1;
    grid-row: 2;
}

.doc__info__specialist-wrapper {
    border-radius: 0 0 15px;
    grid-column: 2;
    grid-row: 2;
}

.doc__info__date {
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

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

.doc__info__title {
    overflow: hidden;
    display: -webkit-box;
    /* stylelint-disable-next-line property-no-deprecated */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lc, 2);
    line-clamp: var(--lc, 2);
    text-overflow: ellipsis;
    line-height: 20px;
}

.doc__button-download-wrapper {
    background-color: var(--tg-theme-bg-color);
    grid-row: 1;
    grid-column: 2;
    height: 60px;
}

/* stylelint-disable selector-class-pattern */

.doc-list__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    z-index: 1000;
    overflow: hidden;
    text-align: center;
    pointer-events: all;
    place-items: center center;
    place-content: center center;
    grid-template-rows: auto auto;
    background: var(--tg-theme-secondary-bg-color);
}

.doc-list__overlay-content {
    display: flex;
    flex-direction: column;
    place-items: center center;
    place-content: center center;
    gap: 15px;
}

.doc-list__overlay-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--tg-theme-button-color);
    border-top-color: var(--tg-theme-secondary-bg-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.doc-list__overlay-message {
    text-align: center;
    color: var(--tg-theme-text-color);
}

    :root {
        --tg-theme-bg-color: #17212b;
        --tg-theme-text-color: #f5f5f5;
        --tg-theme-hint-color: #aaa;
        --tg-theme-link-color: #5ac8fa;
        --tg-theme-button-color: #5288c1;
        --tg-theme-button-text-color: #fff;
        --tg-theme-secondary-bg-color: #232e3c;
    }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    color: var(--tg-theme-text-color);
    font-family: Roboto, sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 12px;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--tg-theme-bg-color);
    min-width: 320px;
}

.container {
    background-color: var(--tg-theme-bg-color);
    display: grid;
    height: 100vh;
    padding: 10px;
    min-width: 320px;
}

.overlay.hidden {
    display: none;
}

.spinner.hidden {
    display: none;
}

.button.hidden {
    display: none;
}

.button-wrapper.hidden {
    display: none;
}

.main-patient.hide-button {
    gap: 0;
}

.message.hidden {
    display: none;
}

.scrollbar.hidden {
    overflow: hidden;
}

.view.hidden {
    visibility: hidden;
}

/* stylelint-disable selector-class-pattern */

/* PatientComponent Grid Row: 1 Grid Column: 1 */

.patient,
.main-patient {
    grid-template-columns: 1fr auto;
    border-radius: 15px;
    display: grid;
    gap: 5px;
    min-height: 70px;
    max-height: 70px;
    box-sizing: border-box;
    align-items: start;
}

.doc-list__item, 
.patient-list__item {
    border-radius: 15px;
    padding: 5px;
}

.patient {
    background-color: var(--tg-theme-bg-color);
}

.main-patient {
    padding: 5px;
    background-color: var(--tg-theme-secondary-bg-color);
}

.patient__info {
    background-color: var(--tg-theme-bg-color);
}

/* PatientInfoComponent */

.patient__info,
.main-patient__info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 29px 29px;
    gap: 2px;
}

.patient__first-name-wrapper,
.patient__middle-name-wrapper,
.patient__last-name-wrapper,
.patient__date-birth-wrapper,
.main-patient__first-name-wrapper,
.main-patient__middle-name-wrapper,
.main-patient__last-name-wrapper,
.main-patient__date-birth-wrapper {
    padding: 2px 5px 2px 10px;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    display: flex;
}

.patient__first-name-wrapper,
.patient__middle-name-wrapper,
.patient__last-name-wrapper,
.patient__date-birth-wrapper {
    background-color: var(--tg-theme-secondary-bg-color);
}

.main-patient__first-name-wrapper,
.main-patient__middle-name-wrapper,
.main-patient__last-name-wrapper,
.main-patient__date-birth-wrapper {
    background-color: var(--tg-theme-bg-color);
}

.patient__last-name-wrapper,
.main-patient__last-name-wrapper {
    border-radius: 15px 0 0;
    grid-column: 1;
    grid-row: 1;
}

.patient__first-name-wrapper,
.main-patient__first-name-wrapper {
    border-radius: 0 15px 0 0;
    grid-column: 2;
    grid-row: 1;
}

.patient__middle-name-wrapper,
.main-patient__middle-name-wrapper {
    border-radius: 0 0 0 15px;
    grid-column: 1;
    grid-row: 2;
}

.patient__date-birth-wrapper,
.main-patient__date-birth-wrapper {
    border-radius: 0 0 15px;
    grid-column: 2;
    grid-row: 2;
}

.patient__first-name,
.patient__last-name,
.patient__middle-name,
.patient__date-birth,
.main-patient__first-name,
.main-patient__last-name,
.main-patient__middle-name,
.main-patient__date-birth {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.patient__button-show-docs-wrapper {
    background-color: var(--tg-theme-bg-color);
}

.patient__button-show-docs-wrapper,
.main-patient__button-show-docs-wrapper,
.main-patient__button-wrapper {
    grid-row: 1;
    grid-column: 2;
    height: 60px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-patient__button-back-to-patients {
    background-image: url(660d150989a4970907ce.svg);
}

/* stylelint-disable selector-class-pattern */
.patient-doc-list-view {
    position: absolute;
    inset: 0;
    background-color: var(--tg-theme-bg-color);
    display: grid;
    grid-template-rows: 99px 1fr 70px;
    padding: 10px 15px 15px;
    gap: 10px;
    z-index: 10;
}

.patient-doc-list-view > div:first-child {
    margin-right: 10px;
}




.patient-doc-list-view__doc-list {
    display: grid;
    position: relative;
    scroll-behavior: smooth;
    align-content: flex-start;
    background-color: var(--tg-theme-secondary-bg-color);
    gap: 5px;
    overflow: hidden auto;
    padding: 5px;
    padding-right: 10px;
    border-radius: 15px 15px 0;
}

.patient-doc-list-view__doc-list.hidden {
    visibility: hidden;
}

.patient-doc-list-view__control-panel {
    grid-row: 3;
}

/* stylelint-disable selector-class-pattern */

.patient__overlay,
.main-patient__overlay {
    inset: 0;
    background: var(--tg-theme-secondary-bg-color);
    display: grid;
    grid-template-rows: auto auto;
    place-items: center center;
    place-content: center center;
    z-index: 1000;
    pointer-events: all;
    text-align: center;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.patient__overlay-content,
.main-patient__overlay-content {
    display: flex;
    flex-direction: column;
    place-items: center center;
    place-content: center center;
    gap: 15px;
}

.patient__overlay-spinner,
.main-patient__overlay-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--tg-theme-button-color);
    border-top-color: var(--tg-theme-secondary-bg-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.patient__overlay-message,
.main-patient__overlay-message {
    text-align: center;
    color: var(--tg-theme-text-color);
}


/* stylelint-disable selector-class-pattern */

.family__overlay {
    inset: 0;
    width: 100%;
    height: 100%;
    display: grid;
    z-index: 1000;
    overflow: hidden;
    position: absolute;
    text-align: center;
    pointer-events: all;
    place-items: center center;
    place-content: center center;
    grid-template-rows: auto auto;
    background: var(--tg-theme-secondary-bg-color);
}

.family__overlay-content {
    display: flex;
    flex-direction: column;
    place-items: center center;
    place-content: center center;
    gap: 15px;
}

.family__overlay-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--tg-theme-button-color);
    border-top-color: var(--tg-theme-secondary-bg-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.family__overlay-message {
    text-align: center;
    color: var(--tg-theme-text-color);
}

/* stylelint-disable selector-class-pattern */


.patients-view {
    position: absolute;
    inset: 0;
    background-color: var(--tg-theme-bg-color);
    display: grid;
    grid-template-rows: 99px 1fr 70px;
    padding: 10px 15px 15px;
    gap: 10px;
    z-index: 10;
}

.patients-view > div:first-child {
    margin-right: 10px;
}

/* Grid Row: 1 Grid Column: 1 */

.main-patient-wrapper {
    display: grid;
    grid-template-rows: 29px 1fr;
    border-radius: 15px;
    background-color: var(--tg-theme-bg-color);
    grid-row: 1;
    overflow: hidden;
}

.main-patient-wrapper__title-wrapper{
    grid-row: 1;
    background-color: var(--tg-theme-secondary-bg-color);
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
   
}

.main-patient-wrapper__title {
    width: 100%;
    height: 100%;
    line-height: 29px;
    padding-left: 8px;
    text-align: left;
    font-size: 14px;
    background-color: var(--tg-theme-bg-color);
}

.patients-view__main-patient{
    grid-row: 2;
}

.scrollable-wrapper {
    grid-row: 2;
    grid-template-rows: 29px 1fr;
    border-radius: 15px 0 0 15px;
    background-color: var(--tg-theme-bg-color);
    overflow: hidden;
    display: grid;
    height: 100%;
}


.title-wrapper {
    grid-row: 1;
    background-color: var(--tg-theme-secondary-bg-color);
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

.title-content {
    width: 100%;
    height: 100%;
    line-height: 29px;
    padding-left: 8px;
    text-align: left;
    font-size: 14px;
    background-color: var(--tg-theme-bg-color);
}

.content-wrapper{
    grid-row: 2;
    border-radius: 15px;
    background-color: var(--tg-theme-secondary-bg-color);
    overflow: hidden;
    display: grid;
    gap: 5px;
    height: 100%;
    position: relative;
}


.patients-view__family {
    display: grid;
    position: relative;
    scroll-behavior: smooth;
    align-content: flex-start;
    background-color: var(--tg-theme-secondary-bg-color);
    gap: 5px;
    overflow: hidden auto;
    padding: 5px;
    padding-right: 10px;
    border-radius: 15px 15px 0;
}

.patients-view__family.hidden {
    visibility: hidden;
}

.patients-view__control-panel {
    grid-row: 3;
}

/* Ripple Effect Styles */

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 60%);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
    z-index: 1;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Ensure buttons have proper positioning context for ripple */
button {
    position: relative;
    overflow: hidden;
}