/* ==========================================

   PT FASTCO — RESPONSIVE LOGIN

   Tema putih, merah, abu-abu

========================================== */



:root {

  --red: #ed202b;

  --red-dark: #c8101b;

  --red-soft: #fff0f1;

  --ink: #18212b;

  --muted: #66717e;

  --line: #e3e7ec;

  --white: #ffffff;

  --page: #f5f7fa;

  --radius: 16px;

}



* {

  box-sizing: border-box;

}



html {

  min-height: 100%;

  scroll-behavior: smooth;

}



body {

  margin: 0;

  min-height: 100vh;

  font-family: Inter, "Segoe UI", Arial, sans-serif;

  color: var(--ink);

  background: var(--page);

}



button,

input {

  font: inherit;

}



button {

  cursor: pointer;

}



button:focus-visible,

input:focus-visible {

  outline: 3px solid rgba(237, 32, 43, 0.2);

  outline-offset: 3px;

}



[hidden] {

  display: none !important;

}



/* LAYOUT */



.login-layout {

  min-height: 100vh;

  display: grid;

  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);

}



/* GAMBAR KIRI

   Simpan gambar pilihanmu di:

   assets/login-bg.jpg

*/



.visual-section {

  position: relative;

  isolation: isolate;

  min-height: 100vh;

  padding: clamp(28px, 4vw, 64px);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  overflow: hidden;

  background: linear-gradient(140deg, #fff, #ffecee);

}



.visual-image {

  position: absolute;

  z-index: -3;

  inset: 0;

  background-color: #f8dfe1;

  background-image: url("assets/login-bg.jpg");

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

}



/* Lapisan agar teks terbaca di atas gambar */

.visual-shade {

  position: absolute;

  z-index: -2;

  inset: 0;

  background:

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.84) 0%,

      rgba(255, 255, 255, 0.65) 34%,

      rgba(255, 255, 255, 0.22) 68%,

      rgba(255, 255, 255, 0.92) 100%

    ),

    linear-gradient(

      90deg,

      rgba(255, 255, 255, 0.34),

      transparent 85%

    );

}



/* BRAND */



.brand {

  display: flex;

  align-items: center;

  gap: 14px;

}



.brand-logo {

  width: 54px;

  height: 54px;

  flex: 0 0 54px;

  display: grid;

  place-items: center;

  border-radius: 15px;

  color: var(--white);

  background: linear-gradient(145deg, #ff3540, #c90d18);

  box-shadow: 0 8px 20px rgba(237, 32, 43, 0.2);

  font-size: 36px;

  font-weight: 900;

}



.brand-text h2 {

  margin: 0 0 5px;

  font-size: 24px;

  line-height: 1.1;

  font-weight: 850;

  letter-spacing: -0.7px;

}



.brand-text h2 span {

  color: var(--red);

}



.brand-text p {

  margin: 0;

  color: #515c68;

  font-size: 10px;

  font-weight: 750;

  letter-spacing: 1.8px;

}



/* TEKS BRANDING */



.visual-copy {

  width: 100%;

  max-width: 650px;

  margin: auto 0;

  padding: 70px 0;

}



.eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 20px;

  color: #46515d;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1.1px;

}



.status-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--red);

}



.visual-copy h1 {

  margin: 0;

  font-size: clamp(38px, 4.2vw, 62px);

  line-height: 1.12;

  letter-spacing: -1.8px;

  font-weight: 850;

}



.visual-copy h1 span {

  color: var(--red);

}



.visual-copy > p {

  max-width: 470px;

  margin: 20px 0 0;

  color: #4e5965;

  font-size: 16px;

  line-height: 1.8;

}



.visual-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 12px;

  color: #59636e;

  font-size: 11px;

}



.visual-footer span:last-child {

  display: flex;

  align-items: center;

  gap: 8px;

}



.visual-footer i {

  color: var(--red);

}



/* PANEL LOGIN */



.form-section {

  min-width: 0;

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: clamp(26px, 4vw, 64px);

  background:

    radial-gradient(

      circle at 100% 0%,

      rgba(255, 222, 225, 0.6),

      transparent 32%

    ),

    #ffffff;

}



.login-card {

  width: 100%;

  max-width: 450px;

  padding: 8px 0;

}



.mobile-brand {

  display: none;

}



.form-heading {

  margin-bottom: 30px;

}



.form-tag {

  display: inline-block;

  margin-bottom: 14px;

  color: var(--red);

  font-size: 10px;

  font-weight: 850;

  letter-spacing: 1.7px;

}



.form-heading h1 {

  margin: 0 0 12px;

  font-size: clamp(27px, 2.4vw, 34px);

  line-height: 1.25;

  letter-spacing: -0.9px;

  font-weight: 850;

}



.form-heading h1 span {

  color: var(--red);

}



.form-heading > p {

  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.8;

}



/* FORM */



\#loginForm {

  display: flex;

  flex-direction: column;

  gap: 21px;

}



.field {

  min-width: 0;

}



.field > label {

  display: block;

  margin-bottom: 9px;

  font-size: 13px;

  font-weight: 750;

}



.input-box {

  min-width: 0;

  min-height: 56px;

  display: flex;

  align-items: center;

  gap: 13px;

  padding: 0 16px;

  border: 1px solid #dce1e7;

  border-radius: 12px;

  background: #ffffff;

  transition: border-color 0.2s, box-shadow 0.2s;

}



.input-box:focus-within {

  border-color: var(--red);

  box-shadow: 0 0 0 4px rgba(237, 32, 43, 0.08);

}



.input-box > i {

  flex: 0 0 19px;

  color: #687482;

  font-size: 17px;

  text-align: center;

}



.input-box input {

  width: 100%;

  min-width: 0;

  height: 54px;

  padding: 0;

  border: 0;

  outline: none;

  background: transparent;

  color: var(--ink);

  font-size: 14px;

}



.input-box input::placeholder {

  color: #a1a9b2;

}



.input-box input:focus-visible {

  outline: none;

}



.toggle-password {

  width: 34px;

  height: 38px;

  flex: 0 0 34px;

  display: grid;

  place-items: center;

  border: 0;

  background: transparent;

  color: #77818c;

  font-size: 16px;

}



.toggle-password:hover {

  color: var(--red);

}



/* OPSI FORM */



.form-options {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  margin-top: -2px;

}



.remember-option {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: #505b67;

  font-size: 12px;

  cursor: pointer;

}



.remember-option input {

  position: absolute;

  width: 1px;

  height: 1px;

  opacity: 0;

}



.checkmark {

  width: 19px;

  height: 19px;

  flex: 0 0 19px;

  display: grid;

  place-items: center;

  border: 1px solid #cdd3da;

  border-radius: 5px;

  background: #ffffff;

}



.remember-option input:checked + .checkmark {

  border-color: var(--red);

  background: var(--red);

}



.remember-option input:checked + .checkmark::after {

  content: "✓";

  color: #ffffff;

  font-size: 13px;

  font-weight: 800;

}



.remember-option input:focus-visible + .checkmark {

  outline: 3px solid rgba(237, 32, 43, 0.2);

  outline-offset: 3px;

}



.forgot-button {

  padding: 5px 0;

  border: 0;

  background: transparent;

  color: var(--red);

  font-size: 12px;

  font-weight: 750;

}



.forgot-button:hover {

  color: var(--red-dark);

  text-decoration: underline;

}



/* TOMBOL LOGIN */



.login-button {

  width: 100%;

  min-height: 57px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  margin-top: 1px;

  padding: 15px 20px;

  border: 0;

  border-radius: 12px;

  background: linear-gradient(105deg, #f32935, #d20e1a);

  color: #ffffff;

  font-size: 14px;

  font-weight: 800;

  box-shadow: 0 8px 20px rgba(237, 32, 43, 0.18);

  transition: transform 0.2s, box-shadow 0.2s;

}



.login-button:hover {

  transform: translateY(-1px);

  box-shadow: 0 11px 26px rgba(237, 32, 43, 0.25);

}



.login-button:active {

  transform: translateY(0);

}



.login-button:disabled {

  opacity: 0.65;

  cursor: wait;

  transform: none;

}



.login-message {

  margin: -5px 0 0;

  color: #d71924;

  font-size: 12px;

  line-height: 1.65;

  overflow-wrap: anywhere;

}



.login-message:empty {

  display: none;

}



/* PEMISAH DAN BANTUAN */



.separator {

  display: flex;

  align-items: center;

  gap: 13px;

  margin: 29px 0 22px;

}



.separator span {

  flex: 1;

  height: 1px;

  background: #e7e9ed;

}



.separator p {

  margin: 0;

  color: #939ba5;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.5px;

}



.help-card {

  display: flex;

  align-items: flex-start;

  gap: 13px;

  padding: 16px;

  border: 1px solid #f7dfe1;

  border-radius: 13px;

  background: #fff6f6;

}



.help-icon {

  width: 38px;

  height: 38px;

  flex: 0 0 38px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #ffe3e5;

  color: var(--red);

  font-size: 17px;

}



.help-card h3 {

  margin: 1px 0 6px;

  font-size: 12px;

  font-weight: 800;

}



.help-card p {

  margin: 0;

  color: #65707b;

  font-size: 11px;

  line-height: 1.7;

}



.security-text {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 8px;

  margin: 24px 0 0;

  color: #8b949e;

  font-size: 10px;

}



.security-text i {

  color: var(--red);

}



/* ==========================================

   TABLET

========================================== */



@media (max-width: 1024px) {

  .login-layout {

    grid-template-columns: minmax(0, 0.9fr) minmax(390px, 1.1fr);

  }



  .visual-section {

    padding: 32px;

  }



  .form-section {

    padding: 32px;

  }



  .visual-copy h1 {

    font-size: clamp(35px, 4.5vw, 48px);

  }



  .brand-logo {

    width: 48px;

    height: 48px;

    flex-basis: 48px;

    font-size: 32px;

  }



  .brand-text h2 {

    font-size: 21px;

  }

}



/* ==========================================

   HP DAN TABLET KECIL

========================================== */



@media (max-width: 760px) {

  .login-layout {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

  }



  .visual-section {

    min-height: 300px;

    padding: 24px 22px 28px;

  }



  .brand {

    gap: 11px;

  }



  .brand-logo {

    width: 44px;

    height: 44px;

    flex-basis: 44px;

    border-radius: 12px;

    font-size: 29px;

  }



  .brand-text h2 {

    font-size: 20px;

  }



  .brand-text p {

    font-size: 9px;

    letter-spacing: 1.4px;

  }



  .visual-copy {

    padding: 40px 0 4px;

  }



  .eyebrow {

    margin-bottom: 13px;

    font-size: 9px;

    letter-spacing: 0.8px;

  }



  .visual-copy h1 {

    font-size: clamp(30px, 7vw, 43px);

    letter-spacing: -1px;

  }



  .visual-copy > p {

    max-width: 440px;

    margin-top: 12px;

    font-size: 13px;

    line-height: 1.7;

  }



  .visual-footer {

    display: none;

  }



  .form-section {

    flex: 1;

    min-height: auto;

    padding: 28px 20px 34px;

    align-items: flex-start;

  }



  .login-card {

    max-width: 500px;

    margin: 0 auto;

  }



  .form-heading {

    margin-bottom: 25px;

  }



  .form-heading h1 {

    font-size: clamp(25px, 6vw, 31px);

  }



  #loginForm {

    gap: 19px;

  }



  .input-box {

    min-height: 54px;

  }



  .input-box input {

    height: 52px;

  }



  .login-button {

    min-height: 55px;

  }

}



/* ==========================================

   HP SEMPIT

========================================== */



@media (max-width: 380px) {

  .visual-section {

    min-height: 270px;

    padding: 20px 16px 24px;

  }



  .visual-copy h1 {

    font-size: 29px;

  }



  .visual-copy > p {

    font-size: 12px;

  }



  .form-section {

    padding: 24px 16px 28px;

  }



  .form-heading h1 {

    font-size: 25px;

  }



  .form-heading > p {

    font-size: 13px;

  }



  .form-options {

    gap: 8px;

  }



  .remember-option,

  .forgot-button {

    font-size: 11px;

  }



  .help-card {

    padding: 13px;

  }

}



/* ==========================================

   MONITOR BESAR / PC

========================================== */



@media (min-width: 1600px) {

  .login-layout {

    grid-template-columns: minmax(0, 1.1fr) minmax(520px, 0.9fr);

  }



  .visual-section {

    padding: 70px;

  }



  .form-section {

    padding: 70px;

  }



  .login-card {

    max-width: 490px;

  }

}



/* Kurangi animasi bila diminta perangkat */

@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

  }

}





/* ==================================================

   BAGIAN HOME — PT FASTCO

   Khusus home.html

   Desain responsif HP, tablet, laptop, dan PC

================================================== */



/* Latar dan area utama */

.home-body {

  min-height: 100vh;

  background: #f5f7fa;

  color: #202936;

}



.home-shell {

  width: min(1120px, 100%);

  margin: auto;

  padding: 24px;

}



/* Header dan identitas perusahaan */

.home-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 30px;

}



.home-brand {

  display: flex;

  align-items: center;

  gap: 12px;

}



.home-logo {

  width: 46px;

  height: 46px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background: #ed202b;

  color: #ffffff;

  font-size: 29px;

  font-weight: 900;

}



.home-brand h1 {

  margin: 0;

  font-size: 20px;

}



.home-brand p {

  margin: 4px 0 0;

  color: #77818d;

  font-size: 10px;

  letter-spacing: 1.3px;

}



/* Tombol keluar */

.logout-button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 11px 15px;

  border: 1px solid #f0c9cc;

  border-radius: 10px;

  background: #ffffff;

  color: #d71924;

  font-weight: 700;

  cursor: pointer;

}



.logout-button:hover {

  background: #fff0f1;

}



.logout-button:disabled {

  opacity: 0.65;

  cursor: wait;

}



/* BANNER PT FASTCO — RESPONSIF */



.welcome-card {

  position: relative;

  overflow: hidden;

  width: 100%;

  min-height: 240px;

  padding: 30px;

  border-radius: 18px;

  box-sizing: border-box;

  color: white;



  background:

    linear-gradient(

      90deg,

      rgba(120, 0, 10, 0.72),

      rgba(120, 0, 10, 0.12)

    ),

    url("./image/background-home.png") center / cover no-repeat;

}



@media (max-width: 600px) {

  .welcome-card {

    min-height: 200px;

    padding: 18px;

    background-position: center;

  }

}






/* TABLET */

@media (max-width: 1024px) {

  .welcome-card {

    min-height: 220px;

    padding: 24px;

    background-position: center;

  }

}



/* HP */

@media (max-width: 600px) {

  .welcome-card {

    min-height: 190px;

    padding: 18px;

    border-radius: 14px;



    /* Memprioritaskan area kiri yang berisi identitas FASTCO */

    background-position: left center;

    background-size: cover;

  }

}



/* HP KECIL */

@media (max-width: 380px) {

  .welcome-card {

    min-height: 170px;

    padding: 14px;

    border-radius: 12px;

  }

}






.welcome-card::after {

  content: "F";

  position: absolute;

  right: 25px;

  bottom: -70px;

  color: rgba(255, 255, 255, 0.09);

  font-size: 250px;

  line-height: 1;

  font-weight: 900;

  pointer-events: none;

}



.welcome-card > * {

  position: relative;

  z-index: 1;

}



.welcome-label {

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1.5px;

  opacity: 0.85;

}



.welcome-card h2 {

  margin: 13px 0 8px;

  font-size: clamp(26px, 4vw, 36px);

}



.welcome-card p {

  margin: 0;

  color: #ffecee;

  line-height: 1.7;

}



.profile-role {

  display: inline-flex;

  margin-top: 20px;

  padding: 8px 12px;

  border: 1px solid rgba(255, 255, 255, 0.35);

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.13);

  font-size: 12px;

  font-weight: 700;

  text-transform: capitalize;

}



/* Judul bagian */

.section-heading {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin: 30px 0 16px;

}



.section-heading h2 {

  margin: 0;

  font-size: 19px;

}



.section-heading > span {

  color: #7a8490;

  font-size: 12px;

}



/* Kartu status harian */

.status-grid {

  display: grid;

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

  gap: 16px;

}



.status-card {

  display: flex;

  align-items: flex-start;

  gap: 14px;

  min-width: 0;

  padding: 20px;

  border: 1px solid #e7eaf0;

  border-radius: 16px;

  background: #ffffff;

}



.status-icon {

  width: 44px;

  height: 44px;

  flex: 0 0 44px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background: #fff0f1;

  color: #e32232;

  font-size: 18px;

}



.status-card h3 {

  margin: 2px 0 8px;

  color: #697482;

  font-size: 13px;

}



.status-value {

  margin: 0;

  overflow-wrap: anywhere;

  font-size: 17px;

  font-weight: 800;

}



.status-detail {

  margin: 7px 0 0;

  color: #7a8490;

  font-size: 12px;

  line-height: 1.6;

}



/* Menu utama */

.menu-grid {

  display: grid;

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

  gap: 16px;

}



.home-menu {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 11px;

  min-width: 0;

  min-height: 150px;

  padding: 22px;

  border: 1px solid #e7eaf0;

  border-radius: 16px;

  background: #ffffff;

  color: #202936;

  text-align: left;

  text-decoration: none;

  transition:

    transform 0.18s,

    border-color 0.18s,

    box-shadow 0.18s;

}



.home-menu:hover {

  transform: translateY(-3px);

  border-color: #f0a6ab;

  box-shadow: 0 10px 24px rgba(26, 38, 52, 0.06);

}



.home-menu .menu-icon {

  width: 45px;

  height: 45px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background: #fff0f1;

  color: #e32232;

  font-size: 20px;

}



.home-menu strong {

  font-size: 15px;

}



.home-menu small {

  color: #7a8490;

  font-size: 12px;

  line-height: 1.5;

}



/* Pengumuman dan footer */

.home-notice {

  margin-top: 24px;

  padding: 16px 18px;

  border: 1px solid #e7eaf0;

  border-radius: 14px;

  background: #ffffff;

  color: #687482;

  font-size: 12px;

  line-height: 1.7;

}



.home-notice i {

  margin-right: 8px;

  color: #e32232;

}



.home-footer {

  padding: 25px 0 8px;

  color: #89929d;

  text-align: center;

  font-size: 11px;

}



/* TABLET DAN LAPTOP KECIL */

@media (max-width: 900px) {

  .home-shell {

    padding: 22px;

  }



  .menu-grid {

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

  }

}



/* HP */

@media (max-width: 650px) {

  .home-shell {

    padding: 18px 15px;

  }



  .home-header {

    margin-bottom: 22px;

  }



  .home-brand h1 {

    font-size: 18px;

  }



  .logout-button {

    padding: 10px 12px;

    font-size: 12px;

  }



  .welcome-card {

    border-radius: 18px;

  }



  .welcome-card::after {

    right: -5px;

    bottom: -35px;

    font-size: 160px;

  }



  .status-grid {

    grid-template-columns: 1fr;

    gap: 12px;

  }



  .status-card {

    padding: 16px;

  }



  .menu-grid {

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

    gap: 12px;

  }



  .home-menu {

    min-height: 145px;

    padding: 16px;

  }



  .section-heading {

    margin-top: 25px;

  }

}



/* HP SEMPIT */

@media (max-width: 360px) {

  .home-shell {

    padding: 14px 10px;

  }



  .home-brand {

    gap: 8px;

  }



  .home-logo {

    width: 39px;

    height: 39px;

    font-size: 25px;

  }



  .home-brand h1 {

    font-size: 16px;

  }



  .logout-button {

    gap: 5px;

    padding: 9px;

  }



  .menu-grid {

    grid-template-columns: 1fr;

  }



  .home-menu {

    min-height: 120px;

  }

}



/* PC / MONITOR BESAR */

@media (min-width: 1600px) {

  .home-shell {

    width: min(1240px, 100%);

  }

}





/* PENGATURAN RESPONSIF GLOBAL */

* {

  box-sizing: border-box;

}



html {

  width: 100%;

  overflow-x: hidden;

}



body {

  margin: 0;

  width: 100%;

  min-width: 0;

  overflow-x: hidden;

}



img {

  max-width: 100%;

  height: auto;

}



input,

button,

select,

textarea {

  max-width: 100%;

}



/* HP dan tablet */

@media (max-width: 768px) {

  .container,

  .dashboard-container,

  .main-content {

    width: 100%;

    max-width: 100%;

  }

}













/* =========================================

   JADWAL SHIFT PT FASTCO

   Responsif: HP, Tablet, Laptop, PC

========================================= */



.jadwal-body {

  margin: 0;

  min-height: 100vh;

  background: #f4f6fa;

  color: #202b3d;

  font-family: inherit;

}



.jadwal-body *,

.jadwal-body *::before,

.jadwal-body *::after {

  box-sizing: border-box;

}



.schedule-page {

  width: min(1440px, calc(100% - 40px));

  margin: 28px auto 50px;

}



/* HEADER */



.schedule-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 28px;

}



.schedule-brand {

  display: flex;

  align-items: center;

  gap: 12px;

  color: inherit;

  text-decoration: none;

}



.schedule-logo {

  display: grid;

  place-items: center;

  width: 46px;

  height: 46px;

  flex-shrink: 0;

  border-radius: 13px;

  background: #f32136;

  color: #fff;

  font-size: 25px;

  font-weight: 900;

}



.schedule-brand strong,

.schedule-brand small {

  display: block;

}



.schedule-brand strong {

  font-size: 19px;

}



.schedule-brand small {

  margin-top: 3px;

  color: #7b8494;

  font-size: 10px;

  letter-spacing: 1.3px;

}



.schedule-back {

  padding: 11px 15px;

  border: 1px solid #ffd0d5;

  border-radius: 11px;

  background: #fff;

  color: #e51f35;

  text-decoration: none;

  font-size: 13px;

  font-weight: 700;

}



.schedule-back:hover {

  background: #fff0f2;

}



/* BANNER JUDUL */



.schedule-intro {

  padding: 28px;

  margin-bottom: 22px;

  border-radius: 18px;

  color: white;

  background: linear-gradient(115deg, #a70e20, #f32136);

  box-shadow: 0 8px 24px rgba(180, 15, 35, 0.12);

}



.schedule-eyebrow {

  margin: 0 0 10px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1.6px;

}



.schedule-intro h1 {

  margin: 0 0 9px;

  font-size: clamp(26px, 4vw, 36px);

}



.schedule-intro p:last-child {

  margin-bottom: 0;

  font-size: 14px;

  line-height: 1.6;

  opacity: 0.92;

}



/* PANEL JADWAL */



.schedule-panel {

  padding: 22px;

  border: 1px solid #e2e7ef;

  border-radius: 18px;

  background: #fff;

  box-shadow: 0 5px 22px rgba(25, 38, 58, 0.035);

}



/* NAVIGASI MINGGU */



.schedule-toolbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 22px;

}



.schedule-toolbar > div {

  display: grid;

  gap: 6px;

  text-align: center;

}



.schedule-toolbar > div strong {

  font-size: 15px;

}



.schedule-toolbar small {

  color: #7b8494;

  font-size: 12px;

}



.schedule-toolbar button {

  min-height: 40px;

  padding: 10px 14px;

  border: 1px solid #e1e5ec;

  border-radius: 10px;

  background: #fff;

  color: #273246;

  font: inherit;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  transition: background 0.2s, border-color 0.2s;

}



.schedule-toolbar button:hover {

  border-color: #ffc6cd;

  background: #fff0f2;

}



/* KETERANGAN WARNA SHIFT */



.schedule-legend {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 16px;

  margin-bottom: 16px;

  color: #5e6879;

  font-size: 12px;

}



.schedule-legend span {

  display: flex;

  align-items: center;

  gap: 7px;

}



.shift-dot {

  display: inline-block;

  width: 9px;

  height: 9px;

  border-radius: 50%;

}



.shift-one {

  background: #168653;

}



.shift-two {

  background: #2672d8;

}



.shift-three {

  background: #8a4bd0;

}



.shift-off {

  background: #a1a8b4;

}



/* TABEL MINGGUAN */



.schedule-table-wrap {

  width: 100%;

  overflow-x: auto;

  border: 1px solid #e5e9f0;

  border-radius: 12px;

  -webkit-overflow-scrolling: touch;

}



.schedule-table {

  width: 100%;

  min-width: 850px;

  border-collapse: separate;

  border-spacing: 0;

  font-size: 13px;

}



.schedule-table th,

.schedule-table td {

  padding: 12px 10px;

  border-right: 1px solid #edf0f5;

  border-bottom: 1px solid #edf0f5;

  text-align: center;

}



.schedule-table th {

  background: #f8f9fc;

  color: #505b6e;

  font-size: 12px;

  font-weight: 700;

  white-space: nowrap;

}



.schedule-table th:first-child,

.schedule-table td:first-child {

  position: sticky;

  left: 0;

  z-index: 1;

  min-width: 175px;

  text-align: left;

  background: #fff;

}



.schedule-table thead th:first-child {

  z-index: 2;

  background: #f8f9fc;

}



.schedule-table tr:last-child td {

  border-bottom: 0;

}



.schedule-table th:last-child,

.schedule-table td:last-child {

  border-right: 0;

}



.schedule-person {

  display: grid;

  gap: 4px;

}



.schedule-person strong {

  color: #273246;

  font-size: 13px;

}



.schedule-person small {

  color: #858d9b;

  font-size: 11px;

}



/* PILIHAN SHIFT */



.schedule-cell {

  min-width: 82px;

}



.schedule-cell select {

  width: 100%;

  min-width: 76px;

  min-height: 36px;

  padding: 8px 5px;

  border: 1px solid #e0e5ed;

  border-radius: 9px;

  background: #fff;

  color: #283448;

  font: inherit;

  font-size: 12px;

  cursor: pointer;

}



.schedule-cell select:focus {

  outline: 2px solid #f7a8b1;

  outline-offset: 1px;

}



.schedule-cell select:disabled {

  opacity: 1;

  cursor: default;

  appearance: none;

  text-align: center;

  background: #f8f9fb;

}



.schedule-cell .value-one {

  color: #147849;

  background: #e9f8ef;

  border-color: #ccebd8;

}



.schedule-cell .value-two {

  color: #1f61bb;

  background: #edf4ff;

  border-color: #d5e5ff;

}



.schedule-cell .value-three {

  color: #7540b5;

  background: #f4edff;

  border-color: #e6d8ff;

}



.schedule-cell .value-off {

  color: #6d7583;

  background: #f2f4f7;

  border-color: #e1e5ec;

}



/* STATUS DAN KETERANGAN */



.schedule-empty {

  padding: 32px !important;

  color: #7b8494;

  text-align: center !important;

}



.schedule-footnote {

  margin: 16px 0 0;

  color: #7b8494;

  font-size: 12px;

  line-height: 1.7;

}



/* TABLET */



@media (max-width: 900px) {

  .schedule-page {

    width: calc(100% - 28px);

    margin-top: 20px;

  }



  .schedule-panel {

    padding: 16px;

  }



  .schedule-intro {

    padding: 24px;

  }

}



/* HP */



@media (max-width: 600px) {

  .schedule-page {

    width: calc(100% - 20px);

    margin: 12px auto 28px;

  }



  .schedule-header {

    margin-bottom: 18px;

  }



  .schedule-logo {

    width: 40px;

    height: 40px;

    border-radius: 11px;

    font-size: 22px;

  }



  .schedule-brand strong {

    font-size: 16px;

  }



  .schedule-back {

    padding: 10px 12px;

    font-size: 12px;

  }



  .schedule-intro {

    padding: 20px;

    margin-bottom: 14px;

    border-radius: 14px;

  }



  .schedule-panel {

    padding: 12px;

    border-radius: 14px;

  }



  .schedule-toolbar {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

  }



  .schedule-toolbar > div {

    grid-column: 1 / -1;

    grid-row: 1;

  }



  .schedule-toolbar button {

    padding: 10px 5px;

    font-size: 11px;

  }



  .schedule-legend {

    gap: 10px 13px;

    font-size: 11px;

  }



  .schedule-table {

    min-width: 780px;

  }

}



/* HP SANGAT KECIL */



@media (max-width: 360px) {

  .schedule-page {

    width: calc(100% - 14px);

  }



  .schedule-intro {

    padding: 16px;

  }



  .schedule-panel {

    padding: 9px;

  }

}

/* ==================================================
   JADWAL SHIFT — DESAIN RESPONSIF PC DAN HP
   Catatan: kartu per hari diisi oleh app.js.
================================================== */
.jadwal-body .schedule-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.jadwal-body .schedule-mobile-schedule {
  display: none;
  width: 100%;
  min-width: 0;
  gap: 12px;
}

.jadwal-body .schedule-mobile-schedule .schedule-empty {
  width: 100%;
  padding: 22px 12px !important;
  border: 1px dashed #d9dfeb;
  border-radius: 12px;
  background: #f8f9fc;
  color: #687386;
  text-align: center !important;
  line-height: 1.7;
}

.jadwal-body .mobile-day-card {
  width: 100%;
  min-width: 0;
  padding: 15px;
  border: 1px solid #e3e8f0;
  border-radius: 13px;
  background: #fff;
}

.jadwal-body .mobile-day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.jadwal-body .mobile-day-heading strong {
  font-size: 15px;
}

.jadwal-body .mobile-day-heading small {
  display: block;
  margin-top: 4px;
  color: #7b8494;
  font-size: 12px;
}

.jadwal-body .mobile-shift-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid #edf0f5;
}

.jadwal-body .mobile-shift-time {
  color: #657084;
  font-size: 12px;
}

.jadwal-body .mobile-shift-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

.jadwal-body .mobile-shift-badge.value-one {
  color: #147849;
  background: #e9f8ef;
}

.jadwal-body .mobile-shift-badge.value-two {
  color: #1f61bb;
  background: #edf4ff;
}

.jadwal-body .mobile-shift-badge.value-three {
  color: #7540b5;
  background: #f4edff;
}

.jadwal-body .mobile-shift-badge.value-off {
  color: #6d7583;
  background: #f2f4f7;
}

@media screen and (max-width: 600px) {
  .jadwal-body .schedule-page {
    width: calc(100% - 20px);
    margin: 12px auto 28px;
  }

  .jadwal-body .schedule-table-wrap {
    display: none !important;
  }

  .jadwal-body .schedule-mobile-schedule {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .jadwal-body .schedule-panel {
    min-width: 0;
    padding: 12px;
  }

  .jadwal-body .schedule-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }

  .jadwal-body .schedule-toolbar > div {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
  }

  .jadwal-body .schedule-toolbar button {
    min-width: 0;
    padding: 10px 4px;
    font-size: 11px;
  }

  .jadwal-body .schedule-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 13px;
    margin-bottom: 16px;
  }

  .jadwal-body .schedule-intro {
    overflow-wrap: anywhere;
  }
}

@media screen and (max-width: 360px) {
  .jadwal-body .schedule-page {
    width: calc(100% - 14px);
  }

  .jadwal-body .schedule-intro {
    padding: 16px;
  }

  .jadwal-body .schedule-panel {
    padding: 9px;
  }
}