/* ════════════════════════════════════════════════════════════════════
   pbVM — Global Styles
   File: wwwroot/css/vm-styles.css
   Layout.cshtml এ link করুন:
   <link rel="stylesheet" href="~/css/vm-styles.css" />
   ════════════════════════════════════════════════════════════════════ */


/* ── Table: Horizontal Scroll ────────────────────────────────────────
   সব page এ .vm-table-wrapper এর ভেতরে table রাখুন।
   ----------------------------------------------------------------
   HTML:
   <div class="vm-table-wrapper">
       <table class="table table-hover align-middle mb-0">
           ...
       </table>
   </div>
   ---------------------------------------------------------------- */
.vm-table-wrapper {
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-radius: 16px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.6);
   transition: all 0.3s ease;
}

   .vm-table-wrapper table {
      min-width: 700px; /* এর চেয়ে ছোট হলে scroll bar আসবে */
      margin-bottom: 0;
   }

   /* Scrollbar styling — Chrome/Edge */
   .vm-table-wrapper::-webkit-scrollbar {
      height: 6px;
   }

   .vm-table-wrapper::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 10px;
   }

   .vm-table-wrapper::-webkit-scrollbar-thumb {
      background: #512BD4;
      border-radius: 10px;
   }

      .vm-table-wrapper::-webkit-scrollbar-thumb:hover {
         background: #3d1fa8;
      }


/* ── Table Header ────────────────────────────────────────────────────
   সব table এর thead এ .vm-thead ব্যবহার করুন।
   ----------------------------------------------------------------
   HTML: <thead class="vm-thead">
   ---------------------------------------------------------------- */
.vm-thead {
   background-color: #512BD4;
   color: white;
}


/* ── Card ────────────────────────────────────────────────────────────
   সব page এর main card এ .vm-card ব্যবহার করুন।
   ----------------------------------------------------------------
   HTML: <div class="card vm-card">
   ---------------------------------------------------------------- */
.vm-card {
   border: 1px solid rgba(255,255,255,0.2);
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.3);
   background-color: rgba(255, 255, 255, 0.25); 
   backdrop-filter: blur(15px); 
   -webkit-backdrop-filter: blur(15px);
   color: #ffffff !important;
}

body.vm-app-bg .card:not(.kpi-card) {
   border: 1px solid rgba(255,255,255,0.2);
   border-radius: 20px;
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.3);
   background-color: rgba(255, 255, 255, 0.25); 
   backdrop-filter: blur(15px); 
   -webkit-backdrop-filter: blur(15px);
}


/* ── Card Header ─────────────────────────────────────────────────────
   HTML: <div class="card-header vm-card-header">
   ---------------------------------------------------------------- */
.vm-card-header {
   background-color: #512BD4;
   color: white;
   text-align: center;
   padding: 1rem;
}


/* ── Buttons ─────────────────────────────────────────────────────────
   .vm-btn-save   → সবুজ Save button
   .vm-btn-cancel → লাল Cancel button
   .vm-btn-back   → purple Back to Dashboard button
   ----------------------------------------------------------------
   HTML:
   <button class="btn btn-lg vm-btn-save">💾 Save</button>
   <a class="btn btn-lg vm-btn-cancel">❌ Cancel</a>
   <a class="btn vm-btn-back w-100 p-3">🔙 Back to Dashboard</a>
   ---------------------------------------------------------------- */
.vm-btn-save {
   background-color: #27AE60;
   color: white;
   font-weight: bold;
   border: none;
   border-radius: 10px;
}

   .vm-btn-save:hover {
      background-color: #219150;
      color: white;
   }

.vm-btn-cancel {
   background-color: #E74C3C;
   color: white;
   font-weight: bold;
   border: none;
   border-radius: 10px;
}

   .vm-btn-cancel:hover {
      background-color: #c0392b;
      color: white;
   }

.vm-btn-back {
   background-color: #512BD4;
   color: white;
   font-weight: bold;
   border: none;
   border-radius: 12px;
   font-size: 1.1rem;
}

   .vm-btn-back:hover {
      background-color: #3d1fa8;
      color: white;
   }


/* ── Header Action Buttons ───────────────────────────────────────────
   Index page এর ➕ Create New, 🔄 Refresh buttons
   ----------------------------------------------------------------
   HTML:
   <a class="btn vm-btn-create px-4 py-2">➕ Create New</a>
   <a class="btn vm-btn-refresh px-4 py-2">🔄 Refresh</a>
   ---------------------------------------------------------------- */
.vm-btn-create {
   background-color: #27AE60;
   color: white;
   font-weight: bold;
   border-radius: 10px;
   border: none;
}

   .vm-btn-create:hover {
      background-color: #219150;
      color: white;
   }

.vm-btn-refresh {
   background-color: #2980B9;
   color: white;
   font-weight: bold;
   border-radius: 10px;
   border: none;
}

   .vm-btn-refresh:hover {
      background-color: #1f6390;
      color: white;
   }


/* ── Search Box ──────────────────────────────────────────────────────
   HTML:
   <div class="vm-search-box input-group mb-3">
       <span class="input-group-text">🔍</span>
       <input type="text" class="form-control" ... />
       <button class="btn vm-btn-filter">Filter</button>
       <a class="btn vm-btn-clear">Clear</a>
   </div>
   ---------------------------------------------------------------- */
.vm-search-box {
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-radius: 16px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.6);
   overflow: hidden;
}

   .vm-search-box .input-group-text {
      background: transparent;
      border: none;
   }

   .vm-search-box .form-control {
      background: transparent;
      border: none;
   }

.vm-btn-filter {
   background-color: #1a1a1a;
   color: white;
   font-weight: bold;
   border: none;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
}

   .vm-btn-filter:hover {
      background-color: #333;
      color: white;
   }

.vm-btn-clear {
   color: #E74C3C;
   font-weight: bold;
   border: 1px solid #E74C3C;
}

   .vm-btn-clear:hover {
      background-color: #E74C3C;
      color: white;
   }


/* ── Section Box (Create/Edit page এর grouped fields) ────────────────
   HTML: <div class="vm-section mb-3">
   ---------------------------------------------------------------- */
.vm-section {
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-radius: 16px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.6);
   padding: 1.5rem;
   color: #1e293b;
   transition: all 0.3s ease;
}

   .vm-section h6 {
      margin-bottom: 1rem;
   }


/* ── Ellipsis text for long columns ─────────────────────────────────
   HTML: <td class="vm-ellipsis">long text...</td>
   ---------------------------------------------------------------- */
.vm-ellipsis {
   max-width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}


/* ── Amount / number columns ─────────────────────────────────────────
   HTML: <td class="vm-amount">৳ 10,000.00</td>
   ---------------------------------------------------------------- */
.vm-amount {
   text-align: right;
   font-weight: bold;
   color: #27AE60;
}


/* ── tfoot Total Row ─────────────────────────────────────────────────
   HTML: <tfoot class="vm-tfoot">
   ---------------------------------------------------------------- */
.vm-tfoot {
   background-color: #1a1a1a;
   color: white;
}

/* ── Dashboard Gradient Background ────────────── */
body.vm-app-bg {
   background: linear-gradient(-45deg, #1D4ED8, #3B82F6, #2563EB, #60A5FA);
   background-size: 400% 400%;
   animation: gradientBG 15s ease infinite;
   min-height: 100vh;
}
@keyframes gradientBG {
   0% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
   100% { background-position: 0% 50%; }
}
body.vm-app-bg .card,
body.vm-app-bg .vm-card,
body.vm-app-bg .kpi-card,
body.vm-app-bg .vm-section,
body.vm-app-bg .glass-card,
body.vm-app-bg .table {
   color: #1e293b;
}
body.vm-app-bg .text-muted {
   color: #64748b !important;
}
body.vm-app-bg .card .text-muted {
   color: #6c757d !important;
}

/* Unified page shell for all pages except Dashboard/Index */
.vm-page-shell {
   background-color: rgba(255, 255, 255, 0.25);
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   border: 1px solid rgba(255,255,255,0.2);
   border-radius: 20px;
   box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.3);
   margin-bottom: 2rem;
}

.vm-page-content {
   background: rgba(255, 255, 255, 0.18);
   border: 1px solid rgba(255, 255, 255, 0.35);
   border-radius: 16px;
   padding: 1rem;
}

.vm-page-content > .container,
.vm-page-content > .container-fluid {
   max-width: 100%;
   padding-left: 0;
   padding-right: 0;
   margin-top: 0 !important;
   margin-bottom: 0;
   background-color: transparent !important;
   min-height: auto !important;
}

.vm-page-content .btn {
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.vm-page-content .alert {
   margin-bottom: 0.75rem;
}

.vm-page-content .table-responsive,
.vm-page-content .vm-table-wrapper {
   background: rgba(255, 255, 255, 0.9);
   border: 1px solid rgba(255, 255, 255, 0.6);
   border-radius: 16px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
   overflow: hidden;
}

.vm-page-content .table-responsive > .table {
   margin-bottom: 0;
   background: transparent !important;
}

.vm-page-content .table-responsive thead,
.vm-page-content .table-responsive thead th {
   background-color: #512BD4;
   color: #fff;
   border-bottom: 0;
}

.vm-page-content h1,
.vm-page-content h2,
.vm-page-content h3,
.vm-page-content h4,
.vm-page-content h5 {
   color: #fff;
}

.vm-page-content .card-header {
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
}

.vm-top-back-wrap {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 0.5rem;
   margin-bottom: 0.5rem;
}

.vm-top-back-btn {
   width: auto;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   padding: 0.55rem 1rem;
   font-size: 0.98rem;
   line-height: 1.2;
   border-radius: 10px;
   white-space: nowrap;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.vm-inline-back-btn {
   flex: 0 0 auto;
   margin-right: 0.25rem;
}

@media (max-width: 576px) {
   .vm-page-content {
      padding: 0.75rem;
   }

   .vm-top-back-wrap {
      margin-bottom: 0.45rem;
   }

   .vm-top-back-btn {
      width: 100%;
      justify-content: center;
   }
}

.vm-voice-assistant {
   position: fixed;
   top: 10px;
   right: 12px;
   z-index: 2050;
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
}

.ribbon-voice-assistant-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.33rem;
   height: 30px;
   padding: 0 10px;
   box-sizing: border-box;
   font-weight: 700;
   font-family: Tahoma, sans-serif;
   font-size: 12px;
   border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.6);
   background: linear-gradient(180deg, #f0d8a5 0%, #e2c089 100%);
   color: #111;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
   cursor: pointer;
   white-space: nowrap;
}

.ribbon-voice-assistant-btn:hover {
   filter: brightness(1.03);
}

.ribbon-voice-assistant-btn.listening {
   background: linear-gradient(180deg, #f6d3cc 0%, #e7a994 100%);
   border-color: #80453a;
}

.ribbon-voice-assistant-btn.error {
   background: linear-gradient(180deg, #ffd9d4 0%, #f2a99d 100%);
   border-color: #a64036;
}

.ribbon-voice-assistant-btn:disabled {
   opacity: 0.75;
   cursor: not-allowed;
}

.ribbon-voice-assistant-icon {
   font-size: 13px;
   line-height: 1;
}

.ribbon-voice-assistant-live {
   max-width: 260px;
   min-height: 30px;
   display: inline-flex;
   align-items: center;
   padding: 0 8px;
   border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.35);
   background: rgba(255, 255, 255, 0.86);
   color: #233952;
   font-family: Tahoma, sans-serif;
   font-size: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.vm-voice-assistant-login {
   top: 12px;
   right: 14px;
}

@media (max-width: 991px) {
   .ribbon-voice-assistant-live {
      display: none;
   }
}