/* Small tweaks on top of Tailwind (loaded via CDN). */
[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }

select:disabled, input:disabled, textarea:disabled { opacity: 0.9; }

/* Custom themed dropdown (replaces native <select> in exercises) */
.dd-btn {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; border-radius: .5rem; border: 1px solid #d6d3d1;
    background: #fff; padding: .5rem .75rem; font-size: .875rem; text-align: left;
    transition: border-color .12s, box-shadow .12s;
}
.dd-btn:hover:not(:disabled) { border-color: #5eead4; }
.dd-btn.dd-open { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,.15); }
.dd-btn:disabled { opacity: .8; cursor: default; }
.dd-chev { height: 1rem; width: 1rem; flex-shrink: 0; color: #a8a29e; transition: transform .15s; }
.dd-panel {
    position: absolute; z-index: 30; margin-top: .25rem; width: 100%;
    max-height: 15rem; overflow: auto; border-radius: .625rem;
    border: 1px solid #e7e5e4; background: #fff; padding: .25rem;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.3);
}
.dd-opt {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; border-radius: .375rem; padding: .5rem .75rem;
    font-size: .875rem; text-align: left; cursor: pointer;
}
.dd-opt:hover { background: #f0fdfa; }
.dd-sel { background: #ccfbf1; color: #115e59; font-weight: 600; }

html.dark .dd-btn { background: #292524; border-color: #44403c; color: #e7e5e4; }
html.dark .dd-btn:hover:not(:disabled) { border-color: #0f766e; }
html.dark .dd-panel { background: #292524; border-color: #44403c; }
html.dark .dd-opt:hover { background: #1c1917; }
html.dark .dd-sel { background: #134e4a; color: #99f6e4; }

/* Exercise builder inputs/buttons (management panel) */
.dd-input {
    border-radius: .5rem; border: 1px solid #d6d3d1; background: #fff;
    padding: .4rem .6rem; font-size: .875rem;
}
.dd-input:focus { outline: none; border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,.15); }
.add-btn {
    display: inline-block; border-radius: .5rem; border: 1px dashed #5eead4;
    background: #f0fdfa; color: #0f766e; padding: .4rem .8rem;
    font-size: .8rem; font-weight: 600;
}
.add-btn:hover { background: #ccfbf1; }
.rm-btn { flex-shrink: 0; color: #dc2626; font-weight: 700; padding: 0 .3rem; }
.rm-btn:hover { color: #b91c1c; }
html.dark .dd-input { background: #292524; border-color: #44403c; color: #e7e5e4; }
html.dark .add-btn { background: #134e4a; border-color: #0f766e; color: #99f6e4; }

/* Squared-notebook background ("Katakli daftar").
   Only paints background-image, so the Tailwind bg-stone-50/950 colour stays. */
body {
    background-image:
        linear-gradient(rgba(15, 118, 110, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 118, 110, 0.07) 1px, transparent 1px);
    background-size: 26px 26px;
    background-attachment: fixed;
}
html.dark body {
    background-image:
        linear-gradient(rgba(94, 234, 212, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 234, 212, 0.06) 1px, transparent 1px);
}