/* LPPM EDUARDO TMS — Tombol Timbul Global V9.9.8 */
:root {
    --btn-primary-top: #2d6fae;
    --btn-primary-mid: #174f86;
    --btn-primary-bottom: #0b315d;
    --btn-primary-edge: #06284b;
    --btn-primary-line: #0a3d70;
    --btn-secondary-top: #ffffff;
    --btn-secondary-bottom: #e7f0fa;
    --btn-secondary-edge: #87a6c7;
    --btn-secondary-line: #b7cae0;
    --btn-success-top: #35c978;
    --btn-success-bottom: #128247;
    --btn-success-edge: #086637;
    --btn-danger-top: #ef6b6b;
    --btn-danger-bottom: #b42318;
    --btn-danger-edge: #7f1d1d;
    --btn-warning-top: #ffe27a;
    --btn-warning-bottom: #f4bd24;
    --btn-warning-edge: #c68d08;
    --btn-shadow-soft: rgba(7, 33, 62, .18);
}

button,
.button,
[role="button"] {
    box-sizing: border-box;
    border: 1px solid var(--btn-primary-line);
    border-bottom-color: var(--btn-primary-edge);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(180deg, var(--btn-primary-top) 0%, var(--btn-primary-mid) 58%, var(--btn-primary-bottom) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 3px 0 var(--btn-primary-edge), 0 7px 15px var(--btn-shadow-soft);
    text-shadow: 0 1px 1px rgba(0,0,0,.20);
    transform: translateY(0);
    transition: transform .10s ease, box-shadow .10s ease, filter .10s ease, background-color .10s ease;
}

@media (hover: hover) and (pointer: fine) {
    button:hover,
    .button:hover,
    [role="button"]:hover {
        filter: brightness(1.07) saturate(1.04);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 4px 0 var(--btn-primary-edge), 0 9px 18px rgba(7,33,62,.22);
        transform: translateY(-1px);
    }
}

button:active,
.button:active,
[role="button"]:active {
    filter: brightness(.97);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.14), 0 1px 0 var(--btn-primary-edge), 0 3px 7px rgba(7,33,62,.16);
    transform: translateY(2px) !important;
}

button:disabled,
.button[aria-disabled="true"],
[role="button"][aria-disabled="true"] {
    opacity: .56;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 0 rgba(15,23,42,.24);
    filter: grayscale(.18);
    transform: none !important;
}

/* Aksi sekunder: lihat, edit, kembali, dan panah tabel. */
.button.ghost,
button.ghost,
.button.secondary,
button.secondary,
.table-nav-btn,
.table-scroll-arrow {
    border-color: var(--btn-secondary-line);
    border-bottom-color: var(--btn-secondary-edge);
    color: #0b315d;
    background: linear-gradient(180deg, var(--btn-secondary-top), var(--btn-secondary-bottom));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 3px 0 var(--btn-secondary-edge), 0 7px 14px rgba(64,91,124,.15);
    text-shadow: none;
}

.button.ghost:active,
button.ghost:active,
.button.secondary:active,
button.secondary:active,
.table-nav-btn:active,
.table-scroll-arrow:active {
    box-shadow: inset 0 2px 4px rgba(29,78,126,.13), 0 1px 0 var(--btn-secondary-edge);
}

/* WhatsApp dan aksi positif. */
.button.whatsapp,
button.whatsapp,
.button.success,
button.success {
    border-color: #169956;
    border-bottom-color: var(--btn-success-edge);
    color: #fff;
    background: linear-gradient(180deg, var(--btn-success-top), var(--btn-success-bottom));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 3px 0 var(--btn-success-edge), 0 7px 15px rgba(8,102,55,.22);
}

/* Hapus, batal, dan logout. */
.button.danger,
button.danger,
.user-chip form[action$="logout.php"] button {
    border: 1px solid #c7362b;
    border-bottom-color: var(--btn-danger-edge);
    color: #fff;
    background: linear-gradient(180deg, var(--btn-danger-top), var(--btn-danger-bottom));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 3px 0 var(--btn-danger-edge), 0 7px 14px rgba(127,29,29,.20);
}

/* Tombol mode dibedakan dari Logout. */
.user-chip form[action$="theme.php"] button {
    border: 1px solid #dfaa16;
    border-bottom-color: var(--btn-warning-edge);
    color: #342400;
    background: linear-gradient(180deg, var(--btn-warning-top), var(--btn-warning-bottom));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.52), 0 3px 0 var(--btn-warning-edge), 0 7px 14px rgba(151,101,0,.18);
    text-shadow: none;
}

.user-chip form[action$="theme.php"] button,
.user-chip form[action$="logout.php"] button {
    width: 100%;
    min-height: 40px;
    justify-content: center;
    margin-top: 5px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
}

/* Tab laporan. */
.report-tabs a {
    border: 1px solid var(--btn-secondary-line);
    border-bottom-color: var(--btn-secondary-edge);
    color: #12233f;
    background: linear-gradient(180deg, #fff, #edf3fa);
    box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--btn-secondary-edge), 0 7px 13px rgba(64,91,124,.12);
    transform: translateY(0);
}

.report-tabs a.active {
    border-color: #174f86;
    border-bottom-color: var(--btn-primary-edge);
    color: #fff;
    background: linear-gradient(180deg, var(--btn-primary-top), var(--btn-primary-bottom));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 0 var(--btn-primary-edge), 0 8px 16px rgba(7,33,62,.20);
}

.report-tabs a:active {
    transform: translateY(2px) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.12), 0 1px 0 var(--btn-primary-edge);
}

/* Navigasi PC. */
.nav-list a {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 0 rgba(0,0,0,.16);
    transition: transform .10s ease, filter .10s ease, background-color .10s ease, box-shadow .10s ease;
}

.nav-list a.active,
.nav-list a:hover {
    border-color: #e0ad1b;
    background: linear-gradient(180deg, #ffdf6b, #f4bf28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 0 #bf8707, 0 7px 13px rgba(0,0,0,.18);
}

.nav-list a:active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.12), 0 1px 0 #8e6508;
}

/* Navigasi HP: tiap area sentuh terlihat sebagai tombol mandiri. */
.bottom-nav > a,
.bottom-more > summary,
.bottom-more-panel a {
    border: 1px solid #d5e0ec;
    border-bottom-color: #b7c5d5;
    border-radius: 11px;
    color: #52647b;
    background: linear-gradient(180deg, #fff, #eef3f8);
    box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b7c5d5, 0 5px 10px rgba(51,65,85,.10);
    transform: translateY(0);
}

.bottom-nav > a.active,
.bottom-more.active-context > summary,
.bottom-more[open] > summary {
    border-color: #e3b322;
    border-bottom-color: var(--btn-warning-edge);
    color: #12233f;
    background: linear-gradient(180deg, #fff0a8, #ffd95c);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.60), 0 3px 0 var(--btn-warning-edge), 0 7px 12px rgba(151,101,0,.15);
}

.bottom-nav > a:active,
.bottom-more > summary:active,
.bottom-more-panel a:active {
    transform: translateY(2px) !important;
    box-shadow: inset 0 2px 4px rgba(29,49,76,.13), 0 1px 0 #9aaabc;
}

.floating-back-button {
    border-color: #174f86;
    border-bottom-color: var(--btn-primary-edge);
    background: linear-gradient(180deg, #2d6fae, #0b315d);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 4px 0 var(--btn-primary-edge), 0 11px 24px rgba(7,33,62,.28);
}

/* Dark mode. */
body.theme-dark .button.ghost,
body.theme-dark button.ghost,
body.theme-dark .button.secondary,
body.theme-dark button.secondary,
body.theme-dark .table-nav-btn,
body.theme-dark .table-scroll-arrow,
body.theme-dark .report-tabs a {
    border-color: #4d6d94;
    border-bottom-color: #102c4e;
    color: #f3f8ff;
    background: linear-gradient(180deg, #315984, #1a3c63);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 3px 0 #102c4e, 0 7px 14px rgba(0,0,0,.22);
}

body.theme-dark .report-tabs a.active {
    border-color: #5599d8;
    color: #fff;
    background: linear-gradient(180deg, #347fc3, #124573);
}

body.theme-dark .bottom-nav > a,
body.theme-dark .bottom-more > summary,
body.theme-dark .bottom-more-panel a {
    border-color: #41546d;
    border-bottom-color: #1b293a;
    color: #d8e2ef;
    background: linear-gradient(180deg, #26364b, #182638);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 0 #111c2a, 0 5px 10px rgba(0,0,0,.22);
}

body.theme-dark .bottom-nav > a.active,
body.theme-dark .bottom-more.active-context > summary,
body.theme-dark .bottom-more[open] > summary {
    border-color: #e7b62b;
    color: #10233d;
    background: linear-gradient(180deg, #ffe891, #f4c33d);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 3px 0 #a97408, 0 7px 12px rgba(0,0,0,.22);
}

@media (max-width: 800px), (hover: none) and (pointer: coarse) {
    button,
    .button,
    [role="button"],
    .report-tabs a,
    .bottom-nav > a,
    .bottom-more > summary,
    .bottom-more-panel a,
    .table-nav-btn,
    .table-scroll-arrow {
        min-height: 46px;
        -webkit-tap-highlight-color: rgba(244,196,48,.28);
    }
}

@media (prefers-reduced-motion: reduce) {
    button,
    .button,
    [role="button"],
    .report-tabs a,
    .nav-list a,
    .bottom-nav > a,
    .bottom-more > summary,
    .bottom-more-panel a { transition: none !important; }
}

@media print {
    button,
    .button,
    [role="button"] { box-shadow: none !important; text-shadow: none !important; }
}