@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* rooter style */
:root {
    --color-primary: #185adb;
    --color-secondary: #0f131f, ;
    --color-text: #313336;
    --color-white: #ffffff;
    --color-bg: #f4f6f8;
}

/* Common styles */
* {
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

svg { width: 1em; height: 1em; fill: currentColor; } 

button.delete,
button.edit { width: fit-content; line-height: 0; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    appearance: textfield; /* Firefox */
    -moz-appearance: textfield; /* Firefox */
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/></svg>');
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 20px;
    cursor: pointer;
}

body {
    background-color: var(--color-bg);
}

/* Topbar styles */
.topbar {
    background-color: var(--color-white);
    color: var(--color-secondary);
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.topbar a {
    font-size: 12px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 0;
    box-shadow: none;
}

.product-wrapper h2 {
    margin: 10px 0 20px;
}

.card-filter {
    display: grid;
    grid-template-columns: 1fr auto;
}

.stock.card-filter,
.row.filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.stock.card-filter { justify-content: center; }

.stock label { font-size: 14px;  }  

.stock .row.filter .group-style,
.stock .row.filter .product-style{
    flex: 0 0 48%;
}

.stock .row.filter .button-style { flex: 0 0 100%; } 

.stock.card-filter .row.filter { flex: 0 0 100%; } 

.card-filter {
    gap: 20px;
    align-items: center;
}

.card-filter .filter-count {
    color: green;
    font-size: 14px;
    padding: 20px 20px 5px;
    text-align: center;
    font-weight: bold;
}

.products-card .muted {
    font-size: 12px;
}

.products-card .price {
    text-align: end;
}

.products-card input[type="number"],
.products-card .qtywrap button {
    padding: 6px;
}

.products-card .addbtn {
    padding: 6px 12px;
}

.orders-card .muted,
.order-card label.muted {
    margin-bottom: 5px;
    display: block;
}

.orders-card .muted,
.order-card .muted {
    font-size: 12px;
}

.client-filter button[type="button"],
.ordersmodel button,
.orders-card button,
.order-card .success {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 0;
    box-shadow: none;
    padding: 8px;
}

.order-card a.link {
    font-size: 14px;
    padding: 0;
    line-height: 1;
    text-decoration: underline;
}

.order-card .row:has(a.link) {
    flex-direction: column-reverse;
}


.card.orders-table {
    overflow-x: auto;
    /* enable horizontal scroll on small screens */
    -webkit-overflow-scrolling: touch;
    /* smooth scroll on iOS */
}

.card.orders-table table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    /* make sure table doesn't shrink too much */
}

.card.orders-table th,
.card.orders-table td {
    padding: 12px 16px;
    white-space: nowrap;
    /* prevent text wrap in cells */
    border-bottom: 1px solid #ddd;
}

.card.orders-table th.right,
.card.orders-table td.right {
    text-align: right;
}

.card.orders-table tbody tr:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

#clientModal h3,
.ordersmodel h3 {
    margin: 0 0 10px;
}

.ordersmodel .muted div {
    font-size: 14px;
}

.ordersmodel table th,
.ordersmodel table td {
    text-align: start;
}

.ordersmodel table td {
    font-size: 12px;
}

.qty-row { display: grid; grid-template-columns: 50px 1fr; }
.qty-row input { text-align: center; }
.client-filter form {
    display: grid;
    grid-template-columns: 1fr auto;
}

.card table th {
    text-align: start;
    font-size: 16px;
}

.card-filter .note {
    margin-top: 0;
    width: calc(100% + 62px);
    border: 1px solid #0a7a2f;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
}

/* Responsive styles */
@media screen and (min-width: 767px) {
    body {
        display: none;
    }
}


.products-card div.muted span {
    color: green;
}

.products-card div.muted[data-text="0"] span {
    color: red;
}


/* make Select2 match your buttons/cards ---------------------------------------------------------------------- */
.select2-container--default .select2-selection--single {
  height: 42px;              /* same height as Filter button */
  border: 1px solid #ccc;
  border-radius: 8px;        /* rounded corners */
  padding: 6px 10px;
  font-size: 14px;
  background-color: #fff;
  box-shadow: none;
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  padding-left: 0;
  color: #333;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 10px;
}

/* dropdown menu */
.select2-container--default .select2-results>.select2-results__options {
  max-height: 200px;
  overflow-y: auto;
}

.select2-dropdown {
  border-radius: 8px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.card-filter span.select2 .selection span.select2-selection {
    display: grid;
    align-items: center;
    position: relative;
    border-radius: 10px !important;
}

.card-filter span.select2 .selection span.select2-selection button.select2-selection__clear,
.card-filter span.select2 .selection span.select2-selection span.select2-product-select-container {
    grid-area: 1/-1 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered { position: absolute; font-size: 12px; left: 15px; }
.select2-results__option { font-size: 12px !important; } 
.select2-container .select2-selection--single { height: 43px !important; }

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px !important; }

.products-card:has([data-text="0"]),
.products-card:has([data-text^="-"]) { display: none; }

.product-wrapper .card.stock.card-filter #product-names { display: none !important; }

/* Login Styles */
.login-style span.note { color: var(--color-text); text-align: center; margin-bottom: 15px; }
.login-style span.note a { color: var(--color-primary); }

body:has(.login-style) .topbar,
body:has(.login-style) nav.nav { display: none; }

.login-style { margin: 0; }

.product-wrapper:has(.login-style) { height: 100vh; display: flex; flex-direction: column; justify-content: center; margin: 0; }
.product-wrapper:has(.login-style) .alert-bar { font-size: 12px; text-align: center; }