/* =========================================================
   AL-OQAB ERP
   Professional Commercial Interface v1.6.0
   ========================================================= */

:root {

    --oq-turquoise-900: #083f43;
    --oq-turquoise-800: #0c5156;
    --oq-turquoise-700: #0f6369;
    --oq-turquoise-600: #14767c;
    --oq-turquoise-500: #1b8b90;

    --oq-turquoise-soft: #e8f4f3;
    --oq-turquoise-soft2: #f1f8f7;

    --oq-sand-700: #a77c45;
    --oq-sand-600: #bd9257;
    --oq-sand-500: #d1ad78;
    --oq-sand-300: #e2c99f;

    --oq-sand-soft: #f8f0e5;
    --oq-sand-soft2: #fcf8f2;

    --oq-bg: #f3f6f5;
    --oq-white: #ffffff;

    --oq-text: #192a2c;
    --oq-muted: #687879;

    --oq-border: #d7e2e0;
    --oq-border-dark: #c5d3d0;

    --oq-success: #218364;
    --oq-warning: #b88339;
    --oq-danger: #b94c4c;
    --oq-info: #28798a;

    --oq-radius-s: 8px;
    --oq-radius: 13px;
    --oq-radius-l: 18px;

    --oq-shadow-xs:
        0 2px 8px rgba(8,63,67,.04);

    --oq-shadow:
        0 7px 22px rgba(8,63,67,.07);

    --oq-shadow-lg:
        0 18px 50px rgba(8,63,67,.12);
}

/* =========================================================
   GLOBAL
   ========================================================= */

html {
    direction: rtl !important;
    scroll-behavior: smooth;
}

body {
    direction: rtl !important;
    text-align: right !important;

    margin: 0;

    color: var(--oq-text);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(209,173,120,.11),
            transparent 420px
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(27,139,144,.065),
            transparent 500px
        ),
        var(--oq-bg) !important;

    font-family:
        "Noto Kufi Arabic",
        "Noto Sans Arabic",
        "IBM Plex Sans Arabic",
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif !important;

    font-size: 14px;
    line-height: 1.8;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

::selection {
    background: var(--oq-turquoise-600);
    color: white;
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #17484b;

    font-family: inherit !important;

    font-weight: 900 !important;
    line-height: 1.55;
}

h1 {
    font-size: clamp(23px, 2vw, 31px);
}

h2 {
    font-size: clamp(20px, 1.6vw, 26px);
}

h3 {
    font-size: 18px;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar,
aside.sidebar,
.nav-sidebar {
    background:
        linear-gradient(
            180deg,
            #0e666b 0%,
            #0b5358 46%,
            #083f43 100%
        ) !important;

    color: white !important;

    border-left:
        1px solid rgba(255,255,255,.07);

    box-shadow:
        -5px 0 24px rgba(4,46,49,.09);
}

/* Official developer logo */

.oq-brand-official {
    width: calc(100% - 20px);

    margin: 10px auto 12px;
    padding: 10px 8px 9px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border:
        1px solid rgba(226,201,159,.16);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );
}

.oq-brand-official img {
    display: block !important;

    width: 94px !important;
    height: 94px !important;

    object-fit: contain !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 13px !important;
    border: 0 !important;

    background: #050505 !important;

    box-shadow:
        0 7px 22px rgba(0,0,0,.20);
}

.oq-brand-system {
    margin-top: 6px;

    color:
        rgba(255,255,255,.66);

    font-size: 9px;
    font-weight: 700;

    text-align: center;
}

/* menu */

.sidebar a,
.sidebar .nav-link,
.nav-sidebar a {
    min-height: 42px;

    display: flex;
    align-items: center;

    margin: 3px 8px;
    padding: 8px 12px !important;

    color:
        rgba(255,255,255,.83) !important;

    border-radius: 9px;

    font-weight: 700 !important;

    transition:
        background .16s ease,
        transform .16s ease;
}

.sidebar a:hover,
.sidebar .nav-link:hover {
    color: white !important;

    background:
        rgba(255,255,255,.095) !important;

    transform:
        translateX(-2px);
}

.sidebar a.active,
.sidebar .nav-link.active {
    color:
        white !important;

    background:
        linear-gradient(
            90deg,
            rgba(209,173,120,.24),
            rgba(255,255,255,.09)
        ) !important;

    border-right:
        4px solid #e1bb82 !important;
}

.sidebar .nav-header,
.sidebar .menu-title,
.sidebar [class*="section-title"] {
    position: relative;

    margin:
        20px 16px 7px !important;

    padding-top:
        13px !important;

    color:
        #e7cca5 !important;

    font-size:
        10px !important;

    font-weight:
        900 !important;

    border-top:
        1px solid rgba(255,255,255,.10);
}

/* =========================================================
   TOP BAR
   ========================================================= */

.navbar,
.topbar,
header.navbar {
    min-height: 65px;

    background:
        rgba(255,255,255,.97) !important;

    border-bottom:
        1px solid var(--oq-border) !important;

    box-shadow:
        0 3px 14px rgba(8,63,67,.045);

    backdrop-filter:
        blur(12px);
}

/* =========================================================
   PAGE CONTENT
   ========================================================= */

main,
.main-content,
.content,
.page-content,
.dashboard-content {
    padding-bottom:
        30px;
}

.container,
.container-fluid {
    padding-inline:
        clamp(16px, 2vw, 30px) !important;
}

/* =========================================================
   PAGE TITLE
   ========================================================= */

.page-header,
.content-header,
.section-header,
.dashboard-header {
    position: relative;

    margin-bottom:
        23px !important;

    padding:
        17px 20px !important;

    background:
        linear-gradient(
            135deg,
            #fff 0%,
            #f2f9f8 100%
        ) !important;

    border:
        1px solid var(--oq-border) !important;

    border-right:
        5px solid var(--oq-turquoise-600) !important;

    border-radius:
        13px !important;

    box-shadow:
        var(--oq-shadow-xs);
}

.page-header h1,
.page-header h2,
.content-header h1,
.content-header h2 {
    margin-bottom:
        3px;
}

/* =========================================================
   DASHBOARD SECTIONS / SEPARATORS
   ========================================================= */

section,
.dashboard-section,
.form-section,
.data-section,
.report-section {
    position: relative;
}

section + section,
.dashboard-section + .dashboard-section,
.form-section + .form-section,
.data-section + .data-section,
.report-section + .report-section {
    margin-top:
        28px !important;

    padding-top:
        28px !important;

    border-top:
        2px solid transparent !important;

    background-image:
        linear-gradient(
            var(--oq-bg),
            var(--oq-bg)
        ),
        linear-gradient(
            to left,
            transparent,
            rgba(20,118,124,.30),
            rgba(209,173,120,.46),
            rgba(20,118,124,.30),
            transparent
        );

    background-origin:
        border-box;

    background-clip:
        padding-box,
        border-box;
}

/* =========================================================
   CARDS
   ========================================================= */

.card,
.panel,
.widget,
.box,
.content-box,
.dashboard-card,
.stat-card,
.kpi-card,
.metric-card {
    background:
        linear-gradient(
            145deg,
            #fff,
            #fcfdfd
        ) !important;

    border:
        1px solid var(--oq-border) !important;

    border-radius:
        14px !important;

    box-shadow:
        var(--oq-shadow-xs) !important;

    overflow: hidden;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}

.card:hover,
.dashboard-card:hover,
.stat-card:hover,
.kpi-card:hover {
    transform:
        translateY(-1px);

    border-color:
        #bdd5d1 !important;

    box-shadow:
        var(--oq-shadow) !important;
}

.card-header,
.panel-heading,
.box-header {
    padding:
        14px 17px !important;

    color:
        #14585c !important;

    font-weight:
        900 !important;

    background:
        linear-gradient(
            90deg,
            var(--oq-turquoise-soft),
            var(--oq-sand-soft)
        ) !important;

    border-bottom:
        1px solid var(--oq-border) !important;
}

.card-body,
.panel-body,
.box-body {
    padding:
        18px !important;
}

/* KPI */

.stat-card,
.kpi-card,
.metric-card {
    position: relative;

    min-height:
        125px;

    padding:
        18px !important;

    border-top:
        3px solid var(--oq-turquoise-600) !important;
}

.stat-card::after,
.kpi-card::after,
.metric-card::after {
    content: "";

    position:
        absolute;

    right:
        12px;

    top:
        16px;

    bottom:
        16px;

    width:
        3px;

    border-radius:
        8px;

    background:
        linear-gradient(
            to bottom,
            var(--oq-turquoise-500),
            var(--oq-sand-500)
        );
}

.stat-value,
.kpi-value,
.metric-value {
    color:
        #0f5e63 !important;

    font-size:
        25px;

    font-weight:
        900 !important;
}

/* =========================================================
   TABLES
   ========================================================= */

.table-responsive {
    border:
        1px solid var(--oq-border);

    border-radius:
        13px;

    background:
        white;

    overflow-x:
        auto;

    box-shadow:
        var(--oq-shadow-xs);
}

table,
.table {
    width:
        100%;

    margin-bottom:
        0 !important;

    border-collapse:
        separate !important;

    border-spacing:
        0 !important;
}

table thead th,
.table thead th {
    padding:
        12px 12px !important;

    color:
        #154f53 !important;

    background:
        linear-gradient(
            180deg,
            #e8f4f2,
            #e1eeec
        ) !important;

    border-bottom:
        2px solid #bfd1ce !important;

    font-size:
        12.5px;

    font-weight:
        900 !important;

    text-align:
        right !important;

    white-space:
        nowrap;
}

table tbody td,
.table tbody td {
    padding:
        12px !important;

    color:
        #273637;

    border-bottom:
        1px solid #ecf1f0 !important;

    font-size:
        13px;

    vertical-align:
        middle !important;

    text-align:
        right !important;
}

table tbody tr:nth-child(even) {
    background:
        #fafcfb;
}

table tbody tr:hover {
    background:
        #edf7f5 !important;
}

/* =========================================================
   FORMS
   ========================================================= */

label,
.form-label {
    display:
        block;

    margin-bottom:
        6px;

    color:
        #36595b;

    font-size:
        13px;

    font-weight:
        800 !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control {
    min-height:
        44px !important;

    padding:
        8px 12px !important;

    color:
        #243435 !important;

    background:
        #fff !important;

    border:
        1px solid var(--oq-border-dark) !important;

    border-radius:
        9px !important;

    font-family:
        inherit !important;

    font-size:
        14px !important;

    transition:
        border-color .16s ease,
        box-shadow .16s ease;
}

textarea {
    min-height:
        100px !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    outline:
        none !important;

    border-color:
        var(--oq-turquoise-500) !important;

    box-shadow:
        0 0 0 3px rgba(27,139,144,.10) !important;
}

.form-group,
.mb-3 {
    margin-bottom:
        18px !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

button,
.btn,
input[type="submit"],
input[type="button"] {
    min-height:
        40px;

    padding:
        7px 15px !important;

    border-radius:
        9px !important;

    font-family:
        inherit !important;

    font-size:
        13px;

    font-weight:
        900 !important;

    transition:
        transform .14s ease,
        box-shadow .14s ease;
}

button:hover,
.btn:hover {
    transform:
        translateY(-1px);
}

.btn-primary,
button.primary,
input[type="submit"] {
    color:
        white !important;

    background:
        linear-gradient(
            135deg,
            #0f6369,
            #19868b
        ) !important;

    border-color:
        transparent !important;

    box-shadow:
        0 5px 15px rgba(15,99,105,.17);
}

.btn-secondary,
.btn-light {
    color:
        #725735 !important;

    background:
        var(--oq-sand-soft2) !important;

    border:
        1px solid #ddc39d !important;
}

.btn-success {
    color:
        white !important;

    background:
        var(--oq-success) !important;
}

.btn-danger {
    color:
        white !important;

    background:
        var(--oq-danger) !important;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.toolbar,
.actions,
.page-actions,
.form-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-bottom:
        18px !important;

    padding:
        10px 12px !important;

    background:
        linear-gradient(
            90deg,
            rgba(232,244,243,.78),
            rgba(248,240,229,.68)
        );

    border:
        1px solid var(--oq-border);

    border-radius:
        11px;
}

/* =========================================================
   ALERTS
   ========================================================= */

.alert,
.message,
.notification {
    margin-bottom:
        14px;

    padding:
        12px 14px !important;

    border-radius:
        10px !important;

    border-right:
        4px solid;
}

.alert-success {
    color:
        #17654b;

    background:
        #eef9f4 !important;

    border-color:
        #59a98b;
}

.alert-warning {
    color:
        #795719;

    background:
        #fff7e8 !important;

    border-color:
        #c99b50;
}

.alert-danger,
.alert-error {
    color:
        #923d3d;

    background:
        #fff0f0 !important;

    border-color:
        #c96262;
}

/* =========================================================
   COPYRIGHT
   ========================================================= */

.oq-final-copyright {
    width:
        calc(100% - 32px);

    max-width:
        980px;

    margin:
        28px auto 14px;

    padding:
        10px 15px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px 11px;

    color:
        #5c7071;

    background:
        linear-gradient(
            90deg,
            rgba(232,244,243,.85),
            rgba(248,240,229,.78)
        );

    border:
        1px solid var(--oq-border);

    border-radius:
        10px;

    font-size:
        10.5px;
}

.oq-final-copyright strong {
    color:
        var(--oq-turquoise-700);
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */

body.oq-login-page {
    min-height:
        100vh;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(209,173,120,.20),
            transparent 400px
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(27,139,144,.17),
            transparent 480px
        ),
        linear-gradient(
            135deg,
            #eef5f3,
            #f8f2e9
        ) !important;
}

/* =========================================================
   SPLASH
   ========================================================= */

#oq-splash-screen {
    position:
        fixed;

    inset:
        0;

    z-index:
        999999;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    background:
        radial-gradient(
            circle at center,
            #0c2829,
            #030808 72%
        );

    opacity:
        1;

    visibility:
        visible;

    transition:
        opacity .65s ease,
        visibility .65s ease;
}

#oq-splash-screen.oq-splash-hide {
    opacity:
        0;

    visibility:
        hidden;
}

.oq-splash-inner {
    text-align:
        center;
}

.oq-splash-logo {
    width:
        min(320px, 68vw);

    height:
        auto;

    display:
        block;

    margin:
        0 auto;

    border-radius:
        26px;

    box-shadow:
        0 20px 65px rgba(0,0,0,.45);

    animation:
        oqSplashLogo 1.3s ease both;
}

.oq-splash-title {
    margin-top:
        22px;

    color:
        #efce91;

    font-size:
        clamp(18px, 2vw, 28px);

    font-weight:
        900;

    animation:
        oqSplashText 1.8s ease both;
}

.oq-splash-description {
    margin-top:
        7px;

    color:
        rgba(255,255,255,.62);

    font-size:
        12px;
}

.oq-splash-loader {
    width:
        min(290px, 64vw);

    height:
        3px;

    margin:
        27px auto 0;

    overflow:
        hidden;

    background:
        rgba(255,255,255,.10);

    border-radius:
        10px;
}

.oq-splash-loader::after {
    content:
        "";

    display:
        block;

    width:
        0;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            var(--oq-turquoise-500),
            #e4b96f
        );

    animation:
        oqSplashLoad 5s linear forwards;
}

@keyframes oqSplashLogo {

    from {
        opacity: 0;
        transform: scale(.90);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes oqSplashText {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes oqSplashLoad {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* =========================================================
   LOGIN CARD
   ========================================================= */

.login-card,
.auth-card,
.login-box,
.login-panel,
.oq-login-card {
    width:
        min(440px, calc(100vw - 30px));

    margin-inline:
        auto;

    padding:
        25px !important;

    background:
        rgba(255,255,255,.97) !important;

    border:
        1px solid var(--oq-border) !important;

    border-radius:
        19px !important;

    box-shadow:
        var(--oq-shadow-lg) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    body {
        font-size:
            13.5px;
    }

    .container,
    .container-fluid {
        padding-inline:
            12px !important;
    }

    .card-body,
    .panel-body,
    .box-body {
        padding:
            14px !important;
    }

    .oq-brand-official img {
        width:
            80px !important;

        height:
            80px !important;
    }

    table thead th,
    table tbody td {
        padding:
            9px !important;

        font-size:
            12px !important;
    }

}

@media print {

    .sidebar,
    .navbar,
    .topbar,
    #oq-splash-screen {
        display:
            none !important;
    }

    body {
        background:
            white !important;
    }
}


/* ==========================================================
   ALOQAB CUSTOMER DEBT V161
   ========================================================== */

.v161-aging-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin:16px 0 22px;
}

.v161-aging-card{
    display:flex;
    flex-direction:column;
    gap:7px;
    padding:16px;
    border:1px solid var(--border-color,#e5e7eb);
    border-radius:14px;
    background:var(--card-bg,#fff);
    text-decoration:none;
    color:inherit;
    transition:.18s ease;
}

.v161-aging-card:hover{
    transform:translateY(-2px);
}

.v161-aging-card span{
    font-size:13px;
    opacity:.72;
}

.v161-aging-card strong{
    font-size:21px;
}

.v161-aging-danger{
    border-color:#ef4444;
}

@media(max-width:1100px){
    .v161-aging-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){
    .v161-aging-grid{
        grid-template-columns:1fr;
    }
}

/* ALOQAB CUSTOMER DEBT V161 END */


/* ============================================================
   ALOQAB INVENTORY V162
   ============================================================ */

.inventory-count-input{
min-width:130px;
font-weight:700;
text-align:center;
}

.barcode-label-grid{
margin-top:16px;
}

@media(max-width:900px){

.barcode-label-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:560px){

.barcode-label-grid{
grid-template-columns:1fr;
}

}

/* ALOQAB INVENTORY V162 END */