/* ==========================================================================
   ArchesTask — shared component styles that must not collide with edits in
   archestask.css. Loaded straight after it by both layouts.
   ========================================================================== */

/* ---- styled select (see public/js/select.js) ----------------------------- */
.atk-sel{position:relative;display:block}
.atk-sel > select.atk-sel-native{
  width:100%;
  color:transparent!important;
  text-shadow:none;
  -webkit-appearance:none;appearance:none;
  background-image:none}
.atk-sel > select.atk-sel-native option{color:#172B4D}
.atk-sel > select.atk-sel-native:focus{outline:none}

.atk-sel-btn{position:absolute;inset:0;display:flex;align-items:center;gap:6px;width:100%;
  padding:0 30px 0 11px;background:transparent;border:0;border-radius:inherit;
  font:inherit;font-size:inherit;line-height:1;color:#172B4D;text-align:left;cursor:pointer}
.atk-sel-btn:disabled{cursor:not-allowed;opacity:.6}
.atk-sel-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atk-sel-label.is-placeholder{color:#8590A2}
.atk-sel-chev{position:absolute;right:9px;top:50%;margin-top:-7px;width:14px;height:14px;
  color:#626F86;pointer-events:none;transition:transform .14s ease}
.atk-sel.is-open .atk-sel-chev{transform:rotate(180deg)}
/* the underlying select still paints the border/background, so focus rings and
   invalid states keep working — we only mirror the focus onto it */
.atk-sel:focus-within > select.atk-sel-native{border-color:#0C66E4;box-shadow:0 0 0 1px #0C66E4}

/* fixed, so a modal card / table / dropdown with overflow:hidden cannot clip it;
   public/js/select.js owns left/top/min-width and refreshes them on scroll */
.atk-sel-pop{position:fixed;left:0;top:0;max-width:min(420px,calc(100vw - 16px));z-index:240;
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid #DCDFE4;border-radius:10px;padding:5px;
  box-shadow:0 8px 16px rgba(9,30,66,.16),0 0 0 1px rgba(9,30,66,.06)}
.atk-sel-search{display:flex;align-items:center;gap:7px;padding:5px 8px 8px;
  border-bottom:1px solid #EBECF0;margin-bottom:4px}
.atk-sel-search svg{width:15px;height:15px;color:#8590A2;flex-shrink:0}
.atk-sel-search input{flex:1;min-width:0;border:0;outline:none;background:none;
  font:inherit;font-size:14px;color:#172B4D}
.atk-sel-search input::placeholder{color:#8590A2}
.atk-sel-list{flex:1;min-height:0;overflow-y:auto}
.atk-sel-group{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#8590A2;padding:8px 9px 4px}
.atk-sel-opt{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;
  background:none;border-radius:6px;font:inherit;font-size:14px;line-height:1.35;color:#172B4D;
  cursor:pointer;text-align:left}
.atk-sel-opt > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atk-sel-opt:hover,.atk-sel-opt.is-active{background:#F1F2F4}
.atk-sel-opt.is-sel{color:#0C66E4;font-weight:500}
.atk-sel-opt.is-sel.is-active{background:#E9F2FF}
.atk-sel-opt:disabled{color:#B3BAC5;cursor:not-allowed}
.atk-sel-tick{width:15px;height:15px;flex-shrink:0;opacity:0;color:#0C66E4}
.atk-sel-opt.is-sel .atk-sel-tick{opacity:1}
.atk-sel-empty{padding:16px 10px;font-size:13.5px;color:#626F86;text-align:center}


/* ---- form validation feedback (see public/js/forms.js) ------------------- */
.has-error,
.has-error > select.atk-sel-native,
.inp.has-error,
textarea.has-error,
input.has-error{border-color:#C9372C!important;box-shadow:0 0 0 1px #C9372C}
.has-error:focus,
.inp.has-error:focus,
textarea.has-error:focus,
input.has-error:focus{border-color:#C9372C!important;box-shadow:0 0 0 2px rgba(201,55,44,.28)}
.field-err{display:flex;align-items:flex-start;gap:5px;margin-top:5px;font-size:12.5px;line-height:1.45;color:#AE2E24}
.field-err svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}

/* ---- uploads (public/js/uploads.js): one row per file, bottom right ---- */
.atk-up{position:fixed;right:16px;bottom:16px;z-index:260;width:min(360px,calc(100vw - 32px));background:#fff;border:1px solid #DCDFE4;
  border-radius:12px;box-shadow:0 8px 24px rgba(9,30,66,.2);padding:10px 12px 12px;font-size:13px;color:#172B4D}
.atk-up-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.atk-up-title{font-weight:700;font-size:13.5px}
.atk-up-x{border:0;background:none;font-size:20px;line-height:1;color:#626F86;cursor:pointer;padding:0 2px}
.atk-up-list{display:flex;flex-direction:column;gap:9px;max-height:50vh;overflow-y:auto}
.atk-up-top{display:flex;gap:8px;justify-content:space-between}
.atk-up-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.atk-up-size{color:#626F86;flex-shrink:0}
.atk-up-bar{height:6px;border-radius:3px;background:#F1F2F4;margin-top:5px;overflow:hidden}
.atk-up-bar i{display:block;height:100%;width:0;background:#0C66E4;border-radius:3px;transition:width .15s ease}
.atk-up-msg{margin-top:3px;font-size:12px;color:#626F86}
.atk-up-row.ok .atk-up-bar i{background:#22A06B}
.atk-up-row.err .atk-up-bar i{background:#C9372C;width:100%!important}
.atk-up-row.err .atk-up-msg{color:#AE2E24;font-weight:500}

/* ---- a video attachment: a still with a play button, played over the page ---- */
.atk-vthumb{position:relative;display:block;width:100%;height:100%;background:#1D2125;cursor:pointer;border:0;padding:0}
.atk-vthumb video{width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}
.atk-vthumb .play{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  background:rgba(9,30,66,.72);display:flex;align-items:center;justify-content:center}
.atk-vthumb .play svg{width:16px;height:16px;margin-left:2px;color:#fff}
.atk-vthumb:hover .play{background:#0C66E4}
.atk-vid{position:fixed;inset:0;z-index:300;background:rgba(9,30,66,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.atk-vid-bar{width:min(1100px,100%);display:flex;align-items:center;gap:12px;color:#fff;margin-bottom:10px;font-size:14px}
.atk-vid-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.atk-vid-dl{color:#fff;text-decoration:underline;opacity:.85}
.atk-vid-x{border:0;background:none;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.atk-vid video{max-width:min(1100px,100%);max-height:calc(100vh - 90px);border-radius:8px;background:#000}
.atk-vid-err{color:#fff;background:rgba(255,255,255,.08);padding:18px 22px;border-radius:8px}

/* ---- people pickers: an avatar ahead of the name (public/js/select.js, <x-user-option>) ---- */
.atk-sel-av{width:22px;height:22px;flex:0 0 22px;font-size:9.5px;letter-spacing:0;box-shadow:none;line-height:1}
.atk-sel-btn > .atk-sel-av{width:24px;height:24px;flex-basis:24px;font-size:10px;margin-left:-3px}
.atk-sel-opt > span.atk-sel-av{flex:0 0 22px;min-width:0;overflow:hidden;white-space:normal}
.atk-sel-av.is-empty{background:#DCDFE4;color:#626F86}
.atk-sel-av.is-empty svg{width:62%;height:62%}
.atk-sel.has-avatar .atk-sel-btn{gap:8px}
.atk-sel-opt.has-avatar{padding-top:6px;padding-bottom:6px}

/* a leading icon given as markup (data-icon-html), e.g. a priority's — see select.js iconFor() */
.atk-sel-ic{width:auto;height:auto;flex:0 0 auto;display:inline-flex;background:none;box-shadow:none}
.atk-sel-btn > .atk-sel-ic{width:auto;height:auto;flex-basis:auto;margin-left:0}
.atk-sel-opt > span.atk-sel-ic{flex:0 0 auto;overflow:visible}

/* ---- date picker (see public/js/datepicker.js) ---------------------------- */
.atk-date{position:relative;display:block}
.atk-date > input.atk-date-native{color:transparent!important;caret-color:transparent;-webkit-appearance:none;appearance:none}
.atk-date > input.atk-date-native::-webkit-datetime-edit{opacity:0}
.atk-date > input.atk-date-native::-webkit-calendar-picker-indicator{opacity:0;display:none}
.atk-date-btn{position:absolute;inset:0;display:flex;align-items:center;gap:8px;width:100%;padding:0 7px 0 10px;
  background:transparent;border:0;border-radius:inherit;font:inherit;line-height:1;text-align:left;cursor:pointer}
.atk-date-btn:disabled{cursor:not-allowed;opacity:.6}
.atk-date-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atk-date-label.is-placeholder{color:#8590A2;font-weight:400}
.atk-date-ic{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:#0C66E4;background:#E9F2FF;transition:background .15s,color .15s}
.atk-date-ic svg{width:15px;height:15px}
.atk-date:hover .atk-date-ic,.atk-date.is-open .atk-date-ic{color:#fff;background:linear-gradient(135deg,#1D7AFC,#6B3FD9)}
.atk-date:hover > .atk-date-native.inline-inp{background:#F1F2F4}
.atk-date:hover > .atk-date-native.inp{background:#FAFBFC}
.atk-date.is-open > .atk-date-native,.atk-date:focus-within > .atk-date-native{border-color:#388BFF;box-shadow:0 0 0 3px rgba(56,139,255,.16)}

.atk-dp{position:fixed;z-index:300;width:304px;background:#fff;border-radius:16px;overflow:hidden;font-size:13px;color:#172B4D;
  box-shadow:0 24px 50px -18px rgba(9,30,66,.5),0 0 0 1px rgba(9,30,66,.08);animation:atkDpIn .14s ease-out}
@keyframes atkDpIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.atk-dp-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px;color:#fff;
  background:linear-gradient(118deg,#0B4FCC 0%,#3949E6 45%,#6B3FD9 85%,#A43DBE 120%)}
.atk-dp-nav{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.14);transition:background .12s}
.atk-dp-nav:hover{background:rgba(255,255,255,.28)}
.atk-dp-nav svg{width:16px;height:16px}
.atk-dp-title{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:10px;font-weight:800;font-size:14.5px;letter-spacing:-.01em;color:#fff;transition:background .12s}
.atk-dp-title:hover{background:rgba(255,255,255,.16)}
.atk-dp-title svg{width:12px;height:12px;opacity:.85}
.atk-dp-week{display:grid;grid-template-columns:repeat(7,1fr);padding:10px 10px 4px;font-size:11px;font-weight:800;letter-spacing:.04em;color:#8590A2;text-align:center}
.atk-dp-week .we{color:#F87168}
.atk-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:2px 10px 10px}
.atk-dp-day{height:36px;border-radius:11px;font-size:13px;font-weight:600;color:#172B4D;transition:background .1s,color .1s,transform .1s}
.atk-dp-day:hover{background:#EEF3FF;color:#0C66E4}
.atk-dp-day.we{color:#DE5C52}
.atk-dp-day.out{color:#B3B9C4;font-weight:500}
.atk-dp-day.today{color:#0C66E4;font-weight:800;box-shadow:inset 0 0 0 1.5px #85B8FF;background:#F4F8FF}
.atk-dp-day.sel,.atk-dp-day.sel:hover{color:#fff;background:linear-gradient(135deg,#1D7AFC,#6B3FD9);box-shadow:0 6px 14px -6px rgba(57,73,230,.85);transform:scale(1.04)}
.atk-dp-day:disabled{color:#DCDFE4;background:none;box-shadow:none;cursor:not-allowed;text-decoration:line-through}
.atk-dp-day:focus-visible,.atk-dp-month:focus-visible{outline:2px solid #388BFF;outline-offset:1px}
.atk-dp-months{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px}
.atk-dp-month{height:42px;border-radius:11px;font-weight:700;color:#172B4D;transition:background .1s}
.atk-dp-month:hover{background:#EEF3FF;color:#0C66E4}
.atk-dp-month.now{box-shadow:inset 0 0 0 1.5px #85B8FF;color:#0C66E4}
.atk-dp-month.sel{color:#fff;background:linear-gradient(135deg,#1D7AFC,#6B3FD9);box-shadow:none}
.atk-dp-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 10px;border-top:1px solid #EEF1F5;background:#FAFBFC}
.atk-dp-quick{display:flex;flex-wrap:wrap;gap:4px}
.atk-dp-quick button{padding:5px 10px;border-radius:9999px;font-size:12px;font-weight:700;color:#0055CC;background:#E9F2FF;transition:background .12s}
.atk-dp-quick button:hover{background:#CCE0FF}
.atk-dp-quick button:disabled{opacity:.4;cursor:not-allowed}
.atk-dp-clear{padding:5px 10px;border-radius:9px;font-size:12px;font-weight:700;color:#C9372C;transition:background .12s}
.atk-dp-clear:hover{background:#FFECEB}