@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --smop-ink:#16212B; --smop-ink-soft:#5B6B78; --smop-ink-faint:#8B96A0;
  --smop-paper:#F6F4EF; --smop-surface:#FFFFFF; --smop-border:#E5E0D4;
  --smop-brand:#155971; --smop-brand-dark:#0E3F51; --smop-brand-light:#EAF2F5;
  --smop-accent:#A45A18; --smop-accent-bg:#F6E8D4;
  --smop-success:#2F7A4D; --smop-success-bg:#E4F3E9;
  --smop-warning:#9C6B08; --smop-warning-bg:#FBF0D9;
  --smop-danger:#B03A2E; --smop-danger-bg:#FBEAE7;
  --smop-radius:10px; --smop-radius-sm:6px;
  --smop-shadow:0 1px 2px rgba(22,33,43,.06), 0 1px 1px rgba(22,33,43,.04);
  --smop-sidebar-w:232px;
  --smop-bottomnav-h:58px;
}

body.smop-app{ background:var(--smop-paper); color:var(--smop-ink); font-family:'IBM Plex Sans',system-ui,sans-serif; margin:0; }
.smop-app *{ box-sizing:border-box; }
.smop-app h1,.smop-app h2,.smop-app h3{ font-family:'Libre Franklin',system-ui,sans-serif; font-weight:800; letter-spacing:-.01em; margin:0 0 .4em; }
.smop-app a{ color:var(--smop-brand); text-decoration:none; }
.smop-app a.smop-btn{ color:var(--smop-ink); }
.smop-app a.smop-btn-primary{ color:#fff; }
.smop-app a.smop-btn-primary:hover{ color:#fff; }
.smop-app a:hover{ text-decoration:underline; }

.smop-shell{ display:flex; min-height:100vh; }

.smop-sidebar{
  width:var(--smop-sidebar-w); flex:none; background:var(--smop-brand-dark); color:#DCEAEF;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.smop-sidebar .smop-logo{ padding:22px 20px 18px; font-family:'Libre Franklin',sans-serif; font-weight:800; font-size:17px; color:#fff; border-bottom:1px solid rgba(255,255,255,.12); }
.smop-sidebar .smop-logo small{ display:block; font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#9DC3D3; margin-top:3px; }
.smop-nav{ padding:14px 10px; flex:1; }

.smop-nav-search{ padding:0 10px 10px; }
.smop-nav-search-icon{
  display:none; align-items:center; justify-content:center; width:36px; height:36px; margin:0 auto;
  border:none; background:rgba(255,255,255,.08); color:#DCEAEF; border-radius:8px; cursor:pointer;
}
.smop-nav-search-icon:hover{ background:rgba(255,255,255,.16); }
.smop-nav-search-icon .dashicons{ font-size:16px; width:16px; height:16px; }
.smop-nav-search-box{
  display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:8px; padding:0 8px; height:36px;
}
.smop-nav-search-box:focus-within{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.12); }
.smop-nav-search-box-icon{ font-size:14px; width:14px; height:14px; color:#9DC3D3; flex:none; }
.smop-nav-search-input{
  flex:1; min-width:0; background:transparent; border:none; color:#fff; font-size:13px; padding:6px 0;
}
.smop-nav-search-input::placeholder{ color:#8AAAB8; }
.smop-nav-search-input:focus{ outline:none; box-shadow:none; }
.smop-nav-search-clear{
  border:none; background:transparent; color:#9DC3D3; cursor:pointer; font-size:16px; line-height:1;
  padding:2px 4px; flex:none;
}
.smop-nav-search-clear:hover{ color:#fff; }
.smop-nav-empty{ padding:10px 14px; font-size:12.5px; color:#8AAAB8; font-style:italic; }

@media (min-width: 768px){
  body.smop-sidebar-collapsed .smop-nav-search-box{ display:none; }
  body.smop-sidebar-collapsed .smop-nav-search{ padding:0 0 10px; }
  body.smop-sidebar-collapsed .smop-nav-search-icon{ display:flex; }
}
.smop-nav a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--smop-radius-sm);
  color:#C8DEE6; font-size:14px; font-weight:500; margin-bottom:2px; text-decoration:none;
}
.smop-nav a:hover{ background:rgba(255,255,255,.08); color:#fff; text-decoration:none; }
.smop-nav a.active{ background:#fff; color:var(--smop-brand-dark); font-weight:600; }
.smop-nav .smop-nav-icon{ width:18px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:13px; }
.smop-sidebar-foot{ padding:14px 20px 18px; border-top:1px solid rgba(255,255,255,.12); font-size:12px; color:#9DC3D3; }

.smop-main{ flex:1; min-width:0; }
.smop-topbar{
  background:var(--smop-surface); border-bottom:1px solid var(--smop-border);
  position:sticky; top:0; z-index:5;
}
.smop-topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 32px; max-width:var(--smop-w, var(--smop-w-default)); margin:0 auto;
}
.smop-topbar h1{ font-size:19px; margin:0; }
.smop-topbar-right{ display:flex; align-items:center; gap:16px; }
.smop-bell{ position:relative; font-size:16px; color:var(--smop-ink-soft); }
.smop-bell .smop-count{
  position:absolute; top:-7px; right:-9px; background:var(--smop-accent); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; line-height:1;
  padding:3px 5px; border-radius:20px; min-width:15px; text-align:center;
}
.smop-user{ display:flex; align-items:center; gap:9px; font-size:13.5px; }
.smop-avatar{
  width:30px; height:30px; border-radius:50%; background:var(--smop-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex:none;
}
.smop-content{ padding:32px; max-width:var(--smop-w, var(--smop-w-default)); margin:0 auto; }

/* Adaptive centre width. One variable (--smop-w) is the widest the centre work area and the top bar may be;
   below that width the area is fluid, so nothing here is a fixed width. Default 960px (general pages, Notifications,
   ordinary HR pages); a task's or a report's detail page 800px; Complaints 1000px; the Dashboard and every Settings tab
   1100px; any screen with a genuinely wide table (six or more columns: HR -> Employees, payroll, the Staff Schedule's
   month tables) 1300px; then named screens: Staff Schedule -> Saturday work patterns 1100px, Company schedule 1208px,
   Settings -> Roles 1400px. Later rules win when more than one matches (all carry the same weight). The left navigation
   and the Team Presence panel are not touched. A browser without :has() keeps the default. */
:root{ --smop-w-default:960px; --smop-w-read:800px; --smop-w-complaints:1000px; --smop-w-page:1100px; --smop-w-company:1208px; --smop-w-wide:1300px; --smop-w-roles:1400px; }
body.smop-app:has(:where(.smop-content > .smop-task-detail, .smop-content .smop-reports-detail)){ --smop-w:var(--smop-w-read); }
body.smop-app:has(:where(.smop-nav a.active[href*="/complaints"])){ --smop-w:var(--smop-w-complaints); }
body.smop-app:has(:where(.smop-shell > .smop-presence-rail, .smop-content > .smop-myday, .smop-nav a.active[href*="/settings"])){ --smop-w:var(--smop-w-page); }
body.smop-app:has(:where(.smop-content table tr > :nth-child(6))){ --smop-w:var(--smop-w-wide); }
body.smop-app:has(:where(.smop-sch .smop-hr-subnav-link.active[href*="sub=patterns"])){ --smop-w:var(--smop-w-page); }
body.smop-app:has(:where(.smop-sch .smop-hr-subnav-link.active[href*="sub=team"])){ --smop-w:var(--smop-w-company); }
body.smop-app:has(:where(.smop-content .smop-hr-subnav-link.active[href*="tab=roles"])){ --smop-w:var(--smop-w-roles); }
/* Settings -> Roles & Permissions: a compact table, so every column fits without dragging at 1366px and wider. Its cells
   carry their own inline styles, hence !important. Words are never broken; role names may wrap; when the table must
   scroll inside its box (about 1280px and narrower) the Role column stays fixed on the left. */
body.smop-app:has(:where(.smop-content .smop-hr-subnav-link.active[href*="tab=roles"])) .smop-content table th,
body.smop-app:has(:where(.smop-content .smop-hr-subnav-link.active[href*="tab=roles"])) .smop-content table td{ padding:6px 4px !important; }
body.smop-app:has(:where(.smop-content .smop-hr-subnav-link.active[href*="tab=roles"])) .smop-content table th{ line-height:1.25; vertical-align:bottom; hyphens:manual; overflow-wrap:normal; word-break:normal; }
body.smop-app:has(:where(.smop-content .smop-hr-subnav-link.active[href*="tab=roles"])) .smop-content table tr > :first-child{
  white-space:normal !important; min-width:9.5em; max-width:13em; padding-left:8px !important;
  position:sticky; left:0; z-index:1; background:var(--smop-surface); }
/* smaller laptops: the side margins shrink a little so the fluid area keeps more of its width */
@media (min-width: 861px){
  .smop-content{ padding-left:clamp(18px, 2.2vw, 32px); padding-right:clamp(18px, 2.2vw, 32px); }
  .smop-topbar-inner{ padding-left:clamp(18px, 2.2vw, 32px); padding-right:clamp(18px, 2.2vw, 32px); }
}
/* wide tables scroll sideways inside their own box instead of squeezing their columns */
.smop-tbl-wrap, .smop-sch-wrap{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.smop-tbl-wrap > table:has(tr > :nth-child(6)), .smop-sch-wrap > table:has(tr > :nth-child(6)){ min-width:640px; }
.smop-tbl-wrap > table:has(tr > :nth-child(9)), .smop-sch-wrap > table:has(tr > :nth-child(9)){ min-width:880px; }
/* the working-week table (Settings -> Tasks): its hidden screen-reader labels stay inside the table's own scroll box
   (they were measured against the card and made phone pages 42px wider than the screen) */
.smop-week td, .smop-week th{ position:relative; }
/* phones: a filter drop-down (form > div > select, e.g. Complaints) is never wider than its form */
@media (max-width: 767px){
  .smop-content form > div{ max-width:100%; }
  .smop-content form > div > select{ max-width:100%; }
}

.smop-card{ background:var(--smop-surface); border:1px solid var(--smop-border); border-radius:var(--smop-radius); box-shadow:var(--smop-shadow); padding:18px 20px; margin-bottom:16px; }
.smop-card h3{ font-size:15px; margin-bottom:10px; }
.smop-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-bottom:20px; }

.smop-stat{ padding:16px 18px; }
.smop-stat .smop-stat-num{ font-family:'Libre Franklin',sans-serif; font-weight:800; font-size:28px; color:var(--smop-brand); line-height:1; }
.smop-stat .smop-stat-label{ font-size:12.5px; color:var(--smop-ink-soft); margin-top:6px; }

.smop-list{ list-style:none; margin:0; padding:0; }
.smop-item{
  padding:13px 16px; border:1px solid var(--smop-border); border-radius:var(--smop-radius-sm);
  margin-bottom:8px; background:var(--smop-surface); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.smop-item.smop-pinned{ border-left:3px solid var(--smop-accent); }
.smop-item-main{ flex:1; min-width:200px; }
.smop-item-title{ font-weight:600; font-size:14.5px; margin-bottom:2px; }
.smop-item-meta{ font-size:12px; color:var(--smop-ink-faint); font-family:'IBM Plex Mono',monospace; }
.smop-item-body{ font-size:13.5px; color:var(--smop-ink-soft); margin-top:6px; line-height:1.5; }

.smop-pill{ display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.01em; white-space:nowrap; }
.smop-pill-success{ background:var(--smop-success-bg); color:var(--smop-success); }
.smop-pill-warning{ background:var(--smop-warning-bg); color:var(--smop-warning); }
.smop-pill-danger{ background:var(--smop-danger-bg); color:var(--smop-danger); }
.smop-pill-info{ background:var(--smop-brand-light); color:var(--smop-brand); }
.smop-pill-neutral{ background:#EFEDE6; color:var(--smop-ink-soft); }

.smop-btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--smop-radius-sm);
  font-size:13.5px; font-weight:600; border:1px solid var(--smop-border); background:var(--smop-surface);
  color:var(--smop-ink); cursor:pointer; font-family:inherit;
}
.smop-btn:hover{ border-color:var(--smop-brand); color:var(--smop-brand); text-decoration:none; }
.smop-btn-primary{ background:var(--smop-brand); border-color:var(--smop-brand); color:#fff; }
.smop-btn-primary:hover{ background:var(--smop-brand-dark); color:#fff; }
.smop-btn-danger{ color:var(--smop-danger); border-color:var(--smop-danger-bg); }
.smop-btn-danger:hover{ border-color:var(--smop-danger); }
.smop-btn-sm{ padding:5px 11px; font-size:12.5px; }

.smop-form input[type=text],.smop-form input[type=email],.smop-form input[type=date],.smop-form input[type=datetime-local],.smop-form select,.smop-form textarea{
  width:100%; padding:9px 11px; border:1px solid var(--smop-border); border-radius:var(--smop-radius-sm);
  font-family:inherit; font-size:13.5px; color:var(--smop-ink); background:var(--smop-surface); margin-bottom:12px;
}
.smop-form label{ display:block; font-size:12.5px; font-weight:600; color:var(--smop-ink-soft); margin-bottom:5px; }
.smop-form-row{ margin-bottom:2px; }

.smop-empty{ text-align:center; padding:36px 20px; color:var(--smop-ink-faint); font-size:13.5px; }

.smop-bottom-nav{ display:none; }

/* Tablet only: existing horizontal nav bar, unchanged from before. */
@media (min-width: 768px) and (max-width: 860px){
  .smop-shell{ flex-direction:column; }
  .smop-sidebar{ width:100%; height:auto; position:relative; flex-direction:row; overflow-x:auto; }
  .smop-sidebar .smop-logo{ display:none; }
  .smop-nav{ display:flex; padding:8px; gap:4px; }
  .smop-nav a{ white-space:nowrap; margin-bottom:0; }
  .smop-sidebar-foot{ display:none; }
  .smop-content{ padding:18px; }
  .smop-topbar{ padding:14px 18px; }
  .smop-nav-search{ padding:8px 8px 0; }
  .smop-nav-search-icon{ display:none !important; }
  body.smop-sidebar-collapsed .smop-nav-search-box{ display:flex; }
}

/* Mobile/PWA: desktop sidebar hidden entirely and unconditionally -- it is fully off, not
   repositioned, so it can no longer conflict with the desktop "collapsed" preference no matter
   what state that preference is in. Primary navigation lives in the fixed bottom bar + "More"
   panel below, both independent of .smop-sidebar's markup/classes. */
@media (max-width: 767px), (max-height: 500px) and (max-width: 900px){
  .smop-shell{ flex-direction:column; }
  .smop-sidebar{ display:none !important; }
  .smop-content{
    padding:16px;
    padding-bottom:calc(16px + var(--smop-bottomnav-h) + 10px + env(safe-area-inset-bottom));
  }
  .smop-topbar-inner{ padding:14px 16px; }

  /* Bottom navigation */
  .smop-bottom-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    display:flex; background:var(--smop-surface); border-top:1px solid var(--smop-border);
    box-shadow:0 -2px 12px rgba(0,0,0,.08);
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    height:calc(var(--smop-bottomnav-h) + 10px + env(safe-area-inset-bottom));
  }
  .smop-bottomnav-item{
    flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:8px 4px 6px; text-decoration:none; color:var(--smop-ink-soft);
    background:none; border:none; cursor:pointer; font-family:inherit; font-size:inherit;
    position:relative; -webkit-tap-highlight-color:transparent;
  }
  .smop-bottomnav-icon-wrap{ position:relative; display:flex; align-items:center; justify-content:center; width:24px; height:24px; }
  .smop-bottomnav-icon-wrap .dashicons{ font-size:22px; width:22px; height:22px; }
  .smop-bottomnav-label{ font-size:11px; font-weight:600; line-height:1; }
  .smop-bottomnav-item.active{ color:var(--smop-brand); }
  .smop-bottomnav-item.active .smop-bottomnav-icon-wrap::before{
    content:''; position:absolute; inset:-6px -12px; background:var(--smop-brand-light); border-radius:10px; z-index:-1;
  }
  .smop-bottomnav-item:active{ background:var(--smop-brand-light); }
  .smop-bottomnav-item:focus-visible{ outline:2px solid var(--smop-brand); outline-offset:-2px; border-radius:8px; }
  .smop-bottomnav-badge{
    position:absolute; top:-3px; right:-11px; min-width:16px; height:16px; padding:0 4px;
    background:var(--smop-danger); color:#fff; font-size:10px; font-weight:700; line-height:16px;
    text-align:center; border-radius:999px; border:2px solid var(--smop-surface);
  }

  /* "More" panel: a bottom sheet, independent of .smop-sidebar entirely */
  .smop-more-overlay{
    display:block; position:fixed; inset:0; background:rgba(14,22,29,.5); z-index:75;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .smop-more-overlay.active{ opacity:1; pointer-events:auto; }
  .smop-more-menu{
    position:fixed; left:0; right:0; bottom:0; z-index:80; max-height:75vh;
    background:var(--smop-surface); border-radius:16px 16px 0 0; box-shadow:0 -8px 28px rgba(0,0,0,.22);
    transform:translateY(100%); transition:transform .25s ease; overflow-y:auto;
  }
  .smop-more-menu.open{ transform:translateY(0); }
  .smop-more-header{
    display:flex; align-items:center; justify-content:space-between; padding:18px 20px 12px;
    border-bottom:1px solid var(--smop-border); position:sticky; top:0; background:var(--smop-surface);
  }
  .smop-more-header h2{ margin:0; font-size:17px; }
  .smop-more-close{
    display:flex; align-items:center; justify-content:center; width:32px; height:32px;
    border:1px solid var(--smop-border); background:var(--smop-paper); border-radius:50%;
    color:var(--smop-ink); cursor:pointer; flex:none;
  }
  .smop-more-close:focus-visible{ outline:2px solid var(--smop-brand); outline-offset:2px; }
  .smop-more-nav{
    padding:12px 12px calc(16px + env(safe-area-inset-bottom));
    display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
  }
  .smop-more-link{
    display:flex; align-items:center; gap:10px; padding:12px; border-radius:var(--smop-radius);
    text-decoration:none; color:var(--smop-ink); background:var(--smop-paper);
  }
  .smop-more-link.active{ background:var(--smop-brand-light); color:var(--smop-brand); font-weight:600; }
  .smop-more-link:active{ transform:translateY(1px); }
  .smop-more-link:focus-visible{ outline:2px solid var(--smop-brand); outline-offset:2px; }
  .smop-more-link-icon{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:rgba(21,89,113,.1); flex:none; }
  .smop-more-link-icon .dashicons{ font-size:17px; width:17px; height:17px; color:var(--smop-brand); }

  body.smop-more-open{ overflow:hidden; }
  /* Hides the bar while the on-screen keyboard is very likely open (see the visualViewport
     handler in ui.js), so it never sits on top of a form field. */
  body.smop-keyboard-open .smop-bottom-nav{ display:none; }
}

/* Dashboard summary cards: Open tasks / Open complaints / Unread notifications. */
.smop-stats-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
.smop-stat-link{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  text-decoration:none; color:inherit; cursor:pointer; min-height:96px; min-width:0;
}
.smop-stat-link .smop-stat-icon{ font-size:18px; width:18px; height:18px; color:var(--smop-brand); margin-bottom:8px; }
.smop-stat-link:focus-visible{ outline:2px solid var(--smop-brand); outline-offset:2px; }
.smop-stat-link:active{ transform:translateY(1px); box-shadow:var(--smop-shadow); }
.smop-label-short{ display:none; }
.smop-stat-num{ white-space:nowrap; }
.smop-stat-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* Hide the WP admin toolbar within the mobile portal view only -- this is a display:none in
   this stylesheet, not show_admin_bar(false); wp-admin itself and the toolbar on wider screens
   are completely unaffected. */
@media (max-width: 767px), (max-height: 500px) and (max-width: 900px){
  body.smop-app.admin-bar #wpadminbar{ display:none !important; }
  html{ margin-top:0 !important; }
  body.smop-app.admin-bar{ margin-top:0 !important; }
}

@media (max-width: 480px){
  .smop-stats-row{ gap:8px; }
  .smop-stat-link{ padding:12px 10px; min-height:78px; }
  .smop-stat-link .smop-stat-icon{ font-size:15px; width:15px; height:15px; margin-bottom:5px; }
  .smop-stat-link .smop-stat-num{ font-size:20px; }
  .smop-stat-link .smop-stat-label{ font-size:11px; }
  .smop-stat-link .smop-label-full{ display:none; }
  .smop-stat-link .smop-label-short{ display:inline; }
}

:root[data-theme="dark"]{
  --smop-ink:#E9E4D8; --smop-ink-soft:#A7ADB6; --smop-ink-faint:#6C7178;
  --smop-paper:#10151B; --smop-surface:#171E26; --smop-border:#2A323C;
  --smop-brand:#5FA8CC; --smop-brand-dark:#0B2531; --smop-brand-light:#16303D;
  --smop-accent:#E3A461; --smop-accent-bg:#2B2013;
  --smop-success:#7FB88E; --smop-success-bg:#16291C;
  --smop-warning:#D9B34D; --smop-warning-bg:#2B2313;
  --smop-danger:#E08277; --smop-danger-bg:#2E1917;
  --smop-shadow:0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
}
.smop-sidebar{ border-right:1px solid rgba(255,255,255,.06); }
:root[data-theme="dark"] .smop-nav a.active{ background:var(--smop-brand); color:#0B2531; }
:root[data-theme="dark"] .smop-topbar,:root[data-theme="dark"] .smop-avatar{ box-shadow:none; }

.smop-theme-toggle{
  border:1px solid var(--smop-border); background:var(--smop-surface); color:var(--smop-ink-soft);
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; flex:none;
}
.smop-theme-toggle:hover{ border-color:var(--smop-brand); color:var(--smop-brand); }


/* ---- Legibility + advanced interaction pass ---- */
body.smop-app{ font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.smop-app .smop-item-title{ font-size:15px; letter-spacing:-.005em; }
.smop-app .smop-item-body{ line-height:1.65; }
.smop-app label{ letter-spacing:.01em; }
.smop-app h3{ letter-spacing:-.01em; }

.smop-card, .smop-item, .smop-btn, .smop-nav a, .smop-pill{
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1), background-color .15s ease, border-color .15s ease, color .15s ease;
}

.smop-card{ will-change: transform; }
.smop-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(14,63,81,.14), 0 2px 6px rgba(14,63,81,.08);
  border-color: var(--smop-brand);
}
:root[data-theme="dark"] .smop-card:hover, :root:not([data-theme="light"]) .smop-card:hover{
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
}

.smop-stat{ perspective: 800px; }
.smop-stat-num{ transition: transform .3s cubic-bezier(.2,.8,.2,1); display:inline-block; }
.smop-stat:hover .smop-stat-num{ transform: translateZ(14px) scale(1.05); }

.smop-item:hover{
  border-color: var(--smop-brand);
  background: var(--smop-brand-light);
  transform: translateX(2px);
}

.smop-btn{ position:relative; overflow:hidden; }
.smop-btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(21,89,113,.22); }
.smop-btn:active{ transform: translateY(1px); box-shadow: none; }
.smop-btn-primary:hover{ box-shadow: 0 6px 16px rgba(21,89,113,.35); }

.smop-nav a{ position:relative; }
.smop-nav a::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:0;
  background:var(--smop-accent); border-radius:0 3px 3px 0; transition:height .18s ease;
}
.smop-nav a:hover::before{ height:60%; }
.smop-nav a.active::before{ height:70%; background:var(--smop-brand); }
.smop-nav a:hover{ transform: translateX(3px); }

.smop-avatar{ transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.smop-user:hover .smop-avatar{ transform: scale(1.08) rotate(-4deg); }

.smop-bell{ transition: transform .15s ease; display:inline-block; }
.smop-bell:hover{ transform: rotate(-12deg); }
@keyframes smop-bell-shake{
  0%,100%{ transform: rotate(0deg); }
  20%{ transform: rotate(-18deg); }
  40%{ transform: rotate(14deg); }
  60%{ transform: rotate(-10deg); }
  80%{ transform: rotate(6deg); }
}
.smop-bell-shake{ animation: smop-bell-shake .55s ease; }

.smop-pill:hover{ transform: translateY(-1px) scale(1.04); }

.smop-app input[type=text]:focus, .smop-app input[type=email]:focus, .smop-app input[type=date]:focus,
.smop-app input[type=datetime-local]:focus, .smop-app input[type=url]:focus, .smop-app input[type=number]:focus,
.smop-app select:focus, .smop-app textarea:focus{
  outline:none; border-color:var(--smop-brand); box-shadow:0 0 0 3px var(--smop-brand-light);
}

@media (prefers-reduced-motion: reduce){
  .smop-card, .smop-item, .smop-btn, .smop-nav a, .smop-pill, .smop-stat-num, .smop-avatar, .smop-bell{
    transition:none !important; animation:none !important;
  }
  .smop-card:hover, .smop-item:hover, .smop-btn:hover, .smop-nav a:hover{ transform:none !important; }
}

/* ---- Collapsible sidebar (desktop/tablet only -- the mobile drawer below 768px always
   shows full width with labels, regardless of this preference) ---- */
.smop-sidebar-toggle{
  background:none; border:none; color:#C8DEE6; cursor:pointer; padding:6px; margin:14px 16px 0;
  display:flex; align-items:center; gap:8px; font-size:12px; border-radius:6px; transition:background-color .15s;
}
.smop-sidebar-toggle:hover{ background:rgba(255,255,255,.08); }
.smop-sidebar-toggle .dashicons{ font-size:18px; width:18px; height:18px; }

@media (min-width: 768px){
  body.smop-sidebar-collapsed .smop-sidebar{ width:64px; }
  body.smop-sidebar-collapsed .smop-logo,
  body.smop-sidebar-collapsed .smop-sidebar-foot,
  body.smop-sidebar-collapsed .smop-sidebar-toggle span:last-child{
    display:none;
  }
  /* 1.21.3: only the link's own text label is hidden (screen readers still read it). The icon is also a last child - of
     .smop-nav-icon-wrap - and the earlier descendant selector hid it too, leaving empty squares. */
  body.smop-sidebar-collapsed .smop-nav a > span:last-child:not(.smop-nav-icon-wrap){
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  body.smop-sidebar-collapsed .smop-nav a{ justify-content:center; padding:9px; }
  body.smop-sidebar-collapsed .smop-nav a::before{ display:none; }
  body.smop-sidebar-collapsed .smop-sidebar-toggle{ justify-content:center; margin:14px 8px 0; }
}

/* 1.21.3: the collapsed sidebar's tooltip (ui.js) - outside the sidebar, never clipped, never takes space */
.smop-nav-tip{ position:fixed; z-index:1000; pointer-events:none; max-width:240px; padding:6px 10px; border-radius:6px;
  background:#0B2531; color:#fff; border:1px solid rgba(255,255,255,.16); box-shadow:0 6px 18px rgba(0,0,0,.25);
  font-size:12.5px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.smop-nav-tip[hidden]{ display:none; }

/* 1.21.5: "How to use Tasks" guide (Tasks page). Every rule is scoped to .smop-task-guide. */
.smop-task-guide{ padding:16px 20px; }
.smop-task-guide .smop-task-guide-title{ margin:0 0 10px; font-size:19px; font-weight:800; line-height:1.3; }
.smop-task-guide .smop-task-guide-primary{ background:var(--smop-brand-light); border-left:3px solid var(--smop-brand); border-radius:var(--smop-radius-sm); padding:12px 14px; max-width:84ch; }
.smop-task-guide .smop-task-guide-primary p{ margin:0 0 8px; font-size:14px; line-height:1.6; color:var(--smop-ink); }
.smop-task-guide .smop-task-guide-primary p:first-child{ font-weight:600; }
.smop-task-guide .smop-task-guide-primary p:last-child{ margin-bottom:0; }
.smop-task-guide .smop-task-guide-toggle{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600; color:var(--smop-brand);
  padding:7px 13px; border:1px solid var(--smop-border); border-radius:var(--smop-radius-sm); background:var(--smop-surface); }
.smop-task-guide .smop-task-guide-toggle::before{ content:''; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s; }
.smop-task-guide .smop-task-guide-toggle[aria-expanded="true"]::before{ transform:rotate(45deg); }
.smop-task-guide .smop-task-guide-toggle:hover{ background:var(--smop-brand-light); }
.smop-task-guide .smop-task-guide-toggle:focus-visible{ outline:2px solid var(--smop-brand); outline-offset:2px; }
.smop-task-guide .smop-task-guide-body[hidden]{ display:none; }
.smop-task-guide .smop-task-guide-body{ margin-top:6px; max-width:84ch; font-size:14.5px; line-height:1.65; color:var(--smop-ink); }
.smop-task-guide .smop-task-guide-body h4{ margin:22px 0 8px; padding-top:16px; border-top:1px solid var(--smop-border); font-size:16px; font-weight:700; line-height:1.35; }
.smop-task-guide .smop-task-guide-body h4:first-child{ margin-top:12px; }
.smop-task-guide .smop-task-guide-body p{ margin:0 0 10px; }
.smop-task-guide .smop-task-guide-body ol, .smop-task-guide .smop-task-guide-body ul{ margin:4px 0 12px; padding-left:26px; }
.smop-task-guide .smop-task-guide-body li{ margin-bottom:8px; padding-left:4px; }
.smop-task-guide .smop-task-guide-body li:last-child{ margin-bottom:0; }
.smop-task-guide .smop-task-guide-body li::marker{ color:var(--smop-brand); font-weight:700; }
.smop-task-guide .smop-task-guide-body li strong{ font-weight:700; }
@media (max-width:600px){ .smop-task-guide{ padding:14px 14px; } .smop-task-guide .smop-task-guide-title{ font-size:18px; } .smop-task-guide .smop-task-guide-body ol, .smop-task-guide .smop-task-guide-body ul{ padding-left:20px; } }

/* Icons in nav */
.smop-nav a{ display:flex; align-items:center; gap:10px; }
.smop-nav-icon-wrap{
  width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); flex:none; transition:background-color .15s, transform .15s;
}
.smop-nav a:hover .smop-nav-icon-wrap{ background:rgba(255,255,255,.16); transform:scale(1.06); }
.smop-nav a.active .smop-nav-icon-wrap{ background:var(--smop-accent); }
.smop-nav-icon-wrap .dashicons{ font-size:15px; width:15px; height:15px; color:#DCEAEF; }
.smop-nav a.active .smop-nav-icon-wrap .dashicons{ color:#fff; }

/* Topbar user dropdown */
.smop-user-wrap{ position:relative; }
.smop-user-trigger{ background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--smop-ink); font-family:inherit; padding:2px; border-radius:8px; }
.smop-user-trigger:hover{ background:var(--smop-brand-light); }
.smop-user-menu{
  position:absolute; right:0; top:calc(100% + 8px); background:var(--smop-surface); border:1px solid var(--smop-border);
  border-radius:10px; box-shadow:0 10px 28px rgba(14,63,81,.18); min-width:180px; padding:6px; z-index:20;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .15s, transform .15s, visibility .15s;
}
.smop-user-wrap.open .smop-user-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.smop-user-menu a{
  display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:6px; font-size:13.5px; color:var(--smop-ink); text-decoration:none;
}
.smop-user-menu a:hover{ background:var(--smop-brand-light); text-decoration:none; }
.smop-user-menu .dashicons{ font-size:16px; width:16px; height:16px; color:var(--smop-ink-soft); }

@media (min-width: 768px) and (max-width: 860px){
  body.smop-sidebar-collapsed .smop-sidebar{ width:auto; }
}
/* Dashboard quick-links tile grid */
.smop-quicklinks{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  margin-bottom:22px;
}
.smop-quicklink{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:14px 6px; text-align:center;
  background:var(--smop-surface); border:1px solid var(--smop-border); border-radius:14px;
  text-decoration:none; color:var(--smop-ink);
  box-shadow:var(--smop-shadow);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.smop-quicklink:hover{ transform:translateY(-2px); border-color:var(--smop-brand); background:var(--smop-brand-light); }
.smop-quicklink:active{ transform:translateY(0); }
.smop-quicklink-icon{
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--smop-brand-light); color:var(--smop-brand);
}
.smop-quicklink-icon .dashicons{ font-size:20px; width:20px; height:20px; }
.smop-quicklink-label{ font-size:12.5px; font-weight:600; line-height:1.25; }
@media (max-width: 860px){
  .smop-quicklinks{ grid-template-columns:repeat(4, 1fr); gap:8px; }
  .smop-quicklink{ padding:12px 4px; }
  .smop-quicklink-label{ font-size:11.5px; }
}
@media (max-width: 420px){
  .smop-quicklinks{ grid-template-columns:repeat(3, 1fr); }
}

/* HR module */
.smop-tbl-wrap{ overflow-x:auto; }
.smop-tbl{ width:100%; border-collapse:collapse; font-size:13.5px; }
.smop-tbl th{ text-align:left; padding:8px 10px; border-bottom:2px solid var(--smop-border); color:var(--smop-ink-soft); font-weight:600; white-space:nowrap; }
.smop-tbl td{ padding:8px 10px; border-bottom:1px solid var(--smop-border); vertical-align:top; }
.smop-tbl tr:last-child td{ border-bottom:none; }
.smop-avatar-lg{ width:56px; height:56px; font-size:20px; }
.smop-avatar-photo{ object-fit:cover; }
.smop-avatar-sm{ width:22px; height:22px; font-size:9.5px; border:2px solid var(--smop-surface); }
.smop-online-avatars{ display:flex; align-items:center; margin-top:10px; }
.smop-online-avatars > span{ margin-left:-7px; display:flex; line-height:0; }
.smop-online-avatars > span:first-child{ margin-left:0; }
.smop-online-more{ font-size:11px; color:var(--smop-ink-faint); margin-left:8px; }
.smop-hr-profile-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.smop-hr-subnav{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.smop-hr-subnav-link{ padding:7px 14px; border-radius:999px; background:var(--smop-surface); border:1px solid var(--smop-border); font-size:13px; font-weight:600; text-decoration:none; color:var(--smop-ink-soft); }
.smop-hr-subnav-link.active{ background:var(--smop-brand); color:#fff; border-color:var(--smop-brand); }
.smop-hr-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px; margin-bottom:18px; }
/* 1.25.29: HR dashboard cards - whole card clickable, full labels, clear hover and keyboard focus; filtered-list banner */
.smop-hr-stat-grid .smop-stat-label{ white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; line-height:1.35; }
.smop-hr-card-link{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-decoration:none; color:inherit; cursor:pointer; min-width:0; transition:border-color .15s, box-shadow .15s, transform .15s; }
.smop-hr-card-link .smop-stat-num{ display:block; }
.smop-hr-card-link .smop-stat-label{ display:block; }
.smop-hr-card-go{ font-size:12px; font-weight:600; color:var(--smop-brand); margin-top:8px; opacity:.75; }
.smop-hr-cards > .smop-card{ margin-bottom:0; }
.smop-hr-card-link:hover, .smop-hr-card-link:focus{ text-decoration:none; }
.smop-hr-card-link:hover{ border-color:var(--smop-brand); box-shadow:0 6px 18px rgba(22,33,43,.12); transform:translateY(-1px); }
.smop-hr-card-link:hover .smop-hr-card-go, .smop-hr-card-link:focus-visible .smop-hr-card-go{ opacity:1; text-decoration:underline; }
.smop-hr-card-link:focus-visible{ outline:3px solid var(--smop-brand); outline-offset:2px; }
.smop-hr-card-link:active{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .smop-hr-card-link{ transition:none; } .smop-hr-card-link:hover{ transform:none; } }
.smop-hr-filter{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:10px 12px; margin:0 0 14px; border-radius:10px; background:var(--smop-brand-light); }
.smop-hr-filter-acts{ display:flex; flex-wrap:wrap; gap:6px; }
.smop-hr-filter-empty{ padding:8px 2px; }
.two-col-hr{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
@media (max-width: 760px){ .two-col-hr{ grid-template-columns:1fr; } }

/* Settings module */
.smop-settings-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:6px 0; }
.smop-settings-row-main{ flex:1; min-width:0; }
.smop-settings-row-main strong{ display:block; font-size:14px; margin-bottom:2px; }
.smop-settings-row-control{ flex:none; padding-top:2px; }
.smop-toggle{ position:relative; display:inline-block; cursor:pointer; }
.smop-toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
.smop-toggle-track{ display:block; width:44px; height:24px; border-radius:999px; background:var(--smop-border); transition:background .15s ease; }
.smop-toggle-thumb{ display:block; width:18px; height:18px; margin:3px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .15s ease; }
.smop-toggle input:checked + .smop-toggle-track{ background:var(--smop-brand); }
.smop-toggle input:checked + .smop-toggle-track .smop-toggle-thumb{ transform:translateX(20px); }
.smop-toggle input:focus-visible + .smop-toggle-track{ outline:2px solid var(--smop-brand); outline-offset:2px; }

/* Training module */
.smop-training-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px; margin:14px 0; }
.smop-training-card{ background:var(--smop-surface); border:1px solid var(--smop-border); border-radius:12px; overflow:hidden; box-shadow:var(--smop-shadow); display:flex; flex-direction:column; }
.smop-training-thumb-link{ position:relative; display:block; }
.smop-training-thumb{ width:100%; height:130px; object-fit:cover; display:block; }
.smop-training-thumb-placeholder{ display:flex; align-items:center; justify-content:center; background:var(--smop-brand-light); color:var(--smop-brand); }
.smop-training-thumb-placeholder .dashicons{ font-size:34px; width:34px; height:34px; }
.smop-training-status-badge{ position:absolute; top:8px; right:8px; }
.smop-training-body{ padding:14px 16px; display:flex; flex-direction:column; flex:1; }
.smop-training-body h4{ margin:0 0 6px; font-size:15px; }
.smop-training-desc{ font-size:12.5px; color:var(--smop-ink-soft); margin:0 0 8px; }
.smop-training-meta{ display:flex; flex-wrap:wrap; gap:6px; font-size:11px; color:var(--smop-ink-faint); margin-bottom:8px; }
.smop-training-meta span{ background:var(--smop-paper); border:1px solid var(--smop-border); border-radius:999px; padding:2px 8px; }
.smop-training-progress-bar{ width:100%; height:8px; border-radius:999px; background:var(--smop-border); overflow:hidden; margin:6px 0 2px; }
.smop-training-progress-fill{ height:100%; background:var(--smop-brand); border-radius:999px; transition:width .2s ease; }
.smop-training-viewer{ display:block; }
.smop-video-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; margin:10px 0; }
.smop-video-wrap iframe, .smop-video-wrap #smop-youtube-player{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.smop-video-controls{ display:flex; align-items:center; gap:8px; margin:8px 0; flex-wrap:wrap; }
.smop-video-controls select{ width:auto; margin:0; }
.smop-lesson-list{ margin:16px 0; }
.smop-lesson-list li.active a{ font-weight:700; color:var(--smop-brand); }

/* Team Presence panel */
.smop-presence-rail{
  width:250px; flex:none; border-left:1px solid var(--smop-border); background:var(--smop-surface);
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 16px;
}
.smop-presence-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.smop-presence-head h4{ margin:0; font-size:13px; }
.smop-presence-count{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--smop-ink-faint); }
.smop-presence-mobile-toggle{ display:none; }

.smop-presence-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.smop-presence-item{ margin:0; }
.smop-presence-avatar-btn{
  display:flex; align-items:center; gap:9px; width:100%; padding:7px 6px; border-radius:8px;
  background:none; border:none; cursor:pointer; text-align:left; position:relative; font:inherit; color:var(--smop-ink);
}
.smop-presence-avatar-btn:hover, .smop-presence-avatar-btn:focus-visible{ background:var(--smop-brand-light); outline:none; }
.smop-presence-avatar-btn:focus-visible{ box-shadow:0 0 0 2px var(--smop-brand); }
.smop-presence-avatar-btn::after{
  content: attr(data-name); font-size:12.5px; color:var(--smop-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.smop-presence-avatar-img{ flex:none; position:relative; }
.smop-presence-avatar-img.state-offline{ opacity:.45; }
.smop-presence-dot{
  position:absolute; left:20px; top:20px; width:9px; height:9px; border-radius:50%;
  border:2px solid var(--smop-surface);
}
.smop-presence-dot.state-online{ background:var(--smop-success); }
.smop-presence-dot.state-away{ background:var(--smop-warning); }
.smop-presence-dot.state-offline{ background:var(--smop-ink-faint); }
.smop-presence-empty{ font-size:12px; color:var(--smop-ink-faint); padding:8px 6px; }

/* Detail popover - shared by desktop hover/focus and mobile tap */
.smop-presence-popover{
  position:fixed; z-index:200; width:250px; max-width:calc(100vw - 16px);
  background:var(--smop-surface); border:1px solid var(--smop-border); border-radius:var(--smop-radius);
  box-shadow:0 8px 28px rgba(0,0,0,.18); padding:14px;
}
.smop-presence-popover-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.smop-presence-popover-avatar img, .smop-presence-popover-avatar div{ width:36px; height:36px; font-size:13px; }
.smop-presence-popover-name{ font-family:'Libre Franklin',sans-serif; font-weight:700; font-size:13.5px; color:var(--smop-ink); }
.smop-presence-popover-job{ font-size:11.5px; color:var(--smop-ink-soft); }
.smop-presence-popover-status{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; padding:2px 8px; border-radius:20px; display:inline-block; }
.smop-presence-popover-status.state-online{ background:var(--smop-success-bg); color:var(--smop-success); }
.smop-presence-popover-status.state-away{ background:var(--smop-warning-bg); color:var(--smop-warning); }
.smop-presence-popover-status.state-offline{ background:var(--smop-paper); color:var(--smop-ink-faint); }
.smop-presence-popover-details{ margin:0; font-size:11.5px; }
.smop-presence-popover-details dt{ color:var(--smop-ink-faint); float:left; clear:left; width:90px; }
.smop-presence-popover-details dd{ margin:0 0 4px 90px; color:var(--smop-ink); }
.smop-presence-popover-link{ display:inline-block; margin-top:6px; font-size:11.5px; }

/* Mobile bottom sheet */
.smop-presence-backdrop{ position:fixed; inset:0; background:rgba(10,16,20,.45); z-index:190; }
.smop-presence-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:195; max-height:72vh; overflow-y:auto;
  background:var(--smop-surface); border-top:1px solid var(--smop-border);
  border-radius:16px 16px 0 0; padding:16px 18px 24px; box-shadow:0 -8px 24px rgba(0,0,0,.2);
}
.smop-presence-sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.smop-presence-sheet-head h4{ margin:0; }
.smop-presence-sheet-close{ background:none; border:none; font-size:22px; line-height:1; color:var(--smop-ink-faint); cursor:pointer; padding:4px 8px; }
.smop-presence-search{
  width:100%; padding:9px 12px; border:1px solid var(--smop-border); border-radius:var(--smop-radius-sm);
  margin-bottom:10px; font-size:13px; background:var(--smop-paper); color:var(--smop-ink);
}
.smop-presence-sheet-list .smop-presence-avatar-btn{ padding:9px 6px; }

@media (max-width: 860px){
  .smop-presence-rail{
    width:100%; height:auto; position:relative; border-left:none; border-bottom:1px solid var(--smop-border);
    padding:10px 14px; order:-1;
  }
  .smop-presence-head{ margin-bottom:8px; }
  .smop-presence-mobile-toggle{
    display:inline-flex; align-items:center; gap:4px; background:var(--smop-brand-light); color:var(--smop-brand-dark);
    border:none; border-radius:20px; padding:5px 12px; font-size:11.5px; font-weight:600; cursor:pointer;
  }
  .smop-presence-list{
    flex-direction:row; overflow-x:auto; gap:4px; padding-bottom:2px; -webkit-overflow-scrolling:touch;
  }
  .smop-presence-list .smop-presence-avatar-btn{ flex-direction:column; width:auto; padding:4px; gap:3px; }
  .smop-presence-list .smop-presence-avatar-btn::after{ display:none; }
}
@media (min-width: 861px){
  .smop-presence-sheet, .smop-presence-backdrop{ display:none !important; }
}
.smop-nav a[hidden]{ display:none; }

/* Announcement discussions */
.smop-discussion{ margin-top:14px; padding-top:14px; border-top:1px solid var(--smop-border); }
.smop-discussion-toolbar{ display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.smop-reply-toggle-btn{ background:var(--smop-brand-light); color:var(--smop-brand-dark); border:none; border-radius:20px; padding:6px 14px; font-size:12.5px; font-weight:600; cursor:pointer; }
.smop-reply-toggle-btn:hover{ background:var(--smop-brand); color:#fff; }
.smop-reply-count{ font-size:12px; color:var(--smop-ink-faint); font-family:'IBM Plex Mono',monospace; }
.smop-reply-sort{ margin-left:auto; font-size:12px; border:1px solid var(--smop-border); border-radius:6px; padding:4px 6px; background:var(--smop-surface); color:var(--smop-ink); }
.smop-discussion-notice{ font-style:italic; margin:0 0 10px; }
.smop-ack-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }

.smop-reply-composer{ margin:10px 0; }
.smop-reply-textarea{ width:100%; min-height:44px; padding:9px 12px; border:1px solid var(--smop-border); border-radius:var(--smop-radius-sm); background:var(--smop-paper); color:var(--smop-ink); font-family:inherit; font-size:13px; resize:vertical; }
.smop-reply-textarea:focus{ outline:none; border-color:var(--smop-brand); }
.smop-composer-actions{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.smop-composer-error{ color:var(--smop-danger); font-size:12px; flex:1; }
.smop-mention-suggestions{ background:var(--smop-surface); border:1px solid var(--smop-border); border-radius:8px; margin-top:4px; max-height:160px; overflow-y:auto; box-shadow:var(--smop-shadow); }
.smop-mention-item{ padding:7px 10px; font-size:12.5px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.smop-mention-item:hover, .smop-mention-item.active{ background:var(--smop-brand-light); }

.smop-reply-list{ display:flex; flex-direction:column; }
.smop-reply-item{ padding:10px 0; border-top:1px solid var(--smop-border); }
.smop-reply-pinned{ background:var(--smop-accent-bg); border-radius:8px; padding:10px; margin:4px 0; border-top:none; }
.smop-reply-hidden{ opacity:.55; }
.smop-reply-head{ display:flex; align-items:flex-start; gap:8px; }
.smop-reply-byline{ display:flex; flex-direction:column; flex:1; min-width:0; gap:1px; }
.smop-reply-name{ font-weight:600; font-size:12.5px; color:var(--smop-ink); }
.smop-reply-dept{ font-size:11px; color:var(--smop-ink-faint); }
.smop-reply-date{ font-size:10.5px; color:var(--smop-ink-faint); font-family:'IBM Plex Mono',monospace; }
.smop-reply-body{ margin:6px 0 4px 38px; font-size:13px; color:var(--smop-ink); line-height:1.55; word-wrap:break-word; }
.smop-reply-body p{ margin:0 0 6px; }
.smop-reply-body p:last-child{ margin-bottom:0; }
.smop-reply-mention{ color:var(--smop-brand); font-weight:600; }
.smop-reply-actions{ display:flex; gap:12px; margin-left:38px; flex-wrap:wrap; }
.smop-reply-action-btn{ background:none; border:none; padding:2px 0; font-size:11.5px; color:var(--smop-ink-faint); cursor:pointer; font-weight:600; }
.smop-reply-action-btn:hover{ color:var(--smop-brand); text-decoration:underline; }
.smop-reply-action-btn:focus-visible{ outline:2px solid var(--smop-brand); outline-offset:2px; border-radius:3px; }
.smop-reply-children{ margin-left:38px; padding-left:12px; border-left:2px solid var(--smop-border); margin-top:6px; }
.smop-reply-children .smop-reply-item{ border-top:none; padding-top:8px; }
.smop-load-more-btn{ margin-top:10px; }

@media (max-width: 600px){
  .smop-reply-body, .smop-reply-actions{ margin-left:0; }
  .smop-reply-children{ margin-left:14px; padding-left:8px; }
}
/* Safety net: the hidden attribute must always win over any unguarded display rule above. */
[hidden]{ display:none !important; }

.smop-manage-discussion{ margin-top:12px; border:1px solid var(--smop-border); border-radius:var(--smop-radius-sm); padding:8px 12px; background:var(--smop-paper); }
.smop-manage-discussion summary{ cursor:pointer; font-size:12px; font-weight:600; color:var(--smop-ink-soft); }
.smop-manage-discussion .smop-form-row{ margin-top:10px; }
.smop-manage-discussion select[multiple]{ width:100%; background:var(--smop-surface); color:var(--smop-ink); border:1px solid var(--smop-border); border-radius:6px; }
/* Reply attachments */
.smop-attach-btn{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:6px; cursor:pointer; color:var(--smop-ink-soft); }
.smop-attach-btn:hover{ background:var(--smop-brand-light); color:var(--smop-brand-dark); }
.smop-attach-btn .dashicons{ font-size:16px; width:16px; height:16px; }

.smop-attachment-staging{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.smop-attachment-staging:empty{ display:none; }
.smop-attach-chip{ display:flex; align-items:center; gap:6px; background:var(--smop-paper); border:1px solid var(--smop-border); border-radius:8px; padding:5px 8px; font-size:11.5px; max-width:220px; }
.smop-attach-chip img{ width:24px; height:24px; object-fit:cover; border-radius:4px; flex:none; }
.smop-attach-chip-icon{ width:24px; height:24px; border-radius:4px; background:var(--smop-brand-light); color:var(--smop-brand-dark); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; flex:none; }
.smop-attach-chip-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--smop-ink); }
.smop-attach-chip-remove{ background:none; border:none; color:var(--smop-ink-faint); cursor:pointer; font-size:14px; line-height:1; padding:0 2px; flex:none; }
.smop-attach-chip-remove:hover{ color:var(--smop-danger); }
.smop-attach-chip.uploading{ opacity:.6; }
.smop-attach-chip-progress{ font-size:10px; color:var(--smop-ink-faint); }

.smop-reply-attachments{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px 38px; }
.smop-attachment-image{ display:block; width:120px; height:90px; border-radius:8px; overflow:hidden; border:1px solid var(--smop-border); }
.smop-attachment-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.smop-attachment-video{ width:220px; max-width:100%; border-radius:8px; border:1px solid var(--smop-border); background:#000; }
.smop-attachment-doc{ display:flex; align-items:center; gap:8px; background:var(--smop-paper); border:1px solid var(--smop-border); border-radius:8px; padding:8px 10px; text-decoration:none; max-width:220px; }
.smop-attachment-doc:hover{ border-color:var(--smop-brand); }
.smop-attachment-icon{ width:30px; height:30px; border-radius:6px; background:var(--smop-brand-light); color:var(--smop-brand-dark); display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; flex:none; }
.smop-attachment-name{ font-size:12px; color:var(--smop-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.smop-attachment-size{ font-size:10px; color:var(--smop-ink-faint); flex:none; }

@media (max-width: 600px){
  .smop-reply-attachments{ margin-left:0; }
}

.smop-reaction-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:8px 0; position:relative; }
.smop-reaction-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; border:1px solid var(--smop-border); background:var(--smop-surface); font-size:13px; line-height:1.4; cursor:pointer; color:var(--smop-ink); }
.smop-reaction-pill:hover{ border-color:var(--smop-brand); }
.smop-reaction-pill:disabled{ cursor:default; opacity:0.7; }
.smop-reaction-pill.smop-reaction-mine{ border-color:var(--smop-brand); background:var(--smop-brand-light); color:var(--smop-brand-dark); }
.smop-reaction-count{ font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.smop-reaction-picker-wrap{ position:relative; display:inline-block; }
.smop-reaction-add-btn{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:999px; border:1px solid var(--smop-border); background:var(--smop-surface); color:var(--smop-ink-faint); font-size:15px; line-height:1; cursor:pointer; }
.smop-reaction-add-btn:hover{ border-color:var(--smop-brand); color:var(--smop-brand); }
.smop-reaction-picker{ position:absolute; z-index:20; top:calc(100% + 6px); left:0; display:flex; gap:4px; padding:6px; border-radius:10px; border:1px solid var(--smop-border); background:var(--smop-surface); box-shadow:0 6px 18px rgba(0,0,0,0.18); }
.smop-reaction-picker[hidden]{ display:none; }
.smop-reaction-picker-emoji{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; border:none; background:transparent; font-size:17px; cursor:pointer; }
.smop-reaction-picker-emoji:hover{ background:var(--smop-brand-light); }

.smop-voice-btn{ display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:8px; border:1px solid var(--smop-border); background:var(--smop-surface); color:var(--smop-ink-faint); cursor:pointer; font-size:11px; line-height:1; }
.smop-voice-btn:hover{ border-color:var(--smop-brand); color:var(--smop-brand); }
.smop-voice-btn.recording{ border-color:#e0453f; color:#e0453f; background:rgba(224,69,63,0.08); animation:smop-voice-pulse 1.4s ease-in-out infinite; }
.smop-voice-btn.recording::after{ content: attr(data-elapsed); font-variant-numeric:tabular-nums; font-weight:600; }
@keyframes smop-voice-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.55; } }
.smop-attachment-voice{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; border:1px solid var(--smop-border); background:var(--smop-surface); }
.smop-attachment-voice .dashicons-microphone{ color:var(--smop-brand); flex:none; }
.smop-attachment-voice audio{ height:32px; max-width:260px; }
.smop-attach-chip-audio{ height:28px; max-width:160px; }

.smop-gif-btn-wrap{ position:relative; display:inline-block; }
.smop-gif-btn{ display:inline-flex; align-items:center; padding:5px 9px; border-radius:8px; border:1px solid var(--smop-border); background:var(--smop-surface); color:var(--smop-ink-faint); cursor:pointer; font-size:11px; font-weight:700; letter-spacing:0.03em; }
.smop-gif-btn:hover{ border-color:var(--smop-brand); color:var(--smop-brand); }
.smop-gif-picker{ position:absolute; z-index:20; bottom:calc(100% + 6px); left:0; width:260px; padding:8px; border-radius:10px; border:1px solid var(--smop-border); background:var(--smop-surface); box-shadow:0 6px 18px rgba(0,0,0,0.18); }
.smop-gif-picker[hidden]{ display:none; }
.smop-gif-search{ width:100%; margin-bottom:8px; }
.smop-gif-results{ display:grid; grid-template-columns:1fr 1fr; gap:6px; max-height:220px; overflow-y:auto; }
.smop-gif-result{ padding:0; border:none; border-radius:6px; overflow:hidden; cursor:pointer; background:var(--smop-bg); line-height:0; }
.smop-gif-result img{ width:100%; height:70px; object-fit:cover; display:block; }
.smop-gif-result:hover{ outline:2px solid var(--smop-brand); }
.smop-gif-loading, .smop-gif-empty{ grid-column:1 / -1; font-size:12px; color:var(--smop-ink-faint); text-align:center; padding:16px 0; }
.smop-gif-preview{ position:relative; display:inline-block; margin:6px 0; }
.smop-gif-preview img{ max-width:160px; max-height:120px; border-radius:8px; display:block; }
.smop-gif-preview-remove{ position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:999px; border:none; background:var(--smop-ink); color:var(--smop-bg); cursor:pointer; line-height:1; font-size:14px; }
.smop-reply-gif{ margin:8px 0; }
.smop-reply-gif img{ max-width:220px; border-radius:10px; display:block; }
/* ---- My Day (feature-flagged) ---- */
.smop-myday{
  background:var(--smop-surface); border:1px solid var(--smop-border); border-radius:var(--smop-radius);
  box-shadow:var(--smop-shadow); padding:18px 20px; margin-bottom:20px;
}
.smop-myday-eyebrow{ font-size:11px; letter-spacing:.06em; color:var(--smop-ink-soft); margin-bottom:4px; }
.smop-myday h2{ font-size:17px; margin:0 0 3px; }
.smop-myday-sub{ font-size:13px; color:var(--smop-ink-soft); margin:0 0 14px; }

.smop-myday-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.smop-myday-metric{
  display:flex; flex-direction:column; gap:2px; background:var(--smop-brand-light); border-radius:var(--smop-radius-sm);
  padding:9px 8px; text-decoration:none; color:inherit; min-width:0;
}
.smop-myday-metric b{ font-size:19px; font-weight:700; color:var(--smop-brand); line-height:1; }
.smop-myday-metric span{ font-size:10.5px; color:var(--smop-ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.smop-myday-metric.is-overdue b{ color:var(--smop-danger); }
.smop-myday-metric:focus-visible{ outline:2px solid var(--smop-brand); outline-offset:2px; }

.smop-myday-item{
  display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-bottom:1px solid var(--smop-border);
}
.smop-myday-item:last-of-type{ border-bottom:0; }
.smop-myday-item-icon{
  width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  flex:none; background:var(--smop-brand-light); color:var(--smop-brand);
}
.smop-myday-item-icon .dashicons{ font-size:16px; width:16px; height:16px; }
.smop-myday-item-icon.is-overdue{ background:var(--smop-danger-bg); color:var(--smop-danger); }
.smop-myday-item-copy{ flex:1; min-width:0; }
.smop-myday-item-copy b{ display:block; font-size:13.5px; font-weight:600; margin-bottom:2px; }
.smop-myday-item-copy span{ display:block; font-size:12px; color:var(--smop-ink-soft); }
.smop-myday-open{
  font-size:12px; font-weight:600; color:var(--smop-brand); text-decoration:none; white-space:nowrap; padding-top:2px; flex:none;
}
.smop-myday-open:focus-visible{ outline:2px solid var(--smop-brand); outline-offset:2px; border-radius:4px; }
.smop-myday-item-empty .smop-myday-item-copy span{ color:var(--smop-success); }

.smop-myday-quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:6px; }
.smop-myday-quick a, .smop-myday-quick-disabled{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  min-height:64px; background:var(--smop-paper); border:1px solid var(--smop-border); border-radius:var(--smop-radius-sm);
  text-decoration:none; color:inherit; font-size:11px; text-align:center; padding:8px 4px;
}
.smop-myday-quick a .dashicons{ font-size:17px; width:17px; height:17px; color:var(--smop-brand); }
.smop-myday-quick a:hover{ border-color:var(--smop-brand); }
.smop-myday-quick a:active{ background:var(--smop-brand-light); }
.smop-myday-quick a:focus-visible{ outline:2px solid var(--smop-brand); outline-offset:2px; }
.smop-myday-quick-disabled{ opacity:.55; cursor:default; }
.smop-myday-quick-disabled .dashicons{ font-size:17px; width:17px; height:17px; color:var(--smop-ink-soft); }
.smop-myday-quick-disabled small{ font-size:9.5px; }

.smop-filter-banner{
  background:var(--smop-brand-light); border:1px solid var(--smop-border); border-radius:var(--smop-radius-sm);
  padding:8px 12px; font-size:12.5px; margin-bottom:12px;
}
.smop-filter-banner a{ color:var(--smop-brand); font-weight:600; }

@media (max-width:480px){
  .smop-myday{ padding:15px; }
  .smop-myday-metrics{ gap:6px; }
  .smop-myday-metric{ padding:8px 6px; }
  .smop-myday-metric b{ font-size:17px; }
}
/* ---- Reports module ---- */
.smop-quicklink-icon{ position:relative; }
.smop-quicklink-badge{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:var(--smop-danger); color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1; box-shadow:0 0 0 2px var(--smop-surface);
}

.smop-reports-period{ padding:12px 0; border-bottom:1px solid var(--smop-border); }
.smop-reports-period:last-of-type{ border-bottom:0; }
.smop-reports-period-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.smop-reports-period-head strong{ font-size:14px; }

.smop-reports-pill{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600;
  background:var(--smop-ink-faint); color:var(--smop-ink-soft);
}
.smop-reports-pill-submitted{ background:var(--smop-accent-bg); color:var(--smop-accent); }
.smop-reports-pill-changes_requested{ background:var(--smop-warning-bg); color:var(--smop-warning); }
.smop-reports-pill-reviewed{ background:var(--smop-success-bg); color:var(--smop-success); }

.smop-reports-note{
  background:var(--smop-warning-bg); border-radius:var(--smop-radius-sm); padding:9px 11px;
  font-size:12.5px; margin-bottom:12px; color:var(--smop-ink);
}
.smop-reports-subhead{ font-size:13.5px; margin:18px 0 8px; color:var(--smop-ink-soft); }
.smop-reports-detail p{ font-size:13.5px; line-height:1.5; margin:0 0 14px; }

.smop-reports-requirements{ display:flex; flex-direction:column; gap:2px; }
.smop-reports-requirement-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--smop-border);
}
.smop-reports-requirement-row:last-of-type{ border-bottom:0; }
.smop-reports-requirement-name{ font-size:13px; }
.smop-reports-requirement-row select{ width:auto; margin-bottom:0; }

.smop-notice{ border-radius:var(--smop-radius-sm); padding:9px 12px; font-size:13px; margin-bottom:14px; }
.smop-notice-success{ background:var(--smop-success-bg); color:var(--smop-success); }
.smop-notice-warning{ background:var(--smop-warning-bg); color:var(--smop-warning); }

.smop-link{ display:inline-block; color:var(--smop-brand); font-size:13px; font-weight:600; margin-bottom:12px; text-decoration:none; }
.smop-link:hover{ text-decoration:underline; }

@media (max-width:480px){
  .smop-reports-period-head{ gap:6px; }
}