/*!
* Theme Name: Lagom WHMCS Client Theme - CloudCore Host (AWS Inspired - Enhanced Styling)
* Author: AI Assistant for [Your Name/Company Name, Optional]
* Date: July 15, 2025
*
* This file contains custom CSS rules to style the Lagom theme
* with a professional, enterprise-grade aesthetic inspired by Amazon Web Services.
* It overrides default Lagom styles for the '0webhost' style (or your chosen style).
*
* This enhanced design aims for a more precise, structured, and authoritative
* user experience, mirroring AWS's console interface, focusing on layout,
* component consistency, and subtle visual cues.
*/
/* =====================================================================================
1. Google Fonts Import
Open Sans is a highly versatile and readable font, widely used in enterprise.
Roboto is another excellent alternative for a clean, functional feel.
Uncomment the desired font.
===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); */
/* =====================================================================================
2. Root Variables: CloudCore Host (AWS Inspired) Color Palette
These are your core CloudCore colors defined as variables for easy use.
===================================================================================== */
:root {
/* CloudCore Host (AWS Inspired) Color Palette */
--aws-primary-dark-blue: #232F3E; /* AWS main dark blue for headers, footers */
--aws-accent-blue: #00A1C9; /* AWS vibrant blue for primary actions/links */
--aws-text-dark: #1F1F1F; /* Very dark gray for main text on light bg */
--aws-text-light: #F0F0F0; /* Light text for dark backgrounds */
--aws-white: #FFFFFF; /* Pure white for content backgrounds */
--aws-light-gray-bg: #FAFAFA; /* Very subtle light gray page background */
--aws-border-gray: #D5DBDB; /* Standard light gray border color */
--aws-dark-gray-text: #545B64; /* Secondary text color */
--aws-success-green: #3D8C40; /* Standard AWS-like success green */
--aws-warning-orange: #EC912D; /* Standard AWS-like warning orange */
--aws-danger-red: #D13232; /* Standard AWS-like danger red */
--aws-header-link-hover-bg: rgba(255,255,255,0.1); /* Subtle hover for dark header links */
--aws-page-title-bg: var(--aws-white); /* Explicitly white background for page titles */
--aws-input-border-focus: #0073BB; /* A slightly darker blue for input focus */
/* ===============================================================================
3. Lagom Core Color Variable Overrides (re-mapping to CloudCore Palette)
These variables control the overarching color scheme of the theme.
=============================================================================== */
/* General Body Background */
--body-bg: var(--aws-light-gray-bg); /* Very light gray for overall page background */
/* Gray Scale (for general text, backgrounds, borders, icons) */
--gray-base: var(--aws-text-dark); /* Main text/dark gray */
--gray-lighter: var(--aws-dark-gray-text); /* Secondary text */
--gray-lighter-2: #879196; /* Even lighter gray for subtle elements */
--gray-lighter-3: var(--aws-border-gray); /* Light border on light background */
--gray-lighter-4: #E0E4E4; /* Very subtle light background */
--gray-faded: #F5F7F7; /* Almost white faded */
--gray-darker: var(--aws-text-dark); /* Darkest text/elements */
/* Gradients (AWS is generally flat, minimal gradients) */
--gray-gradient-start: var(--aws-white);
--gray-gradient-end: var(--aws-light-gray-bg);
--gray-gradient-h: linear-gradient(90deg, var(--gray-gradient-start) 0%, var(--gray-gradient-end) 100%);
--gray-gradient-v: linear-gradient(0deg, var(--gray-gradient-end) 0%, var(--gray-gradient-start) 100%);
/* Primary Brand Color (Deep AWS Blue) */
--brand-primary: var(--aws-primary-dark-blue);
--brand-primary-lighter: #394A60;
--brand-primary-lighter-2: #5B6D82;
--brand-primary-lighter-3: #7D90A5;
--brand-primary-lighter-4: #A0B3C8;
--brand-primary-darker: #1C242D;
/* Primary Brand Gradients (subtle for depth) */
--brand-primary-gradient-start: var(--aws-primary-dark-blue);
--brand-primary-gradient-end: #334255;
--brand-primary-gradient-h: linear-gradient(90deg, var(--brand-primary-gradient-start) 0%, var(--brand-primary-gradient-end) 100%);
--brand-primary-gradient-v: linear-gradient(0deg, var(--brand-primary-gradient-end) 0%, var(--brand-primary-gradient-start) 100%);
/* Secondary Brand Color (AWS Accent Blue for consistency where primary is too dark) */
--brand-secondary: var(--aws-accent-blue);
--brand-secondary-lighter: #33BCD9;
--brand-secondary-darker: #0082A2;
--brand-secondary-gradient-start: var(--aws-accent-blue);
--brand-secondary-gradient-end: #00B2E1;
--brand-secondary-gradient-h: linear-gradient(90deg, var(--brand-secondary-gradient-start) 0%, var(--brand-secondary-gradient-end) 100%);
--brand-secondary-gradient-v: linear-gradient(0deg, var(--brand-secondary-gradient-end) 0%, var(--brand-secondary-gradient-start) 100%);
/* Info Brand Color (map to AWS Accent Blue) */
--brand-info: var(--aws-accent-blue);
--brand-info-lighter: #33BCD9;
--brand-info-lighter-2: #66D0E6;
--brand-info-lighter-3: #99E5F2;
--brand-info-lighter-4: #CCEFFF; /* Very light tint for info backgrounds */
--brand-info-darker: #0082A2;
--brand-info-gradient-start: var(--aws-accent-blue);
--brand-info-gradient-end: #00B2E1;
--brand-info-gradient-h: linear-gradient(90deg, var(--brand-info-gradient-start) 0%, var(--brand-info-gradient-end) 100%);
--brand-info-gradient-v: linear-gradient(0deg, var(--brand-info-gradient-end) 0%, var(--brand-info-gradient-start) 100%);
/* Success Brand Color (AWS Green) */
--brand-success: var(--aws-success-green);
--brand-success-lighter: #60B363;
--brand-success-lighter-2: #8DD991;
--brand-success-lighter-3: #BBE0BE;
--brand-success-lighter-4: #E8F0E8;
--brand-success-darker: #307033;
/* Success Gradients */
--brand-success-gradient-start: var(--aws-success-green);
--brand-success-gradient-end: #307033;
--brand-success-gradient-h: linear-gradient(90deg, var(--brand-success-gradient-start) 0%, var(--brand-success-gradient-end) 100%);
--brand-success-gradient-v: linear-gradient(0deg, var(--brand-success-gradient-end) 0%, var(--brand-success-gradient-start) 100%);
/* Warning Brand Color (AWS Orange) */
--brand-warning: var(--aws-warning-orange);
--brand-warning-lighter: #F0A756;
--brand-warning-lighter-2: #F5C088;
--brand-warning-lighter-3: #FADBBF;
--brand-warning-lighter-4: #FCECE8;
--brand-warning-darker: #BC7124;
--brand-warning-gradient-start: var(--aws-warning-orange);
--brand-warning-gradient-end: #C77E2A;
--brand-warning-gradient-h: linear-gradient(90deg, var(--brand-warning-gradient-start) 0%, var(--brand-warning-gradient-end) 100%);
--brand-warning-gradient-v: linear-gradient(0deg, var(--brand-warning-gradient-end) 0%, var(--brand-warning-gradient-start) 100%);
/* Danger Brand Color (AWS Red) */
--brand-danger: var(--aws-danger-red);
--brand-danger-lighter: #E65555;
--brand-danger-lighter-2: #F28080;
--brand-danger-lighter-3: #F9B3B3;
--brand-danger-lighter-4: #FDEDED;
--brand-danger-darker: #A72828;
--brand-danger-gradient-start: var(--aws-danger-red);
--brand-danger-gradient-end: #B32F2F;
--brand-danger-gradient-h: linear-gradient(90deg, var(--brand-danger-gradient-start) 0%, var(--brand-danger-gradient-end) 100%);
--brand-danger-gradient-v: linear-gradient(0deg, var(--brand-danger-gradient-end) 0%, var(--brand-danger-gradient-start) 100%);
/* UI Icon Colors */
--gray-icons: var(--aws-dark-gray-text); /* Icons dark on light backgrounds */
--gray-icons-hover: var(--aws-accent-blue); /* Hover state for icons */
/* SVG Illustrations (Map to AWS palette, often blues/grays) */
--svg-illustration-color-0: var(--aws-accent-blue);
--svg-illustration-color-1: var(--aws-accent-blue);
--svg-illustration-color-2: #33BCD9;
--svg-illustration-color-3: #66D0E6;
--svg-illustration-color-4: #99E5F2;
--svg-illustration-color-5: #CCEFFF;
--svg-illustration-color-6: #F2FAFF;
--svg-illustration-color-7: var(--aws-primary-dark-blue); /* Used for darkest parts of SVGs */
--svg-illustration-shadow: rgba(0, 0, 0, 0.05);
--svg-banner-shape-left: var(--aws-light-gray-bg);
--svg-banner-shape-right: var(--aws-white);
/* Ensure other critical general UI colors are defined if not already mapped */
--ui-block-bg: var(--aws-white);
--ui-block-link-color: var(--aws-accent-blue);
--ui-block-link-hover-color: var(--aws-primary-dark-blue);
/* General text color on light backgrounds */
--text-primary-color: var(--aws-text-dark);
--text-secondary-heading-color: var(--aws-text-dark);
--text-secondary-lighter-color: var(--aws-dark-gray-text);
/* ===============================================================================
4. Text Colors on Dark/Primary Backgrounds Overrides
Ensures text on primary/secondary/dark backgrounds is light for contrast.
=============================================================================== */
--text-secondary-body-color: var(--aws-text-light);
--text-secondary-lighter-color: var(--aws-text-light);
--text-secondary-faded-color: rgba(240, 240, 240, 0.8);
--text-secondary-heading-color: var(--aws-text-light);
/* Ensure CMS-specific text on dark backgrounds is light */
--cms-color-on-dark: var(--aws-text-light);
--cms-color-on-dark-2: rgba(240, 240, 240, 0.9);
--cms-color-on-dark-3: rgba(240, 240, 240, 0.3);
/* Ensure other relevant text-on-dark variables are light */
--text-primary-color-on-dark: var(--aws-text-light);
/* ===============================================================================
5. Navigation Overrides
Styles for main header, sidebar, and mobile navigation.
=============================================================================== */
/* --- Top Layout Navigation (Main Header Nav) --- */
--app-nav-top-bg: var(--aws-primary-dark-blue); /* Dark header */
--app-nav-navbar-bg: var(--app-nav-top-bg);
--app-nav-top-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
--app-nav-top-border-bottom: none; /* No strong border here */
/* Top Menu Link Colors (Light text on dark background) */
--app-nav-top-menu-link-color: var(--aws-text-light);
--app-nav-top-menu-link-hover-color: var(--aws-accent-blue);
--app-nav-top-menu-icon-color: var(--aws-text-light);
--app-nav-top-menu-icon-hover-color: var(--aws-accent-blue);
/* Ensure specific UI Nav Link variables also lead to light text/accent blue when used in header context */
--ui-nav-link-color: var(--aws-text-light);
--ui-nav-link-hover-color: var(--aws-accent-blue);
--ui-nav-link-active-color: var(--aws-accent-blue);
--ui-nav-link-icon-color: var(--aws-text-light);
--ui-nav-link-icon-hover-color: var(--aws-accent-blue);
--ui-nav-link-icon-active-color: var(--aws-accent-blue);
/* --- Secondary Navigation (e.g., sub-menus) --- */
--top-nav-link-color: var(--aws-text-light);
--top-nav-link-hover-color: var(--aws-accent-blue);
--top-nav-link-active-color: var(--aws-accent-blue);
--top-nav-link-icon-color: var(--aws-text-light);
--top-nav-link-icon-hover-color: var(--aws-accent-blue);
--top-nav-link-icon-active-color: var(--aws-accent-blue);
/* --- Left Layout Navigation (Sidebar Nav) --- */
--app-nav-left-bg: var(--aws-white);
--app-nav-left-link-color: var(--aws-text-dark);
--app-nav-left-link-hover-color: var(--aws-accent-blue);
--app-nav-left-link-active-color: var(--aws-accent-blue);
--app-nav-left-icon-color: var(--aws-dark-gray-text);
--app-nav-left-icon-hover-color: var(--aws-accent-blue);
--app-nav-left-icon-active-color: var(--aws-accent-blue);
/* --- Mobile Navigation --- */
--mob-app-nav-bg: var(--aws-primary-dark-blue);
--mob-app-nav-header-bg: var(--aws-primary-dark-blue);
--mob-dropdown-nav-bg: var(--aws-primary-dark-blue);
--mob-dropdown-nav-link-color: var(--aws-text-light);
--mob-dropdown-nav-link-hover-color: var(--aws-accent-blue);
--mob-dropdown-nav-link-active-color: var(--aws-accent-blue);
--mob-dropdown-nav-list-bg: var(--aws-primary-dark-blue);
--mob-dropdown-nav-list-sidebar-bg: var(--aws-primary-dark-blue);
/* ===============================================================================
6. Button Overrides
=============================================================================== */
/* General Button Properties */
--btn-box-shadow: none;
--btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 161, 201, 0.25); /* AWS Accent Blue focus */
--input-btn-focus-box-shadow: var(--btn-focus-box-shadow);
--btn-border-width: 1px;
--btn-transition: all 0.2s ease-in-out;
/* Border Radius (Slightly rounded for professionalism) */
--btn-xs-border-radius: 3px;
--btn-sm-border-radius: 3px;
--btn-base-border-radius: 4px;
--btn-lg-border-radius: 4px;
--btn-xlg-border-radius: 5px;
/* --- Default Button Style (Light Gray with Dark Text & Border) --- */
--btn-default-bg: #EAEAEA;
--btn-default-border: #C8C8C8;
--btn-default-color: var(--aws-text-dark);
--btn-default-hover-bg: #D9D9D9;
--btn-default-hover-border: #B8B8B8;
--btn-default-hover-color: var(--aws-text-dark);
--btn-default-active-bg: #C8C8C8;
--btn-default-active-border: #A8A8A8;
/* --- Primary Button Style (AWS Accent Blue) --- */
--btn-primary-bg: var(--aws-accent-blue);
--btn-primary-border: var(--aws-accent-blue);
--btn-primary-color: var(--aws-text-light); /* Light text on accent blue */
--btn-primary-hover-bg: #0082A2; /* Darker accent blue on hover */
--btn-primary-hover-border: #0082A2;
--btn-primary-hover-color: var(--aws-text-light);
--btn-primary-active-bg: #006D85;
--btn-primary-active-border: #006D85;
/* Primary Faded Buttons (e.g., for outlines or secondary actions) */
--btn-primary-faded-bg: transparent;
--btn-primary-faded-border: var(--aws-accent-blue);
--btn-primary-faded-color: var(--aws-accent-blue);
--btn-primary-faded-hover-bg: rgba(0, 161, 201, 0.1); /* Subtle hover tint */
--btn-primary-faded-hover-border: var(--aws-accent-blue);
--btn-primary-faded-hover-color: var(--aws-accent-blue);
--btn-primary-faded-active-bg: rgba(0, 161, 201, 0.2);
--btn-primary-faded-active-border: var(--aws-accent-blue);
/* --- Success Button Style (AWS Green) --- */
--btn-success-bg: var(--aws-success-green);
--btn-success-border: var(--aws-success-green);
--btn-success-color: var(--aws-text-light);
--btn-success-hover-bg: var(--brand-success-darker);
--btn-success-hover-border: var(--brand-success-darker);
--btn-success-hover-color: var(--aws-text-light);
--btn-success-active-bg: #2B6C2E;
--btn-success-active-border: #2B6C2E;
/* --- Info, Warning, Danger Buttons --- */
--btn-warning-bg: var(--aws-warning-orange);
--btn-warning-border: var(--aws-warning-orange);
--btn-warning-hover-bg: var(--brand-warning-darker);
--btn-warning-hover-border: var(--brand-warning-darker);
--btn-warning-color: var(--aws-text-light);
--btn-danger-bg: var(--aws-danger-red);
--btn-danger-border: var(--aws-danger-red);
--btn-danger-hover-bg: var(--brand-danger-darker);
--btn-danger-hover-border: var(--brand-danger-darker);
--btn-danger-color: var(--aws-text-light);
/* ===============================================================================
7. Component Overrides
=============================================================================== */
/* --- Table Styles --- */
--table-bg: var(--aws-white);
--table-bg-accent: var(--aws-light-gray-bg); /* For striped tables */
--table-bg-hover: #F0F2F2; /* Subtle hover */
--table-border-color: var(--aws-border-gray);
--table-th-font-color: var(--aws-text-dark);
--table-td-font-color: var(--aws-text-dark);
--table-container-header-bg: var(--aws-white);
--table-container-bg: var(--aws-white);
--table-container-border: var(--aws-border-gray);
--table-container-box-shadow: none; /* AWS generally uses minimal shadows */
/* --- Dropdown Styles --- */
--dropdown-bg: var(--aws-white);
--dropdown-border: var(--aws-border-gray);
--dropdown-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for dropdowns */
--dropdown-divider-bg: #EAEAEA;
--dropdown-link-color: var(--aws-text-dark);
--dropdown-link-hover-color: var(--aws-accent-blue);
--dropdown-link-hover-bg: var(--aws-light-gray-bg);
--dropdown-link-active-color: var(--aws-accent-blue);
--dropdown-link-active-bg: var(--aws-light-gray-bg);
--dropdown-header-color: var(--aws-dark-gray-text);
/* --- Navbar Toggler (Hamburger Icon) --- */
--navbar-toggler-border-color: var(--aws-text-light);
--navbar-toggler-icon-color: var(--aws-text-light);
/* --- Nav (General Navs, Tabs, Pills) --- */
--nav-tabs-border-color: var(--aws-border-gray);
--nav-tabs-link-color: var(--aws-text-dark);
--nav-tabs-link-icon-color: var(--aws-dark-gray-text);
--nav-tabs-link-active-color: var(--aws-accent-blue); /* AWS Accent blue for active tabs */
--nav-tabs-link-active-border-color: var(--aws-accent-blue);
--nav-tabs-link-hover-color: var(--aws-accent-blue);
--nav-tabs-link-hover-border-color: var(--aws-light-gray-bg);
--nav-pills-link-active-bg: var(--aws-accent-blue);
--nav-pills-link-active-color: var(--aws-text-light);
/* --- Pagination --- */
--pagination-color: var(--aws-text-dark);
--pagination-bg: var(--aws-white);
--pagination-border: var(--aws-border-gray);
--pagination-hover-color: var(--aws-accent-blue);
--pagination-hover-bg: var(--aws-light-gray-bg);
--pagination-hover-border: var(--aws-border-gray);
--pagination-active-color: var(--aws-text-light);
--pagination-active-bg: var(--aws-accent-blue);
--pagination-active-border: var(--aws-accent-blue);
--pagination-disabled-color: var(--aws-dark-gray-text);
--pagination-disabled-bg: var(--aws-light-gray-bg);
--pagination-disabled-border: var(--aws-border-gray);
/* --- Jumbotron / Hero Sections (Often a light blue or gray background) --- */
--jumbotron-bg: #F0F5F5; /* Light blue-gray for jumbotron */
--jumbotron-color: var(--aws-text-dark);
/* --- Tooltip & Popover --- */
--tooltip-bg: var(--aws-text-dark);
--tooltip-color: var(--aws-text-light);
--tooltip-arrow-color: var(--tooltip-bg);
--tooltip-box-shadow: none;
--popover-bg: var(--aws-white);
--popover-border-color: var(--aws-border-gray);
--popover-title-bg: var(--aws-light-gray-bg);
--popover-body-color: var(--aws-text-dark);
--popover-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
/* --- Toast --- */
--toast-background-color: rgba(255, 255, 255, 0.98);
--toast-border-color: rgba(0, 0, 0, 0.1);
--toast-color: var(--aws-text-dark);
--toast-header-color: var(--aws-text-dark);
--toast-header-background-color: var(--toast-background-color);
/* --- Modal --- */
--modal-content-bg: var(--aws-white);
--modal-content-border-color: var(--aws-border-gray);
--modal-content-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
--modal-backdrop-bg: rgba(0, 0, 0, 0.5);
--modal-title-color: var(--aws-text-dark);
/* --- Alert Styles --- */
--alert-success-bg: var(--brand-success-lighter-4);
--alert-success-text: var(--brand-success-darker);
--alert-success-border: var(--brand-success-lighter-3);
--alert-info-bg: var(--brand-info-lighter-4);
--alert-info-text: var(--brand-info-darker);
--alert-info-border: var(--brand-info-lighter-3);
--alert-warning-bg: var(--brand-warning-lighter-4);
--alert-warning-text: var(--brand-warning-darker);
--alert-warning-border: var(--brand-warning-lighter-3);
--alert-danger-bg: var(--brand-danger-lighter-4);
--alert-danger-text: var(--brand-danger-darker);
--alert-danger-border: var(--brand-danger-lighter-3);
--alert-gray-bg: var(--aws-light-gray-bg);
--alert-gray-text: var(--aws-text-dark);
--alert-gray-border: var(--aws-border-gray);
--alert-primary-bg: var(--brand-primary-lighter-4);
--alert-primary-text: var(--brand-primary-darker);
--alert-primary-border: var(--brand-primary-lighter-3);
--alert-secondary-bg: var(--brand-secondary-lighter-4);
--alert-secondary-text: var(--brand-secondary-darker);
--alert-secondary-border: var(--brand-secondary-lighter-3);
/* --- Progress Bars --- */
--progress-bg: var(--aws-light-gray-bg);
--progress-bar-bg: var(--aws-accent-blue);
--progress-bar-success-bg: var(--aws-success-green);
--progress-bar-warning-bg: var(--aws-warning-orange);
/* --- Panels & Cards --- */
--panel-bg: var(--aws-white);
--panel-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for panels */
--panel-border: 1px solid var(--aws-border-gray);
--panel-title-color: var(--aws-text-dark);
--panel-default-bg: var(--aws-white);
--panel-default-text: var(--aws-text-dark);
--panel-default-border: var(--aws-border-gray);
--panel-default-heading-bg: var(--aws-white);
--panel-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
--panel-hover-border-color: var(--aws-accent-blue);
--panel-active-border-color: var(--aws-accent-blue);
--card-bg: var(--aws-white);
--card-border: 1px solid var(--aws-border-gray);
--card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
/* --- Badges --- */
--badge-bg: var(--aws-light-gray-bg);
--badge-color: var(--aws-text-dark);
--badge-primary-bg: var(--aws-accent-blue);
--badge-primary-color: var(--aws-text-light);
--badge-primary-faded-bg: var(--brand-info-lighter-4);
--badge-primary-faded-color: var(--aws-accent-blue);
--badge-success-bg: var(--aws-success-green);
--badge-success-color: var(--aws-text-light);
--badge-info-bg: var(--aws-accent-blue);
--badge-info-color: var(--aws-text-light);
--badge-warning-bg: var(--aws-warning-orange);
--badge-warning-color: var(--aws-text-light);
--badge-danger-bg: var(--aws-danger-red);
--badge-danger-color: var(--aws-text-light);
/* --- Code Blocks & Blockquotes --- */
--pre-bg: var(--aws-light-gray-bg);
--pre-border-color: var(--aws-border-gray);
--blockquote-bg: var(--aws-light-gray-bg);
--blockquote-border-color: var(--aws-border-gray);
--blockquote-font-color: var(--aws-text-dark);
/* --- Horizontal Rule (HR) --- */
--hr-border-color: var(--aws-border-gray);
/* ===============================================================================
8. Forms Overrides
=============================================================================== */
/* --- General Input Field Styles --- */
--input-font-family: var(--font-family-base);
--input-font-weight: var(--font-weight-base);
--input-border-width: 1px;
--input-border-radius: 3px;
--input-bg: var(--aws-white);
--input-border-color: var(--aws-border-gray);
--input-color: var(--aws-text-dark);
--input-color-placeholder: var(--aws-dark-gray-text);
/* Input Hover State */
--input-hover-bg: var(--aws-white);
--input-hover-border-color: #A0A0A0; /* Darker gray on hover */
--input-hover-color: var(--aws-text-dark);
--input-hover-placeholder-color: var(--aws-dark-gray-text);
/* Input Focus State */
--input-focus-bg: var(--aws-white);
--input-focus-border-color: var(--aws-input-border-focus); /* Deeper blue for focus */
--input-focus-color: var(--aws-text-dark);
--input-focus-placeholder-color: var(--aws-dark-gray-text);
--input-focus-box-shadow: 0 0 0 0.25rem rgba(0, 161, 201, 0.25);
--input-btn-focus-box-shadow: var(--input-focus-box-shadow);
/* Disabled Input Fields */
--input-disabled-bg: var(--aws-light-gray-bg);
--input-disabled-border-color: var(--aws-border-gray);
--input-disabled-color: var(--aws-dark-gray-text);
--input-disabled-color-placeholder: var(--aws-dark-gray-text);
/* --- Label Styles --- */
--input-label-color: var(--aws-text-dark);
/* --- Radio and Checkbox (icheck) Styles --- */
--icheck-bg: var(--aws-white);
--icheck-border-color: var(--aws-border-gray);
--icheck-hover-bg: var(--aws-white);
--icheck-hover-border-color: var(--aws-accent-blue);
--icheck-active-bg: var(--aws-accent-blue);
--icheck-active-border-color: var(--aws-accent-blue);
--icheck-active-icon-color: var(--aws-text-light); /* Light icon on bright active state */
--icheck-disabled-bg: var(--aws-light-gray-bg);
--icheck-disabled-border-color: var(--aws-light-gray-bg);
/* --- Input Group Addons --- */
--input-group-addon-bg: var(--aws-light-gray-bg);
--input-group-addon-border-color: var(--aws-border-gray);
/* --- Form Validation --- */
--form-feedback-icon-valid: url("data:image/svg+xml,"); /* AWS Green check */
--form-feedback-icon-invalid: url("data:image/svg+xml,"); /* AWS Red X */
/* --- Select Options --- */
--select-option-color: var(--aws-text-dark);
--select-option-bg: var(--aws-white);
/* ===============================================================================
9. General Overrides
=============================================================================== */
/* --- UI Block Overrides --- */
--ui-block-bg-form: var(--aws-white);
--ui-block-header-bg: var(--aws-white);
--ui-block-divider-color: var(--aws-border-gray);
/* Subtle, restrained shadows */
--box-shadow-none: unset;
--box-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
--box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
--box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.06); /* Moderate shadow for cards/blocks */
--box-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
--box-shadow-xlg: 0 6px 16px rgba(0, 0, 0, 0.1);
/* General block border */
--ui-block-border: 1px solid var(--aws-border-gray);
/* --- UI State Colors Overrides --- */
--state-info-bg: var(--brand-info-lighter-4);
--state-info-text: var(--brand-info-darker);
--state-info-border: var(--brand-info-lighter-3);
--state-info-bg-hover: var(--brand-info-lighter-3);
--state-info-text-hover: var(--brand-info-darker);
--state-info-border-active: var(--brand-info-lighter-2);
/* Savings State (AWS Orange for clear promotion) */
--state-savings-bg: var(--brand-warning-lighter-4);
--state-savings-bg-hover: var(--brand-warning-lighter-3);
--state-savings-text: var(--aws-warning-orange);
--state-savings-text-faded: rgba(236, 145, 45, 0.7);
--state-savings-text-hover: var(--brand-warning-darker);
--state-savings-border: var(--brand-warning-lighter-3);
--state-savings-border-active: var(--aws-warning-orange);
--state-savings-divider: var(--brand-warning-lighter-4);
/* --- Label Styles Overrides --- */
--label-default-bg: var(--aws-light-gray-bg);
--label-default-color: var(--aws-text-dark);
--label-primary-bg: var(--aws-accent-blue);
--label-primary-color: var(--aws-text-light);
--label-primary-faded-bg: var(--brand-info-lighter-4);
--label-primary-faded-color: var(--aws-accent-blue);
--label-success-bg: var(--aws-success-green);
--label-success-color: var(--aws-text-light);
--label-info-bg: var(--aws-accent-blue);
--label-info-color: var(--aws-text-light);
--label-warning-bg: var(--aws-warning-orange);
--label-warning-color: var(--aws-text-light);
--label-danger-bg: var(--aws-danger-red);
--label-danger-color: var(--aws-text-light);
/* --- WHMCS Status Colors Overrides --- */
--status-pending-transfer: var(--aws-warning-orange);
--status-pending: var(--aws-warning-orange);
--status-active: var(--aws-success-green);
--status-suspended: var(--aws-danger-red);
--status-customer-reply: var(--aws-warning-orange);
--status-fraud: var(--aws-text-dark);
--status-answered: var(--aws-accent-blue);
--status-expired: var(--aws-text-dark);
--status-grace: var(--aws-warning-orange);
--status-terminated: var(--aws-dark-gray-text);
--status-onhold: var(--aws-accent-blue);
--status-inprogress: var(--aws-accent-blue);
--status-closed: var(--aws-text-dark);
--status-paid: var(--aws-success-green);
--status-unpaid: var(--aws-danger-red);
--status-cancelled: var(--aws-dark-gray-text);
--status-collections: var(--aws-warning-orange);
--status-refunded: var(--aws-warning-orange);
--status-payment-pending: var(--aws-warning-orange);
--status-accepted: var(--aws-success-green);
--status-delivered: var(--aws-success-green);
--status-lost: var(--aws-text-dark);
--status-default: var(--aws-text-dark);
--status-warning: var(--aws-warning-orange);
/* Also map specific status types */
--status-type-operator: var(--label-info-bg);
--status-type-operator-text-color: var(--label-info-color);
--status-type-owner: var(--label-success-bg);
--status-type-owner-text-color: var(--label-success-color);
--status-type-authorizeduser: var(--label-default-bg);
--status-type-authorizeduser-text-color: var(--label-default-color);
--status-type-registereduser: var(--label-default-bg);
--status-type-registereduser-text-color: var(--label-default-color);
--status-type-guest: var(--label-default-bg);
--status-type-guest-text-color: var(--label-default-color);
--status-type-subacc: var(--label-default-bg);
--status-type-subacc-text-color: var(--label-default-color);
/* ===============================================================================
10. Icon and SVG Overrides
=============================================================================== */
/* --- General Icon Colors --- */
--svg-icon-color-base: var(--aws-accent-blue);
--svg-icon-color-lighter: #33BCD9;
--svg-icon-color-secondary: var(--aws-dark-gray-text);
--svg-icon-color-icon: var(--aws-text-light);
/* --- Icons on Dark/Primary Backgrounds --- */
--svg-icon-on-dark-color-secondary: var(--aws-dark-gray-text);
--svg-icon-on-primary-color-base: var(--aws-text-light);
--svg-icon-on-primary-color-lighter: rgba(240, 240, 240, 0.8);
--svg-icon-on-primary-color-secondary: var(--aws-dark-gray-text);
--svg-icon-on-primary-color-icon: var(--aws-text-light);
/* --- SVG Illustration Global Shadow --- */
--svg-illustration-shadow-color: rgba(0, 0, 0, 0.04);
--svg-illustration-shadow-opacity-start: 0.04;
/* --- SVG Graphics Backgrounds & Strokes --- */
--svg-graphic-bg-primary: var(--aws-accent-blue);
--svg-graphic-bg-secondary: var(--aws-dark-gray-text);
--svg-graphic-bg-body: var(--aws-white);
--svg-graphic-bg-browser-top: var(--aws-light-gray-bg);
--svg-graphic-bg-browser-actions: var(--aws-border-gray);
--svg-graphic-bg-browser-search: var(--aws-white);
--svg-graphic-bg-banner: var(--aws-light-gray-bg);
--svg-graphic-bg-faded: var(--aws-light-gray-bg);
--svg-graphic-bg-faded-2: var(--aws-border-gray);
--svg-graphic-bg-faded-3: #D0D4D4;
--svg-graphic-bg-white: var(--aws-white);
--svg-graphic-bg-green: var(--aws-success-green);
--svg-graphic-bg-red: var(--aws-danger-red);
--svg-graphic-bg-red-darker: var(--brand-danger-darker);
--svg-graphic-stroke-primary: var(--aws-accent-blue);
--svg-graphic-stroke-white: var(--aws-white);
--svg-graphic-stroke-faded: var(--aws-border-gray);
--svg-graphic-stroke-faded-2: var(--aws-border-gray);
/* --- Specific SVG Icon Colors (The second set in icons.css) --- */
--svg-icon-color-1: var(--aws-accent-blue);
--svg-icon-color-2: #33BCD9;
--svg-icon-color-3: var(--aws-dark-gray-text);
--svg-icon-color-4: var(--aws-text-light);
--svg-icon-color-5: var(--aws-border-gray);
--svg-icon-on-dark-color-1: var(--aws-text-light);
--svg-icon-on-dark-color-2: var(--aws-border-gray);
--svg-icon-on-dark-color-3: var(--aws-text-light);
--svg-icon-on-dark-color-4: var(--aws-accent-blue);
/* ===============================================================================
11. Site Specific Overrides
=============================================================================== */
/* --- Site Banner Background Shapes --- */
--svg-banner-primary-shape-left: transparent;
--svg-banner-primary-shape-right: transparent;
/* --- Site Banner Tile Navigation (if used within banners) --- */
--site-banner-tile-bg: var(--aws-white);
--site-banner-tile-color: var(--aws-text-dark);
/* --- General Site Section Backgrounds --- */
--site-section-bg: var(--aws-white);
--site-section-border-color: var(--aws-light-gray-bg);
/* --- Feature Box Backgrounds --- */
--feature-boxed-bg: var(--aws-white);
--feature-boxed-border: 1px solid var(--aws-border-gray);
--feature-boxed-shadow: var(--box-shadow-sm);
/* --- Site Text Typography --- */
--font-family-base: 'Open Sans', sans-serif;
/* If you prefer Roboto, uncomment this instead: */
/* --font-family-base: 'Roboto', sans-serif; */
--font-weight-light: 300;
--font-weight-base: 400;
--font-weight-medium: 600; /* Semi-bold for professionalism */
--font-weight-semi-bold: 700;
--font-weight-bold: 800;
--font-size-base: 0.95rem; /* Slightly smaller base font for enterprise feel */
--font-size-sm: 0.85rem;
--font-size-lg: 1.05rem;
--font-size-h1: 2.5rem;
--font-size-h2: 2rem;
--font-size-h3: 1.6rem;
--font-size-h4: 1.3rem;
--font-size-h5: 1.15rem;
--font-size-h6: 1rem;
--line-height-base: 1.55;
--line-height-lg: 1.65;
--line-height-heading: 1.2;
--site-text-font-size: var(--font-size-base);
--site-text-font-weight: var(--font-weight-base);
--site-text-line-height: var(--line-height-base);
--site-banner-title-font-size: var(--font-size-h1);
--site-banner-title-font-weight: var(--font-weight-bold);
--site-banner-desc-font-size: var(--font-size-lg);
--site-banner-desc-font-weight: var(--font-weight-base);
/* --- Browser Actions Dot Background --- */
--site-browser-actions-dot-bg: var(--aws-border-gray);
--site-shadow-default: var(--box-shadow-sm);
/* ===============================================================================
12. Layout Overrides
=============================================================================== */
/* --- Main Top Section (Below Header Nav) --- */
--main-top-bg: var(--aws-white);
--main-top-border-bottom: 1px solid var(--aws-border-gray);
--main-top-box-shadow: none;
/* --- Main Body Sidebar Content --- */
--main-body-sidebar-content-bg: var(--aws-white);
/* --- Main Header for Banner Layout --- */
--main-header-banner-bg: var(--aws-primary-dark-blue); /* Dark blue banner background */
/* Promo labels on banners */
--main-header-banner-save-label-bg: var(--aws-warning-orange);
--main-header-banner-save-label-color: var(--aws-text-light);
--main-header-banner-save-label-border: var(--aws-warning-orange);
/* --- Main Footer --- */
--main-footer-bg: var(--aws-primary-dark-blue); /* Dark blue footer */
--main-footer-border-top: none; /* Blends with header if dark */
--main-footer-box-shadow: none;
/* Footer Links */
--main-footer-link-color: var(--aws-text-light);
--main-footer-link-hover-color: var(--aws-accent-blue);
--main-footer-link-icon-color: var(--aws-text-light);
--main-footer-link-icon-hover-color: var(--aws-accent-blue);
/* Extended Footer Titles and Descriptions */
--main-footer-extended-title-color: var(--aws-text-light);
--main-footer-extended-desc-color: var(--aws-text-light);
/* --- Client Area Section Titles --- */
--ca-section-title-color: var(--aws-text-dark);
--ca-section-desc-color: var(--aws-dark-gray-text);
/* ===============================================================================
15. Client Area Active Menu/Tab Fix
=============================================================================== */
/* General active link backgrounds/colors used in lists and tabs */
--ui-nav-link-active-bg: var(--aws-accent-blue);
--ui-nav-link-active-color: var(--aws-text-light);
/* Specific overrides for active navigation pills/tabs if they exist */
--nav-pills-link-active-bg: var(--aws-accent-blue);
--nav-pills-link-active-color: var(--aws-text-light);
--nav-tabs-link-active-bg: var(--aws-accent-blue);
--nav-tabs-link-active-color: var(--aws-text-light);
/* Also apply to client area specific nav items (common in sidebars) */
--panel-sidebar-link-active-bg: var(--aws-accent-blue);
--panel-sidebar-link-active-color: var(--aws-text-light);
--panel-sidebar-link-active-icon-color: var(--aws-text-light);
/* For specific active list items that might look like pills/buttons */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
background-color: var(--aws-accent-blue) !important;
border-color: var(--aws-accent-blue) !important;
color: var(--aws-text-light) !important;
box-shadow: var(--box-shadow-xs); /* Subtle shadow for active state */
}
/* For links within active list group items */
.list-group-item.active a,
.list-group-item.active a:hover,
.list-group-item.active a:focus {
color: var(--aws-text-light) !important;
}
/* For active nav-pills */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
background-color: var(--aws-accent-blue) !important;
color: var(--aws-text-light) !important;
box-shadow: var(--box-shadow-xs);
}
/* ===============================================================================
18. Tab/Pill Navigation Refinement (Based on "Web Hosting" tabs)
Ensures inactive tabs are visible and follow a clean, functional style.
This section handles the inactive state appearance explicitly.
=============================================================================== */
/* General styling for nav links (tabs/pills) */
.nav-tabs .nav-link,
.nav-pills .nav-link {
background-color: transparent;
border-color: transparent;
color: var(--aws-text-dark);
font-weight: var(--font-weight-base);
padding: 0.7rem 1.1rem;
border-radius: 4px;
transition: all 0.2s ease-in-out;
}
/* Hover state for inactive tabs/pills */
.nav-tabs .nav-link:hover:not(.active),
.nav-pills .nav-link:hover:not(.active) {
background-color: var(--aws-light-gray-bg);
color: var(--aws-accent-blue) !important;
border-color: transparent;
}
/* Active state for tabs/pills (should already be good, but reinforcing) */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
background-color: var(--aws-accent-blue) !important;
color: var(--aws-text-light) !important;
border-color: var(--aws-accent-blue) !important;
font-weight: var(--font-weight-medium);
}
/* Also ensure the bottom border of the nav-tabs container is clean if it appears */
.nav-tabs {
border-bottom: 1px solid var(--aws-border-gray);
}
}
/* ===============================================================================
19. Direct CSS Rules (for elements not fully controlled by variables, or final polish)
=============================================================================== */
/* Ensure general body text color and font family are applied */
html, body {
color: var(--aws-text-dark);
font-family: var(--font-family-base);
line-height: var(--line-height-base);
background-color: var(--aws-light-gray-bg); /* Consistent page background */
}
/* Headings typography */
h1, .h1 { font-weight: var(--font-weight-bold); color: var(--aws-text-dark); line-height: var(--line-height-heading); }
h2, .h2 { font-weight: var(--font-weight-semi-bold); color: var(--aws-text-dark); line-height: var(--line-height-heading); }
h3, .h3 { font-weight: var(--font-weight-medium); color: var(--aws-text-dark); line-height: var(--line-height-heading); }
h4, .h4 { font-weight: var(--font-weight-medium); color: var(--aws-text-dark); line-height: var(--line-height-heading); }
h5, .h5 { font-weight: var(--font-weight-base); color: var(--aws-dark-gray-text); line-height: var(--line-height-heading); }
h6, .h6 { font-weight: var(--font-weight-base); color: var(--aws-dark-gray-text); line-height: var(--line-height-heading); }
/* Specific search bar button (common on homepage) */
.domain-search-form .btn-primary {
background-color: var(--aws-accent-blue);
border-color: var(--aws-accent-blue);
color: var(--aws-text-light); /* Light text on blue */
padding: 0.75rem 1.6rem;
border-radius: var(--btn-base-border-radius);
font-weight: var(--font-weight-semi-bold);
transition: var(--btn-transition);
}
.domain-search-form .btn-primary:hover {
background-color: #0082A2; /* Darker accent blue on hover */
border-color: #0082A2;
}
/* Ensure UI block backgrounds are consistently white with subtle borders/shadows */
.ui-block, .list-group, .panel-summary, .tile, .login-box, .panel-sidebar-list-group, .card {
background-color: var(--aws-white);
border: var(--ui-block-border);
box-shadow: var(--box-shadow-sm); /* Subtle shadow */
border-radius: 4px; /* Consistent rounding for blocks/cards */
}
/* Adjusting active state border for specific list groups (already handled by variable, reinforcing) */
.list-group-item.active {
border-color: var(--aws-accent-blue) !important;
}
/* Custom Line Between Top Utility Bar and Main Navigation */
.header-top, .top-bar, .app-nav-header-top {
border-bottom: 1px solid var(--aws-border-gray);
}
/* Fix for specific client area domain input button */
.client-home-panels .domain-register .input-group-btn-input-group-append.btn-default {
background-color: #EAEAEA !important; /* Light gray background */
border-color: #C8C8C8 !important; /* Standard gray border */
color: var(--aws-text-dark) !important; /* Dark text */
border-radius: var(--input-border-radius);
transition: var(--btn-transition);
}
/* Ensure hover state is also consistent */
.client-home-panels .domain-register .input-group-btn-input-group-append.btn-default:hover {
background-color: #D9D9D9 !important;
border-color: #B8B8B8 !important;
color: var(--aws-text-dark) !important;
}
/* General form control styling for consistency */
.form-control {
padding: 0.6rem 0.9rem;
height: auto;
line-height: var(--line-height-base);
border-radius: var(--input-border-radius);
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
background-color: var(--aws-white);
color: var(--aws-text-dark);
}
.form-control:focus {
border-color: var(--aws-accent-blue);
box-shadow: var(--input-focus-box-shadow);
}
/* Pricing Table Enhancements */
.pricing-table .price-box {
background-color: var(--aws-white);
border: var(--card-border);
border-radius: 4px;
box-shadow: var(--box-shadow-sm);
transition: all 0.2s ease-in-out;
}
.pricing-table .price-box:hover,
.pricing-table .price-box.featured,
.pricing-table .price-box.active {
border-color: var(--aws-accent-blue);
box-shadow: var(--box-shadow-base);
transform: translateY(-3px); /* Subtle lift */
}
.pricing-table .price-area {
background-color: var(--aws-light-gray-bg);
padding: 1.3rem;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 1px solid var(--aws-border-gray);
color: var(--aws-text-dark);
}
.pricing-table .price-box:hover .price-area,
.pricing-table .price-box.featured .price-area,
.pricing-table .price-box.active .price-area {
background-color: var(--aws-accent-blue); /* Accent blue for featured price */
color: var(--aws-text-light); /* Light text on blue background */
}
.pricing-table .price-title {
font-weight: var(--font-weight-semi-bold);
color: var(--aws-text-dark);
}
.pricing-table .price-box:hover .price-title,
.pricing-table .price-box.featured .price-title,
.pricing-table .price-box.active .price-title {
color: var(--aws-text-light); /* Light text on blue background */
}
.pricing-table .price-box .btn {
width: 90%;
margin: 1.2rem auto;
display: block;
font-weight: var(--font-weight-semi-bold);
color: var(--aws-text-light);
}
.pricing-table .list-group-item {
background-color: transparent;
border: none;
padding: 0.5rem 1.3rem;
font-size: var(--font-size-base);
color: var(--aws-text-dark);
}
.pricing-table .list-group-item i {
margin-right: 7px;
color: var(--aws-accent-blue); /* AWS Accent blue for feature icons */
}
/* Custom Scrollbar (Subtle, professional) */
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track {
background: #EAEAEA;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #C8C8C8;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--aws-accent-blue);
}
/* Specific styling for 'Powered by WHMCS' if present in footer */
#powered_by_whmcs {
color: var(--aws-text-light);
font-size: var(--font-size-sm);
opacity: 0.8;
text-align: center;
padding: 1rem 0;
background-color: var(--aws-primary-dark-blue);
}
#powered_by_whmcs a {
color: var(--aws-accent-blue);
font-weight: var(--font-weight-medium);
text-decoration: none;
}
#powered_by_whmcs a:hover {
text-decoration: underline;
}
/* --- AWS Specific Enhancements --- */
/* Global Body and Container Styling */
body {
font-size: var(--font-size-base);
color: var(--aws-text-dark);
}
/* Header Specifics: Top Bar (Utility Nav) */
/* Assuming Lagom has a top utility bar class like 'header-top-bar' or similar */
.header-top-bar, .top-bar-utility { /* Common Lagom classes, adjust if needed */
background-color: #1A242D; /* A slightly darker blue than main header */
color: var(--aws-text-light);
font-size: var(--font-size-sm);
padding: 0.5rem 0;
border-bottom: 1px solid rgba(255,255,255,0.05); /* Very subtle white line */
}
.header-top-bar a, .top-bar-utility a {
color: var(--aws-text-light);
opacity: 0.8;
text-decoration: none;
transition: all 0.2s ease-in-out;
}
.header-top-bar a:hover, .top-bar-utility a:hover {
color: var(--aws-accent-blue);
opacity: 1;
}
/* Main Navigation Bar (Primary Header) */
.app-nav-top {
height: 60px; /* Fixed height for a solid feel */
display: flex;
align-items: center;
padding: 0 20px; /* Consistent padding */
}
.app-nav-top .navbar-brand {
height: 100%; /* Ensure logo fits */
display: flex;
align-items: center;
}
.app-nav-top .navbar-brand img {
max-height: 40px; /* Adjust logo size */
width: auto;
}
/* Main Navigation Links (Primary Header) */
.app-nav-top-menu .nav-link {
padding: 0.75rem 1rem; /* More space around nav items */
font-weight: var(--font-weight-medium);
font-size: var(--font-size-base);
text-transform: capitalize; /* Standard casing */
transition: background-color 0.2s ease-in-out;
border-radius: 4px; /* Slight rounding on hover */
}
.app-nav-top-menu .nav-link:hover {
background-color: var(--aws-header-link-hover-bg); /* Subtle background on hover */
}
.app-nav-top-menu .nav-link.active {
background-color: var(--aws-header-link-hover-bg); /* Keep active background subtle */
color: var(--aws-accent-blue) !important; /* Accent blue for active link */
}
/* Sidebar Navigation (Client Area Sidebar) */
.panel-sidebar-list-group .list-group-item {
border: none; /* Remove default list item borders */
border-left: 3px solid transparent; /* For active state highlight */
padding: 10px 15px;
font-size: var(--font-size-base);
color: var(--aws-text-dark);
transition: all 0.2s ease-in-out;
}
.panel-sidebar-list-group .list-group-item:hover {
background-color: var(--aws-light-gray-bg);
color: var(--aws-accent-blue);
}
.panel-sidebar-list-group .list-group-item.active {
background-color: var(--aws-light-gray-bg) !important; /* Light background for active */
border-left-color: var(--aws-accent-blue) !important; /* AWS blue left border */
color: var(--aws-accent-blue) !important;
font-weight: var(--font-weight-medium);
}
.panel-sidebar-list-group .list-group-item.active .list-group-item-heading {
color: var(--aws-accent-blue) !important; /* Ensure heading text in active is blue */
}
/* Breadcrumbs (if present in Lagom) */
.breadcrumb {
background-color: transparent; /* No background */
padding: 15px 0; /* Consistent spacing */
margin-bottom: 20px;
border-bottom: 1px solid var(--aws-border-gray); /* Subtle separator */
border-radius: 0; /* Sharp edges */
}
.breadcrumb-item {
font-size: var(--font-size-sm);
color: var(--aws-dark-gray-text);
}
.breadcrumb-item a {
color: var(--aws-dark-gray-text);
text-decoration: none;
transition: color 0.2s ease-in-out;
}
.breadcrumb-item a:hover {
color: var(--aws-accent-blue);
}
.breadcrumb-item.active {
color: var(--aws-text-dark);
font-weight: var(--font-weight-medium);
}
/* Table Enhancements (for data presentation) */
.table {
font-size: var(--font-size-base);
color: var(--aws-text-dark);
border-collapse: collapse; /* Ensure borders are clean */
}
.table thead th {
background-color: var(--aws-light-gray-bg); /* Light gray header */
color: var(--aws-text-dark);
font-weight: var(--font-weight-medium);
border-bottom: 1px solid var(--aws-border-gray);
padding: 12px 15px;
text-transform: uppercase; /* Common in AWS tables */
font-size: var(--font-size-sm);
letter-spacing: 0.02em;
}
.table tbody td {
padding: 10px 15px;
border-top: 1px solid var(--aws-border-gray);
}
.table-hover tbody tr:hover {
background-color: var(--aws-light-gray-bg); /* Subtle row hover */
}
/* Form Group Enhancements */
.form-group label {
font-weight: var(--font-weight-medium);
color: var(--aws-text-dark);
margin-bottom: 5px;
font-size: var(--font-size-base);
}
.form-control {
border: 1px solid var(--aws-border-gray);
padding: 0.7rem 1rem; /* Consistent padding */
height: auto; /* Allow natural height */
box-shadow: none; /* No internal shadows */
transition: border-color 0.2s ease-in-out;
}
.form-control:focus {
border-color: var(--aws-accent-blue);
box-shadow: 0 0 0 0.25rem rgba(0, 161, 201, 0.25); /* Accent blue focus ring */
}
select.form-control {
-webkit-appearance: none; /* Remove default dropdown arrow */
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); /* Custom SVG arrow */
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 0.65em 0.65em;
padding-right: 2.5rem; /* Space for custom arrow */
}
/* Loader/Spinner Styling (if Lagom uses a simple spinner) */
.loader-spinner, .overlay-spinner { /* Common classes for loaders */
border-color: var(--aws-accent-blue) var(--aws-light-gray-bg) var(--aws-accent-blue) var(--aws-light-gray-bg);
/* Adjust spinner colors to match AWS blue */
}
.fullpage-overlay .msg {
color: var(--aws-text-dark);
}
/* Client Area Dashboard Widgets (e.g., panel-summary, tile) */
.panel-summary, .tile {
border: 1px solid var(--aws-border-gray);
box-shadow: var(--box-shadow-sm);
border-radius: 4px;
transition: all 0.2s ease-in-out;
}
.panel-summary:hover, .tile:hover {
border-color: var(--aws-accent-blue);
box-shadow: var(--box-shadow-base);
}
.panel-summary .panel-heading, .tile .panel-heading {
background-color: var(--aws-white); /* Ensure heading is white */
border-bottom: 1px solid var(--aws-border-gray);
color: var(--aws-text-dark);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-base);
padding: 12px 15px;
}
.panel-summary .panel-body, .tile .panel-body {
padding: 15px;
}
/* Alerts and Notifications */
.alert {
border-left: 4px solid; /* Stronger left border for alerts */
border-radius: 4px;
padding: 15px 20px;
}
.alert-success { border-color: var(--aws-success-green); }
.alert-info { border-color: var(--aws-accent-blue); }
.alert-warning { border-color: var(--aws-warning-orange); }
.alert-danger { border-color: var(--aws-danger-red); }
/* Footer specific icon color (from default.tpl) */
.main-footer .footer-icon svg path {
fill: var(--aws-dark-gray-text); /* Ensure the SVG arrow is dark gray */
}
.main-footer .footer-icon:hover svg path {
fill: var(--aws-accent-blue); /* Accent blue on hover */
}
/* Override Lagom's default 'lm' icons if they are SVGs and don't match */
.lm {
color: var(--aws-dark-gray-text); /* Default icon color */
}
a .lm, button .lm {
color: inherit; /* Inherit from parent link/button */
}
a:hover .lm, button:hover .lm {
color: var(--aws-accent-blue); /* Accent blue on hover */
}
/* --- TICKET TITLE & BREADCRUMBS FIX (AWS Specific Enhancements) --- */
/* This targets the main content header area where the ticket title and breadcrumbs reside.
Lagom often uses a class like 'main-top' or 'page-header' for this.
Based on your screenshot, it seems to be a section that might have a default blue background. */
.main-top, .page-header-container, .client-area-header { /* Common Lagom classes for this area */
background-color: var(--aws-white) !important; /* Force white background */
padding: 20px 0; /* Add some vertical padding */
border-bottom: 1px solid var(--aws-border-gray); /* Subtle separator line */
box-shadow: none !important; /* Remove any lingering shadows */
}
/* Ensure the title text is dark and prominent */
.main-top h1, .page-header-container h1, .client-area-header h1,
.main-top .page-title, .page-header-container .page-title, .client-area-header .page-title {
font-size: var(--font-size-h2); /* Make it a clear heading size */
font-weight: var(--font-weight-semi-bold);
color: var(--aws-text-dark);
margin-bottom: 10px; /* Space between title and breadcrumbs */
}
/* Adjust breadcrumb styling within this area */
.main-top .breadcrumb, .page-header-container .breadcrumb, .client-area-header .breadcrumb {
background-color: transparent !important; /* Ensure no background */
padding: 0; /* Remove extra padding if inherited */
margin-bottom: 0; /* No margin below breadcrumbs */
border-bottom: none !important; /* Remove any specific breadcrumb border */
}
.main-top .breadcrumb-item, .page-header-container .breadcrumb-item, .client-area-header .breadcrumb-item {
font-size: var(--font-size-sm);
color: var(--aws-dark-gray-text); /* Muted color for non-active breadcrumbs */
}
.main-top .breadcrumb-item a, .page-header-container .breadcrumb-item a, .client-area-header .breadcrumb-item a {
color: var(--aws-dark-gray-text);
text-decoration: none;
}
.main-top .breadcrumb-item a:hover, .page-header-container .breadcrumb-item a:hover, .client-area-header .breadcrumb-item a:hover {
color: var(--aws-accent-blue);
text-decoration: underline;
}
.main-top .breadcrumb-item.active, .page-header-container .breadcrumb-item.active, .client-area-header .breadcrumb-item.active {
color: var(--aws-text-dark);
font-weight: var(--font-weight-medium);
}
/* Specific styling for the breadcrumb links (Portal Home, Client Area, etc.) */
/* These are likely anchor tags within the breadcrumb, which might have their own styling */
.main-top .breadcrumb a, .page-header-container .breadcrumb a, .client-area-header .breadcrumb a {
color: var(--aws-dark-gray-text); /* Ensure links are dark gray */
text-decoration: none;
}
.main-top .breadcrumb a:hover, .page-header-container .breadcrumb a:hover, .client-area-header .breadcrumb a:hover {
color: var(--aws-accent-blue); /* Accent blue on hover */
text-decoration: underline;
}
.main-top .breadcrumb .active, .page-header-container .breadcrumb .active, .client-area-header .breadcrumb .active {
color: var(--aws-text-dark); /* Active breadcrumb text is dark */
font-weight: var(--font-weight-medium);
}
/* --- FURTHER AWS STYLING ENHANCEMENTS --- */
/* Global Spacing Refinements */
/* Adjust main content padding for a more structured feel */
.main-content-area {
padding: 30px 0; /* Consistent vertical padding for main content */
}
.container {
/* AWS often uses fixed-width containers for consistency, but Lagom is responsive.
Ensure max-width is sensible for large screens and padding is consistent. */
padding-left: 20px;
padding-right: 20px;
}
/* Card/Panel Header & Body Distinction */
.panel > .panel-heading, .card > .card-header {
background-color: var(--aws-white); /* Always white for headings */
border-bottom: 1px solid var(--aws-border-gray);
color: var(--aws-text-dark);
font-weight: var(--font-weight-medium);
padding: 15px 20px; /* Generous padding */
font-size: var(--font-size-base);
}
.panel > .panel-body, .card > .card-body {
padding: 20px; /* Consistent padding inside the body */
}
.panel-default > .panel-heading { /* Specific for default panels */
background-color: var(--aws-white);
color: var(--aws-text-dark);
}
/* Input Group & Search Bar Refinement */
.input-group .form-control {
border-right: none; /* Remove right border for input group control */
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group .input-group-addon, .input-group .input-group-btn .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group .input-group-addon {
background-color: var(--aws-light-gray-bg);
border: 1px solid var(--aws-border-gray);
color: var(--aws-dark-gray-text);
padding: 0.6rem 1rem;
}
.input-group .input-group-btn .btn-default {
background-color: var(--aws-light-gray-bg) !important;
border-color: var(--aws-border-gray) !important;
color: var(--aws-text-dark) !important;
}
.input-group .input-group-btn .btn-default:hover {
background-color: #E0E4E4 !important; /* Slightly darker hover */
}
/* Specific Search Input Styling (e.g., in header search or domain search) */
.header-search-form .form-control, .domain-search-form .form-control {
border-radius: 4px; /* Slightly more rounded for search inputs */
padding: 8px 12px;
}
.header-search-form .btn-primary, .domain-search-form .btn-primary {
border-radius: 4px;
}
/* Table Enhancements - Striped Rows & Hover */
.table-striped tbody tr:nth-of-type(odd) {
background-color: var(--aws-light-gray-bg); /* Use light gray for striped rows */
}
.table-hover tbody tr:hover {
background-color: #E0E4E4; /* Slightly darker hover for rows */
}
/* Progress/Status Indicators */
.progress {
height: 10px; /* Thinner progress bars */
border-radius: 5px;
background-color: var(--aws-light-gray-bg);
box-shadow: none;
}
.progress-bar {
background-color: var(--aws-accent-blue);
box-shadow: none;
}
.progress-bar-success { background-color: var(--aws-success-green); }
.progress-bar-warning { background-color: var(--aws-warning-orange); }
.progress-bar-danger { background-color: var(--aws-danger-red); }
/* Badges (labels) for statuses */
.badge {
padding: 0.3em 0.6em;
font-size: 85%;
font-weight: var(--font-weight-medium);
border-radius: 3px;
text-transform: uppercase;
}
.badge-primary { /* Primary badge will be accent blue */
background-color: var(--aws-accent-blue);
color: var(--aws-text-light);
}
.badge-success {
background-color: var(--aws-success-green);
color: var(--aws-text-light);
}
.badge-info {
background-color: var(--aws-accent-blue); /* Info badge also accent blue */
color: var(--aws-text-light);
}
.badge-warning {
background-color: var(--aws-warning-orange);
color: var(--aws-text-light);
}
.badge-danger {
background-color: var(--aws-danger-red);
color: var(--aws-text-light);
}
/* Loader/Spinner (more specific to AWS style) */
/* Assuming Lagom uses a simple border-based spinner */
.loader-spinner, .overlay-spinner {
border: 3px solid var(--aws-light-gray-bg); /* Light gray base */
border-top: 3px solid var(--aws-accent-blue); /* AWS blue top */
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Modals - Header and Footer consistency */
.modal-header {
background-color: var(--aws-white);
border-bottom: 1px solid var(--aws-border-gray);
padding: 15px 20px;
}
.modal-header .close {
color: var(--aws-dark-gray-text);
opacity: 1;
font-size: 1.5rem;
line-height: 1;
}
.modal-header .close:hover {
color: var(--aws-accent-blue);
}
.modal-footer {
background-color: var(--aws-white);
border-top: 1px solid var(--aws-border-gray);
padding: 15px 20px;
}
.modal-title {
color: var(--aws-text-dark);
font-weight: var(--font-weight-semi-bold);
font-size: var(--font-size-h4);
}
/* Client Area Navigation (Tabs/Pills) */
/* Ensure active tabs are clearly defined */
.nav-tabs .nav-link.active, .nav-pills .nav-link.active {
background-color: var(--aws-accent-blue) !important;
color: var(--aws-text-light) !important;
border-color: var(--aws-accent-blue) !important;
font-weight: var(--font-weight-medium);
}
.nav-tabs .nav-link, .nav-pills .nav-link {
border: 1px solid transparent; /* Give them a transparent border to prevent layout shift on hover */
}
.nav-tabs .nav-link:hover:not(.active), .nav-pills .nav-link:hover:not(.active) {
background-color: var(--aws-light-gray-bg);
border-color: var(--aws-border-gray); /* Border on hover */
}
/* Footer Links - Column Titles */
.main-footer-extended .footer-title {
color: var(--aws-text-light); /* Ensure titles are light on dark footer */
font-weight: var(--font-weight-semi-bold);
font-size: var(--font-size-base);
margin-bottom: 10px;
}
.main-footer-extended .footer-nav li a {
color: var(--aws-text-light);
opacity: 0.8;
transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}
.main-footer-extended .footer-nav li a:hover {
opacity: 1;
color: var(--aws-accent-blue);
}
/* Mobile specific adjustments for header */
@media (max-width: 767.98px) {
.app-nav-top {
height: 50px; /* Slightly smaller header on mobile */
padding: 0 15px;
}
.app-nav-top .navbar-brand img {
max-height: 35px;
}
.main-top, .page-header-container, .client-area-header {
padding: 15px 15px; /* Adjust padding for mobile */
}
.main-top h1, .page-header-container h1, .client-area-header h1,
.main-top .page-title, .page-header-container .page-title, .client-area-header .page-title {
font-size: var(--font-size-h3); /* Smaller title on mobile */
}
.panel-sidebar-list-group .list-group-item {
padding: 8px 10px; /* Tighter sidebar items on mobile */
font-size: var(--font-size-sm);
}
}