:root{
    --bg:#F5F6F6;
    --surface:#FFFFFF;
    --ink:#15292D;
    --ink-soft:#5C6B6D;
    --accent:#D91E2C;
    --accent-dark:#AD1620;
    --accent-tint:#FDECEC;
    --steel:#4A5657;
    --steel-tint:#EDEFEF;
    --success:#227A52;
    --success-bg:#E6F3EC;
    --warning:#B9862E;
    --warning-bg:#FBF1DE;
    --danger:#B3111C;
    --danger-bg:#FBE9E7;
    --skip-bg:#E7E9E9;
    --border:#E3E6E5;
    --radius:12px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    letter-spacing:-.01em;
    margin:0;
  }
  .tabular{font-variant-numeric:tabular-nums;}

  /* Header */
  .topbar{
    background:var(--ink);
    color:#fff;
    position:relative;
    overflow:hidden;
    border-bottom:3px solid var(--accent);
  }
  .topbar-inner{
    max-width:1140px;
    margin:0 auto;
    padding:16px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
  }
  .brand{display:flex; align-items:center; gap:16px;}
  .brand img{height:52px; width:auto; display:block; background:#fff; border-radius:8px; padding:6px 10px;}
  .brand-text-name{font-size:23px; line-height:1.15; letter-spacing:.01em;}
  .brand-sub{font-family:'Inter',sans-serif; font-weight:400; font-size:12.5px; color:#B9C2C1; letter-spacing:.02em; margin-top:3px;}
  .user-chip{
    display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.16);
    padding:8px 16px; border-radius:30px;
    font-size:14px;
  }
  .user-chip b{font-weight:600;}
  .user-chip .meta{color:#B9C2C1; font-size:12.5px;}
  .user-chip .role-tag{
    background:var(--accent); color:#fff; font-weight:600;
    font-size:11px; text-transform:uppercase; letter-spacing:.05em;
    padding:3px 10px; border-radius:20px;
  }
  .link-btn{
    background:none;border:none;color:#B9C2C1;text-decoration:underline;
    cursor:pointer;font-size:13px;font-family:'Inter',sans-serif;padding:0;
  }
  .link-btn:hover{color:#fff;}

  .wrap{max-width:1140px; margin:0 auto; padding:30px 24px 64px;}

  /* Login screen */
  .login-shell{
    min-height:82vh; display:flex; align-items:center; justify-content:center;
    padding:24px;
  }
  .login-card{
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    max-width:480px; width:100%; padding:38px 36px 32px;
    box-shadow:0 2px 18px rgba(21,41,45,.06);
  }
  .login-logo{display:block; height:46px; width:auto; margin-bottom:20px;}
  .login-card h1{font-size:27px; margin-bottom:4px;}
  .login-sub{color:var(--ink-soft); font-size:14px; margin-bottom:24px;}
  .role-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:20px;}
  .role-opt{
    border:1.5px solid var(--border); border-radius:10px; padding:15px 8px;
    text-align:center; cursor:pointer; background:#fff; transition:.15s;
  }
  .role-opt:hover{border-color:var(--accent);}
  .role-opt.active{border-color:var(--accent); background:var(--accent-tint);}
  .role-opt .ico{font-size:21px; display:block; margin-bottom:6px;}
  .role-opt .lbl{font-family:'Poppins',sans-serif; font-weight:600; font-size:13.5px;}

  label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;}
  select, input, textarea{
    width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:9px;
    font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink); background:#fff;
  }
  select:focus, input:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
  .field{margin-bottom:16px;}

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:11px 22px; border-radius:9px; border:none; cursor:pointer;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px;
    transition:.15s;
  }
  .btn-primary{background:var(--accent); color:#fff;}
  .btn-primary:hover{background:var(--accent-dark);}
  .btn-primary:disabled{background:#D8D2C4; cursor:not-allowed;}
  .btn-block{width:100%;}
  .btn-success{background:var(--success); color:#fff;}
  .btn-success:hover{background:#1a5f41;}
  .btn-danger{background:var(--danger); color:#fff;}
  .btn-danger:hover{background:#8f0e17;}
  .btn-ghost{background:#fff; color:var(--ink); border:1.5px solid var(--border);}
  .btn-ghost:hover{border-color:var(--steel);}
  .btn-sm{padding:7px 15px; font-size:13px;}

  /* Section / card */
  .section-title{
    display:flex; align-items:center; gap:12px; margin:36px 0 14px;
  }
  .section-title h2{font-size:20px; color:var(--ink);}
  .section-title .dash{flex:1; height:1px; background:var(--border);}
  .card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:22px 24px; margin-bottom:18px;
  }
  .card-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
  .card-head h3{font-size:18px;}

  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;}
  @media (max-width:640px){ .grid2,.grid3{grid-template-columns:1fr;} .role-grid{grid-template-columns:1fr;} }

  /* Stat cards */
  .stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:8px;}
  @media (max-width:760px){.stat-row{grid-template-columns:1fr 1fr;}}
  .stat{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:16px 18px;
  }
  .stat .num{font-family:'Poppins',sans-serif; font-weight:700; font-size:29px; line-height:1;}
  .stat .lbl{font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; margin-top:5px;}

  /* Badge */
  .badge{
    display:inline-block; padding:4px 11px; border-radius:20px; font-size:11.5px;
    font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  }
  .badge-warning{background:var(--warning-bg); color:var(--warning);}
  .badge-success{background:var(--success-bg); color:var(--success);}
  .badge-danger{background:var(--danger-bg); color:var(--danger);}
  .badge-steel{background:var(--steel-tint); color:var(--steel);}

  /* Ticket / stepper */
  .ticket{
    border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px;
    margin-bottom:12px; background:#fff;
  }
  .ticket-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
  .ticket-id{font-size:12px; color:var(--ink-soft); letter-spacing:.02em;}
  .ticket-emp{font-family:'Poppins',sans-serif; font-weight:600; font-size:17px;}
  .ticket-meta{font-size:13.5px; color:var(--ink-soft); margin-top:2px;}
  .stepper{display:flex; align-items:center; margin:16px 0 10px;}
  .step{display:flex; flex-direction:column; align-items:center; flex:1; position:relative;}
  .step .stamp{
    width:28px; height:28px; border-radius:50%; border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center; background:#fff; z-index:1;
    font-size:13px; font-weight:700; color:var(--ink-soft);
  }
  .step .stamp.done{background:var(--success); border-color:var(--success); color:#fff;}
  .step .stamp.rejected{background:var(--danger); border-color:var(--danger); color:#fff;}
  .step .stamp.current{background:var(--warning); border-color:var(--warning); color:#4A3607;}
  .step .stamp.skip{background:var(--skip-bg); border-color:var(--border); color:var(--ink-soft);}
  .step .stlabel{font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); margin-top:5px; text-align:center;}
  .step:not(:last-child)::after{
    content:''; position:absolute; top:14px; left:calc(50% + 17px); right:calc(-50% + 17px);
    height:2px; background:var(--border); z-index:0;
  }
  .step.line-done:not(:last-child)::after{background:var(--success);}
  .ticket-reason{font-size:13.5px; color:var(--ink-soft); margin-top:10px; padding-top:10px; border-top:1px dashed var(--border);}
  .ticket-note{font-size:12.5px; color:var(--ink-soft); margin-top:5px; font-style:italic;}

  /* Table */
  table{width:100%; border-collapse:collapse; font-size:13.5px;}
  th{
    text-align:left; font-family:'Poppins',sans-serif; font-weight:600;
    font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); padding:9px 10px; border-bottom:2px solid var(--border);
  }
  td{padding:10px 10px; border-bottom:1px solid var(--border); vertical-align:top;}
  tr:last-child td{border-bottom:none;}
  .empty-state{
    text-align:center; padding:36px 16px; color:var(--ink-soft); font-size:14px;
  }
  .empty-state .ico{font-size:28px; display:block; margin-bottom:8px;}
  .approve-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px;}
  .approve-row input{flex:1; min-width:180px;}
  .toast{
    position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
    background:var(--ink); color:#fff; padding:12px 22px; border-radius:9px; font-size:14px;
    box-shadow:0 4px 14px rgba(0,0,0,.2); z-index:50; opacity:0; transition:opacity .25s;
  }
  .toast.show{opacity:1;}
  .footer-note{text-align:center; color:var(--ink-soft); font-size:12.5px; margin-top:36px;}
  .helper{font-size:12.5px; color:var(--ink-soft); margin-top:4px;}
  /* ===== Tambahan untuk versi Laravel ===== */
  a.role-opt{text-decoration:none; color:inherit; display:block;}
  form.inline{display:inline;}
  .btn[disabled]{opacity:.5; cursor:not-allowed;}
  a.btn{text-decoration:none; display:inline-block;}