/* Shared sky theme. Loaded after the legacy AdminLTE and page styles. */
body.skin-blue, body.sky-auth {
  --dashboard-accent: #0369a1;
  --dashboard-accent-soft: #e0f2fe;
  --dashboard-accent-shadow: rgba(3, 105, 161, .14);
  color: #172e43;
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  background: #f0f9ff;
}
.skin-blue .wrapper, .skin-blue .content-wrapper { background: #f0f9ff; }
.skin-blue .content-wrapper { padding: 22px; }
.skin-blue .main-header { background: #0369a1; box-shadow: 0 4px 18px rgba(3, 105, 161, .16); }
.skin-blue .main-header .navbar { background: linear-gradient(110deg, #0369a1, #075985); }
.skin-blue .main-header .logo { background: #075985; color: #fff; font-size: 20px; font-weight: 600; }
.skin-blue .main-header .logo:hover { background: #0c4a6e; }
.skin-blue .main-header .navbar .nav > li > a,
.skin-blue .main-header .navbar .sidebar-toggle { color: #fff; min-height: 50px; }
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .sidebar-toggle:hover { color: #fff; background: #0c4a6e; }
.skin-blue .main-sidebar { background: linear-gradient(180deg, #fff, #f0f9ff); border-right: 1px solid #cde6f4; box-shadow: 4px 0 20px rgba(3, 105, 161, .04); }
.skin-blue .sidebar { padding-bottom: 24px; }
.skin-blue .welcome-panel { display:flex; align-items:center; gap:20px; margin-bottom:26px; padding:26px; border:1px solid #bae6fd; border-radius:20px; background:linear-gradient(115deg,#e0f2fe,#fff); box-shadow:0 6px 22px rgba(3,105,161,.05); }
.skin-blue .welcome-icon { display:flex; align-items:center; justify-content:center; flex:0 0 60px; width:60px; height:60px; border-radius:18px; background:#0369a1; color:#fff; font-size:30px; }
.skin-blue .welcome-copy { min-width:0; }
.skin-blue .welcome-copy .welcome-eyebrow { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 8px; color:#45647a; font-size:11px; font-weight:700; letter-spacing:.06em; }
.skin-blue .welcome-role { padding:3px 10px; border:1px solid #bae6fd; border-radius:20px; background:#fff; color:#075985; font-size:12px; letter-spacing:0; }
.skin-blue .welcome-copy h2 { margin:0 0 8px; color:#12354d; font-size:25px; line-height:1.4; font-weight:700; overflow-wrap:anywhere; }
.skin-blue .welcome-copy h2 span { color:#075985; }
.skin-blue .welcome-copy > p:last-child { margin:0; color:#45647a; font-size:14px; }
@media(max-width:600px) { .skin-blue .welcome-panel { align-items:flex-start; padding:20px 16px; gap:12px; } .skin-blue .welcome-icon { flex-basis:40px; width:40px; height:40px; border-radius:12px; font-size:22px; } .skin-blue .welcome-copy h2 { font-size:20px; } }
.skin-blue .user-panel { display:flex; align-items:center; gap:12px; width:calc(100% - 24px); margin:16px 12px 10px; padding:16px 14px; min-height:88px; border:1px solid #bae6fd; border-radius:16px; background:linear-gradient(135deg,#e0f2fe,#f0f9ff); box-sizing:border-box; }
.skin-blue .user-panel::before, .skin-blue .user-panel::after { display:none; }
.skin-blue .user-panel > .image { flex:0 0 44px; width:44px; }
.skin-blue .user-panel > .image > img { display:block; width:44px; height:44px; max-width:none; border:2px solid #fff; border-radius:50%; object-fit:cover; background:#fff; box-shadow:0 2px 8px rgba(3,105,161,.12); }
.skin-blue .user-panel > .info { position:static; flex:1; min-width:0; padding:0; }
.skin-blue .user-panel > .info > p { margin:0 0 6px; color:#0c4a6e; font-size:14px; font-weight:700; white-space:normal; overflow:visible; overflow-wrap:anywhere; text-overflow:clip; line-height:1.45; }
.skin-blue .user-panel > .info > a { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:20px; background:#fff; color:#334e68; font-size:11px; line-height:18px; }
.skin-blue .user-panel > .info > a > .fa { margin:0; padding:0; color:#047857; font-size:8px; }
.skin-blue .sidebar-menu > li.header { padding: 14px 22px 10px; color: #45647a; background: transparent; font-size: 11px; letter-spacing: .09em; font-weight: 700; }
.skin-blue .sidebar-menu > li > a { display: block; min-height: 48px; margin: 5px 12px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; color: #24465e; font-size: 15px; font-weight: 600; line-height: 1.5; transition: background .15s, color .15s, box-shadow .15s; }
.skin-blue .sidebar-menu > li > a > .fa { width: 24px; margin-right: 8px; color: #0369a1; font-size: 17px; }
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.menu-open > a { color: #075985; background: #e0f2fe; border-color: #bae6fd; box-shadow: none; }
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li > a[aria-current='page'] { color: #fff; background: #0369a1; border-color: #0369a1; box-shadow: 0 5px 12px rgba(3, 105, 161, .18); }
.skin-blue .sidebar-menu > li.active > a > .fa { color: #fff; }
.skin-blue .sidebar-menu .treeview-menu { background: #e0f2fe; }
.skin-blue .sidebar-menu .treeview-menu > li > a { color: #24465e; padding-top: 10px; padding-bottom: 10px; }
.skin-blue .sidebar-menu .treeview-menu > li.active > a { color: #075985; font-weight: 700; }
.skin-blue .content-header h1 { color: #12354d; font-size: 25px; font-weight: 700; }
.skin-blue .content-header h1 > small,
.skin-blue .breadcrumb > li, .skin-blue .breadcrumb > li > a { color: #45647a; }
.skin-blue .content a:not(.btn):not(.overview-metric):not(.ticket-badge) { color: #0369a1; }
.skin-blue .content a:not(.btn):hover { color: #0c4a6e; text-decoration: underline; }
.skin-blue .box { border: 1px solid #d3e7f2; border-radius: 18px; background: #fff; box-shadow: 0 6px 24px rgba(3, 105, 161, .05); }
.skin-blue .box-header { background: #f0f9ff; border-bottom: 1px solid #d3e7f2; color: #12354d; padding: 16px 20px; }
.skin-blue .box-body { padding: 20px; }
.skin-blue .box-title { font-weight: 650; }
.skin-blue .table { color: #24465e; font-size: 14px; }
.skin-blue .table > thead > tr > th { background: #eaf6fd; color: #12354d; padding: 13px 12px; font-weight: 700; border-color: #cde6f4; }
.skin-blue .table > tbody > tr > td { border-color: #e2eef6; padding: 12px; }
.skin-blue .table-striped > tbody > tr:nth-of-type(odd) { background: #f8fcff; }
.skin-blue .table > tbody > tr:hover { background: #edf8ff; }
.skin-blue label, .skin-blue .control-label { color: #24465e; font-weight: 650; }
.skin-blue .form-control { color: #172e43; background: #fff; border: 1px solid #92b6cc; border-radius: 10px; min-height: 42px; font-size: 15px; box-shadow: none; }
.skin-blue .form-control::placeholder { color: #526b7e; opacity: 1; }
.skin-blue .form-control[readonly], .skin-blue .form-control[disabled] { color: #334e68; background: #edf5fa; }
.skin-blue .form-control:focus { border-color: #0369a1; box-shadow: 0 0 0 3px #d9f0fd; }
.skin-blue .btn { border-radius: 10px; padding: 10px 16px; font-size: 14px; line-height: 1.4; font-weight: 600; }
.skin-blue .btn-sm { padding: 8px 12px; font-size: 13px; }
.skin-blue .btn.disabled, .skin-blue .btn[disabled] { opacity: 1; }
.skin-blue .btn-primary, .skin-blue .ticket-filters .selected { color: #fff; background: #0369a1; border-color: #0369a1; }
.skin-blue .btn-primary:hover, .skin-blue .btn-primary:focus { color: #fff; background: #075985; border-color: #075985; filter: none; }
.skin-blue .btn-default { color: #24465e; background: #fff; border-color: #b4d2e4; }
.skin-blue .btn-default:hover { background: #e0f2fe; color: #075985; }
.skin-blue .btn-success { color: #fff; background: #047857; border-color: #047857; }
.skin-blue .btn-danger { color: #fff; background: #b91c1c; border-color: #b91c1c; }
.skin-blue .btn-warning { color: #422006; background: #fcd34d; border-color: #f59e0b; }
.skin-blue .label-info { color: #075985; background: #e0f2fe; }
.skin-blue .label-success { color: #065f46; background: #d1fae5; }
.skin-blue .urgency-rendah { color:#075985; background:#e0f2fe; }
.skin-blue .urgency-sedang { color:#92400e; background:#fef3c7; }
.skin-blue .urgency-tinggi { color:#991b1b; background:#fee2e2; }
.skin-blue .text-muted, .skin-blue .help-block,
.skin-blue .overview-muted, .skin-blue .ticket-details,
.skin-blue .overview-heading p, .skin-blue .overview-metric small { color: #45647a; }
.skin-blue .overview-heading h2, .skin-blue .overview-panel h3,
.skin-blue .overview-metric strong, .skin-blue .overview-rate { color: #12354d; }
.skin-blue .overview-panel, .skin-blue .overview-metric { border-color: #cde6f4; box-shadow: 0 6px 22px rgba(3, 105, 161, .04); }
.skin-blue .overview-metric { color: #24465e; }
.skin-blue .overview-metric:hover { text-decoration: none !important; border-color: #38bdf8; background: #f8fcff; }
.skin-blue .metric-total, .skin-blue .metric-progress { color: #0369a1; background: #e0f2fe; }
.skin-blue .bar-incoming { background: #0284c7; }
.skin-blue .bar-completed, .skin-blue .overview-track span { background: #047857; }
.skin-blue .overview-empty, .skin-blue .overview-day small,
.skin-blue .chart-legend { color: #45647a; }
.skin-blue .overview-table .overview-subject { color: #075985; }
.skin-blue .navbar-nav > .user-menu > .dropdown-menu { border: 1px solid #cde6f4; border-radius: 14px; box-shadow: 0 12px 32px rgba(3, 105, 161, .18); overflow: hidden; }
.skin-blue .navbar-nav > .user-menu > .dropdown-menu > .user-header { background: #e0f2fe; }
.skin-blue .navbar-nav > .user-menu > .dropdown-menu > .user-header > p { color: #12354d; }
.skin-blue .navbar-nav > .user-menu > .dropdown-menu > .user-body a { color: #075985 !important; }
.skin-blue .main-footer { color: #45647a; border-color: #cde6f4; background: #fff; font-size: 13px; }
.skin-blue .main-footer a { color: #0369a1; }
.skin-blue a:focus-visible, .skin-blue button:focus-visible,
.sky-auth a:focus-visible, .sky-auth button:focus-visible, .sky-auth input:focus-visible { outline: 3px solid #0369a1; outline-offset: 3px; }
.skin-blue .main-header a:focus-visible { outline-color: #fff; outline-offset: -4px; }
/* Authentication pages use the same palette and readable dark text. */
body.sky-auth { background: radial-gradient(ellipse at top, #d4f0ff 0, #f0f9ff 55%, #e8f5fc 100%); padding: 24px 16px; }
.sky-auth .login-shell, .sky-auth .register-card, .sky-auth .reset-card { color: #172e43; background: #fff; border: 1px solid #bae6fd; border-radius: 24px; box-shadow: 0 18px 50px rgba(3, 105, 161, .1); backdrop-filter: none; }
.sky-auth h1, .sky-auth .brand h1 { color: #075985; font-weight: 750; }
.sky-auth .brand p, .sky-auth .subtitle, .sky-auth .meta, .sky-auth .footer { color: #45647a; }
.sky-auth label { color: #24465e; }
.sky-auth input[type='text'], .sky-auth input[type='password'], .sky-auth input[type='email'] { color: #172e43; background: #f8fcff; border: 1px solid #92b6cc; font-size: 16px; }
.sky-auth input::placeholder { color: #526b7e; opacity: 1; }
.sky-auth input:focus { border-color: #0369a1; box-shadow: 0 0 0 3px #d9f0fd; }
.sky-auth button, .sky-auth input[type='submit'] { color: #fff; background: #0369a1; box-shadow: 0 5px 14px rgba(3,105,161,.15); min-height: 46px; }
.sky-auth button:hover, .sky-auth input[type='submit']:hover { background: #075985; }
.sky-auth a, .sky-auth .meta a { color: #0369a1; text-decoration: underline; text-underline-offset: 3px; }
.sky-auth .alert, .sky-auth .message { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.sky-auth .alert-success { color: #065f46; background: #ecfdf5; border-color: #a7f3d0; }
@media (min-width:768px) {
  .skin-blue:not(.sidebar-collapse) .main-sidebar { width:270px; }
  .skin-blue:not(.sidebar-collapse) .main-header .logo { width:270px; }
  .skin-blue:not(.sidebar-collapse) .main-header .navbar { margin-left:270px; }
  .skin-blue:not(.sidebar-collapse) .content-wrapper,
  .skin-blue:not(.sidebar-collapse) .main-footer { margin-left:270px; }
  .skin-blue:not(.sidebar-collapse) .sidebar-menu > li > a { display:flex; align-items:center; gap:10px; white-space:normal; padding:14px 16px; margin:7px 12px; min-height:50px; }
  .skin-blue:not(.sidebar-collapse) .sidebar-menu > li > a > .fa { flex:0 0 24px; margin-right:0; }
  .skin-blue:not(.sidebar-collapse) .sidebar-menu > li > a > .pull-right-container { position:static; margin-top:0; margin-left:auto; }
  .sidebar-mini.sidebar-collapse.skin-blue .sidebar-menu > li > a { margin: 5px 3px; padding: 12px 10px; }
  .sidebar-mini.sidebar-collapse.skin-blue .sidebar-menu > li > a > .fa { margin-right: 0; }
  .sidebar-mini.sidebar-collapse.skin-blue .sidebar-menu > li:hover > a > span { color: #fff; background: #0369a1; padding-top: 14px; padding-bottom: 14px; }
  .sidebar-mini.sidebar-collapse.skin-blue .user-panel { justify-content:center; gap:0; width:calc(100% - 8px); margin:12px 4px; padding:6px 4px; min-height:46px; border:0; background:transparent; }
  .sidebar-mini.sidebar-collapse.skin-blue .user-panel > .image { flex:0 0 34px; width:34px; }
  .sidebar-mini.sidebar-collapse.skin-blue .user-panel > .image > img { width:34px; height:34px; max-width:34px; }
}
@media (max-width:767px) {
  .skin-blue .main-sidebar { width:270px; transform:translateX(-270px); }
  .skin-blue.sidebar-open .main-sidebar { transform:translateX(0); }
  .skin-blue.sidebar-open .content-wrapper,
  .skin-blue.sidebar-open .main-footer { transform:translateX(270px); }
  .skin-blue .content-wrapper { padding: 12px 6px; }
  .skin-blue .content-header h1 { font-size: 22px; }
  .skin-blue .main-header .logo { width: 100%; }
  .skin-blue .main-header .navbar .nav > li > a { min-height: 50px; }
  .skin-blue .sidebar-menu > li > a { min-height: 48px; }
  .sky-auth .login-shell, .sky-auth .register-card, .sky-auth .reset-card { padding: 28px 20px; }
}
@media (prefers-reduced-motion:reduce) {
  .skin-blue *, .sky-auth * { transition: none !important; animation: none !important; }
}