/* Levering — designforfininger oven på Tailwind CDN.
   Holdt minimalt; Apple/Pixieset-ro: bløde overgange, diskret krom. */

:root {
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { -webkit-tap-highlight-color: transparent; }
[x-cloak] { display: none !important; }

body { text-rendering: optimizeLegibility; }

/* Blød standardovergang på interaktive elementer */
a, button, input, select, textarea, .transitionable {
    transition: color .18s var(--ease), background-color .18s var(--ease),
                border-color .18s var(--ease), box-shadow .18s var(--ease),
                transform .18s var(--ease), opacity .18s var(--ease);
}

/* Fokus-ring i accentfarve, diskret */
:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 2px;
    border-radius: 8px;
}

/* Inputs — rolige, afrundede */
.field {
    width: 100%;
    background: #fff;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    padding: .6rem .8rem;
    font-size: 15px;
    color: #1d1d1f;
}
.field:focus { border-color: #0071e3; outline: none; box-shadow: 0 0 0 3px rgba(0,113,227,.12); }
.field::placeholder { color: #a1a1a6; }

.label { font-size: 13px; font-weight: 500; color: #6e6e73; margin-bottom: .35rem; display:block; }

/* Knapper */
.btn {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: 14px; font-weight: 500; line-height: 1;
    padding: .6rem 1rem; border-radius: 10px; cursor: pointer;
    border: 1px solid transparent;
}
.btn-primary { background: #0071e3; color: #fff; }
.btn-primary:hover { background: #0077ed; }
.btn-ghost { background: #fff; color: #1d1d1f; border-color: #d2d2d7; }
.btn-ghost:hover { background: #f5f5f7; }
.btn-danger { background: #fff; color: #d70015; border-color: #f0c9cc; }
.btn-danger:hover { background: #fff5f5; }
.btn-sm { padding: .4rem .7rem; font-size: 13px; }

/* Kort */
.card {
    background: #fff; border: 1px solid #e8e8ed; border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
}

/* Status-badges */
.badge {
    display:inline-flex; align-items:center; gap:.3rem;
    font-size: 12px; font-weight: 500; padding: .2rem .55rem; border-radius: 999px;
}
.badge-draft     { background:#f5f5f7; color:#6e6e73; }
.badge-published { background:#e3f6ea; color:#137a3e; }
.badge-archived  { background:#fdf0e3; color:#96590f; }

/* Skeleton-shimmer (til senere thumb-loading) */
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton { position: relative; overflow: hidden; background: #f0f0f2; }
.skeleton::after {
    content:''; position:absolute; inset:0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    animation: shimmer 1.4s infinite;
}

/* Drag-håndtag */
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: .4; }