:root{
  --app-bg:#f5f7fb;
  --card-radius:16px;
}

html,body{height:100%}
body{
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:var(--app-bg);
  color:#1f2a37;
}

.navbar{box-shadow:0 6px 24px rgba(15,23,42,.12)}
/* Navbar: tap area & wrapping yang lebih ramah mobile */
.navbar .navbar-brand{min-width:0}
.navbar .navbar-brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw}
.navbar .nav-link{
  padding:.6rem .75rem;
  border-radius:10px;
}
.navbar .nav-link.active{background:rgba(15,23,42,.04)}
@media (max-width:991.98px){
  .navbar .navbar-nav{padding-top:.5rem;padding-bottom:.75rem}
  .navbar .dropdown-menu{border-radius:12px}
}

.card{
  border:0;
  border-radius:var(--card-radius);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(15,23,42,.12);
  transition:all .2s ease;
}

.hero-slider{border-radius:var(--card-radius);overflow:hidden}
.hero-slider .carousel-item img{width:100%;height:340px;object-fit:cover}

.hero-cta{
  display:inline-block;
  padding:.8rem 1.6rem;
  font-size:1.05rem;
  font-weight:700;
  box-shadow:0 12px 24px rgba(31,79,191,.25);
}

.btn{
  border-radius:999px;
  padding:.45rem 1rem;
  font-weight:600;
  letter-spacing:.1px;
  box-shadow:0 6px 14px rgba(15,23,42,.08);
  transition:all .2s ease;
}
.btn:focus{box-shadow:0 0 0 .2rem rgba(31,79,191,.2)}

.btn-primary{
  background:var(--primary-color,#1f4fbf)!important;
  border-color:var(--primary-color,#1f4fbf)!important;
  color:#fff!important;
}
.btn-primary:hover,.btn-primary:focus{filter:brightness(.95);color:#fff!important}

.btn-outline-primary{
  color:var(--primary-color,#1f4fbf)!important;
  border-color:var(--primary-color,#1f4fbf)!important;
  background:#fff!important;
}
.btn-outline-primary:hover,.btn-outline-primary:focus{
  background:var(--primary-color,#1f4fbf)!important;
  color:#fff!important;
}

.btn-outline-secondary{
  color:#475569!important;
  border-color:#cbd5e1!important;
  background:#fff!important;
}
.btn-outline-secondary:hover,.btn-outline-secondary:focus{
  background:#f1f5f9!important;
  color:#0f172a!important;
}

.btn-warning{
  background:#f59e0b!important;
  border-color:#f59e0b!important;
  color:#111827!important;
}
.btn-danger{
  background:#ef4444!important;
  border-color:#ef4444!important;
  color:#fff!important;
}

.btn-sm{padding:.3rem .8rem;font-weight:600}

.table{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
}
.table thead th{
  background:#f0f3f9;
  border-bottom:0;
  font-weight:600;
}
.table td,.table th{vertical-align:middle}

.badge{border-radius:999px;padding:.4rem .7rem}

.form-control,.form-select{border-radius:12px;border-color:#e5e7eb}
.form-label{font-weight:600}
.form-text{color:#64748b}

@media (max-width:575.98px){
  .page-header>*{width:100%}
  .page-header a.btn,.page-header button.btn{width:100%}
}

main{flex:1}
footer{background:transparent}

/* Container responsif lintas breakpoint */
main.app-container{
  width:100%;
  max-width:1280px;
}
@media (min-width:1400px){
  main.app-container{max-width:1440px;}
}
@media (max-width:575.98px){
  main.app-container{padding-left:14px;padding-right:14px;}
}

/* Page header helper */
.page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.page-header h3,.page-header h4{margin:0}

/* Tabel: aksi responsif (wrap di mobile) */
.table-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:flex-end;
}
.table-actions .btn-group{margin:0!important}
.table-actions form{margin:0}

/* Form & modal: tombol footer nyaman di mobile */
@media (max-width:575.98px){
  .modal-footer{flex-direction:column;align-items:stretch;gap:.5rem}
  .modal-footer .btn{width:100%}
  .input-group>.btn{box-shadow:none}
}

/* Public invoice list */
.public-page-code{word-break:break-word;white-space:normal}
.public-filter-actions .btn{width:100%}
@media (min-width:992px){.public-filter-actions .btn{width:auto}}
.public-doc-actions .btn{white-space:nowrap}
@media (max-width:991.98px){
  .public-doc-actions .btn{padding:.25rem .5rem;font-size:.8rem}
}
.public-doc-table thead th{background:#f0f3f9;border-bottom:0;font-weight:700}
.doc-badge{
  border-radius:999px;
  padding:.35rem .6rem;
  font-weight:700;
  letter-spacing:.2px;
  font-size:.75rem;
}
.doc-badge-invoice{background:rgba(31,79,191,.12);color:#1f4fbf}
.doc-badge-contract{background:rgba(22,163,74,.14);color:#166534}
.doc-badge-offer{background:rgba(245,158,11,.18);color:#92400e}

/* Mobile list-cards untuk listing data */
.list-card .meta{color:#64748b;font-size:.85rem}
.list-card .title{font-weight:700}
.list-card .value{font-weight:700}
.list-card .kv{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  margin-top:.35rem;
}
.list-card .kv .k{color:#64748b;font-size:.82rem}
.list-card .kv .v{font-size:.82rem;font-weight:600;text-align:right}