/*====================
Blok 1 — Page Master Data Mobile: mengatur tab navigasi Master Data, tampilan tabel menjadi kartu, kolom nama dan kode, tombol aksi, serta empty state di HP.
======================*/
@media (max-width:768px) {

  /* Master Data Tabs */
  /* Master Data Tabs */

  .master-tab-nav {
    width:100%;
    margin-bottom:0;
    overflow:hidden;
  }

  .nodis {
    display:none;
  }
  .master-tab-list {
    display:flex;
    align-items:center;
    gap:6px;
    width:100%;
    padding:4px;
    margin:0;
    overflow-x:auto;
    overflow-y:hidden;
    background:var(--bg-card,#ffffff);
    border:1px solid var(--border-color,#e2e8f0);
    border-radius:12px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .master-tab-list::-webkit-scrollbar {
    display:none;
  }

  .master-tab-btn {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:max-content;
    height:38px;
    padding:0 14px;
    border:none;
    border-radius:9px;
    background:transparent;
    color:var(--text-muted,#64748b);
    font-size:11px;
    font-weight:500;
    white-space:nowrap;
    cursor:pointer;
    transition:all .2s ease;
  }

  .master-tab-btn i {
    width:15px;
    height:15px;
    flex:0 0 15px;
  }

  .master-tab-btn.active {
    background:var(--primary-500,#2563eb);
    color:#ffffff;
    font-weight:600;
    box-shadow:0 2px 5px rgba(37,99,235,.18);
  }

  .master-tab-btn:active {
    transform:scale(.97);
  }

  /* Master Data Table */

  .master-tab .table-container {
    overflow:visible;
    background:transparent;
    border:none;
    box-shadow:none;
  }

  .master-tab .data-table {
    display:block;
    width:100%;
  }

  .master-tab .data-table thead {
    display:none;
  }

  .master-tab .data-table tbody {
    display:flex;
    flex-direction:column;
    gap:10px;
  }


  /* Master Data Card */

  .master-data-table-row {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "name action"
      "code action";
    gap:5px 12px;
    width:100%;
    padding:15px 16px 15px 18px;
    background:var(--bg-card,#ffffff);
    border:1px solid var(--border-color,#e2e8f0);
    border-radius:14px;
    box-shadow:0 1px 3px rgba(15,23,42,.04);
    overflow:hidden;
  }

  .master-data-table-row:hover {
    background:var(--bg-card,#ffffff);
  }

  .master-data-table-row::before {
    content:"";
    position:absolute;
    left:0;
    top:14px;
    bottom:14px;
    width:3px;
    background:var(--primary,#2563eb);
    border-radius:0 4px 4px 0;
  }


  /* Hide Number */

  .master-data-col-no {
    display:none;
  }


  /* Nama */

  .master-data-col-name {
    grid-area:name;
    min-width:0;
    padding:0 !important;
    border:none;
  }

  .master-data-col-name strong {
    display:block;
    min-width:0;
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    color:var(--text-main,#1e293b);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }


  /* Kode */

  .master-data-col-code {
    grid-area:code;
    min-width:0;
    padding:0 !important;
    border:none;
    font-size:10px;
    line-height:1.3;
    color:var(--text-muted,#64748b);
  }

  .master-data-col-code::before {
    content:"Kode";
    margin-right:6px;
    color:var(--text-muted,#64748b);
  }

  .master-data-col-code code {
    padding:0;
    background:transparent;
    font-family:inherit;
    font-size:inherit;
    color:var(--text-main,#1e293b);
  }


  /* Action */

  .master-data-col-action {
    grid-area:action;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    gap:4px;
    padding:0 !important;
    border:none;
  }

  .master-data-col-action .btn-action {
    width:36px;
    height:36px;
    flex-shrink:0;
    border-radius:9px;
  }

  .master-data-col-action .btn-action svg {
    width:17px;
    height:17px;
  }


  /* Remove Table Borders */

  .master-tab .data-table tbody td {
    border-bottom:none;
  }


  /* Empty State */

  .master-tab tbody tr:not(.master-data-table-row) {
    display:block;
    background:transparent;
    border:none;
    box-shadow:none;
  }

  .master-tab tbody tr:not(.master-data-table-row) td {
    display:block;
    padding:2rem 1rem;
    border:none;
  }
}