@media (max-width: 820px) {

  /* ===== NAV RESET (anti ketiban) ===== */
  #nav {
    background: #000 !important;
    padding: 0 !important;
    margin: 12px 0 0 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
    overflow: visible !important;
    clear: both !important;
  }

  /* UL kadang punya height/padding bawaan */
  #nav.flush-left,
  #nav ul {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* LI jangan punya float/height */
  #nav li {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* LINK: bikin rapi dan gak ketiban */
  #nav li a {
    display: block !important;
    width: 100% !important;
    padding: 14px 12px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    background: transparent !important;
    color: #fff !important;
    border: 0 !important;
  }

  /* ACTIVE / HOVER */
  #nav li a.active {
    background: #eee !important;
    color: #000 !important;
  }
}
@media (max-width: 820px) {
  #nav li a {
    background-image: none !important;
    text-indent: 0 !important;
  }
    #header { position: relative !important; }
  #header #logo {
    position: relative !important;
    z-index: 5 !important;
  }
  #nav {
    position: relative !important;
    z-index: 1 !important;
  }
   /* Jangan ada elemen yang maksa lebar layar */
  #container, #content, #header, #footer, #page, #main {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Paksa semua text boleh turun baris */
  #content, #content * {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Khusus judul besar */
  #content h1, #content h2 {
    font-size: 34px !important;   /* optional: biar ga kegedean */
    line-height: 1.15 !important;
    margin-right: 0 !important;
  }
  body { overflow-x: hidden !important; }

    /* ===== LOGIN: paksa jadi 1 kolom ===== */
  body#pg-login #clientLogin,
  body#pg-login #clientLogin table,
  body#pg-login #clientLogin tbody,
  body#pg-login #clientLogin tr,
  body#pg-login #clientLogin td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* sembunyikan panel kanan (ikon/teks kanan) */
  body#pg-login #clientLogin td:last-child {
    display: none !important;
  }

  /* input & tombol full */
  body#pg-login #clientLogin input,
  body#pg-login #clientLogin button {
    width: 100% !important;
    max-width: 100% !important;
  }

    /* ===== OPEN TICKET: semua tabel form jadi stack ===== */
  body#pg-open form table,
  body#pg-open form tbody,
  body#pg-open form tr,
  body#pg-open form th,
  body#pg-open form td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* label jangan sejajar kiri-kanan, bikin atas-bawah */
  body#pg-open form th {
    padding: 10px 0 6px 0 !important;
  }

  body#pg-open form td {
    padding: 0 0 10px 0 !important;
  }

  /* input/select/textarea full */
  body#pg-open form input[type="text"],
  body#pg-open form input[type="email"],
  body#pg-open form input[type="tel"],
  body#pg-open form input[type="number"],
  body#pg-open form input[type="password"],
  body#pg-open form select,
  body#pg-open form textarea {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ext (biasanya kecil) jangan bikin layout pecah */
  body#pg-open input[name*="ext"],
  body#pg-open input[id*="ext"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fieldset / section jarak biar enak */
  body#pg-open fieldset {
    margin: 12px 0 !important;
    padding: 12px !important;
  }

    body#pg-open #content h1,
  body#pg-open #content h2,
  body#pg-login #content h1,
  body#pg-login #content h2 {
    font-size: 34px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  /* =========================
     FORCE: semua TABLE layout jadi 1 kolom
     (khusus halaman login + open ticket)
     ========================= */

  body#pg-login table,
  body#pg-open table {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ini yang ngubah struktur tabel jadi block */
  body#pg-login table,
  body#pg-login tbody,
  body#pg-login tr,
  body#pg-login td,
  body#pg-login th,
  body#pg-open table,
  body#pg-open tbody,
  body#pg-open tr,
  body#pg-open td,
  body#pg-open th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* =========================
     FORCE: semua input/select/textarea full width
     ========================= */
  body#pg-login input,
  body#pg-login select,
  body#pg-login textarea,
  body#pg-open input,
  body#pg-open select,
  body#pg-open textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* =========================
     LOGIN: sembunyikan kolom kanan (ikon/teks)
     - karena kita gak tau id tabelnya, kita target td yang punya gambar gembok
     ========================= */
  body#pg-login td img,
  body#pg-login td .login-box,
  body#pg-login td .login-right {
    max-width: 100% !important;
  }

  /* “cara licik” tapi efektif:
     kalau ada td yang berisi gambar gembok / panel kanan, dia biasanya td terakhir */
  body#pg-login tr > td:last-child {
    display: none !important;
  }

  /* =========================
     OPEN: rapihin tombol bawah biar gak sejajar kecil-kecil
     ========================= */
  body#pg-open input[type="submit"],
  body#pg-open input[type="button"],
  body#pg-open button {
    width: 100% !important;
    margin: 8px 0 !important;
  }

    /* 1) Cegah horizontal scroll tanpa ngerusak layout */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 2) Container utama jangan maksa width desktop */
  #container {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #content {
    width: auto !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 3) FIX KHUSUS OPEN TICKET:
        Biasanya input ditempel style width fixed oleh table form.
        Kita target form table-nya, bukan semua input site.
  */
  body#pg-open table,
  body#pg-open .form_table {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Wrapper yang sering bikin input "kepanjangan" */
  body#pg-open td,
  body#pg-open th,
  body#pg-open .form_table td,
  body#pg-open .form_table th {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Input di open ticket: biar ngikut container */
  body#pg-open input[type="text"],
  body#pg-open input[type="email"],
  body#pg-open input[type="tel"],
  body#pg-open input[type="password"],
  body#pg-open textarea,
  body#pg-open select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* Tombol di open ticket biar rapi */
  body#pg-open input[type="submit"],
  body#pg-open input[type="button"],
  body#pg-open button {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 8px 0 !important;
  }

  /* 4) FIX LOGIN USER:
        login page kamu itu 2 kolom (form kiri + info/lock kanan).
        Kita hanya rapihin di area login box saja, bukan semua table.
  */
  body#pg-login #content table {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Biar kolom kanan turun ke bawah (bukan ditiban) */
  body#pg-login #content td {
    vertical-align: top !important;
  }

  /* Kalau masih kepotong, paksa form column full */
  body#pg-login #content input[type="text"],
  body#pg-login #content input[type="email"],
  body#pg-login #content input[type="password"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

   /* wrapper tabel tickets osTicket */
  #ticketTable, 
  #ticketTable table {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* bikin bisa geser kiri-kanan */
  #ticketTable {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* paksa tabel punya lebar minimum (bukan tiap kolom) */
  #ticketTable table {
    min-width: 720px;  /* kamu bisa coba 640 / 760 sesuai kebutuhan */
    border-collapse: collapse;
  }

  /* cegah teks jadi turun per huruf */
  #ticketTable th,
  #ticketTable td {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* sedikit kecilin font biar muat */
  #ticketTable th { font-size: 12px !important; }
  #ticketTable td { font-size: 13px !important; }

  @media (max-width: 768px) {

  /* Hanya halaman tickets */
  body#pg-tickets .ticketTableScroll{
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #ddd;   /* optional */
  }

  /* Paksa tabel lebih lebar dari layar supaya bisa di-swipe */
  body#pg-tickets #ticketTable{
    width: max-content !important;
    min-width: 900px !important; /* coba 800-1100 sesuai kebutuhan */
    border-collapse: collapse;
  }

  /* Stop teks jadi huruf turun kebawah */
  body#pg-tickets #ticketTable th,
  body#pg-tickets #ticketTable td{
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* Optional: lebarin kolom “Permasalahan” (kolom ke-4) */
  body#pg-tickets #ticketTable th:nth-child(4),
  body#pg-tickets #ticketTable td:nth-child(4){
    min-width: 280px !important;
  }

  /* === ONLY ticket detail view wrapper === */
  body#pg-tickets .ticket-view {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Hilangkan width 800 paksa jadi full */
  body#pg-tickets .ticket-view #ticketInfo {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ubah 2 kolom (50% + 50%) jadi STACK */
  body#pg-tickets .ticket-view #ticketInfo > tbody > tr > td {
    display: block !important;
    width: 100% !important;
  }

  /* Table dalam kolom juga full */
  body#pg-tickets .ticket-view #ticketInfo table.infoTable,
  body#pg-tickets .ticket-view #ticketInfo table.custom-data {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Label & value jangan jadi sempit */
  body#pg-tickets .ticket-view #ticketInfo table.infoTable th,
  body#pg-tickets .ticket-view #ticketInfo table.custom-data th {
    width: 40% !important;          /* adjust 35-45% */
    white-space: normal !important;
    vertical-align: top;
  }

  body#pg-tickets .ticket-view #ticketInfo table.infoTable td,
  body#pg-tickets .ticket-view #ticketInfo table.custom-data td {
    width: 60% !important;
    overflow-wrap: anywhere !important;  /* email tidak turun per huruf */
    word-break: break-word !important;
  }

  /* Judul ticket jangan kegedean */
  body#pg-tickets .ticket-view h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  /* Tombol Print/Edit jangan float kanan di mobile */
  body#pg-tickets .ticket-view h1 .pull-right {
    float: none !important;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  /* hanya berlaku untuk halaman open ticket */
  #ticketForm #openTicketTable,
  #ticketForm .open-ticket-table {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Table layout di-open ticket: bikin cell jadi stack (mobile friendly) */
  #ticketForm #openTicketTable tr,
  #ticketForm #openTicketTable td,
  #ticketForm #openTicketTable tbody {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Rapihin jarak antar field */
  #ticketForm #openTicketTable td {
    padding: 8px 0 !important;
  }

  /* topic dropdown full width */
  #ticketForm #topicId {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

   /* khusus halaman open ticket */
  body#pg-open #ticketForm .redactor-box,
  body#pg-open #ticketForm .redactor-editor,
  body#pg-open #ticketForm .redactor-layer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* INI PENTING: sembunyikan textarea asli yang jadi “kembar” */
  body#pg-open #ticketForm textarea.richtext {
    display: none !important;
  }

  /* rapihin editor tinggi minimum */
  body#pg-open #ticketForm .redactor-editor {
    min-height: 140px !important;
  }

   /* ===== HEADER: cegah tulisan keluar layar ===== */
  #header { padding: 10px !important; }

  /* area kanan atas */
  #header .pull-right.flush-right{
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 6px !important;
  }

  /* biar link boleh turun baris (wrap) */
  #header .pull-right.flush-right p{
    margin: 6px 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;  /* penting supaya kata panjang bisa pecah */
    word-break: break-word !important;
  }

  /* rapihin ukuran font link */
  #header .pull-right.flush-right a,
  #header .pull-right.flush-right{
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* logo biar nggak makan tempat */
  #logo img{
    max-width: 160px !important;
    height: auto !important;
  }

  #header .pull-right.flush-right {
    float: right !important;
    width: auto !important;
    text-align: right !important;
    max-width: 70% !important;
  }

  /* Rapihin teks baris user/profile/signin agar tidak “nyeret” ke tengah */
  #header .pull-right.flush-right p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* Biar link tidak kepotong / turun aneh */
  #header .pull-right.flush-right a {
    display: inline !important;
  }

  /* Logo jangan bikin layout nge-push */
  #header #logo {
    float: left !important;
    max-width: 45% !important;
  }
  #header #logo img {
    max-width: 100% !important;
    height: auto !important;
  }

  body#pg-login .md-login-wrap {
  max-width: 980px;
  margin: 20px auto;
  padding: 0 12px;
}

body#pg-login .md-login-card {
  display: flex;
  gap: 18px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

body#pg-login .md-login-left,
body#pg-login .md-login-right {
  padding: 18px;
}

body#pg-login .md-login-left {
  flex: 1.1;
  border-right: 1px solid #eee;
}

body#pg-login .md-login-right {
  flex: .9;
}

body#pg-login .md-field input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 12px !important;
  margin: 0 0 10px 0 !important;
}

body#pg-login .md-login-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

body#pg-login .md-forgot {
  display: inline-block;
  padding-top: 2px;
}

body#pg-login .md-divider {
  border: 0;
  border-top: 1px solid #eee;
  margin: 12px 0;
}

body#pg-login .md-register,
body#pg-login .md-it {
  margin-top: 10px;
}

/* Mobile stack */
@media (max-width: 768px) {
  body#pg-login .md-login-card {
    flex-direction: column;
  }
  body#pg-login .md-login-left {
    border-right: 0;
    border-bottom: 1px solid #eee;
  } 
}
 /* ===== HEADER: cegah tulisan keluar layar ===== */
  #header { padding: 10px !important; }

  /* area kanan atas */
  #header .pull-right.flush-right{
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 6px !important;
  }

  /* biar link boleh turun baris (wrap) */
  #header .pull-right.flush-right p{
    margin: 6px 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;  /* penting supaya kata panjang bisa pecah */
    word-break: break-word !important;
  }

  /* rapihin ukuran font link */
  #header .pull-right.flush-right a,
  #header .pull-right.flush-right{
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* logo biar nggak makan tempat */
  #logo img{
    max-width: 160px !important;
    height: auto !important;
  }
}