/* ========================================
   Responsive — Tablet
   ======================================== */
@media (max-width: 1024px) {
  .invoice-body-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .summary-box {
    max-width: 400px;
  }
}

@media (max-width: 900px) {
  .topbar,
  .app-shell {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-row,
  .detail-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  .detail-title,
  .invoice-top,
  .invoice-info-grid,
  .invoice-bottom {
    grid-template-columns: 1fr;
  }

  .hero-row,
  .detail-title {
    align-items: start;
    display: grid;
    gap: 20px;
  }

  .invoice-logo,
  .invoice-info-grid {
    padding: 16px 0;
  }

  .invoice-logo {
    border-bottom: 2px solid var(--line-gold);
    border-right: 0;
    padding-bottom: 20px;
    min-height: 0;
  }

  .invoice-meta,
  .invoice-meta h2 {
    justify-self: stretch;
    text-align: left;
  }

  .invoice-meta {
    max-width: none;
  }

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

  .span-two {
    grid-column: auto;
  }

  .subtotal-field {
    text-align: left;
  }

  .item-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .item-row > label:nth-child(1) {
    grid-column: 1 / -1;
  }
  .item-row > .remove-item {
    position: absolute;
    right: 8px;
    top: 8px;
  }
  .subtotal-field {
    grid-column: 1 / -1;
    padding-right: 0;
  }

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

/* ========================================
   Navbar: beralih ke hamburger di layar ≤ 900px
   ======================================== */
@media (max-width: 900px) {
  .top-nav { display: none; }
  .top-actions { display: none; }
  .hamburger { display: flex; }
}

/* ========================================
   Responsive — Mobile
   ======================================== */
@media (max-width: 640px) {
  .topbar {
    align-items: center;
    flex-direction: row;
    gap: 0;
    padding: 14px 16px;
    min-height: auto;
  }
  .topbar .brand {
    flex: 1;
  }
  .topbar .brand-name em {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .top-actions {
    display: none;
  }

  th, td {
    padding: 14px 16px;
  }

  th {
    font-size: 11px;
  }
  td {
    font-size: 13px;
  }

  .form-card {
    padding: 20px;
  }

  .invoice-logo {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .item-row {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .item-row > label:nth-child(1) {
    grid-column: auto;
  }

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

  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .table-header-right {
    width: 100%;
  }
  .search-wrap {
    flex: 1;
  }
  .search-input {
    width: 100%;
  }

  .modal-box {
    padding: 24px;
  }

  /* --- Invoice Preview Mobile --- */
  .detail-page {
    padding: 0;
    min-width: 0;
    overflow-x: hidden;
  }

  .detail-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .detail-title {
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
  }
  .detail-title h1 {
    font-size: 22px;
  }

  .detail-actions {
    gap: 6px;
  }
  .detail-actions .btn-icon-only {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .detail-actions .btn-toggle {
    font-size: 12px;
    padding: 8px 12px;
    gap: 6px;
  }

  .gold-invoice {
    padding: 10px !important;
    border-radius: 10px;
    border-width: 1px;
    min-width: 0;
    overflow-x: hidden;
  }

  .gold-invoice::before {
    height: 40px;
    width: 100px;
  }

  .invoice-top {
    gap: 10px;
    padding-bottom: 10px;
    min-width: 0;
  }

  .invoice-logo {
    gap: 8px;
    min-height: 44px;
  }
  .invoice-logo .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .invoice-logo .brand-mark::after {
    font-size: 20px !important;
  }
  .invoice-logo strong {
    font-size: 18px;
    letter-spacing: 0.08em;
  }
  .invoice-logo .logo-sub {
    font-size: 10px;
    letter-spacing: 0.2em;
    margin: 2px 0;
  }
  .invoice-logo em {
    font-size: 9px;
  }

  .invoice-meta h2 {
    font-size: 24px;
    margin-bottom: 4px;
  }
  .invoice-number-box {
    font-size: 11px;
    padding: 4px 8px;
    margin: 2px 0 8px;
  }

  .meta-line,
  .info-line,
  .total-line {
    font-size: 12px;
    gap: 6px;
    grid-template-columns: auto 1fr auto;
  }

  .invoice-info-grid {
    gap: 6px;
    padding: 8px 0;
  }

  .section-label {
    font-size: 10px;
    gap: 6px;
    margin: 0 0 8px;
  }
  .label-icon {
    height: 20px;
    width: 20px;
    font-size: 10px;
  }
  .client-name {
    font-size: 14px;
    margin: 0 0 4px;
  }
  .client-address,
  .invoice-info-grid .muted {
    font-size: 12px;
  }

  .invoice-body-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .invoice-body-grid > div,
  .invoice-body-grid > aside {
    min-width: 0;
  }

  .gold-table {
    border-radius: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .gold-table table {
    white-space: normal;
    width: 100%;
    min-width: 440px;
  }
  .gold-table th {
    padding: 8px 6px;
    font-size: 9px;
    white-space: nowrap;
  }
  .gold-table td {
    padding: 8px 6px;
    font-size: 11px;
    word-break: break-word;
  }

  .summary-box {
    max-width: none;
  }
  .summary-lines {
    padding: 10px 12px;
  }
  .summary-lines .total-line {
    padding: 6px 0;
    font-size: 12px;
  }
  .summary-total {
    padding: 10px 12px;
  }
  .summary-total span {
    font-size: 13px;
  }
  .summary-total strong {
    font-size: 18px;
  }
  .summary-note {
    font-size: 11px;
    padding: 8px 12px 12px;
  }

  .invoice-bottom {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 8px 0 12px;
  }
  .guarantee,
  .thanks {
    padding: 10px 12px;
  }
  .guarantee-text,
  .thanks-text {
    font-size: 11px;
  }

  .footer-line {
    flex-wrap: nowrap;
    gap: 8px;
    padding-top: 10px;
    justify-content: space-between;
    align-items: center;
  }
  .footer-item {
    font-size: 10px;
    gap: 5px;
    line-height: 1.35;
    flex: 1 1 0;
    justify-content: center;
  }
  .footer-item span:first-child {
    font-size: 12px;
    width: 16px;
  }
  .footer-item br {
    display: none;
  }
  .footer-line .footer-item + .footer-item {
    border-left: 1px solid var(--line-gold);
    padding-left: 8px;
    margin-left: 0;
  }

  .share-list-banner {
    padding: 10px 12px;
    font-size: 13px;
    gap: 10px;
  }

  /* --- Share Page Mobile --- */
  .share-page {
    padding: 20px 14px;
  }
  .share-header {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
  }
  .share-footer {
    margin-top: 16px;
    padding-top: 14px;
  }
  .share-footer p {
    font-size: 11px;
  }
  .share-list-intro h1 {
    font-size: 24px;
  }
  .share-list-intro .muted {
    font-size: 13px;
  }
}

/* --- Very Small Screens (≤400px) --- */
@media (max-width: 400px) {
  .detail-page { padding: 0; }
  .share-page { padding: 14px 10px; }
  .gold-invoice { padding: 8px !important; border-radius: 8px; }
  .gold-invoice::before { height: 30px; width: 70px; }
  .gold-table th { padding: 6px 4px; font-size: 9px; }
  .gold-table td { padding: 6px 4px; font-size: 10px; }
  .summary-lines { padding: 8px 10px; }
  .summary-total { padding: 8px 10px; }
  .summary-total span { font-size: 11px; }
  .summary-total strong { font-size: 15px; }
  .footer-item { font-size: 10px; }
  .meta-line, .info-line, .total-line { font-size: 11px; }
  .summary-lines .total-line { font-size: 11px; }
  .summary-note { font-size: 10px; }
  .guarantee-text, .thanks-text { font-size: 10px; }
  .footer-item span:first-child { font-size: 12px; width: 16px; }
  .share-footer p { font-size: 10px; }
  .share-list-intro h1 { font-size: 20px; }
}