/* ============================================================
   PressONE Portal – Modern UI Override (Brand Colors)
   Drop into PORTAL_CSS_CUSTOM config
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@400;500;600;700&display=swap');

:root {
  --p1-purple:      #45166A;
  --p1-purple-mid:  #8154A4;
  --p1-purple-lt:   #AE8CC8;
  --p1-purple-bg:   #f3eef7;
  --p1-gold:        #FAA633;
  --p1-orange:      #FF8200;
  --p1-text:        #363636;
  --p1-text-muted:  #6b7280;
  --p1-border:      #e5e0eb;
  --p1-bg:          #f7f5f9;
  --p1-card:        #ffffff;
  --p1-danger:      #ef4444;
  --p1-radius:      10px;
  --p1-radius-sm:   6px;
  --p1-shadow:      0 1px 3px rgba(69,22,106,.06), 0 1px 2px rgba(69,22,106,.04);
  --p1-shadow-md:   0 4px 12px rgba(69,22,106,.1);
  --p1-transition:  .2s ease;
}

/* 1. GLOBAL */
body { background: var(--p1-bg) !important; color: var(--p1-text) !important; font-family: "Encode Sans", "Segoe UI", -apple-system, sans-serif !important; font-size: 14px !important; line-height: 1.55 !important; -webkit-font-smoothing: antialiased; }
a { color: var(--p1-purple) !important; text-decoration: none !important; transition: color var(--p1-transition); }
a:hover { color: var(--p1-purple-mid) !important; }
h1,h2,h3,h4,h5 { font-family: "Encode Sans", sans-serif !important; font-weight: 700 !important; color: var(--p1-purple) !important; }

/* 2. HEADER */
#header { background: var(--p1-card) !important; box-shadow: var(--p1-shadow) !important; position: relative; z-index: 100; }
#header-logo { padding: 12px 0 8px !important; }
#header-user { padding: 10px 0 0 !important; font-size: 13px !important; color: var(--p1-text-muted) !important; }
#header-user a { color: var(--p1-text-muted) !important; font-weight: 500 !important; }
#header-user a:hover { color: var(--p1-purple) !important; }

/* 3. NAV BUTTONS */
#navigation { padding: 10px 0 4px !important; display: flex !important; justify-content: center !important; gap: 6px !important; background: var(--p1-card) !important; }
#navigation a { display: inline-flex !important; flex-direction: column !important; align-items: center !important; padding: 4px 8px 6px !important; border-radius: var(--p1-radius) !important; transition: background var(--p1-transition) !important; text-decoration: none !important; }

/* Hide old sprite tiles – JS replaces with Bootstrap Icons */
.nav-button.btn, .nav-button { display: none !important; }
.nav-bg-image { display: none !important; }

/* New icon container (injected by JS) */
.p1-nav-icon { width: 52px !important; height: 52px !important; border-radius: 14px !important; background: var(--p1-purple-bg) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 24px !important; color: var(--p1-purple) !important; transition: all var(--p1-transition) !important; }
#navigation a:hover .p1-nav-icon { background: var(--p1-purple) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(69,22,106,.25) !important; }
#navigation a.p1-active .p1-nav-icon { background: var(--p1-purple) !important; color: var(--p1-gold) !important; box-shadow: 0 4px 14px rgba(69,22,106,.3) !important; }

.nav-arrow { display: none !important; }

.nav-text { font-size: 11px !important; font-weight: 600 !important; color: var(--p1-text-muted) !important; margin-top: 5px !important; letter-spacing: .02em !important; text-align: center !important; line-height: 1.25 !important; height: auto !important; }
#navigation a:hover .nav-text { color: var(--p1-purple) !important; }
#navigation a.p1-active .nav-text { color: var(--p1-purple) !important; font-weight: 700 !important; }

/* 4. SUBBAR */
#navigation-subbar, .navigation-subbar { background: var(--p1-purple) !important; height: auto !important; min-height: 42px !important; padding: 0 20px !important; display: flex !important; align-items: center !important; color: #fff !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .02em !important; box-shadow: 0 2px 6px rgba(69,22,106,.2) !important; }
#navigation-subbar a, .navigation-subbar a { color: rgba(255,255,255,.85) !important; }
#navigation-subbar a:hover, .navigation-subbar a:hover { color: var(--p1-gold) !important; }
.triangle-container, [class*="triangle"] { display: none !important; }

/* 5. LAYOUT */
.page-container { padding: 0 40px !important; }
#content { padding: 20px 10px !important; }

/* 6. SEARCH */
.action-container-left input[type="text"], .action-container-left input[type="search"], .toolbar-search-panel input { border: 1px solid var(--p1-border) !important; border-radius: var(--p1-radius-sm) !important; padding: 8px 12px !important; font-size: 13.5px !important; background: var(--p1-card) !important; outline: none !important; min-width: 260px !important; }
.action-container-left input:focus, .toolbar-search-panel input:focus { border-color: var(--p1-purple-mid) !important; box-shadow: 0 0 0 3px rgba(69,22,106,.1) !important; }

/* 7. BUTTONS */
.btn { font-family: "Encode Sans", sans-serif !important; border-radius: var(--p1-radius-sm) !important; padding: 7px 16px !important; font-size: 13px !important; font-weight: 600 !important; border: 1px solid transparent !important; transition: all var(--p1-transition) !important; letter-spacing: .02em !important; text-transform: uppercase !important; }
.btn-primary, .btn[class*="btn-primary"], .action-container-right .btn { background: var(--p1-gold) !important; color: var(--p1-purple) !important; border-color: var(--p1-gold) !important; box-shadow: 0 1px 3px rgba(250,166,51,.3) !important; }
.btn-primary:hover, .btn[class*="btn-primary"]:hover, .action-container-right .btn:hover { background: var(--p1-orange) !important; border-color: var(--p1-orange) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(255,130,0,.35) !important; transform: translateY(-1px); }
.btn-default, .btn-secondary { background: var(--p1-card) !important; color: var(--p1-text) !important; border-color: var(--p1-border) !important; }
.btn-default:hover, .btn-secondary:hover { background: var(--p1-purple-bg) !important; border-color: var(--p1-purple-lt) !important; color: var(--p1-purple) !important; }
.btn-mini, .btn-sm { padding: 4px 10px !important; font-size: 11px !important; }
.btn-danger { background: var(--p1-danger) !important; color: #fff !important; border-color: var(--p1-danger) !important; }

/* 8. PANELS */
.domains-panel-main, .panel, .panel-default, [class*="panel-main"] { background: var(--p1-card) !important; border: 1px solid var(--p1-border) !important; border-radius: var(--p1-radius) !important; box-shadow: var(--p1-shadow) !important; overflow: hidden !important; }
.panel-heading { background: var(--p1-purple-bg) !important; border-bottom: 1px solid var(--p1-border) !important; padding: 12px 16px !important; font-weight: 600 !important; color: var(--p1-purple) !important; }

/* 9. TABLES */
table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; }
table thead th, table th { background: var(--p1-purple-bg) !important; color: var(--p1-purple) !important; font-size: 11.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; padding: 10px 14px !important; border-bottom: 2px solid var(--p1-border) !important; white-space: nowrap !important; }
table tbody td, table td { padding: 11px 14px !important; border-bottom: 1px solid var(--p1-border) !important; font-size: 13.5px !important; color: var(--p1-text) !important; vertical-align: middle !important; }
table tbody tr:hover { background: var(--p1-purple-bg) !important; }
table tbody tr:nth-child(even) { background: rgba(243,238,247,.4) !important; }
table tbody tr:nth-child(even):hover { background: var(--p1-purple-bg) !important; }
table td a { font-weight: 500 !important; color: var(--p1-purple) !important; }
table td a:hover { color: var(--p1-purple-mid) !important; }

/* 10. BADGES */
.label, .badge, table .label { font-size: 10px !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 20px !important; text-transform: uppercase !important; letter-spacing: .05em !important; }
.label-default { background: #ede8f2 !important; color: var(--p1-purple-mid) !important; }
.label-success { background: #d1fae5 !important; color: #065f46 !important; }
.label-warning { background: #fef3c7 !important; color: #92400e !important; }
.label-danger, .label-important { background: #fee2e2 !important; color: #991b1b !important; }

/* 11. ROW ICONS */
table td [class*="icon-"] { opacity: .35 !important; transition: opacity var(--p1-transition), color var(--p1-transition) !important; font-size: 14px !important; }
table tr:hover td [class*="icon-"] { opacity: .65 !important; }
table td [class*="icon-"]:hover { opacity: 1 !important; color: var(--p1-purple) !important; }
table td .icon-remove:hover { color: var(--p1-danger) !important; }

/* 12. FORMS */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], textarea, select, .form-control { font-family: "Encode Sans", sans-serif !important; border: 1px solid var(--p1-border) !important; border-radius: var(--p1-radius-sm) !important; padding: 7px 11px !important; font-size: 13.5px !important; color: var(--p1-text) !important; background: var(--p1-card) !important; outline: none !important; }
input:focus, textarea:focus, select:focus, .form-control:focus { border-color: var(--p1-purple-mid) !important; box-shadow: 0 0 0 3px rgba(69,22,106,.1) !important; }

/* 13. MODALS */
.modal-content { border-radius: var(--p1-radius) !important; box-shadow: var(--p1-shadow-md) !important; border: none !important; overflow: hidden !important; }
.modal-header { background: var(--p1-purple-bg) !important; border-bottom: 1px solid var(--p1-border) !important; padding: 14px 20px !important; }
.modal-header h3, .modal-header h4, .modal-header .modal-title { font-size: 16px !important; font-weight: 700 !important; color: var(--p1-purple) !important; }
.modal-body { padding: 20px !important; }
.modal-footer { background: var(--p1-purple-bg) !important; border-top: 1px solid var(--p1-border) !important; padding: 12px 20px !important; }
.modal-backdrop { background: rgba(69,22,106,.35) !important; }

/* 14. DROPDOWNS */
.dropdown-menu { border: 1px solid var(--p1-border) !important; border-radius: var(--p1-radius-sm) !important; box-shadow: var(--p1-shadow-md) !important; padding: 4px !important; }
.dropdown-menu > li > a { padding: 8px 14px !important; font-size: 13px !important; border-radius: 4px !important; color: var(--p1-text) !important; }
.dropdown-menu > li > a:hover { background: var(--p1-purple-bg) !important; color: var(--p1-purple) !important; }

/* 15. PAGINATION */
.pagination li a, .pagination li span { border: 1px solid var(--p1-border) !important; border-radius: var(--p1-radius-sm) !important; padding: 6px 12px !important; margin: 0 2px !important; }
.pagination li.active a, .pagination li.active span { background: var(--p1-purple) !important; border-color: var(--p1-purple) !important; color: #fff !important; }
.pagination li a:hover { background: var(--p1-purple-bg) !important; }

/* 16. ALERTS */
.alert { border-radius: var(--p1-radius-sm) !important; border: none !important; padding: 12px 16px !important; }
.alert-info { background: var(--p1-purple-bg) !important; color: var(--p1-purple) !important; }
.alert-success { background: #d1fae5 !important; color: #065f46 !important; }
.alert-warning { background: #fef3c7 !important; color: #92400e !important; }
.alert-danger, .alert-error { background: #fee2e2 !important; color: #991b1b !important; }

/* 17. MISC */
#footer { color: var(--p1-text-muted) !important; font-size: 12px !important; padding: 16px 0 !important; border-top: 1px solid var(--p1-border) !important; margin-top: 24px !important; }
.dock-contacts-header { background: var(--p1-purple) !important; border-radius: var(--p1-radius-sm) var(--p1-radius-sm) 0 0 !important; color: #fff !important; font-weight: 600 !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--p1-bg); }
::-webkit-scrollbar-thumb { background: var(--p1-purple-lt); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--p1-purple-mid); }
a, .btn, input, select, textarea, table tr, .dropdown-menu > li > a, .p1-nav-icon { transition: all var(--p1-transition) !important; }
hr { border-color: var(--p1-border) !important; }
.tooltip-inner { border-radius: var(--p1-radius-sm) !important; font-size: 12px !important; padding: 6px 10px !important; background: var(--p1-purple) !important; }