/* KanBoard — Dark Theme CSS */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root{--bg0:#0f1117;--bg1:#181a22;--bg2:#1e2029;--bgH:#262836;--bgI:#15171e;--t1:#e8e9ed;--t2:#9b9dad;--t3:#5e6070;--bd:#2a2d3a;--bdL:#222430;--ac:#e67e22;--acH:#d35400;--acBg:rgba(230,126,34,.1);--acBd:rgba(230,126,34,.25);--dg:#ef4444;--dgBg:rgba(239,68,68,.08);--s1:0 1px 4px rgba(0,0,0,.3);--sL:0 16px 48px rgba(0,0,0,.5);--r1:6px;--r2:10px;--r3:14px;--f:'DM Sans',-apple-system,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--f);background:var(--bg0);color:var(--t1);-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--t3)}

/* App layout */
.app{display:flex;flex-direction:row;height:100vh;overflow:hidden}

/* Sidebar */
.sb{width:240px;flex-shrink:0;background:var(--bg1);border-right:1px solid var(--bd);display:flex;flex-direction:column;height:100%;overflow:hidden;transition:width .2s}
.sb.sb-collapsed{width:48px}
.sb-top{padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bd);height:52px;flex-shrink:0}
.sb-logo{display:flex;align-items:center;gap:10px}
.sb-logo-icon{width:30px;height:30px;border-radius:var(--r1);background:linear-gradient(135deg,var(--ac),#f39c12);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0;box-shadow:0 2px 8px rgba(230,126,34,.3)}
.sb-body{flex:1;overflow-y:auto;padding:8px}
.sb-section{margin-bottom:4px}
.sb-section-head{display:flex;align-items:center;gap:4px;padding:4px 6px;cursor:pointer;border-radius:var(--r1);font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;transition:all .1s;user-select:none}
.sb-section-head:hover{background:var(--bgH);color:var(--t2)}
.sb-item{display:flex;align-items:center;gap:7px;padding:6px 8px 6px 22px;border-radius:var(--r1);cursor:pointer;font-size:12px;color:var(--t2);transition:all .1s;user-select:none;border:none;background:none;width:100%;text-align:left;font-family:var(--f)}
.sb-item:hover{background:var(--bgH);color:var(--t1)}
.sb-item.sb-active{background:var(--acBg);color:var(--ac);font-weight:600}
.sb-item-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:4px}
.sb-add{display:flex;align-items:center;gap:6px;padding:5px 8px 5px 22px;font-size:11px;color:var(--t3);cursor:pointer;border:none;background:none;font-family:var(--f);transition:all .1s;border-radius:var(--r1);width:100%;text-align:left}
.sb-add:hover{color:var(--ac);background:var(--acBg)}
.ws-icon-box{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;cursor:pointer;position:relative;transition:all .12s}
.ws-icon-box:hover{opacity:.85;transform:scale(1.05)}
.sb-drag-over{background:var(--acBg);outline:1px dashed var(--ac);outline-offset:-1px;border-radius:var(--r1)}

/* Header */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:var(--bg1);border-bottom:1px solid var(--bd);z-index:10;height:52px;flex-shrink:0}
.hdr-r{display:flex;align-items:center;gap:6px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r2);color:var(--t2);font-size:11px;font-weight:500;cursor:pointer;transition:all .12s;font-family:var(--f);white-space:nowrap}
.btn:hover{background:var(--bgH);border-color:#3a3d4a;color:var(--t1)}
.btn-ac{background:var(--acBg)!important;color:var(--ac)!important;border-color:var(--acBd)!important}
.btn-dg{background:var(--dgBg)!important;color:var(--dg)!important;border-color:rgba(239,68,68,.25)!important}
.btn-sm{padding:3px 8px;font-size:10px}
.btn-i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--r1);border:none;background:transparent;cursor:pointer;color:var(--t3);transition:all .12s}
.btn-i:hover{background:var(--bgH);color:var(--t1)}

/* Search bar */
.search-bar{display:flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r2);padding:5px 12px;transition:border-color .15s;min-width:260px}
.search-bar:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px rgba(230,126,34,.08)}
.search-bar input{border:none;background:transparent;outline:none;font-size:12px;font-family:var(--f);color:var(--t1);flex:1;min-width:0}
.search-bar input::placeholder{color:var(--t3)}

/* Kanban board */
.board{display:flex;gap:14px;padding:16px 20px;flex:1;overflow-x:auto;overflow-y:hidden;align-items:flex-start}
.col{width:300px;flex-shrink:0;background:var(--bg1);border-radius:var(--r3);border:1px solid var(--bd);display:flex;flex-direction:column;max-height:calc(100vh - 120px)}
.col-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px}
.col-hl{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.col-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.col-nm{font-size:12px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-cnt{font-size:10px;color:var(--t3);font-weight:600;background:var(--bg2);padding:1px 6px;border-radius:8px;border:1px solid var(--bd);flex-shrink:0}
.col-ni{background:var(--bg2);border:1px solid var(--ac);border-radius:var(--r1);padding:3px 8px;font-size:12px;font-weight:600;color:var(--t1);outline:none;font-family:var(--f);width:100%;letter-spacing:.2px;text-transform:uppercase}
.col-b{flex:1;overflow-y:auto;padding:8px 8px 0;display:flex;flex-direction:column;gap:0;min-height:50px}
.col-add{display:flex;align-items:center;gap:5px;padding:7px 10px;margin:0px 8px 8px;background:transparent;border:1px dashed var(--bd);border-radius:var(--r2);cursor:pointer;color:var(--t3);font-size:12px;font-weight:500;transition:all .15s;font-family:var(--f)}
.col-add:hover{background:var(--bg2);border-color:var(--t3);color:var(--t2)}
.col-empty-drop{padding:16px;border:2px dashed var(--ac);border-radius:var(--r2);display:flex;align-items:center;justify-content:center;color:var(--ac);font-size:11px;font-weight:500;margin:4px;background:var(--acBg)}
.add-col{min-width:52px;height:52px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--bg1);border:1px dashed var(--bd);border-radius:var(--r3);cursor:pointer;color:var(--t3);transition:all .15s}
.add-col:hover{border-color:var(--ac);color:var(--ac);background:var(--acBg)}
.drop-ind{padding:6px;border:2px dashed var(--ac);border-radius:var(--r2);display:flex;align-items:center;justify-content:center;color:var(--ac);font-size:10px;font-weight:500;margin-bottom:6px;background:var(--acBg)}

/* Cards */
.crd{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r2);padding:10px 12px;transition:all .15s;position:relative}
.crd:hover{border-color:#333649;box-shadow:var(--s1)}
.crd.dragging{opacity:.2;filter:blur(2px)}
.crd-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2px}
.crd-title{font-size:13px;font-weight:600;flex:1;min-width:0;word-break:break-word}
.crd-acts{display:flex;gap:1px;opacity:0;transition:opacity .15s;flex-shrink:0;margin-left:4px}
.crd:hover .crd-acts{opacity:1}
.crd-fields{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.crd-frow{display:flex;gap:8px}
.crd-f{flex:1;min-width:0}
.crd-fl{font-size:9px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:1px}
.crd-fv{font-size:12px;color:var(--t2);overflow:hidden}
.crd.crd-min{padding:6px 10px}
.crd.crd-min .crd-fields{display:none}
.crd.crd-min .crd-title{font-size:12px}
.crd.crd-min .crd-top{align-items:center}

/* Column collapsed */
.col.col-min{width:42px;min-width:42px;cursor:pointer}
.col.col-min .col-h{flex-direction:column;padding:10px 6px;gap:6px;align-items:center}
.col.col-min .col-nm{writing-mode:vertical-rl;text-orientation:mixed;font-size:11px;white-space:nowrap}
.col.col-min .col-b,.col.col-min .col-add,.col.col-min .col-hl>*:not(.col-dot):not(.col-nm),.col.col-min .col-h>div:last-child{display:none}

/* Badges */
.ebadge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:600;line-height:1.5;white-space:nowrap}

/* URL preview */
.url-pv{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--bgH);border:1px solid var(--bd);border-radius:var(--r1);text-decoration:none;transition:border-color .15s;overflow:hidden;font-size:11px}
.url-pv:hover{border-color:var(--t3)}
.url-pv-icon{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.url-pv-icon img{width:14px;height:14px;border-radius:2px}

/* Modal overlay */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px);animation:fi .12s}
.md{background:var(--bg1);border:1px solid var(--bd);border-radius:var(--r3);box-shadow:var(--sL);display:flex;flex-direction:column;max-height:90vh;overflow:hidden;animation:su .15s}
.md-h{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--bd)}
.md-t{font-size:15px;font-weight:700}
.md-b{padding:16px 20px;overflow-y:auto;flex:1}
.md-f{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--bd)}

/* Confirm dialog */
.cf-o{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:200}
.cf-b{background:var(--bg1);border:1px solid var(--bd);border-radius:var(--r3);padding:24px;max-width:400px;box-shadow:var(--sL)}
.cf-t{font-size:15px;font-weight:700;margin-bottom:8px}
.cf-tx{font-size:12px;color:var(--t2);margin-bottom:16px;line-height:1.5}
.cf-a{display:flex;gap:8px;justify-content:flex-end}

/* Data grid / Table */
.dg-wrap{width:100%;overflow:auto}
.dg{width:100%;border-collapse:collapse;font-size:12px}
.dg th{position:sticky;top:0;background:var(--bg1);padding:6px 10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);border-bottom:1px solid var(--bd);text-align:left;white-space:nowrap;z-index:2;transition:color .1s}
.dg th:hover{color:var(--t1)}
.dg td{padding:5px 10px;border-bottom:1px solid var(--bdL);font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg tr:hover td{background:var(--bgH)}
.dg input,.dg select{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r1);padding:2px 6px;color:var(--t1);font-size:11px;font-family:var(--f)}

/* Field editor rows */
.dbr{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--bg2);border-radius:var(--r1);margin-bottom:8px;border:1px solid var(--bd);transition:all .15s}
.dbr:hover{border-color:#3a3d4a}
.dh{cursor:grab;color:var(--t3);display:flex;align-items:center}
.dbn{flex:1;min-width:0;background:transparent;border:none;color:var(--t1);font-size:12px;font-weight:500;outline:none;font-family:var(--f)}
.dbt{width:130px;background:var(--bg1);border:1px solid var(--bd);border-radius:var(--r1);padding:2px 6px;color:var(--t2);font-size:11px;font-family:var(--f);cursor:pointer}
.dbd{width:70px;background:var(--bg1);border:1px solid var(--bd);border-radius:var(--r1);padding:2px 4px;color:var(--t2);font-size:10px;font-family:var(--f);cursor:pointer}
.db-enum{padding:0px 0 10px 30px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.db-et{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:6px;font-size:10px;cursor:pointer;position:relative}
.db-etr{display:none;margin-left:2px;cursor:pointer}.db-et:hover .db-etr{display:flex}
.db-eai{border:none;background:transparent;outline:none;color:var(--t1);font-size:11px;font-family:var(--f);width:70px}

/* Visibility toggle */
.vis-t{flex-shrink:0;cursor:pointer;display:flex;align-items:center;padding:2px;transition:all .12s}
.vis-t.vis-on{color:var(--ac);opacity:.85}.vis-t.vis-on:hover{opacity:1}
.vis-t.vis-off{color:var(--dg);opacity:.9}.vis-t.vis-off:hover{opacity:1}

/* Form inputs */
.fi{width:100%;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r1);padding:6px 10px;color:var(--t1);font-size:12px;font-family:var(--f);outline:none;transition:border-color .12s}
.fi:focus{border-color:var(--ac)}

/* Color picker */
.cs{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .1s}
.cs:hover{transform:scale(1.15)}.cs.act{border-color:#fff;box-shadow:0 0 0 2px var(--ac)}

/* Sort popup */
.sort-popup{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg1);border:1px solid var(--bd);border-radius:var(--r2);box-shadow:var(--sL);padding:4px;z-index:50;min-width:150px}
.sort-opt{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r1);cursor:pointer;font-size:12px;color:var(--t2);transition:all .1s;border:none;background:none;width:100%;font-family:var(--f);text-align:left}
.sort-opt:hover{background:var(--bgH);color:var(--t1)}.sort-opt.sort-active{color:var(--ac);font-weight:600}

/* Display popup */
.disp-popup{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg1);border:1px solid var(--bd);border-radius:var(--r2);box-shadow:var(--sL);padding:10px 14px;z-index:50;min-width:220px}
.disp-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:12px;color:var(--t2)}
.disp-row label{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1}

/* Icon picker */
.ws-icon-picker{position:fixed;background:var(--bg1);border:1px solid var(--bd);border-radius:var(--r2);box-shadow:var(--sL);padding:10px;z-index:200;width:260px}
.ws-ip-tabs{display:flex;gap:2px;margin-bottom:8px}
.ws-ip-tab{padding:4px 10px;border-radius:var(--r1);font-size:11px;font-weight:500;cursor:pointer;border:none;background:transparent;color:var(--t3);font-family:var(--f)}
.ws-ip-tab:hover{background:var(--bgH);color:var(--t2)}.ws-ip-tab.wt-act{background:var(--acBg);color:var(--ac)}
.ws-ip-grid{display:flex;flex-wrap:wrap;gap:4px;max-height:160px;overflow-y:auto;padding-right:4px}
.ws-ip-item{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r1);cursor:pointer;border:2px solid transparent;transition:all .1s;font-size:16px}
.ws-ip-item:hover{background:var(--bgH);border-color:rgba(255,255,255,.1)}.ws-ip-item.wip-act{border-color:var(--ac);background:var(--acBg)}
.ws-ip-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r1);cursor:pointer;border:2px solid transparent;transition:all .1s;color:var(--t2)}
.ws-ip-icon:hover{background:var(--bgH);border-color:rgba(255,255,255,.1)}.ws-ip-icon.wip-act{border-color:var(--ac);background:var(--acBg)}
.ws-ip-section{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin:8px 0 4px}
.ws-ip-colors{display:flex;flex-wrap:wrap;gap:4px}

/* Filter panel */
.flt-panel{background:var(--bg1);border-bottom:1px solid var(--bd);padding:8px 16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.flt-chip{display:flex;align-items:center;gap:4px;padding:3px 8px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r2);font-size:11px;color:var(--t2)}
.flt-chip select,.flt-chip input{background:transparent;border:none;color:var(--t1);font-size:11px;font-family:var(--f);outline:none}
.flt-chip select{cursor:pointer}.flt-chip input{width:80px}

/* Selection bar */
.sel-bar{background:var(--acBg);border-bottom:1px solid var(--acBd);padding:6px 16px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ac)}

/* Calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--bd);flex:1;overflow:auto}
.cal-hdr{background:var(--bg1);padding:6px;text-align:center;font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase}
.cal-day{background:var(--bg0);padding:4px;min-height:90px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.cal-day.cal-other{opacity:.35}
.cal-day-num{font-size:10px;font-weight:600;color:var(--t3);margin-bottom:2px}
.cal-day.cal-today .cal-day-num{color:var(--ac);background:var(--acBg);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cal-card{padding:2px 5px;border-radius:4px;font-size:10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .1s}
.cal-card:hover{opacity:.8}

/* Layout editor on card */
.lcard{background:var(--bg2);border:2px solid var(--ac);border-radius:var(--r2);padding:10px 12px}
.lcell{background:var(--bgH);border-radius:var(--r1);padding:4px 6px;cursor:grab;transition:all .12s;position:relative}
.lcell:hover{background:var(--bg2)}
.lf-dg{border:2px dashed var(--ac);background:var(--acBg)}
.lf-hd{opacity:.35}
.lg{cursor:grab;color:var(--t3);display:flex}
.lv{cursor:pointer;display:flex;align-items:center}
.lv-on{color:var(--ac)}.lv-off{color:var(--dg)}
.lcard.is-dragging .lcell:not(.lf-dg){border:1px dashed rgba(255,255,255,.1)}

/* Progress bar */
.pbar{height:5px;background:var(--bd);border-radius:3px;overflow:hidden}
.pbar-fill{height:100%;border-radius:3px;transition:width .2s}

/* Animations */
@keyframes fi{from{opacity:0}to{opacity:1}}
@keyframes su{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}