@import url("https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap");
/*
 * OilCare business-workflow additions for the purchased Bracket Plus template.
 * Navigation, header, Bootstrap controls, cards, tables, modal system, icons,
 * spacing utilities and responsive shell come from the original Envato files.
 */
[hidden]{display:none!important}
html[dir="rtl"] body{font-family:"Noto Naskh Arabic","Geeza Pro",Tahoma,serif;text-align:right;font-size:15px}
html[dir="ltr"] body{font-family:"Noto Naskh Arabic","Segoe UI",Arial,sans-serif;text-align:left}
body{background:#e9ecef}
button{cursor:pointer}

/* Template shell integration */
.oilcare-app{min-height:100vh}
.br-logo a{font-size:21px;text-transform:none}
.br-logo a i{font-style:normal;color:#17a2b8}
.br-sideleft{padding-bottom:92px}
.oilcare-side-user{position:absolute;inset-inline:0;bottom:0;display:grid;grid-template-columns:36px minmax(0,1fr) 38px;gap:9px;align-items:center;background:#fff;border-top:1px solid #e5e8eb}
.oilcare-side-user #avatar{width:36px;height:36px;font-size:11px}
.oilcare-user-copy{min-width:0}
.oilcare-user-copy strong,.oilcare-user-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oilcare-user-copy strong{font-size:12px;color:#343a40}
.oilcare-user-copy small{font-size:10px;color:#868ba1;margin-top:2px}
.oilcare-header-action{padding-inline:5px!important;display:flex;align-items:center}
.oilcare-header-action select{height:34px;min-width:100px}
.br-header-right .nav-link-profile{align-items:center}
.oilcare-pagetitle{display:flex;align-items:center;gap:18px}
.oilcare-pagetitle>i{flex:0 0 auto}
.oilcare-pagetitle .flex-grow-1{min-width:0}
.oilcare-page-actions{margin-inline-start:auto;justify-content:flex-end}
.br-pagebody{padding-bottom:45px}

/* Template cards arranged for operational work instead of card-heavy dashboard */
.workspace-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);gap:20px;align-items:start}
.workspace-grid>.span-wide{grid-column:1/-1}
.oil-surface{margin-bottom:20px;overflow:hidden}
.oil-surface-head{min-height:60px;padding:16px 20px;border-bottom:1px solid #e9ecef}
.oil-surface-head h2,.oil-surface-head h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#343a40;margin:0;font-weight:600}
.oil-surface-head p{font-size:11px;color:#868ba1;margin:4px 0 0}
.oilcare-metrics .card{border-top:3px solid #17a2b8}

/* Operational tables */
.oilcare-table th{border-top:0!important;border-bottom:1px solid #dee2e6!important;white-space:nowrap}
.oilcare-table td{vertical-align:middle;padding:13px 12px;font-size:12px}
.oilcare-table tbody tr:hover{background:#eef8fb}
.cell-title{display:block;font-weight:600;color:#343a40}
.cell-sub{display:block;font-size:10px;color:#868ba1;margin-top:3px}
.money{font-weight:600;white-space:nowrap;color:#343a40;font-variant-numeric:tabular-nums}
.row-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.message-cell{max-width:340px;white-space:normal}

/* Attention and trends retain custom data behavior inside Bracket cards */
.attention-list{display:grid}
.attention-item{width:100%;display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:11px;align-items:center;padding:15px 18px;border:0;border-top:1px solid #edf0f2;background:#fff;text-align:start}
.attention-item:first-child{border-top:0}
.attention-item:hover{background:#f8f9fa}
.attention-dot{width:8px;height:8px;border-radius:50%;background:#f49917}
.attention-dot.danger{background:#dc3545}
.attention-dot.good{background:#23bf08}
.attention-item strong{display:block;font-size:12px;color:#343a40}
.attention-item small{display:block;font-size:10px;color:#868ba1;margin-top:3px}
.attention-item b{font-size:12px;color:#343a40}
.trend-chart{padding:25px 25px 18px;min-height:235px}
.bars{height:175px;display:flex;align-items:flex-end;gap:14px;border-bottom:1px solid #dee2e6}
.bar-col{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;position:relative}
.bar{display:block;width:min(36px,65%);min-height:4px;background:#17a2b8;border-radius:4px 4px 0 0}
.bar-value{position:absolute;bottom:var(--height);margin-bottom:5px;font-size:9px;color:#868ba1;white-space:nowrap}
.bar-labels{display:flex;gap:14px;padding-top:8px}
.bar-labels span{flex:1;text-align:center;font-size:10px;color:#868ba1}

/* Forms use Bracket/Bootstrap controls; these rules only arrange them */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.form-grid>.span-2,.form-grid>.form-section,.form-grid>.line-builder,.form-grid>.form-total{grid-column:1/-1}
.form-section{border-top:1px solid #e9ecef;margin-top:5px;padding-top:18px}
.form-section h3{font-size:13px;text-transform:uppercase;color:#343a40}
.line-builder{border:1px solid #dee2e6;border-radius:4px;padding:15px;margin-bottom:15px;background:#f8f9fa}
.line-head{display:grid;grid-template-columns:minmax(0,1fr) 25% 25% 42px;gap:10px;padding:0 8px 8px;color:#868ba1;font-size:10px;text-transform:uppercase}
.line-builder.transfer-lines .line-head{grid-template-columns:minmax(0,1fr) 25% 42px}
.add-line{border:0;background:transparent;color:#17a2b8;font-size:12px;font-weight:600;padding:7px 0}
.form-total{display:flex;justify-content:flex-end;border-top:1px solid #dee2e6;padding-top:15px;margin-bottom:15px}
.form-total strong{font-size:18px;color:#343a40;margin-inline-start:8px}
.select2-container{z-index:1060}
.select2-container--default .select2-selection--single{height:38px;border-color:#ced4da;border-radius:3px}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:36px}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:36px}

/* Inventory and report shortcuts */
.stock-current{display:flex;align-items:center;justify-content:space-between;padding:14px;background:#eef8fb;border:1px solid #b8e3ec;border-radius:4px;margin-bottom:15px}
.stock-current strong{font-size:18px;color:#0866c6}
.report-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:20px}
.report-shortcuts a,.report-launcher{display:block;padding:17px;border:1px solid #dee2e6;border-radius:4px;background:#fff;color:#343a40}
.report-shortcuts a:hover,.report-launcher:hover{border-color:#17a2b8;background:#eef8fb}
.report-shortcuts strong,.report-launcher strong{display:block;font-size:13px}
.report-shortcuts span,.report-launcher span{display:block;font-size:10px;color:#868ba1;margin-top:5px}
.reorder-list{display:grid;gap:8px}
.reorder-row{display:grid;grid-template-columns:32px minmax(0,1fr) 105px 115px;gap:10px;align-items:center;border:1px solid #dee2e6;padding:10px;border-radius:4px}

/* Fast sale: all visible components are Bracket/Bootstrap cards, lists and controls */
.oilcare-pos-row{align-items:start}
.oilcare-pos-products{max-height:calc(100vh - 280px);overflow:auto}
.oilcare-pos-product{padding:13px 16px;border-inline:0!important;text-align:start}
.oilcare-pos-product:disabled{opacity:.5;cursor:not-allowed}
.oilcare-product-side{display:flex;align-items:center;white-space:nowrap}
.oilcare-category-nav{gap:5px;flex-wrap:nowrap;overflow:auto;padding-bottom:2px}
.oilcare-category-nav .nav-link{border:0;white-space:nowrap;font-size:11px;padding:7px 12px}
.oilcare-checkout{position:sticky;top:85px;max-height:calc(100vh - 105px)}
.oilcare-checkout>.card-body{overflow:auto}
.oilcare-cart-lines{max-height:310px;overflow:auto;background:#fff}
.oilcare-cart-lines table{min-width:570px}
.oilcare-qty{min-width:116px}
.oilcare-qty .form-control{padding-inline:3px}
.pos-totals{font-variant-numeric:tabular-nums}
body.oilcare-pos-mode .br-pagebody{margin-top:20px}

/* Toast */
.oilcare-toast{position:fixed;z-index:2000;bottom:25px;inset-inline-end:25px;min-width:260px;max-width:440px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;box-shadow:0 6px 22px rgba(0,0,0,.14)}
.oilcare-toast.show{opacity:1;visibility:visible;transform:none}
.oilcare-language-links button{padding-inline:6px}

/* LTR/RTL alignment fixes around utilities that were authored for the original RTL demo */
html[dir="ltr"] .tx-right{text-align:left!important}
html[dir="ltr"] .tx-left{text-align:right!important}
html[dir="rtl"] .dropdown-menu-header{text-align:right}

@media(max-width:1199px){
  .workspace-grid{grid-template-columns:1fr}
  .workspace-grid>.span-wide{grid-column:auto}
  .oilcare-checkout{position:static;max-height:none}
  .oilcare-pos-products{max-height:520px}
}
@media(max-width:767px){
  .form-grid{grid-template-columns:1fr}
  .form-grid>.span-2,.form-grid>.form-section,.form-grid>.line-builder,.form-grid>.form-total{grid-column:1}
  .oilcare-page-actions{width:100%;margin-top:12px;justify-content:flex-start}
  .oilcare-pagetitle{align-items:flex-start;flex-wrap:wrap}
  .br-pagebody{margin-top:20px;padding-inline:15px}
  .report-shortcuts{grid-template-columns:1fr}
  .oilcare-product-side{display:grid;justify-items:end;gap:4px}
  .oilcare-pos-products{max-height:420px}
  .oilcare-header-action .btn span{display:none}
  .oilcare-header-action select{min-width:84px}
}

/* Font-free icon fallbacks. The purchased template normally uses icon-font files;
   generated deliverables do not redistribute font binaries, so the same template
   icon slots are populated with lightweight Unicode symbols. */
.icon,.fa,.fas,.far{font-family:inherit!important;font-style:normal!important;font-weight:700!important;line-height:1}
.icon:before,.fa:before,.fas:before,.far:before{display:inline-block}
.ion-ios-home-outline:before{content:"⌂"}.ion-ios-cart-outline:before{content:"▣"}.ion-ios-gear-outline:before,.ion-ios-settings:before{content:"⚙"}.ion-ios-people-outline:before{content:"◎"}.ion-ios-filing-outline:before{content:"▤"}.ion-ios-briefcase-outline:before{content:"▥"}.ion-ios-shuffle:before{content:"⇄"}.ion-ios-box-outline:before{content:"□"}.ion-ios-alarm-outline:before{content:"◷"}.ion-ios-personadd-outline:before{content:"＋"}.ion-ios-calendar-outline:before{content:"▦"}.ion-ios-pie-outline:before{content:"◔"}.ion-card:before{content:"▭"}.ion-stats-bars:before{content:"▥"}.ion-ios-checkmark-outline:before{content:"✓"}.ion-ios-paper-outline:before{content:"▧"}.ion-navicon-round:before{content:"☰"}.ion-person:before{content:"○"}.ion-log-out:before{content:"↪"}.ion-ios-speedometer-outline:before{content:"◴"}.ion-ios-folder-outline:before{content:"□"}.ion-ios-search:before{content:"⌕"}
.fa-search:before{content:"⌕"}.fa-shopping-cart:before{content:"▣"}.fa-wrench:before{content:"⚙"}.fa-plus:before{content:"＋"}.fa-print:before{content:"▧"}.fa-arrow-right:before{content:"←"}.fa-barcode:before{content:"▥"}.fa-money-bill-wave:before{content:"▭"}.fa-clock:before{content:"◷"}.fa-times:before{content:"×"}

body,input,select,textarea,button,.form-control,.btn,.table{font-family:"Noto Naskh Arabic","Geeza Pro",Tahoma,serif!important}
.catalog-filter-bar{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:10px;margin-bottom:18px}.catalog-reference-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;padding:18px}.catalog-setup-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.catalog-specs{max-width:270px;white-space:normal}.catalog-multiselect{min-height:180px}.oilcare-pos-catalog-filters select{font-size:13px}@media(max-width:767px){.catalog-filter-bar,.catalog-reference-grid{grid-template-columns:1fr}.catalog-setup-actions{justify-content:flex-start}}
/* Iraq reseller catalogue simplification */
.catalog-advanced{border:1px solid #d9dee3;border-radius:6px;background:#fafbfc;padding:0 14px 14px}.catalog-advanced>summary{cursor:pointer;font-weight:700;padding:12px 0;color:#3d4650}.catalog-advanced[open]>summary{border-bottom:1px solid #e6e9ec;margin-bottom:12px}.select2-container{max-width:100%}.select2-container--default .select2-selection--multiple{min-height:44px;border-color:#cfd6dd}.select2-container--default .select2-selection--multiple .select2-selection__choice{background:#e9f5f2;border-color:#b7dcd4;color:#155b4f;padding:3px 8px}.select2-dropdown{z-index:2000}.catalog-multiselect+small{margin-top:6px}

/* Simple walk-in oil-change form */
.service-customer-toggle{padding:14px 16px;border:1px solid #d7dce2;background:#f8f9fa;border-radius:6px}
.service-linked-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding:16px;border:1px solid #d7dce2;border-radius:6px;background:#fff}
.service-linked-fields[hidden]{display:none!important}
@media(max-width:767px){.service-linked-fields{grid-template-columns:1fr}}

.service-more{border:1px solid #d7dce2;border-radius:6px;background:#fff;overflow:hidden}
.service-more>summary{cursor:pointer;padding:12px 16px;font-weight:700;list-style:none}
.service-more>summary::-webkit-details-marker{display:none}
.service-more>summary:after{content:'＋';float:left;color:#6c757d}
.service-more[open]>summary:after{content:'−'}
.service-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding:16px;border-top:1px solid #e5e8eb}
@media(max-width:767px){.service-more-grid{grid-template-columns:1fr}}


/* Fast cascading selector for oil-change items */
#drawerBackdrop .modal-dialog.oilcare-service-dialog{max-width:1120px}
.service-product-row{border:1px solid #d7dce2;border-radius:6px;background:#fff;padding:14px;margin-bottom:12px;box-shadow:0 1px 2px rgba(33,37,41,.04)}
.service-cascade-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding-bottom:12px;border-bottom:1px solid #edf0f2}
.service-result-grid{display:grid;grid-template-columns:minmax(260px,1fr) 105px 135px 125px 42px;gap:10px;align-items:end;padding-top:12px}
.service-choice{display:block;margin:0;min-width:0}
.service-choice>span{display:block;color:#6c757d;font-size:10px;font-weight:700;margin-bottom:5px;white-space:nowrap}
.service-choice select,.service-choice input{height:38px;font-size:12px}
.service-final select{font-weight:700;color:#343a40}
.service-stock{height:38px;display:flex;align-items:center;justify-content:center;padding:0 10px;border:1px solid #b8e3ec;border-radius:3px;background:#eef8fb;color:#0866c6;font-size:11px;font-weight:700;white-space:nowrap}
.service-remove{width:42px;height:38px;padding:0;display:flex;align-items:center;justify-content:center}
html[dir="rtl"] .service-choice>span{text-align:right}
@media(max-width:991px){
  #drawerBackdrop .modal-dialog.oilcare-service-dialog{max-width:96%;margin-left:auto;margin-right:auto}
  .service-cascade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-result-grid{grid-template-columns:minmax(220px,1fr) 90px 120px 42px}
  .service-stock{grid-column:1/-1;grid-row:2}
}
@media(max-width:575px){
  .service-cascade-grid,.service-result-grid{grid-template-columns:1fr}
  .service-stock{grid-column:auto;grid-row:auto}
  .service-remove{width:100%}
}

/* Physical drum and bulk-litre workspace */
.report-shortcuts a:first-child{border-color:rgba(23,162,184,.35)}
[data-page="drums"] .menu-item-icon{color:#17a2b8}
.drum-balance{font-variant-numeric:tabular-nums}
.form-section.span-2{grid-column:1/-1}
@media(max-width:767px){
  .btn-group[data-drum-actions],.oilcare-page-actions{gap:6px}
  .oilcare-page-actions .btn{width:100%;margin-inline:0!important}
}

/* Flexible catalogue master-data workspace */
.master-tabs{display:flex;flex-wrap:wrap;gap:4px}.master-tabs .btn{min-width:120px}.oilcare-master-inline{display:flex;gap:8px;align-items:flex-end}.oilcare-master-inline>.form-group{flex:1}.badge-active{background:#dff6ec;color:#087a55}.badge-closed{background:#f1f3f5;color:#5c6770}