/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f5f6fa;color:#1a1a2e;min-height:100vh;display:flex;flex-direction:column;}

/* ══════════════════════════════════════
   TOP BAR  (global)
══════════════════════════════════════ */
.topbar{
  height:56px;display:flex;align-items:center;
  background:#fff;border-bottom:1px solid #e8eaed;
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:0 20px;gap:16px;
}
.topbar-logo{display:flex;align-items:center;gap:8px;text-decoration:none;width:162px;flex-shrink:0;}
.topbar-logo img{height:28px;}
.topbar-company{font-size:14px;color:#374151;flex:1;padding-left:16px;border-left:1px solid #e8eaed;}
.topbar-icons{display:flex;align-items:center;gap:4px;margin-left:auto;}
.topbar-icon-btn{
  width:36px;height:36px;border-radius:8px;border:none;background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;
  transition:background .15s;
}
.topbar-icon-btn:hover{background:#f3f4f6;}
.topbar-icon-btn svg{width:20px;height:20px;}

/* ── User account dropdown ── */
.user-account-wrap{position:relative;}
.user-dropdown{
  position:absolute;right:0;top:calc(100% + 6px);
  background:#fff;border:1px solid #e8eaed;border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.10);min-width:180px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:400;overflow:hidden;
}
.user-account-wrap:hover .user-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.user-dropdown-info{padding:12px 16px 10px;border-bottom:1px solid #f3f4f6;}
.user-dropdown-info .uname{font-size:13px;font-weight:600;color:#111;}
.user-dropdown-info .uemail{font-size:11.5px;color:#9ca3af;margin-top:2px;}
.user-dropdown-item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 16px;font-size:13px;
  color:#374151;background:none;border:none;cursor:pointer;
  text-align:left;font-family:inherit;transition:background .15s;
}
.user-dropdown-item:hover{background:#f9fafb;}
.user-dropdown-item.logout{color:#dc2626;}
.user-dropdown-item.logout:hover{background:#fff1f2;}
.user-dropdown-item svg{width:15px;height:15px;flex-shrink:0;}

/* ══════════════════════════════════════
   SIDEBAR  (global)
══════════════════════════════════════ */
.sidebar{
  width:200px;background:#fff;border-right:1px solid #e8eaed;
  position:fixed;top:56px;left:0;bottom:0;z-index:100;
  display:flex;flex-direction:column;transition:width .25s;overflow:hidden;
}
.sidebar.pinned{width:200px;}
.sidebar.collapsed{width:56px;}
.sidebar.collapsed .pin-menu span,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .sidebar-user-name,
.sidebar.collapsed .sidebar-user-email{display:none;}
.sidebar.collapsed .nav-item{justify-content:center;padding:9px 0;}
.sidebar.collapsed .sidebar-footer{justify-content:center;padding:14px 0;}
.pin-menu{
  display:flex;align-items:center;gap:6px;padding:10px 16px;
  font-size:12px;color:#ea580c;cursor:pointer;border:none;background:none;
  font-family:inherit;white-space:nowrap;
}
.pin-menu svg{width:16px;height:16px;flex-shrink:0;color:#ea580c;}
.sidebar.collapsed .pin-menu{justify-content:center;padding:10px 0;}

.nav-menu{flex:1;padding:4px 10px;display:flex;flex-direction:column;gap:2px;}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  font-size:13.5px;color:#4b5563;cursor:pointer;border:none;background:none;
  font-family:inherit;text-align:left;white-space:nowrap;width:100%;
  transition:background .15s,color .15s;
}
.nav-item:hover{background:#f3f4f6;color:#111;}
.nav-item.active{background:#fff7ed;color:#ea580c;font-weight:500;}
.nav-item svg{width:18px;height:18px;flex-shrink:0;}
.nav-item.active svg{color:#ea580c;}

.sidebar-footer{
  padding:14px 14px;border-top:1px solid #e8eaed;
  display:flex;align-items:center;gap:10px;
}
.avatar-sm{
  width:32px;height:32px;border-radius:50%;background:#e5e7eb;
  display:flex;align-items:center;justify-content:center;font-size:11px;
  font-weight:600;color:#6b7280;flex-shrink:0;
}
.sidebar-user-name{font-size:12.5px;font-weight:600;color:#111;white-space:nowrap;}
.sidebar-user-email{font-size:11px;color:#9ca3af;white-space:nowrap;}

/* ══════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════ */
.main{margin-top:56px;margin-left:200px;min-height:calc(100vh - 56px);transition:margin-left .25s;}
.main.sidebar-collapsed{margin-left:56px;}

/* ══════════════════════════════════════
   PAGE WRAPPER
══════════════════════════════════════ */
.page{display:none;padding:0;background:#fff;min-height:calc(100vh - 56px);}
.page.active{display:flex;flex-direction:column;}

.page-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px 14px;border-bottom:1px solid #e8eaed;background:#fff;
}
.page-header-left h2{font-size:18px;font-weight:600;color:#111;}
.page-header-left p{font-size:13px;color:#6b7280;margin-top:3px;}
.page-body{padding:24px 28px;flex:1;position:relative;}

/* ── Primary button ── */
.btn-primary{
  background:#2563eb;color:#fff;border:none;border-radius:7px;
  padding:8px 18px;font-size:13.5px;font-weight:500;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:background .15s;
}
.btn-primary:hover{background:#1d4ed8;}
.btn-outline{
  background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:7px;
  padding:8px 18px;font-size:13.5px;font-weight:500;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:background .15s;
}
.btn-outline:hover{background:#f9fafb;}
.btn-danger-outline{
  background:#fff;color:#dc2626;border:1px solid #fecaca;border-radius:7px;
  padding:8px 18px;font-size:13.5px;font-weight:500;cursor:pointer;
  font-family:inherit;white-space:nowrap;
}

/* ══════════════════════════════════════
   TABLE
══════════════════════════════════════ */
.table-wrap{border:1px solid #e8eaed;border-radius:10px;overflow:hidden;}
table{width:100%;border-collapse:collapse;}
thead tr{background:#f9fafb;}
th{
  padding:11px 16px;text-align:left;font-size:12.5px;
  font-weight:600;color:#6b7280;border-bottom:1px solid #e8eaed;
  white-space:nowrap;
}
td{
  padding:13px 16px;font-size:13.5px;color:#374151;
  border-bottom:1px solid #f3f4f6;vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#fafafa;}

/* ── Status badges ── */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:500;}
.badge-draft{background:#fef3c7;color:#92400e;}
.badge-active{background:#d1fae5;color:#065f46;}
.badge-inactive{background:#fee2e2;color:#991b1b;}

/* ── Role badges ── */
.role-badge{display:inline-flex;align-items:center;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:500;border:1px solid #e5e7eb;color:#374151;background:#f9fafb;}
.role-badge.admin{background:#dbeafe;color:#1e40af;border-color:#bfdbfe;}
.role-badge.pm{background:#f3e8ff;color:#6b21a8;border-color:#e9d5ff;}
.role-badge.ux{background:#fce7f3;color:#9d174d;border-color:#fbcfe8;}
.role-badge.dev{background:#dcfce7;color:#166534;border-color:#bbf7d0;}
.role-badge.qa{background:#fef9c3;color:#854d0e;border-color:#fef08a;}
.role-badge.manager{background:#e0f2fe;color:#075985;border-color:#bae6fd;}

/* ── Project tags ── */
.proj-tag{display:inline-flex;align-items:center;padding:2px 9px;border-radius:5px;font-size:12px;background:#f3f4f6;color:#374151;border:1px solid #e5e7eb;margin-right:4px;}

/* ── 3-dot menu ── */
.action-cell{position:relative;}
.dots-btn{
  width:30px;height:30px;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:6px;
  color:#6b7280;font-size:18px;line-height:1;font-family:inherit;
  transition:background .15s;
}
.dots-btn:hover{background:#f3f4f6;}
.dropdown-menu{
  position:absolute;right:36px;top:6px;z-index:50;
  background:#fff;border:1px solid #e8eaed;border-radius:9px;
  box-shadow:0 4px 16px rgba(0,0,0,.10);min-width:150px;
  display:none;overflow:hidden;
}
.dropdown-menu.open{display:block;}
.dropdown-item{
  display:block;width:100%;padding:10px 16px;font-size:13px;
  color:#374151;background:none;border:none;cursor:pointer;
  text-align:left;font-family:inherit;transition:background .15s;
}
.dropdown-item:hover{background:#f9fafb;}
.dropdown-item.danger{color:#dc2626;}
.dropdown-item.danger:hover{background:#fff1f2;}

/* ── Member avatar ── */
.member-avatar{
  width:32px;height:32px;border-radius:50%;background:#6366f1;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:#fff;flex-shrink:0;margin-right:8px;
}

/* ══════════════════════════════════════
   SLIDE-IN DRAWER (Create Project / Add Member)
══════════════════════════════════════ */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.15);z-index:300;
  display:none;
}
.drawer-overlay.open{display:block;}
.drawer{
  position:fixed;top:56px;right:0;bottom:0;width:400px;
  background:#fff;border-left:1px solid #e8eaed;z-index:301;
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .25s ease;
}
.drawer.open{transform:translateX(0);}
.drawer-header{padding:20px 22px 16px;border-bottom:1px solid #f3f4f6;}
.drawer-header h3{font-size:16px;font-weight:600;color:#111;}
.drawer-body{flex:1;overflow-y:auto;padding:20px 22px;}
.drawer-footer{
  padding:16px 22px;border-top:1px solid #f3f4f6;
  display:flex;align-items:center;justify-content:space-between;
}

/* ── Form fields ── */
.form-group{margin-bottom:20px;}
.form-label{font-size:13px;font-weight:500;color:#374151;margin-bottom:6px;display:block;}
.form-sublabel{font-size:11.5px;color:#9ca3af;margin-top:2px;}
.form-input,.form-textarea{
  width:100%;border:none;border-bottom:1px solid #d1d5db;
  padding:7px 0;font-size:14px;color:#111;outline:none;background:transparent;
  font-family:inherit;transition:border-color .15s;
}
.form-input:focus,.form-textarea:focus{border-bottom-color:#2563eb;}
.form-textarea{resize:none;line-height:1.6;}

/* ── Tag input ── */
.tag-input-box{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  border-bottom:1px solid #d1d5db;padding:6px 0 8px;min-height:38px;
  cursor:pointer;position:relative;
}
.tag-input-box:focus-within{border-bottom-color:#2563eb;}
.tag-chip{
  display:inline-flex;align-items:center;gap:4px;
  background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;
  font-size:12px;padding:2px 9px;border-radius:20px;
}
.tag-chip .chip-remove{
  background:none;border:none;cursor:pointer;color:#3b82f6;
  font-size:14px;line-height:1;padding:0;font-family:inherit;
}
.tag-arrow{margin-left:auto;color:#9ca3af;font-size:12px;pointer-events:none;}
.tag-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;
  border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);
  z-index:10;display:none;
}
.tag-dropdown.open{display:block;}
.tag-option{padding:9px 14px;font-size:13px;color:#374151;cursor:pointer;}
.tag-option:hover{background:#f9fafb;}

/* ── Status radio ── */
.status-radio-group{display:flex;gap:24px;align-items:center;margin-top:4px;}
.radio-label{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:13.5px;color:#374151;}
.radio-label input[type=radio]{
  appearance:none;width:18px;height:18px;border:2px solid #d1d5db;
  border-radius:50%;cursor:pointer;position:relative;flex-shrink:0;
  transition:border-color .15s;
}
.radio-label input[type=radio]:checked{border-color:#ea580c;background:#ea580c;}
.radio-label input[type=radio]:checked::after{
  content:'';position:absolute;inset:3px;background:#fff;border-radius:50%;
}

/* ══════════════════════════════════════
   ACCESS CONTROL page specifics
══════════════════════════════════════ */
.ac-select-wrap{position:relative;width:280px;}
.ac-select{
  width:100%;padding:9px 36px 9px 12px;border:1px solid #d1d5db;border-radius:8px;
  font-size:13.5px;color:#374151;appearance:none;background:#fff;
  cursor:pointer;font-family:inherit;outline:none;
}
.ac-select:focus{border-color:#2563eb;}
.ac-select-wrap::after{
  content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:#9ca3af;pointer-events:none;font-size:12px;
}
.ac-table-wrap{border:1px solid #e8eaed;border-radius:10px;overflow:hidden;margin-top:20px;}
.ac-table{width:100%;border-collapse:collapse;}
.ac-table th{
  padding:11px 20px;text-align:left;font-size:12px;font-weight:600;
  color:#9ca3af;background:#f9fafb;border-bottom:1px solid #e8eaed;
  letter-spacing:.04em;text-transform:uppercase;
}
.ac-table td{padding:16px 20px;border-bottom:1px solid #f3f4f6;vertical-align:middle;}
.ac-table tbody tr:last-child td{border-bottom:none;}
.module-name{font-size:13.5px;font-weight:500;color:#111;}
.module-desc{font-size:12px;color:#9ca3af;margin-top:2px;}
/* custom checkbox */
.ac-check{
  width:18px;height:18px;border:2px solid #d1d5db;border-radius:4px;
  cursor:pointer;appearance:none;position:relative;transition:all .15s;
}
.ac-check:checked{background:#2563eb;border-color:#2563eb;}
.ac-check:checked::after{
  content:'';position:absolute;left:4px;top:1px;width:6px;height:10px;
  border:2px solid #fff;border-top:none;border-left:none;
  transform:rotate(40deg);
}
.ac-check:disabled{opacity:.35;cursor:not-allowed;}

/* ── Save Changes button state ── */
.btn-primary:disabled{background:#9ca3af;cursor:not-allowed;}

/* ══════════════════════════════════════
   DASHBOARD placeholder
══════════════════════════════════════ */
.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
.stat-card{
  background:#fff;border:1px solid #e8eaed;border-radius:12px;padding:20px;
}
.stat-card .stat-label{font-size:12px;color:#9ca3af;font-weight:500;margin-bottom:8px;}
.stat-card .stat-value{font-size:28px;font-weight:700;color:#111;}
.stat-card .stat-sub{font-size:12px;color:#6b7280;margin-top:4px;}

/* Pie chart card */
.pie-card{
  background:#fff;border:1px solid #e8eaed;border-radius:12px;padding:20px;
  display:flex;flex-direction:column;
}
.pie-card .stat-label{font-size:12px;color:#9ca3af;font-weight:500;margin-bottom:12px;}
.pie-chart-wrap{display:flex;align-items:center;gap:20px;}
.pie-svg{flex-shrink:0;}
.pie-legend{display:flex;flex-direction:column;gap:8px;}
.pie-legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#374151;}
.pie-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}

/* Dashboard widget tables */
.dash-widget{
  background:#fff;border:1px solid #e8eaed;border-radius:12px;
  overflow:hidden;margin-bottom:20px;
}
.dash-widget-header{
  padding:16px 20px 12px;border-bottom:1px solid #f3f4f6;
  display:flex;align-items:center;justify-content:space-between;
}
.dash-widget-header h3{font-size:14px;font-weight:600;color:#111;}
.dash-widget-header span{font-size:12px;color:#9ca3af;}
.dash-widget table{width:100%;border-collapse:collapse;}
.dash-widget th{
  padding:10px 16px;text-align:left;font-size:12px;
  font-weight:600;color:#6b7280;background:#f9fafb;
  border-bottom:1px solid #e8eaed;white-space:nowrap;
}
.dash-widget td{
  padding:12px 16px;font-size:13px;color:#374151;
  border-bottom:1px solid #f3f4f6;vertical-align:middle;
}
.dash-widget tbody tr:last-child td{border-bottom:none;}
.dash-widget tbody tr:hover{background:#fafafa;}
.dash-widgets-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
.toast{
  position:fixed;bottom:28px;right:28px;background:#111;color:#fff;
  padding:12px 20px;border-radius:8px;font-size:13.5px;
  opacity:0;transform:translateY(10px);transition:all .25s;
  pointer-events:none;z-index:9999;
}
.toast.show{opacity:1;transform:translateY(0);}

/* ══════════════════════════════════════
   CONFIRM MODAL
══════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:500;
  display:none;align-items:center;justify-content:center;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:#fff;border-radius:14px;padding:28px 28px 22px;
  width:380px;box-shadow:0 8px 32px rgba(0,0,0,.14);
}
.modal-box h4{font-size:16px;font-weight:600;color:#111;margin-bottom:8px;}
.modal-box p{font-size:13.5px;color:#6b7280;line-height:1.6;}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;}