/* AKSMART Professional Local Button Icons — refined 2026-09-08
   Goal: consistent iconography, clean hierarchy, no duplicate icons,
   compact desktop/mobile layout, existing functionality preserved. */

:root{
  --ak-icon-ink:#123b3a;
  --ak-icon-soft:#edf7f5;
  --ak-icon-border:#b8d8d3;
  --ak-icon-accent:#1f7a73;
  --ak-icon-danger:#a82e2e;
  --ak-icon-danger-bg:#fff2f2;
  --ak-icon-shadow:0 1px 2px rgba(10,40,38,.05);
}

/* Generic icon button.
   Existing page-specific background/border colors are intentionally retained
   unless the button belongs to one of the standardized action toolbars. */
.ak-ui-icon-btn{
  --ak-ui-icon-size:16px;
  --ak-ui-btn-gap:2px;
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:var(--ak-ui-btn-gap)!important;
  min-height:42px!important;
  min-width:48px;
  padding:4px 8px!important;
  line-height:1.05!important;
  text-align:center!important;
  white-space:normal!important;
  vertical-align:middle;
  box-sizing:border-box;
  overflow:hidden;
  position:relative;
}

.ak-ui-icon-btn::before{
  content:"";
  display:block;
  flex:0 0 var(--ak-ui-icon-size);
  width:var(--ak-ui-icon-size);
  height:var(--ak-ui-icon-size);
  background-color:currentColor;
  -webkit-mask-image:var(--ak-ui-icon-url);
  mask-image:var(--ak-ui-icon-url);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  opacity:.95;
  pointer-events:none;
}

/* Shortcut hints remain secondary and never compete with the action name. */
.ak-ui-icon-btn small{
  display:block!important;
  margin:0!important;
  font-size:7.5px!important;
  line-height:.9!important;
  font-weight:700!important;
  opacity:.52!important;
}

/* Standard action bars: one visual family, calmer than the previous heavy cards. */
.sale-actions-left .ak-ui-icon-btn,
.sale-actions-right .ak-ui-icon-btn,
.ak-entry-buttons .ak-ui-icon-btn,
.cd135-toolbar .ak-ui-icon-btn,
.cd135-force .ak-ui-icon-btn,
.db88-toolbar .ak-ui-icon-btn,
.pb-toolbar .ak-ui-icon-btn,
.bs-actions .ak-ui-icon-btn{
  border:1px solid var(--ak-icon-border)!important;
  background:linear-gradient(180deg,#ffffff 0%,#f4faf9 100%)!important;
  color:var(--ak-icon-ink)!important;
  border-radius:10px!important;
  box-shadow:var(--ak-icon-shadow)!important;
  font-weight:800!important;
}

/* Primary actions */
.ak-ui-icon-btn[data-ak-icon="add"],
.ak-ui-icon-btn[data-ak-icon="save"],
.ak-ui-icon-btn[data-ak-icon="activate"]{
  border-color:#8dc7c0!important;
  background:linear-gradient(180deg,#ecf9f7 0%,#dcefeb 100%)!important;
  color:#115a55!important;
}

/* Destructive actions */
.ak-ui-icon-btn[data-ak-icon="delete"],
.ak-ui-icon-btn.danger,
.ak-ui-icon-btn.stop,
.ak-ui-icon-btn.ak83-danger,
.ak-ui-icon-btn.ak83-delete-selected{
  border-color:#e6bbbb!important;
  background:linear-gradient(180deg,#fff9f9 0%,var(--ak-icon-danger-bg) 100%)!important;
  color:var(--ak-icon-danger)!important;
}

/* Prevent huge/stretchy toolbar buttons on wide screens. */
.sale-actions-left .ak-ui-icon-btn,
.sale-actions-right .ak-ui-icon-btn{
  flex:1 1 0;
  min-width:70px;
  max-width:176px;
}

.sale-actions-left,
.sale-actions-right{
  display:flex!important;
  gap:7px!important;
  align-items:stretch!important;
}

/* Dense screens */
body.page-sale .ak-ui-icon-btn,
body.page-charts .ak-ui-icon-btn{
  --ak-ui-icon-size:15px;
  min-height:39px!important;
  padding:4px 6px!important;
  font-size:10.5px!important;
}

/* Date controls:
   exactly ONE visible calendar icon. Native picker indicator is transparent,
   and our local icon is drawn once on the dedicated picker button. */
.cd-date-pick{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:46px!important;
  min-width:46px!important;
  height:46px!important;
  padding:0!important;
  border:1px solid var(--ak-icon-border)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--ak-icon-ink)!important;
  position:relative!important;
  overflow:hidden!important;
}
.cd-date-pick::before{
  content:""!important;
  display:block!important;
  width:19px!important;
  height:19px!important;
  background-color:currentColor!important;
  -webkit-mask:url('/assets/icons/ui/calendar.svg') center/contain no-repeat!important;
  mask:url('/assets/icons/ui/calendar.svg') center/contain no-repeat!important;
}
.cd-date-pick input,
.cd-date-pick::-webkit-calendar-picker-indicator{
  opacity:0!important;
}
input[type="date"].ak-local-date-input::-webkit-calendar-picker-indicator{
  opacity:0!important;
}

/* If the actual date input itself gets decorated, suppress the generic pseudo icon. */
input[type="date"] + .ak-ui-icon-btn[data-ak-icon="calendar"]::after{display:none!important}

/* Change Draw: cleaner active rows/buttons. */
.cd135-toolbar{
  display:flex!important;
  justify-content:flex-end!important;
  margin-bottom:10px!important;
}
.cd135-toolbar .ak-ui-icon-btn{
  min-width:88px!important;
}
.cd135-force{
  display:flex!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}
.cd135-force .ak-ui-icon-btn{
  min-width:84px!important;
}

/* Result page: keep save button professional and stop duplicated calendar imagery. */
body.page-result .ak-ui-icon-btn{
  min-width:72px;
}
body.page-result .ak-ui-icon-btn[data-ak-icon="calendar"]{
  min-width:46px!important;
  width:46px!important;
  padding:0!important;
}

/* Bottom nav icons already exist and are a different navigation system.
   Never decorate them again. */
.bottom-nav button.ak-ui-icon-btn::before,
.ak-mobile-nav button.ak-ui-icon-btn::before{
  display:none!important;
}

/* Mobile */
@media(max-width:900px){
  .ak-ui-icon-btn{
    --ak-ui-icon-size:15px;
    min-height:40px!important;
    min-width:44px;
    padding:4px 6px!important;
    font-size:10px!important;
    border-radius:9px!important;
  }

  .sale-actions-left,
  .sale-actions-right{
    gap:5px!important;
  }
  .sale-actions-left .ak-ui-icon-btn,
  .sale-actions-right .ak-ui-icon-btn{
    min-width:0!important;
    max-width:none!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }

  .cd135-toolbar .ak-ui-icon-btn,
  .cd135-force .ak-ui-icon-btn{
    min-width:76px!important;
  }
}

@media(max-width:520px){
  .ak-ui-icon-btn{
    --ak-ui-icon-size:14px;
    min-height:38px!important;
    min-width:40px;
    padding:3px 5px!important;
    font-size:9.5px!important;
  }

  body.page-sale .ak-ui-icon-btn,
  body.page-charts .ak-ui-icon-btn{
    --ak-ui-icon-size:13px;
    min-height:36px!important;
    font-size:9px!important;
  }

  .sale-actions-left .ak-ui-icon-btn,
  .sale-actions-right .ak-ui-icon-btn{
    border-radius:8px!important;
  }

  .cd-date-pick{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
  }
}

@media(max-width:390px){
  .ak-ui-icon-btn{
    min-width:36px;
  }
}

/* Accessibility */
.ak-ui-icon-btn:focus-visible,
.cd-date-pick:focus-visible{
  outline:2px solid #2c8f87!important;
  outline-offset:2px!important;
}
@media(prefers-reduced-motion:reduce){
  .ak-ui-icon-btn{transition:none!important}
}