/* ==========================================================================
   app.css  -  application layout + legacy (Bootstrap 3) compatibility layer
   Load order: vendor/bootstrap.min.css -> star-admin.css -> app.css -> responsive.css
   ========================================================================== */

/* ---- Layout: top navbar ---- */
.sa-navbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--sa-navbar-h); z-index: 1030;
  display: flex; align-items: center; background: #fff; border-bottom: 1px solid var(--sa-border);
  box-shadow: 0 1px 8px rgba(16, 24, 40, .05);
}
.sa-brand {
  width: var(--sa-sidebar-w); flex: 0 0 var(--sa-sidebar-w); height: 100%; display: flex; align-items: center; gap: .65rem;
  padding: 0 1.25rem; color: var(--sa-heading); font-weight: 800; font-size: 1.05rem; border-right: 1px solid var(--sa-border);
}
.sa-brand img { height: 38px; width: auto; border-radius: 8px; }
.sa-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-navbar-body { flex: 1; display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; min-width: 0; }
.sa-toggle { border: 0; background: transparent; font-size: 1.5rem; color: var(--sa-heading); line-height: 1; padding: .25rem .5rem; border-radius: 8px; }
.sa-toggle:hover { background: var(--sa-primary-soft); color: var(--sa-primary); }
.sa-welcome { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sa-welcome small { color: var(--sa-muted); font-size: .75rem; }
.sa-welcome strong { color: var(--sa-heading); font-size: .95rem; }
.sa-search { position: relative; flex: 0 1 320px; margin-left: auto; }
.sa-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--sa-muted); }
.sa-search input { padding-left: 2.2rem; background: #f4f6fb; border-color: transparent; }
.sa-nav-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.sa-search + .sa-nav-actions { margin-left: 0; }
.sa-clock { font-size: .8rem; color: var(--sa-muted); white-space: nowrap; }
.sa-userchip { display: flex; align-items: center; gap: .5rem; padding: .3rem .7rem .3rem .3rem; background: var(--sa-primary-soft); border-radius: 999px; color: var(--sa-primary); font-weight: 700; font-size: .85rem; }
.sa-userchip .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--sa-primary); color: #fff; display: grid; place-items: center; font-size: 1rem; }
.sa-logout, .sa-logout:visited { color: var(--sa-danger); font-weight: 700; font-size: .85rem; padding: .45rem .75rem; border-radius: var(--sa-radius-sm); display: inline-flex; align-items: center; gap: .4rem; }
.sa-logout:hover { background: #fdeceb; color: var(--sa-danger); }

/* ---- Layout: sidebar ---- */
.sa-sidebar {
  position: fixed; top: var(--sa-navbar-h); left: 0; bottom: 0; width: var(--sa-sidebar-w); z-index: 1020;
  background: #fff; border-right: 1px solid var(--sa-border); overflow-y: auto; padding: 1rem .75rem 2rem;
  transition: transform .25s ease;
}
.sa-sidebar .sa-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: #a3a8bf; padding: 1rem .75rem .4rem; }
.sa-menu, .sa-submenu { list-style: none; margin: 0; padding: 0; }
.sa-menu > li { margin-bottom: 2px; }
.sa-menu a, .sa-menu .sa-linkbtn {
  display: flex; align-items: center; gap: .75rem; padding: .62rem .75rem; border-radius: var(--sa-radius-sm);
  color: var(--sa-text); font-weight: 600; font-size: .88rem; width: 100%; border: 0; background: transparent; text-align: left;
}
.sa-menu a:hover, .sa-menu .sa-linkbtn:hover { background: #f1f4fd; color: var(--sa-primary); }
.sa-menu a > i.sa-ico { font-size: 1.1rem; width: 1.25rem; text-align: center; color: var(--sa-muted); }
.sa-menu a:hover > i.sa-ico, .sa-menu li.active > a > i.sa-ico { color: var(--sa-primary); }
.sa-menu li.active > a { background: var(--sa-primary); color: #fff; box-shadow: 0 6px 14px rgba(31, 59, 179, .25); }
.sa-menu li.active > a > i.sa-ico { color: #fff; }
.sa-menu a .sa-caret { margin-left: auto; font-size: .7rem; transition: transform .2s; }
.sa-menu a[aria-expanded="true"] .sa-caret { transform: rotate(180deg); }
.sa-menu a[aria-expanded="true"] { color: var(--sa-primary); }
.sa-submenu { padding: .25rem 0 .4rem 2.35rem; }
.sa-submenu a { padding: .45rem .7rem; font-size: .84rem; font-weight: 500; color: var(--sa-muted); }
.sa-submenu li.active > a { background: var(--sa-primary-soft); color: var(--sa-primary); font-weight: 700; box-shadow: none; }
.sa-backdrop { display: none; }

/* ---- Layout: content wrapper ---- */
.sa-main { margin-left: var(--sa-sidebar-w); padding-top: var(--sa-navbar-h); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .25s ease; }
.sa-content { flex: 1; padding: 1.5rem; min-width: 0; }
.sa-breadcrumb { font-size: .8rem; margin-bottom: .25rem; }
.sa-breadcrumb .breadcrumb { margin-bottom: 0; }
.sa-footer { padding: 1rem 1.5rem; font-size: .8rem; color: var(--sa-muted); border-top: 1px solid var(--sa-border); background: #fff; }
body.sa-collapsed .sa-sidebar { transform: translateX(-100%); }
body.sa-collapsed .sa-main { margin-left: 0; }
body.sa-collapsed .sa-brand { width: auto; flex-basis: auto; }

/* ---- Legacy Bootstrap 3 -> 5 compatibility (keeps existing ASPX markup working) ---- */
.panel { background: var(--sa-card-bg); border: 1px solid var(--sa-border); border-radius: var(--sa-radius); box-shadow: var(--sa-shadow); margin-bottom: 1.25rem; }
.panel-heading { padding: .9rem 1.25rem; border-bottom: 1px solid var(--sa-border); background: transparent; border-radius: var(--sa-radius) var(--sa-radius) 0 0; }
.panel-heading h1, .panel-heading h2, .panel-heading h3, .panel-heading h4, .panel-heading h5, .panel-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--sa-heading); }
.panel-body { padding: 1.25rem; }
.panel-body::after, .panel-heading::after { content: ""; display: table; clear: both; }
.panel-heading a.panel-minimize, .panel-heading a.panel-close { color: var(--sa-muted); }
.page-header { margin: 0 0 1.25rem; padding: 0; border: 0; }
.page-header h1, .page-header h2 { font-size: 1.4rem; font-weight: 800; margin: 0; }
.page-header small { color: var(--sa-muted); font-size: .8rem; font-weight: 600; }
.form-group { margin-bottom: 1rem; }
.form-horizontal .form-group { display: flex; flex-wrap: wrap; margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5); margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5); }
.form-horizontal .form-group > [class*="col-"] { padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); max-width: 100%; }
.control-label { font-weight: 600; padding-top: calc(.5rem + 1px); margin-bottom: .25rem; }
@media (min-width: 576px) { .form-horizontal .control-label { text-align: right; } }
.help-block { display: block; font-size: .8rem; color: var(--sa-muted); }
.has-error .form-control { border-color: var(--sa-danger); }
.input-sm { padding: .25rem .5rem; font-size: .8rem; border-radius: 6px; }
.btn-default { color: var(--sa-heading); background: #fff; border: 1px solid var(--sa-border); }
.btn-default:hover { background: #f1f4fd; color: var(--sa-primary); }
.btn-xs { padding: .15rem .45rem; font-size: .72rem; border-radius: 6px; }
.btn-lg { padding: .7rem 1.4rem; font-size: 1rem; }
.pull-right { float: right !important; }
.pull-left { float: left !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.hide, .hidden { display: none !important; }
.img-responsive { max-width: 100%; height: auto; display: block; }
.table-condensed > :not(caption) > * > * { padding: .35rem .5rem; }
.table > thead > tr > th, .table > tbody > tr > th { vertical-align: middle; }
.label { display: inline-block; padding: .35em .65em; font-size: .75em; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 6px; background: var(--sa-muted); }
.label-primary { background: var(--sa-primary); }
.label-success { background: var(--sa-success); }
.label-info    { background: var(--sa-info); color: #06364a; }
.label-warning { background: var(--sa-warning); color: #1f1f2e; }
.label-danger  { background: var(--sa-danger); }
.label-default { background: var(--sa-muted); }
select.form-control:not([multiple]):not([size]) {
  appearance: none; padding-right: 2.25rem; background-image: var(--bs-form-select-bg-img);
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px;
}
.col-xs-1{flex:0 0 auto;width:8.33333%}.col-xs-2{flex:0 0 auto;width:16.66667%}.col-xs-3{flex:0 0 auto;width:25%}.col-xs-4{flex:0 0 auto;width:33.33333%}.col-xs-5{flex:0 0 auto;width:41.66667%}.col-xs-6{flex:0 0 auto;width:50%}.col-xs-7{flex:0 0 auto;width:58.33333%}.col-xs-8{flex:0 0 auto;width:66.66667%}.col-xs-9{flex:0 0 auto;width:75%}.col-xs-10{flex:0 0 auto;width:83.33333%}.col-xs-11{flex:0 0 auto;width:91.66667%}.col-xs-12{flex:0 0 auto;width:100%}
/* BS3 column offsets (sm >=576px, md >=768px) */
@media (min-width: 576px) {
.col-sm-offset-1{margin-left:8.33333%}
.col-sm-offset-2{margin-left:16.66667%}
.col-sm-offset-3{margin-left:25.0%}
.col-sm-offset-4{margin-left:33.33333%}
.col-sm-offset-5{margin-left:41.66667%}
.col-sm-offset-6{margin-left:50.0%}
.col-sm-offset-7{margin-left:58.33333%}
.col-sm-offset-8{margin-left:66.66667%}
.col-sm-offset-9{margin-left:75.0%}
.col-sm-offset-10{margin-left:83.33333%}
.col-sm-offset-11{margin-left:91.66667%}
}
@media (min-width: 768px) {
.col-md-offset-1{margin-left:8.33333%}
.col-md-offset-2{margin-left:16.66667%}
.col-md-offset-3{margin-left:25.0%}
.col-md-offset-4{margin-left:33.33333%}
.col-md-offset-5{margin-left:41.66667%}
.col-md-offset-6{margin-left:50.0%}
.col-md-offset-7{margin-left:58.33333%}
.col-md-offset-8{margin-left:66.66667%}
.col-md-offset-9{margin-left:75.0%}
.col-md-offset-10{margin-left:83.33333%}
.col-md-offset-11{margin-left:91.66667%}
}
/* Legacy inline validators / GridView footer colours set from code-behind */
.table tfoot tr, .table tr[style*="Beige"] { background: #f1f4fd !important; color: var(--sa-heading); }

/* Legacy pages place bare <label> + control pairs directly in grid columns: give them rhythm */
.panel-body .row > [class*="col-"]:has(> label) { margin-bottom: .9rem; }
.panel-body .row > [class*="col-"] > .btn { margin-top: .25rem; }

/* ---- GridView pager (PagerStyle-CssClass="paging") ---- */
.paging td { padding: .6rem .5rem !important; text-align: center; background: #fff; }
.paging table { margin: 0 auto; width: auto; border: 0; }
.paging table td { padding: 0 !important; border: 0; }
.paging a, .paging span { display: inline-block; min-width: 34px; padding: .3rem .6rem; margin: 0 2px; border: 1px solid var(--sa-border); border-radius: 6px; color: var(--sa-primary); font-weight: 700; }
.paging a:hover { background: var(--sa-primary-soft); }
.paging span { background: var(--sa-primary); border-color: var(--sa-primary); color: #fff; }

/* ---- Dashboard ---- */
.sa-kpi { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; height: 100%; }
.sa-kpi .sa-kpi-ico { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; background: var(--sa-primary-soft); color: var(--sa-primary); }
.sa-kpi .sa-kpi-val { font-size: 1.45rem; font-weight: 800; color: var(--sa-heading); line-height: 1.1; }
.sa-kpi .sa-kpi-val .label { background: transparent !important; color: inherit !important; padding: 0; font-size: inherit; font-weight: inherit; }
.sa-kpi .sa-kpi-lbl { font-size: .8rem; color: var(--sa-muted); font-weight: 600; }
.sa-kpi.k-success .sa-kpi-ico { background: #e6f5e6; color: var(--sa-success); }
.sa-kpi.k-info .sa-kpi-ico    { background: #e0f6ff; color: #1aa7de; }
.sa-kpi.k-warning .sa-kpi-ico { background: #fff3d6; color: #d99200; }
.sa-kpi.k-danger .sa-kpi-ico  { background: #feeceb; color: var(--sa-danger); }
.sa-quick { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.25rem; color: var(--sa-heading); font-weight: 700; }
.sa-quick:hover { color: var(--sa-primary); transform: translateY(-2px); }
.sa-quick { transition: transform .15s ease; }
.sa-quick i { font-size: 1.3rem; color: var(--sa-primary); }
.sa-quick .label { margin-left: auto; }

/* Legacy glyphicons (Bootstrap 3 font is no longer loaded) -> Bootstrap Icons glyphs */
.glyphicon { display: inline-block; font-family: "bootstrap-icons"; font-style: normal; font-weight: 400; line-height: 1; vertical-align: -.125em; }
.glyphicon-edit:before{content:"\f4ca"}
.glyphicon-user:before{content:"\f4e1"}
.glyphicon-lock:before{content:"\f47b"}
.glyphicon-time:before{content:"\f293"}
.glyphicon-trash:before{content:"\f5de"}
.glyphicon-print:before{content:"\f501"}
.glyphicon-search:before{content:"\f52a"}
.glyphicon-ok:before{content:"\f633"}
.glyphicon-remove:before{content:"\f659"}
.glyphicon-plus:before{content:"\f64d"}
.glyphicon-refresh:before{content:"\f130"}
.glyphicon-calendar:before{content:"\f214"}

/* ---- Login ---- */
.sa-login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: linear-gradient(135deg, #1f3bb3 0%, #182f92 55%, #52cdff 140%); }
.sa-login-card { width: 100%; max-width: 420px; background: #fff; border-radius: 16px; padding: 2.25rem 2rem; box-shadow: 0 25px 60px rgba(9, 20, 70, .35); }
.sa-login-card .sa-login-logo { display: block; margin: 0 auto 1rem; height: 72px; width: auto; border-radius: 12px; }
.sa-login-card h1 { font-size: 1.25rem; text-align: center; margin: 0 0 .25rem; }
.sa-login-card .sa-login-sub { text-align: center; color: var(--sa-muted); margin-bottom: 1.5rem; font-size: .85rem; }
.sa-login-card .input-group { margin-bottom: 1rem; }
.sa-login-card .btn { width: 100%; padding: .7rem; }
.sa-login-card label.error { color: var(--sa-danger); font-size: .8rem; margin-top: .25rem; font-weight: 500; }

/* ---- Misc legacy helpers kept from the old master ---- */
.Voff { display: none; }
.RBL label { display: block; }
.RBL td { width: 150px; }
.chosen-container { max-width: 100%; }
img { max-width: 100%; }
.sa-content img[src*="please_wait"] { max-width: none; }

/* ---- Print (browser print of any master-page report) ---- */
@media print {
  .sa-navbar, .sa-sidebar, .sa-footer, .sa-backdrop, .sa-breadcrumb, .btn, input[type=submit], input[type=button] { display: none !important; }
  .sa-main { margin: 0 !important; padding: 0 !important; display: block; }
  .sa-content { padding: 0 !important; }
  body { background: #fff !important; }
  .panel, .card { border: 0 !important; box-shadow: none !important; }
  .table-responsive { overflow: visible !important; }
  a[href]:after { content: "" !important; }
}