/*
 * Correcto Team v1.0
 * BOARD — canonical structural layer
 *
 * Phase 3C:
 * - Board/Kanban structure and interaction only.
 * - Responsive rules remain in legacy.css until migrated separately.
 * - Dark/light theme ownership remains in theme.css.
 */


/* =========================================================
   BOARD WORKSPACE
   ========================================================= */

#boardKanbanDashboard.board-kanban-clean{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
  scrollbar-gutter:stable both-edges;
}

#boardKanbanDashboard.board-kanban-clean::before,
#boardKanbanDashboard.board-kanban-clean::after{
  display:none!important;
}

#boardKanbanDashboard.board-kanban-clean.is-smooth-scrolling,
#boardKanbanDashboard.is-drag-scrolling,
body.task-drag-active #boardKanbanDashboard{
  scroll-behavior:auto!important;
}


/* =========================================================
   COLUMN / TASK FLOW
   ========================================================= */

.board-column-list{
  position:relative;
  min-height:180px!important;
}

.board-column-list:empty::after{
  content:'Prevuci zadatak ovde';
  display:grid;
  place-items:center;
  min-height:150px;
  border:2px dashed rgba(59,130,246,.32);
  border-radius:16px;
  color:#64748b;
  font-weight:800;
}

.board-task-card{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    opacity .18s ease;
  will-change:transform;
  touch-action:pan-y;
  cursor:grab;
}

.board-task-card:active{
  cursor:grabbing;
}

#boardKanbanDashboard .board-task-card:hover{
  transform:translateY(-2px)!important;
  border-left-width:6px!important;
  box-shadow:0 10px 24px rgb(15 23 42/.14)!important;
}

#boardKanbanDashboard .board-task-card.dragging{
  transform:none!important;
}

.board-task-card.dragging{
  opacity:.58;
  box-shadow:0 18px 42px rgba(15,23,42,.22);
}

/* =========================================================
   C8C.2M.6 — TASK COLOR VISUAL SYSTEM
   Canonical owner: board.css

   Permanent rules:
   - task_color is an accent, never a full-card fill
   - light cards stay light / almost white
   - dark cards stay dark
   - 5px left rail carries the full task color
   - border gets a controlled color accent
   - text remains owned by the active theme
   ========================================================= */

#boardKanbanDashboard .board-task-card.has-task-color{
  position:relative!important;

  background:
    color-mix(
      in srgb,
      var(--task-card-color) 6%,
      #ffffff
    )!important;

  border-color:
    color-mix(
      in srgb,
      var(--task-card-color) 30%,
      #d8e0eb
    )!important;

  border-left:
    5px solid
    var(--task-card-color)!important;

  box-shadow:
    0 5px 16px
    rgb(15 23 42 / .10)!important;
}

html[data-theme="dark"]
body
#boardKanbanDashboard
.board-task-card.has-task-color,
body.dark
#boardKanbanDashboard
.board-task-card.has-task-color{
  background:
    color-mix(
      in srgb,
      var(--task-card-color) 5%,
      var(--ct-dark-task,#242528)
    )!important;

  border-color:
    color-mix(
      in srgb,
      var(--task-card-color) 34%,
      var(--ct-dark-border,#3b3c3f)
    )!important;

  border-left:
    5px solid
    var(--task-card-color)!important;

  box-shadow:
    0 5px 16px
    rgb(0 0 0 / .24)!important;
}

/* Keep the visual rail stable on hover. */
#boardKanbanDashboard
.board-task-card.has-task-color:hover{
  border-left-width:5px!important;
}

/*
 * No secondary inner accent.
 * The 5px left rail is the single visual color owner.
 */
#boardKanbanDashboard
.board-task-card.has-task-color::before{
  display:none!important;
}

/* =========================================================
   C8C.1 — COLOR SUBMENU POLISH
   Canonical owner: board.css
   ========================================================= */

#taskColorSubmenu{
  box-sizing:border-box!important;

  width:342px!important;
  min-width:342px!important;
  max-width:calc(100vw - 24px)!important;

  padding:12px!important;

  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
}

#taskColorSubmenu .context-menu-title{
  margin:0 0 10px!important;
  padding:0 2px!important;

  font-size:12px!important;
  font-weight:850!important;
  letter-spacing:.03em!important;
}

#taskColorSubmenu .context-color-grid{
  width:100%!important;
  min-width:0!important;

  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;

  overflow:visible!important;
}

#taskColorSubmenu .context-color-option{
  position:relative!important;

  box-sizing:border-box!important;

  width:100%!important;
  min-width:0!important;
  max-width:100%!important;

  min-height:42px!important;

  margin:0!important;
  padding:7px 30px 7px 8px!important;

  display:grid!important;
  grid-template-columns:24px minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;

  overflow:hidden!important;

  border:1px solid transparent!important;
  border-radius:10px!important;

  background:transparent!important;

  text-align:left!important;

  transition:
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    transform .14s ease!important;
}

#taskColorSubmenu .context-color-option:hover{
  background:
    color-mix(
      in srgb,
      var(--task-choice) 8%,
      var(--surface2)
    )!important;

  border-color:
    color-mix(
      in srgb,
      var(--task-choice) 24%,
      var(--border)
    )!important;
}

#taskColorSubmenu .context-color-option.is-active{
  background:
    color-mix(
      in srgb,
      var(--task-choice) 14%,
      var(--surface2)
    )!important;

  border-color:
    color-mix(
      in srgb,
      var(--task-choice) 58%,
      var(--border)
    )!important;

  box-shadow:
    inset 0 0 0 1px
    color-mix(
      in srgb,
      var(--task-choice) 14%,
      transparent
    )!important;
}

#taskColorSubmenu .context-color-swatch{
  position:relative!important;

  box-sizing:border-box!important;

  width:22px!important;
  height:22px!important;

  border-radius:7px!important;

  background:var(--swatch)!important;
  border:1px solid color-mix(in srgb,var(--text) 15%,transparent)!important;
}

#taskColorSubmenu
.context-color-option[data-no-color="true"]
.context-color-swatch{
  background:
    linear-gradient(
      135deg,
      transparent 43%,
      #ef4444 44%,
      #ef4444 55%,
      transparent 56%
    )!important;
}

#taskColorSubmenu .context-color-option b{
  min-width:0!important;

  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;

  font-size:12px!important;
  line-height:1.2!important;
  font-weight:720!important;
}

#taskColorSubmenu .context-color-option.is-active b{
  font-weight:850!important;
}

#taskColorSubmenu .context-color-check{
  position:absolute!important;

  right:8px!important;
  top:50%!important;

  width:18px!important;
  height:18px!important;

  margin:0!important;

  display:grid!important;
  place-items:center!important;

  border-radius:999px!important;

  transform:translateY(-50%)!important;

  background:var(--task-choice)!important;
  color:#fff!important;

  font-size:10px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:900!important;

  opacity:0!important;
}

#taskColorSubmenu
.context-color-option.is-active
.context-color-check{
  opacity:1!important;
}

#taskColorSubmenu > .context-separator{
  margin:10px 0 8px!important;
}

#taskColorSubmenu > button:not(.context-color-option){
  box-sizing:border-box!important;

  width:100%!important;
  max-width:100%!important;

  margin:0!important;
  padding:9px 7px!important;

  overflow:hidden!important;
  text-overflow:ellipsis!important;

  white-space:nowrap!important;
}

@media (max-width:420px){
  #taskColorSubmenu{
    width:calc(100vw - 20px)!important;
    min-width:0!important;
  }
}

/* =========================================================
   DRAG / DROP
   ========================================================= */

body.task-drag-active .board-kanban-column,
body.touch-task-dragging .board-kanban-column{
  cursor:grabbing;
  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    transform .14s ease;
}

body.task-drag-active .board-column-list,
body.touch-task-dragging .board-column-list{
  min-height:150px!important;
  overscroll-behavior-y:contain!important;
}

body.touch-task-dragging .board-kanban-dashboard{
  scroll-snap-type:none!important;
}

.board-kanban-column.drag-navigation-target{
  outline:3px solid #3b82f6!important;
  outline-offset:-3px!important;
  box-shadow:
    0 0 0 6px rgba(59,130,246,.14),
    0 18px 45px rgba(15,23,42,.18)!important;
}

#boardKanbanDashboard
.board-kanban-column.drag-over:not([data-shipping-column]),
#boardKanbanDashboard
.board-kanban-column.drag-navigation-target:not([data-shipping-column]),
#boardKanbanDashboard
.board-kanban-column.touch-drop-target:not([data-shipping-column]){
  border-color:#3b82f6!important;
  box-shadow:
    0 0 0 4px rgba(59,130,246,.22),
    0 18px 42px rgba(15,23,42,.18)!important;
}

#boardKanbanDashboard
.board-kanban-column.drag-over .board-column-list,
#boardKanbanDashboard
.board-kanban-column.drag-navigation-target .board-column-list,
#boardKanbanDashboard
.board-kanban-column.touch-drop-target .board-column-list{
  background:rgba(59,130,246,.08)!important;
}


/* =========================================================
   COLUMN FOOTER
   ========================================================= */

#boardKanbanDashboard .column-template-launcher{
  position:relative;
  min-width:0!important;
  width:100%!important;
  z-index:90!important;
  order:1;
}

#boardKanbanDashboard .column-create-primary{
  order:2;
}

.board-kanban-column > .column-create-tools{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:10px!important;
  margin-top:auto!important;
  padding:12px!important;
  border-top:1px solid var(--border)!important;
  background:
    color-mix(in srgb,var(--surface) 94%,transparent)!important;
}

.board-kanban-column > .column-create-tools > .add-task,
.board-kanban-column > .column-create-tools > .column-template-launcher,
.board-kanban-column > .column-create-tools .column-template-button{
  width:100%!important;
  min-width:0!important;
  height:48px!important;
}

#boardKanbanDashboard .column-template-button{
  display:grid;
  grid-template-columns:25px minmax(0,1fr) 14px!important;
  align-items:center;
  gap:7px;
}

#boardKanbanDashboard .column-template-button-copy{
  min-width:0;
}

#boardKanbanDashboard .column-template-button-copy strong{
  font-size:11px!important;
  line-height:1.1!important;
}

#boardKanbanDashboard .column-template-button-copy small{
  display:none!important;
}

.shipping-planner-column > .column-create-tools{
  grid-template-columns:1fr!important;
}


/* =========================================================
   WEEKLY SHIPPING CARDS
   ========================================================= */

.planner-shipping-card{
  touch-action:pan-y;
  user-select:none;
  cursor:pointer!important;
}

.planner-shipping-card[data-planner-shipping]{
  cursor:pointer!important;
  pointer-events:auto!important;
}

.planner-shipping-card[data-planner-shipping]
.shipping-drag-handle{
  cursor:grab!important;
}


/* =========================================================
   BOARD MOBILE REGIONS — BASE ONLY
   Responsive geometry stays in responsive/legacy layer.
   ========================================================= */

.board-mobile-split{
  display:contents;
  width:100%;
  min-width:0;
}

.board-columns-panel{
  display:contents;
  min-width:0;
}

/* =========================================================
   C8C.2M — MOBILE TASK SINGLE ACTION SHEET
   Canonical owner: board.css
   ========================================================= */

@media (max-width:640px){

  body.mobile-task-sheet-open
  .mobile-bottom-nav{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;

    transform:
      translateY(
        calc(
          100% +
          env(safe-area-inset-bottom,0px) +
          20px
        )
      )!important;
  }

  #taskContextMenu.mobile-action-sheet,
  #taskColorSubmenu.mobile-action-sheet,
  #taskLabelSubmenu.mobile-action-sheet{
    position:fixed!important;

    left:10px!important;
    right:10px!important;

    top:auto!important;

    bottom:
      calc(
        10px +
        env(safe-area-inset-bottom,0px)
      )!important;

    box-sizing:border-box!important;

    width:auto!important;
    min-width:0!important;
    max-width:none!important;

    max-height:min(78dvh,640px)!important;

    margin:0!important;
    padding:10px!important;

    overflow-x:hidden!important;
    overflow-y:auto!important;

    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;

    z-index:12050!important;

    border-radius:20px!important;

    box-shadow:
      0 -18px 54px
      rgb(0 0 0 / .34)!important;
  }

  #taskColorSubmenu.mobile-task-subview,
  #taskLabelSubmenu.mobile-task-subview{
    min-height:220px!important;
  }

  #taskColorSubmenu.mobile-task-subview
  > .context-menu-title,
  #taskLabelSubmenu.mobile-task-subview
  > .context-menu-title{
    display:none!important;
  }

  .mobile-task-subview-head{
    position:sticky!important;
    top:-10px!important;

    z-index:3!important;

    min-height:52px!important;

    margin:-10px -10px 10px!important;
    padding:9px 10px!important;

    display:grid!important;

    grid-template-columns:
      42px
      minmax(0,1fr)
      42px!important;

    align-items:center!important;
    gap:8px!important;

    border-bottom:
      1px solid
      var(--border)!important;

    background:
      color-mix(
        in srgb,
        var(--surface) 96%,
        transparent
      )!important;

    backdrop-filter:
      blur(14px)!important;
  }

  .mobile-task-subview-head strong{
    grid-column:2!important;

    min-width:0!important;

    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;

    text-align:center!important;

    font-size:14px!important;
    font-weight:850!important;
  }

  .mobile-task-subview-back{
    grid-column:1!important;

    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;

    margin:0!important;
    padding:0!important;

    display:grid!important;
    place-items:center!important;

    border:
      1px solid
      var(--border)!important;

    border-radius:11px!important;

    background:var(--surface2)!important;
    color:var(--text)!important;

    font-size:20px!important;
    line-height:1!important;
  }

  #taskColorSubmenu.mobile-task-subview{
    width:auto!important;
    min-width:0!important;
  }

  #taskColorSubmenu.mobile-task-subview
  .context-color-grid{
    width:100%!important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      )!important;

    gap:8px!important;
  }

  #taskColorSubmenu.mobile-task-subview
  .context-color-option{
    min-height:48px!important;

    padding:
      8px
      31px
      8px
      9px!important;

    border-radius:11px!important;
  }

  #taskLabelSubmenu.mobile-task-subview
  .context-label-list{
    max-height:none!important;

    padding:4px 0 8px!important;

    display:grid!important;
    gap:7px!important;

    overflow:visible!important;
  }

  #taskLabelSubmenu.mobile-task-subview
  .context-label-option{
    min-height:48px!important;

    margin:0!important;
    padding:4px!important;

    border-radius:11px!important;

    background:
      color-mix(
        in srgb,
        var(--surface2) 72%,
        transparent
      )!important;
  }

  #taskLabelSubmenu.mobile-task-subview
  .context-label-option input{
    width:20px!important;
    height:20px!important;

    margin-left:5px!important;
  }

  #taskLabelSubmenu.mobile-task-subview
  .context-label-option span{
    min-height:38px!important;

    display:flex!important;
    align-items:center!important;

    padding:8px 10px!important;

    border-radius:9px!important;
  }

  .mobile-task-subview-loading{
    min-height:150px!important;

    display:grid!important;
    place-items:center!important;

    color:var(--muted)!important;

    font-size:13px!important;
    font-weight:700!important;
  }

  .mobile-task-subview-done{
    position:sticky!important;
    bottom:-10px!important;

    box-sizing:border-box!important;

    width:100%!important;
    min-height:46px!important;

    margin:10px 0 0!important;

    border-radius:11px!important;

    background:var(--primary)!important;
    color:#fff!important;

    font-weight:850!important;
  }
}


/* =========================================================
   C8C.2M.3 — MOBILE TASK SHEET HEADER
   Main task actions can always be closed.
   ========================================================= */

.mobile-task-main-head{
  display:none;
}

@media (max-width:640px){

  #taskContextMenu.mobile-action-sheet
  .mobile-task-main-head{
    position:sticky!important;

    top:-10px!important;
    z-index:6!important;

    min-height:54px!important;

    margin:-10px -10px 10px!important;
    padding:9px 10px!important;

    display:grid!important;

    grid-template-columns:
      42px
      minmax(0,1fr)
      42px!important;

    align-items:center!important;

    border-bottom:
      1px solid
      var(--border)!important;

    background:
      color-mix(
        in srgb,
        var(--surface) 97%,
        transparent
      )!important;

    backdrop-filter:
      blur(14px)!important;
  }

  #taskContextMenu.mobile-action-sheet
  .mobile-task-main-head strong{
    grid-column:2!important;

    text-align:center!important;

    font-size:14px!important;
    line-height:1.2!important;
    font-weight:850!important;
  }

  #taskContextMenu.mobile-action-sheet
  .mobile-task-main-close{
    grid-column:3!important;

    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;

    margin:0!important;
    padding:0!important;

    display:grid!important;
    place-items:center!important;

    border:
      1px solid
      var(--border)!important;

    border-radius:11px!important;

    background:var(--surface2)!important;
    color:var(--text)!important;

    font-size:24px!important;
    line-height:1!important;
    font-weight:500!important;
  }
}