/*
 * Tracer Study FEB UGM - AdminLTE 4 / Bootstrap 5 theme.
 *
 * Loaded after adminlte.min.css. The first part brands the layout; the second
 * part restyles the markup the modules still produce (td.a / td.b form rows,
 * div.ab panel titles, td.c / td.d data tables, a.button-link, ...), so every
 * module looks like AdminLTE even before theme.js upgrades it to cards.
 */

:root {
  --ts-brand: #0b5c99;
  --ts-brand-dark: #22344e;
  --ts-brand-light: #e8f1f8;
}

body { font-size: .925rem; }

/* ---------- layout ---------- */

.app-header.ts-navbar { background: var(--ts-brand); }
.app-header.ts-navbar .nav-link,
.app-header.ts-navbar .navbar-brand { color: rgba(255,255,255,.9); }
.app-header.ts-navbar .nav-link:hover,
.app-header.ts-navbar .nav-link.active { color: #fff; }
.app-header.ts-navbar .nav-link.active { font-weight: 600; }
.ts-navbar .navbar-brand img { height: 34px; }
.ts-navbar .navbar-toggler { border-color: rgba(255,255,255,.5); }
.ts-navbar .navbar-toggler-icon { filter: invert(1); }

.app-sidebar.ts-sidebar { background: var(--ts-brand-dark); }
.ts-sidebar .sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.1); }
.ts-sidebar .brand-image { box-shadow: none !important; }
.ts-sidebar .ts-user { padding: 1rem .75rem; border-bottom: 1px solid rgba(255,255,255,.1); color: #dee2e6; }
.ts-sidebar .ts-user img { width: 42px; height: 42px; object-fit: cover; }
.ts-sidebar .ts-user .ts-user-name { font-weight: 600; line-height: 1.2; }
.ts-sidebar .ts-area { font-size: .8rem; color: #adb5bd; }
.ts-sidebar .sidebar-menu .nav-link { cursor: pointer; }
.ts-sidebar .sidebar-menu .nav-link p { white-space: normal; }

.app-content-header h3 { font-weight: 600; }
#messageicon { position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%); z-index: 2000; }

/* public pages (no sidebar) */
.ts-public .app-main { min-height: calc(100vh - 3.5rem); }
.ts-hero {
  background: linear-gradient(120deg, var(--ts-brand-dark), var(--ts-brand));
  color: #fff; padding: 2.5rem 0; margin-bottom: 1.5rem;
}
.ts-hero h1 { font-weight: 300; }
.ts-public .app-footer { background: var(--ts-brand-dark); color: rgba(255,255,255,.85); border-top: 0; }
.ts-public .app-footer a { color: #fff; }

/* login */
.ts-login { max-width: 420px; margin: 0 auto; }
.ts-captcha img { border: 1px solid var(--bs-border-color); border-radius: .375rem; background: #fff; }

/* ---------- legacy module markup ---------- */

/* page title block: div.t1 (title) / t2 (subtitle) / t3 (<hr>) / t4 (back link) */
#content1 div.t1, #content div.t1 { font-size: 1.35rem; font-weight: 600; margin-bottom: .25rem; }
#content1 div.t2:empty, #content1 div.t3 { display: none; }
div.t4 { margin-bottom: .75rem; }
.ts-titled div.t1, .ts-titled div.t2 { display: none; }
div.titlecontent { font-size: 1.35rem; font-weight: 600; margin-bottom: .75rem; }

/* legacy layout tables become plain blocks */
td.content { padding: 0; }
table[width="960"] { width: 100%; }

/* panel = table holding div.ab (title) + td.ac (body) + td.ad (buttons) */
div.ab {
  padding: .65rem 1rem; font-weight: 600; color: var(--bs-emphasis-color);
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
  border-top: 3px solid var(--ts-brand); border-radius: .375rem .375rem 0 0;
}
td.ac { padding: 1rem; border: 1px solid var(--bs-border-color); border-top: 0; background: var(--bs-body-bg); }
td.ad { padding: .65rem 0; }
td.ad a + a { margin-left: .25rem; }

/* message rows from msg_s() / msg_e() */
td.as, td.ae { padding: .75rem 1rem; border-radius: .375rem; border: 1px solid; }
td.as { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); }
td.ae { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); }

/* form rows: label | ":" | field */
td.a { padding: .35rem 1rem .35rem 0; font-weight: 500; color: var(--bs-secondary-color); vertical-align: middle; white-space: nowrap; }
td.t { padding: .35rem .5rem .35rem 0; color: var(--bs-secondary-color); }
td.b { padding: .35rem 0; }
td.b input[type=text], td.b input[type=password], td.b input[type=email], td.b input[type=number],
td.b input[type=date], td.b input:not([type]), td.b select, td.b textarea {
  display: inline-block; width: auto; max-width: 100%; padding: .3rem .6rem; font-size: .9rem;
  border: 1px solid var(--bs-border-color); border-radius: .375rem; background-color: var(--bs-body-bg);
}
td.b textarea { width: 100%; }

/* data tables: td.c header cells, td.d / td.d1 data cells */
td.c { padding: .5rem; font-weight: 600; text-align: center; vertical-align: middle;
       background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); }
td.d, td.d1 { padding: .4rem .5rem; border: 1px solid var(--bs-border-color); vertical-align: top; }
td.d1 { text-align: center; }
table.ts-data { width: 100%; margin-bottom: 0; }
table.ts-data > tbody > tr:hover > td.d,
table.ts-data > tbody > tr:hover > td.d1 { background: var(--ts-brand-light); }
.ts-table-wrap { overflow-x: auto; }

/* DataTables (theme.js converts td.c header rows to thead > th.c) */
th.c { padding: .5rem; font-weight: 600; vertical-align: middle;
       background: var(--bs-tertiary-bg) !important; border: 1px solid var(--bs-border-color); }
table.dataTable > thead > tr > th.c:not(.dt-orderable-asc):not(.dt-orderable-desc) { text-align: center; }
table.dataTable > tfoot > tr > th.c { text-align: center; }
table.ts-data.dataTable { margin: 0 !important; border-collapse: collapse !important; }
.dt-container { font-size: .9rem; }
.dt-container .dt-layout-row { margin: .5rem 0 !important; row-gap: .5rem; }
.dt-container .dt-length select { width: auto; display: inline-block; margin: 0 .25rem; }
.dt-container .dt-search input { width: 14rem; max-width: 100%; display: inline-block; margin-left: .35rem; }
.dt-container .pagination { margin: 0; flex-wrap: wrap; }
.dt-container .dt-info { color: var(--bs-secondary-color); padding-top: 0 !important; }
.dt-container .dt-processing { z-index: 30; }

/* document preview modal (theme.js openBerkas) */
.ts-berkas .modal-body { min-height: 50vh; background: var(--bs-tertiary-bg); }
.ts-berkas-frame { display: block; width: 100%; height: 75vh; border: 0; background: #fff; }
.ts-berkas-img { display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 50vh; }
.ts-berkas-img img { max-width: 100%; max-height: 72vh; object-fit: contain; box-shadow: 0 .25rem 1rem rgba(0,0,0,.15); }
@media (max-width: 767.98px) { .ts-berkas-frame { height: calc(100vh - 8rem); } }

/* links and buttons */
a { cursor: pointer; }
a.button-link {
  display: inline-block; padding: .3rem .75rem; font-size: .875rem; line-height: 1.5;
  color: #fff; background: var(--ts-brand); border: 1px solid var(--ts-brand); border-radius: .375rem;
  text-decoration: none;
}
a.button-link:hover { color: #fff; filter: brightness(1.1); }
a.back { text-decoration: none; }
a.verifikasi { color: var(--bs-success); }

/* cards built by theme.js from the legacy panels */
.ts-card { margin-bottom: 1rem; }
.ts-card > .card-header { font-weight: 600; }
.ts-card > .card-body > table:not(.ts-data) { width: auto; max-width: 100%; }
.ts-card > .card-footer:empty { display: none; }
.ts-card .ts-msg { margin-bottom: .75rem; }
.ts-icon-btn { padding: .15rem .4rem; line-height: 1.2; }
.ts-icon-btn + .ts-icon-btn { margin-left: .15rem; }
.ts-paging { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; justify-content: flex-end; }
.ts-paging select { width: auto; display: inline-block; }

/* jQuery UI datepicker on top of AdminLTE */
.ui-datepicker { z-index: 2100 !important; font-size: .85rem; }

@media (max-width: 767.98px) {
  td.a { white-space: normal; }
  .ts-card > .card-body > table:not(.ts-data) td { display: block; padding-right: 0; }
  .ts-card > .card-body > table:not(.ts-data) td.t { display: none; }
  .ts-card > .card-body > table:not(.ts-data) td.b input:not([type=checkbox]):not([type=radio]),
  .ts-card > .card-body > table:not(.ts-data) td.b textarea { width: 100% !important; }
}

/* old inline title bars (td style="background-color:#e0e0e0") */
#content td[style*="#e0e0e0"], #content1 td[style*="#e0e0e0"] { background: none !important; height: auto !important; }
td.b select { min-width: 12rem; }

/* legacy align="center" wrappers: keep module content left-aligned like AdminLTE */
#content td.content, #content1 td.content, #content1 td[align="center"] { text-align: left !important; }
#content1 > table, #content > table, .ts-card > .card-body > table { margin-left: 0 !important; }
/* the outer layout table of each module must not grow wider than the screen */
#content1 > table, #content1 > table > tbody, #content1 > table > tbody > tr, #content1 > table > tbody > tr > td,
#content > table, #content > table > tbody, #content > table > tbody > tr, #content > table > tbody > tr > td {
  display: block; width: 100% !important; min-width: 0;
}
.ts-card { min-width: 0; max-width: 100%; }
.ts-card > .card-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }