/* EasyPrintDz CRM - UI V11 Wide Practical Layout */
/* Goal: wider useful workspace, readable tables, less empty space, safer mobile behavior */

:root{
  --ep-bg:#eef7ff;
  --ep-panel:#ffffff;
  --ep-soft:#f8fbff;
  --ep-border:#cfe0f3;
  --ep-border-2:#b9d4f0;
  --ep-text:#07142b;
  --ep-muted:#64748b;
  --ep-blue:#2563eb;
  --ep-blue-dark:#061225;
  --ep-green:#059669;
  --ep-red:#dc2626;
  --ep-orange:#f59e0b;
  --ep-radius:14px;
  --ep-shadow:0 10px 26px rgba(15,23,42,.07);
  --ep-max:1320px;
}

/* Base */
html{scroll-behavior:smooth;}
body{
  background:var(--ep-bg)!important;
  color:var(--ep-text)!important;
  font-size:14px;
}

/* Make admin pages use real screen width */
main,
main > div,
main .container,
main .max-w-7xl,
main .max-w-6xl,
main .max-w-5xl,
main .max-w-4xl,
main [class*="max-w-"]{
  max-width:var(--ep-max)!important;
}

main{
  width:100%!important;
}

main > div,
main .container,
main .max-w-7xl,
main .max-w-6xl,
main .max-w-5xl,
main .max-w-4xl{
  width:calc(100% - 48px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Header/navbar: keep clean, compact, centered */
header,
nav{
  background:#fff!important;
  border-bottom:1px solid var(--ep-border)!important;
}

header .container,
nav .container,
header [class*="max-w-"],
nav [class*="max-w-"]{
  max-width:var(--ep-max)!important;
  width:calc(100% - 48px)!important;
}

/* Page title area */
h1{
  font-size:30px!important;
  line-height:1.1!important;
  letter-spacing:-.03em!important;
  font-weight:900!important;
  color:var(--ep-text)!important;
}
h2,h3{
  color:var(--ep-text)!important;
  font-weight:850!important;
}
p,small,.text-muted{
  color:var(--ep-muted);
}

/* Cards and panels */
.card,
.rounded,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
section,
form,
.bg-white{
  border-color:var(--ep-border)!important;
}

main .bg-white,
main section,
main .card,
main .rounded-xl,
main .rounded-2xl{
  box-shadow:var(--ep-shadow);
}

/* Dashboard / stats grids */
.grid{
  gap:16px!important;
}

@media (min-width: 1024px){
  main .grid-cols-4,
  main .lg\:grid-cols-4{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  main .grid-cols-3,
  main .lg\:grid-cols-3{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  main .grid-cols-2,
  main .lg\:grid-cols-2{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* More comfortable KPI cards */
main [class*="shadow"],
main .shadow,
main .shadow-sm,
main .shadow-md{
  box-shadow:var(--ep-shadow)!important;
}

/* Buttons */
button,
.btn,
a.btn,
[type="submit"],
[type="button"]{
  border-radius:10px!important;
  font-weight:800!important;
}

.bg-blue-600,
.bg-indigo-600,
.btn-primary{
  background:var(--ep-blue)!important;
  color:#fff!important;
}

.bg-slate-900,
.bg-gray-900,
.bg-black{
  background:var(--ep-blue-dark)!important;
  color:#fff!important;
}

.text-green-600,
.text-emerald-600{
  color:var(--ep-green)!important;
}
.text-red-600{
  color:var(--ep-red)!important;
}

/* Inputs */
input,
select,
textarea{
  border:1px solid var(--ep-border-2)!important;
  border-radius:10px!important;
  min-height:38px!important;
  background:#fff!important;
  color:var(--ep-text)!important;
}
input:focus,
select:focus,
textarea:focus{
  outline:none!important;
  border-color:#3b82f6!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.12)!important;
}

/* Tables: make them useful, readable, full width */
table{
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  font-size:13px!important;
}

thead th{
  background:#eaf4ff!important;
  color:#1e293b!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
  font-weight:900!important;
  border-bottom:1px solid var(--ep-border)!important;
  padding:11px 10px!important;
  white-space:nowrap!important;
}

tbody td{
  padding:10px!important;
  border-bottom:1px solid #dbeafe!important;
  vertical-align:middle!important;
  color:var(--ep-text)!important;
}

tbody tr:hover{
  background:#f8fbff!important;
}

/* Prevent ugly broken numbers/codes */
td,
th{
  overflow-wrap:normal!important;
}
td:first-child,
th:first-child,
td:last-child,
th:last-child{
  white-space:nowrap!important;
}

td a,
td span,
td small{
  max-width:100%;
}

/* Badges */
.badge,
.rounded-full,
[class*="badge"]{
  font-weight:850!important;
}

/* Wide table wrappers: allow horizontal scroll only inside table, not whole page */
.overflow-x-auto,
.table-responsive{
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch!important;
  border-radius:12px!important;
}

/* Sales table: keep actions visible better */
table td:last-child{
  min-width:82px!important;
}

/* Finance table is heavy: give it room */
body:has(a[href*="finance"]) main [class*="overflow"]{
  max-width:100%!important;
}

/* POS page: practical two-column, no huge empty spacing */
@media (min-width: 1024px){
  form[action*="quick"],
  form[action*="pos"],
  form[action*="sales"]{
    max-width:100%!important;
  }
}

/* Make Arabic helper text readable */
[dir="rtl"],
.ar,
.text-right{
  line-height:1.75!important;
}

/* Mobile / tablet */
@media (max-width: 900px){
  :root{--ep-max:100%;}
  main > div,
  main .container,
  main [class*="max-w-"]{
    width:calc(100% - 22px)!important;
  }
  h1{font-size:25px!important;}
  table{font-size:12px!important;}
  thead th{font-size:10px!important;padding:9px 8px!important;}
  tbody td{padding:9px 8px!important;}
}

/* Very wide screens */
@media (min-width: 1500px){
  :root{--ep-max:1440px;}
}

/* Print */
@media print{
  header,nav,.no-print{display:none!important;}
  body{background:#fff!important;}
  main > div{width:100%!important;max-width:100%!important;}
}