/* Minimal CSS for Task Board */
/* Vazir font */
@font-face{
  font-family:'Vazir';
  src:url('fonts/Vazir.woff2') format('woff2'),
      url('fonts/Vazir.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family:'Vazir';
  src:url('fonts/Vazir-Bold.woff2') format('woff2'),
      url('fonts/Vazir-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root{
  --bg:#f5f7fb; /* light background */
  --panel:#ffffff;
  --muted:#64748b;
  --text:#111827;
  --brand:#2563eb;
  --accent:#06b6d4;
  --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
  --ring: rgba(37,99,235,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(120deg,#f5f7fb,#eef2f7 60%,#f5f7fb);color:var(--text);font:16px/1.5 'Vazir', system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{ text-decoration: none; color: inherit; }
a:hover{ text-decoration: none; }
.board{direction: rtl}
.container{max-width:1200px;margin:0 auto;padding:24px}
.row{display:flex;gap:12px}
.row.between{justify-content:space-between}
.row.center{align-items:center}
.row.gap{gap:10px}

/* Topbar */
.topbar{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.9);backdrop-filter: blur(10px);border-bottom:1px solid rgba(0,0,0,.08)}
.brand{color:var(--text);text-decoration:none;font-weight:700;letter-spacing:.3px}
.nav__link{color:var(--muted);text-decoration:none;padding:14px 10px;display:inline-block}
.nav__link.is-active{color:var(--text);border-bottom:2px solid var(--accent)}

.page-title{margin:18px 0 8px;font-size:28px}
.muted{color:var(--muted)}
.empty{background:rgba(0,0,0,.03);border:1px dashed rgba(0,0,0,.12);border-radius:12px;padding:18px}
.empty.small{padding:12px}
.hide-sm{display:none}
@media(min-width:720px){.hide-sm{display:inline}}

/* Grid Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{position:relative;display:block;background:var(--panel);border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden;color:inherit;text-decoration:none;transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.card__stripe{height:6px;background:var(--brand)}
.card__body{padding:16px}
.card__title{margin:4px 0 8px;font-size:18px}
.card__meta{display:flex;gap:8px;margin-top:8px}
.pill{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.12);padding:4px 8px;border-radius:999px;font-size:12px;color:var(--text)}
.pill--done{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.3)}
.pill--in-progress{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.3)}
.pill--todo{background:rgba(100,116,139,.15);border-color:rgba(100,116,139,.3)}
.cat-pill{--cat:#64748b;display:inline-block;background:color-mix(in oklab, var(--cat) 20%, transparent);border:1px solid color-mix(in oklab, var(--cat) 35%, transparent);color:#000;padding:3px 8px;border-radius:999px;font-size:12px}
.card__cats{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}

/* Board: Miro-like horizontal columns */
.board{display:flex;flex-direction: column;gap:16px;overflow:auto;padding-bottom:8px;margin:4px 0 10px}
.category{flex:auto;display:flex;flex-direction:column;max-height:75vh;background:rgba(255,255,255,.7);backdrop-filter: blur(6px);border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.category__header{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:linear-gradient( to bottom, color-mix(in oklab, var(--cat) 10%, #fff) , #fff);border-left:8px solid var(--cat)}
[dir=rtl] .category__header{border-right:8px solid var(--cat);border-left:none}
.list{list-style:none;margin:0;padding:0}
.list__item{position:relative;border-top:1px solid rgba(0,0,0,.06);display:flex;align-items:center;gap:8px;padding:10px}
.list__btn{flex:1;text-align:left;background:transparent;color:inherit;border:0;padding:12px 14px;display:flex;gap:10px;align-items:center;cursor:pointer}
[dir=rtl] .list__btn{text-align:right}
.list__btn:hover{background:rgba(0,0,0,.04)}
.list__title{font-weight:600}
.status{width:10px;height:10px;border-radius:50%;display:inline-block}
.status--done{background:var(--ok)}
.status--in-progress{background:var(--warn)}
.status--todo{background:#64748b}
.list__item.is-dragging{opacity:.7;outline:2px dashed var(--accent)}

/* Inline status + add task */
.input--status{min-width:120px;max-width:140px}
.btn--sm{padding:6px 10px;border-radius:8px}
.input--sm{min-height:34px;border-radius:8px}
.add-task{padding:10px;border-top:1px dashed rgba(0,0,0,.08);position:sticky;bottom:0;background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.85));backdrop-filter: blur(4px)}

/* Table */
.table{width:100%;display:grid;gap:6px}
.table__row{display:grid;grid-template-columns:2fr 1fr 1fr .8fr 1fr .9fr auto;gap:10px;align-items:center;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:10px 12px}
.table__row--head{background:transparent;border:0;font-weight:700;color:var(--muted)}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Inputs */
.input{background:#fff;border:1px solid rgba(0,0,0,.12);color:var(--text);padding:8px 10px;border-radius:10px;min-height:38px}
.input:focus{outline:2px solid var(--ring);border-color:var(--ring)}
.input[type=color]{padding:0;width:46px;height:38px}
.btn{background:var(--brand);border:1px solid rgba(0,0,0,.05);color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn--ghost{background:transparent;border-color:rgba(0,0,0,.25);color:var(--text)}
.btn--danger{background:transparent;border-color:var(--err);color:var(--err)}
.btn--danger:hover{background:rgba(239,68,68,.08)}

/* Modal */
.modal{position:fixed;inset:0;display:none}
.modal.is-open{display:block; z-index: 9;}
.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal__dialog{position:relative;margin:8vh auto 0;max-width: min-content;background:var(--panel);border:1px solid rgba(0,0,0,.12);border-radius:16px;padding:18px}
.modal__close{position:absolute;right:10px;top:8px;background:transparent;border:0;color:var(--text);font-size:24px;cursor:pointer}
.modal__meta{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.modal__content{color:var(--text)}
.modal__details{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.modal__form{display:grid;gap:10px;margin-top:10px}
.modal__actions{display:flex;gap:10px;justify-content:flex-start;margin-top:8px}

/* Comments */
.modal__comments{margin-top:14px}
.comments{display:flex;flex-direction:column;gap:10px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:10px}
.comment{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:8px;padding:10px}
.comment__meta{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:6px}
.comment__meta strong{color:var(--text)}
.js-comment-form{margin-top:10px}

/* Footer */
.footer{padding-top:12px;padding-bottom:28px;color:var(--muted)}

/* Helpers */
.truncate-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Forms */
label{display:block;font-weight:600;margin:10px 0 6px}
.panel{background:var(--panel);border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:16px}

/* Toasts */
.toast-container{position:fixed;z-index:1000;inset-inline:16px auto;bottom:16px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
[dir=ltr] .toast-container{right:16px;left:auto}
[dir=rtl] .toast-container{left:16px;right:auto}
.toast{pointer-events:auto;min-width:220px;max-width:360px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.12);padding:10px 12px;display:flex;align-items:center;gap:10px}
.toast--ok{border-color: color-mix(in lab, var(--ok) 40%, #fff); background: color-mix(in lab, var(--ok) 12%, #fff)}
.toast--err{border-color: color-mix(in lab, var(--err) 40%, #fff); background: color-mix(in lab, var(--err) 10%, #fff)}
.toast__close{margin-inline-start:auto;background:transparent;border:0;color:inherit;font-size:18px;cursor:pointer;line-height:1}

/* Inline form message */
.form__message{margin-top:6px;font-size:14px}
.form__message--ok{color:var(--ok)}
.form__message--err{color:var(--err)}


button {
    font-family: 'Vazir';
    font-size: 12px;
}
.js-view {
    display: flex
;
    gap: 20px;
}

.modal__dialog {
    min-width: 480px;
}
select, input {
    font-family: 'Vazir';
    font-size: 11px;
}
.break2 {
    font-size: 12px;
    padding: 10px;
    padding-right: 20px;
    margin-top: -20px;
}