/* ==========================================================================
   Lagom 2 — Professional polish layer
   Load order: after theme.css, so nothing in the core theme is edited.
   Change the brand in ONE place: the "BRAND PALETTE" block below.
   ========================================================================== */

/* ---------- BRAND PALETTE (edit here) ---------- */
:root {
    --brand-primary:            #0a5cff;
    --brand-primary-lighter:    #2f8bff;
    --brand-primary-darker:     #0640b8;
    --brand-primary-gradient-start: #0a5cff;
    --brand-primary-gradient-end:   #00a3ff;

    --pro-navy:        #0b1f44;   /* dark surfaces: login, footer */
    --pro-navy-2:      #0f2d63;
    --pro-accent:      #00c2ff;   /* highlights */
    --pro-radius:      12px;
    --pro-radius-sm:   8px;
    --pro-border:      #e4e8ef;
    --pro-shadow:      0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.06);
    --pro-shadow-lg:   0 12px 32px rgba(16,24,40,.12);
}
/* Tiranga alternative: --brand-primary:#ff7a00; --pro-navy:#06038d; accent:#138808 */

/* ---------- Base ---------- */
body.lagom {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: var(--brand-primary); color: #fff; }
a { transition: color .15s ease; }

/* ---------- Top navigation ---------- */
.app-nav {
    border-bottom: 1px solid var(--pro-border);
    box-shadow: 0 1px 0 rgba(16,24,40,.03), 0 6px 20px rgba(16,24,40,.04);
}
.app-nav .navbar-main > li > a,
.app-nav .nav > li > a {
    font-weight: 600;
    letter-spacing: .1px;
    transition: color .15s ease, background-color .15s ease;
}
.app-nav .dropdown-menu {
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius);
    box-shadow: var(--pro-shadow-lg);
    padding: 8px;
}
.dropdown-menu > li > a,
.dropdown-menu .dropdown-item {
    border-radius: 6px;
}

/* ---------- Page header / breadcrumb ---------- */
.main-header .header-lined h1,
.main-header h1 {
    font-weight: 700;
    letter-spacing: -.3px;
}
.breadcrumb { font-size: 13px; }

/* ---------- Cards & panels ---------- */
.card,
.panel,
.panel-sidebar,
.tile {
    border-radius: var(--pro-radius);
}
.card,
.panel {
    border: 1px solid var(--pro-border);
    box-shadow: var(--pro-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}
.tile { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--pro-shadow-lg);
}
.card-header,
.panel-heading {
    font-weight: 700;
    border-top-left-radius: var(--pro-radius);
    border-top-right-radius: var(--pro-radius);
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--pro-radius-sm);
    font-weight: 600;
    letter-spacing: .1px;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary,
.btn-success {
    box-shadow: 0 2px 6px rgba(10,92,255,.25);
}
.btn-primary:hover { box-shadow: 0 6px 16px rgba(10,92,255,.32); }
.btn-success { box-shadow: 0 2px 6px rgba(37,167,91,.25); }

/* ---------- Forms ---------- */
.form-control,
select.form-control,
.custom-select {
    border-radius: var(--pro-radius-sm);
    border-color: #d5dbe5;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(10,92,255,.15);
}
label { font-weight: 600; }

/* ---------- Tables (invoices, services, tickets, domains) ---------- */
.table thead th,
.table-list thead th {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #5b6472;
    background: #f7f8fb;
    border-bottom: 1px solid var(--pro-border);
}
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:hover { background-color: #f6f9ff; }

/* ---------- Status labels -> clean pills ---------- */
.label,
.status {
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .2px;
}

/* ---------- Alerts / modals / tabs / pagination ---------- */
.alert { border-radius: var(--pro-radius-sm); border-width: 1px; }
.modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16,24,40,.25);
}
.nav-tabs > li > a,
.nav-tabs .nav-link { font-weight: 600; }
.pagination > li > a,
.pagination .page-link { border-radius: 6px; margin: 0 2px; }

/* ---------- Sidebar ---------- */
.panel-sidebar .list-group-item { transition: background-color .12s ease, padding-left .12s ease; }
.panel-sidebar .list-group-item:hover { background-color: #f6f9ff; }

/* ---------- Footer ---------- */
.main-footer { border-top: 1px solid var(--pro-border); }
.main-footer a { transition: color .15s ease; }

/* ---------- Login / auth pages (scoped — does NOT touch other cards) ---------- */
body.page-login,
body.page-login.lagom-not-portal {
    background: linear-gradient(135deg, var(--pro-navy) 0%, var(--pro-navy-2) 55%, #0a5cff 100%);
    min-height: 100vh;
}
body.page-login .login-wrapper {
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(2,10,30,.45);
}
body.page-login .login-body { padding: 8px 8px 4px; }
body.page-login .login-title { font-weight: 700; letter-spacing: -.3px; }
body.page-login .login-form .btn-primary { width: 100%; padding-top: 12px; padding-bottom: 12px; }

/* ---------- Scrollbar & small details ---------- */
html { scroll-behavior: smooth; }
*:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
    .btn:hover, .tile:hover { transform: none; }
}
@media (max-width: 767px) {
    .card, .panel { border-radius: 10px; }
    .modal-content { border-radius: 12px; }
}