/* NOTE(design): unified font family across pages - Lato is primary */
@font-face {
    font-family: "Lato";
    src: url("/static/fonts/lato/Lato-Regular.woff2") format("woff2"),
         url("/static/fonts/lato/Lato-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/static/fonts/lato/Lato-Italic.woff2") format("woff2"),
         url("/static/fonts/lato/Lato-Italic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("/static/fonts/lato/Lato-Bold.woff2") format("woff2"),
         url("/static/fonts/lato/Lato-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Canonical site font stack; use this same list wherever Lato is intended. */
* {
    font-family: "Lato", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Override accent colors to use green instead of blue */
.text-accent-100,
.text-accent-200,
.bg-accent-100,
.bg-accent-200 {
    color: var(--color-warning-accent) !important;
}

.bg-accent-100,
.bg-accent-200 {
    background-color: color-mix(in srgb, var(--color-success) 20%, transparent) !important;
}

/* Override Tailwind blue colors to use green */
.text-blue-600,
.text-blue-500 {
    color: var(--color-success) !important;
}

.bg-blue-600,
.bg-blue-500 {
    background-color: var(--color-success) !important;
}

.border-blue-600,
.border-blue-500 {
    border-color: var(--color-success) !important;
}

.focus\:ring-blue-600:focus,
.focus\:ring-blue-500:focus {
    --tw-ring-color: var(--color-success) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 50%, transparent) !important;
}

/* Checkbox and radio inputs */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-success) !important;
}

/* Navigation links and button-styled links - no underline */
.nav-btn,
.user-sidebar a,
.sidebar a,
.sidebar-link,
a[class*="nav-"],
a[class*="menu-"],
a[class*="px-"],
a[class*="bg-"],
a[class*="inline-flex"],
a[href*="/core/"],
a[href*="/api/"],
a[href*="/admin/"],
a[href="/"] {
    text-decoration: none !important;
    color: var(--color-white-pure) !important;
}

/* Django admin link - green accent color */
a[href*="/admin/"]:hover,
.sidebar-link:hover {
    color: var(--color-warning-accent) !important;
}

/* Standardized link styling - content links get underline */
a {
    color: var(--color-white-pure) !important;
}

a:hover {
    color: var(--color-text-primary) !important;
}

/* Content links (attachments, external links) get underlined */
a[href*=".pdf"],
a[href*=".txt"],
a[href*=".png"],
a[href*=".jpg"],
a[href*=".jpeg"],
a[target="_blank"]:not(.nav-btn):not(.user-sidebar a):not(.sidebar a):not([class*="px-"]):not([class*="bg-"]):not([class*="inline-flex"]) {
    text-decoration: underline !important;
}

/* Standard button style overrides for Tailwind-based buttons */
#createBriefFromEmailBtn,
#generateQuestionsBtn,
#addToBriefsBtn,
#refreshBtn,
button.bg-primary,
button.bg-purple-600,
button.bg-accent-200,
.bg-purple-600.inline-flex,
.bg-primary.inline-flex,
.bg-accent-200 {
    background: color-mix(in srgb, var(--color-white-pure) 8%, transparent) !important;
    color: var(--color-white-pure) !important;
    border: 1px solid color-mix(in srgb, var(--color-white-pure) 28%, transparent) !important;
    border-radius: 8px !important;
}

#createBriefFromEmailBtn:hover:not(:disabled),
#generateQuestionsBtn:hover:not(:disabled),
#addToBriefsBtn:hover:not(:disabled),
#refreshBtn:hover:not(:disabled),
button.bg-primary:hover:not(:disabled),
button.bg-purple-600:hover:not(:disabled),
button.bg-accent-200:hover:not(:disabled),
.bg-purple-600.inline-flex:hover:not(:disabled),
.bg-primary.inline-flex:hover:not(:disabled),
.bg-accent-200:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-white-pure) 15%, transparent) !important;
}

button.bg-primary:disabled,
button.bg-purple-600:disabled,
button.bg-accent-200:disabled,
.bg-purple-600.inline-flex:disabled,
.bg-primary.inline-flex:disabled,
.bg-accent-200:disabled {
    opacity: 0.45 !important;
}

/* Dodatkowe style dla ciemnego motywu */

/* Tranzycje dla płynnego przejścia */
body, .sidebar, .card, .button {
    transition: all 0.3s ease;
}

/* Efekty hover dla kart */
.email-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.email-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-black) 30%, transparent);
}

/* Animacje dla HTMX */
.htmx-indicator {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}
.htmx-request .htmx-indicator {
    opacity: 1;
}
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Unified spinner system - consistent across all contexts */
.spinner {
    border-radius: 50%;
    animation: spin 1s linear infinite;
    border-style: solid;
    border-color: hsl(var(--muted));
    border-top-color: hsl(var(--primary));
}

/* Spinner size variants */
.spinner-small {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.spinner-medium {
    width: 24px;
    height: 24px;
    border-width: 3px;
}

.spinner-large {
    width: 40px;
    height: 40px;
    border-width: 4px;
    margin: 0 auto 20px;
}

/* Spinner variants */
.spinner-inline-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.spinner-inline {
    display: inline-block;
    margin: 0;
}

.spinner-overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: hsl(var(--background) / 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.spinner-overlay {
    margin: 0 auto 20px;
}

.spinner-button-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.spinner-button {
    margin: 0;
    margin-left: 8px;
    flex-shrink: 0;
}

.spinner-message {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    margin-top: 12px;
    text-align: center;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animacja pisania w czacie AI */
@keyframes typing {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}

.typing-dot {
    animation: typing 1.4s infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* Custom scrollbar using shadcn variables */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--background));
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground));
}

/* Utility classes using shadcn variables */
/* These provide reusable component styles that work with the shadcn design system */
.dark-card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
}

.dark-input {
    background-color: hsl(var(--input));
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
}

.dark-input:focus {
    border-color: hsl(var(--ring));
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.primary-button {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    transition: all 0.2s;
}

.primary-button:hover {
    background-color: hsl(var(--primary) / 0.9);
}

.secondary-button {
    background-color: transparent;
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
    transition: all 0.2s;
}

.secondary-button:hover {
    background-color: hsl(var(--secondary));
}

.danger-button {
    background-color: transparent;
    border: 1px solid hsl(var(--destructive));
    color: hsl(var(--destructive));
    transition: all 0.2s;
}

.danger-button:hover {
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
}

/* Email status styles using shadcn variables */
.status-pending {
    background-color: hsl(var(--warning));
    color: hsl(var(--warning-foreground));
}

.status-processing {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground) / 0.8);
}

.status-processed {
    background-color: hsl(var(--success));
    color: hsl(var(--success-foreground));
}

.status-failed {
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground) / 0.8);
}

/* Style dla powiadomień */
/* Old notification styles removed - using toast.js for unified notifications */

/* Responsywne dostosowania */
@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
    
    .mobile-only {
        display: block;
    }
}

@media (min-width: 769px) {
    .desktop-only {
        display: block;
    }
    
    .mobile-only {
        display: none;
    }
}

/* ============================================================
   Unified topbar styling (shadcn tokens)
   Design decision: topbar must follow shadcn variables to stay consistent
   as KV/Slide Editor styling is propagated across the app.
   ============================================================ */

.topbar-puzzle-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.user-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10000;
    height: 41px; /* keep in sync with base.html body padding-top */
    background-color: var(--color-black);
    color: hsl(var(--foreground));
    border-bottom: none;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: 0 2px 12px hsl(var(--background) / 0.5);
    box-sizing: border-box;
}

.user-top-bar .nav-buttons {
    display: flex;
    align-items: center;
    align-self: flex-start;
    height: 36px;
    gap: 0;
}

.user-top-bar .nav-btn {
    position: relative;
    background: none;
    color: var(--color-white-pure);
    border: none;
    height: 36px;
    padding: 0;
    margin-left: 0;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.15s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
    outline: none;
}

.user-top-bar .nav-btn + .nav-btn {
    margin-left: -5px;
}

.user-top-bar .nav-btn svg {
    display: block;
    width: 120px;
    height: 36px;
    fill: none;
    stroke: none;
    stroke-width: 0;
    transition: fill 0.2s ease;
}

.user-top-bar .nav-btn .label {
    position: absolute;
    top: calc(50% + 1px);
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    padding: 0 8px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--color-white-pure) 70%, transparent);
    pointer-events: none;
    transition: color 0.1s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.user-top-bar .nav-btn:not(.active):not(.disabled):hover svg {
    fill: color-mix(in srgb, var(--color-white-pure) 15%, transparent);
}

.user-top-bar .nav-btn:not(.active):not(.disabled):hover .label {
    color: var(--color-white-pure);
}

.user-top-bar .nav-btn.active {
    color: var(--color-black);
}

.user-top-bar .nav-btn.active svg {
    fill: var(--color-success);
}

.user-top-bar .nav-btn.active .label {
    color: var(--color-black);
    font-weight: 700;
}

.user-top-bar .nav-btn.disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.user-top-bar .nav-btn.disabled svg {
    fill: color-mix(in srgb, var(--color-white-pure) 5%, transparent);
}

.user-top-bar .nav-btn.disabled .label {
    color: color-mix(in srgb, var(--color-white-pure) 30%, transparent);
}

.user-top-bar .session-display {
    margin-left: 15px;
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
    height: 36px;
    transform: translateY(1px);
}

.user-top-bar .user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 36px;
    transform: translateY(1px);
}

.user-top-bar .logout-btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    padding: 0 12px;
    border-radius: calc(var(--radius) - 2px);
    text-decoration: none;
    font-size: 0.875rem;
    transition: filter 0.15s ease;
}

.user-top-bar .logout-btn:hover {
    filter: brightness(0.92);
}

/* User nav dropdown (context menu on click of user email in topbar) */
.user-nav-dropdown {
    z-index: 10001;
}
.user-nav-open .user-nav-dropdown {
    opacity: 1;
    visibility: visible;
}
.user-nav-dropdown .logout-btn {
    height: auto;
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 0;
}

.user-top-bar .user-nav-trigger {
    min-height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.9rem;
    line-height: 36px;
}

.user-top-bar .kv-export-spinner {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--color-white-pure) 16%, transparent);
    border-top-color: currentColor;
    animation: topbar-kv-spin 0.9s linear infinite;
    flex: 0 0 auto;
}

@keyframes topbar-kv-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Layout modes in base.html (`data-layout`) */
body[data-layout="pending"] {
    padding-top: 0 !important;
}

/* Flipchart view (/manager/) side legs – absolute, outside container. Vars at 70% scale; margin/width/cap from vars. */
body[data-layout="flipchart"] {
    overflow-x: hidden;
}
/* Shell is capped at viewport height (min-height: 0 on the flex chain) so the footer stays at the viewport bottom while the React editor scrolls/overflows inside main. Visuals (card bg, radius, shadow) belong to #root in editor/index.html, not to the shell. */
body[data-layout="flipchart"] > .site-shell {
    position: relative;
    overflow: visible;
    --flipchart-border: 32px;
    --flipchart-leg-scale: 0.7;
    --flipchart-leg-width: calc(222px * var(--flipchart-leg-scale));
    --flipchart-leg-cap-height: calc(250px * var(--flipchart-leg-scale));
    --flipchart-leg-cap-bg-height: calc(787px * var(--flipchart-leg-scale));
    --flipchart-leg-repeat-bg-height: calc(537px * var(--flipchart-leg-scale));
    margin: 1.25rem auto;
    max-width: 80rem;
    min-height: 0;
}
body[data-layout="flipchart"] > .site-shell > main {
    min-height: 0;
}
/* Wrapper so border pieces share one containing block and stay inside flipchart. */
.flipchart-border-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
/* Graphic border: corners + edges (single variable; edge height matches corner). */
.flipchart-corner-tl,
.flipchart-corner-tr,
.flipchart-corner-br,
.flipchart-corner-bl {
    position: absolute;
    width: var(--flipchart-border);
    height: var(--flipchart-border);
    pointer-events: none;
    z-index: 1;
    background: url("/static/manager/flipchart_corner.png") no-repeat;
    background-size: 100% 100%;
}
.flipchart-corner-tl { top: 0; left: 0; transform: rotate(-90deg); }
.flipchart-corner-tr { top: 0; right: 0; transform: rotate(0deg); }
.flipchart-corner-br { bottom: 0; right: 0; transform: rotate(90deg); }
.flipchart-corner-bl { bottom: 0; left: 0; transform: rotate(180deg); }
.flipchart-edge-top,
.flipchart-edge-right,
.flipchart-edge-bottom,
.flipchart-edge-left {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    background: url("/static/manager/flipchart_edge_repeat.png");
    background-size: auto var(--flipchart-border);
}
.flipchart-edge-top { top: 0; left: var(--flipchart-border); right: var(--flipchart-border); height: var(--flipchart-border); background-repeat: repeat-x; }
.flipchart-edge-bottom { bottom: 0; left: var(--flipchart-border); right: var(--flipchart-border); height: var(--flipchart-border); background-repeat: repeat-x; transform: rotate(180deg); }
/* Right/left: vertical strip; use pre-rotated edge images so repeat-y fills full height */
.flipchart-edge-right,
.flipchart-edge-left {
    top: var(--flipchart-border);
    bottom: var(--flipchart-border);
    width: var(--flipchart-border);
    background-repeat: repeat-y;
    background-size: var(--flipchart-border) auto;
}
.flipchart-edge-right { right: 0; background-image: url("/static/manager/flipchart_edge_right.png"); }
.flipchart-edge-left { left: 0; background-image: url("/static/manager/flipchart_edge_left.png"); }
.flipchart-leg-left,
.flipchart-leg-right {
    position: absolute;
    top: var(--flipchart-leg-cap-height);
    bottom: 0;
    width: var(--flipchart-leg-width);
    pointer-events: none;
    z-index: 0;
}
.flipchart-leg-left { left: calc(var(--flipchart-leg-width) * -1); }
.flipchart-leg-right { right: calc(var(--flipchart-leg-width) * -1); transform: scaleX(-1); }
/* Cap: first cap-height of leg only */
.flipchart-leg-left::before,
.flipchart-leg-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--flipchart-leg-width);
    height: var(--flipchart-leg-cap-height);
    background: url("/static/manager/flipchart_leg.png") 0 0 / auto var(--flipchart-leg-cap-bg-height) no-repeat;
}
/* Repeat: from cap-height to bottom only, so no tiles overlap cap */
.flipchart-leg-left::after,
.flipchart-leg-right::after {
    content: "";
    position: absolute;
    top: var(--flipchart-leg-cap-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: url("/static/manager/flipchart_leg_repeat.png") 0 0 / auto var(--flipchart-leg-repeat-bg-height) repeat-y;
}

/* NOTE(design): Below Full HD, scale full-chrome pages so layout matches 1920-wide design. Slide editor and export frame iframes omit this (no custom.css there) to avoid double zoom when embedded. */
@media (max-width: 1919px) {
    html {
        zoom: 0.85;
    }
}
@media print {
    html {
        zoom: 1;
    }
}