/* ══════════════════════════════════════════════════════════════
   OVA Mission Control — mc-drawers.css
   Drawer/modal/panel/sidebar styles
   v20260328
   ══════════════════════════════════════════════════════════════ */

#notification-center[hidden],

#notification-center-backdrop[hidden],

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-box {
  background: #111118;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 24px 28px;
  width: 700px;
  max-width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.8);
  position: relative;
  animation: slideUpModal 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--glass-border);
  color: var(--muted2);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
}

.modal-close:hover { background: rgba(255,255,255,0.18); color: var(--text); }

.modal-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  padding-right: 32px;
}

.notification-center-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(2, 8, 24, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.notification-center {
  position: fixed;
  right: 10px;
  top: max(10px, env(safe-area-inset-top, 0px));
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100vw - 20px));
  z-index: 61;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.24);
  background: rgba(9, 15, 31, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 38px rgba(0,0,0,0.45);
}

.notification-center-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.notification-center-title { font-size: 0.92rem; font-weight: 700; }

.notification-center-sub { font-size: 0.74rem; color: var(--muted2); }

.notification-item {
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.65);
  padding: 10px;
}

.notification-item.unread { border-color: rgba(249,115,22,0.5); }

.notification-item-title { font-size: 0.8rem; font-weight: 600; margin-bottom: 2px; }

.notification-item-meta { font-size: 0.7rem; color: var(--muted); margin-bottom: 4px; }

.notification-item-body { font-size: 0.75rem; color: var(--muted2); }

.hamburger-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.hamburger-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hamburger-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(300px, 85vw);
  background: #111118;
  border-left: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  z-index: 1;
  animation: slideInRight 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.hamburger-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--glass-border);
  padding-top: max(20px, env(safe-area-inset-top, 20px));
}

.hamburger-menu-title {
  font-size: 1.05rem;
  font-weight: 700;
}

.hamburger-menu-items {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.hamburger-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  text-align: left;
  transition: background 0.15s;
}

.hamburger-menu-item:hover {
  background: rgba(255,255,255,0.07);
}

.modal-box.tm-wide, .tm-layout ~ .modal-close { }

.tm-layout { display:flex; gap:20px; }

.tm-left { flex:1; min-width:0; }

.tm-right { width:200px; flex-shrink:0; border-left:1px solid var(--border); padding-left:16px; }

.tm-label { font-size:0.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px; font-weight:600; }

.tm-meta-row { margin-bottom:10px; }

.tm-meta-val { font-size:0.82rem; color:var(--text); }

.tm-select { width:100%; background:var(--bg3); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:5px 7px; font-size:0.78rem; }

.tm-textarea { width:100%; background:var(--bg3); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:8px 10px; font-size:0.8rem; resize:vertical; min-height:60px; }

.tm-subtasks { margin:0 0 6px 16px; padding:0; font-size:0.78rem; color:var(--muted2); }

.tm-copy-btn { background:none; border:1px solid var(--border); color:var(--muted2); border-radius:4px; padding:1px 5px; font-size:0.7rem; cursor:pointer; margin-left:4px; }

.tm-copy-btn:hover { border-color:var(--accent); color:var(--accent); }

.tm-small-btn { background:var(--bg3); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:4px 10px; font-size:0.75rem; cursor:pointer; }

.tm-small-btn:hover { border-color:var(--accent); }

.tm-tabs { display:flex; gap:0; margin:14px 0 10px; border-bottom:1px solid var(--border); }

.tm-tab { background:none; border:none; color:var(--muted); font-size:0.78rem; padding:6px 14px; cursor:pointer; border-bottom:2px solid transparent; }

.tm-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

.tm-tab-content { }

.tm-comment { background:var(--bg3); border:1px solid var(--border); border-radius:7px; padding:8px 10px; margin-bottom:8px; }

.tm-comment-header { font-size:0.75rem; margin-bottom:3px; }

.tm-comment-time { color:var(--muted); font-size:0.68rem; margin-left:6px; }

.tm-comment-text { font-size:0.8rem; color:var(--muted2); }

.tm-reply { margin-left:16px; margin-top:6px; padding:6px 8px; background:var(--bg2); border-left:2px solid var(--border); border-radius:4px; }

.tm-reply-btn { background:none; border:none; color:var(--muted); font-size:0.7rem; cursor:pointer; margin-top:4px; }

.tm-reply-btn:hover { color:var(--accent); }

.tm-reply-form { margin-top:6px; }

.tm-reply-form textarea { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:5px; padding:6px 8px; font-size:0.78rem; resize:none; }

.tm-history-item { display:flex; gap:8px; align-items:flex-start; margin-bottom:10px; font-size:0.8rem; }

.tm-history-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:5px; flex-shrink:0; }

.tm-attachment { display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; padding:4px 0; border-bottom:1px solid var(--border); }

.tm-att-btn { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:0.75rem; padding:2px 4px; text-decoration:none; }

.tm-att-btn:hover { color:var(--accent); }

.notification-center {
  background: rgba(14,14,22,0.95) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border-color: var(--glass-border) !important;
  border-radius: var(--radius) !important;
}

.notification-item {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
}

.modal-title, .modal-desc, .screen-title, .screen-subtitle,

/* ─── Hamburger Menu — Solid Full Screen (Part 5) ──────────────────────── */
#hamburger-menu, .hamburger-menu {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #111118 !important;
  background-color: #111118 !important;
  z-index: 99999 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow-y: auto !important;
}

/* ─── ALL Drawers / Modals / Alerts — Solid Backgrounds (v20260328c) ─────── */
.drawer,[class*="drawer"],.modal,[class*="modal"],[role="dialog"],
.task-modal,.task-drawer,.alert,.toast,[class*="alert"],[class*="toast"],
.notification-center,#notification-center,[class*="panel"],[class*="popup"] {
  background: #111118 !important;
  background-color: #111118 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media(max-width:768px){
  .drawer,[class*="drawer"],.modal,[class*="modal"],[role="dialog"] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    z-index: 99998 !important;
    overflow-y: auto !important;
  }
}

/* Close buttons on all drawers */
[class*="close"],[id*="close"],[aria-label*="close"],[aria-label*="Close"] {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}