:root{
  --ink:#17201d;
  --muted:#6e7773;
  --line:#dfe4e1;
  --paper:#fbfcfb;
  --white:#ffffff;

  --brand:#173f35;
  --brand-2:#0f2f27;
  --accent:#b78a4a;

  --good:#1f6b4f;
  --good-bg:#eaf4ef;

  --warn:#8a641f;
  --warn-bg:#fff6df;

  --bad:#9f3d3d;
  --bad-bg:#fbeeee;

  --radius:8px;
}


*{
  box-sizing:border-box;
}


html,
body{
  margin:0;
  padding:0;
}


html{
  min-height:100%;
}


body{
  min-height:100vh;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:#f1f3f1;
  color:var(--ink);

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}


a{
  color:inherit;
  text-decoration:none;
}


button,
input,
select{
  font:inherit;
}


button,
a,
input,
select{
  -webkit-tap-highlight-color:transparent;
}


/* =====================================================
   APP
===================================================== */

.app{
  min-height:100vh;

  display:flex;
  flex-direction:column;
}


/* =====================================================
   TOP INSTITUTION BAR
===================================================== */

.institution-bar{
  min-height:36px;

  background:var(--brand-2);
  color:#dbe7e2;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:0 34px;

  font-size:11px;
  font-weight:700;

  letter-spacing:.05em;

  text-transform:uppercase;
}


/* =====================================================
   HEADER
===================================================== */

.main-header{
  background:var(--white);

  border-bottom:
    1px solid var(--line);
}


.header-inner{
  width:100%;
  max-width:1480px;

  margin:0 auto;

  padding:
    18px 34px 0;
}


.brand-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;
}


.identity{
  display:flex;
  align-items:center;

  gap:14px;

  min-width:0;
}


/* Logo UNHAS tanpa kotak */
.identity-mark{
  width:56px;
  height:56px;

  flex:0 0 56px;

  border:0;

  display:grid;
  place-items:center;

  background:transparent;

  overflow:visible;
}


.identity-mark.logo-mark{
  padding:0;
}


.identity-mark.logo-mark img{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;
}


/* =====================================================
   BRAND TEXT
===================================================== */

.identity-copy{
  min-width:0;

  display:flex;
  flex-direction:column;

  align-items:flex-start;
}


.identity-copy > strong{
  display:block;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:21px;
  line-height:1.05;

  color:#17352d;

  font-weight:700;

  white-space:nowrap;
}


.identity-copy > span{
  display:block;

  margin-top:4px;

  color:#7a837f;

  font-size:10px;

  text-transform:uppercase;

  letter-spacing:.11em;

  white-space:nowrap;
}


/* =====================================================
   GROWTH INDONESIA BRAND
===================================================== */

.brand-growth{
  display:flex;
  align-items:center;

  gap:6px;

  margin-top:6px;

  min-height:18px;
}


.brand-growth-label{
  display:block !important;

  margin:0 !important;

  color:#8a928f !important;

  font-size:8px !important;

  font-weight:700;

  letter-spacing:.08em !important;

  line-height:1;

  text-transform:uppercase;

  white-space:nowrap;
}


.brand-growth-logo{
  display:block;

  width:auto;
  height:24px;

  max-width:130px;

  object-fit:contain;
  object-position:left center;
}


/* =====================================================
   HEADER ADMIN
===================================================== */

.header-right-group{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:14px;

  min-width:0;
}


.header-tools{
  display:flex;
  align-items:center;

  gap:10px;
}


.admin-chip{
  display:flex;
  align-items:center;

  gap:9px;

  padding:7px 10px;

  border:
    1px solid var(--line);

  background:#fff;
}


.admin-avatar{
  width:28px;
  height:28px;

  flex:0 0 28px;

  border-radius:50%;

  background:var(--brand);
  color:white;

  display:grid;
  place-items:center;

  font-size:11px;
  font-weight:800;
}


.admin-chip strong{
  display:block;

  max-width:180px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:12px;
}


.admin-chip span{
  display:block;

  max-width:180px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:10px;

  color:var(--muted);
}


/* =====================================================
   NAVIGATION
===================================================== */

.nav-tabs{
  display:flex;

  gap:26px;

  margin-top:18px;

  overflow-x:auto;
  overflow-y:hidden;

  scrollbar-width:thin;
}


.nav-tabs a{
  padding:
    12px 1px 13px;

  color:#66706b;

  font-size:13px;
  font-weight:700;

  border-bottom:
    2px solid transparent;

  white-space:nowrap;
}


.nav-tabs a:hover{
  color:var(--brand);
}


.nav-tabs a.active{
  color:var(--brand);

  border-bottom-color:
    var(--accent);
}


/* =====================================================
   PAGE
===================================================== */

.page{
  width:100%;
  max-width:1480px;

  margin:0 auto;

  padding:
    30px 34px 50px;
}


.breadcrumb{
  color:#87908c;

  font-size:11px;

  margin-bottom:10px;

  overflow-wrap:anywhere;
}


.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:24px;

  margin-bottom:24px;
}


.page-head h1{
  margin:0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:31px;
  line-height:1.05;

  font-weight:700;

  letter-spacing:-.02em;
}


.page-head p{
  margin:
    7px 0 0;

  color:var(--muted);

  font-size:13px;

  line-height:1.6;
}


/* =====================================================
   ACTIONS / BUTTONS
===================================================== */

.actions{
  display:flex;

  gap:8px;

  flex-wrap:wrap;
}


.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid var(--brand);

  background:var(--brand);
  color:#fff;

  padding:
    9px 13px;

  min-height:36px;

  border-radius:4px;

  font-size:12px;
  font-weight:800;

  line-height:1.2;

  cursor:pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}


.btn:hover{
  background:#102f27;
}


.btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}


.btn.secondary{
  background:white;

  border-color:#cfd7d3;

  color:#39433f;
}


.btn.secondary:hover{
  background:#f6f8f7;
}


.btn.text{
  border-color:transparent;

  background:transparent;

  color:var(--brand);

  padding-left:3px;
  padding-right:3px;
}


/* =====================================================
   DANGER BUTTON
===================================================== */

.btn.danger{
  background:#fff;

  border-color:#d8aaaa;

  color:var(--bad);
}


.btn.danger:hover{
  background:var(--bad);

  border-color:var(--bad);

  color:#fff;
}


/* =====================================================
   PARTICIPANT ACTIONS
===================================================== */

.participant-actions{
  display:flex;
  align-items:center;

  gap:6px;

  flex-wrap:nowrap;

  white-space:nowrap;
}


.participant-actions form{
  margin:0;
}


.participant-edit-btn,
.participant-remove-btn{
  min-height:30px;

  padding:
    6px 10px;

  font-size:10px;

  border-radius:3px;
}


.participant-edit-btn{
  min-width:48px;
}


.participant-remove-btn{
  min-width:62px;
}


/* =====================================================
   METRICS
===================================================== */

.metrics-strip{
  background:var(--white);

  border:
    1px solid var(--line);

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  margin-bottom:18px;
}


.metric{
  padding:
    18px 20px;

  border-right:
    1px solid var(--line);
}


.metric:last-child{
  border-right:0;
}


.metric-label{
  color:#78817d;

  text-transform:uppercase;

  letter-spacing:.08em;

  font-size:10px;
  font-weight:800;
}


.metric-value{
  margin-top:7px;

  font-size:28px;
  font-weight:750;

  letter-spacing:-.04em;
}


.metric-note{
  margin-top:4px;

  color:#8a928f;

  font-size:11px;

  line-height:1.5;
}


/* =====================================================
   DASHBOARD GRID
===================================================== */

.dashboard-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1.6fr)
    minmax(320px,.7fr);

  gap:18px;

  align-items:start;
}


/* =====================================================
   PANEL
===================================================== */

.panel{
  min-width:0;

  background:var(--white);

  border:
    1px solid var(--line);
}


.panel-head{
  min-height:54px;

  padding:
    14px 18px;

  border-bottom:
    1px solid var(--line);

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:14px;
}


.panel-head h2{
  margin:0;

  font-size:13px;
  font-weight:800;

  letter-spacing:.01em;
}


.panel-head p{
  margin:
    4px 0 0;

  color:var(--muted);

  font-size:11px;

  line-height:1.5;
}


.panel-body{
  padding:18px;
}


/* =====================================================
   SESSION LIST
===================================================== */

.session-list{
  display:flex;
  flex-direction:column;
}


.session-row{
  display:grid;

  grid-template-columns:
    86px 1fr 110px 86px;

  align-items:center;

  gap:16px;

  min-height:72px;

  padding:
    0 18px;

  border-bottom:
    1px solid var(--line);
}


.session-row:last-child{
  border-bottom:0;
}


.session-time{
  font-weight:800;

  color:#21352f;

  font-size:13px;
}


.session-name{
  min-width:0;
}


.session-name strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:13px;
}


.session-name span{
  display:block;

  margin-top:3px;

  color:var(--muted);

  font-size:11px;
}


.progress-track{
  width:100%;
  height:5px;

  overflow:hidden;

  background:#edf0ee;
}


.progress-fill{
  height:100%;

  background:var(--brand);

  transition:width .2s ease;
}


.session-count{
  font-size:12px;

  color:#48534e;

  text-align:right;
}


.session-count strong{
  font-size:16px;

  color:#19231f;
}


/* =====================================================
   NOTICE
===================================================== */

.notice{
  border-left:
    3px solid var(--accent);

  background:#fbfaf6;

  padding:
    14px 15px;

  font-size:12px;
  line-height:1.6;

  color:#59605d;

  overflow-wrap:anywhere;
}


.notice strong{
  color:#26312d;
}


/* =====================================================
   TABLE
===================================================== */

.table-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:
    12px 14px;

  border-bottom:
    1px solid var(--line);

  background:#fafbfa;
}


.search{
  display:flex;
  align-items:center;

  gap:8px;

  flex:1;

  max-width:520px;
}


.search input{
  width:100%;
  height:34px;

  border:
    1px solid #d4dbd7;

  background:white;

  padding:
    0 10px;

  border-radius:3px;

  outline:none;

  font-size:12px;
}


.search input:focus{
  border-color:#8aa197;
}


.table-wrap{
  width:100%;

  overflow-x:auto;
  overflow-y:hidden;
}


table{
  width:100%;

  border-collapse:collapse;

  font-size:12px;
}


th{
  text-align:left;

  padding:
    10px 14px;

  background:#f7f8f7;

  color:#6f7773;

  text-transform:uppercase;

  letter-spacing:.07em;

  font-size:9px;
  font-weight:900;

  border-bottom:
    1px solid var(--line);

  white-space:nowrap;
}


td{
  padding:
    12px 14px;

  border-bottom:
    1px solid #e8ebe9;

  color:#36413c;

  vertical-align:middle;
}


tbody tr:last-child td{
  border-bottom:0;
}


tbody tr:hover{
  background:#fafcfa;
}


td strong{
  color:#1e2924;
}


/* Unit kerja boleh panjang */
td:nth-child(5){
  max-width:280px;

  overflow-wrap:anywhere;
}


/* =====================================================
   STATUS
===================================================== */

.status{
  display:inline-flex;
  align-items:center;

  gap:6px;

  padding:
    4px 7px;

  border-radius:3px;

  font-size:10px;
  font-weight:800;

  white-space:nowrap;
}


.status::before{
  content:"";

  width:6px;
  height:6px;

  flex:0 0 6px;

  border-radius:50%;

  background:currentColor;
}


.status.hadir{
  background:var(--good-bg);
  color:var(--good);
}


.status.belum,
.status.pending{
  background:var(--warn-bg);
  color:var(--warn);
}


.status.tidak{
  background:var(--bad-bg);
  color:var(--bad);
}


.status.netral{
  background:#eef1ef;
  color:#5d6662;
}


/* =====================================================
   FORMS
===================================================== */

.form-section{
  min-width:0;

  background:white;

  border:
    1px solid var(--line);
}


.form-section +
.form-section{
  margin-top:14px;
}


.form-title{
  padding:
    14px 18px;

  border-bottom:
    1px solid var(--line);
}


.form-title h2{
  margin:0;

  font-size:13px;
}


.form-title p{
  margin:
    4px 0 0;

  color:var(--muted);

  font-size:11px;

  line-height:1.5;
}


.form-body{
  padding:18px;
}


.form-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    14px 16px;
}


.field{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:6px;
}


.field.full{
  grid-column:1/-1;
}


label{
  font-size:10px;
  font-weight:900;

  color:#56605c;

  text-transform:uppercase;

  letter-spacing:.06em;
}


input,
select{
  width:100%;
  height:38px;

  border:
    1px solid #d3dad6;

  background:white;

  border-radius:3px;

  padding:
    0 10px;

  outline:none;

  color:#202a25;
}


input:focus,
select:focus{
  border-color:#7b968a;

  box-shadow:
    0 0 0 2px #edf3f0;
}


input[type="file"]{
  height:auto;

  min-height:38px;

  padding:8px;
}


.help{
  font-size:10px;

  color:#89918e;

  line-height:1.6;
}


/* =====================================================
   SESSION DETAIL
===================================================== */

.detail-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1.55fr)
    340px;

  gap:18px;

  align-items:start;
}


.qr-box{
  min-width:0;

  background:white;

  border:
    1px solid var(--line);
}


.qr-area{
  padding:22px;

  text-align:center;
}


.qr-area img{
  width:240px;
  max-width:100%;

  border:
    1px solid #dfe4e1;

  padding:12px;

  background:white;
}


.qr-meta{
  border-top:
    1px solid var(--line);

  padding:
    13px 16px;

  color:#6c7471;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size:10px;

  word-break:break-all;

  line-height:1.5;
}


.status-summary{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  border-bottom:
    1px solid var(--line);
}


.status-summary div{
  padding:
    13px 15px;

  border-right:
    1px solid var(--line);
}


.status-summary div:last-child{
  border-right:0;
}


.status-summary span{
  display:block;

  font-size:9px;

  color:#7b837f;

  text-transform:uppercase;

  letter-spacing:.07em;

  font-weight:900;
}


.status-summary strong{
  display:block;

  margin-top:4px;

  font-size:20px;
}


/* =====================================================
   LOGIN
===================================================== */

.login{
  min-height:100vh;

  display:grid;

  grid-template-columns:
    minmax(480px,44%)
    1fr;

  background:#f4f5f4;
}


.login-left{
  background:var(--brand-2);

  color:white;

  padding:
    46px 50px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
}


.login-left .seal{
  width:70px;
  height:70px;

  border:0;

  display:grid;
  place-items:center;

  padding:0;

  background:transparent;

  overflow:visible;
}


.login-left .seal img{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;
}


.login-left h1{
  margin:0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:46px;
  line-height:1.05;

  font-weight:700;

  letter-spacing:-.03em;

  max-width:540px;
}


.login-left p{
  color:#aabdb5;

  max-width:500px;

  line-height:1.75;

  font-size:13px;
}


.login-right{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:40px;
}


.login-card{
  width:min(390px,100%);

  background:white;

  border:
    1px solid var(--line);

  padding:30px;
}


.login-card .overline{
  color:var(--accent);

  text-transform:uppercase;

  letter-spacing:.11em;

  font-size:9px;
  font-weight:900;
}


.login-card h2{
  margin:
    8px 0 6px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:28px;
}


.login-card>p{
  margin:
    0 0 22px;

  color:var(--muted);

  font-size:12px;

  line-height:1.6;
}


.alert{
  padding:
    10px 11px;

  margin-bottom:12px;

  font-size:11px;

  line-height:1.5;

  border:
    1px solid #ead0d0;

  background:#fff6f6;

  color:#8c3c3c;
}


/* =====================================================
   ATTENDANCE
===================================================== */

.attendance-page{
  min-height:100vh;

  background:#eef1ef;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:22px;
}


.attendance-card{
  width:min(460px,100%);

  background:white;

  border:
    1px solid #dce2df;
}


.attendance-head{
  padding:
    18px 20px;

  background:var(--brand-2);

  color:white;

  border-bottom:
    3px solid var(--accent);
}


.attendance-head span{
  display:block;

  color:#a8b9b2;

  text-transform:uppercase;

  font-size:9px;

  letter-spacing:.1em;

  font-weight:900;
}


.attendance-head h1{
  margin:
    5px 0 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:25px;
}


.attendance-body{
  padding:22px;
}


.attendance-body p{
  margin-top:0;

  color:#69726e;

  font-size:12px;

  line-height:1.65;
}


.info-list{
  border:
    1px solid var(--line);

  margin-top:14px;
}


.info-row{
  display:flex;

  justify-content:space-between;
  align-items:flex-start;

  gap:18px;

  padding:
    11px 12px;

  border-bottom:
    1px solid var(--line);

  font-size:11px;
}


.info-row:last-child{
  border-bottom:0;
}


.info-row span{
  color:#7b837f;
}


.info-row strong{
  text-align:right;

  overflow-wrap:anywhere;
}


.success-mark{
  width:42px;
  height:42px;

  border-radius:50%;

  display:grid;
  place-items:center;

  background:var(--good-bg);

  color:var(--good);

  font-weight:900;

  font-size:18px;

  margin-bottom:14px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1050px){

  .dashboard-grid,
  .detail-grid{
    grid-template-columns:1fr;
  }


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


  .metric:nth-child(2){
    border-right:0;
  }

}


@media(max-width:760px){

  .institution-bar{
    padding:
      0 16px;
  }


  .institution-bar span:last-child{
    display:none;
  }


  .header-inner{
    padding:
      14px 16px 0;
  }


  .brand-row{
    gap:12px;
  }


  .identity{
    gap:10px;
  }


  .identity-mark{
    width:48px;
    height:48px;

    flex-basis:48px;
  }


  .identity-copy > strong{
    font-size:18px;
  }


  .identity-copy > span{
    font-size:9px;
  }


  .brand-growth{
    margin-top:5px;

    gap:5px;
  }


  .brand-growth-logo{
    height:20px;

    max-width:105px;
  }


  .brand-growth-label{
    font-size:7px !important;
  }


  .admin-chip .admin-text{
    display:none;
  }


  .nav-tabs{
    gap:18px;

    margin-top:14px;
  }


  .page{
    padding:
      22px 16px 38px;
  }


  .page-head{
    align-items:flex-start;

    flex-direction:column;
  }


  .page-head h1{
    font-size:27px;
  }


  .session-row{
    grid-template-columns:
      70px 1fr 70px;

    gap:10px;

    padding:
      0 12px;
  }


  .session-count{
    display:none;
  }


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


  .field.full{
    grid-column:auto;
  }


  .table-tools{
    align-items:stretch;
    flex-direction:column;
  }


  .search{
    width:100%;
    max-width:none;
  }


  .participant-actions{
    gap:5px;
  }


  .participant-edit-btn,
  .participant-remove-btn{
    min-height:29px;

    padding:
      5px 8px;

    font-size:9px;
  }


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


  .login-left{
    display:none;
  }


  .login-right{
    padding:20px;
  }


  .login-card{
    padding:24px;
  }

}


@media(max-width:520px){

  .metrics-strip{
    grid-template-columns:1fr;
  }


  .metric{
    border-right:0;

    border-bottom:
      1px solid var(--line);
  }


  .metric:last-child{
    border-bottom:0;
  }


  .header-tools{
    gap:6px;
  }


  .admin-chip{
    padding:5px;
  }


  .admin-avatar{
    width:26px;
    height:26px;

    flex-basis:26px;
  }


  .header-tools .btn{
    min-height:32px;

    padding:
      7px 9px;

    font-size:11px;
  }


  .brand-growth-logo{
    height:18px;

    max-width:90px;
  }


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


  .status-summary div{
    border-right:0;

    border-bottom:
      1px solid var(--line);
  }


  .status-summary div:last-child{
    border-bottom:0;
  }


  .attendance-page{
    padding:12px;
  }


  .attendance-body{
    padding:18px;
  }


  .info-row{
    gap:10px;
  }

}


@media(max-width:390px){

  .identity-copy > span{
    display:none;
  }


  .identity-copy > strong{
    font-size:16px;
  }


  .identity-mark{
    width:42px;
    height:42px;

    flex-basis:42px;
  }


  .brand-growth{
    margin-top:4px;
  }


  .brand-growth-logo{
    height:16px;

    max-width:78px;
  }


  .brand-growth-label{
    font-size:6px !important;
  }


  .header-tools .btn{
    padding:
      6px 8px;
  }

}