/* Global App Header & Button Styles */
.app-page-header{position:relative;padding:1.05rem 1.25rem;border-radius:22px;background:linear-gradient(135deg,#eef5ff,#ffffff);overflow:hidden;border:1px solid #dde6f2;box-shadow:0 4px 14px -6px rgba(73,126,185,.32),0 2px 4px rgba(40,82,122,.15);} 
.app-page-header:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 28%,rgba(58,142,246,.18),transparent 60%),radial-gradient(circle at 80% 70%,rgba(0,212,255,.2),transparent 65%);pointer-events:none;z-index:0;} 
.app-page-header > *{position:relative;z-index:1;} /* pastikan konten interaktif di atas overlay dekoratif */
.app-page-header .h-stack{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;}
.app-page-header .title-wrap{flex:1;min-width:200px;}
.app-page-header h1.page-title{margin:0;font-size:1.4rem;font-weight:700;letter-spacing:.5px;background:linear-gradient(90deg,#245cae,#0084c7 55%,#04b2d9);background-clip:text;-webkit-background-clip:text;color:transparent;}
.app-page-header small.sub{display:block;margin-top:2px;font-size:.68rem;letter-spacing:.7px;text-transform:uppercase;color:#4d6c8f;font-weight:600;}
.app-page-header .actions,.app-page-header .filters{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;}
.app-page-header form.inline-filters{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin:0;}
.app-page-header form.inline-filters .form-control{height:38px;font-size:.78rem;border-radius:10px;}
.app-page-header form.inline-filters button,.app-page-header form.inline-filters a.btn{height:38px;display:inline-flex;align-items:center;font-size:.72rem;font-weight:600;letter-spacing:.4px;border-radius:12px;}
/* Variants */
.app-page-header.compact{padding:.75rem 1rem;border-radius:16px;}
.app-page-header.compact h1.page-title{font-size:1.15rem;}
.app-page-header.no-shadow{box-shadow:none;}
.app-page-header.flat{background:#f5f9fc;border:1px solid #d7e3ee;}
.app-page-header.glass{backdrop-filter:blur(8px);background:linear-gradient(120deg,rgba(238,245,255,.85),rgba(255,255,255,.65));}
/* Breadcrumb placeholder */
.app-page-header .breadcrumb-wrap{font-size:.65rem;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:#5b6f82;display:flex;flex-wrap:wrap;gap:.35rem;}
.app-page-header .breadcrumb-wrap span.sep{opacity:.5;}
/* Gradient Button Utilities */
.btn-gradient{background:linear-gradient(135deg,#3a8ef6,#00d4ff);border:none;color:#fff !important;font-weight:600;letter-spacing:.4px;padding:.55rem .95rem;border-radius:40px;font-size:.7rem;box-shadow:0 6px 16px -4px rgba(0,132,255,.45),0 2px 6px rgba(0,0,0,.2);display:inline-flex;align-items:center;gap:6px;line-height:1.1;}
.btn-gradient:hover{filter:brightness(1.07);text-decoration:none;}
.btn-gradient:active{transform:translateY(2px);} 
.btn-gradient.warn{background:linear-gradient(135deg,#f7971e,#ffd200);color:#4a3600 !important;box-shadow:0 6px 16px -4px rgba(247,151,30,.45),0 2px 6px rgba(0,0,0,.2);} 
.btn-gradient.danger{background:linear-gradient(135deg,#ff416c,#ff4b2b);} 
.btn-gradient.secondary{background:linear-gradient(135deg,#64748b,#475569);}
.btn-gradient.outline{background:transparent;color:#2468b3 !important;border:2px solid #3a8ef6;box-shadow:none;}
.btn-gradient.outline:hover{background:linear-gradient(135deg,#e8f3ff,#ffffff);} 
/* Focus Ring */
.btn-gradient:focus,.app-page-header input:focus{outline:none;box-shadow:0 0 0 3px rgba(58,142,246,.35),0 0 0 1px #2b78d4;}
/* Search Wrap (header-specific) */
.app-page-header .search-wrap{flex:1;min-width:240px;display:flex;align-items:center;}
.app-page-header .search-wrap input{width:100%;padding:.6rem 1rem;border:1px solid #c8d4e2;border-radius:40px;background:#f3f7fb;font-size:.82rem;font-weight:500;outline:none;transition:.25s;}
.app-page-header .search-wrap input:focus{background:#fff;box-shadow:0 0 0 3px rgba(58,142,246,.25);border-color:#5aa3ff;}
.app-page-header .search-wrap .clear-btn{margin-left:6px;background:linear-gradient(135deg,#f5f9ff,#eef3f9);border:1px solid #d1dae4;color:#47698a;font-size:.85rem;cursor:pointer;padding:.5rem .8rem;border-radius:14px;font-weight:600;display:inline-flex;align-items:center;line-height:1;}
.app-page-header .search-wrap .clear-btn:hover{background:#ffffff;color:#1e3d58;box-shadow:0 4px 10px -4px rgba(0,0,0,.12);} 
/* Dark Mode Adaptations (inherit when body has dark theme) */
body.dark-mode .app-page-header{background:linear-gradient(135deg,#1f2630,#2a333d);border-color:#364450;box-shadow:0 4px 18px -8px rgba(0,0,0,.7);} 
body.dark-mode .app-page-header:before{background:radial-gradient(circle at 18% 24%,rgba(80,160,255,.25),transparent 60%),radial-gradient(circle at 82% 72%,rgba(0,212,255,.25),transparent 65%);} 
body.dark-mode .app-page-header h1.page-title{background:linear-gradient(90deg,#7db8ff,#47d7ff);background-clip:text;-webkit-background-clip:text;color:transparent;} 
body.dark-mode .btn-gradient.outline{color:#8cc8ff !important;border-color:#2e6aa8;} 
@media (max-width:576px){
  .app-page-header{padding:1rem 1rem;border-radius:18px;}
  .app-page-header .h-stack{flex-direction:column;align-items:stretch;gap:.85rem;}
  .app-page-header h1.page-title{font-size:1.3rem;}
  .app-page-header .actions > *, .app-page-header .filters > *{flex:1;}
  .app-page-header form.inline-filters{width:100%;}
  .app-page-header form.inline-filters .form-control{flex:1;}
}