/* ==========================================================================
   UltraGuard Pro — Base & Layout Shell  v3.0
   Single source of truth. No conflicting @media blocks.
   ========================================================================== */

/* 1. Box-sizing */
.ultraguard-component, .ultraguard-component * { box-sizing: border-box; }/* 2. Framework shell */
.ultraguard-framework {
  font-family: var(--ug-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: var(--ug-font-size-md, 14px);
  line-height: var(--ug-line-height-normal, 1.5);
  color: var(--ug-dark);
  background: var(--ug-bg-secondary);
  margin: 16px 16px 16px 0;
  padding: 0;
  border-radius: var(--ug-radius-xl);
  min-height: calc(100vh - 80px);
  position: relative;
  width: 99%;
  -webkit-font-smoothing: antialiased;
}
.wp-admin .ultraguard-framework { margin-left: 0; margin-right: 16px; }
.folded .ultraguard-framework   { margin-left: 0; }
.ultraguard-framework .dashicons { line-height:1; display:inline-flex; align-items:center; justify-content:center; }

/* 3. App layout */
.ultraguard-app-layout {
  display: flex;
  min-height: calc(100vh - 80px);
  background: var(--ug-bg-secondary);
  border-radius: var(--ug-radius-xl);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. SIDEBAR
   Desktop  (>1024px) : fixed-width inline panel on the left
   Mobile   (≤1024px) : slide-in drawer, topbar toggle button
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shell ── */
.ultraguard-app-sidebar {
  width: var(--ug-sidebar-width, 220px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--ug-sidebar-bg, var(--ug-bg-primary));
  border-right: 1px solid var(--ug-border);
}

/* ── Header (topbar) ── */
.ultraguard-app-sidebar-header {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 60px;
  min-height: 60px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--ug-border);
  background: var(--ug-bg-primary);
  gap: 10px;
}

/* ── Hamburger: hidden on desktop ── */
.ultraguard-app-sidebar-toggle {
  display: none;
  flex-shrink: 0;
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  padding: 0;
  border: 1px solid var(--ug-border);
  border-radius: var(--ug-radius-md);
  background: transparent;
  color: var(--ug-text, var(--ug-dark));
  cursor: pointer;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.ultraguard-app-sidebar-toggle:hover,
.ultraguard-app-sidebar-toggle:focus-visible {
  background: var(--ug-bg-hover, var(--ug-bg-secondary));
  border-color: var(--ug-primary);
  color: var(--ug-primary);
  outline: none;
}
.ultraguard-app-sidebar-toggle .dashicons { font-size:20px; width:20px; height:20px; pointer-events:none; }

/* ── Logo ── */
.ultraguard-app-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex:1; min-width:0; }
.ultraguard-app-logo-icon {
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background: var(--ug-gradient-primary);
  color:#fff; border-radius: var(--ug-radius-md); flex-shrink:0;
}
.ultraguard-app-logo-icon .dashicons, .ultraguard-app-logo-icon i { font-size:20px; width:20px; height:20px; line-height:1; }
.ultraguard-app-logo-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ultraguard-app-logo-primary { font-size:15px; font-weight:700; color:var(--ug-dark); line-height:1.1; letter-spacing:-.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ultraguard-app-logo-secondary { font-size:10px; font-weight:600; color:var(--ug-primary); text-transform:uppercase; letter-spacing:1.2px; }

/* ── Drawer: desktop = normal flex column ── */
.ultraguard-app-sidebar-drawer {
  display: flex; flex:1; min-height:0; flex-direction:column; overflow:hidden;
}

/* ── Nav ── */
.ultraguard-app-sidebar-nav {
  flex:1; padding:12px 0;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.ultraguard-app-sidebar-nav::-webkit-scrollbar { display:none; }
.ultraguard-app-sidebar-group { margin-bottom:4px; }
.ultraguard-app-sidebar-group-title {
  font-size:10px; font-weight:700; color:var(--ug-gray-light);
  text-transform:uppercase; letter-spacing:1.4px; padding:14px 18px 6px;
}
.ultraguard-app-sidebar-item { position:relative; }
.ultraguard-app-sidebar-link {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; margin:1px 10px;
  color:var(--ug-text-secondary, var(--ug-gray));
  text-decoration:none; border-radius:var(--ug-radius-md);
  min-height:38px; cursor:pointer; user-select:none;
  transition:background .15s, color .15s;
}
.ultraguard-app-sidebar-link:hover { background:var(--ug-bg-hover, var(--ug-bg-secondary)); color:var(--ug-text, var(--ug-dark)); }
.ultraguard-app-sidebar-link.active { background:var(--ug-sidebar-active-bg, rgba(14,165,233,.08)); color:var(--ug-sidebar-active-fg, var(--ug-primary)); font-weight:600; }
.ultraguard-app-sidebar-link .dashicons,
.ultraguard-app-sidebar-link i,
.ultraguard-app-sidebar-child-link .dashicons,
.ultraguard-app-sidebar-child-link i { font-size:17px; width:17px; height:17px; color:inherit; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.ultraguard-app-sidebar-link-icon,
.ultraguard-app-sidebar-child-icon { width:17px; min-width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; color:inherit; flex-shrink:0; }
.ultraguard-app-sidebar-link-text { font-size:13px; font-weight:500; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ultraguard-app-sidebar-arrow { font-size:16px; width:16px; height:16px; flex-shrink:0; color:var(--ug-gray-light); }

/* ── Children ── */
.ultraguard-app-sidebar-children { overflow:hidden; display:none; }
.ultraguard-app-sidebar-children.expanded { display:block; }
.ultraguard-app-sidebar-child-link {
  display:flex; align-items:center; gap:10px;
  padding:7px 12px 7px 32px; margin:1px 10px;
  color:var(--ug-text-secondary, var(--ug-gray));
  text-decoration:none; border-radius:var(--ug-radius-md);
  min-height:34px; font-size:12.5px;
  transition:background .15s, color .15s;
}
.ultraguard-app-sidebar-child-link:hover { background:var(--ug-bg-hover, var(--ug-bg-secondary)); color:var(--ug-text, var(--ug-dark)); }
.ultraguard-app-sidebar-child-link.active { background:var(--ug-sidebar-active-bg, rgba(14,165,233,.08)); color:var(--ug-sidebar-active-fg, var(--ug-primary)); font-weight:600; }

/* ── Sidebar footer ── */
.ultraguard-app-sidebar-footer {
  padding:14px 16px; border-top:1px solid var(--ug-border); background:var(--ug-bg-primary);
  display:flex; align-items:center; gap:12px; font-size:var(--ug-font-size-sm);
  color:var(--ug-gray); min-height:60px; flex-shrink:0;
}
.ultraguard-app-sidebar-user { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.ultraguard-user-avatar { width:32px; height:32px; border-radius:var(--ug-radius-round); background:var(--ug-gradient-primary); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:600; flex-shrink:0; }
.ultraguard-user-info { flex:1; min-width:0; }
.ultraguard-user-name { font-size:13px; font-weight:600; color:var(--ug-dark); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ultraguard-user-role { font-size:11px; color:var(--ug-gray); }

/* ───────────────────────────────────────────────────────────────────────────
   4b. SIDEBAR — MOBILE / TABLET  ≤ 1024px
   Drawer slides in from left. Single clean /* Very small phones: full-width drawer */
/* 782px tighten */
/* 5. Main content area */
.ultraguard-app-content-wrapper { flex:1; display:flex; flex-direction:column; background:var(--ug-bg-canvas, var(--ug-bg-secondary)); min-height:100%; overflow-x:hidden; min-width:0; }
.ultraguard-page-header-wrapper { background:var(--ug-bg-primary); border-bottom:1px solid var(--ug-border); padding:16px 24px; position:sticky; top:0; z-index:var(--ug-z-sticky,900); transform:translateZ(0); box-shadow:0 1px 0 var(--ug-border); }
.ultraguard-page-header { display:flex; justify-content:space-between; align-items:center; gap:var(--ug-spacing-lg); }
.ultraguard-page-title { flex:1; min-width:0; }
.ultraguard-page-title-main { display:flex; align-items:center; gap:var(--ug-spacing-sm); margin:0; }
.ultraguard-page-title-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--ug-gradient-primary); color:#fff; border-radius:var(--ug-radius-md); font-size:20px; flex-shrink:0; }
.ultraguard-page-title-icon .dashicons { font-size:20px; width:20px; height:20px; }
.ultraguard-page-title-text { flex:1; min-width:0; }
.ultraguard-page-title h1 { margin:0; font-size:22px; font-weight:700; color:var(--ug-dark); line-height:1.2; letter-spacing:-.4px; }
.ultraguard-page-subtitle { margin:4px 0 0; font-size:13px; color:var(--ug-text-secondary, var(--ug-gray)); line-height:var(--ug-line-height-normal); }
.ultraguard-page-actions { display:flex; gap:var(--ug-spacing-sm); align-items:center; flex-wrap:wrap; flex-shrink:0; }
.ultraguard-page-content-wrapper { flex:1; display:flex; gap:20px; padding:24px; overflow-x:hidden; }
.ultraguard-main-content { flex:1; min-width:0; }
.ultraguard-page-no-sidebar .ultraguard-page-content-wrapper { gap:0; }
.ultraguard-page-no-sidebar .ultraguard-main-content { width:100%; }
.ultraguard-sidebar { width:320px; flex-shrink:0; }
.ultraguard-page-footer-wrapper { background:var(--ug-bg-primary); border-top:1px solid var(--ug-border); padding:var(--ug-spacing-md) var(--ug-spacing-xl); position:sticky; bottom:0; z-index:var(--ug-z-base,1); transform:translateZ(0); box-shadow:0 -2px 8px rgba(0,0,0,.06); }
.ultraguard-page-footer { display:flex; justify-content:space-between; align-items:center; gap:var(--ug-spacing-lg); }
.ultraguard-page-footer-actions, .ultraguard-page-footer-submit { display:flex; gap:var(--ug-spacing-sm); align-items:center; }

/* 6. Generic containers */
.ultraguard-container, .ultraguard-large-container, .ultraguard-section,
.ultraguard-mini-section, .module, .module-set {
  background:var(--ug-bg-primary); border:1px solid var(--ug-border);
  border-radius:var(--ug-radius-lg); margin-bottom:18px;
  padding:20px 22px; box-shadow:var(--ug-shadow-xs);
}
.ultraguard-large-container { padding:24px 28px; }
.ultraguard-mini-section { padding:14px 16px; border-radius:var(--ug-radius-md); }
.ultraguard-section-header { margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--ug-border); display:flex; justify-content:space-between; align-items:flex-start; gap:var(--ug-spacing-md); }
.ultraguard-section-header h3 { margin:0; font-size:15px; font-weight:600; color:var(--ug-dark); }
.ultraguard-section-description { font-size:12.5px; color:var(--ug-text-secondary, var(--ug-gray)); margin:0; line-height:1.5; }
.ultraguard-section-actions { display:flex; gap:var(--ug-spacing-sm); align-items:center; flex-shrink:0; }
/* 7. Breadcrumbs */
.ultraguard-breadcrumbs { display:flex; align-items:center; gap:var(--ug-spacing-sm); font-size:var(--ug-font-size-sm); color:var(--ug-gray); margin-bottom:var(--ug-spacing-md); flex-wrap:wrap; }
.ultraguard-breadcrumb-item { display:flex; align-items:center; gap:var(--ug-spacing-sm); }
.ultraguard-breadcrumb-item:not(:last-child)::after { content:'›'; color:var(--ug-gray-light); }
.ultraguard-breadcrumb-link { color:var(--ug-gray); text-decoration:none; transition:color var(--ug-transition-fast); }
.ultraguard-breadcrumb-link:hover { color:var(--ug-primary); }
.ultraguard-breadcrumb-current { color:var(--ug-primary); font-weight:600; }

/* 8. Grid responsive */
/* 9. Accessibility */
.ultraguard-framework *:focus-visible { outline:2px solid var(--ug-primary); outline-offset:2px; }
.ultraguard-button:focus-visible, .ultraguard-field:focus-visible, .ultraguard-tab-nav-link:focus-visible { outline:none; box-shadow:var(--ug-shadow-focus); }
/* Print */
@media print {
  .ultraguard-app-sidebar, .ultraguard-page-actions, .ultraguard-section-actions,
  .ultraguard-card-actions, .ultraguard-button, .ultraguard-page-footer-wrapper { display:none !important; }
  .ultraguard-framework { box-shadow:none; border:1px solid #000; margin:0; width:100%; }
  .ultraguard-app-layout { display:block; }
  .ultraguard-page-header-wrapper { position:static; background:#fff !important; }
}
/* ── Responsive breakpoints (consolidated) ──────────────────────────── */

@media (prefers-reduced-motion:reduce) {
*, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

@media screen and (max-width:1024px) and (min-width:783px) {
.ultraguard-col-9,.ultraguard-col-10,.ultraguard-col-11,.ultraguard-col-12 { grid-column:span 12; }
  .ultraguard-col-7,.ultraguard-col-8 { grid-column:span 6; }
}

@media screen and (max-width: 1024px) {

  /* Framework */
  .wp-admin .ultraguard-framework { width:100%; margin:0; border-radius:var(--ug-radius-lg); }
  .ultraguard-app-layout { flex-direction:column; min-height:auto; border-radius:var(--ug-radius-lg); }

  /* Sidebar becomes full-width topbar.
     position:relative + high z-index creates a stacking context so the
     absolute-positioned drawer renders above the page content area.     */
  .ultraguard-app-sidebar {
    width: 100%;
    flex-shrink: 0;
    border-right: none;
    border-bottom: 1px solid var(--ug-border);
    background: var(--ug-bg-primary);
    position: relative;
    /* z-index must exceed the content wrapper's sticky header (900) so
       the absolute drawer stacks above it when open.                    */
    z-index: 1000;
    /* Allow the drawer to visually overflow the sidebar's own 60px height */
    overflow: visible;
  }

  /* Sticky topbar strip */
  .ultraguard-app-sidebar-header {
    height: 60px; min-height: 60px;
    padding: 0 14px;
    position: sticky; top: 0; z-index: 1100;
    background: var(--ug-bg-primary);
    border-bottom: 1px solid var(--ug-border);
  }

  /* Show hamburger */
  .ultraguard-app-sidebar-toggle {
    display: inline-flex;
    order: -1;
  }

  /* Backdrop — covers the plugin's own content area only.
     Injected by JS inside .ultraguard-framework, so position:absolute
     naturally stays within our layout column regardless of WP menu state. */
  .ug-sidebar-backdrop {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.45);
    z-index: 1049;
    cursor: pointer;
  }
  .sidebar-open .ug-sidebar-backdrop { display: block; }

  /* Drawer: position:absolute relative to .ultraguard-app-sidebar.
     This means it always aligns with OUR content area, regardless of
     which WP admin menu state is active (expanded, folded, or hidden).
     No hardcoded pixel offsets for WP sidebar width needed.             */
  .ultraguard-app-sidebar-drawer {
    flex: unset; min-height: unset; overflow: hidden;
    position: absolute;
    top: 60px;                  /* directly below the 60px topbar strip */
    left: 0;
    width: 260px;
    max-width: 85%;
    height: calc(100vh - 60px - var(--wp-admin--admin-bar--height, 32px));
    background: var(--ug-bg-primary);
    border-right: 1px solid var(--ug-border);
    box-shadow: 4px 0 24px rgba(15,23,42,0.18);
    z-index: 1050;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
                visibility 0s linear 0.28s;
    display: flex;
    flex-direction: column;
    /* No padding-top needed — drawer starts below the topbar already */
  }

  /* Open state */
  .sidebar-open .ultraguard-app-sidebar-drawer {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
                visibility 0s linear 0s;
  }

  /* Nav inside drawer — this element scrolls */
  .ultraguard-app-sidebar-nav {
    flex: 1; padding: 8px 0 16px;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Larger touch targets inside drawer */
  .ultraguard-app-sidebar-link    { min-height:44px; padding:10px 12px; }
  .ultraguard-app-sidebar-child-link { min-height:40px; padding:9px 12px 9px 32px; }

  /* Body scroll lock when nav open */
  body.ultraguard-mobile-nav-open { overflow:hidden; position:fixed; width:100%; }
}

@media screen and (max-width:1024px) {
.ultraguard-page-header-wrapper { padding:14px 16px; }
  .ultraguard-page-header { flex-wrap:wrap; gap:10px; }
  .ultraguard-page-actions { width:100%; gap:6px; }
  .ultraguard-page-content-wrapper { padding:18px 16px; flex-direction:column; gap:16px; }
  .ultraguard-sidebar { width:100%; }
  .ultraguard-page-footer { flex-direction:column; align-items:stretch; }
  .ultraguard-page-footer-actions, .ultraguard-page-footer-submit { width:100%; flex-wrap:wrap; gap:6px; }
.ultraguard-container, .ultraguard-large-container, .ultraguard-section,
  .ultraguard-mini-section, .module, .module-set { padding:16px; }
}



@media screen and (max-width:782px) {
.ultraguard-page-header-wrapper { padding:12px 14px; }
  .ultraguard-page-header { flex-direction:column; align-items:flex-start; gap:10px; }
  .ultraguard-page-title h1 { font-size:18px; }
  .ultraguard-page-title-icon { width:34px; height:34px; font-size:17px; }
  .ultraguard-page-subtitle { font-size:12px; }
  .ultraguard-page-content-wrapper { padding:12px; gap:12px; }
  .ultraguard-page-footer-wrapper { padding:12px 14px; }
  .ultraguard-page-actions .ultraguard-button,
  .ultraguard-page-footer .ultraguard-button { flex:1 1 auto; justify-content:center; }
.ultraguard-section-header { flex-direction:column; gap:8px; }
  .ultraguard-section-actions { width:100%; flex-wrap:wrap; gap:6px; }
.ultraguard-col-1,.ultraguard-col-2,.ultraguard-col-3,.ultraguard-col-4,
  .ultraguard-col-5,.ultraguard-col-6,.ultraguard-col-7,.ultraguard-col-8,
  .ultraguard-col-9,.ultraguard-col-10,.ultraguard-col-11,.ultraguard-col-12
  { grid-column:span 12; }
}

@media screen and (max-width: 782px) {
.wp-admin .ultraguard-framework { border-radius:0; }
  .ultraguard-app-layout { border-radius:0; }
  .ultraguard-app-sidebar-header { height:56px; min-height:56px; padding:0 12px; }
  /* Mobile: topbar is 56px, no padding-top needed (drawer starts below topbar) */
  .ultraguard-app-sidebar-drawer {
    top: 56px;                  /* below the 56px mobile topbar */
    left: 0;
    width: min(280px, 85%);
    max-width: 85%;
    height: calc(100vh - 56px - 46px);  /* minus mobile topbar and WP admin bar */
  }
}

@media screen and (max-width: 400px) {
.ultraguard-app-sidebar-drawer { width:100%; max-width:100%; border-right:none; }
}
