/* ==========================================================================
   The Tiranga Host - NEW DESIGN for every page (global skin)
   Loaded on all pages, so any button / link opens a page in the new design.
   ========================================================================== */
:root{
  --tt-blue:#0A5CFF;--tt-blue-d:#0647C9;--tt-navy:#0B1B4D;--tt-ink:#0F1F4A;--tt-muted:#5F6B8A;
  --tt-soft:#EAF1FF;--tt-bg:#F4F7FC;--tt-line:#E3EAF7;--tt-red:#E5484D;--tt-green:#16A34A;--tt-orange:#F59E0B;
  --tt-r:18px;--tt-shadow:0 1px 2px rgba(11,27,77,.05),0 10px 24px -14px rgba(11,27,77,.25);
}
body.lagom{background:var(--tt-bg)!important;color:var(--tt-ink);font-family:'Inter','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
body.lagom .app-main{background:transparent}
body.lagom h1,body.lagom h2,body.lagom h3,body.lagom h4,body.lagom h5{color:var(--tt-navy);letter-spacing:-.01em}
body.lagom a{color:var(--tt-blue)}
body.lagom a:hover{color:var(--tt-blue-d)}

/* ---------- top header ---------- */
body.lagom .app-nav,body.lagom .app-nav-header,body.lagom .app-nav-menu{background:#fff!important;border:0!important}
body.lagom .app-nav{box-shadow:0 1px 0 var(--tt-line),0 8px 24px -18px rgba(11,27,77,.35)}
body.lagom .app-nav-header .container{display:flex;align-items:center;gap:10px}
body.lagom .app-nav-toggle .icon-bar{background:var(--tt-navy)!important;height:2.5px;border-radius:2px}
body.lagom .top-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
body.lagom .top-nav>li>a{border-radius:12px;color:var(--tt-navy)}
body.lagom .top-nav>li>a:hover{background:var(--tt-soft);color:var(--tt-blue)}
body.lagom #Secondary_Navbar-Account{display:none!important}
body.lagom .app-nav-menu .navbar-nav>li>a{border-radius:12px;font-weight:600;color:var(--tt-navy)}
body.lagom .app-nav-menu .navbar-nav>li.active>a,body.lagom .app-nav-menu .navbar-nav>li>a:hover{background:var(--tt-soft);color:var(--tt-blue)}

/* ---------- page header ---------- */
body.lagom .main-header{background:transparent!important;border:0!important;padding:18px 0 4px}
body.lagom .main-header-title{font-size:26px;font-weight:800;color:var(--tt-navy);margin:0}
body.lagom .breadcrumb{background:transparent;padding:4px 0;font-size:13px}
body.lagom .breadcrumb a{color:var(--tt-muted)}

/* ---------- cards / panels ---------- */
body.lagom .panel,body.lagom .card,body.lagom .modal-content,body.lagom .box,body.lagom .main-body>.well,body.lagom .tt-card{
  background:#fff!important;border:1px solid var(--tt-line)!important;border-radius:var(--tt-r)!important;box-shadow:var(--tt-shadow)!important;overflow:hidden}
body.lagom .panel-heading,body.lagom .card-header,body.lagom .modal-header{background:transparent!important;border:0!important;padding:16px 18px 6px}
body.lagom .panel-title,body.lagom .card-title,body.lagom .modal-title{font-size:17px;font-weight:800;color:var(--tt-navy)}
body.lagom .panel-body,body.lagom .card-body,body.lagom .modal-body{padding:10px 18px 18px}
body.lagom .panel-footer,body.lagom .card-footer,body.lagom .modal-footer{background:#F8FAFE!important;border-top:1px solid var(--tt-line)!important}
body.lagom .list-group{border-radius:0}
body.lagom .list-group-item{border:0!important;border-top:1px solid var(--tt-line)!important;background:transparent!important;color:var(--tt-ink);padding:13px 18px}
body.lagom .list-group-item:first-child{border-top:0!important}
body.lagom a.list-group-item:hover,body.lagom .list-group-item.active{background:var(--tt-soft)!important;color:var(--tt-blue)!important;border-color:var(--tt-line)!important}
body.lagom .sidebar .panel,body.lagom .sidebar .card{margin-bottom:14px}

/* ---------- buttons ---------- */
body.lagom .btn{border-radius:14px!important;font-weight:700;padding:11px 20px;border-width:1px;box-shadow:none!important;transition:.15s}
body.lagom .btn-sm,body.lagom .btn-xs{padding:7px 14px;border-radius:12px!important}
body.lagom .btn-primary,body.lagom .btn-info{background:var(--tt-blue)!important;border-color:var(--tt-blue)!important;color:#fff!important}
body.lagom .btn-primary:hover,body.lagom .btn-info:hover{background:var(--tt-blue-d)!important;border-color:var(--tt-blue-d)!important;transform:translateY(-1px)}
body.lagom .btn-success{background:var(--tt-green)!important;border-color:var(--tt-green)!important;color:#fff!important}
body.lagom .btn-danger{background:var(--tt-red)!important;border-color:var(--tt-red)!important;color:#fff!important}
body.lagom .btn-warning{background:var(--tt-orange)!important;border-color:var(--tt-orange)!important;color:#fff!important}
body.lagom .btn-default,body.lagom .btn-outline,body.lagom .btn-secondary{background:#fff!important;border:1px solid var(--tt-line)!important;color:var(--tt-navy)!important}
body.lagom .btn-default:hover,body.lagom .btn-outline:hover{background:var(--tt-soft)!important;color:var(--tt-blue)!important}
body.lagom .btn-primary-faded,body.lagom .btn-link{background:var(--tt-soft)!important;border-color:transparent!important;color:var(--tt-blue)!important}
body.lagom .btn .ls,body.lagom .btn .lm{vertical-align:-1px}

/* ---------- forms ---------- */
body.lagom .form-control,body.lagom select.form-control,body.lagom .input-group-text,body.lagom .bootstrap-select>.btn{background:#fff!important;border:1px solid var(--tt-line)!important;border-radius:14px!important;min-height:46px;color:var(--tt-ink);box-shadow:none!important}
body.lagom textarea.form-control{min-height:110px}
body.lagom .form-control:focus{border-color:var(--tt-blue)!important;box-shadow:0 0 0 4px rgba(10,92,255,.12)!important}
body.lagom label,body.lagom .control-label{font-weight:600;color:var(--tt-navy)}
body.lagom .input-group-addon{border-radius:14px;background:var(--tt-soft);border:1px solid var(--tt-line)}

/* ---------- tables ---------- */
body.lagom .table-container,body.lagom .table-responsive,body.lagom .dataTables_wrapper{background:#fff;border:1px solid var(--tt-line);border-radius:var(--tt-r);box-shadow:var(--tt-shadow);padding:6px;overflow-x:auto}
body.lagom .table{margin:0;background:transparent}
body.lagom .table>thead>tr>th{background:#F4F8FE!important;color:var(--tt-muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;border:0!important;padding:12px 14px;white-space:nowrap}
body.lagom .table>thead>tr>th:first-child{border-radius:12px 0 0 12px}
body.lagom .table>thead>tr>th:last-child{border-radius:0 12px 12px 0}
body.lagom .table>tbody>tr>td{border-top:1px solid var(--tt-line)!important;padding:14px;vertical-align:middle;color:var(--tt-ink)}
body.lagom .table>tbody>tr:hover>td{background:#F8FBFF}
body.lagom .table-list tbody tr{cursor:pointer}
body.lagom .pagination>li>a,body.lagom .pagination>li>span,body.lagom .page-link{border:1px solid var(--tt-line);border-radius:12px!important;margin:0 3px;color:var(--tt-navy);background:#fff}
body.lagom .pagination>.active>a,body.lagom .page-item.active .page-link{background:var(--tt-blue)!important;border-color:var(--tt-blue)!important;color:#fff!important}

/* ---------- status / badges / alerts / tabs ---------- */
body.lagom .label,body.lagom .badge,body.lagom .status{border-radius:999px!important;font-weight:700;padding:5px 12px;font-size:12px}
body.lagom .label-success,body.lagom .status-active,body.lagom .status-paid,body.lagom .status-open{background:#E6F7EF!important;color:#0E8F5E!important}
body.lagom .label-danger,body.lagom .status-unpaid,body.lagom .status-terminated,body.lagom .status-cancelled{background:#FDECEC!important;color:#C62828!important}
body.lagom .label-warning,body.lagom .status-pending,body.lagom .status-suspended{background:#FFF1E3!important;color:#C2620A!important}
body.lagom .alert{border-radius:16px!important;border:1px solid var(--tt-line)!important;box-shadow:none}
body.lagom .nav-tabs{border:0!important;gap:6px;display:flex;flex-wrap:wrap}
body.lagom .nav-tabs>li>a,body.lagom .nav-tabs .nav-link{border:0!important;border-radius:12px!important;background:#fff;color:var(--tt-navy);font-weight:600}
body.lagom .nav-tabs>li.active>a,body.lagom .nav-tabs .nav-link.active{background:var(--tt-blue)!important;color:#fff!important}
body.lagom .dropdown-menu{border:1px solid var(--tt-line)!important;border-radius:16px!important;box-shadow:0 20px 40px -16px rgba(11,27,77,.3)!important;padding:8px}
body.lagom .dropdown-menu>li>a,body.lagom .dropdown-item{border-radius:10px;padding:9px 12px;color:var(--tt-ink)}
body.lagom .dropdown-menu>li>a:hover,body.lagom .dropdown-item:hover{background:var(--tt-soft);color:var(--tt-blue)}
body.lagom .modal-backdrop.in,body.lagom .modal-backdrop.show{background:#0B1B4D}

/* ---------- footer ---------- */
body.lagom .app-footer,body.lagom .footer{background:#fff!important;border-top:1px solid var(--tt-line)!important;color:var(--tt-muted)}
body.lagom .footer-bottom{background:transparent!important}

/* ---------- new user dropdown (header) ---------- */
.tt-user{position:relative;list-style:none}
.tt-u-btn{display:flex;align-items:center;gap:6px;background:transparent;border:0;padding:4px;cursor:pointer}
.tt-u-av{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#3B82FF,#0A5CFF);color:#fff;font-weight:800;font-size:18px;box-shadow:0 0 0 4px #E6EFFF}
.tt-u-av-lg{width:56px;height:56px;font-size:22px;flex:0 0 56px}
.tt-u-dot{position:absolute;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;background:#22C55E;border:2px solid #fff}
.tt-u-caret{fill:none;stroke:#5F6B8A;stroke-width:1.8;stroke-linecap:round}
.tt-u-menu{display:none;position:absolute;right:0;top:calc(100% + 10px);width:min(340px,calc(100vw - 24px));background:#fff;border:1px solid var(--tt-line);border-radius:22px;box-shadow:0 24px 50px -18px rgba(11,27,77,.4);padding:14px;z-index:10050}
.tt-user.tt-open .tt-u-menu{display:block}
.tt-u-head{display:flex;align-items:center;gap:12px;padding:4px 4px 12px;text-decoration:none!important;color:var(--tt-ink)}
.tt-u-who{flex:1;min-width:0;display:flex;flex-direction:column}
.tt-u-who b{font-size:17px;color:var(--tt-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-u-who small{color:var(--tt-muted);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.tt-u-who em{align-self:flex-start;margin-top:4px;font-style:normal;font-weight:700;font-size:12px;color:#0E8F5E;background:#E6F7EF;border-radius:8px;padding:2px 10px}
.tt-u-chev{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:#5F6B8A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tt-u-acct{display:flex;align-items:center;gap:12px;background:#EEF3FF;border-radius:16px;padding:12px 14px;margin-bottom:10px}
.tt-u-acct svg{flex:0 0 26px;fill:none;stroke:#0A5CFF;stroke-width:1.9;stroke-linejoin:round}
.tt-u-acct span{display:flex;flex-direction:column}
.tt-u-acct b{font-size:15px;color:var(--tt-navy)}.tt-u-acct small{font-size:12.5px;color:var(--tt-muted)}
.tt-u-i{display:flex;align-items:center;gap:14px;padding:12px 12px;border-radius:14px;color:var(--tt-ink)!important;font-weight:600;font-size:16px;text-decoration:none!important}
.tt-u-i>svg:first-child{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:#44527A;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tt-u-i span{flex:1}
.tt-u-i:hover,.tt-u-cur{background:#EAF1FF}
.tt-u-cur{color:var(--tt-blue)!important}.tt-u-cur>svg:first-child{stroke:var(--tt-blue)}
.tt-u-menu hr{border:0;border-top:1px solid var(--tt-line);margin:8px 4px}
.tt-u-out{background:#FDECEC;color:#E5484D!important}.tt-u-out>svg:first-child,.tt-u-out .tt-u-chev{stroke:#E5484D}
.tt-u-out:hover{background:#FBDADA}

/* ---------- dashboard welcome art ---------- */
.tt-w-art{flex:0 0 40%;max-width:190px;width:40%;height:auto}
.tt-offer{display:none!important}
.tt-more{display:none!important}

@media (max-width:991px){
  body.lagom .main-header-title{font-size:22px}
  body.lagom .app-nav-header .container{padding-left:14px;padding-right:14px}
  body.lagom .table>tbody>tr>td{padding:12px 10px}
}

/* ---- Profile menu v3 (polished, Support PIN) ---- */
.tt-u-menu{width:min(352px,calc(100vw - 20px));padding:14px;border-radius:26px;max-height:calc(100vh - 90px);overflow-y:auto;border:1px solid #DCE5FA;box-shadow:0 30px 60px -22px rgba(11,27,77,.5)}
.tt-u-head{padding:2px 2px 12px}
.tt-u-wal{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#0B1B4D;border-radius:18px;padding:14px 12px 14px 16px;margin:0 0 4px}
.tt-u-wal small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#C9D3F2;font-weight:700}
.tt-u-wal b{display:block;font-size:22px;font-weight:800;color:#fff;margin-top:2px}
.tt-u-wal a{background:#FF9A2E;color:#1A1200!important;font-weight:800;font-size:14px;border-radius:13px;padding:12px 16px;text-decoration:none!important;white-space:nowrap}
.tt-u-sec{margin:14px 10px 6px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#5B6785}
.tt-u-i{display:flex;align-items:center;gap:13px;width:100%;border:0;background:transparent;cursor:pointer;text-align:left;font-family:inherit;padding:9px 10px;font-size:15.5px;font-weight:600;border-radius:15px;color:#0B1B4D!important;min-height:52px;position:relative}
.tt-u-i:hover{background:#F1F5FF}
.tt-u-cur{background:#E8F0FF}
.tt-u-cur:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:#0A5CFF}
.tt-u-ic{width:36px;height:36px;flex:0 0 36px;border-radius:12px;display:grid;place-items:center;background:#E6EEFF;color:#1D4ED8}
.tt-u-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tt-u-ic.c-b{background:#E6EEFF;color:#1D4ED8}.tt-u-ic.c-g{background:#E3F6EC;color:#15803D}.tt-u-ic.c-p{background:#EEE8FF;color:#6D28D9}.tt-u-ic.c-o{background:#FFF0DC;color:#B45309}.tt-u-ic.c-t{background:#DDF4F4;color:#0F766E}
.tt-u-supbtn .tt-u-ic{background:#DDF4F4;color:#0F766E}
.tt-u-supbtn.tt-on{background:#F1F5FF}
.tt-u-out{margin-top:12px;border:1.5px solid #F2B8B8!important;background:#FFF6F6;color:#B91C1C!important}
.tt-u-out .tt-u-ic{background:#FDE8E8;color:#B91C1C}
.tt-u-pill{background:#FFF0DC;color:#9A4A00;font-style:normal;font-size:11px;font-weight:800;border-radius:99px;padding:3px 9px}
.tt-u-down{transform:rotate(90deg);transition:transform .2s}
.tt-u-supbtn.tt-on .tt-u-down{transform:rotate(-90deg)}
.tt-pin{display:none;margin:6px 4px 8px;padding:16px;border-radius:20px;background:#0B1B4D;color:#fff}
.tt-pin.tt-show{display:block}
.tt-pin-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tt-pin-top b{display:block;font-size:15px;color:#fff}
.tt-pin-top small{display:block;font-size:12.5px;color:#C9D3F2;margin-top:1px}
.tt-pin-lock{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex:0 0 38px}
.tt-pin-lock svg{width:20px;height:20px;fill:none;stroke:#FFD866;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tt-pin-digits{display:flex;gap:7px;justify-content:space-between;margin-bottom:12px}
.tt-pin-digits i{flex:1;max-width:46px;height:56px;border-radius:14px;background:#fff;color:#0B1B4D;font-style:normal;font-size:28px;font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums;user-select:all}
.tt-pin-digits em{font-style:normal;font-size:13px;color:#C9D3F2}
.tt-pin-copy{width:100%;border:0;border-radius:14px;background:#FF9A2E;color:#1A1200;font-weight:800;font-size:15px;min-height:48px;cursor:pointer;font-family:inherit}
.tt-pin-copy:disabled{opacity:.5}
.tt-pin p{margin:12px 0;font-size:13px;line-height:1.5;color:#C9D3F2}
.tt-pin-links{display:flex;gap:8px}
.tt-pin-links a{flex:1;text-align:center;background:rgba(255,255,255,.12);border-radius:12px;padding:12px 8px;font-weight:700;font-size:13.5px;text-decoration:none!important;color:#fff!important}

/* ---- v3.1 fix: icon tiles stretched wide (old ".tt-u-i span{flex:1}" rule) ---- */
.tt-u-i span{flex:0 0 auto}
.tt-u-i>span:not(.tt-u-ic){flex:1 1 auto;min-width:0;text-align:left}
.tt-u-i .tt-u-ic,.tt-u-ic{flex:0 0 38px!important;width:38px!important;height:38px!important;min-width:38px;max-width:38px;border-radius:13px}
.tt-u-i .tt-u-ic svg{width:20px!important;height:20px!important}
.tt-u-i{gap:14px;padding:7px 10px;min-height:54px;font-size:15.5px;letter-spacing:-.005em}
.tt-u-i .tt-u-chev{width:15px;height:15px;flex:0 0 15px;stroke:#8A96B5;margin-left:auto}
.tt-u-i:hover .tt-u-chev{stroke:#0A5CFF}
.tt-u-cur{background:linear-gradient(90deg,#E3EDFF,#EEF4FF)}
.tt-u-cur .tt-u-ic{background:#0A5CFF;color:#fff}
.tt-u-sec{display:flex;align-items:center;gap:10px;margin:16px 10px 6px}
.tt-u-sec:after{content:"";flex:1;height:1px;background:#E3EAF7}
.tt-u-pill{margin-left:auto;margin-right:2px;flex:0 0 auto}
.tt-u-pill+.tt-u-chev{margin-left:0}
.tt-u-out{justify-content:flex-start;gap:14px;padding:7px 10px}
.tt-u-out>span:not(.tt-u-ic){flex:1}
.tt-u-menu::-webkit-scrollbar{width:0}