/* =====================================================================
   AS Gateway theme - look only (colours, spacing, shapes).
   Loaded after AdminLTE, the skin and custom.css, and BEFORE webview.css,
   so the Android app keeps hiding the header / menu exactly as before.
   No page markup or JavaScript depends on this file.
   ===================================================================== */
:root {
    --gw-brand: #2563eb;
    --gw-brand-2: #6d28d9;
    --gw-brand-soft: #eef2ff;
    --gw-wa: #25d366;
    --gw-wa-dark: #128c7e;
    --gw-bg: #f4f6fb;
    --gw-card: #ffffff;
    --gw-text: #1f2937;
    --gw-muted: #6b7280;
    --gw-line: #e5e7eb;
    --gw-radius: 12px;
    --gw-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 10px rgba(16, 24, 40, .06);
}

body, .content-wrapper, .right-side {
    background-color: var(--gw-bg);
    color: var(--gw-text);
}
body { font-family: "Inter", "Source Sans Pro", "Segoe UI", Roboto, Arial, sans-serif; }

/* ---- top bar ------------------------------------------------------------ */
.main-header .navbar,
.skin-black-light .main-header .navbar,
.skin-black-light .main-header > .navbar {
    background: #fff;
    border-bottom: 1px solid var(--gw-line);
    box-shadow: 0 1px 4px rgba(16, 24, 40, .04);
}
.main-header .logo,
.skin-black-light .main-header .logo {
    background: #fff;
    border-right: 1px solid var(--gw-line);
    border-bottom: 1px solid var(--gw-line);
}
.skin-black-light .main-header .logo:hover { background: #fff; }
.main-header .sidebar-toggle,
.skin-black-light .main-header .navbar .sidebar-toggle { color: var(--gw-muted); border-right: 0; }
.main-header .sidebar-toggle:hover { color: var(--gw-brand); background: transparent; }
.main-header .navbar-custom-menu .nav > li > a,
.skin-black-light .main-header .navbar .nav > li > a { color: var(--gw-text); border-left: 0; }
.main-header .navbar-custom-menu .nav > li > a:hover { background: var(--gw-brand-soft); color: var(--gw-brand); }
.main-header .user-image { border: 2px solid var(--gw-brand-soft); }

/* ---- side menu ---------------------------------------------------------- */
.main-sidebar, .left-side,
.skin-black-light .main-sidebar {
    background: #fff;
}
.wrapper, .skin-black-light .wrapper { background-color: var(--gw-bg); }
.main-sidebar { border-right: 1px solid var(--gw-line); box-shadow: none; }
.skin-black-light .main-sidebar { border-right: 1px solid var(--gw-line); }
.user-panel { padding: 14px 12px; border-bottom: 1px solid var(--gw-line); margin-bottom: 4px; }
.user-panel > .info > p { color: var(--gw-text); font-weight: 600; }
.user-panel > .info > a { color: var(--gw-muted); }
.sidebar-menu > li.header,
.skin-black-light .sidebar-menu > li.header {
    background: transparent;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 14px 18px 6px;
}
.sidebar-menu > li > a,
.skin-black-light .sidebar-menu > li > a {
    color: #374151;
    border-left: 0;
    margin: 1px 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-weight: 500;
}
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion { width: 22px; color: #6b7280; }
.sidebar-menu > li:hover > a,
.skin-black-light .sidebar-menu > li:hover > a {
    background: #f3f4f6;
    color: var(--gw-text);
}
.sidebar-menu > li.active > a,
.skin-black-light .sidebar-menu > li.active > a {
    background: var(--gw-brand-soft);
    color: var(--gw-brand);
    font-weight: 600;
}
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .glyphicon { color: var(--gw-brand); }
.sidebar-menu .gw-menu-badge {
    float: right;
    background: var(--gw-wa);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    margin-top: 1px;
}
.sidebar-menu hr { margin: 8px 18px; border-color: var(--gw-line); }
/* collapsed (mini) menu keeps the old behaviour */
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a { margin: 0; border-radius: 0; }
.sidebar-mini.sidebar-collapse .sidebar-menu .gw-menu-badge { display: none; }

/* ---- page title --------------------------------------------------------- */
.content-header > h1 { font-weight: 700; font-size: 22px; color: var(--gw-text); }
.content-header > .breadcrumb { background: transparent; }

/* ---- cards (boxes) ------------------------------------------------------ */
.box {
    background: var(--gw-card);
    border-radius: var(--gw-radius);
    border-top: 0;
    box-shadow: var(--gw-shadow);
    margin-bottom: 18px;
}
.box.box-primary, .box.box-success, .box.box-info, .box.box-warning, .box.box-danger, .box.box-default {
    border-top: 3px solid var(--gw-brand);
}
.box.box-success { border-top-color: var(--gw-wa); }
.box.box-warning { border-top-color: #f59e0b; }
.box.box-danger { border-top-color: #ef4444; }
.box.box-info { border-top-color: #0ea5e9; }
.box.box-default { border-top-color: #d1d5db; }
.box-header { padding: 12px 16px; }
.box-header.with-border { border-bottom: 1px solid var(--gw-line); }
.box-header .box-title { font-weight: 600; font-size: 16px; }
.box-body { padding: 14px 16px; }
.box-footer { border-radius: 0 0 var(--gw-radius) var(--gw-radius); border-top: 1px solid var(--gw-line); background: #fafbfc; }

/* ---- dashboard tiles ------------------------------------------------------ */
.small-box {
    border-radius: var(--gw-radius);
    box-shadow: var(--gw-shadow);
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}
.small-box:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 24, 40, .12); }
.small-box > .inner { padding: 14px 16px; }
.small-box h3 { font-weight: 700; }
.small-box .icon { opacity: .9; }

/* ---- forms & buttons ---------------------------------------------------- */
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 8px;
    border-color: #d1d5db;
    box-shadow: none;
}
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--gw-brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.input-group .input-group-addon { border-color: #d1d5db; background: #f9fafb; color: var(--gw-muted); }
.input-group .input-group-addon:first-child { border-radius: 8px 0 0 8px; }
.input-group .form-control:last-child { border-radius: 0 8px 8px 0; }
.btn { border-radius: 8px; font-weight: 600; }
.btn.btn-flat { border-radius: 8px; }
.btn-primary { background: var(--gw-brand); border-color: var(--gw-brand); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: #1d4ed8; border-color: #1d4ed8; }
.btn-success { background: #16a34a; border-color: #16a34a; }
.btn-success:hover, .btn-success:focus { background: #15803d; border-color: #15803d; }

/* ---- tables ------------------------------------------------------------- */
.table > thead > tr > th { background: #f9fafb; color: #4b5563; font-weight: 600; border-bottom: 1px solid var(--gw-line); }
.table > tbody > tr > td { border-top: 1px solid #f1f2f4; vertical-align: middle; }
.table-hover > tbody > tr:hover { background: #f9fafb; }

/* ---- alerts, labels, modals --------------------------------------------- */
.alert { border-radius: 10px; }
.label { border-radius: 6px; }
.modal-content { border-radius: var(--gw-radius); border: 0; box-shadow: 0 20px 50px rgba(0, 0, 0, .2); }
.modal-header { border-bottom: 1px solid var(--gw-line); }
.modal-footer { border-top: 1px solid var(--gw-line); }

/* ---- timeline (Messages page) --------------------------------------------- */
.timeline > li > .timeline-item { border-radius: 10px; box-shadow: var(--gw-shadow); }
.timeline > li > .timeline-item > .timeline-header { border-bottom-color: var(--gw-line); }

.main-footer { background: transparent; border-top: 1px solid var(--gw-line); color: var(--gw-muted); }

/* =====================================================================
   Sign in / register / reset password
   ===================================================================== */
.login-page, .register-page {
    min-height: 100vh;
    background: radial-gradient(1200px 600px at 10% -10%, rgba(109, 40, 217, .18), transparent 60%),
                radial-gradient(900px 500px at 110% 110%, rgba(37, 211, 102, .15), transparent 60%),
                linear-gradient(135deg, #eef2ff 0%, #f8fafc 50%, #ecfdf5 100%);
    overflow-x: hidden;
}
.login-box, .register-box { width: 400px; max-width: calc(100% - 32px); margin: 6vh auto 24px; }
.login-logo, .register-logo { margin-bottom: 18px; }
.login-logo img, .register-logo img { max-width: 220px; height: auto !important; width: auto !important; max-height: 110px; }
.login-box-body, .register-box-body {
    border-radius: 16px;
    padding: 28px 26px;
    box-shadow: 0 10px 40px rgba(31, 41, 55, .12);
    border: 1px solid rgba(255, 255, 255, .6);
}
.login-box-msg, .register-box-msg { font-size: 15px; color: var(--gw-muted); padding-bottom: 18px; }
.login-box-body .form-control, .register-box-body .form-control { height: 42px; }
.login-box .box-footer, .register-box .box-footer { background: transparent; border: 0; margin-top: 10px; }

/* "Viewing as user" strip in the top bar (administrator opened the gateway as a user) */
.main-header .navbar-custom-menu .nav > li.gw-viewas > a,
.skin-black-light .main-header .navbar .nav > li.gw-viewas > a {
    background: #f59e0b;
    color: #fff;
    font-weight: 600;
}
.main-header .navbar-custom-menu .nav > li.gw-viewas > a:hover { background: #d97706; color: #fff; }

/* Page / AJAX loading: a thin bar at the top instead of the big corner triangle
   (the triangle covered the user name, the "viewing as" strip and the sign-out button) */
.pace .pace-activity,
.pace.pace-active .pace-activity {
    top: 0; left: 0; right: 0;
    width: 100%; height: 3px;
    -webkit-transform: none; transform: none;
    background: linear-gradient(90deg, transparent, var(--gw-brand), var(--gw-brand-2), transparent);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    -webkit-transition: opacity .2s; transition: opacity .2s;
    -webkit-animation: gw-pace-slide 1.1s linear infinite; animation: gw-pace-slide 1.1s linear infinite;
}
.pace.pace-active .pace-activity { opacity: 1; }
.pace .pace-activity::before,
.pace .pace-activity::after { display: none; }
@-webkit-keyframes gw-pace-slide { from { background-position: -100% 0; } to { background-position: 200% 0; } }
@keyframes gw-pace-slide { from { background-position: -100% 0; } to { background-position: 200% 0; } }
/* a row of checkboxes that wraps neatly (no stray indent on the second line) */
.gw-check-row { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 4px; }
.gw-check-row .checkbox-inline { margin: 0; padding-left: 0; display: inline-flex; align-items: center; gap: 4px; }
.gw-check-row .checkbox-inline input[type=checkbox] { position: static; margin: 0 4px 0 0 !important; }

/* Dashboard title row: title left, "view as user" list + time range right; wraps on phones */
.gw-dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.gw-dash-head h1 { margin: 0; font-size: 26px; font-weight: 700; color: var(--gw-text); }
.gw-dash-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.gw-dash-tools .form-control { height: 36px; }
.gw-dash-tools .gw-user-switch { width: 300px; max-width: 100%; }
@media (max-width: 767px) {
    .gw-dash-tools { width: 100%; justify-content: stretch; }
    .gw-dash-tools .gw-user-switch { width: auto; flex: 1 1 100%; order: 1; }
    .gw-dash-tools .gw-back-to-admin { flex: 1 1 100%; order: 2; }
    .gw-dash-tools #timeIntervalInput { flex: 1 1 100%; width: 100% !important; order: 3; }
}
/* Messages page: WhatsApp ticks of sent messages (grey = delivered, blue = read) */
.timeline-footer .wa-receipt { letter-spacing: .2px; }
.timeline-footer .label .wa-receipt-read { display: inline-block; margin: -2px -5px; padding: 2px 6px; border-radius: 3px; background: #34b7f1; color: #fff; }