/* ==========================================================================
   WebMedia theme - loaded AFTER main.css, so it only overrides, never replaces.
   To change the colour scheme, edit the variables in :root below.
   To go back to the old look, remove the theme.css <link> from the templates.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
	--brand:        #4f46e5;   /* main accent (buttons, links, active menu) */
	--brand-dark:   #4338ca;
	--brand-soft:   #eef2ff;
	--ink:          #0f172a;   /* headings */
	--text:         #475569;   /* body text */
	--muted:        #64748b;
	--bg:           #f4f6fb;   /* page background */
	--card:         #ffffff;
	--line:         #e4e8f0;
	--sidebar:      #0f172a;
	--sidebar-text: #cbd5e1;
	--radius:       12px;
	--shadow:       0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.05);
}

/* ---- Base ---------------------------------------------------------------- */
body {
	font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--text);
	background-color: var(--bg);
}
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
a { color: var(--brand); }
a:hover, a:focus { color: var(--brand-dark); }
::selection { background: var(--brand); color: #fff; }

/* ---- Sidebar ------------------------------------------------------------- */
#sidebar {
	background: var(--sidebar);
	scrollbar-width: thin;
	scrollbar-color: #334155 transparent;
}
.logo-area {
	background: rgba(255,255,255,.04);
	border-bottom: 1px solid rgba(255,255,255,.07);
	height: 80px;
	line-height: 80px;
}
.browse-menu ul { padding: 14px 0 24px; }
.browse-menu .browser-menu-header {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .09em;
	color: #64748b;
	padding: 18px 26px 6px;
	line-height: 20px;
}
.browse-menu ul li a,
.browse-menu ul li.nowt {
	margin: 2px 14px;
	padding: 0 14px;
	line-height: 40px;
	border-radius: 9px;
	font-weight: 500;
	font-size: 14px;
	color: var(--sidebar-text);
	opacity: .8;
	transition: background .15s, color .15s, opacity .15s;
}
.browse-menu ul li.nowt { font-weight: 400; opacity: .5; }
.browse-menu ul li i { color: #94a3b8; width: 24px; margin-right: 12px; line-height: 40px; }
.browse-menu ul li a:hover,
.browse-menu ul li.active a {
	background: rgba(99,102,241,.16);
	color: #fff;
	opacity: 1;
}
.browse-menu ul li.active a { box-shadow: inset 3px 0 0 var(--brand); background: rgba(99,102,241,.22); }
.browse-menu ul li.active a i, .browse-menu ul li a:hover i { color: #a5b4fc; }
.browse-menu ul li.open a { background: rgba(99,102,241,.16); }
#topbar-mobile { background: var(--sidebar); }

/* ---- Page heading -------------------------------------------------------- */
.page-heading {
	background: var(--card);
	border-bottom: 1px solid var(--line) !important;
	box-shadow: 0 1px 2px rgba(15,23,42,.03);
	padding: 4px 16px 6px;
}
.page-heading h2 { font-size: 22px; font-weight: 650; margin: 18px 0 0; }
.page-heading .breadcrumb { background: transparent; padding: 6px 0 4px; font-size: 13px; color: var(--muted); }
.page-heading .breadcrumb > li + li:before { color: #cbd5e1; }
.page-heading .breadcrumb > .active { color: var(--muted); }
.user-info-top-bar { background: transparent; }
.user-info .username { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 22px; }
.user-info .userinfo { color: var(--muted); font-size: 12px; line-height: 14px; }
.user-image img { border: 2px solid var(--brand-soft); object-fit: cover; }

.padded-content { padding: 32px; }
@media (max-width: 767px) { .padded-content { padding: 18px; } }

/* ---- Cards / panels ------------------------------------------------------ */
.panel, .widget {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin-bottom: 24px;
}
.widget { border-top: 3px solid var(--brand); }
.panel { overflow: hidden; }
.panel .panel-header { padding: 20px 24px 10px; border-bottom: 0; }
.panel .panel-header h3 { font-size: 18px; font-weight: 600; margin: 4px 0 4px; color: var(--ink); }
.panel .panel-header h3 strong { color: var(--brand); font-weight: 700; }
.panel .panel-header small { color: var(--muted); font-size: 13px; font-weight: 400; }
.panel .panel-header .btn { margin: 6px 0; }
.panel .panel-body { padding: 8px 24px 24px; }
.panel .panel-body h4 { border-bottom: 2px solid var(--brand); color: var(--ink); }
.panel .panel-stat, .bigger-stat, .side-stat { color: var(--ink); }
.panel .panel-stat, .bigger-stat { font-weight: 700; letter-spacing: -.02em; }

/* Campaign cards on the dashboard */
.your-campaigns {
	background: var(--card) !important;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin-bottom: 16px;
	padding: 24px;
}
.your-campaigns h3 { font-size: 19px; }

/* ---- Tables -------------------------------------------------------------- */
.panel .panel-table table.table { margin-top: 10px; border-top: 0; margin-bottom: 0; }
.table > thead > tr > th {
	background: #f8fafc;
	color: var(--muted);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line) !important;
	padding: 11px 16px;
}
.table > tbody > tr > td, .table > tbody > tr > th {
	border-top: 1px solid var(--line);
	padding: 13px 16px;
	vertical-align: middle;
}
.table > tbody > tr:first-child > td { border-top: 0; }
.table > tbody > tr:hover { background: #f8fafc; }
.table a { font-weight: 500; }
.panel .data-scroll .data-grid thead th { background: #f8fafc; }   /* keeps the sticky header on-theme */
table.new-display tr:nth-child(odd) { background: #f8fafc; }

/* ---- Buttons ------------------------------------------------------------- */
.btn { border-radius: 9px; font-weight: 500; padding: 8px 16px; transition: background .15s, border-color .15s, box-shadow .15s; }
.btn-sm, .btn-xs { border-radius: 7px; padding-left: 10px; padding-right: 10px; }
.btn-lg { border-radius: 11px; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-default { background: #fff; border-color: #d7dde8; color: var(--ink); }
.btn-default:hover, .btn-default:focus { background: #f1f5f9; border-color: #c5cddb; color: var(--ink); }
.btn-success { background: #10b981; border-color: #10b981; }
.btn-success:hover, .btn-success:focus { background: #059669; border-color: #059669; }
.btn-danger  { background: #ef4444; border-color: #ef4444; }
.btn-danger:hover, .btn-danger:focus { background: #dc2626; border-color: #dc2626; }
.btn-warning { background: #f59e0b; border-color: #f59e0b; }
.btn-warning:hover, .btn-warning:focus { background: #d97706; border-color: #d97706; }
.btn-info    { background: #0ea5e9; border-color: #0ea5e9; }
.btn-info:hover, .btn-info:focus { background: #0284c7; border-color: #0284c7; }
.btn-google, .btn-google:hover { background: #fff; color: var(--ink); border: 1px solid #d7dde8; }
.btn-google:hover { background: #f8fafc; }
.btn-google i { color: #dc4e41; }
.btn i { margin-right: 8px; }

/* ---- Forms --------------------------------------------------------------- */
.form-control {
	height: 40px;
	border-radius: 9px;
	border: 1px solid #d7dde8;
	box-shadow: none;
	color: var(--ink);
	font-size: 14px;
	background-color: #fff;
}
textarea.form-control { height: auto; }
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
label { color: var(--ink); font-weight: 600; font-size: 13px; }
.input-group-addon { border-radius: 9px; border-color: #d7dde8; background: #f8fafc; }
.help-block { color: var(--muted); }

/* ---- Alerts, labels, progress ------------------------------------------- */
.alert { border-radius: 10px; border: 1px solid transparent; border-left-width: 4px; padding: 14px 18px; }
.alert-danger  { background: #fef2f2; color: #991b1b; border-color: #fecaca; border-left-color: #ef4444; }
.alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; border-left-color: #f59e0b; }
.alert-info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; border-left-color: #3b82f6; }
.alert-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; border-left-color: #10b981; }
.label, .badge { border-radius: 999px; font-weight: 600; padding: .35em .75em; }
.label-primary { background: var(--brand); }
.progress { height: 10px; border-radius: 999px; background: #e8ecf4; box-shadow: none; }
.progress-bar { background: var(--brand); box-shadow: none; }
.progress-bar-success { background: #10b981; }
.progress-bar-warning { background: #f59e0b; }
.progress-bar-danger  { background: #ef4444; }
.progress-bar-info    { background: #0ea5e9; }

/* ---- Navigation bits ----------------------------------------------------- */
.pagination > li > a, .pagination > li > span { border-color: var(--line); color: var(--ink); }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover { color: var(--brand); border-bottom-color: #fff; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover { background: var(--brand); }
.dropdown-menu { border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.modal-content { border-radius: 14px; border: 0; box-shadow: 0 20px 60px rgba(15,23,42,.25); }
hr { border-top-color: var(--line); }

/* ---- Login --------------------------------------------------------------- */
.loginarea h2 { color: var(--ink); }
.login-widget { border-radius: var(--radius); }

/* ---- Table cells that should never wrap (dates, row actions) ------------- */
.table > tbody > tr > td.text-right:last-child,
.table > tbody > tr > td.text-right:nth-last-child(2) { white-space: nowrap; }

/* ---- Inactive campaigns: present, but quieter ---------------------------- */
.panel-inactive { background: #fafbfd; box-shadow: none; }
.panel-inactive .panel-header h3, .panel-inactive .panel-header h3 strong { color: var(--muted); }
.panel-inactive .table { opacity: .8; }
.label-default { background: #94a3b8; }
.panel-inactive details > summary { cursor: pointer; padding: 10px 24px 16px; color: var(--brand); font-weight: 500; list-style: none; outline: none; }
.panel-inactive details > summary::-webkit-details-marker { display: none; }
.panel-inactive details > summary i { font-size: 11px; margin-right: 6px; transition: transform .15s; }
.panel-inactive details[open] > summary i { transform: rotate(90deg); }
.panel-inactive details[open] > summary { padding-bottom: 6px; }

/* ---- DataTables: Font Awesome sort arrows next to the heading text -------- */
.dataTables_wrapper table.dataTable thead .sorting:after,
.dataTables_wrapper table.dataTable thead .sorting_asc:after,
.dataTables_wrapper table.dataTable thead .sorting_desc:after,
.dataTables_wrapper table.dataTable thead .sorting_asc_disabled:after,
.dataTables_wrapper table.dataTable thead .sorting_desc_disabled:after {
	position: static; display: inline-block; float: none; margin-left: 7px; top: auto; right: auto;
	font-family: FontAwesome; font-size: 12px; line-height: 1; color: var(--muted);
}
.dataTables_wrapper table.dataTable thead .sorting:after      { content: "\f0dc"; opacity: .3; }
.dataTables_wrapper table.dataTable thead .sorting_asc:after  { content: "\f0de"; opacity: 1; color: var(--brand); }
.dataTables_wrapper table.dataTable thead .sorting_desc:after { content: "\f0dd"; opacity: 1; color: var(--brand); }
.dataTables_wrapper table.dataTable thead th { outline: none; }
.dataTables_wrapper .dataTables_filter { padding: 8px 24px 4px; }
.dataTables_wrapper .dataTables_filter label { font-weight: 500; color: var(--muted); }
.dataTables_wrapper .dataTables_filter input { margin-left: 8px; width: 220px; display: inline-block; }
.dataTables_wrapper .dataTables_info { padding: 12px 24px; color: var(--muted); font-size: 13px; }
.dataTables_wrapper .dataTables_paginate { padding: 8px 24px; }
.dataTables_wrapper table.dataTable thead th { white-space: nowrap; }