/* ---------- shadcn/ui დიზაინ-ტოკენები ---------- */
:root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 142 72% 29%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 142 72% 29%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 142 72% 29%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 142 72% 29%;
    --radius: 0.65rem;
}

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 5.5%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 142 71% 45%;
    --primary-foreground: 144 95% 4%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 142 71% 45%;
}

* { border-color: hsl(var(--border)); }

::selection { background: hsl(var(--foreground)); color: hsl(var(--background)); }

/* ---------- shadcn კომპონენტების კლასები ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    white-space: nowrap; border-radius: calc(var(--radius) - 2px);
    font-size: .875rem; font-weight: 500; height: 2.5rem; padding: 0 1rem;
    transition: all .15s ease; cursor: pointer; border: 1px solid transparent;
    text-decoration: none;
}
.btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.btn:disabled { pointer-events: none; opacity: .5; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { background: hsl(var(--primary) / .9); }
.btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.btn-secondary:hover { background: hsl(var(--secondary) / .8); }
.btn-outline { border-color: hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground)); }
.btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-ghost { color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.btn-destructive:hover { background: hsl(var(--destructive) / .9); }
.btn-sm { height: 2.25rem; padding: 0 .75rem; font-size: .8125rem; }
.btn-lg { height: 2.75rem; padding: 0 2rem; }
.btn-icon { width: 2.5rem; padding: 0; }
.btn-icon.btn-sm { width: 2.25rem; }

.input, .textarea, .select {
    display: flex; width: 100%; border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--input)); background: transparent;
    padding: .5rem .75rem; font-size: .875rem; height: 2.5rem;
    color: hsl(var(--foreground)); transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 5rem; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; padding-right: 2.2rem; }
.dark .select option { background: hsl(var(--background)); }
.input::placeholder, .textarea::placeholder { color: hsl(var(--muted-foreground)); }
.input:focus, .textarea:focus, .select:focus {
    outline: none; border-color: hsl(var(--ring));
    box-shadow: 0 0 0 1px hsl(var(--ring));
}

.label { font-size: .875rem; font-weight: 500; line-height: 1; display: block; margin-bottom: .5rem; }

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

.badge {
    display: inline-flex; align-items: center; gap: .25rem;
    border-radius: 9999px; padding: .125rem .625rem;
    font-size: .75rem; font-weight: 600; line-height: 1.25rem;
    border: 1px solid transparent; white-space: nowrap;
}
.badge-default { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.badge-outline { border-color: hsl(var(--border)); color: hsl(var(--foreground)); }

/* ბიასის ფერები */
.bias-opposition { background: #e11d4818; color: #e11d48; border-color: #e11d4840; }
.bias-neutral { background: #71717a18; color: hsl(var(--muted-foreground)); border-color: #71717a40; }
.bias-government { background: #2563eb18; color: #2563eb; border-color: #2563eb40; }
.dark .bias-opposition { color: #fb7185; }
.dark .bias-government { color: #60a5fa; }

.separator { height: 1px; width: 100%; background: hsl(var(--border)); }

/* ---------- dropdown ---------- */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; right: 0; top: calc(100% + .5rem); z-index: 50;
    min-width: 12rem; border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--border)); background: hsl(var(--popover));
    color: hsl(var(--popover-foreground)); padding: .25rem;
    box-shadow: 0 10px 24px -6px rgb(0 0 0 / .15);
    opacity: 0; transform: translateY(-4px) scale(.98); pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
}
.dropdown.open .dropdown-menu { opacity: 1; transform: none; pointer-events: auto; }
.dropdown-item {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    border-radius: calc(var(--radius) - 4px); padding: .5rem .625rem;
    font-size: .875rem; cursor: pointer; text-decoration: none;
    color: hsl(var(--popover-foreground)); background: none; border: 0; text-align: right;
}
.dropdown-item:hover { background: hsl(var(--accent)); }

/* ---------- dialog (search) ---------- */
.dialog-overlay {
    position: fixed; inset: 0; z-index: 100; background: rgb(0 0 0 / .55);
    backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .15s;
}
.dialog-overlay.open { opacity: 1; pointer-events: auto; }
.dialog-panel {
    position: fixed; left: 50%; top: 10vh; z-index: 101; transform: translateX(-50%) scale(.97);
    width: min(640px, calc(100vw - 2rem));
    border-radius: var(--radius); border: 1px solid hsl(var(--border));
    background: hsl(var(--popover)); box-shadow: 0 24px 60px -12px rgb(0 0 0 / .35);
    opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.dialog-panel.open { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }

/* ---------- tabs ---------- */
.tabs-list {
    display: inline-flex; align-items: center; gap: .25rem;
    border-radius: calc(var(--radius) - 2px); background: hsl(var(--muted));
    padding: .25rem; color: hsl(var(--muted-foreground));
}
.tab-trigger {
    display: inline-flex; align-items: center; gap: .4rem;
    border-radius: calc(var(--radius) - 4px); padding: .375rem .75rem;
    font-size: .875rem; font-weight: 500; cursor: pointer; border: 0; background: none;
    color: hsl(var(--muted-foreground)); transition: all .15s;
}
.tab-trigger[aria-selected="true"] {
    background: hsl(var(--background)); color: hsl(var(--foreground));
    box-shadow: 0 1px 3px rgb(0 0 0 / .1);
}
.tab-panel[hidden] { display: none; }

/* ---------- ბიასის ზოლი ---------- */
.bias-bar { display: flex; height: .5rem; border-radius: 9999px; overflow: hidden; background: hsl(var(--muted)); }
.bias-bar > span { transition: width .4s ease; }

/* ---------- article prose ---------- */
.prose-ka { font-size: 1.0625rem; line-height: 1.85; }
.prose-ka p { margin-bottom: 1.25rem; }
.prose-ka h2 { font-size: 1.375rem; font-weight: 700; margin: 2rem 0 .75rem; }
.prose-ka h3 { font-size: 1.125rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.prose-ka blockquote {
    border-right: 3px solid hsl(var(--border)); padding: .25rem 1rem;
    color: hsl(var(--muted-foreground)); font-style: italic; margin: 1.5rem 0;
}

/* ---------- flash ---------- */
.flash { animation: flash-in .25s ease; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- გრადიენტული placeholder სურათებისთვის ---------- */
.img-fallback { background: linear-gradient(135deg, hsl(var(--muted)), hsl(var(--accent)) 60%, hsl(var(--muted))); }

/* ---------- skeleton ---------- */
.skeleton { border-radius: calc(var(--radius) - 4px); background: hsl(var(--muted)); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* line clamp helpers (Tailwind CDN-ს აქვს, სარეზერვოდ) */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- დინამიური სლაიდერი და ანიმაციები ---------- */

/* სლაიდერის მიკრო-ანიმაციები */
[data-slide-content] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-slide-content].active {
    opacity: 1;
    transform: translateY(0);
}

[data-slide-image] {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-slide-image].active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* გვერდის ჩატვირთვის / სქროლის ანიმაცია */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* სლაიდერის პროგრესის ზოლის ანიმაცია */
[data-hero-progress] {
    transition: width 0.3s ease;
}
.group.active [data-hero-progress] {
    animation: hero-progress-fill 6s linear forwards;
}

@keyframes hero-progress-fill {
    from { width: 0%; }
    to { width: 100%; }
}

/* ლოგოს ტალღის ანიმაცია */
.logo-wave {
    stroke-dasharray: 40;
    stroke-dashoffset: 0;
    animation: logo-wave-idle 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Hover-ზე უწყვეტი მოძრაობა */
a:hover .logo-wave {
    animation: logo-wave-active 1s linear infinite !important;
}

@keyframes logo-wave-active {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -80;
    }
}

@keyframes logo-wave-idle {
    0%, 82%, 100% {
        stroke-dashoffset: 0;
    }
    90% {
        stroke-dashoffset: -40;
    }
    98% {
        stroke-dashoffset: -80;
    }
}

/* Flatpickr Custom Premium Green Theme Overrides */
.flatpickr-calendar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    font-family: inherit !important;
}
.flatpickr-months {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
}
.flatpickr-month {
    color: hsl(var(--foreground)) !important;
    fill: hsl(var(--foreground)) !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.flatpickr-current-month {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: hsl(var(--foreground)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    position: static !important;
    width: auto !important;
    padding: 0 !important;
}
/* Style Month dropdown to look like Shadcn select */
.flatpickr-monthDropdown-months {
    background: hsl(var(--background)) !important;
    border: 1px solid hsl(var(--border) / 0.8) !important;
    color: hsl(var(--foreground)) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.flatpickr-monthDropdown-months:hover {
    background: hsl(var(--accent)) !important;
    color: hsl(var(--accent-foreground)) !important;
    border-color: hsl(var(--border)) !important;
}
/* Style Year input to look like Shadcn input */
.flatpickr-current-month input.cur-year {
    background: hsl(var(--background)) !important;
    border: 1px solid hsl(var(--border) / 0.8) !important;
    color: hsl(var(--foreground)) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    width: 62px !important;
    height: auto !important;
    text-align: center !important;
    margin: 0 !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}
.flatpickr-current-month input.cur-year:hover {
    background: hsl(var(--accent)) !important;
    color: hsl(var(--accent-foreground)) !important;
    border-color: hsl(var(--border)) !important;
}
.flatpickr-current-month input.cur-year:focus {
    border-color: hsl(var(--ring)) !important;
    background: hsl(var(--background)) !important;
}
/* Hide Year spinners completely for Shadcn clean look */
.flatpickr-current-month .numInputWrapper span {
    display: none !important;
}
/* Style Prev/Next Chevrons like Shadcn buttons */
.flatpickr-months .flatpickr-prev-month, 
.flatpickr-months .flatpickr-next-month {
    color: hsl(var(--foreground)) !important;
    fill: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border) / 0.8) !important;
    background: hsl(var(--background)) !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: absolute !important;
    top: 4px !important;
    padding: 0 !important;
    z-index: 10 !important;
}
.flatpickr-months .flatpickr-prev-month {
    left: 4px !important;
}
.flatpickr-months .flatpickr-next-month {
    right: 4px !important;
}
.flatpickr-months .flatpickr-prev-month:hover, 
.flatpickr-months .flatpickr-next-month:hover {
    background-color: hsl(var(--accent)) !important;
    color: hsl(var(--accent-foreground)) !important;
    border-color: hsl(var(--border)) !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
    fill: none !important;
}
.flatpickr-weekdays {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
}
span.flatpickr-weekday {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: hsl(var(--muted-foreground)) !important;
    width: 14.28% !important;
    max-width: none !important;
    text-align: center !important;
}
.flatpickr-days {
    width: 100% !important;
}
.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}
.flatpickr-day {
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: hsl(var(--foreground)) !important;
    width: 14.28% !important;
    max-width: none !important;
    height: 32px !important;
    line-height: 32px !important;
    margin: 2px 0 !important;
    transition: all 0.2s ease;
}
.flatpickr-day:hover, 
.flatpickr-day:focus {
    background: hsl(var(--primary) / 0.1) !important;
    border-color: transparent !important;
    color: hsl(var(--primary)) !important;
}
.flatpickr-day.today {
    border-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary)) !important;
    font-weight: 700 !important;
}
.flatpickr-day.today:hover {
    background: hsl(var(--primary) / 0.15) !important;
    color: hsl(var(--primary)) !important;
}
.flatpickr-day.selected, 
.flatpickr-day.selected:hover, 
.flatpickr-day.selected:focus {
    background: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px hsl(var(--primary) / 0.25);
}
.flatpickr-day.flatpickr-disabled, 
.flatpickr-day.flatpickr-disabled:hover {
    color: hsl(var(--muted-foreground) / 0.4) !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* EasyMDE Rich Text Editor Custom Styling */
.EasyMDEContainer {
    width: 100% !important;
}
.editor-toolbar {
    border-color: hsl(var(--border) / 0.8) !important;
    border-top-left-radius: 0.75rem !important;
    border-top-right-radius: 0.75rem !important;
    background: hsl(var(--muted) / 0.3) !important;
    padding: 6px 10px !important;
    opacity: 1 !important;
}
.editor-toolbar button {
    color: hsl(var(--foreground)) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 2px !important;
}
.editor-toolbar button:hover {
    background: hsl(var(--accent)) !important;
    color: hsl(var(--accent-foreground)) !important;
    border-color: hsl(var(--border)) !important;
}
.editor-toolbar button.active {
    background: hsl(var(--primary) / 0.15) !important;
    color: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary) / 0.3) !important;
}
.editor-toolbar i.separator {
    border-left: 1px solid hsl(var(--border) / 0.8) !important;
    margin: 0 6px !important;
}
.CodeMirror {
    border-color: hsl(var(--border) / 0.8) !important;
    border-bottom-left-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
    background: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 14px !important;
    padding: 10px !important;
    min-height: 350px !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
}
.CodeMirror-focused {
    border-color: hsl(var(--primary) / 0.5) !important;
}
.editor-statusbar {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 11px !important;
    padding: 8px 4px 0 4px !important;
}
.editor-preview-active-side {
    background: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--border) / 0.8) !important;
}
.editor-preview {
    background: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
}
.editor-preview h1, .editor-preview h2, .editor-preview h3 {
    color: hsl(var(--foreground)) !important;
    font-weight: 800 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
}
.editor-preview p {
    margin-bottom: 1rem !important;
    line-height: 1.6 !important;
}
.editor-preview ul {
    list-style-type: disc !important;
    padding-left: 1.25rem !important;
    margin-bottom: 1rem !important;
}
.editor-preview ol {
    list-style-type: decimal !important;
    padding-left: 1.25rem !important;
    margin-bottom: 1rem !important;
}
.editor-preview a {
    color: hsl(var(--primary)) !important;
    text-decoration: underline !important;
}