/* =========================================================
   CLIENT AREA HOME (clientareahome.tpl) - Apple Style
   Accent: #86c724  |  No Dark Mode
========================================================= */

:root{
  --accent:#86c724;
  --accent-hover:#78b51f;
  --bg:#f5f5f7;
  --surface:rgba(255,255,255,.92);
  --text:#1d1d1f;
  --muted:#6e6e73;
  --border:rgba(0,0,0,.08);
  --shadow:0 14px 38px rgba(0,0,0,.08);
  --shadow2:0 20px 55px rgba(0,0,0,.12);
  --r-xl:26px;
  --r-lg:22px;
  --r-md:16px;
}

/* Page background */
body{
  background: var(--bg) !important;
  color: var(--text);
}

/* Remove dark-mode influence if any */
@media (prefers-color-scheme: dark){
  body{ background: var(--bg) !important; }
}

/* ===== Skeleton (optional) ===== */
#home-skeleton{
  margin-bottom: 22px;
}
.ios-skeleton-header{
  height: 86px;
  border-radius: var(--r-xl);
  background: #e5e5ea;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
.ios-skeleton-grid{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}
.ios-skeleton-tile{
  height: 120px;
  border-radius: var(--r-lg);
  background: #e5e5ea;
  position: relative;
  overflow: hidden;
}
.ios-skeleton-header::after,
.ios-skeleton-tile::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: sk 1.2s infinite;
}
@keyframes sk{ 100%{ transform: translateX(100%);} }

@media (max-width: 991px){
  .ios-skeleton-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 575px){
  .ios-skeleton-grid{ grid-template-columns: 1fr; }
}

/* ===== Welcome Header ===== */
.client-welcome-header{
  background: var(--surface);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 26px;
  margin-bottom: 18px;
  position: relative;
  overflow:hidden;
}
.client-welcome-header::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), rgba(134,199,36,.35));
}
.client-welcome-header h1{
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--text);
}
.client-welcome-header h1 span{
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.client-welcome-header p{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

/* ===== Tiles ===== */
.tiles .tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  min-height: 150px;
  text-decoration:none !important;

  background: var(--surface);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease;
  position: relative;
  overflow:hidden;
}
.tiles .tile:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow2);
}
.tiles .tile i{
  font-size: 28px;
  color: var(--text);
  opacity: .9;
}
.tiles .tile .stat{
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.tiles .tile .title{
  font-size: 14px;
  font-weight: 650;
  color: var(--muted);
}

/* highlight line (ignore old colors, force accent) */
.tiles .tile .highlight{
  position:absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;
  height: 7px;
  border-radius: 999px;
  background: var(--accent) !important;
  filter: blur(8px);
  opacity: .65;
}

/* ===== Panels (client-home-cards) ===== */
.client-home-cards .card{
  background: var(--surface) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  overflow:hidden;
  margin-bottom: 18px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.client-home-cards .card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow2) !important;
}
.client-home-cards .card-header{
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 18px !important;
}
.client-home-cards .card-title{
  font-size: 16px;
  font-weight: 750;
  color: var(--text);
  display:flex;
  align-items:center;
  gap: 10px;
}
.client-home-cards .card-title i{
  color: var(--accent);
}
.client-home-cards .card-body{
  padding: 18px !important;
}
.client-home-cards .card-footer{
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 18px !important;
  color: var(--muted);
  font-size: 13px;
}

/* Badge */
.client-home-cards .badge{
  background: rgba(134,199,36,.16) !important;
  color: #2f6a12 !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 800;
  font-size: 12px;
}

/* Panel button (top right) */
.client-home-cards .btn.btn-default.btn-xs{
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.06) !important;
  background: rgba(134,199,36,.12) !important;
  color: #2f6a12 !important;
}
.client-home-cards .btn.btn-default.btn-xs:hover{
  background: rgba(134,199,36,.18) !important;
}

/* ===== List Group (inside panels) ===== */
.client-home-cards .list-group{
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.client-home-cards .list-group-item{
  border: 0 !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  padding: 14px 18px !important;
  background: transparent !important;
  color: var(--text) !important;
  transition: background .18s ease, padding-left .18s ease, color .18s ease;
}
.client-home-cards .list-group-item:hover{
  background: rgba(134,199,36,.06) !important;
  color: var(--accent) !important;
  padding-left: 22px !important;
}
.client-home-cards .list-group-item.active{
  background: rgba(134,199,36,.14) !important;
  color: #2f6a12 !important;
  font-weight: 800;
}
.client-home-cards .list-group-item i{
  color: var(--accent);
}

/* ===== Make Bootstrap rows breathe ===== */
.client-home-cards .row > [class*="col-"]{
  margin-bottom: 18px;
}
/* Hide the skeleton (fix empty grey space) */
#home-skeleton{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}
/* =========================================
   Welcome Card - Apple Glass + Glow (no shimmer)
   Accent: #86c724
========================================= */

.client-welcome-header{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 26px;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 16px 45px rgba(0,0,0,.10) !important;
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Gradient border (subtle) */
.client-welcome-header::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius: 26px;
  background: linear-gradient(
    135deg,
    rgba(134,199,36,.55),
    rgba(255,255,255,.35),
    rgba(0,0,0,0)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.9;
  pointer-events:none;
}

/* Soft glow blob */
.client-welcome-header::after{
  content:"";
  position:absolute;
  width: 520px;
  height: 220px;
  left: -140px;
  top: -120px;
  background: radial-gradient(circle at 30% 30%,
    rgba(134,199,36,.30),
    rgba(134,199,36,0) 65%
  );
  filter: blur(2px);
  opacity: 1;
  pointer-events:none;
}

.client-welcome-header:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(0,0,0,.16) !important;
  border-color: rgba(134,199,36,.25) !important;
}

/* Title + subtitle polish */
.client-welcome-header h1{
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color:#1d1d1f;
}
.client-welcome-header h1 span{
  background: linear-gradient(90deg, #86c724, #6fb61a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.client-welcome-header p{
  margin:0;
  font-size: 15px;
  color:#6e6e73;
}

/* Small “accent line” top */
.client-welcome-header .welcome-content{
  position:relative;
  z-index:2;
}
.client-welcome-header .welcome-content::before{
  content:"";
  position:absolute;
  top:-10px;
  left:0;
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: #86c724;
  opacity:.9;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .client-welcome-header{ transition:none; }
  .client-welcome-header:hover{ transform:none; }
}
/* =========================================================
   Apple Pro UI (Twenty-One) — Accent: #86c724 — No Dark Mode
========================================================= */

/* ---------- Base ---------- */
:root{
  --ap-bg: #f5f5f7;
  --ap-card: rgba(255,255,255,.86);
  --ap-border: rgba(0,0,0,.06);
  --ap-text: #1d1d1f;
  --ap-muted: #6e6e73;
  --ap-accent: #86c724;
  --ap-shadow: 0 10px 30px rgba(0,0,0,.08);
  --ap-shadow-hover: 0 18px 48px rgba(0,0,0,.12);
  --ap-radius: 24px;
  --ap-radius-sm: 16px;
}

body{
  background: var(--ap-bg) !important;
  color: var(--ap-text);
}

/* Remove dark mode influence if any */
html, body { color-scheme: light; }

/* ---------- Welcome header (premium card) ---------- */
.client-welcome-header{
  position: relative;
  overflow: hidden;
  background: var(--ap-card) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: calc(var(--ap-radius) + 4px) !important;
  box-shadow: var(--ap-shadow) !important;
  padding: 26px 26px !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.client-welcome-header::before{
  content:"";
  position:absolute; inset:0;
  padding:1px;
  border-radius: calc(var(--ap-radius) + 4px);
  background: linear-gradient(135deg,
    rgba(134,199,36,.45),
    rgba(255,255,255,.35),
    rgba(0,0,0,0)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

.client-welcome-header::after{
  content:"";
  position:absolute;
  width: 520px; height: 240px;
  left: -180px; top: -160px;
  background: radial-gradient(circle at 30% 30%,
    rgba(134,199,36,.22),
    rgba(134,199,36,0) 65%
  );
  pointer-events:none;
}

.client-welcome-header:hover{
  transform: translateY(-3px);
  box-shadow: var(--ap-shadow-hover) !important;
  border-color: rgba(134,199,36,.18) !important;
}

.client-welcome-header h1{
  margin:0 0 6px !important;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.client-welcome-header h1 span{
  background: linear-gradient(90deg, var(--ap-accent), #6fb61a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.client-welcome-header p{
  margin:0 !important;
  color: var(--ap-muted);
  font-size: 15px;
}

/* ---------- Tiles (3 cards) — Apple “widget” feel ---------- */
.tiles .row.no-gutters > [class*="col-"]{ padding: 8px !important; }

.tiles .tile{
  position: relative !important;
  background: var(--ap-card) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-radius) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.07) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  min-height: 170px !important;
  padding: 18px 18px 16px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.tiles .tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 46px rgba(0,0,0,.11) !important;
  border-color: rgba(134,199,36,.18) !important;
}

/* icon chip top-left */
.tiles .tile i{
  position: absolute;
  top: 14px; left: 14px;
  width: 44px; height: 44px;
  border-radius: 14px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  font-size: 18px !important;
  color: #1d1d1f !important;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
}

/* number + label */
.tiles .tile .stat{
  font-size: 42px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ap-text) !important;
}

.tiles .tile .title{
  margin-top: 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ap-muted) !important;
}

/* subtle accent underline */
.tiles .tile .highlight{
  position: absolute !important;
  left: 14px !important;
  bottom: 14px !important;
  width: 56px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: rgba(134,199,36,.55) !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Panels (client-home-cards) ---------- */
.client-home-cards .card{
  background: var(--ap-card) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-radius) !important;
  box-shadow: var(--ap-shadow) !important;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.client-home-cards .card-header{
  background: transparent !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  padding: 16px 18px !important;
}

.client-home-cards .card-title{
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

.client-home-cards .badge{
  background: rgba(134,199,36,.14) !important;
  color: #2f6a12 !important;
  border: 1px solid rgba(134,199,36,.22) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

.client-home-cards .list-group-item{
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  padding: 14px 18px !important;
  transition: background .18s ease, transform .18s ease;
}

.client-home-cards .list-group-item:hover{
  background: rgba(134,199,36,.06) !important;
  transform: translateX(2px);
}

.client-home-cards .card-footer{
  background: transparent !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  color: var(--ap-muted);
}

/* Buttons small inside panels */
.client-home-cards .btn.btn-default{
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: rgba(255,255,255,.7) !important;
}

/* Mobile spacing */
@media (max-width: 768px){
  .client-welcome-header{ padding: 20px !important; }
  .tiles .tile{ min-height: 160px !important; }
}
/* =========================================================
   Apple Pro — Services List (clientareaproducts.tpl)
   Accent: #86c724 — No Dark Mode
========================================================= */

.table-container{
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 28px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.08) !important;
  padding: 14px 14px 6px !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* DataTables wrapper spacing (optional) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
  color: #6e6e73 !important;
  font-weight: 600;
}

/* Search input */
.dataTables_wrapper .dataTables_filter input{
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: rgba(255,255,255,.85) !important;
  padding: 8px 12px !important;
  outline: none !important;
  box-shadow: none !important;
}
.dataTables_wrapper .dataTables_filter input:focus{
  border-color: rgba(134,199,36,.35) !important;
  box-shadow: 0 0 0 4px rgba(134,199,36,.12) !important;
}

/* The table as "card rows" */
#tableServicesList{
  border-collapse: separate !important;
  border-spacing: 0 12px !important;   /* space between rows */
  width: 100% !important;
  margin: 0 !important;
}

#tableServicesList thead th{
  background: transparent !important;
  border: none !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6e6e73 !important;
}

#tableServicesList tbody tr{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.06) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer;
}

/* Hover Apple lift */
#tableServicesList tbody tr:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.10) !important;
  border-color: rgba(134,199,36,.18) !important;
}

/* Cells */
#tableServicesList tbody td{
  border: none !important;
  padding: 16px 14px !important;
  vertical-align: middle !important;
  color: #1d1d1f !important;
  background: transparent !important;
}

/* Rounded corners per-row (first/last cell) */
#tableServicesList tbody tr td:first-child{
  border-radius: 20px 0 0 20px;
}
#tableServicesList tbody tr td:last-child{
  border-radius: 0 20px 20px 0;
}

/* Product title + domain link */
#tableServicesList td strong{
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}
#tableServicesList td a{
  color: #1d1d1f !important;
  text-decoration: none !important;
  opacity: .75;
}
#tableServicesList td a:hover{
  opacity: 1;
  text-decoration: underline !important;
  text-decoration-color: rgba(134,199,36,.55) !important;
}

/* Amount + billing cycle */
#tableServicesList td small.text-muted{
  color: #6e6e73 !important;
  font-weight: 700;
  display: inline-block;
  margin-top: 3px;
}

/* SSL icon looks nicer */
#tableServicesList .ssl-info img{
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.12));
}

/* Status pill */
#tableServicesList .status{
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: .02em;
  border: 1px solid rgba(0,0,0,.06);
}

/* Status colors (match WHMCS classes) */
#tableServicesList .status-active{
  background: rgba(134,199,36,.14) !important;
  color: #2f6a12 !important;
  border-color: rgba(134,199,36,.20) !important;
}
#tableServicesList .status-pending{
  background: rgba(255,149,0,.14) !important;
  color: #8a4b00 !important;
}
#tableServicesList .status-suspended,
#tableServicesList .status-terminated,
#tableServicesList .status-cancelled{
  background: rgba(255,59,48,.12) !important;
  color: #b42318 !important;
}
#tableServicesList .status-completed{
  background: rgba(0,122,255,.10) !important;
  color: #0056b3 !important;
}

/* Loading */
#tableLoading{
  padding: 18px 0 10px;
  color: #6e6e73;
}

/* Mobile: allow horizontal scroll nicely */
@media (max-width: 768px){
  .table-container{ padding: 12px !important; border-radius: 22px !important; }
  .table-container{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #tableServicesList{ min-width: 780px; }
}
/* =========================================================
   Apple Pro — Services Mobile Cards (clientareaproducts.tpl)
========================================================= */

/* Hide DataTables/table on mobile only */
@media (max-width: 768px){
  .table-container{ display:none !important; }
  #tableServicesList_wrapper{ display:none !important; }
}

/* Cards wrapper */
.ap-services-cards{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}

/* Card */
.ap-service-card{
  display: block;
  text-decoration: none !important;
  color: #1d1d1f !important;

  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 26px;
  padding: 16px 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ap-service-card:active{
  transform: scale(.985);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.ap-service-card:hover{
  border-color: rgba(134,199,36,.18);
}

/* Top row */
.ap-card-top{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 12px;
}

.ap-title{
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: 16px;
}
.ap-domain{
  margin-top: 6px;
  font-weight: 700;
  font-size: 12px;
  color: #6e6e73;
  opacity: .95;
  word-break: break-word;
}

/* Status pill */
.ap-status{
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  border: 1px solid rgba(0,0,0,.06);
  white-space: nowrap;
  align-self: flex-start;
}
.ap-status.status-active{
  background: rgba(134,199,36,.14);
  color: #2f6a12;
  border-color: rgba(134,199,36,.20);
}
.ap-status.status-pending{
  background: rgba(255,149,0,.14);
  color: #8a4b00;
}
.ap-status.status-suspended,
.ap-status.status-terminated,
.ap-status.status-cancelled{
  background: rgba(255,59,48,.12);
  color: #b42318;
}
.ap-status.status-completed{
  background: rgba(0,122,255,.10);
  color: #0056b3;
}

/* Bottom row */
.ap-card-bottom{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

.ap-meta{
  background: rgba(0,0,0,.025);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 18px;
  padding: 4px 6px;
}
.ap-meta-label{
  display:block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6e6e73;
  margin-bottom: 3px;
}
.ap-meta-value{
  display:block;
  font-size: 7px;
  font-weight: 600;
  color: #1d1d1f;
}
.ap-meta-sub{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #6e6e73;
}

/* Chevron */
.ap-chevron{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(134,199,36,.12);
  border: 1px solid rgba(134,199,36,.20);
  color: #2f6a12;
}
.ap-chevron i{ font-size: 14px; }
/* ===== Status as card background ===== */
.ap-service-card{
  position: right;
  overflow: hidden;
}

/* soft tint layer */
.ap-service-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--ap-status-tint, rgba(0,0,0,.02));
  pointer-events:none;
}

/* keep content above tint */
.ap-service-card > *{ position:relative; z-index:1; }

/* status tints */
.ap-service-card.status-active{ --ap-status-tint: rgba(134,199,36,.10); }
.ap-service-card.status-pending{ --ap-status-tint: rgba(255,149,0,.10); }
.ap-service-card.status-suspended,
.ap-service-card.status-terminated,
.ap-service-card.status-cancelled{ --ap-status-tint: rgba(255,59,48,.08); }
.ap-service-card.status-completed{ --ap-status-tint: rgba(0,122,255,.08); }

/* Due date block (top-right) */
.ap-due{
  text-align: right;
  min-width: 0;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 10px 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ap-due-label{
  display:block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6e6e73;
  margin-bottom: 4px;
  white-space: nowrap;
}

.ap-due-value{
  display:block;
  font-size: 13px;
  font-weight: 900;
  color: #1d1d1f;
  white-space: nowrap;
}

/* responsive: if space is tight */
@media (max-width: 390px){
  .ap-card-top{ gap: 10px; }
  .ap-due{ padding: 8px 10px; }
  .ap-due-value{ font-size: 12px; }
}
/* date box right, same ap-meta look */
.ap-meta-right{
  text-align: right;
  min-width: 0;
  max-width: 150px;   /* باش مايكبرش */
}

/* يخلي ap-card-top يوازن مزيان */
.ap-card-top{
  align-items: flex-start;
}
.ap-title{ min-width: 0; }
/* Bigger cards */
/* ================================
   Services Cards = Table Columns UI
   (Product | Amount | Next Due | Status)
================================ */

/* card layout rows like columns */
.ap-service-card{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
}

/* left block (product + domain) */
.ap-service-card .ap-left{
  flex: 1 1 40% !important;
  min-width: 220px;
}

/* amount column */
.ap-service-card .ap-amount{
  flex: 0 0 170px !important;
  text-align:center !important;
}

/* next due date column */
.ap-service-card .ap-meta-compact{
  flex: 0 0 220px !important;
}

/* status column */
.ap-service-card .ap-status{
  flex: 0 0 140px !important;
  display:flex !important;
  justify-content:flex-end !important;
}

/* status badge style */
.ap-status .status,
.ap-status .label.status{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: .02em;
  border: 1px solid rgba(0,0,0,.06) !important;
}

/* keep classic colors (no card bg change) */
.ap-status .status-active{ background: rgba(52,199,89,.14) !important; color:#1c7c3d !important; }
.ap-status .status-suspended,
.ap-status .status-terminated{ background: rgba(255,59,48,.14) !important; color:#b42318 !important; }
.ap-status .status-pending{ background: rgba(255,149,0,.16) !important; color:#9a5700 !important; }
.ap-status .status-cancelled{ background: rgba(142,142,147,.18) !important; color:#3a3a3c !important; }

/* responsive: stack columns on mobile */
@media (max-width: 768px){
  .ap-service-card{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .ap-service-card .ap-left,
  .ap-service-card .ap-amount,
  .ap-service-card .ap-meta-compact,
  .ap-service-card .ap-status{
    flex: 1 1 auto !important;
    text-align:left !important;
    justify-content:flex-start !important;
    min-width: 0 !important;
  }

  .ap-service-card .ap-status{
    margin-top: 6px;
  }

  .ap-service-card .ap-meta-compact{
    width:100% !important;
  }
}
/* Hide services table everywhere */
#tableServicesList,
#tableServicesList_wrapper,
.dataTables_wrapper,
.table-container{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
}

/* Cards stacked on all screens */
.ap-services-cards{
  display:flex !important;
  flex-direction:column !important;
  gap:14px;
}
/* === Services cards: table-like columns === */
.ap-service-card{
  display:block;
  text-decoration:none !important;
  color: inherit !important;
}

/* row grid */
.ap-row{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr auto 34px;
  gap: 16px;
  align-items:center;
}

/* columns */
.ap-col{ min-width: 0; }
.ap-title{
  font-size:16px;
  font-weight:800;
  line-height:1.2;
}
.ap-domain{
  margin-top:6px;
  font-size:13px;
  color: var(--ap-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ap-label{
  font-size:12px;
  font-weight:700;
  color: var(--ap-muted);
  margin-bottom:6px;
}
.ap-value{
  font-size:15px;
  font-weight:800;
  line-height:1.2;
}
.ap-sub{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  color: var(--ap-muted);
}

/* status pill (alone, not background) */
.ap-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
}

/* status colors */
.ap-status.status-active{ color:#1c7c3d; background: rgba(52,199,89,.14); border-color: rgba(52,199,89,.22); }
.ap-status.status-pending{ color:#9a5700; background: rgba(255,149,0,.14); border-color: rgba(255,149,0,.22); }
.ap-status.status-suspended,
.ap-status.status-terminated{ color:#b42318; background: rgba(255,59,48,.14); border-color: rgba(255,59,48,.22); }

/* chevron */
.ap-col-chevron{
  display:flex;
  justify-content:flex-end;
  opacity:.7;
}

/* responsive: stack columns on small screens but keep “table feel” */
@media (max-width: 768px){
  .ap-row{
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .ap-col-chevron{ grid-column: 2; justify-content:flex-end; }
  .ap-col-status{ grid-column: 1 / -1; }
}
/* =========================================
   Services Cards — Perfect Columns + Effects
========================================= */

/* Card row: fixed “table-like” layout */
.ap-row{
  display:grid !important;
  grid-template-columns: 2.2fr 1.1fr 1.1fr .9fr 34px; /* product | price | due | status | chevron */
  gap: 14px !important;
  align-items: center !important;
}

/* Each column becomes a “soft cell” */
.ap-col{
  position: relative;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  min-width: 0;
}

/* Hover effect per column */
.ap-service-card:hover .ap-col{
  border-color: rgba(134,199,36,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.07);
  transform: translateY(-1px);
}

/* Small divider vibe between cols */
.ap-col::after{
  content:"";
  position:absolute;
  top: 12px;
  bottom: 12px;
  right: -7px;
  width: 1px;
  background: rgba(0,0,0,.05);
}
.ap-col-chevron::after{ display:none; }

/* Product column: tighter */
.ap-title{ font-size: 16px !important; font-weight: 900 !important; }
.ap-domain{ font-size: 13px !important; color: var(--ap-muted) !important; }

/* Price column: align center-ish */
.ap-col-amount .ap-value{ font-size: 15px !important; font-weight: 900 !important; }
.ap-col-amount .ap-sub{ font-size: 12px !important; }

/* Date column: make date look “strong” */
.ap-col-date .ap-value{
  font-size: 16px !important;
  font-weight: 900 !important;
}

/* Status column: centered */
.ap-col-status{
  display:flex;
  justify-content:center;
  align-items:center;
  background: rgba(255,255,255,.65);
}

/* Status pill stays clean */
.ap-status{
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
}

/* Chevron column: no box feel */
.ap-col-chevron{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display:flex;
  justify-content:flex-end;
  opacity: .7;
}
.ap-service-card:hover .ap-col-chevron{
  transform: translateX(2px);
  opacity: 1;
}

/* Mobile: keep nice, stack with mini-cells */
@media (max-width: 768px){
  .ap-row{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .ap-col-status{ grid-column: 1 / -1; }
  .ap-col-chevron{ grid-column: 2; }
  .ap-col::after{ display:none; }
}
/* === Remove per-column background “cells” === */
.ap-col{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;          /* مهم: باش مايبقاش كيبان بحال card صغيرة */
  border-radius: 0 !important;
}

/* خليه غير “column” مرتب + شوية separation */
.ap-row{
  gap: 22px !important;           /* مسافة بين الأعمدة بحال table */
}

/* Divider خفيف بين الأعمدة (اختياري) */
.ap-col::after{
  content:"";
  position:absolute;
  top: 8px;
  bottom: 8px;
  right: -11px;
  width: 1px;
  background: rgba(0,0,0,.06);
}
.ap-col-chevron::after{ display:none; }

/* Hover effect: underline خفيف لكل column بدل background */
.ap-service-card:hover .ap-col{
  transform: none !important;
  box-shadow: none !important;
}

.ap-service-card:hover .ap-col:not(.ap-col-chevron)::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 999px;
  background: rgba(134,199,36,.35); /* accent خفيف */
}

/* Status يبقى واضح */
.ap-col-status{
  display:flex;
  justify-content:center;
  align-items:center;
}
/* ===== Mobile: status color as card background (no text badge) ===== */
@media (max-width: 767.98px){

  /* hide any leftover status/pricing blocks if existed */
  .ap-col-price, .ap-col-status, .ap-price, .ap-status, .ap-status-pill { display:none !important; }

  /* Base card tint */
  .ap-services-cards .ap-service-card{
    position: relative;
    border-radius: 28px !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    background: rgba(255,255,255,.86) !important;
    overflow: hidden;
  }

  /* Status tints (background only) */
  .ap-services-cards .ap-service-card.status-active{
    background: linear-gradient(90deg, rgba(52,199,89,.16), rgba(255,255,255,.86) 55%) !important;
    border-color: rgba(52,199,89,.22) !important;
  }
  .ap-services-cards .ap-service-card.status-pending{
    background: linear-gradient(90deg, rgba(255,149,0,.16), rgba(255,255,255,.86) 55%) !important;
    border-color: rgba(255,149,0,.22) !important;
  }
  .ap-services-cards .ap-service-card.status-suspended,
  .ap-services-cards .ap-service-card.status-terminated,
  .ap-services-cards .ap-service-card.status-cancelled,
  .ap-services-cards .ap-service-card.status-fraud{
    background: linear-gradient(90deg, rgba(255,59,48,.14), rgba(255,255,255,.86) 55%) !important;
    border-color: rgba(255,59,48,.20) !important;
  }

  /* Small accent bar on the left (Apple-ish) */
  .ap-services-cards .ap-service-card::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width: 6px;
    background: rgba(134,199,36,.55);
    opacity:.55;
  }
  .ap-services-cards .ap-service-card.status-active::before{ background: rgba(52,199,89,.85); opacity:.7; }
  .ap-services-cards .ap-service-card.status-pending::before{ background: rgba(255,149,0,.85); opacity:.7; }
  .ap-services-cards .ap-service-card.status-suspended::before,
  .ap-services-cards .ap-service-card.status-terminated::before,
  .ap-services-cards .ap-service-card.status-cancelled::before,
  .ap-services-cards .ap-service-card.status-fraud::before{ background: rgba(255,59,48,.85); opacity:.7; }
}
/* =========================================================
   Apple Pro — Product Details (clientareaproductdetails.tpl)
   Accent: #86c724 — No Dark Mode
========================================================= */

/* =========================================================
   Apple Pro — Product Details (NO class changes)
   Works with: .content-section .ios-tabs .tab-button
   .credential-*  .apps-grid .app-button  .ios-modal
   Accent: #86c724 — Light Only
========================================================= */

:root{
  --ap-bg: #f5f5f7;
  --ap-card: rgba(255,255,255,.86);
  --ap-border: rgba(0,0,0,.06);
  --ap-text: #1d1d1f;
  --ap-muted: #6e6e73;
  --ap-accent: #86c724;
  --ap-shadow: 0 10px 30px rgba(0,0,0,.08);
  --ap-shadow-hover: 0 18px 48px rgba(0,0,0,.12);
  --ap-radius: 24px;
  --ap-radius-sm: 18px;
}

html, body { color-scheme: light; }

/* ---------- Main wrapper (your existing .content-section) ---------- */
.content-section{
  background: var(--ap-card) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-radius) !important;
  box-shadow: var(--ap-shadow) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 22px !important;
}

/* Header title */
.section-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: var(--ap-text);
}
.section-title i{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(134,199,36,.14);
  border: 1px solid rgba(134,199,36,.22);
  color: #2f6a12;
}

/* =========================================================
   Tabs (your existing .ios-tabs + .tab-button)
========================================================= */
.ios-tabs{
  display:flex;
  gap: 10px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  margin: 14px 0 18px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.tab-button{
  border: 0 !important;
  background: transparent !important;
  color: var(--ap-muted) !important;
  font-weight: 900;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  gap: 8px;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
  white-space: nowrap;
}
.tab-button i{ opacity: .9; }
.tab-button:hover{
  background: rgba(134,199,36,.08) !important;
  color: #245a12 !important;
  transform: translateY(-1px);
}
.tab-button.active{
  background: rgba(255,255,255,.85) !important;
  color: var(--ap-text) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
}

/* =========================================================
   Tab content panels (your existing .tab-content)
========================================================= */
.tab-content{
  display:none;
}
.tab-content.active{
  display:block;
}
#tab-api, #tab-links, #tab-apps{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: calc(var(--ap-radius) + 2px);
  padding: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* =========================================================
   Credentials UI (your existing .credential-*)
========================================================= */
.credential-group{
  margin-bottom: 14px;
}
.credential-label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--ap-muted);
  margin-bottom: 8px;
  display:block;
  text-transform: uppercase;
}
.credential-input-group{
  display:flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.credential-input{
  flex: 1 1 320px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ap-text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.credential-input:focus{
  outline:none;
  border-color: rgba(134,199,36,.35);
  box-shadow: 0 0 0 4px rgba(134,199,36,.14);
}

.credential-button{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  color: var(--ap-text);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.credential-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.credential-button.primary{
  border: 1px solid rgba(134,199,36,.30);
  background: rgba(134,199,36,.16);
  color: #245a12;
}
.credential-button.primary:hover{
  background: rgba(134,199,36,.22);
}

/* =========================================================
   Apps Grid (your existing .apps-grid + .app-button)
   Goal: Apple Pro cards + NO “Ouvrir” look
========================================================= */
.apps-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 992px){
  .apps-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Turn default <a> + <button> to the same card */
.apps-grid .app-button{
  position: relative;
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap: 12px;

  width: 100%;
  text-align:left;

  border-radius: 22px;
  padding: 16px 16px !important;

  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.06);

  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  cursor: pointer;

  font-weight: 900;
  font-size: 14px;
  color: var(--ap-text);
  text-decoration: none !important;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.apps-grid .app-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(0,0,0,.12);
  border-color: rgba(134,199,36,.22);
}

/* icon bubble (uses existing <i> inside .app-button) */
.apps-grid .app-button i{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(134,199,36,.12);
  border: 1px solid rgba(134,199,36,.18);
  color: #245a12;

  font-size: 18px;
  margin: 0 !important;
}

/* right chevron auto (no extra HTML needed) */
.apps-grid .app-button::after{
  content: "›";
  position:absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: rgba(0,0,0,.35);
  font-weight: 900;
}

/* remove “Ouvrir” feeling: ensure no accidental text overlays */
.apps-grid .app-button span,
.apps-grid .app-button small{
  display:none !important;
}

/* Optional: soft category tint per button class if you keep android/ios/windows... */
.apps-grid .app-button.android i{ background: rgba(52,199,89,.14); border-color: rgba(52,199,89,.22); color:#1c7c3d; }
.apps-grid .app-button.ios i{ background: rgba(0,122,255,.12); border-color: rgba(0,122,255,.18); color:#0b4db3; }
.apps-grid .app-button.windows i{ background: rgba(88,86,214,.12); border-color: rgba(88,86,214,.18); color:#2c2aa9; }
.apps-grid .app-button.smarttv i{ background: rgba(255,149,0,.12); border-color: rgba(255,149,0,.18); color:#8a4d00; }

/* =========================================================
   Modals (your existing .ios-modal + .modal-container ...)
========================================================= */
.ios-modal{
  display:none;              /* your JS sets it to block */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 9999;
  padding: 22px;
}

.modal-container{
  max-width: 820px;
  width: 100%;
  margin: 6vh auto;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
  overflow: hidden;
  animation: apModalUp .28s ease both;
}

@keyframes apModalUp{
  from{ transform: translateY(18px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

.modal-header{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 18px 18px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  position: relative;
}

.modal-title{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ap-text);
  margin: 0;
}

/* icon circle default */
.modal-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(134,199,36,.14);
  border: 1px solid rgba(134,199,36,.22);
  color: #245a12;
}
.modal-icon i{ font-size: 18px; }

/* body */
.modal-body{
  padding: 18px;
  color: var(--ap-text);
  max-height: 60vh;
  overflow: auto;
}
.modal-body ol{ padding-left: 18px; }
.modal-body li{ margin: 8px 0; color: #2c2c2e; }
.modal-body a{ color: #245a12; font-weight: 800; text-decoration: none; }
.modal-body a:hover{ text-decoration: underline; }

/* footer */
.modal-footer{
  padding: 14px 18px;
  border-top: 1px solid rgba(0,0,0,.06);
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

/* close button */
.modal-button{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  color: var(--ap-text);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 900;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.modal-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  background: rgba(134,199,36,.10);
}

/* Make code blocks look premium */
.modal-body code{
  display:block;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 12px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: #1d1d1f;
  overflow:auto;
}

/* Mobile tweaks */
@media (max-width: 768px){
  .content-section{ padding: 16px !important; }
  #tab-api, #tab-links, #tab-apps{ padding: 14px; }
  .apps-grid{ grid-template-columns: 1fr; }
  .modal-container{ margin: 10vh auto; }
}
/* =========================================================
   Apple Pro — Support Tickets List
   Cards on ALL screens (stacked) + keep status chip
========================================================= */

/* Hide table everywhere */
#tableTicketsList,
#tableTicketsList_wrapper,
.dataTables_wrapper,
.table-container{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
}

/* Cards container */
.ap-tickets-cards{
  display:flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

/* Card */
.ap-ticket-card{
  display:block;
  text-decoration:none !important;
  color: var(--ap-text) !important;

  background: var(--ap-card);
  border: 1px solid var(--ap-border);
  border-radius: 28px;
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  padding: 18px 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ap-ticket-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  border-color: rgba(134,199,36,.22);
}

/* Unread accent (left glow line) */
.ap-ticket-card.is-unread{
  position:relative;
}
.ap-ticket-card.is-unread::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: var(--ap-accent);
  box-shadow: 0 0 0 4px rgba(134,199,36,.12);
}

/* Layout */
.ap-ticket-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.ap-ticket-left{
  min-width: 0;
}

.ap-ticket-dept{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ap-muted);
  margin-bottom: 8px;
}

.ap-ticket-subject{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ap-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.ap-ticket-id{
  font-size: 13px;
  font-weight: 900;
  color: rgba(0,0,0,.45);
  margin-right: 8px;
}

/* Right area */
.ap-ticket-right{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-shrink:0;
}

.ap-ticket-chevron{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(0,0,0,.55);
}

/* Meta row */
.ap-ticket-meta{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  color: var(--ap-muted);
  font-size: 13px;
  font-weight: 700;
}

.ap-ticket-meta-item{
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

/* Status chip (uses your existing .status-*) */
.ap-ticket-status{
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.06);
  color: var(--ap-text);
  white-space: nowrap;
}

/* Map default WHMCS status classes if present */
.ap-ticket-status.status-open,
.ap-ticket-status.status-answering,
.ap-ticket-status.status-replied{
  background: rgba(52,199,89,.14);
  border-color: rgba(52,199,89,.22);
  color: #1c7c3d;
}
.ap-ticket-status.status-customer-reply,
.ap-ticket-status.status-pending{
  background: rgba(255,149,0,.14);
  border-color: rgba(255,149,0,.22);
  color: #8a4d00;
}
.ap-ticket-status.status-closed{
  background: rgba(142,142,147,.18);
  border-color: rgba(142,142,147,.25);
  color: #2c2c2e;
}

/* If ticket.statusColor is used, keep it but make it premium */
.ap-ticket-status.status-custom{
  color: #fff !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

/* Keep your old iOS block hidden to avoid duplicates */
.ios-only{ display:none !important; }
/* =========================================================
   Tickets List (supportticketslist.tpl) — Apple Pro UI tweaks
   Accent: #86c724 — No Dark Mode
========================================================= */

/* ---------- Desktop: unread look (table) ---------- */
#tableTicketsList .ticket-subject.unread{
  color: #2f6a12 !important;
  font-weight: 800 !important;
}

#tableTicketsList .ticket-subject.unread::after{
  content: " •";
  color: rgba(134,199,36,.65);
  font-weight: 900;
}

#tableTicketsList tbody tr{
  border-radius: 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}

#tableTicketsList tbody tr:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

/* ---------- Mobile Cards container ---------- */
.ios-cards.ios-only{
  padding: 6px 8px;
}

/* IMPORTANT: you used class "skeleton" on every card
   -> we disable shimmer so it doesn't look like loading */
.ios-ticket-card.skeleton::after{
  display:none !important;
}

/* ---------- Mobile card base ---------- */
.ios-ticket-card{
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.08) !important;
  padding: 16px 16px !important;
  margin-bottom: 14px !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}

.ios-ticket-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.12) !important;
  border-color: rgba(134,199,36,.18) !important;
}

/* Left accent bar (Apple style) */
.ios-ticket-card::before{
  content:"";
  position:absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: rgba(134,199,36,.55);
}

/* ---------- Header layout ---------- */
.ios-card-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ios-ticket-dept{
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6e6e73 !important;
}

/* Status pill nicer */
.ios-ticket-status{
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border: 1px solid rgba(0,0,0,.06);
}

/* Map common WHMCS status classes */
.ios-ticket-status.status-open,
.ios-ticket-status.status-answered{
  background: rgba(52,199,89,.14) !important;
  color: #1c7c3d !important;
  border-color: rgba(52,199,89,.18) !important;
}
.ios-ticket-status.status-customer-reply{
  background: rgba(255,149,0,.14) !important;
  color: #9a5700 !important;
  border-color: rgba(255,149,0,.18) !important;
}
.ios-ticket-status.status-closed{
  background: rgba(142,142,147,.18) !important;
  color: #3a3a3c !important;
  border-color: rgba(142,142,147,.20) !important;
}

/* If WHMCS sends custom color, keep it but make it cleaner */
.ios-ticket-status.status-custom{
  color: #111 !important;
  filter: saturate(0.95);
  border-color: rgba(0,0,0,.08) !important;
}

/* ---------- Body ---------- */
.ios-ticket-body{
  margin-top: 2px;
}

.ios-ticket-id{
  font-size: 12px !important;
  color: #9e9ea2 !important;
  font-weight: 700;
}

.ios-ticket-subject{
  margin-top: 4px;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #1d1d1f !important;
  line-height: 1.25;
}

/* Unread highlight (soft + pro) */
.ios-ticket-subject.unread{
  color: #2f6a12 !important;
}

.ios-ticket-card:has(.ios-ticket-subject.unread){
  border-color: rgba(134,199,36,.22) !important;
  box-shadow: 0 16px 42px rgba(134,199,36,.08), 0 10px 28px rgba(0,0,0,.08) !important;
}
.ios-ticket-card:has(.ios-ticket-subject.unread)::before{
  background: rgba(134,199,36,.85);
}

/* ---------- Footer ---------- */
.ios-ticket-footer{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 12px !important;
  color: #6e6e73 !important;
  display:flex;
  align-items:center;
  gap: 8px;
}
.ios-ticket-footer i{
  color: rgba(134,199,36,.85);
}

/* ---------- Responsive polish ---------- */
@media (max-width: 430px){
  .ios-ticket-card{ padding: 14px 14px !important; }
  .ios-ticket-subject{ font-size: 15px !important; }
}
/* =========================================================
   Tickets Apple Cards — UNREAD icon + soft highlight
   (Fix: remove green vertical line)
========================================================= */

/* 1) حيد أي خط عمودي (لو كان كاين via ::before أو border-left) */
.ap-ticket-card::before,
.ap-ticket-card::after{
  content: none !important;
  display: none !important;
}
.ap-ticket-card{
  border-left: none !important;
}

/* 2) Unread card: background خفيف + border خفيف */
.ap-ticket-card.is-unread{
  background: rgba(134,199,36,.08) !important;
  border-color: rgba(134,199,36,.18) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.10) !important;
}

/* 3) Icon ديال message قدّام subject فـ unread */
.ap-ticket-card.is-unread .ap-ticket-subject1{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800 !important;
}

/* ===== Tickets Apple Cards (Desktop/All) ===== */
.ap-tickets-cards{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.ap-ticket-card{
  display:block;
  text-decoration:none !important;
  color: inherit !important;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 26px;
  box-shadow: 0 10px 26px rgba(0,0,0,.07);
  padding: 16px 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ap-ticket-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(0,0,0,.11);
}

.ap-ticket-top{
  display:grid;
  grid-template-columns: 1.4fr .9fr auto;
  gap:18px;
  align-items:center;
}

.ap-ticket-dept{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6e6e73;
  margin-bottom:6px;
}

.ap-ticket-subject{
  font-size:16px;
  font-weight:800;
  color:#1d1d1f;
  line-height:1.25;
}

/* meta */
.ap-ticket-meta-label{
  font-size:11px;
  font-weight:800;
  color:#6e6e73;
  letter-spacing:.02em;
  margin-bottom:6px;
}
.ap-ticket-meta-value{
  font-size:14px;
  font-weight:700;
  color:#1d1d1f;
  display:flex;
  align-items:center;
  gap:8px;
}

/* right */
.ap-ticket-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.ap-ticket-chevron{
  width:40px;height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
}

/* ===== UNREAD style: message icon + soft highlight ===== */
.ap-ticket-card.is-unread{
  border-color: rgba(134,199,36,.28);
  background: rgba(134,199,36,.06);
}

.ap-ticket-card.is-unread .ap-ticket-subject{
  position:relative;
  padding-left: 44px;
}

.ap-ticket-card.is-unread .ap-ticket-subject::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width:30px;height:30px;
  border-radius:999px;
  background: rgba(134,199,36,.16);
  border: 1px solid rgba(134,199,36,.25);
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px;
  /* message icon SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232f6a12' d='M20 2H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.6l3.7 1.85a1 1 0 0 0 .9 0L16.4 20H20a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Zm0 16h-3.85a1 1 0 0 0-.45.1L12 19.98 8.3 18.1a1 1 0 0 0-.45-.1H4V4h16v14Z'/%3E%3Cpath fill='%232f6a12' d='M7 7h10v2H7V7Zm0 4h7v2H7v-2Z'/%3E%3C/svg%3E");
}

/* responsive */
@media(max-width: 992px){
  .ap-ticket-top{ grid-template-columns: 1fr; gap:10px; }
  .ap-ticket-right{ justify-content:flex-start; }
}
/* ===============================
   Tickets – Use Apple Cards on Mobile (like productdetails)
   =============================== */

/* hide old mobile cards */
.ios-only{ display:none !important; }

/* (اختياري) إذا بغيتي حتى table مايبانش فـ mobile */
@media (max-width: 768px){
  #tableTicketsList,
  #tableTicketsList_wrapper,
  .dataTables_wrapper,
  .table-container{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    overflow:hidden !important;
  }
}

/* Apple tickets cards container */
.ap-tickets-cards{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Card */
.ap-ticket-card{
  display:block;
  text-decoration:none !important;
  color: inherit !important;
  background: var(--ap-card) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: 26px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.08) !important;
  padding: 16px 16px !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ap-ticket-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(0,0,0,.12) !important;
  border-color: rgba(134,199,36,.18) !important;
}

/* Unread: subtle highlight */
.ap-ticket-card.is-unread{
  background: rgba(134,199,36,.07) !important;
  border-color: rgba(134,199,36,.22) !important;
}

/* Layout */
.ap-ticket-top{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.ap-ticket-left{
  flex:1;
  min-width:0;
}

/* Dept */
.ap-ticket-dept{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ap-muted);
  margin-bottom: 6px;
}

/* Subject */
.ap-ticket-subject{
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--ap-text);
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* Right column */
.ap-ticket-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

/* Status badge – clean */
.ap-ticket-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  line-height:1;
}

/* Chevron */
.ap-ticket-chevron{
  width:32px; height:32px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
}

.ap-ticket-chevron i{
  font-size: 12px;
  color:#1d1d1f;
}

/* Meta row (Last update) */
.ap-ticket-meta{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: var(--ap-muted);
  font-weight: 700;
  font-size: 13px;
}

.ap-ticket-meta-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.ap-ticket-meta i{
  color: rgba(0,0,0,.55);
}

/* Mobile tighter + better tap */
@media (max-width: 768px){
  .ap-ticket-card{ padding: 16px !important; }
  .ap-ticket-subject{ font-size: 16px; }
  .ap-ticket-status{ padding: 8px 11px; }
}
/* ===========================
   Apple Glass Header (Twenty-One) — Accent #86c724
   =========================== */
:root{
  --ap-accent:#86c724;
  --ap-bg:#f5f5f7;
  --ap-card:rgba(255,255,255,.86);
  --ap-border:rgba(0,0,0,.06);
  --ap-text:#1d1d1f;
  --ap-muted:#6e6e73;
  --ap-shadow:0 12px 34px rgba(0,0,0,.08);
  --ap-radius:22px;
}

.ap-header{ position: relative; z-index: 50; }
.ap-topbar{
  padding: 10px 0;
  background: transparent;
}
.ap-topbar .container{
  background: rgba(255,255,255,.65);
  border: 1px solid var(--ap-border);
  border-radius: 18px;
  padding: 10px 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.ap-topbar-btn{
  border: 0 !important;
  background: transparent !important;
  color: var(--ap-text) !important;
  border-radius: 14px;
}
.ap-topbar-btn:hover{ background: rgba(134,199,36,.08) !important; }
.ap-topbar-count{ font-weight: 800; margin-right: 6px; }

.ap-account-chip .ap-chip-btn{
  border: 1px solid var(--ap-border) !important;
  background: rgba(255,255,255,.7) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  color: var(--ap-text) !important;
}
.ap-account-chip .ap-chip-btn:hover{ background: rgba(134,199,36,.08) !important; }

.ap-glassbar{
  position: sticky;
  top: 0;
  padding: 10px 0;
  background: rgba(245,245,247,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.ap-glassbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.ap-brand{ display:flex; align-items:center; gap: 10px; }
.ap-logo{ height: 34px; width: auto; }
.ap-brand-text{ font-weight: 800; letter-spacing: -.02em; color: var(--ap-text); }

.ap-center{ flex: 1; display:flex; justify-content:center; }
.ap-search{ width: min(560px, 100%); }
.ap-search-group{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--ap-border);
  border-radius: 999px;
  overflow:hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.ap-icon-btn{
  background: transparent !important;
  border: 0 !important;
  color: var(--ap-muted) !important;
  padding: 12px 14px !important;
}
.ap-search-input{
  border: 0 !important;
  background: transparent !important;
  padding: 12px 14px !important;
  color: var(--ap-text) !important;
}
.ap-search-input:focus{ box-shadow:none !important; outline:none !important; }

.ap-actions{ display:flex; align-items:center; gap: 10px; }
.ap-pill-btn{
  border: 1px solid var(--ap-border) !important;
  background: rgba(255,255,255,.75) !important;
  border-radius: 999px !important;
  height: 44px;
  min-width: 44px;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 8px;
  padding: 0 14px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.ap-pill-btn:hover{
  background: rgba(134,199,36,.08) !important;
  border-color: rgba(134,199,36,.18) !important;
}

.ap-badge{
  background: rgba(134,199,36,.16) !important;
  color: #2f6a12 !important;
  border: 1px solid rgba(134,199,36,.22) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
}

.ap-navwrap{
  background: transparent !important;
  border: 0 !important;
  padding: 6px 0 12px;
}
.ap-nav{
  gap: 6px;
}
.ap-nav .nav-link{
  border-radius: 14px !important;
  padding: 10px 12px !important;
  color: var(--ap-text) !important;
}
.ap-nav .nav-link:hover{
  background: rgba(134,199,36,.08) !important;
}

/* dropdown */
.ap-nav .dropdown-menu{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--ap-shadow) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 8px !important;
}
.ap-nav .dropdown-item{
  border-radius: 12px !important;
  padding: 10px 12px !important;
}
.ap-nav .dropdown-item:hover{
  background: rgba(134,199,36,.08) !important;
}

/* Mobile search spacing */
.ap-search-mobile{ padding-top: 6px; }
/* ===== Centered Navbar (Apple-style) ===== */
.ap-navwrap .navbar-collapse{
  position: relative;
}

/* wrapper اللي كيجمع primary + secondary وسط */
.ap-nav-center{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

/* خلّي nav items بحال Apple.com: spacing + pills */
.ap-nav.ap-nav-primary,
.ap-nav.ap-nav-secondary{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.ap-nav .nav-item{
  display: flex;
  align-items: center;
}

/* Center “exact” حتى فـdesktop الكبير */
@media (min-width: 1200px){
  .ap-nav-center{
    gap: 8px;
  }
  .ap-nav .nav-link{
    padding: 10px 14px !important;
  }
}

/* Mobile: خليه طبيعي (stack) */
@media (max-width: 1199px){
  .ap-nav-center{
    display:block;
  }
  .ap-nav.ap-nav-primary,
  .ap-nav.ap-nav-secondary{
    justify-content: flex-start;
  }
}
/* ===== Apple Pay Success — Ticket Created ===== */
.ap-success{
  background: var(--ap-card) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: calc(var(--ap-radius) + 8px) !important;
  box-shadow: var(--ap-shadow) !important;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position: relative;
}

/* soft accent glow */
.ap-success::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(700px 260px at 20% 0%,
    rgba(134,199,36,.22),
    rgba(134,199,36,0) 65%
  );
  pointer-events:none;
}

/* subtle border gradient like Apple */
.ap-success::after{
  content:"";
  position:absolute; inset:0;
  padding:1px;
  border-radius: calc(var(--ap-radius) + 8px);
  background: linear-gradient(135deg,
    rgba(134,199,36,.35),
    rgba(255,255,255,.35),
    rgba(0,0,0,0)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

.ap-success-body{
  padding: 30px !important;
  position: relative;
}

.ap-success-hero{
  text-align:center;
  max-width: 680px;
  margin: 0 auto;
}

/* Check circle */
.ap-success-check{
  width: 86px;
  height: 86px;
  margin: 4px auto 16px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), rgba(255,255,255,.15)),
    rgba(134,199,36,.18);
  border: 1px solid rgba(134,199,36,.28);
  box-shadow: 0 18px 46px rgba(0,0,0,.10);
  position: relative;
  overflow: hidden;
}

/* checkmark using mask SVG (no font needed) */
.ap-success-check::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(134,199,36,.95);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.0 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 42px 42px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.0 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 42px 42px no-repeat;
  opacity: .95;
}

/* shimmer */
.ap-success-check::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform: translateX(-60%) rotate(15deg);
  animation: apShimmer 2.2s infinite ease-in-out;
  opacity: .55;
}

@keyframes apShimmer{
  0%{ transform: translateX(-70%) rotate(15deg); }
  60%{ transform: translateX(55%) rotate(15deg); }
  100%{ transform: translateX(55%) rotate(15deg); }
}

.ap-success-title{
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 10px !important;
  color: var(--ap-text) !important;
}

/* success pill (instead of classic alert) */
.ap-success-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(134,199,36,.10);
  border: 1px solid rgba(134,199,36,.24);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  margin: 6px auto 14px;
}

.ap-success-link{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.10);
  font-weight: 900;
  text-decoration: none !important;
}

.ap-success-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

.ap-success-desc{
  margin: 0 auto;
  max-width: 560px;
  color: var(--ap-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* CTA button */
.ap-success-actions{
  margin-top: 18px;
}

.ap-success-btn.btn{
  border-radius: 999px !important;
  padding: 11px 18px !important;
  font-weight: 900 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.82) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}

.ap-success-btn.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
}

/* mobile */
@media (max-width: 768px){
  .ap-success-body{ padding: 18px !important; }
  .ap-success-check{ width: 74px; height: 74px; }
  .ap-success-title{ font-size: 20px; }
}
/* =========================================================
   Apple Settings Sidebar — Accent: #86c724 (No Dark Mode)
   Works with your existing sidebar.tpl (no class changes)
========================================================= */

:root{
  --ap-bg: #f5f5f7;
  --ap-card: rgba(255,255,255,.92);
  --ap-border: rgba(0,0,0,.06);
  --ap-text: #1d1d1f;
  --ap-muted:#6e6e73;
  --ap-accent:#86c724;
  --ap-radius: 22px;
  --ap-radius-sm: 16px;
  --ap-shadow: 0 10px 26px rgba(0,0,0,.07);
  --ap-shadow-hover: 0 16px 40px rgba(0,0,0,.10);
}

/* sidebar wrapper */
.sidebar{
  gap: 14px;
}

/* Card */
.sidebar .card-sidebar{
  background: var(--ap-card) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: var(--ap-radius) !important;
  box-shadow: var(--ap-shadow) !important;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sidebar .card-sidebar:hover{
  transform: translateY(-2px);
  box-shadow: var(--ap-shadow-hover) !important;
  border-color: rgba(134,199,36,.18) !important;
}

/* Header */
.sidebar .card-sidebar .card-header{
  background: transparent !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  padding: 14px 16px !important;
  cursor: pointer;
  user-select: none;
}
.sidebar .card-sidebar .card-title{
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--ap-text) !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Header icon (section icon) */
.sidebar .card-sidebar .card-title > i:first-child{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  color: var(--ap-accent);
  font-size: 14px;
}

/* Badge */
.sidebar .card-sidebar .badge{
  background: rgba(134,199,36,.14) !important;
  color: #2f6a12 !important;
  border: 1px solid rgba(134,199,36,.22) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
}

/* Chevron minimize */
.sidebar .card-sidebar .card-minimise{
  margin-left: auto;
  color: rgba(0,0,0,.45);
  transition: transform .2s ease, opacity .2s ease;
  opacity: .9;
}
.sidebar .card-sidebar.ap-collapsed .card-minimise{
  transform: rotate(-180deg);
  opacity: .55;
}

/* Body collapse animation */
.sidebar .collapsable-card-body{
  overflow: hidden;
  transition: max-height .28s ease;
}

/* List items */
.sidebar .list-group{
  padding: 6px !important;
  gap: 6px;
  display: flex;
  flex-direction: column;
}
.sidebar .list-group-item{
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 14px !important;
  margin: 0 !important;
  padding: 12px 12px !important;
  background: rgba(255,255,255,.75) !important;
  color: var(--ap-text) !important;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.sidebar .list-group-item:hover{
  background: rgba(134,199,36,.08) !important;
  border-color: rgba(134,199,36,.20) !important;
  transform: translateX(2px);
}

/* Active */
.sidebar .list-group-item.active{
  background: rgba(134,199,36,.14) !important;
  border-color: rgba(134,199,36,.28) !important;
  color: var(--ap-text) !important;
  font-weight: 800 !important;
}

/* Disabled */
.sidebar .list-group-item.disabled{
  opacity: .55;
  pointer-events: none;
}

/* Item internal layout (your wrapper) */
.sidebar .sidebar-menu-item-wrapper{
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar .sidebar-menu-item-icon-wrapper{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  flex: 0 0 auto;
}
.sidebar .sidebar-menu-item-icon{
  color: var(--ap-accent);
  font-size: 14px;
}
.sidebar .sidebar-menu-item-label{
  flex: 1;
  font-weight: 700;
  font-size: 13px;
}
.sidebar .sidebar-menu-item-badge .badge{
  background: rgba(0,0,0,.06) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  color: rgba(0,0,0,.75) !important;
}

/* Footer */
.sidebar .card-footer{
  background: transparent !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  color: var(--ap-muted);
}

/* Mobile spacing */
@media (max-width: 768px){
  .sidebar .card-sidebar{ border-radius: 18px !important; }
  .sidebar .list-group-item{ padding: 12px !important; }
}
/* =========================
   Apple Footer (Centered)
========================= */
.ap-footer{
  background: rgba(255,255,255,.75) !important;
  border-top: 1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 18px 0;
}

.ap-footer .container{
  max-width: 1100px; /* centered feel */
}

.ap-footer-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.ap-footer-links{
  display: flex;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ap-footer-links .nav-link{
  padding: 8px 10px !important;
  border-radius: 999px;
  color: rgba(0,0,0,.72) !important;
  font-weight: 700;
  font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.ap-footer-links .nav-link:hover{
  background: rgba(134,199,36,.10);
  color: #1d1d1f !important;
}

.ap-footer-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Social inline */
.ap-footer-social{
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ap-footer-social .list-inline-item{
  margin: 0 !important;
}
.ap-footer-social a{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ap-footer-social a:hover{
  transform: translateY(-1px);
  border-color: rgba(134,199,36,.20);
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
}

/* Locale button */
.ap-footer-locale{
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ap-footer-locale:hover{
  transform: translateY(-1px);
  border-color: rgba(134,199,36,.22);
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
}
.ap-footer-locale .ap-flag{
  width: 20px;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ap-footer-locale .ap-locale-text{
  font-weight: 800;
  font-size: 12px;
  color: rgba(0,0,0,.75);
  white-space: nowrap;
}
.ap-footer-locale .ap-locale-chev{
  color: rgba(0,0,0,.45);
  font-size: 12px;
}

/* Copyright */
.ap-footer-copy{
  margin: 12px 0 0;
  text-align: center;
  color: rgba(0,0,0,.55);
  font-size: 12px;
  font-weight: 700;
}

/* Mobile */
@media (max-width: 768px){
  .ap-footer-inner{
    justify-content: center;
  }
  .ap-footer-actions{
    width: 100%;
    justify-content: center;
  }
  .ap-footer-links{
    justify-content: center;
    width: 100%;
  }
}
/* =========================================================
   Apple Pro — View Ticket (Twenty-One) — Accent #86c724
========================================================= */

/* container fixes */
.view-ticket{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.view-ticket > .card-body:first-child{
  background: var(--ap-card) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: calc(var(--ap-radius) + 4px) !important;
  box-shadow: var(--ap-shadow) !important;
  padding: 22px 22px !important;
  margin-bottom: 22px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ticket title row */
.view-ticket h3.card-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em;
  margin: 0 0 6px !important;
}
.view-ticket p{
  margin: 0 !important;
  color: var(--ap-muted);
}
.view-ticket p strong{
  color: var(--ap-text);
  font-weight: 900;
}

/* actions -> pills */
.ticket-actions{
  display:flex;
  gap: 10px;
  align-items:center;
}
.ticket-actions button{
  border: 1px solid rgba(0,0,0,.08) !important;
  background: rgba(255,255,255,.75) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: rgba(0,0,0,.78) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.ticket-actions button:hover{
  transform: translateY(-1px);
  border-color: rgba(134,199,36,.22) !important;
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
}
.ticket-actions .btn-danger{
  background: rgba(255,59,48,.12) !important;
  border-color: rgba(255,59,48,.18) !important;
  color: #b42318 !important;
  box-shadow: none !important;
}

/* replies */
.ticket-reply{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
}
.posted-by{
  font-size: 12px;
  color: rgba(0,0,0,.55);
  margin: 0 0 8px;
}
.posted-by-name{ font-weight: 900; color: rgba(0,0,0,.78); }
.posted-on{ color: rgba(0,0,0,.55); }
.requestor-badge{
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 900;
  font-size: 11px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
}

/* message bubble */
.ticket-reply .message{
  max-width: 920px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 16px 18px;
  line-height: 1.6;
  color: var(--ap-text);
  box-shadow: 0 10px 26px rgba(0,0,0,.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* staff bubble */
.ticket-reply.staff .message{
  background: linear-gradient(135deg, rgba(134,199,36,.92), rgba(111,182,26,.92));
  color: #0b1a07;
  border-color: rgba(134,199,36,.25);
}
.ticket-reply.staff .message a{ color:#0b1a07; text-decoration: underline; }
.ticket-reply.staff .posted-by-name{ color: rgba(0,0,0,.9); }

/* rating */
.rating{ margin-top: 12px; }
.rating .star{ opacity: .95; }

/* attachments */
.attachments{
  margin-top: 12px;
}
.attachments strong{
  display:flex;
  align-items:center;
  gap: 8px;
  color: rgba(0,0,0,.75);
  font-weight: 900;
}
.attachment-list{
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.attachment-list li{ list-style: none; }
.attachment-list a{
  display:block;
  text-decoration:none !important;
}
.attachment-list a span,
.attachment-list .caption,
.attachment-list a figure{
  color: inherit;
}
.attachment-list a{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.07);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.attachment-list a:hover{
  transform: translateY(-2px);
  border-color: rgba(134,199,36,.22);
  box-shadow: 0 16px 38px rgba(0,0,0,.10);
}
.attachment-list figure{
  margin: 0 0 8px;
  font-size: 22px;
  color: rgba(0,0,0,.65);
}
.attachment-list .caption{
  font-size: 13px;
  font-weight: 800;
  color: rgba(0,0,0,.78);
  word-break: break-word;
}

/* reply form card */
#ticketReplyContainer{
  background: var(--ap-card) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: calc(var(--ap-radius) + 4px) !important;
  box-shadow: var(--ap-shadow) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
#ticketReplyContainer .card-title{
  font-size: 18px !important;
  font-weight: 900 !important;
  margin-bottom: 12px !important;
}
#ticketReplyContainer label{
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.65);
}
#ticketReplyContainer .form-control{
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.85) !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}
#ticketReplyContainer .form-control:focus{
  border-color: rgba(134,199,36,.45) !important;
  box-shadow: 0 0 0 4px rgba(134,199,36,.18) !important;
}
#ticketReplyContainer textarea{ font-size: 14px; }

/* buttons */
#ticketReplyContainer .btn-primary{
  background: var(--ap-accent) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 28px rgba(134,199,36,.22);
}
#ticketReplyContainer .btn-default{
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 900 !important;
}

/* mobile */
@media (max-width: 768px){
  .view-ticket > .card-body:first-child{ padding: 18px !important; }
  .ticket-actions{ width: 100%; justify-content: flex-start; }
  .ticket-reply .message{ max-width: 100%; }
  .attachment-list{ grid-template-columns: 1fr; }
}
/* =========================================================
   ViewTicket — Color & Borders Fix (clean Apple)
========================================================= */

/* 1) Card header: border softer + shadow lighter */
.view-ticket > .card-body:first-child{
  border: 1px solid rgba(0,0,0,.05) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.06) !important;
}

/* 2) Default message bubble: more subtle */
.ticket-reply .message{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
  border-radius: 22px !important;
}

/* 3) STAFF bubble: green subtle (not full green block) */
.ticket-reply.staff .message{
  background: linear-gradient(
    135deg,
    rgba(134,199,36,.18),
    rgba(134,199,36,.10)
  ) !important;
  border: 1px solid rgba(134,199,36,.20) !important;
  color: #1d1d1f !important;          /* text dark */
  box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
}

/* Staff links readable */
.ticket-reply.staff .message a{
  color: #1d1d1f !important;
  text-decoration: underline;
}

/* 4) Requestor badge: softer pills */
.requestor-badge{
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  color: rgba(0,0,0,.70) !important;
}

/* 5) Reply buttons: Apple-like (less harsh) */
.ticket-actions button{
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.06) !important;
}
.ticket-actions .btn-danger{
  background: rgba(255,59,48,.10) !important;
  border: 1px solid rgba(255,59,48,.16) !important;
}

/* 6) Rating stars area spacing */
.rating{
  margin-top: 10px !important;
}

/* 7) Attachments cards: border + shadow softer */
.attachment-list a{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.06) !important;
}
.attachment-list a:hover{
  border-color: rgba(134,199,36,.18) !important;
}
/* =========================================================
   Announcements — Apple Pro Cards
========================================================= */

/* Container card title */
.announcements{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Single announcement card */
.announcement{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 26px;
  padding: 22px 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position: relative;
  overflow: hidden;
}

.announcement:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(0,0,0,.12);
  border-color: rgba(134,199,36,.18);
}

/* soft accent glow */
.announcement::after{
  content:"";
  position:absolute;
  width: 520px; height: 260px;
  left: -220px; top: -180px;
  background: radial-gradient(circle at 30% 30%,
    rgba(134,199,36,.18),
    rgba(134,199,36,0) 68%
  );
  pointer-events:none;
}

/* Title row */
.announcement h1{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.announcement h1 a{
  color: #1d1d1f;
  text-decoration: none;
  line-height: 1.25;
}

.announcement h1 a:hover{
  color: #1d1d1f;
  text-decoration: none;
}

/* Edit button (shows on hover) */
.announcement .show-on-hover{
  margin-left: auto;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: 12px;
}

.announcement:hover .show-on-hover{
  opacity: 1;
  transform: translateY(0);
}

/* Meta (date line) */
.announcement .list-inline{
  margin: 0 0 12px;
  padding: 0;
}

.announcement .list-inline-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.05);
  font-size: 12px;
  color: rgba(0,0,0,.55) !important;
}

/* Article text */
.announcement article{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(0,0,0,.70);
}

/* Continue button */
.announcement .btn.btn-default.btn-sm{
  border-radius: 999px !important;
  padding: 9px 12px !important;
  font-weight: 800;
  font-size: 12px;
  background: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.announcement .btn.btn-default.btn-sm:hover{
  background: rgba(134,199,36,.10) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Pagination Apple */
.pagination{
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.pagination .page-item .page-link{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
  color: rgba(0,0,0,.70);
  font-weight: 800;
  padding: 8px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .18s ease, background .18s ease;
}

.pagination .page-item .page-link:hover{
  background: rgba(134,199,36,.10);
  transform: translateY(-1px);
}

.pagination .page-item.active .page-link{
  background: rgba(134,199,36,.18) !important;
  border-color: rgba(134,199,36,.35) !important;
  color: #2f6a12 !important;
}

.pagination .page-item.disabled .page-link{
  opacity: .45;
  pointer-events: none;
}

/* Mobile spacing */
@media (max-width: 768px){
  .announcement{
    padding: 18px;
    border-radius: 22px;
  }
  .announcement h1{
    font-size: 16px;
  }
  .announcement .show-on-hover{
    opacity: 1; /* show edit on mobile */
  }
}
/* =========================================================
   Announcement View — Apple Pro (ios-article-*)
========================================================= */

.ios-article-wrapper{
  max-width: 980px;
  margin: 0 auto;
  padding: 6px 0 26px;
}

.ios-article-card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 28px;
  padding: 26px 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  margin-bottom: 16px;
}

.ios-article-card::after{
  content:"";
  position:absolute;
  width: 560px; height: 280px;
  left: -240px; top: -200px;
  background: radial-gradient(circle at 30% 30%,
    rgba(134,199,36,.18),
    rgba(134,199,36,0) 70%
  );
  pointer-events:none;
}

.ios-article-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(0,0,0,.12);
  border-color: rgba(134,199,36,.18);
}

/* Title */
.ios-article-title{
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  line-height: 1.15;
}

/* Meta chips */
.ios-article-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  color: rgba(0,0,0,.60);
  font-size: 13px;
}

.ios-article-meta span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.05);
}

.ios-article-meta i{
  color: rgba(0,0,0,.55);
}

/* Content */
.ios-article-content{
  color: rgba(0,0,0,.72);
  font-size: 15px;
  line-height: 1.85;
}

/* Make inside HTML pretty (common tags) */
.ios-article-content p{ margin: 0 0 14px; }
.ios-article-content a{
  color: #1d1d1f;
  text-decoration: none;
  border-bottom: 1px solid rgba(134,199,36,.35);
}
.ios-article-content a:hover{
  border-bottom-color: rgba(134,199,36,.65);
}
.ios-article-content h2,
.ios-article-content h3{
  color: #1d1d1f;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 18px 0 10px;
}
.ios-article-content ul,
.ios-article-content ol{
  margin: 0 0 14px 18px;
}
.ios-article-content blockquote{
  margin: 14px 0;
  padding: 14px 16px;
  border-left: 4px solid rgba(134,199,36,.45);
  border-radius: 14px;
  background: rgba(134,199,36,.07);
  color: rgba(0,0,0,.70);
}
.ios-article-content img{
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  margin: 10px 0;
}

/* Share blocks spacing */
.ios-share,
.ios-facebook{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Bottom actions */
.ios-article-actions{
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.ios-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 13px;
  text-decoration: none !important;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.78);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.ios-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
  background: rgba(134,199,36,.10);
}

.ios-btn.ios-btn-secondary{
  background: rgba(134,199,36,.14);
  border-color: rgba(134,199,36,.28);
  color: #2f6a12;
}

/* Mobile */
@media (max-width: 768px){
  .ios-article-wrapper{ padding: 0 10px 20px; }
  .ios-article-card{ padding: 18px; border-radius: 22px; }
  .ios-article-title{ font-size: 22px; }
  .ios-article-actions{ flex-direction: column; align-items: stretch; }
  .ios-btn{ width: 100%; }
}
/* =========================================================
   Knowledgebase (Twenty-One default markup) — Apple Pro
   Accent: #86c724 — No Dark Mode
   Targets your exact classes: kb-search, kb-category, kb-article-item
========================================================= */

:root{
  --ap-bg:#f5f5f7;
  --ap-card: rgba(255,255,255,.86);
  --ap-border: rgba(0,0,0,.06);
  --ap-text:#1d1d1f;
  --ap-muted:#6e6e73;
  --ap-accent:#86c724;
  --ap-shadow: 0 10px 30px rgba(0,0,0,.08);
  --ap-shadow-hover: 0 18px 48px rgba(0,0,0,.12);
  --ap-r: 24px;
  --ap-r-sm: 16px;
}

html,body{ color-scheme: light; }
body{ background: var(--ap-bg) !important; }

/* ---------- Search bar ---------- */
.kb-search{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--ap-border);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.kb-search .form-control{
  border: 0 !important;
  background: transparent !important;
  color: var(--ap-text) !important;
  padding: 16px 18px !important;
  font-size: 15px;
}

.kb-search .form-control::placeholder{
  color: rgba(0,0,0,.45);
}

.kb-search .form-control:focus{
  outline: none !important;
  box-shadow: none !important;
}

.kb-search .btn{
  border: 0 !important;
  border-left: 1px solid rgba(0,0,0,.06) !important;
  background: rgba(134,199,36,.14) !important;
  color: #2f6a12 !important;
  font-weight: 800;
  padding: 0 18px !important;
}

.kb-search .btn:hover{
  background: rgba(134,199,36,.22) !important;
}

/* ---------- Category cards ---------- */
.card.kb-category{
  background: var(--ap-card) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: calc(var(--ap-r) + 2px) !important;
  box-shadow: var(--ap-shadow) !important;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.card.kb-category:hover{
  transform: translateY(-3px);
  box-shadow: var(--ap-shadow-hover) !important;
  border-color: rgba(134,199,36,.18) !important;
}

.card.kb-category > a.card-body{
  display: block;
  padding: 18px 18px !important;
  color: inherit;
  text-decoration: none !important;
  position: relative;
}

.card.kb-category .h5{
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ap-text);
}

.card.kb-category i.fal.fa-folder{
  color: rgba(0,0,0,.55);
  margin-right: 6px;
}

.card.kb-category p{
  margin-top: 8px !important;
}

.card.kb-category p small{
  color: var(--ap-muted) !important;
  font-size: 13px;
  line-height: 1.45;
}

/* Badge number */
.card.kb-category .badge.badge-info{
  background: rgba(134,199,36,.14) !important;
  color: #2f6a12 !important;
  border: 1px solid rgba(134,199,36,.22) !important;
  border-radius: 999px !important;
  font-weight: 900;
  padding: 6px 10px;
}

/* Edit button (hover only) */
.show-on-card-hover{
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease;
}

.card.kb-category:hover .show-on-card-hover,
.kb-article-item:hover .show-on-card-hover{
  opacity: 1;
  transform: translateY(0);
}

.show-on-card-hover.btn{
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: rgba(255,255,255,.75) !important;
  font-weight: 800;
  padding: 6px 10px;
}

/* ---------- Popular articles card ---------- */
.card:has(.kb-article-item),
.card .kb-article-item{
  /* keep safe if :has unsupported */
}

.card .card-title{
  font-weight: 900 !important;
  letter-spacing: -0.01em;
}

.card{
  background: var(--ap-card) !important;
  border: 1px solid var(--ap-border) !important;
  border-radius: calc(var(--ap-r) + 2px) !important;
  box-shadow: var(--ap-shadow) !important;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.card .card-body{
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Article list rows */
.list-group .kb-article-item{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  padding: 14px 16px !important;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  align-items: center;
  transition: background .18s ease, transform .18s ease;
}

.list-group .kb-article-item:hover{
  background: rgba(134,199,36,.06) !important;
  transform: translateX(2px);
}

.kb-article-item i.fal.fa-file-alt{
  color: rgba(0,0,0,.45) !important;
}

.kb-article-item small{
  display: block;
  grid-column: 2 / 4;
  margin-top: 6px;
  color: var(--ap-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Mobile tweaks */
@media (max-width: 768px){
  .kb-search .form-control{ padding: 14px 16px !important; }
  .card.kb-category > a.card-body{ padding: 16px !important; }
  .list-group .kb-article-item{
    grid-template-columns: 26px 1fr;
  }
  .show-on-card-hover{ display: none !important; }
}
/* =========================================================
   PATCH — Modern Apple-like (KB Article style) WITHOUT removing anything
   Accent stays: #86c724
   Put this at the VERY END of custom.css
========================================================= */

/* 1) Global “page feel” مثل design اللي عطيتيني */
:root{
  --kb-bg:#ffffff;
  --kb-surface:#f5f5f7;
  --kb-border:#e5e5e7;
  --kb-shadow: 0 4px 6px rgba(0,0,0,0.07);
  --kb-shadow-lg: 0 20px 40px rgba(0,0,0,0.10);
  --kb-shadow-hover: 0 12px 24px rgba(0,0,0,0.12);
  --kb-tr: 0.3s cubic-bezier(0.4,0,0.2,1);

  /* keep your accent */
  --kb-primary: var(--accent);
  --kb-text: var(--text);
  --kb-text-light: #6f6f77;
  --kb-text-tertiary:#8e8e93;
}

/* Background gradient like the sample page */
body{
  background: linear-gradient(135deg, #fafbfc 0%, #f5f8fa 100%) !important;
  -webkit-font-smoothing: antialiased;
}

/* Make most cards look like sample (border + softer shadow + transition) */
.card,
.client-welcome-header,
.tiles .tile,
.client-home-cards .card,
.table-container,
.ap-service-card,
.ap-ticket-card,
.ios-ticket-card,
.ios-article-card,
.announcement,
.content-section{
  border-color: var(--kb-border) !important;
  box-shadow: var(--kb-shadow) !important;
  transition: var(--kb-tr) !important;
}

/* Hover shadow like sample */
.client-welcome-header:hover,
.tiles .tile:hover,
.client-home-cards .card:hover,
#tableServicesList tbody tr:hover,
.ap-service-card:hover,
.ap-ticket-card:hover,
.ios-ticket-card:hover,
.ios-article-card:hover,
.announcement:hover{
  box-shadow: var(--kb-shadow-hover) !important;
  transform: translateY(-2px);
}

/* 2) Inputs & buttons like sample (less “pill heavy”, more clean) */
.form-control,
.custom-file-label,
.dataTables_wrapper .dataTables_filter input,
.credential-input{
  border: 1px solid var(--kb-border) !important;
  background: #fff !important;
}

.form-control:focus,
.dataTables_wrapper .dataTables_filter input:focus,
.credential-input:focus{
  border-color: rgba(134,199,36,.35) !important;
  box-shadow: 0 0 0 4px rgba(134,199,36,.12) !important;
}

.btn,
.btn.btn-default,
.btn-primary,
.credential-button,
.modal-button{
  transition: var(--kb-tr) !important;
}

/* Buttons: like sample (rounded 8-10px feel) */
.btn,
.credential-button,
.modal-button,
.client-home-cards .btn.btn-default.btn-xs{
  border-radius: 10px !important;
}

/* Primary buttons keep your accent but behave like sample */
.btn-primary,
#ticketReplyContainer .btn-primary{
  background: var(--accent) !important;
  border-color: rgba(134,199,36,.22) !important;
  box-shadow: none !important;
}
.btn-primary:hover,
#ticketReplyContainer .btn-primary:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
}

/* Default buttons sample-like */
.btn-default,
.btn.btn-default,
.credential-button,
.modal-button{
  background: rgba(255,255,255,.9) !important;
  border: 1px solid var(--kb-border) !important;
}
.btn-default:hover,
.btn.btn-default:hover,
.credential-button:hover,
.modal-button:hover{
  background: rgba(134,199,36,.08) !important;
  transform: translateY(-1px);
}

/* 3) Sidebar: make it look like sample page (Apple Settings vibe) */
.sidebar .card-sidebar{
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-border) !important;
  box-shadow: var(--kb-shadow) !important;
}
.sidebar .card-sidebar:hover{
  box-shadow: var(--kb-shadow-hover) !important;
}

.sidebar .list-group-item{
  border: 1px solid transparent !important;
  background: transparent !important;
  border-radius: 10px !important;
  transition: var(--kb-tr) !important;
}
.sidebar .list-group-item:hover{
  background: rgba(134,199,36,.08) !important; /* accent hover */
}
.sidebar .list-group-item.active{
  background: rgba(134,199,36,.12) !important;
  border-color: rgba(134,199,36,.18) !important;
  font-weight: 800 !important;
}

/* sidebar titles colors like sample */
.sidebar .card-title,
.sidebar .sidebar-menu-item-label{
  color: var(--kb-text) !important;
}
.sidebar .card-sidebar .card-title{
  font-weight: 700 !important;
}
.sidebar .card-sidebar .card-title > i:first-child,
.sidebar .sidebar-menu-item-icon{
  color: var(--accent) !important;
}

/* 4) Alerts look like sample */
.alert{
  border-radius: 10px !important;
  border: 1px solid var(--kb-border) !important;
  box-shadow: var(--kb-shadow) !important;
}
.alert.alert-success{
  background: rgba(52,199,89,.08) !important;
  border-color: rgba(52,199,89,.20) !important;
}

/* 5) KB elements (search / category / article list) */
.kb-search{
  border: 1px solid var(--kb-border) !important;
  box-shadow: var(--kb-shadow) !important;
}
.kb-search .btn{
  background: rgba(134,199,36,.12) !important;
  border-left: 1px solid var(--kb-border) !important;
  color: #2f6a12 !important;
}
.kb-search .btn:hover{
  background: rgba(134,199,36,.20) !important;
}

.card.kb-category,
.card:has(.kb-article-item){
  border: 1px solid var(--kb-border) !important;
  box-shadow: var(--kb-shadow) !important;
}
.card.kb-category:hover{
  box-shadow: var(--kb-shadow-hover) !important;
}

.list-group .kb-article-item{
  transition: var(--kb-tr) !important;
}
.list-group .kb-article-item:hover{
  background: rgba(134,199,36,.06) !important;
}

/* 6) Modals: sample-like */
.ios-modal{
  background: rgba(0,0,0,.45) !important;
  backdrop-filter: blur(10px);
}
.modal-container{
  border: 1px solid var(--kb-border) !important;
  box-shadow: var(--kb-shadow-lg) !important;
}

/* 7) Footer more clean like sample */
.ap-footer{
  background: rgba(255,255,255,.85) !important;
  border-top: 1px solid var(--kb-border) !important;
  box-shadow: none !important;
}

/* 8) Reduce too much “glass blur” if you want the sample look */
.client-welcome-header,
.tiles .tile,
.client-home-cards .card,
.table-container,
.ap-service-card,
.ap-ticket-card,
.content-section,
.announcement,
.ios-article-card{
 /* === backdrop-filter: none !important;=== */
  -webkit-backdrop-filter: none !important;
  background: var(--kb-surface) !important;
}
/* =========================================
   PATCH — Global Radius 12px (put LAST)
========================================= */

:root{
  --ap-radius: 12px !important;
  --ap-radius-sm: 12px !important;
  --r-xl: 12px !important;
  --r-lg: 12px !important;
  --r-md: 12px !important;
}

/* Global “12px” on main UI blocks */
.card,
.client-welcome-header,
.tiles .tile,
.client-home-cards .card,
.table-container,
.ap-service-card,
.ap-ticket-card,
.ios-ticket-card,
.ios-article-card,
.announcement,
.content-section,
.modal-container,
.sidebar .card-sidebar{
  border-radius: 12px !important;
}

/* Pills stay pills (don’t break badges/status/buttons) */
.badge,
.status,
.label.status,
.ap-status,
.ap-ticket-status,
.ios-ticket-status,
.btn,
.credential-button,
.modal-button,
.ap-footer-locale{
  border-radius: 999px !important;
}

/* Small inner boxes */
.ap-meta,
.ap-due,
.ap-chevron,
.ap-ticket-chevron{
  border-radius: 12px !important;
}
/* =========================================
   PATCH — Navbar Radius 12px (put LAST)
========================================= */

/* Navbar containers */
#header .topbar .container,
#header .navbar .container,
#header .main-navbar-wrapper .container,
#header .navbar,
#header .main-navbar-wrapper{
  border-radius: 12px !important;
}

/* Links / buttons inside navbar */
#header .navbar-nav .nav-link,
#header .navbar-nav .dropdown-toggle,
#header .toolbar .btn,
#header .cart-btn,
#header .btn{
  border-radius: 12px !important;
}

/* Dropdown menu + items */
#header .dropdown-menu{
  border-radius: 12px !important;
  overflow: hidden;
}
#header .dropdown-item{
  border-radius: 12px !important;
}

/* Search bar in header */
#header .input-group.search,
#header .input-group.search .form-control,
#header .input-group.search .btn{
  border-radius: 12px !important;
}
/* =========================================================
   Knowledgebase Category (knowledgebasecat.tpl) — Apple Pro
   Uses existing classes: kb-search, kb-category, kb-article-item
   Radius: 12px globally supported
========================================================= */

/* Page actions bottom buttons */
a.btn.btn-default.px-4{
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: rgba(255,255,255,.75) !important;
  font-weight: 800 !important;
  padding: 10px 16px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.06) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
a.btn.btn-default.px-4:hover{
  transform: translateY(-1px);
  border-color: rgba(0,113,227,.22) !important;
  box-shadow: 0 14px 26px rgba(0,0,0,.10) !important;
  background: rgba(0,113,227,.08) !important;
}

/* Keep float-right edit btn pretty too */
a.btn.btn-default.px-4.float-right{
  border-radius: 12px !important;
}

/* If "no articles" row appears */
.list-group-item{
  border-radius: 0 !important;
}
.list-group-item:first-child{
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}
.list-group-item:last-child{
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* Optional: nicer folder-open title icon */
.card .card-title i.fal.fa-folder-open{
  color: rgba(0,0,0,.55) !important;
}

/* Category cards tighter + consistent */
.card.kb-category{
  border-radius: 12px !important;
}
.card.kb-category > a.card-body{
  border-radius: 12px !important;
}

/* Search bar radius */
.kb-search{
  border-radius: 12px !important;
}
.kb-search .form-control,
.kb-search .btn{
  border-radius: 12px !important;
}

/* Article list item radius & hover */
.list-group .kb-article-item{
  border-radius: 12px !important;
  margin: 6px 10px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  background: rgba(255,255,255,.72) !important;
}
.list-group .kb-article-item:hover{
  background: rgba(0,113,227,.06) !important;
  border-color: rgba(0,113,227,.18) !important;
  transform: none !important;
}

/* Keep the inner <small> readable */
.kb-article-item small{
  color: rgba(0,0,0,.55) !important;
}
/* ===============================
   Invoices — Apple Cards UI
   =============================== */

/* hide invoices datatable ONLY (not global) */
#tableInvoicesList,
#tableInvoicesList_wrapper{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
}

/* cards wrapper */
.ap-invoices-cards{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}

/* card */
.ap-invoice-card{
  display:block;
  text-decoration:none !important;
  color:#1d1d1f !important;

  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px; /* global radius */
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  padding: 14px 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ap-invoice-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.10);
}

/* top row */
.ap-invoice-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.ap-invoice-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8e8e93;
  margin-bottom:6px;
}
.ap-invoice-title{
  font-size:16px;
  font-weight:900;
  letter-spacing:-0.01em;
}

/* right */
.ap-invoice-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.ap-invoice-chevron{
  width:34px;height:34px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(0,0,0,.55);
}
.ap-invoice-chevron i{ font-size:12px; }

/* status pill */
.ap-invoice-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.04);
  white-space: nowrap;
}

/* meta pills */
.ap-invoice-meta{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.ap-invoice-pill{
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
  border-radius: 12px;
  padding: 10px 10px;
}
.ap-pill-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8e8e93;
  margin-bottom:4px;
}
.ap-pill-value{
  font-size:13px;
  font-weight:900;
  color:#1d1d1f;
}

/* status colors (WHMCS statusClass) */
.ap-invoice-status.status-paid{
  background: rgba(52,199,89,.14);
  border-color: rgba(52,199,89,.22);
  color:#1c7c3d;
}
.ap-invoice-status.status-unpaid{
  background: rgba(255,149,0,.14);
  border-color: rgba(255,149,0,.22);
  color:#8a4b00;
}
.ap-invoice-status.status-cancelled,
.ap-invoice-status.status-refunded,
.ap-invoice-status.status-collections{
  background: rgba(255,59,48,.12);
  border-color: rgba(255,59,48,.20);
  color:#b42318;
}

/* responsive */
@media (max-width: 768px){
  .ap-invoice-meta{ grid-template-columns: 1fr; }
}
/* ===============================
   FIX: invoices page should show our cards
   (because other parts hide .table-container/.dataTables_wrapper globally)
   =============================== */

/* hide only invoices datatable */
#tableInvoicesList,
#tableInvoicesList_wrapper{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
}

/* force cards visible even if parent rules exist */
.ap-invoices-cards{ 
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}