/* Gray-theme overrides specific to pages running Ext JS 3.3.1 (every osg
   app page as of the grocery-list.php migration).

   xtheme-gray-extend.css (now loaded from the ext-3.3.1 CDN) is
   deliberately NOT the home for this: it's a straight copy of this app's
   original custom theme file, kept as plain CSS/image asset overrides
   with no framework-version coupling of its own -- this file is only for
   rules that exist *because* of something specific to the 3.3.1 pages. */

/* Ext.MessageBox (alert/confirm/etc, e.g. the "Demo Button" and delete-
   confirmation popups) renders as a .x-window-dlg window. Its body has no
   background of its own in core ext-all.css (background:transparent),
   which left it showing plain white instead of the app's usual gray.
   #E8E8E8 to match app-modal-window below, so every popup in the app
   (MessageBox included) uses the same shade. */
.x-window-dlg .x-window-body {
    background-color: #E8E8E8 !important;
}

/* Same fix as app-modal-window below, for Ext.MessageBox's own window
   (already carrying the stock .x-window-dlg class, so no cls tag
   needed here). Its frame pieces render via the same PNG sprites as
   any other Ext.Window and had the same white-instead-of-gray problem. */
.x-window-dlg .x-window-tl,
.x-window-dlg .x-window-tc,
.x-window-dlg .x-window-tr,
.x-window-dlg .x-window-ml,
.x-window-dlg .x-window-mr,
.x-window-dlg .x-window-bl,
.x-window-dlg .x-window-bc,
.x-window-dlg .x-window-br {
    background-color: #E8E8E8 !important;
}

/* This app's Ext.Window modals (register-form-modal.js,
   account-info-form.js's Account Information) tag themselves
   cls:'app-modal-window'. Their frame pieces
   (x-window-tl/tc/tr/ml/mr/bl/bc/br) render via PNG sprite images from
   xtheme-gray-extend.css (images/gray-extend/window/*.png).
   x-window-mc, the body wrapper those pieces surround, already gets a
   solid #E8E8E8 straight from that same theme file and isn't affected
   -- this is only the frame around it, reported as showing white
   instead of gray on the register window and on Account Information
   (opened from grocery-list.php, add-item.php and find-item.php). Give
   it a solid #E8E8E8 fallback so the frame stays consistent regardless
   of whether those sprite images load. */
.app-modal-window.x-window,
.app-modal-window .x-window-tl,
.app-modal-window .x-window-tc,
.app-modal-window .x-window-tr,
.app-modal-window .x-window-ml,
.app-modal-window .x-window-mr,
.app-modal-window .x-window-bl,
.app-modal-window .x-window-bc,
.app-modal-window .x-window-br {
    background-color: #E8E8E8 !important;
}

/* Panel-frame equivalent of the app-modal-window fix above, for framed
   (frame:true) panels rather than Ext.Window modals -- currently just
   find-item.js's "Find an Item" search panel (cls:'app-framed-panel').
   Its frame pieces (x-panel-tl/tc/tr/ml/mr/bl/bc/br) render via GIF
   sprite images from xtheme-gray-extend.css
   (images/gray-extend/panel/*.gif); x-panel-mc, the body wrapper those
   pieces surround, already gets a solid #F1F1F1 straight from that
   same theme file and isn't affected. */
.app-framed-panel .x-panel-tl,
.app-framed-panel .x-panel-tc,
.app-framed-panel .x-panel-tr,
.app-framed-panel .x-panel-ml,
.app-framed-panel .x-panel-mr,
.app-framed-panel .x-panel-bl,
.app-framed-panel .x-panel-bc,
.app-framed-panel .x-panel-br {
    background-color: #F1F1F1 !important;
}