/**
 * Loader Clock - Design System
 *
 * Componente de loading com relogio animado.
 * Adaptavel para dark/light mode usando variaveis CSS do Design System.
 *
 * Estrutura:
 * - Relogio analogico com ponteiros de hora, minuto e segundo
 * - Animacao contínua dos ponteiros
 * - Titulo principal e subtitulo
 *
 * @version 1.0.0
 * @date 2026-02-03
 */

/* ==========================================================================
   Loader Clock - Variables
   ========================================================================== */

.loader-clock {
    --loader-clock-primary: var(--color-primary, #970707);
    --loader-clock-bg: var(--color-bg-tertiary, #212121);
    --loader-clock-face: var(--color-primary, #e53935);
    --loader-clock-shadow: rgba(0, 0, 0, 0.3);
    --loader-clock-number: var(--color-bg-tertiary, #212121);
    --loader-clock-pointer-sec: var(--color-primary, #e53935);
    --loader-clock-pointer-min: #fff;
    --loader-clock-pointer-hour: var(--color-bg-tertiary, #212121);

    /* Animation times */
    --loader-clock-sec-time: 10s;
    --loader-clock-min-time: 60s;
    --loader-clock-hour-time: 20s;
}

/* ==========================================================================
   Loader Clock - Container Principal
   ========================================================================== */

.loader-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg, 20px);
    padding: var(--spacing-2xl, 32px);
    text-align: center;
}

/* Variante centralizada em tela cheia */
.loader-clock--fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-secondary, #F6F6F9);
    z-index: var(--z-modal, 1050);
}

/* Variante para uso dentro de modal/backdrop */
.loader-clock--modal {
    padding: var(--spacing-3xl, 40px) var(--spacing-2xl, 32px);
    background: var(--color-bg-primary, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
}

/* ==========================================================================
   Loader Clock - Clock Container
   ========================================================================== */

.loader-clock__clock {
    height: 120px;
    width: 120px;
    min-height: 120px;
    min-width: 120px;
    padding: 5px;
    background-color: var(--loader-clock-bg);
    box-shadow: 3px 0 6px 1px var(--loader-clock-shadow);
    border-radius: 50%;
    position: relative;
}

/* Tamanhos */
.loader-clock--sm .loader-clock__clock {
    height: 80px;
    width: 80px;
    min-height: 80px;
    min-width: 80px;
    padding: 3px;
}

.loader-clock--lg .loader-clock__clock {
    height: 160px;
    width: 160px;
    min-height: 160px;
    min-width: 160px;
    padding: 7px;
}

/* ==========================================================================
   Loader Clock - Clock Face (Centro)
   ========================================================================== */

.loader-clock__face {
    height: 100%;
    width: 100%;
    background-color: var(--loader-clock-face);
    border-radius: 50%;
    box-shadow: 1px 0 3px 0 var(--loader-clock-shadow);
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-template-columns: repeat(7, 1fr);
    grid-template-areas:
        ". . . n12 . . ."
        ". . n11  . n1 . ."
        ". n10 . . . n2 ."
        "n9 . . . . . n3"
        ". n8 . . . n4 ."
        ". . n7 . n5 . ."
        ". . . n6 . . .";
}

/* ==========================================================================
   Loader Clock - Numbers
   ========================================================================== */

.loader-clock__number {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 8px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--loader-clock-number);
    line-height: 1;
    align-self: center;
    justify-self: center;
}

.loader-clock--sm .loader-clock__number {
    font-size: 6px;
}

.loader-clock--lg .loader-clock__number {
    font-size: 10px;
}

.loader-clock__number--1 { grid-area: n1; justify-self: end; align-self: start; }
.loader-clock__number--2 { grid-area: n2; justify-self: end; align-self: start; }
.loader-clock__number--3 { grid-area: n3; justify-self: start; }
.loader-clock__number--4 { grid-area: n4; justify-self: end; align-self: end; }
.loader-clock__number--5 { grid-area: n5; justify-self: end; align-self: end; }
.loader-clock__number--6 { grid-area: n6; align-self: start; }
.loader-clock__number--7 { grid-area: n7; justify-self: start; align-self: end; }
.loader-clock__number--8 { grid-area: n8; justify-self: start; align-self: end; }
.loader-clock__number--9 { grid-area: n9; justify-self: end; }
.loader-clock__number--10 { grid-area: n10; justify-self: start; align-self: start; }
.loader-clock__number--11 { grid-area: n11; justify-self: start; align-self: start; }
.loader-clock__number--12 { grid-area: n12; align-self: end; }

/* ==========================================================================
   Loader Clock - Pointers Container (Top Layer)
   ========================================================================== */

.loader-clock__pointers {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Loader Clock - Hour Pointer Container
   ========================================================================== */

.loader-clock__hours-container {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 1;
    filter: drop-shadow(1px 0 3px var(--loader-clock-shadow));
}

.loader-clock__hours-pointer {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: var(--loader-clock-pointer-hour);
    clip-path: polygon(
        -10% -10%,
        32% -10%,
        50% 50%,
        68% -10%,
        110% -10%,
        110% 110%,
        -10% 110%
    );
    animation: loader-clock-rotate var(--loader-clock-hour-time) infinite linear;
}

/* ==========================================================================
   Loader Clock - Sec/Min Container (Centro)
   ========================================================================== */

.loader-clock__sec-min-container {
    height: 12px;
    width: 12px;
    background-color: var(--loader-clock-bg);
    box-shadow: 0 1px 4px 1px var(--loader-clock-shadow);
    border-radius: 50%;
    position: absolute;
    z-index: 2;
}

.loader-clock--sm .loader-clock__sec-min-container {
    height: 8px;
    width: 8px;
}

.loader-clock--lg .loader-clock__sec-min-container {
    height: 16px;
    width: 16px;
}

/* ==========================================================================
   Loader Clock - Second Pointer
   ========================================================================== */

.loader-clock__sec-container {
    height: 100%;
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: loader-clock-sec var(--loader-clock-sec-time) infinite linear;
}

.loader-clock__sec-pointer {
    position: absolute;
    bottom: -16px;
    height: 55px;
    width: 1px;
    border-radius: 1px;
    background-color: var(--loader-clock-pointer-sec);
    box-shadow: 0 1px 4px 1px var(--loader-clock-shadow);
    z-index: 0;
}

.loader-clock--sm .loader-clock__sec-pointer {
    height: 35px;
    bottom: -12px;
}

.loader-clock--lg .loader-clock__sec-pointer {
    height: 70px;
    bottom: -20px;
}

/* Centro do ponteiro de segundos */
.loader-clock__sec-container::before {
    content: "";
    position: absolute;
    height: 2px;
    width: 2px;
    border-radius: 50%;
    background-color: var(--loader-clock-bg);
    z-index: 2;
}

.loader-clock__sec-container::after {
    content: "";
    position: absolute;
    height: 5px;
    width: 5px;
    border: 1px solid var(--loader-clock-pointer-sec);
    border-radius: 50%;
    background-color: #fff;
    z-index: 1;
}

.loader-clock--sm .loader-clock__sec-container::after {
    height: 4px;
    width: 4px;
}

.loader-clock--lg .loader-clock__sec-container::after {
    height: 6px;
    width: 6px;
}

/* ==========================================================================
   Loader Clock - Minute Pointer
   ========================================================================== */

.loader-clock__min-container {
    height: 100%;
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: loader-clock-rotate var(--loader-clock-min-time) infinite linear;
}

.loader-clock__min-pointer {
    position: absolute;
    bottom: -6px;
    height: 40px;
    width: 1px;
    border-radius: 1px;
    background-color: var(--loader-clock-pointer-min);
    box-shadow: 1px 1px 3px 1px var(--loader-clock-shadow);
    z-index: 0;
}

.loader-clock--sm .loader-clock__min-pointer {
    height: 25px;
    bottom: -4px;
}

.loader-clock--lg .loader-clock__min-pointer {
    height: 50px;
    bottom: -8px;
}

/* ==========================================================================
   Loader Clock - Animations
   ========================================================================== */

@keyframes loader-clock-sec {
    0% {
        transform: rotateZ(0deg);
    }
    90% {
        transform: rotateZ(360deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}

@keyframes loader-clock-rotate {
    to {
        transform: rotateZ(360deg);
    }
}

/* ==========================================================================
   Loader Clock - Content (Textos)
   ========================================================================== */

.loader-clock__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 4px);
}

.loader-clock__title {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--font-size-p1, 16px);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--line-height-p1, 26px);
    color: var(--color-text-primary, #12151F);
    margin: 0;
}

.loader-clock__subtitle {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--font-size-p3, 14px);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--line-height-p3, 24px);
    color: var(--color-text-secondary, #394360);
    margin: 0;
}

/* ==========================================================================
   Loader Clock - Variantes de Cor
   ========================================================================== */

.loader-clock--success {
    --loader-clock-face: var(--color-success, #519000);
    --loader-clock-pointer-sec: var(--color-success, #519000);
}

.loader-clock--info {
    --loader-clock-face: var(--color-accent-300, #3E68FB);
    --loader-clock-pointer-sec: var(--color-accent-300, #3E68FB);
}

.loader-clock--warning {
    --loader-clock-face: var(--color-warning, #E9BD00);
    --loader-clock-pointer-sec: var(--color-warning, #E9BD00);
}

.loader-clock--danger {
    --loader-clock-face: var(--color-danger, #C90A0A);
    --loader-clock-pointer-sec: var(--color-danger, #C90A0A);
}

/* ==========================================================================
   Dark Mode - Classe explicita
   ========================================================================== */

html.dark .loader-clock,
html.dark-mode .loader-clock,
html[data-theme="dark"] .loader-clock,
body.dark .loader-clock,
body.dark-mode .loader-clock,
body[data-theme="dark"] .loader-clock,
.dark .loader-clock,
.dark-mode .loader-clock,
[data-theme="dark"] .loader-clock {
    --loader-clock-bg: var(--color-bg-tertiary, #1D2333);
    --loader-clock-number: #fff;
    --loader-clock-pointer-hour: var(--color-bg-tertiary, #1D2333);
}

html.dark .loader-clock--fullscreen,
html.dark-mode .loader-clock--fullscreen,
html[data-theme="dark"] .loader-clock--fullscreen,
body.dark .loader-clock--fullscreen,
body.dark-mode .loader-clock--fullscreen,
body[data-theme="dark"] .loader-clock--fullscreen,
.dark .loader-clock--fullscreen,
.dark-mode .loader-clock--fullscreen,
[data-theme="dark"] .loader-clock--fullscreen {
    background: var(--color-bg-primary, #10141D);
}

html.dark .loader-clock--modal,
html.dark-mode .loader-clock--modal,
html[data-theme="dark"] .loader-clock--modal,
body.dark .loader-clock--modal,
body.dark-mode .loader-clock--modal,
body[data-theme="dark"] .loader-clock--modal,
.dark .loader-clock--modal,
.dark-mode .loader-clock--modal,
[data-theme="dark"] .loader-clock--modal {
    background: var(--color-bg-secondary, #1D2333);
}

html.dark .loader-clock__title,
html.dark-mode .loader-clock__title,
html[data-theme="dark"] .loader-clock__title,
body.dark .loader-clock__title,
body.dark-mode .loader-clock__title,
body[data-theme="dark"] .loader-clock__title,
.dark .loader-clock__title,
.dark-mode .loader-clock__title,
[data-theme="dark"] .loader-clock__title {
    color: var(--color-text-primary, #E0E2EB);
}

html.dark .loader-clock__subtitle,
html.dark-mode .loader-clock__subtitle,
html[data-theme="dark"] .loader-clock__subtitle,
body.dark .loader-clock__subtitle,
body.dark-mode .loader-clock__subtitle,
body[data-theme="dark"] .loader-clock__subtitle,
.dark .loader-clock__subtitle,
.dark-mode .loader-clock__subtitle,
[data-theme="dark"] .loader-clock__subtitle {
    color: var(--color-text-secondary, #A2A8B9);
}

/* ==========================================================================
   Dark Mode - Media Query
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .loader-clock {
        --loader-clock-bg: var(--color-bg-tertiary, #1D2333);
        --loader-clock-number: #fff;
        --loader-clock-pointer-hour: var(--color-bg-tertiary, #1D2333);
    }

    .loader-clock--fullscreen {
        background: var(--color-bg-primary, #10141D);
    }

    .loader-clock__title {
        color: var(--color-text-primary, #E0E2EB);
    }

    .loader-clock__subtitle {
        color: var(--color-text-secondary, #A2A8B9);
    }
}

/* ==========================================================================
   Loader Clock - Fade Animations
   ========================================================================== */

.loader-clock--fade-in {
    animation: loader-clock-fade-in 0.2s ease-out;
}

.loader-clock--fade-out {
    animation: loader-clock-fade-out 0.2s ease-out forwards;
}

@keyframes loader-clock-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes loader-clock-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ==========================================================================
   Loader Clock - States
   ========================================================================== */

.loader-clock[data-loading="true"] {
    display: flex;
}

.loader-clock[data-loading="false"] {
    display: none;
}