/* ===== Creator.ai — مكونات التطبيق (فوق style.css و dashboard.css) ===== */
body { background: #f8f7f2; }
[dir="ltr"] body { letter-spacing: -0.005em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: .75rem; padding: .55rem .95rem; font-size: .85rem; font-weight: 600; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s, opacity .15s; white-space: nowrap; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-dark { background: #131914; color: #fff; }
.btn-dark:hover:not(:disabled) { background: #232e25; }
.btn-lime { background: #a6dd00; color: #0f1411; }
.btn-lime:hover:not(:disabled) { background: #c6f33f; }
.btn-ghost { border-color: #ece8dc; background: #fff; color: #0f1411; }
.btn-ghost:hover:not(:disabled) { border-color: #131914; }
.btn-danger { background: #fe2c55; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #e0183f; }
.btn-sm { padding: .35rem .65rem; font-size: .78rem; border-radius: .6rem; }
.icon-btn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .7rem; color: #49534a; transition: background .15s, color .15s; }
.icon-btn:hover { background: #f2efe6; color: #0f1411; }
.link { color: #4d6600; font-weight: 600; }
.link:hover { text-decoration: underline; }

/* Toggle switch: style.css مرسومة للـ RTL بس */
[dir="ltr"] .toggle::after { right: auto; left: 3px; }
[dir="ltr"] .toggle:checked::after { transform: translateX(18px); }

/* Fields */
select.field { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2349534a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left .8rem center; padding-inline-end: 2rem; }
[dir="ltr"] select.field { background-position: right .8rem center; }
.field-sm { padding: .45rem .7rem; font-size: .82rem; border-radius: .6rem; }
textarea.field { line-height: 1.7; }
.field:disabled { background: #fbfaf6; color: #49534a; }
.field-hint { font-size: .72rem; color: #49534a; margin-top: .3rem; }
.check { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; cursor: pointer; }
.check input { width: 1rem; height: 1rem; accent-color: #131914; }

/* Toast */
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translate(-50%, 20px); z-index: 200; display: flex; align-items: center; gap: .5rem; max-width: calc(100vw - 2rem);
  background: #131914; color: #fff; border-radius: 1rem; padding: .75rem 1.1rem; font-size: .85rem; box-shadow: 0 18px 40px -12px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: all .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok svg { color: #a6dd00; }
.toast.err { background: #3a0d16; }
.toast.err svg { color: #ff7a93; }
@media (max-width: 767px) { .toast { bottom: 5.5rem; } }

/* Modal */
.modal-wrap { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; padding: 0; }
@media (min-width: 640px) { .modal-wrap { align-items: center; padding: 1.5rem; } }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10, 13, 10, .55); backdrop-filter: blur(2px); animation: fadeIn .2s ease; }
.modal-card { position: relative; width: 100%; max-height: 92vh; display: flex; flex-direction: column; background: #fbfaf6; border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); animation: modalIn .3s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 640px) { .modal-card { border-radius: 1.5rem; } }
.modal-body { overflow-y: auto; flex: 1; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(40px); } }

/* Side panel (drawer) */
.drawer-wrap { position: fixed; inset: 0; z-index: 90; }
.drawer { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(560px, 100vw); background: #fbfaf6; box-shadow: 0 0 60px -10px rgba(0,0,0,.4); display: flex; flex-direction: column; animation: drawerIn .3s cubic-bezier(.2,.8,.2,1); }
@keyframes drawerIn { from { transform: translateX(-100%); } }
[dir="ltr"] .drawer { animation-name: drawerInLtr; }
@keyframes drawerInLtr { from { transform: translateX(100%); } }

/* Tabs */
.tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid #ece8dc; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; padding: .7rem .9rem; font-size: .88rem; color: #49534a; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }
.tab:hover { color: #0f1411; }
.tab.active { color: #0f1411; font-weight: 600; }
.tab.active::after { content: ''; position: absolute; inset-inline: .5rem; bottom: -1px; height: 2px; border-radius: 2px; background: #131914; }
.tab .count { font-family: "Geist Mono", monospace; font-size: .7rem; background: #f2efe6; border-radius: 999px; padding: 0 .4rem; }
.seg-group { display: inline-flex; background: #f2efe6; border-radius: .75rem; padding: .2rem; gap: .15rem; }
.seg-group button { padding: .35rem .75rem; border-radius: .6rem; font-size: .8rem; color: #49534a; }
.seg-group button.active { background: #fff; color: #0f1411; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Dropdown menu */
.menu { position: absolute; z-index: 60; min-width: 220px; background: #fff; border: 1px solid #ece8dc; border-radius: 1rem; box-shadow: 0 20px 40px -12px rgba(0,0,0,.25); padding: .35rem; }
.menu button, .menu a { display: flex; width: 100%; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: .65rem; font-size: .85rem; text-align: start; color: #0f1411; }
.menu button:hover, .menu a:hover { background: #f2efe6; }
.menu .sep { height: 1px; background: #ece8dc; margin: .3rem .2rem; }
.menu .menu-label { padding: .4rem .7rem .2rem; font-size: .7rem; font-weight: 600; color: #49534a; text-transform: uppercase; letter-spacing: .04em; }

/* Sidebar */
.nav-group { margin-top: 1.1rem; }
.nav-group-label { padding: 0 .75rem .35rem; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.nav-item .soon { margin-inline-start: auto; font-size: .6rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 0 .4rem; color: rgba(255,255,255,.45); }
.ws-switch { display: flex; width: 100%; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: .9rem; background: rgba(255,255,255,.05); text-align: start; transition: background .15s; }
.ws-switch:hover { background: rgba(255,255,255,.1); }
#mobile-nav.open { transform: translateX(0); }

/* Cards / misc */
.tile { background: #fff; border: 1px solid #ece8dc; border-radius: 1.25rem; }
.section-title { font-size: 1.05rem; font-weight: 700; }
.muted { color: #49534a; }
.badge-lock { display: inline-flex; align-items: center; gap: .25rem; font-size: .65rem; font-weight: 600; border-radius: 999px; padding: .1rem .45rem; background: #fff4d6; color: #7a5a00; }
.dl { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: .55rem 1rem; font-size: .88rem; }
.dl dt { color: #49534a; }
.dl dd { min-width: 0; overflow-wrap: anywhere; }
.code { font-family: "Geist Mono", monospace; font-size: .78rem; background: #f2efe6; border-radius: .5rem; padding: .15rem .45rem; direction: ltr; unicode-bidi: isolate; }
.codeblock { font-family: "Geist Mono", monospace; font-size: .75rem; line-height: 1.6; background: #0f1411; color: #e8f5c8; border-radius: 1rem; padding: 1rem; overflow-x: auto; direction: ltr; text-align: left; white-space: pre; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.creator-row { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.creator-row .meta { min-width: 0; }
.creator-row .meta b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creator-row .meta > span { display: block; font-size: .75rem; color: #49534a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chk-card { position: relative; }
.chk-card input { position: absolute; opacity: 0; pointer-events: none; }
.chk-card span { display: flex; align-items: center; gap: .5rem; border: 1px solid #ece8dc; background: #fff; border-radius: .9rem; padding: .65rem .8rem; font-size: .85rem; cursor: pointer; transition: all .15s; }
.chk-card input:checked + span { border-color: #131914; background: #131914; color: #fff; }
.chk-card input:focus-visible + span { outline: 2px solid #a6dd00; outline-offset: 2px; }
.stepper-dot { width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; font-family: "Geist Mono", monospace; font-size: .72rem; border: 1px solid #c8c2b0; color: #49534a; }
.stepper-dot.on { background: #131914; border-color: #131914; color: #a6dd00; }
.lock-overlay { position: relative; }
.lock-overlay > .lock-msg { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(251,250,246,.75); backdrop-filter: blur(2px); border-radius: inherit; z-index: 2; }
.impersonate-bar { background: repeating-linear-gradient(45deg, #fe2c55 0 12px, #e0183f 12px 24px); color: #fff; }
.demo-bar { background: #131914; color: rgba(255,255,255,.7); }
.kanban-col-head { display: flex; align-items: center; justify-content: space-between; padding: .3rem .4rem .6rem; font-size: .82rem; font-weight: 600; }
.mini-stat { display: flex; flex-direction: column; }
.mini-stat b { font-family: "Geist Mono", monospace; font-size: 1rem; }
.mini-stat span { font-size: .7rem; color: #49534a; }
.sticky-actions { position: sticky; bottom: 0; background: linear-gradient(to top, #f8f7f2 70%, transparent); padding-top: 1rem; }

/* Print / PDF export */
@media print {
  body.printing * { visibility: hidden !important; }
  body.printing .print-target, body.printing .print-target * { visibility: visible !important; }
  body.printing .print-target { position: absolute; inset: 0; width: 100%; padding: 0; }
  body.printing .no-print { display: none !important; }
  body { background: #fff !important; }
  .kpi, .panel, .tile { break-inside: avoid; box-shadow: none !important; }
  @page { margin: 14mm; }
}