/**
 * Propertee MVP - Custom CSS
 * Tailwind CSS with custom extensions
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] { display: none !important; }
a[hx-get], a[href]:not([href="#"]):not([href=""]) { cursor: pointer; }
tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); }
.dark tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.02); }

/* ── Design Tokens ── */
:root {
    --font-brand: "Noto Serif", Georgia, serif;
    --font-heading: "Noto Serif", Georgia, serif;
    --font-ui: "Noto Sans", Arial, sans-serif;
    --font-body: "Noto Sans", Arial, sans-serif;
}

/* ── Typography System ── */

.logo,
.wordmark {
    font-family: var(--font-brand);
    font-weight: 700;
    letter-spacing: -0.03em;
}

h1 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.3;
}

h2 {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.35;
}

h3 {
    font-family: var(--font-ui);
    font-weight: 500;
    letter-spacing: normal;
}

h4, h5, h6 {
    font-family: var(--font-ui);
    font-weight: 500;
    letter-spacing: normal;
}

body {
    font-family: var(--font-ui);
    font-weight: 400;
}

button {
    font-family: var(--font-ui);
    font-weight: 500;
}

input, textarea, select {
    font-family: var(--font-ui);
    font-weight: 400;
}

label, nav, table {
    font-family: var(--font-ui);
    font-weight: 400;
}

.eyebrow {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* HTMX Indicator Styles */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Progress Bar */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    overflow: hidden;
}

.progress-bar-inner {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #356f52, #68a583, #356f52);
    background-size: 200% 100%;
    transform: translateX(-100%);
}

.progress-bar-inner.animate {
    animation: progress-animation 1.5s ease-in-out infinite;
}

@keyframes progress-animation {
    0% {
        transform: translateX(-100%);
        background-position: 0% 0%;
    }
    50% {
        transform: translateX(0%);
        background-position: 100% 0%;
    }
    100% {
        transform: translateX(100%);
        background-position: 200% 0%;
    }
}

/* Tree View Connector Lines */
.tree-view {
    position: relative;
}

.tree-view-item {
    position: relative;
    padding-left: 1.5rem;
}

.tree-view-item::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 50%;
    width: 1px;
    background-color: #E5E7EB;
}

.tree-view-item::after {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 50%;
    width: 0.75rem;
    height: 1px;
    background-color: #E5E7EB;
}

.tree-view-item:last-child::before {
    bottom: 50%;
}

.tree-view-parent > .tree-view-item:first-child::before {
    top: 50%;
}

/* HTMX Swap Transitions */
.htmx-swapping {
    opacity: 0;
    transition: opacity 150ms ease-out;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 150ms ease-in;
}

/* View Transition Utilities */
.view-transition-fade {
    view-transition-name: fade;
}

::view-transition-old(fade),
::view-transition-new(fade) {
    animation-duration: 200ms;
}

/* Toast Enter/Leave Animations */
.toast-enter {
    animation: toast-enter 300ms ease-out;
}

.toast-leave {
    animation: toast-leave 300ms ease-in forwards;
}

@keyframes toast-enter {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-leave {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Modal Backdrop Animation */
.modal-backdrop-enter {
    animation: modal-backdrop-enter 200ms ease-out;
}

.modal-backdrop-leave {
    animation: modal-backdrop-leave 200ms ease-in forwards;
}

@keyframes modal-backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-backdrop-leave {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Modal Content Animation */
.modal-content-enter {
    animation: modal-content-enter 200ms ease-out;
}

.modal-content-leave {
    animation: modal-content-leave 200ms ease-in forwards;
}

@keyframes modal-content-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modal-content-leave {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
}

/* Spinner Animation */
.spinner {
    animation: spinner 1s linear infinite;
}

@keyframes spinner {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Focus Ring Utility */
.focus-ring {
    outline: none;
}

.focus-ring:focus {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #356f52;
}

/* Sidebar Collapse Transition */
.sidebar-transition {
    transition: width 200ms ease-in-out;
}

.sidebar-content-transition {
    transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}

/* Table Row Hover */
.table-row-interactive {
    transition: background-color 150ms ease-in-out;
}

.table-row-interactive:hover {
    background-color: #F9FAFB;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Dark Mode Overrides */
.dark .tree-view-item::before,
.dark .tree-view-item::after {
    background-color: #374151;
}

.dark .table-row-interactive:hover {
    background-color: #1F2937;
}

.dark .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4B5563 50%, #374151 75%);
    background-size: 200% 100%;
}