/* =========================================================================
   VYOM ERP — DESIGN SYSTEM
   Premium Indian Shop + Retail POS + Inventory + GST + Accounting + CRM ERP
   ========================================================================= */

:root{
  /* ---- Brand palette (deep indigo + muted gold premium accent) ---- */
  --v-primary:        #1B1F3B;
  --v-primary-dark:   #11142B;
  --v-primary-light:  #2E3566;
  --v-primary-50:     #EEF0F8;
  --v-primary-100:    #DCDFF0;
  --v-accent:         #B6862C;   /* muted premium gold */
  --v-accent-light:   #F4E9D1;

  /* ---- Functional colors ---- */
  --v-success:        #1E8E5A;
  --v-success-bg:     #E7F6EE;
  --v-warning:        #C77D19;
  --v-warning-bg:     #FBF0DE;
  --v-danger:         #C0392B;
  --v-danger-bg:      #FBEAE8;
  --v-info:           #2464C9;
  --v-info-bg:        #E8F0FC;

  /* ---- Neutrals / surfaces ---- */
  --v-bg:             #F4F5F9;
  --v-surface:        #FFFFFF;
  --v-surface-alt:    #FAFBFD;
  --v-border:         #E4E6EF;
  --v-border-strong:  #D3D6E2;
  --v-text:           #1B1E2B;
  --v-text-muted:     #6B7186;
  --v-text-soft:      #9498AA;

  /* ---- Radius / shadow / spacing ---- */
  --v-radius-sm: 6px;
  --v-radius: 10px;
  --v-radius-lg: 16px;
  --v-shadow-sm: 0 1px 2px rgba(20,22,45,.05);
  --v-shadow: 0 2px 10px rgba(20,22,45,.06);
  --v-shadow-lg: 0 12px 28px rgba(20,22,45,.10);
  --v-space-1: 4px;
  --v-space-2: 8px;
  --v-space-3: 12px;
  --v-space-4: 16px;
  --v-space-5: 24px;
  --v-space-6: 32px;

  --v-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --v-sidebar-w: 264px;
  --v-sidebar-w-mini: 78px;
  --v-header-h: 64px;
  --v-transition: .18s ease;
}

[data-theme="dark"]{
  --v-bg:             #0F1120;
  --v-surface:        #171A2C;
  --v-surface-alt:    #1D2036;
  --v-border:         #2A2E47;
  --v-border-strong:  #383D5C;
  --v-text:           #EDEEF5;
  --v-text-muted:     #A4A8C0;
  --v-text-soft:      #757A96;
  --v-primary-50:     #1C2040;
  --v-primary-100:    #232852;
  --v-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --v-shadow: 0 2px 10px rgba(0,0,0,.35);
  --v-shadow-lg: 0 12px 28px rgba(0,0,0,.45);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--v-font);
  background:var(--v-bg);
  color:var(--v-text);
  font-size:14.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--v-primary-light);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}
::selection{background:var(--v-primary-100);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ---------------------------- Typography -------------------------------- */
h1,h2,h3,h4,h5,h6{font-weight:700;color:var(--v-text);margin:0;letter-spacing:-.01em;}
h1{font-size:26px;}
h2{font-size:21px;}
h3{font-size:17px;}
h4{font-size:15px;}
.text-muted-v{color:var(--v-text-muted) !important;}
.text-soft-v{color:var(--v-text-soft) !important;}
.caption{font-size:12px;color:var(--v-text-muted);}
.label-v{font-size:12px;font-weight:600;color:var(--v-text-muted);text-transform:uppercase;letter-spacing:.04em;}
.fw-600{font-weight:600;}
.fw-700{font-weight:700;}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}

/* ------------------------------ Buttons --------------------------------- */
.btn{border-radius:var(--v-radius-sm);font-weight:600;font-size:13.5px;padding:8px 16px;border:1px solid transparent;transition:var(--v-transition);}
.btn:focus{box-shadow:0 0 0 3px var(--v-primary-100);}
.btn-lg{padding:11px 22px;font-size:15px;border-radius:var(--v-radius-sm);}
.btn-sm{padding:5px 11px;font-size:12.5px;}
.btn-primary{background:var(--v-primary);border-color:var(--v-primary);color:#fff;}
.btn-primary:hover{background:var(--v-primary-dark);border-color:var(--v-primary-dark);color:#fff;}
.btn-outline-primary{color:var(--v-primary);border-color:var(--v-border-strong);background:var(--v-surface);}
.btn-outline-primary:hover{background:var(--v-primary-50);color:var(--v-primary);border-color:var(--v-primary-light);}
.btn-accent{background:var(--v-accent);border-color:var(--v-accent);color:#fff;}
.btn-accent:hover{background:#9c7223;border-color:#9c7223;color:#fff;}
.btn-success{background:var(--v-success);border-color:var(--v-success);}
.btn-danger{background:var(--v-danger);border-color:var(--v-danger);}
.btn-light-v{background:var(--v-surface-alt);border-color:var(--v-border);color:var(--v-text);}
.btn-light-v:hover{background:var(--v-primary-50);}
.btn-icon{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:var(--v-radius-sm);}
.btn-pill{border-radius:999px;}

/* ------------------------------- Cards ---------------------------------- */
.app-card{
  background:var(--v-surface);
  border:1px solid var(--v-border);
  border-radius:var(--v-radius-lg);
  box-shadow:var(--v-shadow-sm);
}
.app-card .app-card-header{
  padding:16px 20px;border-bottom:1px solid var(--v-border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.app-card .app-card-header h3{font-size:15.5px;}
.app-card .app-card-body{padding:20px;}
.app-card .app-card-footer{padding:14px 20px;border-top:1px solid var(--v-border);}

.stat-card{
  background:var(--v-surface);border:1px solid var(--v-border);border-radius:var(--v-radius-lg);
  padding:18px 20px;box-shadow:var(--v-shadow-sm);position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;min-height:118px;
}
.stat-card .stat-icon{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:17px;flex-shrink:0;
}
.stat-card .stat-value{font-size:22px;font-weight:700;letter-spacing:-.01em;}
.stat-card .stat-label{font-size:12.5px;color:var(--v-text-muted);font-weight:600;}
.stat-card .stat-trend{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:3px;}
.stat-trend.up{color:var(--v-success);}
.stat-trend.down{color:var(--v-danger);}
.stat-card .stat-top{display:flex;align-items:flex-start;justify-content:space-between;}

.data-card{background:var(--v-surface);border:1px solid var(--v-border);border-radius:var(--v-radius);padding:16px;box-shadow:var(--v-shadow-sm);}

/* ---------------------------- Page structure ---------------------------- */
.page-header{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:20px;
}
.page-header .breadcrumb-v{font-size:12.5px;color:var(--v-text-soft);margin-bottom:4px;display:flex;gap:6px;align-items:center;}
.page-header .breadcrumb-v a{color:var(--v-text-soft);}
.page-header h1{margin-bottom:2px;}
.page-header .page-sub{color:var(--v-text-muted);font-size:13px;}
.page-actions{display:flex;gap:10px;flex-wrap:wrap;}

.filter-bar{
  background:var(--v-surface);border:1px solid var(--v-border);border-radius:var(--v-radius);
  padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px;
}
.filter-bar .form-control,.filter-bar .form-select{font-size:13.5px;}
.filter-bar-collapsed{display:none;}
@media (max-width:767.98px){
  .filter-bar{padding:12px;}
}

.form-section{border:1px solid var(--v-border);border-radius:var(--v-radius);background:var(--v-surface);margin-bottom:18px;}
.form-section .form-section-head{padding:14px 18px;border-bottom:1px solid var(--v-border);display:flex;align-items:center;justify-content:space-between;}
.form-section .form-section-head h4{display:flex;align-items:center;gap:8px;}
.form-section .form-section-body{padding:18px;}

/* ------------------------------ Forms ------------------------------------ */
.form-label{font-weight:600;font-size:13px;color:var(--v-text);margin-bottom:5px;}
.form-label .req{color:var(--v-danger);}
.form-control,.form-select{
  border:1px solid var(--v-border-strong);border-radius:var(--v-radius-sm);font-size:13.5px;padding:9px 12px;
  background:var(--v-surface);color:var(--v-text);
}
.form-control:focus,.form-select:focus{border-color:var(--v-primary-light);box-shadow:0 0 0 3px var(--v-primary-50);}
.form-control::placeholder{color:var(--v-text-soft);}
.input-group-text{background:var(--v-surface-alt);border-color:var(--v-border-strong);color:var(--v-text-muted);}
.form-hint{font-size:12px;color:var(--v-text-soft);margin-top:4px;}
.form-check-input:checked{background-color:var(--v-primary);border-color:var(--v-primary);}
textarea.form-control{resize:vertical;}

/* ------------------------------- Badges ---------------------------------- */
.status-badge{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:4px 10px;border-radius:999px;letter-spacing:.02em;text-transform:uppercase;line-height:1.4;
}
.status-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.status-badge.success{background:var(--v-success-bg);color:var(--v-success);}
.status-badge.warning{background:var(--v-warning-bg);color:var(--v-warning);}
.status-badge.danger{background:var(--v-danger-bg);color:var(--v-danger);}
.status-badge.info{background:var(--v-info-bg);color:var(--v-info);}
.status-badge.neutral{background:var(--v-surface-alt);color:var(--v-text-muted);border:1px solid var(--v-border);}
.status-badge.accent{background:var(--v-accent-light);color:var(--v-accent);}

/* ------------------------------- Alerts ---------------------------------- */
.alert-v{border-radius:var(--v-radius);padding:12px 16px;font-size:13.5px;border:1px solid transparent;display:flex;gap:10px;align-items:flex-start;}
.alert-v.success{background:var(--v-success-bg);color:#155d3d;border-color:#bfe6d1;}
.alert-v.warning{background:var(--v-warning-bg);color:#7a4e10;border-color:#f0dcb3;}
.alert-v.danger{background:var(--v-danger-bg);color:#7d261c;border-color:#f2c7c2;}
.alert-v.info{background:var(--v-info-bg);color:#1a4585;border-color:#c4d9f6;}

/* -------------------------------- Tables ---------------------------------- */
table.dataTable{font-size:13.5px;border-collapse:separate !important;border-spacing:0;}
table.dataTable thead th{
  background:var(--v-surface-alt);color:var(--v-text-muted);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--v-border) !important;padding:12px 14px !important;
}
table.dataTable tbody td{padding:12px 14px !important;border-bottom:1px solid var(--v-border);vertical-align:middle;color:var(--v-text);}
table.dataTable tbody tr:hover{background:var(--v-primary-50);}
.table-wrap{
  background:var(--v-surface);border:1px solid var(--v-border);border-radius:var(--v-radius-lg);
  padding:4px;box-shadow:var(--v-shadow-sm);overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.table-wrap::-webkit-scrollbar{height:8px;}
.table-wrap::-webkit-scrollbar-thumb{background:var(--v-border-strong);border-radius:8px;}

/* Plain Bootstrap .table inside a wrap — match the DataTables look. */
.table-wrap > .table{margin:0;min-width:100%;}
.table-wrap .table > thead th{
  background:var(--v-surface-alt);color:var(--v-text-muted);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.03em;border:0;border-bottom:1px solid var(--v-border);
  padding:11px 14px;white-space:nowrap;
}
.table-wrap .table > tbody td{
  padding:11px 14px;border:0;border-bottom:1px solid var(--v-border);vertical-align:middle;
  font-size:13px;color:var(--v-text);
}
.table-wrap .table > tbody tr:last-child td{border-bottom:0;}
.table-wrap .table > tbody tr:hover{background:var(--v-primary-50);}
.table-wrap .table > tbody td.mono,.table-wrap .table > tbody td .mono{font-variant-numeric:tabular-nums;}
.table-wrap .table > tbody td.caption,.table-wrap .table .caption{color:var(--v-text-soft);font-size:12px;}
.table-wrap .table > tfoot th,.table-wrap .table > tfoot td{
  padding:11px 14px;border:0;border-top:2px solid var(--v-border-strong);
  background:var(--v-surface-alt);font-size:12.5px;font-weight:700;white-space:nowrap;
}
.table-wrap .table td.text-end,.table-wrap .table th.text-end{font-variant-numeric:tabular-nums;}

@media (max-width:767.98px){
  .table-wrap{padding:2px;}
  .table-wrap .table > thead th{padding:9px 10px;font-size:10.5px;}
  .table-wrap .table > tbody td{padding:9px 10px;font-size:12.5px;white-space:nowrap;}
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{border:1px solid var(--v-border-strong);border-radius:var(--v-radius-sm);padding:6px 10px;}
.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{color:var(--v-text-muted);font-size:12.5px;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--v-primary) !important;border-color:var(--v-primary) !important;color:#fff !important;border-radius:6px;}
.dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:6px !important;}
.row-actions{display:flex;gap:6px;}
.row-actions .btn{padding:5px 9px;}

/* Mobile card-table (row -> card).
   Tables now scroll horizontally inside .table-wrap, so on mobile we keep the
   table visible by default. A view can still opt into a card layout by
   rendering a non-empty .mobile-row-cards next to the table — only then is the
   table hidden. */
.mobile-row-cards{display:none;}
@media (max-width:767.98px){
  .mobile-row-cards:not(:empty){display:block;}
  .desktop-table-wrap:has(+ .mobile-row-cards:not(:empty)){display:none;}
}
.mrow-card{background:var(--v-surface);border:1px solid var(--v-border);border-radius:var(--v-radius);padding:14px;margin-bottom:10px;box-shadow:var(--v-shadow-sm);}
.mrow-card .mrow-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
.mrow-card dl{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin:0;}
.mrow-card dt{font-size:11.5px;color:var(--v-text-soft);font-weight:600;}
.mrow-card dd{font-size:13px;margin:0;font-weight:600;}
.mrow-card .mrow-actions{display:flex;gap:8px;margin-top:10px;}

/* -------------------------------- Modals ---------------------------------- */
.modal-content{border-radius:var(--v-radius-lg);border:1px solid var(--v-border);background:var(--v-surface);}
.modal-header{border-bottom:1px solid var(--v-border);padding:16px 20px;}
.modal-body{padding:20px;}
.modal-footer{border-top:1px solid var(--v-border);padding:14px 20px;}

/* Drawer */
.app-drawer{
  position:fixed;top:0;right:0;height:100%;width:460px;max-width:94vw;background:var(--v-surface);
  box-shadow:var(--v-shadow-lg);z-index:1200;transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column;
}
.app-drawer.open{transform:translateX(0);}
.app-drawer .drawer-head{padding:18px 20px;border-bottom:1px solid var(--v-border);display:flex;justify-content:space-between;align-items:center;}
.app-drawer .drawer-body{padding:20px;overflow-y:auto;flex:1;}
.app-drawer .drawer-foot{padding:16px 20px;border-top:1px solid var(--v-border);display:flex;gap:10px;justify-content:flex-end;}
.drawer-backdrop{position:fixed;inset:0;background:rgba(15,17,32,.45);z-index:1190;opacity:0;visibility:hidden;transition:opacity .2s ease;}
.drawer-backdrop.open{opacity:1;visibility:visible;}

/* --------------------------------- Tabs ----------------------------------- */
.v-tabs{display:flex;gap:4px;border-bottom:1px solid var(--v-border);flex-wrap:wrap;overflow-x:auto;}
.v-tabs .v-tab{padding:11px 16px;font-size:13.5px;font-weight:600;color:var(--v-text-muted);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;}
.v-tabs .v-tab:hover{color:var(--v-text);}
.v-tabs .v-tab.active{color:var(--v-primary);border-bottom-color:var(--v-primary);}

/* -------------------------------- Toasts ---------------------------------- */
.toast-stack{position:fixed;top:78px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:10px;width:340px;max-width:92vw;}
.v-toast{background:var(--v-surface);border:1px solid var(--v-border);border-left:4px solid var(--v-info);border-radius:var(--v-radius-sm);
  box-shadow:var(--v-shadow-lg);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;animation:toastIn .2s ease;}
.v-toast.success{border-left-color:var(--v-success);}
.v-toast.warning{border-left-color:var(--v-warning);}
.v-toast.danger{border-left-color:var(--v-danger);}
.v-toast .toast-icon{font-size:16px;margin-top:1px;}
.v-toast.success .toast-icon{color:var(--v-success);}
.v-toast.warning .toast-icon{color:var(--v-warning);}
.v-toast.danger .toast-icon{color:var(--v-danger);}
.v-toast.info .toast-icon{color:var(--v-info);}
.v-toast .toast-msg{font-size:13px;font-weight:600;flex:1;}
.v-toast .toast-close{cursor:pointer;color:var(--v-text-soft);font-size:12px;}
@keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}

/* -------------------------------- Skeleton -------------------------------- */
.skeleton{background:linear-gradient(90deg,var(--v-border) 25%,var(--v-surface-alt) 37%,var(--v-border) 63%);
  background-size:400% 100%;animation:skeletonShimmer 1.4s ease infinite;border-radius:6px;}
@keyframes skeletonShimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
.skeleton-line{height:12px;margin-bottom:8px;}
.skeleton-card{height:110px;border-radius:var(--v-radius-lg);}

/* ------------------------------ Empty / Error states ----------------------- */
.empty-state,.loading-state,.error-state,.permission-state{
  text-align:center;padding:56px 20px;color:var(--v-text-muted);
}
.empty-state .es-icon,.error-state .es-icon,.permission-state .es-icon{
  font-size:38px;color:var(--v-text-soft);width:78px;height:78px;border-radius:50%;background:var(--v-surface-alt);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
.empty-state h4,.error-state h4,.permission-state h4{margin-bottom:6px;color:var(--v-text);}
.empty-state p,.error-state p,.permission-state p{max-width:360px;margin:0 auto 16px;font-size:13.5px;}

/* ------------------------------- Quick actions ---------------------------- */
.quick-action{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--v-radius);border:1px solid var(--v-border);
  background:var(--v-surface);cursor:pointer;transition:var(--v-transition);text-align:left;width:100%;
}
.quick-action:hover{border-color:var(--v-primary-light);background:var(--v-primary-50);}
.quick-action .qa-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.quick-action .qa-label{font-weight:600;font-size:13.5px;}
.quick-action .qa-sub{font-size:11.5px;color:var(--v-text-muted);}

/* ------------------------------ Mobile action bar -------------------------- */
.mobile-action-bar{
  position:fixed;left:0;right:0;bottom:0;background:var(--v-surface);border-top:1px solid var(--v-border);
  padding:10px 14px;display:flex;gap:10px;z-index:1050;box-shadow:0 -6px 16px rgba(20,22,45,.08);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.mobile-action-bar .btn{flex:1;}

/* ------------------------------ Utility helpers --------------------------- */
.icon-tile{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bg-primary-soft{background:var(--v-primary-50);color:var(--v-primary);}
.bg-success-soft{background:var(--v-success-bg);color:var(--v-success);}
.bg-warning-soft{background:var(--v-warning-bg);color:var(--v-warning);}
.bg-danger-soft{background:var(--v-danger-bg);color:var(--v-danger);}
.bg-info-soft{background:var(--v-info-bg);color:var(--v-info);}
.bg-accent-soft{background:var(--v-accent-light);color:var(--v-accent);}
.divider-v{height:1px;background:var(--v-border);margin:16px 0;border:none;}
.scroll-x{overflow-x:auto;}
.kbd{background:var(--v-surface-alt);border:1px solid var(--v-border-strong);border-radius:5px;padding:2px 7px;font-size:11px;font-weight:700;color:var(--v-text-muted);}
.tag-chip{display:inline-flex;align-items:center;gap:5px;background:var(--v-surface-alt);border:1px solid var(--v-border);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--v-text-muted);}
.progress-v{height:7px;border-radius:99px;background:var(--v-border);overflow:hidden;}
.progress-v > span{display:block;height:100%;border-radius:99px;background:var(--v-primary);}

/* Focus visibility for accessibility */
a:focus-visible,button:focus-visible,.form-control:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--v-primary-light);outline-offset:2px;
}