/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors — Digitalku brand green */
    --success: #379683;
    --success-lifted: #2f8273;
    --success-accented: #31734d;

    /* Digitalku brand palette */
    --brand-navy: #05386b;
    --brand-navy-lifted: #052d56;
    --brand-navy-accented: #042442;
    --brand-green: #379683;
    --brand-green-accented: #31734d;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;

    /* Brand rounding & elevation (modern look) */
    --rounding-md: 0.625rem;
    --rounding-lg: 1rem;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06);
}

/* ============================================================
   DIGITALKU BRAND + MODERNIZATION LAYER
   Built on the WHMCS 9 Nexus (Bootstrap 4) base.
   Brand: navy #05386b + green #379683, Nunito typography.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&display=swap");

html {
    font-size: 15px;
}

body {
    font-family: "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text);
    background-color: var(--bg-muted);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: var(--neutral-900);
}

a {
    color: var(--brand-navy);
}
a:hover,
a:focus {
    color: var(--brand-navy-lifted);
}

/* ============================================================
   NAVBAR — floating white "pill" on a navy header
   ============================================================ */
header.header {
    background-color: var(--brand-navy);
    position: relative;
    z-index: 1040; /* keep navbar dropdowns above the breadcrumb & page content */
}
.brand-navbar-region {
    padding: 20px 0;
}
.brand-navbar-pill {
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(3, 25, 51, 0.16);
    padding: 4px 16px;
    min-height: 54px;
    flex-wrap: nowrap;
}
@media (max-width: 1199.98px) {
    .brand-navbar-pill { flex-wrap: wrap; }
}

/* Logo — smaller, with breathing room from the menu */
.brand-navbar-pill .navbar-brand {
    padding: 0;
    margin: 0 28px 0 6px;
}
.brand-navbar-pill .logo-img { max-height: 22px; width: auto; }

/* ---- Desktop (xl+): logo left · menu truly centered · actions right ----
   The menu is absolutely centered so it keeps its natural width and never
   wraps — that stops WHMCS's JS from pushing items (e.g. Affiliates) into
   the "More" dropdown. */
@media (min-width: 1200px) {
    .brand-navbar-pill .navbar-brand { flex: 0 0 auto; }
    .brand-navbar-pill .toolbar      { margin-left: auto !important; justify-content: flex-end; gap: 4px; }
    .brand-navbar-pill #mainNavbar {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        flex: 0 0 auto;
        padding: 0;
    }
    .brand-navbar-pill #nav {
        margin: 0 !important;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 4px;
    }
}

/* The "More" overflow dropdown is disabled for this navbar (all primary
   items are no-collapse), so never show its empty shell. */
.brand-navbar-pill .collapsable-dropdown { display: none !important; }

/* ---- Mobile / tablet (< xl): hamburger menu ---- */
@media (max-width: 1199.98px) {
    .brand-navbar-pill #mainNavbar {
        flex-basis: 100%;
        width: 100%;
        order: 5;
        margin-top: 8px;
        border-top: 1px solid var(--border-muted);
        padding-top: 8px;
    }
    .brand-navbar-pill #nav { width: 100%; flex-direction: column; }
    .brand-navbar-pill #nav > li { width: 100%; }
    .brand-navbar-pill #nav > li > a { display: block; width: 100%; }
    /* dropdown submenus render inline within the mobile menu */
    .brand-navbar-pill #nav .dropdown-menu {
        position: static;
        float: none;
        box-shadow: none;
        border: 0;
        margin: 2px 0 4px 12px;
        padding: 0;
    }
    /* keep the account toggle compact so the top row never overflows */
    .brand-navbar-pill .toolbar > li.dropdown > a {
        max-width: 46vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Menu links — single, clean hover state (no stacked/double effect) */
header.header .brand-navbar-pill #nav > li > a {
    display: inline-block;
    color: var(--neutral-800) !important;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.2;
    padding: 8px 14px !important;
    border-radius: 8px;
    white-space: nowrap;
    text-decoration: none !important;
    background-color: transparent !important;
    transition: color .15s ease, background-color .15s ease;
}
header.header .brand-navbar-pill #nav > li > a:hover,
header.header .brand-navbar-pill #nav > li > a:focus,
header.header .brand-navbar-pill #nav > li.active > a,
header.header .brand-navbar-pill #nav > li.open > a,
header.header .brand-navbar-pill #nav > li > a.active {
    color: var(--brand-navy) !important;
    background-color: var(--neutral-100) !important;
}

/* Account / profile menu (now in the right toolbar) */
header.header .brand-navbar-pill .toolbar > li.dropdown > a {
    display: inline-flex;
    align-items: center;
    color: var(--neutral-800) !important;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 14px !important;
    border-radius: 8px;
    white-space: nowrap;
    text-decoration: none !important;
    background-color: transparent !important;
    transition: color .15s ease, background-color .15s ease;
}
header.header .brand-navbar-pill .toolbar > li.dropdown > a:hover,
header.header .brand-navbar-pill .toolbar > li.dropdown.open > a {
    color: var(--brand-navy) !important;
    background-color: var(--neutral-100) !important;
}

/* Dropdown carets + menus */
.brand-navbar-pill .dropdown-toggle::after {
    margin-left: .4em;
    vertical-align: middle;
    border-top-color: currentColor;
}
.brand-navbar-pill .dropdown-menu {
    border: 1px solid var(--border-muted);
    border-radius: var(--rounding-md);
    box-shadow: var(--shadow-md);
    margin-top: 8px;
    padding: 6px;
    z-index: 1045;
}
/* .brand-navbar-pill .dropdown-menu a {
    color: var(--neutral-800) !important;
    border-radius: 8px;
    padding: 8px 12px !important;
} */
/* .brand-navbar-pill .dropdown-menu a:hover {
    color: var(--brand-navy) !important;
    background-color: var(--neutral-100);
} */

header.header .logo-img {
    max-height: 45px;
    padding-left: 15px;
}


/* Cart button */
.brand-navbar-pill .toolbar { gap: 4px; }
.brand-navbar-pill .cart-btn {
    color: var(--neutral-800) !important;
    font-size: 18px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    position: relative;
    padding: 8px 10px;
}
.brand-navbar-pill .cart-btn:hover { color: var(--brand-navy) !important; }
.brand-navbar-pill .cart-btn .badge {
    background-color: var(--brand-green);
    color: #fff;
    font-size: 11px;
    position: absolute;
    top: -2px;
    right: -4px;
}

/* Green "Client Portal" CTA */
.brand-navbar-pill .btn-portal {
    background-color: var(--brand-green);
    color: #fff!important;
    font-weight: 700;
    font-size: 14px;
    border-radius: 999px;
    padding: 7px 18px;
    border: 0;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(55, 150, 131, 0.35);
    transition: background-color .15s ease, transform .05s ease;
}
.brand-navbar-pill .btn-portal:hover,
.brand-navbar-pill .btn-portal:focus {
    background-color: var(--brand-green-accented);
    color: #fff;
}
.brand-navbar-pill .btn-portal:active { transform: translateY(1px); }

/* Mobile hamburger */
.brand-navbar-pill .navbar-toggler {
    color: var(--neutral-800);
    font-size: 18px;
    border: 0;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--rounding-md);
    font-weight: 600;
    transition: transform .05s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:active {
    transform: translateY(1px);
}
.btn-primary {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--brand-navy-lifted);
    border-color: var(--brand-navy-lifted);
}
.btn-success {
    background: var(--brand-green);
    border-color: var(--brand-green);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background: var(--brand-green-accented);
    border-color: var(--brand-green-accented);
}

/* ---------- Cards / panels (modern elevation) ---------- */
.card,
.panel {
    border: 1px solid var(--border-muted);
    border-radius: var(--rounding-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover {
    box-shadow: var(--shadow-md);
}
.card .card-header,
.panel .panel-heading {
    background-color: var(--bg);
    border-bottom: 1px solid var(--border-muted);
    font-weight: 700;
}

/* ---------- Bootstrap 3 -> 4 compat shim ----------
   Legacy Jayahost pages (konfirmasi, srsx/*, form/*) still use
   Bootstrap-3 markup that BS4 dropped. These rules keep them
   looking like modern cards instead of unstyled blocks. */
.panel { background-color: var(--bg); }
.panel-heading {
    padding: 0.85rem 1.15rem;
    background-color: var(--bg);
    border-bottom: 1px solid var(--border-muted);
    border-top-left-radius: var(--rounding-lg);
    border-top-right-radius: var(--rounding-lg);
}
.panel-title { margin: 0; font-size: 1rem; font-weight: 700; }
.panel-body { padding: 1.15rem; }
.panel-footer {
    padding: 0.85rem 1.15rem;
    background-color: var(--bg-muted);
    border-top: 1px solid var(--border-muted);
    border-bottom-left-radius: var(--rounding-lg);
    border-bottom-right-radius: var(--rounding-lg);
}
.panel-default > .panel-heading { color: var(--text); }
.pull-right { float: right !important; }
.pull-left { float: left !important; }

/* ---------- Forms ---------- */
.form-control {
    border-radius: var(--rounding-md);
    border-color: var(--border);
}
.form-control:focus {
    border-color: var(--brand-navy);
    box-shadow: 0 0 0 3px rgba(5, 56, 107, 0.12);
}

/* ---------- Breadcrumb / page header ---------- */
.header-lined > h1,
.page-header h1 {
    color: var(--brand-navy);
}

/* ---------- Footer ---------- */
#footer,
.footer {
    background-color: var(--brand-navy);
    color: rgba(255, 255, 255, 0.85);
}
#footer a,
.footer a {
    color: rgba(255, 255, 255, 0.85);
}
#footer a:hover,
.footer a:hover {
    color: #fff;
}

/* ---------- Homepage / login surfaces ---------- */
.btn-spotlight,
.spotlight {
    border-radius: var(--rounding-lg);
}
.announcement-single,
.home-tile {
    border-radius: var(--rounding-lg);
    box-shadow: var(--shadow-sm);
}

/* ---------- Outline buttons (brand navy) ---------- */
.btn-outline-primary {
    color: var(--brand-navy);
    border-color: var(--brand-navy);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}

/* ---------- Client area dashboard tiles (modernized) ---------- */
.tiles .row {
    gap: 16px 0;
}
.tiles .tile {
    background-color: var(--bg);
    border: 1px solid var(--border-muted);
    border-right: 1px solid var(--border-muted);
    border-radius: var(--rounding-lg);
    box-shadow: var(--shadow-sm);
    margin: 0 8px;
    overflow: hidden;
}
.tiles .tile:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.tiles .tile .title {
    color: var(--text-lifted);
    font-weight: 600;
}
.tiles .tile .highlight {
    height: 4px;
    border-radius: 999px;
}

/* ---------- Homepage pricing / action cards ---------- */
.card-columns.home .card,
.action-icon-btns .card-accent-teal,
.action-icon-btns [class*="card-accent"] {
    border-radius: var(--rounding-lg);
    transition: transform .18s ease, box-shadow .18s ease;
}
.card-columns.home .card:hover,
.action-icon-btns a:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ---------- Login card lift ---------- */
.login-form .card {
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-muted);
}

/* ---------- Misc carry-over from legacy brand ---------- */
.invoice-container .invoice-header img {
    max-width: 50%;
}
.tab-content > .tab-pane.fade {
    opacity: 1;
}