/* HostAngle × Lagom 2 — Stable Premium UI
   Visual-only layer. Original Lagom Smarty markup and navigation remain untouched. */
:root{
  --ha-navy:#0b1f44;--ha-navy-2:#12366f;--ha-blue:#1469ff;--ha-blue-2:#3c8dff;
  --ha-orange:#ff8a2a;--ha-bg:#f4f7fc;--ha-card:#fff;--ha-text:#10213e;
  --ha-muted:#66758d;--ha-line:#dfe7f2;--ha-soft:#edf4ff;--ha-radius:16px;
  --ha-shadow:0 10px 30px rgba(15,42,84,.09);--ha-shadow-lg:0 22px 55px rgba(15,42,84,.15)
}
html{scroll-behavior:smooth}
body.hostangle-premium{background:linear-gradient(180deg,#f9fbff 0,#f3f7fd 320px,#f7f9fc 100%);color:var(--ha-text)}
.hostangle-premium .container{max-width:1380px}
.hostangle-premium .app-main,.hostangle-premium .main-body{background:transparent}

/* TOP UTILITY BAR — force light, readable and properly centred */
body.hostangle-premium header .app-nav .app-nav-header,
body.hostangle-premium .app-nav-header,
body.hostangle-premium #header.app-nav-header{
  min-height:46px!important;height:auto!important;padding:0!important;
  background:linear-gradient(90deg,#eef5ff 0%,#f8fbff 52%,#eef5ff 100%)!important;
  border:0!important;border-bottom:1px solid #d8e6f8!important;box-shadow:none!important;
  color:#2d466b!important
}
body.hostangle-premium header .app-nav .app-nav-header>.container,
body.hostangle-premium .app-nav-header>.container{
  min-height:46px!important;display:flex!important;align-items:center!important;justify-content:space-between!important
}
body.hostangle-premium .app-nav-header .top-nav{min-height:46px!important;display:flex!important;align-items:center!important;margin:0!important}
body.hostangle-premium .app-nav-header .top-nav>li{height:46px!important;display:flex!important;align-items:center!important}
body.hostangle-premium .app-nav-header .top-nav>li>a{
  min-height:46px!important;height:46px!important;padding:0 12px!important;display:flex!important;
  align-items:center!important;gap:7px!important;color:#3c5273!important;opacity:1!important;
  font-weight:600!important;text-shadow:none!important;background:transparent!important
}
body.hostangle-premium .app-nav-header .top-nav>li>a:hover,
body.hostangle-premium .app-nav-header .top-nav>li.open>a{color:var(--ha-blue)!important;background:rgba(20,105,255,.08)!important}
body.hostangle-premium .app-nav-header .top-nav i,
body.hostangle-premium .app-nav-header .top-nav span,
body.hostangle-premium .app-nav-header .top-nav .caret,
body.hostangle-premium .app-nav-header .top-nav .lm,
body.hostangle-premium .app-nav-header .top-nav .ls{color:inherit!important;opacity:1!important}
body.hostangle-premium .app-nav-header .top-nav .badge{background:var(--ha-orange)!important;color:#fff!important}

/* MAIN NAVIGATION */
body.hostangle-premium .app-nav{background:transparent!important;border:0!important;box-shadow:0 8px 26px rgba(20,46,88,.10)!important;position:relative;z-index:1000}
body.hostangle-premium .app-nav-menu{
  min-height:86px!important;background:rgba(255,255,255,.98)!important;border:0!important;
  border-bottom:1px solid #dce6f3!important;box-shadow:none!important;backdrop-filter:blur(14px)
}
body.hostangle-premium .app-nav-menu>.container{min-height:86px!important;display:flex!important;align-items:center!important}
body.hostangle-premium .app-nav-menu .logo,body.hostangle-premium .app-nav-menu .logo>a{display:flex!important;align-items:center!important;background:transparent!important;box-shadow:none!important}
body.hostangle-premium .app-nav-menu .logo img{max-height:54px!important;width:auto!important;filter:none!important}
body.hostangle-premium .app-nav-menu .menu-primary{min-height:86px!important;display:flex!important;align-items:stretch!important;margin-left:auto!important}
body.hostangle-premium .app-nav-menu .menu-primary>li{display:flex!important;align-items:stretch!important}
body.hostangle-premium .app-nav-menu .menu-primary>li>a{
  min-height:86px!important;display:flex!important;align-items:center!important;padding:0 22px!important;
  color:#172945!important;font-size:16px!important;font-weight:650!important;border-radius:0!important;transition:.2s ease
}
body.hostangle-premium .app-nav-menu .menu-primary>li>a:hover,
body.hostangle-premium .app-nav-menu .menu-primary>li.active>a,
body.hostangle-premium .app-nav-menu .menu-primary>li.open>a{color:var(--ha-blue)!important;background:linear-gradient(180deg,rgba(20,105,255,.02),rgba(20,105,255,.08))!important}
body.hostangle-premium .app-nav-menu .menu-primary>li.active>a:after{height:3px!important;background:var(--ha-blue)!important;border-radius:99px 99px 0 0!important}
body.hostangle-premium .app-nav .dropdown-menu{padding:9px!important;border:1px solid var(--ha-line)!important;border-radius:14px!important;box-shadow:0 20px 48px rgba(15,42,84,.18)!important}
body.hostangle-premium .app-nav .dropdown-menu>li>a{border-radius:9px!important;color:#314764!important;padding:10px 13px!important}
body.hostangle-premium .app-nav .dropdown-menu>li>a:hover{background:var(--ha-soft)!important;color:var(--ha-blue)!important}

/* OPEN TICKET / PRIMARY NAV ACTION */
body.hostangle-premium .app-nav-menu .btn-primary,body.hostangle-premium .app-nav .btn-primary{
  background:linear-gradient(135deg,var(--ha-blue),var(--ha-blue-2))!important;border:0!important;
  color:#fff!important;border-radius:13px!important;box-shadow:0 10px 22px rgba(20,105,255,.25)!important
}

/* PAGE HEADER — remove grey slab and align title/actions */
body.hostangle-premium .main-header{
  padding:34px 0 26px!important;background:linear-gradient(135deg,#f8fbff 0%,#edf4ff 100%)!important;
  border-bottom:1px solid #dce7f4!important;box-shadow:none!important
}
body.hostangle-premium .main-header .container{position:relative}
body.hostangle-premium .main-header-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important;margin:0!important}
body.hostangle-premium .main-header-title{font-size:clamp(28px,3vw,38px)!important;line-height:1.12!important;font-weight:800!important;letter-spacing:-.035em!important;color:var(--ha-text)!important;margin:0!important}
body.hostangle-premium .main-header .form-control,body.hostangle-premium .main-header .input-group{min-height:52px}
body.hostangle-premium .main-header .btn{min-height:52px!important;border-radius:13px!important}
body.hostangle-premium .main-header-bottom,body.hostangle-premium .breadcrumb{margin-top:10px!important;color:var(--ha-muted)!important}

/* CONTENT SPACING */
body.hostangle-premium .app-main>.container,body.hostangle-premium .main-body>.container{padding-top:30px;padding-bottom:42px}

/* CARDS / PANELS */
body.hostangle-premium .panel,body.hostangle-premium .card,body.hostangle-premium .tile,body.hostangle-premium .widget,body.hostangle-premium .box{
  background:rgba(255,255,255,.98)!important;border:1px solid var(--ha-line)!important;border-radius:var(--ha-radius)!important;
  box-shadow:var(--ha-shadow)!important;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease
}
body.hostangle-premium .panel:hover,body.hostangle-premium .card:hover,body.hostangle-premium .tile:hover{border-color:#c9daf2!important;box-shadow:0 16px 42px rgba(15,42,84,.13)!important}
body.hostangle-premium .panel-heading,body.hostangle-premium .card-header{padding:18px 21px!important;background:linear-gradient(180deg,#fff,#f7faff)!important;border-bottom:1px solid var(--ha-line)!important}
body.hostangle-premium .panel-title,body.hostangle-premium .card-title{color:var(--ha-text)!important;font-weight:750!important;letter-spacing:-.015em}
body.hostangle-premium .panel-body,body.hostangle-premium .card-body{padding:21px!important}
body.hostangle-premium .panel-footer,body.hostangle-premium .card-footer{padding:15px 21px!important;background:#f8fafe!important;border-top:1px solid var(--ha-line)!important}

/* SIDEBARS */
body.hostangle-premium .panel-sidebar{border-radius:15px!important}
body.hostangle-premium .panel-sidebar .panel-heading{background:linear-gradient(135deg,var(--ha-navy),var(--ha-navy-2))!important;border:0!important}
body.hostangle-premium .panel-sidebar .panel-heading,body.hostangle-premium .panel-sidebar .panel-heading *{color:#fff!important}
body.hostangle-premium .panel-sidebar .list-group{padding:8px!important}
body.hostangle-premium .panel-sidebar .list-group-item{border:0!important;border-radius:10px!important;margin:3px 0!important;padding:11px 13px!important;color:#40516d!important;background:transparent!important}
body.hostangle-premium .panel-sidebar .list-group-item:hover,body.hostangle-premium .panel-sidebar .list-group-item.active{background:var(--ha-soft)!important;color:var(--ha-blue)!important}

/* BUTTONS */
body.hostangle-premium .btn{border-radius:11px!important;font-weight:650!important;transition:transform .18s ease,box-shadow .18s ease!important}
body.hostangle-premium .btn:hover{transform:translateY(-1px)}
body.hostangle-premium .btn-primary{background:linear-gradient(135deg,var(--ha-blue),var(--ha-blue-2))!important;border-color:transparent!important;box-shadow:0 8px 18px rgba(20,105,255,.22)!important}
body.hostangle-premium .btn-default,body.hostangle-premium .btn-secondary{background:#fff!important;border-color:#d8e3f1!important;color:#29415f!important}

/* FORMS */
body.hostangle-premium .form-control,body.hostangle-premium .input-group-addon,body.hostangle-premium .selectize-input{
  border-color:#d7e2f0!important;border-radius:11px!important;background:#fff!important;box-shadow:none!important
}
body.hostangle-premium .form-control:focus,body.hostangle-premium .selectize-input.focus{border-color:#7fb0ff!important;box-shadow:0 0 0 4px rgba(20,105,255,.10)!important}

/* TABLES */
body.hostangle-premium .table-container,body.hostangle-premium .dataTables_wrapper{background:#fff;border:1px solid var(--ha-line);border-radius:15px;box-shadow:var(--ha-shadow);overflow:hidden}
body.hostangle-premium .table>thead>tr>th{background:#f5f8fd!important;color:#3c506d!important;font-size:12px!important;text-transform:uppercase;letter-spacing:.045em;border-color:var(--ha-line)!important}
body.hostangle-premium .table>tbody>tr>td{border-color:#e8eef6!important;vertical-align:middle!important}
body.hostangle-premium .table>tbody>tr:hover{background:#f8fbff!important}

/* STATUS / ALERTS / MODALS */
body.hostangle-premium .label,body.hostangle-premium .badge{border-radius:999px!important;font-weight:650!important}
body.hostangle-premium .alert{border-radius:13px!important;border-width:1px!important;box-shadow:0 7px 20px rgba(15,42,84,.06)}
body.hostangle-premium .modal-content{border:1px solid var(--ha-line)!important;border-radius:18px!important;box-shadow:var(--ha-shadow-lg)!important;overflow:hidden}
body.hostangle-premium .modal-header{background:linear-gradient(180deg,#fff,#f7faff)!important;border-bottom:1px solid var(--ha-line)!important}

/* LOGIN / AUTH */
body.hostangle-premium.page-login{background:radial-gradient(circle at 15% 10%,rgba(20,105,255,.18),transparent 30%),linear-gradient(135deg,#081a3b,#123f82)!important}
body.hostangle-premium.page-login .login-form,body.hostangle-premium.page-login .card{border-radius:20px!important;box-shadow:0 30px 70px rgba(3,17,44,.28)!important}

/* FOOTER */
body.hostangle-premium .main-footer,body.hostangle-premium footer{border-top:1px solid #dce6f2!important;background:#fff!important;color:#687890!important}

@media(max-width:991px){
  body.hostangle-premium .app-nav-menu{min-height:72px!important}
  body.hostangle-premium .app-nav-menu>.container{min-height:72px!important}
  body.hostangle-premium .app-nav-menu .menu-primary{display:block!important;min-height:auto!important;margin-left:0!important}
  body.hostangle-premium .app-nav-menu .menu-primary>li,body.hostangle-premium .app-nav-menu .menu-primary>li>a{display:block!important;min-height:auto!important}
  body.hostangle-premium .app-nav-menu .menu-primary>li>a{padding:13px 16px!important;border-radius:10px!important}
  body.hostangle-premium .main-header{padding:25px 0 20px!important}
  body.hostangle-premium .main-header-top{align-items:flex-start!important;flex-direction:column!important}
}
@media(max-width:767px){
  body.hostangle-premium .app-nav-header>.container{padding-left:14px!important;padding-right:14px!important}
  body.hostangle-premium .app-nav-header .top-nav>li>a{padding:0 8px!important}
  body.hostangle-premium .main-header-title{font-size:27px!important}
  body.hostangle-premium .panel-body,body.hostangle-premium .card-body{padding:17px!important}
}