/* =====================================================
   ERP GGN — Role Manager Styles
   File: css/role-manager.css
   ===================================================== */

/* ============ MODAL ============ */
.ggn-modal-backdrop{
  position:fixed; inset:0; z-index:10000;
  background:rgba(10,37,64,.6);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.ggn-modal{
  background:#fff; border-radius:20px;
  box-shadow:0 24px 60px rgba(10,37,64,.3);
  overflow:hidden;
  animation:modalIn .3s cubic-bezier(.34,1.2,.64,1);
  display:flex; flex-direction:column;
}
@keyframes modalIn{
  from{opacity:0;transform:scale(.95) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

.ggn-modal-header{
  padding:16px 20px;
  border-bottom:1px solid #F1F5F9;
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.ggn-modal-close{
  width:34px; height:34px; border-radius:10px;
  background:#F1F5F9; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#64748B; transition:background .2s;
}
.ggn-modal-close:hover{ background:#E2E8F0; color:#0A2540; }
.ggn-modal-close svg{
  width:18px; height:18px;
  stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.ggn-modal-body{
  padding:20px; overflow-y:auto; flex:1;
}
.ggn-modal-footer{
  padding:14px 20px;
  border-top:1px solid #F1F5F9;
  display:flex; gap:10px; justify-content:flex-end;
  flex-shrink:0;
  background:#FAFBFC;
}

/* ============ ROLE EDITOR ============ */
.rm-section{ margin-bottom:22px; }
.rm-section-title{
  font-size:12px; font-weight:800; color:#0A2540;
  text-transform:uppercase; letter-spacing:.6px;
  margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}

.rm-field{ margin-bottom:14px; }
.rm-label{
  display:block; font-size:11.5px; font-weight:700;
  color:#0A2540; text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:6px;
}
.rm-input{
  width:100%; padding:11px 14px;
  border:1.5px solid #E2E8F0; border-radius:11px;
  font-size:14px; font-family:inherit;
  color:#0A2540; background:#F8FAFC;
  outline:none; resize:vertical;
  transition:border-color .2s, background .2s, box-shadow .2s;
  box-sizing:border-box;
}
.rm-input:focus{
  border-color:#3E7CB1; background:#fff;
  box-shadow:0 0 0 4px rgba(62,124,177,.12);
}

.rm-row-2{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}

.rm-icon-btn{
  width:100%; padding:12px;
  border:1.5px solid #E2E8F0; border-radius:11px;
  background:#F8FAFC; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit;
  transition:border-color .2s, background .2s;
}
.rm-icon-btn:hover{ border-color:#3E7CB1; background:#fff; }

.rm-color-picker-wrap{
  width:100%; padding:12px;
  border:1.5px solid #E2E8F0; border-radius:11px;
  background:#F8FAFC; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:border-color .2s, background .2s;
}
.rm-color-picker-wrap:hover{ border-color:#3E7CB1; background:#fff; }
.rm-color-circle{
  width:24px; height:24px; border-radius:50%;
  box-shadow:0 2px 8px rgba(10,37,64,.15);
  border:2px solid #fff;
}

/* ============ PERMISSION MATRIX ============ */
.rm-group{ margin-bottom:14px; }
.rm-group-title{
  font-size:10.5px; font-weight:800; color:#64748B;
  text-transform:uppercase; letter-spacing:1px;
  padding:6px 0 8px;
}

.rm-perm-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:11px;
  background:#F8FAFC;
  margin-bottom:6px;
  transition:background .15s;
}
.rm-perm-row:hover{ background:#F1F5F9; }

.rm-checkbox-wrap{
  display:flex; align-items:center; cursor:pointer;
}
.rm-checkbox-wrap input{ display:none; }
.rm-checkbox-box{
  width:20px; height:20px;
  border:2px solid #CBD5E1; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
  background:#fff;
}
.rm-checkbox-box::after{
  content:''; width:6px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  margin-top:-2px;
  transition:transform .15s;
}
.rm-checkbox-wrap input:checked + .rm-checkbox-box{
  background:linear-gradient(135deg,#C9A227,#E8B33D);
  border-color:#C9A227;
}
.rm-checkbox-wrap input:checked + .rm-checkbox-box::after{
  transform:rotate(45deg) scale(1);
}

.rm-perm-icon{
  width:28px; height:28px; border-radius:8px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
}
.rm-perm-label{
  flex:1; font-size:13px; font-weight:600;
  color:#0A2540;
}

.rm-bottom-toggle{
  display:flex; align-items:center; cursor:pointer;
  opacity:1;
  transition:opacity .2s;
}
.rm-bottom-toggle.disabled{ opacity:.35; cursor:not-allowed; }
.rm-bottom-toggle input{ display:none; }
.rm-bottom-box{
  width:32px; height:26px; border-radius:8px;
  background:#E2E8F0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
  transition:background .2s;
}
.rm-bottom-toggle input:checked + .rm-bottom-box{
  background:linear-gradient(135deg,#0A2540,#1B4B7E);
  color:#fff;
}

.rm-order-input{
  width:44px; height:32px;
  border:1.5px solid #E2E8F0; border-radius:8px;
  text-align:center; font-size:13px; font-weight:700;
  font-family:inherit; color:#0A2540;
  background:#fff; outline:none;
  transition:border-color .2s;
}
.rm-order-input:focus{
  border-color:#3E7CB1;
  box-shadow:0 0 0 3px rgba(62,124,177,.12);
}
.rm-order-input:disabled{
  background:#F1F5F9; color:#CBD5E1;
  cursor:not-allowed;
}

/* ============ PREVIEW BUTTON ============ */
.rm-preview-btn{
  width:100%; padding:12px 16px;
  border:1.5px dashed #C9A227;
  border-radius:12px;
  background:#FFFBEB;
  color:#92400E;
  font-size:13px; font-weight:700;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit;
  transition:background .2s, border-color .2s;
}
.rm-preview-btn:hover{
  background:#FEF3C7;
  border-color:#C9A227;
}

/* ============ BUTTONS ============ */
.rm-btn-primary{
  padding:12px 22px;
  border:none; border-radius:11px;
  background:linear-gradient(135deg,#C9A227,#E8B33D);
  color:#0A2540; font-size:13.5px; font-weight:800;
  cursor:pointer; font-family:inherit;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 4px 12px rgba(201,162,39,.3);
  transition:transform .15s, box-shadow .2s;
}
.rm-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(201,162,39,.4);
}
.rm-btn-primary:active{ transform:translateY(1px); }

.rm-btn-secondary{
  padding:12px 22px;
  border:1.5px solid #E2E8F0; border-radius:11px;
  background:#fff;
  color:#64748B; font-size:13.5px; font-weight:700;
  cursor:pointer; font-family:inherit;
  transition:background .2s, border-color .2s;
}
.rm-btn-secondary:hover{ background:#F8FAFC; border-color:#CBD5E1; }

/* ============ EMOJI PICKER ============ */
.emoji-grid{
  display:grid; grid-template-columns:repeat(6, 1fr);
  gap:8px;
}
.emoji-item{
  aspect-ratio:1;
  border:1.5px solid #E2E8F0; border-radius:11px;
  background:#F8FAFC;
  font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.emoji-item:hover{
  background:#fff; border-color:#3E7CB1;
  transform:scale(1.05);
}
.emoji-item.active{
  background:linear-gradient(135deg,#C9A227,#E8B33D);
  border-color:#C9A227;
  box-shadow:0 4px 12px rgba(201,162,39,.4);
}

/* ============ COLOR PICKER ============ */
.color-grid{
  display:grid; grid-template-columns:repeat(8, 1fr);
  gap:10px;
}
.color-item{
  aspect-ratio:1;
  border:3px solid #fff; border-radius:50%;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(10,37,64,.15);
  transition:transform .15s, box-shadow .2s;
}
.color-item:hover{
  transform:scale(1.1);
  box-shadow:0 6px 16px rgba(10,37,64,.25);
}
.color-item.active{
  border-color:#0A2540;
  transform:scale(1.15);
  box-shadow:0 0 0 3px rgba(201,162,39,.5);
}

/* ============ PREVIEW PHONE ============ */
.preview-phone{
  width:100%; max-width:280px;
  margin:0 auto;
  border-radius:24px;
  padding:10px;
  background:#0A2540;
  box-shadow:0 10px 30px rgba(10,37,64,.3);
}
.preview-phone-screen{
  background:#F5F7FA;
  border-radius:16px;
  overflow:hidden;
  min-height:180px;
  display:flex; flex-direction:column;
}
.preview-tabbar{
  background:#fff;
  border-top:1px solid #E2E8F0;
  display:flex;
  padding:6px 0;
  box-shadow:0 -2px 8px rgba(10,37,64,.05);
}
.preview-tab{
  flex:1;
  display:flex; flex-direction:column; align-items:center;
  gap:3px;
  color:#94A3B8;
  font-size:9px;
  padding:4px 0;
}
.preview-tab svg{
  width:20px; height:20px;
  stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.preview-tab.active{ color:#3E7CB1; }
.preview-tab.active svg{ stroke-width:2.4; }
.preview-tab-label{
  font-size:8.5px;
  font-weight:700;
  color:#0A2540;
  line-height:1;
}
.preview-tab:not(.active) .preview-tab-label{
  color:#94A3B8;
}

/* ============ RESPONSIVE ============ */
@media (max-width:480px){
  .ggn-modal{ border-radius:18px; }
  .ggn-modal-body{ padding:16px; }
  .emoji-grid{ grid-template-columns:repeat(5, 1fr); }
  .color-grid{ grid-template-columns:repeat(6, 1fr); }
  .rm-row-2{ grid-template-columns:1fr; }
}