/* public/assets/css/app.css */

/* -----------------------------
   Theme base (modern clean)
------------------------------ */
:root{
  --mt-primary: #0d6efd;      /* bootstrap-ish primary */
  --mt-dark: #111827;         /* slate-900 */
  --mt-muted: #6b7280;        /* gray-500 */
  --mt-bg: #f5f7fb;           /* soft background */
  --mt-card: #ffffff;
  --mt-border: #e5e7eb;       /* gray-200 */
  --mt-shadow: 0 10px 25px rgba(17, 24, 39, 0.08);
  --mt-radius: 14px;
}

html, body{
  height: 100%;
}

body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: var(--mt-bg) !important;
  color: #111827;
}

/* Improve font rendering */
*{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------
   Navbar
------------------------------ */
.navbar{
  background: linear-gradient(90deg, #0b1220, #111827) !important;
}

.navbar-brand{
  letter-spacing: .3px;
}

.navbar-dark .navbar-nav .nav-link{
  color: rgba(255,255,255,0.88);
}
.navbar-dark .navbar-nav .nav-link:hover{
  color: #ffffff;
}

.navbar .dropdown-menu{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: var(--mt-shadow);
}

/* -----------------------------
   Main spacing
------------------------------ */
main{
  min-height: calc(100vh - 120px);
}

@media (max-width: 576px){
  main.py-4{
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* -----------------------------
   Cards
------------------------------ */
.card{
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius);
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
  overflow: hidden;
}

.card-header{
  background: #ffffff;
  border-bottom: 1px solid var(--mt-border);
  font-weight: 600;
}

.card-title{
  font-weight: 700;
}

/* nice "section header" inside card */
.mt-section-title{
  font-weight: 700;
  font-size: 1rem;
  color: #111827;
  margin-bottom: .75rem;
}

/* -----------------------------
   Buttons
------------------------------ */
.btn{
  border-radius: 12px;
}

.btn-primary{
  background: var(--mt-primary);
  border-color: var(--mt-primary);
  box-shadow: 0 10px 18px rgba(13,110,253,0.18);
}

.btn-outline-danger,
.btn-outline-primary,
.btn-outline-secondary{
  border-width: 1px;
}

/* -----------------------------
   Forms
------------------------------ */
.form-control, .custom-file-input, .custom-file-label{
  border-radius: 12px;
  border: 1px solid var(--mt-border);
}

.form-control:focus{
  border-color: rgba(13,110,253,0.45);
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.12);
}

label{
  font-weight: 600;
  color: #111827;
}

small.text-muted{
  color: var(--mt-muted) !important;
}

/* File input */
.custom-file-label::after{
  border-radius: 0 12px 12px 0;
}

/* -----------------------------
   Tables (Bootstrap + DataTables)
------------------------------ */
.table{
  background: #fff;
}

.table thead th{
  border-bottom: 1px solid var(--mt-border) !important;
  color: #111827;
  font-weight: 700;
  background: #f9fafb;
}

.table td, .table th{
  vertical-align: middle !important;
  border-top: 1px solid var(--mt-border) !important;
}

.table-hover tbody tr:hover{
  background: rgba(13,110,253,0.04);
}

/* DataTables tweaks */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border-radius: 12px;
  border: 1px solid var(--mt-border);
  padding: .25rem .6rem;
  outline: none;
}

.dataTables_length select,
.dt-length select {
    width: 90px !important;
    padding: 6px;
    border-radius: 6px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius: 10px !important;
}

.page-item.active .page-link{
  background-color: var(--mt-primary);
  border-color: var(--mt-primary);
}

/* -----------------------------
   Invoice page helpers
------------------------------ */
.mt-invoice-summary{
  background: #ffffff;
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius);
  padding: 14px;
}

.mt-invoice-summary .form-control[readonly]{
  background: #f9fafb;
}

/* item table inside invoice */
.mt-items-table td{
  padding-top: .55rem;
  padding-bottom: .55rem;
}

.mt-items-table .btn{
  padding: .25rem .6rem;
}

/* -----------------------------
   Login page polish
------------------------------ */
.mt-auth-wrap{
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
}

.mt-auth-card{
  border-radius: 18px;
  box-shadow: var(--mt-shadow);
}

.mt-auth-brand{
  font-weight: 800;
  letter-spacing: .4px;
  color: #111827;
}

.mt-auth-sub{
  color: var(--mt-muted);
}

/* -----------------------------
   Badges
------------------------------ */
.badge{
  border-radius: 999px;
  padding: .35rem .6rem;
  font-weight: 700;
}

/* -----------------------------
   Footer
------------------------------ */
footer{
  color: var(--mt-muted);
}

/* -----------------------------
   Utilities
------------------------------ */
.mt-rounded{
  border-radius: var(--mt-radius);
}

.mt-shadow{
  box-shadow: var(--mt-shadow);
}

.text-muted{
  color: var(--mt-muted) !important;
}

/* Better container width feel on large screen */
@media (min-width: 1200px){
  .container{
    max-width: 1140px;
  }
}