@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap");

:root {
    --tblr-font-sans-serif: "Noto Kufi Arabic", sans-serif;
}

* {
    font-family: "Noto Kufi Arabic", sans-serif;
}

body {
    background: #f5f7fb;
}

.auth-logo,
.auth-panel img {
    height: 130px;
    width: auto;
}

.app-sidebar{position:fixed;top:0;right:0;bottom:0;width:240px;background:#fff;border-left:1px solid #e6e8eb;z-index:1030;overflow-y:auto;transition:transform .2s}
.app-sidebar-brand{display:flex;align-items:center;justify-content:center;height:64px;border-bottom:1px solid #e6e8eb}
.app-sidebar-brand img{width:auto}
.app-sidebar-brand .brand-icon{height:42px}
.app-sidebar-brand .brand-text{height:42px;margin-left:2px}
.app-sidebar-menu{padding:.75rem 0}
.app-sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.7rem 1.25rem;color:#1d273b;font-weight:600;text-decoration:none}
.app-sidebar-link:hover{background:#f1f5f9;color:#1d273b;text-decoration:none}
.app-sidebar-link.active{background:#26a69a;color:#fff}
.app-main{margin-right:240px;min-height:100vh;display:flex;flex-direction:column;transition:margin .2s}
.app-topbar{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 1.5rem;background:#fff;border-bottom:1px solid #e6e8eb}
.app-menu-toggle{border:0;background:none;color:#1d273b;padding:.25rem}
.app-topbar-start{display:flex;align-items:center;gap:1rem;min-width:0}
.device-picker-toggle{display:flex;align-items:center;gap:.5rem;width:280px;padding:.4rem .75rem;border:1px solid #dce1e7;border-radius:6px;background:#fff;color:#1d273b;font-weight:600}
.device-picker-toggle:hover,.device-picker-toggle[aria-expanded=true]{border-color:#206bc4}
.device-picker-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:start}
.device-picker-menu{width:100%;min-width:100%;max-height:420px;overflow-y:auto;padding:.35rem 0}
.device-picker-menu .dropdown-item{display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem}
.device-picker-menu .dropdown-item.active{background:#e9f0fb;color:#1d273b}
.device-picker-name{font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.device-picker-phone{font-size:.8rem;color:#667382}
.device-picker-search{padding:.25rem .75rem .5rem}
.device-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#d63939}
.device-dot.on{background:#2fb344}
.device-dot.all{background:#206bc4}
.min-w-0{min-width:0}
@media (max-width:575.98px){.device-picker-toggle{width:170px}.device-picker-menu{min-width:260px}}
.app-content{flex:1;padding:1.5rem}
.app-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 1.5rem;background:#f6f8fb;border-top:1px solid #e6e8eb;color:#667382;font-size:.85rem}
.app-footer-dot{margin:0 .5rem}
.app-footer-links a{color:#667382;text-decoration:none}
.app-footer-links a:hover{color:#206bc4}
.app-sidebar{transition:width .2s,transform .2s}
body.sidebar-collapsed .app-sidebar{width:80px;overflow:visible}
body.sidebar-collapsed .app-sidebar-link svg{width:24px;height:24px}
body.sidebar-collapsed .app-sidebar-brand .brand-icon{height:34px}
body.sidebar-collapsed .app-sidebar-brand .brand-text{display:none}
body.sidebar-collapsed .app-sidebar-menu{padding:.25rem 0}
body.sidebar-collapsed .app-sidebar-link{justify-content:center;padding:.8rem 0}
body.sidebar-collapsed .app-sidebar-link span{display:none}
body.sidebar-collapsed .app-main{margin-right:80px}
@media (max-width:991.98px){
.app-sidebar{transform:translateX(100%)}
.app-main,body.sidebar-collapsed .app-main{margin-right:0}
body.sidebar-open .app-sidebar{transform:none}
}
.app-user-link{display:flex;align-items:center;gap:.5rem;color:#1d273b;font-weight:600;text-decoration:none}
.app-user-link:hover{color:#206bc4;text-decoration:none}
.app-user-menu{min-width:180px;padding:.35rem 0}
.app-user-menu .dropdown-item{display:flex;align-items:center;gap:.6rem;padding:.55rem 1rem;font-weight:600;width:100%}
.app-user-menu form{margin:0}
.app-user-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#e8f5e9;color:#26a69a}
.settings-header{background:#fff;margin:-1.5rem -1.5rem 0;padding:1.25rem 1.5rem;border-bottom:1px solid #e6e8eb}
.settings-title{display:flex;align-items:center;gap:.5rem;margin:0;font-size:1.1rem;font-weight:700}
.settings-breadcrumb{display:flex;align-items:center;gap:.5rem;margin:0 -1.5rem 1.25rem;padding:.75rem 1.5rem;font-size:.85rem}
.settings-breadcrumb a{color:#1d273b;font-weight:600;text-decoration:none}
.settings-card{background:#fff;border:1px solid #dce1e7;border-radius:4px;overflow:hidden}
.settings-card-header{background:#2b3a42;color:#fff;font-weight:700;padding:.9rem 1.25rem}
.settings-card-body{padding:1.25rem}
.settings-card-footer{padding:.9rem 1.25rem;border-top:1px solid #e6e8eb}
.settings-menu a{display:flex;align-items:center;gap:.6rem;padding:.75rem 1.25rem;color:#1d273b;font-weight:600;text-decoration:none;border-bottom:1px solid #eef0f2}
.settings-menu a:last-child{border-bottom:0}
.settings-menu a:hover{background:#f1f5f9;text-decoration:none}
.settings-menu a.active{background:#2196f3;color:#fff}
.log-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;white-space:nowrap}
.log-btn svg{flex-shrink:0}
.log-filter-actions{display:flex;gap:.5rem}
.log-filter-actions .log-btn{flex:1;height:38px;padding-inline:.5rem}
.log-row-actions{display:flex;justify-content:flex-end;gap:.4rem}
.log-row-actions form{margin:0}
.log-row-actions .log-btn{min-width:96px}
.api-endpoint{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.api-endpoint-url{flex:1 1 auto;min-width:0;padding:.35rem .6rem;background:#f6f8fb;border:1px solid #e6e8eb;border-radius:4px;color:#1d273b;word-break:break-all}
.api-params td{vertical-align:top}
.api-code{position:relative}
.api-code pre{margin:0;max-height:460px;overflow:auto;padding:1rem;padding-top:2.4rem;background:#1e293b;color:#e2e8f0;border-radius:6px;font-family:Consolas,"Courier New",monospace;font-size:.8rem;line-height:1.55;text-align:left;white-space:pre}
.api-code pre code{color:inherit;background:none;padding:0}
.api-code-copy{position:absolute;top:.5rem;left:.5rem;display:grid;place-items:center;width:32px;height:32px;border:1px solid #475569;border-radius:4px;background:#334155;color:#e2e8f0;cursor:pointer}
.api-code-copy:hover{background:#475569}
.api-code-copy.copied{background:#2fb344;border-color:#2fb344}
.api-steps{margin:0;padding-inline-start:1.2rem;line-height:2}
.bulk-vars{display:flex;flex-wrap:wrap;gap:.4rem}
.bulk-var{border:1px solid #206bc4;background:#e8f1fb;color:#206bc4;border-radius:999px;padding:.2rem .75rem;font-size:.85rem;cursor:pointer}
.bulk-var:hover{background:#206bc4;color:#fff}
.bulk-preview{background:#efeae2;display:flex;flex-direction:column;gap:1rem;min-height:200px}
.bulk-preview-to{font-size:.8rem;color:#667781;margin-bottom:.25rem;direction:ltr;text-align:end}
.bulk-bubble{background:#d9fdd3;border-radius:.6rem;padding:.6rem .8rem;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.log-btn.copied{color:#fff;background:#2fb344;border-color:#2fb344}
.message-log-content{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-card-link{color:inherit;text-decoration:none}
.status-card-link:hover{color:var(--c);text-decoration:none}
.status-card{display:flex;flex-direction:column;gap:.6rem;height:100%;padding:1rem 1.1rem;background:#fff;border:1px solid #e6e8eb;border-top:3px solid var(--c);border-radius:6px}
.status-card-head{display:flex;align-items:flex-start;justify-content:space-between}
.status-card-title{color:#667382;font-weight:600}
.status-card-count{font-size:1.75rem;font-weight:700;line-height:1.2;color:#1d273b}
.status-card-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c)}
.status-card-bar{height:5px;border-radius:3px;background:#eef1f4;overflow:hidden}
.status-card-bar span{display:block;height:100%;background:var(--c)}
.status-card-sub{color:#667382;font-size:.8rem}
.status-card-actions{display:flex;gap:.4rem;margin-top:auto}
.status-card-actions form{flex:1;margin:0}
.stat-card{background:#4caf50;color:#fff;border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.stat-card-blue{background:#2196f3}
.stat-card-teal{background:#26a69a}
.stat-card .stat-card-footer{margin-top:auto}
.stat-card-body{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem}
.stat-card-number{font-size:1.75rem;font-weight:700;line-height:1}
.stat-card-footer{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.5rem;border-top:1px solid rgba(255,255,255,.25);color:#fff;font-weight:600;text-decoration:none}
.stat-card-footer:hover{background:rgba(0,0,0,.06);color:#fff;text-decoration:none}
.page-title { font-weight: 700; }
.card { border-radius: 10px; }
.auth-panel{background-color:#fff;background-image:url("/img/points.png")}
.border-top-wide{border-top:.25rem solid #206bc4!important}
.bg-cover{background-size:cover;background-repeat:no-repeat;background-position:center}
.validation-summary-valid{display:none}
.token-actions{display:inline-flex}
.token-actions .btn{border-radius:0}
.token-actions form:first-child .btn{border-start-start-radius:.25rem;border-end-start-radius:.25rem}
.token-actions form:last-child .btn{border-start-end-radius:.25rem;border-end-end-radius:.25rem;margin-inline-start:-1px}
.api-key-group{display:flex;flex-direction:row;direction:ltr;align-items:stretch;width:100%}
.api-key-group .copy-api-key{display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;margin:0;padding:0;border:1px solid #206bc4;border-radius:4px 0 0 4px;background:#fff;color:#206bc4;line-height:0}
.api-key-group .copy-api-key svg{display:block}
.api-key-group .copy-api-key.copied{background:#2fb344;border-color:#2fb344;color:#fff}
.api-key-field{flex:1 1 auto;min-width:0;height:38px;margin:0;padding:0 .6rem;border:1px solid #dce1e7;border-left:0;border-radius:0 4px 4px 0;background:#fff;direction:ltr;text-align:left;font-family:Consolas,"Courier New",monospace;font-size:.8rem}
.iban-number{display:inline-block;font-family:SFMono-Regular,Consolas,monospace;font-size:1.05rem;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.table .col-serial{width:1%;padding-left:.6rem;padding-right:.6rem;text-align:center;white-space:nowrap;background:#f0f2f5;color:#495057;border-inline-end:1px solid #e6e8eb}
.empty-records{padding:2.5rem 1rem}.empty-records .empty-img img{height:128px}
.table .col-serial{min-width:48px}.table thead th.col-serial svg{width:20px;min-width:20px;height:20px;max-width:none;vertical-align:middle}
.app-topbar-end{display:flex;align-items:center;gap:.75rem}.app-notify-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:#495057}.app-notify-link:hover{background:#f0f2f5;color:#206bc4}.app-notify-badge{position:absolute;top:2px;left:0;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#d63939;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px #fff}.app-notify-menu{width:320px;padding:0;overflow:hidden}.app-notify-head{display:flex;justify-content:space-between;align-items:center;padding:.65rem 1rem;border-bottom:1px solid #e6e8eb;background:#f8f9fa}.app-notify-empty{padding:1.25rem 1rem;text-align:center;color:#667382}.app-notify-item{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem 1rem;white-space:normal;border-bottom:1px solid #f0f2f5}.app-notify-dot{flex:0 0 8px;width:8px;height:8px;margin-top:.45rem;border-radius:50%;background:#f59f00}
