/* =========================================
   THEME PURPLE (PRIMARY: #974377)
   Load paling terakhir
   ========================================= */

   :root{
    /* PRIMARY BRAND */
    /* --primary:#974377;   */
    --primary:#431c51;
    --primary-600:#82345f;
    --primary-700:#6c294e;
  
    /* SOFT & EFFECT */
    --primary-soft: rgba(151,67,119,.12);
    --primary-ring: rgba(151,67,119,.32);
  
    /* NEUTRAL */
    --text:#1f1f1f;
    --muted:#7B7690;
    --border: rgba(151,67,119,.18);
  }
  
  /* Base background */
  body{ background:#F6F5FB; }
  
  /* Listview active */
  .listview .item.active,
  .listview .item:active{
    background: rgba(151,67,119,.10);
  }
  
  /* Fix typo class (punyamu: .bg-purle) */
  .bg-purple,
  .bg-purle{ background-color: var(--primary) !important; }
  
  a.bg-purple:hover, a.bg-purple:focus,
  button.bg-purple:hover, button.bg-purple:focus,
  a.bg-purle:hover, a.bg-purle:focus,
  button.bg-purle:hover, button.bg-purle:focus{
    background-color: var(--primary-600) !important;
  }
  
  /* Bootstrap-ish overrides: primary jadi purple */
  .text-primary{ color: var(--primary) !important; }
  .bg-primary{ background-color: var(--primary) !important; }
  .border-primary{ border-color: var(--primary) !important; }
  
  /* Button primary */
  .btn-primary{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color:#fff !important;
  }
  .btn-primary:hover{
    background-color: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
  }
  .btn-primary:active,
  .btn-primary.active{
    background-color: var(--primary-700) !important;
    border-color: var(--primary-700) !important;
  }
  .btn-primary:focus,
  .btn-primary.focus{
    box-shadow: 0 0 0 .2rem var(--primary-ring) !important;
  }
  .btn-primary.disabled,
  .btn-primary:disabled{
    background-color: rgba(151,67,119,.55) !important;
    border-color: rgba(151,67,119,.55) !important;
  }
  
  /* Button outline primary */
  .btn-outline-primary{
    color: var(--primary) !important;
    border-color: var(--primary) !important;
  }
  .btn-outline-primary:hover,
  .btn-outline-primary:active{
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color:#fff !important;
  }
  .btn-outline-primary:focus{
    box-shadow: 0 0 0 .2rem rgba(151,67,119,.22) !important;
  }
  .btn-outline-primary.disabled,
  .btn-outline-primary:disabled{
    color: rgba(151,67,119,.55) !important;
    border-color: rgba(151,67,119,.35) !important;
  }
  
  /* Links (gunakan class khusus, tidak global a{}) */
  .link-primary{ color: var(--primary) !important; }
  .link-primary:hover{ color: var(--primary-600) !important; }
  
  /* Focus input/select biar konsisten */
  .form-control:focus,
  .custom-select:focus,
  .form-select:focus{
    border-color: rgba(151,67,119,.55) !important;
    box-shadow: 0 0 0 .2rem rgba(151,67,119,.18) !important;
  }
  
  /* Badge / Alert */
  .badge-primary{ background-color: var(--primary) !important; }
  .alert-primary{
    color:#4a1a34 !important;
    background-color: var(--primary-soft) !important;
    border-color: rgba(151,67,119,.20) !important;
  }
  
  /* Pagination / Dropdown / Nav active */
  .page-item.active .page-link{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
  }
  .page-link{ color: var(--primary) !important; }
  .page-link:focus{ box-shadow: 0 0 0 .2rem rgba(151,67,119,.18) !important; }
  
  .dropdown-item.active,
  .dropdown-item:active{
    background-color: var(--primary) !important;
  }
  
  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link{
    background-color: var(--primary) !important;
  }
  
  .nav-tabs .nav-link.active{
    color: var(--primary) !important;
    border-color: var(--border) var(--border) #fff !important;
  }
  
  /* =========================
     Header Purple
     ========================= */
  .appHeader-purple{
    background: linear-gradient(135deg, var(--primary), #b55a8f) !important;
    color:#fff !important;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    /* box-shadow: 0 10px 24px rgba(151,67,119,.18); */
  }
  
  /* icon header ikut putih (stroke + fill) */
  .appHeader-purple .headerButton svg *{
    stroke: #fff !important;
    fill: none !important;
  }
  .appHeader-purple .headerButton svg [fill]:not([fill="none"]){
    fill: #fff !important;
  }
  
  .appHeader-purple .pageTitle h3{
    color:#fff !important;
    font-weight: 700;
    letter-spacing:.3px;
  }
  
  /* Badge notif header */
  .appHeader-purple .badge{
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
  }
  
  /* =========================
     Bottom Menu Purple
     ========================= */
  .appBottomMenu{
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(151,67,119,.08);
  }
  
  .appBottomMenu .item{ color: var(--muted); }
  .appBottomMenu .item .icon,
  .appBottomMenu .item ion-icon,
  .appBottomMenu .item strong{ color: inherit !important; }
  
  .appBottomMenu .item.active{ color: var(--primary) !important; }
  .appBottomMenu .item.active:before{ background: var(--primary) !important; }
  
  .appBottomMenu .item:hover{ color: var(--primary-600); }
  
  /* =========================
     Sidebar Icon Purple
     ========================= */
  .icon-box{
    background: rgba(151,67,119,.12) !important;
    border: 1px solid rgba(151,67,119,.18);
  }
  .icon-box svg *{
    stroke: var(--primary) !important;
  }
  
  /* Card polish */
  .card, .card-ui{
    border-radius: 16px;
    border: 1px solid rgba(151,67,119,.14) !important;
    box-shadow: 0 10px 24px rgba(151,67,119,.08);
  }
  
  /* Menu tile (jika dipakai) */
  .menu-tile{
    background: rgba(151,67,119,.10);
    border: 1px solid rgba(151,67,119,.14);
    border-radius: 16px;
  }
  .menu-tile:hover{
    background: rgba(151,67,119,.14);
  }
  
  /* Badge danger (accent) */
  .badge-danger{
    background: #FF4D8D !important;
  }
  
  /* =========================
     HOME MENU GRID
     ========================= */
  .menu-grid .menu-item{
    background: rgba(151,67,119,.08);
    border: 1px solid rgba(151,67,119,.14);
    border-radius: 16px;
    padding: 14px 8px;
    transition: .15s ease;
  }
  
  .menu-grid .menu-item:hover{
    background: rgba(151,67,119,.14);
  }
  
  .menu-grid .menu-item svg{
    color: var(--primary);
  }
  
  .menu-grid .menu-item strong{
    color:#2b2b2b;
    font-weight:600;
  }
  
  /* =========================
     TOMBOL PRESENSI
     ========================= */
  .btn-presensi-masuk{
    background: var(--primary);
    color:#fff;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(151,67,119,.28);
  }
  
  .btn-presensi-pulang{
    background: rgba(151,67,119,.16);
    color: var(--primary);
    border: 1px solid rgba(151,67,119,.22);
    border-radius: 16px;
  }
  
  /* =========================
     HOME - WALLET FOOTER MENU
     ========================= */
  .wallet-footer .icon-wrapper{
    background: rgba(151,67,119,.10) !important;
    border: 1px solid rgba(151,67,119,.14);
    border-radius: 16px;
    width: 46px;
    height: 46px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin: 0 auto 6px auto;
    color: var(--primary);
  }
  
  .wallet-footer .icon-wrapper svg{
    width: 24px;
    height: 24px;
  }
  
  .wallet-footer .icon-wrapper svg *{
    stroke: currentColor !important;
  }
  .wallet-footer .icon-wrapper svg [fill]:not([fill="none"]){
    fill: currentColor !important;
  }
  
  .wallet-footer .item strong{
    color:#2b2b2b;
    font-weight:600;
    font-size:12px;
  }
  
  .wallet-footer .item a:hover .icon-wrapper{
    background: rgba(151,67,119,.14) !important;
  }
  
  /* FIX: pastikan icon tidak ikut jadi putih dari rule lain */
  .wallet-footer .item,
  .wallet-footer .item a,
  .wallet-footer .item .icon-wrapper{
    color: var(--primary) !important;
    opacity: 1 !important;
  }
  
  /* =========================
     STAT BOX (Presensi & Penjualan)
     ========================= */
  .stat-box{
    border-radius: 16px;
    border: 1px solid rgba(151,67,119,.14);
    box-shadow: 0 10px 22px rgba(151,67,119,.07);
  }
  
  .stat-box.stat-primary{
    background: var(--primary) !important;
    border-color: var(--primary) !important;
  }
  
  .stat-box.stat-soft{
    background: rgba(151,67,119,.14) !important;
    border-color: rgba(151,67,119,.20) !important;
  }
  .stat-box.stat-soft .title,
  .stat-box.stat-soft .value{
    color: var(--primary) !important;
  }
  
  /* value ungu untuk angka */
  .text-value{
    color: var(--primary) !important;
    font-weight:700;
  }
  
  /* section title */
  .section-title{
    font-weight:700;
  }
  .section-title:before{
    content:'';
    display:inline-block;
    width:4px;
    height:16px;
    border-radius: 99px;
    background: var(--primary);
    margin-right:8px;
    vertical-align: -2px;
  }
  
  /* =========================
     MINI STAT (load-home)
     ========================= */
  .stat-mini{
    display:block;
    text-decoration:none;
  }
  
  .stat-mini .detail{
    display:flex;
    gap:10px;
    align-items:center;
    padding: 14px 12px;
    background:#fff;
    border-radius: 16px;
    border: 1px solid rgba(151,67,119,.14);
    box-shadow: 0 10px 22px rgba(151,67,119,.07);
  }
  
  .stat-mini strong{
    display:block;
    font-weight:700;
    color: var(--text);
    line-height: 1.1;
  }
  
  .stat-mini p{
    margin: 2px 0 0 0;
    color: var(--muted);
    font-size: 12px;
  }
  
  .icon-block{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex: 0 0 44px;
    color: var(--primary);
    background: rgba(151,67,119,.10);
    border: 1px solid rgba(151,67,119,.14);
  }
  
  .icon-block svg{
    width: 22px;
    height: 22px;
  }
  
  .status-primary{
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
  }
  
  .status-soft{
    color: var(--primary);
    background: rgba(151,67,119,.12);
    border-color: rgba(151,67,119,.18);
  }
  
  /* accent untuk terlambat */
  .status-accent{
    color: #fff;
    background: #FF4D8D;
    border-color: #FF4D8D;
  }
  
  /* =========================
     ABSENT (KAMERA) - PURPLE UI
     ========================= */
  .camera-purple{
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(151,67,119,.18);
    box-shadow: 0 12px 28px rgba(151,67,119,.18);
    background: #0f0f16;
  }
  
  .camera-purple .webcam-capture{
    width: 100%;
    min-height: 360px;
  }
  
  .camera-purple .camera-overlay{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.15) 40%,
      rgba(0,0,0,0) 65%
    );
  }
  
  .camera-purple #address,
  .camera-purple #latitude{
    display:block;
    font-size: 12px;
    line-height: 1.25;
    opacity: .95;
  }
  
  .camera-purple .camera-overlay a.btn{
    pointer-events: auto;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(151,67,119,.26);
    color: #fff;
    border-radius: 12px;
    backdrop-filter: blur(8px);
  }
  
  .camera-purple .camera-overlay a.btn:hover{
    background: rgba(151,67,119,.34);
  }
  
  .camera-purple .button-overlay{
    position:absolute;
    left:0; right:0;
    bottom: 10px;
    z-index: 4;
    padding: 0 12px;
  }
  
  .btn-absent-action{
    border-radius: 16px !important;
    padding: 14px 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 14px 26px rgba(151,67,119,.28);
  }
  
  .btn-absent-action ion-icon{
    font-size: 20px;
    vertical-align: -3px;
    margin-right: 6px;
  }
  
  .camera-purple video,
  .camera-purple canvas,
  .camera-purple img{
    width: 100% !important;
    height: auto !important;
    display:block;
  }

  /* =========================
   LOGIN PAGE (PRO)
   ========================= */
.login-page{
    min-height: 100vh;
    background:
      radial-gradient(900px 500px at 10% 10%, rgba(151,67,119,.18), transparent 60%),
      radial-gradient(900px 500px at 90% 0%, rgba(151,67,119,.14), transparent 55%),
      #F6F5FB;
  }
  
  .login-wrap{
    min-height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 24px 14px;
  }
  
  .login-card{
    width: 100%;
    max-width: 420px;
    background:#fff;
    border-radius: 20px;
    border: 1px solid rgba(151,67,119,.14);
    box-shadow: 0 18px 40px rgba(151,67,119,.14);
    padding: 22px 18px;
  }
  
  .login-brand{
    display:flex;
    gap:12px;
    align-items:center;
    padding: 6px 6px 14px 6px;
    border-bottom: 1px solid rgba(151,67,119,.10);
    margin-bottom: 16px;
  }
  
  .login-logo{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), #b55a8f);
    /* box-shadow: 0 10px 22px rgba(151,67,119,.24); */
  }
  
  .login-title{
    font-weight: 800;
    letter-spacing: .4px;
    color: var(--text);
    line-height: 1.1;
  }
  
  .login-subtitle{
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
  }
  
  .login-label{
    font-size: 12px;
    font-weight: 700;
    color: #3a3a3a;
    margin-bottom: 6px;
  }
  
  .login-input{
    border-radius: 14px !important;
    border: 1px solid rgba(151,67,119,.18) !important;
    padding: 12px 12px !important;
  }
  
  .login-input:focus{
    border-color: rgba(151,67,119,.55) !important;
    box-shadow: 0 0 0 .2rem rgba(151,67,119,.18) !important;
  }
  
  .login-password{
    position: relative;
  }
  
  .login-eye{
    position:absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    color: rgba(151,67,119,.85);
    padding: 6px;
    border-radius: 10px;
  }
  
  .login-eye:hover{
    background: rgba(151,67,119,.10);
  }

  .login-eye{
    -webkit-tap-highlight-color: transparent;
  }
  
  .login-row{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
  }
  
  .login-remember{
    font-size: 12px;
    color: var(--muted);
  }
  
  .login-link{
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
  }
  .login-link:hover{
    color: var(--primary-600);
    text-decoration: underline;
  }
  
  .login-btn{
    border-radius: 16px !important;
    padding: 12px 14px !important;
    font-weight: 800 !important;
    box-shadow: 0 16px 28px rgba(151,67,119,.22);
  }
  
  .login-footer{
    text-align:center;
    color: var(--muted);
  }
  

  /* =========================================================
   Sales Create - Purple Professional UI
   (UI only, no logic)
========================================================= */

.page-sales-create {
    --p-900: #2b135f;
    --p-800: #3b1a7a;
    --p-700: #4b229a;
    --p-600: #5b2bd6;
    --p-500: #6d39ff;
    --p-200: #efe9ff;
    --ink: #14121a;
    --muted: #6b6680;
    --card: #ffffff;
    --line: rgba(20, 18, 26, 0.08);
    --shadow: 0 10px 30px rgba(20, 18, 26, 0.08);
    --radius: 16px;
  }
  
  .page-sales-create .card-elevated {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  
  .page-sales-create .card-body-lg {
    padding: 18px;
  }
  
  @media (min-width: 992px) {
    .page-sales-create .card-body-lg {
      padding: 22px 24px;
    }
  }
  
  /* Header */
  .page-sales-create .page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 14px;
  }
  
  .page-sales-create .page-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: var(--ink);
    margin: 0;
  }
  
  .page-sales-create .page-subtitle {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 4px;
  }
  
  /* Form elements */
  .page-sales-create label {
    font-weight: 650;
    font-size: 12.5px;
    color: var(--ink);
    margin-bottom: 6px;
  }
  
  .page-sales-create .form-control,
  .page-sales-create .form-select,
  .page-sales-create select.form-control {
    border-radius: 12px;
    border: 1px solid var(--line);
    padding: 10px 12px;
    min-height: 42px;
    box-shadow: none;
  }
  
  .page-sales-create .form-control:focus,
  .page-sales-create .form-select:focus,
  .page-sales-create select.form-control:focus {
    border-color: rgba(109, 57, 255, 0.55);
    box-shadow: 0 0 0 4px rgba(109, 57, 255, 0.12);
  }
  
  /* Buttons (purple branding) */
  .page-sales-create .btn-primary {
    background: linear-gradient(135deg, var(--p-600), var(--p-500));
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 18px rgba(91, 43, 214, 0.18);
  }
  
  .page-sales-create .btn-primary:hover {
    filter: brightness(0.98);
  }
  
  .page-sales-create .btn-strong {
    font-weight: 750;
  }
  
  .page-sales-create .btn-soft {
    border-radius: 12px;
    border: 1px solid rgba(109, 57, 255, 0.35);
    color: var(--p-700);
    background: rgba(109, 57, 255, 0.08);
    font-weight: 650;
  }
  
  .page-sales-create .btn-success {
    border-radius: 12px;
    font-weight: 750;
  }
  
  /* Action bar */
  .page-sales-create .action-bar {
    display: flex;
    gap: 10px;
    margin: 8px 0 10px;
  }
  
  .page-sales-create .action-bar .btn {
    flex: 1;
    padding: 10px 12px;
  }
  
  /* Sticky on mobile */
  @media (max-width: 576px) {
    .page-sales-create .action-bar {
      position: sticky;
      bottom: 10px;
      z-index: 10;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 10px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);
    }
  }
  
  /* Table */
  .page-sales-create #itemsTable {
    border-collapse: separate;
    border-spacing: 0 10px;
  }
  
  .page-sales-create #itemsTable thead th {
    font-size: 12px;
    color: var(--muted);
    font-weight: 750;
    border: none;
  }
  
  .page-sales-create #itemsTable tbody tr {
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(20, 18, 26, 0.05);
  }
  
  .page-sales-create #itemsTable tbody td {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    padding: 12px 12px;
  }
  
  .page-sales-create #itemsTable tbody td:first-child {
    border-left: 1px solid var(--line);
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
  }
  
  .page-sales-create #itemsTable tbody td:last-child {
    border-right: 1px solid var(--line);
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
  }
  
  /* Mobile table -> stacked cards using data-label */
  @media (max-width: 768px) {
    .page-sales-create #itemsTable thead {
      display: none;
    }
    .page-sales-create #itemsTable,
    .page-sales-create #itemsTable tbody,
    .page-sales-create #itemsTable tr,
    .page-sales-create #itemsTable td {
      display: block;
      width: 100%;
    }
    .page-sales-create #itemsTable tbody tr {
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 10px;
    }
    .page-sales-create #itemsTable tbody td {
      border: none;
      border-bottom: 1px solid var(--line);
      padding: 10px 12px;
    }
    .page-sales-create #itemsTable tbody td::before {
      content: attr(data-label);
      display: block;
      font-size: 11px;
      font-weight: 750;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .page-sales-create #itemsTable tbody td:last-child {
      border-bottom: none;
    }
  }
  
  /* Select2 (match purple) */
  .page-sales-create .select2-container .select2-selection--single,
  .page-sales-create .select2-container .select2-selection--multiple {
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    min-height: 42px;
    padding: 6px 8px;
  }
  
  .page-sales-create .select2-container--default.select2-container--focus
  .select2-selection--multiple {
    border-color: rgba(109, 57, 255, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(109, 57, 255, 0.12) !important;
  }
  
  .page-sales-create .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(109, 57, 255, 0.14) !important;
    color: var(--ink) !important;
  }
  
  .page-sales-create .select2-container--default .select2-selection__choice {
    border: 1px solid rgba(109, 57, 255, 0.25) !important;
    background: rgba(109, 57, 255, 0.10) !important;
    border-radius: 999px !important;
  }
  
  /* Modal polish */
  .page-sales-create .modal-content {
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  
  .page-sales-create .modal-header {
    border-bottom: 1px solid var(--line);
  }
  
  .page-sales-create .modal-footer {
    border-top: 1px solid var(--line);
  }
  
  /* Small helper text */
  .page-sales-create .text-muted.small {
    color: var(--muted) !important;
  }
  

  .card .form-label { font-size: 12px; opacity: .85; }
  .input-group-text { background: transparent; }
  .btn ion-icon { margin-right: 6px; vertical-align: -2px; }

  .btn-filter-icon{
    width: 44px;
    height: 44px;
    padding: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 12px;
  }
  .btn-filter-icon ion-icon{
    font-size: 22px;
  }