/* ==========================================================================
   Client dashboard (index.php) - same look as the public Managed Services page
   New rules only: every class starts with db- so nothing above is affected.
   Paste this block at the end of main.css.
   ========================================================================== */
.db-page { color: #334155; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.55; text-align: left; }
.db-page *, .db-page *:before, .db-page *:after { box-sizing: border-box; }
/* only the product catalogue needs shrinking; a page-wide img rule squashed the network map icons */
.db-page #catalogue img { max-width: 100%; height: auto; }

/* colours: the side-menu colours from this file */
.db-green  { --c: #48ae51; }
.db-blue   { --c: #2295f0; }
.db-red    { --c: #e60000; }
.db-purple { --c: #9d29ae; }
.db-yellow { --c: #e5aa05; }
.db-cyan   { --c: #04bad2; }

/* ---------- buttons (links styled as buttons, so the global button rule does not apply) ---------- */
a.db-btn { display: inline-block; margin: 0 10px 10px 0; padding: 11px 22px; border-radius: 8px; border: 2px solid #fcbf18;
           background: #fcbf18; color: #1e293b; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none;
           transition: background .2s, border-color .2s; }
a.db-btn:hover { background: #e5aa05; border-color: #e5aa05; color: #1e293b; text-decoration: none; }
a.db-btn i { margin-right: 6px; }
a.db-btn.db-btn-ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
a.db-btn.db-btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
a.db-btn.db-btn-line { background: #fff; border-color: var(--c, #04bad2); color: var(--c, #04bad2); }
a.db-btn.db-btn-line:hover { background: var(--c, #04bad2); color: #fff; }

/* ---------- hero ---------- */
.db-hero { margin: 0 0 22px; padding: 34px 38px 24px; border-radius: 14px; color: #cbd5e1;
           background: #2b3240; background: linear-gradient(160deg, #343c4d 0%, #232934 100%); border-bottom: 6px solid #fcbf18; }
.db-eyebrow { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fcbf18; }
.db-hero h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.2; font-weight: 700; color: #fff; }
.db-hero .db-hero-text { max-width: 720px; margin: 0 0 22px; font-size: 16px; color: #cbd5e1; }

/* ---------- status tiles ---------- */
.db-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 28px; }
a.db-tile { display: block; padding: 16px 18px; background: #fff; border: 1px solid #e2e8f0; border-top: 4px solid var(--c);
            border-radius: 10px; box-shadow: 0 2px 10px rgba(15,23,42,.05); color: #64748b; text-decoration: none;
            transition: transform .15s, box-shadow .15s; }
a.db-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.10); text-decoration: none; }
.db-tile-num { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--c); }
.db-tile-lbl { display: block; margin-top: 4px; font-size: 13px; }

/* ---------- section cards ---------- */
.db-card { margin: 0 0 24px; padding: 22px 24px; background: #fff; border: 1px solid #e2e8f0; border-top: 5px solid var(--c);
           border-radius: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.db-card-head { overflow: hidden; margin: 0 0 16px; }
.db-card-icon { float: left; width: 44px; height: 44px; margin: 2px 14px 0 0; border-radius: 10px; background: #f1f5f9;
                color: var(--c); font-size: 19px; line-height: 44px; text-align: center; }
.db-card h2 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; color: #1e293b; }
.db-card-sub { margin: 2px 0 0; font-size: 14px; color: #64748b; }
.db-card-foot { margin: 10px 0 0; font-size: 13px; text-align: right; }
.db-card-foot a { color: #2267d6; text-decoration: none; font-weight: 600; }
.db-card-foot a:hover { text-decoration: underline; }
.db-text { margin: 0 0 16px; font-size: 15px; color: #475569; }
.db-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.db-two .db-card { margin-bottom: 0; }
.db-row-gap { margin-bottom: 24px; }
.db-badge { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 10px; background: #dcfce7; color: #15803d;
            font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: 3px; }

/* ---------- empty and loading states (replace the old full-width buttons) ---------- */
.db-empty { padding: 14px 16px; border-radius: 8px; font-size: 15px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.db-empty i { margin-right: 8px; }
.db-empty.db-neutral { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.db-loading { padding: 14px 4px; font-size: 14px; color: #94a3b8; }

/* ---------- security news ---------- */
.db-news { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.db-news-item { padding: 16px 18px; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #04bad2; border-radius: 8px; }
.db-news-cat { display: block; margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #04bad2; }
.db-news-item h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.35; }
.db-news-item h3 a { color: #1e293b; text-decoration: none; }
.db-news-item h3 a:hover { color: #2267d6; text-decoration: underline; }
.db-news-item p { margin: 0 0 8px; font-size: 13px; color: #64748b; }
.db-news-date { font-size: 12px; color: #94a3b8; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .db-tiles { grid-template-columns: repeat(2, 1fr); }
  .db-two { grid-template-columns: 1fr; }
  .db-two .db-card { margin-bottom: 24px; }
}
@media (max-width: 600px) {
  .db-hero { padding: 26px 20px 16px; }
  .db-hero h1 { font-size: 26px; }
  .db-card { padding: 18px 16px; }
}

/* ---------- IT report (summary.php) ---------- */
/* the hard drive and internals cards use these variables, which were never defined on this site */
.db-report { --color-background-primary: #fff; --color-background-secondary: #e2e8f0; --color-border-tertiary: #e2e8f0;
             --color-text-primary: #1e293b; --color-text-secondary: #64748b; --border-radius-lg: 10px; }
.db-hero-nav { overflow: hidden; }
.db-hero-nav a.db-next { float: right; margin-right: 0; }

/* per-PC sections: hidden until a PC is picked (the page script shows them) */
.db-report .TableDiv, .db-report .report-group { display: none; width: auto; margin: 0 0 24px; padding: 22px 24px;
             background: #fff; border: 1px solid #e2e8f0; border-top: 5px solid var(--c); border-radius: 12px;
             box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.db-graphs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); gap: 16px; }
.db-report .GoogleGraph { padding: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; }
.db-report .graph { height: 300px; }
.db-report .chart-info { padding: 14px 16px; background: #f8fafc; color: #64748b; }

/* "What does this show?" toggles */
.db-report .help { width: auto; margin: 10px 0 0; padding: 0; background: none; border: 0; border-radius: 0; text-align: left; }
.db-report .help .help_header { display: inline-block; margin: 0; padding: 0; background: none; color: #2267d6; cursor: pointer;
             font: 600 13px system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-transform: none; }
.db-report .help .help_header i { margin-right: 5px; }
.db-report .help .help_content { display: none; margin-top: 8px; padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0;
             border-radius: 8px; font-size: 14px; line-height: 1.6; color: #475569; text-align: left; }

.db-report .db-select-row select.select-css { width: auto; min-width: 280px; max-width: 100%; }
.db-split { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: center; }
.db-report .services-chart-container { max-width: 260px; margin: 0 auto; }
.db-card .rs-wrap { margin: 0; }
.db-report #orgchart-wrap .am-toolbar { padding-top: 0; }
.db-report .device-online  { color: #15803d; font-weight: 600; }
.db-report .device-offline { color: #b91c1c; font-weight: 600; }
.db-report .patch-count, .db-report .remote-count { font-weight: 600; }
.db-report .loading-patches { opacity: .6; }

@media (max-width: 900px) {
  .db-split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .db-hero-nav a.db-next { float: none; }
  .db-report .TableDiv, .db-report .report-group { padding: 18px 16px; }
}

/* ---------- shared: real <button>s in the theme (cost analysis, disaster recovery) ---------- */
/* !important: the site's global button rule forces full width, padding and margin */
.db-page button.db-act { display: inline-block !important; width: auto !important; margin: 0 10px 10px 0 !important;
             padding: 10px 20px !important; border-radius: 8px; border: 2px solid var(--c, #04bad2); background: #fff;
             color: var(--c, #04bad2); font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; opacity: 1; }
.db-page button.db-act:hover { background: var(--c, #04bad2); color: #fff; opacity: 1; }
.db-page button.db-act.db-primary { background: #fcbf18; border-color: #fcbf18; color: #1e293b; }
.db-page button.db-act.db-primary:hover { background: #e5aa05; border-color: #e5aa05; }
.db-page button.db-act i { margin-right: 6px; }
.db-card .db-text:last-child { margin-bottom: 0; }

/* ---------- cost analysis (cost_analysis.php) ---------- */
.db-page #cost-analysis { width: auto; }
.db-page .ca-chart { max-width: none; }
.db-page .ca-img { display: block; margin: 6px 0 18px; }

/* ---------- disaster recovery (disasterrecovery.php) ---------- */
.db-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.db-role { padding: 16px 18px; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid var(--c); border-radius: 8px; }
.db-role h3 { margin: 0 0 4px; font: 700 15px system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1e293b; text-transform: none; }
.db-role p { margin: 0; padding: 0; background: none; font-size: 14px; color: #64748b; }
.db-subhead { margin: 22px 0 10px; font: 700 13px system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
              letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.db-step-num { font-weight: 800; font-size: 20px; }
.db-page #services td, .db-page #add-services td { vertical-align: middle; }
.db-page #add-services input[type=text] { height: auto; margin: 0; padding: 8px 10px; line-height: 1.3; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; }
.db-page #add-services td:last-child { width: 1%; white-space: nowrap; }
.db-page #services .table-input { width: 100% !important; min-height: 34px; padding: 6px 8px; border: 1px solid #04bad2; border-radius: 6px; font: 13px system-ui, sans-serif; }
.db-page .rs-icon-task { max-height: 32px; vertical-align: middle; }
.db-callout { margin: 14px 0 0; padding: 12px 16px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 14px; }
.db-callout a { color: #991b1b; font-weight: 700; }

/* ---------- phishing campaigns (phish.php) ---------- */
.db-pill { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 1.4;
           white-space: nowrap; color: var(--c); background: #fff; border: 1px solid var(--c); }
.db-select-row { margin: 0 0 16px; }
.db-select-row select.select-css { width: auto; min-width: 280px; max-width: 100%; }
.db-campaign { display: none; }
.db-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; margin: 0 0 18px; }
.db-kv div { padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.db-kv span { display: block; font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.db-kv strong { display: block; margin-top: 2px; font-size: 15px; color: #1e293b; }
.db-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 12px; margin: 0 0 18px; }
.db-stat { padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-top: 4px solid var(--c); border-radius: 8px; }
.db-stat-num { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--c); }
.db-stat-lbl { margin-top: 2px; font-size: 12px; color: #64748b; }
.db-stat-bar { height: 5px; margin-top: 8px; border-radius: 3px; background: #e2e8f0; overflow: hidden; }
.db-stat-bar i { display: block; height: 100%; background: var(--c); }
.db-preview { display: block; width: 100%; height: 420px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.db-big-stat { float: right; margin: 0 0 10px 18px; padding: 12px 16px; border-radius: 10px; background: #fef2f2; color: #991b1b;
               text-align: center; font-size: 13px; }
.db-big-stat strong { display: block; font-size: 30px; line-height: 1.1; }
@media (max-width: 600px) { .db-big-stat { float: none; margin: 0 0 12px; } }

/* ---------- forms inside cards (document reviews, staff lists) ---------- */
/* the site's input rule makes text boxes 2.5em tall with big padding and margins: tidy them inside the theme */
.db-page .db-input-table input[type=text], .db-page input.db-input {
  display: block; width: 100%; height: auto; margin: 0; padding: 8px 10px; line-height: 1.3;
  border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; font-size: 14px; color: #1e293b; box-sizing: border-box; }
.db-page .db-input-table input[type=text]:focus, .db-page input.db-input:focus, .db-page textarea.db-textarea:focus {
  border-color: #04bad2; outline: none; box-shadow: 0 0 0 3px rgba(4,186,210,.2); }
.db-page .db-input-table td { vertical-align: middle; }
.db-page .db-input-table td.db-btn-cell { width: 1%; white-space: nowrap; }
.db-page textarea.db-textarea { display: block; width: 100%; min-height: 110px; margin: 0 0 14px; padding: 10px 12px; box-sizing: border-box;
  border: 1px solid #cbd5e1; border-radius: 8px; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; resize: vertical; }
.db-field-lbl { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #1e293b; }
.db-page button.rs-btn.db-danger { background: #fff; color: #b91c1c; border: 1px solid #fecaca; border-radius: 6px; }
.db-page button.rs-btn.db-danger:hover { background: #b91c1c; color: #fff; }
.db-page button.rs-btn.db-go { background: #48ae51; color: #fff; border: 1px solid #48ae51; border-radius: 6px; }
.db-msg { min-height: 20px; margin: 10px 0 0; font-size: 14px; }
.db-msg.db-bad { color: #b91c1c; }
.db-msg.db-good { color: #15803d; }

/* ---------- article page (document.php) ---------- */
.db-page .doc-steps { max-width: none; margin: 0; }
.db-page .doc-steps > br { display: none; }
.db-rating { overflow: hidden; margin: 0 0 18px; }
.db-rating-num { float: left; margin-right: 16px; font-size: 40px; font-weight: 700; line-height: 1; color: #1e293b; }
.db-rating-stars { color: #fcbf18; font-size: 18px; }
.db-rating-count { font-size: 13px; color: #64748b; }
.db-star-pick { display: inline-block; margin: 0 0 14px; }
.db-page .db-star-pick button.db-star { display: inline-block !important; width: auto !important; margin: 0 2px 0 0 !important; padding: 0 2px !important;
  border: 0; background: none; color: #cbd5e1; font-size: 26px; line-height: 1; cursor: pointer; }
.db-page .db-star-pick button.db-star.on { color: #fcbf18; }
.db-page .db-star-pick button.db-star:hover { opacity: .8; }