/* ============================================================
   Seen Marketing Client Portal v4 — Premium Experience / Phase 1
   Navigation + Projects + Project Workspace + Tasks
   ============================================================ */

body.customers {
  --mk4-blue:#ffb23f;
  --mk4-blue2:#f59b23;
  --mk4-cyan:#ffc05a;
  --mk4-navy:#071637;
  --mk4-ink:#0b1f49;
  --mk4-text:#506782;
  --mk4-muted:#8a99ad;
  --mk4-border:#e4ebf5;
  --mk4-bg:#f6f9fd;
  --mk4-surface:#fff;
  --mk4-green:#16a45a;
  --mk4-red:#ea3d60;
  --mk4-orange:#e79513;
  --mk4-shadow:0 18px 50px rgba(15,39,82,.08);
  --mk4-shadow-soft:0 9px 28px rgba(15,39,82,.055);
}

/* ========== Header ========== */
body.customers > .navbar.header.mk4-header {
  position:sticky!important;
  top:0;
  z-index:1040;
  min-height:76px!important;
  border-bottom:1px solid rgba(222,231,243,.86)!important;
  background:rgba(255,255,255,.86)!important;
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:0 1px 0 rgba(10,31,73,.025)!important;
  transition:min-height .24s ease,box-shadow .24s ease,background .24s ease;
}

body.customers > .navbar.header.mk4-header.mk4-scrolled {
  min-height:66px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 10px 32px rgba(15,39,82,.07)!important;
}

.mk4-nav-container {
  display:flex;
  align-items:center;
  min-height:76px;
  transition:min-height .24s ease;
}

.mk4-scrolled .mk4-nav-container { min-height:66px; }

.mk4-brand-wrap {
  display:flex!important;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

body.customers > .navbar.header .mk4-brand {
  width:202px;
}

.mk4-portal-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border:1px solid #e4eaf4;
  border-radius:999px;
  color:#63738d;
  background:rgba(248,251,255,.92);
  font-size:9px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}

.mk4-portal-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--mk4-cyan),var(--mk4-blue));
  box-shadow:0 0 0 4px rgba(99,91,255,.07);
}

.mk4-navbar-collapse {
  flex:1;
}

body.customers > .navbar.header .mk4-nav-list {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  min-height:76px;
}

body.customers > .navbar.header .mk4-nav-list > li > a {
  display:flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  margin:0 1px;
  padding:10px 11px!important;
  border-radius:10px;
  color:#283b5b!important;
  font-size:12px!important;
  font-weight:750!important;
}

body.customers > .navbar.header .mk4-nav-list > li > a i {
  color:#6c7d96;
  font-size:12px;
  transition:color .18s ease,transform .18s ease;
}

body.customers > .navbar.header .mk4-nav-list > li > a:hover {
  color:#a45d00!important;
  background:#fff8ef!important;
  transform:translateY(-1px);
}

body.customers > .navbar.header .mk4-nav-list > li > a:hover i {
  color:var(--mk4-blue2);
  transform:translateY(-1px);
}

body.customers > .navbar.header .mk4-nav-list > li.active > a {
  color:#a45d00!important;
  background:linear-gradient(135deg,#f0f5ff,#f7f9ff)!important;
  box-shadow:inset 0 0 0 1px #dce8fb;
}

body.customers > .navbar.header .mk4-nav-list > li.active > a:after {
  display:none!important;
}

.mk4-nav-divider {
  width:1px;
  height:28px;
  margin:0 8px!important;
  background:#e4eaf3;
}

.mk4-announcement-link > a {
  position:relative;
  justify-content:center;
  width:40px;
  padding:10px!important;
}

.mk4-announcement-link > a i {
  font-size:16px!important;
}

.mk4-notification-dot {
  position:absolute;
  top:4px;
  right:2px;
  display:grid;
  place-items:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border:2px solid #fff;
  border-radius:999px;
  color:#fff;
  background:#f43f5e;
  font-size:8px;
  font-weight:850;
}

body.customers > .navbar.header .mk4-profile-trigger {
  display:flex!important;
  align-items:center;
  gap:8px!important;
  min-width:146px;
  padding:7px 9px!important;
  border:1px solid transparent;
}

.mk4-profile-avatar {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  overflow:hidden;
  border-radius:50%;
  background:linear-gradient(135deg,#fff7ed,#f3efff);
  box-shadow:0 0 0 2px #eef3fb;
}

.mk4-profile-avatar.is-large {
  width:42px;
  height:42px;
  flex:0 0 42px;
}

.mk4-profile-avatar img,
body.customers > .navbar.header .mk4-profile-avatar .client-profile-image-small {
  width:100%!important;
  height:100%!important;
  object-fit:cover;
  border:0!important;
  box-shadow:none!important;
}

.mk4-profile-copy {
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.15;
}

.mk4-profile-copy strong {
  max-width:82px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#10264f;
  font-size:11px;
  font-weight:850;
}

.mk4-profile-copy small {
  margin-top:3px;
  color:#93a0b2;
  font-size:8px;
  font-weight:650;
}

.mk4-profile-chevron {
  margin-left:auto;
  color:#9ba7b8!important;
  font-size:8px!important;
}

body.customers > .navbar.header .mk4-profile-dropdown {
  min-width:260px;
  padding:8px!important;
  border:1px solid #e4ebf5!important;
  border-radius:14px!important;
  box-shadow:0 22px 58px rgba(15,39,82,.15)!important;
}

.mk4-profile-dropdown-head {
  display:flex!important;
  align-items:center;
  gap:10px;
  padding:7px 8px 10px!important;
}

.mk4-profile-dropdown-head strong {
  display:block;
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#10264f;
  font-size:11px;
}

.mk4-profile-dropdown-head small {
  display:block;
  max-width:160px;
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#8b99ad;
  font-size:9px;
}

body.customers > .navbar.header .mk4-profile-dropdown > li > a {
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 11px!important;
}

body.customers > .navbar.header .mk4-profile-dropdown > li > a i {
  width:16px;
  color:#71829b;
  text-align:center;
}

.mk4-logout > a {
  color:#c93a54!important;
}

/* ========== Shared v4 cursor spotlight ========== */
.mk4-cursor-glow {
  --mk4-x:50%;
  --mk4-y:50%;
  position:relative;
  isolation:isolate;
}

.mk4-cursor-glow:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(420px circle at var(--mk4-x) var(--mk4-y),rgba(99,91,255,.10),transparent 62%);
  transition:opacity .22s ease;
}

.mk4-cursor-glow:hover:before { opacity:1; }

.mk4-kicker {
  color:#6588c4;
  font-size:9px;
  font-weight:850;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* ========== Tasks Workspace ========== */
.mk4-task-board-hero {
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:126px;
  margin:2px 0 14px;
  padding:20px 22px;
  border:1px solid #efdbbf;
  border-radius:16px;
  background:
    radial-gradient(circle at 72% 22%,rgba(99,91,255,.13),transparent 20%),
    radial-gradient(circle at 94% 90%,rgba(0,212,255,.11),transparent 18%),
    linear-gradient(112deg,#fbfdff 0%,#fff7ed 60%,#f8fcff 100%);
  box-shadow:var(--mk4-shadow-soft);
}

.mk4-task-board-copy h2 {
  margin:3px 0 0;
  color:var(--mk4-navy);
  font-size:25px;
  font-weight:850;
  letter-spacing:-.035em;
}

.mk4-task-board-copy p {
  max-width:560px;
  margin:6px 0 0;
  color:#617590;
  font-size:11px;
  line-height:1.5;
}

.mk4-task-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(100px,1fr));
  gap:8px;
  min-width:470px;
}

.mk4-task-stat {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:62px;
  padding:10px;
  border:1px solid rgba(225,233,244,.96);
  border-radius:12px;
  background:rgba(255,255,255,.9);
  box-shadow:0 7px 18px rgba(15,39,82,.045);
}

.mk4-task-stat-icon {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:10px;
  color:#5e6e86;
  background:#eef2f7;
}

.mk4-task-stat.is-blue .mk4-task-stat-icon { color:#f59b23; background:#fff2dd; }
.mk4-task-stat.is-green .mk4-task-stat-icon { color:#16a45a; background:#e8f8ee; }
.mk4-task-stat.is-red .mk4-task-stat-icon { color:#e53d60; background:#fff0f3; }

.mk4-task-stat strong {
  display:block;
  color:#071a45;
  font-size:18px;
  font-weight:850;
  line-height:1;
}

.mk4-task-stat small {
  display:block;
  margin-top:3px;
  color:#8998ab;
  font-size:8px;
  font-weight:750;
}

.mk4-task-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:54px;
  margin-bottom:10px;
  padding:8px 10px;
  border:1px solid #e7edf5;
  border-radius:12px;
  background:#fbfcfe;
}

.mk4-task-toolbar-title {
  display:flex;
  align-items:center;
  gap:9px;
}

.mk4-toolbar-icon {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:9px;
  color:#f59b23;
  background:#fff3df;
}

.mk4-task-toolbar-title strong {
  display:block;
  color:#102650;
  font-size:11px;
  font-weight:850;
}

.mk4-task-toolbar-title small {
  display:block;
  margin-top:2px;
  color:#91a0b3;
  font-size:8px;
}

body.customers .mk4-view-toggle {
  width:40px;
  height:40px;
  padding:0!important;
  border-color:#dce6f3!important;
  background:#fff!important;
  color:#536884!important;
}

body.customers .mk4-task-filter .bootstrap-select > .dropdown-toggle {
  min-width:160px;
}

/* Milestone kanban */
.mk4-task-phases {
  overflow-x:auto;
  padding:3px 2px 10px;
  scrollbar-width:thin;
}

.mk4-task-phases .kan-ban-row {
  display:flex;
  gap:12px;
  align-items:flex-start;
}

body.customers .mk4-task-phases .mk4-milestone-column {
  float:none!important;
  width:310px!important;
  min-width:310px;
  margin:0!important;
  border:1px solid #e5ecf5;
  border-radius:14px;
  background:#f8fafd;
  box-shadow:0 8px 22px rgba(15,39,82,.045);
  overflow:hidden;
}

body.customers .mk4-task-phases .mk4-milestone-column > .panel-heading {
  min-height:68px;
  padding:13px 14px!important;
  border:0!important;
  border-bottom:1px solid #e7edf5!important;
  border-radius:0!important;
  background:linear-gradient(180deg,#fff,#f9fbfe)!important;
  color:#112751!important;
}

body.customers .mk4-task-phases .mk4-milestone-column > .panel-body {
  min-height:120px;
  padding:10px!important;
  background:#f8fafd!important;
}

body.customers .mk4-task-phases .mk4-milestone-column > .panel-footer {
  padding:10px 12px!important;
  border-top:1px solid #e7edf5!important;
  background:#fff!important;
}

.mk4-kanban-task {
  position:relative;
  margin:0 0 8px!important;
  padding:11px!important;
  border:1px solid #e7edf5;
  border-radius:11px;
  background:#fff;
  box-shadow:0 5px 14px rgba(15,39,82,.035);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.mk4-kanban-task:last-child { margin-bottom:0!important; }

.mk4-kanban-task:hover {
  transform:translateY(-2px);
  border-color:#cfe0fa;
  box-shadow:0 10px 22px rgba(21,93,252,.075);
}

.mk4-kanban-task:after {
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(180deg,var(--mk4-cyan),var(--mk4-blue2));
  opacity:.8;
}

.mk4-kanban-task.overdue-task:after {
  background:linear-gradient(180deg,#ff7b8d,#e53d60);
}

.mk4-kanban-task .task_milestone {
  padding-left:5px;
  color:#102650!important;
  font-size:11px!important;
  font-weight:850!important;
}

.mk4-kanban-task p {
  padding-left:5px;
}

/* Tasks table */
.mk4-task-table-wrap {
  margin-top:8px;
  overflow:hidden;
  border:1px solid #e6edf6;
  border-radius:13px;
  background:#fff;
}

body.customers .mk4-task-table {
  border:0!important;
}

body.customers .mk4-task-table > thead > tr > th {
  background:#f6f9fd!important;
}

.mk4-task-row {
  transition:transform .16s ease,box-shadow .16s ease;
}

.mk4-task-row:hover {
  transform:translateX(3px);
}

body.customers .mk4-task-row:hover > td:first-child {
  box-shadow:inset 3px 0 0 #f59b23;
}

body.customers .mk4-task-row td:first-child > a:last-child {
  color:#102650!important;
  font-weight:800!important;
}

/* ========== Single Task Detail ========== */
.mk4-task-detail-hero {
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:118px;
  margin-bottom:14px;
  padding:18px 20px;
  border:1px solid #efdbbf;
  border-radius:15px;
  background:
    radial-gradient(circle at 78% 26%,rgba(99,91,255,.12),transparent 19%),
    linear-gradient(112deg,#fbfdff,#f0f6ff 62%,#f9fcff);
  box-shadow:var(--mk4-shadow-soft);
}

.mk4-task-detail-main {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.mk4-task-detail-icon {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg,#ffb23f,#f59b23 62%,#d77a0b);
  box-shadow:0 9px 22px rgba(21,93,252,.18);
}

.mk4-task-detail-copy { min-width:0; }

.mk4-task-detail-copy h2 {
  max-width:760px;
  margin:3px 0 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#081c49;
  font-size:23px;
  font-weight:850;
  letter-spacing:-.03em;
}

.mk4-task-detail-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:8px;
  color:#6f829b;
  font-size:9px;
  font-weight:700;
}

.mk4-task-detail-meta > span {
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.mk4-task-detail-meta .is-danger {
  color:#d63b59;
}

.mk4-task-hero-status .label {
  margin:0!important;
}

#task.mk4-task-detail > .row:first-of-type .tw-flex.tw-items-center {
  display:none!important;
}

#task.mk4-task-detail .task-info {
  min-width:145px;
  margin:0 8px 8px 0!important;
  padding:10px 11px;
  border:1px solid #e8eef6;
  border-radius:10px;
  background:#fbfcfe;
}

#task.mk4-task-detail .task-info h5 {
  color:#536884!important;
  font-size:9px!important;
  font-weight:700!important;
}

#task.mk4-task-detail .task-info h5 strong,
#task.mk4-task-detail .task-info h5 span {
  color:#102650;
}

#task.mk4-task-detail hr {
  margin:16px 0!important;
}

#task.mk4-task-detail h4.bold {
  display:flex;
  align-items:center;
  gap:8px;
  color:#102650;
  font-size:13px;
  font-weight:850;
}

#task.mk4-task-detail h4.bold:before {
  content:"";
  width:4px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--mk4-cyan),var(--mk4-blue2));
}

#task.mk4-task-detail .task-comment {
  padding:12px;
  border:1px solid #e7edf5;
  border-radius:11px;
  background:#fbfcfe;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

#task.mk4-task-detail .task-comment:hover {
  transform:translateY(-1px);
  border-color:#d3e1f6;
  box-shadow:0 7px 18px rgba(15,39,82,.045);
}

#task.mk4-task-detail .task_attachments_wrapper .task-attachment-col {
  margin-bottom:10px;
}

#task.mk4-task-detail .task-attachment {
  padding:10px;
  border:1px solid #e7edf5;
  border-radius:11px;
  background:#fff;
}

/* ========== New / Edit Task Forms ========== */
.mk4-task-form-page > .col-md-12 {
  padding-top:2px;
}

.mk4-task-form-intro {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:100px;
  margin-bottom:12px;
  padding:17px 18px;
  border:1px solid #efdbbf;
  border-radius:14px;
  background:
    radial-gradient(circle at 84% 25%,rgba(99,91,255,.12),transparent 20%),
    linear-gradient(112deg,#fbfdff,#f1f6ff);
  box-shadow:var(--mk4-shadow-soft);
}

.mk4-task-form-icon {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,#ffb23f,#f59b23 62%,#ffb23f);
  box-shadow:0 9px 20px rgba(21,93,252,.17);
}

.mk4-task-form-intro h2 {
  margin:3px 0 0;
  color:#081c49;
  font-size:21px;
  font-weight:850;
  letter-spacing:-.025em;
}

.mk4-task-form-intro p {
  margin:5px 0 0;
  color:#667a94;
  font-size:10px;
}

body.customers #task-form.mk4-task-form-card {
  padding:18px;
  border:1px solid #e5ecf5;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,39,82,.045);
}

.mk4-native-task-heading {
  display:none!important;
}

body.customers #task-form.mk4-task-form-card .form-group {
  margin-bottom:14px;
}

body.customers #task-form.mk4-task-form-card textarea.form-control {
  min-height:150px!important;
  resize:vertical;
}

body.customers #task-form.mk4-task-form-card .attachments {
  padding:12px 0 2px;
  border-top:1px solid #edf1f6;
}

/* ========== Refine v3.3 project areas to feel more v4 ========== */
.mk33-projects-hero,
.mk33-project-hero {
  border-color:#dce7f7!important;
  box-shadow:0 18px 48px rgba(15,39,82,.075)!important;
}

.mk33-projects-hero {
  background:
    radial-gradient(circle at 70% 22%,rgba(99,91,255,.14),transparent 18%),
    radial-gradient(circle at 91% 84%,rgba(0,212,255,.11),transparent 19%),
    linear-gradient(112deg,#fbfdff,#fff7ed 58%,#f8fcff)!important;
}

.mk33-project-icon {
  background:linear-gradient(135deg,#ffb23f,#f59b23 58%,#ffb23f)!important;
}

body.customers .mk33-project-tabs {
  padding:6px!important;
  background:#f5f8fd!important;
}

body.customers .mk33-project-tabs > li > a {
  min-height:40px;
}

body.customers .mk33-project-tabs > li.active > a {
  color:#f59b23!important;
  box-shadow:0 5px 16px rgba(15,39,82,.075)!important;
}

/* ========== responsive ========== */
@media (max-width:1360px) {
  .mk4-portal-badge { display:none; }
  body.customers > .navbar.header .mk4-nav-list > li > a {
    padding-left:9px!important;
    padding-right:9px!important;
  }
  .mk4-profile-copy { display:none; }
  body.customers > .navbar.header .mk4-profile-trigger { min-width:0; }
}

@media (max-width:1100px) {
  .mk4-task-board-hero {
    align-items:flex-start;
    flex-direction:column;
  }
  .mk4-task-stats {
    width:100%;
    min-width:0;
  }
}

@media (max-width:991px) {
  .mk4-nav-container {
    display:block;
    min-height:70px;
  }
  .mk4-brand-wrap {
    min-height:70px;
  }
  .mk4-navbar-collapse {
    border-top:1px solid #e7edf5!important;
    background:rgba(255,255,255,.98);
  }
  body.customers > .navbar.header .mk4-nav-list {
    display:block!important;
    min-height:0;
    padding:8px 0 12px;
  }
  body.customers > .navbar.header .mk4-nav-list > li > a {
    justify-content:flex-start;
    margin:2px 0;
  }
  .mk4-nav-divider { display:none!important; }
  .mk4-announcement-link > a {
    width:auto;
    justify-content:flex-start;
  }
  .mk4-profile-copy { display:flex; }
  body.customers > .navbar.header .mk4-profile-trigger { min-width:0; }
}

@media (max-width:767px) {
  .mk4-task-board-hero,
  .mk4-task-detail-hero,
  .mk4-task-form-intro {
    padding:16px;
    border-radius:13px;
  }
  .mk4-task-stats {
    grid-template-columns:1fr 1fr;
  }
  .mk4-task-detail-hero {
    align-items:flex-start;
    flex-direction:column;
  }
  .mk4-task-detail-copy h2 {
    white-space:normal;
    font-size:20px;
  }
}

@media (max-width:480px) {
  .mk4-task-stats {
    grid-template-columns:1fr;
  }
}

@keyframes mk4RowEnter {
  from { opacity:0; transform:translate3d(-7px,0,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
.mk4-row-enter {
  animation:mk4RowEnter .34s ease both;
}
@media (prefers-reduced-motion:reduce) {
  .mk4-row-enter { animation:none!important; }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 1.1 Polish
   Runtime fixes from screen-record review.
   ============================================================ */

/* Native floating Files / Calendar bar is removed from index.php.
   Any third-party submenu hook content remains compact if present. */
body.customers .mk4-extension-submenu {
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin:0 0 12px!important;
  padding:0!important;
  list-style:none;
}

body.customers .mk4-extension-submenu > li > a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:7px 10px;
  border:1px solid #e2eaf4;
  border-radius:9px;
  color:#5b6f8a;
  background:#fff;
  font-size:10px;
  font-weight:750;
  box-shadow:0 4px 12px rgba(15,39,82,.035);
}

.mk4-utility-nav > a {
  position:relative;
}

/* Milestone columns intelligently use available width for small boards. */
body.customers .mk4-task-phases .kan-ban-row {
  width:100%;
}

body.customers .mk4-task-phases[data-mk4-columns="1"] .mk4-milestone-column {
  width:100%!important;
  min-width:100%!important;
}

body.customers .mk4-task-phases[data-mk4-columns="2"] .mk4-milestone-column {
  width:calc(50% - 6px)!important;
  min-width:calc(50% - 6px)!important;
}

body.customers .mk4-task-phases[data-mk4-columns="3"] .mk4-milestone-column {
  width:calc(33.333% - 8px)!important;
  min-width:calc(33.333% - 8px)!important;
}

body.customers .mk4-task-phases[data-mk4-columns="4"] .mk4-milestone-column {
  width:calc(25% - 9px)!important;
  min-width:240px!important;
}

body.customers .mk4-task-phases[data-mk4-columns="1"] .kan-ban-row,
body.customers .mk4-task-phases[data-mk4-columns="2"] .kan-ban-row,
body.customers .mk4-task-phases[data-mk4-columns="3"] .kan-ban-row {
  min-width:0!important;
}

/* Make empty milestone columns feel intentional instead of blank. */
body.customers .mk4-milestone-column > .panel-body {
  position:relative;
}

body.customers .mk4-milestone-column > .panel-body:empty:after {
  content:"No tasks in this milestone";
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:110px;
  padding:16px;
  color:#98a5b7;
  font-size:10px;
  font-weight:700;
  text-align:center;
}

/* Inner project tab bar: tighter, sticky, easier to scan. */
body.customers .mk33-project-tabs-shell {
  position:sticky;
  top:78px;
  z-index:30;
  margin:-2px -2px 12px!important;
  padding:4px 2px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:13px;
}

body.customers .mk4-scrolled ~ #wrapper .mk33-project-tabs-shell {
  top:68px;
}

body.customers .mk33-project-tabs {
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:3px!important;
  overflow-x:auto;
  overflow-y:hidden;
  padding:5px!important;
  scrollbar-width:thin;
  scrollbar-color:#ccd9eb transparent;
}

body.customers .mk33-project-tabs > li {
  flex:0 0 auto;
}

body.customers .mk33-project-tabs > li > a {
  min-height:36px!important;
  padding:8px 9px!important;
  gap:5px!important;
  font-size:9px!important;
}

body.customers .mk33-project-tabs > li > a .menu-icon {
  margin:0!important;
  font-size:10px!important;
}

/* Let the horizontal scrollers blend with the premium tab rail. */
body.customers .mk33-project-tabs-shell .scroller {
  top:8px!important;
  width:28px!important;
  height:28px!important;
  border:1px solid #dce6f2!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.96)!important;
  color:#627590!important;
  box-shadow:0 5px 14px rgba(15,39,82,.07)!important;
}

/* Route loading: keep current context visible and use a polished overlay,
   instead of leaving the user looking at an isolated hero / empty area. */
#mk4-route-progress {
  position:fixed;
  z-index:100000;
  top:0;
  left:0;
  width:0;
  height:3px;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(90deg,#ffb23f,#f59b23 58%,#ffb23f);
  box-shadow:0 0 16px rgba(21,93,252,.38);
  transition:width .28s cubic-bezier(.22,.61,.36,1),opacity .16s ease;
}

#mk4-route-progress.is-active {
  width:72%;
  opacity:1;
}

#mk4-route-progress.is-finishing {
  width:100%;
  opacity:0;
  transition:width .16s ease,opacity .22s ease .08s;
}

.mk33-project-tab-stage {
  position:relative;
  transition:opacity .18s ease,filter .18s ease,transform .18s ease;
}

.mk33-project-tab-stage.mk4-is-navigating {
  min-height:290px;
  opacity:.72;
  filter:saturate(.86);
  transform:none!important;
}

.mk33-project-tab-stage.mk4-is-navigating:after {
  content:"";
  position:absolute;
  z-index:60;
  inset:0;
  border:1px solid rgba(226,235,246,.9);
  border-radius:13px;
  background:
    linear-gradient(90deg,transparent 0,rgba(255,255,255,.70) 48%,transparent 100%) -180px 0/180px 100% no-repeat,
    linear-gradient(#eef3f9 0 0) 18px 26px/31% 14px no-repeat,
    linear-gradient(#f1f5fa 0 0) 18px 55px/78% 10px no-repeat,
    linear-gradient(#f1f5fa 0 0) 18px 79px/64% 10px no-repeat,
    linear-gradient(#f8fafd 0 0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
  animation:mk41SkeletonSweep 1.05s linear infinite;
}

@keyframes mk41SkeletonSweep {
  to { background-position:calc(100% + 180px) 0,18px 26px,18px 55px,18px 79px,0 0; }
}

/* v3.2 had a full-page blur veil; v4.1 intentionally replaces it
   with the slimmer progress/skeleton experience. */
#mk3-page-transition {
  display:none!important;
}

/* Smooth appearance after the page arrives. */
body.customers .mk33-project-workspace,
body.customers .mk33-projects-hero,
body.customers .mk33-project-hero {
  animation:mk41ContentArrive .38s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes mk41ContentArrive {
  from { opacity:.25; transform:translate3d(0,7px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}

@media (max-width:1100px) {
  body.customers .mk4-task-phases[data-mk4-columns="3"] .mk4-milestone-column,
  body.customers .mk4-task-phases[data-mk4-columns="4"] .mk4-milestone-column {
    width:310px!important;
    min-width:310px!important;
  }
}

@media (max-width:767px) {
  body.customers .mk4-task-phases[data-mk4-columns="2"] .mk4-milestone-column,
  body.customers .mk4-task-phases[data-mk4-columns="3"] .mk4-milestone-column,
  body.customers .mk4-task-phases[data-mk4-columns="4"] .mk4-milestone-column {
    width:84vw!important;
    min-width:84vw!important;
  }

  body.customers .mk33-project-tabs-shell {
    top:70px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .mk33-project-tab-stage.mk4-is-navigating:after {
    animation:none!important;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 2
   Files + Discussions + Gantt + Support
   ============================================================ */

.mk42-feature-hero,
.mk42-page-hero,
.mk42-ticket-detail-hero {
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid #efdbbf;
  border-radius:17px;
  background:
    radial-gradient(circle at 75% 18%,rgba(99,91,255,.13),transparent 20%),
    radial-gradient(circle at 94% 88%,rgba(0,212,255,.10),transparent 18%),
    linear-gradient(112deg,#fbfdff 0%,#fff7ed 60%,#f8fcff 100%);
  box-shadow:0 15px 40px rgba(15,39,82,.07);
}

.mk42-feature-hero {
  min-height:118px;
  margin:2px 0 14px;
  padding:19px 21px;
}

.mk42-feature-hero h2 {
  margin:3px 0 0;
  color:#071b46;
  font-size:25px;
  font-weight:850;
  letter-spacing:-.035em;
}

.mk42-feature-hero p {
  max-width:620px;
  margin:6px 0 0;
  color:#627590;
  font-size:10px;
  line-height:1.5;
}

.mk42-feature-stats {
  display:flex;
  gap:8px;
  flex:0 0 auto;
}

.mk42-feature-stat {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:116px;
  min-height:60px;
  padding:10px;
  border:1px solid rgba(224,232,244,.95);
  border-radius:12px;
  background:rgba(255,255,255,.91);
  box-shadow:0 7px 18px rgba(15,39,82,.045);
}

.mk42-feature-stat-icon {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:10px;
  color:#f59b23;
  background:#fff3df;
}

.mk42-feature-stat.is-purple .mk42-feature-stat-icon {
  color:#6d4eea;
  background:#f0ecff;
}

.mk42-feature-stat strong {
  display:block;
  color:#071a45;
  font-size:18px;
  font-weight:850;
  line-height:1;
}

.mk42-feature-stat small {
  display:block;
  margin-top:3px;
  color:#8998ab;
  font-size:8px;
  font-weight:750;
}

/* shared page hero */
.mk42-page-hero {
  min-height:154px;
  margin-bottom:16px;
  padding:24px 26px;
}

.mk42-page-hero-copy h1,
.mk42-ticket-detail-hero h1 {
  margin:4px 0 0;
  color:#071b46;
  font-size:34px;
  font-weight:850;
  letter-spacing:-.04em;
}

.mk42-page-hero-copy p {
  max-width:650px;
  margin:7px 0 0;
  color:#5f738f;
  font-size:12px;
  line-height:1.55;
}

.mk42-page-hero-actions {
  margin-top:14px;
}

.mk42-page-hero-stat {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:180px;
  padding:13px 14px;
  border:1px solid rgba(223,232,244,.96);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 24px rgba(15,39,82,.055);
}

.mk42-page-hero-stat > span {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:12px;
  color:#f59b23;
  background:#fff3df;
}

.mk42-page-hero-stat strong {
  display:block;
  color:#081c49;
  font-size:20px;
  font-weight:850;
  line-height:1.1;
}

.mk42-page-hero-stat small {
  display:block;
  margin-top:3px;
  color:#8796aa;
  font-size:9px;
}

.mk42-page-hero-stat.is-support strong {
  font-size:13px;
}

/* upload/file system */
.mk42-upload-shell,
.mk42-ticket-status-shell,
.mk42-table-card,
.mk42-gantt-shell,
.mk42-discussion-body {
  margin-bottom:14px;
  padding:15px;
  border:1px solid #e5ecf5;
  border-radius:15px;
  background:#fff;
  box-shadow:0 8px 25px rgba(15,39,82,.045);
}

.mk42-upload-copy {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:11px;
}

.mk42-upload-icon {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:10px;
  color:#f59b23;
  background:#fff3df;
}

.mk42-upload-copy strong,
.mk42-discussion-toolbar strong,
.mk42-support-toolbar strong,
.mk42-section-heading strong {
  display:block;
  color:#102650;
  font-size:11px;
  font-weight:850;
}

.mk42-upload-copy small,
.mk42-discussion-toolbar small,
.mk42-support-toolbar small,
.mk42-section-heading small {
  display:block;
  margin-top:2px;
  color:#8b99ad;
  font-size:8px;
}

body.customers .mk42-project-dropzone {
  position:relative;
  min-height:155px!important;
  margin:0!important;
  border:1.5px dashed #acc6ec!important;
  border-radius:13px!important;
  background:
    radial-gradient(circle at 50% 34%,rgba(21,93,252,.06),transparent 22%),
    linear-gradient(180deg,#fbfdff,#f6f9fd)!important;
  transition:border-color .2s ease,background .2s ease,transform .2s ease!important;
}

body.customers .mk42-project-dropzone:hover {
  transform:translateY(-1px);
  border-color:#6f9fea!important;
  background:
    radial-gradient(circle at 50% 34%,rgba(21,93,252,.09),transparent 25%),
    linear-gradient(180deg,#fbfdff,#fff8ef)!important;
}

.mk42-files-actions,
.mk42-discussion-toolbar,
.mk42-support-toolbar,
.mk42-gantt-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.mk42-files-actions {
  margin-top:11px;
}

.mk42-cloud-actions {
  display:flex;
  align-items:center;
  gap:8px;
}

.mk42-files-hint {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#7c8da4;
  font-size:9px;
  font-weight:700;
}

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

.mk42-global-file-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.mk42-file-card {
  overflow:hidden;
  border:1px solid #e5ecf5;
  border-radius:14px;
  background:#fff;
  box-shadow:0 7px 20px rgba(15,39,82,.045);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.mk42-file-card:hover {
  transform:translateY(-4px);
  border-color:#cadcf7;
  box-shadow:0 15px 30px rgba(21,93,252,.08);
}

.mk42-file-preview {
  position:relative;
  display:grid;
  place-items:center;
  height:145px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 40%,rgba(99,91,255,.07),transparent 35%),
    #f7f9fd;
}

.mk42-file-preview img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.mk42-file-card:hover .mk42-file-preview img {
  transform:scale(1.035);
}

.mk42-file-type-icon {
  display:grid;
  place-items:center;
  width:66px;
  height:66px;
  border-radius:18px;
  color:#f59b23;
  background:#fff3df;
  font-size:26px;
}

.mk42-file-open {
  position:absolute;
  top:10px;
  right:10px;
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border:1px solid rgba(225,233,244,.95);
  border-radius:9px;
  color:#58708f;
  background:rgba(255,255,255,.92);
  opacity:0;
  transform:translateY(-3px);
  transition:.18s ease;
}

.mk42-file-card:hover .mk42-file-open {
  opacity:1;
  transform:translateY(0);
}

.mk42-file-card-body {
  position:relative;
  padding:12px;
}

.mk42-file-card-title {
  min-width:0;
  padding-right:34px;
}

.mk42-file-card-title a {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#102650!important;
  font-size:11px;
  font-weight:850;
}

.mk42-file-card-title small {
  display:block;
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#91a0b3;
  font-size:8px;
}

.mk42-file-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:9px;
  color:#8594a9;
  font-size:8px;
  font-weight:650;
}

.mk42-file-meta span {
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.mk42-file-delete {
  position:absolute!important;
  top:9px;
  right:9px;
  width:30px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0!important;
}

.mk42-empty-premium {
  min-height:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  border:1px solid #e6edf6;
  border-radius:14px;
  color:#8796aa;
  background:
    radial-gradient(circle at 50% 35%,rgba(21,93,252,.05),transparent 25%),
    #fbfcfe;
  text-align:center;
}

.mk42-empty-premium > span {
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  margin-bottom:9px;
  border-radius:50%;
  color:#7890b1;
  background:#eef3f9;
  font-size:21px;
}

.mk42-empty-premium strong {
  color:#40536e;
  font-size:11px;
}

.mk42-empty-premium p {
  max-width:360px;
  margin:4px 0 0;
  font-size:9px;
}

/* file modal */
body.customers .mk42-file-modal {
  border-radius:18px!important;
}

.mk42-file-modal-header {
  display:flex;
  align-items:center;
  gap:9px;
}

.mk42-file-modal-icon {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  color:#f59b23;
  background:#fff3df;
}

.mk42-file-viewer {
  background:#fbfcfe;
}

.mk42-file-viewer img {
  margin:0 auto;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(15,39,82,.08);
}

.mk42-file-comments {
  background:#fff;
}

/* discussions */
.mk42-discussion-toolbar,
.mk42-support-toolbar {
  min-height:58px;
  margin-bottom:12px;
  padding:10px 12px;
  border:1px solid #e6edf6;
  border-radius:12px;
  background:#fbfcfe;
}

.mk42-discussion-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.mk42-discussion-card {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  min-height:82px;
  padding:12px;
  border:1px solid #e6edf6;
  border-radius:13px;
  color:#405570!important;
  background:#fff;
  box-shadow:0 6px 18px rgba(15,39,82,.04);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.mk42-discussion-card:hover {
  transform:translateY(-3px);
  border-color:#cbdcf5;
  box-shadow:0 13px 27px rgba(21,93,252,.075);
}

.mk42-discussion-card-icon {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  color:#f59b23;
  background:#fff3df;
}

.mk42-discussion-card-copy {
  min-width:0;
}

.mk42-discussion-card-copy strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#102650;
  font-size:11px;
  font-weight:850;
}

.mk42-discussion-card-copy span {
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:5px;
  color:#8b9aaf;
  font-size:8px;
}

.mk42-discussion-comments {
  min-width:48px;
  padding:7px 8px;
  border-radius:9px;
  text-align:center;
  background:#f5f8fc;
}

.mk42-discussion-comments strong {
  display:block;
  color:#102650;
  font-size:14px;
  font-weight:850;
}

.mk42-discussion-comments small {
  display:block;
  margin-top:1px;
  color:#97a4b5;
  font-size:7px;
}

.mk42-discussion-chevron {
  color:#a4b1c3;
  font-size:9px;
  transition:transform .18s ease;
}

.mk42-discussion-card:hover .mk42-discussion-chevron {
  transform:translateX(3px);
}

.mk42-modal-title {
  display:flex;
  align-items:center;
  gap:9px;
}

.mk42-modal-icon {
  display:grid;
  place-items:center;
  width:33px;
  height:33px;
  border-radius:9px;
  color:#f59b23;
  background:#fff3df;
}

.mk42-discussion-detail-hero {
  position:relative;
  overflow:hidden;
  min-height:132px;
  margin:2px 0 14px;
  padding:18px 20px;
  border:1px solid #efdbbf;
  border-radius:16px;
  background:
    radial-gradient(circle at 84% 22%,rgba(99,91,255,.13),transparent 20%),
    linear-gradient(112deg,#fbfdff,#fff7ed 60%,#f8fcff);
  box-shadow:0 12px 32px rgba(15,39,82,.065);
}

.mk42-back-link {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-bottom:12px;
  color:#6680a2!important;
  font-size:9px;
  font-weight:750;
}

.mk42-discussion-detail-main {
  display:flex;
  align-items:center;
  gap:12px;
}

.mk42-discussion-detail-icon {
  display:grid;
  place-items:center;
  width:45px;
  height:45px;
  flex:0 0 45px;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg,#ffb23f,#f59b23 60%,#ffb23f);
  box-shadow:0 9px 22px rgba(21,93,252,.18);
}

.mk42-discussion-detail-main h2 {
  margin:3px 0 0;
  color:#081c49;
  font-size:22px;
  font-weight:850;
  letter-spacing:-.03em;
}

.mk42-discussion-detail-meta {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:7px;
  color:#71839c;
  font-size:8px;
  font-weight:700;
}

.mk42-discussion-detail-meta span {
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.mk42-conversation-label {
  margin-bottom:9px;
  color:#58708f;
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.mk42-discussion-original {
  padding:14px;
  border:1px solid #e8eef6;
  border-radius:12px;
  background:#fbfcfe;
}

.mk42-comments-shell {
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #edf1f6;
}

/* dynamically loaded discussion comments */
body.customers #discussion-comments .media,
body.customers #project-file-discussion .media {
  margin-top:8px!important;
  padding:11px!important;
  border:1px solid #e7edf5;
  border-radius:11px;
  background:#fbfcfe;
  box-shadow:none;
}

/* Gantt */
.mk42-gantt-shell {
  padding:12px;
}

.mk42-gantt-toolbar {
  min-height:54px;
  margin-bottom:10px;
  padding:8px 9px 8px 11px;
  border:1px solid #e8eef6;
  border-radius:11px;
  background:#fbfcfe;
}

.mk42-gantt-toolbar strong {
  display:block;
  color:#102650;
  font-size:11px;
  font-weight:850;
}

.mk42-gantt-toolbar small {
  display:block;
  margin-top:2px;
  color:#8e9cae;
  font-size:8px;
}

.mk42-gantt-view {
  display:flex;
  align-items:center;
  gap:7px;
}

.mk42-gantt-view label {
  margin:0!important;
  color:#6d7f97!important;
  font-size:9px!important;
}

.mk42-gantt-view .bootstrap-select {
  width:125px!important;
}

.mk42-gantt-canvas {
  overflow-x:auto;
  min-height:380px;
  padding:9px;
  border:1px solid #e6edf6;
  border-radius:12px;
  background:#fff;
}

body.customers .mk42-gantt-canvas #gantt {
  min-width:850px;
}

body.customers .mk42-gantt-canvas .grid-header {
  fill:#f8fafd;
  stroke:#e9eff6;
}

body.customers .mk42-gantt-canvas .grid-row {
  fill:#fff;
}

body.customers .mk42-gantt-canvas .row-line,
body.customers .mk42-gantt-canvas .tick {
  stroke:#edf1f6;
}

body.customers .mk42-gantt-canvas .bar {
  fill:#f59b23;
}

body.customers .mk42-gantt-canvas .bar-progress {
  fill:#ffb23f;
}

body.customers .mk42-gantt-canvas .bar-label {
  fill:#fff;
  font-weight:700;
}

/* Support list/status */
.mk42-section-heading {
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
}

.mk42-section-heading-icon {
  display:grid;
  place-items:center;
  width:33px;
  height:33px;
  flex:0 0 33px;
  border-radius:9px;
  color:#f59b23;
  background:#fff3df;
}

.mk42-ticket-status-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}

.mk42-ticket-status-card {
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:70px;
  padding:10px;
  border:1px solid #e6edf6;
  border-radius:11px;
  color:#405572!important;
  background:#fff;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.mk42-ticket-status-card:hover {
  transform:translateY(-3px);
  border-color:#ceddf4;
  box-shadow:0 10px 22px rgba(21,93,252,.065);
}

.mk42-ticket-status-card.is-selected {
  border-color:#aac8f7;
  box-shadow:0 0 0 3px rgba(21,93,252,.055);
}

.mk42-ticket-status-dot {
  width:11px;
  height:11px;
  flex:0 0 11px;
  border-radius:50%;
  background:var(--mk42-status-color);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--mk42-status-color) 12%,transparent);
}

.mk42-ticket-status-card strong {
  display:block;
  color:#0b2252;
  font-size:17px;
  font-weight:850;
  line-height:1;
}

.mk42-ticket-status-card small {
  display:block;
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8px;
  font-weight:800;
}

.mk42-ticket-status-card > i {
  margin-left:auto;
  color:#a4b1c2;
  font-size:8px;
}

.mk42-table-card {
  padding:14px;
}

.mk42-ticket-table-wrap {
  overflow:hidden;
  border:1px solid #e7edf5;
  border-radius:12px;
}

body.customers .mk42-ticket-table {
  border:0!important;
}

.mk42-ticket-row.is-unread > td {
  background:#fffafd!important;
}

.mk42-ticket-number {
  display:inline-flex;
  padding:4px 7px;
  border-radius:7px;
  color:#f59b23!important;
  background:#fff3df;
  font-size:9px;
  font-weight:850;
}

.mk42-ticket-subject {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:190px;
}

.mk42-ticket-row-icon {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:9px;
  color:#f59b23;
  background:#fff3df;
}

.mk42-ticket-subject strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#102650;
  font-size:10px;
  font-weight:850;
}

.mk42-ticket-subject small {
  display:block;
  margin-top:2px;
  color:#95a2b4;
  font-size:8px;
}

.mk42-priority-pill {
  display:inline-flex;
  align-items:center;
  padding:4px 7px;
  border:1px solid #e5ebf4;
  border-radius:999px;
  color:#60738d;
  background:#f9fbfd;
  font-size:8px;
  font-weight:750;
}

/* support forms */
.mk42-ticket-form-card {
  border-radius:16px!important;
}

.mk42-form-section-head {
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:15px;
  padding-bottom:12px;
  border-bottom:1px solid #edf1f6;
}

.mk42-form-section-head > span {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  color:#f59b23;
  background:#fff3df;
}

.mk42-form-section-head strong {
  display:block;
  color:#102650;
  font-size:11px;
  font-weight:850;
}

.mk42-form-section-head small {
  display:block;
  margin-top:2px;
  color:#8c9aaf;
  font-size:8px;
}

body.customers #open-new-ticket-form .form-control,
body.customers #ticket-reply .form-control {
  background:#fbfcfe!important;
}

body.customers #open-new-ticket-form textarea.form-control,
body.customers #ticket-reply textarea.form-control {
  min-height:160px!important;
}

/* single ticket */
.mk42-ticket-detail-hero {
  min-height:132px;
  margin-bottom:14px;
  padding:20px 22px;
}

.mk42-ticket-detail-main {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.mk42-ticket-detail-icon {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg,#ffb23f,#f59b23 60%,#ffb23f);
  box-shadow:0 9px 22px rgba(21,93,252,.18);
}

.mk42-ticket-detail-hero h1 {
  max-width:760px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:25px;
}

.mk42-ticket-detail-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:8px;
  color:#70829b;
  font-size:8px;
  font-weight:700;
}

.mk42-ticket-detail-meta > span {
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.mk42-ticket-info-column > h4,
.mk42-ticket-conversation-column > form > h4 {
  display:none!important;
}

.mk42-ticket-info-card {
  position:sticky;
  top:94px;
}

.mk42-ticket-reply-composer {
  overflow:hidden;
}

.mk42-ticket-reply-composer .panel-footer {
  border-top:1px solid #e8eef6!important;
  background:#fbfcfe!important;
}

.mk42-ticket-message {
  overflow:hidden;
  border-left:3px solid #a9b8cc!important;
}

.mk42-ticket-message.staff-reply {
  border-left-color:#f59b23!important;
}

.mk42-ticket-message.client-reply {
  border-left-color:#16a45a!important;
}

.mk42-ticket-message .panel-heading {
  background:#fbfcfe!important;
}

.mk42-ticket-message .panel-body {
  line-height:1.65;
}

.mk42-ticket-message .border-right {
  border-color:#edf1f6!important;
}

.mk42-ticket-message .preview_image img {
  max-width:100%;
  border-radius:10px;
  box-shadow:0 7px 18px rgba(15,39,82,.07);
}

@media (max-width:1200px) {
  .mk42-global-file-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:1050px) {
  .mk42-file-grid,
  .mk42-global-file-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mk42-ticket-status-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:767px) {
  .mk42-feature-hero,
  .mk42-page-hero,
  .mk42-ticket-detail-hero {
    align-items:flex-start;
    flex-direction:column;
    padding:17px;
    border-radius:14px;
  }

  .mk42-page-hero-copy h1 { font-size:28px; }

  .mk42-feature-stats {
    width:100%;
  }

  .mk42-feature-stat {
    flex:1;
  }

  .mk42-file-grid,
  .mk42-global-file-grid,
  .mk42-discussion-grid,
  .mk42-ticket-status-grid {
    grid-template-columns:1fr;
  }

  .mk42-files-actions,
  .mk42-discussion-toolbar,
  .mk42-support-toolbar,
  .mk42-gantt-toolbar {
    align-items:flex-start;
    flex-direction:column;
  }

  .mk42-cloud-actions {
    width:100%;
    flex-wrap:wrap;
  }

  .mk42-ticket-detail-hero h1 {
    max-width:100%;
    white-space:normal;
    font-size:21px;
  }

  .mk42-ticket-info-card {
    position:static;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 2.1
   Page-width / horizontal-scroll fix
   ============================================================ */

/* Never allow the whole customer portal page to drift wider than the viewport. */
html {
  max-width:100%;
  overflow-x:hidden;
}

body.customers {
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}

body.customers #wrapper,
body.customers #content,
body.customers #content > .container,
body.customers > .navbar.header,
body.customers > .navbar.header .container,
body.customers .mk2-dashboard,
body.customers .mk33-projects-hero,
body.customers .mk33-project-hero,
body.customers .mk33-project-workspace,
body.customers .mk42-page-hero,
body.customers .mk42-feature-hero {
  max-width:100%;
}

/* Bootstrap's navbar-right negative margin + the long premium nav could push
   the document wider than the screen. Keep the nav inside its own flex space. */
@media (min-width:992px) {
  body.customers > .navbar.header .mk4-nav-container {
    display:flex!important;
    align-items:center;
    width:calc(100% - 32px)!important;
    max-width:1600px!important;
    min-width:0;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  body.customers > .navbar.header .mk4-brand-wrap {
    min-width:0;
    flex:0 0 auto;
  }

  body.customers > .navbar.header .mk4-navbar-collapse {
    display:flex!important;
    align-items:center;
    justify-content:flex-end;
    min-width:0;
    flex:1 1 auto;
    padding-left:10px!important;
    padding-right:0!important;
    margin:0!important;
    border:0!important;
  }

  body.customers > .navbar.header .mk4-nav-list {
    display:flex!important;
    align-items:center;
    justify-content:flex-end;
    min-width:0;
    width:auto!important;
    max-width:100%;
    float:none!important;
    margin:0!important;
    padding:0!important;
    gap:0;
  }

  body.customers > .navbar.header .mk4-nav-list > li {
    float:none!important;
    flex:0 0 auto;
  }

  body.customers > .navbar.header .mk4-nav-list > li > a {
    white-space:nowrap;
  }

  body.customers > .navbar.header .mk4-profile-menu {
    flex:0 0 auto;
  }
}

/* The current desktop width in the runtime screenshot is around this range.
   Compress the header before it ever needs page-level horizontal scrolling. */
@media (max-width:1750px) and (min-width:992px) {
  body.customers > .navbar.header .mk4-brand {
    width:178px!important;
  }

  body.customers .mk4-portal-badge {
    display:none!important;
  }

  body.customers > .navbar.header .mk4-nav-list > li > a {
    margin-left:0!important;
    margin-right:0!important;
    padding-left:8px!important;
    padding-right:8px!important;
    font-size:11px!important;
  }

  body.customers > .navbar.header .mk4-nav-list > li > a i {
    font-size:11px!important;
  }

  body.customers .mk4-profile-copy {
    display:none!important;
  }

  body.customers > .navbar.header .mk4-profile-trigger {
    min-width:46px!important;
    width:46px!important;
    justify-content:center!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }

  body.customers .mk4-profile-chevron {
    display:none!important;
  }

  body.customers .mk4-nav-divider {
    margin-left:5px!important;
    margin-right:5px!important;
  }
}

@media (max-width:1450px) and (min-width:992px) {
  body.customers > .navbar.header .mk4-brand {
    width:160px!important;
  }

  body.customers > .navbar.header .mk4-nav-list > li > a {
    padding-left:6px!important;
    padding-right:6px!important;
    font-size:10px!important;
  }

  /* Utility links stay available while using less horizontal space. */
  body.customers > .navbar.header .mk4-utility-nav > a span {
    display:none!important;
  }

  body.customers > .navbar.header .mk4-utility-nav > a {
    width:36px;
    justify-content:center;
    padding-left:7px!important;
    padding-right:7px!important;
  }
}

/* Components that legitimately need horizontal movement must scroll INSIDE
   themselves, never by widening the complete website. */
body.customers .table-responsive,
body.customers .dataTables_wrapper,
body.customers .mk33-project-tabs,
body.customers .mk4-task-phases,
body.customers .mk42-gantt-canvas {
  max-width:100%;
}

body.customers .table-responsive,
body.customers .mk33-project-tabs,
body.customers .mk4-task-phases,
body.customers .mk42-gantt-canvas {
  overflow-x:auto!important;
  overscroll-behavior-x:contain;
}

/* Avoid wide media/content creating document overflow. */
body.customers img,
body.customers video,
body.customers iframe {
  max-width:100%;
}

body.customers .row {
  max-width:calc(100% + 30px);
}

/* Mobile keeps Bootstrap's normal collapsed nav and still never widens page. */
@media (max-width:991px) {
  body.customers > .navbar.header .mk4-nav-container {
    width:100%!important;
    max-width:100%!important;
  }

  body.customers > .navbar.header .mk4-navbar-collapse {
    max-width:100%;
    overflow-x:hidden!important;
  }

  body.customers > .navbar.header .mk4-nav-list {
    max-width:100%;
  }
}


/* ============================================================
   Markito World-Class Header v4.2.2
   Adaptive overflow menu + floating glass navigation
   ============================================================ */

body.customers > .navbar.header.mk43-header {
  position:sticky!important;
  top:0;
  z-index:1050;
  min-height:88px!important;
  margin:0!important;
  padding:10px 0!important;
  border:0!important;
  background:rgba(246,249,253,.78)!important;
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:none!important;
  transition:padding .22s ease,background .22s ease;
}

body.customers > .navbar.header.mk43-header.mk43-scrolled {
  padding:6px 0!important;
  background:rgba(246,249,253,.91)!important;
}

body.customers > .navbar.header .mk43-shell {
  position:relative;
  display:flex!important;
  align-items:center;
  gap:18px;
  width:calc(100% - 40px)!important;
  max-width:1580px!important;
  min-height:68px;
  margin:0 auto!important;
  padding:8px 10px 8px 14px!important;
  border:1px solid rgba(220,229,241,.92);
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.94));
  box-shadow:
    0 18px 55px rgba(15,39,82,.09),
    inset 0 1px 0 rgba(255,255,255,.95);
  transition:min-height .22s ease,border-radius .22s ease,box-shadow .22s ease;
}

body.customers > .navbar.header.mk43-header.mk43-scrolled .mk43-shell {
  min-height:62px;
  border-radius:17px;
  box-shadow:
    0 13px 38px rgba(15,39,82,.095),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* brand */
.mk43-brand-area {
  display:flex!important;
  align-items:center;
  min-width:0;
  flex:0 0 auto;
}

.mk43-brand {
  display:flex!important;
  align-items:center;
  gap:10px;
  min-width:172px;
  padding:2px 4px 2px 0;
  color:#081b45!important;
}

.mk43-brand:hover {
  color:#081b45!important;
}

.mk43-brand-mark {
  position:relative;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  overflow:hidden;
  border-radius:13px;
  color:#fff;
  font-size:21px;
  font-weight:900;
  letter-spacing:-.08em;
  background:
    linear-gradient(145deg,#ffc05a 0%,#f59b23 43%,#ffb23f 100%);
  box-shadow:
    0 10px 24px rgba(21,93,252,.22),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.mk43-brand-mark:before {
  content:"";
  position:absolute;
  width:45px;
  height:18px;
  top:-8px;
  left:-5px;
  transform:rotate(-18deg);
  background:rgba(255,255,255,.22);
  filter:blur(1px);
}

.mk43-brand-copy {
  display:flex;
  min-width:0;
  flex-direction:column;
  line-height:1;
}

.mk43-brand-copy strong {
  color:#071b43;
  font-size:17px;
  font-weight:900;
  letter-spacing:-.035em;
}

.mk43-brand-copy small {
  margin-top:4px;
  color:#8594aa;
  font-size:8px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

/* desktop shell */
.mk43-collapse {
  min-width:0;
  flex:1 1 auto;
  padding:0!important;
  border:0!important;
}

.mk43-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-width:0;
}

.mk43-primary-wrap {
  min-width:0;
  overflow:hidden;
}

body.customers > .navbar.header .mk43-primary-list {
  display:flex!important;
  align-items:center;
  width:max-content!important;
  min-height:48px;
  max-width:none;
  float:none!important;
  gap:2px;
  margin:0!important;
  padding:4px!important;
  border:1px solid #edf1f7;
  border-radius:14px;
  background:#f8fafd;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92);
}

body.customers > .navbar.header .mk43-primary-list > li {
  float:none!important;
  flex:0 0 auto;
}

body.customers > .navbar.header .mk43-primary-list > li > a {
  position:relative;
  display:flex!important;
  align-items:center;
  gap:6px;
  min-height:38px;
  margin:0!important;
  padding:9px 10px!important;
  border:0!important;
  border-radius:10px;
  color:#4a5f7e!important;
  background:transparent!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1!important;
  white-space:nowrap;
  transition:
    color .18s ease,
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

body.customers > .navbar.header .mk43-primary-list > li > a i {
  color:#8494ab;
  font-size:10px;
  transition:color .18s ease,transform .18s ease;
}

body.customers > .navbar.header .mk43-primary-list > li > a:hover {
  color:#154dab!important;
  background:#fff6ea!important;
  transform:translateY(-1px);
}

body.customers > .navbar.header .mk43-primary-list > li > a:hover i {
  color:#f59b23;
  transform:translateY(-1px);
}

body.customers > .navbar.header .mk43-primary-list > li.active > a {
  color:#1145a8!important;
  background:#fff!important;
  box-shadow:
    0 5px 15px rgba(15,39,82,.075),
    inset 0 0 0 1px #efdbbf;
}

body.customers > .navbar.header .mk43-primary-list > li.active > a i {
  color:#f59b23;
}

body.customers > .navbar.header .mk43-primary-list > li > a:after {
  display:none!important;
}

/* adaptive More menu */
.mk43-more {
  display:none!important;
}

.mk43-more.is-visible {
  display:block!important;
}

body.customers > .navbar.header .mk43-more > a {
  gap:5px!important;
  color:#536986!important;
}

body.customers > .navbar.header .mk43-more > a > i {
  font-size:7px!important;
}

body.customers > .navbar.header .mk43-more-menu {
  min-width:210px;
  max-height:420px;
  overflow-y:auto;
  margin-top:8px!important;
  padding:7px!important;
  border:1px solid #e2eaf5!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 20px 52px rgba(15,39,82,.15)!important;
}

body.customers > .navbar.header .mk43-more-menu > li > a {
  display:flex!important;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:9px 10px!important;
  border-radius:8px;
  color:#405675!important;
  font-size:10px!important;
  font-weight:750!important;
}

body.customers > .navbar.header .mk43-more-menu > li > a:hover {
  color:#f59b23!important;
  background:#fff8ef!important;
}

body.customers > .navbar.header .mk43-more-menu > li.active > a {
  color:#f59b23!important;
  background:#fff6ea!important;
}

body.customers > .navbar.header .mk43-more-menu > li > a i {
  width:14px;
  color:#71849e;
  text-align:center;
}

/* right actions */
body.customers > .navbar.header .mk43-actions {
  display:flex!important;
  align-items:center;
  justify-content:flex-end;
  min-height:48px;
  float:none!important;
  gap:5px;
  margin:0!important;
  padding:0!important;
}

body.customers > .navbar.header .mk43-actions > li {
  float:none!important;
  flex:0 0 auto;
}

.mk43-action-item > a {
  position:relative;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:40px;
  padding:8px 10px!important;
  border:1px solid transparent!important;
  border-radius:11px;
  color:#536985!important;
  background:transparent!important;
  font-size:10px!important;
  font-weight:800!important;
}

.mk43-action-item > a:hover {
  color:#f59b23!important;
  border-color:#dfe9f7!important;
  background:#f5f8fe!important;
  transform:translateY(-1px);
}

.mk43-action-item.active > a {
  color:#f59b23!important;
  border-color:#f2d4a8!important;
  background:#fff7eb!important;
}

.mk43-action-item > a i {
  font-size:12px;
}

.mk43-action-divider {
  width:1px;
  height:27px;
  margin:0 2px!important;
  background:#e5ebf4;
}

.mk43-bell > a {
  width:40px;
  padding:8px!important;
}

.mk43-notification-count {
  position:absolute;
  top:2px;
  right:1px;
  display:grid;
  place-items:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border:2px solid #fff;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff5b7b,#ef2e55);
  font-size:7px;
  font-weight:900;
  box-shadow:0 4px 10px rgba(239,46,85,.22);
}

/* profile */
body.customers > .navbar.header .mk43-profile-trigger {
  display:flex!important;
  align-items:center;
  gap:8px;
  min-height:46px;
  padding:5px 7px!important;
  border:1px solid #e3eaf4!important;
  border-radius:13px;
  color:#122751!important;
  background:#fff!important;
  box-shadow:0 5px 15px rgba(15,39,82,.045);
}

body.customers > .navbar.header .mk43-profile.open > .mk43-profile-trigger,
body.customers > .navbar.header .mk43-profile-trigger:hover {
  border-color:#cfdff4!important;
  background:#fbfdff!important;
  box-shadow:0 8px 20px rgba(15,39,82,.07);
}

.mk43-profile-avatar {
  position:relative;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  overflow:visible;
  border-radius:11px;
  background:linear-gradient(135deg,#eef3fa,#f8fbff);
  box-shadow:inset 0 0 0 1px #e7edf5;
}

.mk43-profile-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:11px;
}

.mk43-profile-online {
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:9px;
  height:9px;
  border:2px solid #fff;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 2px 5px rgba(34,197,94,.25);
}

.mk43-profile-text {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.05;
}

.mk43-profile-text strong {
  max-width:74px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#10264f;
  font-size:10px;
  font-weight:900;
}

.mk43-profile-text small {
  margin-top:4px;
  color:#95a2b4;
  font-size:7px;
  font-weight:750;
  text-transform:uppercase;
}

.mk43-profile-chevron {
  color:#9aa8ba!important;
  font-size:7px!important;
}

body.customers > .navbar.header .mk43-profile-menu {
  right:0!important;
  left:auto!important;
  min-width:268px;
  margin-top:9px!important;
  padding:8px!important;
  border:1px solid #e1e9f4!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.99)!important;
  box-shadow:0 22px 60px rgba(15,39,82,.16)!important;
}

.mk43-profile-menu-head {
  display:flex!important;
  align-items:center;
  gap:10px;
  padding:8px 8px 10px!important;
}

.mk43-profile-avatar.is-large {
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:13px;
}

.mk43-profile-avatar.is-large img {
  border-radius:13px;
}

.mk43-profile-menu-copy {
  min-width:0;
}

.mk43-profile-menu-copy strong {
  display:block;
  max-width:175px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#102650;
  font-size:11px;
  font-weight:900;
}

.mk43-profile-menu-copy small {
  display:block;
  max-width:175px;
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#8d9caf;
  font-size:8px;
}

body.customers > .navbar.header .mk43-profile-menu > li > a {
  display:flex!important;
  align-items:center;
  gap:9px;
  min-height:39px;
  padding:8px 9px!important;
  border-radius:9px;
  color:#425875!important;
  font-size:10px!important;
  font-weight:750!important;
}

body.customers > .navbar.header .mk43-profile-menu > li > a:hover {
  color:#f59b23!important;
  background:#fff8ef!important;
}

.mk43-menu-icon {
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  flex:0 0 27px;
  border-radius:8px;
  color:#6880a1;
  background:#f2f5fa;
}

.mk43-logout > a {
  color:#d53c59!important;
}

.mk43-logout .mk43-menu-icon {
  color:#d53c59;
  background:#fff0f3;
}

/* subtle top progress light */
.mk43-progress-line {
  position:absolute;
  left:50%;
  bottom:-1px;
  width:min(780px,58vw);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(21,93,252,.28),rgba(99,91,255,.32),transparent);
  opacity:.72;
}

/* mobile toggle */
.mk43-mobile-toggle {
  margin:5px 0 5px 8px!important;
  padding:8px!important;
  border:1px solid #e0e8f3!important;
  border-radius:10px!important;
  background:#f8fafd!important;
}

.mk43-mobile-toggle .icon-bar {
  background:#415875!important;
}

/* header should never create page-level horizontal overflow */
body.customers > .navbar.header.mk43-header,
body.customers > .navbar.header.mk43-header .mk43-shell,
body.customers > .navbar.header.mk43-header .mk43-collapse,
body.customers > .navbar.header.mk43-header .mk43-layout {
  max-width:100%;
}

/* medium desktop: actions become icon-first before More needs to work hard */
@media (max-width:1450px) and (min-width:992px) {
  body.customers > .navbar.header .mk43-shell {
    gap:12px;
  }

  .mk43-brand {
    min-width:150px;
  }

  .mk43-brand-mark {
    width:39px;
    height:39px;
    flex-basis:39px;
    border-radius:12px;
    font-size:19px;
  }

  .mk43-brand-copy strong {
    font-size:15px;
  }

  .mk43-brand-copy small {
    font-size:7px;
  }

  .mk43-action-label {
    display:none!important;
  }

  .mk43-action-link > a {
    width:38px;
    padding:8px!important;
  }

  .mk43-profile-text {
    display:none;
  }

  .mk43-profile-trigger {
    padding-right:6px!important;
  }

  .mk43-profile-chevron {
    display:none!important;
  }
}

/* mobile / tablet */
@media (max-width:991px) {
  body.customers > .navbar.header.mk43-header {
    padding:7px 0!important;
  }

  body.customers > .navbar.header .mk43-shell {
    display:block!important;
    width:calc(100% - 22px)!important;
    min-height:62px;
    padding:7px 9px!important;
    border-radius:16px;
  }

  .mk43-brand-area {
    min-height:48px;
    justify-content:space-between;
  }

  .mk43-brand {
    min-width:0;
  }

  .mk43-collapse {
    max-width:100%;
    margin:7px -2px 0!important;
    padding:8px 2px 2px!important;
    border-top:1px solid #e9eef5!important;
  }

  .mk43-layout {
    display:block;
  }

  .mk43-primary-wrap {
    overflow:visible;
  }

  body.customers > .navbar.header .mk43-primary-list {
    display:block!important;
    width:100%!important;
    padding:4px!important;
  }

  body.customers > .navbar.header .mk43-primary-list > li {
    display:block!important;
    width:100%;
  }

  body.customers > .navbar.header .mk43-primary-list > li > a {
    justify-content:flex-start;
    width:100%;
    margin:2px 0!important;
  }

  .mk43-more {
    display:none!important;
  }

  body.customers > .navbar.header .mk43-actions {
    display:flex!important;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:5px;
    margin-top:7px!important;
    padding:7px 4px 3px!important;
    border-top:1px solid #e9eef5;
  }

  .mk43-action-link > a {
    width:auto;
  }

  .mk43-action-label {
    display:inline!important;
  }

  .mk43-action-divider {
    display:none;
  }

  .mk43-profile-text {
    display:flex!important;
  }

  .mk43-profile-chevron {
    display:block!important;
  }

  body.customers > .navbar.header .mk43-profile-menu {
    position:absolute!important;
    right:0!important;
    left:auto!important;
  }

  .mk43-progress-line {
    display:none;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3
   Finance + Commercial Documents + Profile + Calendar
   ============================================================ */

.mk43-finance-hero,
.mk43-account-hero,
.mk43-calendar-hero {
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:156px;
  margin-bottom:16px;
  padding:24px 26px;
  border:1px solid #efdbbf;
  border-radius:18px;
  background:
    radial-gradient(circle at 73% 16%,rgba(99,91,255,.14),transparent 20%),
    radial-gradient(circle at 94% 88%,rgba(0,212,255,.10),transparent 18%),
    linear-gradient(112deg,#fbfdff 0%,#fff7ed 60%,#f8fcff 100%);
  box-shadow:0 16px 42px rgba(15,39,82,.07);
}

.mk43-finance-hero h1,
.mk43-account-hero h1,
.mk43-calendar-hero h1 {
  margin:4px 0 0;
  color:#071b46;
  font-size:35px;
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.045em;
}

.mk43-finance-hero p,
.mk43-account-hero p,
.mk43-calendar-hero p {
  max-width:660px;
  margin:7px 0 0;
  color:#5f738f;
  font-size:12px;
  line-height:1.55;
}

.mk43-inline-action {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  margin-top:14px;
  padding:8px 11px;
  border:1px solid #efdbbf;
  border-radius:10px;
  color:#f59b23!important;
  background:#fff;
  font-size:9px;
  font-weight:850;
  box-shadow:0 6px 15px rgba(15,39,82,.045);
}

.mk43-inline-action:hover {
  transform:translateY(-2px);
  border-color:#bed3f4;
  box-shadow:0 10px 22px rgba(21,93,252,.08);
}

.mk43-finance-hero-orb,
.mk43-mini-orb {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:190px;
  padding:13px 14px;
  border:1px solid rgba(222,232,244,.96);
  border-radius:15px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 26px rgba(15,39,82,.055);
}

.mk43-finance-hero-orb > span,
.mk43-mini-orb > span {
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  flex:0 0 43px;
  border-radius:12px;
  color:#f59b23;
  background:#fff3df;
  font-size:17px;
}

.mk43-finance-hero-orb.is-cyan > span { color:#089cc2; background:#e9faff; }
.mk43-finance-hero-orb.is-purple > span { color:#b66c0c; background:#f1edff; }

.mk43-finance-hero-orb strong,
.mk43-mini-orb strong {
  display:block;
  color:#081c49;
  font-size:22px;
  font-weight:900;
  line-height:1;
}

.mk43-finance-hero-orb small,
.mk43-mini-orb small {
  display:block;
  margin-top:4px;
  color:#8695a9;
  font-size:8px;
  font-weight:750;
}

.mk43-dual-orbs {
  display:flex;
  gap:9px;
}

.mk43-mini-orb {
  min-width:125px;
}

.mk43-mini-orb.is-green > span {
  color:#16a45a;
  background:#e9f8ef;
}

/* finance summary */
.mk43-finance-summary-card,
.mk43-table-card,
.mk43-contract-chart-card,
.mk43-calendar-card {
  margin-bottom:15px;
  padding:15px;
  border:1px solid #e5ecf5;
  border-radius:15px;
  background:#fff;
  box-shadow:0 8px 25px rgba(15,39,82,.045);
}

.mk43-section-head,
.mk43-form-panel-heading {
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
}

.mk43-section-icon {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:10px;
  color:#f59b23;
  background:#fff3df;
}

.mk43-section-head strong,
.mk43-form-panel-heading strong {
  display:block;
  color:#102650;
  font-size:11px;
  font-weight:900;
}

.mk43-section-head small,
.mk43-form-panel-heading small {
  display:block;
  margin-top:2px;
  color:#8b99ad;
  font-size:8px;
}

.mk43-finance-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}

.mk43-finance-stats.has-five {
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.mk43-finance-stat {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:9px;
  min-height:76px;
  padding:11px 12px;
  border:1px solid #e6edf6;
  border-radius:12px;
  color:#425875!important;
  background:#fff;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.mk43-finance-stat:hover {
  transform:translateY(-3px);
  border-color:#cdddf5;
  box-shadow:0 11px 24px rgba(21,93,252,.07);
}

.mk43-finance-stat-icon {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:10px;
  color:#60718a;
  background:#eef2f7;
}

.mk43-finance-stat.is-blue .mk43-finance-stat-icon { color:#f59b23; background:#fff3df; }
.mk43-finance-stat.is-green .mk43-finance-stat-icon { color:#16a45a; background:#e9f8ef; }
.mk43-finance-stat.is-red .mk43-finance-stat-icon { color:#e33e60; background:#fff0f3; }
.mk43-finance-stat.is-orange .mk43-finance-stat-icon { color:#dc8b09; background:#fff5e5; }
.mk43-finance-stat.is-purple .mk43-finance-stat-icon { color:#b66c0c; background:#f1edff; }

.mk43-finance-stat-copy strong {
  display:block;
  color:#091d49;
  font-size:18px;
  font-weight:900;
  line-height:1;
}

.mk43-finance-stat-copy small {
  display:block;
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#667992;
  font-size:8px;
  font-weight:800;
}

.mk43-finance-stat-total {
  color:#98a5b6;
  font-size:8px;
  font-weight:750;
}

.mk43-finance-stat-arrow {
  color:#a7b3c4;
  font-size:8px;
  transition:transform .18s ease;
}

.mk43-finance-stat:hover .mk43-finance-stat-arrow {
  transform:translateX(3px);
}

/* document tables */
.mk43-table-shell {
  overflow:hidden;
  border:1px solid #e7edf5;
  border-radius:12px;
}

body.customers .mk43-table-shell .table {
  border:0!important;
}

.mk43-finance-row {
  transition:transform .16s ease;
}

.mk43-finance-row:hover {
  transform:translateX(3px);
}

.mk43-document-link {
  display:flex!important;
  align-items:center;
  gap:8px;
  min-width:145px;
  color:#102650!important;
}

.mk43-document-icon {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:9px;
  color:#f59b23;
  background:#fff3df;
}

.mk43-document-link strong {
  display:block;
  color:#102650;
  font-size:10px;
  font-weight:900;
}

.mk43-document-link small {
  display:block;
  margin-top:2px;
  color:#95a2b4;
  font-size:7px;
}

/* contracts chart */
.mk43-contract-chart {
  position:relative;
  max-height:285px;
  padding:8px 10px 0;
}

.mk43-contract-chart canvas {
  max-height:260px!important;
}

/* account */
.mk43-account-identity {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.mk43-account-avatar {
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  flex:0 0 68px;
  overflow:hidden;
  border:4px solid rgba(255,255,255,.9);
  border-radius:19px;
  background:#eef3f9;
  box-shadow:0 12px 28px rgba(15,39,82,.11);
}

.mk43-account-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.mk43-account-security {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:220px;
  padding:13px;
  border:1px solid #dfe8f4;
  border-radius:14px;
  background:rgba(255,255,255,.9);
  box-shadow:0 9px 22px rgba(15,39,82,.05);
}

.mk43-account-security > span {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:11px;
  color:#16a45a;
  background:#eaf8ef;
}

.mk43-account-security strong {
  display:block;
  color:#102650;
  font-size:10px;
  font-weight:900;
}

.mk43-account-security small {
  display:block;
  margin-top:3px;
  color:#8998ac;
  font-size:8px;
}

body.customers .mk43-profile-layout.section-heading {
  margin:0!important;
  padding:0!important;
}

body.customers .mk43-profile-layout.section-heading:before {
  display:none!important;
}

.mk43-profile-main > form > .panel_s,
.mk43-profile-security > .panel_s {
  overflow:hidden;
  border-radius:15px!important;
}

.mk43-form-panel-heading {
  margin-bottom:10px;
}

.mk43-profile-main .client-profile-image-thumb {
  width:84px;
  height:84px;
  object-fit:cover;
  border:4px solid #fff;
  border-radius:18px;
  box-shadow:0 9px 22px rgba(15,39,82,.11);
}

body.customers .mk43-profile-main .checkbox,
body.customers .mk43-profile-security .checkbox {
  min-height:38px;
  margin:5px 0!important;
  padding:9px 10px 8px 30px;
  border:1px solid #e9eef5;
  border-radius:9px;
  background:#fbfcfe;
}

body.customers .mk43-profile-main .email-notifications-label {
  margin-top:12px;
  color:#102650;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

body.customers .mk43-profile-layout .panel-footer {
  border-top:1px solid #e9eef5!important;
  background:#fbfcfe!important;
}

/* calendar */
.mk43-calendar-hero-icon {
  display:grid;
  place-items:center;
  width:86px;
  height:86px;
  flex:0 0 86px;
  border-radius:24px;
  color:#f59b23;
  background:rgba(255,255,255,.9);
  box-shadow:0 12px 28px rgba(15,39,82,.08);
  font-size:31px;
}

.mk43-calendar-shell {
  overflow:hidden;
  padding:8px;
  border:1px solid #e7edf5;
  border-radius:12px;
  background:#fff;
}

body.customers .mk43-calendar-shell .fc-toolbar {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:13px!important;
  padding:8px 9px;
  border:1px solid #e8eef6;
  border-radius:10px;
  background:#fbfcfe;
}

body.customers .mk43-calendar-shell .fc-toolbar h2 {
  color:#102650!important;
  font-size:15px!important;
  font-weight:900!important;
}

body.customers .mk43-calendar-shell .fc-button {
  min-height:34px!important;
  border-radius:8px!important;
  font-size:9px!important;
  font-weight:800!important;
}

body.customers .mk43-calendar-shell .fc-view-container {
  border:1px solid #edf1f6;
  border-radius:10px;
  overflow:hidden;
}

body.customers .mk43-calendar-shell .fc th {
  padding:8px 5px!important;
  background:#f6f9fd;
  color:#596d89;
  font-size:8px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.04em;
}

body.customers .mk43-calendar-shell .fc-day {
  background:#fff;
}

body.customers .mk43-calendar-shell .fc-today {
  background:#fff8ef!important;
}

/* premium financial document detail views — no business logic changed */
body.customers .invoice-html-logo,
body.customers .estimate-html-logo,
body.customers .proposal-html-logo,
body.customers .contract-html-logo {
  padding:8px;
  border:1px solid #e6edf6;
  border-radius:12px;
  background:#fff;
  box-shadow:0 7px 18px rgba(15,39,82,.045);
}

body.customers .invoice-html-status,
body.customers .estimate-html-status,
body.customers .content-view-status {
  display:inline-flex;
  margin-top:6px;
}

body.customers .invoice-html + .panel_s,
body.customers .estimate-html + .panel_s,
body.customers .proposal-left .panel_s,
body.customers .contract-left .panel_s {
  border-radius:17px!important;
  box-shadow:0 14px 38px rgba(15,39,82,.07)!important;
}

body.customers .invoice-html .action-button,
body.customers .estimate-html .action-button,
body.customers .proposal-html .action-button,
body.customers .contract-html .action-button {
  margin-left:5px;
}

body.customers .invoice-html table.items,
body.customers .estimate-html table.items,
body.customers .proposal-left table,
body.customers .contract-left table {
  border:1px solid #e7edf5;
  border-radius:10px;
  overflow:hidden;
}

body.customers .proposal-html-tabs,
body.customers .contract-html-tabs {
  position:sticky;
  top:96px;
  padding:12px;
  border:1px solid #e4ebf5;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,39,82,.06);
}

body.customers .proposal_comment,
body.customers .contract_comment {
  padding:10px;
  border:1px solid #e8eef6;
  border-radius:10px;
  background:#fbfcfe;
}

@media (max-width:1100px) {
  .mk43-finance-stats.has-five {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:900px) {
  .mk43-finance-stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mk43-finance-stats.has-five {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mk43-dual-orbs {
    width:100%;
  }

  .mk43-mini-orb {
    flex:1;
  }
}

@media (max-width:767px) {
  .mk43-finance-hero,
  .mk43-account-hero,
  .mk43-calendar-hero {
    align-items:flex-start;
    flex-direction:column;
    padding:18px;
    border-radius:15px;
  }

  .mk43-finance-hero h1,
  .mk43-account-hero h1,
  .mk43-calendar-hero h1 {
    font-size:28px;
  }

  .mk43-finance-hero-orb,
  .mk43-account-security {
    width:100%;
  }

  .mk43-finance-stats,
  .mk43-finance-stats.has-five {
    grid-template-columns:1fr;
  }

  .mk43-profile-main,
  .mk43-profile-security {
    width:100%;
  }

  body.customers .proposal-html-tabs,
  body.customers .contract-html-tabs {
    position:static;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.1
   Tablet Responsive System
   Target: 768px–1199px, portrait + landscape
   ============================================================ */

/* Keep the entire application inside the tablet viewport. */
@media (min-width:768px) and (max-width:1199px) {
  html,
  body.customers {
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
  }

  body.customers #wrapper,
  body.customers #content,
  body.customers #content > .container,
  body.customers > .navbar.header .container {
    width:100%!important;
    max-width:100%!important;
  }

  body.customers #content > .container {
    padding-left:14px!important;
    padding-right:14px!important;
  }

  /* ---------- world-class header on tablets ---------- */
  body.customers > .navbar.header.mk43-header {
    padding:7px 0!important;
  }

  body.customers > .navbar.header .mk43-shell {
    width:calc(100% - 18px)!important;
    max-width:none!important;
    min-height:62px!important;
    gap:10px!important;
    padding:7px 8px 7px 11px!important;
    border-radius:16px!important;
  }

  .mk43-brand {
    min-width:128px!important;
    gap:8px!important;
  }

  .mk43-brand-mark {
    width:37px!important;
    height:37px!important;
    flex-basis:37px!important;
    border-radius:11px!important;
    font-size:18px!important;
  }

  .mk43-brand-copy strong {
    font-size:14px!important;
  }

  .mk43-brand-copy small {
    margin-top:3px!important;
    font-size:6.5px!important;
  }

  .mk43-layout {
    gap:7px!important;
  }

  body.customers > .navbar.header .mk43-primary-list {
    min-height:44px!important;
    gap:1px!important;
    padding:3px!important;
    border-radius:12px!important;
  }

  body.customers > .navbar.header .mk43-primary-list > li > a {
    min-height:36px!important;
    padding:8px 8px!important;
    font-size:9px!important;
  }

  body.customers > .navbar.header .mk43-primary-list > li > a i {
    font-size:9px!important;
  }

  body.customers > .navbar.header .mk43-actions {
    min-height:44px!important;
    gap:3px!important;
  }

  .mk43-action-label,
  .mk43-profile-text,
  .mk43-profile-chevron {
    display:none!important;
  }

  .mk43-action-link > a,
  .mk43-bell > a {
    width:36px!important;
    min-height:36px!important;
    padding:7px!important;
  }

  body.customers > .navbar.header .mk43-profile-trigger {
    min-height:40px!important;
    padding:4px 5px!important;
  }

  .mk43-profile-avatar {
    width:31px!important;
    height:31px!important;
    flex-basis:31px!important;
    border-radius:10px!important;
  }

  .mk43-profile-avatar img {
    border-radius:10px!important;
  }

  .mk43-action-divider {
    height:23px!important;
    margin:0 1px!important;
  }

  /* ---------- global sizing ---------- */
  body.customers .panel_s > .panel-body,
  body.customers .panel_s .panel-body {
    padding:14px!important;
  }

  body.customers .section-heading {
    font-size:19px!important;
  }

  body.customers .btn {
    min-height:36px;
    padding:7px 11px;
  }

  /* ---------- dashboard ---------- */
  body.customers .mk2-dashboard {
    width:100%!important;
    max-width:100%!important;
  }

  body.customers .mk2-hero {
    flex-direction:column!important;
    align-items:stretch!important;
    gap:18px!important;
    min-height:0!important;
    padding:22px!important;
  }

  body.customers .mk2-hero h1 {
    font-size:32px!important;
  }

  body.customers .mk2-hero p {
    max-width:100%!important;
    font-size:12px!important;
  }

  body.customers .mk2-actions {
    width:100%!important;
    min-width:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.customers .mk2-action {
    min-width:0!important;
  }

  body.customers .mk2-status-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  body.customers .mk2-main {
    grid-template-columns:minmax(0,1.35fr) minmax(240px,.8fr)!important;
  }

  body.customers .mk2-main > :first-child {
    grid-column:1 / -1!important;
  }

  body.customers .mk2-bottom {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.customers .mk2-bottom > :last-child {
    grid-column:1 / -1;
  }

  /* ---------- projects ---------- */
  .mk33-projects-hero {
    flex-direction:column!important;
    align-items:stretch!important;
    gap:18px!important;
    padding:22px!important;
  }

  .mk33-projects-hero h1 {
    font-size:32px!important;
  }

  .mk33-projects-kpis {
    width:100%!important;
    min-width:0!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .mk33-status-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .mk33-project-hero {
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  .mk33-project-hero-side {
    width:100%!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }

  .mk33-overview-grid {
    grid-template-columns:1fr!important;
  }

  .mk33-finance-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.customers .mk33-project-tabs-shell {
    top:72px!important;
  }

  body.customers .mk33-project-tabs {
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
  }

  /* ---------- tasks / milestone boards ---------- */
  .mk4-task-board-hero {
    flex-direction:column!important;
    align-items:stretch!important;
    gap:16px!important;
  }

  .mk4-task-stats {
    width:100%!important;
    min-width:0!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  body.customers .mk4-task-phases {
    max-width:100%!important;
    overflow-x:auto!important;
  }

  body.customers .mk4-task-phases[data-mk4-columns="3"] .mk4-milestone-column,
  body.customers .mk4-task-phases[data-mk4-columns="4"] .mk4-milestone-column {
    width:300px!important;
    min-width:300px!important;
  }

  .mk4-task-detail-hero {
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  .mk4-task-detail-actions {
    width:100%;
  }

  /* ---------- files ---------- */
  .mk42-file-grid,
  .mk42-global-file-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .mk42-feature-hero,
  .mk42-page-hero {
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  .mk42-feature-stats {
    width:100%!important;
  }

  .mk42-feature-stat {
    flex:1 1 0;
  }

  .mk42-files-actions {
    flex-wrap:wrap!important;
  }

  /* ---------- discussions ---------- */
  .mk42-discussion-grid {
    grid-template-columns:1fr!important;
  }

  .mk42-discussion-card {
    grid-template-columns:auto minmax(0,1fr) auto auto!important;
  }

  /* ---------- gantt ---------- */
  .mk42-gantt-toolbar {
    flex-wrap:wrap!important;
  }

  .mk42-gantt-canvas {
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
  }

  body.customers .mk42-gantt-canvas #gantt {
    min-width:760px!important;
  }

  /* ---------- support ---------- */
  .mk42-ticket-status-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .mk42-ticket-detail-hero {
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  .mk42-ticket-info-card {
    position:static!important;
  }

  /* ---------- finance / commercial ---------- */
  .mk43-finance-hero,
  .mk43-account-hero,
  .mk43-calendar-hero {
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:18px!important;
    padding:21px!important;
  }

  .mk43-finance-hero h1,
  .mk43-account-hero h1,
  .mk43-calendar-hero h1 {
    font-size:31px!important;
  }

  .mk43-finance-hero-orb,
  .mk43-account-security {
    width:100%!important;
    min-width:0!important;
  }

  .mk43-dual-orbs {
    width:100%!important;
  }

  .mk43-mini-orb {
    flex:1 1 0;
    min-width:0!important;
  }

  .mk43-finance-stats,
  .mk43-finance-stats.has-five {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .mk43-finance-stat {
    min-width:0!important;
  }

  .mk43-profile-layout {
    display:flex!important;
    flex-wrap:wrap!important;
  }

  .mk43-profile-main,
  .mk43-profile-security {
    width:100%!important;
    float:none!important;
  }

  .mk43-profile-security {
    margin-top:14px;
  }

  /* ---------- calendar ---------- */
  body.customers .mk43-calendar-shell .fc-toolbar {
    flex-wrap:wrap!important;
    justify-content:space-between!important;
  }

  body.customers .mk43-calendar-shell .fc-toolbar .fc-left,
  body.customers .mk43-calendar-shell .fc-toolbar .fc-center,
  body.customers .mk43-calendar-shell .fc-toolbar .fc-right {
    float:none!important;
    margin:3px 0!important;
  }

  body.customers .mk43-calendar-shell .fc-view-container {
    overflow-x:auto!important;
  }

  body.customers .mk43-calendar-shell .fc-view {
    min-width:720px;
  }

  /* ---------- tables: scroll inside the card, never the whole page ---------- */
  body.customers .dataTables_wrapper,
  body.customers .mk43-table-shell,
  body.customers .mk42-ticket-table-wrap,
  body.customers .table-responsive {
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  body.customers .dt-table,
  body.customers .mk43-finance-table,
  body.customers .mk42-ticket-table {
    min-width:760px;
  }

  body.customers .dataTables_wrapper .row {
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  body.customers .dataTables_wrapper .col-sm-6,
  body.customers .dataTables_wrapper .col-md-6 {
    padding-left:4px!important;
    padding-right:4px!important;
  }

  /* ---------- modals ---------- */
  body.customers .modal-dialog {
    width:calc(100% - 34px)!important;
    max-width:900px!important;
    margin:24px auto!important;
  }

  /* Rich content must not blow the viewport. */
  body.customers .tc-content,
  body.customers .project-description,
  body.customers .ticket-reply,
  body.customers .proposal-html,
  body.customers .contract-html,
  body.customers .invoice-html,
  body.customers .estimate-html {
    max-width:100%!important;
    overflow-wrap:anywhere;
  }
}

/* Portrait tablets: favor vertical reading and larger touch targets. */
@media (min-width:768px) and (max-width:900px) {
  body.customers #content > .container {
    padding-left:12px!important;
    padding-right:12px!important;
  }

  body.customers > .navbar.header .mk43-shell {
    width:calc(100% - 12px)!important;
  }

  body.customers .mk2-status-grid,
  .mk33-status-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.customers .mk2-main,
  body.customers .mk2-bottom {
    grid-template-columns:1fr!important;
  }

  body.customers .mk2-main > :first-child,
  body.customers .mk2-bottom > :last-child {
    grid-column:auto!important;
  }

  .mk33-projects-kpis {
    grid-template-columns:1fr 1fr!important;
  }

  .mk33-projects-kpis > :last-child {
    grid-column:1 / -1;
  }

  .mk33-finance-grid,
  .mk43-finance-stats,
  .mk43-finance-stats.has-five {
    grid-template-columns:1fr!important;
  }

  .mk4-task-stats {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .mk42-ticket-status-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .mk42-file-grid,
  .mk42-global-file-grid {
    grid-template-columns:1fr!important;
  }

  .mk42-discussion-card {
    grid-template-columns:auto minmax(0,1fr) auto!important;
  }

  .mk42-discussion-chevron {
    display:none!important;
  }

  .mk43-dual-orbs {
    flex-direction:column;
  }

  /* Slightly larger touch targets on portrait tablets. */
  body.customers .btn {
    min-height:40px!important;
  }

  body.customers .form-control,
  body.customers .bootstrap-select > .dropdown-toggle {
    min-height:44px!important;
  }
}

/* Landscape tablets around iPad Pro widths still get a compact dashboard,
   without looking like a stretched desktop site. */
@media (min-width:901px) and (max-width:1199px) and (orientation:landscape) {
  body.customers .mk2-hero {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(390px,.95fr)!important;
    align-items:center!important;
  }

  body.customers .mk2-actions {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .mk42-file-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.1.1
   Tablet Header Hotfix
   Fixes Bootstrap desktop-collapse behavior at 768–991px.
   ============================================================ */

@media (min-width:768px) and (max-width:991px) {
  /* Header behaves like a true tablet app bar instead of a desktop navbar. */
  body.customers > .navbar.header.mk43-header {
    min-height:0!important;
    padding:7px 0!important;
  }

  body.customers > .navbar.header .mk43-shell {
    display:block!important;
    width:calc(100% - 18px)!important;
    min-height:60px!important;
    padding:7px 9px!important;
    border-radius:16px!important;
  }

  .mk43-brand-area {
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:46px!important;
    float:none!important;
  }

  .mk43-brand {
    min-width:0!important;
  }

  /* Bootstrap normally hides the toggle above 767px.
     Re-enable it for portrait/small tablets. */
  body.customers > .navbar.header .mk43-mobile-toggle {
    display:block!important;
    float:right!important;
    margin:3px 0 3px 10px!important;
  }

  /* Bootstrap also forces .collapse open above 767px.
     Override that so tablet navigation is genuinely collapsible. */
  body.customers > .navbar.header .mk43-collapse.collapse {
    display:none!important;
    height:auto!important;
    overflow:visible!important;
  }

  body.customers > .navbar.header .mk43-collapse.collapse.in,
  body.customers > .navbar.header .mk43-collapse.collapsing {
    display:block!important;
  }

  body.customers > .navbar.header .mk43-collapse {
    width:100%!important;
    max-width:100%!important;
    float:none!important;
    margin:7px 0 0!important;
    padding:9px 0 1px!important;
    border-top:1px solid #e7edf5!important;
    box-shadow:none!important;
  }

  .mk43-layout {
    display:block!important;
    width:100%!important;
  }

  .mk43-primary-wrap {
    width:100%!important;
    overflow:visible!important;
  }

  /* Two-column compact tablet menu instead of a full-height vertical list. */
  body.customers > .navbar.header .mk43-primary-list {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    min-height:0!important;
    gap:6px!important;
    margin:0!important;
    padding:6px!important;
    border:1px solid #e8eef6!important;
    border-radius:13px!important;
    background:#f8fafd!important;
  }

  body.customers > .navbar.header .mk43-primary-list > li {
    display:block!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    float:none!important;
  }

  body.customers > .navbar.header .mk43-primary-list > li > a {
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-height:42px!important;
    margin:0!important;
    padding:9px 11px!important;
    border-radius:10px!important;
    font-size:10px!important;
  }

  body.customers > .navbar.header .mk43-primary-list > li.active > a {
    box-shadow:inset 0 0 0 1px #d7e5f8,0 5px 14px rgba(15,39,82,.05)!important;
  }

  /* More is unnecessary here: all primary destinations are visible in grid. */
  body.customers > .navbar.header .mk43-more {
    display:none!important;
  }

  /* Utilities become a compact toolbar below the menu. */
  body.customers > .navbar.header .mk43-actions {
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    width:100%!important;
    min-height:48px!important;
    gap:6px!important;
    margin:8px 0 0!important;
    padding:7px 3px 2px!important;
    border-top:1px solid #e8eef6!important;
  }

  body.customers > .navbar.header .mk43-actions > li {
    float:none!important;
  }

  .mk43-action-link > a,
  .mk43-bell > a {
    width:40px!important;
    min-height:40px!important;
    padding:8px!important;
  }

  .mk43-action-label {
    display:none!important;
  }

  body.customers > .navbar.header .mk43-profile-trigger {
    min-height:42px!important;
    padding:4px 6px!important;
  }

  .mk43-profile-text,
  .mk43-profile-chevron {
    display:none!important;
  }

  .mk43-profile-menu {
    right:0!important;
    left:auto!important;
  }

  .mk43-progress-line {
    display:none!important;
  }
}

/* At 992–1199px use the adaptive desktop-style header, not the mobile stack. */
@media (min-width:992px) and (max-width:1199px) {
  body.customers > .navbar.header .mk43-shell {
    display:flex!important;
  }

  .mk43-brand-area {
    flex:0 0 auto!important;
  }

  body.customers > .navbar.header .mk43-mobile-toggle {
    display:none!important;
  }

  body.customers > .navbar.header .mk43-collapse.collapse {
    display:block!important;
  }

  .mk43-layout {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  body.customers > .navbar.header .mk43-primary-list {
    display:flex!important;
    width:max-content!important;
  }

  body.customers > .navbar.header .mk43-primary-list > li {
    width:auto!important;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.2
   UNIVERSAL RESPONSIVE SYSTEM
   Practical viewport coverage: 320px -> ultrawide displays
   Fluid first, breakpoints second.
   ============================================================ */

/* ---------- 0. Responsive safety net ---------- */
:root {
  --mk-fluid-gutter: clamp(10px, 1.45vw, 24px);
  --mk-fluid-gap: clamp(8px, 1.1vw, 18px);
  --mk-fluid-card-pad: clamp(12px, 1.35vw, 22px);
  --mk-fluid-radius: clamp(12px, 1.1vw, 18px);
  --mk-fluid-h1: clamp(25px, 3.2vw, 42px);
  --mk-fluid-h2: clamp(18px, 2.2vw, 28px);
  --mk-fluid-body: clamp(10px, .9vw, 13px);
}

html {
  min-width:0!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.customers,
body.customers *,
body.customers *::before,
body.customers *::after {
  box-sizing:border-box;
}

body.customers {
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}

body.customers #wrapper,
body.customers #content,
body.customers #content > .container,
body.customers #content > .container-fluid {
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
}

body.customers #content > .container,
body.customers #content > .container-fluid {
  padding-left:var(--mk-fluid-gutter)!important;
  padding-right:var(--mk-fluid-gutter)!important;
}

body.customers img,
body.customers video,
body.customers iframe,
body.customers svg,
body.customers canvas {
  max-width:100%;
}

body.customers img,
body.customers video {
  height:auto;
}

body.customers pre,
body.customers code,
body.customers .tc-content,
body.customers .project-description,
body.customers .ticket-reply,
body.customers .proposal-html,
body.customers .contract-html,
body.customers .invoice-html,
body.customers .estimate-html {
  max-width:100%!important;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Bootstrap rows can otherwise create page-level overflow at odd widths. */
body.customers #content .row {
  max-width:calc(100% + 30px);
}

body.customers .panel_s,
body.customers .panel,
body.customers .card,
body.customers [class*="mk2-"],
body.customers [class*="mk33-"],
body.customers [class*="mk4-"],
body.customers [class*="mk42-"],
body.customers [class*="mk43-"] {
  min-width:0;
}

/* ---------- 1. Fluid typography / hero sizing ---------- */
body.customers .mk2-hero h1,
body.customers .mk33-projects-hero h1,
body.customers .mk33-project-hero h1,
body.customers .mk42-page-hero h1,
body.customers .mk42-feature-hero h1,
body.customers .mk43-finance-hero h1,
body.customers .mk43-account-hero h1,
body.customers .mk43-calendar-hero h1 {
  font-size:var(--mk-fluid-h1)!important;
  line-height:1.06!important;
}

body.customers .mk2-hero,
body.customers .mk33-projects-hero,
body.customers .mk33-project-hero,
body.customers .mk42-page-hero,
body.customers .mk42-feature-hero,
body.customers .mk43-finance-hero,
body.customers .mk43-account-hero,
body.customers .mk43-calendar-hero {
  gap:var(--mk-fluid-gap)!important;
  padding:var(--mk-fluid-card-pad)!important;
  border-radius:var(--mk-fluid-radius)!important;
}

/* ---------- 2. App header: actual-width responsive, not device-name responsive ---------- */
body.customers > .navbar.header.mk43-header {
  width:100%!important;
  max-width:100%!important;
}

body.customers > .navbar.header .mk43-shell {
  width:calc(100% - (var(--mk-fluid-gutter) * 2))!important;
  max-width:1580px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

body.customers > .navbar.header .mk43-collapse,
body.customers > .navbar.header .mk43-layout,
body.customers > .navbar.header .mk43-primary-wrap,
body.customers > .navbar.header .mk43-primary-list,
body.customers > .navbar.header .mk43-actions {
  min-width:0!important;
  max-width:100%;
}

/* 0–1023: one consistent collapsible application header.
   This deliberately overrides Bootstrap's 768px desktop navbar breakpoint. */
@media (max-width:1023px) {
  body.customers > .navbar.header.mk43-header {
    position:sticky!important;
    top:0;
    min-height:0!important;
    padding:6px 0!important;
  }

  body.customers > .navbar.header .mk43-shell {
    display:block!important;
    min-height:56px!important;
    padding:6px 8px!important;
    border-radius:14px!important;
  }

  .mk43-brand-area {
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:44px!important;
    float:none!important;
  }

  .mk43-brand {
    min-width:0!important;
    max-width:calc(100% - 56px)!important;
  }

  .mk43-brand-mark {
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
    border-radius:11px!important;
    font-size:17px!important;
  }

  .mk43-brand-copy strong {
    font-size:14px!important;
  }

  .mk43-brand-copy small {
    font-size:6.5px!important;
  }

  body.customers > .navbar.header .mk43-mobile-toggle {
    display:block!important;
    float:right!important;
    margin:2px 0!important;
  }

  body.customers > .navbar.header .mk43-collapse.collapse {
    display:none!important;
    height:auto!important;
    overflow:visible!important;
  }

  body.customers > .navbar.header .mk43-collapse.collapse.in,
  body.customers > .navbar.header .mk43-collapse.collapsing {
    display:block!important;
  }

  body.customers > .navbar.header .mk43-collapse {
    width:100%!important;
    float:none!important;
    margin:6px 0 0!important;
    padding:8px 0 1px!important;
    border-top:1px solid #e7edf5!important;
  }

  .mk43-layout {
    display:block!important;
    width:100%!important;
  }

  .mk43-primary-wrap {
    width:100%!important;
    overflow:visible!important;
  }

  body.customers > .navbar.header .mk43-primary-list {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    gap:5px!important;
    margin:0!important;
    padding:5px!important;
  }

  body.customers > .navbar.header .mk43-primary-list > li {
    display:block!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    float:none!important;
  }

  body.customers > .navbar.header .mk43-primary-list > li > a {
    width:100%!important;
    min-height:40px!important;
    justify-content:flex-start!important;
    margin:0!important;
    padding:8px 10px!important;
    font-size:10px!important;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body.customers > .navbar.header .mk43-more {
    display:none!important;
  }

  body.customers > .navbar.header .mk43-actions {
    display:flex!important;
    width:100%!important;
    min-height:46px!important;
    justify-content:flex-end!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    margin:7px 0 0!important;
    padding:6px 2px 1px!important;
    border-top:1px solid #e8eef6!important;
  }

  .mk43-action-label,
  .mk43-profile-text,
  .mk43-profile-chevron {
    display:none!important;
  }

  .mk43-action-link > a,
  .mk43-bell > a {
    width:38px!important;
    min-height:38px!important;
    padding:7px!important;
  }

  body.customers > .navbar.header .mk43-profile-trigger {
    min-height:40px!important;
    padding:4px 5px!important;
  }

  .mk43-profile-avatar {
    width:31px!important;
    height:31px!important;
    flex-basis:31px!important;
  }

  body.customers > .navbar.header .mk43-profile-menu {
    position:absolute!important;
    right:0!important;
    left:auto!important;
    width:min(286px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
  }
}

/* 1024+: desktop adaptive header + More overflow engine. */
@media (min-width:1024px) {
  body.customers > .navbar.header .mk43-shell {
    display:flex!important;
  }

  body.customers > .navbar.header .mk43-mobile-toggle {
    display:none!important;
  }

  body.customers > .navbar.header .mk43-collapse.collapse {
    display:block!important;
  }

  .mk43-layout {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  body.customers > .navbar.header .mk43-primary-list {
    display:flex!important;
    width:max-content!important;
  }
}

/* ---------- 3. Dashboard: fluid grids ---------- */
body.customers .mk2-actions,
body.customers .mk2-status-grid,
body.customers .mk2-main,
body.customers .mk2-bottom,
.mk33-projects-kpis,
.mk33-status-grid,
.mk33-finance-grid,
.mk4-task-stats,
.mk42-ticket-status-grid,
.mk42-file-grid,
.mk42-global-file-grid,
.mk43-finance-stats {
  gap:var(--mk-fluid-gap)!important;
}

/* Let grids naturally wrap by available width where safe. */
body.customers .mk2-actions {
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))!important;
}

body.customers .mk2-status-grid,
.mk33-status-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(165px,100%),1fr))!important;
}

.mk33-projects-kpis {
  grid-template-columns:repeat(auto-fit,minmax(min(185px,100%),1fr))!important;
}

.mk33-finance-grid,
.mk43-finance-stats,
.mk43-finance-stats.has-five {
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))!important;
}

.mk4-task-stats {
  grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr))!important;
}

.mk42-ticket-status-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))!important;
}

.mk42-file-grid,
.mk42-global-file-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(245px,100%),1fr))!important;
}

/* ---------- 4. Safe internal horizontal scrolling ---------- */
body.customers .table-responsive,
body.customers .dataTables_wrapper,
body.customers .mk43-table-shell,
body.customers .mk42-ticket-table-wrap,
body.customers .mk33-project-tabs,
body.customers .mk4-task-phases,
body.customers .mk42-gantt-canvas,
body.customers .mk43-calendar-shell .fc-view-container {
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
}

body.customers .table-responsive > table,
body.customers .mk43-table-shell > table,
body.customers .mk42-ticket-table-wrap > table {
  margin-bottom:0!important;
}

/* Wide-data components are allowed to be wider than their card only internally. */
@media (max-width:1023px) {
  body.customers .dt-table,
  body.customers .mk43-finance-table,
  body.customers .mk42-ticket-table {
    min-width:720px;
  }

  body.customers .mk42-gantt-canvas #gantt {
    min-width:760px!important;
  }

  body.customers .mk43-calendar-shell .fc-view {
    min-width:700px;
  }
}

@media (max-width:479px) {
  body.customers .dt-table,
  body.customers .mk43-finance-table,
  body.customers .mk42-ticket-table {
    min-width:660px;
  }

  body.customers .mk42-gantt-canvas #gantt {
    min-width:700px!important;
  }
}

/* ---------- 5. Project / task / file / discussion layout ---------- */
@media (max-width:1023px) {
  body.customers .mk2-hero,
  .mk33-projects-hero,
  .mk33-project-hero,
  .mk4-task-board-hero,
  .mk4-task-detail-hero,
  .mk42-feature-hero,
  .mk42-page-hero,
  .mk42-ticket-detail-hero,
  .mk43-finance-hero,
  .mk43-account-hero,
  .mk43-calendar-hero {
    flex-direction:column!important;
    align-items:stretch!important;
  }

  body.customers .mk2-main,
  body.customers .mk2-bottom,
  .mk33-overview-grid {
    grid-template-columns:1fr!important;
  }

  body.customers .mk2-main > *,
  body.customers .mk2-bottom > * {
    grid-column:auto!important;
  }

  .mk33-project-hero-side,
  .mk4-task-detail-actions,
  .mk42-feature-stats,
  .mk42-files-actions,
  .mk43-dual-orbs {
    width:100%!important;
    min-width:0!important;
    flex-wrap:wrap!important;
  }

  .mk42-discussion-grid {
    grid-template-columns:1fr!important;
  }

  .mk42-gantt-toolbar {
    flex-wrap:wrap!important;
  }

  .mk42-ticket-info-card {
    position:static!important;
  }

  .mk43-profile-layout {
    display:flex!important;
    flex-wrap:wrap!important;
  }

  .mk43-profile-main,
  .mk43-profile-security {
    width:100%!important;
    float:none!important;
  }

  .mk43-profile-security {
    margin-top:var(--mk-fluid-gap);
  }
}

/* ---------- 6. Forms / filters / DataTables controls ---------- */
@media (max-width:767px) {
  body.customers .dataTables_wrapper .row {
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  body.customers .dataTables_wrapper .row > [class*="col-"] {
    width:100%!important;
    float:none!important;
    padding-left:0!important;
    padding-right:0!important;
    margin-bottom:7px;
  }

  body.customers .dataTables_length,
  body.customers .dataTables_filter,
  body.customers .dataTables_info,
  body.customers .dataTables_paginate {
    width:100%!important;
    float:none!important;
    text-align:left!important;
  }

  body.customers .dataTables_filter label,
  body.customers .dataTables_filter input,
  body.customers .dataTables_length label {
    width:100%!important;
    max-width:100%!important;
  }

  body.customers .form-control,
  body.customers .bootstrap-select,
  body.customers .bootstrap-select > .dropdown-toggle,
  body.customers select,
  body.customers textarea {
    max-width:100%!important;
  }

  body.customers .btn-group,
  body.customers .input-group {
    max-width:100%;
  }
}

/* ---------- 7. Modals / dropdowns ---------- */
body.customers .modal {
  padding-left:0!important;
  padding-right:0!important;
}

body.customers .modal-dialog {
  width:min(920px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  margin:clamp(10px,3vh,28px) auto!important;
}

body.customers .modal-content {
  max-width:100%;
  border-radius:var(--mk-fluid-radius)!important;
}

body.customers .dropdown-menu {
  max-width:calc(100vw - 18px);
}

@media (max-width:479px) {
  body.customers .modal-dialog {
    width:calc(100vw - 14px)!important;
    max-width:calc(100vw - 14px)!important;
    margin:7px auto!important;
  }

  body.customers .modal-content {
    border-radius:12px!important;
  }

  body.customers .modal-body {
    padding:13px!important;
  }
}

/* ---------- 8. Calendar fluid behavior ---------- */
body.customers .mk43-calendar-shell .fc-toolbar {
  gap:6px;
}

@media (max-width:1023px) {
  body.customers .mk43-calendar-shell .fc-toolbar {
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:space-between!important;
  }

  body.customers .mk43-calendar-shell .fc-toolbar .fc-left,
  body.customers .mk43-calendar-shell .fc-toolbar .fc-center,
  body.customers .mk43-calendar-shell .fc-toolbar .fc-right {
    float:none!important;
    margin:2px 0!important;
  }
}

/* ---------- 9. Fine-grained viewport bands ---------- */

/* Ultra-small phones / split-screen narrow panes */
@media (max-width:359px) {
  :root {
    --mk-fluid-gutter:7px;
    --mk-fluid-gap:7px;
    --mk-fluid-card-pad:11px;
  }

  body.customers > .navbar.header .mk43-primary-list {
    grid-template-columns:1fr!important;
  }

  .mk43-brand-copy small {
    display:none!important;
  }

  body.customers .mk2-actions,
  body.customers .mk2-status-grid,
  .mk33-projects-kpis,
  .mk33-status-grid,
  .mk33-finance-grid,
  .mk4-task-stats,
  .mk42-ticket-status-grid,
  .mk42-file-grid,
  .mk42-global-file-grid,
  .mk43-finance-stats,
  .mk43-finance-stats.has-five {
    grid-template-columns:1fr!important;
  }

  .mk43-dual-orbs {
    flex-direction:column!important;
  }
}

/* Normal phones */
@media (min-width:360px) and (max-width:479px) {
  body.customers > .navbar.header .mk43-primary-list {
    grid-template-columns:1fr!important;
  }

  body.customers .mk2-actions,
  body.customers .mk2-status-grid,
  .mk33-projects-kpis,
  .mk33-status-grid,
  .mk33-finance-grid,
  .mk4-task-stats,
  .mk42-ticket-status-grid,
  .mk42-file-grid,
  .mk42-global-file-grid,
  .mk43-finance-stats,
  .mk43-finance-stats.has-five {
    grid-template-columns:1fr!important;
  }

  .mk43-dual-orbs {
    flex-direction:column!important;
  }
}

/* Large phones / small foldables */
@media (min-width:480px) and (max-width:767px) {
  body.customers > .navbar.header .mk43-primary-list {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.customers .mk2-actions,
  body.customers .mk2-status-grid,
  .mk33-projects-kpis,
  .mk33-status-grid,
  .mk4-task-stats,
  .mk42-ticket-status-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .mk42-file-grid,
  .mk42-global-file-grid,
  .mk43-finance-stats,
  .mk43-finance-stats.has-five {
    grid-template-columns:1fr!important;
  }
}

/* Tablets / foldables / split-screen desktop panes */
@media (min-width:768px) and (max-width:1023px) {
  body.customers > .navbar.header .mk43-primary-list {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.customers .mk2-status-grid,
  .mk33-status-grid,
  .mk4-task-stats,
  .mk42-ticket-status-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.customers .mk2-actions,
  .mk33-projects-kpis,
  .mk42-file-grid,
  .mk42-global-file-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Small laptop / landscape tablet */
@media (min-width:1024px) and (max-width:1279px) {
  body.customers #content > .container {
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .mk43-brand {
    min-width:138px!important;
  }

  .mk43-brand-copy strong {
    font-size:15px!important;
  }

  .mk43-action-label,
  .mk43-profile-text,
  .mk43-profile-chevron {
    display:none!important;
  }

  body.customers .mk2-hero {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(350px,.8fr)!important;
    align-items:center!important;
  }

  body.customers .mk2-main {
    grid-template-columns:minmax(0,1.35fr) minmax(255px,.75fr)!important;
  }

  body.customers .mk2-main > :first-child {
    grid-column:1 / -1!important;
  }
}

/* Normal desktop */
@media (min-width:1280px) and (max-width:1599px) {
  body.customers #content > .container {
    padding-left:18px!important;
    padding-right:18px!important;
  }
}

/* Large / ultrawide: keep content readable instead of endlessly stretching. */
@media (min-width:1600px) {
  body.customers #content > .container {
    width:min(1580px,calc(100% - 48px))!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* ---------- 10. Landscape phones / short-height windows ---------- */
@media (max-width:1023px) and (orientation:landscape) and (max-height:620px) {
  body.customers > .navbar.header.mk43-header {
    position:relative!important;
  }

  body.customers .mk2-hero,
  .mk33-projects-hero,
  .mk33-project-hero,
  .mk42-page-hero,
  .mk42-feature-hero,
  .mk43-finance-hero,
  .mk43-account-hero,
  .mk43-calendar-hero {
    padding:12px!important;
  }

  .mk43-calendar-hero-icon,
  .mk43-finance-hero-orb,
  .mk43-account-security {
    display:none!important;
  }
}

/* ---------- 11. Accessibility / zoom robustness ---------- */
@media (prefers-reduced-motion:reduce) {
  body.customers *,
  body.customers *::before,
  body.customers *::after {
    scroll-behavior:auto!important;
  }
}

/* Touch devices: avoid tiny interactive controls. */
@media (hover:none) and (pointer:coarse) {
  body.customers a,
  body.customers button,
  body.customers .btn,
  body.customers input,
  body.customers select,
  body.customers .bootstrap-select > .dropdown-toggle {
    min-height:40px;
  }

  body.customers .mk43-primary-list > li > a {
    min-height:42px!important;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.3
   Brand Color Refresh + Premium Motion
   Direction: warm orange + deep charcoal + clean light surfaces
   ============================================================ */

:root {
  --mk-brand-orange:#f59b23;
  --mk-brand-orange-2:#ffb23f;
  --mk-brand-orange-deep:#dd7c0a;
  --mk-brand-orange-soft:#fff4e4;
  --mk-brand-orange-soft-2:#fff8ef;

  --mk-brand-ink:#0d1014;
  --mk-brand-ink-2:#15191f;
  --mk-brand-ink-3:#21262d;

  --mk-brand-bg:#f6f7f9;
  --mk-brand-surface:#ffffff;
  --mk-brand-line:#e8eaee;
  --mk-brand-text:#111827;
  --mk-brand-muted:#717986;

  --mk-brand-shadow:0 18px 50px rgba(16,20,26,.08);
  --mk-brand-shadow-hover:0 24px 62px rgba(16,20,26,.13);
}

/* ---------- Global palette ---------- */
body.customers {
  background:
    radial-gradient(circle at 9% 0%, rgba(245,155,35,.07), transparent 21%),
    radial-gradient(circle at 94% 11%, rgba(245,155,35,.05), transparent 18%),
    var(--mk-brand-bg)!important;
  color:var(--mk-brand-text);
}

body.customers a {
  color:var(--mk-brand-orange-deep);
}

body.customers a:hover {
  color:#b96100;
}

/* ---------- Header ---------- */
body.customers > .navbar.header.mk43-header {
  background:rgba(246,247,249,.86)!important;
  backdrop-filter:blur(20px) saturate(1.25);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
}

body.customers > .navbar.header .mk43-shell {
  border-color:rgba(224,226,230,.96)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.99),rgba(252,252,253,.97))!important;
  box-shadow:
    0 18px 52px rgba(14,16,20,.08),
    inset 0 1px 0 rgba(255,255,255,.95)!important;
}

.mk43-brand-mark {
  color:#111!important;
  background:
    linear-gradient(145deg,var(--mk-brand-orange-2) 0%,var(--mk-brand-orange) 52%,#f28d10 100%)!important;
  box-shadow:
    0 10px 26px rgba(245,155,35,.26),
    inset 0 1px 0 rgba(255,255,255,.35)!important;
}

.mk43-brand-copy strong {
  color:var(--mk-brand-ink)!important;
}

.mk43-brand-copy small {
  color:#9b6a2f!important;
}

body.customers > .navbar.header .mk43-primary-list {
  border-color:#eceef1!important;
  background:#f7f8fa!important;
}

body.customers > .navbar.header .mk43-primary-list > li > a {
  color:#545d69!important;
}

body.customers > .navbar.header .mk43-primary-list > li > a i {
  color:#939aa3!important;
}

body.customers > .navbar.header .mk43-primary-list > li > a:hover {
  color:#7c4400!important;
  background:var(--mk-brand-orange-soft)!important;
}

body.customers > .navbar.header .mk43-primary-list > li > a:hover i {
  color:var(--mk-brand-orange-deep)!important;
}

body.customers > .navbar.header .mk43-primary-list > li.active > a {
  color:#663700!important;
  background:#fff!important;
  box-shadow:
    0 6px 17px rgba(14,16,20,.07),
    inset 0 0 0 1px #f0c98f!important;
}

body.customers > .navbar.header .mk43-primary-list > li.active > a i {
  color:var(--mk-brand-orange)!important;
}

.mk43-progress-line {
  background:linear-gradient(90deg,transparent,rgba(245,155,35,.55),rgba(255,178,63,.7),transparent)!important;
}

body.customers > .navbar.header .mk43-more-menu,
body.customers > .navbar.header .mk43-profile-menu {
  border-color:#e6e7ea!important;
  box-shadow:0 22px 62px rgba(14,16,20,.15)!important;
}

body.customers > .navbar.header .mk43-more-menu > li > a:hover,
body.customers > .navbar.header .mk43-profile-menu > li > a:hover {
  color:#9b5600!important;
  background:var(--mk-brand-orange-soft-2)!important;
}

.mk43-menu-icon {
  color:#89551d!important;
  background:#fff5e8!important;
}

/* ---------- Main premium cards ---------- */
body.customers .panel_s,
body.customers .mk2-card,
body.customers .mk33-card,
body.customers .mk4-card,
body.customers .mk42-card,
body.customers .mk43-table-card,
body.customers .mk43-finance-summary-card,
body.customers .mk43-contract-chart-card,
body.customers .mk43-calendar-card {
  border-color:var(--mk-brand-line)!important;
  background:var(--mk-brand-surface)!important;
  box-shadow:0 10px 30px rgba(15,18,23,.045)!important;
}

/* ---------- Hero sections ---------- */
body.customers .mk2-hero,
body.customers .mk33-projects-hero,
body.customers .mk33-project-hero,
body.customers .mk42-page-hero,
body.customers .mk42-feature-hero,
body.customers .mk43-finance-hero,
body.customers .mk43-account-hero,
body.customers .mk43-calendar-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:#eadbc8!important;
  background:
    radial-gradient(circle at 76% 18%,rgba(245,155,35,.18),transparent 21%),
    radial-gradient(circle at 95% 86%,rgba(255,178,63,.12),transparent 20%),
    linear-gradient(115deg,#fff 0%,#fff8ee 57%,#fffdf9 100%)!important;
  box-shadow:0 18px 46px rgba(26,20,13,.07)!important;
}

body.customers .mk2-hero::before,
body.customers .mk33-projects-hero::before,
body.customers .mk33-project-hero::before,
body.customers .mk42-page-hero::before,
body.customers .mk42-feature-hero::before,
body.customers .mk43-finance-hero::before,
body.customers .mk43-account-hero::before,
body.customers .mk43-calendar-hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:190px;
  height:190px;
  top:-80px;
  right:10%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(245,155,35,.20),rgba(245,155,35,0) 68%);
  filter:blur(2px);
  animation:mk33-float-orb 8s ease-in-out infinite alternate;
}

body.customers .mk2-hero::after,
body.customers .mk33-projects-hero::after,
body.customers .mk33-project-hero::after,
body.customers .mk42-page-hero::after,
body.customers .mk42-feature-hero::after,
body.customers .mk43-finance-hero::after,
body.customers .mk43-account-hero::after,
body.customers .mk43-calendar-hero::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:220px;
  height:80px;
  right:-70px;
  bottom:-30px;
  transform:rotate(-11deg);
  background:linear-gradient(90deg,rgba(13,16,20,.08),rgba(245,155,35,.12));
  filter:blur(18px);
}

body.customers .mk2-hero h1,
body.customers .mk33-projects-hero h1,
body.customers .mk33-project-hero h1,
body.customers .mk42-page-hero h1,
body.customers .mk42-feature-hero h1,
body.customers .mk43-finance-hero h1,
body.customers .mk43-account-hero h1,
body.customers .mk43-calendar-hero h1 {
  color:var(--mk-brand-ink)!important;
}

body.customers .mk2-hero p,
body.customers .mk33-projects-hero p,
body.customers .mk33-project-hero p,
body.customers .mk42-page-hero p,
body.customers .mk42-feature-hero p,
body.customers .mk43-finance-hero p,
body.customers .mk43-account-hero p,
body.customers .mk43-calendar-hero p {
  color:var(--mk-brand-muted)!important;
}

body.customers .mk4-kicker {
  color:#a35b00!important;
  letter-spacing:.14em!important;
}

/* ---------- Buttons ---------- */
body.customers .btn-primary,
body.customers .btn-info,
body.customers .mk43-inline-action,
body.customers .mk42-primary-action {
  border-color:var(--mk-brand-orange)!important;
  color:#17120b!important;
  background:
    linear-gradient(135deg,var(--mk-brand-orange-2),var(--mk-brand-orange))!important;
  box-shadow:0 10px 24px rgba(245,155,35,.20)!important;
}

body.customers .btn-primary:hover,
body.customers .btn-info:hover,
body.customers .mk43-inline-action:hover,
body.customers .mk42-primary-action:hover {
  border-color:#ef8c11!important;
  color:#111!important;
  background:
    linear-gradient(135deg,#ffc160,#f49a20)!important;
  box-shadow:0 14px 30px rgba(245,155,35,.27)!important;
}

body.customers .btn-default {
  border-color:#dedfe3!important;
  color:#3f4650!important;
  background:#fff!important;
}

body.customers .btn-default:hover {
  border-color:#efc78d!important;
  color:#8d4d00!important;
  background:#fff8ee!important;
}

/* ---------- Icons / status accents ---------- */
.mk43-section-icon,
.mk43-document-icon,
.mk42-feature-icon,
.mk42-file-type,
.mk4-task-icon,
.mk33-project-icon {
  color:#aa6100!important;
  background:#fff3df!important;
}

.mk43-finance-stat.is-blue .mk43-finance-stat-icon,
.mk43-finance-stat.is-purple .mk43-finance-stat-icon {
  color:#a35b00!important;
  background:#fff3df!important;
}

/* ---------- Tables ---------- */
body.customers table thead th,
body.customers .table > thead > tr > th {
  color:#6d737c!important;
  background:#fafafa!important;
  border-bottom-color:#ececee!important;
}

body.customers .table > tbody > tr {
  transition:
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

body.customers .table > tbody > tr:hover {
  background:#fffaf3!important;
}

.mk43-document-link {
  color:var(--mk-brand-ink)!important;
}

.mk43-document-link:hover {
  color:#9a5700!important;
}

/* ---------- Inputs ---------- */
body.customers .form-control,
body.customers .bootstrap-select > .dropdown-toggle {
  border-color:#e2e4e7!important;
  background:#fff!important;
  box-shadow:none!important;
}

body.customers .form-control:focus,
body.customers .bootstrap-select.open > .dropdown-toggle {
  border-color:#efb560!important;
  box-shadow:0 0 0 3px rgba(245,155,35,.11)!important;
}

/* ---------- Tabs ---------- */
body.customers .nav-tabs > li > a {
  color:#68717e!important;
}

body.customers .nav-tabs > li.active > a,
body.customers .nav-tabs > li > a:hover {
  color:#8c4d00!important;
}

body.customers .nav-tabs > li.active > a::after {
  background:var(--mk-brand-orange)!important;
}

/* ---------- Project / task accent refinements ---------- */
body.customers .mk33-project-tabs a.active,
body.customers .mk4-task-phases .active,
body.customers .mk42-view-switch .active {
  color:#8d4e00!important;
  border-color:#efc98f!important;
  background:#fff7eb!important;
}

body.customers .mk33-project-progress-ring,
body.customers .mk4-progress-ring {
  filter:drop-shadow(0 8px 16px rgba(245,155,35,.14));
}

/* ---------- File cards ---------- */
body.customers .mk42-file-card,
body.customers .mk42-discussion-card,
body.customers .mk42-ticket-row,
body.customers .mk43-finance-stat {
  border-color:#e7e8eb!important;
  background:#fff!important;
  box-shadow:0 7px 20px rgba(13,16,20,.035);
}

body.customers .mk42-file-card:hover,
body.customers .mk42-discussion-card:hover,
body.customers .mk42-ticket-row:hover,
body.customers .mk43-finance-stat:hover {
  border-color:#efc78d!important;
  background:#fffdf9!important;
  box-shadow:var(--mk-brand-shadow-hover)!important;
}

/* ---------- Calendar ---------- */
body.customers .mk43-calendar-shell .fc-today {
  background:#fff6e7!important;
}

body.customers .mk43-calendar-shell .fc-button {
  border-color:#e4e5e8!important;
  color:#5b626c!important;
  background:#fff!important;
}

body.customers .mk43-calendar-shell .fc-button:hover,
body.customers .mk43-calendar-shell .fc-state-active {
  border-color:#efbe79!important;
  color:#8d4e00!important;
  background:#fff5e7!important;
}

/* ============================================================
   MOTION LAYER
   ============================================================ */

/* smooth route/page entry */
body.customers #content {
  animation:mk33-content-in .56s cubic-bezier(.2,.75,.2,1) both;
}

/* Cards gently reveal upwards */
body.customers .panel_s,
body.customers .mk2-card,
body.customers .mk33-card,
body.customers .mk42-file-card,
body.customers .mk42-discussion-card,
body.customers .mk43-table-card,
body.customers .mk43-finance-summary-card,
body.customers .mk43-contract-chart-card,
body.customers .mk43-calendar-card {
  will-change:transform;
}

/* Cursor-reactive glow target */
body.customers .mk33-magnetic-card {
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:
    transform .22s cubic-bezier(.2,.75,.2,1),
    box-shadow .22s ease,
    border-color .22s ease;
}

body.customers .mk33-magnetic-card::after {
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  opacity:0;
  border-radius:inherit;
  background:
    radial-gradient(
      260px circle at var(--mk-pointer-x,50%) var(--mk-pointer-y,50%),
      rgba(245,155,35,.16),
      transparent 62%
    );
  transition:opacity .18s ease;
}

body.customers .mk33-magnetic-card:hover::after {
  opacity:1;
}

body.customers .mk33-magnetic-card:hover {
  border-color:#efca93!important;
  box-shadow:var(--mk-brand-shadow-hover)!important;
}

/* Buttons get a luxe light sweep */
body.customers .btn,
body.customers .mk43-inline-action,
body.customers .mk42-primary-action {
  position:relative;
  overflow:hidden;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}

body.customers .btn::after,
body.customers .mk43-inline-action::after,
body.customers .mk42-primary-action::after {
  content:"";
  position:absolute;
  width:38%;
  height:240%;
  top:-70%;
  left:-55%;
  transform:rotate(18deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.52),
    transparent
  );
  transition:left .55s cubic-bezier(.2,.8,.2,1);
}

body.customers .btn:hover::after,
body.customers .mk43-inline-action:hover::after,
body.customers .mk42-primary-action:hover::after {
  left:125%;
}

body.customers .btn:hover,
body.customers .mk43-inline-action:hover,
body.customers .mk42-primary-action:hover {
  transform:translateY(-2px);
}

body.customers .btn:active,
body.customers .mk43-inline-action:active,
body.customers .mk42-primary-action:active {
  transform:translateY(0) scale(.985);
}

/* nav micro-interaction */
body.customers > .navbar.header .mk43-primary-list > li > a {
  overflow:hidden;
}

body.customers > .navbar.header .mk43-primary-list > li > a::before {
  content:"";
  position:absolute;
  width:26px;
  height:26px;
  left:50%;
  bottom:-20px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(245,155,35,.18);
  filter:blur(10px);
  opacity:0;
  transition:bottom .24s ease,opacity .24s ease;
}

body.customers > .navbar.header .mk43-primary-list > li > a:hover::before,
body.customers > .navbar.header .mk43-primary-list > li.active > a::before {
  bottom:-8px;
  opacity:1;
}

/* profile pulse */
.mk43-profile-online {
  animation:mk33-presence 2.6s ease-in-out infinite;
}

/* orange ambient blobs */
.mk33-ambient-dot {
  position:fixed;
  z-index:-1;
  width:180px;
  height:180px;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(245,155,35,.13),rgba(245,155,35,0) 68%);
  filter:blur(2px);
  opacity:.8;
}

.mk33-ambient-dot.is-one {
  top:20vh;
  left:-90px;
  animation:mk33-ambient-one 12s ease-in-out infinite alternate;
}

.mk33-ambient-dot.is-two {
  right:-100px;
  bottom:8vh;
  animation:mk33-ambient-two 14s ease-in-out infinite alternate;
}

/* page scroll progress */
.mk33-scroll-progress {
  position:fixed;
  z-index:1200;
  top:0;
  left:0;
  width:0;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,#f59b23,#ffbe59,#f59b23);
  box-shadow:0 0 12px rgba(245,155,35,.42);
  transition:width .08s linear;
}

/* reveal system */
.mk33-reveal {
  opacity:0;
  transform:translateY(14px) scale(.992);
  transition:
    opacity .56s cubic-bezier(.2,.75,.2,1),
    transform .56s cubic-bezier(.2,.75,.2,1);
}

.mk33-reveal.is-visible {
  opacity:1;
  transform:none;
}

/* keyframes */
@keyframes mk33-content-in {
  from { opacity:0; transform:translateY(7px); }
  to   { opacity:1; transform:none; }
}

@keyframes mk33-float-orb {
  from { transform:translate3d(0,0,0) scale(1); }
  to   { transform:translate3d(-18px,14px,0) scale(1.08); }
}

@keyframes mk33-presence {
  0%,100% { box-shadow:0 0 0 0 rgba(34,197,94,.0); }
  45%     { box-shadow:0 0 0 5px rgba(34,197,94,.10); }
}

@keyframes mk33-ambient-one {
  from { transform:translate3d(0,0,0) scale(.95); }
  to   { transform:translate3d(60px,30px,0) scale(1.12); }
}

@keyframes mk33-ambient-two {
  from { transform:translate3d(0,0,0) scale(1); }
  to   { transform:translate3d(-55px,-40px,0) scale(1.15); }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce) {
  body.customers #content,
  body.customers .mk43-profile-online,
  body.customers .mk33-ambient-dot,
  body.customers .mk2-hero::before,
  body.customers .mk33-projects-hero::before,
  body.customers .mk33-project-hero::before,
  body.customers .mk42-page-hero::before,
  body.customers .mk42-feature-hero::before,
  body.customers .mk43-finance-hero::before,
  body.customers .mk43-account-hero::before,
  body.customers .mk43-calendar-hero::before {
    animation:none!important;
  }

  .mk33-reveal {
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  body.customers .btn::after,
  body.customers .mk43-inline-action::after,
  body.customers .mk42-primary-action::after {
    display:none!important;
  }
}

/* Mobile: keep animation elegant and light */
@media (max-width:767px) {
  .mk33-ambient-dot {
    width:120px;
    height:120px;
    opacity:.5;
  }

  body.customers .mk33-magnetic-card:hover {
    transform:none!important;
  }
}

/* Touch: no pointer tilt */
@media (hover:none) and (pointer:coarse) {
  body.customers .mk33-magnetic-card {
    transform:none!important;
  }

  body.customers .mk33-magnetic-card::after {
    display:none!important;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.4
   Signature Workflow Section
   Inspired by Markito's website process language, adapted for CRM.
   ============================================================ */

.mk34-workflow {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:clamp(18px,2vw,28px) 0;
  padding:clamp(22px,3vw,42px);
  border:1px solid #1b1e22;
  border-radius:clamp(16px,1.5vw,24px);
  color:#fff;
  background:
    radial-gradient(circle at 84% 12%,rgba(245,155,35,.08),transparent 22%),
    linear-gradient(145deg,#0b0d10 0%,#111418 100%);
  box-shadow:
    0 28px 70px rgba(10,12,15,.18),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.mk34-workflow-bg {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}

.mk34-workflow-letter {
  position:absolute;
  left:-20px;
  bottom:-70px;
  color:rgba(255,255,255,.025);
  font-size:clamp(210px,31vw,520px);
  font-weight:950;
  line-height:.75;
  letter-spacing:-.11em;
  user-select:none;
  transform:rotate(-5deg);
}

.mk34-workflow-grid {
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 92%);
}

.mk34-workflow-glow {
  position:absolute;
  width:440px;
  height:440px;
  top:-230px;
  right:-100px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(245,155,35,.17),rgba(245,155,35,0) 68%);
  filter:blur(6px);
  animation:mk34-glow-float 8s ease-in-out infinite alternate;
}

.mk34-workflow-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:clamp(24px,3vw,40px);
}

.mk34-workflow-head > div {
  max-width:760px;
}

.mk34-workflow-kicker {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:9px;
  color:#f7a32f;
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
}

.mk34-workflow-kicker::before {
  content:"";
  width:28px;
  height:1px;
  background:#f59b23;
}

.mk34-workflow h2 {
  margin:0;
  color:#fff;
  font-size:clamp(27px,3.4vw,49px);
  font-weight:950;
  line-height:1.02;
  letter-spacing:-.045em;
}

.mk34-workflow-head p {
  max-width:670px;
  margin:10px 0 0;
  color:#aeb4bd;
  font-size:clamp(10px,.9vw,13px);
  line-height:1.65;
}

.mk34-workflow-link {
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
  min-height:42px;
  padding:9px 13px;
  border:1px solid rgba(245,155,35,.38);
  border-radius:11px;
  color:#ffc369!important;
  background:rgba(245,155,35,.06);
  font-size:9px;
  font-weight:850;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.mk34-workflow-link svg {
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.mk34-workflow-link:hover {
  transform:translateY(-2px);
  border-color:rgba(245,155,35,.72);
  color:#111!important;
  background:#f5a12d;
}

.mk34-workflow-stage {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  gap:clamp(9px,1vw,16px);
  min-height:365px;
}

.mk34-step {
  position:relative;
  z-index:2;
  overflow:hidden;
  min-height:255px;
  padding:16px 16px 18px;
  border:1px solid rgba(255,197,111,.36);
  border-radius:3px;
  color:#16120d;
  background:
    linear-gradient(150deg,#ffad35 0%,#f59b23 58%,#ee8e12 100%);
  box-shadow:
    0 18px 36px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.28);
  transform-origin:center;
  transition:
    transform .35s cubic-bezier(.2,.75,.2,1),
    box-shadow .35s ease,
    filter .35s ease;
}

.mk34-step-1 { margin-top:0; }
.mk34-step-2 { margin-top:38px; }
.mk34-step-3 { margin-top:76px; }
.mk34-step-4 { margin-top:114px; }

.mk34-step::before {
  content:"";
  position:absolute;
  width:110px;
  height:190px;
  top:-70px;
  right:-60px;
  transform:rotate(23deg);
  background:linear-gradient(90deg,rgba(255,255,255,.20),rgba(255,255,255,0));
  opacity:.55;
}

.mk34-step::after {
  content:"";
  position:absolute;
  inset:auto -35px -65px auto;
  width:130px;
  height:130px;
  border:1px solid rgba(17,18,20,.10);
  border-radius:50%;
}

.mk34-step-top {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#533000;
  font-size:7px;
  font-weight:950;
  letter-spacing:.10em;
}

.mk34-step-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#111;
  box-shadow:0 0 0 4px rgba(17,17,17,.08);
}

.mk34-step-icon {
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  margin-top:28px;
  border:1px solid rgba(17,17,17,.10);
  border-radius:10px;
  color:#121212;
  background:rgba(255,255,255,.20);
  backdrop-filter:blur(6px);
  font-size:14px;
}

.mk34-step h3 {
  position:relative;
  z-index:2;
  margin:17px 0 0;
  color:#111;
  font-size:clamp(18px,1.7vw,26px);
  font-weight:950;
  line-height:.98;
  letter-spacing:-.035em;
  text-transform:uppercase;
}

.mk34-step p {
  position:relative;
  z-index:2;
  max-width:260px;
  margin:13px 0 0;
  color:#694009;
  font-size:8.5px;
  line-height:1.55;
}

.mk34-step-index {
  position:absolute;
  right:8px;
  bottom:-8px;
  color:rgba(17,17,17,.075);
  font-size:66px;
  font-weight:950;
  line-height:1;
  letter-spacing:-.08em;
}

.mk34-step:hover {
  z-index:5;
  transform:translateY(-9px) rotate(-.35deg) scale(1.018);
  filter:saturate(1.06);
  box-shadow:
    0 30px 54px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,193,98,.18),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.mk34-step:nth-child(even):hover {
  transform:translateY(-9px) rotate(.35deg) scale(1.018);
}

.mk34-workflow-line {
  position:absolute;
  z-index:1;
  left:4%;
  right:4%;
  top:126px;
  height:1px;
  transform:rotate(7deg);
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(245,155,35,0),rgba(245,155,35,.40),rgba(245,155,35,0));
}

.mk34-workflow-line span {
  position:absolute;
  width:7px;
  height:7px;
  top:-3px;
  left:0;
  border-radius:50%;
  background:#ffae37;
  box-shadow:0 0 16px rgba(245,155,35,.65);
  animation:mk34-line-run 5.5s ease-in-out infinite;
}

/* Reveal states added by JS */
.mk34-step {
  opacity:0;
  transform:translateY(30px) scale(.96);
}

.mk34-workflow.is-visible .mk34-step {
  opacity:1;
  transform:none;
  transition:
    opacity .62s cubic-bezier(.2,.75,.2,1),
    transform .62s cubic-bezier(.2,.75,.2,1),
    box-shadow .35s ease,
    filter .35s ease;
}

.mk34-workflow.is-visible .mk34-step-1 { transition-delay:.04s; }
.mk34-workflow.is-visible .mk34-step-2 { transition-delay:.12s; }
.mk34-workflow.is-visible .mk34-step-3 { transition-delay:.20s; }
.mk34-workflow.is-visible .mk34-step-4 { transition-delay:.28s; }

/* restore stair offsets after reveal */
@media (min-width:1024px) {
  .mk34-workflow.is-visible .mk34-step-1 { transform:translateY(0); }
  .mk34-workflow.is-visible .mk34-step-2 { transform:translateY(38px); }
  .mk34-workflow.is-visible .mk34-step-3 { transform:translateY(76px); }
  .mk34-workflow.is-visible .mk34-step-4 { transform:translateY(114px); }

  .mk34-workflow.is-visible .mk34-step-1:hover { transform:translateY(-9px) rotate(-.35deg) scale(1.018); }
  .mk34-workflow.is-visible .mk34-step-2:hover { transform:translateY(29px) rotate(.35deg) scale(1.018); }
  .mk34-workflow.is-visible .mk34-step-3:hover { transform:translateY(67px) rotate(-.35deg) scale(1.018); }
  .mk34-workflow.is-visible .mk34-step-4:hover { transform:translateY(105px) rotate(.35deg) scale(1.018); }
}

@keyframes mk34-line-run {
  0%   { left:0; opacity:0; }
  12%  { opacity:1; }
  50%  { opacity:1; }
  88%  { opacity:1; }
  100% { left:100%; opacity:0; }
}

@keyframes mk34-glow-float {
  from { transform:translate3d(0,0,0) scale(1); }
  to   { transform:translate3d(-55px,36px,0) scale(1.12); }
}

/* Tablet */
@media (min-width:768px) and (max-width:1023px) {
  .mk34-workflow-stage {
    grid-template-columns:repeat(2,minmax(0,1fr));
    min-height:0;
  }

  .mk34-step,
  .mk34-step-1,
  .mk34-step-2,
  .mk34-step-3,
  .mk34-step-4,
  .mk34-workflow.is-visible .mk34-step-1,
  .mk34-workflow.is-visible .mk34-step-2,
  .mk34-workflow.is-visible .mk34-step-3,
  .mk34-workflow.is-visible .mk34-step-4 {
    margin-top:0;
    min-height:230px;
    transform:none;
  }

  .mk34-workflow-line {
    display:none;
  }
}

/* Mobile */
@media (max-width:767px) {
  .mk34-workflow {
    padding:16px;
  }

  .mk34-workflow-head {
    align-items:flex-start;
    flex-direction:column;
    margin-bottom:18px;
  }

  .mk34-workflow-link {
    width:100%;
    justify-content:space-between;
  }

  .mk34-workflow-stage {
    display:grid;
    grid-template-columns:1fr;
    min-height:0;
  }

  .mk34-step,
  .mk34-step-1,
  .mk34-step-2,
  .mk34-step-3,
  .mk34-step-4,
  .mk34-workflow.is-visible .mk34-step-1,
  .mk34-workflow.is-visible .mk34-step-2,
  .mk34-workflow.is-visible .mk34-step-3,
  .mk34-workflow.is-visible .mk34-step-4 {
    margin-top:0;
    min-height:205px;
    transform:none;
  }

  .mk34-step:hover,
  .mk34-step:nth-child(even):hover {
    transform:translateY(-3px);
  }

  .mk34-workflow-line {
    display:none;
  }

  .mk34-step-icon {
    margin-top:20px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .mk34-workflow-glow,
  .mk34-workflow-line span {
    animation:none!important;
  }

  .mk34-step {
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  @media (min-width:1024px) {
    .mk34-step-2 { margin-top:38px!important; }
    .mk34-step-3 { margin-top:76px!important; }
    .mk34-step-4 { margin-top:114px!important; }
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.4.1
   Visual Polish: no blue UI + compact profile command menu + footer
   ============================================================ */

/* ---------- Remove remaining BLUE from interactive chrome ---------- */
body.customers {
  --mk4-blue:#f59b23!important;
  --mk4-blue2:#dd7c0a!important;
}

body.customers a:not(.text-danger):not(.text-success),
body.customers .text-info {
  --mk-interactive-accent:#dd7c0a;
}

body.customers > .navbar.header .mk43-primary-list > li > a:hover,
body.customers > .navbar.header .mk43-primary-list > li.active > a,
body.customers > .navbar.header .mk43-more-menu > li.active > a,
body.customers > .navbar.header .mk43-more-menu > li > a:hover {
  color:#8f4e00!important;
}

body.customers > .navbar.header .mk43-primary-list > li > a:hover i,
body.customers > .navbar.header .mk43-primary-list > li.active > a i {
  color:#f59b23!important;
}

body.customers > .navbar.header .mk43-primary-list > li.active > a {
  border-color:#efc78d!important;
  background:#fff7eb!important;
  box-shadow:
    inset 0 0 0 1px #efc78d,
    0 5px 16px rgba(245,155,35,.10)!important;
}

body.customers .mk43-action-item > a:hover,
body.customers .mk43-action-item.active > a,
body.customers .mk43-action-item > a:hover i,
body.customers .mk43-action-item.active > a i {
  color:#9a5600!important;
}

body.customers .mk43-action-item.active > a {
  border-color:#efc78d!important;
  background:#fff6e8!important;
}

body.customers .pagination > .active > a,
body.customers .pagination > .active > span,
body.customers .pagination > .active > a:hover,
body.customers .pagination > .active > span:hover {
  border-color:#f59b23!important;
  color:#15110b!important;
  background:#f59b23!important;
}

body.customers .pagination > li > a:hover,
body.customers .pagination > li > span:hover {
  border-color:#efc78d!important;
  color:#8c4d00!important;
  background:#fff7eb!important;
}

body.customers .dataTables_wrapper a:not(.btn):hover,
body.customers .table a:not(.btn):hover,
body.customers .panel_s a:not(.btn):hover {
  color:#9a5600;
}

/* Preserve semantic status colors, but interactive "info" buttons become brand orange. */
body.customers .btn-info,
body.customers a.btn-info,
body.customers button.btn-info {
  border-color:#f59b23!important;
  color:#16120c!important;
  background:linear-gradient(135deg,#ffb23f,#f59b23)!important;
}

/* ---------- Profile menu beside Eyad: compact command palette ---------- */
@media (min-width:768px) {
  body.customers > .navbar.header .mk43-profile-menu {
    width:360px!important;
    min-width:360px!important;
    max-width:min(360px,calc(100vw - 24px))!important;
    padding:9px!important;
  }

  body.customers > .navbar.header .mk43-profile.open > .mk43-profile-menu {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
  }

  body.customers > .navbar.header .mk43-profile-menu > li {
    min-width:0;
    margin:0!important;
  }

  body.customers > .navbar.header .mk43-profile-menu > .mk43-profile-menu-head,
  body.customers > .navbar.header .mk43-profile-menu > .divider,
  body.customers > .navbar.header .mk43-profile-menu > .mk43-logout,
  body.customers > .navbar.header .mk43-profile-menu > .dropdown-submenu,
  body.customers > .navbar.header .mk43-profile-menu > li:last-child {
    grid-column:1 / -1;
  }

  body.customers > .navbar.header .mk43-profile-menu > .mk43-profile-menu-head {
    display:flex!important;
    min-height:64px;
    padding:9px 10px!important;
    border:1px solid #eee7df;
    border-radius:11px;
    background:linear-gradient(135deg,#fffaf3,#fff);
  }

  body.customers > .navbar.header .mk43-profile-menu > li:not(.mk43-profile-menu-head):not(.divider) > a {
    min-height:46px;
    padding:8px 9px!important;
    border:1px solid transparent;
    background:#fbfbfc;
  }

  body.customers > .navbar.header .mk43-profile-menu > li:not(.mk43-profile-menu-head):not(.divider) > a:hover {
    border-color:#efc78d!important;
    color:#8d4e00!important;
    background:#fff8ee!important;
  }

  body.customers > .navbar.header .mk43-profile-menu > .mk43-logout > a {
    justify-content:center;
    min-height:40px;
    color:#c83b50!important;
    background:#fff5f6;
  }

  body.customers > .navbar.header .mk43-profile-menu > .divider {
    width:100%;
    height:1px!important;
    margin:3px 0!important;
    background:#ececee!important;
  }
}

/* ---------- Footer ---------- */
body.customers .footer.mk341-footer {
  position:relative;
  overflow:hidden;
  margin-top:30px!important;
  padding:0!important;
  border:0!important;
  color:#fff!important;
  background:transparent!important;
}

body.customers .footer.mk341-footer::before {
  content:"";
  position:absolute;
  inset:auto 7% -80px auto;
  width:280px;
  height:280px;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(245,155,35,.16),rgba(245,155,35,0) 68%);
}

body.customers .footer.mk341-footer .container {
  width:min(1580px,calc(100% - (var(--mk-fluid-gutter,18px) * 2)))!important;
  max-width:1580px!important;
  padding:0!important;
}

.mk341-footer-shell {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:132px;
  padding:24px 26px;
  border:1px solid #202329;
  border-bottom:0;
  border-radius:22px 22px 0 0;
  background:
    radial-gradient(circle at 85% 25%,rgba(245,155,35,.11),transparent 26%),
    linear-gradient(135deg,#0c0e11,#15181d);
  box-shadow:0 -12px 40px rgba(10,12,15,.07);
}

.mk341-footer-brand {
  max-width:520px;
}

.mk341-footer-logo {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff!important;
}

.mk341-footer-mark {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:12px;
  color:#16110a;
  background:linear-gradient(145deg,#ffb23f,#f59b23);
  font-size:19px;
  font-weight:950;
  box-shadow:0 9px 25px rgba(245,155,35,.22);
}

.mk341-footer-brand-copy {
  display:flex;
  flex-direction:column;
  line-height:1;
}

.mk341-footer-brand-copy strong {
  color:#fff;
  font-size:16px;
  font-weight:900;
  letter-spacing:-.03em;
}

.mk341-footer-brand-copy small {
  margin-top:4px;
  color:#e39a38;
  font-size:7px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.mk341-footer-brand p {
  margin:10px 0 0;
  color:#8f969f;
  font-size:9px;
  line-height:1.55;
}

.mk341-footer-side {
  display:flex;
  align-items:flex-end;
  flex-direction:column;
  gap:12px;
}

.mk341-footer-meta,
.mk341-footer-legal {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:9px 14px;
}

.mk341-footer-status {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#aab0b8;
  font-size:8px;
  font-weight:750;
}

.mk341-footer-status i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#32c86e;
  box-shadow:0 0 0 5px rgba(50,200,110,.08);
}

.mk341-back-top {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:7px 10px;
  border:1px solid #34383f;
  border-radius:10px;
  color:#d8dce1;
  background:#181b20;
  font-size:8px;
  font-weight:800;
  transition:transform .18s ease,border-color .18s ease,color .18s ease,background .18s ease;
}

.mk341-back-top:hover {
  transform:translateY(-2px);
  border-color:#a66a1e;
  color:#ffc365;
  background:#1d1a15;
}

.mk341-footer-legal {
  color:#737b86;
  font-size:8px;
}

.mk341-footer-legal a {
  color:#c58a3c!important;
}

.mk341-footer-legal a:hover {
  color:#ffbd58!important;
}

/* keep legacy footer defaults from fighting our layout */
body.customers .footer.mk341-footer .copyright-footer {
  color:#737b86!important;
}

/* ---------- Footer entrance ---------- */
.mk341-footer-shell {
  opacity:0;
  transform:translateY(15px);
  transition:opacity .6s cubic-bezier(.2,.75,.2,1),transform .6s cubic-bezier(.2,.75,.2,1);
}

.mk341-footer.is-visible .mk341-footer-shell {
  opacity:1;
  transform:none;
}

@media (max-width:767px) {
  body.customers .footer.mk341-footer {
    margin-top:20px!important;
  }

  .mk341-footer-shell {
    align-items:flex-start;
    flex-direction:column;
    min-height:0;
    padding:19px;
    border-radius:17px 17px 0 0;
  }

  .mk341-footer-side {
    align-items:flex-start;
    width:100%;
  }

  .mk341-footer-meta,
  .mk341-footer-legal {
    justify-content:flex-start;
  }

  .mk341-back-top {
    margin-left:auto;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.4.2
   Dashboard quick actions + workflow breathing room + slim footer
   ============================================================ */

/* ---------- Desktop dashboard quick actions: horizontal again ---------- */
@media (min-width:1280px) {
  body.mk2-client-home .mk2-hero {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(640px,.95fr)!important;
    align-items:center!important;
    gap:24px!important;
  }

  body.mk2-client-home .mk2-actions {
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:9px!important;
  }

  body.mk2-client-home .mk2-action {
    min-width:0!important;
    min-height:72px!important;
    padding:10px 11px!important;
  }

  body.mk2-client-home .mk2-action strong {
    font-size:11px!important;
    white-space:nowrap;
  }

  body.mk2-client-home .mk2-action small {
    font-size:8.5px!important;
  }
}

/* Small laptop / landscape tablet: 2 x 2, never one long vertical rail. */
@media (min-width:768px) and (max-width:1279px) {
  body.mk2-client-home .mk2-actions {
    width:100%!important;
    min-width:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Phones: one column is intentional and touch-friendly. */
@media (max-width:479px) {
  body.mk2-client-home .mk2-actions {
    grid-template-columns:1fr!important;
  }
}

/* Brand all four quick actions consistently instead of legacy mixed colors. */
body.mk2-client-home .mk2-action-ico,
body.mk2-client-home .mk2-action:nth-child(2) .mk2-action-ico,
body.mk2-client-home .mk2-action:nth-child(3) .mk2-action-ico,
body.mk2-client-home .mk2-action:nth-child(4) .mk2-action-ico {
  color:#a65d00!important;
  background:#fff1d9!important;
}

body.mk2-client-home .mk2-action {
  border-color:#e7e1d9!important;
}

body.mk2-client-home .mk2-action:hover {
  border-color:#efc78d!important;
  background:#fffaf3!important;
  box-shadow:0 12px 28px rgba(245,155,35,.10)!important;
}

/* ---------- Workflow: stop the last card/text touching the bottom edge ---------- */
@media (min-width:1024px) {
  .mk34-workflow {
    padding-bottom:54px!important;
  }

  .mk34-workflow-stage {
    min-height:425px!important;
  }

  .mk34-step {
    min-height:275px!important;
  }
}

/* ---------- Remove the oversized old dark footer visual ---------- */
body.customers .footer.mk341-footer {
  display:none!important;
}

/* ---------- New slim footer ---------- */
body.customers .footer.mk342-footer {
  position:relative;
  margin-top:16px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

body.customers .footer.mk342-footer .container {
  width:min(1580px,calc(100% - (var(--mk-fluid-gutter,18px) * 2)))!important;
  max-width:1580px!important;
  padding:0!important;
}

.mk342-footer-shell {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
  min-height:72px;
  padding:12px 16px;
  border:1px solid #e4e4e6;
  border-radius:15px 15px 0 0;
  background:
    linear-gradient(180deg,#fff,#fbfbfc);
  box-shadow:0 -6px 24px rgba(14,16,20,.035);
}

.mk342-footer-brand {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.mk342-footer-mark {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:10px;
  color:#17120b;
  background:linear-gradient(145deg,#ffb23f,#f59b23);
  font-size:16px;
  font-weight:950;
  box-shadow:0 7px 18px rgba(245,155,35,.18);
}

.mk342-footer-brand strong {
  display:block;
  color:#14171c;
  font-size:10px;
  font-weight:900;
}

.mk342-footer-brand small {
  display:block;
  margin-top:3px;
  color:#969ca5;
  font-size:7px;
}

.mk342-footer-center {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px 11px;
  color:#858c96;
  font-size:8px;
}

.mk342-footer-center a {
  color:#a45d00!important;
}

.mk342-footer-center a:hover {
  color:#7c4400!important;
}

.mk342-back-top {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 9px;
  border:1px solid #e3dfd8;
  border-radius:9px;
  color:#745127;
  background:#fff8ee;
  font-size:8px;
  font-weight:800;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.mk342-back-top:hover {
  transform:translateY(-2px);
  border-color:#efc78d;
  background:#fff3df;
}

/* Less dead space between page content and footer. */
body.customers #content {
  padding-bottom:0!important;
}

body.customers #wrapper {
  padding-bottom:0!important;
}

@media (max-width:767px) {
  body.customers .footer.mk342-footer {
    margin-top:12px!important;
  }

  .mk342-footer-shell {
    grid-template-columns:1fr auto;
    gap:10px;
    min-height:0;
    padding:12px;
    border-radius:13px 13px 0 0;
  }

  .mk342-footer-center {
    grid-column:1 / -1;
    grid-row:2;
    justify-content:flex-start;
  }

  .mk342-back-top span {
    display:none;
  }

  .mk342-back-top {
    width:34px;
    justify-content:center;
    padding:7px;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.4.3
   Projects Cleanup
   ============================================================ */

/* 1) Projects Summary section was removed from projects.php.
      Tighten the visual rhythm between hero and projects list. */
body.customers .mk33-projects-hero {
  margin-bottom:16px!important;
}

body.customers .mk33-project-list-panel {
  margin-top:0!important;
}

/* 2) Remove legacy blue CTA/icon styling on the Projects workspace. */
body.customers .mk33-hero-link {
  border-color:#f59b23!important;
  color:#17120b!important;
  background:linear-gradient(135deg,#ffb23f,#f59b23)!important;
  box-shadow:0 10px 24px rgba(245,155,35,.20)!important;
}

body.customers .mk33-hero-link i {
  color:#17120b!important;
}

body.customers .mk33-hero-link:hover {
  border-color:#ef8c11!important;
  color:#111!important;
  background:linear-gradient(135deg,#ffc160,#f49a20)!important;
  box-shadow:0 14px 30px rgba(245,155,35,.27)!important;
  transform:translateY(-2px);
}

body.customers .mk33-kpi.is-blue .mk33-kpi-icon,
body.customers .mk33-kpi .mk33-kpi-icon,
body.customers .mk33-section-icon,
body.customers .mk33-project-row-icon {
  color:#a45d00!important;
  background:#fff1d9!important;
}

body.customers .mk33-kpi.is-blue {
  border-color:#efc78d!important;
  background:#fffaf3!important;
}

body.customers .mk33-kpi.is-blue strong,
body.customers .mk33-kpi.is-blue small {
  color:#7d4808!important;
}

body.customers .mk33-project-name-link:hover strong,
body.customers .mk33-project-row:hover .mk33-row-arrow,
body.customers .mk33-date-cell i {
  color:#a45d00!important;
}

/* Keep semantic red/green statuses, but remove blue focus ring from project controls. */
body.customers .mk33-project-list-panel .form-control:focus,
body.customers .mk33-project-list-panel select:focus,
body.customers .mk33-project-list-panel .dataTables_filter input:focus {
  border-color:#efb560!important;
  box-shadow:0 0 0 3px rgba(245,155,35,.11)!important;
}

/* 3) The slim Seen Marketing Client Portal footer should live on Home only. */
body.customers:not(.mk2-client-home) .footer.mk342-footer {
  display:none!important;
}

body.customers:not(.mk2-client-home) #content {
  padding-bottom:16px!important;
}

/* 4) One vertical page scrollbar only.
      Wide tables keep their own HORIZONTAL scrollbar. */
html {
  height:auto!important;
  min-height:100%!important;
  overflow-y:auto!important;
}

body.customers {
  height:auto!important;
  min-height:100vh!important;
  overflow-y:visible!important;
}

body.customers #wrapper,
body.customers #content,
body.customers #content > .container,
body.customers #content > .container-fluid {
  height:auto!important;
  overflow-y:visible!important;
}

/* Do not allow nested main-page containers to become vertical scrollers. */
body.customers .mk33-project-list-panel,
body.customers .mk33-table-shell,
body.customers .dataTables_wrapper {
  max-height:none!important;
  overflow-y:visible!important;
}

/* Horizontal table scrolling remains contained in the table shell. */
body.customers .mk33-table-shell {
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}

/* Tablet/mobile remains fluid after removing summary section. */
@media (max-width:1023px) {
  body.customers .mk33-projects-hero {
    margin-bottom:12px!important;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.5
   ALL PAGES EXPERIENCE
   - workflow section removed from Home
   - one vertical page scrollbar
   - legacy top/bottom floating arrows removed
   - orange/charcoal brand consistency
   - stronger global motion and page polish
   ============================================================ */

:root {
  --mk35-orange:#f59b23;
  --mk35-orange-deep:#dd7c0a;
  --mk35-orange-soft:#fff4e3;
  --mk35-ink:#0d1014;
  --mk35-surface:#ffffff;
  --mk35-bg:#f6f7f9;
  --mk35-border:#e6e7ea;
  --mk35-muted:#747c87;
  --mk35-shadow:0 16px 42px rgba(15,18,23,.065);
  --mk35-shadow-hover:0 23px 58px rgba(15,18,23,.12);
}

/* ---------- Workflow is removed in PHP; this is a cache-safe fallback. ---------- */
body.customers .mk34-workflow {
  display:none!important;
}

/* ---------- Remove Perfex's fixed up/down controls everywhere. ---------- */
body.customers #toplink,
body.customers #botlink {
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* ============================================================
   ONE vertical scrollbar for the PAGE
   ============================================================ */
html {
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:scroll!important;
  scrollbar-gutter:stable;
}

body.customers:not(.modal-open) {
  height:auto!important;
  min-height:100vh!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
}

body.customers.modal-open {
  overflow:hidden!important;
}

body.customers #wrapper,
body.customers #content,
body.customers #content > .container,
body.customers #content > .container-fluid,
body.customers main,
body.customers .customers-content,
body.customers .customer-area {
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:visible!important;
}

/* Components that had their own vertical page-like scrollbars. */
body.customers .fc-view {
  height:auto!important;
  max-height:none!important;
  overflow-y:visible!important;
}

body.customers .tasks-phases .kan-ban-col {
  height:auto!important;
  min-height:416px;
}

body.customers .tasks-phases .kan-ban-col .panel-body {
  height:auto!important;
  min-height:100%;
  max-height:none!important;
  overflow-y:visible!important;
}

/* Preserve useful INTERNAL horizontal scroll only. */
body.customers .tasks-phases,
body.customers .table-responsive,
body.customers .dataTables_wrapper,
body.customers .mk33-table-shell,
body.customers .mk43-table-shell,
body.customers .mk42-ticket-table-wrap,
body.customers .mk33-project-tabs,
body.customers .mk42-gantt-canvas,
body.customers .mk43-calendar-shell .fc-view-container {
  max-width:100%!important;
  overflow-x:auto!important;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}

/* File modal discussion areas may scroll INSIDE a modal only. */
body.customers .project_file_area,
body.customers .project_file_discusssions_area {
  max-height:min(62vh,680px)!important;
}

/* ============================================================
   Global premium canvas
   ============================================================ */
body.customers {
  background:
    radial-gradient(circle at 7% 2%,rgba(245,155,35,.075),transparent 19%),
    radial-gradient(circle at 95% 17%,rgba(245,155,35,.045),transparent 18%),
    linear-gradient(180deg,#f8f9fb 0%,#f4f6f8 100%)!important;
}

body.customers #content {
  position:relative;
  isolation:isolate;
}

body.customers #content::before {
  content:"";
  position:fixed;
  z-index:-1;
  width:420px;
  height:420px;
  right:-210px;
  top:24vh;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(245,155,35,.06),rgba(245,155,35,0) 68%);
  filter:blur(3px);
  transform:translate3d(0,0,0);
}

/* ============================================================
   Generic page headings become premium page headers
   ============================================================ */
body.customers .mk35-page-heading {
  position:relative;
  overflow:hidden;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  min-height:82px;
  margin:0 0 15px!important;
  padding:18px 20px!important;
  border:1px solid #ead8c0!important;
  border-radius:16px!important;
  color:var(--mk35-ink)!important;
  background:
    radial-gradient(circle at 88% 20%,rgba(245,155,35,.14),transparent 25%),
    linear-gradient(120deg,#fff 0%,#fff8ee 70%,#fffdf9 100%)!important;
  box-shadow:var(--mk35-shadow)!important;
}

body.customers .mk35-page-heading::before {
  content:"";
  width:4px;
  align-self:stretch;
  margin-right:12px;
  border-radius:99px;
  background:linear-gradient(180deg,#ffbb54,#f59b23);
  box-shadow:0 0 20px rgba(245,155,35,.20);
}

body.customers .mk35-page-heading,
body.customers .mk35-page-heading * {
  color:var(--mk35-ink);
}

/* ============================================================
   Generic panels / lists / cards
   ============================================================ */
body.customers .panel_s,
body.customers .panel,
body.customers .well,
body.customers .list-group,
body.customers .table-responsive {
  border-color:var(--mk35-border)!important;
}

body.customers .panel_s > .panel-body,
body.customers .panel > .panel-body {
  border-radius:14px!important;
}

body.customers .panel_s,
body.customers .mk35-power-card {
  transition:
    transform .28s cubic-bezier(.2,.75,.2,1),
    box-shadow .28s ease,
    border-color .28s ease,
    background .28s ease;
}

body.customers .mk35-power-card:hover {
  border-color:#efc78d!important;
  box-shadow:var(--mk35-shadow-hover)!important;
}

body.customers .panel-heading {
  border-bottom-color:#ececef!important;
  color:#252a31!important;
  background:linear-gradient(180deg,#fff,#fcfcfd)!important;
}

body.customers .list-group-item {
  border-color:#ebecf0!important;
  background:#fff!important;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}

body.customers .list-group-item:hover {
  transform:translateX(3px);
  border-color:#efc78d!important;
  background:#fffaf3!important;
}

/* ============================================================
   Tables: cleaner, stronger, more app-like
   ============================================================ */
body.customers .table {
  margin-bottom:0;
  color:#44505f;
}

body.customers .table > thead > tr > th {
  padding:12px 12px!important;
  border-bottom:1px solid #e5e7eb!important;
  color:#676f7a!important;
  background:#f8f9fb!important;
  font-size:9px!important;
  font-weight:850!important;
  letter-spacing:.025em;
  text-transform:uppercase;
}

body.customers .table > tbody > tr > td {
  padding:12px!important;
  border-top-color:#eeeff1!important;
  vertical-align:middle!important;
}

body.customers .table > tbody > tr {
  background:#fff;
  transition:
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

body.customers .table > tbody > tr:hover {
  position:relative;
  z-index:1;
  background:#fffaf3!important;
  box-shadow:inset 3px 0 0 #f59b23;
}

body.customers .table > tbody > tr:hover td:first-child {
  color:#8d4e00;
}

/* DataTables controls */
body.customers .dataTables_wrapper .dataTables_filter input,
body.customers .dataTables_wrapper select {
  border-color:#dedfe3!important;
  border-radius:9px!important;
  background:#fff!important;
}

body.customers .dataTables_wrapper .dataTables_filter input:focus,
body.customers .dataTables_wrapper select:focus {
  border-color:#efb560!important;
  box-shadow:0 0 0 3px rgba(245,155,35,.10)!important;
}

/* ============================================================
   No remaining blue action chrome
   ============================================================ */
body.customers .btn-primary,
body.customers .btn-info,
body.customers .bg-info,
body.customers .label-info,
body.customers .badge-info {
  border-color:#f59b23!important;
  color:#16120b!important;
  background:#f59b23!important;
}

body.customers .label-info,
body.customers .badge-info {
  color:#8c4d00!important;
  background:#fff1d9!important;
  border:1px solid #efc78d!important;
}

body.customers .text-info {
  color:#a45d00!important;
}

body.customers .progress-bar-info {
  background:linear-gradient(90deg,#ffb23f,#f59b23)!important;
}

/* Links and core icon accents */
body.customers .dropzone .dz-message,
body.customers .fa-info-circle,
body.customers .fa-circle-info {
  color:#a45d00!important;
}

/* ============================================================
   Forms
   ============================================================ */
body.customers .form-control,
body.customers .bootstrap-select > .dropdown-toggle,
body.customers .select2-container .select2-selection {
  border-color:#dfe2e6!important;
  border-radius:9px!important;
  background:#fff!important;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

body.customers .form-control:hover,
body.customers .bootstrap-select > .dropdown-toggle:hover {
  border-color:#d5c2a7!important;
}

body.customers .form-control:focus,
body.customers .bootstrap-select.open > .dropdown-toggle,
body.customers .select2-container--focus .select2-selection {
  border-color:#efb560!important;
  box-shadow:0 0 0 3px rgba(245,155,35,.105)!important;
}

/* Dropzones */
body.customers form.dropzone {
  border:1px dashed #e0b778!important;
  border-radius:13px!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(245,155,35,.06),transparent 34%),
    #fffdf9!important;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}

body.customers form.dropzone:hover {
  transform:translateY(-2px);
  border-color:#f59b23!important;
  background:#fff8ef!important;
}

/* ============================================================
   Tabs
   ============================================================ */
body.customers .nav-tabs {
  border-bottom-color:#e6e7ea!important;
}

body.customers .nav-tabs > li > a {
  position:relative;
  color:#6d7480!important;
  transition:color .18s ease,background .18s ease;
}

body.customers .nav-tabs > li > a:hover {
  color:#8d4e00!important;
  background:#fff8ee!important;
}

body.customers .nav-tabs > li.active > a,
body.customers .nav-tabs > li.active > a:hover {
  color:#8d4e00!important;
  border-color:#efc78d #efc78d #fff!important;
  background:#fff!important;
}

/* ============================================================
   Knowledge Base — give untouched legacy pages the same weight
   ============================================================ */
body.customers .kb-search-jumbotron {
  overflow:hidden;
  margin-top:0!important;
  padding:28px!important;
  border:1px solid #ead8c0;
  border-radius:18px;
  background:
    radial-gradient(circle at 84% 15%,rgba(245,155,35,.17),transparent 22%),
    linear-gradient(125deg,#fff,#fff8ee)!important;
  box-shadow:var(--mk35-shadow);
}

body.customers .kb-search-jumbotron h2,
body.customers .kb-search-jumbotron h3 {
  color:#111318!important;
  font-weight:900!important;
}

body.customers .kb-search input[type=search] {
  border-radius:11px 0 0 11px!important;
}

body.customers .kb-search button[type=submit] {
  border-radius:0 11px 11px 0!important;
  border-color:#f59b23!important;
  color:#17120b!important;
  background:#f59b23!important;
}

/* ============================================================
   Activity / timeline
   ============================================================ */
body.customers .activity-feed .feed-item {
  border-left-color:#efc078!important;
}

body.customers .activity-feed .feed-item::after {
  border-color:#f59b23!important;
  box-shadow:0 0 0 5px #fff4e3;
}

/* ============================================================
   Modals — premium pop, but keep business logic native
   ============================================================ */
body.customers .modal-content {
  overflow:hidden;
  border:1px solid #e4e5e8!important;
  border-radius:16px!important;
  box-shadow:0 30px 90px rgba(10,12,15,.22)!important;
}

body.customers .modal-header {
  border-bottom-color:#ececee!important;
  background:
    radial-gradient(circle at 90% 10%,rgba(245,155,35,.10),transparent 24%),
    #fff!important;
}

body.customers .modal-footer {
  border-top-color:#ececee!important;
  background:#fafafa!important;
}

/* ============================================================
   GLOBAL MOTION — every page
   ============================================================ */
body.customers .mk35-reveal {
  opacity:0;
  transform:translateY(16px) scale(.994);
  transition:
    opacity .58s cubic-bezier(.2,.75,.2,1),
    transform .58s cubic-bezier(.2,.75,.2,1);
}

body.customers .mk35-reveal.mk35-visible {
  opacity:1;
  transform:none;
}

body.customers .mk35-row-enter {
  opacity:0;
  transform:translateX(-8px);
  animation:mk35-row-in .42s cubic-bezier(.2,.75,.2,1) forwards;
}

@keyframes mk35-row-in {
  to { opacity:1; transform:none; }
}

/* Premium card light that follows the mouse on desktop */
body.customers .mk35-glow-card {
  position:relative;
  overflow:hidden;
}

body.customers .mk35-glow-card::after {
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:
    radial-gradient(
      280px circle at var(--mk35-x,50%) var(--mk35-y,50%),
      rgba(245,155,35,.13),
      transparent 62%
    );
  transition:opacity .18s ease;
}

body.customers .mk35-glow-card:hover::after {
  opacity:1;
}

/* click ripple */
.mk35-ripple {
  position:absolute;
  z-index:20;
  width:14px;
  height:14px;
  pointer-events:none;
  border-radius:50%;
  background:rgba(255,255,255,.58);
  transform:translate(-50%,-50%) scale(0);
  animation:mk35-ripple .58s ease-out forwards;
}

@keyframes mk35-ripple {
  to {
    opacity:0;
    transform:translate(-50%,-50%) scale(16);
  }
}

/* Stronger orange route progress */
#mk4-route-progress,
.mk33-scroll-progress {
  background:linear-gradient(90deg,#dd7c0a,#f59b23 55%,#ffc15f)!important;
  box-shadow:0 0 15px rgba(245,155,35,.38)!important;
}

/* Page-ready micro entrance */
body.customers.mk35-page-ready #content {
  animation:mk35-page-in .44s cubic-bezier(.2,.75,.2,1) both;
}

@keyframes mk35-page-in {
  from { opacity:.15; transform:translateY(5px); }
  to { opacity:1; transform:none; }
}

/* Empty states feel intentional */
body.customers .mk35-empty-pulse {
  animation:mk35-empty 3.2s ease-in-out infinite;
}

@keyframes mk35-empty {
  0%,100% { transform:translateY(0); opacity:.78; }
  50% { transform:translateY(-3px); opacity:1; }
}

/* ============================================================
   Responsive motion/performance
   ============================================================ */
@media (hover:none), (pointer:coarse) {
  body.customers .mk35-glow-card::after {
    display:none!important;
  }

  body.customers .mk35-power-card:hover,
  body.customers .list-group-item:hover {
    transform:none!important;
  }
}

@media (max-width:767px) {
  body.customers .mk35-page-heading {
    min-height:0;
    padding:14px!important;
    border-radius:13px!important;
  }

  body.customers .kb-search-jumbotron {
    padding:18px!important;
  }

  body.customers .table > thead > tr > th,
  body.customers .table > tbody > tr > td {
    padding:10px!important;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.customers .mk35-reveal {
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  body.customers .mk35-row-enter,
  body.customers.mk35-page-ready #content,
  body.customers .mk35-empty-pulse {
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }

  .mk35-ripple {
    display:none!important;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.6
   GLOBAL STABILIZATION + PROJECT WORKSPACE POLISH
   Runtime fixes from 2026-10-04 review:
   - one vertical page scrollbar
   - no project tab/content overlap
   - compact project heroes
   - milestone boards use content height
   - all internal project screens get consistent rhythm + motion
   ============================================================ */

/* ------------------------------------------------------------
   A. ONE vertical document scrollbar
   ------------------------------------------------------------ */

/* Do not force a permanent second root track. */
html {
  height:auto!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-gutter:auto!important;
}

body.customers:not(.modal-open) {
  position:relative!important;
  height:auto!important;
  min-height:100vh!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
}

/* Main structural wrappers are never page-like scroll containers. */
body.customers #wrapper,
body.customers #content,
body.customers #content > .container,
body.customers #content > .container-fluid,
body.customers #content > .container > .row,
body.customers .mk33-project-workspace,
body.customers .mk33-project-workspace > .panel-body,
body.customers .mk33-project-tab-stage {
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:visible!important;
}

/* Runtime scanner adds this class to accidental large nested vertical scrollers. */
body.customers .mk36-no-nested-y {
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:visible!important;
}

/* Known Perfex nested vertical scrollers: let the PAGE do the vertical work. */
body.customers .fc-view,
body.customers .projects-activity .activity-feed,
body.customers .home-activity .tab-content,
body.customers .kan-ban-content-wrapper,
body.customers .tasks-phases .kan-ban-col,
body.customers .tasks-phases .kan-ban-col > .panel,
body.customers .tasks-phases .kan-ban-col .panel-body {
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:visible!important;
}

/* The project file modal is intentionally allowed its own vertical viewport. */
body.customers .modal .project_file_area,
body.customers .modal .project_file_discusssions_area {
  overflow-y:auto!important;
  max-height:min(62vh,680px)!important;
}

/* Horizontal movement stays INSIDE wide data components only. */
body.customers .table-responsive,
body.customers .mk33-table-shell,
body.customers .mk43-table-shell,
body.customers .mk42-ticket-table-wrap,
body.customers .mk42-gantt-canvas,
body.customers .tasks-phases {
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}

/* DataTables itself must not become another scroll pane. */
body.customers .dataTables_wrapper {
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}

/* ------------------------------------------------------------
   B. PROJECT NAVIGATION: normal document flow, never overlays content
   ------------------------------------------------------------ */

body.customers .mk33-project-tabs-shell {
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  z-index:5!important;
  clear:both;
  width:100%!important;
  max-width:100%!important;
  margin:0 0 16px!important;
  padding:0!important;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#f7f8fa!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:0 7px 22px rgba(15,18,23,.045);
}

body.customers .mk4-scrolled ~ #wrapper .mk33-project-tabs-shell {
  top:auto!important;
}

/* Remove floating tab arrow overlays; the rail itself scrolls horizontally. */
body.customers .mk33-project-tabs-shell .scroller {
  display:none!important;
}

body.customers .mk33-project-tabs-shell .horizontal-tabs {
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:thin;
  scrollbar-color:#d0b487 transparent;
}

body.customers .mk33-project-tabs {
  display:flex!important;
  flex-wrap:nowrap!important;
  width:max-content!important;
  min-width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:6px!important;
  gap:3px!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
}

body.customers .mk33-project-tabs > li {
  flex:0 0 auto!important;
}

body.customers .mk33-project-tabs > li > a {
  min-height:40px!important;
  margin:0!important;
  padding:9px 11px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  color:#5f6874!important;
  background:transparent!important;
  font-size:9px!important;
  font-weight:820!important;
  white-space:nowrap;
  transition:
    transform .18s ease,
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

body.customers .mk33-project-tabs > li > a:hover {
  transform:translateY(-1px);
  color:#8d4e00!important;
  border-color:#efd3aa!important;
  background:#fff8ef!important;
}

body.customers .mk33-project-tabs > li.active > a,
body.customers .mk33-project-tabs > li.active > a:hover {
  color:#8b4c00!important;
  border-color:#efc78d!important;
  background:#fff!important;
  box-shadow:0 5px 15px rgba(245,155,35,.10)!important;
}

body.customers .mk33-project-tabs > li.active > a .menu-icon,
body.customers .mk33-project-tabs > li > a:hover .menu-icon {
  color:#f59b23!important;
}

body.customers .mk33-project-tab-stage {
  position:relative!important;
  z-index:1;
  clear:both;
  display:flow-root;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
}

body.customers .mk33-project-tab-stage > *:first-child {
  margin-top:0!important;
}

/* ------------------------------------------------------------
   C. PROJECT OVERVIEW: cards cannot slide under the tab rail
   ------------------------------------------------------------ */

body.customers .mk33-overview-grid {
  align-items:stretch!important;
  gap:14px!important;
  margin-top:0!important;
}

body.customers .mk33-overview-card,
body.customers .mk33-finance-card,
body.customers .mk33-description-card {
  position:relative;
  z-index:1;
  min-width:0;
  border-color:#e5e7ea!important;
  box-shadow:0 10px 28px rgba(15,18,23,.045)!important;
}

body.customers .mk33-overview-card:hover,
body.customers .mk33-finance-card:hover,
body.customers .mk33-description-card:hover {
  border-color:#efcf9f!important;
  box-shadow:0 18px 40px rgba(15,18,23,.075)!important;
}

/* In Progress becomes Markito orange instead of inherited blue. */
body.customers .project-status-2 {
  color:#9a5600!important;
  border-color:#efc78d!important;
  background:#fff4e3!important;
}

/* ------------------------------------------------------------
   D. TASKS: compact workspace rather than a huge blank hero
   ------------------------------------------------------------ */

body.customers .mk4-task-board-hero {
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:start!important;
  gap:16px!important;
  min-height:0!important;
  margin:0 0 14px!important;
  padding:20px!important;
  border-color:#ead8c0!important;
  background:
    radial-gradient(circle at 84% 12%,rgba(245,155,35,.12),transparent 23%),
    linear-gradient(118deg,#fff,#fff8ef 72%,#fffdf9)!important;
}

body.customers .mk4-task-board-copy {
  max-width:760px;
}

body.customers .mk4-task-board-copy h2 {
  color:#111318!important;
  font-size:clamp(24px,2.5vw,34px)!important;
}

body.customers .mk4-task-board-copy p {
  color:#747c87!important;
  font-size:11px!important;
}

body.customers .mk4-task-stats {
  display:grid!important;
  width:100%!important;
  min-width:0!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:9px!important;
}

body.customers .mk4-task-stat {
  min-width:0!important;
  min-height:68px!important;
  padding:11px!important;
  border-color:#e8e3db!important;
  background:rgba(255,255,255,.94)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

body.customers .mk4-task-stat:hover {
  transform:translateY(-3px);
  border-color:#efc78d!important;
  box-shadow:0 12px 27px rgba(245,155,35,.095)!important;
}

body.customers .mk4-task-stat.is-blue .mk4-task-stat-icon {
  color:#a45d00!important;
  background:#fff1d9!important;
}

/* ------------------------------------------------------------
   E. MILESTONES / KANBAN: content-height cards, no giant empty columns
   ------------------------------------------------------------ */

body.customers .mk4-task-phases {
  padding:2px 1px 8px!important;
}

body.customers .mk4-task-phases .kan-ban-row {
  display:flex!important;
  align-items:flex-start!important;
  width:100%!important;
  gap:12px!important;
}

body.customers .mk4-task-phases .kan-ban-col,
body.customers .mk4-task-phases .mk4-milestone-column {
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}

body.customers .mk4-task-phases .mk4-milestone-column {
  overflow:hidden!important;
  border-color:#e5e7ea!important;
  background:#fff!important;
  box-shadow:0 10px 26px rgba(15,18,23,.045)!important;
}

body.customers .mk4-task-phases .mk4-milestone-column > .panel-body {
  height:auto!important;
  min-height:130px!important;
  max-height:none!important;
  overflow-y:visible!important;
  background:#fbfbfc!important;
}

body.customers .mk4-kanban-task {
  border-color:#e6e7ea!important;
  box-shadow:0 5px 14px rgba(15,18,23,.035)!important;
}

body.customers .mk4-kanban-task:hover {
  border-color:#efc78d!important;
  box-shadow:0 11px 25px rgba(245,155,35,.09)!important;
}

body.customers .mk4-kanban-task:after {
  background:linear-gradient(180deg,#ffb23f,#f59b23)!important;
}

/* Native/default progress bars in the client project workspace use brand orange.
   Semantic success/danger/warning bars keep their semantic colors. */
body.customers .mk33-project-workspace .progress-bar:not(.progress-bar-success):not(.progress-bar-danger):not(.progress-bar-warning),
body.customers .mk4-task-phases .progress-bar:not(.progress-bar-success):not(.progress-bar-danger):not(.progress-bar-warning) {
  background:#f59b23!important;
  background-image:linear-gradient(90deg,#ffb23f,#f59b23)!important;
}

/* ------------------------------------------------------------
   F. FILES / DISCUSSIONS / GANTT / TICKETS: consistent top spacing
   ------------------------------------------------------------ */

body.customers .mk42-feature-hero,
body.customers .mk42-page-hero,
body.customers .mk42-ticket-detail-hero,
body.customers .mk43-finance-hero {
  position:relative;
  z-index:1;
  margin-top:0!important;
}

body.customers .mk42-feature-hero {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  min-height:0!important;
  padding:18px 20px!important;
}

body.customers .mk42-feature-stats {
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}

body.customers .mk42-feature-stat.is-purple .mk42-feature-stat-icon {
  color:#a45d00!important;
  background:#fff1d9!important;
}

/* Project content cards all use the same spacing rhythm. */
body.customers .mk42-upload-shell,
body.customers .mk42-ticket-status-shell,
body.customers .mk42-table-card,
body.customers .mk42-gantt-shell,
body.customers .mk42-discussion-body,
body.customers .mk33-finance-card,
body.customers .mk33-description-card {
  clear:both;
  margin-top:0!important;
  margin-bottom:14px!important;
}

/* ------------------------------------------------------------
   G. ALL CUSTOMER PAGES: separation / no collisions
   ------------------------------------------------------------ */

body.customers #content .container > .row {
  min-width:0!important;
}

body.customers #content section,
body.customers #content .panel_s,
body.customers #content .panel,
body.customers #content .table-responsive {
  min-width:0;
}

body.customers #content .panel_s + .panel_s,
body.customers #content section + section {
  margin-top:14px;
}

/* Prevent long labels/buttons from physically colliding with siblings. */
body.customers .btn,
body.customers .label,
body.customers .badge,
body.customers .nav-tabs > li > a {
  max-width:100%;
}

body.customers .btn,
body.customers .nav-tabs > li > a {
  text-overflow:ellipsis;
}

/* ------------------------------------------------------------
   H. STRONGER, BUT CONTROLLED, ANIMATION ON PROJECT SUBPAGES
   ------------------------------------------------------------ */

body.customers .mk33-project-tab-stage > * {
  animation:mk36-stage-in .48s cubic-bezier(.2,.78,.2,1) both;
}

body.customers .mk36-stagger-item {
  opacity:0;
  transform:translateY(10px);
  animation:mk36-stagger-in .46s cubic-bezier(.2,.78,.2,1) forwards;
  animation-delay:var(--mk36-delay,0ms);
}

@keyframes mk36-stage-in {
  from { opacity:.2; transform:translateY(8px); }
  to { opacity:1; transform:none; }
}

@keyframes mk36-stagger-in {
  to { opacity:1; transform:none; }
}

/* ------------------------------------------------------------
   I. RESPONSIVE STABILIZATION
   ------------------------------------------------------------ */

@media (max-width:1023px) {
  body.customers .mk33-project-tabs-shell {
    margin-bottom:12px!important;
  }

  body.customers .mk33-project-tabs {
    min-width:max-content!important;
  }

  body.customers .mk4-task-stats {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.customers .mk42-feature-hero {
    grid-template-columns:1fr!important;
    align-items:stretch!important;
  }

  body.customers .mk42-feature-stats {
    justify-content:flex-start!important;
  }
}

@media (max-width:560px) {
  body.customers .mk4-task-stats {
    grid-template-columns:1fr!important;
  }

  body.customers .mk42-feature-stats {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.customers .mk42-feature-stat {
    min-width:0!important;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.customers .mk33-project-tab-stage > *,
  body.customers .mk36-stagger-item {
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.6.1
   Scroll + Header Utilities + Tasks Cleanup
   ============================================================ */

/* ------------------------------------------------------------
   1) ABSOLUTELY ONE VERTICAL SCROLLBAR
   Use BODY as the only vertical scroll owner.
   ------------------------------------------------------------ */
html {
  width:100%!important;
  height:100%!important;
  max-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
}

body.customers {
  position:relative!important;
  width:100%!important;
  height:100vh!important;
  min-height:100vh!important;
  max-height:100vh!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:auto!important;
}

/* Modal lock must still work. */
body.customers.modal-open {
  overflow:hidden!important;
}

/* Nothing else may own a full-page vertical scrollbar. */
body.customers #wrapper,
body.customers #content,
body.customers #content > .container,
body.customers #content > .container-fluid,
body.customers .mk33-project-workspace,
body.customers .mk33-project-workspace > .panel-body,
body.customers .mk33-project-tab-stage,
body.customers .panel_s,
body.customers .panel,
body.customers .table-responsive,
body.customers .dataTables_wrapper,
body.customers .tasks-phases,
body.customers .kan-ban-content-wrapper,
body.customers .tasks-phases .kan-ban-col,
body.customers .tasks-phases .kan-ban-col > .panel,
body.customers .tasks-phases .kan-ban-col .panel-body,
body.customers .fc-view {
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:visible!important;
}

/* Explicit internal exceptions */
body.customers .dropdown-menu,
body.customers .bootstrap-select .dropdown-menu,
body.customers .select2-results,
body.customers .modal .project_file_area,
body.customers .modal .project_file_discusssions_area {
  overflow-y:auto!important;
}

body.customers .modal .project_file_area,
body.customers .modal .project_file_discusssions_area {
  max-height:min(62vh,680px)!important;
}

/* ------------------------------------------------------------
   2) FILES / CALENDAR HEADER UTILITIES — NO BLUE
   ------------------------------------------------------------ */
body.customers > .navbar.header .mk43-action-item > a {
  color:#4f5966!important;
  border-color:transparent!important;
  background:transparent!important;
}

body.customers > .navbar.header .mk43-action-item > a i {
  color:#8e5a17!important;
}

body.customers > .navbar.header .mk43-action-item > a:hover,
body.customers > .navbar.header .mk43-action-item.active > a {
  color:#8c4d00!important;
  border-color:#efc78d!important;
  background:#fff6e8!important;
  box-shadow:0 7px 18px rgba(245,155,35,.08)!important;
}

body.customers > .navbar.header .mk43-action-item > a:hover i,
body.customers > .navbar.header .mk43-action-item.active > a i {
  color:#f59b23!important;
}

/* utility icon container feel */
body.customers > .navbar.header .mk43-action-item > a i {
  display:inline-grid;
  place-items:center;
  width:16px;
  height:16px;
  font-size:12px!important;
}

/* ------------------------------------------------------------
   3) TASKS / MILESTONE BOARD CLEANUP
   ------------------------------------------------------------ */

/* Milestone cards */
body.customers .mk4-task-phases .mk4-milestone-column,
body.customers .tasks-phases .kan-ban-col > .panel {
  overflow:hidden!important;
  border:1px solid #e4e6ea!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(15,18,23,.045)!important;
}

body.customers .mk4-task-phases .mk4-milestone-column > .panel-heading,
body.customers .tasks-phases .kan-ban-col > .panel > .panel-heading {
  padding:14px 15px!important;
  border-bottom:1px solid #e9eaed!important;
  color:#17213a!important;
  background:linear-gradient(180deg,#fff,#fcfcfd)!important;
}

/* Task cards: neutral by default, semantic accent only */
body.customers .mk4-kanban-task,
body.customers .tasks-phases .task {
  position:relative;
  overflow:hidden;
  margin:10px 0!important;
  padding:12px 13px!important;
  border:1px solid #e4e6ea!important;
  border-left:4px solid #f59b23!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:0 4px 12px rgba(15,18,23,.035)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

body.customers .mk4-kanban-task:hover,
body.customers .tasks-phases .task:hover {
  transform:translateY(-2px);
  border-color:#efc78d!important;
  border-left-color:#f59b23!important;
  box-shadow:0 12px 26px rgba(245,155,35,.09)!important;
}

/* Remove giant red/pink task background inherited from legacy status style */
body.customers .tasks-phases .task.bg-danger,
body.customers .tasks-phases .task.task-overdue,
body.customers .mk4-kanban-task.bg-danger,
body.customers .mk4-kanban-task.task-overdue {
  border-color:#f1c5cb!important;
  border-left-color:#e74b65!important;
  background:#fff7f8!important;
}

body.customers .tasks-phases .task:not(.bg-danger):not(.task-overdue),
body.customers .mk4-kanban-task:not(.bg-danger):not(.task-overdue) {
  background:#fff!important;
}

/* Task typography */
body.customers .tasks-phases .task a,
body.customers .mk4-kanban-task a {
  color:#16315f!important;
  font-weight:850!important;
}

body.customers .tasks-phases .task a:hover,
body.customers .mk4-kanban-task a:hover {
  color:#9a5600!important;
}

body.customers .tasks-phases .task .text-muted,
body.customers .mk4-kanban-task .text-muted {
  color:#7e8997!important;
}

/* Milestone progress at the bottom — clean, compact and orange */
body.customers .tasks-phases .progress,
body.customers .mk4-task-phases .progress {
  overflow:hidden!important;
  height:7px!important;
  min-height:7px!important;
  margin:10px 0 2px!important;
  border:0!important;
  border-radius:999px!important;
  background:#edf0f3!important;
  box-shadow:none!important;
}

body.customers .tasks-phases .progress .progress-bar,
body.customers .mk4-task-phases .progress .progress-bar {
  min-width:0!important;
  height:100%!important;
  border-radius:999px!important;
  color:transparent!important;
  background:linear-gradient(90deg,#ffb23f,#f59b23)!important;
  box-shadow:none!important;
  transition:width .55s cubic-bezier(.2,.75,.2,1);
}

/* Hide text that was being clipped inside the tiny progress bar */
body.customers .tasks-phases .progress .progress-bar > *,
body.customers .mk4-task-phases .progress .progress-bar > * {
  display:none!important;
}

/* Keep columns at content height */
body.customers .tasks-phases .kan-ban-col,
body.customers .mk4-task-phases .mk4-milestone-column {
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}

body.customers .tasks-phases .kan-ban-col .panel-body,
body.customers .mk4-task-phases .mk4-milestone-column > .panel-body {
  height:auto!important;
  min-height:90px!important;
  max-height:none!important;
  overflow-y:visible!important;
  padding:12px!important;
}

/* "No tasks found" becomes intentional */
body.customers .tasks-phases .kan-ban-col .panel-body:has(> p:only-child),
body.customers .mk4-task-phases .mk4-milestone-column > .panel-body:has(> p:only-child) {
  display:flex;
  align-items:center;
  min-height:120px!important;
  color:#8a929d!important;
  background:#fbfbfc!important;
}

/* ------------------------------------------------------------
   4) PROJECT HERO / TABS spacing
   ------------------------------------------------------------ */
body.customers .mk33-project-tabs-shell + .mk33-project-tab-stage,
body.customers .mk33-project-tab-stage {
  padding-top:0!important;
}

body.customers .mk33-project-tab-stage > .mk4-task-board-hero,
body.customers .mk33-project-tab-stage > .mk42-feature-hero,
body.customers .mk33-project-tab-stage > .mk42-page-hero {
  margin-top:0!important;
}

/* ------------------------------------------------------------
   5) Small polish for header utility icons on mobile/tablet
   ------------------------------------------------------------ */
@media (max-width:1023px) {
  body.customers > .navbar.header .mk43-action-item > a {
    color:#5a6571!important;
  }

  body.customers > .navbar.header .mk43-action-item > a i {
    color:#a45d00!important;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.customers .tasks-phases .progress .progress-bar,
  body.customers .mk4-task-phases .progress .progress-bar {
    transition:none!important;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.6.2
   TASK CONTENT VISIBILITY HOTFIX
   This patch fixes clipping/hidden task content only.
   ============================================================ */

/* The task/milestone board must never clip content vertically. */
body.customers .tasks-phases,
body.customers .mk4-task-phases,
body.customers .tasks-phases .kan-ban-row,
body.customers .mk4-task-phases .kan-ban-row,
body.customers .tasks-phases .kan-ban-col,
body.customers .mk4-task-phases .mk4-milestone-column,
body.customers .tasks-phases .kan-ban-col > .panel {
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:visible!important;
}

/* Important: previous styling used overflow:hidden on the whole milestone card,
   which could visually cut content/footer near the bottom. */
body.customers .mk4-task-phases .mk4-milestone-column,
body.customers .tasks-phases .kan-ban-col > .panel {
  overflow:visible!important;
}

/* Keep the rounded-card look without using overflow:hidden on the whole card. */
body.customers .mk4-task-phases .mk4-milestone-column > .panel-heading,
body.customers .tasks-phases .kan-ban-col > .panel > .panel-heading {
  border-radius:13px 13px 0 0!important;
}

body.customers .mk4-task-phases .mk4-milestone-column > .panel-footer,
body.customers .tasks-phases .kan-ban-col > .panel > .panel-footer {
  position:relative!important;
  inset:auto!important;
  z-index:2!important;
  display:block!important;
  clear:both!important;
  width:100%!important;
  height:auto!important;
  min-height:50px!important;
  margin:0!important;
  padding:10px 12px!important;
  overflow:visible!important;
  border-radius:0 0 13px 13px!important;
  background:#fff!important;
}

/* Panel body always grows with all tasks; nothing sits "under" the footer. */
body.customers .tasks-phases .kan-ban-col .panel-body,
body.customers .mk4-task-phases .mk4-milestone-column > .panel-body {
  position:relative!important;
  display:block!important;
  height:auto!important;
  min-height:90px!important;
  max-height:none!important;
  padding:12px!important;
  overflow:visible!important;
  contain:none!important;
}

/* Bootstrap media-body uses overflow:hidden by default.
   Undo it inside task cards so labels/dates are never cut. */
body.customers .mk4-kanban-task .media-body,
body.customers .tasks-phases ._task_wrapper .media-body {
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

/* Task cards themselves must expand to all visible data. */
body.customers .mk4-kanban-task,
body.customers .tasks-phases ._task_wrapper {
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

/* Full task name: no ellipsis / hidden second line. */
body.customers .mk4-kanban-task .task_milestone,
body.customers .tasks-phases .task_milestone {
  display:block!important;
  float:none!important;
  width:calc(100% - 28px)!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  word-break:break-word;
  line-height:1.35!important;
}

/* Editing action remains visible at the top-right without consuming task text. */
body.customers .mk4-kanban-task .media-body > a.pull-right,
body.customers .tasks-phases ._task_wrapper .media-body > a.pull-right {
  position:absolute!important;
  top:10px!important;
  right:10px!important;
  z-index:4;
}

/* Task metadata is allowed to wrap and display fully. */
body.customers .mk4-kanban-task p,
body.customers .tasks-phases ._task_wrapper p {
  display:block!important;
  height:auto!important;
  max-height:none!important;
  margin:4px 0 0!important;
  overflow:visible!important;
  white-space:normal!important;
  line-height:1.45!important;
}

/* Milestone footer: show progress text above the bar instead of letting it hide below. */
body.customers .mk362-milestone-footer {
  display:block!important;
}

body.customers .mk362-milestone-progress-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 7px;
  color:#7a8492;
  font-size:8px;
  font-weight:750;
}

body.customers .mk362-milestone-progress-label strong {
  color:#8d4e00;
  font-size:9px;
  font-weight:900;
}

body.customers .mk362-milestone-footer .progress {
  display:block!important;
  width:100%!important;
  height:7px!important;
  min-height:7px!important;
  margin:0!important;
  overflow:hidden!important;
}

/* Protect against old fixed heights injected by plugins/scripts. */
body.customers .tasks-phases [style*="height"],
body.customers .mk4-task-phases [style*="height"] {
  max-height:none;
}

/* The board may scroll HORIZONTALLY when it has many milestones,
   but it must never clip vertically. */
body.customers .tasks-phases,
body.customers .mk4-task-phases {
  overflow-x:auto!important;
  overflow-y:visible!important;
  padding-bottom:14px!important;
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.6.3
   NATURAL PAGE SCROLL + PROJECTS NO-SCROLL TABLE + SMOOTHNESS
   ============================================================ */

/* Normal browser document scrolling — same model as the clean Home page. */
html {
  width:100%!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
}

body.customers {
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:100vh!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
}

body.customers.modal-open {
  overflow:hidden!important;
}

body.customers #wrapper,
body.customers #content,
body.customers #content > .container,
body.customers #content > .container-fluid,
body.customers .mk33-project-workspace,
body.customers .mk33-project-tab-stage,
body.customers .mk36-no-nested-y {
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:visible!important;
}

body.customers {
  scroll-padding-top:92px;
}

/* Projects list: no internal vertical/horizontal scrollbar on desktop/laptop. */
body.customers .mk33-project-list-panel,
body.customers .mk33-project-list-panel > .panel-body,
body.customers .mk33-table-shell,
body.customers .mk33-project-list-panel .dataTables_wrapper,
body.customers .mk33-project-list-panel .dataTables_scroll,
body.customers .mk33-project-list-panel .dataTables_scrollHead,
body.customers .mk33-project-list-panel .dataTables_scrollBody {
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

body.customers .mk33-project-list-panel .table-projects {
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  table-layout:fixed!important;
}

body.customers .mk33-project-list-panel .table-projects th,
body.customers .mk33-project-list-panel .table-projects td {
  min-width:0!important;
  overflow-wrap:anywhere;
}

body.customers .mk33-project-list-panel .table-projects .th-project-name,
body.customers .mk33-project-list-panel .table-projects td:first-child {
  width:40%!important;
}

body.customers .mk33-project-list-panel .table-projects .th-project-start-date,
body.customers .mk33-project-list-panel .table-projects .mk363-project-start {
  width:17%!important;
}

body.customers .mk33-project-list-panel .table-projects .th-project-deadline,
body.customers .mk33-project-list-panel .table-projects .mk363-project-deadline {
  width:14%!important;
}

body.customers .mk33-project-list-panel .table-projects .th-project-billing-type,
body.customers .mk33-project-list-panel .table-projects .mk363-project-billing {
  width:15%!important;
}

body.customers .mk33-project-list-panel .table-projects .mk363-project-status {
  width:14%!important;
}

body.customers .mk33-project-name-link {
  min-width:0!important;
  max-width:100%!important;
}

body.customers .mk33-project-name-link strong {
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.customers .mk33-project-list-panel .dataTables_wrapper .row {
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Tablet: remove lower-priority columns before overflow is possible. */
@media (min-width:768px) and (max-width:1050px) {
  body.customers .mk33-project-list-panel .table-projects .th-project-billing-type,
  body.customers .mk33-project-list-panel .table-projects .mk363-project-billing,
  body.customers .mk33-project-list-panel .table-projects .mk363-project-custom {
    display:none!important;
  }

  body.customers .mk33-project-list-panel .table-projects .th-project-name,
  body.customers .mk33-project-list-panel .table-projects td:first-child {
    width:48%!important;
  }

  body.customers .mk33-project-list-panel .table-projects .th-project-start-date,
  body.customers .mk33-project-list-panel .table-projects .mk363-project-start {
    width:20%!important;
  }

  body.customers .mk33-project-list-panel .table-projects .th-project-deadline,
  body.customers .mk33-project-list-panel .table-projects .mk363-project-deadline {
    width:17%!important;
  }

  body.customers .mk33-project-list-panel .table-projects .mk363-project-status {
    width:15%!important;
  }
}

/* Mobile: project rows become cards instead of a horizontal-scrolling table. */
@media (max-width:767px) {
  body.customers .mk33-project-list-panel .mk33-table-shell {
    overflow:visible!important;
  }

  body.customers .mk33-project-list-panel .table-projects,
  body.customers .mk33-project-list-panel .table-projects tbody,
  body.customers .mk33-project-list-panel .table-projects tr,
  body.customers .mk33-project-list-panel .table-projects td {
    display:block!important;
    width:100%!important;
  }

  body.customers .mk33-project-list-panel .table-projects thead {
    display:none!important;
  }

  body.customers .mk33-project-list-panel .table-projects tr {
    margin:0 0 10px!important;
    padding:12px!important;
    border:1px solid #e6e7ea!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 7px 20px rgba(15,18,23,.04);
  }

  body.customers .mk33-project-list-panel .table-projects td {
    min-height:0!important;
    padding:7px 0!important;
    border:0!important;
  }

  body.customers .mk33-project-list-panel .table-projects .mk363-project-billing,
  body.customers .mk33-project-list-panel .table-projects .mk363-project-custom {
    display:none!important;
  }

  body.customers .mk33-project-name-link strong {
    white-space:normal!important;
    text-overflow:clip!important;
    overflow:visible!important;
  }
}

/* Smooth visuals without hijacking mouse wheel/touch scrolling. */
body.customers .panel_s,
body.customers .mk33-projects-hero,
body.customers .mk33-project-list-panel,
body.customers .mk33-project-tabs-shell,
body.customers .mk4-task-board-hero,
body.customers .mk42-feature-hero,
body.customers .mk42-page-hero,
body.customers .mk43-finance-hero,
body.customers .mk43-account-hero,
body.customers .mk43-calendar-hero {
  transform:translateZ(0);
  backface-visibility:hidden;
}

body.customers a,
body.customers button,
body.customers .btn,
body.customers .panel_s,
body.customers .mk33-kpi,
body.customers .mk42-file-card,
body.customers .mk42-discussion-card,
body.customers .mk43-finance-stat {
  transition-timing-function:cubic-bezier(.2,.72,.2,1)!important;
}

/* Slim, quiet document scrollbar. */
html {
  scrollbar-width:thin;
  scrollbar-color:#c8cbd0 transparent;
}

html::-webkit-scrollbar {
  width:10px;
}

html::-webkit-scrollbar-track {
  background:transparent;
}

html::-webkit-scrollbar-thumb {
  border:3px solid transparent;
  border-radius:999px;
  background:#c7c9ce;
  background-clip:padding-box;
}

html::-webkit-scrollbar-thumb:hover {
  background:#a9adb4;
  background-clip:padding-box;
}

/* Footer stays after Home content; nowhere else. */
body.mk2-client-home .footer.mk342-footer {
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  height:auto!important;
  transform:none!important;
}

body.customers:not(.mk2-client-home) .footer.mk342-footer {
  display:none!important;
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto!important;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.6.4
   GLOBAL INTERNAL-SCROLL CLEANUP + DISCUSSION MODAL FIX
   ============================================================ */

/* ------------------------------------------------------------
   1) All major customer-workspace containers use natural page flow.
   No page-like vertical scrollbar inside a page.
   ------------------------------------------------------------ */
body.customers .mk33-project-workspace,
body.customers .mk33-project-workspace > .panel-body,
body.customers .mk33-project-tab-stage,
body.customers .mk42-discussion-body,
body.customers .mk42-discussion-grid,
body.customers .mk42-upload-shell,
body.customers .mk42-gantt-shell,
body.customers .mk42-ticket-status-shell,
body.customers .mk42-table-card,
body.customers .mk43-calendar-shell,
body.customers .mk43-table-card,
body.customers .mk43-finance-summary-card,
body.customers .mk43-contract-chart-card,
body.customers .mk43-profile-layout,
body.customers .mk33-overview-grid,
body.customers .mk33-finance-grid,
body.customers .mk4-task-board,
body.customers .mk4-task-phases,
body.customers .tasks-phases,
body.customers .kan-ban-content-wrapper {
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:visible!important;
}

/* Any plugin-created large scroll viewport inside project workspace gets flattened. */
body.customers .mk33-project-workspace .mCustomScrollBox,
body.customers .mk33-project-workspace .mCSB_container,
body.customers .mk33-project-workspace .scrollable,
body.customers .mk33-project-workspace .scroll-content {
  height:auto!important;
  max-height:none!important;
  overflow-y:visible!important;
}

/* Keep horizontal scrolling only for components that genuinely need width. */
body.customers .mk33-project-tabs-shell .horizontal-tabs,
body.customers .mk42-gantt-canvas,
body.customers .tasks-phases {
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

/* Files, discussions, tickets and finance cards should not show their own scroll track. */
body.customers .mk42-discussion-body,
body.customers .mk42-discussion-grid,
body.customers .mk42-upload-shell,
body.customers .mk42-ticket-status-shell,
body.customers .mk42-table-card,
body.customers .mk43-table-card,
body.customers .mk43-finance-summary-card {
  overflow:visible!important;
}

/* ------------------------------------------------------------
   2) DISCUSSIONS PAGE
   ------------------------------------------------------------ */
body.customers .mk42-discussion-toolbar {
  position:relative;
  z-index:2;
  overflow:visible!important;
}

body.customers .mk42-discussion-grid {
  align-items:start;
}

body.customers .mk42-discussion-card {
  min-width:0!important;
  overflow:visible!important;
}

body.customers .mk42-discussion-card-copy strong {
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.35!important;
}

/* ------------------------------------------------------------
   3) CREATE DISCUSSION MODAL — fit the viewport correctly
   ------------------------------------------------------------ */

/* The Bootstrap modal itself may scroll only if the viewport is extremely short. */
body.customers .mk364-discussion-modal-wrap {
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:0!important;
}

/* Keep the dialog in the viewport with comfortable margins. */
body.customers .mk364-discussion-dialog {
  width:min(760px,calc(100vw - 28px))!important;
  max-width:min(760px,calc(100vw - 28px))!important;
  max-height:calc(100vh - 24px)!important;
  margin:12px auto!important;
}

/* Form participates in the height constraint. */
body.customers .mk364-discussion-dialog > form {
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  max-height:calc(100vh - 24px)!important;
  margin:0!important;
}

/* Header/footer remain visible; only the BODY scrolls when necessary. */
body.customers .mk364-discussion-modal {
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  max-height:calc(100vh - 24px)!important;
  overflow:hidden!important;
  border:1px solid #e4e6ea!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 30px 90px rgba(10,12,15,.25)!important;
}

body.customers .mk364-discussion-modal .modal-header {
  flex:0 0 auto;
  min-height:64px;
  padding:14px 16px!important;
  border-bottom:1px solid #ececee!important;
  background:
    radial-gradient(circle at 90% 10%,rgba(245,155,35,.10),transparent 24%),
    linear-gradient(180deg,#fff,#fffdfa)!important;
}

body.customers .mk364-discussion-modal-body {
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:16px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#d3b17f transparent;
}

body.customers .mk364-discussion-modal-body::-webkit-scrollbar {
  width:8px;
}

body.customers .mk364-discussion-modal-body::-webkit-scrollbar-track {
  background:transparent;
}

body.customers .mk364-discussion-modal-body::-webkit-scrollbar-thumb {
  border:2px solid transparent;
  border-radius:999px;
  background:#d7b783;
  background-clip:padding-box;
}

body.customers .mk364-discussion-modal-footer {
  position:relative!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-height:62px!important;
  padding:12px 16px!important;
  border-top:1px solid #ececee!important;
  background:#fafafa!important;
}

/* Make textarea useful without forcing the dialog off-screen. */
body.customers .mk364-discussion-modal-body textarea.form-control {
  min-height:150px!important;
  max-height:280px!important;
  resize:vertical!important;
}

/* The close button remains reachable. */
body.customers .mk364-discussion-modal .modal-header .close {
  position:absolute;
  top:12px;
  right:14px;
  z-index:4;
}

/* ------------------------------------------------------------
   4) Mobile/tablet modal behavior
   ------------------------------------------------------------ */
@media (max-width:767px) {
  body.customers .mk364-discussion-dialog {
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    max-height:calc(100vh - 12px)!important;
    margin:6px auto!important;
  }

  body.customers .mk364-discussion-dialog > form,
  body.customers .mk364-discussion-modal {
    max-height:calc(100vh - 12px)!important;
  }

  body.customers .mk364-discussion-modal-body {
    padding:13px!important;
  }

  body.customers .mk364-discussion-modal-footer {
    padding:10px 13px!important;
  }

  body.customers .mk364-discussion-modal-footer .btn {
    flex:1 1 0;
  }
}

/* ------------------------------------------------------------
   5) Smoothness: natural page scroll, no wheel hijacking.
   ------------------------------------------------------------ */
html {
  scroll-behavior:smooth;
}

body.customers .mk33-project-workspace,
body.customers .mk42-discussion-card,
body.customers .mk42-upload-shell,
body.customers .mk42-table-card,
body.customers .mk43-table-card {
  transition:
    border-color .22s cubic-bezier(.2,.72,.2,1),
    box-shadow .22s cubic-bezier(.2,.72,.2,1),
    transform .22s cubic-bezier(.2,.72,.2,1)!important;
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto!important;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.6.5
   USELESS SCROLLBAR KILLER + CREATE DISCUSSION STRUCTURAL FIX
   ============================================================ */

/* ------------------------------------------------------------
   1) Open Ticket / large forms: NEVER become their own vertical page.
   ------------------------------------------------------------ */
body.customers .mk365-ticket-form,
body.customers .mk365-ticket-form > .row,
body.customers .mk365-ticket-form .col-md-12,
body.customers .mk365-ticket-form-card,
body.customers .mk365-ticket-form-card > .panel-body,
body.customers .mk365-ticket-form-card > .panel-footer {
  position:relative!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
}

body.customers .mk365-ticket-form-card {
  display:block!important;
}

/* Form footer stays in normal flow; no sticky/fixed footer inside the panel. */
body.customers .mk365-ticket-form-card > .panel-footer {
  position:relative!important;
  inset:auto!important;
  margin:0!important;
  padding:12px 16px!important;
}

/* Ticket textarea can grow naturally without forcing a fake panel scroll. */
body.customers .mk365-ticket-form textarea.form-control {
  max-height:none!important;
  overflow-y:auto!important; /* native textarea scroll only if the text itself needs it */
}

/* ------------------------------------------------------------
   2) Generic customer portal: suppress scrollbar tracks on elements
      that are not supposed to be vertical viewports.
   ------------------------------------------------------------ */
body.customers .panel_s,
body.customers .panel,
body.customers .well,
body.customers .table-responsive,
body.customers .dataTables_wrapper,
body.customers .mk42-ticket-form-card,
body.customers .mk42-upload-shell,
body.customers .mk42-discussion-body,
body.customers .mk42-discussion-grid,
body.customers .mk42-ticket-status-shell,
body.customers .mk43-table-card,
body.customers .mk43-calendar-shell,
body.customers .mk43-finance-summary-card {
  max-height:none!important;
}

/* This class is added at runtime only to useless/unwanted vertical scrollers. */
body.customers .mk365-no-y-scroll {
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:visible!important;
  scrollbar-width:none!important;
}

body.customers .mk365-no-y-scroll::-webkit-scrollbar {
  width:0!important;
  height:0!important;
  display:none!important;
}

/* ------------------------------------------------------------
   3) Create Discussion — correct Bootstrap structure.
   modal-dialog > modal-content > form > header/body/footer
   ------------------------------------------------------------ */
body.customers .mk365-discussion-modal-wrap {
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:0!important;
}

body.customers .mk365-discussion-dialog {
  width:min(760px,calc(100vw - 28px))!important;
  max-width:min(760px,calc(100vw - 28px))!important;
  margin:clamp(8px,2vh,18px) auto!important;
}

body.customers .mk365-discussion-modal {
  width:100%!important;
  max-height:calc(100vh - 24px)!important;
  overflow:hidden!important;
  border:1px solid #e4e6ea!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 30px 90px rgba(10,12,15,.25)!important;
}

body.customers .mk365-discussion-form {
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  max-height:calc(100vh - 24px)!important;
  margin:0!important;
}

body.customers .mk365-discussion-modal .modal-header {
  position:relative!important;
  flex:0 0 auto!important;
  min-height:62px!important;
  padding:14px 16px!important;
  border-bottom:1px solid #ececee!important;
  background:
    radial-gradient(circle at 90% 10%,rgba(245,155,35,.10),transparent 24%),
    linear-gradient(180deg,#fff,#fffdfa)!important;
}

body.customers .mk365-discussion-modal-body {
  flex:1 1 auto!important;
  min-height:0!important;
  padding:16px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}

body.customers .mk365-discussion-modal-footer {
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  min-height:60px!important;
  padding:11px 16px!important;
  border-top:1px solid #ececee!important;
  background:#fafafa!important;
}

/* Discussion fields compact enough to keep buttons visible on normal laptop screens. */
body.customers .mk365-discussion-modal-body .form-group {
  margin-bottom:13px!important;
}

body.customers .mk365-discussion-modal-body textarea.form-control {
  min-height:140px!important;
  height:180px!important;
  max-height:260px!important;
  resize:vertical!important;
}

body.customers .mk365-discussion-modal .close {
  position:absolute!important;
  top:12px!important;
  right:14px!important;
  z-index:5!important;
}

/* ------------------------------------------------------------
   4) Mobile discussion modal
   ------------------------------------------------------------ */
@media (max-width:767px) {
  body.customers .mk365-discussion-dialog {
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    margin:6px auto!important;
  }

  body.customers .mk365-discussion-modal,
  body.customers .mk365-discussion-form {
    max-height:calc(100vh - 12px)!important;
  }

  body.customers .mk365-discussion-modal-body {
    padding:13px!important;
  }

  body.customers .mk365-discussion-modal-footer {
    padding:10px 13px!important;
  }

  body.customers .mk365-discussion-modal-footer .btn {
    flex:1 1 0!important;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.6.6
   CREATE DISCUSSION FREEZE / MODAL ROOT FIX
   ============================================================ */

/* The discussion modal is moved to <body> by JS.
   Keep it completely outside project cards/transformed ancestors. */
body.customers > #discussion.mk365-discussion-modal-wrap {
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  z-index:1060!important;
  padding:0!important;
  outline:0!important;
}

body.customers > #discussion .mk365-discussion-dialog {
  position:relative!important;
  width:min(760px,calc(100vw - 28px))!important;
  max-width:min(760px,calc(100vw - 28px))!important;
  margin:18px auto!important;
  transform:none!important;
}

body.customers > #discussion .mk365-discussion-modal {
  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  max-height:calc(100vh - 36px)!important;
  overflow:hidden!important;
  border-radius:16px!important;
}

body.customers > #discussion .mk365-discussion-form {
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  max-height:calc(100vh - 36px)!important;
  margin:0!important;
}

body.customers > #discussion .mk365-discussion-modal-body {
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
}

body.customers > #discussion .mk365-discussion-modal-footer {
  position:relative!important;
  flex:0 0 auto!important;
  z-index:2!important;
}

/* Ensure Bootstrap backdrop sits BELOW the modal and ABOVE the portal. */
body.customers > .modal-backdrop {
  z-index:1050!important;
}

/* Kill transform/filter effects on the modal itself. */
body.customers > #discussion,
body.customers > #discussion *,
body.customers > .modal-backdrop {
  backface-visibility:visible!important;
}

/* While modal is open, page itself must not scroll. */
body.customers.modal-open {
  overflow:hidden!important;
  padding-right:0!important;
}

/* Keep close/submit controls clickable. */
body.customers > #discussion .modal-header,
body.customers > #discussion .modal-footer,
body.customers > #discussion .btn,
body.customers > #discussion .close {
  pointer-events:auto!important;
}

/* On short screens, compact the textarea enough to keep actions visible. */
@media (max-height:720px) {
  body.customers > #discussion .mk365-discussion-modal-body textarea.form-control {
    min-height:110px!important;
    height:135px!important;
    max-height:190px!important;
  }
}

@media (max-width:767px) {
  body.customers > #discussion .mk365-discussion-dialog {
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    margin:6px auto!important;
  }

  body.customers > #discussion .mk365-discussion-modal,
  body.customers > #discussion .mk365-discussion-form {
    max-height:calc(100vh - 12px)!important;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.6.7
   Header Utility Active-State Brand Fix
   ============================================================ */

body.customers > .navbar.header .mk43-action-item > a,
body.customers > .navbar.header .mk43-action-item > a:link,
body.customers > .navbar.header .mk43-action-item > a:visited {
  color:#26344a!important;
}

body.customers > .navbar.header .mk43-action-item > a i,
body.customers > .navbar.header .mk43-action-item > a svg {
  color:#9a5b12!important;
  stroke:currentColor!important;
}

body.customers > .navbar.header .mk43-action-item > a:hover,
body.customers > .navbar.header .mk43-action-item > a:focus,
body.customers > .navbar.header .mk43-action-item > a:active {
  color:#8d4e00!important;
  border-color:#efc78d!important;
  background:#fff7eb!important;
  box-shadow:0 8px 22px rgba(245,155,35,.10)!important;
}

body.customers > .navbar.header .mk43-action-item.active > a,
body.customers > .navbar.header .mk43-action-item.active > a:hover,
body.customers > .navbar.header .mk43-action-item.active > a:focus,
body.customers > .navbar.header li.active.mk43-action-item > a {
  color:#8d4e00!important;
  border-color:#efb65f!important;
  background:linear-gradient(180deg,#fffaf3,#fff4e2)!important;
  box-shadow:
    inset 0 0 0 1px rgba(245,155,35,.16),
    0 8px 22px rgba(245,155,35,.10)!important;
}

body.customers > .navbar.header .mk43-action-item.active > a i,
body.customers > .navbar.header .mk43-action-item.active > a svg,
body.customers > .navbar.header .mk43-action-item > a:hover i,
body.customers > .navbar.header .mk43-action-item > a:hover svg {
  color:#f59b23!important;
  stroke:currentColor!important;
}

body.customers > .navbar.header .navbar-nav > li.mk43-action-item.active > a,
body.customers > .navbar.header .navbar-nav > li.mk43-action-item.open > a {
  color:#8d4e00!important;
  background:#fff7eb!important;
}

body.customers > .navbar.header .mk43-action-item > a:focus-visible {
  outline:2px solid rgba(245,155,35,.38)!important;
  outline-offset:2px;
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.6.8
   Task Save Button Outside Visual Form Card
   ============================================================ */

body.customers .mk4-task-form-card {
  margin-bottom:0!important;
}

body.customers .mk368-task-form-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  margin:12px 0 0;
  padding:0 2px;
}

body.customers .mk368-task-save {
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:112px;
  min-height:42px;
  padding:10px 18px!important;
  border:1px solid #e98a11!important;
  border-radius:11px!important;
  color:#17120b!important;
  background:linear-gradient(135deg,#ffb23f,#f59b23)!important;
  box-shadow:0 10px 24px rgba(245,155,35,.20)!important;
  font-weight:850!important;
}

body.customers .mk368-task-save:hover,
body.customers .mk368-task-save:focus {
  transform:translateY(-2px);
  color:#111!important;
  background:linear-gradient(135deg,#ffc15d,#f59b23)!important;
  box-shadow:0 14px 30px rgba(245,155,35,.26)!important;
}

body.customers .mk368-task-save i {
  font-size:11px;
}

@media (max-width:560px) {
  body.customers .mk368-task-form-actions {
    padding:0;
  }

  body.customers .mk368-task-save {
    width:100%;
  }
}


/* ============================================================
   Seen Marketing Client Portal v4 — Phase 3.6.9
   FINAL Files / Calendar Active Color Fix
   The earlier selector assumed the navbar was a direct BODY child.
   It is not always rendered that way, so this targets the real classes.
   ============================================================ */

/* Normal state */
body.customers .mk43-header .mk43-actions .mk43-action-link > a,
body.customers .mk43-header .mk43-actions .mk43-action-link > a span,
body.customers .mk43-header .mk43-actions .mk43-action-link > a .mk43-action-label {
  color:#26344a!important;
}

body.customers .mk43-header .mk43-actions .mk43-action-link > a i {
  color:#9a5b12!important;
}

/* Hover / focus */
body.customers .mk43-header .mk43-actions .mk43-action-link > a:hover,
body.customers .mk43-header .mk43-actions .mk43-action-link > a:focus,
body.customers .mk43-header .mk43-actions .mk43-action-link > a:hover span,
body.customers .mk43-header .mk43-actions .mk43-action-link > a:focus span {
  color:#8d4e00!important;
}

body.customers .mk43-header .mk43-actions .mk43-action-link > a:hover i,
body.customers .mk43-header .mk43-actions .mk43-action-link > a:focus i {
  color:#f59b23!important;
}

/* Active Files / Calendar page — beat Bootstrap + Perfex blue states */
body.customers .mk43-header .mk43-actions > li.mk43-action-link.active > a,
body.customers .mk43-header .mk43-actions > li.mk43-action-link.active > a:hover,
body.customers .mk43-header .mk43-actions > li.mk43-action-link.active > a:focus,
body.customers .mk43-header .mk43-actions > li.mk43-action-link.active > a span,
body.customers .mk43-header .mk43-actions > li.mk43-action-link.active > a .mk43-action-label {
  color:#8d4e00!important;
}

body.customers .mk43-header .mk43-actions > li.mk43-action-link.active > a i {
  color:#f59b23!important;
}

body.customers .mk43-header .mk43-actions > li.mk43-action-link.active > a {
  border-color:#efb65f!important;
  background:linear-gradient(180deg,#fffaf3,#fff4e2)!important;
  box-shadow:
    inset 0 0 0 1px rgba(245,155,35,.16),
    0 8px 22px rgba(245,155,35,.10)!important;
}

/* Catch Bootstrap navbar active selectors directly. */
body.customers .navbar-default.mk43-header .navbar-nav.mk43-actions > .active > a,
body.customers .navbar-default.mk43-header .navbar-nav.mk43-actions > .active > a:hover,
body.customers .navbar-default.mk43-header .navbar-nav.mk43-actions > .active > a:focus {
  color:#8d4e00!important;
  background:linear-gradient(180deg,#fffaf3,#fff4e2)!important;
}

body.customers .navbar-default.mk43-header .navbar-nav.mk43-actions > .active > a *,
body.customers .navbar-default.mk43-header .navbar-nav.mk43-actions > .active > a:hover *,
body.customers .navbar-default.mk43-header .navbar-nav.mk43-actions > .active > a:focus * {
  color:inherit!important;
}

/* Keep the icon orange even though the span inherits text color. */
body.customers .navbar-default.mk43-header .navbar-nav.mk43-actions > .active > a i {
  color:#f59b23!important;
}

/* Remove browser/Bootstrap blue focus decoration. */
body.customers .mk43-header .mk43-actions .mk43-action-link > a:focus-visible {
  color:#8d4e00!important;
  outline:2px solid rgba(245,155,35,.38)!important;
  outline-offset:2px!important;
}