/* ---- source style block #ayanM43MetricManagement ---- */
.metric-summary-title{display:flex;align-items:center;gap:8px}
.metric-color-dot{width:11px;height:11px;border-radius:999px;display:inline-block;flex:0 0 auto}
.metric-definition-editor{display:grid;grid-template-columns:minmax(180px,2fr) 100px 180px auto;gap:10px;align-items:end;padding:12px 12px 0}
.metric-definition-editor label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700}
.metric-definition-editor input,.metric-definition-editor select{width:100%;min-width:0}
.metric-definition-editor input[type="color"]{height:41px;padding:4px}
.metric-delete-btn{align-self:end;white-space:nowrap}
.custom-metric-card{position:relative}
.custom-metric-card::before{background:var(--metric-color,#0ea5e9)!important}
@media(max-width:850px){.metric-definition-editor{grid-template-columns:1fr 1fr}.metric-delete-btn{grid-column:1/-1}}
body.theme-light .metric-definition-editor label{color:#334155!important}
body:not(.theme-light) .metric-definition-editor label{color:#e2e8f0!important}

/* ---- source style block #ayanM451BulkStyles ---- */
.m3-notification-badge{display:inline-flex;min-width:18px;height:18px;padding:0 5px;align-items:center;justify-content:center;border-radius:999px;background:#dc2626;color:#fff;font-size:10px}
.m3-bell{display:inline-flex;align-items:center;gap:4px}

/* ---- source style block #ayanMobileFirstM48 ---- */
@media(max-width:900px){
 html,body{margin:0!important;padding:0!important;width:100%!important;max-width:100%!important;overflow-x:hidden!important;font-size:14px!important}
 *{box-sizing:border-box!important}
 .ayan-system-shell,.ayan-view,.page,.management-page,.m3-page{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important}
 .page,.management-page,.m3-page{padding:10px!important}
 h1{font-size:21px!important;line-height:1.35!important} h2{font-size:18px!important} h3{font-size:16px!important}
 p,label,small{line-height:1.55!important}
 input,select,textarea,button{font-size:14px!important;max-width:100%!important}
 input,select,textarea{width:100%!important;min-width:0!important}
 button{min-height:40px!important;padding:7px 10px!important;white-space:normal!important}

 /* compact header */
 .ayan-main-nav{position:sticky!important;top:0!important;z-index:20000!important;display:grid!important;
   grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"brand actions" "user user"!important;
   gap:7px!important;padding:7px 9px!important;min-height:0!important}
 .ayan-brand{grid-area:brand!important;min-width:0!important;display:flex!important;align-items:center!important;gap:7px!important;overflow:hidden!important}
 .ayan-logo{height:36px!important;width:auto!important}
 .ayan-brand small{display:none!important}
 .ayan-theme-control{grid-area:actions!important;justify-self:start!important;margin-inline-end:45px!important}.ayan-theme-control>span{display:none!important}
 .ayan-theme-control select{width:70px!important;height:38px!important;padding:4px 6px!important;font-size:12px!important}
 .ayan-mobile-menu-btn{display:block!important;grid-area:actions!important;justify-self:end!important;width:38px!important;height:38px!important;min-width:38px!important;padding:0!important;font-size:19px!important}
 .m3-user-chip{grid-area:user!important;width:100%!important;min-width:0!important;padding:6px 8px!important;display:grid!important;
   grid-template-columns:36px minmax(0,1fr) auto auto!important;gap:6px!important;align-items:center!important}
 .m3-user-avatar,.m3-avatar{width:34px!important;height:34px!important;min-width:34px!important}
 .m3-user-chip strong{font-size:12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
 .m3-user-chip small{font-size:9px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
 .m3-user-actions{display:flex!important;gap:4px!important}.m3-user-actions button{min-width:48px!important;min-height:32px!important;padding:4px 6px!important;font-size:10px!important}


 /* every toolbar/form is truly narrow */
 .filters,.search-row,.top-actions,.management-head,.m3-head,.m3-tools,.comparison-dates,.alert-settings{
   display:grid!important;grid-template-columns:1fr!important;gap:7px!important;width:100%!important;min-width:0!important}
 .toolbar{
   display:grid!important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:7px!important;width:100%!important;min-width:0!important}
 .toolbar>.status-bar,.toolbar>.range-hint{grid-column:1/-1}
 .management-head>*,.m3-head>*{min-width:0!important;max-width:100%!important}
 .client-form-grid,.two-cols,.taxonomy-grid,.metric-rule-columns,.m3-grid,.m3-permissions{grid-template-columns:1fr!important}
 .m3-span-2{grid-column:auto!important}

 /* KPI cards */
 .analytics-dashboard,.management-cards,.m3-cards,#campaignSummary,.report-kpis,.stats-grid{
   display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
 .dash-card,.mgmt-card,.m3-card,.report-kpi{min-width:0!important;padding:10px!important;border-radius:12px!important}
 .dash-label,.mgmt-card small,.m3-card small,.report-kpi small{font-size:10px!important}
 .dash-value,.mgmt-card strong,.m3-card strong,.report-kpi strong{font-size:19px!important;overflow-wrap:anywhere!important}

 /* pagination */
 .client-pagination{padding:8px!important;gap:6px!important}
 .client-pagination .pagination-buttons{display:flex!important;gap:5px!important;overflow-x:auto!important;max-width:100%!important;padding-bottom:3px!important}
 .client-pagination button{min-width:44px!important;width:auto!important}
 .client-pagination select{width:100%!important}

 /* Mobile card tables: no compressed desktop columns */
 table.ayan-mobile-cards{display:block!important;width:100%!important;min-width:0!important;background:transparent!important;border:0!important}
 table.ayan-mobile-cards thead{display:none!important}
 table.ayan-mobile-cards tbody{display:grid!important;gap:9px!important;width:100%!important}
 table.ayan-mobile-cards tr{display:block!important;width:100%!important;border:1px solid #334155!important;border-radius:14px!important;overflow:hidden!important;background:#111827!important}
 table.ayan-mobile-cards td{display:grid!important;grid-template-columns:minmax(90px,34%) minmax(0,1fr)!important;align-items:center!important;
   gap:8px!important;width:100%!important;min-width:0!important;padding:8px 10px!important;border:0!important;border-bottom:1px solid rgba(148,163,184,.18)!important;
   white-space:normal!important;text-align:start!important;overflow-wrap:anywhere!important}
 table.ayan-mobile-cards td:last-child{border-bottom:0!important}
 table.ayan-mobile-cards td::before{content:attr(data-label);font-size:10px!important;font-weight:900!important;color:#94a3b8!important}
 table.ayan-mobile-cards td input,table.ayan-mobile-cards td select,table.ayan-mobile-cards td textarea{width:100%!important;min-width:0!important;max-width:100%!important}
 table.ayan-mobile-cards td button{width:100%!important}
 table.ayan-mobile-cards td[data-label="م"],table.ayan-mobile-cards td[data-label="تحديد"]{grid-template-columns:90px 1fr!important}
 table.ayan-mobile-cards td[colspan]{display:block!important;text-align:center!important}
 table.ayan-mobile-cards td[colspan]::before{display:none!important}
 .table-wrap,.management-table,.other-table-wrap,.m3-table-wrap{overflow-x:auto!important;width:100%!important;max-width:100%!important}

 /* Reports: cards for wide analytical tables */
 #reportsView .report-section{padding:10px!important;margin:10px 0!important;overflow:hidden!important}
 #reportsView .report-title{padding:10px!important}
 #reportsView .report-table.ayan-mobile-cards td{grid-template-columns:minmax(105px,40%) minmax(0,1fr)!important}
 #reportsView .bar-row{grid-template-columns:90px 1fr 52px!important;gap:6px!important;font-size:11px!important}

 /* campaign/client action controls */
 .campaign-actions,.m3-row-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;width:100%!important}
 .campaign-spend-edit{min-width:0!important;width:100%!important;display:grid!important;grid-template-columns:1fr auto!important}
 .campaign-spend-edit input{width:100%!important}
 .status-select,.category-select{min-height:40px!important}

 /* modals become bottom sheets */
 .simple-modal,.m3-modal,.modal{padding:0!important;align-items:flex-end!important}
 .simple-modal-box,.m3-modal-card,.modal-box,.modal-card{width:100%!important;max-width:none!important;max-height:94dvh!important;margin:0!important;
   border-radius:18px 18px 0 0!important;padding:12px!important;overflow:auto!important}
 .modal-buttons,.m3-modal-actions{display:grid!important;grid-template-columns:1fr!important;gap:6px!important}

 /* WhatsApp: one-column */
 .wa-layout,.whatsapp-layout,.wa-grid{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
 .wa-sidebar{max-height:32dvh!important}.wa-main{min-height:55dvh!important}.wa-bubble{max-width:88%!important}

 #projectsView{height:calc(100dvh - 96px)!important;min-height:620px!important}
}
@media(max-width:430px){
 .analytics-dashboard,.management-cards,.m3-cards,#campaignSummary,.report-kpis,.stats-grid{grid-template-columns:1fr 1fr!important}
 table.ayan-mobile-cards td{grid-template-columns:minmax(82px,32%) minmax(0,1fr)!important;padding:7px 8px!important}
}

/* ---- source style block #ayanControlMobileFixM481 ---- */
@media(max-width:900px){
  #controlView .management-page{padding:10px!important;overflow-x:hidden!important}
  #controlView .management-head{
    display:grid!important;grid-template-columns:1fr!important;gap:8px!important;
    width:100%!important;min-width:0!important
  }
  #controlView .management-head>div{min-width:0!important}
  #controlView .management-head h2{font-size:20px!important;margin:0 0 5px!important}
  #controlView .management-head p{font-size:12px!important;margin:0!important;overflow-wrap:anywhere!important}
  #controlView .management-head>button{width:100%!important;min-height:42px!important}

  #controlView .control-grid{
    display:grid!important;grid-template-columns:1fr!important;gap:10px!important;
    width:100%!important;min-width:0!important
  }
  #controlView .control-panel{
    width:100%!important;max-width:100%!important;min-width:0!important;
    padding:11px!important;margin:0!important;overflow:hidden!important;border-radius:14px!important
  }
  #controlView .control-panel-head{
    display:grid!important;grid-template-columns:1fr!important;gap:8px!important;
    width:100%!important;min-width:0!important
  }
  #controlView .control-panel-head>div{min-width:0!important}
  #controlView .control-panel-head h3{font-size:17px!important;margin:0 0 5px!important}
  #controlView .control-panel-head p{
    font-size:11px!important;line-height:1.55!important;margin:0!important;
    white-space:normal!important;overflow-wrap:anywhere!important
  }
  #controlView .control-panel-head>button,
  #controlView #createBackupBtn{width:100%!important;min-width:0!important;min-height:42px!important}

  #controlView .period-presets{
    display:grid!important;grid-template-columns:1fr!important;gap:6px!important;width:100%!important
  }
  #controlView .period-presets button{width:100%!important;min-width:0!important}

  #controlView .comparison-dates{
    display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important;min-width:0!important
  }
  #controlView .comparison-dates label{
    display:grid!important;grid-template-columns:1fr!important;gap:5px!important;
    min-width:0!important;width:100%!important;font-size:11px!important
  }
  #controlView .comparison-dates input,
  #controlView .comparison-dates button{
    width:100%!important;max-width:100%!important;min-width:0!important
  }
  #controlView .comparison-dates input{direction:ltr!important;text-align:left!important}

  #controlView .alert-settings{
    display:grid!important;grid-template-columns:1fr!important;gap:7px!important;width:100%!important
  }
  #controlView .alert-settings label{display:grid!important;grid-template-columns:1fr!important;gap:5px!important}
  #controlView .alert-settings input{width:100%!important}

  #controlView .management-cards{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;width:100%!important
  }
  #controlView .metric-note{
    white-space:normal!important;overflow-wrap:anywhere!important;font-size:10px!important;line-height:1.55!important
  }

  /* Backup and comparison tables are cards on mobile */
  #controlView table{
    display:block!important;width:100%!important;min-width:0!important;border:0!important;background:transparent!important
  }
  #controlView table thead{display:none!important}
  #controlView table tbody{display:grid!important;gap:7px!important;width:100%!important}
  #controlView table tr{
    display:block!important;width:100%!important;border:1px solid #334155!important;
    border-radius:11px!important;overflow:hidden!important;background:#111827!important
  }
  #controlView table td{
    display:grid!important;grid-template-columns:minmax(95px,38%) minmax(0,1fr)!important;
    gap:7px!important;align-items:center!important;width:100%!important;min-width:0!important;
    padding:8px!important;white-space:normal!important;overflow-wrap:anywhere!important;
    border:0!important;border-bottom:1px solid rgba(148,163,184,.16)!important
  }
  #controlView table td:last-child{border-bottom:0!important}
  #controlView table td::before{
    content:attr(data-label);font-size:10px!important;font-weight:800!important;color:#94a3b8!important
  }
  #controlView table td[colspan]{display:block!important;text-align:center!important}
  #controlView table td[colspan]::before{display:none!important}
  #controlView table button{width:100%!important;min-width:0!important}

  #controlView .control-table,
  #controlView .management-table,
  #controlView #comparisonTableWrap{width:100%!important;max-width:100%!important;overflow:visible!important}
  #controlView #smartAlerts{width:100%!important}
  #controlView .alert-item{min-width:0!important;overflow-wrap:anywhere!important}
}
@media(max-width:430px){
  #controlView .management-cards{grid-template-columns:1fr!important}
}

/* ---- source style block #ayanMobileLightCardsM49 ---- */
@media(max-width:900px){
 body.theme-light table.ayan-mobile-cards tr{background:#ffffff!important;border-color:#cbd5e1!important;color:#0f172a!important;box-shadow:0 2px 8px rgba(15,23,42,.05)!important}
 body.theme-light table.ayan-mobile-cards td{background:#ffffff!important;color:#0f172a!important;border-bottom-color:#e2e8f0!important}
 body.theme-light table.ayan-mobile-cards td::before{color:#475569!important}
 body.theme-light table.ayan-mobile-cards td input,body.theme-light table.ayan-mobile-cards td select,body.theme-light table.ayan-mobile-cards td textarea{background:#fff!important;color:#0f172a!important;border-color:#cbd5e1!important}
 body.theme-light table.ayan-mobile-cards td select option{background:#fff!important;color:#0f172a!important}
 body.theme-light table.ayan-mobile-cards tr[style]{background:#fff!important}
 body.theme-light #socialClientsSubView table.ayan-mobile-cards tr,body.theme-light :is(#otherClientsSubView,#campaignListsSubView) table.ayan-mobile-cards tr{border-inline-start:5px solid #94a3b8!important}
 body.theme-light table.ayan-mobile-cards a{color:#075985!important}
}

/* ---- source style block #ayanM4102ReportFiltersFix ---- */
#ayanMobileMenuBtn{display:none!important}#reportsView .report-filter-summary{margin:0 0 12px;padding:9px 12px;border:1px solid #334155;border-radius:10px;font-size:12px;line-height:1.55;background:rgba(51,65,85,.12)}@media(max-width:900px){#ayanMobileMenuBtn{display:block!important}#reportsView .management-head>div:last-child{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:7px!important}#reportsView .management-head>div:last-child>*{width:100%!important;min-width:0!important}}

/* ---- source style block #ayanM4103MobileFix ---- */
@media(max-width:900px){
  #employeesView .management-page{padding:10px!important;overflow-x:hidden!important}
  #employeesView .management-head{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important}
  #employeesView .management-head>button{width:100%!important;min-height:42px!important}
  #employeesView .management-cards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  #employeesView .management-table{width:100%!important;max-width:100%!important;overflow:visible!important}
  #employeesView table{display:block!important;width:100%!important;min-width:0!important;border:0!important;background:transparent!important}
  #employeesView table thead{display:none!important}
  #employeesView table tbody{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important}
  #employeesView table tr{display:block!important;width:100%!important;min-width:0!important;border:1px solid #cbd5e1!important;border-radius:14px!important;overflow:hidden!important;background:#fff!important}
  body:not(.theme-light) #employeesView table tr{background:#111827!important;border-color:#334155!important}
  #employeesView table td{display:grid!important;grid-template-columns:minmax(105px,38%) minmax(0,1fr)!important;align-items:center!important;gap:8px!important;width:100%!important;min-width:0!important;padding:9px 10px!important;border:0!important;border-bottom:1px solid rgba(148,163,184,.18)!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:start!important}
  #employeesView table td:last-child{border-bottom:0!important}
  #employeesView table td::before{content:attr(data-label);font-size:11px!important;font-weight:900!important;color:#64748b!important}
  body:not(.theme-light) #employeesView table td::before{color:#94a3b8!important}
  #employeesView table td[colspan]{display:block!important;text-align:center!important}
  #employeesView table td[colspan]::before{display:none!important}

  /* WhatsApp on iPhone/mobile: reserve real width for the name. */
  #whatsappView .wa-conversation{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;text-align:initial!important}
  #whatsappView .wa-conversation-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;width:100%!important;min-width:0!important}
  #whatsappView .wa-conversation-top strong.wa-conversation-name{display:block!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;visibility:visible!important;opacity:1!important;font-size:14px!important;font-weight:900!important;line-height:1.35!important;color:inherit!important;text-align:start!important}
  #whatsappView .wa-conversation-top>span{min-width:max-content!important;max-width:42%!important}
  #whatsappView .wa-conversation-preview{display:block!important;width:100%!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:12px!important;line-height:1.4!important;margin-top:4px!important}
  #whatsappView .wa-conversation-phone{display:block!important;direction:ltr!important;text-align:start!important;width:100%!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:11px!important;margin-top:3px!important}
}
@media(max-width:430px){
  #employeesView .management-cards{grid-template-columns:1fr 1fr!important}
  #employeesView table td{grid-template-columns:minmax(96px,36%) minmax(0,1fr)!important;padding:8px!important}
}

/* ---- source style block ---- */
/* ======================================================
   AYAN OPERATIONS NOTIFICATION BELL V1
   ====================================================== */

.ops-notification-wrap{
  position:relative;
}

.ops-notification-bell{
  position:relative;
  width:42px;
  height:42px;
  border:1px solid var(--ops-border,#e2e8f0);
  border-radius:12px;
  background:var(--ops-card,#fff);
  color:var(--ops-text,#0f172a);
  cursor:pointer;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ops-notification-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:999px;
  background:#dc2626;
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:19px;
  text-align:center;
  border:2px solid var(--ops-card,#fff);
}

.ops-notification-dropdown{
  display:none;
  position:absolute;
  top:50px;
  left:0;
  width:min(390px,calc(100vw - 24px));
  max-height:520px;
  overflow:hidden;
  background:var(--ops-card,#fff);
  color:var(--ops-text,#0f172a);
  border:1px solid var(--ops-border,#e2e8f0);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(15,23,42,.22);
  z-index:12000;
}

.ops-notification-dropdown.show{
  display:block;
}

.ops-notification-head{
  padding:13px 14px;
  border-bottom:1px solid var(--ops-border,#e2e8f0);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.ops-notification-refresh{
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font-size:18px;
}

.ops-notification-list{
  max-height:450px;
  overflow:auto;
}

.ops-notification-item{
  padding:13px 14px;
  border-bottom:1px solid var(--ops-border,#e2e8f0);
  cursor:pointer;
}

.ops-notification-item:last-child{
  border-bottom:0;
}

.ops-notification-item.unread{
  background:#eff6ff;
}

.ops-notification-title{
  font-weight:900;
  margin-bottom:5px;
}

.ops-notification-body{
  font-size:13px;
  line-height:1.6;
  color:#475569;
}

.ops-notification-time{
  margin-top:6px;
  font-size:11px;
  color:#94a3b8;
}

.ops-notification-empty{
  padding:24px 16px;
  text-align:center;
  color:#64748b;
}

#operationsView[data-theme="dark"] .ops-notification-item.unread{
  background:#172554;
}

#operationsView[data-theme="dark"] .ops-notification-body{
  color:#cbd5e1;
}

@media(max-width:700px){

  .ops-notification-dropdown{
    position:fixed;
    top:70px;
    left:12px;
    right:12px;
    width:auto;
    max-height:70vh;
  }

}