/* =========================================================================
   Modern SaaS skin — PRESENTATION ONLY, fully scoped under `.np-modern`.
   - Zero HTML/JS/selector changes; only restyles existing markup.
   - Applied via a body class from layouts/admin.blade.php + auth/home/error
     views, on every page EXCEPT admin/basic-detail/add (that route never gets
     `.np-modern`, so the CT-design wizard renders exactly as before).
   - Remove the <link>s + body classes to fully revert.

   >>> PALETTE: change the 6 vars below to re-theme the ENTIRE app. Presets:
       Indigo/Violet (default): primary #6366f1  d #4f46e5  l #8b5cf6  rgb 99,102,241   side #1e1b4b→#312e81
       Ocean Blue:              primary #2563eb  d #1d4ed8  l #38bdf8  rgb 37,99,235     side #0b1f3a→#12327a
       Emerald:                 primary #10b981  d #059669  l #34d399  rgb 16,185,129    side #062e27→#0b4f42
       Sunset:                  primary #f43f5e  d #e11d48  l #fb7185  rgb 244,63,94      side #2a1020→#4a1a34
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

.np-modern {
    --np-primary:   #6366f1;
    --np-primary-d: #4f46e5;
    --np-primary-l: #8b5cf6;
    --np-primary-rgb: 99, 102, 241;
    --np-side-a:    #312e81;
    --np-side-b:    #5b21b6;

    --np-grad:  linear-gradient(135deg, var(--np-primary) 0%, var(--np-primary-l) 100%);
    /* Vibrant, eye-pleasing diagonal indigo → blue-violet → violet */
    --np-side:  linear-gradient(165deg, #312e81 0%, #4338ca 46%, #5b21b6 100%);

    --np-bg:        #eef1f8;
    --np-surface:   #ffffff;
    --np-border:    #e7e9f2;
    --np-text:      #1e2333;
    --np-muted:     #7b83a0;
    --np-radius:    16px;
    --np-shadow:    0 1px 3px rgba(20,24,50,.03), 0 14px 34px rgba(20,24,50,.07);
    --np-shadow-lg: 0 22px 48px rgba(20,24,50,.13);
    --np-shadow-sm: 0 1px 3px rgba(20,24,50,.08);
    --np-font:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --np-head:      'Poppins', var(--np-font);
}

/* ---- Base / canvas ---- */
body.np-modern,
.np-modern .pcoded-main-container,
.np-modern .pcoded-content,
.np-modern .main-body,
.np-modern .page-wrapper {
    background-color: var(--np-bg);
    background-image:
        radial-gradient(920px 520px at 100% -5%, rgba(var(--np-primary-rgb), .08), transparent 60%),
        radial-gradient(760px 520px at -5% 105%, rgba(var(--np-primary-rgb), .06), transparent 55%);
    background-attachment: fixed;
    color: var(--np-text);
    font-family: var(--np-font);
    -webkit-font-smoothing: antialiased;
}
.np-modern .page-body { padding: 28px 32px; animation: npFade .4s ease both; }
.np-modern h1,.np-modern h2,.np-modern h3,.np-modern h4,.np-modern h5,
.np-modern .sub-title,.np-modern .page-header-title h4 {
    font-family: var(--np-head); font-weight: 700; color: var(--np-text); letter-spacing: .2px;
}
.np-modern a { color: var(--np-primary); transition: color .15s ease; }
.np-modern a:hover { color: var(--np-primary-d); }
@keyframes npFade { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
@keyframes npPop  { from { opacity:0; transform: translateY(18px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes npGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ---- Cards ---- */
.np-modern .card {
    background: var(--np-surface);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius);
    box-shadow: var(--np-shadow);
    margin-bottom: 24px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.np-modern .card:hover { transform: translateY(-2px); box-shadow: var(--np-shadow-lg); }
.np-modern .card .card-header { background: transparent; border-bottom: 1px solid var(--np-border); padding: 18px 24px; }
.np-modern .card .card-header h5 { font-family: var(--np-head); font-size: 15px; font-weight: 700; margin: 0; }
.np-modern .card .card-header::before {
    content: ""; display: inline-block; width: 4px; height: 16px;
    background: var(--np-grad); border-radius: 3px; margin-right: 10px; vertical-align: -2px;
}
.np-modern .card .card-block, .np-modern .card .card-body { padding: 24px; }

/* ---- Buttons ---- */
.np-modern .btn { border-radius: 9px; font-weight: 600; letter-spacing: .3px; padding: 9px 18px; border: none;
    transition: transform .06s ease, box-shadow .18s ease, filter .18s ease; }
.np-modern .btn:hover { transform: translateY(-1px); }
.np-modern .btn:active { transform: translateY(0); }
.np-modern .btn-primary, .np-modern .btn-grd-primary, .np-modern .btn-out.btn-primary, .np-modern .btn-success {
    background: var(--np-grad); color: #fff; box-shadow: 0 6px 16px rgba(var(--np-primary-rgb), .32);
}
.np-modern .btn-primary:hover, .np-modern .btn-grd-primary:hover, .np-modern .btn-out.btn-primary:hover, .np-modern .btn-success:hover {
    filter: brightness(1.06); box-shadow: 0 10px 24px rgba(var(--np-primary-rgb), .42);
}
.np-modern .btn-danger { background: linear-gradient(135deg,#f0616b,#d63a49); color:#fff; box-shadow:0 6px 16px rgba(214,58,73,.26); }
.np-modern .btn-square { border-radius: 9px; }

/* ---- Tables ---- */
.np-modern .table { background: var(--np-surface); border-radius: var(--np-radius); overflow: hidden; border-collapse: separate; border-spacing: 0; }
.np-modern .table thead th {
    background: #f1f2fb; color: var(--np-muted); text-transform: uppercase; font-size: 11px;
    letter-spacing: .5px; font-weight: 700; border: none; padding: 13px 16px;
}
.np-modern .table td { padding: 13px 16px; vertical-align: middle; border-top: 1px solid var(--np-border); }
.np-modern .table tbody tr { transition: background .12s ease; }
.np-modern .table tbody tr:hover { background: rgba(var(--np-primary-rgb), .05); }

/* ---- Forms ---- */
.np-modern .form-control, .np-modern select.form-control {
    border: 1px solid var(--np-border); border-radius: 9px; padding: 10px 13px;
    color: var(--np-text); background: #fbfcfe; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.np-modern .form-control:focus { border-color: var(--np-primary); background:#fff; box-shadow: 0 0 0 3px rgba(var(--np-primary-rgb), .18); }
.np-modern label, .np-modern .block { color: var(--np-muted); font-weight: 600; font-size: 12px; letter-spacing: .2px; }

/* ---- Alerts / badges ---- */
.np-modern .alert { border: none; border-left: 4px solid transparent; border-radius: 10px; padding: 14px 18px; box-shadow: var(--np-shadow-sm); animation: npFade .3s ease both; }
.np-modern .alert-success { background: #e7f8f0; border-left-color: #16a06a; color: #0f6a45; }
.np-modern .alert-danger  { background: #fdecec; border-left-color: #e0455a; color: #8f1f2c; }
.np-modern .label, .np-modern .badge { border-radius: 20px; font-weight: 600; padding: 4px 11px; }

/* ---- Modals ---- */
.np-modern .modal-content { border: none; border-radius: 18px; box-shadow: 0 30px 80px rgba(20,24,50,.30); overflow: hidden; }
.np-modern .modal-header  { border-bottom: 1px solid var(--np-border); padding: 18px 24px; }
.np-modern .modal-header h4, .np-modern .modal-title { font-family: var(--np-head); }
.np-modern .modal-body    { padding: 24px; }
.np-modern .modal-footer  { border-top: 1px solid var(--np-border); padding: 15px 24px; }

/* ---- Header ---- */
.np-modern .navbar.header-navbar { box-shadow: 0 2px 18px rgba(20,24,50,.08); }
.np-modern .navbar .navbar-container { background: var(--np-surface); }
.np-modern .navbar .navbar-logo { background: var(--np-grad); }
.np-modern .user-profile img.img-radius { border: 2px solid rgba(var(--np-primary-rgb), .40); }
.np-modern .user-profile span { font-weight: 600; }

/* ---- Sidebar (vibrant gradient, easy on the eyes) ---- */
.np-modern .pcoded-navbar,
.np-modern .pcoded-navbar .pcoded-inner-navbar {
    background:
        radial-gradient(620px 260px at 50% -12%, rgba(255,255,255,.12), transparent 70%),
        var(--np-side) !important;
    box-shadow: 2px 0 22px rgba(49,25,120,.18);
}
.np-modern .pcoded-navbar .pcoded-navigatio-lavel { color: rgba(255,255,255,.5) !important; letter-spacing: 1.6px; font-size: 11px; font-weight: 700; text-transform: uppercase; padding-top: 18px; }
.np-modern .pcoded-navbar .pcoded-item > li > a { color: rgba(255,255,255,.82) !important; border-radius: 10px; border-left: none !important; transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease; }
.np-modern .pcoded-navbar .pcoded-item > li > a .pcoded-micon i { color: rgba(255,255,255,.66) !important; transition: color .18s ease; }
.np-modern .pcoded-navbar .pcoded-item > li:hover > a { background: rgba(255,255,255,.10) !important; color: #fff !important; transform: translateX(2px); }
.np-modern .pcoded-navbar .pcoded-item > li:hover > a .pcoded-micon i { color: #fff !important; }
/* Frosted active pill with a bright accent bar + glow — high contrast on the violet */
.np-modern .pcoded-navbar .pcoded-item > li.active > a {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 #ffffff, 0 8px 22px rgba(0,0,0,.20);
}
.np-modern .pcoded-navbar .pcoded-item > li.active > a .pcoded-micon i,
.np-modern .pcoded-navbar .pcoded-item > li.active > a .pcoded-mtext { color: #fff !important; }

/* ---- Scrollbar ---- */
.np-modern *::-webkit-scrollbar { width: 9px; height: 9px; }
.np-modern *::-webkit-scrollbar-thumb { background: #c6cbe0; border-radius: 8px; }
.np-modern *::-webkit-scrollbar-thumb:hover { background: var(--np-primary); }
.np-modern *::-webkit-scrollbar-track { background: transparent; }

/* ---- Responsive ---- */
@media (max-width: 767px) {
    .np-modern .page-body { padding: 15px; }
    .np-modern .card .card-block, .np-modern .card .card-body { padding: 16px; }
    .np-modern .table-responsive { border: 0; }
}

/* ---- List toolbar (admins/clients) + config CC rows ---- */
.np-modern .np-list-toolbar { gap: 12px; }
.np-modern .np-list-search .form-control { min-width: 240px; }
.np-modern .np-bulk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.np-modern .np-bulk-actions .np-bulk-label { color: var(--np-muted); font-size: 12px; font-weight: 600; margin-right: 2px; }
.np-modern .np-bulk-actions .btn { padding: 7px 14px; }
.np-modern .cc-email-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.np-modern .cc-email-row .cc-email { flex: 1 1 auto; }
.np-modern .cc-email-row .cc-remove { flex: 0 0 auto; line-height: 1; font-size: 18px; padding: 6px 12px; border-radius: 8px; }
.np-modern #cc-add-more { margin-top: 2px; }
@media (max-width: 575px) {
    .np-modern .np-list-toolbar { align-items: stretch; }
    .np-modern .np-bulk-actions { justify-content: flex-end; }
}

/* =========================================================================
   AUTH PAGES (login / forgot / reset / register)
   ========================================================================= */
.np-modern .login-block {
    position: relative;
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: linear-gradient(-45deg, var(--np-primary-d), var(--np-primary), var(--np-primary-l), var(--np-side-b));
    background-size: 400% 400%; animation: npGradient 16s ease infinite;
    overflow: hidden;
}
/* Electrical/transformer motif overlay (pylons, power lines, circuits) — self-contained SVG. */
.np-modern .login-block::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: url('/assets/images/login-electric-bg.svg') center center / cover no-repeat;
    opacity: .55; pointer-events: none;
}
.np-modern .login-block .container { position: relative; z-index: 1; max-width: 430px; }
.np-modern .login-block .text-center img { max-width: 165px; margin-bottom: 22px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.28)); }
.np-modern .auth-box.card { border: none; border-radius: 18px; box-shadow: 0 28px 70px rgba(15,20,60,.42); margin: 0; animation: npPop .45s cubic-bezier(.2,.8,.25,1) both; }
.np-modern .auth-box:hover { transform: none; }
.np-modern .auth-box .card-block { padding: 36px 32px; }
.np-modern .login-block h3 { font-family: var(--np-head); font-weight: 800; color: var(--np-text); margin-bottom: 4px; }
.np-modern .login-block .form-primary { margin-bottom: 18px; }
.np-modern .login-block .form-bar { display: none; }
.np-modern .login-block .form-control { border: 1px solid var(--np-border); border-radius: 10px; padding: 12px 15px; background: #fbfcfe; color: var(--np-text); height: auto; }
.np-modern .login-block .form-control:focus { border-color: var(--np-primary); background:#fff; box-shadow: 0 0 0 3px rgba(var(--np-primary-rgb), .18); }
.np-modern .login-block .btn-block { background: var(--np-grad); color: #fff; border-radius: 10px; padding: 13px; font-weight: 700; letter-spacing: .6px; box-shadow: 0 8px 20px rgba(var(--np-primary-rgb), .40); }
.np-modern .login-block .btn-block:hover { filter: brightness(1.06); transform: translateY(-1px); }
.np-modern .login-block .alert { text-align: left; }
.np-modern .login-block a { color: var(--np-primary); font-weight: 600; }

/* =========================================================================
   PUBLIC HOME / WELCOME PAGE
   ========================================================================= */
body.np-modern { min-height: 100vh; }
.np-modern #home { padding: 40px 16px 0; }
.np-modern #home .home_page_logo { max-width: 340px; margin-top: 2%; filter: drop-shadow(0 10px 24px rgba(var(--np-primary-rgb), .14)); }
.np-modern #home .welcome-text { margin-top: 34px !important; }
.np-modern #home .welcome-text [class*="fa-play"] { color: var(--np-primary) !important; display: inline-block; transition: transform .15s ease, color .15s ease; }
.np-modern #home .welcome-text [class*="fa-play"]:hover { transform: scale(1.08); color: var(--np-primary-d) !important; }
.np-modern #home .welcome-text a {
    display: inline-block; margin-top: 18px; padding: 12px 34px; background: var(--np-grad); color: #fff !important;
    font-family: var(--np-head); font-weight: 700; font-size: 16px !important; letter-spacing: .6px; text-transform: uppercase;
    border-radius: 40px; text-decoration: none !important; box-shadow: 0 10px 24px rgba(var(--np-primary-rgb), .34);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.np-modern #home .welcome-text a u, .np-modern #home .welcome-text a b { text-decoration: none !important; font-weight: 700; }
.np-modern #home .welcome-text a:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 30px rgba(var(--np-primary-rgb), .5); }
.np-modern .footer { margin-top: 48px; padding: 24px 0 30px; }
.np-modern .footer a { color: var(--np-muted) !important; font-weight: 600; margin: 0 8px; transition: color .15s ease; }
.np-modern .footer a:hover { color: var(--np-primary) !important; }
.np-modern .footer small { color: var(--np-muted); display: inline-block; margin-top: 8px; }

/* =========================================================================
   ERROR PAGES
   ========================================================================= */
.np-modern .np-error {
    position: relative; overflow: hidden;
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center;
    background: linear-gradient(-45deg, var(--np-primary-d), var(--np-primary), var(--np-primary-l), var(--np-side-b));
    background-size: 400% 400%; animation: npGradient 16s ease infinite;
}
/* Same electrical/transformer motif as the login page. */
.np-modern .np-error::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: url('/assets/images/login-electric-bg.svg') center center / cover no-repeat;
    opacity: .55; pointer-events: none;
}
.np-modern .np-error .np-error-card { position: relative; z-index: 1; background: #fff; border-radius: 20px; box-shadow: 0 28px 70px rgba(15,20,60,.42); padding: 48px 44px; max-width: 480px; width: 100%; animation: npPop .45s cubic-bezier(.2,.8,.25,1) both; }
.np-modern .np-error .np-code { font-family: var(--np-head); font-weight: 800; font-size: 84px; line-height: 1; background: var(--np-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
.np-modern .np-error h2 { font-family: var(--np-head); font-weight: 700; color: var(--np-text); margin: 0 0 10px; }
.np-modern .np-error p { color: var(--np-muted); margin-bottom: 26px; }
.np-modern .np-error .btn { display: inline-block; background: var(--np-grad); color: #fff; padding: 12px 30px; border-radius: 40px; font-family: var(--np-head); font-weight: 700; letter-spacing: .5px; text-decoration: none; box-shadow: 0 10px 24px rgba(var(--np-primary-rgb), .34); transition: transform .15s ease, filter .15s ease; }
.np-modern .np-error .btn:hover { transform: translateY(-2px); filter: brightness(1.06); }