/* Mailspace UI Sync v2.0 — shared visual language, mobile navigation, tablet fixes */
:root{
  color-scheme: light !important;
  --ms-accent:#E0A61C;--ms-accent-strong:#8A5C02;--ms-accent-soft:#FEF5DC;
  --ms-canvas:#F7F6F2;--ms-card:#fff;--ms-line:#E5E2DA;--ms-ink:#1B1916;--ms-muted:#78716C;
  --ms-radius:14px;--ms-shadow:0 10px 30px rgba(20,16,8,.08)
}
html, body, .app-shell, .content-wrapper, .view-section, .view-body, .mail-body {
  color-scheme: light !important;
  background-color: #F7F6F2 !important;
}
.view-header {
  background-color: #FFFFFF !important;
}
/* Normalize legacy purple surfaces */
.feature-icon.purple,.view-icon-badge.tfa,.view-icon-badge.overview{background:var(--ms-accent-soft)!important;color:var(--ms-accent-strong)!important}
.api-guide-card .method-pill,.method-pill{background:var(--ms-accent-soft)!important;color:var(--ms-accent-strong)!important;border-color:#F0D999!important}
.merge-section .merge-account{border-color:var(--ms-line)!important}
#viewMedia .merge-account{display:none!important}
.merge-tool-frame{background:var(--ms-canvas)!important;border-radius:0}

/* Ẩn chữ cái avatar ở danh sách email theo yêu cầu */
.account-avatar-sm {
  display: none !important;
}

/* Mobile More sheet */
.mobile-more-backdrop{position:fixed;inset:0;background:rgba(20,16,8,.32);backdrop-filter:blur(3px);z-index:998}
.mobile-more-sheet{position:fixed;left:0;right:0;bottom:0;z-index:999;background:#fff;border-radius:22px 22px 0 0;border:1px solid var(--ms-line);box-shadow:0 -18px 50px rgba(20,16,8,.2);padding:8px 16px calc(20px + env(safe-area-inset-bottom));max-height:min(76dvh,680px);overflow:auto;transform:translateY(0)}
.mobile-more-handle{width:42px;height:4px;background:#D9D5CC;border-radius:999px;margin:0 auto 12px}
.mobile-more-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.mobile-more-head strong{font-size:18px}.mobile-more-head small{display:block;color:var(--ms-muted);margin-top:2px;font-size:11px}.mobile-more-close{width:38px;height:38px;border:1px solid var(--ms-line);background:#fff;border-radius:11px;font-size:24px;line-height:1;cursor:pointer}
.mobile-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mobile-more-item{display:flex;align-items:center;gap:11px;text-align:left;padding:13px;border:1px solid var(--ms-line);background:#fff;border-radius:13px;min-width:0;cursor:pointer;color:var(--ms-ink)}
.mobile-more-item:hover,.mobile-more-item.active{background:var(--ms-accent-soft);border-color:#E7C56B;color:var(--ms-accent-strong)}
.mobile-more-item .ms-more-icon{width:36px;height:36px;border-radius:10px;background:#F6F4EF;display:grid;place-items:center;flex:none}.mobile-more-item.active .ms-more-icon{background:#fff8e8}
.mobile-more-item svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}.mobile-more-item span{font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-more-recent{border-top:1px solid var(--ms-line);margin-top:14px;padding-top:12px}.mobile-more-label{display:block;font-size:10px;color:var(--ms-muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}.mobile-more-recent #mobileRecentList{display:flex;gap:7px;flex-wrap:wrap}.mobile-recent-chip{border:1px solid var(--ms-line);background:#FAF9F6;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:650;color:#5E5951;cursor:pointer}
body.ms-sheet-open{overflow:hidden}

/* Search / command palette */
.tool-launcher{border:0;padding:0;background:transparent;width:min(620px,calc(100vw - 28px));max-width:none}.tool-launcher::backdrop{background:rgba(20,16,8,.38);backdrop-filter:blur(4px)}
.tool-launcher-shell{background:#fff;border:1px solid var(--ms-line);border-radius:18px;box-shadow:var(--ms-shadow);overflow:hidden}.tool-launcher-search{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--ms-line)}.tool-launcher-search input{border:0;outline:0;font:inherit;font-size:15px;min-width:0}.tool-launcher-search kbd{font-size:10px;border:1px solid var(--ms-line);background:#F7F6F2;padding:3px 6px;border-radius:6px;color:var(--ms-muted)}
.tool-launcher-list{padding:8px;max-height:430px;overflow:auto}.tool-launcher-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;background:#fff;border-radius:11px;padding:11px 12px;text-align:left;cursor:pointer;color:var(--ms-ink)}.tool-launcher-item:hover,.tool-launcher-item.is-selected{background:var(--ms-accent-soft)}.tool-launcher-item strong{font-size:12.5px}.tool-launcher-item small{display:block;color:var(--ms-muted);font-size:10.5px;margin-top:2px}.tool-launcher-item kbd{font-size:9px;color:var(--ms-muted)}.tool-launcher-hint{margin:0;border-top:1px solid var(--ms-line);padding:9px 12px;color:var(--ms-muted);font-size:10px}

/* Tablet TempMail overflow: switch earlier from table-like rows to cards / clipped content */
@media (max-width:820px){
  .tempmail-panel,.tempmail-hero-card,.tempmail-inbox-card,.tempmail-unified-bar,.tempmail-inbox-header{min-width:0!important;max-width:100%!important}
  .tempmail-unified-bar{flex-wrap:wrap!important}.tempmail-left-controls{min-width:0!important;max-width:100%!important;flex-wrap:wrap!important}
  .tempmail-recent-pills{max-width:100%!important;min-width:0!important;overflow-x:auto!important}
  .api-tempmail-table-wrapper,.table-wrapper,.data-table-wrapper{max-width:100%!important;overflow-x:auto!important}
  #viewTempMail .view-body{overflow-x:hidden!important}
}

/* Mobile shell polish */
@media (max-width:760px){
  .view-header{padding:14px 15px!important;min-height:72px!important;gap:10px!important}.view-title{font-size:16px!important}.view-subtitle{font-size:10.5px!important}.view-icon-badge{width:38px!important;height:38px!important;border-radius:11px!important}.view-body{padding:18px 14px calc(92px + env(safe-area-inset-bottom))!important}
  .mobile-bottom-nav{padding-bottom:env(safe-area-inset-bottom)}
  .mobile-nav-item{min-width:0}.mobile-nav-item span{font-size:9.5px!important;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .api-guide-grid{grid-template-columns:1fr!important}.api-docs-body [style*="min-width: 280px"]{min-width:0!important;width:100%!important}
  #apiViewAccountSelect{min-width:0!important;width:100%!important}
  .location-view .view-body{padding-left:12px!important;padding-right:12px!important}
}
@media (max-width:359px){.mobile-more-grid{grid-template-columns:1fr}.mobile-more-item{padding:11px}.mobile-nav-item span{font-size:8.7px!important}}

/* Reduce inconsistent hard-coded purple accents without touching semantic social-network colors */
#viewApi :where(.purple,.text-purple){color:var(--ms-accent-strong)!important}
#viewApi :where(.bg-purple,.purple-soft){background:var(--ms-accent-soft)!important}

/* API code examples */
.api-example-section{border:1px solid var(--ms-line);background:#fff;border-radius:14px;padding:18px;box-shadow:0 1px 3px rgba(20,16,8,.04)}
.api-example-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.api-example-head h2{font-size:15px;margin:0;color:var(--ms-ink)}.api-example-head p{font-size:11px;color:var(--ms-muted);margin:5px 0 0;max-width:720px;line-height:1.65}
.api-example-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.api-example-tabs button{border:1px solid var(--ms-line);background:#FAF9F6;color:#5E5951;border-radius:8px;padding:7px 10px;font-size:11px;font-weight:700;cursor:pointer}.api-example-tabs button.active{background:var(--ms-accent-soft);border-color:#E7C56B;color:var(--ms-accent-strong)}
.api-example-code{margin:0;background:#1F1D19;color:#F7F3EA;border-radius:11px;padding:15px;overflow:auto;font-size:11px;line-height:1.65;min-height:110px}.api-example-code code{font-family:var(--font-mono)}
@media(max-width:600px){.api-example-head{flex-direction:column}.api-example-head .btn{width:100%}}

/* ========================================================================= */
/* TEMPMAIL MOBILE & RESPONSIVE POLISH (UI SYNC v2.2)                        */
/* ========================================================================= */

/* Brand Color Normalization (Replaces legacy purple with amber gold) */
.tempmail-hero-card::before{background:linear-gradient(90deg,#E0A61C,#F7CB5C)!important}
.tempmail-history-pill.active{background:var(--ms-accent-strong,#8A5C02)!important;border-color:var(--ms-accent,#E0A61C)!important;color:#FFFFFF!important;font-weight:700!important}
.tempmail-history-pill:hover{background:var(--ms-accent-soft,#FEF5DC)!important;border-color:var(--ms-accent,#E0A61C)!important;color:var(--ms-accent-strong,#8A5C02)!important}
.tempmail-badge-counter{background:var(--ms-accent-strong,#8A5C02)!important;color:#FFFFFF!important}
.tempmail-history-open-btn{color:var(--ms-accent-strong,#8A5C02)!important;border-color:rgba(224,166,28,0.4)!important}
.tempmail-history-open-btn:hover{background:var(--ms-accent-soft,#FEF5DC)!important}
.view-icon-badge.tempmail{background:var(--ms-accent-soft,#FEF5DC)!important;color:var(--ms-accent-strong,#8A5C02)!important}
.tempmail-address-icon-box{background:var(--ms-accent-soft,#FEF5DC)!important;color:var(--ms-accent-strong,#8A5C02)!important}
.tempmail-hero-address-bar:hover{border-color:rgba(224,166,28,0.5)!important}
.tempmail-custom-input-box{border-color:rgba(224,166,28,0.5)!important}
.tempmail-history-item-row:hover,.tempmail-history-item-row.is-active{border-color:var(--ms-accent,#E0A61C)!important}
.tempmail-history-item-row.is-active{background:var(--ms-accent-soft,#FEF5DC)!important}

/* Mobile Bottom Nav text overflow protection */
.mobile-nav-item span{font-size:9.5px!important;max-width:72px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

/* Responsive Address Studio Bar */
@media (max-width:820px){
  .tempmail-hero-card{padding:16px 14px!important;overflow:hidden!important}
  #viewTempMail .tempmail-hero-address-bar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:12px!important;
    box-sizing:border-box!important;
    padding:14px!important;
  }
  #viewTempMail .tempmail-address-left{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    align-items:center!important;
    gap:11px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    flex:none!important;
  }
  #viewTempMail .tempmail-address-icon-box{grid-column:1!important;flex:none!important}
  #viewTempMail .tempmail-current-address-text{
    grid-column:2!important;
    min-width:0!important;
    max-width:100%!important;
    width:auto!important;
    font-size:15px!important;
    line-height:1.45!important;
    letter-spacing:0!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
  }
  #viewTempMail .tempmail-address-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:8px!important;
    flex:none!important;
  }
  #viewTempMail .tempmail-address-actions .btn{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:42px!important;
    padding:9px 8px!important;
    justify-content:center!important;
    white-space:normal!important;
    line-height:1.2!important;
  }
}

@media (max-width:600px){
  .tempmail-header-row{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .tempmail-status-group{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
  }
  .tempmail-domain-picker{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
  }
  .tempmail-domain-select{
    flex:1!important;
    max-width:200px!important;
  }

  /* Custom name box on mobile */
  .tempmail-custom-input-box{
    display:none;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    padding:12px!important;
  }
  .tempmail-custom-input-box.active{
    display:flex!important;
  }
  .tempmail-prefix-input-wrap{
    width:100%!important;
    display:flex!important;
    min-width:0!important;
  }
  .tempmail-prefix-input{
    flex:1!important;
    min-width:0!important;
    width:100%!important;
    font-size:13px!important;
  }
  .tempmail-prefix-domain-tag{
    flex-shrink:0!important;
  }
  .tempmail-custom-btn-group{
    display:flex!important;
    gap:8px!important;
    width:100%!important;
  }
  .tempmail-custom-btn-group .btn{
    flex:1!important;
    justify-content:center!important;
  }

  /* Unified bar & History pills — Never cut off "Tất Cả" */
  .tempmail-unified-bar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    padding-top:12px!important;
  }
  .tempmail-left-controls{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
  }
  .tempmail-left-controls .btn{
    width:100%!important;
    justify-content:center!important;
    padding:9px 8px!important;
    font-size:12px!important;
  }
  .tempmail-history-compact{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-width:0!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
  }
  .tempmail-history-label{
    flex-shrink:0!important;
    font-size:11.5px!important;
  }
  .tempmail-recent-pills{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    display:flex!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  .tempmail-history-pill{
    flex-shrink:0!important;
    max-width:140px!important;
  }
  .tempmail-history-open-btn{
    flex-shrink:0!important;
    margin-left:auto!important;
    white-space:nowrap!important;
    padding:6px 10px!important;
    font-size:11px!important;
  }
}

@media (max-width:520px){
  #viewTempMail .tempmail-hero-address-bar{padding:12px!important}
  #viewTempMail .tempmail-address-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #viewTempMail #btnCopyTempMail{grid-column:1 / -1!important}
  #viewTempMail .tempmail-current-address-text{font-size:14px!important}
}

@media (max-width:340px){
  #viewTempMail .tempmail-address-left{grid-template-columns:34px minmax(0,1fr)!important;gap:9px!important}
  #viewTempMail .tempmail-address-icon-box{width:34px!important;height:34px!important}
  #viewTempMail .tempmail-address-actions{grid-template-columns:1fr!important}
  #viewTempMail #btnCopyTempMail{grid-column:auto!important}
  .tempmail-recent-pills{max-width:110px!important}
}

/* History Modal Search Polish */
#modalTempMailHistory .search-wrapper,
#modalTempMailHistory .search-input-group {
  position: relative !important;
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}
#modalTempMailHistory .search-icon-svg,
#modalTempMailHistory .search-wrapper > svg,
#modalTempMailHistory .search-input-group > svg {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 15px !important;
  height: 15px !important;
  stroke: var(--text-muted) !important;
  stroke-width: 2 !important;
  fill: none !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
#modalTempMailHistory .search-input,
#modalTempMailHistory .search-input-group input {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  line-height: 38px !important;
  padding: 0 12px 0 36px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  color: var(--text-main) !important;
  outline: none !important;
  box-shadow: 0 1px 2px rgba(20, 16, 8, 0.04) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
}
#modalTempMailHistory .search-input:focus,
#modalTempMailHistory .search-input-group input:focus {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 3px var(--amber-glow) !important;
  background: #FFFFFF !important;
}
#modalTempMailHistory #btnClearAllTempMailHistory {
  height: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  white-space: nowrap !important;
}
@media (max-width:600px){
  #modalTempMailHistory .modal-box{
    width:95%!important;
    max-width:480px!important;
    max-height:85vh!important;
    margin:auto!important;
    border-radius:16px!important;
  }
  .tempmail-history-item-row{
    flex-wrap:wrap!important;
    gap:8px!important;
    padding:10px 12px!important;
  }
  .tempmail-history-item-addr{
    width:100%!important;
    justify-content:space-between!important;
    font-size:12.5px!important;
    min-width:0!important;
  }
  .tempmail-history-item-active-tag{
    white-space:nowrap!important;
    flex-shrink:0!important;
  }
  .tempmail-history-item-actions{
    width:100%!important;
    justify-content:flex-end!important;
  }
}

/* Messages Inbox Table -> Responsive Mobile/Tablet Cards */
#viewTempMail .table-container{overflow-x:auto!important;max-width:100%!important}
@media (min-width:821px){
  #viewTempMail .data-table{min-width:780px!important;width:100%!important}
}
@media (max-width:820px){
  #viewTempMail .table-container{
    background:transparent!important;
    border:none!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  #viewTempMail .tempmail-inbox-header{
    background:var(--bg-card,#fff)!important;
    border:1px solid var(--border-card,#E5E2DA)!important;
    border-radius:12px!important;
    margin-bottom:12px!important;
    padding:12px 14px!important;
  }
  #viewTempMail .data-table{
    display:block!important;
    width:100%!important;
    border:none!important;
  }
  #viewTempMail .data-table thead{
    display:none!important;
  }
  #viewTempMail #tempmailTbody{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    width:100%!important;
  }
  #viewTempMail #tempmailTbody > tr{
    display:flex!important;
    flex-direction:column!important;
    background:var(--bg-card,#fff)!important;
    border:1px solid var(--border-card,#E5E2DA)!important;
    border-radius:14px!important;
    padding:14px 16px!important;
    gap:10px!important;
    box-shadow:0 2px 10px rgba(20,16,8,0.04)!important;
    box-sizing:border-box!important;
    width:100%!important;
    position:relative!important;
  }
  #viewTempMail #tempmailTbody > tr > td{
    display:block!important;
    padding:0!important;
    border:none!important;
    width:100%!important;
    max-width:100%!important;
  }
  /* STT column hidden on mobile */
  #viewTempMail #tempmailTbody > tr > td:first-child{
    display:none!important;
  }
  /* From */
  #viewTempMail #tempmailTbody > tr > td:nth-child(2) > div:first-child{
    font-size:14.5px!important;
    max-width:100%!important;
    color:var(--text-main,#1B1916)!important;
  }
  /* Subject */
  #viewTempMail #tempmailTbody > tr > td:nth-child(3) > div{
    font-size:13.5px!important;
    max-width:100%!important;
    white-space:normal!important;
    word-break:break-word!important;
    line-height:1.4!important;
  }
  /* OTP row */
  #viewTempMail #tempmailTbody > tr > td:nth-child(4){
    min-height:0!important;
  }
  #viewTempMail #tempmailTbody > tr > td:nth-child(4) .tempmail-otp-highlight{
    display:flex!important;
    width:100%!important;
    justify-content:space-between!important;
    align-items:center!important;
    padding:9px 12px!important;
    box-sizing:border-box!important;
    font-size:17px!important;
    border-radius:8px!important;
  }
  /* Time & Action buttons */
  #viewTempMail #tempmailTbody > tr > td:nth-child(5){
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    font-size:11.5px!important;
    border-top:1px dashed var(--border-card,#E5E2DA)!important;
    padding-top:10px!important;
    margin-top:2px!important;
  }
  #viewTempMail #tempmailTbody > tr > td:nth-child(6){
    display:flex!important;
    width:100%!important;
  }
  #viewTempMail #tempmailTbody > tr > td:nth-child(6) > div{
    display:flex!important;
    width:100%!important;
    gap:8px!important;
  }
  #viewTempMail #tempmailTbody > tr > td:nth-child(6) .btn-view-temp-msg{
    flex:1!important;
    justify-content:center!important;
    min-height:38px!important;
  }
  #viewTempMail #tempmailTbody > tr > td:nth-child(6) .btn-delete-temp-msg{
    width:44px!important;
    flex:none!important;
    justify-content:center!important;
    min-height:38px!important;
  }
  /* Empty state adjustment */
  #viewTempMail #tempmailTbody > tr:has(.tempmail-empty-state){
    background:transparent!important;
    border:none!important;
    box-shadow:none!important;
    padding:30px 10px!important;
  }
}

/* ========================================================================= */
/* ACCOUNT TABLE ACTION BUTTONS & COLUMN POLISH (SHIFT DELETE BUTTON LEFT)    */
/* ========================================================================= */

/* Column Proportions */
.data-table .col-password { width: 140px !important; }
.data-table .col-token { width: 140px !important; }
.data-table .col-status { width: 110px !important; }
.data-table .col-tag { width: 110px !important; }

/* Standard Desktop (>= 1121px): Full labels with generous right margin for delete button */
@media (min-width: 1121px) {
  .data-table .col-actions {
    width: 285px !important;
  }
  .data-table th.col-actions {
    width: 285px !important;
    padding-right: 20px !important;
    text-align: left !important;
  }
  .data-table td.cell-actions {
    width: 285px !important;
    padding-right: 20px !important;
  }
  .data-table .row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
  }
  .data-table .row-actions [data-action="delete-single"] {
    margin-right: 6px !important;
    flex-shrink: 0 !important;
  }
}

/* Compact Desktop / Tablet Landscape (761px - 1120px): Icon-only buttons with clean spacing */
@media (min-width: 761px) and (max-width: 1120px) {
  .data-table .col-actions {
    width: 165px !important;
  }
  .data-table th.col-actions,
  .data-table td.cell-actions {
    width: 165px !important;
    padding-right: 16px !important;
    text-align: left !important;
  }
  .data-table .row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
  }
  .data-table .row-actions > .btn {
    width: 31px !important;
    min-width: 31px !important;
    padding: 7px 0 !important;
    justify-content: center !important;
  }
  .data-table .row-actions > .btn > span {
    display: none !important;
  }
  .data-table .row-actions [data-action="delete-single"] {
    margin-right: 4px !important;
    flex-shrink: 0 !important;
  }
}

/* Account email cell truncation safety */
.data-table td.cell-account {
  min-width: 0 !important;
  overflow: hidden !important;
}
.data-table .cell-email-row {
  min-width: 0 !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.data-table .email-text {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 1 auto !important;
}

/* Hide Sidebar Tool Search & Language Toggle per user request */
#desktopToolSearch, .ms-tool-search, .sidebar-lang-box {
  display: none !important;
}

/* Hide Nguồn dữ liệu settings button per user request */
[data-location-settings], .loc-btn[data-location-settings], button[data-location-settings] {
  display: none !important;
}

/* ============================================================ */
/* TABLE TOOLBAR: BỘ LỌC QUA TRÁI, TÌM MAIL QUA PHẢI            */
/* ============================================================ */
.table-filter-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.table-filter-row .filter-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
}

.table-filter-row .filter-group .select-ctrl {
  flex: 0 1 auto !important;
  max-width: 220px !important;
  min-height: 38px !important;
}

.table-filter-row .filter-group label {
  margin-left: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: var(--text-dim) !important;
}

.table-filter-row .filter-clear {
  margin-left: 6px !important;
  padding: 6px 8px !important;
  font-size: 11.5px !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
}

.table-filter-row .filter-clear:hover {
  color: var(--purple, #7c3aed) !important;
}

.table-filter-row .mobile-filter-toggle {
  display: none !important;
}

.table-filter-row .table-search-wrap {
  flex: 0 0 340px !important;
  max-width: 420px !important;
  min-width: 250px !important;
  margin-left: auto !important;
}

/* MOBILE VIEW (<= 768px): GIỮ NGUYÊN HOÀN TOÀN CHUẨN MOBILE */
@media (max-width: 768px) {
  .table-integrated-header {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .table-header-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .table-filter-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 9px !important;
  }
  .table-filter-row .table-search-wrap {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
  }
  .table-filter-row .mobile-filter-toggle {
    order: 2 !important;
    width: 100% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 44px !important;
    font-size: 11px !important;
    gap: 6px !important;
  }
  .table-filter-row .filter-group {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .table-filter-row .filter-group:not(.is-open) {
    display: none !important;
  }
  .table-filter-row .filter-group.is-open {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 13px !important;
    border: 1px solid var(--border-card) !important;
    border-radius: 10px !important;
    background: #fff !important;
    gap: 9px !important;
  }
  .table-filter-row .filter-group.is-open .select-ctrl {
    max-width: none !important;
    width: 100% !important;
    min-height: 43px !important;
    font-size: 12px !important;
  }
  .table-filter-row .filter-group.is-open #filterTag {
    grid-column: 1/-1 !important;
  }
  .table-filter-row .filter-group.is-open label {
    margin-left: 0 !important;
    font-size: 11px !important;
    padding: 8px 0 !important;
  }
  .table-filter-row .filter-group.is-open .filter-clear {
    font-size: 11px !important;
    margin-left: auto !important;
    padding: 7px !important;
  }
}

/* Batch Copy Group & Dropdown Menu */
.batch-copy-group { position: relative; display: inline-flex; align-items: stretch; }
.batch-copy-group > #btnBatchCopy { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: 1px solid rgba(0, 0, 0, 0.15) !important; }
.batch-copy-toggle { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; padding: 0 9px !important; min-width: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; }
.batch-copy-menu { position: absolute; top: calc(100% + 6px); left: 0; background: #FFFFFF !important; border: 1px solid var(--border-card, #E5E2DA); border-radius: 11px; box-shadow: 0 10px 25px rgba(20, 16, 8, 0.16); z-index: 1000; min-width: 250px; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.batch-copy-menu[hidden] { display: none !important; }
.batch-menu-item { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 12px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; text-align: left; transition: background 0.15s ease; width: 100%; color: var(--text-main); }
.batch-menu-item:hover { background: #FEF5DC; }
.batch-menu-item strong { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--text-main); }
.batch-menu-item span { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 640px) {
  .batch-bar { padding: 10px 12px !important; gap: 8px !important; }
  .batch-actions { width: 100% !important; justify-content: flex-start !important; }
  .batch-copy-group { flex: 1 1 auto !important; }
  .batch-copy-group > #btnBatchCopy { flex: 1 !important; }
}



