/* ==========================================================
Agile AI University
Student & Executive Portal

File      : portal.css
Version   : 1.5.0
Status    : ACTIVE
Phase     : Sprint 2A

Changes
--------------------------------------------------

• Introduced centralized executive shell imports

• Migrated portal cards to design tokens

• Migrated buttons to design tokens

• Migrated authentication inputs to design tokens

• Prepared stylesheet for Executive Dashboard

Scope:

* Portal Landing Page
* Authentication Experience
* Authenticated User Experience
* University Services Panel
* Future Dashboard Expansion

Depends On:

* site.css

Governance Notes:

* Light Theme Default
* Theme Toggle Removed
* Institutional Presentation Standard
* Responsive Two-Column Layout
* Content-Driven Card Heights
* Governance-Clean Release

========================================================== */

/* ==========================================================
   Executive Portal Components
========================================================== */

@import url("./components/shell.css");
@import url("./components/sidebar.css");
@import url("./components/toolbar.css");
@import url("./components/cards.css");

/* ==========================================================
PAGE LAYOUT
========================================================== */

.portal-home {
max-width: none;
width:100%;
margin: 0;
padding: 40px;
}

/* ==========================================================
HERO
========================================================== */

.portal-hero {
max-width: 900px;
margin-bottom: 40px;
}

.portal-content h1 {
    margin: 0 0 16px;

    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: -0.02em;

    color: var(--text-primary);
}

.portal-content p {
    margin: 0;

    max-width: 700px;

    font-size: 1rem;
    line-height: 1.7;

    color:var(--text-secondary);
}

/* ==========================================================
PORTAL GRID
========================================================== */

.portal-grid {
    display: grid;

    grid-template-columns:
        minmax(380px, 460px)
        minmax(360px, 1fr);

gap: 32px;

align-items: start;
}

/* ==========================================================
UNIVERSITY SERVICES PANEL
========================================================== */

.portal-services {
align-self: start;
}

.portal-services ul {
margin: 0;
padding-left: 20px;

display: grid;
grid-template-columns: repeat(2, 1fr);

gap: 12px 24px;
}

.portal-services li {
margin: 0;

color: var(--text-secondary);
line-height: 1.6;
}

/* ==========================================================
AUTHENTICATION
========================================================== */

#statusText {
margin-bottom: 20px;
color: var(--text-secondary);
}

.auth-box {
display: flex;
flex-direction: column;

gap: 10px;
}

.auth-box input {
height: 42px;

padding: 0 14px;

border: 1px solid var(--border-default);
border-radius: 8px;

font-size: 0.9rem;
}

.auth-box input:focus {
outline: none;
border-color: var(--border-focus);
}

.divider {
margin: 20px 0;

text-align: center;

color: var(--text-muted);
}

.status-message {
min-height: 20px;

margin: 0;

font-size: 0.85rem;

color: var(--text-secondary);
}

/* ==========================================================
BUTTONS
========================================================== */

.btn {
display: inline-flex;
align-items: center;
justify-content: center;

min-height: 40px;

padding: 0 18px;

border: none;
border-radius: 8px;

cursor: pointer;

text-decoration: none;

font-size: 0.9rem;
font-weight: 600;

transition: var(--transition-fast);
}

.btn:hover {
transform: translateY(-1px);
}

#btnGoogle,
#btnEmailLink {
    width: 100%;
    max-width: 360px;

margin-left: auto;
margin-right: auto;

background:var(--brand-primary);
color: #ffffff;
}

#btnGoogle:hover,
#btnEmailLink:hover {
color: var(--brand-primary-hover);
}

#btnSignOut {
background:var(--button-secondary);
color: #ffffff;
}

/* ==========================================================
AUTHENTICATED USER EXPERIENCE
========================================================== */

.user-name {
margin-bottom: 8px;
}

.user-email {
margin-bottom: 24px;
color: var(--text-secondary);

}

.portal-actions {
display: flex;
flex-wrap: wrap;

gap: 12px;

margin-bottom: 24px;
}

.portal-actions .btn {
min-width: 220px;

background:var(--brand-accent);
color: #ffffff;
}

.note {
margin-top: 16px;
color: var(--text-secondary);
}

/* ==========================================================
FUTURE DASHBOARD SUPPORT
========================================================== */

.portal-card-grid {
display: grid;

grid-template-columns:
repeat(auto-fit, minmax(280px, 1fr));

gap: 20px;
}

/* ==========================================================
HELP TEXT
========================================================== */

.portal-help {
margin-top: 16px;

font-size: 0.85rem;
line-height: 1.6;

color:var(--text-secondary);

text-align: center;
}

/* ==========================================================
OPTIONAL FUTURE SERVICES SECTIONS
========================================================== */

.portal-services hr {
margin: 24px 0;

border: 0;
border-top:1px solid var(--border-default);
}

.portal-services h3 {
margin: 0 0 16px;

font-size: 1rem;
font-weight: 700;

color:var(--text-secondary);

text-transform: uppercase;
letter-spacing: 0.05em;
}

/* ==========================================================
RESPONSIVE
========================================================== */

@media (max-width: 1024px) {

.portal-grid {
grid-template-columns: 1fr;
}

}

@media (max-width: 768px) {

.portal-home {
padding: 40px 20px 64px;
}

.portal-content h1 {
font-size: 2.5rem;
}

.portal-services ul {
grid-template-columns: 1fr;
}

.portal-actions {
flex-direction: column;
}

.portal-actions .btn {
width: 100%;
min-width: auto;
}

}

/* ==================================================
   Unauthorized Access
   ================================================== */

.access-card {
  max-width: 720px;
  margin: 60px auto;
}