/* =======================================================================
   Admin V2 - Unified CSS System
   File: public/admin-v2/css/admin.css

   Structure
   1. Tokens
   2. Base / Reset
   3. Layout
   4. Navigation
   5. Shared Components
   6. Forms
   7. Tables
   8. Utilities
   9. Auth
   10. Page-specific overrides
   ======================================================================= */

/* =======================================================================
   1) TOKENS
   ======================================================================= */
:root{
  --a2-bg: #f5f6fa;
  --a2-card: #ffffff;
  --a2-card-soft: #fcfcfd;
  --a2-text: #101828;
  --a2-muted: #667085;
  --a2-border: #eef0f4;
  --a2-border-2: #e6e8ee;

  --a2-primary: #0b1220;
  --a2-primary-2: #1d2939;
  --a2-primary-soft: rgba(99,102,241,.12);

  --a2-success: #067647;
  --a2-success-bg: #ecfdf3;
  --a2-success-br: #b7f0c6;

  --a2-danger: #b42318;
  --a2-danger-bg: #fef2f2;
  --a2-danger-br: #fecaca;

  --a2-warning: #b54708;
  --a2-warning-bg: #fffaeb;
  --a2-warning-br: #fedf89;

  --a2-info: #175cd3;
  --a2-info-bg: #eff8ff;
  --a2-info-br: #b2ddff;

  --a2-gray-bg: #f2f4f7;
  --a2-gray-br: #e4e7ec;

  --a2-radius: 18px;
  --a2-radius-md: 16px;
  --a2-radius-sm: 12px;
  --a2-radius-xs: 10px;

  --a2-shadow: 0 6px 18px rgba(16,24,40,.06);
  --a2-shadow-soft: 0 2px 10px rgba(16,24,40,.04);

  --a2-h: 40px;
  --a2-h-lg: 46px;
  --a2-pad-x: 12px;
  --a2-gap: 10px;

  --a2-sidebar-w: 250px;
  --a2-sidebar-mini-w: 92px;
  --a2-topbar-h: 64px;
}

/* =======================================================================
   2) BASE / RESET
   ======================================================================= */
*{ box-sizing: border-box; }

html,
body{
  height: auto;
  min-height: 100%;
}

body{
  margin: 0;
  background: var(--a2-bg);
  color: var(--a2-text);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{
  color: inherit;
  text-decoration: none;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
select,
textarea{
  font: inherit;
}

textarea{
  resize: vertical;
}

[dir="rtl"] .a2-input,
[dir="rtl"] .a2-select,
[dir="rtl"] .a2-textarea{
  text-align: right;
}

.a2-skip-link{
  position: absolute;
  top: -48px;
  left: 8px;
  z-index: 2000;
  background: var(--a2-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--a2-radius-xs);
  font-weight: 800;
  transition: top .15s ease;
}

.a2-skip-link:focus{
  top: 8px;
}

/* =======================================================================
   3) LAYOUT
   ======================================================================= */
.a2-shell{
  display:flex;
  align-items:stretch;
  min-height:100vh;
  width:100%;
  background:var(--a2-bg);
}

.a2-main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.a2-content{
  flex: 1;
  padding: 16px;
}

.a2-page{
  width: 100%;
}

/* -----------------------------------------------------------------------
   Sidebar
   ----------------------------------------------------------------------- */
.a2-sidebar{
  width:var(--a2-sidebar-w);
  min-width:200px;
  max-width:250px;
  background:#0b1220;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-self:stretch;
  min-height:100%;
  transition:width .18s ease, transform .18s ease;
  z-index:80;
}
@media (min-width: 769px){
  .a2-sidebar{
    position:relative;
    top:auto;
    height:auto;
  }
}

/* @media (min-width: 769px){
  .a2-sidebar{
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
  }
} */

.a2-side-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.a2-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 900;
  min-width: 0;
  max-width: calc(100% - 56px);
}

.a2-brand-badge{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 900;
  flex: 0 0 auto;
}

.a2-brand-text{
  opacity: .95;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.a2-nav{
  flex:1 1 auto;
  padding:10px;
  overflow:auto;
}

@media (min-width: 769px){
  .a2-nav{
    max-height:none;
    overflow:visible;
  }
}

/* -----------------------------------------------------------------------
   Topbar
   ----------------------------------------------------------------------- */
.a2-topbar{
  background: #fff;
  border-bottom: 1px solid var(--a2-border);
  height: var(--a2-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.a2-topbar-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.a2-topbar-title{
  font-weight: 900;
  font-size: 16px;
  color: var(--a2-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.a2-topbar-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* -----------------------------------------------------------------------
   Overlay / Mobile Drawer
   ----------------------------------------------------------------------- */
.a2-overlay{
  display: none;
}

.a2-burger{
  flex: 0 0 auto;
  height: 38px;
  min-width: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
}

.a2-burger:hover{
  background: rgba(255,255,255,.12);
}

.a2-burger--mobile{
  display: none;
}

@media (min-width: 769px){
  #a2CloseSidebar{ display: none !important; }
}

@media (max-width: 768px){
  .a2-content{
    padding: 12px;
  }

  .a2-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 70;
  }

  body.a2-sidebar-open .a2-overlay{
    display: block;
  }

  body.a2-sidebar-open{
    overflow: hidden;
  }

  .a2-shell{
    display: block;
  }

  .a2-sidebar{
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    transform: translateX(110%);
    width: var(--a2-sidebar-w);
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
  }

  body.a2-sidebar-open .a2-sidebar{
    transform: translateX(0);
  }

  .a2-burger--mobile{
    display: inline-flex;
  }

  #a2CloseSidebar{
    display: inline-flex !important;
  }
}

/* -----------------------------------------------------------------------
   Desktop Mini Sidebar
   ----------------------------------------------------------------------- */
@media (min-width: 769px){
  body.a2-sidebar-mini .a2-sidebar{
    width: var(--a2-sidebar-mini-w);
    min-width: var(--a2-sidebar-mini-w);
    max-width: var(--a2-sidebar-mini-w);
    overflow: visible;
  }

  body.a2-sidebar-mini .a2-side-top{
    padding: 12px 10px;
  }

  body.a2-sidebar-mini .a2-brand{
    gap: 8px;
    max-width: calc(100% - 52px);
  }

  body.a2-sidebar-mini .a2-brand-badge{
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 13px;
  }

  body.a2-sidebar-mini .a2-burger{
    min-width: 40px;
    height: 36px;
    border-radius: 12px;
  }

  body.a2-sidebar-mini .a2-brand-text,
  body.a2-sidebar-mini .a2-nav-text,
  body.a2-sidebar-mini .a2-user-meta{
    display: none;
  }

  body.a2-sidebar-mini .a2-nav{
    padding: 10px 8px;
  }

  body.a2-sidebar-mini .a2-nav-link,
  body.a2-sidebar-mini .a2-nav-parent{
    justify-content: center;
    padding: 12px 0;
  }

  body.a2-sidebar-mini .a2-ico{
    width: 22px;
    height: 22px;
  }

  body.a2-sidebar-mini .a2-nav-caret{
    display: none;
  }

  body.a2-sidebar-mini .a2-nav-group{
    display: none;
  }

  body.a2-sidebar-mini .a2-sidebar:hover{
    width: var(--a2-sidebar-w);
    min-width: var(--a2-sidebar-w);
    max-width: var(--a2-sidebar-w);
  }

  body.a2-sidebar-mini .a2-sidebar:hover .a2-nav-text,
  body.a2-sidebar-mini .a2-sidebar:hover .a2-brand-text{
    display: inline;
  }

  body.a2-sidebar-mini .a2-sidebar:hover .a2-nav-link,
  body.a2-sidebar-mini .a2-sidebar:hover .a2-nav-parent{
    justify-content: flex-start;
    padding: 10px 12px;
  }

  body.a2-sidebar-mini .a2-sidebar:hover .a2-nav-caret{
    display: inline-block;
  }

  body.a2-sidebar-mini .a2-nav-group{
    pointer-events: none;
  }

  body.a2-sidebar-mini .a2-sidebar:hover .a2-nav-group{
    pointer-events: auto;
  }

  body.a2-sidebar-mini .a2-nav-link{
    position: relative;
  }

  body.a2-sidebar-mini .a2-nav-link::after{
    content: attr(data-tip);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #111827;
    color: #fff;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: .12s ease;
    border: 1px solid rgba(255,255,255,.14);
    right: calc(100% + 10px);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.a2-sidebar-mini[dir="ltr"] .a2-nav-link::after{
    right: auto;
    left: calc(100% + 10px);
  }

  body.a2-sidebar-mini .a2-nav-link:hover::after{
    opacity: 1;
  }

  body.a2-sidebar-mini .a2-nav-section{
    text-align: center;
    padding: 10px 0;
  }
}

/* =======================================================================
   4) NAVIGATION
   ======================================================================= */
.a2-nav-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.a2-nav-item{
  margin: 4px 0;
}

.a2-nav-link,
.a2-nav-parent,
.a2-nav-child-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
  border: 1px solid transparent;
  transition: .15s ease;
  user-select: none;
}

.a2-nav-parent{
  cursor: pointer;
}

.a2-nav-parent::-webkit-details-marker{ display: none; }
.a2-nav-parent::marker{ content: ""; }

.a2-nav-link,
.a2-nav-parent{
  color: rgba(255,255,255,.88);
}

.a2-nav-link:hover,
.a2-nav-parent:hover{
  background: rgba(255,255,255,.08);
  color: #fff;
}

.a2-nav-link.is-active,
.a2-nav-parent.is-active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}

.a2-nav-link.is-disabled,
.a2-nav-child-link.is-disabled{
  opacity: .45;
  pointer-events: none;
}

.a2-nav-text{
  flex: 1;
  min-width: 0;
}

.a2-nav-caret{
  opacity: .75;
  transition: .15s ease;
  flex: 0 0 auto;
}

.a2-nav-group[open] .a2-nav-caret{
  transform: rotate(180deg);
}

.a2-nav-children{
  list-style: none;
  padding: 6px 0;
  margin: 0;
}

[dir="rtl"] .a2-nav-children{ padding-right: 18px; }
[dir="ltr"] .a2-nav-children{ padding-left: 18px; }

.a2-nav-child-link{
  color: rgba(255,255,255,.82);
  padding: 9px 12px;
  font-weight: 850;
}

.a2-nav-child-link:hover{
  background: rgba(255,255,255,.08);
  color: #fff;
}

.a2-nav-child-link.is-active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}

.a2-nav-section{
  color: rgba(255,255,255,.55);
  font-weight: 950;
  font-size: 12px;
  padding: 12px 10px 6px;
  letter-spacing: .3px;
}

.a2-nav-empty{
  color: rgba(255,255,255,.75);
  font-weight: 800;
  padding: 10px 12px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 12px;
  margin: 10px;
}

.a2-ico{
  width: 18px;
  height: 18px;
  fill: rgba(255,255,255,.85);
  flex: 0 0 auto;
}

.a2-nav-link.is-active .a2-ico,
.a2-nav-parent.is-active .a2-ico{
  fill: #fff;
}

/* -----------------------------------------------------------------------
   Userbar
   ----------------------------------------------------------------------- */
.a2-userbar{
  display:flex;
  align-items:center;
  gap:12px;
}

.a2-userbar form{
  margin:0;
}

.a2-user{
  display:flex;
  align-items:center;
  gap:10px;
}

.a2-user-meta{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  text-align:end;
}

.a2-user-name{
  font-weight:900;
  color:var(--a2-text);
  font-size:14px;
}

.a2-user-role{
  color:var(--a2-muted);
  font-weight:800;
  font-size:12px;
}

.a2-avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e5e7eb;
  color:var(--a2-text);
  font-weight:900;
  flex:0 0 auto;
}

.a2-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width:768px){
  .a2-user-meta{
    display:none;
  }
}


/* =======================================================================
   5) SHARED COMPONENTS
   ======================================================================= */

/* -----------------------------------------------------------------------
   Page Header
   ----------------------------------------------------------------------- */
.a2-page-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.a2-page-title{
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--a2-text);
}

.a2-page-subtitle{
  margin-top: 6px;
  color: var(--a2-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.a2-page-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 768px){
  .a2-page-head{
    flex-direction: column;
    align-items: stretch;
  }

  .a2-page-actions{
    width: 100%;
  }

  .a2-page-actions .a2-btn{
    width: 100%;
  }
}

@media (max-width: 480px){
  .a2-page-title{ font-size: 20px; }
}

/* -----------------------------------------------------------------------
   Cards
   ----------------------------------------------------------------------- */
.a2-card{
  background: var(--a2-card);
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-radius);
  box-shadow: var(--a2-shadow);
  padding: 16px;
}

.a2-card--tight{
  padding: 12px;
}

.a2-card--soft{
  background: var(--a2-card-soft);
  box-shadow: var(--a2-shadow-soft);
}

.a2-card--section{
  padding: 18px;
}

.a2-card + .a2-card{
  margin-top: 16px;
}

.a2-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.a2-title{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0;
}

.a2-section-title{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
  color: var(--a2-text);
}

.a2-section-subtitle{
  margin: -6px 0 12px;
  color: var(--a2-muted);
  font-size: 13px;
  font-weight: 700;
}

.a2-divider{
  height: 1px;
  background: var(--a2-border);
  margin: 14px 0;
  border: 0;
}

/* -----------------------------------------------------------------------
   Stat Cards
   ----------------------------------------------------------------------- */
.a2-stat-grid{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}

.a2-stat-card{
  background: #fff;
  border: 1px solid var(--a2-border);
  border-radius: 16px;
  box-shadow: var(--a2-shadow-soft);
  padding: 16px;
  min-width: 0;
}

.a2-stat-label{
  color: var(--a2-muted);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}

.a2-stat-value{
  font-size: 24px;
  font-weight: 900;
  color: var(--a2-text);
  line-height: 1.2;
}

.a2-stat-note{
  margin-top: 6px;
  color: var(--a2-muted);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1200px){
  .a2-stat-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .a2-stat-grid{
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------
   Alerts
   ----------------------------------------------------------------------- */
.a2-alert{
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 800;
}

.a2-alert-success{
  background: var(--a2-success-bg);
  border-color: var(--a2-success-br);
  color: var(--a2-success);
}

.a2-alert-danger{
  background: var(--a2-danger-bg);
  border-color: var(--a2-danger-br);
  color: var(--a2-danger);
}

.a2-alert-warning{
  background: var(--a2-warning-bg);
  border-color: var(--a2-warning-br);
  color: var(--a2-warning);
}

.a2-alert-info{
  background: var(--a2-info-bg);
  border-color: var(--a2-info-br);
  color: var(--a2-info);
}

/* -----------------------------------------------------------------------
   Toolbar / Filters
   ----------------------------------------------------------------------- */
.a2-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 14px;
}

.a2-filters{
  display: flex;
  align-items: center;
  gap: var(--a2-gap);
  flex-wrap: wrap;
}

.a2-actionsbar{
  display: flex;
  align-items: center;
  gap: var(--a2-gap);
  flex-wrap: wrap;
}

.a2-toolbar .a2-actionsbar{
  margin-inline-start: auto;
}

body.admin-v2 .a2-toolbar{
  position: sticky;
  top: 72px;
  z-index: 20;
  background: var(--a2-card);
  padding: 12px;
  border-radius: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--a2-border);
}

@media (max-width: 992px){
  .a2-toolbar .a2-actionsbar{
    width: 100%;
    justify-content: flex-start;
    margin-inline-start: 0;
  }
}

/* -----------------------------------------------------------------------
   Filter Bar
   ----------------------------------------------------------------------- */
.a2-filterbar{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.a2-filterbar .a2-input,
.a2-filterbar .a2-select{
  width: auto;
}

.a2-filter-search{
  min-width: 200px;
  flex: 1 1 200px;
}

.a2-filter-sm{
  min-width: 120px;
}

.a2-filter-md{
  min-width: 150px;
}

.a2-filter-actions{
  margin-inline-start: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Modern filterbar + tom-select: the global initializer wraps every <select> in
   a .ts-wrapper that admin-fixes.css forces to width:100% (which would make each
   select fill the row and stack). Size the wrapper and out-specify
   .admin-v2 .ts-wrapper (0,2,0) by qualifying with .a2-filterbar (0,3,0) so the
   selects stay compact on one row. */
.admin-v2 .a2-filterbar .ts-wrapper{
  width: auto;
  min-width: 120px;
  flex: 0 0 auto;
}
.admin-v2 .a2-filterbar .ts-wrapper.a2-filter-md{
  min-width: 150px;
}

/* Legacy filter toolbar (a2-toolbar / a2-filters / a2-actionsbar), still used by
   several index screens (delivery, disputes, service-catalog-matrix, …). Its
   controls had no width, so each defaulted to full width and stacked one per
   row (the "old" look). The real culprit for the selects is tom-select: the
   global initializer wraps every <select> in a .ts-wrapper that admin-fixes.css
   forces to width:100%. So we must size the WRAPPER, and out-specify that rule
   (.admin-v2 .ts-wrapper) by qualifying with .a2-filters. Give the controls the
   same row sizing as the modern a2-filterbar: search grows, selects stay
   compact, actions push to the end. */
.admin-v2 .a2-filters .a2-input,
.admin-v2 .a2-filters .a2-select,
.admin-v2 .a2-filters .ts-wrapper.a2-select{
  width: auto;
  min-width: 120px;
  flex: 0 0 auto;
}
.admin-v2 .a2-filters .a2-input[name="q"]{
  min-width: 200px;
  flex: 1 1 200px;
}
.a2-filters .a2-actionsbar{
  margin-inline-start: auto;
}

@media (max-width: 768px){
  .admin-v2 .a2-filters .a2-input,
  .admin-v2 .a2-filters .a2-select,
  .admin-v2 .a2-filters .ts-wrapper.a2-select,
  .admin-v2 .a2-filters .a2-input[name="q"]{
    min-width: 100%;
    flex: 1 1 100%;
  }
  .a2-filters .a2-actionsbar{
    width: 100%;
    margin-inline-start: 0;
  }
  .a2-filterbar{
    align-items: stretch;
  }

  .a2-filter-search,
  .a2-filter-sm,
  .a2-filter-md{
    min-width: 100%;
    flex: 1 1 100%;
  }

  .a2-filter-actions{
    margin-inline-start: 0;
    width: 100%;
  }

  .a2-filter-actions .a2-btn{
    flex: 1 1 auto;
  }
}

/* -----------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------- */
.a2-btn{
  height: var(--a2-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: var(--a2-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  transition: .15s ease;
  user-select: none;
  text-decoration: none;
}

.a2-btn:hover{ transform: translateY(-1px); }
.a2-btn:active{ transform: translateY(0); }

.a2-btn:disabled,
.a2-btn[disabled]{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.a2-btn-primary{
  background: var(--a2-primary);
  color: #fff;
  border-color: var(--a2-primary);
}

.a2-btn-ghost{
  background: #fff;
  color: var(--a2-text);
  border-color: var(--a2-border-2);
}

.a2-btn-success{
  background: var(--a2-success);
  color: #fff;
  border-color: var(--a2-success);
}

.a2-btn-danger{
  background: var(--a2-danger);
  color: #fff;
  border-color: var(--a2-danger);
}

.a2-btn-dark{
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.a2-btn-sm{
  height: 40px;
  min-width: 40px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
}

.a2-btn-lg{
  height: var(--a2-h-lg);
  padding: 0 16px;
}

.a2-btn-block{
  width: 100%;
}

/* -----------------------------------------------------------------------
   Coverage-sweep fixes: class tokens used across admin-v2 blades that were
   never defined, so their elements rendered unstyled. Two are a hyphenation
   split of an existing class (statgrid/tablewrap == stat-grid/table-wrap) and
   are aliased to the exact same rules; two are genuinely-missing variants
   (a warning button, a block/cell empty-state) built from existing tokens.
   ----------------------------------------------------------------------- */
.a2-statgrid{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 1200px){
  .a2-statgrid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
  .a2-statgrid{ grid-template-columns: 1fr; }
}

.a2-tablewrap{
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--a2-border);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.a2-btn-warning{
  background: var(--a2-warning);
  color: #fff;
  border-color: var(--a2-warning);
}

.a2-empty{
  padding: 18px;
  text-align: center;
  color: var(--a2-muted);
}

/* Pagination — the a2 paginator view (resources/views/vendor/pagination/a2)
   set as the global default. .a2-pagination is the wrapper already present in
   many index blades; .a2-pager* is the nav/list the view emits. */
.a2-pagination{
  margin-top: 16px;
}
.a2-pager-list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 16px 0 0;
  list-style: none;
}
.a2-pager-item{
  list-style: none;
}
.a2-pager-item > a,
.a2-pager-item > span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--a2-border-2);
  background: #fff;
  color: var(--a2-text);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  transition: .15s ease;
}
.a2-pager-item > a:hover{
  border-color: var(--a2-primary);
  color: var(--a2-primary);
}
.a2-pager-active > span{
  background: var(--a2-primary);
  border-color: var(--a2-primary);
  color: #fff;
}
.a2-pager-disabled > span,
.a2-pager-dots > span{
  opacity: .5;
  cursor: default;
}

/* -----------------------------------------------------------------------
   Status / Pills
   ----------------------------------------------------------------------- */
.a2-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  transition: .15s ease;
}

.a2-pill:hover{
  transform: scale(1.03);
  filter: brightness(.97);
}

.a2-pill-ok,
.a2-pill-active,
.a2-pill-success{
  background: var(--a2-success-bg);
  border-color: var(--a2-success-br);
  color: var(--a2-success);
}

.a2-pill-danger,
.a2-pill-inactive,
.a2-pill-trashed{
  background: var(--a2-danger-bg);
  border-color: var(--a2-danger-br);
  color: var(--a2-danger);
}

.a2-pill-warning{
  background: var(--a2-warning-bg);
  border-color: var(--a2-warning-br);
  color: var(--a2-warning);
}

.a2-pill-gray,
.a2-pill-sub-none{
  background: var(--a2-gray-bg);
  border-color: var(--a2-gray-br);
  color: #344054;
}

.a2-pill-sub-active{
  background: var(--a2-success-bg);
  border-color: var(--a2-success-br);
  color: var(--a2-success);
}

.a2-pill-sub-expired{
  background: var(--a2-warning-bg);
  border-color: var(--a2-warning-br);
  color: var(--a2-warning);
}

/* -----------------------------------------------------------------------
   a2-badge — status chip aliases (mirror a2-pill).
   Used across ~17 admin screens but was previously undefined, so those
   status chips rendered as unstyled plain text. Base is a neutral gray
   chip; semantic variants (incl. domain statuses like paid/pending/
   expired/failed) map to the shared success/danger/warning/gray tokens.
   ----------------------------------------------------------------------- */
.a2-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--a2-gray-br);
  background: var(--a2-gray-bg);
  color: #344054;
  font-weight: 800;
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
}
.a2-badge-success,
.a2-badge-ok,
.a2-badge-paid,
.a2-badge-active{
  background: var(--a2-success-bg);
  border-color: var(--a2-success-br);
  color: var(--a2-success);
}
.a2-badge-danger,
.a2-badge-failed,
.a2-badge-banned{
  background: var(--a2-danger-bg);
  border-color: var(--a2-danger-br);
  color: var(--a2-danger);
}
.a2-badge-warning,
.a2-badge-pending{
  background: var(--a2-warning-bg);
  border-color: var(--a2-warning-br);
  color: var(--a2-warning);
}
.a2-badge-muted,
.a2-badge-expired,
.a2-badge-gray{
  background: var(--a2-gray-bg);
  border-color: var(--a2-gray-br);
  color: #344054;
}

/* -----------------------------------------------------------------------
   Links / Empty / Hint
   ----------------------------------------------------------------------- */
.a2-link{
  color: #175cd3;
  font-weight: 900;
  font-size: 13px;
}

.a2-link:hover{
  text-decoration: underline;
}

.a2-link-danger{ color: var(--a2-danger); }
.a2-link-success{ color: var(--a2-success); }

.a2-link-muted{
  color: #98a2b3;
  cursor: not-allowed;
  text-decoration: none;
}

.a2-hint,
.a2-help{
  color: var(--a2-muted);
  font-size: 13px;
}

.a2-empty-cell{
  padding: 18px;
  text-align: center;
  color: var(--a2-muted);
}

/* -----------------------------------------------------------------------
   Readonly / View System
   ----------------------------------------------------------------------- */
.a2-view-field{
  min-height: var(--a2-h);
  display: flex;
  align-items: center;
  padding: 8px var(--a2-pad-x);
  border: 1px solid var(--a2-border-2);
  border-radius: var(--a2-radius-sm);
  background: #fff;
  font-weight: 800;
}

.a2-view-box{
  border: 1px solid var(--a2-border-2);
  border-radius: var(--a2-radius-sm);
  background: #fff;
  padding: 10px 12px;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
  font-weight: 700;
  min-height: 120px;
}

.a2-kv{
  display: grid;
  gap: 10px;
}

.a2-kv-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--a2-border);
}

.a2-kv-row:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.a2-kv-key{
  color: var(--a2-muted);
  font-weight: 800;
  font-size: 13px;
}

.a2-kv-val{
  color: var(--a2-text);
  font-weight: 900;
  text-align: left;
}

[dir="rtl"] .a2-kv-val{
  text-align: right;
}

/* =======================================================================
   6) FORMS
   ======================================================================= */
.a2-form-grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.a2-form-grid-3{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

.a2-form-grid-4{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}

.a2-form-group{
  min-width: 0;
}

.a2-field-full{
  grid-column: 1 / -1;
}

.a2-label{
  display: block;
  margin-bottom: 8px;
  color: var(--a2-text);
  font-size: 13px;
  font-weight: 900;
}

.a2-input,
.a2-select,
.a2-textarea{
  width: 100%;
  border: 1px solid var(--a2-border-2);
  background: #fff;
  border-radius: var(--a2-radius-sm);
  padding: 0 var(--a2-pad-x);
  outline: none;
  transition: .15s ease;
  font-size: 16px;
}

.a2-input,
.a2-select{
  height: var(--a2-h);
}

.a2-textarea{
  min-height: 120px;
  padding: 10px 12px;
  line-height: 1.8;
}

.a2-input::placeholder,
.a2-textarea::placeholder{
  color: #98a2b3;
}

.a2-input:focus,
.a2-select:focus,
.a2-textarea:focus{
  border-color: #c7d2fe;
  box-shadow: 0 0 0 4px var(--a2-primary-soft);
}

.a2-check{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--a2-h);
  font-weight: 800;
}

.a2-check input{
  width: 18px;
  height: 18px;
}

.a2-error{
  margin-top: 6px;
  color: var(--a2-danger);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1200px){
  .a2-form-grid-4{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 980px){
  .a2-form-grid,
  .a2-form-grid-3{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px){
  .a2-form-grid-4{
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------
   Tom Select
   ----------------------------------------------------------------------- */
.ts-wrapper{
  width: 100%;
}

/* Tom Select copies the original <select>'s classes onto its wrapper div.
   Without this reset the wrapper renders the field frame AND the inner
   .ts-control renders its own frame = a doubled border. Strip the wrapper's
   frame so only .ts-control shows.

   Every field class a <select> is written with has to be listed: .a2-input is
   as common on selects as .a2-select is (16 of them across 9 screens), and
   resetting only .a2-select is what left the child-workbench pickers with two
   boxes. */
.ts-wrapper.a2-select,
.ts-wrapper.a2-input,
.ts-wrapper.a2-textarea{
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  height: auto;
  box-shadow: none;
}

/* The original <select> stays in the DOM for form submission, hidden by
   tom-select with clip-path — but it keeps OUR .a2-select sizing (width:100%,
   fixed height), and tom-select's own 1px reset loses on load order. It is
   absolutely positioned, so where no ancestor is positioned it sizes against
   the page and spills past the edge: an invisible field that puts a horizontal
   scrollbar on the screen. Take its layout away for good. */
select.ts-hidden-accessible{
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  /* .a2-select also gives it `transition: .15s ease`, which animates that
     full-width → 1px collapse on every page load: a horizontal scrollbar that
     flashes and goes. Nothing about an invisible field is worth animating. */
  transition: none !important;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control{
  min-height: 40px;
  border: 1px solid var(--a2-border-2);
  border-radius: 14px;
  padding: 7px 12px;
  box-shadow: none;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.multi.input-active .ts-control,
.ts-wrapper.focus .ts-control{
  border-color: #c7d2fe;
  box-shadow: 0 0 0 4px var(--a2-primary-soft);
}

.ts-wrapper .ts-control > input{
  font-size: 14px !important;
}

.ts-wrapper .item{
  font-size: 14px;
  font-weight: 700;
  color: var(--a2-text);
}

.ts-dropdown{
  border: 1px solid var(--a2-border-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(16,24,40,.10);
  z-index: 9999;
  background: #fff;
}

.ts-dropdown .option,
.ts-dropdown .create,
.ts-dropdown .no-results{
  padding: 10px 12px;
  font-size: 14px;
}

.ts-dropdown .active{
  background: #f8fafc;
  color: var(--a2-text);
}

.ts-dropdown .selected{
  background: rgba(11,18,32,.04);
  color: var(--a2-text);
  font-weight: 800;
}

.js-a2-searchable{
  width: 100%;
}

/* =======================================================================
   7) TABLES
   ======================================================================= */
.a2-table-wrap{
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 14px;
  border: 1px solid var(--a2-border);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.a2-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  min-width: 900px;
}

.a2-table thead th{
  background: #f8fafc;
  color: var(--a2-text);
  font-size: 13px;
  font-weight: 900;
  padding: 12px 10px;
  border-bottom: 1px solid var(--a2-border);
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

.a2-table tbody td{
  padding: 12px 10px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
}

.a2-table tbody tr:hover{
  background: #fbfcff;
}

.a2-row-trashed{
  background: #fcfcfd;
  opacity: .88;
}

.a2-actions{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.a2-actions form{
  margin: 0 !important;
}

.a2-checkbox{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  accent-color: var(--a2-primary);
}

/* -----------------------------------------------------------------------
   Results Bar / Pagination
   ----------------------------------------------------------------------- */
.a2-resultsbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--a2-border);
  background: var(--a2-card);
  border-radius: 12px;
  margin: 10px 0 12px;
}

.a2-resultsbar-links{
  display: flex;
  align-items: center;
  gap: 8px;
}

.a2-resultsbar-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--a2-border-2);
  background: #fff;
  color: var(--a2-text);
  font-size: 13px;
  line-height: 1;
  min-width: 84px;
}

.a2-resultsbar-btn:hover{
  background: rgba(11,18,32,.04);
}

.a2-resultsbar-btn.is-disabled{
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.a2-resultsbar-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.a2-resultsbar-sep{
  opacity: .5;
}

.a2-resultsbar-pages{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.a2-pagechip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--a2-border-2);
  border-radius: 10px;
  background: #fff;
  color: var(--a2-text);
  font-size: 13px;
  font-weight: 800;
}

.a2-pagechip:hover{
  background: rgba(11,18,32,.04);
}

.a2-pagechip.is-active{
  background: var(--a2-primary);
  color: #fff;
  border-color: var(--a2-primary);
}

.a2-pagechip.is-dots{
  border-color: transparent;
  background: transparent;
  min-width: auto;
  padding: 0 4px;
}

body.admin-v2 nav[role="navigation"],
body.admin-v2 .pagination,
body.admin-v2 .pagination-wrapper,
body.admin-v2 .pagination-links{
  display: none !important;
}

/* =======================================================================
   8) UTILITIES
   ======================================================================= */
.a2-clip{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.a2-clip--name{ max-width: 150px; }

.a2-clip--email{
  max-width: 150px;
  direction: ltr;
  text-align: left;
}

.a2-clip-10{
  max-width: 10ch;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.a2-td-nowrap{ white-space: nowrap; }
.a2-text-right{ text-align: right !important; }
.a2-text-left{ text-align: left !important; }
.a2-fw-700{ font-weight: 700 !important; }
.a2-fw-800{ font-weight: 800 !important; }
.a2-fw-900{ font-weight: 900 !important; }
.a2-muted{ color: var(--a2-muted) !important; }
.a2-hidden{ display: none !important; }
.a2-w-100{ width: 100% !important; }
.a2-mt-0{ margin-top: 0 !important; }
.a2-mt-8{ margin-top: 8px !important; }
.a2-mt-12{ margin-top: 12px !important; }
.a2-mt-16{ margin-top: 16px !important; }
.a2-mb-0{ margin-bottom: 0 !important; }
.a2-mb-8{ margin-bottom: 8px !important; }
.a2-mb-12{ margin-bottom: 12px !important; }
.a2-mb-16{ margin-bottom: 16px !important; }
.a2-p-0{ padding: 0 !important; }

.js-toggle-active{
  transition: .12s ease;
}

.js-toggle-active:hover{
  transform: translateY(-1px);
}

/* -----------------------------------------------------------------------
   Auth - Luxe Compact
   ----------------------------------------------------------------------- */
.a2-auth--luxe{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 14px;
  background:
    radial-gradient(circle at top right, rgba(11,18,32,.05), transparent 24%),
    radial-gradient(circle at bottom left, rgba(23,92,211,.045), transparent 22%),
    linear-gradient(180deg, #f7f8fc 0%, #eef1f7 100%);
}

.a2-auth-card--luxe{
  width:100%;
  max-width:500px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px;
  box-shadow:
    0 22px 50px rgba(16,24,40,.08),
    0 8px 20px rgba(16,24,40,.04);
  padding:24px 24px 20px;
}

.a2-auth-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}

.a2-auth-brand-block{
  min-width:0;
}

.a2-auth-brand-mini{
  font-size:18px;
  font-weight:900;
  color:var(--a2-primary);
  line-height:1.2;
}

.a2-auth-brand-mini-sub{
  margin-top:4px;
  color:var(--a2-muted);
  font-size:12px;
  font-weight:700;
  line-height:1.5;
}

.a2-auth-logo-wrap{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.a2-auth-logo-wrap img{
  max-width:74px;
  max-height:74px;
  object-fit:contain;
}

.a2-auth-head--luxe{
  text-align:center;
  margin-bottom:18px;
}

.a2-auth-title--luxe{
  margin:0;
  font-size:28px;
  line-height:1.15;
  font-weight:900;
  color:var(--a2-primary);
  letter-spacing:.2px;
}

.a2-auth-subtitle--luxe{
  margin:8px 0 0;
  color:var(--a2-muted);
  font-size:13px;
  font-weight:700;
  line-height:1.7;
}

.a2-auth-form--luxe{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.a2-auth-label{
  margin-bottom:7px;
  font-size:13px;
  font-weight:900;
  color:var(--a2-text);
}

.a2-auth-input--luxe{
  height:48px;
  border-radius:15px;
  padding:0 14px;
  font-size:15px;
  border:1px solid var(--a2-border-2);
  background:#fff;
  box-shadow: inset 0 1px 2px rgba(16,24,40,.02);
}

.a2-auth-input--luxe:focus{
  border-color:#c7d2fe;
  box-shadow:
    0 0 0 4px rgba(99,102,241,.10),
    inset 0 1px 2px rgba(16,24,40,.02);
}

.a2-auth-row--luxe{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-top:2px;
}

.a2-auth-checkbox--luxe{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:800;
  color:#344054;
  cursor:pointer;
  user-select:none;
}

.a2-auth-checkbox--luxe input{
  width:17px;
  height:17px;
  accent-color:var(--a2-primary);
}

.a2-auth-submit--luxe{
  height:50px;
  border-radius:16px;
  font-size:17px;
  font-weight:900;
  margin-top:2px;
  box-shadow:0 12px 24px rgba(11,18,32,.14);
}

.a2-auth-footer--luxe{
  text-align:center;
  margin-top:18px;
  font-size:12px;
  color:var(--a2-muted);
  font-weight:700;
}

/* responsive */
@media (max-width: 640px){
  .a2-auth--luxe{
    padding:14px 10px;
  }

  .a2-auth-card--luxe{
    max-width:100%;
    padding:18px 16px 16px;
    border-radius:20px;
  }

  .a2-auth-top{
    margin-bottom:14px;
  }

  .a2-auth-logo-wrap img{
    max-width:58px;
    max-height:58px;
  }

  .a2-auth-brand-mini{
    font-size:16px;
  }

  .a2-auth-brand-mini-sub{
    font-size:11px;
  }

  .a2-auth-title--luxe{
    font-size:24px;
  }

  .a2-auth-subtitle--luxe{
    font-size:12px;
  }

  .a2-auth-input--luxe{
    height:46px;
    border-radius:14px;
  }

  .a2-auth-submit--luxe{
    height:48px;
    border-radius:15px;
    font-size:16px;
  }
}


/* =======================================================================
   10) PAGE-SPECIFIC OVERRIDES
   ======================================================================= */

/* -----------------------------------------------------------------------
   Global zoom
   ----------------------------------------------------------------------- */
body.admin-v2{ zoom: .9; }

@supports not (zoom: 1){
  body.admin-v2{
    transform: scale(.9);
    transform-origin: top center;
  }
}

/* -----------------------------------------------------------------------
   POSTS - Show / Edit / Index
   body class: admin-v2-posts
   ----------------------------------------------------------------------- */
body.admin-v2.admin-v2-posts .a2-post-show{
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

body.admin-v2.admin-v2-posts .a2-post-show-grid{
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px;
  gap: 16px;
  align-items: start;
}

body.admin-v2.admin-v2-posts .a2-post-content{
  direction: rtl;
  text-align: right;
}

body.admin-v2.admin-v2-posts .a2-post-sidebar{
  position: sticky;
  top: 14px;
  align-self: start;
}

body.admin-v2.admin-v2-posts .a2-post-block{
  padding: 14px;
}

body.admin-v2.admin-v2-posts .a2-post-mainimg{
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

body.admin-v2.admin-v2-posts .a2-post-thumbs{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-top: 10px;
}

body.admin-v2.admin-v2-posts .a2-post-meta{
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

body.admin-v2.admin-v2-posts .a2-post-meta .row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

body.admin-v2.admin-v2-posts .a2-post-meta .k{
  color: var(--a2-muted);
  font-weight: 800;
  font-size: 12px;
}

body.admin-v2.admin-v2-posts .a2-post-meta .v{
  font-weight: 900;
}

body.admin-v2.admin-v2-posts .a2-post-body{
  white-space: pre-wrap;
  line-height: 1.9;
  font-size: 14px;
  word-break: break-word;
}

body.admin-v2.admin-v2-posts .a2-post-form-grid{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: start;
}

body.admin-v2.admin-v2-posts .a2-post-form-main,
body.admin-v2.admin-v2-posts .a2-post-form-side{
  padding: 14px;
}

body.admin-v2.admin-v2-posts .a2-table{
  width: 100%;
  table-layout: fixed;
  min-width: 0;
}

body.admin-v2.admin-v2-posts .a2-table th,
body.admin-v2.admin-v2-posts .a2-table td{
  padding: 5px 6px;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

body.admin-v2.admin-v2-posts .a2-table th:nth-child(1),
body.admin-v2.admin-v2-posts .a2-table td:nth-child(1){ width: 42px; }

body.admin-v2.admin-v2-posts .a2-table th:nth-child(2),
body.admin-v2.admin-v2-posts .a2-table td:nth-child(2){ width: 64px; }

body.admin-v2.admin-v2-posts .a2-table th:nth-child(5),
body.admin-v2.admin-v2-posts .a2-table td:nth-child(5){ width: 60px; }

body.admin-v2.admin-v2-posts .a2-table th:nth-child(6),
body.admin-v2.admin-v2-posts .a2-table td:nth-child(6){ width: 56px; }

body.admin-v2.admin-v2-posts .a2-table th:nth-child(7),
body.admin-v2.admin-v2-posts .a2-table td:nth-child(7){ width: 92px; }

body.admin-v2.admin-v2-posts .a2-table th:nth-child(3),
body.admin-v2.admin-v2-posts .a2-table td:nth-child(3),
body.admin-v2.admin-v2-posts .a2-table th:nth-child(4),
body.admin-v2.admin-v2-posts .a2-table td:nth-child(4){
  width: auto;
  min-width: 90px;
  padding: 5px 4px;
  font-size: 11px;
}

body.admin-v2.admin-v2-posts .a2-table td:nth-child(3){
  text-align: right;
}

body.admin-v2.admin-v2-posts .a2-table td:nth-child(4){
  text-align: left;
  direction: ltr;
}

@media (max-width: 980px){
  body.admin-v2.admin-v2-posts .a2-post-show-grid,
  body.admin-v2.admin-v2-posts .a2-post-form-grid{
    grid-template-columns: 1fr;
  }

  body.admin-v2.admin-v2-posts .a2-post-sidebar{
    position: static;
  }
}

@media (max-width: 520px){
  body.admin-v2.admin-v2-posts .a2-post-thumbs{
    grid-template-columns: repeat(3,1fr);
  }
}

/* -----------------------------------------------------------------------
   Wallet Transactions
   body class: admin-v2-wallet-transactions
   ----------------------------------------------------------------------- */
body.admin-v2.admin-v2-wallet-transactions .a2-page{
  max-width: 1320px;
  margin: 0 auto;
}

body.admin-v2.admin-v2-wallet-transactions .a2-tx-grid{
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0,1fr) 340px;
  gap: 12px;
  align-items: start;
}

body.admin-v2.admin-v2-wallet-transactions .a2-tx-main,
body.admin-v2.admin-v2-wallet-transactions .a2-tx-side{
  direction: rtl;
  text-align: right;
}

body.admin-v2.admin-v2-wallet-transactions .a2-tx-side{
  position: sticky;
  top: 90px;
  align-self: start;
}

body.admin-v2.admin-v2-wallet-transactions .a2-tx-main .a2-table{
  min-width: 0 !important;
  table-layout: fixed;
}

body.admin-v2.admin-v2-wallet-transactions .a2-tx-main .a2-table th,
body.admin-v2.admin-v2-wallet-transactions .a2-tx-main .a2-table td{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.admin-v2.admin-v2-wallet-transactions .a2-tx-info-wrap{
  border-radius: 14px;
}

body.admin-v2.admin-v2-wallet-transactions .a2-tx-info-table{
  min-width: 0 !important;
  width: 100%;
  table-layout: fixed;
}

body.admin-v2.admin-v2-wallet-transactions .a2-tx-info-table th{
  text-align: right;
  width: 120px;
  color: var(--a2-muted);
  font-weight: 800;
  background: #fff;
}

body.admin-v2.admin-v2-wallet-transactions .a2-tx-info-table td{
  text-align: right;
  font-weight: 800;
}

body.admin-v2.admin-v2-wallet-transactions .a2-tx-info-table th,
body.admin-v2.admin-v2-wallet-transactions .a2-tx-info-table td{
  padding: 10px 12px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 980px){
  body.admin-v2.admin-v2-wallet-transactions .a2-tx-grid{
    grid-template-columns: 1fr;
  }

  body.admin-v2.admin-v2-wallet-transactions .a2-tx-side{
    position: static;
  }
}

/* -----------------------------------------------------------------------
   Service Fees
   ----------------------------------------------------------------------- */
.a2-service-fee-form-grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.a2-sf-section-card{
  padding: 18px;
  min-width: 0;
}

.a2-sf-card-title{
  font-size: 17px;
  margin-bottom: 14px;
  font-weight: 800;
}

.a2-sf-grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}

.a2-sf-grid-3{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}

.a2-sf-field{
  min-width: 0;
}

.a2-sf-check{
  display: flex;
  align-items: end;
}

.a2-sf-check label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

@media (max-width: 1200px){
  .a2-service-fee-form-grid,
  .a2-sf-grid-3{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px){
  .a2-sf-grid{
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------
   Subscriptions
   ----------------------------------------------------------------------- */
body.admin-v2.admin-v2-subscriptions .a2-page{
  max-width: 1320px;
  margin: 0 auto;
}

.a2-nav-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  background: rgba(255,255,255,.75);
  flex: 0 0 auto;
}

.a2-nav-bullet{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
  background: rgba(255,255,255,.55);
  flex: 0 0 auto;
}

.a2-nav-child-link.is-active .a2-nav-bullet{
  background: #fff;
}

.a2-album-cover-empty{
  width:52px;
  height:52px;
  border-radius:12px;
  border:1px dashed var(--a2-border-2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--a2-muted);
  margin-inline:auto;
}

/* -----------------------------------------------------------------------
   Albums - Edit / Form
   ----------------------------------------------------------------------- */
.a2-page-narrow{
  max-width:980px;
  margin:0 auto;
}

.a2-card-flat{
  box-shadow:none;
  border:1px solid var(--a2-border);
}

.a2-errors-list{
  margin:0;
  padding-inline-start:18px;
}

.a2-album-edit-grid{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:12px;
  align-items:start;
}

.a2-album-cover-body,
.a2-album-gallery-body{
  padding:14px;
}

.a2-album-cover-preview-wrap{
  width:100%;
  display:flex;
  justify-content:center;
}

.a2-album-cover-preview-img{
  width:100%;
  max-width:300px;
  height:300px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid var(--a2-border);
}

.a2-album-cover-placeholder{
  width:100%;
  height:260px;
  border-radius:18px;
  border:1px dashed var(--a2-border-2);
  display:flex;
  align-items:center;
  justify-content:center;
}

.a2-album-upload-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.a2-album-file-input{
  max-width:100%;
}

.a2-album-images-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
}

.a2-album-img-card{
  padding:10px;
}

.a2-album-img-open{
  all:unset;
  cursor:pointer;
  display:block;
  width:100%;
}

.a2-album-grid-image{
  width:100%;
  height:170px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--a2-border);
  display:block;
}

.a2-album-grid-placeholder{
  width:100%;
  height:170px;
  border-radius:12px;
  border:1px dashed var(--a2-border-2);
  display:flex;
  align-items:center;
  justify-content:center;
}

.a2-album-img-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:10px;
  align-items:center;
}

@media (max-width: 980px){
  .a2-album-edit-grid{
    grid-template-columns:1fr;
  }
}

/* Album SHOW page — these were never defined, so images rendered at their
   natural (huge) size and the two-column layout collapsed. Mirrors the edit
   page: a details column beside cover+gallery, thumbnails as fixed cards. */
.a2-album-show-grid{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:12px;
  align-items:start;
}

.a2-album-details-body{
  padding:14px;
}

.a2-album-desc-box{
  max-height:160px;
  overflow:auto;
  white-space:pre-wrap;
}

.a2-album-show-images-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
}

.a2-album-show-image-card{
  padding:10px;
}

.a2-album-show-image-link{
  all:unset;
  cursor:pointer;
  display:block;
  width:100%;
}

.a2-album-show-thumb{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--a2-border);
  display:block;
}

.a2-album-show-thumb-placeholder{
  width:100%;
  height:160px;
  border-radius:12px;
  border:1px dashed var(--a2-border-2);
  display:flex;
  align-items:center;
  justify-content:center;
}

@media (max-width: 980px){
  .a2-album-show-grid{
    grid-template-columns:1fr;
  }
}
/* -----------------------------------------------------------------------
   Bookable Items
   ----------------------------------------------------------------------- */
.a2-bookable-service-cell{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.a2-bookable-deposit-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.a2-bookable-deposit-amount{
  font-weight: 900;
  color: var(--a2-text);
}
.a2-bookable-deposit-label{
  font-size: 11px;
  color: var(--a2-muted);
}
.a2-form-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.a2-col-span-full{
grid-column:1/-1;
}

.a2-card-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:14px;
}

.a2-mb-12{
margin-bottom:12px;
}

@media (max-width:980px){

.a2-form-grid{
grid-template-columns:1fr;
}

}
.calendar-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:6px;
margin-top:12px;
}

.calendar-day{
border:1px solid var(--a2-border);
border-radius:10px;
padding:8px;
min-height:80px;
background:#fff;
}

.calendar-day.blocked{
background:#fee2e2;
}

.calendar-day.priced{
background:#e0f2fe;
}

.day-number{
font-weight:700;
font-size:14px;
}

.day-label{
font-size:11px;
margin-top:6px;
}

.day-label.blocked{
color:#dc2626;
}

.day-label.price{
color:#0284c7;
}
/* -----------------------------------------------------------------------
   Bookable Calendar
   ----------------------------------------------------------------------- */
.a2-bookcal-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 360px;
  gap:16px;
  align-items:start;
}

.a2-bookcal-weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  margin-bottom:8px;
}

.a2-bookcal-weekdays > div{
  text-align:center;
  font-size:13px;
  font-weight:800;
  color:var(--a2-muted);
  padding:8px 0;
}

.a2-bookcal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}

.a2-bookcal-day{
  border:1px solid var(--a2-border);
  background:#fff;
  border-radius:14px;
  min-height:110px;
  padding:10px;
  text-align:right;
  cursor:pointer;
  transition:.15s ease;
}

.a2-bookcal-day:hover{
  transform:translateY(-1px);
  box-shadow:var(--a2-shadow-soft);
}

.a2-bookcal-day.is-muted{
  opacity:.45;
  background:#fafafa;
}

.a2-bookcal-day.is-today{
  border-color:#c7d2fe;
  box-shadow:0 0 0 3px rgba(99,102,241,.10);
}

.a2-bookcal-day.has-blocked{
  background:#fff1f2;
}

.a2-bookcal-day.has-price{
  background-image:linear-gradient(to bottom, rgba(23,92,211,.03), rgba(23,92,211,.03));
}

.a2-bookcal-day-num{
  font-size:16px;
  font-weight:900;
  margin-bottom:8px;
}

.a2-bookcal-day-badges{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.a2-bookcal-side{
  position:sticky;
  top:80px;
}

.a2-bookcal-picked-date{
  font-size:18px;
  font-weight:900;
  margin-bottom:12px;
}

.a2-bookcal-info-block{
  margin-bottom:12px;
}

.a2-bookcal-list{
  display:grid;
  gap:8px;
}

.a2-bookcal-entry{
  border:1px solid var(--a2-border);
  border-radius:12px;
  background:#fff;
  padding:10px;
}

.a2-bookcal-form{
  display:grid;
  gap:10px;
}

@media (max-width: 1100px){
  .a2-bookcal-layout{
    grid-template-columns:1fr;
  }

  .a2-bookcal-side{
    position:static;
  }
}

@media (max-width: 820px){
  .a2-bookcal-grid,
  .a2-bookcal-weekdays{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Range selection */
.a2-bookcal-day.is-range-start{
  background:#6366f1;
  color:#fff;
}

.a2-bookcal-day.is-range-end{
  background:#6366f1;
  color:#fff;
}

.a2-bookcal-day.is-in-range{
  background:#e0e7ff;
}

.a2-bookcal-day.is-drag-hover{
  outline:2px dashed #6366f1;
}

.a2-tabs{
  display:flex;
  gap:6px;
  border-bottom:1px solid #e5e7eb;
  margin-bottom:16px;
}

.a2-tab{
  padding:10px 16px;
  border-radius:8px 8px 0 0;
  background:#f3f4f6;
  text-decoration:none;
  font-weight:600;
  color:#374151;
}

.a2-tab:hover{
  background:#e5e7eb;
}

.a2-tab.is-active{
  background:#fff;
  border:1px solid #e5e7eb;
  border-bottom:none;
}
/* -----------------------------------------------------------------------
   Bookable Item Tabs
   ----------------------------------------------------------------------- */
.a2-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
  border-bottom:1px solid var(--a2-border);
  padding-bottom:8px;
}

.a2-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid transparent;
  background:#f8fafc;
  color:var(--a2-text);
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  transition:.15s ease;
}

.a2-tab:hover{
  background:#eef2f7;
}

.a2-tab.is-active{
  background:var(--a2-primary);
  color:#fff;
  border-color:var(--a2-primary);
}
.a2-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.a2-col-span-full{
  grid-column:1 / -1;
}

.a2-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

@media (max-width:980px){
  .a2-form-grid{
    grid-template-columns:1fr;
  }
}
.a2-errors-list{
  margin:0;
  padding-inline-start:18px;
}
.a2-datetime-range-grid{
    align-items:start;
}

.a2-datetime-input{
    direction:ltr;
    text-align:left;
    min-height:44px;
    appearance:auto;
    -webkit-appearance:auto;
}

.a2-datetime-input--sm{
    width:100%;
    max-width:320px;
}

.a2-datetime-input::-webkit-calendar-picker-indicator{
    opacity:1;
    cursor:pointer;
}
.a2-time-input{
    direction:ltr;
    text-align:left;
    max-width:220px;
    appearance:auto;
    -webkit-appearance:auto;
}

.a2-time-input::-webkit-calendar-picker-indicator{
    opacity:1;
    cursor:pointer;
}
/* =========================================================
   Bookable Items Calendar
========================================================= */

.a2-bookcal-alert{
    margin-bottom:16px;
}

.a2-bookcal-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 340px;
    gap:20px;
    align-items:start;
}



.a2-bookcal-main-card{
    overflow:hidden;
    padding:18px;
}

.a2-bookcal-weekdays{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:12px;
    margin-bottom:14px;
    color:var(--a2-muted);
    font-weight:800;
    font-size:13px;
    text-align:center;
}

.a2-bookcal-grid{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:12px;
}

.a2-bookcal-day{
    position:relative;
    width:100%;
    min-height:150px;
    border:1px solid #e7ebf3;
    border-radius:22px;
    background:#fff;
    padding:14px 12px 12px;
    text-align:right;
    transition:.18s ease;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    box-shadow:none;
    overflow:hidden;
}

.a2-bookcal-day:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(15, 23, 42, .06);
    border-color:#dbe4f0;
}

.a2-bookcal-day.is-muted{
    opacity:.55;
    background:#fafafa;
}

.a2-bookcal-day.is-today{
    border-color:#c7d2fe;
    box-shadow:0 0 0 3px rgba(99,102,241,.08);
}

.a2-bookcal-day.is-blocked{
    background:#fff5f5;
    border-color:#fecaca;
}

.a2-bookcal-day.has-rule{
    background:#f8fbff;
}

.a2-bookcal-day.is-blocked.has-rule{
    background:linear-gradient(180deg, #fff5f5 0%, #f8fbff 100%);
}

.a2-bookcal-day{
    position:relative;
    width:100%;
    min-height:150px;
    border:1px solid #e7ebf3;
    border-radius:22px;
    background:#fff;
    padding:14px 12px 12px;
    text-align:right;
    transition:.18s ease;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    box-shadow:none;
    overflow:hidden;
}

.a2-bookcal-day-top{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-bottom:10px;
    min-height:24px;
}

.a2-bookcal-day-num{
    font-weight:900;
    font-size:22px;
    color:#0f172a;
    line-height:1;
    display:inline-block;
}

.a2-bookcal-price-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:10px;
}

.a2-bookcal-price{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:88px;
    max-width:96px;
    font-size:11px;
    font-weight:900;
    color:var(--a2-primary);
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:999px;
    padding:6px 8px;
    line-height:1.15;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

.a2-bookcal-price small{
    display:block;
    margin-top:2px;
    font-size:10px;
    font-weight:800;
    color:#64748b;
}

.a2-bookcal-flags{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:8px;
    min-height:24px;
}

.a2-bookcal-rule-note{
    font-size:12px;
    color:var(--a2-muted);
    line-height:1.5;
    min-height:34px;
    margin-bottom:10px;
    word-break:break-word;
}

.a2-bookcal-day-badges{
    margin-top:auto;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.a2-bookcal-day .a2-pill{
    font-size:11px;
    padding:5px 10px;
    border-radius:999px;
}

.a2-bookcal-day.is-range-start,
.a2-bookcal-day.is-range-end{
    border-color:#6366f1;
    box-shadow:0 0 0 3px rgba(99,102,241,.14);
}

.a2-bookcal-day.is-in-range{
    background:#eef2ff;
    border-color:#c7d2fe;
}

.a2-bookcal-side{
    position:sticky;
    top:84px;
}

.a2-bookcal-picked-date{
    font-weight:900;
    font-size:15px;
    margin-bottom:14px;
    color:#0f172a;
}

.a2-bookcal-info-block + .a2-bookcal-info-block{
    margin-top:16px;
}

.a2-bookcal-list{
    margin-top:8px;
}

.a2-bookcal-form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.a2-bookcal-form .a2-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.a2-card--soft{
    border:1px solid var(--a2-border);
    background:#f8fafc;
    border-radius:14px;
}

@media (max-width: 1200px){
    .a2-bookcal-layout{
        grid-template-columns:1fr;
    }

    .a2-bookcal-side{
        position:static;
        top:auto;
    }
}

@media (max-width: 860px){
    .a2-bookcal-grid,
    .a2-bookcal-weekdays{
        gap:8px;
    }

    .a2-bookcal-day{
        min-height:132px;
        padding:12px 10px;
        border-radius:18px;
    }

    .a2-bookcal-price{
        min-width:72px;
        max-width:78px;
        font-size:10px;
        padding:5px 7px;
    }

    .a2-bookcal-day-num{
        font-size:15px;
    }
}

@media (max-width: 640px){
    .a2-bookcal-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .a2-bookcal-weekdays{
        display:none;
    }

    .a2-bookcal-form .a2-form-grid{
        grid-template-columns:1fr;
    }
}

/* ... باقي CSS الخاص بالكاليندر ... */

.a2-bookslot-edit-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 320px;
    gap:20px;
    align-items:start;
}

.a2-kv{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.a2-kv-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px 0;
    border-bottom:1px dashed var(--a2-border);
}

.a2-kv-row:last-child{
    border-bottom:0;
}

.a2-kv-key{
    color:var(--a2-muted);
    font-weight:700;
}

.a2-kv-value{
    font-weight:800;
    color:var(--a2-text);
    text-align:left;
}

@media (max-width: 1100px){
    .a2-bookslot-edit-layout{
        grid-template-columns:1fr;
    }
}
.a2-service-check-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px;
}

.a2-service-check{
    display:block;
    cursor:pointer;
}

.a2-service-check input{
    display:none;
}

.a2-service-check-box{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:14px 16px;
    border:1px solid var(--a2-border);
    border-radius:16px;
    background:#fff;
    transition:.16s ease;
}

.a2-service-check-box strong{
    font-size:14px;
    color:var(--a2-text);
    font-weight:800;
}

.a2-service-check-box small{
    font-size:12px;
    color:var(--a2-muted);
}

.a2-service-check input:checked + .a2-service-check-box{
    border-color:#6366f1;
    background:#eef2ff;
    box-shadow:0 0 0 3px rgba(99,102,241,.12);
}
/* =========================================================
   Categories / Booking Profile
========================================================= */

.a2-check-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px;
}

.a2-check-grid--sm{
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}

.a2-check-card{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 14px;
    border:1px solid var(--a2-border);
    border-radius:16px;
    background:#fff;
    cursor:pointer;
    transition:.16s ease;
    min-height:56px;
}

.a2-check-card:hover{
    border-color:#c7d2fe;
    box-shadow:0 0 0 3px rgba(99,102,241,.08);
}

.a2-check-card input[type="checkbox"]{
    margin-top:3px;
    flex:0 0 auto;
}

.a2-check-card span{
    display:block;
    line-height:1.5;
    color:var(--a2-text);
    font-weight:700;
}

.a2-check-card strong{
    display:block;
    font-size:14px;
    font-weight:800;
    color:var(--a2-text);
}

.a2-check-card small{
    display:block;
    margin-top:4px;
    color:var(--a2-text-soft);
    font-size:12px;
    font-weight:600;
}

.a2-check-section{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.a2-check-section + .a2-check-section{
    margin-top:18px;
}

.a2-check-section-title{
    font-size:14px;
    font-weight:800;
    color:var(--a2-text);
    margin-bottom:2px;
}

.a2-booking-config-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    align-items:start;
}

.a2-flag-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px;
}

@media (max-width: 980px){
    .a2-booking-config-grid{
        grid-template-columns:1fr;
    }

    .a2-check-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width: 640px){
    .a2-check-grid,
    .a2-check-grid--sm,
    .a2-flag-grid{
        grid-template-columns:1fr;
    }
}
/* =========================================================
   Categories / Booking Config Panel
========================================================= */

.a2-check-section{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.a2-check-section + .a2-check-section{
    margin-top:18px;
}

.a2-check-section-title{
    font-size:14px;
    font-weight:800;
    color:var(--a2-text);
    margin-bottom:2px;
}

.a2-check-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px;
}

.a2-check-grid--sm{
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}

.a2-check-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border:1px solid var(--a2-border);
    border-radius:16px;
    background:#fff;
    cursor:pointer;
    transition:.16s ease;
    min-height:58px;
}

.a2-check-card:hover{
    border-color:#c7d2fe;
    box-shadow:0 0 0 3px rgba(99,102,241,.08);
}

.a2-check-card input[type="checkbox"]{
    flex:0 0 auto;
    margin:0;
}

.a2-check-card span{
    display:block;
    line-height:1.45;
    color:var(--a2-text);
    font-weight:700;
    text-align:right;
    flex:1 1 auto;
}

.a2-booking-config-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    align-items:start;
}

.a2-flag-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px;
}

@media (max-width: 1100px){
    .a2-booking-config-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 900px){
    .a2-check-grid,
    .a2-check-grid--sm,
    .a2-flag-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px){
    .a2-check-grid,
    .a2-check-grid--sm,
    .a2-flag-grid{
        grid-template-columns:1fr;
    }

    .a2-check-card{
        min-height:54px;
        padding:12px 14px;
    }
}
.a2-check-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:12px;
}

.a2-check-grid--sm{
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}

.a2-check-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border:1px solid var(--a2-border);
    border-radius:16px;
    background:#fff;
    cursor:pointer;
    transition:.16s ease;
    min-height:58px;
}

.a2-check-card:hover{
    border-color:#c7d2fe;
    box-shadow:0 0 0 3px rgba(99,102,241,.08);
}

.a2-check-card span{
    flex:1 1 auto;
    text-align:right;
}

.a2-check-card strong{
    display:block;
    font-weight:800;
}

.a2-check-card small{
    display:block;
    margin-top:4px;
    color:var(--a2-text-soft);
}

.a2-option-dual-wrap{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 120px minmax(0, 1fr);
    gap:16px;
    align-items:stretch;
}

.a2-option-dual-actions{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
}

.a2-option-list{
    min-height:420px;
    max-height:520px;
    overflow:auto;
    padding:0 16px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.a2-option-item{
    border:1px solid var(--a2-border);
    border-radius:14px;
    padding:12px 14px;
    cursor:pointer;
    background:#fff;
    transition:.16s ease;
}

.a2-option-item:hover{
    border-color:#c7d2fe;
    box-shadow:0 0 0 3px rgba(99,102,241,.08);
}

.a2-option-item.is-selected{
    background:#eef2ff;
    border-color:#6366f1;
}

.a2-option-item strong{
    display:block;
    font-weight:800;
}

.a2-option-item small{
    display:block;
    margin-top:4px;
    color:var(--a2-text-soft);
}

@media (max-width: 960px){
    .a2-option-dual-wrap{
        grid-template-columns:1fr;
    }

    .a2-option-dual-actions{
        flex-direction:row;
    }
}
.a2-option-chip-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}

.a2-option-chip-card{
  border:1px solid var(--a2-border);
  background:#fff;
  border-radius:14px;
  padding:12px 14px;
  box-shadow:var(--a2-shadow-soft);
}

.a2-option-chip-title{
  font-weight:900;
  color:var(--a2-text);
  line-height:1.5;
}

.a2-option-chip-sub{
  margin-top:6px;
  color:var(--a2-muted);
  font-size:12px;
  font-weight:700;
}

.a2-option-dual-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);
  gap:16px;
  align-items:stretch;
}

.a2-option-dual-actions{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}

.a2-option-list{
  min-height:420px;
  max-height:520px;
  overflow:auto;
  padding:0 16px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.a2-option-item{
  border:1px solid var(--a2-border);
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
  background:#fff;
  transition:.16s ease;
}

.a2-option-item:hover{
  border-color:#c7d2fe;
  box-shadow:0 0 0 3px rgba(99,102,241,.08);
}

.a2-option-item.is-selected{
  background:#eef2ff;
  border-color:#6366f1;
}

.a2-option-item strong{
  display:block;
  font-weight:800;
}

.a2-option-item small{
  display:block;
  margin-top:4px;
  color:var(--a2-muted);
}

@media (max-width: 980px){
  .a2-option-chip-grid{
    grid-template-columns:1fr;
  }

  .a2-option-dual-wrap{
    grid-template-columns:1fr;
  }

  .a2-option-dual-actions{
    flex-direction:row;
  }
}
.a2-filterbar{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.a2-filterbar .a2-filter-search{
  flex: 1 1 260px;
  min-width: 260px;
}

.a2-filterbar .a2-filter-sm{
  min-width: 140px;
}

.a2-filterbar .a2-filter-md{
  min-width: 220px;
}

.a2-filterbar .ts-wrapper{
  min-width: 220px;
  flex: 0 1 260px;
}

.a2-filterbar .ts-wrapper.multi .ts-control{
  min-height: var(--a2-h);
  border: 1px solid var(--a2-border-2);
  border-radius: 12px;
  padding: 6px 10px;
  background: #fff;
  box-shadow: none;
}

.a2-filterbar .ts-wrapper.multi .ts-control .item{
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a2-filterbar .a2-filter-actions{
  margin-inline-start: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 768px){
  .a2-filterbar .a2-filter-search,
  .a2-filterbar .a2-filter-sm,
  .a2-filterbar .a2-filter-md,
  .a2-filterbar .ts-wrapper{
    min-width: 100%;
    flex: 1 1 100%;
  }

  .a2-filterbar .a2-filter-actions{
    margin-inline-start: 0;
    width: 100%;
  }
}
.a2-filterbar .ts-wrapper{
  min-width: 220px;
  flex: 0 1 260px;
}

.a2-filterbar .ts-wrapper.multi .ts-control{
  min-height: var(--a2-h);
  border: 1px solid var(--a2-border-2);
  border-radius: 12px;
  padding: 6px 10px;
  background: #fff;
  box-shadow: none;
}

.a2-filterbar .ts-wrapper.multi .ts-control .item{
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fix duplicated look for Tom Select inside users filterbar */
.admin-v2-users .a2-filterbar #filterOption {
  display: none !important;
}

.admin-v2-users .a2-filterbar .ts-wrapper {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 220px;
  flex: 0 1 260px;
}

.admin-v2-users .a2-filterbar .ts-wrapper.multi .ts-control,
.admin-v2-users .a2-filterbar .ts-wrapper.single .ts-control {
  min-height: var(--a2-h);
  border: 1px solid var(--a2-border-2);
  border-radius: 12px;
  padding: 6px 10px;
  background: #fff;
  box-shadow: none;
}

.admin-v2-users .a2-filterbar .ts-wrapper.focus .ts-control {
  border-color: #c7d2fe;
  box-shadow: 0 0 0 4px var(--a2-primary-soft);
}

.admin-v2-users .a2-filterbar .ts-wrapper .item {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a2-filter-services {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 10px;
  border: 1px dashed var(--a2-border-2);
  border-radius: 10px;
  background: #fafafa;
}

.a2-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

/* =======================================================================
   11) FINAL ADMIN V2 STABILIZATION PATCH
   Added for platform services / fees / bookings / wallet / consents
   ======================================================================= */

/* -----------------------------------------------------------------------
   General helpers
   ----------------------------------------------------------------------- */
.a2-page-narrow{
  max-width: 1180px;
  margin: 0 auto;
}

.a2-text-center{
  text-align: center !important;
}

.a2-text-start{
  text-align: start !important;
}

.a2-text-end{
  text-align: end !important;
}

.a2-nowrap{
  white-space: nowrap !important;
}

.a2-break{
  word-break: break-word !important;
}

.a2-prewrap{
  white-space: pre-wrap !important;
}

.a2-inline-actions{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.a2-stack{
  display: grid;
  gap: 12px;
}

.a2-stack-sm{
  display: grid;
  gap: 8px;
}

.a2-flex{
  display: flex;
  align-items: center;
  gap: 10px;
}

.a2-flex-wrap{
  flex-wrap: wrap;
}

.a2-flex-between{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------
   Sidebar / menu stabilization
   ----------------------------------------------------------------------- */
.a2-sidebar{
  min-height: 100vh;
}

.a2-nav{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}

.a2-nav::-webkit-scrollbar{
  width: 8px;
}

.a2-nav::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}

.a2-nav-group{
  border-radius: 12px;
}

.a2-nav-child-link .a2-nav-text,
.a2-nav-link .a2-nav-text,
.a2-nav-parent .a2-nav-text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a2-nav-bullet{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  flex: 0 0 auto;
}

.a2-nav-child-link.is-active .a2-nav-bullet{
  background: #fff;
}

body.a2-sidebar-mini .a2-nav-child-link{
  justify-content: center;
}

body.a2-sidebar-mini .a2-sidebar:hover .a2-nav-child-link{
  justify-content: flex-start;
}

/* -----------------------------------------------------------------------
   Topbar / userbar stabilization
   ----------------------------------------------------------------------- */
.a2-topbar-right{
  min-width: 0;
}

.a2-userbar{
  min-width: 0;
}

.a2-user-name{
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a2-user-role{
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media(max-width: 640px){
  .a2-userbar .a2-btn{
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  .a2-avatar{
    width: 34px;
    height: 34px;
  }
}

/* -----------------------------------------------------------------------
   Cards / sections
   ----------------------------------------------------------------------- */
.a2-card-muted{
  background: #f8fafc;
  border: 1px solid var(--a2-border);
  border-radius: var(--a2-radius-md);
  padding: 14px;
}

.a2-card-grid-2{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.a2-card-grid-3{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

.a2-card-grid-4{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}

@media(max-width: 1100px){
  .a2-card-grid-4{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media(max-width: 900px){
  .a2-card-grid-2,
  .a2-card-grid-3{
    grid-template-columns: 1fr;
  }
}

@media(max-width: 700px){
  .a2-card-grid-4{
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------
   Key / Value reusable blocks
   ----------------------------------------------------------------------- */
.a2-kv-grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}

.a2-kv-grid-3{
  grid-template-columns: repeat(3,minmax(0,1fr));
}

.a2-kv-grid-4{
  grid-template-columns: repeat(4,minmax(0,1fr));
}

.a2-kv-box{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
}

.a2-kv-box span{
  display: block;
  font-size: 12px;
  color: var(--a2-muted);
  margin-bottom: 6px;
  font-weight: 800;
}

.a2-kv-box strong{
  display: block;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  word-break: break-word;
}

@media(max-width: 1100px){
  .a2-kv-grid-4{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media(max-width: 760px){
  .a2-kv-grid,
  .a2-kv-grid-3,
  .a2-kv-grid-4{
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------
   Tables stabilization
   ----------------------------------------------------------------------- */
.a2-table-wrap{
  max-width: 100%;
}

.a2-table td .a2-btn,
.a2-table th .a2-btn{
  white-space: nowrap;
}

.a2-table td.a2-text-right,
.a2-table th.a2-text-right{
  text-align: right !important;
}

.a2-table td.a2-text-left,
.a2-table th.a2-text-left{
  text-align: left !important;
}

.a2-table td.a2-text-center,
.a2-table th.a2-text-center{
  text-align: center !important;
}

.a2-table .a2-muted{
  white-space: normal;
}

.a2-table-actions{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.a2-table-actions form{
  margin: 0;
}

/* -----------------------------------------------------------------------
   Forms / filters stabilization
   ----------------------------------------------------------------------- */
.a2-filterbar{
  margin-bottom: 0;
}

.a2-filterbar .a2-label{
  margin-bottom: 6px;
}

.a2-filter-lg{
  min-width: 220px;
}

.a2-filter-xl{
  min-width: 280px;
}

@media(max-width: 768px){
  .a2-filter-lg,
  .a2-filter-xl{
    min-width: 100%;
    flex: 1 1 100%;
  }
}

.a2-help-block{
  margin-top: 6px;
  color: var(--a2-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.a2-input[readonly],
.a2-select[readonly],
.a2-textarea[readonly]{
  background: #f8fafc;
  color: var(--a2-muted);
}

.a2-input:disabled,
.a2-select:disabled,
.a2-textarea:disabled{
  background: #f8fafc;
  color: #98a2b3;
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------
   Consent screens
   ----------------------------------------------------------------------- */
.consent-grid{
  display: grid;
  grid-template-columns: minmax(320px,.8fr) minmax(0,1.2fr);
  gap: 16px;
}

.consent-card{
  padding: 18px;
}

.consent-kv,
.consent-meta{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}

.consent-kv > div,
.consent-meta > div{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
}

.consent-kv span,
.consent-meta span{
  display: block;
  color: var(--a2-muted);
  font-size: 12px;
  margin-bottom: 6px;
  font-weight: 800;
}

.consent-kv strong,
.consent-meta strong{
  display: block;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  word-break: break-word;
}

.consent-checks{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}

.consent-check-card{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
}

.consent-check-card.is-on{
  border-color: #22c55e;
  background: #f0fdf4;
}

.consent-check-card input{
  margin-top: 4px;
}

.consent-check-card strong{
  display: block;
  font-weight: 900;
  margin-bottom: 4px;
}

.consent-check-card small{
  display: block;
  color: var(--a2-muted);
  line-height: 1.6;
}

@media(max-width: 1000px){
  .consent-grid{
    grid-template-columns: 1fr;
  }
}

@media(max-width: 700px){
  .consent-kv,
  .consent-meta{
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------
   Booking show / wallet shared grids
   ----------------------------------------------------------------------- */
.bk-actions-card{
  padding: 18px;
  margin-bottom: 16px;
}

.bk-action-grid{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}

.bk-action-grid form{
  margin: 0;
}

.bk-action-btn{
  width: 100%;
  justify-content: center;
}

.bk-show-grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.bk-show-card,
.bk-wide-card{
  padding: 18px;
  min-width: 0;
}

.bk-wide-card{
  margin-top: 16px;
}

.bk-kv-grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}

.bk-kv-grid-4{
  grid-template-columns: repeat(4,minmax(0,1fr));
}

.bk-kv{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
}

.bk-kv span{
  display: block;
  font-size: 12px;
  color: var(--a2-muted);
  margin-bottom: 6px;
  font-weight: 800;
}

.bk-kv strong{
  display: block;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
  word-break: break-word;
}

@media(max-width: 1200px){
  .bk-action-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .bk-kv-grid-4{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media(max-width: 900px){
  .bk-show-grid{
    grid-template-columns: 1fr;
  }
}

@media(max-width: 700px){
  .bk-action-grid,
  .bk-kv-grid,
  .bk-kv-grid-4{
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------
   Wallet transaction show
   ----------------------------------------------------------------------- */
.tx-grid{
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(320px,.7fr);
  gap: 16px;
}

.tx-card{
  padding: 18px;
}

.tx-kv{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}

.tx-kv-4{
  grid-template-columns: repeat(4,minmax(0,1fr));
}

.tx-kv > div{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
}

.tx-kv span{
  display: block;
  font-size: 12px;
  color: var(--a2-muted);
  margin-bottom: 6px;
  font-weight: 800;
}

.tx-kv strong{
  display: block;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  word-break: break-word;
}

.tx-note{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
  white-space: pre-wrap;
}

.tx-json{
  margin-top: 12px;
  padding: 14px;
  background: #0f172a;
  color: #e5e7eb;
  border-radius: 14px;
  overflow: auto;
  direction: ltr;
  text-align: left;
  font-size: 13px;
  line-height: 1.6;
}

@media(max-width: 1100px){
  .tx-grid,
  .tx-kv-4{
    grid-template-columns: 1fr;
  }
}

@media(max-width: 700px){
  .tx-kv{
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------
   Auth body compatibility
   ----------------------------------------------------------------------- */
body.admin-v2-auth{
  min-height: 100vh;
  background: var(--a2-bg);
}

/* -----------------------------------------------------------------------
   Safer print mode
   ----------------------------------------------------------------------- */
@media print{
  .a2-sidebar,
  .a2-topbar,
  .a2-page-actions,
  .a2-filterbar,
  .a2-resultsbar{
    display: none !important;
  }

  .a2-main,
  .a2-content{
    padding: 0 !important;
    margin: 0 !important;
  }

  .a2-card{
    box-shadow: none !important;
    break-inside: avoid;
  }
}

/* =======================================================================
   12) BOOKINGS UX - BIM-2.4.2 FINAL
   Notes:
   - All Booking CSS is consolidated here.
   - Do not add Booking CSS inside Blade files.
   - This block intentionally overrides the generic .a2-table min-width / nowrap
     only inside Booking screens.
   ======================================================================= */

/* -----------------------------------------------------------------------
   Booking Create / Edit Form Shell
   body classes:
   - admin-v2-bookings-create
   - admin-v2-bookings-edit
   ----------------------------------------------------------------------- */

.admin-v2-bookings-create .bk-error-list,
.admin-v2-bookings-edit .bk-error-list,
.admin-v2-bookings-index .bk-error-list,
.admin-v2-bookings-index-compact .bk-error-list {
    margin: 0;
    padding-inline-start: 18px;
}

.admin-v2-bookings-create .bk-form-errors,
.admin-v2-bookings-edit .bk-form-errors {
    margin-bottom: 12px;
}

.admin-v2-bookings-create .bk-form-shell,
.admin-v2-bookings-edit .bk-form-shell {
    display: block;
}

.admin-v2-bookings-create .bk-form-layout,
.admin-v2-bookings-edit .bk-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 16px;
    align-items: start;
}

.admin-v2-bookings-create .bk-main,
.admin-v2-bookings-edit .bk-main,
.admin-v2-bookings-create .bk-side,
.admin-v2-bookings-edit .bk-side {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.admin-v2-bookings-create .bk-side,
.admin-v2-bookings-edit .bk-side {
    position: sticky;
    top: 90px;
}

.admin-v2-bookings-create .bk-card,
.admin-v2-bookings-edit .bk-card {
    padding: 18px;
}

.admin-v2-bookings-create .bk-card-head,
.admin-v2-bookings-edit .bk-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.admin-v2-bookings-create .bk-form-grid,
.admin-v2-bookings-edit .bk-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 16px;
    align-items: end;
}

.admin-v2-bookings-create .bk-form-span-full,
.admin-v2-bookings-edit .bk-form-span-full {
    grid-column: 1 / -1;
}

.admin-v2-bookings-create .bk-form-actions,
.admin-v2-bookings-edit .bk-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-v2-bookings-create .bk-kv-grid,
.admin-v2-bookings-edit .bk-kv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.admin-v2-bookings-create .bk-kv,
.admin-v2-bookings-edit .bk-kv {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px 12px;
    min-width: 0;
}

.admin-v2-bookings-create .bk-kv span,
.admin-v2-bookings-edit .bk-kv span {
    display: block;
    font-size: 12px;
    color: var(--a2-muted);
    margin-bottom: 5px;
}

.admin-v2-bookings-create .bk-kv strong,
.admin-v2-bookings-edit .bk-kv strong {
    display: block;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.45;
    word-break: break-word;
}

.admin-v2-bookings-create .bk-field-search,
.admin-v2-bookings-edit .bk-field-search {
    position: relative;
}

.admin-v2-bookings-create .bk-dropdown,
.admin-v2-bookings-edit .bk-dropdown {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
    max-height: 270px;
    overflow: auto;
    z-index: 50;
}

.admin-v2-bookings-create .bk-option,
.admin-v2-bookings-edit .bk-option {
    width: 100%;
    text-align: right;
    padding: 12px 14px;
    border: 0;
    background: #fff;
    cursor: pointer;
    display: block;
}

.admin-v2-bookings-create .bk-option:hover,
.admin-v2-bookings-edit .bk-option:hover {
    background: #f8fafc;
}

.admin-v2-bookings-create .bk-option-sub,
.admin-v2-bookings-edit .bk-option-sub {
    display: block;
    color: var(--a2-muted);
    font-size: 12px;
    margin-top: 3px;
}

.admin-v2-bookings-create .bk-mini-badge,
.admin-v2-bookings-edit .bk-mini-badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    margin-inline-start: 6px;
}

.admin-v2-bookings-create .bk-check-wrap,
.admin-v2-bookings-edit .bk-check-wrap {
    display: flex;
    align-items: end;
    min-height: 62px;
}

.admin-v2-bookings-create .bk-check,
.admin-v2-bookings-edit .bk-check {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 900;
}

.admin-v2-bookings-create .is-hidden,
.admin-v2-bookings-edit .is-hidden,
.admin-v2-booking-show-ux .is-hidden,
.admin-v2-bookings-index-compact .is-hidden {
    display: none !important;
}

@media (max-width: 1200px) {
    .admin-v2-bookings-create .bk-form-layout,
    .admin-v2-bookings-edit .bk-form-layout {
        grid-template-columns: 1fr;
    }

    .admin-v2-bookings-create .bk-side,
    .admin-v2-bookings-edit .bk-side {
        position: static;
    }
}

@media (max-width: 800px) {
    .admin-v2-bookings-create .bk-form-grid,
    .admin-v2-bookings-edit .bk-form-grid,
    .admin-v2-bookings-create .bk-kv-grid,
    .admin-v2-bookings-edit .bk-kv-grid {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------------------------------------
   Bookings Index Compact
   body class:
   - admin-v2-bookings-index-compact
   ----------------------------------------------------------------------- */

.admin-v2-bookings-index-compact .bk-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-v2-bookings-index-compact .bk-list-count {
    color: var(--a2-muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-v2-bookings-index-compact .bk-compact-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-v2-bookings-index-compact .a2-table-wrap {
    overflow-x: hidden;
}

.admin-v2-bookings-index-compact .bk-bookings-table-compact {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
}

.admin-v2-bookings-index-compact .bk-bookings-table-compact th,
.admin-v2-bookings-index-compact .bk-bookings-table-compact td {
    padding: 7px 5px !important;
    line-height: 1.3;
    vertical-align: top;
    text-align: center;
}

.admin-v2-bookings-index-compact .bk-bookings-table-compact tbody td {
    white-space: normal;
}

.admin-v2-bookings-index-compact .bk-col-id {
    width: 58px;
}

.admin-v2-bookings-index-compact .bk-col-operation {
    width: 15%;
}

.admin-v2-bookings-index-compact .bk-col-parties {
    width: 19%;
}

.admin-v2-bookings-index-compact .bk-col-date {
    width: 14%;
}

.admin-v2-bookings-index-compact .bk-col-finance {
    width: 14%;
}

.admin-v2-bookings-index-compact .bk-col-status {
    width: 9%;
}

.admin-v2-bookings-index-compact .bk-col-actions {
    width: 210px;
}

.admin-v2-bookings-index-compact .bk-booking-id {
    display: inline-flex;
    font-weight: 950;
    color: var(--a2-text);
    text-decoration: none;
}

.admin-v2-bookings-index-compact .bk-booking-id:hover {
    color: var(--a2-info);
}

.admin-v2-bookings-index-compact .bk-row-title,
.admin-v2-bookings-index-compact .bk-row-sub,
.admin-v2-bookings-index-compact .bk-row-muted,
.admin-v2-bookings-index-compact .bk-row-pair strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-v2-bookings-index-compact .bk-row-title {
    font-weight: 950;
    color: var(--a2-text);
    line-height: 1.3;
}

.admin-v2-bookings-index-compact .bk-row-sub {
    color: var(--a2-text);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    margin-top: 3px;
}

.admin-v2-bookings-index-compact .bk-row-muted {
    color: var(--a2-muted);
    font-size: 11px;
    line-height: 1.35;
    margin-top: 3px;
}

.admin-v2-bookings-index-compact .bk-row-pair {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin-bottom: 3px;
}

.admin-v2-bookings-index-compact .bk-row-pair span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.admin-v2-bookings-index-compact .bk-row-pair strong {
    font-weight: 950;
    min-width: 0;
}

.admin-v2-bookings-index-compact .bk-finance-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    justify-content: center;
}

.admin-v2-bookings-index-compact .bk-finance-tags .a2-pill {
    padding-inline: 7px;
    font-size: 11px;
}

.admin-v2-bookings-index-compact .bk-table-actions-compact {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.admin-v2-bookings-index-compact .bk-table-actions-compact form {
    margin: 0;
    display: inline-flex;
}

.admin-v2-bookings-index-compact .bk-table-actions-compact .a2-btn {
    min-width: 48px;
    height: 32px;
    padding-inline: 8px;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 1300px) {
    .admin-v2-bookings-index-compact .bk-compact-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-v2-bookings-index-compact .bk-bookings-table-compact {
        font-size: 12px;
    }

    .admin-v2-bookings-index-compact .bk-col-actions {
        width: 220px;
    }
}

@media (max-width: 900px) {
    .admin-v2-bookings-index-compact .bk-compact-stats {
        grid-template-columns: 1fr;
    }

    .admin-v2-bookings-index-compact .a2-table-wrap {
        overflow-x: auto;
    }

    .admin-v2-bookings-index-compact .bk-bookings-table-compact {
        min-width: 860px !important;
    }
}

/* -----------------------------------------------------------------------
   Booking Show UX
   body classes:
   - admin-v2-booking-show
   - admin-v2-booking-show-ux
   ----------------------------------------------------------------------- */

.admin-v2-booking-show-ux .booking-show-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.admin-v2-booking-show-ux .booking-show-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: start;
}

.admin-v2-booking-show-ux .booking-show-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.admin-v2-booking-show-ux .booking-show-side {
    position: sticky;
    top: 90px;
    min-width: 0;
}

.admin-v2-booking-show-ux .booking-show-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(160px, .7fr));
    gap: 12px;
}

.admin-v2-booking-show-ux .booking-show-next-card,
.admin-v2-booking-show-ux .booking-show-mini-card,
.admin-v2-booking-show-ux .booking-show-section,
.admin-v2-booking-show-ux .booking-show-actions-card {
    padding: 16px;
}

.admin-v2-booking-show-ux .booking-show-card-head,
.admin-v2-booking-show-ux .booking-show-section-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.admin-v2-booking-show-ux .booking-show-eyebrow {
    color: var(--a2-muted);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.admin-v2-booking-show-ux .booking-show-next-title {
    margin: 5px 0 0;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 950;
    color: var(--a2-text);
}

.admin-v2-booking-show-ux .booking-show-desc {
    color: var(--a2-muted);
    font-size: 14px;
    line-height: 1.7;
}

.admin-v2-booking-show-ux .booking-show-alert-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.admin-v2-booking-show-ux .booking-show-alert {
    border-radius: 14px;
    padding: 10px 12px;
    font-weight: 800;
    font-size: 13px;
}

.admin-v2-booking-show-ux .booking-show-alert-danger {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}

.admin-v2-booking-show-ux .booking-show-alert-warning {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.admin-v2-booking-show-ux .booking-show-mini-card {
    display: grid;
    gap: 6px;
    align-content: center;
}

.admin-v2-booking-show-ux .booking-show-mini-card span {
    color: var(--a2-muted);
    font-size: 12px;
    font-weight: 900;
}

.admin-v2-booking-show-ux .booking-show-mini-card strong {
    font-size: 20px;
    font-weight: 950;
    color: var(--a2-text);
    line-height: 1.3;
}

.admin-v2-booking-show-ux .booking-show-mini-card small {
    color: var(--a2-muted);
    font-size: 12px;
    line-height: 1.4;
}

.admin-v2-booking-show-ux .booking-show-timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.admin-v2-booking-show-ux .booking-show-step {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.admin-v2-booking-show-ux .booking-show-step-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #cbd5e1;
    margin-top: 3px;
    flex: 0 0 auto;
}

.admin-v2-booking-show-ux .booking-show-step.is-done .booking-show-step-dot {
    background: var(--a2-success);
}

.admin-v2-booking-show-ux .booking-show-step-body {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.admin-v2-booking-show-ux .booking-show-step-body strong {
    font-size: 13px;
    font-weight: 950;
    color: var(--a2-text);
}

.admin-v2-booking-show-ux .booking-show-step-body span {
    font-size: 11px;
    color: var(--a2-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-v2-booking-show-ux .booking-show-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-v2-booking-show-ux .booking-show-kv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.admin-v2-booking-show-ux .booking-show-kv-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-v2-booking-show-ux .booking-show-kv {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px 12px;
    min-width: 0;
}

.admin-v2-booking-show-ux .booking-show-kv span {
    display: block;
    color: var(--a2-muted);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
}

.admin-v2-booking-show-ux .booking-show-kv strong {
    display: block;
    font-size: 14px;
    font-weight: 950;
    color: var(--a2-text);
    line-height: 1.45;
    word-break: break-word;
}

.admin-v2-booking-show-ux .booking-show-kv small {
    display: block;
    color: var(--a2-muted);
    font-size: 11px;
    line-height: 1.45;
    margin-top: 4px;
    word-break: break-word;
}

.admin-v2-booking-show-ux .booking-show-actions {
    display: grid;
    gap: 8px;
}

.admin-v2-booking-show-ux .booking-show-actions form {
    margin: 0;
}

.admin-v2-booking-show-ux .booking-show-empty {
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    padding: 12px;
    color: var(--a2-muted);
    text-align: center;
    font-weight: 800;
}

.admin-v2-booking-show-ux .booking-show-debug summary {
    cursor: pointer;
    font-weight: 950;
    color: var(--a2-text);
}

.admin-v2-booking-show-ux .booking-show-debug .booking-show-kv-grid {
    margin-top: 14px;
}

@media (max-width: 1300px) {
    .admin-v2-booking-show-ux .booking-show-layout {
        grid-template-columns: 1fr;
    }

    .admin-v2-booking-show-ux .booking-show-side {
        position: static;
    }

    .admin-v2-booking-show-ux .booking-show-hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-v2-booking-show-ux .booking-show-next-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .admin-v2-booking-show-ux .booking-show-hero-grid,
    .admin-v2-booking-show-ux .booking-show-grid,
    .admin-v2-booking-show-ux .booking-show-kv-grid,
    .admin-v2-booking-show-ux .booking-show-kv-grid-4,
    .admin-v2-booking-show-ux .booking-show-timeline {
        grid-template-columns: 1fr;
    }
}

/* =======================================================================
   13) STICKY TABLE HEADERS + DESKTOP MINI-SIDEBAR OVERLAY
   Owner request: (1) table <th> stay pinned at the top while the body
   scrolls, so every column and row is reachable; (2) the sidebar collapses
   to a rail (content full-width, no horizontal scroll) and reveals on hover
   or via the menu button.
   ======================================================================= */

/* --- (1) Sticky headers -----------------------------------------------
   `.a2-table thead th` already declares position:sticky; top:0 (see the
   TABLES block), but it never engaged because the wrappers used
   overflow-y:hidden — that still establishes a scroll container, but one
   with no vertical room, so the header could never move/pin. Turning the
   wrapper into a real (viewport-tall) scroll box lets the header pin to the
   top of the box while the body scrolls under it, and keeps horizontal
   scroll for wide tables so every column stays reachable.
   NOTE: two wrapper classes are in use — `.a2-table-wrap` (hyphen, ~57
   views incl. users) and `.a2-tablewrap` (no hyphen, ~8 views). Both must
   be covered or half the tables silently keep the old broken headers. */
.a2-tablewrap,
.a2-table-wrap{
  overflow: auto;
  max-height: calc(100vh - 160px);
}
.a2-tablewrap .a2-table thead th,
.a2-table-wrap .a2-table thead th{
  top: 0;
  z-index: 3;
}

/* --- (2) Desktop mini-sidebar as a fixed overlay rail ------------------
   In mini mode the sidebar becomes a fixed rail pinned to the inline-start
   edge; the main column reserves exactly the rail's width. On hover the rail
   widens to full over the content (main's padding stays at the rail width),
   so expanding never reflows/jumps the page. Mobile (<=768px) keeps its own
   drawer rules and is unaffected (this block is desktop-only). */
@media (min-width: 769px){
  .a2-shell{ position: relative; }

  body.a2-sidebar-mini .a2-sidebar{
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    height: 100vh;
    z-index: 90;
  }

  body.a2-sidebar-mini .a2-main{
    padding-inline-start: var(--a2-sidebar-mini-w);
  }

  /* The rail is a fixed 100vh column; let its nav scroll so a long menu
     (expanded on hover) can still reach its bottom items. */
  body.a2-sidebar-mini .a2-nav{
    overflow-y: auto;
  }

  body.a2-sidebar-mini .a2-sidebar:hover{
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
  }

  /* Show the topbar menu button on desktop too, so the sidebar can be
     toggled by click (not only by hover). */
  .a2-burger--mobile{
    display: inline-flex;
  }

  /* --- Collapsed rail must still show every section ------------------
     Only "Dashboard" and "Users" are flat links; every other route lives
     inside a <details class="a2-nav-group">. The original mini mode did
     `display:none` on those groups (with no hover counterpart), so a
     collapsed-by-default sidebar showed just those two items. Instead keep
     the group parents visible as icons in the rail, collapse their children,
     and reveal the full menu on hover (when the rail expands). */
  body.a2-sidebar-mini .a2-nav-group{
    display: block;
    pointer-events: auto;
  }
  body.a2-sidebar-mini .a2-nav-parent{
    justify-content: center;
    padding: 12px 0;
  }
  body.a2-sidebar-mini .a2-nav-parent .a2-nav-caret{
    display: none;
  }
  /* Collapse an active (open) group's children while in the rail, so the
     rail stays a rail. Closed <details> hide their children natively. */
  body.a2-sidebar-mini .a2-nav-group[open] > .a2-nav-children{
    display: none;
  }

  /* Hovering the rail expands it → restore the full menu. */
  body.a2-sidebar-mini .a2-sidebar:hover .a2-nav-parent{
    justify-content: flex-start;
    padding: 10px 12px;
  }
  body.a2-sidebar-mini .a2-sidebar:hover .a2-nav-parent .a2-nav-caret{
    display: inline-block;
  }
  body.a2-sidebar-mini .a2-sidebar:hover .a2-nav-group[open] > .a2-nav-children{
    display: block;
  }
}