:root{
--bg:#071321;
--sidebar:#091a2d;
--panel:#102338;
--panel2:#0c1d31;
--border:#1f3e60;
--text:#eef6ff;
--muted:#8ea8c4;
--blue:#1c8cff;
--cyan:#25c9ff;
--green:#1dbb7f;
--orange:#e0a52e;
--red:#ea596c;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Inter,Segoe UI,sans-serif;
background:var(--bg);
color:var(--text);
}

#app{
display:grid;
grid-template-columns:260px 1fr;
min-height:100vh;
}

#sidebar{
background:linear-gradient(180deg,#071321,#0d2038);
border-right:1px solid var(--border);
padding:24px;
}

.brand{
display:flex;
align-items:center;
gap:14px;
margin-bottom:32px;
}

.logo{
width:52px;
height:52px;
border-radius:14px;
background:linear-gradient(135deg,var(--blue),var(--cyan));
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
font-weight:bold;
}

.brand h2{
font-size:22px;
}

.brand p{
font-size:12px;
color:var(--muted);
margin-top:4px;
}

nav{
display:flex;
flex-direction:column;
gap:10px;
}

nav button{
height:44px;
border:none;
background:transparent;
color:var(--muted);
border-radius:10px;
text-align:left;
padding:0 16px;
font-size:14px;
cursor:pointer;
transition:.2s;
}

nav button:hover{
background:#133153;
color:white;
}

nav button.active{
background:linear-gradient(90deg,var(--blue),var(--cyan));
color:white;
}

main{
padding:28px;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px;
}

header h1{
font-size:30px;
}

header p{
color:var(--muted);
margin-top:6px;
}

header button{
height:42px;
padding:0 20px;
border:none;
border-radius:10px;
background:linear-gradient(135deg,var(--blue),var(--cyan));
color:white;
cursor:pointer;
font-weight:600;
}

.summary{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-bottom:22px;
}

.card{
background:var(--panel);
border:1px solid var(--border);
border-radius:16px;
padding:22px;
}

.card span{
display:block;
font-size:13px;
color:var(--muted);
margin-bottom:10px;
}

.card h2{
font-size:34px;
}

.row{
display:grid;
grid-template-columns:minmax(0,2.2fr) minmax(320px,.8fr);
gap:18px;
margin-bottom:18px;
}

.panel{
background:var(--panel2);
border:1px solid var(--border);
border-radius:16px;
padding:20px;
min-height:340px;
}

.full{
margin-top:18px;
}

.panel-title{
font-size:18px;
font-weight:700;
margin-bottom:18px;
padding-bottom:12px;
border-bottom:1px solid var(--border);
}

#curriculumSlot,
#approvalSlot,
#reviewSlot,
#submissionSlot{
min-height:240px;
}

.curriculum-editor-card h3{
margin-bottom:8px;
}

.curriculum-tree{
display:flex;
flex-direction:column;
gap:10px;
margin:14px 0;
}

.curriculum-tree-shell{
display:grid;
grid-template-columns:minmax(300px,420px) minmax(0,1fr);
gap:14px;
margin-top:14px;
}

.curriculum-tree-nav{
max-height:560px;
overflow:auto;
border:1px solid var(--border);
border-radius:14px;
background:#071a2d;
padding:10px;
}

.curriculum-tree-course{
border:1px solid #1d4164;
border-radius:12px;
background:#0d2742;
margin-bottom:10px;
overflow:hidden;
}

.curriculum-tree-course summary{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
cursor:pointer;
padding:11px 12px;
font-weight:800;
}

.curriculum-tree-course summary small{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:28px;
height:24px;
border-radius:999px;
background:#173f68;
color:#dff7ff;
font-size:12px;
}

.curriculum-tree-meetings{
display:flex;
flex-direction:column;
gap:6px;
padding:0 10px 10px;
}

.curriculum-tree-item{
display:grid;
grid-template-columns:32px minmax(0,1fr);
align-items:center;
gap:8px;
width:100%;
border:1px solid #173c60;
border-radius:10px;
background:#091d32;
color:#eef8ff;
text-align:left;
padding:8px;
cursor:pointer;
}

.curriculum-tree-item:hover,
.curriculum-tree-item.active{
border-color:#25c9ff;
background:rgba(28,140,255,.22);
}

.curriculum-tree-item span:last-child{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.curriculum-tree-detail{
border:1px solid var(--border);
border-radius:14px;
background:#0f2944;
padding:16px;
min-height:220px;
}

.curriculum-tree-detail h4{
font-size:20px;
margin:12px 0 8px;
}

.tree-node{
background:#0f2944;
border:1px solid var(--border);
border-radius:12px;
padding:12px;
}

.tree-node summary{
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.tree-actions{
margin:10px 0 6px;
}

.mini-action,
.primary-link{
display:inline-flex;
align-items:center;
gap:6px;
color:#dff7ff;
background:#12385d;
border:1px solid #24577f;
border-radius:9px;
padding:7px 10px;
text-decoration:none;
font-size:12px;
}

.primary-link{
margin-top:4px;
background:linear-gradient(135deg,var(--blue),var(--cyan));
border:none;
font-weight:700;
}

.meeting-list{
display:flex;
flex-direction:column;
gap:8px;
margin-top:10px;
}

.meeting-node{
display:grid;
grid-template-columns:34px 1fr auto;
align-items:center;
gap:10px;
background:#0b2036;
border:1px solid #183c60;
border-radius:10px;
padding:9px 10px;
}

.meeting-index{
display:inline-flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
border-radius:999px;
background:#174d7c;
color:#eaf9ff;
font-weight:800;
font-size:12px;
}

.review-group{
border:1px solid var(--border);
border-radius:16px;
background:#0c1f34;
margin-bottom:14px;
overflow:hidden;
}

.review-group-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px;
background:#102b48;
border-bottom:1px solid var(--border);
}

.review-group-head span:not(.pill){
display:block;
color:var(--muted);
font-size:13px;
margin-top:4px;
}

.review-group-items{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:12px;
padding:14px;
}

.submission-card{
background:#0f2944;
border:1px solid #244967;
border-radius:12px;
padding:14px;
line-height:1.55;
}

.actions{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:12px;
}

.actions button,
.osiun-table button{
border:none;
border-radius:9px;
padding:8px 10px;
cursor:pointer;
background:#17385a;
color:#eff9ff;
}

.actions button.approve,
.osiun-table button.approve{
background:linear-gradient(135deg,var(--green),#28d79a);
color:#062017;
font-weight:800;
}

.pill{
display:inline-flex;
align-items:center;
border-radius:999px;
padding:5px 9px;
background:#163554;
color:#d9f4ff;
font-size:12px;
}

.muted{
color:var(--muted);
}

@media(max-width:1200px){

.summary{
grid-template-columns:repeat(2,1fr);
}

.row{
grid-template-columns:1fr;
}

}

@media(max-width:900px){

#app{
grid-template-columns:1fr;
}

#sidebar{
border-right:none;
border-bottom:1px solid var(--border);
}

.summary{
grid-template-columns:1fr;
}

.meeting-node{
grid-template-columns:30px 1fr;
}

.meeting-node .mini-action{
grid-column:1 / -1;
justify-content:center;
}

.curriculum-tree-shell{
grid-template-columns:1fr;
}

.curriculum-tree-nav{
max-height:420px;
}

}


/* =========================================================
   OSIUN Committee V3 — Membership Approval responsive layout
   ========================================================= */

#approvalSlot {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}

#approvalSlot .osiun-table {
  width: 100%;
  max-width: 100%;
  min-width: 760px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

#approvalSlot .osiun-table th,
#approvalSlot .osiun-table td {
  min-width: 0;
  padding: 12px 14px;
  vertical-align: middle;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
  border-bottom: 1px solid var(--border);
}

#approvalSlot .osiun-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #102b48;
  color: #dff7ff;
  font-size: 12px;
  white-space: nowrap;
}

#approvalSlot .osiun-table th:nth-child(1),
#approvalSlot .osiun-table td:nth-child(1) {
  width: 22%;
}

#approvalSlot .osiun-table th:nth-child(2),
#approvalSlot .osiun-table td:nth-child(2) {
  width: 12%;
}

#approvalSlot .osiun-table th:nth-child(3),
#approvalSlot .osiun-table td:nth-child(3) {
  width: 26%;
}

#approvalSlot .osiun-table th:nth-child(4),
#approvalSlot .osiun-table td:nth-child(4) {
  width: 15%;
}

#approvalSlot .osiun-table th:nth-child(5),
#approvalSlot .osiun-table td:nth-child(5) {
  width: 25%;
}

#approvalSlot .osiun-table tbody tr {
  background: #0f2944;
  transition: background .15s ease;
}

#approvalSlot .osiun-table tbody tr:hover {
  background: #133350;
}

#approvalSlot .osiun-table td:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

#approvalSlot .osiun-table button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  max-width: 100%;
  margin: 0;
  white-space: nowrap;
}

#approvalSlot .osiun-table button.approve {
  min-width: 92px;
}

#approvalSlot .osiun-table .pill {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* Laptop dan tablet: ubah setiap row menjadi card */
@media (max-width: 1050px) {
  #approvalSlot {
    overflow: visible;
  }

  #approvalSlot .osiun-table {
    min-width: 0;
    border: 0;
  }

  #approvalSlot .osiun-table thead {
    display: none;
  }

  #approvalSlot .osiun-table,
  #approvalSlot .osiun-table tbody,
  #approvalSlot .osiun-table tr,
  #approvalSlot .osiun-table td {
    display: block;
    width: 100% !important;
  }

  #approvalSlot .osiun-table tr {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #244967;
    border-radius: 12px;
    background: #0f2944;
  }

  #approvalSlot .osiun-table td {
    position: relative;
    min-height: 38px;
    padding: 8px 8px 8px 118px;
    border: 0;
  }

  #approvalSlot .osiun-table td::before {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 100px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  #approvalSlot .osiun-table td:nth-child(1)::before {
    content: "User";
  }

  #approvalSlot .osiun-table td:nth-child(2)::before {
    content: "Role";
  }

  #approvalSlot .osiun-table td:nth-child(3)::before {
    content: "University / Course";
  }

  #approvalSlot .osiun-table td:nth-child(4)::before {
    content: "Status";
  }

  #approvalSlot .osiun-table td:nth-child(5)::before {
    content: "Action";
  }

  #approvalSlot .osiun-table td:last-child {
    padding-left: 118px;
  }
}

@media (max-width: 560px) {
  #approvalSlot .osiun-table td {
    padding: 7px 4px;
  }

  #approvalSlot .osiun-table td::before {
    position: static;
    display: block;
    width: auto;
    margin-bottom: 4px;
  }

  #approvalSlot .osiun-table td:last-child {
    padding-left: 4px;
  }
}

/* =========================================================
   Committee V3 — Flyweight Membership Approval
   Tanpa horizontal slider
   ========================================================= */

#approvalSlot {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible !important;
}

#approvalSlot .osiun-table {
  display: block;
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
  border: 0;
  border-collapse: separate;
}

#approvalSlot .osiun-table thead {
  display: none;
}

#approvalSlot .osiun-table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
  width: 100%;
}

#approvalSlot .osiun-table tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "user status"
    "meta meta"
    "actions actions";
  gap: 6px 10px;
  min-width: 0;
  padding: 12px 13px;
  background: #0f2944;
  border: 1px solid #244967;
  border-radius: 12px;
  box-shadow: none;
}

#approvalSlot .osiun-table td {
  display: block;
  width: auto !important;
  min-width: 0;
  padding: 0;
  border: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#approvalSlot .osiun-table td:nth-child(1) {
  grid-area: user;
  align-self: center;
  font-size: 14px;
}

#approvalSlot .osiun-table td:nth-child(2),
#approvalSlot .osiun-table td:nth-child(3) {
  grid-area: meta;
  color: var(--muted);
  font-size: 12px;
}

#approvalSlot .osiun-table td:nth-child(2)::before {
  content: "Role: ";
  font-weight: 700;
  color: #d9f4ff;
}

#approvalSlot .osiun-table td:nth-child(3)::before {
  content: "Scope: ";
  margin-left: 14px;
  font-weight: 700;
  color: #d9f4ff;
}

#approvalSlot .osiun-table td:nth-child(4) {
  grid-area: status;
  justify-self: end;
  align-self: start;
  font-size: 12px;
}

#approvalSlot .osiun-table td:nth-child(5) {
  grid-area: actions;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

#approvalSlot .osiun-table button {
  min-height: 32px;
  padding: 6px 10px;
  margin: 0;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
}

#approvalSlot .osiun-table button.approve {
  min-width: 82px;
}

#approvalSlot .osiun-table .pill {
  padding: 4px 8px;
  font-size: 11px;
}

@media (max-width: 720px) {
  #approvalSlot .osiun-table tbody {
    grid-template-columns: 1fr;
  }

  #approvalSlot .osiun-table tr {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "user"
      "status"
      "meta"
      "actions";
  }

  #approvalSlot .osiun-table td:nth-child(4) {
    justify-self: start;
  }

  #approvalSlot .osiun-table td:nth-child(3)::before {
    margin-left: 0;
  }
}

/* =========================================================
   Committee Membership — contained flyweight final
   ========================================================= */

#approvalSlot,
#approvalSlot * {
  box-sizing: border-box;
}

#approvalSlot {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden !important;
}

#approvalSlot .osiun-table {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  overflow: hidden;
}

#approvalSlot .osiun-table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#approvalSlot .osiun-table tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "user status"
    "role role"
    "scope scope"
    "actions actions";
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 12px;
}

#approvalSlot .osiun-table td {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#approvalSlot .osiun-table td:nth-child(1) {
  grid-area: user;
}

#approvalSlot .osiun-table td:nth-child(2) {
  grid-area: role;
  font-size: 12px;
  color: var(--muted);
}

#approvalSlot .osiun-table td:nth-child(3) {
  grid-area: scope;
  font-size: 12px;
  color: var(--muted);
}

#approvalSlot .osiun-table td:nth-child(4) {
  grid-area: status;
  justify-self: end;
  max-width: 140px;
}

#approvalSlot .osiun-table td:nth-child(5) {
  grid-area: actions;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}

#approvalSlot .osiun-table td:nth-child(2)::before {
  content: "Role: ";
  font-weight: 700;
  color: #d9f4ff;
}

#approvalSlot .osiun-table td:nth-child(3)::before {
  content: "Scope: ";
  margin-left: 0 !important;
  font-weight: 700;
  color: #d9f4ff;
}

#approvalSlot .osiun-table button {
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
}

@media (max-width: 560px) {
  #approvalSlot .osiun-table tbody {
    grid-template-columns: 1fr;
  }

  #approvalSlot .osiun-table tr {
    grid-template-columns: 1fr;
    grid-template-areas:
      "user"
      "status"
      "role"
      "scope"
      "actions";
  }

  #approvalSlot .osiun-table td:nth-child(4) {
    justify-self: start;
  }
}

.committee-tree-dialog{
  width:min(760px,96vw);
  max-height:90vh;
  overflow:auto;
  padding:18px;
  border:1px solid #285276;
  border-radius:16px;
  background:#0b2036;
  color:#eef9ff;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}

.committee-tree-dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.committee-tree-dialog-head h2{
  margin:3px 0 0;
}

.committee-tree-dialog-head button{
  border:0;
  background:#17385a;
  color:#fff;
  border-radius:8px;
  padding:7px 10px;
}

.committee-approve-course{
  margin-top:10px;
  border:1px solid #244967;
  border-radius:12px;
  overflow:hidden;
}

.committee-approve-course summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 13px;
  background:#102b48;
  cursor:pointer;
}

.committee-approve-meetings{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px;
  padding:10px;
}

.committee-approve-meetings button{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-width:0;
  text-align:left;
  padding:8px 9px;
  border:1px solid #244967;
  border-radius:9px;
  background:#0f2944;
  color:#e8f7ff;
  cursor:pointer;
}

.committee-approve-meetings button span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#174d7c;
  font-size:11px;
}

.committee-approve-meetings button.selected{
  border-color:#3dd9a3;
  background:#123c3b;
}

.committee-tree-selected{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  background:#102b48;
}

#committee-tree-note{
  width:100%;
  margin-top:10px;
}

.committee-tree-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}


/* OSIUN standard top header for Committee V3 */
body{
  padding-top:68px;
}

#osiun-standard-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 24px;
  margin:0;
  border-bottom:1px solid rgba(37,201,255,.22);
  background:linear-gradient(90deg,#061321 0%,#092640 52%,#06384b 100%);
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}

#osiun-standard-header .osiun-header-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}

#osiun-standard-header .osiun-header-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  height:38px;
  padding:0 14px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:white;
  font-weight:900;
  letter-spacing:.08em;
  text-decoration:none;
}

#osiun-standard-header .osiun-header-brand span{
  color:#dff7ff;
  font-weight:800;
  white-space:nowrap;
}

#osiun-standard-header .osiun-header-menu{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex:1;
  overflow-x:auto;
  scrollbar-width:none;
}

#osiun-standard-header .osiun-header-menu::-webkit-scrollbar{
  display:none;
}

#osiun-standard-header .osiun-header-menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 13px;
  border-radius:999px;
  color:#b9d4ef;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

#osiun-standard-header .osiun-header-menu a:hover,
#osiun-standard-header .osiun-header-menu a.active{
  background:rgba(37,201,255,.16);
  color:white;
}

#osiun-standard-header .osiun-header-user{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  min-width:150px;
  color:#eef6ff;
}

#osiun-standard-header .osiun-header-user b,
#osiun-standard-header .osiun-header-user small{
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#osiun-standard-header .osiun-header-user small{
  color:var(--muted);
  margin-top:2px;
}

@media (max-width: 900px){
  body{padding-top:112px;}
  #osiun-standard-header{
    height:auto;
    min-height:104px;
    flex-wrap:wrap;
    align-items:flex-start;
    padding:10px 14px;
    gap:8px;
  }
  #osiun-standard-header .osiun-header-brand{
    min-width:0;
    flex:1 1 180px;
  }
  #osiun-standard-header .osiun-header-menu{
    order:3;
    flex:1 0 100%;
    justify-content:flex-start;
    padding-bottom:2px;
  }
  #osiun-standard-header .osiun-header-user{
    min-width:0;
    flex:0 1 auto;
  }
  #app{
    grid-template-columns:1fr;
  }
  #sidebar{
    border-right:0;
    border-bottom:1px solid var(--border);
  }
}


#osiun-standard-header .osiun-header-logout{
  border:1px solid rgba(142,230,255,.42);
  background:rgba(255,255,255,.08);
  color:#eaf6ff;
  border-radius:999px;
  padding:7px 12px;
  font-weight:800;
  cursor:pointer;
}
#osiun-standard-header .osiun-header-logout:hover{
  background:rgba(142,230,255,.16);
  border-color:rgba(142,230,255,.7);
}